In this project, we delve into the creation of a robust Design System using React, with a focus on component documentation and leveraging various tools for seamless implementation and publication. The technologies employed include React, Typescript, Vite, Storybook, Turbo, Stitches, Radix, and tsup.
-
React & Typescript Integration: The project is built on React, enhancing component development with the power of Typescript for a robust and type-safe codebase.
-
Efficient Documentation with Storybook: Utilizing Storybook, we have streamlined the documentation process, providing a comprehensive understanding of React components, their usage, and variations.
-
Tooling with Turbo, Stitches, and Radix: The incorporation of Turbo, Stitches, and Radix amplifies the project's capabilities, ensuring an efficient and scalable Design System.
-
Workflow Enhancement with GitHub Actions: The project integrates GitHub Actions, optimizing workflows for collaborative development, testing, and deployment.
-
GitHub Pages Deployment: Learn about deploying the Design System on GitHub Pages, ensuring accessibility and visibility for project stakeholders.
-
Package Management with NPM: Explore the intricacies of publishing and updating packages on NPM, enabling seamless integration and utilization of the Design System across projects.
This project serves as a comprehensive guide for creating, documenting, and deploying a Design System using cutting-edge technologies, empowering developers to build scalable and maintainable UI components.
- ๐ป Deploy Link
All the things that I learned and practiced with this project
- I learned how
to create a Design System
using Storybook and React - I learned about
workflows
with Github - I learned how
to publish a project into NPM
This project was developed using de following technologies:
You can view the project layout through the links below:
Remembering that you need to have a Figma account to access it.
- Text
- Heading
- Box
- Button
- TextInput
- TextArea
- Checkbox
- Avatar
- MultiStep
- Toast
- Tooltip
Developed with ๐ by @ghiberti85