# coltrane-ui

> ## 👋 Hola Coder

Latest version **0.0.6** (published 2023-07-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install coltrane-ui
pnpm add coltrane-ui
yarn add coltrane-ui
bun add coltrane-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2023-07-25 |
| First published | 2023-07-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 360.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mrtnbrjs |
| Maintainers | mrtnbrjs |

## Links

- npm: https://www.npmjs.com/package/coltrane-ui
- npm.io page: https://npm.io/package/coltrane-ui

## Recent versions

- 0.0.6 (latest) — 2023-07-25
- 0.0.5 — 2023-07-25
- 0.0.4 — 2023-07-24
- 0.0.3 — 2023-07-24
- 0.0.2 — 2023-07-24
- 0.0.1 — 2023-07-24
- 1.0.0 — 2023-07-24

## README

# 🏀 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:

```bash
npm install
```

Ejecuta Storybook con el siguiente comando:

```bash
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:
```bash
npm install coltrane-ui
```
2. Importa el componente que deseas usar en tu proyecto:

```tsx
import { Button } from "coltrane-ui";
```
3. Agrega el componente donde necesites usarlo:
```tsx
<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.

---
_Source: https://npm.io/package/coltrane-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._