design-system-dashboard-devmunity 0.3.0 → 1.0.1

package/app/pages/test.vue

@@ -11,7 +11,7 @@ const modalDanger = overlay.create(CModalDanger)
 <template>
     <div class="mb-16 min-h-full">
         <UContainer>
-            <BCardInner class="h-full">
+            <ACardInner class="h-full">
                 <BCard :has-footer-divider="false">
                     <template #header>
                         <h1>Header</h1>
@@ -23,13 +23,13 @@ const modalDanger = overlay.create(CModalDanger)
                 </BCard>
                 <UCard variant="ghost"> oli </UCard>
                 <AButtonBack icon="heroicons:arrow-left-16-solid" is-back-action />
-            </BCardInner>
+            </ACardInner>
 
             <hr class="my-6" />
 
             <BCard>
                 <template #header>
-                    <BCardHeader title="Crear una nueva actividad" subtitle="Subtitle" has-left-button-icon>
+                    <DCardHeader title="Crear una nueva actividad" subtitle="Subtitle" has-left-button-icon>
                         <template #actions>
                             <DActionButtons
                                 primary-button-text="Guardar"
@@ -38,16 +38,16 @@ const modalDanger = overlay.create(CModalDanger)
                                 is-block-buttons
                             />
                         </template>
-                    </BCardHeader>
+                    </DCardHeader>
                 </template>
 
-                <BCardInner>
+                <ACardInner>
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eos perspiciatis
                     asperiores suscipit voluptate magni excepturi. Doloribus in fugit quam voluptatibus,
                     molestiae maxime illum explicabo ut corrupti, distinctio atque dolor.
-                </BCardInner>
+                </ACardInner>
 
-                <BCardHeader
+                <DCardHeader
                     title="Crear una nueva actividad"
                     subtitle="Subtitle"
                     variant="secondary"
@@ -57,9 +57,9 @@ const modalDanger = overlay.create(CModalDanger)
                     <template #actions>
                         <UButton label="Action" />
                     </template>
-                </BCardHeader>
+                </DCardHeader>
 
-                <BCardInner class="space-y-2">
+                <ACardInner class="space-y-2">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eos perspiciatis
                         asperiores suscipit voluptate magni excepturi. Doloribus in fugit quam voluptatibus,
@@ -73,7 +73,7 @@ const modalDanger = overlay.create(CModalDanger)
                         class-buttons="w-[200px]"
                         has-buttons-block
                     />
-                </BCardInner>
+                </ACardInner>
             </BCard>
 
             <hr class="my-6" />
@@ -140,14 +140,25 @@ const modalDanger = overlay.create(CModalDanger)
 
             <hr class="my-6" />
 
-            <!-- <APillAvatar text="test 1" /> -->
+            <!-- <APill text="test 1" /> -->
             <p>
-                <APillAvatar label="xs" size="xs" />
-                <APillAvatar label="sm" size="sm" color="warning" variant="subtle" />
-                <APillAvatar label="md" size="md" color="error" />
-                <APillAvatar label="lg" size="lg" color="success" />
-                <APillAvatar label="xl" size="xl" />
+                <APill label="xs" size="xs" />
+                <APill label="sm" size="sm" color="warning" variant="subtle" />
+                <APill label="md" size="md" color="error" />
+                <APill label="lg" size="lg" color="success" />
+                <APill label="xl" size="xl" />
             </p>
+
+            <hr class="my-6" />
+
+            <DUploadAvatar button-size="xl" button-color="error" />
+
+            <hr class="my-6" />
+
+            <div class="flex gap-x-2">
+                <CBadgeStatus label="Urgente" value="CANCELLED" />
+                <CBadgeStatus label="Normal" value="normal" />
+            </div>
         </UContainer>
     </div>
 </template>

package/app/types/index.ts

@@ -0,0 +1 @@
+export * from './semantic-colors.type'

package/app/types/semantic-colors.type.ts

@@ -0,0 +1,3 @@
+import appConfig from '@/app.config'
+
+export type SemanticColors = keyof typeof appConfig.ui.colors

package/app/utils/util-get-colors-from-css.ts

@@ -0,0 +1,53 @@
+import appConfig from '@/app.config'
+
+export const semanticColors = appConfig.ui.colors
+
+export type ColorMap = Record<string, string>
+export type GroupedColors = Record<string, ColorMap>
+
+export function getColorsFromCss(): GroupedColors {
+    if (typeof window === 'undefined') return {}
+
+    const styles = getComputedStyle(document.documentElement)
+    const colors: ColorMap = {}
+    for (let i = 0; i < styles.length; i++) {
+        const name = styles[i]
+        if (name && name.startsWith('--color-brand')) {
+            const key = name.replace('--color-', '')
+            colors[key] = styles.getPropertyValue(name).trim()
+        }
+    }
+
+    return groupColorsByName(colors)
+}
+
+function groupColorsByName(colors: ColorMap): GroupedColors {
+    // 1. Convertimos el objeto en entradas y extraemos nombre + nivel
+    const parsed = Object.entries(colors)
+        .map(([key, value]) => {
+            const match = key.match(/^([a-z-]+)-(\d+)$/)
+            if (!match) return null
+            const [, name, level] = match
+            return { name, level, value }
+        })
+        .filter((item): item is { name: string; level: string; value: string } => item !== null)
+
+    // 2. Agrupamos por nombre
+    const grouped = parsed.reduce<Record<string, typeof parsed>>((acc, item) => {
+        if (!acc[item.name]) {
+            acc[item.name] = []
+        }
+        acc[item.name]!.push(item)
+        return acc
+    }, {})
+
+    // 3. Construimos el objeto final
+    return Object.fromEntries(
+        Object.entries(grouped).map(([name, items]) => [
+            name,
+            Object.fromEntries(items.map(({ level, value }) => [level, value])),
+        ])
+    )
+}
+
+export const colorsFromCss = getColorsFromCss()

package/nuxt.config.ts

@@ -1,29 +1,24 @@
-import tailwindcss from "@tailwindcss/vite";
+import tailwindcss from '@tailwindcss/vite'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     devtools: { enabled: true },
-    modules: ['@nuxt/ui', '@nuxtjs/storybook'],
+    modules: [
+        '@nuxt/ui',
+        // Solo carga el módulo si la variable STORYBOOK es true
+        process.env.STORYBOOK === 'true' ? '@nuxtjs/storybook' : undefined,
+    ].filter(Boolean), // Elimina los 'undefined' del array
     css: ['~/assets/css/main.css'],
 
     vite: {
         plugins: [tailwindcss()],
     },
 
-    // ui: {
-    //   theme: {
-    //     colors: [
-    //       'primary',
-    //       'secondary',
-    //       'tertiary',
-    //       'info',
-    //       'success',
-    //       'warning',
-    //       'error',
-    //       'test'
-    //     ]
-    //   }
-    // },
+    ui: {
+        theme: {
+            colors: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
+        },
+    },
 
     // components: [
     //     {

package/package.json

@@ -1,73 +1,89 @@
 {
-  "name": "design-system-dashboard-devmunity",
-  "type": "module",
-  "version": "0.3.0",
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "commit": "cz",
-    "prepare": "husky"
-  },
-  "release": {
-    "branches": [
-      "main",
-      "next"
+    "name": "design-system-dashboard-devmunity",
+    "version": "1.0.1",
+    "main": "./nuxt.config.ts",
+    "files": [
+        "app",
+        "public",
+        "nuxt.config.ts"
     ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      [
-        "@semantic-release/changelog",
-        {
-          "changelogFile": "CHANGELOG.md"
+    "type": "module",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "commit": "cz",
+        "prepare": "husky",
+        "storybook": "STORYBOOK=true storybook dev -p 6006",
+        "build-storybook": "nuxt prepare && STORYBOOK=true storybook build"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/vicventum/design-system-dashboard-devmunity"
+    },
+    "release": {
+        "branches": [
+            "main",
+            "next"
+        ],
+        "plugins": [
+            "@semantic-release/commit-analyzer",
+            "@semantic-release/release-notes-generator",
+            [
+                "@semantic-release/changelog",
+                {
+                    "changelogFile": "CHANGELOG.md"
+                }
+            ],
+            "@semantic-release/npm",
+            "@semantic-release/github",
+            [
+                "@semantic-release/git",
+                {
+                    "assets": [
+                        "package.json",
+                        "CHANGELOG.md"
+                    ],
+                    "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+                }
+            ]
+        ]
+    },
+    "dependencies": {
+        "@iconify-json/lucide": "^1.2.72",
+        "@iconify-json/simple-icons": "^1.2.57",
+        "@nuxt/ui": "4.1.0",
+        "@tailwindcss/vite": "4.1.16",
+        "nuxt": "^4.2.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "4.1.16"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "3.2.7",
+        "@commitlint/cli": "^20.3.1",
+        "@commitlint/config-conventional": "^20.3.1",
+        "@nuxtjs/storybook": "8.2.0",
+        "@semantic-release/changelog": "^6.0.3",
+        "@semantic-release/git": "^10.0.1",
+        "@storybook/addon-essentials": "8.6.8",
+        "@storybook/blocks": "8.6.8",
+        "@storybook/experimental-addon-test": "8.6.8",
+        "@storybook/test": "8.6.8",
+        "@storybook/vue3": "8.6.8",
+        "@vitest/browser": "3.0.9",
+        "@vitest/coverage-v8": "3.0.9",
+        "commitizen": "^4.3.1",
+        "cz-conventional-changelog": "^3.3.0",
+        "husky": "^9.1.7",
+        "prettier": "3.6.2",
+        "prettier-plugin-tailwindcss": "0.7.1",
+        "semantic-release": "^25.0.1",
+        "storybook": "8.6.8"
+    },
+    "config": {
+        "commitizen": {
+            "path": "./node_modules/cz-conventional-changelog"
         }
-      ],
-      "@semantic-release/npm",
-      "@semantic-release/github",
-      [
-        "@semantic-release/git",
-        {
-          "assets": [
-            "package.json",
-            "CHANGELOG.md"
-          ],
-          "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-        }
-      ]
-    ]
-  },
-  "dependencies": {
-    "@iconify-json/lucide": "^1.2.72",
-    "@iconify-json/simple-icons": "^1.2.57",
-    "@nuxt/ui": "4.1.0",
-    "@tailwindcss/vite": "4.1.16",
-    "nuxt": "^4.2.0",
-    "tailwindcss": "4.1.16"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "1.3.3",
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@nuxtjs/storybook": "8.3.5",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-docs": "8.0.8",
-    "@storybook/addon-links": "8.0.8",
-    "commitizen": "^4.3.1",
-    "cz-conventional-changelog": "^3.3.0",
-    "husky": "^9.1.7",
-    "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "0.7.1",
-    "semantic-release": "^25.0.1",
-    "storybook": "8.0.8"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
     }
-  }
 }

package/.editorconfig

@@ -1,13 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_size = 4
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

package/.github/workflows/release.yml

@@ -1,36 +0,0 @@
-name: Release
-on:
-    push:
-        branches:
-            - main # or main
-
-permissions:
-    contents: read # for checkout
-
-jobs:
-    release:
-        name: Release
-        runs-on: ubuntu-latest
-        permissions:
-            contents: write # to be able to publish a GitHub release
-            issues: write # to be able to comment on released issues
-            pull-requests: write # to be able to comment on released pull requests
-            id-token: write # to enable use of OIDC for npm provenance
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-            - name: Setup Node.js
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 'lts/*'
-            - name: Install dependencies
-              run: npm clean-install
-            - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
-              run: npm audit signatures
-            - name: Release
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-              run: npx semantic-release

package/.husky/commit-msg

@@ -1 +0,0 @@
-npx --no -- commitlint --edit 

package/.prettierrc

@@ -1,24 +0,0 @@
-{
-  "arrowParens": "always",
-  "bracketSameLine": false,
-  "bracketSpacing": true,
-  "embeddedLanguageFormatting": "auto",
-  "endOfLine": "auto",
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "jsxSingleQuote": true,
-  "printWidth": 110,
-  "proseWrap": "preserve",
-  "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": false,
-  "singleAttributePerLine": false,
-  "singleQuote": true,
-  "tabWidth": 4,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": false,
-  "plugins": [
-    "prettier-plugin-tailwindcss"
-  ]
-}

package/.storybook/main.js

@@ -1,25 +0,0 @@
-/** @type { import('storybook-vue').StorybookConfig } */
-const config = {
-    stories: ['../app/components/**/*.mdx', '../app/components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-    addons: ['@storybook/addon-links', '@storybook/addon-docs', '@chromatic-com/storybook'],
-    framework: {
-        name: '@storybook-vue/nuxt',
-        options: {},
-    },
-    docs: {
-        autodocs: 'tag',
-    },
-    typescript: {
-        check: false,
-        reactDocgen: false,
-    },
-    viteFinal: (config) => {
-        config.resolve.alias = {
-            ...(config.resolve.alias || {}),
-            // Asegúrate de que @ apunte a la raíz del proyecto
-            '@': require('path').resolve(__dirname, '../'),
-        }
-        return config
-    },
-}
-export default config

package/.storybook/preview.js

@@ -1,13 +0,0 @@
-import '../app/assets/css/main.css'
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-}
-
-export default preview

package/.vscode/settings.json

@@ -1,28 +0,0 @@
-{
-  "files.associations": {
-    "*.css": "tailwindcss"
-  },
-  "editor.quickSuggestions": {
-    "strings": "on"
-  },
-  "tailwindCSS.classAttributes": [
-    "class",
-    "ui",
-    ".*Styles*",
-    ".*Styles: .*", // <-- This should fix your issue.
-  ],
-  "tailwindCSS.experimental.classRegex": [
-    [
-      "ui:\\s*{([^)]*)\\s*}",
-      "(?:'|\"|`)([^']*)(?:'|\"|`)"
-    ]
-  ],
-  "editor.tabSize": 4,
-  "editor.stickyTabStops": true,
-  "references.preferredLocation": "view",
-  "conventionalCommits.scopes": [
-    "dev-infra",
-    "vscode-extension",
-    "components"
-  ]
-}

package/CHANGELOG.md

@@ -1,46 +0,0 @@
-# [0.3.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.2.0...v0.3.0) (2025-11-15)
-
-
-### Features
-
-* **components:** :sparkles: Crea componente `ADropdownAvatar` ([0aa9677](https://github.com/vicventum/design-system-dashboard-devmunity/commit/0aa96779530ed7c16389db6fb1ea9ead99e495ca))
-* **components:** :sparkles: Crea componente `APill` ([5ed606e](https://github.com/vicventum/design-system-dashboard-devmunity/commit/5ed606e86f0e29d8c1d09e55d9e6d803e496bcd1))
-* **components:** :sparkles: Crea componente AButtonAvatarDropdown ([d9e283d](https://github.com/vicventum/design-system-dashboard-devmunity/commit/d9e283dc20d3f70e214c56d9b26c55d688bec254))
-
-# [0.2.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.1.0...v0.2.0) (2025-11-14)
-
-
-### Features
-
-* **components:** :sparkles: Crea componente BModal ([6218f3a](https://github.com/vicventum/design-system-dashboard-devmunity/commit/6218f3aeeeb0695b05c00c64da6c3212b07afa08))
-* **components:** :sparkles: Crea componente CModalDanger ([1e3f7bb](https://github.com/vicventum/design-system-dashboard-devmunity/commit/1e3f7bb8778f970268b08043d70fef0fb0e7b10e))
-* **components:** :sparkles: Crea componente DActionButtons ([f7725cb](https://github.com/vicventum/design-system-dashboard-devmunity/commit/f7725cb5812b77628981abfb351b64e086e190c4))
-
-# [0.1.0](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.6...v0.1.0) (2025-11-12)
-
-
-### Features
-
-* **components:** :sparkles: Cambia estructura de componentes y agrega nuevo componente AButtonBack ([c3ad2e9](https://github.com/vicventum/design-system-dashboard-devmunity/commit/c3ad2e9fe85f0aa97049ecb6cb2667f6dd1f9c20))
-* **components:** :sparkles: Crea componente BCardHeader ([7e3292f](https://github.com/vicventum/design-system-dashboard-devmunity/commit/7e3292fd60f94b2cc83941f14c6a1b0795d46961))
-
-## [0.0.6](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.5...v0.0.6) (2025-11-06)
-
-
-### Bug Fixes
-
-* test 1 ([2a1248b](https://github.com/vicventum/design-system-dashboard-devmunity/commit/2a1248ba5b7b6ab724418cc14e2a654df5ae2e37))
-
-## [0.0.5](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.4...v0.0.5) (2025-11-05)
-
-
-### Bug Fixes
-
-* **dev-infra:** agrega el paquete commitizen ([5bd22df](https://github.com/vicventum/design-system-dashboard-devmunity/commit/5bd22df3a57fc583efbbfdb58f189e17052a7e61))
-
-## [0.0.4](https://github.com/vicventum/design-system-dashboard-devmunity/compare/v0.0.3...v0.0.4) (2025-11-05)
-
-
-### Bug Fixes
-
-* test ([ab4eba8](https://github.com/vicventum/design-system-dashboard-devmunity/commit/ab4eba858abe0f386faa39e3a4c0b0aee32d86ce))

package/app/Introduction.mdx

@@ -1,44 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Introduction" />
-
-# Design System - Nuxt UI
-
-Welcome to the Design System built with **Nuxt UI** and **Vue 3**.
-
-## Overview
-
-This Storybook contains all the components of our design system, built on top of Nuxt UI.
-
-## Getting Started
-
-Browse the components in the sidebar to see:
-- **Interactive examples** of each component
-- **Props documentation** with controls
-- **Usage examples** and code snippets
-
-## Components
-
-All components are located in the `app/components` directory and follow the Nuxt auto-import convention.
-
-## Tech Stack
-
-- **Vue 3** - Progressive JavaScript framework
-- **Nuxt 4** - The Intuitive Vue Framework
-- **Nuxt UI** - Fully styled and customizable components
-- **Tailwind CSS** - Utility-first CSS framework
-- **Storybook 8** - UI component development tool
-
-## Development
-
-To run Storybook locally:
-
-```bash
-pnpm storybook
-```
-
-To build Storybook:
-
-```bash
-pnpm build-storybook
-```

package/app/components/a/button/a-button-back.vue

@@ -1,33 +0,0 @@
-<script setup>
-const props = defineProps({
-    icon: {
-        type: String,
-        default: 'heroicons:arrow-left-16-solid',
-        required: false,
-    },
-    to: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    hasBackAction: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-})
-
-const emit = defineEmits(['on-click'])
-const router = useRouter()
-
-function handleClickLeftButtonIcon() {
-    emit('on-click')
-    if (props.hasBackAction && !props.to && props.icon.includes('arrow-left')) {
-        router.back()
-    }
-}
-</script>
-
-<template>
-    <UButton :to="to" :icon="icon" variant="icon" color="neutral" @click="handleClickLeftButtonIcon" />
-</template>

package/app/components/b/card/b-card-inner.vue

@@ -1,25 +0,0 @@
-<script setup>
-import { twMerge } from 'tailwind-merge'
-import { card } from '~/assets/css/themes/index.js'
-
-const props = defineProps({
-    class: {
-        type: [String, Object, Array],
-        default: '',
-        required: false,
-    },
-    as: {
-        type: String,
-        default: 'div',
-        required: false,
-    },
-})
-
-const cardClasses = computed(() => twMerge(card.slots.body, props.class))
-</script>
-
-<template>
-    <component :is="as" :class="cardClasses">
-        <slot />
-    </component>
-</template>