Design System

ignite design system used for the development of the Ignite Call website.

Technologies  |   Services  |   Packages  |   Getting started  |   Layout  |   Features  |   Links  |   Versioning  |   License

🚀 Technologies

Here are the technologies used in this project.

• TypeScript 4.9.3
• ReactJS 18.2.0
• Vite 3.1.4
• @storybook/react 6.5.12

📋 Services

Here are the services used in this project.

• GitHub
• NPM

📦 Packages

Here are the packages used in this project.

• @pedrohb-ignite-ui/react -> Package containing the components of the design system
• @pedrohb-ignite-ui/tokens -> Pack with all color and size tokens.

💻 Getting started

Here are the commands and steps on how to start the project.

• Dependency

  • NodeJS
  • NPM (Package manager of your choice)

• Install the dependencies using a package manager, the one used in the project was NPM.

  • npm install

• To start the project on your machine using NPM.

  • npm run dev

• To build the project using NPM.

  • npm run build

🔖 Layout

Here are some images of the project's visual style.

1 - All tokens and components

Home page with products. You can check out the design system tokens and components in the storybook.

🔥 Features

Here are the main features of the project.

• Text
• Heading
• Box
• Button
• TextInput
• TextArea
• Checkbox
• Avatar
• MultiStep
• Toast
• Tooltip

📎 Links

• Deploy on [Github pages]: https://ignite-shop-pedrohb.netlify.app/
• Repository: https://github.com/DevPedroHB/github-blog

🔰 Versioning

Here are the versions of the parts of the project.

• @pedrohb-ignite-ui/react -> 1.0.0
• @pedrohb-ignite-ui/tokens -> 1.0.0

📝 License

This project is licensed under the MIT license.

---

Made with ♥ by Pedro Henrique 🚀 Never stop learning!