1. Repozytorium UI

Repozytorium UI jest odpowiedzialne za dostarczenie dumb-components (opens new window) - czyli komponentów graficznych.

1.1 Samowystarczalne repozytorium

Część aplikacji odpowiedzialna za warstwę UI powinna być "samowystarczalna" - np. powinna ona działać w momencie kiedy wyciągniemy ją ze środowiska monorepo czy yarn workspaces - w takim razie nie powinna ona importować nic z części aplikacji front.

Przykłady

1. Lista produktów - w części UI komponent listy produktowej powinien dostarczać interfejs (w przypadku Vue props (opens new window)) dzięki którym będziemy w stanie przekazać listę produktową (tablicę z informacjami o produktach) z API. Połączenie do API nie odbywa się w tej części aplikacji - wiemy tylko, że takie dane odbierzemy dzięki odpowiednim polom. Sam interfejs - schemat danych powinnien zostać skonsultowany z programistą odpowiedzialnym za dostarczenie API - tak aby wykonać jak najmniej przekształceń na tych danych po stronie frontendu.
2. Tłumaczenia - część UI nie wie o dostępnych językach, tłumaczeniach dla danej strony - natomiast komponenty graficzne powinny być gotowe na to, aby labele statyczne np. "pokaż więcej" były gotowe na przyjęcie tłumaczeń lub innych zwrotów. Na takie potrzeby zazwyczaj tworzymy jeden wspólny intefejs (props typu obiekt) o nazwie labels, który posiada domyślnie zdefiniowane zwroty, które mogą zostać nadpisane z zewną†rz.

1.2 Podstawowa konfiguracja

Podstawowa konfiguracja paczki UI powinna zawierać:

1. Działający ekosystem Vue.js - bazowy projekt oparty o Vue CLI (opens new window)
2. Działające środowisko Storybook (opens new window), gdzie komponenty mogą być dokumentowane i testowane. Storybook powinien posiadać konfigurację:
   1. Storybook docs (opens new window)
   2. Storybook controls (opens new window)
   3. Storybook actions (opens new window)
   4. Storybook viewports (opens new window)
3. Konfigurację językową
   1. Wymagane presety babel np. optional-chaining
   2. Możliwość wspierania TypeScript
4. Środowisko lintujące/testujące:
   1. Eslint (opens new window)
   2. standardJS (opens new window)
   3. vue/recommended (opens new window)
   4. Prettier (opens new window)
   5. Stylelint (opens new window)
   6. Jest unit testing (opens new window)
      1. Vue Test Utils (opens new window)

Przykład repozytorium UI z wymaganą konfiguracją:

https://git.macopedia.pl/frontend/headless-guide/-/tree/master/packages/headless-ui (opens new window)

1.3 Użycie repozytorium

Repozytorium UI powinno umożliwiać w łatwy sposób importowanie komponentów graficznych do innych cześci aplikacji. Można to zrobić na kilka sposobów:

1. Punkt wejściowy modułu npm - pole main (opens new window) w pliku package.json (opens new window) - zazwyczaj wskazujemy na plik index.js (opens new window) który eksportuje najczęściej używane komponenty. Należy mieć jednak na uwadzę, że komponenty wyeksportowane w punkcje wejściowym bedą znajdować się domyślnie w pliku wynikowym aplikacji - najczęściej vendors - dlatego z tego miejsca powinniśmy eksportować komponenty tylko te najczęściej używane, aby niepotrzebnie ładować wszystkie komponenty "na start" - możemy przecież użyć lazy-loadingu.

   Przykłąd eksportu w pliku index.js:

   export { default as UiButton } from './src/components/UiButton'
   

   Przykład użycia:

   import { UiButton } from 'headless-ui'
   

2. Bezpośredni import, tylko wtedy kiedy tego wymagamy:

   import UiButton from 'headless-ui/src/components/UiButton'