@demaarco/ui

Librería UI moderna para React y TypeScript, preparada para publicar en npm y consumir desde apps Next.js, Vite o React. Incluye componentes accesibles, estilos con Tailwind CSS, variantes con class-variance-authority, composición de clases con cn(), Storybook, Vitest y bundles ESM/CJS.

Instalación

npm install @demaarco/ui

Instala también las peer dependencies si tu proyecto no las tiene todavía:

npm install react react-dom

Uso

Importa el CSS global una vez en el entrypoint de tu app.

Next.js App Router:

// app/layout.tsx
import "@demaarco/ui/styles.css";

Vite o React:

// src/main.tsx
import "@demaarco/ui/styles.css";

Importa componentes desde el entrypoint principal:

import { Button, Card, CardContent, CardHeader, CardTitle } from "@demaarco/ui";

export function Example() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Plan Pro</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Empezar</Button>
      </CardContent>
    </Card>
  );
}

También puedes hacer imports por componente para optimizar el consumo:

import { Button } from "@demaarco/ui/button";

Componentes incluidos

Catálogo completo (55 componentes). Imports recomendados por subpath, p. ej. @demaarco/ui/button.

| | | | | |---|---|---|---| | Accordion | Alert | AlertDialog | AppShell | | AspectRatio | Avatar | Badge | Breadcrumb | | Button | Card | Checkbox | Collapsible | | Combobox | Command | Container | ContextMenu | | CopyButton | DateInput | Dialog | DropdownMenu | | Empty | Field | FileInput | Header | | HoverCard | Input | InputGroup | Kbd | | Label | Link | List | Meter | | NavigationMenu | Pagination | Popover | Progress | | RadioGroup | ScrollArea | Select | Separator | | Sheet | Sidebar | Skeleton | Slider | | Spinner | Steps | Switch | Table | | Tabs | Tag | Textarea | Toast | | ToggleGroup | Toolbar | Tooltip | |

Utilidades adicionales: cn() desde el entry principal y @demaarco/ui/color para tokens de color accesibles.

Explora previews, props e imports en la documentación interactiva:

npm run docs

Esto levanta una app Vite en http://localhost:5173/ que consume @demaarco/ui desde el workspace.

Desarrollo

Instala dependencias desde la raíz del repo:

npm install

Comandos principales:

npm run dev -w @demaarco/ui
npm run build -w @demaarco/ui
npm run test -w @demaarco/ui
npm run storybook -w @demaarco/ui
npm run lint -w @demaarco/ui
npm run docs

Crear nuevos componentes

1. Crea una carpeta en src/components/nombre-componente.
2. Añade nombre-componente.tsx, nombre-componente.test.tsx, nombre-componente.stories.tsx e index.ts.
3. Usa forwardRef cuando el componente exponga un nodo DOM o primitivo nativo / Floating UI.
4. Acepta siempre className.
5. Define variantes con cva.
6. Combina clases con cn().
7. Exporta el componente desde src/index.ts.
8. Añade un entrypoint en tsup.config.ts y un subpath en package.json si quieres permitir imports como @demaarco/ui/nombre-componente.

Publicación en npm

Actualiza metadatos antes de publicar:

• Completa name si vas a usar otro scope.
• Revisa author, repository, homepage y bugs antes de publicar.
• Asegúrate de tener acceso al scope de npm.

Login:

npm login

Build y publicación:

npm run build -w @demaarco/ui
npm publish -w @demaarco/ui --access public

El script prepublishOnly ejecuta lint, tests y build antes de publicar.

Versionado SemVer

Usa semantic versioning:

• Patch: 0.1.1 para fixes compatibles.
• Minor: 0.2.0 para componentes o props nuevas compatibles.
• Major: 1.0.0 para cambios incompatibles.

Comandos útiles:

npm version patch -w @demaarco/ui
npm version minor -w @demaarco/ui
npm version major -w @demaarco/ui

Monorepo con pnpm o Turborepo

La librería ya vive en packages/ui, por lo que puede migrar fácilmente a workspaces.

Para pnpm, crea pnpm-workspace.yaml en la raíz:

packages:
  - "packages/*"

Para Turborepo, añade turbo.json:

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"]
    },
    "lint": {}
  }
}

Después puedes añadir apps en apps/web, consumir la librería con el workspace protocol y compartir scripts desde la raíz.

{
  "dependencies": {
    "@demaarco/ui": "workspace:*"
  }
}