@angel-storybook/design-system

Diseño de Sistema con Atomic Design y Storybook - EnvíaYa

Este repositorio contiene un diseño de sistema de componentes basado en la metodología Atomic Design, integrado con React y Storybook, listo para usarse como paquete npm reutilizable en múltiples proyectos.

🚅 Inicio rápido

1. Clonar el repositorio

git clone https://github.com/hermes-EY/design-system-storybook.git

2. Instalar dependencias

cd design-system-storybook
npm install

3. Ejecutar Storybook (para desarrollo y revisión de componentes)

npm run storybook

4. Ver tus historias

Abre http://localhost:6006 para ver las historias de tus componentes

🔎 Estructura del proyecto

La estructura del proyecto sigue las mejores prácticas de desarrollo y está organizada para facilitar la navegación y el mantenimiento. Aquí tienes un resumen de los archivos y directorios más importantes:

.
├── .storybook
├── .yarn
├── node_modules
├── public
├── src
│   ├── atoms
│   │   ├── Button
│   │   │   ├── Button.tsx
│   │   │   ├── Button.stories.tsx
│   │   │   ├── index.ts
│   │   ├── Input
│   │   │   ├── Input.tsx
│   │   │   ├── Input.stories.tsx
│   │   │   ├── index.ts
│   ├── molecules
│   │   ├── FormField
│   │   │   ├── FormField.tsx
│   │   │   ├── FormField.stories.tsx
│   │   │   ├── index.ts
│   ├── organisms
│   │   ├── LoginForm
│   │   │   ├── LoginForm.tsx
│   │   │   ├── LoginForm.stories.tsx
│   │   │   ├── index.ts
│   ├── index.ts
├── dist
├── package.json
├── tsconfig.json
├── README.md
├── .eslintrc.cjs
├── .gitignore
├── .yarnrc.yml
├── index.html
├── LICENSE
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.js
├── yarn.lock
└── ...

Descripción de los archivos y directorios

Esta es una breve descripción de los archivos y directorios más importantes en el proyecto:

• .storybook: Contiene la configuración de Storybook.
• .yarn: Configuración de Yarn, incluyendo caché y paquetes globales.
• node_modules: Contiene todos los módulos de código que tu proyecto depende (paquetes npm).
• public: Contiene los archivos estáticos que se servirán en producción.
• src: Contiene todo el código relacionado con los componentes de tu aplicación, organizados por átomos, moléculas y organismos según la metodología Atomic Design.
• dist: Contiene la versión compilada y optimizada de tu proyecto para producción.
• package.json: Archivo de manifiesto estándar para proyectos Node.js, que incluye metadatos del proyecto y dependencias.
• tsconfig.json: Archivo de configuración de TypeScript que especifica las opciones del compilador y los archivos raíz del proyecto.
• README.md: Archivo de documentación que contiene información útil sobre el proyecto.
• .eslintrc.cjs: Archivo de configuración para ESLint, que ayuda a mantener la calidad del código.
• .gitignore: Archivo que indica a Git qué archivos o directorios deben ser ignorados en el control de versiones.
• .yarnrc.yml: Archivo de configuración para Yarn, utilizado para definir ajustes del proyecto.
• index.html: Página HTML que se sirve al generar una compilación de desarrollo o producción.
• tsconfig.app.json: Contiene las opciones del compilador TypeScript específicas para la aplicación.
• tsconfig.node.json: Contiene las opciones del compilador TypeScript para el entorno Node.js.
• vite.config.js: Archivo de configuración para Vite, una herramienta de construcción que proporciona una experiencia de desarrollo más rápida y ligera para proyectos web modernos.
• yarn.lock: Archivo generado automáticamente que asegura que las mismas versiones de dependencias se instalen en todas las máquinas. (No lo modifiques manualmente).
• LICENSE: El proyecto está licenciado bajo la licencia MIT.

Estructura de carpetas y archivos

La estructura de carpetas y archivos sigue la metodología Atomic Design, que organiza los componentes en niveles jerárquicos:

• Átomos/Atoms: Componentes más pequeños e indivisibles, como botones e inputs.
• Moléculas/Molecules: Combinaciones de átomos que forman componentes más complejos, como campos de formulario.
• Organismos/Organisms: Combinaciones de moléculas que forman secciones completas de la interfaz, como formularios de inicio de sesión.
• Plantillas/Templates: Estructuras de página que combinan organismos y definen el diseño general.
• Páginas/Pages: Combinaciones de plantillas y datos específicos que representan vistas completas de la aplicación.

Uso de Storybook

Storybook es una herramienta de desarrollo que permite crear y documentar componentes de UI de forma aislada. En este proyecto, Storybook se utiliza para:

• Desarrollar y probar componentes de forma aislada.
• Documentar los componentes con historias que muestran diferentes estados y variaciones.
• Facilitar la colaboración entre diseñadores y desarrolladores al proporcionar una interfaz visual para los componentes.

Comandos disponibles

• npm run storybook: Inicia el servidor de desarrollo de Storybook para ver y probar los componentes.
• npm run build:lib: Compila los componentes en un paquete npm listo para ser publicado.