0.1.2 • Published 4 years ago
@dash-ui/design-system v0.1.2
A command line tool for creating design systems with Dash and Storybook
# Using npx
npx @dash-ui/design-system my-design-system
# OR using a global install
yarn global add @dash-ui/design-system
create-design-system my-design-system
# Start Storybook in the design system directory
cd my-design-system
yarn storybookPreview
- Check out the Storybook stories generated by the default design system created by this command
- View an example of the library created by this command
What's in the box?
- UI component starter pack Alerts, badges, buttons, checkboxes, switches, and spinners, inputs, textareas, and icons.
- Layout components exported from
@dash-ui/react-layout: Box, Grid, Row, Column, and more! - Tailwind design tokens
- Beautiful typography out of the box
- Responsive props and styles from
@dash-ui/responsive - Modern CSS reset
- Accessibility
- Auto-documentation with Storybook
- Semantic versioning
- Strongly typed with TypeScript
- Modern build system automatically generates ESM, UMD, CJS, modules, and types based
upon the
"exports"field in the package.json
Build tools
The design system comes with a variety of build tools that allow you to release with confidence
| Tool | Description |
|---|---|
| React | This starter pack is built in React |
| TypeScript | Your design system should have strong types and autocomplete |
| Storybook | Write your documentation as you code and build bulletproof UI components |
| Yarn | Because I said so |
| Jest + @testing-library | For testing components and hooks |
| Prettier | For formatting code, READMEs, and configs |
| ESLint | For linting the design system |
| Standard Version | Semantic releases made easy |
| Commitlint | Lints your commit messages |
| Lundle | A build tool that automatically generates UMD, ESM, CJS, modules, and types based upon the "exports" field in the package.json |
| Travis CI | (Optional) For continuous integration |
Usage
create-design-system <name> [--user=githubUsername] [--org=githubOrg] [--scope=npmOrg] [--no-git]
| Argument | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | The name of the package you're creating. This is also the name of the directory the package will be created in. |
| user | string | No | Your GitHub username |
| org | string | No | A GitHub organization name where the repo should live |
| scope | string | No | An npm organization |
| no-git | boolean | No | Create the package without initializing a git repo |
LICENSE
MIT