@volverjs/ui-vue 0.0.1-beta.11

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

@@ -0,0 +1,73 @@
+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'
+
+<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']
+			}
+		}
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvIcon },
+	setup() {
+		return { 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>

package/src/stories/Icon/IconList.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="vv-input-text">
+		<label for="search">Search</label>
+		<div class="vv-input-text__wrapper">
+			<input id="search" v-model="search" type="text" />
+		</div>
+	</div>
+	<div class="flex justify-center gap-16 flex-wrap mt-lg">
+		<div
+			v-for="iconName in icons"
+			:key="iconName"
+			class="icon-item flex items-center xl:w-1/6 md:w-1/5 sm:w-1/3 xs:w-full">
+			<VvIcon :name="iconName" width="25" class="mr-md" />
+			{{ iconName }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import VvIcon from '../../components/VvIcon/VvIcon.vue'
+import IconsNormal from '../../assets/icons/normal.json'
+import { ref, watch, type Ref } from 'vue'
+
+const allIcons = Object.keys(IconsNormal.icons)
+const icons: Ref<string[]> = ref(allIcons)
+const search = ref('')
+watch(search, (newValue) => {
+	icons.value = allIcons.filter((icon) => icon.includes(newValue))
+})
+</script>
+
+<style lang="scss">
+@import '@volverjs/style/scss/components/vv-input-text';
+</style>

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

@@ -0,0 +1,79 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvIcon from '../../components/VvIcon/VvIcon.vue'
+import { iconTest, classTest } from './IconTest.js'
+
+<Meta title="Components/Icon/Props/prefix" />
+
+# VvIcon prefix
+
+Stories of `VvIcon` `prefix`.
+By default prefix generated are: `simple`, `normal`, `detailed`
+
+## Prefix normal (default)
+
+Let's define a story for our `normal` `prefix` icon.
+
+<Canvas>
+	<Story
+		name="normal"
+		play={(ctx) =>
+			iconTest({
+				...ctx,
+				functions: [classTest],
+				classNames: ['vv-icon', 'iconify', 'iconify--normal']
+			})
+		}>
+		{() => {
+			return {
+				components: { VvIcon },
+				template: `<vv-icon name="add" data-testid="img" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Prefix simple
+
+Let's define a story for our `simple` `prefix` icon.
+
+<Canvas>
+	<Story
+		name="simple"
+		play={(ctx) =>
+			iconTest({
+				...ctx,
+				functions: [classTest],
+				classNames: ['vv-icon', 'iconify', 'iconify--simple']
+			})
+		}>
+		{() => {
+			return {
+				components: { VvIcon },
+				template: `<vv-icon name="add" data-testid="img" prefix="simple" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Prefix detailed
+
+Let's define a story for our `detailed` `prefix` icon.
+
+<Canvas>
+	<Story
+		name="detailed"
+		play={(ctx) =>
+			iconTest({
+				...ctx,
+				functions: [classTest],
+				classNames: ['vv-icon', 'iconify', 'iconify--detailed']
+			})
+		}>
+		{() => {
+			return {
+				components: { VvIcon },
+				template: `<vv-icon name="add" data-testid="img" prefix="detailed" />`
+			}
+		}}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvIcon from '../../components/VvIcon/VvIcon.vue'
+import { iconTest, classTest, childElementCountTest } from './IconTest.js'
+
+<Meta title="Components/Icon/Props/remote" />
+
+# VvIcon remote
+
+Stories of `VvIcon` with remote `src`.
+
+<Canvas>
+	<Story
+		name="remote"
+		play={(ctx) => {
+			setTimeout(() => {
+				iconTest({
+					...ctx,
+					functions: [classTest, childElementCountTest],
+					classNames: []
+				})
+			}, 500)
+		}}>
+		{() => {
+			return {
+				components: { VvIcon },
+				template: `<vv-icon name="address-book" data-testid="img" src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/d3a7818c253fcbafff9ebd1d4abb2866c192e1d7/svgs/regular/address-book.svg" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`
+	<vv-icon
+	name="address-book"
+	src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/d3a7818c253fcbafff9ebd1d4abb2866c192e1d7/svgs/regular/address-book.svg"
+/>`}
+/>

package/src/stories/Icon/IconTest.js

@@ -0,0 +1,27 @@
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function iconTest({ canvasElement, functions, ...args }) {
+	const icon = await within(canvasElement).findByTestId('img')
+	if (functions) {
+		functions.forEach(async (func) => {
+			await func({ icon, ...args })
+		})
+	}
+	// Accessibility Test
+	expect.extend(toHaveNoViolations)
+	expect(await axe(icon)).toHaveNoViolations()
+}
+
+async function classTest({ icon, classNames = [] }) {
+	classNames.forEach((cssClass) => {
+		expect(icon).toHaveClass(cssClass)
+	})
+}
+
+async function childElementCountTest({ icon }) {
+	expect(icon.childElementCount).toBeGreaterThan(0)
+}
+
+export { iconTest, childElementCountTest, classTest }

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

@@ -0,0 +1,35 @@
+import {
+	Canvas,
+	Meta,
+	Story,
+	IconGallery,
+	IconItem
+} from '@storybook/addon-docs'
+import IconList from './IconList.vue'
+import IconsNormal from '../../assets/icons/normal.json'
+
+# Iconography
+
+<Meta title="Components/Icon/iconography" component={IconList} />
+
+export const Template = (args) => ({
+	components: { IconList },
+	setup() {
+		return { args }
+	},
+	template: `<icon-list />`
+})
+
+<Story name="iconography" args={{}}>
+	{Template.bind({})}
+</Story>
+
+<IconGallery>
+	{/* {Object.keys(IconsNormal.icons).map((key) => {
+		return (
+			<IconItem key={key} name={key}>
+				{Template.bind({})}
+			</IconItem>
+		)
+	})} */}
+</IconGallery>

package/src/stories/InputText/InputText.stories.mdx

@@ -0,0 +1,94 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+
+<Meta title="Components/InputText" component={VvInputText} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvInputText },
+	setup() {
+		return { args }
+	},
+	data: () => ({ value: args.modelValue || '' }),
+	template: `
+		<div class="flex flex-col justify-between">
+			<vv-input-text v-bind="args" v-model:modelValue="value"/>
+			<strong v-if="value">Valore: {{value}} </strong> 
+		</div>
+        `
+})
+
+<Canvas>
+	<Story
+		name="vv-input-text"
+		args={{
+			text: 'text',
+			id: 'vv-input-text',
+			name: 'vv-input-text',
+			placeholder: 'Prova input',
+			label: 'Campo di prova',
+			hintLabel: 'Hint label text',
+			autocomplete: 'off',
+			disabled: false,
+			readonly: false,
+			valid: false,
+			error: false,
+			loading: false,
+			loadingLabel: 'Ciao sono il loading',
+			icon: '',
+			iconPosition: null,
+			floating: false,
+			min: null,
+			max: null,
+			minlength: null,
+			maxlength: null
+		}}
+		argTypes={{
+			id: {
+				description: 'Id input element.',
+				table: { category: 'Attributes' }
+			},
+			name: {
+				description: 'Nome input element',
+				table: { category: 'Attributes' }
+			},
+			placeholder: {
+				description: 'Placeholder input',
+				table: { category: 'Attributes' }
+			},
+			iconPosition: {
+				control: {
+					type: 'select',
+					options: [null, 'left', 'right']
+				},
+				table: { category: 'Attributes' }
+			},
+			type: {
+				control: {
+					type: 'select',
+					options: ['text', 'password', 'date', 'datetime-local']
+				},
+				table: { category: 'Attributes' }
+			},
+			minlength: {
+				description: 'Lunghezza minima testo',
+				table: { category: 'Attributes' }
+			},
+			maxlength: {
+				description: 'Lunghezza massima testo',
+				table: { category: 'Attributes' }
+			},
+			min: {
+				description: 'Valore minimo',
+				table: { category: 'Attributes' }
+			},
+			max: {
+				description: 'Valore massimo',
+				table: { category: 'Attributes' }
+			}
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextAutocomplete.stories.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Autocomplete" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Autocomplete"
+		args={{ name: 'input-text-autocomplete', autocomplete: 'on' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextAutofocus.stories.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Autofocus" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Autofocus"
+		args={{
+			name: 'input-text-autofocus',
+			label: 'Campo in autofocus',
+			autofocus: true,
+			type: 'text'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextDisabled.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Disabled" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			name: 'input-text-disabled',
+			disabled: true,
+			modelValue: 'Prova'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextError.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Error" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Error"
+		args={{
+			name: 'input-text-error',
+			error: true,
+			errorLabel: 'Error message!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextFloating.stories.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Floating" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			name: 'input-text-floating',
+			label: 'Label di prova',
+			floating: true,
+			type: 'text'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextHintLabel.stories.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/HintLabel" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="HintLabel"
+		args={{
+			name: 'input-text-hint',
+			hintLabel: 'Help text di prova!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextIcon.stories.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Icon" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Icon"
+		args={{
+			name: 'input-text-icon',
+			icon: 'add'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextIconPosition.stories.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/IconPosition" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Left"
+		args={{
+			name: 'input-text-icon',
+			icon: 'add',
+			iconPosition: 'left'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Right"
+		args={{
+			name: 'input-text-icon',
+			icon: 'add',
+			iconPosition: 'right'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextLabel.stories.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Label" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Label"
+		args={{ name: 'input-text-label', label: 'Label di prova' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextLoading.stories.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Loading" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			name: 'input-text-loading',
+			loading: true,
+			loadingLabel: 'Loading label!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextMax.stories.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/Max" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="Max - DateTime"
+		args={{
+			name: 'input-datetime-max',
+			type: 'date',
+			max: new Date().toISOString().split('T')[0]
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Max - Number"
+		args={{
+			name: 'input-number-max',
+			type: 'number',
+			max: 15
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/InputText/InputTextMaxLength.stories.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Template } from './InputText.stories.mdx'
+
+<Meta title="Components/InputText/MaxLength" component={VvInputText} />
+
+<Canvas>
+	<Story
+		name="MaxLength"
+		args={{ name: 'input-text-min-length', maxlength: 5 }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="MaxLength - limit"
+		args={{ name: 'input-text-limit', maxlength: 5, showLimit: true }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="MaxLength - countdown"
+		args={{
+			name: 'input-text-limit-countdown',
+			maxlength: 5,
+			showLimit: true,
+			showLimitMode: 'countdown'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>