Skip to content

Latest commit

 

History

History
431 lines (420 loc) · 15.6 KB

README.md

File metadata and controls

431 lines (420 loc) · 15.6 KB
Raw

Design System


Design System - platform

Design System - document


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