Librería de Componentes

Librería de componentes con Vue 3 & Tailwind

versión 0.3.96 ✅

Figma 🎨

• Figma Components
• Figma Fundation

Storybook 💻

• DNS Storybook

Temas 🎨

• the-palace (default)
• moon-palace
• palace-resorts
• le-blanc
• baglioni-hotels
• baglioni-resorts

Como cambiar de tema

  <button theme="moon-palace">
          Aceptar
  </pr-button>

Instalación ⚙️

Es necesario tener configurado AWS CLI

Exportar la variable de entorno de CODEARTIFACT

export CODEARTIFACT_AUTH_TOKEN= `aws codeartifact get-authorization-token --domain dev-it-palaceresorts --domain-owner 427784172992 --query authorizationToken --output text`

Ejecutar el comando yarn para descargar las dependencias

 yarn install

Inicializar Storybook

yarn storybook

Iniciar apliación Vue - Desarrollo

Para realizar pruebas de componentes sin necesidad de levantar el storybook, ejecuta el siguiente comando

yarn dev

Arquitectura 🧱

 root
  │
  └──src
      │── components
      │    └── Micomponente
      │           │──interfaces
      │           │      └── miInterface.ts
      │           │
      │           └──MiComponente.vue
      │ 
      │── sass
      │     │── components
      │     │     └── miComponente.scss
      │     └── themes
      │           └── customTheme
      │
      └──stories
          └── components
                └── Micomponente
                      │── MiComponente.stories.ts
                      └── MiComponente.vue
             

Crear nuevo componentes

• Crear carpeta del nombre del componente en el path src/components

  Generar archivo .vue y un archivo independiente en caso de interfaces y exportarlo en el archivo index.ts

• Generar carpeta del nombre del componente en el path src/stories/components

  Generar tu archivo con extensión stores.ts y agrega la información necesario para utilizar el componente