Biblioteca de componentes frontend da V.tal

Este repositório contém o código-fonte da biblioteca de componentes utilizada nas aplicações frontend da V.tal.

Pré-requisitos

• node >= 16.2.0
• npm >= 7.13.0
• styled-components >= 5.3.5

"peerDependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

Project Status

Em desenvolvimento...

Como usar

1. Através de um terminal, navegue até a raiz do seu projeto em Node e execue o seguinte comando: npm install @ramonuchoa386/fibra-ds
2. No arquivo inicial do seu projeto (entrypoint), instancie o contexto da biblioteca

/* ./src/index.ts */
import { VtalUIContext } from '@ramonuchoa386/fibra-ds';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <VtalUIContext>
    <App />
  </VtalUIContext>
);

3. Agora você pode instanciar qualquer componente nas suas views.

import React from 'react';
import { Avatar, Button } from '@ramonuchoa386/fibra-ds';

function Topbar() {
  return (
  <header>
    <Avatar avatarTheme='coral' />
    <Button btnTheme='coral'>Abrir perfil</Button>
  </header>
  );
}

export default Topbar;

Comandos

1. Empacota a biblioteca de componentes para deploy npm build-lib
2. Inicia o Storybook npm storybook
3. Empacota o Storybook para deploy npm build-storybook
4. Executa os testes unitários npm test
5. Executa o relatório de cobertura de testes de código npm coverage
6. Atualiza os snapshots npm snapshotpdate
7. Executa o lint nos arquivos npm lintix
8. Prepara os pre-hooks do Git npm prepare

Estrutura de pastas

├── README.md                  # Documentação funcional da biblioteca
├── dist                       # Artefatos da biblioteca gerado para deploy
├── documentation              # Documentação do Storybook
├── package.json               # Configurações do projeto
├── tsconfig.json              # Configurações do TypeScript
├── .husky                     # Hooks do Git
├── .storybook                 # Configuração do Storybook
├── .editoconfig               # Configurações de estilo de código na IDE
├── .eslintrc.json             # Regras de padronização de código.
├── .prettierrc.json           # Regras de formatação de código.
└── src                        # Pasta principal
     ├── @types                # Declaração de tipos
     ├── assets                # Arquivos estáticos
     ├── components            # Componentes Atomic Design
     ├── context               # Estados globais
     ├── util                  # Funções úteis
     └── styles                # Estilos globais e fontes
          ├── theme.ts         # Configurações do tema
          └── global.ts        # Estilo global