Design System - StoryBook

Neste projeto é criado um Design System utilizando React.js, abordando elementos essenciais, como cores, tipografia, botões e muito mais. A documentação é apresentada no Storybook, e o sistema está disponível como um pacote npm, permitindo a sua integração em qualquer projeto front-end.

🔗 Link do projeto: Design System - Storybook

---

📌 Índice

• 💻 Capturas de tela
• 🚀 Componentes
• 🧑‍💻 Tecnologias utilizadas
• 🎨 Layout do projeto
• ⚙ Como executar o projeto
• 🌍 Como utilizar os componentes
• 🤝 Como contribuir
• 👥 Autor

💻 Capturas de tela

---

🚀 Componentes

• Text
• Heading
• Box / Card
• Button
• TextInput
• Textarea
• Checkbox
• Avatar
• MultiStep
• Toast
• Tooltip

---

🧑‍💻 Tecnologias utilizadas

Ao longo do desenvolvimento do projeto foram utilizadas as seguintes tecnologias:

---

🎨 Layout do projeto

Confira o layout do projeto no Figma.

• Layout do projeto

⚙ Como executar o projeto

Siga os seguintes passos para executar o projeto localmente:

1. Para executar o projeto, primeiro clone esse repositório:

   git clone https://github.com/andersondev96/05-design-system
   

2. Acesse a pasta 05-design-system:

   cd 05-design-system
   

3. Instale as dependências:

   npm install
   

4. Execute o projeto:

   npm run dev
   

   A aplicação está disponível em: http://localhost:6006

🌍 Como utilizar os componentes

Para utilizar os componentes em seu projeto, siga os passos abaixo:

1. Acesse o pacote no npm: @anderson-ignite-ui

2. Instale a biblioteca no seu projeto:

   npm i @anderson-ignite-ui/react
   

3. Importe e utilize os componentes em seu código. Veja o exemplo do componente <Button>.

   import { Button } from '@anderson-ignite-ui/react';
   
   <Button
     onClick={function Ms(){}}
     size="md"
     variant="primary"
   >
     Send
   </Button>

   Consulte a documentação completa do projeto para mais detalhes sobre utilizar outros componentes.

🤝 Como contribuir

1. Faça um fork do repositório.

2. Crie uma nova branch com as suas alterações:

   git checkout -b my-feature
   

3. Salve as suas alterações e crie uma mensagem de commit, dizendo o que você fez:

   git commit -m "feature: My new feature"
   

4. Envie as suas alterações:

   git push origin my-feature
   

👥 Autor

Anderson Fernandes Ferreira