@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13

package/src/stories/AlertGroup/AlertGroupPosition.stories.ts

@@ -0,0 +1,104 @@
+import type { Meta } from '@storybook/vue3-vite'
+import type { Story } from './AlertGroup.stories'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { Default } from './AlertGroup.stories'
+
+const meta: Meta<typeof VvAlertGroup> = {
+    title: 'Components/AlertGroup/Position',
+    component: VvAlertGroup,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+export const TopStart: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'top',
+        inline: 'start',
+    },
+}
+
+export const TopMiddle: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'top',
+        inline: 'middle',
+    },
+}
+
+export const TopEnd: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'top',
+        inline: 'end',
+    },
+}
+
+export const CenterStart: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'center',
+        inline: 'start',
+    },
+}
+
+export const CenterMiddle: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'center',
+        inline: 'middle',
+    },
+}
+
+export const CenterEnd: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'center',
+        inline: 'end',
+    },
+}
+
+export const BottomStart: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'bottom',
+        inline: 'start',
+    },
+}
+
+export const BottomMiddle: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'bottom',
+        inline: 'middle',
+    },
+}
+
+export const BottomEnd: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        position: 'absolute',
+        block: 'bottom',
+        inline: 'end',
+    },
+}

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta } from '@storybook/vue3-vite'
+import type { Story } from './AlertGroup.stories'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
+import { Default as DefaultStory } from './AlertGroup.stories'
+
+const meta: Meta<typeof VvAlertGroup> = {
+    title: 'Components/AlertGroup/Slots',
+    component: VvAlertGroup,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+export const Default: Story = {
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        modifiers: ['notification'],
+        default: /* html */ `
+			<div class="vv-alert vv-alert--success" role="alert" aria-labelledby="Els38gSOH_Op3SFpzekW--title" style="--alert-duration:0ms;">
+				<div class="vv-alert__header">
+					<strong id="Els38gSOH_Op3SFpzekW--title" class="vv-alert__title">Success!</strong>
+				</div>
+				<div class="vv-alert__content">This is an success message.</div>
+			</div>
+			<div class="vv-alert vv-alert--accent mt-xs" role="alert" aria-labelledby="nkas44ZTfhbt5OEJYL06N-title" style="--alert-duration:0ms;">
+				<div class="vv-alert__header">
+					<strong id="nkas44ZTfhbt5OEJYL06N-title" class="vv-alert__title">Accent!</strong>
+				</div>
+				<div class="vv-alert__content">This is an accent message.</div>
+			</div>
+		`,
+    },
+}
+
+export const Before: Story = {
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        modifiers: ['notification'],
+        before: /* html */ `
+			<div class="flex justify-center">
+				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
+					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
+					<span class="vv-button__label">Clear All</span>
+				</button>
+			</div>
+		`,
+    },
+}
+
+export const After: Story = {
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        modifiers: ['notification'],
+        after: /* html */ `
+			<div class="flex justify-center">
+				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
+					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
+					<span class="vv-button__label">Clear All</span>
+				</button>
+			</div>
+		`,
+    },
+}

package/src/stories/AlertGroup/AlertGroupWithComposable.stories.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { useAlert } from '@/composables/alert/useAlert'
+
+const meta: Meta = {
+    title: 'Composables/useAlert',
+    tags: ['autodocs'],
+}
+
+export default meta
+
+export const Default: StoryObj = {
+    parameters: {
+        docs: {
+            canvas: {
+                sourceState: 'shown',
+            },
+            source: {
+                code: `<script setup lang="ts">
+    import { useAlert } from '@volverjs/ui-vue/composables'
+
+    const { addAlert, removeAlert, alerts } = useAlert()
+
+    function showSuccess() {
+        addAlert({
+            title: 'Success!',
+            modifiers: 'success',
+        })
+    }
+
+    function showDanger() {
+        addAlert({
+            title: 'Danger!',
+            modifiers: 'danger',
+        })
+    }
+
+    function showWarning() {
+        addAlert({
+            title: 'Warning!',
+            modifiers: 'warning',
+        })
+    }
+
+    function showInfo() {
+        addAlert({
+            title: 'Info!',
+            modifiers: 'info',
+        })
+    }
+</script>
+
+<template>
+  <div class="flex gap-md">
+    <vv-button label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
+    <vv-button label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
+    <vv-button label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
+    <vv-button label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
+  </div>
+  <vv-alert-group :items="alerts" :on-close="removeAlert" />
+</template>`,
+            },
+        },
+    },
+    render: args => ({
+        components: { VvAlertGroup, VvButton },
+        setup() {
+            const { addAlert, removeAlert, alerts } = useAlert()
+
+            function showSuccess() {
+                addAlert({
+                    title: 'Success!',
+                    modifiers: 'success',
+                })
+            }
+            function showDanger() {
+                addAlert({
+                    title: 'Danger!',
+                    modifiers: 'danger',
+                })
+            }
+            function showWarning() {
+                addAlert({
+                    title: 'Warning!',
+                    modifiers: 'warning',
+                })
+            }
+            function showInfo() {
+                addAlert({
+                    title: 'Info!',
+                    modifiers: 'info',
+                })
+            }
+
+            return {
+                args,
+                alerts,
+                removeAlert,
+                showSuccess,
+                showDanger,
+                showWarning,
+                showInfo,
+            }
+        },
+        template: /* html */ `
+			<div class="buttons-container flex gap-md" >
+				<vv-button id="success" label="Show success" modifiers="secondary" @click="showSuccess" class="mb-lg" />
+				<vv-button id="danger" label="Show danger" modifiers="secondary" @click="showDanger" class="mb-lg" />
+				<vv-button id="warning" label="Show warning" modifiers="secondary" @click="showWarning" class="mb-lg" />
+				<vv-button id="info" label="Show info" modifiers="secondary" @click="showInfo" class="mb-lg" />
+			</div>
+			<vv-alert-group name="test" v-bind="args" :items="alerts" :onClose="removeAlert" data-testId="element" />
+        `,
+    }),
+}

package/src/stories/Avatar/Avatar.settings.ts

@@ -0,0 +1,36 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import { VvAvatarProps } from '@/components/VvAvatar'
+import { DefaultSlotArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    ...propsToObject(VvAvatarProps),
+}
+
+export const argTypes: ArgTypes = {
+    ...DefaultSlotArgTypes,
+    default: {
+        description: 'Content slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    modifiers: {
+        description: 'Component BEM modifiers',
+        control: {
+            type: 'check',
+        },
+        options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
+    },
+    imgSrc: {
+        control: {
+            type: 'text',
+        },
+        description: 'The image url',
+    },
+}

package/src/stories/Avatar/Avatar.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultTest } from '../Avatar/Avatar.test'
+import { argTypes, defaultArgs } from './Avatar.settings'
+
+const meta: Meta<typeof VvAvatar> = {
+    title: 'Components/Avatar',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+        default: 'MR',
+    },
+    render: args => ({
+        components: { VvAvatar },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				<template v-if="args.default"> {{ args.default }} </template>
+			</vv-avatar>
+    `,
+    }),
+    play: defaultTest,
+}
+
+export const Image: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        imgSrc: 'https://i.pravatar.cc/300',
+    },
+}

package/src/stories/Avatar/Avatar.test.ts

@@ -0,0 +1,32 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+
+    // slot default
+    if (!args.default && !args.imgSrc) {
+        throw new Error('Default slot or imgSrc is required!')
+    }
+
+    const modifiers
+        = !args.modifiers || Array.isArray(args.modifiers)
+            ? args.modifiers
+            : args.modifiers.split(' ')
+
+    // modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            expect(element).toHaveClass(`vv-avatar--${modifier}`)
+        }
+    }
+
+    // check img tag exist
+    if (args.imgSrc && !args.default) {
+        expect(element).toHaveImgChild('img')
+    }
+
+    // check accessibility
+    await expect(element).toHaveNoViolations()
+}

package/src/stories/Avatar/AvatarBadge.stories.ts

@@ -0,0 +1,36 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { argTypes, defaultArgs } from './Avatar.settings'
+
+const meta: Meta<typeof VvAvatar> = {
+    title: 'Components/Avatar/Badge',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+export const Badge: Story = {
+    args: {
+        modifiers: 'lg',
+    },
+    render: args => ({
+        components: { VvAvatar, VvBadge },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				MR
+                <sup>
+                    <vv-badge modifiers="danger rounded">99+</vv-badge>
+                </sup>
+			</vv-avatar>
+    `,
+    }),
+}

package/src/stories/Avatar/AvatarModifiers.stories.ts

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultTest } from '../Avatar/Avatar.test'
+import { argTypes, defaultArgs } from './Avatar.settings'
+
+const meta: Meta<typeof VvAvatar> = {
+    title: 'Components/Avatar/Modifiers',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+const VvAvatarTemplate: Story = {
+    args: {
+        default: 'MR',
+        modifiers: '',
+    },
+    render: args => ({
+        components: { VvAvatar },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				{{ args.default }}
+			</vv-avatar>`,
+    }),
+    play: defaultTest,
+}
+
+export const Small: Story = {
+    ...VvAvatarTemplate,
+}
+
+export const Medium: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'md',
+    },
+}
+
+export const Large: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'lg',
+    },
+}
+
+export const Rounded: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'rounded md',
+    },
+}
+
+export const Square: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'square md',
+    },
+}
+
+export const Bordered: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'bordered md',
+    },
+}
+
+export const Ring: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'ring md',
+    },
+}
+
+export const CustomColor: Story = {
+    ...VvAvatarTemplate,
+    args: {
+        ...VvAvatarTemplate.args,
+        modifiers: 'accent md',
+    },
+    argTypes: {
+        ...argTypes,
+        modifiers: {
+            ...argTypes.modifiers,
+            options: [...(argTypes.modifiers.options ?? []), 'accent'],
+        },
+    },
+}

package/src/stories/Avatar/AvatarSlots.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultTest } from '../Avatar/Avatar.test'
+import { argTypes, defaultArgs } from './Avatar.settings'
+
+const meta: Meta<typeof VvAvatar> = {
+    title: 'Components/Avatar/Slots',
+    component: VvAvatar,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+        default: 'MR',
+    },
+    render: args => ({
+        components: { VvAvatar },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				<template v-if="args.default"> {{ args.default }} </template>
+			</vv-avatar>
+    `,
+    }),
+    play: defaultTest,
+}

package/src/stories/AvatarGroup/AvatarGroup.settings.ts

@@ -0,0 +1,61 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    ...propsToObject(VvAvatarGroupProps),
+    items: [
+        {
+            text: 'MR',
+            imgSrc: 'https://i.pravatar.cc/300',
+            modifiers: 'rounded',
+        },
+        {
+            imgSrc: 'https://i.pravatar.cc/300',
+            modifiers: 'rounded',
+        },
+        {
+            imgSrc: 'https://i.pravatar.cc/300',
+            modifiers: 'rounded',
+        },
+        {
+            imgSrc: 'https://i.pravatar.cc/300',
+            modifiers: 'rounded',
+        },
+    ],
+    avatarModifiers: 'rounded',
+}
+
+export const argTypes: ArgTypes = {
+    ...DefaultSlotArgTypes,
+    default: {
+        description: 'Default slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: ['tight', 'relaxed'],
+    },
+    avatarModifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
+    },
+    toShow: {
+        control: {
+            type: 'number',
+        },
+    },
+    totalItems: {
+        control: {
+            type: 'number',
+        },
+    },
+}

package/src/stories/AvatarGroup/AvatarGroup.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { argTypes, defaultArgs } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
+
+const meta: Meta<typeof VvAvatarGroup> = {
+    title: 'Components/AvatarGroup',
+    component: VvAvatarGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatarGroup>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvAvatarGroup },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+		<div class="m-md">
+		<vv-avatar-group v-bind="args" data-testId="element">
+			<template v-if="args.default">{{ args.default }}</template>
+		</vv-avatar-group>
+	</div>`,
+    }),
+    play: defaultTest,
+}