hwm-web-ui

Biblioteca de componentes React para o Hardwork Medicina.
Construída com React + TypeScript, com suporte a Tailwind, Storybook, Jest e integração com Font Awesome Pro.

📦 Instalação

Antes de instalar, configure seu token de autenticação para acessar o pacote privado.

🔑 Usando NPM

Crie ou edite o arquivo .npmrc no seu projeto:

@hardwork-med:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=SEU_TOKEN_AQUI

🔑 Usando YARN

Crie ou edite o arquivo .yarnrc.yml no seu projeto:

npmScopes:
  hardwork-med:
    npmRegistryServer: "https://registry.npmjs.org"
    npmAuthToken: "SEU_TOKEN_AQUI"

📥 Instalando a biblioteca

Instale no seu projeto React (após linkar localmente):

npm i @hardwork-med/hwm-web-ui
# ou
yarn add @hardwork-med/hwm-web-ui

🚀 Uso

Antes de utilizar qualquer componente da biblioteca, importe o CSS global da lib no ponto mais alto da sua aplicação (como src/index.tsx ou src/layout.tsx):

import '@hardwork-med/hwm-web-ui/dist/index.css'

Exemplo com o componente Icon:

import React from 'react'
import { Icon } from '@hardwork-med/hwm-web-ui'
import { faUser } from '@fortawesome/pro-solid-svg-icons'

export default function App() {
    return (
        <div>
            <Icon
                icon={faUser}
                fontSize={24}
                color="#4A90E2"
            />
        </div>
    )
}

🛠️ Desenvolvimento local

Se você estiver desenvolvendo a lib e quiser testá-la em outro projeto React localmente, use o npm link.

1. No repositório da lib (@hardwork-med/hwm-web-ui)

Compile e crie o link global:

npm run build
npm link

2. No projeto que vai usar a lib

Dentro do projeto onde você quer testar a lib:

npm link @hardwork-med/hwm-web-ui

Agora o projeto estará consumindo a versão local da lib.

⚠️ Caso ocorram problemas de múltiplas versões do react, rode também:

npm link ../hwm-web-ui/node_modules/react

3. Remover o link

Para voltar a usar a versão publicada no NPM:

npm unlink @hardwork-med/hwm-web-ui
npm install

📖 Storybook

Rodar o Storybook para visualizar os componentes:

npm run storybook

Gerar a versão estática do Storybook:

npm run build-storybook

🧪 Testes

Rodar todos os testes:

npm test

Rodar em modo watch:

npm run test:watch

Gerar relatório de cobertura:

npm run test:coverage

📜 Scripts úteis

• npm run build → compila a biblioteca usando tsup
• npm run test → executa todos os testes com Jest
• npm run test:coverage → gera o relatório de cobertura de testes
• npm run test:watch → executa os testes em modo watch
• npm run storybook → inicia o Storybook na porta 6006
• npm run build-storybook → gera a versão estática do Storybook
• npm run prepare → instala hooks do Husky
• npm run commitlint → valida mensagens de commit
• npm run format → formata código com Prettier e corrige com ESLint
• npm run deploy → build da lib + publicação no NPM (acesso restrito)
• npm run chromatic → executa o Chromatic (não falha em mudanças visuais)

🤝 Contribuindo

1. Faça um fork do repositório
2. Crie uma branch para sua feature (git checkout -b minha-feature)
3. Commit suas alterações (git commit -m 'feat: nova feature')
4. Push para a branch (git push origin minha-feature)
5. Abra um Pull Request 🎉