coltrane-ui v0.0.6

🏀 Coltrane UI

👋 Hola Coder

Este proyecto es una librería de componentes diseñada para trabajar de manera unificada componentes de react en diferentes aplicaciones. Está construido utilizando React y TypeScript para ofrecer una experiencia de desarrollo moderna y elegante.

Estructura de Carpetas (Atomic Design)

El proyecto sigue el patrón de diseño Atomic Design, organizando los componentes en diferentes capas para facilitar la reutilización y el mantenimiento.

src/
├── components/
| ├── atoms/ # Componentes básicos y reutilizables (Ejemplo: Button, Input)
| ├── molecules/ # Combinaciones de componentes atómicos (Ejemplo: Card, Modal)
| ├── organisms/ # Componentes complejos que combinan moléculas y/o átomos (Ejemplo: Navbar, Footer)
| ├── templates/ # Componentes estructurales de página (Ejemplo: PageLayout)
| └── pages/ # Páginas completas construidas con componentes de organismos, moléculas y/o átomos
└── ...

Cómo Correr Storybook

Para visualizar y desarrollar los componentes, utilizamos Storybook. Siga los pasos a continuación para ejecutar Storybook:

1. Clona el repositorio en tu máquina local.
2. Asegúrate de tener Node.js y npm instalados.
3. Instala las dependencias del proyecto con el siguiente comando:

npm install

Ejecuta Storybook con el siguiente comando:

npm run storybook

Cómo instalar coltrane-ui en mi proyecto

Para utilizar coltrane-ui en tus proyectos siga los pasos a continuación:

1. Instala el paquete:

npm install coltrane-ui

2. Importa el componente que deseas usar en tu proyecto:

import { Button } from "coltrane-ui";

3. Agrega el componente donde necesites usarlo:

<Button label="Mejora tu vida" />

Abre tu navegador y ve a http://localhost:6006 para ver todos los componentes y sus diferentes estados definidos en las historias de Storybook.