npm package: @halogenn/components
Description: Design system com os componentes da empresa
Latest version: 1.0.36

# Halogenn Design System

Design system com os componentes da empresa

## Tecnologias Utilizadas

Este projeto foi desenvolvido com as seguintes tecnologias:

- React
- Vite
- Storybook
- @radix-ui/primitive
- TypeScript

## Começando

Para começar a usar este projeto, siga estas instruções.

## Regras e boas praticas

### Criação de componentes

Na hora de crias todos os componentes, devemos seguir algumas regras para manter o padrão e o funcionamento do mesmo, tais como:

- **Estrutura das pastas**

  Sempre crie a pasta do componente, como o nome do mesmo.

  Depois, crie o arquivo do componente .TSX como o nome dele, e o mesmo usado para a pasta.

  Depois, crie um arquivo index.ts, e exporte o componente.

  Vai ficar assim:

  ```
  ├── Button
  │   ├── Button.tsx
  │   ├── index.ts
  │   ├── Button.scss
  │   ├── Button.stories.tsx
  ```

- **Storybook**

  Todo componente deve ser o storybook configurado, o storybook deve refletir oque é esperado do componente, ou seja, deve ter os tamanhos, cores etc.

  Não apaguei os componentes padrões do storie book, e tambem criei como exemplo um storybook basico para o componente Button. Tudo para seguir de exemplo.

  Para rodar, basta executar o comando:

  ```
  yarn storybook
  ```

  Lembre-se, esse storybook vai ser publicado para o facil uso na hora de implementar no site principal, então o objetivo é mante-lo o mais bem feito possivel.

- **Props e uso**

  Devemos evitar ao maximo passar props para uso genericas, tais como:

  > width: 150px

  Ao inves disso, devemos configurar dentro do componente tamanhos pre-setados, e assim, passamos so os tamanhos documentados.

  > size: small

- **Atomic Design**

  Devemos utilizar o atomic design, ou seja, na hora de criar um componente, pensar como:

  > Atoms => Molecules => Organisms > Templates > Pages

  ![Atomic design](https://miro.medium.com/v2/resize:fit:2000/format:webp/1*IBzG_eNKWu_G9Elhsxh-1Q.png)

## Commits e Branchs

### **Branchs**

Na hora de cria branchs, tente sumarizar o objetivo do ticket + o numero do mesmo, sempre em ingles.

Exemplo:

> tipo_de_tarefa/card_number/objetivo
>
> feature/HLNN-01/button-component

### **Commits**

Ja na hora de criar commits, por favor, utilize o numero do ticket + uma mensagem. No commit é permitido portugues. Siga o exemplo.

Exemplo:

> card_number: resumo
>
> HLNN-01: Criado componente botao

### **Pull request**

Para o PR, utilize uma ideia semelhante a branch para criar o nome, porem tambem adicione informações ao PR.

Exemplo Nome:

> HLNN-01: Criei o componente de botão [FEATURE]

Alem disso, toda branch deve ter tais detalhes:

**Ticket Link**

[insira o link aqui]

**Description**

[insira a descrição]

**Screenshots**

[insira imagem caso tenha algo para mostrar, ou um video caso seja uma atualização em logica, bug etc]

### **Boas praticas no geral**

Tente dar um commit toda vez que uma alteração solida seja feita. Não é necessario dar push, porem assim podemos separar as responsabilidades, sendo mais facil de entender e reverter caso necessario.

Tambem, é obrigatorio criar uma branch sempre da mais atualizada (staging). Caso esteja a mais de 1 dia em uma branch, commita oque você esta fazendo, e depois faça um pull da branch atualizada.

Independente do progresso, é uma boa pratica dar um PUSH todo final de dia. Principalmente dar um PUSH na sexta e um PULL na segunda.

Fluxo de branchs:

> Nova branch (sempre puxe na staging) => branch de dev => PR para staging => PR para Produção

## Centralizando os projetos

### **Design System**

#### Componentes

Projeto com todos os componentes base, projeto atual.

#### Colors

Projeto com todas as cores da marca

#### Variables

Projeto com todas as variaveis, como fontes sizes etc.

#### Icons

Projeto com todos os icones e svgs

### **Main Frontend**

Frontend principal

### **API**

API principal

### **ADM**

Painel administrativo v1

### **Figma**

#### Site

Figma do site responsivo.

#### Documentação

Figma com todas as documentações, de componentes e rotas.

#### Fluxogramas

Figma com os fluxos necessarios.