https://github.com/alexandrecpedro/design-system
Design System project
https://github.com/alexandrecpedro/design-system
figma gh-pages ignite-lab javascript jest mock mswjs phosphoricons postcss radix-ui react rocketseat storybook tailwind-css tailwindcss typescript vite vscode yml-files
Last synced: 13 days ago
JSON representation
Design System project
- Host: GitHub
- URL: https://github.com/alexandrecpedro/design-system
- Owner: alexandrecpedro
- Created: 2022-10-13T00:09:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-14T15:28:51.000Z (over 2 years ago)
- Last Synced: 2025-04-19T19:05:31.684Z (about 1 month ago)
- 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
- Language: TypeScript
- Homepage: https://alexandrecpedro.github.io/design-system
- Size: 6.73 MB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
- 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
- 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
- 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
- Create: gh repo create
- Choose "Push an existing local repository to GitHub"
- Enter a path to local repository
- Enter a repository name
- Enter a description
- Choose visibility (public, private or internal)
- Add a remote? Y
- 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
- Set the development environment at you local computer
- Clone the repository
- git clone https://github.com/alexandrecpedro/design-system
- Enter the project directory:
- cd design-system
- Install the dependencies
- npm install
- Run Project
- npm run dev
- Storybook
- Setup: npx sb init --builder @storybook/builder-vite --use-npm
- Run: npm run storybook
- Run automated tests
- Run: npm run test-storybook