Trata de un repositorio que posee un componentes versionados a nivel de sistema de diseño esto quiere decir que cualquier cambio a nivel de componente se publicara como una nueva versión del sistema de diseño.

Ventajas

1. Mayor agilidad al crear nuevos componentes, ya que no deberemos crear un nuevo package para un nuevo componente.

2. Facil centralización de todo el sistema de diseño, bastara con un fichero components para definir que se exporta a nivel de sistema de diseño.

Desventajas

1. No podremos individualizar las dependencias por componente, ya que estas estarán atadas al package de todo el sistema de diseño.

Ejemplo de estructura:

packages
├─ components
│  ├─ src 
│  │  ├─ my-button
│  │  ├─ my-input
│  │  ├─ my-card
│  │  └─ components.{ts,js,tsx,jsx}
│  └─ package.json
└─ storybook
   └─ package.json

Ejemplo de importación por componente

import { Button } from "@ds/components/button";

Ejemplo de importación por sistema de componentes

import { Button } from "@ds/components";

Es la estrategia más habitual al momento de crear sistemas de diseño, ya que permite individualizar los cambios a nivel de componente:

Ventajas

Gracias a que cada componente posee su package.json se lograra:

• Versionamiento: Cada package estará versionado, ejemplo @ds/button@1.0.0, esto permite que podamos agregar mejoras o corregir problemas apuntando solo a la versión del componente afectado.

• Mantenimiento: Al ser un package, podemos individualizar sus dependencias y pruebas, lo que facilita el mantenimiento.

• Abstracción: Trata de que cada componente aislara en su package los slots de composición(Subcomponentes que únicamente dependen del componente principal, ejemplo el tag option depende del tag select) y alguna otra utilidad especifica del componente.

Desventajas

Las siguientes desventajas son prácticas:

1. Mayor lentitud al crear nuevos componentes, ya que cada componente requerirá ser un nuevo package.

2. Mayor dificultad de centralización de componentes en un solo package, ya que cada cambio requerirá actualizar el package principal y adjuntar la nueva exportación.

Ejemplo de estructura

packages
├─ components
│  ├─ my-button
│  │  └─ package.json
│  ├─ my-input
│  │  └─ package.json
│  └─ my-card
│     └─ package.json
└─ storybook
   └─ package.json

Ejemplo de importación por componente

import { Button } from "@ds/my-button";

Ejemplo de importación por sistema de componentes

import { Button } from "@ds/components";

Puede ser confuso abordar a el desarrollo de un sistema de diseño sin saber como estructurar nuestro proyecto, la estructura de nuestro repositorio definirá en gran medida el formato de publicación de su sistema de diseño sea:

1. Monorepositorio versionado a nivel de componente

2. Monorepositorio versionado a nivel de sistema de diseño

¿Por qué monorepositorio para su sistemas de diseño?

Es la forma más eficiente de asilar las herramientas que gira entorno a nuestro sistema de diseño.

Recomendaciones para su monorepositorio

1. Aislé su Storybook como package.

Esto mantendrá limpio el workspaces, ejemplo:

packages
├─ components
└─ storybook 

2. Adjunte las historias para Storybook en a nivel de componente.

Storybook puede consumir las historias fuera de su repositorio

packages
├─ components
│  └─ my-button
│     └─ src
│        └─ define.stories.tsx
└─ storybook