design-system-dashboard-devmunity 0.3.0 → 1.0.1

package/app/components/b/badge/b-badge.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import BBadge, { type BadgeColor, type BadgeVariant } from './b-badge.vue'
+
+const meta = {
+    title: 'Bases/Badge/BBadge',
+    component: BBadge,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'A small, rounded label used to display brief information. Typically used to show the status of an item.',
+            },
+        },
+    },
+    argTypes: {
+        value: {
+            control: 'select',
+            options: ['active', 'inactive', 'error', ''] satisfies string[],
+        },
+        // @ts-ignore
+        name: {
+            name: '[slot name]',
+            description: 'Any dynamic slot for the badge',
+        },
+    },
+} satisfies Meta<typeof BBadge>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const styles = {
+    active: {
+        color: 'primary' as BadgeColor,
+        variant: 'solid' as BadgeVariant,
+        icon: 'heroicons:check-20-solid',
+    },
+    inactive: { color: 'neutral' as BadgeColor, variant: 'subtle' as BadgeVariant },
+    error: {
+        color: 'error' as BadgeColor,
+        variant: 'soft' as BadgeVariant,
+        icon: 'heroicons:x-circle-20-solid',
+    },
+}
+
+export const Default: Story = {
+    args: {
+        label: 'Default Style',
+        value: 'unknown',
+        styles,
+        defaultStyle: { color: 'neutral' as BadgeColor, variant: 'outline' as BadgeVariant },
+    },
+}
+
+export const Active: Story = {
+    args: {
+        ...Default.args,
+        label: 'Active Item',
+        value: 'active',
+    },
+}
+
+export const Inactive: Story = {
+    args: {
+        ...Default.args,
+        label: 'Inactive Item',
+        value: 'inactive',
+    },
+}
+
+export const ErrorState: Story = {
+    args: {
+        ...Default.args,
+        label: 'Error Occurred',
+        value: 'error',
+    },
+}

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

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { UBadge } from '#components'
+import { badge } from '~/assets/css/themes'
+
+/**
+ * Badge style configuration object
+ */
+export type BadgeSize = InstanceType<typeof UBadge>['$props']['size']
+export type BadgeColor = InstanceType<typeof UBadge>['$props']['color']
+export type BadgeVariant = InstanceType<typeof UBadge>['$props']['variant']
+
+interface BadgeStyles {
+    [key: string]: Partial<InstanceType<typeof UBadge>['$props']> & { [key: string]: any }
+}
+
+interface Props {
+    /**
+     * The label text to display on the badge
+     */
+    label: string
+    /**
+     * The active style variant key of the `styles` object
+     */
+    value?: string
+    /**
+     * Custom style settings for different badge variants. The options are derived from the props expected by `UBadge`
+     */
+    styles?: BadgeStyles
+    /**
+     * Default style configuration for the badge
+     */
+    defaultStyle?: BadgeStyles[string]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    styles: () => ({}),
+    defaultStyle: () => badge,
+})
+
+defineSlots<{
+    /**
+     * Any dynamic slots for the badge content
+     */
+    [name: string]: any
+}>()
+</script>
+
+<template>
+    <UBadge :label="label" v-bind="styles[value] ?? props.defaultStyle">
+        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+        </template>
+    </UBadge>
+</template>

package/app/components/b/card/b-card.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import BCard, { type CardVariant } from './b-card.vue'
+import ACardInner from '@/components/a/card/a-card-inner.vue'
+
+const meta = {
+    title: 'Bases/Card/BCard',
+    component: BCard,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'A base card component that serves as a fundamental design element for grouping and organizing content. Its style is based on a border with rounded corners and is structured into distinct header, body, and footer sections.',
+            },
+        },
+    },
+    argTypes: {
+        as: {
+            control: 'text',
+        },
+        variant: {
+            control: 'select',
+            options: ['outline', 'solid', 'soft', 'ghost'] satisfies CardVariant[],
+        },
+        hasBodyExpanded: {
+            control: 'boolean',
+        },
+        hasFooterDivider: {
+            control: 'boolean',
+        },
+    },
+} satisfies Meta<typeof BCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const template = `
+  <BCard v-bind="args">
+    <template #header>
+      <ACardInner class="font-bold">Header</ACardInner>
+    </template>
+    <ACardInner>Body content goes here. It can be long.</ACardInner>
+    <template #footer>
+      <ACardInner class="text-sm text-gray-500">Footer content</ACardInner>
+    </template>
+  </BCard>
+`
+
+export const Default: Story = {
+    args: {
+        variant: 'outline',
+        hasBodyExpanded: false,
+        hasFooterDivider: true,
+    },
+    render: (args) => ({
+        components: { BCard, ACardInner },
+        setup() {
+            return { args }
+        },
+        template,
+    }),
+}
+
+export const Solid: Story = {
+    args: {
+        ...Default.args,
+        variant: 'solid',
+    },
+    render: (args) => ({
+        components: { BCard, ACardInner },
+        setup() {
+            return { args }
+        },
+        template,
+    }),
+}
+
+export const WithExpandedBody: Story = {
+    args: {
+        ...Default.args,
+        hasBodyExpanded: true,
+    },
+    render: (args) => ({
+        components: { BCard, ACardInner },
+        setup() {
+            return { args }
+        },
+        template,
+    }),
+}
+
+export const WithoutFooterDivider: Story = {
+    args: {
+        variant: 'outline',
+        hasBodyExpanded: true,
+        hasFooterDivider: true,
+        class: 'h-64', // Force height to show expansion
+    },
+    render: (args) => ({
+        components: { BCard, ACardInner },
+        setup() {
+            return { args }
+        },
+        template: `
+        <div class="h-64">
+            <BCard v-bind="args">
+            <template #header>
+                <ACardInner>Fixed Header</ACardInner>
+            </template>
+            <ACardInner>
+                <p v-for="i in 10" :key="i">Scrollable content line {{ i }}</p>
+            </ACardInner>
+            <template #footer>
+                <ACardInner>Fixed Footer</ACardInner>
+            </template>
+            </BCard>
+        </div>
+    `,
+    }),
+}

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

@@ -1,39 +1,61 @@
-<script lang="jsx" setup>
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import type { UCard } from '#components'
 
-const props = defineProps({
-    as: {
-        type: String,
-        default: 'div',
-        required: false,
-    },
-    variant: {
-        default: 'outline',
-        type: String,
-        required: false,
-    },
-    hasBodyExpanded: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-    hasFooterDivider: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
-    ui: {
-        type: Object,
-        default: null,
-        required: false,
-    },
+// Types
+export type CardVariant = InstanceType<typeof UCard>['$props']['variant']
+
+interface Props {
+    /**
+     * The HTML tag to render the card as
+     * @default 'div'
+     */
+    as?: string
+    /**
+     * The visual variant of the card
+     * @default 'outline'
+     */
+    variant?: CardVariant
+    /**
+     * Whether the card body should expand to fill available space
+     * @default false
+     */
+    hasBodyExpanded?: boolean
+    /**
+     * Whether to show a divider above the footer
+     * @default true
+     */
+    hasFooterDivider?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: 'article',
+    variant: 'outline',
+    hasBodyExpanded: false,
+    hasFooterDivider: true,
 })
 
+defineSlots<{
+    /**
+     * The default slot in which all the content
+     */
+    default(): any
+    /**
+     * The header slot
+     */
+    header(): any
+    /**
+     * The footer slot
+     */
+    footer(): any
+}>()
+
 // Computed
 
 const uiStyles = computed(() => {
     const baseStyles = {
+        root: '',
         header: 'p-0 sm:p-0',
         body: 'p-0 sm:p-0',
         footer: 'p-0 sm:p-0 sm:px-0',
@@ -51,11 +73,6 @@ const uiStyles = computed(() => {
         baseStyles.body = twMerge(baseStyles.body, 'border-none')
     }
 
-    // Apply custom ui prop (overrides previous styles)
-    if (props.ui) {
-        Object.assign(baseStyles, props.ui)
-    }
-
     return baseStyles
 })
 </script>

package/app/components/b/modal/b-modal.stories.ts

@@ -0,0 +1,210 @@
+import { reactive } from 'vue'
+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 UButton from '@nuxt/ui/components/Button.vue'
+import UForm from '@nuxt/ui/components/Form.vue'
+import UFormField from '@nuxt/ui/components/FormField.vue'
+import UInput from '@nuxt/ui/components/Input.vue'
+import BModal from './b-modal.vue'
+
+const meta = {
+    title: 'Bases/Modal/BModal',
+    component: BModal,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'Base modal component. Its structure consists of a blank body, and a header and footer with a predefined design. It can contain text, any other element in the body, or a form, for which the schema and state can be defined.',
+            },
+        },
+    },
+    argTypes: {
+        primaryButtonColor: {
+            control: 'select',
+            options: Object.keys(semanticColors) as SemanticColors[],
+        },
+        'onOn-click-primary-button': {
+            table: { disable: true },
+        },
+        'onOn-click-secondary-button': {
+            table: { disable: true },
+        },
+        'onOn-submit': {
+            table: { disable: true },
+        },
+        modelValue: {
+            control: 'boolean',
+            name: 'isOpen',
+            description: 'Whether the modal is open',
+            table: {
+                category: 'v-model',
+            },
+        },
+    },
+    args: {
+        'onOn-click-primary-button': fn(),
+        'onOn-click-secondary-button': fn(),
+        'onOn-submit': fn(),
+    },
+    render: (args) =>
+        ({
+            components: { BModal, UButton },
+            setup() {
+                return { args }
+            },
+            template: `
+          <div>
+            <UButton label="Open Modal" @click="args.modelValue = true" />
+            <BModal v-bind="args" v-model="args.modelValue" />
+          </div>
+        `,
+        }) as any,
+} satisfies Meta<typeof BModal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        title: 'Modal Title',
+        description: 'This is a description of the modal.',
+        modelValue: false,
+        primaryButtonText: 'Save',
+        secondaryButtonText: 'Cancel',
+        primaryButtonColor: 'primary',
+    },
+}
+
+export const WithTextContent: Story = {
+    args: {
+        ...Default.args,
+        title: 'Text Content',
+        description: 'Modal with simple text content',
+        text: 'This is the body text content passed via the "text" prop.',
+        modelValue: false,
+    },
+}
+
+export const WithSlot: Story = {
+    args: {
+        ...Default.args,
+        title: 'With Slot',
+        description: 'Modal with custom content',
+        modelValue: false,
+    },
+    render: (args) =>
+        ({
+            components: { BModal, UButton },
+            setup() {
+                return { args }
+            },
+            template: `
+          <div>
+            <UButton label="Open Modal" @click="args.modelValue = true" />
+            <BModal v-bind="args" v-model="args.modelValue">
+              <div class="space-y-4">
+                <p class="text-sm text-gray-600">
+                  This is a custom content area where you can place any elements,
+                  such as forms, images, or additional text.
+                </p>
+                <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                  <span class="text-blue-700 font-medium">Note:</span>
+                  Custom slots allow for maximum flexibility in modal design.
+                </div>
+              </div>
+            </BModal>
+          </div>
+        `,
+        }) as any,
+}
+
+export const WithForm: Story = {
+    args: {
+        ...Default.args,
+        title: 'With Form',
+        description: 'Modal with form',
+        modelValue: false,
+        class: 'w-74',
+    },
+    render: (args) =>
+        ({
+            components: {
+                BModal,
+                UButton: UButton as any,
+                UForm: UForm as any,
+                UFormField: UFormField as any,
+                UInput: UInput as any,
+            },
+            setup() {
+                const schema = {
+                    email: {
+                        type: 'string',
+                        required: true,
+                        format: 'email',
+                    },
+                    password: {
+                        type: 'string',
+                        required: true,
+                        format: 'password',
+                    },
+                }
+                const state = reactive({
+                    email: '',
+                    password: '',
+                })
+                return { args, schema, state }
+            },
+            template: `
+          <div>
+            <UButton label="Open Modal" @click="args.modelValue = true" />
+            <BModal v-bind="args" v-model="args.modelValue">
+                <UForm :schema="schema" :state="state" class="space-y-4 w-full">
+                    <UFormField label="Email" name="email" class="w-full">
+                        <UInput v-model="state.email" type="email" />
+                    </UFormField>
+
+                    <UFormField label="Password" name="password" class="w-full">
+                        <UInput v-model="state.password" type="password" />
+                    </UFormField>
+                </UForm>
+            </BModal>
+          </div>
+        `,
+        }) as any,
+}
+
+export const ButtonsBlock: Story = {
+    args: {
+        ...Default.args,
+        title: 'Block Buttons',
+        description: 'Buttons are full width',
+        hasButtonsBlock: true,
+        modelValue: false,
+        text: 'Check the buttons below.',
+    },
+}
+
+export const NoFooter: Story = {
+    args: {
+        ...Default.args,
+        title: 'No Footer',
+        description: 'This modal has no footer',
+        hasFooter: false,
+        modelValue: false,
+        text: 'Footer is hidden.',
+    },
+}
+
+export const DisabledPrimary: Story = {
+    args: {
+        ...Default.args,
+        title: 'Disabled Action',
+        description: 'Primary button is disabled',
+        isPrimaryButtonDisabled: true,
+        modelValue: false,
+        text: 'You cannot save right now.',
+    },
+}