design-system-dashboard-devmunity 0.4.0 → 1.0.1

package/app/components/a/card/a-card-inner.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ACardInner from './a-card-inner.vue'
+import BCard from '@/components/b/card/b-card.vue'
+
+const meta: Meta<typeof ACardInner> = {
+    title: 'Atoms/Card/ACardInner',
+    component: ACardInner,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'A simple component that allows you to apply standardized padding in all directions to separate content from its edges.',
+            },
+        },
+    },
+    argTypes: {
+        class: {
+            control: 'text',
+            description: 'CSS classes to apply to the card',
+        },
+        as: {
+            control: 'select',
+            options: ['div', 'section', 'article', 'main', 'aside'],
+            description: 'HTML element to render as',
+        },
+    },
+}
+
+type Story = StoryObj<typeof meta>
+export default meta
+
+export const Default: Story = {
+    args: {
+        as: 'div',
+    },
+    render: (args) => ({
+        components: { ACardInner },
+        setup() {
+            return { args }
+        },
+        template: '<a-card-inner v-bind="args">Default Content</a-card-inner>',
+    }),
+}
+
+export const CustomClass: Story = {
+    args: {
+        as: 'section',
+        class: 'bg-neutral-100 p-4 rounded-lg border border-neutral-200',
+    },
+    render: (args) => ({
+        components: { ACardInner },
+        setup() {
+            return { args }
+        },
+        template: '<a-card-inner v-bind="args">Content with custom styling</a-card-inner>',
+    }),
+}
+
+export const WithBCardComponent: Story = {
+    name: 'With BCard component',
+    args: {
+        as: 'section',
+    },
+    render: (args) => ({
+        components: { ACardInner, BCard },
+        setup() {
+            return { args }
+        },
+        template: `
+        <b-card>
+            <template #header>
+                <a-card-inner>
+                    <h2>BCard Header</h2>
+                </a-card-inner>
+            </template>
+
+            <a-card-inner>
+                <p>BCard Inner content</p>
+            </a-card-inner>
+
+            <template #footer>
+                <a-card-inner>
+                    <p>BCard Footer</p>
+                </a-card-inner>
+            </template>
+        </b-card>`,
+    }),
+}

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

@@ -1,20 +1,33 @@
-<script setup>
-import { twMerge } from 'tailwind-merge'
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { twMerge, type ClassNameValue } 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,
-    },
+interface Props {
+    /**
+     * The class to apply to the card
+     * @type ClassNameValue
+     */
+    class?: ClassNameValue
+    /**
+     * The component to render the card as
+     * @type string | Component
+     */
+    as?: string | Component
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    class: '',
+    as: 'div',
 })
 
+defineSlots<{
+    /**
+     * The default slot in which all the content
+     */
+    default(): any
+}>()
+
 const cardClasses = computed(() => twMerge(card.slots.body, props.class))
 </script>
 

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

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ADropdownAvatar, { type DropdownItem } from './a-dropdown-avatar.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import UAvatar from '@nuxt/ui/components/Avatar.vue'
+import AButtonAvatarDropdown from '@/components/a/button/a-button-avatar-dropdown.vue'
+
+const meta = {
+    title: 'Atoms/Dropdown/ADropdownAvatar',
+    component: ADropdownAvatar,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    'A specialized dropdown menu for displaying user information. Typically used in conjunction with the [AButtonAvatarDropdown](?path=/docs/atoms-button-abuttonavatardropdown--docs) component.',
+            },
+        },
+    },
+    render: (args) => ({
+        components: { ADropdownAvatar, UButton, UAvatar, AButtonAvatarDropdown },
+        setup() {
+            return { args }
+        },
+        template: `
+        <ADropdownAvatar v-bind="args">
+            <UButton icon="i-lucide-menu" color="neutral" variant="outline" />
+        </ADropdownAvatar>
+    `,
+    }),
+    argTypes: {
+        userName: {
+            control: 'text',
+        },
+        userEmail: {
+            control: 'text',
+        },
+        userTo: {
+            control: 'text',
+        },
+        items: {
+            control: 'object',
+        },
+    },
+} satisfies Meta<typeof ADropdownAvatar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const items: DropdownItem[][] = [
+    [{ label: 'Profile', icon: 'heroicons:user' }],
+    [{ label: 'Settings', icon: 'heroicons:cog-6-tooth' }],
+]
+
+export const Default: Story = {
+    args: {
+        userName: 'John Doe',
+        userEmail: 'john@example.com',
+        items,
+    },
+}
+
+export const WithAButtonAvatarDropdownComponent: Story = {
+    name: 'With AButtonAvatarDropdown Component',
+    render: (args) => ({
+        components: { ADropdownAvatar, AButtonAvatarDropdown },
+        setup() {
+            return { args }
+        },
+        template: `
+        <ADropdownAvatar v-bind="args">
+            <span>
+                <AButtonAvatarDropdown
+                    label="Custom Trigger"
+                    color="success"
+                    trailing-icon="i-heroicons-chevron-down"
+                    src="https://avatars.githubusercontent.com/u/739984?v=4"
+                />
+            </span>
+        </ADropdownAvatar>
+    `,
+    }),
+    args: {
+        userName: 'Admin',
+        userEmail: 'admin@sys.com',
+        userTo: '/profile',
+        items: [
+            ...items,
+            [
+                {
+                    label: 'Logout',
+                    icon: 'heroicons:arrow-left-on-rectangle',
+                    color: 'error',
+                    trailingIcon: 'heroicons:arrow-left-on-rectangle',
+                },
+            ],
+        ],
+    },
+}
+
+export const Minimal: Story = {
+    args: {
+        userName: 'Jane',
+        items: [[{ label: 'Logout', icon: 'heroicons:arrow-left-on-rectangle' }]],
+    },
+}
+
+export const WithNavigation: Story = {
+    args: {
+        userName: 'Admin user',
+        userEmail: 'admin@system.com',
+        userTo: '/profile',
+        items,
+    },
+}
+
+export const CustomTrigger: Story = {
+    render: (args) => ({
+        components: { ADropdownAvatar, UButton },
+        setup() {
+            return { args }
+        },
+        template: `
+        <ADropdownAvatar v-bind="args">
+            <UButton label="Custom Trigger" color="primary" trailing-icon="i-heroicons-chevron-down" />
+        </ADropdownAvatar>
+    `,
+    }),
+    args: {
+        userName: 'Custom User',
+        items,
+    },
+}
+
+export const CustomUserSlot: Story = {
+    render: (args) => ({
+        components: { ADropdownAvatar, UAvatar },
+        setup() {
+            return { args }
+        },
+        template: `
+        <ADropdownAvatar v-bind="args">
+            <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" size="sm" />
+            <template #user="{ item }">
+            <div class="flex items-center gap-2 p-1">
+                <UAvatar :src="'https://ui.nuxt.com/avatars/' + item.userName + '.png'" size="xs" />
+                <div class="text-start">
+                <p class="text-sm font-bold text-primary-600">Admin: {{ item.userName }}</p>
+                <p class="text-xs text-gray-500">{{ item.userEmail }}</p>
+                </div>
+            </div>
+            </template>
+        </ADropdownAvatar>
+    `,
+    }),
+    args: {
+        userName: 'benjamincanac',
+        userEmail: 'ben@nuxt.com',
+        items,
+    },
+}

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

@@ -1,44 +1,86 @@
-<script lang="jsx" setup>
-const props = defineProps({
-    items: {
-        type: Array,
-        default: () => [],
-        required: true,
-    },
-    userName: {
-        type: String,
-        default: '',
-        required: true,
-    },
-    userEmail: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    userTo: {
-        type: String,
-        default: '',
-        required: false,
-    },
+<script lang="ts" setup>
+import type { UDropdownMenu } from '#components'
+
+export interface DropdownItem {
+    userName?: string
+    userEmail?: string
+    slot?: string
+    onSelect?: () => void
+    // label?: string
+    // icon?: string
+    // to?: string
+    [key: string]: any
+}
+
+interface Props {
+    /**
+     * Array of dropdown items to display, grouped in arrays
+     */
+    items: DropdownItem[][]
+    /**
+     * Display name of the user
+     */
+    userName: string
+    /**
+     * Email address of the user
+     */
+    userEmail?: string
+    /**
+     * Navigation path for user profile
+     */
+    userTo?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    userEmail: '',
+    userTo: '',
 })
 
+defineSlots<{
+    /**
+     * Default slot content for dropdown trigger (REQUIRED)
+     */
+    default(): any
+    /**
+     * User information slot
+     */
+    user(props: { item: DropdownItem }): any
+    /**
+     * Additional dynamic slots
+     */
+    [name: string]: any
+}>()
+
+// Validate that the default slot is provided
+const slots = useSlots()
+if (!slots.default) {
+    console.warn('ADropdownAvatar: The default slot is required')
+}
+
 const uiStyles = computed(() => {
-    if (props.userTo) return {}
+    const ui = {
+        content: 'min-w-40',
+    }
+    if (props.userTo) return ui
     return {
+        ...ui,
         item: 'data-highlighted:first:before:bg-transparent data-[state=open]:first:before:bg-transparent',
     }
 })
 
-const itemsComputed = computed(() => [
-    {
-        userName: props.userName,
-        userEmail: props.userEmail,
-        slot: 'user',
-        onSelect: () => {
-            const path = props.userTo
-            if (path) navigateTo(path)
+const itemsComputed = computed((): DropdownItem[][] => [
+    [
+        {
+            userName: props.userName,
+            userEmail: props.userEmail,
+            slot: 'user',
+            onSelect: () => {
+                const path = props.userTo
+                if (path) navigateTo(path)
+            },
         },
-    },
+    ],
     ...props.items,
 ])
 </script>
@@ -47,7 +89,7 @@ const itemsComputed = computed(() => [
     <UDropdownMenu :items="itemsComputed" :ui="uiStyles">
         <slot />
 
-        <template #user="{ item }">
+        <template #user="{ item }: { item: any }">
             <div class="text-start">
                 <span class="text-highlighted block text-lg font-bold">
                     {{ item.userName }}

package/app/components/a/pill/a-pill.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import APill, { type BadgeSize, type BadgeVariant } from './a-pill.vue'
+import { semanticColors } from '@/utils/util-get-colors-from-css'
+
+const meta = {
+    title: 'Atoms/Pill/APill',
+    component: APill,
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    "A small, rounded label used to display brief information. Typically used to show a user's name next to their avatar.",
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['solid', 'outline', 'soft', 'subtle'] satisfies BadgeVariant[],
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'] satisfies BadgeSize[],
+        },
+        color: {
+            control: 'select',
+            options: Object.keys(semanticColors),
+        },
+        'onOn-close': {
+            table: { disable: true },
+        },
+    },
+    args: {
+        'onOn-close': fn(),
+    },
+} satisfies Meta<typeof APill>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        label: 'Design System',
+        src: 'https://avatars.githubusercontent.com/u/739984?v=4',
+        color: 'neutral',
+        variant: 'outline',
+        size: 'sm',
+        hasAvatar: true,
+        isClosable: true,
+    },
+}
+
+export const SolidPrimary: Story = {
+    args: {
+        ...Default.args,
+        label: 'Primary Solid',
+        color: 'primary',
+        variant: 'solid',
+        size: 'md',
+    },
+}
+
+export const SoftSuccess: Story = {
+    args: {
+        ...Default.args,
+        label: 'Success Soft',
+        color: 'success',
+        variant: 'soft',
+        size: 'md',
+    },
+}
+
+export const NoAvatar: Story = {
+    args: {
+        ...Default.args,
+        label: 'Just Text',
+        hasAvatar: false,
+        color: 'neutral',
+        variant: 'subtle',
+    },
+}
+
+export const NotClosable: Story = {
+    args: {
+        ...Default.args,
+        label: 'Permanent',
+        isClosable: false,
+    },
+}

package/app/components/a/pill/a-pill.vue

@@ -1,45 +1,66 @@
-<script lang="jsx" setup>
-const props = defineProps({
-    src: {
-        type: String,
-        default: '/media/img/user-unknown.png',
-        required: false,
-    },
-    label: {
-        type: String,
-        default: '',
-        required: false,
-    },
-    color: {
-        type: String,
-        default: 'neutral',
-        required: false,
-    },
-    variant: {
-        type: String,
-        default: 'outline',
-        required: false,
-        validator: (value) => ['solid', 'outline', 'soft', 'subtle'].includes(value),
-    },
-    size: {
-        type: String,
-        default: 'sm',
-        required: false,
-        validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
-    },
-    hasAvatar: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
-    isClosable: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
+<script lang="ts" setup>
+import type { UBadge, UButton } from '#components'
+import { computed } from 'vue'
+
+// Derived types from Nuxt UI components
+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 Props {
+    /**
+     * Avatar image source URL
+     */
+    src?: string
+    /**
+     * Text label to display
+     */
+    label?: string
+    /**
+     * Color theme of the badge
+     */
+    color?: BadgeColor
+    /**
+     * Visual style variant
+     */
+    variant?: BadgeVariant
+    /**
+     * Size of the badge
+     */
+    size?: BadgeSize
+    /**
+     * Whether to show avatar
+     */
+    hasAvatar?: boolean
+    /**
+     * Whether to show close button
+     */
+    isClosable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    src: '/media/img/user-unknown.png',
+    label: '',
+    color: 'neutral',
+    variant: 'outline',
+    size: 'sm',
+    hasAvatar: true,
+    isClosable: true,
 })
 
-const emit = defineEmits('on-close')
+const emit = defineEmits<{
+    /**
+     * Emitted when the close button is clicked
+     */
+    (e: 'on-close'): void
+}>()
+
+defineSlots<{
+    /**
+     * The default slot in which all the content
+     */
+    default(): any
+}>()
 
 const trailingIconSize = computed(() => {
     const sizeMap = {
@@ -72,7 +93,7 @@ const textSize = computed(() => {
                           src,
                           size,
                       }
-                    : null
+                    : undefined
             "
             :label="label"
             :trailing-icon="isClosable ? 'heroicons:x-mark' : ''"
@@ -82,6 +103,7 @@ const textSize = computed(() => {
             }"
             :color="color"
             :variant="variant"
+            :class="{ 'pl-2': !hasAvatar, 'pr-3': !isClosable }"
             class="rounded-full font-normal"
         >
             <template #trailing>
@@ -90,7 +112,6 @@ const textSize = computed(() => {
                     :size="size"
                     :ui="{
                         leadingIcon: trailingIconSize,
-                        icon: trailingIconSize,
                     }"
                     :color="color"
                     :variant="variant === 'solid' ? 'solid' : 'icon'"