design-system-dashboard-devmunity 0.3.0 → 1.0.1

package/app/components/b/modal/b-modal.vue

@@ -1,84 +1,120 @@
-<script lang="jsx" setup>
-import { resolveComponent } from 'vue'
-import { twMerge } from 'tailwind-merge'
-
-const UForm = resolveComponent('UForm')
-
-const props = defineProps({
-    state: {
-        type: Object,
-        default: null,
-        required: false,
-    },
-    schema: {
-        type: Object,
-        default: null,
-        required: false,
-    },
-    title: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    description: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    text: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    primaryButtonText: {
-        type: String,
-        default: 'Guardar',
-        required: false,
-    },
-    primaryButtonColor: {
-        type: String,
-        default: 'primary',
-        required: true,
-    },
-    secondaryButtonText: {
-        type: String,
-        default: 'Cancelar',
-        required: false,
-    },
-    hasFooter: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
-    isPrimaryButtonDisabled: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    hasButtonsBlock: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    classButtons: {
-        type: String,
-        default: '',
-        required: false,
-    },
+<script lang="ts" setup>
+import { resolveComponent, computed, type Ref } from 'vue'
+import { twMerge, type ClassNameValue } from 'tailwind-merge'
+import type { UForm, UModal } from '#components'
+import type {SemanticColors } from '@/types'
+
+const UFormComponent = resolveComponent('UForm')
+
+interface Props {
+    /**
+     * The state object for form management
+     */
+    state?: Record<string, any> | null
+    /**
+     * The schema for form validation
+     */
+    schema?: Record<string, any> | null
+    /**
+     * The title of the modal
+     */
+    title?: string
+    /**
+     * The description of the modal
+     */
+    description?: string
+    /**
+     * Text for the main content when it is not necessary to use the slot with more complex markup
+     */
+    text?: string
+    /**
+     * Text for the primary button
+     */
+    primaryButtonText?: string
+    /**
+     * Color variant for the primary button
+     */
+    primaryButtonColor?: SemanticColors
+    /**
+     * Text for the secondary button
+     */
+    secondaryButtonText?: string
+    /**
+     * Whether the modal has a footer
+     */
+    hasFooter?: boolean
+    /**
+     * Whether the primary button is disabled
+     */
+    isPrimaryButtonDisabled?: boolean
+    /**
+     * Whether buttons should be displayed as blocks
+     */
+    hasButtonsBlock?: boolean
+    /**
+     * Additional CSS classes for buttons
+     */
+    classButtons?: ClassNameValue
+    /**
+     * Additional CSS classes for the modal
+     */
+    class?: ClassNameValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    state: null,
+    schema: null,
+    title: '',
+    description: '',
+    text: '',
+    primaryButtonText: 'Guardar',
+    primaryButtonColor: 'primary',
+    secondaryButtonText: 'Cancelar',
+    hasFooter: true,
+    isPrimaryButtonDisabled: false,
+    hasButtonsBlock: false,
+    classButtons: '',
+    class: '',
 })
 
-const emit = defineEmits(['on-click-primary-button', 'on-click-secondary-button', 'on-submit'])
+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
+    /**
+     * Emitted when the form is submitted
+     */
+    (e: 'on-submit'): void
+}>()
+
+defineSlots<{
+    /**
+     * Custom header content
+     */
+    header?(): any
+    /**
+     * Default body content when no text is provided
+     */
+    default?(): any
+    /**
+     * Custom footer content
+     */
+    footer?(): any
+}>()
 
 // Model
 
-const isOpen = defineModel({
-    type: Boolean,
+const isOpen = defineModel<boolean>({
     default: false,
     required: true,
 })
-const formRef = defineModel('formRef', {
-    type: Object,
-    default: () => {},
+const formRef = defineModel<Ref<any>>('formRef', {
+    default: () => ({}) as any,
     required: false,
 })
 
@@ -96,32 +132,40 @@ const formRef = defineModel('formRef', {
 // })
 
 const formProps = computed(() => {
-    // return props.data ? { ref: 'form', state: props.data, onSubmit: handleSubmit } : {}
     return props.state ? { ref: 'formRef', state: props.state, schema: props.schema } : {}
 })
 
 // Methods
 
-function handleSubmit() {
+function handleSubmit(): void {
     emit('on-submit')
 }
-function handleClickPrimaryButton() {
+function handleClickPrimaryButton(): void {
     emit('on-click-primary-button')
 }
-function handleClickSecondaryButton() {
+function handleClickSecondaryButton(): void {
     isOpen.value = false
     emit('on-click-secondary-button')
 }
 </script>
 
 <template>
-    <UModal v-model:open="isOpen" :title="title" :description="description">
+    <UModal
+        v-model:open="isOpen"
+        :title="title"
+        :description="description"
+        :class="twMerge('w-lg', props.class)"
+    >
         <template #header>
             <slot v-if="$slots.header" name="header" />
         </template>
 
         <template #body>
-            <component :is="state ? UForm : 'section'" v-bind="formProps" @submit="handleSubmit">
+            <component
+                :is="props.state ? UFormComponent : 'section'"
+                v-bind="formProps"
+                @submit="handleSubmit"
+            >
                 <p v-if="text">
                     {{ text }}
                 </p>
@@ -136,9 +180,9 @@ function handleClickSecondaryButton() {
                 :primary-button-color="primaryButtonColor"
                 :primary-button-text="primaryButtonText"
                 :secondary-button-text="secondaryButtonText"
-                :is-buttons-block="hasButtonsBlock"
+                :has-buttons-block="hasButtonsBlock"
                 :is-primary-button-disabled="isPrimaryButtonDisabled"
-                :class="twMerge('flex w-full justify-end gap-x-2', classButtons)"
+                :class="twMerge('flex w-full justify-end gap-x-2', props.classButtons)"
                 class-buttons="w-40"
                 @on-click-primary-button="handleClickPrimaryButton"
                 @on-click-secondary-button="handleClickSecondaryButton"

package/app/components/c/badge/c-badge-status.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CBadgeStatus from './c-badge-status.vue'
+
+const meta = {
+    title: 'Composites/Badge/CBadgeStatus',
+    component: CBadgeStatus,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Badge component variant of [CBadge](/docs/bases-badge-bbadge--docs), specifically for displaying the status of a task.',
+            },
+        },
+    },
+    argTypes: {
+        value: {
+            control: { type: 'select' },
+            options: ['TODO', 'IN_PROGRESS', 'FINISHED', 'CANCELLED', 'OTHER'] satisfies string[],
+        },
+    },
+} satisfies Meta<typeof CBadgeStatus>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        label: 'Status',
+        value: 'OTHER',
+    },
+}
+
+export const Todo: Story = {
+    args: {
+        ...Default.args,
+        label: 'Todo',
+        value: 'TODO',
+    },
+}
+
+export const InProgress: Story = {
+    args: {
+        ...Default.args,
+        label: 'In progress',
+        value: 'IN_PROGRESS',
+    },
+}
+
+export const Finished: Story = {
+    args: {
+        ...Default.args,
+        label: 'Finished',
+        value: 'FINISHED',
+    },
+}
+
+export const Cancelled: Story = {
+    args: {
+        ...Default.args,
+        label: 'Cancelled',
+        value: 'CANCELLED',
+    },
+}
+
+export const Other: Story = {
+    args: {
+        ...Default.args,
+        label: 'Other',
+        value: 'OTHER',
+    },
+}

package/app/components/c/badge/c-badge-status.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { BBadge } from '#components'
+
+type BadgeStyles = InstanceType<typeof BBadge>['$props']['styles']
+type DefaultStyle = InstanceType<typeof BBadge>['$props']['defaultStyle']
+
+interface Props {
+    /**
+     * The label text to display on the badge
+     */
+    label: string
+    /**
+     * The status value that determines the badge style
+     */
+    value: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    label: '',
+    value: '',
+})
+
+const styles: BadgeStyles = {
+    TODO: {
+        color: 'accent',
+        variant: 'soft',
+    },
+    IN_PROGRESS: {
+        color: 'secondary',
+        variant: 'soft',
+    },
+    FINISHED: {
+        color: 'success',
+        variant: 'soft',
+        icon: 'material-symbols:check-circle-outline',
+    },
+    CANCELLED: {
+        color: 'error',
+        variant: 'soft',
+        icon: 'material-symbols:info-outline',
+    },
+    OTHER: {
+        color: 'neutral',
+        variant: 'soft',
+    },
+}
+
+const defaultStyle: DefaultStyle = styles.OTHER
+
+defineSlots<{
+    /**
+     * The default slot content
+     */
+    default(): any
+}>()
+</script>
+
+<template>
+    <BBadge :label="label" :value="value" :styles="styles" :default-style="defaultStyle" />
+</template>

package/app/components/c/modal/c-modal-danger.stories.ts

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import CModalDanger from './c-modal-danger.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+
+const meta = {
+    title: 'Composites/Modal/CModalDanger',
+    component: CModalDanger,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Modal component variant of [BModal](/docs/bases-modal-bmodal--docs), specifically for displaying a danger modal. It displays the footer buttons in block mode by default, and the main action button in "error" color.',
+            },
+        },
+    },
+    argTypes: {
+        'onOn-click-primary-button': {
+            table: { disable: true },
+        },
+        'onOn-click-secondary-button': {
+            table: { disable: true },
+        },
+        modelValue: {
+            control: 'boolean',
+            name: 'isOpen',
+            description: 'Whether the modal is open',
+        },
+    },
+    args: {
+        'onOn-click-primary-button': fn(),
+        'onOn-click-secondary-button': fn(),
+    },
+    render: (args) =>
+        ({
+            components: { CModalDanger, UButton },
+            setup() {
+                return { args }
+            },
+            template: `
+          <div>
+            <UButton label="Open Danger Modal" color="error" @click="args.modelValue=true" icon="i-lucide-trash" />
+
+            <CModalDanger v-bind="args" v-model="args.modelValue" />
+          </div>
+        `,
+        }) as any,
+} satisfies Meta<typeof CModalDanger>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        title: 'Delete Item',
+        description: 'Are you sure you want to delete this item?',
+        modelValue: false,
+        text: 'This action is irreversible and cannot be undone.',
+    },
+}
+
+export const CustomButtonsLabels: Story = {
+    args: {
+        ...Default.args,
+        title: 'Destructive Action',
+        description: 'Proceed with caution',
+        modelValue: false,
+        primaryButtonText: 'Destroy',
+        secondaryButtonText: 'Abort',
+        text: 'Custom button labels example.',
+    },
+}
+
+export const WithSlot: Story = {
+    args: {
+        title: 'Custom Content',
+        description: 'Modal with custom slot content',
+        modelValue: false,
+    },
+    render: (args) =>
+        ({
+            components: { CModalDanger, UButton },
+            setup() {
+                return { args }
+            },
+            template: `
+          <div>
+            <UButton label="Open Danger Slot Modal" color="error" @click="args.modelValue=true" icon="i-lucide-trash" />
+
+            <CModalDanger v-bind="args" v-model="args.modelValue">
+                <div class="space-y-4">
+                    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
+                        <h4 class="text-red-800 font-semibold mb-2">Warning Details</h4>
+                        <ul class="text-sm text-red-700 space-y-1">
+                            <li>• All associated data will be permanently deleted</li>
+                            <li>• This action cannot be reversed</li>
+                            <li>• Other users may be affected</li>
+                        </ul>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <input type="checkbox" id="confirm" class="rounded">
+                        <label for="confirm" class="text-sm text-gray-600">
+                            I understand the consequences
+                        </label>
+                    </div>
+                </div>
+            </CModalDanger>
+          </div>
+        `,
+        }) as any,
+}

package/app/components/c/modal/c-modal-danger.vue

@@ -1,48 +1,66 @@
-<script lang="jsx" setup>
-const props = defineProps({
-    state: {
-        type: Object,
-        default: null,
-        required: false,
-    },
-    schema: {
-        type: Object,
-        default: null,
-        required: false,
-    },
-    title: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    description: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    text: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    primaryButtonText: {
-        type: String,
-        default: 'Eliminar',
-        required: false,
-    },
-    secondaryButtonText: {
-        type: String,
-        default: 'Cancelar',
-        required: false,
-    },
+<script lang="ts" setup>
+import type { BModal } from '#components'
+
+interface Props {
+    /**
+     * The state object for form management
+     */
+    state?: Record<string, any> | null
+    /**
+     * The schema for form validation
+     */
+    schema?: Record<string, any> | null
+    /**
+     * The title of the modal
+     */
+    title: string
+    /**
+     * The description of the modal
+     */
+    description: string
+    /**
+     * Text for the main content when it is not necessary to use the slot with more complex markup
+     */
+    text?: string
+    /**
+     * Text for the primary button
+     */
+    primaryButtonText?: string
+    /**
+     * Text for the secondary button
+     */
+    secondaryButtonText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    state: null,
+    schema: null,
+    text: '',
+    primaryButtonText: 'Eliminar',
+    secondaryButtonText: 'Cancelar',
 })
 
-const emit = defineEmits(['on-click-primary-button', 'on-click-secondary-button'])
+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
+}>()
+
+defineSlots<{
+    /**
+     * Default body content when no text is provided
+     */
+    default?(): any
+}>()
 
 // Model
 
-const isOpen = defineModel({
-    type: Boolean,
+const isOpen = defineModel<boolean>({
     default: false,
     required: true,
 })
@@ -52,13 +70,14 @@ const isOpen = defineModel({
     <BModal
         v-model="isOpen"
         :title="title"
+        :description="description"
         :text="text"
         :primary-button-text="primaryButtonText"
         :secondary-button-text="secondaryButtonText"
         :state="state"
         :schema="schema"
         primary-button-color="error"
-        is-block-buttons
+        has-buttons-block
         @on-click-primary-button="emit('on-click-primary-button')"
         @on-click-secondary-button="emit('on-click-secondary-button')"
     >