nd-design-system v0.1.991

React based component package with storybooks...

• File Structure 📁
• Development 🔧

.
└── src
    ├── components (ui kit components devided by categories each with an exported valid jsx + stories)
    ├───── typography
    ├───── icons
    ├───── atoms
    ├───── molecules
    ├───── organisms
    ├── helpers (helper methods that are exposed to the library)
    ├── documentation (initial stories on storybook in addition to all the component based stories)
    └── index.ts

After running npm install the recommended workflow is to run tsdx in watch mode in one terminal instance

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist

Then run Storybook in another terminal instance:

npm run storybook # or yarn storybook

This will load all that evaluate to ./src/documentation/*.stories.mdxor./src/components/**/*.stories.mdx

NOTE: Stories should reference the components as if using the library. This means importing from the root project directory. (This has been aliased in the tsconfig and the storybook webpack config as a helper)

TODO

• Toast (style and add the alert component)
• CountdownBar
• Modal
• Avatar
• SingleSelect
• MultipleSelect
• LinkCard
• Slug
• Banner (to rename)
• Context Menu (drop menu)
• Tooltips
• ProgressSteps
• Spinners
• SortableTable
• Tabs
• Toolbar (includes context menu)
• Switch
• Expandable
• Accordion
• Pagination
• Slider
• AnimateOnScroll (theme defined animation with the possibility to change the delay)