LogoLogo
GithubTwitterDiscordPlayground
Español
Español
  • 👋Atomico
  • 🚀Comenzando con Webcomponents
  • Api
    • 🧬Props(Propiedades)
    • 🧩Virtual DOM
    • 🎣Hooks
    • 🔬Testing
  • guías
    • ✨Sistemas de diseño con Atomico
      • Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño.
        • Monorepositorio versionado a nivel de componente
        • Monorepositorio versionado a nivel de sistema de diseño
      • Storybook
        • @atomico/storybook
      • Tokens (CSS custom properties)
      • Slots
    • 📖Atomico + Storybook
    • 🛡️Atomico + Typescript
    • ⚛️Atomico + React
    • 💧Atomico + SSR/SSG
    • 🧠Patrones de diseño
    • 🗺️Guía de estilo (Estructuras)
    • 🔀Slot
  • @atomico
    • @atomico/vite
    • @atomico/hooks
    • @atomico/components
    • @atomico/exports
    • @atomico/react
    • @atomico/router
    • @atomico/store
    • @atomico/storybook
  • Soporte
    • Discord
    • Github
    • Twitter
Powered by GitBook
On this page
  • Ventajas
  • Desventajas
  • Ejemplo de estructura:
  • Ejemplo de importación por componente
  • Ejemplo de importación por sistema de componentes

Was this helpful?

Edit on GitHub
Export as PDF
  1. guías
  2. Sistemas de diseño con Atomico
  3. Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño.

Monorepositorio versionado a nivel de sistema de diseño

Trata de un repositorio que posee un componentes versionados a nivel de sistema de diseño.

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";
PreviousMonorepositorio versionado a nivel de componenteNextStorybook

Last updated 2 years ago

Was this helpful?

✨