@canaia/ui-kit/README.md

Un kit de interfaz de usuario modular y personalizable basado en React y Chakra UI, con soporte para Storybook para la documentación y pruebas de componentes.

# 🌟 Canaia UI Kit
Un kit de interfaz de usuario modular y personalizable basado en React y Chakra UI, con soporte para Storybook para la documentación y pruebas de componentes.

# 📂 Estructura del Proyecto
El proyecto está organizado para facilitar el desarrollo y la integración de componentes reutilizables. A continuación, se describe la estructura principal:

```bash
canaia-ui-kit/
├── .storybook/                # Configuración de Storybook
│   ├── main.ts                # Configuración de los addons y rutas
│   ├── preview.ts             # Tema global y configuración de decorators
├── dist/                      # Archivos compilados
├── src/                       # Código fuente principal
│   ├── components/            # Componentes reutilizables
│   │   └── Select/         # Ejemplo de un componente (Select)
│   │       ├── index.tsx      # Exportación del componente
│   │       ├── Select.tsx     # Lógica principal del componente
│   │       ├── Select.styles.ts # Estilos específicos
│   │       ├── Select.types.ts # Tipos e interfaces
│   │       ├── Select.stories.tsx # Configuración en Storybook
│   ├── provider/              # Proveedor de contexto de Chakra UI
│   │   ├── index.tsx          # Configuración de CanaiaProvider
│   ├── theme/                 # Tema personalizado de Chakra UI
│       ├── colors.ts          # Colores personalizados
│       ├── fonts.ts           # Configuración de fuentes
│       ├── index.ts           # Exportación principal del tema
│       ├── styles.ts          # Estilos globales
├── github/workflows/          # Automatización de CI/CD
│   └── publish-to-npm.yml     # Configuración para publicar en NPM
├── package.json               # Configuración de dependencias y scripts
├── README.md                  # Documentación del proyecto
🔧 Configuración de Storybook
```
El proyecto incluye Storybook como herramienta para documentar y probar visualmente los componentes.

Archivos de configuración de Storybook
main.ts: Configura los addons y las rutas de los archivos de historias.

```ts

import { mergeConfig } from "vite";
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@chakra-ui/storybook-addon",
  ],
  framework: "@storybook/react-vite",
  async viteFinal(config) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: ["lodash.mergewith"],
      },
    });
  },
};

export default config;
```
preview.ts: Define los decorators globales y aplica el tema de Chakra UI a todas las historias.

```ts
import { ChakraProvider } from "@chakra-ui/react";
import theme from "../src/theme";

export const decorators = [
  (Story) => (
    <ChakraProvider theme={theme}>
      <Story />
    </ChakraProvider>
  ),
];
```

# 🧩 Componentes
Ejemplo: Componente Select
El componente Select es un ejemplo de un componente modular con lógica, estilos y tipos definidos de manera separada:

Select.tsx: Contiene la lógica del componente utilizando @chakra-ui/react.
Select.styles.ts: Define los estilos específicos del componente.
Select.types.ts: Incluye las interfaces y tipos asociados al componente.
Select.stories.tsx: Permite visualizar y probar el componente en Storybook.
Ejemplo de uso:

```tsx

import { Select } from "@canaia/ui-kit";

<Select
  placeholder="Selecciona una opción"
  options={[
    { label: "Opción 1", value: "1" },
    { label: "Opción 2", value: "2" },
  ]}
  onChange={(value) => console.log(value)}
/>;
```

# 🎨 Tema Personalizado
El tema está configurado en la carpeta src/theme y extiende el tema de Chakra UI. Incluye:

Colores personalizados: (colors.ts)
Fuentes: (fonts.ts)
Estilos globales: (styles.ts)
Puedes extender o modificar el tema fácilmente.

# 🚀 Comandos Disponibles
Levantar Storybook
```bash
npm run storybook
``` 
Esto abrirá Storybook en el navegador para que puedas probar los componentes visualmente.

Compilar el Proyecto
``` bash
npm run build
``` 
Compila los archivos en la carpeta dist.

Publicar en NPM
El proyecto incluye un workflow de GitHub Actions para publicar automáticamente en NPM al realizar un release:

Archivo: github/workflows/publish-to-npm.yml

``` yaml
name: publish to NPM

on:
  release:
    types: [published]

jobs:
  publish-to-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
          registry-url: 'https://registry.npmjs.org/'
      - run: npm ci
      - run: npm run build
      - run: npm publish

``` 
# 🛠 Tecnologías Utilizadas
React: Biblioteca de JavaScript para la construcción de interfaces de usuario.
Chakra UI: Librería de componentes accesibles y personalizables.
Storybook: Herramienta para documentar y probar componentes.
Vite: Empaquetador rápido y moderno para aplicaciones de frontend.
GitHub Actions: Automatización de CI/CD para publicar en NPM.

# 🌟 Cuando creamos un componente:
Si quieres contribuir a este proyecto, por favor:

Haz un fork del repositorio.
Crea una rama con tus cambios: git checkout -b feature/nueva-funcionalidad.
Haz un pull request describiendo los cambios.