@volverjs/ui-vue 0.0.1-beta.11

package/src/stories/Textarea/TextareaSlots.stories.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvIcon from '../../components/VvIcon/VvIcon.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Slots" component={VvTextarea} />
+
+# Slot icons left e right
+
+<Canvas>
+	<Story name="left-right-slots">
+		{() => {
+			return {
+				components: { VvTextarea, VvIcon },
+				data: () => ({ text: '' }),
+				template: `
+					<vv-textarea name="r1" v-model:modelValue="text">
+						<template v-slot:icon-left="slotProps">
+                            <VvIcon name="add"/>
+                        </template>
+                        <template v-slot:icon-right>
+                            <button class="vv-button"> QUA! </button>
+                        </template>
+					</vv-input-text>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaValid.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/Valid" component={VvTextarea} />
+
+# Valid
+
+`Valid` imposta lo stato valid per la textarea.
+
+<Canvas>
+	<Story
+		name="Valid"
+		args={{
+			name: 'textarea-valid',
+			valid: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Textarea/TextareaValidLabel.stories.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import { Template } from './Textarea.stories.mdx'
+
+<Meta title="Components/Textarea/Props/ValidLabel" component={VvTextarea} />
+
+# ValidLabel
+
+`ValidLabel` messaggio associato allo stato valid.
+
+<Canvas>
+	<Story
+		name="ValidLabel"
+		args={{
+			name: 'textarea-validlabel',
+			valid: true,
+			validLabel: 'Il dato è corretto!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="ValidLabels"
+		args={{
+			name: 'textarea-validlabels',
+			valid: true,
+			validLabel: ['Il dato è corretto!', 'Ottimo!']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/stories.scss

@@ -0,0 +1,35 @@
+$zero-specificity-for-utilities: false;
+
+@import '@volverjs/style/scss/reset';
+@import '@volverjs/style/scss/props';
+@import '@volverjs/style/scss/themes/dark';
+@import '@volverjs/style/scss/utilities';
+
+// components
+@import '@volverjs/style/scss/components/vv-accordion';
+@import '@volverjs/style/scss/components/vv-badge';
+@import '@volverjs/style/scss/components/vv-button';
+@import '@volverjs/style/scss/components/vv-button-group';
+@import '@volverjs/style/scss/components/vv-input-checkbox';
+@import '@volverjs/style/scss/components/vv-input-checkbox-group';
+@import '@volverjs/style/scss/components/vv-input-text';
+@import '@volverjs/style/scss/components/vv-progress';
+@import '@volverjs/style/scss/components/vv-input-radio';
+@import '@volverjs/style/scss/components/vv-input-radio-group';
+@import '@volverjs/style/scss/components/vv-dialog';
+@import '@volverjs/style/scss/components/vv-select';
+@import '@volverjs/style/scss/components/vv-dropdown';
+@import '@volverjs/style/scss/components/vv-card';
+@import '@volverjs/style/scss/components/vv-textarea';
+@import '@volverjs/style/scss/components/vv-breadcrumb';
+
+
+//Custom classes for stories
+.vv-textarea {
+    &--variante-1{
+        --vv-textarea-element-input-color: red;
+    }
+    &--variante-2{
+        --vv-textarea-element-wrapper-background-color: green;
+    }
+}

package/src/stories/utils.ts

@@ -0,0 +1,12 @@
+type StorybookGroup = { [key: string]: any }
+
+export function toGroup(keys: string[], categoryName: string) {
+	return keys.reduce((acc, k) => {
+		acc[k] = {
+			table: {
+				category: categoryName
+			}
+		}
+		return acc
+	}, {} as StorybookGroup)
+}

package/src/stories/volver-ui-vue.stories.mdx

@@ -0,0 +1,77 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+
+<Meta title="Volver ui-vue" />
+
+<div class="flex justify-center pb-xl">
+	{/* <img src="https://raw.githubusercontent.com/volverjs/style/main/src/assets/volverjs.svg" /> */}
+	<img src="volverjs-beta.png" />
+</div>
+
+# @volverjs/ui-vue
+
+Volver ui-vue extend Vue type definition and will be available in `$ds` vue property [doc](https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties)
+
+## Style
+
+#### @volverjs/ui-vue is closely linked to [@volverjs/style](https://volverjs.github.io/style/) and is neeeded to style components
+
+<br />
+
+## Import and usage:
+
+```typescript
+import iconsDetailed from '@volverjs/ui-vue/src/assets/icons/detailed.json'
+import iconsNormal from '@volverjs/ui-vue/src/assets/icons/normal.json'
+import iconsSimple from '@volverjs/ui-vue/src/assets/icons/simple.json'
+import { VolverPlugin } from '@volverjs/ui-vue'
+
+app.use(VolverPlugin, {
+	iconsCollections: [iconsSimple, iconsNormal, iconsDetailed]
+})
+```
+
+Constructor parameters:
+
+```typescript
+interface IDesignSystemParams {
+	/**
+	 * If true set "fetchOptions" with credentials: 'include'
+	 */
+	fetchWithCredentials?: boolean
+	/**
+	 * Optional fetch params
+	 */
+	fetchOptions?: RequestInit
+	/**
+	 * Array of https://docs.iconify.design/types/iconify-json.html
+	 * This collections will be added during plugin install
+	 */
+	iconsCollections?: IconifyJSON[]
+}
+```
+
+Design System definition
+
+```typescript
+interface IDesignSystem extends IDesignSystemParams {
+	/**
+	 * @param {String} src Icon source path (url)
+	 * @param {RequestInit} options
+	 * @returns {Promise<string | undefined>} String SVG if exist
+	 */
+	fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>
+	/**
+	 * Add iconify collection to library https://docs.iconify.design/icon-components/vue/add-collection.html
+	 * @param {IconifyJSON} collection
+	 * @param {String} providerName Optional provider name
+	 */
+	addCollection(collection: IconifyJSON, providerName?: string): boolean
+	/**
+	 * Add icon to collection https://docs.iconify.design/icon-components/vue/add-icon.html
+	 * @param {String} name
+	 * @param {IconifyIcon} data
+	 * @returns {Boolean} true on success, false if something is wrong with data
+	 */
+	addIcon(name: string, data: IconifyIcon): boolean
+}
+```

package/src/test/expect.ts

@@ -0,0 +1,52 @@
+import { expect } from '@storybook/jest'
+import { userEvent } from '@storybook/testing-library'
+import { axe } from 'jest-axe'
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace jest {
+		interface Matchers<R> {
+			toBeClicked: (expected?: HTMLElement) => CustomMatcherResult
+		}
+		interface Matchers<R> {
+			toHaveClass: (
+				className: string | string[],
+				expected?: HTMLElement
+			) => CustomMatcherResult
+		}
+	}
+}
+
+expect.extend({
+	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 clsses doesn't exist: ${classes.join(', ')}`
+		}
+	}
+})
+
+export { expect }

package/src/test/types.d.ts

@@ -0,0 +1,4 @@
+export interface PlayAttributes {
+	canvasElement: HTMLElement
+	args: { [key: string]: any }
+}

package/src/types/generic.d.ts

@@ -0,0 +1 @@
+export type Nullable<T> = T | null | undefined

package/src/utils/ObjectUtilities.ts

@@ -0,0 +1,275 @@
+export default {
+	/**
+	 * Compare objects, primitives, array, dates, regexp
+	 * @param {any} obj1 first literal
+	 * @param {any} obj2 second literal
+	 * @param {string} field optional field of obj1 and obj2 (also nested dotted field "prop1.prop12")
+	 * @returns {boolean}
+	 */
+	equals(obj1: any, obj2: any, field?: string) {
+		if (field)
+			return (
+				this.resolveFieldData(obj1, field) ===
+				this.resolveFieldData(obj2, field)
+			)
+		else return this.deepEquals(obj1, obj2)
+	},
+
+	/**
+	 * Compare objects, primitives, array, dates, regexp
+	 * @param {any} a first literal
+	 * @param {any} b second literal
+	 * @returns {boolean}
+	 */
+	deepEquals(a: any, b: any) {
+		if (a === b) return true
+
+		if (a && b && typeof a == 'object' && typeof b == 'object') {
+			const arrA = Array.isArray(a)
+			const arrB = Array.isArray(b)
+			let i, length, key
+
+			if (arrA && arrB) {
+				length = a.length
+				if (length != b.length) return false
+				for (i = length; i-- !== 0; )
+					if (!this.deepEquals(a[i], b[i])) return false
+
+				return true
+			}
+
+			if (arrA != arrB) return false
+
+			const dateA = a instanceof Date,
+				dateB = b instanceof Date
+
+			if (dateA != dateB) return false
+			if (dateA && dateB) return a.getTime() == b.getTime()
+
+			const regexpA = a instanceof RegExp,
+				regexpB = b instanceof RegExp
+
+			if (regexpA != regexpB) return false
+			if (regexpA && regexpB) return a.toString() == b.toString()
+
+			const keys = Object.keys(a)
+
+			length = keys.length
+
+			if (length !== Object.keys(b).length) return false
+
+			for (i = length; i-- !== 0; )
+				if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+					return false
+
+			for (i = length; i-- !== 0; ) {
+				key = keys[i]
+				if (!this.deepEquals(a[key], b[key])) return false
+			}
+
+			return true
+		}
+
+		return a !== a && b !== b
+	},
+
+	/**
+	 * Find and return field or nested field from object (also nested dotted field)
+	 * @param {object} data object that contains the field
+	 * @param {string} field ex: "prop1" or "prop1.prop12"
+	 * @returns {boolean}
+	 */
+	resolveFieldData(data: { [key: string]: any }, field: string) {
+		if (data && Object.keys(data).length && field) {
+			if (field.indexOf('.') === -1) {
+				return data[field]
+			} else {
+				const fields = field.split('.')
+				let value = data
+
+				for (let i = 0, len = fields.length; i < len; ++i) {
+					if (data == null) {
+						return null
+					}
+
+					value = value[fields[i]]
+				}
+
+				return value
+			}
+		} else {
+			return null
+		}
+	},
+
+	/**
+	 * @param {any} obj data to check
+	 * @returns {boolean}
+	 */
+	isFunction(obj: any) {
+		return !!(obj && obj.constructor && obj.call && obj.apply)
+	},
+
+	/**
+	 * Return the index of value in list array
+	 * @param {any} value the element to find
+	 * @param {Array<any>} list array list
+	 * @returns {number} the index
+	 */
+	findIndexInList(value: any, list: Array<any>) {
+		let index = -1
+
+		if (list) {
+			for (let i = 0; i < list.length; i++) {
+				if (this.equals(list[i], value)) {
+					index = i
+					break
+				}
+			}
+		}
+
+		return index
+	},
+
+	/**
+	 * Return the index of value in list array
+	 * @param {any} value the element to find
+	 * @param {Array<any>} list array list
+	 * @returns {boolean} the index
+	 */
+	contains(value: any, list: Array<any>) {
+		if (value != null && list && list.length) {
+			for (const val of list) {
+				if (this.equals(value, val)) return true
+			}
+		}
+
+		return false
+	},
+
+	/**
+	 * @param {string | null | undefined | number | Array<any> | object} value element to checj
+	 * @returns {boolean}
+	 */
+	isEmpty(value: string | null | undefined | number | Array<any> | object) {
+		return (
+			value === null ||
+			value === undefined ||
+			value === '' ||
+			(Array.isArray(value) && value.length === 0) ||
+			(!(value instanceof Date) &&
+				typeof value === 'object' &&
+				Object.keys(value).length === 0)
+		)
+	},
+
+	/**
+	 * @param {string | null | undefined | number | Array<any> | object} value element to checj
+	 * @returns {boolean}
+	 */
+	isNotEmpty(
+		value: string | null | undefined | number | Array<any> | object
+	) {
+		return !this.isEmpty(value)
+	},
+
+	/**
+	 * Return the object entries that match the predicate passed
+	 * @param {Object} value
+	 * @param {Function} predicate
+	 * @returns {Object}
+	 */
+	pickBy(value: { [key: string]: any }, predicate: (k: string) => boolean) {
+		return Object.fromEntries(
+			Object.entries(value).filter(([key]) => predicate(key))
+		)
+	},
+
+	/**
+	 * Remove a value from an Array
+	 * @param {any} value the element to remove
+	 * @param {Array<any>} list
+	 * @returns {Array<any>}
+	 */
+	removeFromList(value: any, list: Array<any>) {
+		//check off
+		const indexElToRemove = this.findIndexInList(value, list)
+		if (indexElToRemove > -1) {
+			return list.filter((el, elIndex) => elIndex !== indexElToRemove)
+		} else {
+			return list
+		}
+	},
+
+	/**
+	 * @param {any} value
+	 * @returns {boolean}
+	 */
+	isString(value: any) {
+		return typeof value === 'string' || value instanceof String
+	},
+
+	/**
+	 * Convert props definition to object with "prop" as key and default as value
+	 * @param {ComponentObjectPropsOptions} props vue component props
+	 * @returns {Object}
+	 */
+	propsToObject(props: any) {
+		return Object.keys(props).reduce((initValue: any, value: any) => {
+			if (this.isFunction(props[value])) {
+				// case prop1: String
+				initValue[value] = props[value]()
+			} else if (Array.isArray(props[value])) {
+				// case prop1: [ String, Array ]
+				initValue[value] = props[value][0]()
+			} else if (props[value]?.type) {
+				// case prop1: { type: ... }
+				if (Array.isArray(props[value].type)) {
+					// case prop1: { type: [ String, Array ] }
+					initValue[value] =
+						props[value]?.default || props[value]?.type[0]()
+				} else {
+					// case prop1: { type: String }
+					initValue[value] =
+						props[value]?.default || props[value]?.type()
+				}
+			}
+			return initValue
+		}, {})
+	},
+
+	/**
+	 * Filter array objects by filter array
+	 * @param {object[]} list the listo to filter
+	 * @param {object[] | string[]} filter the filter list, array of string or array of object
+	 * @param {string} key
+	 * @return {object[]}
+	 */
+	filterArray<T = { [key: string]: any }>(
+		list: T[],
+		filter: T[] | string[],
+		key: string
+	): T[] {
+		return list.filter((el) => {
+			return filter.some((f) => {
+				return typeof f === 'string'
+					? el[key as keyof typeof el] == f
+					: this.equals(
+							el[key as keyof typeof el],
+							f[key as keyof typeof f]
+					  )
+			})
+		})
+	},
+
+	kebabCase(value: string) {
+		if (value) {
+			return value
+				.match(
+					/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+				)
+				?.join('-')
+				?.toLowerCase()
+		}
+	}
+}