From 7ebd78042e56adf73ba4868d630f6dce25bb17a1 Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Tue, 8 Oct 2024 19:22:43 -0400
Subject: [PATCH] feat(components): v2 input components

build v2 input components to work with form v2

fix #102
---
 commitlint.config.js                          |  2 +-
 src/components/Input/PdapInput.vue            |  4 +-
 .../InputCheckbox/PdapInputCheckbox.vue       | 47 +++++++++++
 src/components/InputCheckbox/index.ts         |  1 +
 src/components/InputCheckbox/types.ts         |  6 ++
 .../InputPassword/PdapInputPassword.vue       | 83 +++++++++++++++++++
 src/components/InputPassword/index.ts         |  1 +
 src/components/InputText/PdapInputText.vue    | 44 ++++++++++
 src/components/InputText/index.ts             |  1 +
 src/components/InputText/types.ts             |  6 ++
 src/components/index.ts                       |  4 +
 src/demo/pages/FormV2Demo.vue                 | 75 +++++++++++++++++
 src/demo/router.js                            |  6 ++
 src/index.ts                                  |  1 +
 src/styles/components.css                     | 70 ++++++++++++++++
 tsconfig.json                                 |  4 +-
 16 files changed, 349 insertions(+), 6 deletions(-)
 create mode 100644 src/components/InputCheckbox/PdapInputCheckbox.vue
 create mode 100644 src/components/InputCheckbox/index.ts
 create mode 100644 src/components/InputCheckbox/types.ts
 create mode 100644 src/components/InputPassword/PdapInputPassword.vue
 create mode 100644 src/components/InputPassword/index.ts
 create mode 100644 src/components/InputText/PdapInputText.vue
 create mode 100644 src/components/InputText/index.ts
 create mode 100644 src/components/InputText/types.ts
 create mode 100644 src/demo/pages/FormV2Demo.vue

diff --git a/commitlint.config.js b/commitlint.config.js
index 4698a12..e40d319 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,6 +1,6 @@
 export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    'footer-max-length': [2, 'never']
+    'footer-max-length': [0]
   }
 };
diff --git a/src/components/Input/PdapInput.vue b/src/components/Input/PdapInput.vue
index fdcf99e..f4ff281 100644
--- a/src/components/Input/PdapInput.vue
+++ b/src/components/Input/PdapInput.vue
@@ -78,9 +78,7 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
 
 	/* Error state */
 	.pdap-input-error {
-		@apply flex-wrap;
-
-		row-gap: 0;
+		@apply flex-wrap gap-x-0;
 	}
 
 	.pdap-input-error label {
diff --git a/src/components/InputCheckbox/PdapInputCheckbox.vue b/src/components/InputCheckbox/PdapInputCheckbox.vue
new file mode 100644
index 0000000..6387859
--- /dev/null
+++ b/src/components/InputCheckbox/PdapInputCheckbox.vue
@@ -0,0 +1,47 @@
+<template>
+	<div
+		class="pdap-input pdap-input-checkbox"
+		:class="{ ['pdap-input-error']: error }"
+	>
+		<slot v-if="$slots.error" name="error" class="pdap-input-error-message" />
+		<div v-else-if="error" class="pdap-input-error-message">{{ error }}</div>
+
+		<input
+			:id="id"
+			:name="name"
+			:defaultChecked="defaultChecked"
+			:value="values?.[name] ?? ''"
+			v-bind="$attrs"
+			type="checkbox"
+			@input="onInput"
+		/>
+
+		<slot v-if="$slots.label" name="label" :for="id" />
+		<label v-else-if="label" :for="id">{{ label }}</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useSlots } from 'vue';
+import { PdapInputCheckboxProps } from './types';
+import { PdapFormProvideV2 } from '../FormV2/types';
+import { provideKey } from '../FormV2/util';
+
+const { label, name } = defineProps<PdapInputCheckboxProps>();
+const slots = useSlots();
+
+if (!slots.label && !label)
+	throw new Error(
+		'All form inputs must have a label, passed as a slot or a prop'
+	);
+
+const { values, setValues, v$ } = inject<PdapFormProvideV2>(provideKey)!;
+
+const error = computed(() => {
+	return v$.value[name]?.$error ? v$.value[name]?.$errors?.[0]?.$message : '';
+});
+
+function onInput(e: Event) {
+	setValues({ [name]: (e.target as unknown as HTMLInputElement).checked });
+}
+</script>
diff --git a/src/components/InputCheckbox/index.ts b/src/components/InputCheckbox/index.ts
new file mode 100644
index 0000000..ebdb38b
--- /dev/null
+++ b/src/components/InputCheckbox/index.ts
@@ -0,0 +1 @@
+export { default as InputCheckbox } from './PdapInputCheckbox.vue';
diff --git a/src/components/InputCheckbox/types.ts b/src/components/InputCheckbox/types.ts
new file mode 100644
index 0000000..691e4ab
--- /dev/null
+++ b/src/components/InputCheckbox/types.ts
@@ -0,0 +1,6 @@
+export interface PdapInputCheckboxProps {
+	id: string;
+	label?: string;
+	name: string;
+	defaultChecked?: boolean;
+}
diff --git a/src/components/InputPassword/PdapInputPassword.vue b/src/components/InputPassword/PdapInputPassword.vue
new file mode 100644
index 0000000..9e22d29
--- /dev/null
+++ b/src/components/InputPassword/PdapInputPassword.vue
@@ -0,0 +1,83 @@
+<template>
+	<div
+		class="pdap-input pdap-input-password"
+		:class="{ ['pdap-input-error']: error }"
+	>
+		<slot v-if="$slots.error" name="error" class="pdap-input-error-message" />
+		<div v-else-if="error" class="pdap-input-error-message">{{ error }}</div>
+
+		<div class="pdap-input-password-wrapper">
+			<input
+				:id="id"
+				:name="name"
+				:placeholder="placeholder ?? 'Password'"
+				:value="values?.[name]"
+				v-bind="$attrs"
+				:type="isMasked ? 'password' : 'text'"
+				@input="onInput"
+			/>
+			<button
+				type="button"
+				class="pdap-input-password-toggle"
+				:aria-label="isMasked ? 'Show text' : 'Hide text'"
+				@click="toggleMask"
+			>
+				<FontAwesomeIcon :icon="isMasked ? faEye : faEyeSlash" />
+			</button>
+		</div>
+
+		<slot v-if="$slots.label" name="label" :for="id" />
+		<label v-else-if="label" :for="id">{{ label }}</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, useSlots } from 'vue';
+import { PdapInputTextProps } from '../InputText/types';
+import { PdapFormProvideV2 } from '../FormV2/types';
+import { provideKey } from '../FormV2/util';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+
+const { label, name } = defineProps<PdapInputTextProps>();
+const slots = useSlots();
+
+if (!slots.label && !label)
+	throw new Error(
+		'All form inputs must have a label, passed as a slot or a prop'
+	);
+
+const { values, setValues, v$ } = inject<PdapFormProvideV2>(provideKey)!;
+
+const error = computed(() => {
+	return v$.value[name]?.$error ? v$.value[name]?.$errors?.[0]?.$message : '';
+});
+
+const isMasked = ref(true);
+
+function onInput(e: Event) {
+	setValues({ [name]: (e.target as unknown as HTMLInputElement).value });
+}
+
+function toggleMask() {
+	isMasked.value = !isMasked.value;
+}
+</script>
+
+<style>
+@tailwind components;
+
+@layer components {
+	.pdap-input-password input {
+		@apply w-full;
+	}
+
+	.pdap-input-password-wrapper {
+		@apply relative;
+	}
+
+	.pdap-input-password-toggle {
+		@apply absolute right-4 cursor-pointer text-[rgba(0_0_0)] top-1/2 translate-y-[-50%];
+	}
+}
+</style>
diff --git a/src/components/InputPassword/index.ts b/src/components/InputPassword/index.ts
new file mode 100644
index 0000000..0e15271
--- /dev/null
+++ b/src/components/InputPassword/index.ts
@@ -0,0 +1 @@
+export { default as InputPassword } from './PdapInputPassword.vue';
diff --git a/src/components/InputText/PdapInputText.vue b/src/components/InputText/PdapInputText.vue
new file mode 100644
index 0000000..0d0c05d
--- /dev/null
+++ b/src/components/InputText/PdapInputText.vue
@@ -0,0 +1,44 @@
+<template>
+	<div class="pdap-input" :class="{ ['pdap-input-error']: error }">
+		<slot v-if="$slots.error" name="error" class="pdap-input-error-message" />
+		<div v-else-if="error" class="pdap-input-error-message">{{ error }}</div>
+
+		<input
+			:id="id"
+			:name="name"
+			:placeholder="placeholder"
+			:value="values?.[name] ?? ''"
+			v-bind="$attrs"
+			type="text"
+			@input="onInput"
+		/>
+
+		<slot v-if="$slots.label" name="label" :for="id" />
+		<label v-else-if="label" :for="id">{{ label }}</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, useSlots } from 'vue';
+import { PdapInputTextProps } from './types';
+import { PdapFormProvideV2 } from '../FormV2/types';
+import { provideKey } from '../FormV2/util';
+
+const { label, name } = defineProps<PdapInputTextProps>();
+const slots = useSlots();
+
+if (!slots.label && !label)
+	throw new Error(
+		'All form inputs must have a label, passed as a slot or a prop'
+	);
+
+const { values, setValues, v$ } = inject<PdapFormProvideV2>(provideKey)!;
+
+const error = computed(() => {
+	return v$.value[name]?.$error ? v$.value[name]?.$errors?.[0]?.$message : '';
+});
+
+function onInput(e: Event) {
+	setValues({ [name]: (e.target as unknown as HTMLInputElement).value });
+}
+</script>
diff --git a/src/components/InputText/index.ts b/src/components/InputText/index.ts
new file mode 100644
index 0000000..9cfa813
--- /dev/null
+++ b/src/components/InputText/index.ts
@@ -0,0 +1 @@
+export { default as InputText } from './PdapInputText.vue';
diff --git a/src/components/InputText/types.ts b/src/components/InputText/types.ts
new file mode 100644
index 0000000..99ba44b
--- /dev/null
+++ b/src/components/InputText/types.ts
@@ -0,0 +1,6 @@
+export interface PdapInputTextProps {
+	id: string;
+	label?: string;
+	name: string;
+	placeholder?: string;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index d54b1d3..45b1027 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,7 +2,11 @@ export { Button } from './Button';
 export { ErrorBoundary } from './ErrorBoundary';
 export { Footer } from './Footer';
 export { Form } from './Form';
+export { FormV2 } from './FormV2';
 export { Input } from './Input';
+export { InputCheckbox } from './InputCheckbox';
+export { InputPassword } from './InputPassword';
+export { InputText } from './InputText';
 export { Header } from './Header';
 export { Nav } from './Nav';
 export { QuickSearchForm } from './QuickSearchForm';
diff --git a/src/demo/pages/FormV2Demo.vue b/src/demo/pages/FormV2Demo.vue
new file mode 100644
index 0000000..cfe99e2
--- /dev/null
+++ b/src/demo/pages/FormV2Demo.vue
@@ -0,0 +1,75 @@
+<template>
+	<main>
+		<FormV2
+			id="form-id"
+			name="form-name"
+			:schema="SCHEMA"
+			@submit="(values) => console.log({ values })"
+		>
+			<InputText
+				:id="INPUT_TEXT_NAME"
+				:name="INPUT_TEXT_NAME"
+				:placeholder="PLACEHOLDER"
+			>
+				<template #label>
+					<h4>Your name</h4>
+				</template>
+			</InputText>
+
+			<InputPassword
+				:id="INPUT_PASSWORD_NAME"
+				:name="INPUT_PASSWORD_NAME"
+				placeholder="Password"
+				label="Type your password here"
+			/>
+
+			<p>Foo bar baz, extra content here</p>
+
+			<InputCheckbox
+				:id="INPUT_CHECKBOX_NAME"
+				:name="INPUT_CHECKBOX_NAME"
+				label="Do you like ice cream?"
+			/>
+
+			<Button type="submit">Submit</Button>
+		</FormV2>
+	</main>
+</template>
+
+<script setup lang="ts">
+import { Button } from '../../components/Button';
+import { FormV2 } from '../../components/FormV2';
+import { InputText } from '../../components/InputText';
+import { InputCheckbox } from '../../components/InputCheckbox';
+import { InputPassword } from '../../components/InputPassword';
+
+const INPUT_CHECKBOX_NAME = 'ice-cream';
+const INPUT_TEXT_NAME = 'first-name';
+const INPUT_PASSWORD_NAME = 'password';
+const PLACEHOLDER = 'Paul';
+const SCHEMA = [
+	{
+		name: INPUT_TEXT_NAME,
+		validators: {
+			required: {
+				value: true,
+			},
+		},
+	},
+	{
+		name: INPUT_PASSWORD_NAME,
+		validators: {
+			password: {
+				value: true,
+				message: 'Your password should be a valid password',
+			},
+		},
+	},
+];
+</script>
+
+<style>
+main {
+	min-height: 80vh;
+}
+</style>
diff --git a/src/demo/router.js b/src/demo/router.js
index 1dd200d..89fd514 100644
--- a/src/demo/router.js
+++ b/src/demo/router.js
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import ComponentDemo from './pages/ComponentDemo.vue';
 import SignupFormDemo from './pages/SignupFormDemo.vue';
+import FormV2Demo from './pages/FormV2Demo.vue';
 
 const routes = [
 	{
@@ -46,6 +47,11 @@ const routes = [
 		component: SignupFormDemo,
 		name: 'Login Demo',
 	},
+	{
+		path: '/form-v2-demo',
+		component: FormV2Demo,
+		name: 'FormV2 Demo',
+	},
 ];
 
 const router = createRouter({
diff --git a/src/index.ts b/src/index.ts
index cf2bcaf..0be052d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ export * from './components/Dropdown/types';
 export * from './components/ErrorBoundary/types';
 export * from './components/Footer/types';
 export * from './components/Form/types';
+export * from './components/FormV2/types';
 export * from './components/Header/types';
 export * from './components/Input/types';
 export * from './components/Nav/types';
diff --git a/src/styles/components.css b/src/styles/components.css
index 79fb44d..3f9946e 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -35,4 +35,74 @@
 	.pdap-flex-container-center {
 		@apply pdap-flex-container items-center justify-center;
 	}
+
+	/* Input styles  */
+	.pdap-input {
+		@apply h-[max-content] gap-1 leading-normal mb-3 w-full flex flex-col;
+	}
+
+	.pdap-input input {
+		@apply dark:bg-neutral-950 border border-neutral-500 border-solid px-3 py-2 text-[rgba(0,0,0)];
+	}
+
+	.pdap-input input::placeholder {
+		@apply text-neutral-600 text-lg;
+	}
+
+	.pdap-input input:focus,
+	.pdap-input input:focus-within,
+	.pdap-input input:focus-visible {
+		@apply border-2 border-blue-light border-solid outline-none;
+	}
+
+	.pdap-input label {
+		@apply max-w-[max-content] text-lg py-1 font-medium;
+	}
+
+	/* Error state */
+	.pdap-input-error {
+		@apply flex-wrap gap-x-0;
+	}
+
+	.pdap-input-error label {
+		@apply justify-start;
+	}
+
+	.pdap-input-error input {
+		@apply border-red-800 dark:border-red-300;
+	}
+
+	.pdap-input-error-message {
+		@apply items-center justify-start flex bg-red-300 text-red-800 p-1 text-xs;
+	}
+
+			/* Specific inputs */
+	/* Input - text */
+	.pdap-input input[type='text'],
+	.pdap-input input[type='password'] {
+		@apply h-12 text-lg;
+	}
+
+	/* Input - checkbox */
+	.pdap-input-checkbox {
+		@apply border-2 border-transparent items-center gap-4 flex-row py-1 px-2 w-auto;
+	}
+
+	.pdap-input-checkbox:has(input:checked) {
+		@apply border-2 border-brand-gold border-solid rounded-md;
+	}
+
+	.pdap-input input[type='checkbox'] {
+		@apply h-6 w-6 accent-brand-gold;
+	}
+
+	.pdap-input input[type='checkbox'] ~ label {
+		@apply pl-0 w-full max-w-full;
+	}
+
+	.pdap-input input[type='checkbox'],
+	.pdap-input input[type='checkbox'] ~ label {
+		@apply cursor-pointer;
+	}
+
 }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 9bcaa38..270fba7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,10 @@
 {
 	"compilerOptions": {
-		"target": "ES2020",
+		"target": "ES2022",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
 		"lib": [
-			"ES2020",
+			"ES2022",
 			"DOM",
 			"DOM.Iterable"
 		],