levannta-ui 1.0.0

package/README.md

@@ -0,0 +1,181 @@
+# Levannta UI
+
+Una biblioteca de componentes UI moderna construida con React y CSS.
+
+## Instalación
+
+### Desde NPM (Recomendado)
+
+```bash
+# Si estás usando npm
+npm install levannta-ui
+
+# Si estás usando yarn
+yarn add levannta-ui
+
+# Si estás usando pnpm
+pnpm add levannta-ui
+```
+
+### Desde GitHub
+
+Para instalar la biblioteca directamente desde GitHub, agrega lo siguiente a tu `package.json`:
+
+```json
+"dependencies": {
+  "levannta-ui": "github:levannta/levannta-ui#main"
+}
+```
+
+O usando la línea de comandos:
+
+```bash
+# Si estás usando npm
+npm install github:levannta/levannta-ui#main
+
+# Si estás usando yarn
+yarn add github:levannta/levannta-ui#main
+
+# Si estás usando pnpm
+pnpm add github:levannta/levannta-ui#main
+```
+
+Puedes también especificar una versión o commit específico cambiando `#main` por `#tag`, `#semver:x.x.x` o el hash de un commit.
+
+## Uso
+
+### Importación de componentes
+
+```jsx
+import { Button } from 'levannta-ui';
+import 'levannta-ui/style.css'; // Importar estilos
+
+function App() {
+  return (
+    <div>
+      <Button>Botón por defecto</Button>
+      <Button variant="outlined" color="primary">Botón con bordes</Button>
+      <Button variant="filled" color="secondary">Botón verde</Button>
+      <Button variant="outlined" color="error">Botón rojo outline</Button>
+      <Button variant="icon" color="primary">👍</Button>
+      <Button pill>Botón redondo</Button>
+      <Button active>Botón activo</Button>
+      <Button size="lg" disabled>Botón grande deshabilitado</Button>
+    </div>
+  );
+}
+```
+
+### Variantes disponibles
+
+El componente Button tiene las siguientes variantes:
+
+- `filled` (por defecto) - Botón con relleno completo de color
+- `outlined` - Botón con borde y fondo transparente
+- `icon` - Botón diseñado para contener solo iconos
+
+### Colores disponibles
+
+El componente Button tiene los siguientes colores:
+
+- `primary` (por defecto) - Color principal (generalmente azul)
+- `secondary` - Color secundario (generalmente verde)
+- `error` - Color de error (generalmente rojo)
+- `clear` - Color neutro (generalmente gris)
+
+### Propiedades adicionales
+
+El componente Button tiene las siguientes propiedades adicionales:
+
+- `pill` - Para botones con bordes completamente redondeados (true/false)
+- `active` - Para indicar que el botón está activo o seleccionado (true/false)
+- `disabled` - Para deshabilitar el botón (true/false)
+
+### Tamaños disponibles
+
+El componente Button tiene los siguientes tamaños:
+
+- `md` (por defecto) - Tamaño mediano
+- `sm` - Tamaño pequeño
+- `lg` - Tamaño grande
+- `xl` - Tamaño extra grande
+
+### API completa del Button
+
+```tsx
+<Button
+  variant="filled" // 'filled' | 'outlined' | 'icon'
+  color="primary" // 'primary' | 'secondary' | 'error' | 'clear'
+  size="md" // 'sm' | 'md' | 'lg' | 'xl'
+  pill={false} // boolean (para botones redondos)
+  active={false} // boolean (para botones activos/seleccionados)
+  disabled={false} // boolean
+  className="" // string (para estilos adicionales)
+  onClick={() => {}} // función
+>
+  Texto del botón
+</Button>
+```
+
+### Uso local (durante desarrollo)
+
+Para usar la biblioteca localmente en otro proyecto:
+
+```bash
+# En el directorio de levannta-ui
+npm run build
+```
+
+Luego, en tu otro proyecto:
+
+```json
+// package.json del otro proyecto
+{
+  "dependencies": {
+    "levannta-ui": "file:../path/to/levannta-ui"
+  }
+}
+```
+
+Ejecuta `npm install` y luego importa los componentes como se muestra arriba.
+
+## Documentación con Storybook
+
+Puedes ver todos los componentes y sus variantes en nuestro Storybook, disponible en Google Cloud Run. El despliegue se realiza automáticamente a través de GitHub Actions.
+
+### URLs de Storybook
+
+- **Producción**: [https://storybook-levannta-ui-XXXXX.run.app](https://storybook-levannta-ui-XXXXX.run.app) (automáticamente desplegado desde la rama `main`)
+- **Previews de PRs**: Cada Pull Request recibe un URL único para probar los cambios (disponible en los comentarios del PR)
+
+### Configuración del despliegue
+
+Los archivos de configuración para el despliegue de Storybook se encuentran en:
+- `.docker/storybook/` - Configuración de Docker y nginx
+- `.github/workflows/` - Workflows de GitHub Actions
+
+Consulta `.docker/storybook/README.md` para más detalles sobre la configuración y requisitos.
+
+## Desarrollo
+
+Para ejecutar el servidor de desarrollo:
+
+```bash
+npm run dev
+```
+
+Para ejecutar Storybook localmente:
+
+```bash
+npm run storybook
+```
+
+Para construir la biblioteca:
+
+```bash
+npm run build
+```
+
+## Licencia
+
+MIT

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import './Button.css';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/ui/Button.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Default: Story;
+export declare const Secondary: Story;
+export declare const Destructive: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const Link: Story;

package/dist/index.css

@@ -0,0 +1 @@
+.button{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;font-size:.875rem;font-weight:500;transition:all .2s;outline:none;cursor:pointer;border:none}.button:focus-visible{outline:2px solid hsl(221.2 83.2% 53.3%);outline-offset:2px}.button:disabled{opacity:.5;pointer-events:none}.button-default{background-color:#2563eb;color:#fff}.button-default:hover{background-color:#2563ebe6}.button-destructive{background-color:#ef4444;color:#f8fafc}.button-destructive:hover{background-color:#ef4444e6}.button-outline{border:1px solid hsl(214.3 31.8% 91.4%);background-color:#fff}.button-outline:hover,.button-secondary{background-color:#f1f5f9;color:#0f172a}.button-secondary:hover{background-color:#f1f5f9cc}.button-ghost:hover{background-color:#f1f5f9;color:#0f172a}.button-link{color:#2563eb;text-decoration:none}.button-link:hover{text-decoration:underline;text-underline-offset:4px}.button-size-default{height:2.5rem;padding:.5rem 1rem}.button-size-sm{height:2.25rem;padding:0 .75rem;border-radius:.375rem}.button-size-lg{height:2.75rem;padding:0 2rem;border-radius:.375rem}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, buttonVariants } from './components/ui/Button';
+export type { ButtonProps } from './components/ui/Button';