cib-design-system

Design System CIBERTEC

• Name: Design System CIBERTEC
• Package name: cib-design-system

Development

# Instalar dependencias
npm install or yarn install

# Levantar storybook
npm run storybook or yarn storybook

# Publicar una nueva versión de la liberería
npm run build or yarn build
npm pack
npm publish

Quick Setup

1. Agregue la depedencia cib-design-system a su proyecto

# Using yarn
yarn add cib-design-system

# Using npm
npm install cib-design-system

2. Para un proyecto de Nuxt, agregue el siguiente archivo plugins/cib-design-system.js y edite nuxt.config.ts con lo siguiente:

//plugins/cib-design-system.js
import { defineNuxtPlugin } from "#app";
import designsystem from "cib-design-system/dist/cib-design-system.ssr";
import "cib-design-system/dist/style.css";

export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
  nuxtApp.vueApp.use(designsystem);
});

//nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  plugins: ["~/plugins/cib-design-system.js"],
});

3. Para un proyecto de Vue, edite el archivo main.ts con lo siguiente:

//main.ts
import designsystem from "cib-design-system/dist/cib-design-system.esm";
import "cib-design-system/dist/style.css";

app.use(designsystem);