design-system-dashboard-devmunity 0.4.0 → 1.0.1

package/app/components/d/action-buttons/d-action-buttons.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import { semanticColors } from '@/utils/util-get-colors-from-css'
+import DActionButtons from './d-action-buttons.vue'
+import type { SemanticColors } from '@/types'
+
+const meta = {
+    title: 'Design/ActionButtons',
+    component: DActionButtons,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Primary and secondary action buttons with layout variations. Generally used in sections that require a primary and/or secondary button, such as in the [DCardHeader](/docs/design-card-header--docs) section, or in the footer of modals like [BModal](/docs/bases-modal-bmodal--docs).',
+            },
+        },
+    },
+    argTypes: {
+        primaryButtonColor: {
+            control: 'select',
+            options: Object.keys(semanticColors) as SemanticColors[],
+        },
+        'onOn-click-primary-button': {
+            table: { disable: true },
+        },
+        'onOn-click-secondary-button': {
+            table: { disable: true },
+        },
+    },
+    args: {
+        'onOn-click-primary-button': fn(),
+        'onOn-click-secondary-button': fn(),
+    },
+} satisfies Meta<typeof DActionButtons>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        primaryButtonText: 'Confirm',
+        secondaryButtonText: 'Cancel',
+    },
+}
+
+export const WithIcon: Story = {
+    args: {
+        ...Default.args,
+        primaryButtonText: 'Add',
+        primaryButtonIcon: 'i-lucide-plus',
+    },
+}
+
+export const WithTrailingIcon: Story = {
+    args: {
+        primaryButtonText: 'Next',
+        primaryButtonTrailingIcon: 'i-lucide-arrow-right',
+        secondaryButtonText: 'Back',
+    },
+}
+
+export const Block: Story = {
+    args: {
+        ...Default.args,
+        hasButtonsBlock: true,
+    },
+}
+
+export const Reverse: Story = {
+    args: {
+        primaryButtonText: 'Next',
+        secondaryButtonText: 'Back',
+        isReverse: true,
+    },
+}
+
+export const DisabledPrimary: Story = {
+    args: {
+        ...Default.args,
+        isPrimaryButtonDisabled: true,
+    },
+}
+
+export const OnlyPrimaryAndUrl: Story = {
+    args: {
+        primaryButtonText: 'Go to home',
+        primaryButtonTo: '/',
+    },
+}

package/app/components/d/action-buttons/d-action-buttons.vue

@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { twMerge, type ClassNameValue } from 'tailwind-merge'
+import type { UButton } from '#components'
+
+// Derived types from UButton component
+type ButtonColor = InstanceType<typeof UButton>['$props']['color']
+
+interface Props {
+    /**
+     * Text for the primary button
+     */
+    primaryButtonText?: string
+    /**
+     * Icon for the left side of primary button
+     */
+    primaryButtonIcon?: string
+    /**
+     * Icon for the right side of primary button
+     */
+    primaryButtonTrailingIcon?: string
+    /**
+     * Navigation target for the primary button
+     */
+    primaryButtonTo?: string
+    /**
+     * Color variant for the primary button
+     */
+    primaryButtonColor?: ButtonColor
+    /**
+     * Text for the secondary button
+     */
+    secondaryButtonText?: string
+    /**
+     * Navigation target for the secondary button
+     */
+    secondaryButtonTo?: string
+    /**
+     * Whether buttons should be displayed occupying all available space
+     */
+    hasButtonsBlock?: boolean
+    /**
+     * Whether to reverse the button order
+     */
+    isReverse?: boolean
+    /**
+     * Whether the primary button is disabled
+     */
+    isPrimaryButtonDisabled?: boolean
+    /**
+     * Whether the secondary button is disabled
+     */
+    isSecondaryButtonDisabled?: boolean
+    /**
+     * Additional CSS classes for the buttons
+     */
+    classButtons?: ClassNameValue
+    /**
+     * Additional CSS classes for the container
+     */
+    class?: ClassNameValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    primaryButtonText: '',
+    primaryButtonIcon: '',
+    primaryButtonTrailingIcon: '',
+    primaryButtonTo: '',
+    primaryButtonColor: 'primary',
+    secondaryButtonText: '',
+    secondaryButtonTo: '',
+    hasButtonsBlock: false,
+    isReverse: false,
+    isPrimaryButtonDisabled: false,
+    isSecondaryButtonDisabled: false,
+    classButtons: '',
+    class: '',
+})
+
+const emit = defineEmits<{
+    /**
+     * Emitted when the primary button is clicked
+     */
+    (e: 'on-click-primary-button'): void
+    /**
+     * Emitted when the secondary button is clicked
+     */
+    (e: 'on-click-secondary-button'): void
+}>()
+
+const classCard = computed(() => twMerge('flex gap-x-4', props.class, props.isReverse && 'flex-row-reverse'))
+const classButtonsComputed = computed(() =>
+    twMerge('justify-center w-[150px]', props.hasButtonsBlock && 'flex-auto', props.classButtons)
+)
+</script>
+
+<template>
+    <footer :class="classCard">
+        <UButton
+            v-if="secondaryButtonText"
+            :to="secondaryButtonTo"
+            :label="secondaryButtonText"
+            :disabled="isSecondaryButtonDisabled"
+            :class="classButtonsComputed"
+            variant="outline"
+            color="neutral"
+            @click="$emit('on-click-secondary-button')"
+        />
+        <UButton
+            v-if="primaryButtonText"
+            :label="primaryButtonText"
+            :to="primaryButtonTo"
+            :color="primaryButtonColor"
+            :icon="primaryButtonIcon"
+            :trailing-icon="primaryButtonTrailingIcon"
+            :disabled="isPrimaryButtonDisabled"
+            :class="classButtonsComputed"
+            type="submit"
+            @click="$emit('on-click-primary-button')"
+        />
+    </footer>
+</template>

package/app/components/d/card/d-card-header.stories.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import DCardHeader from './d-card-header.vue'
+import DActionButtons from '@/components/d/action-buttons/d-action-buttons.vue'
+import BCard from '@/components/b/card/b-card.vue'
+import ACardInner from '@/components/a/card/a-card-inner.vue'
+
+const meta = {
+    title: 'Design/Card/DCardHeader',
+    component: DCardHeader,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Componente de encabezado para una sección principal, en la que se puede mostrar un título con un botón de icono al lado (usualmente usado para ir hacia atrás), un subtítulo y un espacio para agregar contenido de acción (usualmente botones de acción [DActionButtons](/docs/design-actionbuttons--docs)). Usado por lo general como header en cards como [BCard](/docs/bases-card-bcard--docs).',
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['main', 'secondary'] as const,
+        },
+        'onOn-click-left-button-icon': {
+            table: { disable: true },
+        },
+    },
+    args: {
+        'onOn-click-left-button-icon': fn(),
+    },
+} satisfies Meta<typeof DCardHeader>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const render = (args: any) => ({
+    components: { DCardHeader, DActionButtons },
+    setup() {
+        return { args }
+    },
+    template: `
+        <DCardHeader v-bind="args">
+            <template #actions>
+                <DActionButtons primary-button-text="Primary" secondary-button-text="Secondary" />
+            </template>
+        </DCardHeader>
+    `,
+})
+
+export const Main: Story = {
+    args: {
+        title: 'Main Header',
+        subtitle: 'Main subtitle description',
+        variant: 'main',
+        leftButtonIcon: 'heroicons:arrow-left-16-solid',
+        hasLeftButtonIcon: true,
+    },
+    render,
+}
+
+export const Secondary: Story = {
+    args: {
+        title: 'Secondary Header',
+        subtitle: 'Secondary subtitle description',
+        variant: 'secondary',
+        hasLeftButtonIcon: false,
+    },
+    render,
+}
+
+export const WithABCard: Story = {
+    name: 'With a BCard',
+    args: {
+        title: 'With a BCard',
+        subtitle: 'Subtitle',
+        variant: 'main',
+        leftButtonIcon: 'heroicons:arrow-left-16-solid',
+        hasLeftButtonIcon: true,
+    },
+    render: (args: any) => ({
+        components: { DCardHeader, BCard, ACardInner, DActionButtons },
+        setup() {
+            return { args }
+        },
+        template: `
+        <BCard>
+            <template #header>
+                <DCardHeader v-bind="args">
+                    <template #actions>
+                        <DActionButtons primary-button-text="Guardar" secondary-button-text="Cancelar" />
+                    </template>
+                </DCardHeader>
+            </template>
+            <template #default>
+                <ACardInner>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat odit eos sint doloribus maxime vitae aperiam nesciunt nisi quasi delectus ducimus harum officiis odio ipsa, eaque nobis autem ullam aut!</p>
+                </ACardInner>
+            </template>
+            <template #footer>
+                <ACardInner>
+                    <p>Card footer</p>
+                </ACardInner>
+            </template>
+        </BCard>
+    `,
+    }),
+}
+
+export const Simple: Story = {
+    args: {
+        title: 'Simple Header',
+    },
+    render: (args: any) => ({
+        components: { DCardHeader },
+        setup() {
+            return { args }
+        },
+        template: `
+        <DCardHeader v-bind="args" />
+    `,
+    }),
+}

package/app/components/d/card/d-card-header.vue

@@ -1,45 +1,63 @@
-<script lang="jsx" setup>
+<script lang="ts" setup>
 import { twMerge } from 'tailwind-merge'
 
-const props = defineProps({
-    title: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    subtitle: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    variant: {
-        type: String,
-        default: 'main', // main, secondary
-        required: false,
-    },
-    hasLeftButtonIcon: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    leftButtonIcon: {
-        type: String,
-        default: 'heroicons:arrow-left-16-solid',
-        required: false,
-    },
-    leftButtonIconTo: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    classTitle: {
-        type: String,
-        default: '',
-        required: false,
-    },
+interface Props {
+    /**
+     * The main title text
+     */
+    title: string
+    /**
+     * The subtitle text displayed below the title
+     */
+    subtitle?: string
+    /**
+     * The visual variant of the header
+     */
+    variant?: 'main' | 'secondary'
+    /**
+     * The icon to use for the left button
+     */
+    leftButtonIcon?: string
+    /**
+     * The navigation target for the left button
+     */
+    leftButtonIconTo?: string
+    /**
+     * Whether to show a left button icon
+     */
+    hasLeftButtonIcon?: boolean
+    /**
+     * Additional CSS classes for the title element
+     */
+    classTitle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    subtitle: '',
+    variant: 'main',
+    leftButtonIcon: 'heroicons:arrow-left-16-solid',
+    leftButtonIconTo: '',
+    hasLeftButtonIcon: false,
+    classTitle: '',
 })
 
-const emit = defineEmits(['on-click-left-button-icon'])
+const emit = defineEmits<{
+    /**
+     * Emitted when the left button icon is clicked
+     */
+    (e: 'on-click-left-button-icon'): void
+}>()
+
+defineSlots<{
+    /**
+     * Slot for action buttons or elements
+     */
+    actions(): any
+    /**
+     * Default slot content (not used in this component)
+     */
+    default?(): any
+}>()
 
 const headingTag = computed(() => {
     const tags = {
@@ -58,15 +76,15 @@ function handleClickLeftButtonIcon() {
     <ACardInner
         :class="[
             'text-default flex items-center justify-between',
-            { 'bg-muted border-y border-neutral-200': variant === 'secondary' },
+            variant === 'secondary' && 'bg-muted border-y border-neutral-200',
         ]"
     >
         <div class="space-y-1">
             <div class="flex items-center gap-x-3">
-                <AButtonBack
+                <AButtonNavigation
                     v-if="hasLeftButtonIcon"
                     :icon="leftButtonIcon"
-                    :To="leftButtonIconTo"
+                    :to="leftButtonIconTo"
                     :is-back-action="leftButtonIconTo"
                     @on-click="handleClickLeftButtonIcon"
                 />

package/app/components/d/upload/d-upload-avatar.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { SemanticColors } from '@/types'
+import { fn } from '@storybook/test'
+import { semanticColors } from '@/utils/util-get-colors-from-css'
+import DUploadAvatar, { type ButtonSize, type ButtonColor } from './d-upload-avatar.vue'
+
+const meta = {
+    title: 'Design/Upload/DUploadAvatar',
+    component: DUploadAvatar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Avatar upload and display component. Contains the logic to upload an image as an avatar and display a previously uploaded image.',
+            },
+        },
+    },
+    argTypes: {
+        buttonSize: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'] satisfies ButtonSize[],
+        },
+        buttonColor: {
+            control: 'select',
+            options: Object.keys(semanticColors) as SemanticColors[],
+        },
+        'onOn-upload-image': {
+            table: { disable: true },
+        },
+    },
+    args: {
+        'onOn-upload-image': fn(),
+    },
+} satisfies Meta<typeof DUploadAvatar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        buttonSize: 'sm',
+    },
+}
+
+export const WithImage: Story = {
+    args: {
+        ...Default.args,
+        src: 'https://avatars.githubusercontent.com/u/739984?v=4',
+    },
+}
+
+export const ButtonColorSuccess: Story = {
+    args: {
+        ...Default.args,
+        src: 'https://avatars.githubusercontent.com/u/739984?v=4',
+        buttonColor: 'success',
+    },
+}
+
+export const ButtonSizeLarge: Story = {
+    args: {
+        ...Default.args,
+        buttonSize: 'lg',
+    },
+}

package/app/components/d/upload/d-upload-avatar.vue

@@ -1,28 +1,44 @@
-<script setup>
-const props = defineProps({
-    src: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    buttonSize: {
-        type: String,
-        default: 'sm',
-        required: false,
-        validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
-    },
-    buttonColor: {
-        type: String,
-        default: 'neutral',
-        required: false,
-    },
+<script lang="ts" setup>
+import type { UButton } from '#components'
+
+// Types
+export type ButtonSize = InstanceType<typeof UButton>['$props']['size']
+export type ButtonColor = InstanceType<typeof UButton>['$props']['color']
+
+interface Props {
+    /**
+     * The source URL of the previously uploaded avatar image before uploading a new one
+     */
+    src?: string
+    /**
+     * The size of the upload button
+     */
+    buttonSize?: ButtonSize
+    /**
+     * The color of the upload button
+     */
+    buttonColor?: ButtonColor
+}
+
+interface Emits {
+    /**
+     * Emitted when an image is uploaded
+     */
+    (e: 'on-upload-image', file: File): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    src: '',
+    buttonSize: 'sm',
+    buttonColor: 'neutral',
 })
-const emit = defineEmits('on-upload-image')
+
+const emit = defineEmits<Emits>()
 
 // Data
 
-const fileName = ref(null)
-const inputFileRef = ref(null)
+const fileName = ref<File | null>(null)
+const inputFileRef = ref<HTMLInputElement | null>(null)
 
 // Computed
 
@@ -39,14 +55,17 @@ const getImage = computed(() => {
 
 // Methods
 
-function handleUploadImage(event) {
-    if (event.target.files) {
-        fileName.value = event.target.files[0]
-    } else {
-        fileName.value = event.dataTransfer.files[0]
-    }
+// Proposed change in handleUploadImage function
+function handleUploadImage(event: Event): void {
+    const target = event.target as HTMLInputElement
+    const files = target.files || (event as DragEvent).dataTransfer?.files
 
-    emit('on-upload-image', fileName.value)
+    // Capture the first file and check for its existence
+    const file = files?.[0]
+    if (file) {
+        fileName.value = file
+        emit('on-upload-image', file)
+    }
 }
 </script>
 
@@ -64,12 +83,12 @@ function handleUploadImage(event) {
             <div
                 v-else
                 class="bg-primary-50 grid size-20 place-items-center rounded-md"
-                @click="inputFileRef.click()"
+                @click="inputFileRef?.click()"
             >
                 <UIcon name="heroicons:photo" class="size-6 text-neutral-900" />
             </div>
         </div>
-        <UButton :color="buttonColor" variant="outline" @click="inputFileRef.click()" :size="buttonSize">
+        <UButton :color="buttonColor" variant="outline" @click="inputFileRef?.click()" :size="buttonSize">
             {{ 'Cambiar' }}
         </UButton>
     </div>

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()