# 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, createDefaults } from "@witkac/vue3-components/plugin";

const app = createApp(App);

// Podstawowa instalacja
app.use(vue3ComponentsPlugin);

// Z globalnymi defaultami propsów
app.use(vue3ComponentsPlugin, {
  defaults: createDefaults({
    WButton: { variant: 'outlined', color: 'primary' },
    WInput: { variant: 'outlined' },
    global: { size: 'md' }
  })
});

```

## 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";
```

## WDefaultsProvider — globalne defaulty propsów

`WDefaultsProvider` pozwala na wstrzykiwanie domyślnych wartości propsów do komponentów potomnych — analogicznie do mechanizmu z Vuetify.

### Typowanie

`DefaultsConfig` jest w pełni otypowany — klucze to nazwy eksportowanych komponentów (`WButton`, `WChip`, `WInput`, ...), a wartości to `Partial<props>` danego komponentu z pełnym autocompletem.

Aby skorzystać z typowania poza komponentami, użyj funkcji `createDefaults`:

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

const defaults = createDefaults({
  WButton: { color: 'primary', variant: 'outlined' },
  WChip: { color: 'success', size: 'sm' },
  global: { size: 'lg' }
});
```

### Użycie w template

```html
<w-defaults-provider :defaults="{ WButton: { color: 'primary', variant: 'outlined' }, WChip: { color: 'success' } }">
  <w-button text="Przycisk" />
  <!-- color: primary, variant: outlined -->
  <w-chip text="Tag" />
  <!-- color: success -->
</w-defaults-provider>
```

### Klucz `global`

Klucz `global` pozwala ustawić domyślne wartości dla **wszystkich** komponentów jednocześnie:

```html
<w-defaults-provider :defaults="{ global: { size: 'lg', color: 'primary' } }">
  <w-button text="Przycisk" />
  <!-- size: lg, color: primary -->
  <w-chip text="Tag" />
  <!-- size: lg, color: primary -->
</w-defaults-provider>
```

### Zagnieżdżanie

`WDefaultsProvider` wspiera zagnieżdżanie — wewnętrzny provider scala swoje defaulty z nadrzędnym:

```html
<w-defaults-provider :defaults="{ WButton: { color: 'primary' } }">
  <w-defaults-provider :defaults="{ WButton: { variant: 'outlined' } }">
    <w-button text="Przycisk" />
    <!-- color: primary, variant: outlined -->
  </w-defaults-provider>
</w-defaults-provider>
```

### Priorytet rozwiązywania wartości

1. **Jawnie przekazany prop** (najwyższy priorytet)
2. **Default komponentu** — `WButton: { color: 'primary' }`
3. **Default globalny** — `global: { color: 'primary' }`
4. **Wartość domyślna z definicji propa** (najniższy priorytet)

`InjectionKeys.Variant` (np. `table-cell` z `w-table`) ma zawsze priorytet nad wartością z `w-defaults-provider`.

### Integracja z pluginem

Defaulty można wstrzykiwać na poziomie całej aplikacji przez opcję `defaults` pluginu:

```TypeScript
import { createApp } from 'vue';
import { vue3ComponentsPlugin, createDefaults } from '@witkac/vue3-components';

const app = createApp(App);

app.use(vue3ComponentsPlugin, {
  defaults: createDefaults({
    WButton: { variant: 'outlined', color: 'primary' },
    WInput: { variant: 'outlined' },
    global: { size: 'md' }
  })
});
```

Można łączyć defaulty z pluginu z `w-defaults-provider` w template — provider nadpisuje wartości z pluginu:

```html
<!-- Plugin ustawia WButton.variant = 'outlined' -->
<!-- Provider nadpisuje color na 'danger' -->
<w-defaults-provider :defaults="{ WButton: { color: 'danger' } }">
  <w-button text="Przycisk" />
  <!-- variant: outlined (z pluginu), color: danger (z providera) -->
</w-defaults-provider>
```

## 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.

## Dodawanie nowego komponentu

Aby dodać nowy komponent należy:

1. Utworzyć dla niego folder w strukturze.
2. Utworzyć plik `.tsx`.
3. Jeżeli komponent potrzebuje styli, to utworzyć plik `.scss` i `.tsx.scss`.
4. Jeżeli komponent ma być rejestrowany globalnie przez plugin to:
   - Dodać export do `src/components/index.ts`
   - Dodać use do `src/styles/WComponents.scss`