Danaide Components

Librería de componentes reutilizables para los proyectos de la empresa. El paquete se encuentra publicado dentro de verdaccio un gestor hosteado dentro de una de las máquinas de danaide. De esta manera se logra que el paquete sea privado para la empresa, es una solución temporal hasta que podamos implementarlo dentro del okd.

Tecnologias

• Vite
• Vue 3
• Typescript
• Sass
• Storybook

Estructura basica

ROOT
├───.storybook/
│   ├───main.ts
│   └───preview.ts
├───.vscode/
│   └───extensions.json
├───public/
├───src/
│   ├───components/
│   │   ├───dbtn/
│   │   │   ├───sass/
│   │   │   │   ├───DBtn.scss
│   │   │   │   ├───_mixins.scss
│   │   │   │   └───_variables.scss
│   │   │   ├───DBtn.stories.ts
│   │   │   └───DBtn.vue
│   │   └───dcard/
│   │       ├───sass/
│   │       │   ├───DCard.scss
│   │       │   ├───_mixins.scss
│   │       │   └───_variables.scss
│   │       ├───DCard.stories.ts
│   │       └───DCard.vue
│   ├───composables/
│   ├───directives/
│   ├───scripts/
│   │   └───plugin.ts
│   ├───scss/
│   │   ├───global.scss
│   │   └───_variables.scss
│   ├───utils/
│   │   ├───constants/
│   │   │   └───CExample.ts
│   │   ├───interfaces/
│   │   │   └───IExample.ts
│   │   └───types/
│   │       └───TExample.ts
│   ├───App.vue
│   ├───main.ts
│   └───vite-env.d.ts
├───.npmrc
├───index.html
├───package-lock.json
├───package.json
├───README.md
├───tsconfig.json
├───tsconfig.node.json
└───vite.config.ts

Uso

Para utilizar la librería dentro de un proyecto se necesita tener dentro del mismo un archivo en la raíz llamado .npmrc el cual debe contener la siguiente línea:

registry=http://verdaccio.review.dev.danaide.com.ar/

Se instala por medio de npm install danaide-components. Se le puede añadir la versión deseada con @latest o @1.x.x

Main: En el archivo main del proyecto implementar la libreria de la siguiente manera.

// estilos
import "danaide-components/dist/style.css"

// libreria
import { danaideComponents } from "danaide-components"

const app = createApp(App)

app.use(danaideComponents)
app.mount("#app")

Asi quedan disponibles los componentes de manera global para utilizar sin la necesidad de importarlos.

Types

De momento no logramos que infiera los tipos de los componentes que están disponibles globalmente así que por más que puedas usarlos no se puede obtener un atajo a las propiedades de los mismos. Queda pendiente analizar como lograr este feature.

Para poder utilizar los atajos por el momento crear un archivo llamado vue-shim.d.ts dentro de src, con el siguiente código:

import { DefineComponent } from "@vue/runtime-core"
import { DBtn, DCard } from "danaide-components" // La librería exporta siempre todos los componentes es por eso que siempre tendrán acceso al listado completo para agregar al GlobalComponents.

declare module "@vue/runtime-core" {
  export interface GlobalComponents {
    DBtn: typeof DBtn
    DCard: typeof DCard
    // otros componentes ...
  }
}

Listado de componentes

Como estándar para evitar el cruce con componentes nativos HTML se le debe agregar algún tipo de prefijo a los nombres de los componentes. Queda libre a cambios, pero de momento el prefijo es la letra “d” haciendo referencia a danaide.

• DBtn
• DCard