@grupo-elo-editorial/shared-ui-vue

v1.1.0

Published

Grupo ELO Editorial — Vue 3 component library. Multibrand-aware primitives (atoms/molecules/organisms/layout), composed components, domain components, and UI composables. Consumes @grupo-elo-editorial/design-tokens@^3.1.0. Vue 3 sibling of @grupo-elo-edit

Downloads

191

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

vander-lotovander-loto

Keywords

design-systemvuevue3reka-uiradix-vuetailwindcsscomponentsmulti-brandelo-editoraperabookgrupo-elo-editorial

Readme

@grupo-elo-editorial/shared-ui-vue

Vue 3 component library for the Grupo ELO Editorial multibrand design system. Brand-aware primitives, composed components, layout patterns, domain components, and UI composables that consume CSS custom properties from @grupo-elo-editorial/design-tokens.

This is the Vue 3 sibling of @grupo-elo-editorial/shared-ui-react. Both packages share the same component semantics and consume the same design tokens.

Architecture position

shared-ui-vue ────────► design-system (tokens, themes)
apps/<pilar*> ────► shared-ui-vue + design-system

shared-ui-vue never imports from app code or from the design-system internals — only from the published design-tokens package surface.

Install

pnpm add @grupo-elo-editorial/shared-ui-vue @grupo-elo-editorial/design-tokens

Use

// main.ts — once per app
import '@grupo-elo-editorial/design-tokens';            // CSS variables (tokens)
import '@grupo-elo-editorial/shared-ui-vue/style.css';  // component-local styles (once components ship CSS)

// Brand + theme activation goes on <html> (or a scoped container)
// <html data-brand="elo-editora" data-theme="light"> ... </html>
<script setup lang="ts">
// import { DSButton, DSCard, ... } from '@grupo-elo-editorial/shared-ui-vue';
</script>

<template>
  <!-- <DSButton variant="primary">Comprar agora</DSButton> -->
</template>

Source layout

packages/shared-ui-vue/
├── src/
│   ├── index.ts                 ← public API barrel (re-exports components + composables)
│   ├── components/
│   │   ├── atoms/               ← Button, Input, Badge, Avatar, Spinner, …
│   │   ├── molecules/           ← Form, SearchBox, ProductCard, …
│   │   └── organisms/           ← Header, Footer, Modal, …
│   └── composables/             ← useModal, useToast, useBrand, …
├── playground/                  ← Vite dev preview (pnpm run play)
├── vite.config.ts               ← library build (ES, externals: vue + design-tokens)
├── tsconfig.json                ← editor / type-check config
├── tsconfig.build.json          ← declaration emission
├── package.json                 ← @grupo-elo-editorial/[email protected]
└── README.md

Conventions

  • Vue 3 + <script setup lang="ts"> only. No Options API.
  • Naming: components prefixed DS* (e.g. DSButton) when exposed as the public API. File names kebab-case.vue; export name PascalCase.
  • Styling: consume var(--brand-*) from design-tokens. Never hardcode hex. Component-local styles live in <style scoped> blocks and ride out as dist/style.css when bundled.
  • Brand awareness: components don't care about which brand is active — they consume CSS variables. Brand switching is the app's concern (data-brand="..." on <html> or a scoped container).
  • Accessibility: WCAG 2.2 AA contract carries over from design-tokens (focus-visible, prefers-reduced-motion). Components must add: aria-* labels, keyboard navigation, focus management for overlays, and never strip the focus ring.
  • Strict TypeScript: no any. Props use explicit interfaces and defineProps<...>().

Development

# From the monorepo root
pnpm install                                                    # workspace install

# From this package
pnpm --filter @grupo-elo-editorial/shared-ui-vue type-check     # ts check, no emit
pnpm --filter @grupo-elo-editorial/shared-ui-vue build          # builds dist/
pnpm --filter @grupo-elo-editorial/shared-ui-vue play           # Vite playground preview

Sibling — React package

@grupo-elo-editorial/shared-ui-react mirrors this package's semantic component surface for React consumers. Both packages consume the same design tokens, so a DSButton in Vue and a Button in React render identically.

Publish

Releases are driven by the NPM Release workflow on GitHub Actions. See design-system/RELEASE.md for the full release procedure.

History

This is v1.0.0 — first release as @grupo-elo-editorial/shared-ui-vue. Replaces the legacy @eloeditorial/[email protected] (archived at design-system/_archive/legacy-shared-ui-v1/) which shipped only theme JSON files for Element Plus and was never imported by any consumer.

License

UNLICENSED — proprietary to Grupo ELO Editorial.