Design System

The Project • Target • Technologies • Route • How to Use

📓 The Project

Design System

💡 Target

Development of an Design System at Ignite Lab, from Rocketseat

🛠 Technologies

The following tools were used in building the project:

Type	Tools	References
IDE	VS CODE	https://code.visualstudio.com/
Design Interface Tool	FIGMA (Prototype - UX/UI)	https://www.figma.com/
Programming Language	REACT	https://reactjs.org/
Programming Language	TYPESCRIPT	https://www.typescriptlang.org/
Utility-first CSS Framework	TAILWIND CSS	https://tailwindcss.com/
Tool for transforming CSS with JavaScript	POST CSS	https://postcss.org/
Graphic components	PHOSPHOR ICONS	https://phosphoricons.com/
UI Isolated Component Building Library	STORYBOOK	https://storybook.js.org/
UI Components for React	RADIX-UI	https://www.radix-ui.com/
Tool to build frontend faster	VITE.JS	https://vitejs.dev/
Seamless API mocking library for browser and Node	MSW.JS	https://mswjs.io/

Backend

IDE

UX/UI

Frontend

🔎 Route

1. Part 1 - Design System's visual structure
   
   • Design Systems
     • Convention created within companies and related to a similar visual structure that is applied across multiple projects
   • Build the project prototype (Figma):
     • Creating login form
       • E-mail
       • Password
       • Remind me
       • Login
     • Creating tokens with Figma
     • Components
       • Text
       • Heading
       • TextInput
       • Button
       • Checkbox


2. Part 2 - From Figma to React, creating application
   
   • Creating React project: npm create vite@latest
   • Install de dependencies from package.json: npm i
   • Setting Tailwind CSS
     • Install Tailwind CSS, PostCSS and autoprefixer: npm i tailwindcss postcss autoprefixer -D
     • Start Tailwind CSS: npx tailwindcss init -p
     • Customize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.cjs
     • Install VS Code extensions: Tailwind CSS IntelliSense, PostCSS Language Support, MDX
     • Customize the global style: ./src/styles/global.css
     • Customize classes at Tailwind: npm i clsx
   • Importing font: ./index.html
   • Importing tokens: ./tailwind.config.cjs
   • Storybook
     • Setup: npx sb init --builder @storybook/builder-vite --use-npm
     • Run: npm run storybook
   • Component
     • Text
       • React Component: ./src/components/text/Text.tsx
       • Storybook: ./src/components/text/Text.stories.tsx
       • Create feature (slot)
         • Install Radix-UI: npm i @radix-ui/react-slot
     • Heading
       • React Component: ./src/components/heading/Heading.tsx
       • Storybook: ./src/components/heading/Heading.stories.tsx
     • Button
       • React Component: ./src/components/button/Button.tsx
       • Storybook: ./src/components/button/Button.stories.tsx
     • Checkbox
       • React Component: ./src/components/checkbox/Checkbox.tsx
       • Storybook: ./src/components/checkbox/Checkbox.stories.tsx
       • Create feature (checkbox)
         • Install Radix-UI: npm i @radix-ui/react-checkbox
     • TextInput
       • React Component: ./src/components/textInput/TextInput.tsx
       • Storybook: ./src/components/textInput/TextInput.stories.tsx
       • Install Phosphor Icons: npm i phosphor-react
   • Setting Arg Types for each component
   • To run project: npm run dev
   
   
3. Part 3 - Testing and automating
   
   • Publish documentation
     • Storybook deployer: npm i @storybook/storybook-deployer --save-dev
     • Add a NPM script
       • For GitHub Pages
         

         
                           {
                             "scripts": {
                               "deploy-storybook": "storybook-to-ghpages"
                             }
                           }
                           

       • For AWS S3
         

         
                           {
                             "scripts": {
                               "deploy-storybook": "storybook-to-aws-s3"
                             }
                           }
                           

       • Build Storybook script: npm run build-storybook
       • Add storybook-static folder to .gitignore
       • Upload project to GitHub
         • New repository
           1. Create: gh repo create
           2. Choose "Push an existing local repository to GitHub"
           3. Enter a path to local repository
           4. Enter a repository name
           5. Enter a description
           6. Choose visibility (public, private or internal)
           7. Add a remote? Y
           8. What should the new remote be called? (origin)
         • Add: git add .
         • Commit: git commit -m "myProject"
         • Branch: git branch -M branch_name
         • Push: git push origin branch_name
       • Storybook CI/CD (continuous integration)
         • New file: .github/workflows/deploy-docs.yml
         • Settings based on GitHub Actions
         • Add the following code at .storybook/main.cjs

           
                         module.exports = {
                           ...,
                           viteFinal: (config, { configType }) => {
                             if (configType === 'PRODUCTION') {
                               config.base = '/design-system/'
                             }
                             return config
                           }
                         }
                         

         • Add force to npm ci script: .github/workflows/deploy-docs.yml
       • Creating interface with components: ./src/App.tsx
         • Transform React logo SVG to a JSX: https://transform.tools
         • Create Logo element: ./src/Logo.tsx
         • Add phosphor icons/li>
         • Customize contents, themes, fonts, forms and plugins
       • Accessibility addon
         • Install: npm install @storybook/addon-a11y
         • Settings based on GitHub Actions
         • Add the following code at .storybook/main.cjs

           
                         module.exports = {
                           addons: [
                             ...,
                             '@storybook/addon-a11y'
                           ],
                           ...
                         };
                         

       • Storybook
         • Setup: npx sb init --builder @storybook/builder-vite --use-npm
         • Run: npm run storybook
     • Part 4 - Automated Tests and API mock
       
       • SignIn page
         • Create a page: ./src/pages/SignIn.tsx
         • Set function to simulate login
       • Tests for SignIn stories
         • Storybook for SignIn page: ./src/pages/SignIn.stories.tsx
         • Interactions Addon
           • Install dependency

             
                               npm install @storybook/addon-interactions @storybook/jest 
                               @storybook/testing-library @storybook/test-runner -D
                               

           • Add the following code at .storybook/main.cjs

             
                               module.exports = {
                                 addons: [
                                   ...,
                                   '@storybook/addon-interactions'
                                 ],
                                 ...,
                                 features: {
                                   ...,
                                   interactionsDebugger: true,
                                 },
                                 ...
                               };
                               

         • Setting automated tests on StoryObj: function play()
       • API with Axios
         • Install Axios: npm i axios
         • Use on SignIn page: ./src/pages/SignIn.tsx
       • MSW (Mock Service Worker) addon
         • Install: npm install msw msw-storybook-addon -D
         • Generate service worker for MSW in your public folder

           
                         npx msw init public/
                         Do you wish to save "public" as the worker directory? (Y/n) Y
                         

         • Add the following code at .storybook/main.cjs

           
                         module.exports = {
                           ...,
                           "staticDirs": [
                             "../public"
                           ],
                           ...
                         };
                         

         • Initialize MSW and provide the MSW addon decorator globally: .storybook/preview.cjs

           
                         import { initialize, mswDecorator } from 'msw-storybook-addon';
                         // Initialize MSW
                         initialize({
                           onUnhandledRequest: 'bypass'
                         });
                         // Provide the MSW addon decorator globally
                         export const decorators = [mswDecorator];
                         

         • Add the following code at ./src/pages/SignIn.stories.tsx

           
                         export default {
                           ...,
                           parameters: {
                             msw: {
                               handlers: [
                                 rest.post('/sessions', (req, res, ctx) => {
                                   return res(ctx.json({
                                     message: 'Successfully logged in!'
                                   }))
                                 })
                               ],
                             },
                           }
                         } as Meta
                         

     
     

🧪 How to use

1. Set the development environment at you local computer
2. Clone the repository
   • git clone https://github.com/alexandrecpedro/design-system
3. Enter the project directory:
   • cd design-system
4. Install the dependencies
   • npm install
5. Run Project
   • npm run dev
6. Storybook
   • Setup: npx sb init --builder @storybook/builder-vite --use-npm
   • Run: npm run storybook
7. Run automated tests
   • Run: npm run test-storybook