@saleshandy/design-system NPM

Saleshandy Design System

A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

🚀 Setting up the project

1️⃣ Install required dependencies →

npm install

2️⃣ Run the compiler in watch mode, it watches for changes and auto compiles the code →

npm start

3️⃣ Run the Storybook preview, it opens up the preview in browser at http://localhost:6006 →

npm run storybook

4️⃣ Create project build, it compiles and generates static code in dist folder with minified js and css for production →

npm run build

5️⃣ Create storybook build, it compiles and generates static storybook preview for deployment in storybook-static folder →

npm run build-storybook

⭐ Steps to add component in design system

1️⃣ Create folder with component name (sample folder structure shown below)

2️⃣ Define the component jsx, filename will be component-name.tsx

3️⃣ Add styling to the component by creating a file with name, _component-name.scss in the assets/scss directory and import it in design-system.scss file with a help comment (as shown below)

// Component-Name Styles
@import './scss/component-name';

4️⃣ Create an index.tsx entry file for component export

5️⃣ Write the documentaion by creating a story file in the stories folder, filename will be component-name.stories.tsx

📁 Sample Component Folder Structure →

├── src
│   ├── button                  → folder with component name
|   │   ├── button.spec.tsx     → component unit test file
|   │   ├── button.tsx          → component jsx file
|   |   └── index.ts            → component export index
|   │
|   ├── assets
|   |   ├── scss
|   |   |   └── components
|   |   |       └── _button.scss    → component styling file (optional)
|   |   └── design.system.scss  → import component scss in this file
|   |
│   └── index.ts                → import component jsx in this file
│
└── stories
    └── button.stories.tsx      → component documentation in storybook