@linecept/dot-design-system v0.2.18

Dot Design System

Design, build, and create with Linecept's Dot Design System.

Introduction

Linecept's design system, named Dot, is collecting reusable components as well as branding resources such as logos, and color tokens.

Install

npm install @linecept/design-system

Usage

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

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

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

Contributing

Install and Run

You need node, npm, 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:

1. npm i

Now, you can run the project demo to explorer the Dot Design System components and Linecept's brand. Run the command:

2. npm run storybook

Patterns & Development Information

Using patterns to write and create resources:

• File names with the kebab-case (for example: my-file-name.ts).
• We are using Storybook.
• We are using the AirBnB eslint patterns.

Component Creation & Testing

Creationion

1. Create component file: component/<component-name>/index.tsx
2. Create test file: component/<component-name>/<component-name>.test.tsx and write your test case.
3. Create demo file: component/{component-name}/{component-name}.stories.tsx

Testing

Checking the correctness of the code with the command:

1. npm run check

Building

Building to publish the project: npm build Building demo: npm build:demo

Legal & License

MIT © Linecept & David Kutas & Akos Toth

Keywords

design system, visual language, Dot Design System,

Credits

• Linecept https://linecept.com
• David Kutas https://portfolio.davidkutas.com
• Akos Toth