@canaia/ui-kit 0.0.1-test.1

package/README.md

@@ -0,0 +1,162 @@
+# 🌟 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.