@allped/shared-components

Índice

1. Sobre a aplicação
   • Principais tecnologias
2. Build Local
   • Pré Requisitos
   • Recomendações
   • Como executar
   • Integração e Deploy
3. Arquitetura
   • Organização de pastas
4. Como contribuir
   • Design System
5. Instalação como Pacote

Sobre a aplicação

Este repositório foi desenvolvido para auxiliar na criação de componentes genéricos que possam ser utilizados nas soluções da Allped a fim de manter um padrão visual da marca.

Principais Tecnologias

• React
• Ant Design
• Node
• Storybook

Build local

Pré-Requisitos

Para a utilização do projeto, realize a instalação do node e npm/yarn. O node por necessidade do React e o npm/yarn para gerenciamento de dependências.

Recomendações

Recomenda-se utilizar o Visual Studio Code para o desenvolvimento e instalar as extensões ESLint para manter a padronização do código e Prettier para auxiliar com a formatação de código.

Como executar

1. Se preciso execute o comando para instalar as dependências:

   npm install

2. Para executar o Storybook e visualizar os componentes:

   npm run storybook

3. Para buildar o projeto e gerar os arquivos da biblioteca:

   npm run build

4. Para executar a aplicação de desenvolvimento:

   npm run dev

   A aplicação rodará na porta 5173 (http://localhost:5173)

5. O Storybook rodará na porta 6006 (http://localhost:6006)

Integração e deploy

• O deploy do Storybook é feito automaticamente via GitHub Actions para a Vercel quando há um push na branch main.
• O pacote npm é publicado manualmente ou via CI quando uma nova tag de versão é criada.

Arquitetura

Organização de pastas

src/
├── components/          # Componentes compartilhados
│   ├── DataDisplay/     # Componentes de exibição de dados (Table, Card, etc.)
│   ├── DataEntry/       # Componentes de entrada de dados (Input, Select, etc.)
│   ├── Feedback/        # Componentes de feedback (Modal, Alert, etc.)
│   ├── General/         # Componentes gerais (Button, Typography, etc.)
│   └── Layout/          # Componentes de layout (Header, Sidebar, etc.)
├── styles/              # Estilos globais e tema
├── utils/               # Utilitários e helpers
└── index.ts             # Exportações principais

Como contribuir

Crie seu branch a partir de main com o nome seguindo o formato:

tipo/XXXXX-Descrição

em que tipo representa o tipo da tarefa (fix ou feature) e XXXXX é o número da Task associada. Após a conclusão da sua tarefa, abra um pull request de seu branch para main, e peça algum membro do time de desenvolvimento para validar. Sempre que possível, utilizar Conventional Commits

Design System

Os componentes devem seguir o design system definido pelo time de design.

Instalação como Pacote

Para instalar este pacote em outros projetos:

npm install @allped/shared-components

Uso

import { Button } from '@allped/shared-components';

function App() {
  return <Button type="primary">Click me</Button>;
}

Configuração do ConfigProvider do Ant Design

É recomendado envolver sua aplicação com o ConfigProvider do Ant Design para aplicar o tema customizado:

import { ConfigProvider } from 'antd';
import { theme } from '@allped/shared-components';

function App() {
  return (
    <ConfigProvider theme={theme}>
      {/* Seus componentes */}
    </ConfigProvider>
  );
}