demandscience-ui v1.4.1

DemandScience UI

This library relies on TailwindCSS, make sure the project is configured to use TailwindCSS before include it in your project.

To add this library to your React app, run

yarn add demandscience-ui

and then, in your tailwind.config.js, add

// tailwind.config.js
...
module.exports = {
  content: [
    ...
    "./node_modules/demandscience-ui/dist/*.js",
   ],
  ...
  }

In your index.js (React) or _app.js (Next.js), add

// index.js (React) or _app.js (Next.js)

import 'demandscience-ui/dist/tailwind.css'; // LIBRARY STYLES
import 'styles/index.css'; // YOUR STYLES

Make sure that demandscience-ui/dist/tailwind.css is above your own stylesheet. Otherwise your styles will be overwritten.

Storybook

Run inside another terminal:

yarn storybook

This loads the stories from ./stories.

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

If you're using two instances of storybook at the same time (i.e., one for the ui library and one for the main project), you can pass -p 6007 parameter to run the storybook on a different port.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.

Deployment

The storybook for the latest version of the main branch is deployed on Chromatic.

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Jest

Jest tests are set up to run with npm test or yarn test.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Setup Files

/src
  /inputs
    Button.tsx
  index.tsx       
/test
  /input
    Button.test.tsx   
/stories
  /inputs
    Button.stories.tsx
/.storybook
  main.js
  preview.js
.gitignore
package.json
README.md        
tsconfig.json

Continuous Integration

GitHub Actions

Two actions are added by default:

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
• size which comments cost comparison of your library on every pull request using size-limit