Shared UI

Biblioteca de componentes, hooks e serviços compartilhados para plugins XCOS.

Este repositório empacota um conjunto de componentes React, hooks, serviços e recursos de i18n em dist/ para consumo por outros pacotes (monorepo) ou via npm.

Versão do pacote: @viasoftbr/shared-ui (veja package.json para a versão atual).

📦 Instalação

Instalação via npm (registro público):

# npm
npm install @viasoftbr/shared-ui

# pnpm
pnpm add @viasoftbr/shared-ui

# yarn
yarn add @viasoftbr/shared-ui

Instalação no monorepo (workspace pnpm):

# a partir do diretório do seu pacote consumidor
pnpm add @viasoftbr/shared-ui --workspace

Instalação local (desenvolvimento):

# criar pacote .tgz e instalar no projeto consumidor
npm run build
npm pack
# no projeto consumidor
npm install ../path/to/viasoftbr-shared-ui-0.0.2.tgz

# ou usar link para desenvolvimento iterativo
# no shared-ui
npm run build
npm link
# no projeto consumidor
npm link @viasoftbr/shared-ui

Instalação direta do GitHub (não recomendado sem dist/ commitado):

{
  "dependencies": {
    "@viasoftbr/shared-ui": "git+https://github.com/viasoftbr/shared-ui.git"
  }
}

Observação: se instalar diretamente do Git, prefira ter a pasta dist/ com os artefatos comitados OU adicionar um script prepare que execute o build na instalação.

🚀 Uso

Importação principal:

import { InputField, SelectField, useSettings } from '@viasoftbr/shared-ui';

Deep imports (subpaths) disponíveis conforme exports no package.json:

import i18n from '@viasoftbr/shared-ui/i18n';
import jsmpegBundle from '@viasoftbr/shared-ui/jsmpeg';
import localePt from '@viasoftbr/shared-ui/locales/pt/translation.json';

Exemplo (React):

import React from 'react';
import { InputField } from '@viasoftbr/shared-ui';

export function Example() {
  const [value, setValue] = React.useState('');
  return <InputField label="Nome" value={value} onChange={setValue} />;
}

📦 Publicação no npm

Passos básicos para publicar (usuário com permissão no escopo @viasoftbr):

# instalar dependências
pnpm install

# gerar build e declarações
pnpm run build

# atualizar versão (opcional)
npm version patch

# publicar
npm publish --access public

Recomendações:

• Garanta que dist/ e os .d.ts foram gerados antes de publicar.
• Atualize a versão no package.json antes do npm publish.

⚠️ Peer dependencies

Este pacote declara react como peer dependency (^19.0.0). O projeto consumidor deve fornecer uma versão compatível do React.

🛠 Scripts de desenvolvimento

• pnpm run build — Empacota a lib em dist/ (usa scripts/build.js).
• pnpm run dev — Mesma build em modo watch.
• pnpm run typecheck — Roda tsc --noEmit para validação de tipos.

💡 i18n e assets

O pacote inclui traduções em locales/ e expõe um helper i18n em @viasoftbr/shared-ui/i18n. O bundle do player jsmpeg.vu.min.js é exposto em @viasoftbr/shared-ui/jsmpeg.

Desenvolvimento

1. Instale dependências: pnpm install
2. Rode o build em modo watch: pnpm run dev
3. Edite arquivos em src/ e verifique o output em dist/.
4. Para checar tipos: pnpm run typecheck.

Se quiser, adapto este README com exemplos reais retirados dos componentes presentes em src/components/ ou adiciono um prepare script para facilitar instalação direta do Git.