@cupcodev/ui 1.0.7 → 1.2.2

package/README.md

@@ -1,52 +1,49 @@
-## @cupcodev/ui
-
-Design system Cupcode pronto para uso (componentes React + estilos + preset Tailwind).
-
-### Instalação
-
-```bash
-npm install @cupcodev/ui
-```
-
-Além do pacote, instale as peer dependencies listadas em `peerDependencies` (React 18, Tailwind 3, Radix UI, etc.). Um comando típico:
-
-```bash
+## @cupcodev/ui
+
+Design system Cupcode pronto para uso (componentes React + estilos + preset Tailwind).
+
+### Instalação
+
+```bash
+npm install @cupcodev/ui
+```
+
+Além do pacote, instale as peer dependencies listadas em `peerDependencies` (React 18, Tailwind 3, Radix UI, etc.). Um comando típico:
+
+```bash
 npm install react react-dom tailwindcss class-variance-authority tailwind-merge lucide-react \
 cmdk date-fns embla-carousel-react input-otp react-day-picker react-resizable-panels recharts sonner vaul \
-@radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-aspect-ratio @radix-ui/react-avatar \
-@radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog \
-@radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar \
-@radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
-@radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider \
-@radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle \
-@radix-ui/react-toggle-group @radix-ui/react-tooltip tailwindcss-animate @tailwindcss/typography
-```
-
+@radix-ui/react-accordion @radix-ui/react-alert-dialog @radix-ui/react-aspect-ratio @radix-ui/react-avatar \
+@radix-ui/react-checkbox @radix-ui/react-collapsible @radix-ui/react-context-menu @radix-ui/react-dialog \
+@radix-ui/react-dropdown-menu @radix-ui/react-hover-card @radix-ui/react-label @radix-ui/react-menubar \
+@radix-ui/react-navigation-menu @radix-ui/react-popover @radix-ui/react-progress @radix-ui/react-radio-group \
+@radix-ui/react-scroll-area @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slider \
+@radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle \
+@radix-ui/react-toggle-group @radix-ui/react-tooltip tailwindcss-animate @tailwindcss/typography
+```
+
 Compatibilidade de runtime: Node.js `>=18.18.0`.
 Compatibilidade de estilo: Tailwind CSS v3 (`tailwindcss@^3.4.x`).
 Gerenciador oficial: `npm` (lockfile único: `package-lock.json`).
-
-### Tailwind (obrigatorio para `styles.css`)
-
-Use o preset disponibilizado pelo pacote:
-
-```js
-// tailwind.config.js
-module.exports = {
-  presets: [require("@cupcodev/ui/tailwind-preset.cjs")],
-  content: [
-    "./src/**/*.{ts,tsx}",
-    "./node_modules/@cupcodev/ui/dist/**/*.{js,jsx}",
-  ],
-};
-```
-
-E importe os estilos completos:
-
-```ts
+
+### Styles (`styles.css` compilado)
+
+Para carregar o visual completo dos componentes (incluindo `UserMenuCupcode`, chat e modal Telescup), basta:
+
+```ts
 import "@cupcodev/ui/styles.css";
 ```
 
+Se o app também usa Tailwind, o preset continua disponível:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require("@cupcodev/ui/tailwind-preset.cjs")],
+  content: ["./src/**/*.{ts,tsx}"],
+};
+```
+
 Se voce quiser apenas variaveis + base minima (sem classes utilitarias/glass/dock), use:
 
 ```ts
@@ -54,97 +51,129 @@ import "@cupcodev/ui/styles/base.css";
 ```
 
 Importante:
-- `styles.css` pressupoe Tailwind + preset configurados no app consumidor.
+- `styles.css` agora ja vem compilado para uso direto no app consumidor.
 - `styles/global.css` nao deve ser usado isoladamente, porque nao inclui os tokens.
 - `styles/base.css` e o entrypoint seguro para tema/tokens quando voce nao quer carregar o pacote visual completo.
-
-### Uso básico
-
-```tsx
-import { Button } from "@cupcodev/ui";
-
-export default function Example() {
-  return <Button variant="default">Oi Cupcode</Button>;
-}
-```
-
-Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`.
-
-### MainNavbar sem router obrigatório
-
-`MainNavbar` não depende de `react-router-dom`. Para integração SPA, passe `pathname` e `onNavigate`:
-
-```tsx
-import { MainNavbar } from "@cupcodev/ui";
-import { useLocation, useNavigate } from "react-router-dom";
-
-export function Header() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  return (
-    <MainNavbar
-      pathname={location.pathname}
-      onNavigate={(href) => navigate(href)}
-    />
-  );
-}
-```
-
-### ThemeToggle sem next-themes obrigatório
-
-`ThemeToggle` alterna a classe `dark` no `document.documentElement` quando usado de forma não-controlada:
-
-```tsx
-import { ThemeToggle } from "@cupcodev/ui";
-
-export function HeaderActions() {
-  return <ThemeToggle />;
-}
-```
-
-Modo controlado (opcional):
-
-```tsx
-<ThemeToggle theme={theme} onThemeChange={setTheme} />
-```
-
-### Qualidade e CI
-
-Validações automatizadas disponíveis no projeto:
-
-```bash
-npm run lint
-npm run typecheck
-npm run build:lib
-npm run build:site
-npm run test:consumer
-```
-
-- `lint` roda com `--max-warnings=0` (qualquer warning quebra o gate).
-- `typecheck`: valida tipos com `tsc -b` usando as configs estritas do projeto.
-- `build:lib`: gera o pacote publicável (`dist`) via `tsup` sem sourcemaps.
-- `build:site`: gera somente o site/docs via Vite.
-- `test:consumer`: cria um projeto externo temporário, instala o tarball de `@cupcodev/ui` e valida `typecheck + build`.
-- `prepublishOnly` executa `check:release` (`lint + typecheck + build:lib`) antes de qualquer publicação.
-- Pipeline CI em `.github/workflows/ci.yml` roda `check:release`, `build:site` e `test:consumer` em todo push/PR.
-
-App de consumo real versionado: `examples/vite-consumer`.
-
-### Peers
-
-| Pacote | Versão mínima | Uso no DS |
-| --- | --- | --- |
-| `react`, `react-dom` | ^18.3.1 | base dos componentes |
-| `tailwindcss` | ^3.4.17 | util classes + preset |
-| `class-variance-authority`, `tailwind-merge` | ^0.7.1 / ^2.6.0 | variantes e merge de classes |
-| `lucide-react` | ^0.462.0 | ícones |
-| `@radix-ui/*` | conforme `package.json` | primitives dos componentes shadcn |
+
+### Config de runtime (env no app consumidor)
+
+Para componentes que dependem de env em runtime (chat/supabase/telescup), configure uma vez no bootstrap do app:
+
+```ts
+import { setCupcodeRuntimeEnv } from "@cupcodev/ui";
+
+setCupcodeRuntimeEnv({
+  VITE_SUPABASE_URL: import.meta.env.VITE_SUPABASE_URL,
+  VITE_SUPABASE_ANON_KEY: import.meta.env.VITE_SUPABASE_ANON_KEY,
+  VITE_TELESCUP_BASE_URL: import.meta.env.VITE_TELESCUP_BASE_URL,
+  VITE_TELESCUP_API_BASE: import.meta.env.VITE_TELESCUP_API_BASE,
+});
+```
+
+### Uso básico
+
+```tsx
+import { Button } from "@cupcodev/ui";
+
+export default function Example() {
+  return <Button variant="default">Oi Cupcode</Button>;
+}
+```
+
+Todos os componentes Cupcode e shadcn/ui base são reexportados de `@cupcodev/ui`.
+
+### MainNavbar sem router obrigatório
+
+`MainNavbar` não depende de `react-router-dom`. Para integração SPA, passe `pathname` e `onNavigate`:
+
+```tsx
+import { MainNavbar } from "@cupcodev/ui";
+import { useLocation, useNavigate } from "react-router-dom";
+
+export function Header() {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <MainNavbar
+      pathname={location.pathname}
+      onNavigate={(href) => navigate(href)}
+    />
+  );
+}
+```
+
+### ThemeToggle sem next-themes obrigatório
+
+`ThemeToggle` alterna a classe `dark` no `document.documentElement` quando usado de forma não-controlada:
+
+```tsx
+import { ThemeToggle } from "@cupcodev/ui";
+
+export function HeaderActions() {
+  return <ThemeToggle />;
+}
+```
+
+Modo controlado (opcional):
+
+```tsx
+<ThemeToggle theme={theme} onThemeChange={setTheme} />
+```
+
+### Qualidade e CI
+
+Validações automatizadas disponíveis no projeto:
+
+```bash
+npm run lint
+npm run typecheck
+npm run build:lib
+npm run build:site
+npm run test:consumer
+```
+
+- `lint` roda com `--max-warnings=0` (qualquer warning quebra o gate).
+- `typecheck`: valida tipos com `tsc -b` usando as configs estritas do projeto.
+- `build:lib`: gera o pacote publicável (`dist`) via `tsup` sem sourcemaps.
+- `build:site`: gera somente o site/docs via Vite.
+- `test:consumer`: cria um projeto externo temporário, instala o tarball de `@cupcodev/ui` e valida `typecheck + build`.
+- `prepublishOnly` executa `check:release` (`lint + typecheck + build:lib`) antes de qualquer publicação.
+- Pipeline CI em `.github/workflows/ci.yml` roda `check:release`, `build:site` e `test:consumer` em todo push/PR.
+
+App de consumo real versionado: `examples/vite-consumer`.
+
+### Setup do chat (Supabase + Realtime)
+
+Para configurar o chat com dados reais e notificacoes em tempo real:
+
+1. Use `.env.chat.example` como referencia para preencher seu `.env.local`.
+2. Rode no SQL Editor do Supabase:
+   - `scripts/supabase/chat/00_bootstrap_chat_public.sql`
+   - `scripts/supabase/chat/01_confirm_tables.sql`
+   - `scripts/supabase/chat/02_confirm_columns.sql`
+   - `scripts/supabase/chat/03_enable_realtime.sql`
+   - `scripts/supabase/chat/04_verify_realtime.sql`
+   - `scripts/supabase/chat/06_fix_rls_and_avatars_for_external_auth.sql` (se usar auth externa)
+3. Reinicie o app: `npm run dev`.
+4. Valide o fluxo com `scripts/supabase/chat/05_acceptance_checks.sql`.
+
+Guia completo: `docs/chat-supabase-setup.md`.
+
+### Peers
+
+| Pacote | Versão mínima | Uso no DS |
+| --- | --- | --- |
+| `react`, `react-dom` | ^18.3.1 | base dos componentes |
+| `tailwindcss` | ^3.4.17 | util classes + preset |
+| `class-variance-authority`, `tailwind-merge` | ^0.7.1 / ^2.6.0 | variantes e merge de classes |
+| `lucide-react` | ^0.462.0 | ícones |
+| `@radix-ui/*` | conforme `package.json` | primitives dos componentes shadcn |
 | `cmdk`, `date-fns`, `embla-carousel-react`, `react-day-picker`, `input-otp`, `react-resizable-panels`, `recharts`, `sonner`, `vaul` | conforme `package.json` | componentes específicos |
-| `tailwindcss-animate`, `@tailwindcss/typography` | ^1.0.7 / ^0.5.16 | plugins usados pelo preset |
-
-Consulte `peerDependencies` para a lista completa ao instalar.
-
-### Tipos e superfícies
-
-Importe de `@cupcodev/ui` para manter tipos e estilos alinhados. Para gráficos, use também o submódulo `@cupcodev/ui/charts`.
+| `tailwindcss-animate`, `@tailwindcss/typography` | ^1.0.7 / ^0.5.16 | plugins usados pelo preset |
+
+Consulte `peerDependencies` para a lista completa ao instalar.
+
+### Tipos e superfícies
+
+Importe de `@cupcodev/ui` para manter tipos e estilos alinhados. Para gráficos, use também o submódulo `@cupcodev/ui/charts`.