🤖 Design System Hambre

Bem-vindo ao repositório de código-fonte do Design System do Hambre Delivery, neste projeto estão documentados os componentes React e ferramentas que ajudaram desde a implementação do Design System até a publicação, como Storybook, changesets e muito mais.

---

🚀 Componentes

---

• Avatar
• Box
• Button
• Checkbox
• Heading
• Loading
• MessageIcon
• MultiStep
• Radio
• Select
• Switch
• Text
• TextArea
• TextInput
• Toast
• Transition

🔖 Configurações do Design System

# 🛠️ Para inicializar o projeto

• npm init -y

# 🛠️ instalando o typescript

• npm i -D typescript

# 🛠️ para criar o arquivo de configuração tsconfig

• npx tsc --init

# 🛠️ converte o projeto em um pacote javascript

• npm i tsup -D

# 🛠️ comando para fazer o build do pacote de tokens

• npm run build

# 🛠️ instalação do eslint em packages/eslint-config

• npm i -D eslint @rockeseat/eslint-config

# 🛠️ comando para executar o eslint no packages/tokens e packages/react

• npm run lint

# 🛠️ instalar as libs react e react-dom e packages/react

• npm i -D @types/react @types/react-dom

# 🛠️ instalar ferramenta de estilização em packages/react

• npm i @stitches/react

# 🛠️ Biblioteca para documentar componentes do frontend em packages/docs

• npx -p @storybook/cli@6.5.12 sb init --builder @storybook/builder-vite --type react

# 🛠️ Instalação da biblioteca  em packages/docs

• npm i vite @vitejs/plugin-react -D

# 🛠️ Instalação do react e react-dom  em packages/docs

• npm i react react-dom

# 🛠️ Permite fazer cálculos com cores em packages/docs

• npm i polished

# 🛠️ Biblioteca Permite executar os scripts em todos os pacotes ao mesmo tempo, acelerando o build

• npm i turbo@latest -D

# 🛠️ Biblioteca para carregar imagem de avatar em packages/react

• npm i @radix-ui/react-avatar

# 🛠️ Biblioteca de ícones em packages/react

• npm i phosphor-react

# 🛠️ Biblioteca de ícones em packages/docs

• npm i phosphor-react

# 🛠️ Biblioteca para componente de checkbox em packages/react

• npm i @radix-ui/react-checkbox

# 🛠️ Biblioteca para acessibilidade em packages/docs

• npm i @storybook/addon-a11y

# 🛠️ Biblioteca para utilizar o toast em packages/react

• npm i @radix-ui/react-toast

# 🛠️ Biblioteca para utilizar o switch em packages/react

• npm i @radix-ui/react-switch

# 🛠️ Biblioteca para utilizar o radio em packages/react

• npm i @radix-ui/react-radio-group

# 🛠️ Biblioteca para utilizar AlertDialog em packages/react

• npm i @radix-ui/react-alert-dialog

# 🛠️ Biblioteca para utilizar select em packages/react

• npm i @radix-ui/react-select

# 🛠️ Biblioteca para faze o deploy em packages/docs

• npm i @storybook/storybook-deployer --save-dev

# 🛠️ Biblioteca para gerenciar o versionamentos dos pacotes

• npm i @changesets/cli -D

# 🛠️ Comando para inicializar o changesets

• npx changeset init

# 🛠️ Executar esse comando para validar no npm, qualquer atualização no repositório

• npm run changeset

# 🛠️ Executar o comando para mudar a versão no caso de uma alteração

• npm run version-packages

# 🛠️ Executar o comando para fazer o deploy no npm

• npm run release

👨‍🎓 Autores

---

Feito com ♥ by Laciene Melo 👋 #lacymelo