Design System Cogna

Este projeto foi estruturado como base para uma futura biblioteca de Design System, com suporte a múltiplas marcas, tokens dinâmicos e foco em acessibilidade e consistência visual.

Componentes

Atualmente o design system inclui os seguintes componentes:

• Select: Componente de seleção de opções em dropdown
• Icon: Componente para renderização de ícones

Tecnologias Utilizadas

• React Native 0.79.2
• Expo 53
• TypeScript
• Styled Components
• Storybook 8.6

Pré-requisitos

Para executar este projeto, você precisará ter instalado em sua máquina:

• Node.js (v16 ou superior)
• npm ou yarn
• Expo CLI

Instalação

Para instalar as dependências do projeto, execute:

yarn install
# ou
npm install

Executando o App

Para iniciar o aplicativo em modo de desenvolvimento:

yarn start
# ou
npm run start

Isso iniciará o servidor Expo. Você pode então executar o aplicativo:

• No iOS: yarn ios ou npm run ios
• No Android: yarn android ou npm run android
• Na Web: yarn web ou npm run web

Executando o Storybook

O Storybook é utilizado para documentar e testar os componentes de forma isolada.

Para iniciar o Storybook:

yarn storybook
# ou
npm run storybook

Isso iniciará o servidor Storybook na porta 6006. Acesse http://localhost:6006 para visualizar a documentação dos componentes.

Estrutura do Projeto

ds-cogna/
  ├── src/                  # Código fonte do projeto
  │   ├── components/       # Componentes reutilizáveis
  │   ├── tokens/           # Tokens de design (cores, tipografia, etc.)
  │   ├── context/          # Contextos React (como ThemeContext)
  │   ├── hook/             # Hooks personalizados
  │   ├── utils/            # Funções utilitárias
  │   └── fonts/            # Arquivos de fontes
  ├── assets/               # Recursos estáticos (imagens, fontes, etc.)
  ├── .storybook/          # Configurações do Storybook
  ├── public/              # Arquivos públicos para o Storybook

Brands (Marcas)

O design system suporta múltiplas marcas através dos tokens de design:

• brandA
• brandB
• brandC

Para mudar a marca utilizada, use o ThemeProvider e a função setBrand.

Contribuição

Para contribuir com este projeto:

1. Crie um novo branch para sua contribuição
2. Adicione ou modifique os componentes conforme necessário
3. Adicione testes e documentação no Storybook
4. Certifique-se de que todos os testes estejam passando com yarn test
5. Envie um pull request