https://github.com/fellipeutaka/iglab-design-system
đ¨ My first Design System made in Ignite Lab by Rocketseat đđ
https://github.com/fellipeutaka/iglab-design-system
eslint github-actions jest msw prettier radix react stitches storybook typescript vite
Last synced: 7 months ago
JSON representation
đ¨ My first Design System made in Ignite Lab by Rocketseat đđ
- Host: GitHub
- URL: https://github.com/fellipeutaka/iglab-design-system
- Owner: fellipeutaka
- License: mit
- Created: 2022-10-12T21:48:44.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-31T14:33:43.000Z (over 2 years ago)
- Last Synced: 2025-01-27T07:13:35.492Z (9 months ago)
- Topics: eslint, github-actions, jest, msw, prettier, radix, react, stitches, storybook, typescript, vite
- Language: TypeScript
- Homepage: https://fellipeutaka.github.io/iglab-design-system/
- Size: 4.81 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ignite Lab - Design System
Ignite Lab |
Project |
Technologies |
Layout |
How to use |
How to contribute |
License |
Storybook live demo
## âšī¸ What's Ignite Lab?
A 100% online, free and hands-on event focused on the front-end, for those who enjoy React and want to specialize even more in this awesome library.
### Stages
- Stage 1: Base Building - âī¸
- Starting Design System on Figma.
- Stage 2: Coding - âī¸
- Creating React components and configuring Storybook.
- Stage 3: Deploy - âī¸
- Configuring CI/CD with Github Actions and deploying Storybook on Github Pages.
## đģ Project
Creating my first Design System with accessible and reusable components, using Composition and Polymorphism pattern.
## đ Technologies
This project was developed with the following technologies:
- [TypeScript][ts]
- [Node.js][node]
- [React][react]
- [Vite.js][vite]
- [Storybook][storybook]
- [Stitches][stitches]
- [Radix][radix]
- [Jest][jest]
- [MSW (Mock Service Worker)][msw]
## đ Layout
To access the layout use [Figma][figma].
## âšī¸ How To Use
To clone and run this application, you'll need [Git](git), [Node.js][node] + [Yarn][yarn] installed on your computer.
From your command line:
### Install Front-end
```bash
# Clone this repository
$ git clone https://github.com/fellipeutaka/iglab-design-system
# Install dependencies
$ yarn
# Start server
$ yarn dev
# running on port 5173
```
### Install Storybook
```bash
# Clone this repository
$ git clone https://github.com/fellipeutaka/iglab-design-system
# Install dependencies
$ yarn
# Start storybook
$ yarn storybook
# running on port 6006
```
## đ¤ How to contribute
1. Fork this repository.
2. Create a branch: `git checkout -b `.
3. Make your changes and commit them: `git commit -m ''`
4. Push to original branch: `git push origin / `
5. Create the pull request.
Or, see the GitHub documentation on [how to create a pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
## đ License
This project is under the MIT license. See the [LICENSE](https://github.com/fellipeutaka/iglab-design-system/blob/master/LICENSE) for details.
Made with âĨ by Fellipe Utaka đ [Get in touch!](https://www.linkedin.com/in/fellipeutaka/)
[figma]: https://www.figma.com/file/SFlTxLaAMB6jxvvijYSJIg/Ignite-Lab-Design-System?node-id=0%3A1
[ts]: https://www.typescriptlang.org/
[node]: https://nodejs.org/
[react]: https://reactjs.org
[vite]: https://vitejs.dev/
[storybook]: https://storybook.js.org/
[stitches]: https://stitches.dev/
[radix]: https://www.radix-ui.com/
[jest]: https://jestjs.io/
[msw]: https://mswjs.io/
[git]: https://git-scm.com
[yarn]: https://yarnpkg.com/