@robosophy/ui-vue

@robosophy/ui-vue

Vue 3 component library for shared Robosophy UI.

Documentation

Interactive component documentation, examples, props, and usage notes are published with Storybook:

https://robosophy.gitlab.io/robosophy-basf/robosophy-library/

The npmjs page shows this README as the package overview. Use the Storybook docs for the full component library reference.

Install

Con PrimeVue:

npm install @robosophy/ui-vue @robosophy/prime-theme vue primevue

Sin PrimeVue:

npm install @robosophy/ui-vue @robosophy/tokens vue

PrimeVue theme

Si la app usa PrimeVue, registra el preset de Robosophy y carga sus tokens/overrides una vez:

import PrimeVue from "primevue/config";
import RobosophyPreset from "@robosophy/prime-theme";
import "@robosophy/prime-theme/prime.css";

app.use(PrimeVue, {
  theme: {
    preset: RobosophyPreset,
  },
});

prime.css ya importa @robosophy/tokens/tokens.css, asi que no dupliques ese import.

Si la app no usa PrimeVue, importa tokens una vez:

import "@robosophy/tokens/tokens.css";

Components carry their own local styles through their component entrypoint. This package does not expose a global styles.css.

AI agent context

For agents working inside a consuming project, read these package files first:

• node_modules/@robosophy/ui-vue/AGENTS.md: short rules for prioritizing Robosophy components.
• node_modules/@robosophy/ui-vue/components.md: component inventory, APIs, and examples.
• node_modules/@robosophy/ui-vue/dist/index.d.ts: exact exported types and component contracts.

Use @robosophy/ui-vue components before creating local equivalents. Keep router, stores, fetches, permissions, and logout in the consuming app.

Usage

<script setup lang="ts">
import { RsAccountSelector, RsCard, RsIcon, RsSidebar, rsPrimeIcon } from "@robosophy/ui-vue";

const user = {
  email: "usuario@robosophy.com",
  initials: "UR",
  name: "Usuario Robosophy",
};

const accounts = [
  { id: "1000", label: "Cuenta Activa SA", initials: "CA", active: true },
  { id: "2000", label: "Cuenta Inactiva SRL", initials: "CI" },
];

const actions = [
  { id: "profile", label: "Ver mi perfil", icon: "manage_accounts" },
];

const footerActions = [
  { id: "logout", label: "Cerrar sesion", icon: "logout", variant: "danger" },
];

const sidebarItems = [
  { id: "dashboard", label: "Dashboard", icon: "dashboard", active: true },
  { id: "settings", label: "Configuracion", icon: "settings" },
];

const sidebarModules = [
  { text: "Mi Alta", link: "/alta" },
  { text: "Mi Cuenta y Orden", link: "/cyo", active: true },
  { text: "Mi Cuenta Corriente", link: "/cc" },
];
</script>

<template>
  <RsSidebar
    :items="sidebarItems"
    :modules="sidebarModules"
    :navigate-on-module-select="false"
    @item-click="navigateToSection"
    @module-select="trackModuleSelection"
  />

  <RsAccountSelector
    :user="user"
    :accounts="accounts"
    :actions="actions"
    :footer-actions="footerActions"
    @select-account="switchAccount"
    @action="handleAction"
    @footer-action="handleFooterAction"
  />

  <RsCard title="Reusable card" subtitle="Shared layout">
    Content from the consuming project.
  </RsCard>

  <RsIcon name="home" />
</template>

Optional plugin registration:

import { createApp } from "vue";
import PrimeVue from "primevue/config";
import RobosophyPreset from "@robosophy/prime-theme";
import RobosophyUiVue from "@robosophy/ui-vue";
import "@robosophy/prime-theme/prime.css";

createApp(App)
  .use(PrimeVue, {
    theme: {
      preset: RobosophyPreset,
    },
  })
  .use(RobosophyUiVue)
  .mount("#app");

Material Symbols

RsIcon renderiza iconos SVG inline. Combinalo con el plugin de Vite que descarga solo los SVGs necesarios desde el repositorio oficial de Google y genera un sprite inyectado en el HTML:

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { robosophyMaterialSymbols } from "@robosophy/ui-vue/vite";

export default defineConfig({
  plugins: [
    vue(),
    robosophyMaterialSymbols(),
  ],
});

El plugin escanea automaticamente usos de <RsIcon name="..." />, rsPrimeIcon("...") y objetos con icon: "..." en el codigo fuente. No hace falta declarar iconos a mano. En build descarga los SVGs del CDN de GitHub, los cachea localmente y genera un sprite SVG inline. No se cargan fuentes tipograficas.

El sprite incluye variantes para fill (outlined/filled) y grade (-25, 0, 200).

Iconos dinamicos (opcional)

Si un icono se calcula en runtime (API, permisos, configuracion remota, etc.), declaralo en include para que el scanner lo incluya:

robosophyMaterialSymbols({
  include: [
    "home",
    { family: "rounded", name: "settings" },
  ],
});

PrimeVue

Para APIs de PrimeVue que reciben icon como string, usa el helper:

<Button label="Inicio" :icon="rsPrimeIcon('home')" />
<Button label="Configurar" :icon="rsPrimeIcon('settings', { family: 'rounded' })" />

Para control total sobre props (fill, grade, etc.), usa el slot #icon:

<Button label="Favorito">
  <template #icon>
    <RsIcon name="favorite" fill color="danger" />
  </template>
</Button>

Component Structure

Every public component must be self-contained:

src/components/RsCard/
  RsCard.vue
  RsCard.css
  RsCard.types.ts
  RsCard.test.ts
  RsCard.stories.ts
  index.ts

Rules:

• use @robosophy/tokens variables for visual decisions;
• keep styles local to the component folder;
• add tests and Storybook stories with every exported component;
• use props for stable API and slots for flexible project content;
• use PrimeVue only when it provides behavior that belongs inside the component.
• use PrimeVue Button for actions in PrimeVue apps.
• use RsSidebar for reusable module navigation instead of project-local navbars.

Scripts

npm run build -w @robosophy/ui-vue
npm run test -w @robosophy/ui-vue
npm run build:storybook -w @robosophy/ui-vue