@volverjs/ui-vue 0.0.13-beta.9 → 0.0.14

package/src/stories/argTypes.ts

@@ -0,0 +1,563 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import normal from '../assets/icons/normal.json'
+import { Placement, Position, Side } from '../constants'
+
+export const ValidArgTypes: ArgTypes = {
+    valid: {
+        description: 'Valid state',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    validLabel: {
+        description: 'Valid hint label',
+        control: {
+            type: 'text',
+        },
+    },
+}
+
+export const InvalidArgTypes: ArgTypes = {
+    invalid: {
+        description: 'Invalid state',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    invalidLabel: {
+        description: 'Invalid hint label',
+        control: {
+            type: 'text',
+        },
+    },
+}
+
+export const LoadingArgTypes: ArgTypes = {
+    loading: {
+        description: 'Loading state',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    loadingLabel: {
+        description: 'Loading label',
+        control: {
+            type: 'text',
+        },
+    },
+}
+
+export const DisabledArgTypes: ArgTypes = {
+    disabled: {
+        control: 'boolean',
+        description: 'Whether the component is disabled',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+}
+
+export const ReadonlyArgTypes: ArgTypes = {
+    readonly: {
+        description: 'The value is not editable',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+}
+
+export const ModifiersArgTypes: ArgTypes = {
+    modifiers: {
+        description: 'Component BEM modifiers',
+        options: [],
+        control: {
+            type: 'check',
+        },
+    },
+}
+
+export const IconArgTypes: ArgTypes = {
+    icon: {
+        description: 'VvIcon name or props',
+        options: ['', ...Object.keys(normal.icons)],
+        control: {
+            type: 'select',
+        },
+    },
+    iconPosition: {
+        description: 'VvIcon position',
+        options: ['', ...Object.values(Position)],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: { summary: Position.before },
+        },
+    },
+}
+
+export const OptionsArgTypes: ArgTypes = {
+    options: {
+        description: 'List of options',
+        control: {
+            // @ts-expect-error to be fixed
+            type: 'array',
+        },
+    },
+    labelKey: {
+        description: 'Key of label in option object',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'label',
+            },
+        },
+    },
+    valueKey: {
+        description: 'Key of value in option object',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'value',
+            },
+        },
+    },
+    disabledKey: {
+        description: 'Key of disabled in option object',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'disabled',
+            },
+        },
+    },
+}
+
+export const CountArgTypes: ArgTypes = {
+    count: {
+        description: 'Show character limit',
+        options: [true, false, 'limit', 'countdown'],
+        control: {
+            type: 'radio',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean | string',
+            },
+        },
+    },
+}
+
+export const DebounceArgTypes: ArgTypes = {
+    debounce: {
+        description: 'Debounce milliseconds',
+        control: {
+            type: 'number',
+        },
+    },
+}
+
+export const DefaultSlotArgTypes: ArgTypes = {
+    default: {
+        description: 'The default slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+}
+
+export const HintArgTypes: ArgTypes = {
+    hintLabel: {
+        description: 'Hint label',
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'string',
+            },
+        },
+    },
+    hint: {
+        description: 'The hint slot',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+}
+
+export const TabindexArgTypes: ArgTypes = {
+    tabindex: {
+        description: 'Global attribute tabindex',
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: {
+                summary: '0',
+            },
+        },
+    },
+}
+
+export const IdNameArgTypes: ArgTypes = {
+    id: {
+        description: 'Global attribute id.',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'uid',
+            },
+        },
+    },
+    name: {
+        description:
+			'Name of the form control. Submitted with the form as part of a name/value pair.',
+        control: {
+            type: 'text',
+        },
+    },
+}
+
+export const DropdownArgTypes: ArgTypes = {
+    placement: {
+        description: 'Dropdown placement',
+        options: [...Object.values(Placement), ...Object.values(Side)],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: { summary: 'bottom' },
+        },
+    },
+    strategy: {
+        description: 'Dropdown strategy',
+        options: ['fixed', 'absolute'],
+        control: {
+            type: 'select',
+        },
+        table: {
+            defaultValue: { summary: 'absolute' },
+        },
+    },
+    transitionName: {
+        description: 'Dropdown show / hide transition name',
+        control: {
+            type: 'text',
+        },
+    },
+    offset: {
+        description: 'Offset of the dropdown from the trigger',
+        control: {
+            type: 'number',
+        },
+        table: {
+            defaultValue: {
+                summary: '0',
+            },
+            type: {
+                summary: 'number | string | object',
+            },
+        },
+    },
+    shift: {
+        description:
+			'Move dropdown to the side if there is no space in the default position',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'true',
+            },
+            type: {
+                summary: 'boolean | object',
+            },
+        },
+    },
+    flip: {
+        description:
+			'Flip dropdown position if there is no space in the default position',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'true',
+            },
+            type: {
+                summary: 'boolean | object',
+            },
+        },
+    },
+    size: {
+        description:
+			'Change the size of the dropdown to not overflow the viewport',
+        control: {
+            type: 'object',
+        },
+        table: {
+            defaultValue: {
+                summary: '{ "padding": 10 }',
+            },
+            type: {
+                summary: 'boolean | object',
+            },
+        },
+    },
+    autoPlacement: {
+        description: 'Automatically change the position of the dropdown',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean | object',
+            },
+        },
+    },
+    arrow: {
+        description: 'Add arrow to the dropdown',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    keepOpen: {
+        description: 'Keep open dropdown on click outside',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+    triggerWidth: {
+        description: 'Set dropdown width to the same as the trigger',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+            type: {
+                summary: 'boolean',
+            },
+        },
+    },
+}
+
+export const UnselectableArgTypes: ArgTypes = {
+    unselectable: {
+        description: 'If true the field will be unselectable',
+        table: {
+            defaultValue: {
+                summary: 'true',
+            },
+        },
+    },
+}
+
+export const FloatingLabelArgTypes: ArgTypes = {
+    floating: {
+        description: 'If true the label will be floating',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+}
+
+export const AutofocusArgTypes: ArgTypes = {
+    autofocus: {
+        description: 'Global attribute autofocus.',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+}
+
+export const AutocompleteArgTypes: ArgTypes = {
+    autocomplete: {
+        description: 'Hint for for autofill feature.',
+        control: {
+            type: 'text',
+        },
+        table: {
+            defaultValue: {
+                summary: 'off',
+            },
+        },
+    },
+}
+
+export const InputTextareaArgTypes = {
+    ...IdNameArgTypes,
+    ...AutofocusArgTypes,
+    ...AutocompleteArgTypes,
+    ...TabindexArgTypes,
+    ...DisabledArgTypes,
+    ...ReadonlyArgTypes,
+    ...ValidArgTypes,
+    ...InvalidArgTypes,
+    ...HintArgTypes,
+    ...LoadingArgTypes,
+    ...ModifiersArgTypes,
+    ...CountArgTypes,
+    ...DebounceArgTypes,
+    ...IconArgTypes,
+    ...FloatingLabelArgTypes,
+    minlength: {
+        description:
+			'Minimum length (number of characters) of value. Available for input types: text, search, url, tel, email, password.',
+        control: {
+            type: 'number',
+        },
+    },
+    maxlength: {
+        description:
+			'Maximum length (number of characters) of value. Available for input types: text, search, url, tel, email, password, number.',
+        control: {
+            type: 'number',
+        },
+    },
+    placeholder: {
+        description:
+			'Text that appears in the form control when it has no value set. Available for input types: text, search, url, tel, email, password, number.',
+        control: {
+            type: 'text',
+        },
+    },
+    required: {
+        description:
+			'A value is required or must be check for the form to be submittable. Available for all input types except color.',
+        table: {
+            defaultValue: {
+                summary: false,
+            },
+        },
+    },
+    label: {
+        description: 'Input label',
+        control: {
+            type: 'text',
+        },
+    },
+}
+
+export const CheckboxRadioArgTypes: ArgTypes = {
+    ...IdNameArgTypes,
+    ...TabindexArgTypes,
+    ...ValidArgTypes,
+    ...InvalidArgTypes,
+    ...HintArgTypes,
+    ...DisabledArgTypes,
+    ...ReadonlyArgTypes,
+    label: {
+        description: 'Input label',
+        control: {
+            type: 'text',
+        },
+    },
+    value: {
+        description: 'Input value',
+        control: {
+            type: 'text',
+        },
+    },
+}
+
+export const CheckboxRadioGroupArgTypes: ArgTypes = {
+    ...ValidArgTypes,
+    ...InvalidArgTypes,
+    ...OptionsArgTypes,
+    ...HintArgTypes,
+    ...DisabledArgTypes,
+    ...ReadonlyArgTypes,
+    label: {
+        description: 'Input label',
+        control: {
+            type: 'text',
+        },
+    },
+    name: {
+        description:
+			'Name of the form control. Submitted with the form as part of a name/value pair.',
+        control: {
+            type: 'text',
+        },
+    },
+    vertical: {
+        description:
+			'If true the options will be displayed vertically instead of horizontally',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    default: {
+        description: 'Default slot for the options',
+        control: {
+            type: 'text',
+        },
+        table: {
+            category: 'Slots',
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+}

package/src/test/expect.ts

@@ -0,0 +1,83 @@
+import { axe } from 'jest-axe'
+/* eslint-disable unused-imports/no-unused-vars */
+/* eslint-disable ts/no-namespace */
+import { expect, userEvent } from 'storybook/test'
+import { sleep } from '@/test/sleep'
+
+declare global {
+    namespace jest {
+        interface Matchers<R> {
+            toBeChecked: (expected?: HTMLElement) => CustomMatcherResult
+        }
+        interface Matchers<R> {
+            toBeClicked: (expected?: HTMLElement) => CustomMatcherResult
+        }
+        interface Matchers<R> {
+            toHaveClass: (
+                className: string | string[],
+                expected?: HTMLElement,
+            ) => CustomMatcherResult
+        }
+        interface Matchers<R> {
+            toHaveImgChild: (
+                imgTag: string,
+                expected?: HTMLElement,
+            ) => CustomMatcherResult
+        }
+    }
+}
+
+expect.extend({
+    async toBeChecked(checkbox: HTMLInputElement) {
+        await checkbox.click()
+        await sleep()
+        if (checkbox.checked) {
+            return {
+                pass: true,
+                message: () => `Checkbox is checked`,
+            }
+        }
+        return {
+            pass: false,
+            message: () => `Checkbox is not checked`,
+        }
+    },
+    async toBeClicked(element: HTMLElement) {
+        const result = {
+            pass: false,
+            message: () => 'Click event don\'t works',
+        }
+        element.addEventListener('click', () => {
+            result.pass = true
+            result.message = () => `Click event works`
+        })
+        await userEvent.click(element)
+        return result
+    },
+    async toHaveNoViolations(element: HTMLElement) {
+        const results = await axe(element)
+        return {
+            pass: results.violations.length === 0,
+            message: () => 'Element has violations',
+        }
+    },
+    async toHaveClass(element: HTMLElement, className: string | string[]) {
+        const classes = !Array.isArray(className) ? [className] : className
+        return {
+            pass: classes.every(cssClass =>
+                element.classList.contains(cssClass),
+            ),
+            message: () =>
+                `One of these classes doesn't exist: ${classes.join(', ')}`,
+        }
+    },
+    async toHaveImgChild(element: HTMLElement, imgTag: string) {
+        const img = element.getElementsByTagName(imgTag)
+        return {
+            pass: img.length === 1,
+            message: () => `${imgTag} not exist!`,
+        }
+    },
+})
+
+export { expect }

package/src/test/options.ts

@@ -0,0 +1,16 @@
+export function getOptionValue(args: any, index: number) {
+    if (args.options && args.options.length > index) {
+        let value = args.options[index]
+        if (args.valueKey) {
+            if (typeof args.valueKey === 'function') {
+                value = args.valueKey(value)
+            } else if (typeof value === 'object') {
+                value = value[args.valueKey]
+            }
+        } else if (typeof value === 'object') {
+            value = value.value
+        }
+        return value
+    }
+    return undefined
+}

package/src/test/sleep.ts

@@ -0,0 +1,3 @@
+export async function sleep(ms = 300) {
+    return await new Promise(resolve => setTimeout(resolve, ms))
+}

package/src/test/types.d.ts

@@ -0,0 +1,17 @@
+export interface PlayAttributes {
+    canvasElement: HTMLElement
+
+    args: Record<string, any>
+    name?: string
+}
+
+interface ComponentConfig {
+    isClickDisabled?: boolean
+    className?: string | string[] | null
+    slotContent?: string | null
+    customText?: string | null
+    customElement?: HTMLElement | HTMLOrSVGElement | null
+    isVertical?: boolean
+    child?: number
+    propName?: string
+}

package/src/types/alert.ts

@@ -0,0 +1,24 @@
+import type { VvIconProps } from '@/components/VvIcon'
+import type { AlertRole } from '@/constants'
+
+export type AlertModifier
+    = | 'success'
+        | 'info'
+        | 'warning'
+        | 'danger'
+        | 'brand'
+        | 'accent'
+        | string
+
+export type Alert = {
+    id: string | number
+    title?: string
+    icon?: string | VvIconProps
+    content?: string
+    footer?: string
+    modifiers?: AlertModifier | AlertModifier[]
+    dismissable?: boolean
+    autoClose?: number
+    closeLabel?: string
+    role?: AlertRole
+}