CoinDesk Design System (Storybook)

Local setup

1. Clone repo

git clone

2. CD into the root of the repo and run:

yarn or npm install

3. At the root of the project create .env file with two values:

NPM_TOKEN=<ALEX HAS TOKEN>
GH_TOKEN=<ALEX HAS TOKEN>

4. To start local development run:

yarn storybook

and navigate to http://localhost:6006/

##Project structure

To have a better understanding of how everything works please look at docs here: Storybook

• .storybook folder controls global setting: main.js it's like a project config and preview.js has global styles settings the public folder has some root files (Similar to how react-create-app works)

• .github folder used to set up CI/CD with Netlify and Chromatic

• src -> the most important folder where you add and modify files:

  • src/shared includes global styles to reuse within components (for example fonts, global styles, etc)
  • src/stories appear on the deployed side on the left rail in the "Example section" and can be re-worked
  • src/ -> all components under src folder are the most important, that what we include in the NPM package published to npmjs

Note: You can change this structure and move elements into separate folders from src, but keep imports in the main entry point which is src/index.js

Important: All files with .js extension is what we export to and NPM package, all files with .stories.js extension is what you see in the storybook portal

import * as styles from './shared/styles';
import * as global from './shared/global';
import * as animation from './shared/animation';
import * as icons from './shared/icons';

export { styles, global, animation, icons };

export * from './Avatar';
export * from './Badge';
export * from './Button';
export * from './Icon';
export * from './Link';

Branching strategy

If you want to create a new component or modify something:

1. Create a separate branch from the "main"
2. Add code changes, commit, push to a separate branch and create a pull request
3. Navigate to a pull request and you should see something like that in the UI

Before merging approve a new PR's in the Chromatic UI

Once you merge PR to the main branch it will automatically update deployed Storybook portal here: https://coindesk-design-system.netlify.app/?path=/story/example-introduction--page

And publish a new NPM package version to npmjs: https://www.npmjs.com/package/design-system-cd

To use a correct version in the application run

npm install design-system-cd

To always use the latest version use @latest in the package.json of your application:

   "design-system-cd": "@latest"