@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/resolvers/unplugin.ts

@@ -0,0 +1,112 @@
+import type {
+	ComponentResolver,
+	SideEffectsInfo,
+} from 'unplugin-vue-components/types'
+
+function kebabCase(str: string, options?: { condense: boolean }) {
+	if (typeof str !== 'string') throw new TypeError('expected a string')
+	return str
+		.trim()
+		.replace(/([a-z])([A-Z])/g, '$1-$2')
+		.replace(/\W/g, (m) => (/[À-ž]/.test(m) ? m : '-'))
+		.replace(/^-+|-+$/g, '')
+		.replace(/-{2,}/g, (m) => (options?.condense ? '-' : m))
+		.toLowerCase()
+}
+
+export interface VolverResolverOptions {
+	/**
+	 * import style along with components
+	 *
+	 * @default 'css'
+	 */
+	importStyle?: boolean | 'css' | 'scss'
+	/**
+	 * import custom style path
+	 *
+	 * @default ''
+	 */
+	customStylePath?: string
+	/**
+	 * prefix for components (e.g. 'vv' to resolve Button from VvButton)
+	 *
+	 * @default 'vv'
+	 */
+	prefix?: string
+}
+
+const STYLE_EXCLUDE = ['vv-icon']
+const VOLVER_PREFIX = 'vv'
+
+const getStyleNames = function (kebabName: string) {
+	if (STYLE_EXCLUDE.includes(kebabName)) {
+		return undefined
+	}
+	if (kebabName === 'vv-combobox') {
+		return ['vv-select', 'vv-dropdown']
+	}
+	if (kebabName === 'vv-accordion-group') {
+		return ['vv-accordion-group', 'vv-accordion']
+	}
+	if (kebabName === 'vv-checkbox-group') {
+		return ['vv-checkbox-group', 'vv-checkbox']
+	}
+	if (kebabName === 'vv-radio-group') {
+		return ['vv-radio-group', 'vv-radio']
+	}
+	return [kebabName]
+}
+
+/**
+ * Resolver for @volverjs/ui-vue
+ *
+ * @link https://github.com/volverjs/ui-vue
+ */
+export function VolverResolver({
+	prefix = VOLVER_PREFIX,
+	importStyle,
+	customStylePath,
+}: VolverResolverOptions = {}): ComponentResolver {
+	return {
+		type: 'component',
+		resolve: (name: string) => {
+			if (
+				!prefix ||
+				!name.toLowerCase().startsWith(prefix.toLowerCase())
+			) {
+				return
+			}
+
+			const sideEffects: SideEffectsInfo = []
+			const kebabName = kebabCase(name).replace(
+				`${prefix}-`,
+				`${VOLVER_PREFIX}-`,
+			)
+
+			if (importStyle) {
+				// import custom style
+				if (customStylePath) {
+					sideEffects.push(customStylePath)
+				}
+
+				// import component style
+				const styleNames = getStyleNames(kebabName)
+				if (styleNames) {
+					styleNames.forEach((name) => {
+						sideEffects.push(
+							`@volverjs/style/${
+								importStyle === 'scss' ? 'scss/' : ''
+							}components/${name}`,
+						)
+					})
+				}
+			}
+
+			// import component
+			return {
+				from: `@volverjs/ui-vue/${kebabName}`,
+				sideEffects,
+			}
+		},
+	}
+}

package/src/shims.d.ts

@@ -0,0 +1,13 @@
+// eslint-disable-next-line
+declare interface Window {
+	// extend the window
+}
+
+declare module '*.vue' {
+	import { type DefineComponent } from 'vue'
+	// eslint-disable-next-line
+	const component: DefineComponent<{}, {}, any>
+	export default component
+}
+
+type ValueOf<T> = T[keyof T]

package/src/stories/Accordion/Accordion.settings.ts

@@ -0,0 +1,46 @@
+import {
+	DefaultSlotArgTypes,
+	DisabledArgTypes,
+	ModifiersArgTypes,
+} from '@/stories/argTypes'
+
+export const defaultArgs = {
+	title: 'Lorem Ipsum',
+	content:
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+	modifiers: [],
+	disabled: false,
+}
+
+export const argTypes = {
+	summary: {
+		description: 'The title slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	details: {
+		description: 'The content slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['marker-right', 'bordered'],
+	},
+	...DisabledArgTypes,
+	...DefaultSlotArgTypes,
+}

package/src/stories/Accordion/Accordion.stories.mdx

@@ -1,37 +1,37 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-
-import { accordionTest } from './accordionTest.js'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultTest } from './Accordion.test'
+import { defaultArgs, argTypes } from './Accordion.settings'
 
 <Meta
 	title="Components/Accordion"
 	component={VvAccordion}
-	args={{
-		open: false,
-		title: 'Lorem Ipsum',
-		content:
-			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvAccordion },
+	data() {
+		return {
+			open: false,
+		}
+	},
 	setup() {
 		return { args }
 	},
-	template: `<div class="w-1/2">
-            <vv-accordion data-testId="accordion" v-bind="args" v-model:open="args.open" />
-        </div>
-        `
+	template: `<vv-accordion data-testId="element" v-bind="args" v-model="open">
+					<template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
+					<template #details v-if="args.details"><div v-html="args.details"></div></template>
+			   </vv-accordion>
+			   <div class="mt-24">
+					Open: <span data-testId="value">{{ open }}</span>
+			   </div>`,
 })
 
-# VvAccordion
-
-Stories of `VvAccordion`.
-Let's define a story for our playground `accordion`:
-
 <Canvas>
-	<Story name="vv-accordion" play={accordionTest} args={{}}>
-		{Template.bind({})}
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Accordion/Accordion.test.ts

@@ -0,0 +1,61 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLDetailsElement
+	const summary = element.getElementsByTagName('summary')[0]
+	const content = element.getElementsByClassName(
+		'vv-collapse__content',
+	)[0] as HTMLElement
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	expect(element).toHaveClass('vv-accordion')
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-accordion--${modifier}`)
+		}
+	}
+
+	// summary slot / title
+	if (args.summary) {
+		const div = document.createElement('div')
+		div.innerHTML = args.summary
+		expect(summary).toHaveClass('vv-collapse__summary')
+		expect(summary.innerText).toEqual(div.innerText)
+	} else if (args.title) {
+		expect(summary).toHaveClass('vv-collapse__summary')
+		expect(summary.innerText).toEqual(args.title)
+	}
+
+	// open
+	if (!args.disabled) {
+		expect(element.open).toBe(false)
+		expect(element).toBeClicked()
+		await sleep()
+		expect(element.open).toBeTruthy()
+		expect(summary.getAttribute('aria-expanded')).toBe('true')
+		expect(content.getAttribute('aria-hidden')).toBe('false')
+	}
+
+	// details slot / content
+	if (args.details) {
+		const div = document.createElement('div')
+		div.innerHTML = args.details
+		expect(content.innerText).toEqual(div.innerText)
+	} else if (args.content) {
+		expect(content.innerText).toEqual(args.content)
+	}
+
+	// accessibility
+	expect(element).toHaveNoViolations()
+}

package/src/stories/Accordion/AccordionSlots.stories.mdx

@@ -1,82 +1,58 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { slotsTest } from './accordionTest.js'
-
-<Meta title="Components/Accordion/Slots" />
-
-# VvAccordion slots
-
-Stories of `VvAccordion` with `slot`.
-
-## Slot header
-
-Let's define a story for our accordion with `header` slot.
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { Template } from './Accordion.stories.mdx'
+import { defaultTest } from './Accordion.test'
+import { defaultArgs, argTypes } from './Accordion.settings'
+
+<Meta
+	title="Components/Accordion/Slots"
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
 <Canvas>
-	<Story name="slot-header" play={slotsTest}>
-		{() => {
-			return {
-				components: { VvAccordion },
-				data() {
-					return {
-						title: 'Slot title',
-						content:
-							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-					}
+	<Story
+		name="Summary"
+		play={defaultTest}
+		args={{
+			summary: `<strong data-testId="slot" class="font-bold text-brand">Custom Summary</strong>`,
+		}}
+		argTypes={{
+			title: {
+				control: {
+					disable: true,
+				},
+			},
+			details: {
+				control: {
+					disable: true,
 				},
-				template: `<div class="w-1/2">
-						<vv-accordion :content="content"  bordered icon-right>
-							<template #header>
-								<p data-testId="slot" class="text-word-3">{{ title }}</p>
-							</template>
-						</vv-accordion>
-					</div>`
-			}
+			},
 		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source
-	language="jsx"
-	code={`<vv-accordion :content="content" bordered icon-right>
-	<template #header>
-		<p class="text-word-3">Slot title</p>
-	</template>
-</vv-accordion>`}
-/>
-
-## Slot details
-
-Let's define a story for our accordion with `details` slot.
-
 <Canvas>
-	<Story name="slot-details" play={slotsTest}>
-		{() => {
-			return {
-				components: { VvAccordion },
-				data() {
-					return {
-						details:
-							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
-					}
+	<Story
+		name="Details"
+		play={defaultTest}
+		args={{
+			details: `<strong data-testId="slot" class="font-bold text-brand">Custom Details</strong>`,
+		}}
+		argTypes={{
+			content: {
+				control: {
+					disable: true,
+				},
+			},
+			summary: {
+				control: {
+					disable: true,
 				},
-				template: `<div class="w-1/2">
-						<vv-accordion title="Slot details" bordered icon-right>
-							<template #details>
-								<p data-testId="slot" class='font-light text-word-3'>{{ details }}</p>
-							</template>
-						</vv-accordion>
-					</div>`
-			}
+			},
 		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-accordion title="Slot details" bordered icon-right>
-	<template #details>
-		<p class='font-light text-word-3'>{{ details }}</p>
-	</template>
-</vv-accordion>`}
-/>

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -0,0 +1,55 @@
+import {
+	DefaultSlotArgTypes,
+	DisabledArgTypes,
+	ModifiersArgTypes,
+} from '@/stories/argTypes'
+
+export const defaultArgs = {
+	collapse: false,
+	disabled: false,
+	items: [
+		{
+			name: 'a-1',
+			title: 'Details 1',
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+		},
+		{
+			name: 'a-2',
+			title: 'Details 2',
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+		},
+		{
+			name: 'a-3',
+			title: 'Details 3',
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+		},
+	],
+	modifiers: [],
+	itemModifiers: [],
+}
+
+export const argTypes = {
+	'`details::${item.name}`': {
+		table: {
+			disable: true,
+		},
+	},
+	'`header::${item.name}`': {
+		table: {
+			disable: true,
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['compact', 'bordered'],
+	},
+	itemModifiers: {
+		control: 'check',
+		options: ['marker-right', 'bordered'],
+	},
+	...DisabledArgTypes,
+	...DefaultSlotArgTypes,
+}

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -1,43 +1,40 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
-import { accordionGroupTest } from './accordionGroupTest.js'
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import { defaultTest } from './AccordionGroup.test'
+import { defaultArgs, argTypes } from './AccordionGroup.settings'
 
 <Meta
 	title="Components/AccordionGroup"
 	component={VvAccordionGroup}
-	args={{}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
-	components: { VvAccordionGroup, VvAccordion },
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvAccordionGroup },
+	setup() {
+		return { args }
+	},
 	data() {
 		return {
-			disabled: false,
-			accordion: '',
-			content:
-				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+			selected: null,
 		}
 	},
-	setup() {
-		return { args }
-	},
-	template: `<div class="w-1/2">
-			<vv-accordion-group data-testId="accordion-group" v-bind="args" :disabled="disabled" v-model:modelValue="accordion">
-				<vv-accordion data-testId="accordion-1" title="Details 1" :content="content" />
-				<vv-accordion title="Details 2" :content="content" />
-				<vv-accordion title="Details 3" :content="content" />
-			</vv-accordion-group>
-        </div>`
+	template: `<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
+				<div class="mt-24">
+					Selected: <span data-testId="value">{{ selected }}</span>
+				</div>`,
 })
 
-# VvAccordionGroup
-
-Stories of `VvAccordionGroup`.
-Let's define a story for our playground `accordion-group`:
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
-	<Story name="vv-accordion-group" play={accordionGroupTest} args={{}}>
-		{Template.bind({})}
+	<Story name="Collapse" play={defaultTest} args={{ collapse: true }}>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -0,0 +1,50 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+	const firstChild = element.children[0] as HTMLDetailsElement
+	const value = (await within(canvasElement).findByTestId(
+		'value',
+	)) as HTMLElement
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	expect(element).toHaveClass('vv-accordion-group')
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-accordion-group--${modifier}`)
+		}
+	}
+
+	// open
+	if (!args.disabled && args.items && args.items.length > 0) {
+		expect(firstChild.open).toBe(false)
+		expect(firstChild).toBeClicked()
+		await sleep()
+		expect(firstChild.open).toBeTruthy()
+		if (args.collapse) {
+			expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
+				JSON.stringify([args.items[0].name]),
+			)
+		} else {
+			expect(value.innerText).toBe(args.items[0].name)
+		}
+		const summary = firstChild.firstChild as HTMLElement
+		const content = firstChild.lastChild as HTMLElement
+		expect(summary.getAttribute('aria-expanded')).toBe('true')
+		expect(content.getAttribute('aria-hidden')).toBe('false')
+	}
+
+	// accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultTest } from './AccordionGroup.test'
+import { defaultArgs, argTypes } from './AccordionGroup.settings'
+
+<Meta
+	title="Components/AccordionGroup/Slots"
+	component={VvAccordionGroup}
+	args={defaultArgs}
+/>
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		argTypes={{
+			items: {
+				...argTypes.items,
+				control: {
+					disable: true,
+				},
+			},
+			default: {
+				...argTypes.items,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{(args) => {
+			return {
+				components: { VvAccordionGroup, VvAccordion },
+				setup() {
+					return { args }
+				},
+				data() {
+					return {
+						selected: '',
+						content:
+							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+					}
+				},
+				template: `<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
+							<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
+							<vv-accordion name="a-2" title="Details 2" :content="content" />
+							<vv-accordion name="a-3" title="Details 3" :content="content" />
+						</vv-accordion-group>
+						<div class="mt-24"  >
+							Selected: <span data-testId="value">{{ selected }}</span>
+						</div>`,
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Badge/Badge.settings.ts

@@ -0,0 +1,26 @@
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	modifiers: [],
+}
+
+export const argTypes = {
+	value: {
+		control: { type: 'text' },
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: [
+			'danger',
+			'success',
+			'warning',
+			'info',
+			'accent',
+			'rounded',
+			'outline',
+			'ghost',
+			'sm',
+		],
+	},
+	...DefaultSlotArgTypes,
+}