- A convenient way to separate logical and representational components.
- Make easier to compose a system design.
- More reusable components.
- Use of props and conditional styles, makes css more powerful.
- Scoped styles, like in css modules, Why is this good? -> CSS-Modules: Why This Is the Most Significant Improvement to CSS in Years (x-team.com)
Understanding the problem
- What is Atomic design? -> Atomic Design Methodology | Atomic Design by Brad Frost
- Everything I Know About Style Guides, Design Systems, and Component Libraries – Lee Robinson
- Component Driven User Interfaces
- Styled System Styled System (styled-system.com)
- Storybook Storybook: UI component explorer for frontend developers
- Chromatic Chromatic: Storybook deployment, review, and test
- Reading -> Introducing Chromatic — UI testing for React | by Dominic Nguyen | Medium
Atomic layout -> kettanaito/atomic-layout: Physical representation of layout composition to create declarative responsive layouts in React. (github.com)
- Why? -> Creating layouts that last — Artem Zakharchenko - YouTube
- Resolve the problems while composing elements in a layout.
- Separates the concept of Layouts and other styling parts of the app.
- Declarative Layout, easy to maintain and understand.
- Responsive made clearer.
Storybook: UI component explorer for frontend developers
- Encourages you to make UI component by component, thinking first in the smaller pieces of your app, and use them to compose pages.
- Define the different states of a component, predictable behavior of the component.
- Make a page that contains the library, making easier to search a component.
- Shareable UI platform (independent deploy), making easy show to the team and get feedback.
- Automatic Docs, customizable doc page, using MD. Separate Docs page deployable.
- Easier and resilient testing, (unit, e2e, snapshot...) you test the stories, where you already have mock data, and different states are written, no necessity of write different states in test.
- Use of tools like Chromatic, to automate snapshot testing, giving feedback to the design team.
Examples:
- Gitlab base / accordion - default ⋅ Storybook (gitlab-org.gitlab.io)
- Airbnb dates Storybook (airbnb.io)
- React 95 Storybook (react95.io)
Storybook + MDX -> MDX (storybook.js.org)
- Using Storybook stories with Testing Library - YouTube
- Unit testing with Storybook
- Interaction testing with Storybook
React table React Table - Hooks for building lightweight, fast and extendable datagrids for React (tanstack.com)
Examples -> react-table examples - CodeSandbox
Demo -> Storybook (react-beautiful-dnd.netlify.app)
React Testing Library | Testing Library (testing-library.com)
Good practices for writting react applications