Skip to content

alexandrecpedro/design-system

Repository files navigation

Design System


 Design System - platform

 Design System - document


The ProjectTargetTechnologiesRouteHow 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
  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