🎨 Cherry System

Una librería de componentes React estilo shadcn/ui con Tailwind CSS y TypeScript.

📋 Requisitos Previos

• Node.js versión 18 o superior
• npm o pnpm o yarn

🚀 Instalación

1. Clonar/Copiar el proyecto

Copia la carpeta mi-libreria-ui a tu ubicación deseada.

2. Instalar dependencias

Abre tu terminal, navega a la carpeta del proyecto y ejecuta:

cd mi-libreria-ui
npm install

¿Qué hace esto? Lee el archivo package.json y descarga todas las librerías necesarias a una carpeta llamada node_modules.

3. Iniciar Storybook

npm run storybook

¿Qué hace esto? Inicia un servidor local en http://localhost:6006 donde puedes ver y probar todos tus componentes.

📁 Estructura del Proyecto

mi-libreria-ui/
├── .storybook/              # Configuración de Storybook
│   ├── main.ts              # Configuración principal
│   └── preview.ts           # Estilos y decoradores globales
│
├── src/
│   ├── components/          # 🧩 TUS COMPONENTES
│   │   ├── Button/
│   │   │   ├── Button.tsx           # El componente
│   │   │   ├── Button.stories.tsx   # Documentación Storybook
│   │   │   └── index.ts             # Exportación
│   │   └── index.ts         # Exporta todos los componentes
│   │
│   ├── lib/
│   │   └── utils.ts         # Función cn() para clases
│   │
│   └── styles/
│       └── globals.css      # Estilos globales + Tailwind
│
├── tailwind.config.js       # 🎨 PERSONALIZA TUS COLORES AQUÍ
├── package.json             # Dependencias del proyecto
└── tsconfig.json            # Configuración de TypeScript

🎨 Personalización

Cambiar Colores

Edita el archivo tailwind.config.js:

colors: {
  primary: {
    500: '#tu-color-aquí',  // Color principal
    // ... otros tonos
  },
}

Cambiar Fuentes

1. Agrega tu fuente en src/styles/globals.css:

@import url('https://fonts.googleapis.com/css2?family=Tu+Fuente&display=swap');

2. Actualiza tailwind.config.js:

fontFamily: {
  sans: ['Tu Fuente', 'sans-serif'],
}

🧩 Crear un Nuevo Componente

Paso 1: Crear la carpeta

src/components/MiComponente/
├── MiComponente.tsx
├── MiComponente.stories.tsx
└── index.ts

Paso 2: Crear el componente

// src/components/MiComponente/MiComponente.tsx
import * as React from "react"
import { cn } from "@/lib/utils"

export interface MiComponenteProps {
  children: React.ReactNode
  className?: string
}

const MiComponente = React.forwardRef<HTMLDivElement, MiComponenteProps>(
  ({ className, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn("tu-clase-base", className)}
        {...props}
      >
        {children}
      </div>
    )
  }
)

MiComponente.displayName = "MiComponente"

export { MiComponente }

Paso 3: Crear las stories

// src/components/MiComponente/MiComponente.stories.tsx
import type { Meta, StoryObj } from "@storybook/react"
import { MiComponente } from "./MiComponente"

const meta: Meta<typeof MiComponente> = {
  title: "Componentes/MiComponente",
  component: MiComponente,
  tags: ["autodocs"],
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: "Contenido de ejemplo",
  },
}

Paso 4: Exportar el componente

// src/components/MiComponente/index.ts
export { MiComponente } from "./MiComponente"
export type { MiComponenteProps } from "./MiComponente"

// src/components/index.ts
export { MiComponente } from "./MiComponente"

🔗 Integración con Next.js

Opción A: Copiar componentes (estilo shadcn)

1. Copia la carpeta src/components a tu proyecto Next.js
2. Copia src/lib/utils.ts
3. Copia los estilos de tailwind.config.js a tu configuración
4. Importa los estilos en tu globals.css

Opción B: Enlace local con npm (para desarrollo)

1. En la carpeta de tu librería:

npm link

2. En tu proyecto Next.js:

npm link mi-libreria-ui

3. Importa los componentes:

import { Button } from "mi-libreria-ui"

📚 Comandos Útiles

| Comando | Descripción | |---------|-------------| | npm run storybook | Inicia Storybook en modo desarrollo | | npm run build-storybook | Genera Storybook estático para deploy |

🤔 Preguntas Frecuentes

¿Qué es la función cn()?

Es una utilidad que combina clases de Tailwind de forma inteligente. Por ejemplo:

cn("p-2", "p-4")  // → "p-4" (resuelve el conflicto)
cn("base", isActive && "active")  // Agrega "active" solo si isActive es true

¿Qué es forwardRef?

Permite que tu componente pueda recibir una ref de React. Esto es útil para:

• Enfocar elementos (inputRef.current.focus())
• Medir dimensiones
• Integrar con otras librerías

¿Por qué TypeScript?

TypeScript te ayuda a:

• Detectar errores antes de ejecutar el código
• Tener autocompletado en tu editor
• Documentar tus componentes automáticamente

¡Feliz desarrollo! 🚀