A design system for my-design-system UI components, built on @design-systems/cli.
This is a design system intended for UI components currently being built or tested in my-design-system.
Included with this repo:
- Scaffolding for shared components and packages.
- Automatic CI/CD pipeline on circleCI.
- PR canary builds to NPM (using auto).
- Canary builds of Storybook (guides included in docs).
- Accessibility audits.
- Bundle size monitoring.
- An instance of the Storybook documentation site with custom plugins.
- Theme support.
- Advanced development using Typescript.
Components in this repository will ideally not clone functionality from other design systems, unless necessary for a time-boxed experiment.
To use a component from this repo you will first need to install the component into your project.
For an example we will try to use the @my-design-system/card
component.
npm i @my-design-system/card
# or with yarn
yarn add @my-design-system/card
Then to use the component in your code just import it!
import Card from '@my-design-system/card';
To use the components you have to import the css
files along with the components.
import Card from '@my-design-system/card';
import '@my-design-system/card/dist/main.css';
Or you can use our babel preset to do this automatically for you.
First install the preset
npm i --save-dev @my-design-system/babel-preset
# or
yarn add -D @my-design-system/babel-preset
In your babel config add the following preset:
{
"presets": ["@my-design-system/babel-preset"]
}
Now whenever you import one of the @my-design-system
components, babel
will automatically include the correct CSS file!
To create a new component:
yarn run create
Follow the prompts and you will have a new sub-package for your component!
# First link the package
yarn
# Then start developing
cd components/<Component Name>
yarn run dev
Before submitting a pull request ensure that all of the following work:
yarn build
yarn lint
yarn test
Inside the package.json there are a bunch of scripts that this repo uses to run the project in development and to build the project.
Below you can read a description of scripts you should use while developing in this project.
yarn dev
: Builds everything and starts a storybook with all componentsyarn test
: Runjest
over the test filesyarn lint
: Lint all files usingeslint
yarn clean
: Remove all dependencies, build files, and generated files from the projectyarn create
: Create a new components withing the repoyarn create:package
: Create a new package withing the repoyarn playroom
: Start aplayroom
with all of your components. This is where.snippet
files are usedyarn size
: Determine how your changes effect the size of all sub-packages
Every command works at both the monorepo and package level. The means you can run some script from just the package/component for a faster development experience.
yarn dev
: Build any dependency in the monorepo the component depends on, and start a storybook with just the componentyarn test
: Test just the componentyarn lint
: Lint just the componentyarn clean
: Clean the generated files for just the componentyarn size
: Determine how your changes effect the size of the component