Clad UI Design System
Why the name clad-ui?
Clad is the short form of classified ads, which is the main product of our group, besides, clad also mean “to be dressed or to be coated” (past participle of clothe).
What Clad UI Design System is
- A unified solution for styling components for Chotot Web user-facing platforms
- A theme specifications that define primitive Clad UI design tokens
- A collection of reusable components from atomic inputs to composite components
- A workbench (a.k.a kitchen sink) to preview all available components and their usage guide
- A set of CLI tools to assist generate new components...
What Clad UI Design System is NOT
- A base framework for doing Chotot web apps (refer to Next.js framework)
- An end user-facing web app
- Any full web page
Colophon (A.K.A prerequisites to this design system)
Building components:
-
📚 Storybook for UI component development and auto-generated docs -
⚛️ React declarative component-centric UI. React is also our core UI library of Front End development -
💅 Linaria which enable CSS-in-JS styling and extract all CSS to external CSS file. -
📄 System UI Theme Specification as a standard design token format with theme-awarecssprops helper -
⬇️ MDX (part of Storybook) for seamless React / JSX documentation
Maintaining the system:
-
🐟 Babel and module resolver plugin for transpiling modern JS and static theming -
📦 NPM for packaging and distribution -
🧶 yarn as package manager's CLI -
🧪 Jest as test runner for unit testing -
🐐 react-testing-library to assist unit testing React components -
🚥 Gitlab CI: Continuous integration
TODO:
-
✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)
Getting started
Refer to /docs/1.2-getting-started.stories.mdx document.
Frequently Asked Questions
1. Does this design system work with create-react-app?
Partially Yes. Since our solution introduce a custom Babel plugin and Webpack loader, it's not possible to use clad-ui with non-configurable react-scripts. You have to eject react-scripts to be able to customize Babel and webpack config.
Technical Debts
1. Storybook addon-docs parse and execute ${...} placeholders in code blocks that use styled component tagged template
Because of this, example of styled and css usage in Markdown code fence will be transpiled to special variables. So to work around temporary, we'll use a special ＄ (U+FF04) character at tagged template string's placeholders.
Refer to StoryBook issue #10011
2. Linaria lack an object serializer that assist snapshot testing.
Currently, snapshots contains only rendered HTML and hashed class names. Ideally, snapshots should contain rendered HTML and associated CSS combined as component's signature.
© 2020 Chotot.vn. Apache-2.0 license.