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

package/src/stories/Dropdown/Dropdown.test.ts

@@ -0,0 +1,43 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+import { getOptionValue } from '@/test/options'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+	const value = (await within(canvasElement).findByTestId(
+		'value',
+	)) as HTMLElement
+	const label = element.getElementsByTagName('label')[0]
+	const input = label.getElementsByTagName('input')[0]
+
+	// checked value
+	if (!args.invalid && args.options && args.options.length > 0) {
+		label.addEventListener('click', async () => {
+			await sleep()
+			if (!args.disabled && !args.readonly) {
+				const firstValue = getOptionValue(args, 0)
+				expect(JSON.parse(value.innerHTML)).toEqual(
+					args.multiple ? [firstValue] : firstValue,
+				)
+			}
+		})
+		if (args.disabled || args.readonly) {
+			await expect(input).not.toBeChecked()
+		} else {
+			await expect(input).toBeChecked()
+		}
+	}
+
+	// disabled
+	if (args.disabled) {
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/Dropdown/DropdownOptions.stories.mdx

@@ -1,76 +1,96 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvDropdown from '../../components/VvDropdown/VvDropdown.vue'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { Template } from './Dropdown.stories.mdx'
+import { defaultArgs, argTypes } from './Dropdown.settings'
+import { defaultTest } from './Dropdown.test'
 
-<Meta title="Components/Dropdown/Props/options" />
-
-# VvDropdown options
-
-Let's define a story for our `options` dropdown.
-
-Options string array:
-
-<Source language="json" code={`[ "Option 4", "Option 5", "Option 6" ]`} />
-
-Options object array and default `valueKey` ("value") and `labelKey` ("label"):
-
-<Source
-	language="json"
-	code={`[
-	{
-		"label": "Option 1",
-		"value": 1
-	},
-	{
-		"label": "Option 2",
-		"value": 2
-	},
-	{
-		"label": "Option 3",
-		"value": 3
-	}
-]`}
+<Meta
+	title="Components/Dropdown/Options"
+	component={VvDropdown}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 <Canvas>
-	<Story name="options">
-		{() => {
-			return {
-				components: { VvDropdown },
-				data() {
-					return {
-						value: '',
-						objectValue: '',
-						options: ['Option 4', 'Option 5', 'Option 6'],
-						optionsObject: [
-							{
-								label: 'Option 1',
-								value: 1
-							},
-							{
-								label: 'Option 2',
-								value: 2
-							},
-							{
-								label: 'Option 3',
-								value: 3
-							}
-						]
-					}
+	<Story
+		name="Array of Objects"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
 				},
-				template: `<div class="h-100 mb-xl">
-						<vv-dropdown v-model:modelValue="value" :options="options" class="w-1/2 ml-lg" />
-						<div class="flex justify-end">Value: {{ value }}</div>
-					</div>
-					<div class="h-100 pt-lg">
-						<vv-dropdown v-model:modelValue="objectValue" :options="optionsObject" class="w-1/2 ml-lg" />
-						<div class="flex justify-end">Value: {{ objectValue }}</div>
-					</div>`
-			}
+			},
 		}}
+		args={{
+			options: [
+				{ value: 'first', label: 'First' },
+				{ value: 'second', label: 'Second' },
+				{ value: 'third', label: 'Third' },
+			],
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source
-	language="html"
-	code={`<vv-dropdown v-model:modelValue="value" :options="options" />`}
-/>
+<Canvas>
+	<Story
+		name="Option label key"
+		play={defaultTest}
+		args={{
+			labelKey: 'name',
+			options: [
+				{ value: 'first', name: 'First' },
+				{ value: 'second', name: 'Second' },
+				{ value: 'third', name: 'Third' },
+			],
+		}}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+			labelKey: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Option value key"
+		play={defaultTest}
+		args={{
+			valueKey: 'id',
+			options: [
+				{ id: 'first', label: 'First' },
+				{ id: 'second', label: 'Second' },
+				{ id: 'third', label: 'Third' },
+			],
+		}}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+			valueKey: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Icon/Icon.settings.ts

@@ -0,0 +1,72 @@
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvIconProps } from '@/components/VvIcon'
+import normal from '@/assets/icons/normal.json'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvIconProps),
+	name: 'add-circle',
+}
+
+export const argTypes = {
+	name: {
+		options: Object.keys(normal.icons),
+		control: {
+			type: 'select',
+		},
+	},
+	mode: {
+		options: ['style', 'bg', 'mask', 'svg'],
+		control: {
+			type: 'select',
+		},
+	},
+	src: {
+		description: 'Url remote SVG icon',
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'url',
+			},
+		},
+	},
+	svg: {
+		description: 'Svg icon string',
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'xml',
+			},
+		},
+	},
+	prefix: {
+		options: ['simple', 'normal', 'detailed'],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'normal',
+			},
+		},
+	},
+	flip: {
+		options: ['', 'vertical', 'horizontal'],
+		control: {
+			type: 'radio',
+		},
+	},
+	onLoad: {
+		description: 'A callback that is called when icon data has been loaded',
+		table: {
+			type: {
+				summary: 'function',
+			},
+		},
+	},
+	...ModifiersArgTypes,
+}

package/src/stories/Icon/Icon.stories.mdx

@@ -1,29 +1,13 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
-import { VvIconProps } from '../../components/VvIcon/VvIcon'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { defaultArgs, argTypes } from './Icon.settings'
+import NormalIcons from '@/assets/icons/normal.json'
 
 <Meta
 	title="Components/Icon"
 	component={VvIcon}
-	args={{
-		...ObjectUtilities.propsToObject(VvIconProps),
-		name: 'add-circle'
-	}}
-	argTypes={{
-		mode: {
-			control: {
-				type: 'select',
-				options: ['style', 'bg', 'mask', 'svg']
-			}
-		},
-		prefix: {
-			control: {
-				type: 'select',
-				options: ['simple', 'normal', 'detailed']
-			}
-		}
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args) => ({
@@ -31,43 +15,76 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-icon v-bind="args" />`
+	template: `<vv-icon v-bind="args" />`,
 })
 
-# VvIcon
-
-#### VvIcon use <a href="https://iconify.design/" target="_blank">Iconify</a> library and <a href="https://docs.iconify.design/icon-components/vue/" target="_blank">Iconify Vue component</a> under the hood.
-
-The UI Vue component library export a function (`createIconifyJsonFiles`) to create the <a href="https://docs.iconify.design/types/iconify-json.html" target="_blank">IconifyJSON</a> objects.
-This function for input params has the source path to the icons folder and the destination path for output json files.
-
-The source path can have subfolders and then SVG icons. In this case the last parent folder name will be the iconify <a href="https://docs.iconify.design/icon-components/vue/#icon" target="_blank">prefix</a> and all the children SVG icons will be the icons `name`.
-The `provider` is `vv` by default. (You can change it during the DesygnSystem instance.)
-
-<div class="flex justify-center py-lg">
-	<img src="iconify-name-structure.png" alt="iconify-name-structure" />
-</div>
-
-Ex: If my SVG icons folder root is structured like:
-
-    assets/icons/
-    			/simple/---.svg
-    			/normal/---.svg
-    			/detailed/---.svg
-
-The `createIconifyJsonFiles('assets/icons', 'assets/icons')` function will generate icons like `@vv:simple:{fileName}` or `@vv:detailed:{fileName}`
-
-In `VvIcon` component props: `name` `provider` and `prefix`, only `name` is required because the provider is `vv` by default and `prefix` is `normal` by default.
-
-So, if there is one or more custom folders with additional icons (ex: `assets/icons/custom/---.svg`) you can use it creating the IconifyJSON file with `createIconifyJsonFiles` function
-and passing it throught the DesignSystem instance like this:
-
-`new Design System({ iconifyCollections: [ myCustomIconifyJSON ] })` and use it with `vv-icon` component like this:
-
-`<vv-icon name="iconName" prefix="custom" />` or `<vv-icon name="custom:{iconName}" />`
-
-To use our playground `vv-icon` use the `Canvas` section
-
-<Story name="vv-icon" args={{}}>
-	{Template.bind({})}
-</Story>
+<Canvas>
+	<Story
+		name="Default"
+		args={{
+			width: 48,
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Remote"
+		args={{
+			name: 'fingerprint',
+			width: 48,
+			src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/action/fingerprint/materialicons/24px.svg',
+		}}
+		argTypes={{
+			name: {
+				control: {
+					disable: true,
+				},
+			},
+			src: {
+				control: {
+					disable: true,
+				},
+			},
+			svg: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Inline"
+		args={{
+			name: 'bell-2',
+			width: 48,
+			svg: `<svg viewBox="0 0 24 24">${NormalIcons.icons.bell.body}</svg>`,
+		}}
+		argTypes={{
+			name: {
+				control: {
+					disable: true,
+				},
+			},
+			src: {
+				control: {
+					disable: true,
+				},
+			},
+			svg: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Icon/IconsCollection.stories.mdx

@@ -0,0 +1,68 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { icons as NormalIcons } from '@/assets/icons/normal.json'
+import { ref, watch } from 'vue'
+import { defaultArgs, argTypes } from './Icon.settings'
+
+<Meta
+	title="Components/Icon/Collection"
+	component={VvIcon}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvIcon },
+	setup() {
+		const allIcons = Object.keys(NormalIcons)
+		const icons = ref(allIcons)
+		const search = ref('')
+		watch(search, (newValue) => {
+			icons.value = allIcons.filter((icon) => icon.includes(newValue))
+		})
+		return { args, search, icons }
+	},
+	template: `
+		<div class="absolute inset-0 overflow-y-auto p-16">
+			<div class="vv-input-text">
+				<div class="vv-input-text__wrapper">
+					<input v-model="search" type="search" placeholder="Search..." />
+				</div>
+			</div>
+			<div class="grid grid-cols-5 gap-16 mt-16">
+				<div
+					v-for="iconName in icons"
+					:key="iconName"
+					class="flex items-center gap-16">
+					<VvIcon v-bind="args" :name="iconName" />
+					{{ iconName }}
+				</div>
+			</div>
+		</div>
+	`,
+})
+
+<Canvas>
+	<Story
+		name="Collection"
+		argTypes={{
+			name: {
+				control: {
+					disable: true,
+				},
+			},
+			src: {
+				control: {
+					disable: true,
+				},
+			},
+			svg: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>