open-index/open-npm huggingface dataset:
npm package: @ramonuchoa386/fibra-ds
Description: Este repositório contém o código-fonte da biblioteca de componentes utilizada nas aplicações frontend da V.tal.
Latest version: 0.0.7

# 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

```JSON
"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

```TS
/* ./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.

```TS
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

```text
├── 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
```