-
Notifications
You must be signed in to change notification settings - Fork 10
Jak piszemy Front?
W przypadku tworzenia komponentów będziemy starać się używać tak zwanego Atomic Design. Czyli podział folderu components na 3 podfoldery:
- Atoms
- Molecules
- Organisms
Taką samą strukturę prezentujemy w packages/ui. Jest to miejsce gdzie będziemy wrzucać praktycznie wszystkie atomy/molecuły/organimzy, które są reuzywalne w całej aplikacji np: Button lub Text
Należy pamiętać, żeby grupować komponenty! np XHeader, XFooter, XBody jako atomy powinny byc w folderze atoms/X Organizmy, które są specyficzne dla określonego page'a nalezy umieszczac w folderze nazwanym jako dana strona.
Link do figmy zawierający wybrane klasy bądź wartości z Tailwinda: https://www.figma.com/file/IDMjaxw9tU2aYWJuN16EIF/Design-System?node-id=0%3A1
WAŻNE! Każdy test, typy, utils czy stories starajmy się trzymać jak najbliżej komponentu, który go używa.
Zawsze starajmy się wykorzystać renderowanie statycznych stron(SSG) w połączeniu z ISR. W innych przypadkach(np profil użytkownika) możemy posłużyć się SSR.
Starajmy się testować wszystko co ma sens(czyt:. jeżeli test miałby zawierać to czy komponent Label bez żadnego ifa się renderuje to nie piszmy go.).
Tej samej zasady trzymajmy się w przypadku hooków oraz utilsów.
Za to do każdego komponentu znajdującego się w naszej bibliotece należy dopisywać stories ze Storybooka, gdzie title będzie zaczynało się od nazwy folderu w którym znajduje się komponent. Przykład title: "Main Library/atoms/Link"