/design-system

The design system that powers WeCancer

Primary LanguageTypeScriptMIT LicenseMIT

WeCancer logo

Design, build, and create with WeCancer’s design system.
Live demo · Request feature

Deploy

Install

NPM:

npm install @wecancer/design-system

Yarn:

yarn add @wecancer/design-system

Usage

Before starting to use the Design System, you must add the WecancerProvider provider at the beginning of your application.

import { WecancerProvider, Button } from '@wecancer/design-system'

function App() {
  return (
    <WecancerProvider>
      <Button primary>Submit</Button>
    </WecancerProvider>
  )
}

Contributing

You need the nodejs and yarn instaled on your device to run this project in development.

To run the project, go to the project path, run the command below to install the dependencies:

yarn install

Now, you can run the project demo to explorer the Design System components. Run the command:

yarn start

Using patterns to write and create resources:

  • File names with the kebab-case (exp: my-file-name.ts)
  • we're using the AirBnB eslint patterns
  • To create a component:
    • Create component file: component/{component-name}/index.tsx
    • Create test file: component/{component-name}/{component-name}.test.tsx
    • Create demo file: component/{component-name}/{component-name}.stories.tsx (we're using the StoryBook)

Checking the truth of the code with the command:

yarn run check

Building

Building to publish the project:

yarn build

Building demo:

yarn build:demo

License

MIT © WeCancer