@volverjs/ui-vue 0.0.1-beta.12 → 0.0.1-beta.17

package/src/stories/Textarea/TextareaMinLength.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/MinLength" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="MinLength"
+		play={textareaTest}
 		args={{ name: 'textarea-min-length', minlength: 5 }}>
 		{Template.bind({})}
 	</Story>

package/src/stories/Textarea/TextareaModifiers.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Modifiers" component={VvTextarea} />
 
@@ -15,6 +15,14 @@ Ogni modificatore verrà convertito in una classe `vv-textarea--${#modifier#}`
 <Canvas>
 	<Story
 		name="Modifiers"
+		play={(ctx) => {
+			textareaTest(ctx, {
+				className: [
+					'vv-textarea--variante-1',
+					'vv-textarea--variante-2'
+				]
+			})
+		}}
 		args={{
 			name: 'textarea-modifiers',
 			modifiers: ['variante-1', 'variante-2']

package/src/stories/Textarea/TextareaName.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Name" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Name"
+		play={textareaTest}
 		args={{
 			name: 'textarea-name',
 			name: 'my-name',

package/src/stories/Textarea/TextareaPlaceholder.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Placeholder" component={VvTextarea} />
 
@@ -13,7 +13,8 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Placeholder"
-		args={{ name: 'textarea-placeholder', placeholder: 'Prova' }}>
+		play={textareaTest}
+		args={{ name: 'textarea-placeholder', placeholder: 'Test' }}>
 		{Template.bind({})}
 	</Story>
 </Canvas>

package/src/stories/Textarea/TextareaReadonly.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Readonly" component={VvTextarea} />
 
@@ -13,10 +13,15 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Readonly"
+		play={async (ctx) => {
+			textareaTest(ctx, {
+				className: 'vv-textarea--readonly'
+			})
+		}}
 		args={{
 			name: 'textarea-readonly',
 			readonly: true,
-			modelValue: 'Prova'
+			modelValue: 'Test'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/Textarea/TextareaRequired.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Required" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Required"
+		play={textareaTest}
 		args={{
 			name: 'textarea-required',
 			required: true

package/src/stories/Textarea/TextareaResizable.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Resizable" component={VvTextarea} />
 
@@ -13,6 +13,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Resizable"
+		play={(ctx) => {
+			textareaTest(ctx, {
+				className: 'vv-textarea--resizable'
+			})
+		}}
 		args={{
 			name: 'textarea-resizable',
 			resizable: true

package/src/stories/Textarea/TextareaRowsCols.stories.mdx

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/RowsCols" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Rows"
+		play={textareaTest}
 		args={{
 			name: 'textarea-rows',
 			icon: 'add',
@@ -29,6 +30,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Cols"
+		play={textareaTest}
 		args={{
 			name: 'textarea-cols',
 			icon: 'add',

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

@@ -1,8 +1,7 @@
 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 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} />
@@ -16,14 +15,14 @@ import { Template } from './Textarea.stories.mdx'
 				components: { VvTextarea, VvIcon },
 				data: () => ({ text: '' }),
 				template: `
-					<vv-textarea name="r1" v-model:modelValue="text">
-						<template v-slot:icon-left="slotProps">
+					<vv-textarea name="r1" v-model="text">
+						<template #icon-left="slotProps">
                             <VvIcon name="add"/>
                         </template>
-                        <template v-slot:icon-right>
-                            <button class="vv-button"> QUA! </button>
+                        <template #icon-right>
+                            <button class="vv-button">Here!</button>
                         </template>
-					</vv-input-text>
+					</vv-textarea>
                     `
 			}
 		}}

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

@@ -1,8 +1,9 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
 
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test.ts'
 
 <Meta title="Components/Textarea/Props/Valid" component={VvTextarea} />
 
@@ -13,6 +14,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Valid"
+		play={(ctx) => {
+			textareaTest(ctx, {
+				className: 'vv-textarea--valid'
+			})
+		}}
 		args={{
 			name: 'textarea-valid',
 			valid: true

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { hintLabelTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/ValidLabel" component={VvTextarea} />
 
@@ -13,10 +13,15 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="ValidLabel"
+		play={async (ctx) => {
+			hintLabelTest(ctx, {
+				className: 'vv-textarea--valid'
+			})
+		}}
 		args={{
 			name: 'textarea-validlabel',
 			valid: true,
-			validLabel: 'Il dato è corretto!'
+			validLabel: 'Valid label'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -25,10 +30,15 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="ValidLabels"
+		play={async (ctx) => {
+			hintLabelTest(ctx, {
+				className: 'vv-textarea--valid'
+			})
+		}}
 		args={{
 			name: 'textarea-validlabels',
 			valid: true,
-			validLabel: ['Il dato è corretto!', 'Ottimo!']
+			validLabel: ['Valid label 1', 'Valid label 2']
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/utils.ts

@@ -1,4 +1,4 @@
-type StorybookGroup = { [key: string]: any }
+type StorybookGroup = Record<string, unknown>
 
 export function toGroup(keys: string[], categoryName: string) {
 	return keys.reduce((acc, k) => {

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

@@ -4,7 +4,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
 
 <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" />
+	<img src="volverjs-beta.svg" />
 </div>
 
 # @volverjs/ui-vue

package/src/test/expect.ts

@@ -5,9 +5,11 @@ import { axe } from 'jest-axe'
 declare global {
 	// eslint-disable-next-line @typescript-eslint/no-namespace
 	namespace jest {
+		// eslint-disable-next-line
 		interface Matchers<R> {
 			toBeClicked: (expected?: HTMLElement) => CustomMatcherResult
 		}
+		// eslint-disable-next-line
 		interface Matchers<R> {
 			toHaveClass: (
 				className: string | string[],
@@ -44,7 +46,7 @@ expect.extend({
 				element.classList.contains(cssClass)
 			),
 			message: () =>
-				`One of these clsses doesn't exist: ${classes.join(', ')}`
+				`One of these classes doesn't exist: ${classes.join(', ')}`
 		}
 	}
 })

package/src/test/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = async (ms = 300) =>
+	await new Promise((resolve) => setTimeout(resolve, ms))

package/src/test/types.d.ts

@@ -1,4 +1,17 @@
 export interface PlayAttributes {
 	canvasElement: HTMLElement
-	args: { [key: string]: any }
+	// eslint-disable-next-line
+	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
 }