datahoy-ui

UI component library / design system basada en Next.js y Storybook. Estructura basada en Atomic Design (atoms → molecules → organisms → templates → pages).

Requisitos

• Node.js (LTS) + npm
• Git

Verifica versiones:

node -v
npm -v

Instalación

Desde la raíz del proyecto:

cd "c:\Users\Majo\Desktop\datahoy-ui"
npm install

Si encuentras conflictos de peer deps en Windows, prueba:

npm install --legacy-peer-deps

Desarrollo

• Iniciar la app Next.js:

npm run dev

• Iniciar Storybook:

npm run storybook

Estructura relevante

• .storybook/ — configuración de Storybook (main.js, preview.js)
• src/components/atoms — componentes atómicos (ej. Button)
• src/components/molecules — componentes compuestos (ej. Card)
• src/stories — utilidades y CSS global para Storybook (tailwind.css)

CSS global / Tailwind

El CSS global para Storybook está en src/stories/tailwind.css. Ajusta según tu configuración de Tailwind/Next.

Publicar en npm

Antes de publicar, asegúrate de que package.json NO tenga "private": true y que el campo name sea único en npm o use un scope.

# iniciar sesión si hace falta
npm login

# publicar (pública)
npm publish --access public

Para paquetes privados o CI, añade un token en los secrets y usa .npmrc:

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

Uso local sin publicar

Conectar una librería local:

# en la carpeta de la librería
npm link
# en esta app
npm link nombre-de-tu-paquete

Contribuir

• Sigue el patrón Atomic Design.
• Añade stories en *.stories.* junto al componente.
• Ejecuta Storybook para revisar visualmente.

Notas

• Si Storybook muestra errores de resolución de CSS, verifica la ruta importada en .storybook/preview.js.
• Para resolver problemas de lockfile: elimina node_modules y package-lock.json y ejecuta npm install.

License: agrega la tuya si corresponde. This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.