{"id":19153393,"url":"https://github.com/alexandrecpedro/design-system","last_synced_at":"2025-05-07T06:26:02.121Z","repository":{"id":61325080,"uuid":"550543122","full_name":"alexandrecpedro/design-system","owner":"alexandrecpedro","description":"Design System project","archived":false,"fork":false,"pushed_at":"2022-10-14T15:28:51.000Z","size":7061,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-19T19:05:31.684Z","etag":null,"topics":["figma","gh-pages","ignite-lab","javascript","jest","mock","mswjs","phosphoricons","postcss","radix-ui","react","rocketseat","storybook","tailwind-css","tailwindcss","typescript","vite","vscode","yml-files"],"latest_commit_sha":null,"homepage":"https://alexandrecpedro.github.io/design-system","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexandrecpedro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-13T00:09:52.000Z","updated_at":"2024-08-02T01:23:25.000Z","dependencies_parsed_at":"2022-10-15T02:47:47.031Z","dependency_job_id":null,"html_url":"https://github.com/alexandrecpedro/design-system","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandrecpedro","download_url":"https://codeload.github.com/alexandrecpedro/design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252825909,"owners_count":21810008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","gh-pages","ignite-lab","javascript","jest","mock","mswjs","phosphoricons","postcss","radix-ui","react","rocketseat","storybook","tailwind-css","tailwindcss","typescript","vite","vscode","yml-files"],"created_at":"2024-11-09T08:22:56.891Z","updated_at":"2025-05-07T06:26:02.103Z","avatar_url":"https://github.com/alexandrecpedro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align = \"center\"\u003e\n  \u003ch1\u003e Design System \u003c/h1\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\" Design System - platform\" src=\"./public/screens/screen1.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n  \u003cimg width=\"1604\" alt=\" Design System - document\" src=\"./public/screens/screen2.png\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#theproject\"\u003eThe Project\u003c/a\u003e •\n \u003ca href=\"#target\"\u003eTarget\u003c/a\u003e •\n \u003ca href=\"#technologies\"\u003eTechnologies\u003c/a\u003e •\n \u003ca href=\"#route\"\u003eRoute\u003c/a\u003e •\n \u003ca href=\"#howtouse\"\u003eHow to Use\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"theproject\"\u003e\n\u003ch2\u003e 📓 The Project \u003c/h2\u003e\n\u003cp\u003e Design System \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"target\"\u003e\n\u003ch2\u003e 💡 Target \u003c/h2\u003e\nDevelopment of an Design System at Ignite Lab, from Rocketseat\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"technologies\"\u003e\n\u003ch2\u003e 🛠 Technologies \u003c/h2\u003e\nThe following tools were used in building the project:\u003cbr\u003e\u003cbr\u003e\n\n|                      Type                       |           Tools           |            References             |\n| :---------------------------------------------: | :-----------------------: | :-------------------------------: |\n|                       IDE                       |          VS CODE          |  https://code.visualstudio.com/    |\n|              Design Interface Tool              | FIGMA (Prototype - UX/UI) |      https://www.figma.com/                 |\n|              Programming Language               |           REACT           |       https://reactjs.org/                 |\n|              Programming Language               |        TYPESCRIPT         |  https://www.typescriptlang.org/  |\n|           Utility-first CSS Framework            |       TAILWIND CSS        |     https://tailwindcss.com/                 |\n|    Tool for transforming CSS with JavaScript    |         POST CSS          |       https://postcss.org/                 |\n|               Graphic components                |      PHOSPHOR ICONS       |    https://phosphoricons.com/                 |\n|     UI Isolated Component Building Library      |         STORYBOOK         |     https://storybook.js.org/                 |\n|             UI Components for React             |         RADIX-UI          |     https://www.radix-ui.com/                 |\n|          Tool to build frontend faster          |          VITE.JS          |        https://vitejs.dev/                 |\n| Seamless API mocking library for browser and Node  |        MSW.JS          |        https://mswjs.io/                  |\n\n\u003cbr\u003e\n\n\u003cdiv align = 'center'\u003e\n  \u003ch3\u003eBackend\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"./public/logo/mswjs_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eIDE\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eUX/UI\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg\" /\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"./public/logo/phosphor-icons_logo.png\"/\u003e\n  \u003cimg height =' 100px ' left=' 20px ' src=\"./public/logo/radix-ui_logo.png\"/\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 100px ' src=\"./public/logo/storybook_logo.png\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eFrontend\u003c/h3\u003e\n  \u003cimg width =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\" /\u003e\n  \u003cimg width =' 100px ' left=' 20px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' src=\"./public/logo/vite_logo.svg\"/\u003e\n  \u003cbr\u003e\n  \u003cimg height =' 50px ' left=' 20px ' src=\"./public/logo/tailwind-css_logo.svg\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"route\"\u003e\n\u003ch2\u003e 🔎 Route \u003c/h2\u003e\n  \u003col\u003e\n    \u003cli \u0026nbsp;\u003ePart 1 - Design System's visual structure\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003eDesign Systems\n          \u003cul\u003e\n            \u003cli\u003eConvention created within companies and related to a similar visual structure that is applied across multiple projects\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003eBuild the project prototype (Figma):\n          \u003cul\u003e\n            \u003cli\u003e\u003cb\u003eCreating login form\u003c/b\u003e\n              \u003cul\u003e\n                \u003cli\u003eE-mail\u003c/li\u003e\n                \u003cli\u003ePassword\u003c/li\u003e\n                \u003cli\u003eRemind me\u003c/li\u003e\n                \u003cli\u003eLogin\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cb\u003eCreating tokens with Figma\u003c/b\u003e\u003c/li\u003e\n            \u003cli\u003e\u003cb\u003eComponents\u003c/b\u003e\n              \u003cul\u003e\n                \u003cli\u003eText\u003c/li\u003e\n                \u003cli\u003eHeading\u003c/li\u003e\n                \u003cli\u003eTextInput\u003c/li\u003e\n                \u003cli\u003eButton\u003c/li\u003e\n                \u003cli\u003eCheckbox\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 2 - From Figma to React, creating application\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003eCreating React project: npm create vite@latest\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003eInstall de dependencies from package.json: npm i\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eSetting Tailwind CSS\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall Tailwind CSS, PostCSS and autoprefixer: npm i tailwindcss postcss autoprefixer -D\u003c/li\u003e\n            \u003cli\u003eStart Tailwind CSS: npx tailwindcss init -p\u003c/li\u003e\n            \u003cli\u003eCustomize contents, themes, fonts and plugins with Tailwind: ./tailwind.config.cjs\u003c/li\u003e\n            \u003cli\u003eInstall VS Code extensions: Tailwind CSS IntelliSense, PostCSS Language Support, MDX\u003c/li\u003e\n            \u003cli\u003eCustomize the global style: ./src/styles/global.css\u003c/li\u003e\n            \u003cli\u003eCustomize classes at Tailwind: npm i clsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003eImporting font: ./index.html\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003eImporting tokens: ./tailwind.config.cjs\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eStorybook\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eSetup: npx sb init --builder @storybook/builder-vite --use-npm\u003c/li\u003e\n            \u003cli\u003eRun: npm run storybook\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eComponent\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003e\u003cem\u003eText\u003c/em\u003e\n              \u003cul\u003e\n                \u003cli\u003eReact Component: ./src/components/text/Text.tsx\u003c/li\u003e\n                \u003cli\u003eStorybook: ./src/components/text/Text.stories.tsx\u003c/li\u003e\n                \u003cli\u003eCreate feature (slot)\n                  \u003cul\u003e\n                    \u003cli\u003eInstall Radix-UI: npm i @radix-ui/react-slot\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eHeading\u003c/em\u003e\n              \u003cul\u003e\n                \u003cli\u003eReact Component: ./src/components/heading/Heading.tsx\u003c/li\u003e\n                \u003cli\u003eStorybook: ./src/components/heading/Heading.stories.tsx\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eButton\u003c/em\u003e\n              \u003cul\u003e\n                \u003cli\u003eReact Component: ./src/components/button/Button.tsx\u003c/li\u003e\n                \u003cli\u003eStorybook: ./src/components/button/Button.stories.tsx\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eCheckbox\u003c/em\u003e\n              \u003cul\u003e\n                \u003cli\u003eReact Component: ./src/components/checkbox/Checkbox.tsx\u003c/li\u003e\n                \u003cli\u003eStorybook: ./src/components/checkbox/Checkbox.stories.tsx\u003c/li\u003e\n                \u003cli\u003eCreate feature (checkbox)\n                  \u003cul\u003e\n                    \u003cli\u003eInstall Radix-UI: npm i @radix-ui/react-checkbox\u003c/li\u003e\n                  \u003c/ul\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eTextInput\u003c/em\u003e\n              \u003cul\u003e\n                \u003cli\u003eReact Component: ./src/components/textInput/TextInput.tsx\u003c/li\u003e\n                \u003cli\u003eStorybook: ./src/components/textInput/TextInput.stories.tsx\u003c/li\u003e\n                \u003cli\u003eInstall Phosphor Icons: npm i phosphor-react\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e Setting Arg Types for each component\u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e To run project: npm run dev\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cbr\u003e\n    \u003cli \u0026nbsp;\u003ePart 3 - Testing and automating\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003ePublish documentation\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eStorybook deployer: npm i @storybook/storybook-deployer --save-dev\u003c/li\u003e\n            \u003cli\u003eAdd a NPM script\n              \u003cul\u003e\n                \u003cli\u003e\u003cem\u003eFor GitHub Pages\u003c/em\u003e\u003cbr/\u003e\n                  \u003cpre\u003e\u003ccode\u003e\n                  {\n                    \"scripts\": {\n                      \"deploy-storybook\": \"storybook-to-ghpages\"\n                    }\n                  }\n                  \u003c/code\u003e\u003c/pre\u003e\n                \u003c/li\u003e\n                \u003cli\u003e\u003cem\u003eFor AWS S3\u003c/em\u003e\u003cbr/\u003e\n                  \u003cpre\u003e\u003ccode\u003e\n                  {\n                    \"scripts\": {\n                      \"deploy-storybook\": \"storybook-to-aws-s3\"\n                    }\n                  }\n                  \u003c/code\u003e\u003c/pre\u003e\n                \u003c/li\u003e\n              \u003cul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eBuild Storybook script: npm run build-storybook\u003c/li\u003e\n            \u003cli\u003eAdd storybook-static folder to .gitignore\u003c/li\u003e\n            \u003cli\u003e\u003cb\u003eUpload project to GitHub\u003c/b\u003e\n              \u003cul\u003e\n                \u003cli\u003eNew repository\n                  \u003col\u003e\n                    \u003cli\u003eCreate: gh repo create\u003c/li\u003e\n                    \u003cli\u003eChoose \"Push an existing local repository to GitHub\"\u003c/li\u003e\n                    \u003cli\u003eEnter a path to local repository\u003c/li\u003e\n                    \u003cli\u003eEnter a repository name\u003c/li\u003e\n                    \u003cli\u003eEnter a description\u003c/li\u003e\n                    \u003cli\u003eChoose visibility (public, private or internal)\u003c/li\u003e\n                    \u003cli\u003eAdd a remote? Y\u003c/li\u003e\n                    \u003cli\u003eWhat should the new remote be called? (origin)\u003c/li\u003e\n                  \u003c/ol\u003e\n                \u003c/li\u003e\n                \u003cli\u003eAdd: git add .\u003c/li\u003e\n                \u003cli\u003eCommit: git commit -m \"myProject\"\u003c/li\u003e\n                \u003cli\u003eBranch: git branch -M branch_name\u003c/li\u003e\n                \u003cli\u003ePush: git push origin branch_name\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eStorybook CI/CD (continuous integration)\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eNew file: .github/workflows/deploy-docs.yml\u003c/li\u003e\n            \u003cli\u003eSettings based on GitHub Actions\u003c/li\u003e\n            \u003cli\u003eAdd the following code at .storybook/main.cjs\n              \u003cpre\u003e\u003ccode\u003e\n              module.exports = {\n                ...,\n                viteFinal: (config, { configType }) =\u003e {\n                  if (configType === 'PRODUCTION') {\n                    config.base = '/design-system/'\n                  }\n                  return config\n                }\n              }\n              \u003c/code\u003e\u003c/pre\u003e\n            \u003c/li\u003e\n            \u003cli\u003eAdd force to npm ci script: .github/workflows/deploy-docs.yml\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eCreating interface with components: ./src/App.tsx\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eTransform React logo SVG to a JSX: https://transform.tools\u003c/li\u003e\n            \u003cli\u003eCreate Logo element: ./src/Logo.tsx\u003c/li\u003e\n            \u003cli\u003eAdd phosphor icons/li\u003e\n            \u003cli\u003eCustomize contents, themes, fonts, forms and plugins\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eAccessibility addon\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall: npm install @storybook/addon-a11y\u003c/li\u003e\n            \u003cli\u003eSettings based on GitHub Actions\u003c/li\u003e\n            \u003cli\u003eAdd the following code at .storybook/main.cjs\n              \u003cpre\u003e\u003ccode\u003e\n              module.exports = {\n                addons: [\n                  ...,\n                  '@storybook/addon-a11y'\n                ],\n                ...\n              };\n              \u003c/code\u003e\u003c/pre\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eStorybook\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eSetup: npx sb init --builder @storybook/builder-vite --use-npm\u003c/li\u003e\n            \u003cli\u003eRun: npm run storybook\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003ePart 4 - Automated Tests and API mock\u003cbr/\u003e\n      \u003cul \u0026nbsp;\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eSignIn page\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eCreate a page: ./src/pages/SignIn.tsx\u003c/li\u003e\n            \u003cli\u003eSet function to simulate login\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eTests for SignIn stories\u003c/b\u003e \n          \u003cul\u003e\n            \u003cli\u003eStorybook for SignIn page: ./src/pages/SignIn.stories.tsx\u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eInteractions Addon\u003c/em\u003e\n              \u003cul\u003e\n                \u003cli\u003eInstall dependency\n                  \u003cpre\u003e\u003ccode\u003e\n                  npm install @storybook/addon-interactions @storybook/jest \n                  @storybook/testing-library @storybook/test-runner -D\n                  \u003c/code\u003e\u003c/pre\u003e\n                \u003c/li\u003e\n                \u003cli\u003eAdd the following code at .storybook/main.cjs\n                  \u003cpre\u003e\u003ccode\u003e\n                  module.exports = {\n                    addons: [\n                      ...,\n                      '@storybook/addon-interactions'\n                    ],\n                    ...,\n                    features: {\n                      ...,\n                      interactionsDebugger: true,\n                    },\n                    ...\n                  };\n                  \u003c/code\u003e\u003c/pre\u003e\n                \u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003eSetting automated tests on StoryObj: function play()\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eAPI with Axios\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall Axios: npm i axios\u003c/li\u003e\n            \u003cli\u003eUse on SignIn page: ./src/pages/SignIn.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli \u0026nbsp;\u003e\u003cb\u003eMSW (Mock Service Worker) addon\u003c/b\u003e\n          \u003cul\u003e\n            \u003cli\u003eInstall: npm install msw msw-storybook-addon -D\u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eGenerate service worker for MSW in your public folder\u003c/em\u003e\n              \u003cpre\u003e\u003ccode\u003e\n              npx msw init public/\n              Do you wish to save \"public\" as the worker directory? (Y/n) Y\n              \u003c/code\u003e\u003c/pre\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eAdd the following code at .storybook/main.cjs\u003c/em\u003e\n              \u003cpre\u003e\u003ccode\u003e\n              module.exports = {\n                ...,\n                \"staticDirs\": [\n                  \"../public\"\n                ],\n                ...\n              };\n              \u003c/code\u003e\u003c/pre\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eInitialize MSW and provide the MSW addon decorator globally: .storybook/preview.cjs\u003c/em\u003e\n              \u003cpre\u003e\u003ccode\u003e\n              import { initialize, mswDecorator } from 'msw-storybook-addon';\n              // Initialize MSW\n              initialize({\n                onUnhandledRequest: 'bypass'\n              });\n              // Provide the MSW addon decorator globally\n              export const decorators = [mswDecorator];\n              \u003c/code\u003e\u003c/pre\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\u003cem\u003eAdd the following code at ./src/pages/SignIn.stories.tsx\u003c/em\u003e\n              \u003cpre\u003e\u003ccode\u003e\n              export default {\n                ...,\n                parameters: {\n                  msw: {\n                    handlers: [\n                      rest.post('/sessions', (req, res, ctx) =\u003e {\n                        return res(ctx.json({\n                          message: 'Successfully logged in!'\n                        }))\n                      })\n                    ],\n                  },\n                }\n              } as Meta\n              \u003c/code\u003e\u003c/pre\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"howtouse\"\u003e\n\u003ch2\u003e🧪 How to use\u003c/h2\u003e\n  \u003col \u0026nbsp;\u003e\n    \u003cli \u0026nbsp;\u003eSet the development environment at you local computer\u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eClone the repository\n      \u003cul\u003e\n        \u003cli\u003egit clone https://github.com/alexandrecpedro/design-system\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eEnter the project directory:\n      \u003cul\u003e\n        \u003cli\u003ecd design-system\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eInstall the dependencies\n      \u003cul\u003e\n        \u003cli\u003enpm install\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eRun Project\n      \u003cul\u003e\n        \u003cli\u003enpm run dev\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eStorybook\n      \u003cul\u003e\n        \u003cli\u003eSetup: npx sb init --builder @storybook/builder-vite --use-npm\u003c/li\u003e\n        \u003cli\u003eRun: npm run storybook\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli \u0026nbsp;\u003eRun automated tests\n      \u003cul\u003e\n        \u003cli\u003eRun: npm run test-storybook\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrecpedro%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Fdesign-system/lists"}