6 Design System
In order to keep a consistent UI across Dendron apps: Create a design-system of UI components and theme objects, hosted on npm that can be installed and used across all Dendron applications.
When building out a new React based Dendron project, instead of needing to create a components folder and create all your own local components per project, you can instead install ie.
yarn add dendron-design-systemand start building the app using these components like lego blocks.
Creating a consistent UI across apps. Inevitably when there are local component folders in each app with the same components (ie. Button) there will be inconsistencies in styles / functionality which can be confusing for users. A good design system creates a consistent UI across apps.
Updates also apply across apps. When a component is updated, simply publish a new version on npm and upgrade all apps to the
Speed up development.
Research-backed studies suggest reusing code can yield 42–81% time savings and boost productivity by 40%. Storybook
Tech Stack for Design System.
- React (compatible with all current and upcoming Next.js apps)
Chakra-UI (already is use within Dendron and a very popular and well made UI library)
- Ant Design Ant Design
Start by converting the small style guide Dendron has on this website to a design system hosted on npm.
Create theme with colors, typography etc.
Create UI component variants (ie, button, input, dropdown etc.)
Ant Design is a mature library that has a lot of sub-projects and related projects. Navigating through the eco-system Ant Design newcomer can be overwhelming to decide what the best way to plan your app is.
For example you have here the core React Library.
- But when reading their theming docs, the first references to sub libraries are already creating the need to make some important decisions.
ie Either create all of your theme using the default.
Ant Design gives 4 options to customize-theme .
This could actually be the best option as loading directly into webpack is said in the docs to have potential performance improvements. https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f
And considering that Next.js uses Webpack 5 & allows for a custom-webpack-config
This only seems to be an option if you are using Ant Design Pro, which is their out of the box solution including Routing etc.
Not an option as Dendron uses Next.js across the board.
- Add all theme files with design tokens to
- Allow package to be consumeable, either on
npmor within the Dendron monorepo.
- In each dendron Next.js application, import the theme from
- Load The theme into webpack via
Example: Psuedocode (not yet tested)
Currently W/ Chakra-UI, update to Ant-Design upcoming.