@twygo/ui

Pacote de componentes do design system Twyg para uso no app de protótipos.

Build (obrigatório antes de usar ou publicar)

O pacote re-exporta código do monólito; o consumidor usa o build em dist/, não o source. Rode o build dentro do monólito:

cd packages/twyg-ui
npm install
npm run build

Gera a pasta dist/ com:

• twygo-ui.js / UMD — bundle dos componentes
• twyg-design-system.css — Tailwind v4 + tokens do monólito (mesmo app/javascript/index.css), para apps externos sem importar o repo pai

No consumidor:

import '@twygo/ui/twyg-design-system.css'

Sem isso, o app que instala o pacote (por file: ou npm) não encontra os módulos nem o CSS publicado.

Uso no app de protótipos (file:)

No package.json do app de protótipos:

"@twygo/ui": "file:../twyg-app/packages/twyg-ui"

Depois de npm run build no pacote, rode npm install e npm run dev no app. O app usa dist/ e não precisa do monólito na resolução de módulos.

Publicar no npm (público)

cd packages/twyg-ui
npm login
npm run publish:npm

O script faz build e em seguida npm publish --access public. Só o conteúdo de dist/ é publicado (campo "files": ["dist"]).

Plate (editor rico)

Exportados para uso fora do monólito (sem useLanguage / useColorMode do app):

• CustomPlateEditor — recebe plugins, value, onValueChange, etc.
• EditorKit — array de plugins padrão do Twyg (mesmo núcleo do editor completo).

Exemplo mínimo no consumidor:

import { useState } from 'react'
import { CustomPlateEditor, EditorKit } from '@twygo/ui'

export function Demo() {
  const [value, setValue] = useState([
    { type: 'p', children: [{ text: 'Olá' }] },
  ])

  return (
    <CustomPlateEditor
      plugins={[...EditorKit]}
      value={value}
      onValueChange={setValue}
      variant="select"
    />
  )
}

Estilos: o editor usa classes Tailwind com prefixo tw: como no monólito. Se o app consumidor não tiver Tailwind configurado de forma compatível, a UI pode ficar sem aparência esperada — alinhe o setup de CSS/Tailwind ao do twyg-app se precisar do visual idêntico.

Formulário (Form)

Exporta o Form dinâmico do monólito. O app consumidor deve instalar as peer dependencies e usar o mesmo react-hook-form / yup que o bundle importa (estão externalizados no build do pacote):

• react-hook-form
• yup
• @hookform/resolvers (ex.: yupResolver de @hookform/resolvers/yup)

Envolva com ApplicationContainer e passe translations (ex.: formStorybookTranslations) para o useLanguage dos campos. Opcional: buildBasicFields, basicSchema como no Storybook do monólito.