npm - @boxcustodia/library - Versions diffs - 2.0.0-alpha.17 → 2.0.0-alpha.19 - Mend

@boxcustodia/library 2.0.0-alpha.17 → 2.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (727) hide show

package/src/__doc__/MCP.mdx DELETED Viewed

@@ -1,71 +0,0 @@
-import { Meta, Source } from "@storybook/addon-docs/blocks";
-<Meta title="Documentation/MCP" />
-# MCP — AI Integration
-Con este MCP (Model Context Protocol) Claude va a tener acceso directo a la documentación completa de todos los componentes de esta librería: props, variantes, ejemplos reales y patrones de uso.
-Sin el MCP, Claude no conoce esta librería. Inventa props, ignora nuestras convenciones y genera código genérico que no funciona. Con el MCP instalado, Claude consulta la documentación en tiempo real y genera código que usa correctamente `@boxcustodia/library` desde el primer intento, sin necesidad de leer el codebase ni darle contexto adicional.
-## Requisito previo
-El Storybook está hosteado en un proyecto privado de Chromatic. Para poder autenticarte necesitás tener acceso al proyecto.
-**Pedile a Franco Baigorria que te agregue como colaborador en Chromatic antes de continuar.**
-## Instalación
-Ejecutar una sola vez por computadora. Se instala globalmente y funciona en todos los proyectos internos automáticamente.
-La URL usa el formato de permalink de Chromatic (`branch--appId`) que siempre apunta al último deploy de la rama `v2`. No uses una URL de build específico — esas cambian con cada deploy.
-<Source
-  language="bash"
-  code={`npx mcp-add --type http --url "https://v2--69de51f0642746d263d5c46f.chromatic.com/mcp" --client-id "cdf3737dff9d485485968e50b63fd8b4" --scope global --clients "claude code"`}
-/>
-El instalador va a hacer algunas preguntas, respondé así:
-- **What is the server name?** → `boxcustodia-library`
-- **HTTP headers?** → dejar vacío, Enter
-- **claude code OAuth client secret?** → dejar vacío, Enter
-La primera vez que Claude use el MCP abrirá el browser para autenticarse con Chromatic.
-## Instrucción CLAUDE.md
-Se recomienda agregar este texto al archivo `CLAUDE.md` para que Claude sepa cuándo usar el MCP.
-<Source
-  language="markdown"
-  code={`## @boxcustodia/library
-Este proyecto usa @boxcustodia/library, que exporta componentes de UI y hooks de React.
-Cuando no estés seguro de cómo usar un componente o hook, qué props o parámetros acepta, qué variantes tiene,
-o cuál es el componente/hook correcto para una necesidad específica, consultá el MCP boxcustodia-library antes de escribir código.
-No es necesario consultarlo para usos básicos y evidentes.`}
-/>
-Así Claude lo consulta cuando realmente lo necesita — componentes complejos, props no obvias, patrones específicos — sin hacerlo para cada `Button` o `Input`.
-## Uso
-Una vez instalado, Claude consulta la documentación automáticamente. Algunos ejemplos de lo que podés pedirle:
-**Explorar la librería**
-<Source
-  language="bash"
-  code={`¿Qué componentes están disponibles en la librería?`}
-/>
-**Consultar props y variantes**
-<Source language="bash" code={`¿Qué props acepta el componente Combobox?`} />
-**Implementar funcionalidades**
-<Source
-  language="bash"
-  code={`Implementá un buscador con sugerencias usando el componente AutoComplete de la librería.`}
-/>

package/src/__doc__/Tabs.mdx DELETED Viewed

@@ -1,112 +0,0 @@
----
-title: Tabs
-description: A component for toggling between related panels on the same page.
-links:
-  doc: https://base-ui.com/react/components/tabs#api-reference
----
-<ComponentPreview name="p-tabs-1" />
-## Installation
-<CodeTabs>
-<TabsList>
-  <TabsTab value="cli">CLI</TabsTab>
-  <TabsTab value="manual">Manual</TabsTab>
-</TabsList>
-<TabsPanel value="cli">
-```bash
-npx shadcn@latest add @coss/tabs
-```
-</TabsPanel>
-<TabsPanel value="manual">
-<Steps>
-<Step>Copy and paste the following code into your project.</Step>
-<ComponentSource name="tabs" title="components/ui/tabs.tsx" />
-<Step>Update the import paths to match your project setup.</Step>
-</Steps>
-</TabsPanel>
-</CodeTabs>
-## Usage
-```tsx
-import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs"
-```
-```tsx
-<Tabs defaultValue="tab-1">
-  <TabsList>
-    <TabsTab value="tab-1">Tab 1</TabsTab>
-    <TabsTab value="tab-2">Tab 2</TabsTab>
-    <TabsTab value="tab-3">Tab 3</TabsTab>
-  </TabsList>
-  <TabsPanel value="tab-1">Tab 1 content</TabsPanel>
-  <TabsPanel value="tab-2">Tab 2 content</TabsPanel>
-  <TabsPanel value="tab-3">Tab 3 content</TabsPanel>
-</Tabs>
-```
-## API Reference
-### Tabs
-Root component. Styled wrapper for `Tabs.Root` from Base UI. Accepts all `Tabs.Root` props.
-| Prop           | Type                             | Default        | Description                          |
-| -------------- | -------------------------------- | -------------- | ------------------------------------ |
-| `defaultValue` | `string`                         | —              | Uncontrolled initial active tab      |
-| `value`        | `string`                         | —              | Controlled active tab value          |
-| `onValueChange`| `(value: string) => void`        | —              | Callback when active tab changes     |
-| `orientation`  | `"horizontal" \| "vertical"`     | `"horizontal"` | Layout direction                     |
-### TabsList
-Container for tab triggers. Styled wrapper for `Tabs.List` from Base UI. Renders the animated indicator internally.
-| Prop      | Type                         | Default     | Description                   |
-| --------- | ---------------------------- | ----------- | ----------------------------- |
-| `variant` | `"underline" \| "pill"`       | `"underline"` | Underline indicator or pill background |
-### TabsTab
-Individual tab trigger. Styled wrapper for `Tabs.Tab` from Base UI.
-| Prop       | Type      | Default | Description                  |
-| ---------- | --------- | ------- | ---------------------------- |
-| `value`    | `string`  | —       | Matches the panel to activate |
-| `disabled` | `boolean` | `false` | Prevents interaction          |
-### TabsPanel
-Content panel for each tab. Styled wrapper for `Tabs.Panel` from Base UI.
-| Prop    | Type     | Default | Description                     |
-| ------- | -------- | ------- | ------------------------------- |
-| `value` | `string` | —       | Matches the trigger that shows this panel |
-## Examples
-### Underline Variant
-<ComponentPreview name="p-tabs-2" />
-### Vertical Orientation
-<ComponentPreview name="p-tabs-3" />
-### Underline with Vertical Orientation
-<ComponentPreview name="p-tabs-4" />

package/src/__doc__/Theme.mdx DELETED Viewed

@@ -1,132 +0,0 @@
-import {
-  Canvas,
-  ColorItem,
-  ColorPalette,
-  Meta,
-  Source,
-} from "@storybook/addon-docs/blocks";
-import { BorderRadius } from "./Examples";
-<Meta title="Documentation/Theme" />
-# Theme
-La librería permite la customización de los estilos mediante variables CSS y la personalización detallada de cada componente usando slots.
-## Personalización mediante Slots
-Cada componente de la librería está construido con una arquitectura basada en slots, lo que permite una personalización detallada de cada parte del componente a nivel global. Los slots son identificados mediante el atributo `data-slot` en los elementos HTML subyacentes.
-### Cómo personalizar usando Slots
-Puedes sobrescribir los estilos de cualquier slot utilizando selectores CSS que apunten al atributo `data-slot`. Esta personalización se puede aplicar globalmente en tu archivo CSS principal o dentro de un módulo CSS.
-#### Ejemplo: Personalizando un Dialog
-```css
-/* En tu archivo index.css */
-[data-slot="input"] {
-  @apply h-12 rounded-xl border-primary; /* Aplica estilos a todos los inputs */
-}
-[data-slot="dialog-content"] {
-  @apply rounded-3xl;  /* Aplica bordes más redondeados a todos los dialog */
-}
-```
-## Border Radius
-Estos son los bordes redondeados por defecto. Se puede customizar `--radius`. La clase `rounded` es equivalente a la mitad del valor de `--radius`
-<BorderRadius />
-## Paleta de colores
-Colores por defecto de la librería. Se puede customizar con las variables css
-<ColorPalette>
-  <ColorItem
-    title="color.primary"
-    subtitle="Primary Colors"
-    colors={{
-      Primary: "var(--color-primary)",
-      PrimaryForeground: "var(--color-primary-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.secondary"
-    subtitle="Secondary Colors"
-    colors={{
-      Secondary: "var(--color-secondary)",
-      SecondaryForeground: "var(--color-secondary-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.error"
-    subtitle="Error Colors"
-    colors={{
-      error: "var(--color-error)",
-      errorForeground: "var(--color-error-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.success"
-    subtitle="Success Colors"
-    colors={{
-      Success: "var(--color-success)",
-      SuccessForeground: "var(--color-success-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.muted"
-    subtitle="Muted Colors"
-    colors={{
-      Muted: "var(--color-muted)",
-      MutedForeground: "var(--color-muted-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.accent"
-    subtitle="Accent Colors"
-    colors={{
-      Accent: "var(--color-accent)",
-      AccentForeground: "var(--color-accent-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.popover"
-    subtitle="Popover Colors"
-    colors={{
-      Popover: "var(--color-popover)",
-      PopoverForeground: "var(--color-popover-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.background"
-    subtitle="Background Colors"
-    colors={{
-      Background: "var(--color-background)",
-    }}
-  />
-  <ColorItem
-    title="color.foreground"
-    subtitle="Foreground Colors"
-    colors={{
-      Foreground: "var(--color-foreground)",
-    }}
-  />
-  <ColorItem
-    title="color.input"
-    subtitle="Input Colors"
-    colors={{
-      Input: "var(--color-input)",
-    }}
-  />
-  <ColorItem
-    title="color.ring"
-    subtitle="Ring Colors"
-    colors={{
-      Ring: "var(--color-ring)",
-    }}
-  />
-</ColorPalette>

package/src/__doc__/Types.mdx DELETED Viewed

@@ -1,252 +0,0 @@
-import {
-  Canvas,
-  ColorItem,
-  ColorPalette,
-  Meta,
-  Source,
-} from "@storybook/addon-docs/blocks";
-import { BorderRadius } from "./Examples";
-<Meta title="Documentation/Types" />
-# Types
-## Extender interfaces de componentes
-```ts
-// Se puede inferir utilizando la utilidad ComponentProps
-import { Input } from "../../components";
-type InputProps = ComponentProps<typeof Input>;
-```
-## Generic types
-### GenericObject
-Interfaz de objeto genérico
-```ts
-// Definición
-type GenericObject<T = any> = { [key: string]: T };
-const myObj: GenericObject = {
-  test: "TEST",
-};
-const myObj: GenericObject<number> = {
-  test: "TEST", // TS-Error
-  prop: 4,
-};
-```
-### Nullable
-Permite manejar valores que pueden ser null
-```ts
-// Definición
-type Nullable<T> = T | null;
-const [myState, setMyState] = useState<Nullable<number>>(null);
-setState(4);
-```
-### Maybe
-Permite manejar valores que pueden ser undefined o null
-```ts
-// Definición
-type Maybe<T> = T | undefined | null;
-interface APIResponse {
-  data: Maybe<string>; // string | undefined | null
-  error: Maybe<string>; // string | undefined | null
-}
-```
-### State
-Interfaz de hook `useState`
-```ts
-// Definición
-type SetState<T> = Dispatch<SetStateAction<T>>;
-type State<T> = [T, SetState<T>];
-interface MyComponentProps {
-  value: string;
-  setValue: SetState<string>;
-  otherState: State<boolean>;
-}
-function MyComponent({ value, setValue, otherState }: MyComponentProps) {
-   ...
-}
-```
-### ClassName
-interfaz simple para clases
-```ts
-// Definición
-type ClassName = string | undefined;
-interface MyComponentProps {
-    className: ClassName
-    ...
-}
-```
-### ID
-interfaz para ids
-```ts
-// Definición
-type ID = string | number;
-interface User {
-  id: ID;
-}
-```
-### OverrideProps
-Interfaz que sobrescribe las propiedades de un componente por la interfaz que se pase
-```ts
-// Definición
-type OverrideProps<T, TOverridden> = Omit<T, keyof TOverridden> & TOverridden;
-type InputExtension = ComponentProps<"input">;
-type MyCustomProps = { onChange: (value: string) => any };
-type MyComponentProps = OverrideProps<InputExtension, MyCustomProps>; // onChange: (value: string) => any
-```
-### SafeOmit
-Permite hacer omit de ciertas propiedades de una interfaz brindando autocompletado
-```ts
-// Definición
-type SafeOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-interface User {
-  name: string;
-  email: string;
-  age: number;
-  gender?: string;
-}
-type UserMetadata = Omit<User, "age" | "gender">;
-```
-### AtLeastOne
-Define un array que debe contener al menos 1 elemento
-```ts
-// Definición
-type AtLeastOne<T> = [T, ...T[]];
-const myArray: AtLeastOne<number> = []; // ❌ TS-ERROR
-const myArray: AtLeastOne<number> = [1]; // ✅
-```
-### Loose
-Autocompletado de ciertas opciones con la posibilidad de pasar cualquier string
-```ts
-// Definición
-type Loose<T> = T | (string & {});
-type Size = "xs" | "md" | "xl";
-type LooseSize = Loose<Size>;
-// Autocompleta 'xs', 'md' y 'xl'
-// Permite cualquier string
-const IconSizes: LooseSize[] = ["xs", "md", "xl", "10px", "100px"];
-```
-### Controllable
-Interfaz que sobrescribe las propiedades de un HTMLElement para hacerlo controlado
-```ts
-// Definición
-type Controllable<C, T extends {}> = OverrideProps<
-  HTMLProps<C>,
-  ControllableState<T>
->;
-// ❌ sin usar interfaz
-interface TabsProps
-  extends Omit<
-    HTMLProps<HTMLDivElement>,
-    "value" | "defaultValue" | "onChange"
-  > {
-  value?: string;
-  onChange?: (tab: string) => void;
-  defaultValue?: string;
-}
-// ✅ usando interfaz
-type TabsProps = Controllable<HTMLDivElement, string>;
-```
-### ArrayUnion
-Obtiene una unión de todos los elementos de un array
-```ts
-// Definición
-type ArrayUnion<V, T extends ReadonlyArray<V>> = T[number];
-const routes = ["dashboard", "login", "settings"] as const;
-type Route = ArrayUnion<string, typeof routes>; // "dashboard" | "login" | "settings"
-```
-### ValuesUnion
-Obtiene una unión de todos los valores de un objeto
-Las claves se pueden obtener con `keyof T`
-```ts
-// Definición
-type ValuesUnion<T extends Record<string, any>> = T[keyof T];
-const methods = {
-  GET: "get",
-  POST: "post",
-} as const;
-type Method = ValuesUnion<typeof methods>; // "get" | "post"
-```
-### Entity
-Representa una entidad en una base de datos
-```ts
-// Definición
-export type BaseEntity = {
-  id: string;
-  createdAt: number;
-};
-export type Entity<T> = {
-  [K in keyof T]: T[K];
-} & BaseEntity;
-// Uso
-type User = Entity<{
-  firstName: string;
-  lastName: string;
-  email: string;
-  role: "ADMIN" | "USER";
-}>;
-```