design-system-dashboard-devmunity 0.3.0 → 1.0.1

package/README.md

@@ -1,60 +1,62 @@
-# Nuxt Starter Template
+# Design System Dashboard Devmunity
 
-[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
+Este proyecto es un **Nuxt Layer** que funciona como un sistema de diseño para aplicaciones Nuxt. Contiene componentes, estilos y configuraciones compartidas.
 
-Use this template to get started with [Nuxt UI](https://ui.nuxt.com) quickly.
+## Uso como Nuxt Layer
 
-- [Live demo](https://starter-template.nuxt.dev/)
-- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/nuxt)
+Para usar este proyecto como una librería en otro proyecto de Nuxt, sigue estos pasos:
 
-<a href="https://starter-template.nuxt.dev/" target="_blank">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-dark.png">
-    <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png">
-    <img alt="Nuxt Starter Template" src="https://ui.nuxt.com/assets/templates/nuxt/starter-light.png">
-  </picture>
-</a>
+### 1. Instalación
 
-> The starter template for Vue is on https://github.com/nuxt-ui-templates/starter-vue.
+Instala el paquete por medio de NPM (o tu gestor de paquetes preferido):
 
-## Quick Start
+```bash
+npm install design-system-dashboard-devmunity
+```
+
+### 2. Configuración en Nuxt
 
-```bash [Terminal]
-npm create nuxt@latest -- -t github:nuxt-ui-templates/starter
+En el proyecto donde desees usar el sistema de diseño, añade el paquete a la propiedad `extends` en tu archivo `nuxt.config.ts`:
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+    extends: ['design-system-dashboard-devmunity'],
+})
 ```
 
-## Deploy your own
+¡Y listo! Nuxt automáticamente cargará los componentes, composables, assets y la configuración de este layer en tu proyecto.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-name=starter&repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fstarter&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fnuxt%2Fstarter-dark.png&demo-url=https%3A%2F%2Fstarter-template.nuxt.dev%2F&demo-title=Nuxt%20Starter%20Template&demo-description=A%20minimal%20template%20to%20get%20started%20with%20Nuxt%20UI.)
+## Desarrollo Local
 
-## Setup
+Si deseas contribuir o probar este proyecto localmente:
 
-Make sure to install the dependencies:
+### Instalación de dependencias
 
 ```bash
-pnpm install
+npm install
 ```
 
-## Development Server
+### Servidor de Desarrollo
 
-Start the development server on `http://localhost:3000`:
+Inicia el servidor de desarrollo:
 
 ```bash
-pnpm dev
+npm run dev
 ```
 
-## Production
+### Storybook
 
-Build the application for production:
+Para ver y probar los componentes de forma aislada:
 
 ```bash
-pnpm build
+npm run storybook
 ```
 
-Locally preview production build:
+## Producción
+
+Para construir el proyecto para producción (como aplicación independiente):
 
 ```bash
-pnpm preview
+npm run build
 ```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app/app.config.ts

@@ -6,12 +6,13 @@ export default defineAppConfig({
         colors: {
             primary: 'brand-blue',
             secondary: 'brand-purple',
+            accent: 'brand-yellow',
             success: 'brand-green',
             warning: 'brand-orange',
             error: 'brand-red',
             info: 'brand-blue-sky',
             neutral: 'brand-grey',
-            test: 'purple',
+            // test: 'purple',
         },
     },
 })

package/app/app.vue

@@ -1,4 +1,7 @@
-<script setup>
+<script lang="ts" setup>
+import AButtonAvatarDropdown from './components/a/button/a-button-avatar-dropdown.vue'
+import ADropdownAvatar from './components/a/dropdown/a-dropdown-avatar.vue'
+
 useHead({
     meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
     link: [{ rel: 'icon', href: '/favicon.ico' }],
@@ -20,6 +23,8 @@ useSeoMeta({
     twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/starter-light.png',
     twitterCard: 'summary_large_image',
 })
+
+const isOpen = ref(false)
 </script>
 
 <template>
@@ -35,7 +40,6 @@ useSeoMeta({
 
             <template #right>
                 <UColorModeButton />
-
                 <UButton
                     to="https://github.com/nuxt-ui-templates/starter"
                     target="_blank"
@@ -57,7 +61,21 @@ useSeoMeta({
             <template #left>
                 <p class="text-muted text-sm">Built with Nuxt UI • © {{ new Date().getFullYear() }}</p>
             </template>
-
+            <CModalDanger v-model="isOpen" title="Modal" description="Modal description" />
+            <UButton @click="isOpen = true">Open Modal</UButton>
+            <UBadge color="accent" />
+            <DCardHeader title="Card Header" subtitle="Card Subtitle" />
+            <DActionButtons
+                primary-button-text="Primary"
+                secondary-button-text="Secondary"
+                primary-button-icon="i-heroicons-solid-arrow-right"
+                primary-button-trailing-icon="i-heroicons-solid-arrow-right"
+            />
+            <UButton
+                icon="i-heroicons-solid-arrow-right"
+                trailing-icon="i-heroicons-solid-arrow-right"
+                label="Button"
+            />
             <template #right>
                 <UButton
                     to="https://github.com/nuxt-ui-templates/starter"

package/app/assets/css/settings/base.css

@@ -1,38 +1,38 @@
 @layer base {
-  * {
-    /* @apply border-neutral-300; */
-  }
-  body {
-    @apply overflow-x-hidden scroll-smooth text-pretty text-neutral-950;
-    scrollbar-gutter: stable;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @apply text-balance;
-  }
+    * {
+        /* @apply border-neutral-300; */
+    }
+    body {
+        @apply text-default overflow-x-hidden scroll-smooth text-pretty;
+        scrollbar-gutter: stable;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        @apply text-balance;
+    }
 
-  label {
-    @apply block cursor-pointer text-sm font-medium text-neutral-800;
-  }
+    label {
+        @apply block cursor-pointer text-sm font-medium text-neutral-800;
+    }
 
-  ::-webkit-scrollbar {
-    @apply size-1;
-  }
-  ::-webkit-scrollbar-thumb {
-    @apply rounded-sm bg-primary-400 transition-colors;
-  }
-  ::-webkit-scrollbar-track {
-    @apply bg-transparent;
-  }
+    ::-webkit-scrollbar {
+        @apply size-1;
+    }
+    ::-webkit-scrollbar-thumb {
+        @apply bg-primary-400 rounded-sm transition-colors;
+    }
+    ::-webkit-scrollbar-track {
+        @apply bg-transparent;
+    }
 
-  ::selection {
-    @apply !bg-primary-500 text-neutral-50;
-  }
-  ::-moz-selection {
-    @apply !bg-primary-500 text-neutral-50;
-  }
+    ::selection {
+        @apply !bg-primary-500 text-neutral-50;
+    }
+    ::-moz-selection {
+        @apply !bg-primary-500 text-neutral-50;
+    }
 }

package/app/assets/css/themes/components/badge.js

@@ -0,0 +1,7 @@
+export default {
+    defaultVariants: {
+        color: 'neutral',
+        variant: 'soft',
+        size: 'sm',
+    },
+}

package/app/assets/css/themes/components/input.js

@@ -0,0 +1,5 @@
+export default /*ui*/ {
+    slots: {
+        root: 'w-full',
+    },
+}

package/app/assets/css/themes/index.js

@@ -1,4 +1,5 @@
 export { default as card } from './components/card.js'
 export { default as button } from './components/button.js'
 export { default as modal } from './components/modal.js'
-// export { default as dropdownMenu } from './components/dropdown-menu.js'
+export { default as badge } from './components/badge.js'
+export { default as input } from './components/input.js'

package/app/components/BaseButton.vue

@@ -0,0 +1,3 @@
+<template>
+  <UButton />
+</template>

package/app/components/Colors.mdx

@@ -0,0 +1,42 @@
+import { Meta, ColorPalette, ColorItem, Title } from '@storybook/blocks'
+
+import { colorsFromCss, semanticColors } from '@/utils/util-get-colors-from-css'
+
+<Meta title='Tokens/Colors' />
+<Title>Colors</Title>
+
+The color tokens within this design system encapsulates a rich palette of semantic colors, each with specific
+roles and shades to cater to various UI elements and states.
+
+The `primary` colors, with shades ranging from light lavender (#faf7fd) to deep purple (#361952), form the core visual identity, suitable for branding elements and primary actions.
+
+The `secondary` colors shift towards teal (#f0fdfa to #042f2d), providing a refreshing contrast ideal for secondary actions or highlighting important UI elements without overpowering the primary hue.
+
+The `accent` color spectrum, from a soft peach (#fff7ed) to a dark burnt orange (#431307), is designed to draw attention to specific components or prompts, making it perfect for call-to-action buttons or interactive elements.
+
+- The information color in a design system typically employs a clear, subdued shade, such as a light blue or gray, to convey neutral and informative messages without invoking urgency or emotion.
+- The `success` shades signify positive actions or confirmations, with a vibrant green (#f1fcf2 to #082b11) that should be used to indicate completion, approval, or progress.
+- The `warning` palette, transitioning from a light yellow (#fffde7) to a darker shade (#442004), is tailored for cautionary messages or to highlight areas that require user attention.
+- `danger` colors range from a soft pinkish-red (#fef3f2) to a dark maroon (#490815), ideal for error messages, critical warnings, or delete actions, signaling users to proceed with caution.
+
+Lastly, the `slate` collection, with shades from very light gray (#f6f7f9) to almost black (#23272e), provides a neutral backdrop suited for text, backgrounds, and UI frames, ensuring legibility and a muted contrast against more vibrant colors.
+
+Additional constants like `white`, `black`, `transparent`, and `currentColor` offer foundational colors for designing with flexibility and precision, supporting a cohesive and accessible user interface across the design system.
+
+---
+
+## Raw Colors
+
+<ColorPalette>
+    {Object.entries(colorsFromCss).map(([name, value]) => (
+        <ColorItem key={name} title={name} colors={value} />
+    ))}
+</ColorPalette>
+
+## Semantic Colors
+
+<ColorPalette>
+    {Object.entries(semanticColors).map(([name, value]) => (
+        <ColorItem key={name} title={name} colors={colorsFromCss[value]} subtitle={value} />
+    ))}
+</ColorPalette>

package/app/components/Indroduction.mdx

@@ -0,0 +1,100 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title='Introduction' />
+
+# Introducción al Sistema de Diseño
+
+Este sistema de diseño ha sido concebido como una infraestructura robusta y escalable para la creación de **Dashboards** unificados. Su objetivo principal es optimizar el ciclo de desarrollo mediante una biblioteca de componentes preconfigurados y diseñados específicamente para un diseño de Dashboard ya definido, que garantizan consistencia visual y funcional, sin sacrificar la flexibilidad necesaria para adaptaciones de marca.
+
+## Arquitectura Subyacente
+
+La librería está construida sobre **Nuxt UI**, lo que significa que todos sus componentes están disponibles para los desarrolladores. Sin embargo, el enfoque principal es crear componentes especializados que incorporen estilos y funcionalidades predefinidas adaptadas específicamente para el diseño del tipo de dashboard que se usa como base.
+
+Por ejemplo, en lugar de utilizar directamente `UModal` de Nuxt UI y personalizarlo desde cero, el sistema proporciona `BModal`, un componente que extiende `UModal` con características adicionales y diseño preconfigurado para uso inmediato.
+
+De esta manera, a diferencia de una biblioteca de componentes tradicional, este sistema actúa como una capa de abstracción semántica que:
+
+1.  **Agiliza el desarrollo:** Proporciona componentes con diseño base ya integrado para casos de uso comunes en dashboards.
+2.  **Mantiene la flexibilidad:** Aprovecha las capacidades de _Theming_ de Nuxt UI y las variables de CSS de Tailwind para permitir personalizaciones profundas (colores, bordes, espaciados) mediante archivos de configuración centralizados.
+3.  **Encapsula la complejidad:** En lugar de configurar componentes de terceros desde cero en cada vista, utilizamos "Wrappers" inteligentes (como `BModal` sobre `UModal`) que ya contienen la lógica y los estilos específicos de nuestro ecosistema.
+
+## Sistema de Organización de Componentes
+
+### Fundamento: Atomic Design
+
+El sistema se basa en los principios de **[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)**, adaptados específicamente para el desarrollo de componentes. La metodología se centra en tres niveles principales:
+
+- **Átomos**: Unidades fundamentales e indivisibles del sistema. Son elementos reconocibles que requieren contexto adicional para tener sentido funcional. _Ejemplos_: botones, etiquetas, títulos.
+- **Moléculas**: Composición de dos o más átomos que crean elementos con significado propio, aunque no son completamente independientes. _Ejemplos_: cards, pares label-input.
+- **Organismos**: Estructuras complejas formadas por múltiples moléculas. Son elementos completamente independientes que mantienen su funcionalidad sin importar el contexto. _Ejemplos_: headers, grids con filtros.
+
+> **Nota**: Los niveles de Templates y Páginas del Atomic Design original no aplican directamente al desarrollo de estilos, ya que se construyen mediante la composición de organismos en el marcado HTML.
+
+### Sistema de Clasificación A-B-C-D
+
+Basándonos en los principios de **Atomic Design**, hemos implementado una variación denominada **Sistema ABCD** (Atoms, Bases, Composites, Designs), que mantiene los conceptos fundamentales pero los reorganiza para mejor adaptarse a los tipos de componentes de la librería.
+
+### A - Atoms (Átomos)
+
+Se mantiene el concepto de _Átomos_ de **Atomic Design**, siendo los bloques de construcción más básicos e indivisibles de la interfaz. Aunque Nuxt UI provee la mayoría de los átomos estándar, en esta capa definimos elementos específicos que no existen en la biblioteca base o que requieren una estructura única.
+
+- **Ejemplo:** `ACardInner`, `AButtonNavigation`, `APill`.
+
+### B - Bases (Componentes Base)
+
+Son componentes generales que pueden contener _Átomos_ o _Moléculas_, que actúan como "contenedores" o versiones estandarizadas de componentes más complejos. Si bien pueden usarse de forma directa, su propósito principal es definir un comportamiento y diseño general para ser reutilizados o extendidos.
+
+- **Ejemplo:** `BModal`. Es un envoltorio (_wrapper_) de `UModal` que ya incluye los estándares de estilos, funcionalidades y estructura interna del proyecto.
+
+### C - Composites (Compuestos)
+
+Son especializaciones semánticas de un componente **Base**. Se crean para cubrir casos de uso específicos y repetitivos, eliminando la necesidad de pasar las mismas props y modificaciones de estilos repetidamente a un componente base.
+
+- **Ejemplo:** `CModalDanger` (Una instancia de `BModal` preconfigurada con colores de error, iconos de advertencia y acciones de confirmación destructivas).
+
+### D - Designs (Diseños/Organismos)
+
+Son estructuras complejas y autónomas compuestas por la unión de _Atoms_, _Bases_, o _Composites_. A menudo representan secciones enteras de una página o componentes con una lógica de negocio específica y altamente reutilizable.
+
+- **Ejemplo:** Pueden ser secciones reutilizables más grandes similares a _Organismos_ compuestas por varios componentes, como por ejemplo `DCardHeader`, o algo más contenidas como _Moléculas_ pero que no requerirá de variantes al ser más específicas, que por lo tanto pueden tener lógica ya suscrita, por ejemplo `DUploadAvatar`
+
+---
+
+## Convención de Nomenclatura y Estructura
+
+La librería implementa el **sistema de nombramiento por ruta de Nuxt**, donde el nombre del componente refleja directamente su ubicación en la estructura de directorios. Este enfoque proporciona trazabilidad inmediata y facilita su auto-importación y la identificación de la categoría del componente mediante su prefijo.
+
+La ubicación en el sistema de archivos dicta el nombre del componente:
+
+```text
+app/
+└── components/
+    ├── a/           # Átomos
+    │   └── a-pill.vue
+    ├── b/           # Bases
+    │   └── b-modal.vue
+    ├── c/           # Composites
+    │   └── c-modal-danger.vue
+    └── d/           # Designs
+        └── d-card-header.vue
+```
+
+### Beneficios de este enfoque:
+
+- **Autodescriptivo:** El prefijo (`A-`, `B-`, `C-`, `D-`) indica inmediatamente el nivel de complejidad y el propósito del componente.
+- **Escalabilidad**: Facilita la organización de nuevos componentes dentro de la estructura existente basandose en la jerarquía
+- **Trazabilidad**: La ruta del componente indica inmediatamente su categoría y propósito
+- **Sin Colisiones:** Evita conflictos con los componentes nativos de Nuxt UI (prefijados con `U-`).
+- **Mantenimiento**: Simplifica la localización y modificación de componentes específicos
+- **Colaboración**: Estandariza el proceso de desarrollo para equipos múltiples
+
+---
+
+## Stack Tecnológico
+
+Este sistema está alineado con las últimas versiones de las tecnologías líderes en el ecosistema Vue:
+
+- **Framework:** [Nuxt 4](https://nuxt.com/) (Estructura de directorios `app/`, auto-imports y alta performance).
+- **UI Library:** [@nuxt/ui 4](https://ui.nuxt.com/) (Base de componentes accesibles y personalizables).
+- **Styling:** [Tailwind CSS 4](https://tailwindcss.com/) (Motor de utilidades de última generación).
+- **Documentación:** [Storybook 8](https://storybook.js.org/) (Desarrollo y pruebas de componentes en aislamiento).

package/app/components/a/button/a-button-avatar-dropdown.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import AButtonAvatarDropdown, { type ButtonSize, type AvatarSize } from './a-button-avatar-dropdown.vue'
+
+const meta = {
+    title: 'Atoms/Button/AButtonAvatarDropdown',
+    component: AButtonAvatarDropdown,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Button with avatar for drop-down menus with user information. Typically used in the navigation bar.',
+            },
+        },
+    },
+    argTypes: {
+        src: {
+            control: 'text',
+        },
+        buttonSize: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'] satisfies ButtonSize[],
+        },
+        avatarSize: {
+            control: 'select',
+            options: ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] satisfies AvatarSize[],
+        },
+        'onOn-click': {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    args: {
+        'onOn-click': fn(),
+    },
+} satisfies Meta<typeof AButtonAvatarDropdown>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        src: '~/../public/media/img/user-unknown.png',
+        buttonSize: 'md',
+        avatarSize: 'sm',
+    },
+}
+
+export const SmallButton: Story = {
+    args: {
+        ...Default.args,
+        buttonSize: 'xs',
+        avatarSize: 'xs',
+    },
+}
+
+export const LargeButton: Story = {
+    args: {
+        ...Default.args,
+        buttonSize: 'xl',
+        avatarSize: 'md',
+    },
+}
+
+export const WithSlot: Story = {
+    args: {
+        ...Default.args,
+    },
+    render: (args) => ({
+        components: { AButtonAvatarDropdown },
+        setup() {
+            return { args }
+        },
+        template: `
+            <AButtonAvatarDropdown v-bind="args">
+                <template #default>
+                    <span>Victor Alvarez</span>
+                </template>
+            </AButtonAvatarDropdown>
+        `,
+    }),
+}

package/app/components/a/button/a-button-avatar-dropdown.vue

@@ -1,21 +1,44 @@
-<script lang="jsx" setup>
-const props = defineProps({
-    src: {
-        type: String,
-        default: '/media/img/user-unknown.png',
-        required: false,
-    },
-    buttonSize: {
-        type: String,
-        default: 'md',
-        required: false,
-    },
-    avatarSize: {
-        type: String,
-        default: 'sm',
-        required: false,
-    },
+<script lang="ts" setup>
+import type { UButton, UAvatar } from '#components'
+
+export type ButtonSize = InstanceType<typeof UButton>['$props']['size']
+export type AvatarSize = InstanceType<typeof UAvatar>['$props']['size']
+
+interface Props {
+    /**
+     * The source (path or URL) of the avatar
+     * @type string
+     */
+    src?: string
+    /**
+     * The size of the button
+     * @type ButtonSize
+     */
+    buttonSize?: ButtonSize
+    /**
+     * The size of the avatarSize
+     * @type AvatarSize
+     */
+    avatarSize?: AvatarSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    src: '/media/img/user-unknown.png',
+    buttonSize: 'md',
+    avatarSize: 'sm',
 })
+
+defineSlots<{
+    /** Example description for default */
+    default(): any
+}>()
+
+const emit = defineEmits<{
+    /**
+     * Emitted when the button is clicked
+     */
+    (e: 'on-click'): void
+}>()
 </script>
 
 <template>
@@ -35,6 +58,7 @@ const props = defineProps({
         color="primary"
         variant="ghost"
         class="rounded-full"
+        @click="emit('on-click')"
     >
         <slot />
     </UButton>

package/app/components/a/button/a-button-navigation.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import AButtonNavigation, { type ButtonSize } from './a-button-navigation.vue'
+
+const meta = {
+    title: 'Atoms/Button/AButtonNavigation',
+    component: AButtonNavigation,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Navigation button with icon, useful for moving between pages or triggering an action. Generally used in the header of main sections alongside the [DCardHeader](?path=/docs/design-card-header--docs) component.',
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'] satisfies ButtonSize[],
+        },
+        'onOn-click': {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    args: {
+        'onOn-click': fn(),
+    },
+} satisfies Meta<typeof AButtonNavigation>
+
+type Story = StoryObj<typeof meta>
+
+export default meta
+
+export const Default: Story = {
+    args: {
+        icon: 'heroicons:arrow-left-16-solid',
+        to: '',
+        hasBackAction: false,
+    },
+}
+
+export const CustomIconWithCustomRoute: Story = {
+    args: {
+        icon: 'heroicons:home-20-solid',
+        to: '/',
+        hasBackAction: false,
+    },
+}
+
+export const HasBackAction: Story = {
+    args: {
+        icon: 'heroicons:arrow-left-16-solid',
+        to: '',
+        hasBackAction: true,
+    },
+}
+
+export const LargeButton: Story = {
+    args: {
+        icon: 'heroicons:arrow-left-16-solid',
+        to: '',
+        hasBackAction: true,
+        size: 'xl',
+    },
+}