# Użycie w projekcie

## Wymagane pakiety

- `vue`
- `@witkac\jschema`
- `@vueuse\core`
- `axios`

## Rejestracja globalna komponentów (bez `w-monaco` i `w-wysiwyg`)

`main.ts`

```TypeScript
import { createApp } from "vue";

import { vue3ComponentsPlugin } from "@witkac/vue3-components/plugin";

const app = createApp(App);

app.use(vue3ComponentsPlugin);

```

## Typowanie globalnych komponentów

`global.d.ts`

```TypeScript
import type { Vue3Components } from "@witkac/vue3-components";
declare module "vue" {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  export interface GlobalComponents extends Vue3Components {}
}

```

## Ładowanie styli SCSS

`style.scss`

```scss
@use '@witkac/vue3-components/src/styles/WComponents';
```

`main.ts`

```TypeScript
import "./style.scss";
```

### Przeciążanie zmiennych SCSS

`variables.scss`

```scss
@forward '@witkac/vue3-components/src/styles/WVariables' with (
  $w-themes: (
    'light': (
      'colors': (
        'neutral': #00ff00
      )
    )
  )
);
```

`style.scss`

```scss
@use 'variables';
@use '@witkac/vue3-components/src/styles/WComponents';
```

### Budowanie gotowego css dla komponentów (aby nie budował za każdym razem w trybie dev)

`package.json`

```json
{
  "scripts": {
    "build:css": "sass --load-path=node_modules --no-source-map ./src/style.scss ./src/style.css"
  }
}
```

## Użycie pojedynczych komponentów

```TypeScript
import { WButton } from '@witkac/vue3-components';
```

## Import wszystkich komponentów

```TypeScript
import * as vue3Components from "@witkac/vue3-components/components";
```

## Komponenty dodatkowe spoza głównego pakietu

## `w-wysiwyg` - edytor wysiwyg

```TypeScript
import { WWysiwyg } from '@witkac/vue3-components/wysiwyg';
```

## `w-monaco` - edytor monaco

wymaga zainstalowania pakietu `monaco-editor`

```TypeScript
import { WMonaco } from '@witkac/vue3-components/monaco';
```

### Konfiguracja vite

Aby workery do `monaco-editor` nie zgłaszały warningów w trybie dev, w vite.config nalezy dopisać:

```JS
  optimizeDeps: {
    exclude: ['./node_modules/monaco-editor']
  }
```

## Testowanie na urządzeniach mobilnych

Przy starcie storybooka wyświetlany jest komunikat

```
╭──────────────────────────────────────────────────────╮
│ │   Storybook ready!                                   │
│ │                                                      │
│ │   - Local:             http://localhost:6006/        │
│ │   - On your network:   http://x.x.x.x:6006/    │
│ ╰──────────────────────────────────────────────────────╯
```

Wystarczy połączyć się z adresem wskazanym jako `On your network` będąc połączonym do tej samej sieci.