upc-design-system

Design System Upc

• Name: Design System Upc
• Package name: upc-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 upc-design-system a su proyecto

# Using yarn
yarn add upc-design-system

# Using npm
npm install upc-design-system

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

//plugins/upc-design-system.js 
import { defineNuxtPlugin } from "#app";
import designsystem from "upc-design-system/dist/upc-design-system.ssr";
import "upc-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/upc-design-system.js"],
});

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

//main.ts
import designsystem from 'upc-design-system/dist/upc-design-system.esm'
import 'upc-design-system/dist/style.css'

app.use(designsystem)