@dreamcommerce/aurora

Aurora

Jak odpalić?

1. yarn install
2. yarn run start - odpala Rollupa, który nasłuchuje na folder src (tutaj developujemy komponenty)
3. yarn run storybook - w osobnej zakladace odpalamy storybooka, tutaj tworzymy tzw "story" dla naszego nowo tworzonego komponentu. Dzięki temu możemy sobie developować nasz komponent w izolacji. Proponuje się wzorować na tym co już gotowe.

Taki pakiet możemy zainstlować w swoim projekcie przez użycie tagu beta wrzucając do package.json @dreamcommerce/aurora: "0.2.10-1". Co jeśli pracujemy dalej? Odpalamy znowu yarn version --prerelease To uaktualni nam wersję np z 0.2.10-1 do 0.2.10-2 i znowu yarn npm publish --tag beta --access public

Testowanie:

Posiadamy cztery rodzaje testów, standardowe unit testy, testy strukturalne (snapshoty),wizualne oraz wizualne na dla zbudowanej paczki(smoke-test). Jak je odpalić:

1. yarn run tests:unit
2. yarn run tests:structural
3. yarn run tests:visual
4. yarn run tests:smoke-package

Testy strukturalne i wizualne wykonują się zdecydowanie dłużej niż unit, dlatego nie polecam odpalania ich z każdą zmianą. Ponadto testy strukturalne i wizualne opierają się na plikach wzorcowych (generowane przy pierwszym odpaleniu) dlatego też jeśli nakodzicie coś w komponencie po odpaleniu testów dostaniecie "errory", które pokażą wam w jakich miejscach się przez wasz kod pozmieniało. Trzeba to przeglądnać i jeśli wszystko jest ok "zaakceptować" nowe pliki wzoroce. Są od tego dwa polecenia:

1. yarn run updates-snapshots aktualizuje pliki wzorcowe snapshotow
2. yarn run update-visuals aktualizuje pliki wzorcowe zmian wizualnych (.png)

Jak piszemy componenty

importy

1. W pierwszej kolejnosci importujemy rzeczy zewnętrzne (React, lodash, classnames itp)
2. Style komponentu
3. Typowanie
4. Rzeczy wewnętrzne komponentu

Struktura folderów i plików komponentu

• Komponent umieszczamy w folderze src/components
• W nazewnictwie plików i folderów stosujemy snake_case
• Nazwa komponentu powinna być w liczbe pojedyńczej (button, color_picker, heading itp);
• struktura komponentu:

    - components (komponenty wchodza w sklad glownego komponetu, nieuzywalne osobno)
        - somethings.tsx
        - ...
    - hoc (komponenty wyzszego rzedu utworzone za pomoca komponentu bazowego)
        - select
            - index.tsx
        - ...
    - hooks (folder zawierajacy hooki specyficzne dla danego elementu)
        - useValues.ts
        - ...
    - css_classes.ts (opcjonalnie, klasy dla danego komponentu)
    - constants.ts (opcjonalnie, stałe dla tego komponentu)
    - context.tsx (opcjonalne, context elementu)
    - index.tsx
    - types.ts
    - utilities.ts (opcjonalnie, helpery, funkcje danego komponetu)

• style komponentu powinny znaleźć się w src/css/{nazwa_komponentu} (np src/css/button)
• struktura styli:

    - main.module.less
    - mixins.module.less (mixiny danego komponentu)
    - variables.module.less (zmienne danego komponetu)
    - responsive.less.module.less (style dla media queries)

Uwagi ogólne

Nazwy metod, zmiennych powinny odpowiadać temu co kryje się za daną zmienną lub co robi metoda. Metody powinny realizowac jedna rzeczy. Zmienne typu boolean powinny zawsze zaczynac sie od is lub has.