From d483de84d8abe97a137170282e86295c6521f364 Mon Sep 17 00:00:00 2001
From: HubbeDev <privat@responsivhub.com>
Date: Sat, 6 Jan 2024 22:55:48 +0100
Subject: [PATCH] rearrange shadcn-svelte to own components.

---
 .../src/lib/components/button/index.ts        |  2 +-
 .../components/description/description.svelte | 13 +++
 .../src/lib/components/description/index.ts   |  7 ++
 .../src/lib/components/form/form.svelte       | 89 ------------------
 .../src/lib/components/form/index.ts          | 67 ++++++++++++-
 .../src/lib/components/form/types.ts          |  3 -
 .../src/lib/components/index.ts               |  1 -
 .../src/lib/components/input/index.ts         | 25 +++++
 .../src/lib/components/input/input.svelte     | 36 +++++++
 .../src/lib/components/item/index.ts          |  7 ++
 .../src/lib/components/item/item.svelte       | 12 +++
 .../src/lib/components/label/index.ts         |  7 ++
 .../src/lib/components/label/label.svelte     | 26 +++++
 .../src/lib/components/root.svelte            | 94 +++++++++++++++++--
 .../lib/components/ui/form/form-input.svelte  | 28 ------
 .../src/lib/components/ui/form/index.ts       |  2 +-
 .../src/lib/components/validation/index.ts    |  7 ++
 .../components/validation/validation.svelte   | 14 +++
 .../src/lib/internal/types.ts                 |  2 +-
 19 files changed, 310 insertions(+), 132 deletions(-)
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/description/description.svelte
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/description/index.ts
 delete mode 100644 apps/svelte-gravity-forms/src/lib/components/form/form.svelte
 delete mode 100644 apps/svelte-gravity-forms/src/lib/components/form/types.ts
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/input/index.ts
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/input/input.svelte
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/item/index.ts
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/item/item.svelte
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/label/index.ts
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/label/label.svelte
 delete mode 100644 apps/svelte-gravity-forms/src/lib/components/ui/form/form-input.svelte
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/validation/index.ts
 create mode 100644 apps/svelte-gravity-forms/src/lib/components/validation/validation.svelte

diff --git a/apps/svelte-gravity-forms/src/lib/components/button/index.ts b/apps/svelte-gravity-forms/src/lib/components/button/index.ts
index 31667ea..dbfaded 100644
--- a/apps/svelte-gravity-forms/src/lib/components/button/index.ts
+++ b/apps/svelte-gravity-forms/src/lib/components/button/index.ts
@@ -52,7 +52,7 @@ export {
 	type Events,
 	type ButtonType,
 	//
-	Root as GFButton,
+	Root as Button,
 	type Props as ButtonProps,
 	type Events as ButtonEvents,
 	buttonVariants
diff --git a/apps/svelte-gravity-forms/src/lib/components/description/description.svelte b/apps/svelte-gravity-forms/src/lib/components/description/description.svelte
new file mode 100644
index 0000000..b3044ad
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/description/description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLSpanElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Description class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+	<slot />
+</FormPrimitive.Description>
diff --git a/apps/svelte-gravity-forms/src/lib/components/description/index.ts b/apps/svelte-gravity-forms/src/lib/components/description/index.ts
new file mode 100644
index 0000000..d1ea533
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/description/index.ts
@@ -0,0 +1,7 @@
+import Root from './description.svelte';
+
+export {
+	Root,
+	//
+	Root as Description
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/form/form.svelte b/apps/svelte-gravity-forms/src/lib/components/form/form.svelte
deleted file mode 100644
index 19ada7b..0000000
--- a/apps/svelte-gravity-forms/src/lib/components/form/form.svelte
+++ /dev/null
@@ -1,89 +0,0 @@
-<script lang="ts">
-	import * as Form from '$lib/components/ui/form/index.js';
-	import { GFButton } from '$components/index.js';
-	import { getCtx } from '../../ctx.js';
-	import { superForm, superValidateSync } from 'sveltekit-superforms/client';
-
-	const {
-		methods: { onSubmitForm },
-		helpers: { getColumnSpan, showFieldLabel },
-		states: { formSchema, formFields, formRequiredIndicator },
-		refs: { formRef }
-	} = getCtx();
-
-	$: form = $formSchema
-		? superForm(superValidateSync($formSchema), {
-				SPA: true,
-				validators: $formSchema,
-				// Reset the form upon a successful result
-				applyAction: true,
-				invalidateAll: true,
-				resetForm: true,
-				async onUpdate({ form }) {
-					if (form.valid) {
-						if (!form.data) return;
-						await onSubmitForm(form.data);
-					}
-				}
-			})
-		: undefined;
-</script>
-
-{#if !form}
-	<p>Please provide a formId</p>
-{:else}
-	<Form.Root
-		asChild
-		method="POST"
-		{form}
-		controlled
-		schema={$formSchema}
-		let:enhance
-		let:attrs
-		let:config
-		{...$$restProps}
-	>
-		<form
-			class="grid w-full max-w-xl grid-cols-12 gap-x-6"
-			method="POST"
-			bind:this={$formRef}
-			use:enhance
-			{...attrs}
-		>
-			{#if $formFields}
-				{#each $formFields as field, i}
-					<div data-svelte-gf-field-id={i} class={getColumnSpan(field.layoutGridColumnSpan)}>
-						<Form.Field {config} name={`input_${field.id}`}>
-							<Form.Item>
-								{#if field.label && showFieldLabel(field.labelPlacement, 'above')}
-									<Form.Label>
-										{field.label}
-										{#if field.isRequired}
-											{#if $formRequiredIndicator == 'asterisk'}
-												<span class="text-red-600">*</span>
-											{:else if $formRequiredIndicator == 'text'}
-												<span class="text-xs text-muted-foreground"> (required)</span>
-											{/if}
-										{/if}
-									</Form.Label>
-									{#if field.description && field.descriptionPlacement == 'above'}
-										<Form.Description>{field.description}</Form.Description>
-									{/if}
-									<Form.Input
-										value={field.defaultValue ?? undefined}
-										placeholder={field.placeholder ?? ''}
-									/>
-									{#if field.label && showFieldLabel(field.labelPlacement, 'below')}
-										<Form.Description>{field.description}</Form.Description>
-									{/if}
-								{/if}
-								<Form.Validation />
-							</Form.Item>
-						</Form.Field>
-					</div>
-				{/each}
-			{/if}
-			<GFButton class="" size="lg" type="submit"></GFButton>
-		</form>
-	</Form.Root>
-{/if}
diff --git a/apps/svelte-gravity-forms/src/lib/components/form/index.ts b/apps/svelte-gravity-forms/src/lib/components/form/index.ts
index 8184a6d..6c6be64 100644
--- a/apps/svelte-gravity-forms/src/lib/components/form/index.ts
+++ b/apps/svelte-gravity-forms/src/lib/components/form/index.ts
@@ -1 +1,66 @@
-export { default as Form } from './form.svelte';
+import { Form as FormPrimitive, getFormField } from 'formsnap';
+import * as RadioGroupComp from '$lib/components/ui/radio-group/index.js';
+import * as SelectComp from '$lib/components/ui/select/index.js';
+import type { Writable } from 'svelte/store';
+import { Item } from '$components/item/index.js';
+import { Input } from '$components/input/index.js';
+import { Description } from '$components/description/index.js';
+import { Label } from '$components/label/index.js';
+import { Validation } from '$components/validation/index.js';
+
+import { Button } from '$components/button/index.js';
+
+const Root = FormPrimitive.Root;
+const Field = FormPrimitive.Field;
+const Control = FormPrimitive.Control;
+const RadioItem = RadioGroupComp.Item;
+const NativeRadio = FormPrimitive.Radio;
+const SelectContent = SelectComp.Content;
+const SelectLabel = SelectComp.Label;
+const SelectGroup = SelectComp.Group;
+const SelectItem = SelectComp.Item;
+const SelectSeparator = SelectComp.Separator;
+
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, 'value'> & {
+	value: Writable<string>;
+};
+
+export type Props = {
+	formId?: number;
+};
+
+export {
+	Root,
+	Field,
+	Control,
+	Item,
+	Input,
+	Label,
+	Button,
+	Validation,
+	RadioItem,
+	Description,
+	SelectContent,
+	SelectLabel,
+	SelectGroup,
+	SelectItem,
+	SelectSeparator,
+	NativeRadio,
+	//
+	Root as Form,
+	Field as FormField,
+	Control as FormControl,
+	Item as FormItem,
+	Input as FormInput,
+	Description as FormDescription,
+	Label as FormLabel,
+	Validation as FormValidation,
+	NativeRadio as FormNativeRadio,
+	RadioItem as FormRadioItem,
+	SelectContent as FormSelectContent,
+	SelectLabel as FormSelectLabel,
+	SelectGroup as FormSelectGroup,
+	SelectItem as FormSelectItem,
+	SelectSeparator as FormSelectSeparator,
+	Button as FormButton
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/form/types.ts b/apps/svelte-gravity-forms/src/lib/components/form/types.ts
deleted file mode 100644
index 2cbdd64..0000000
--- a/apps/svelte-gravity-forms/src/lib/components/form/types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type Props = {
-	formId?: number;
-};
diff --git a/apps/svelte-gravity-forms/src/lib/components/index.ts b/apps/svelte-gravity-forms/src/lib/components/index.ts
index b58a198..921427e 100644
--- a/apps/svelte-gravity-forms/src/lib/components/index.ts
+++ b/apps/svelte-gravity-forms/src/lib/components/index.ts
@@ -1,4 +1,3 @@
-import { default as GFForm } from './form/form.svelte';
 import { default as GFButton } from './button/button.svelte';
 
 export { GFForm, GFButton };
diff --git a/apps/svelte-gravity-forms/src/lib/components/input/index.ts b/apps/svelte-gravity-forms/src/lib/components/input/index.ts
new file mode 100644
index 0000000..9ba89bc
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/input/index.ts
@@ -0,0 +1,25 @@
+import Root from './input.svelte';
+
+type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/input/input.svelte b/apps/svelte-gravity-forms/src/lib/components/input/input.svelte
new file mode 100644
index 0000000..48828e3
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/input/input.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { getFormField } from 'formsnap';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+	import type { InputEvents } from './index.js';
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	/* 	const { attrStore, value } = getFormField(); */
+	const { attrStore, value } = getFormField();
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		'border-input ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border bg-transparent px-3  py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+		className
+	)}
+	{...$attrStore}
+	bind:value={$value}
+	{...$$restProps}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+/>
diff --git a/apps/svelte-gravity-forms/src/lib/components/item/index.ts b/apps/svelte-gravity-forms/src/lib/components/item/index.ts
new file mode 100644
index 0000000..663722c
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/item/index.ts
@@ -0,0 +1,7 @@
+import Root from './item.svelte';
+
+export {
+	Root,
+	//
+	Root as Item
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/item/item.svelte b/apps/svelte-gravity-forms/src/lib/components/item/item.svelte
new file mode 100644
index 0000000..9435c55
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/item/item.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('space-y-2', className)} {...$$restProps}>
+	<slot />
+</div>
diff --git a/apps/svelte-gravity-forms/src/lib/components/label/index.ts b/apps/svelte-gravity-forms/src/lib/components/label/index.ts
new file mode 100644
index 0000000..808d141
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/label/index.ts
@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/label/label.svelte b/apps/svelte-gravity-forms/src/lib/components/label/label.svelte
new file mode 100644
index 0000000..942db7b
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/label/label.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { getFormField } from 'formsnap';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = LabelPrimitive.Props;
+	type $$Events = LabelPrimitive.Events;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+
+	const { errors } = getFormField();
+
+	$: className = $errors ? cn($errors && 'text-destructive', className) : className;
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+		className
+	)}
+	{...$$restProps}
+	on:mousedown
+>
+	<slot />
+</LabelPrimitive.Root>
diff --git a/apps/svelte-gravity-forms/src/lib/components/root.svelte b/apps/svelte-gravity-forms/src/lib/components/root.svelte
index 290c57f..027293f 100644
--- a/apps/svelte-gravity-forms/src/lib/components/root.svelte
+++ b/apps/svelte-gravity-forms/src/lib/components/root.svelte
@@ -1,22 +1,102 @@
 <script lang="ts">
-	import { GFForm } from '$components/index.js';
 	import type { Props } from './types.js';
-	import { getCtx, setCtx } from '../ctx.js';
+	import { setCtx } from '../ctx.js';
+	import * as GFform from '$lib/components/form/index.js';
+	import { GFButton } from '$components/index.js';
+	import { superForm, superValidateSync } from 'sveltekit-superforms/client';
 
 	type $$Props = Props;
 
 	export let formId: $$Props['formId'] = undefined;
 
-	setCtx({
+	const {
+		methods: { onSubmitForm },
+		helpers: { getColumnSpan, showFieldLabel },
+		states: { formSchema, formFields, formRequiredIndicator, formObject },
+		refs: { formRef }
+	} = setCtx({
 		formId: formId
 	});
 
-	const {
-		states: { formObject }
-	} = getCtx();
+	$: form = $formSchema
+		? superForm(superValidateSync($formSchema), {
+				SPA: true,
+				validators: $formSchema,
+				// Reset the form upon a successful result
+				applyAction: true,
+				invalidateAll: true,
+				resetForm: true,
+				async onUpdate({ form }) {
+					if (form.valid) {
+						if (!form.data) return;
+						await onSubmitForm(form.data);
+					}
+				}
+			})
+		: undefined;
 </script>
 
-<GFForm bind:formId />
+{#if !form}
+	<p>Please provide a formId</p>
+{:else}
+	<GFform.Root
+		asChild
+		method="POST"
+		{form}
+		controlled
+		schema={$formSchema}
+		let:enhance
+		let:attrs
+		let:config
+		{...$$restProps}
+	>
+		<form
+			class="grid w-full max-w-xl grid-cols-12 gap-x-6"
+			method="POST"
+			bind:this={$formRef}
+			use:enhance
+			{...attrs}
+		>
+			{#if $formFields}
+				{#each $formFields as field, i}
+					<div
+						data-svelte-gf-field-id={i}
+						class={field.layoutGridColumnSpan ? getColumnSpan(field.layoutGridColumnSpan) : ''}
+					>
+						<GFform.Field {config} name={`input_${field.id}`}>
+							<GFform.Item>
+								{#if field.label && showFieldLabel(field.labelPlacement, 'above')}
+									<GFform.Label>
+										{field.label}
+										{#if field.isRequired}
+											{#if $formRequiredIndicator == 'asterisk'}
+												<span class="text-red-600">*</span>
+											{:else if $formRequiredIndicator == 'text'}
+												<span class="text-muted-foreground text-xs"> (required)</span>
+											{/if}
+										{/if}
+									</GFform.Label>
+									{#if field.description && field.descriptionPlacement == 'above'}
+										<GFform.Description>{field.description}</GFform.Description>
+									{/if}
+									<GFform.Input
+										value={field.defaultValue ?? undefined}
+										placeholder={field.placeholder ?? ''}
+									/>
+									{#if field.label && showFieldLabel(field.labelPlacement, 'below')}
+										<GFform.Description>{field.description}</GFform.Description>
+									{/if}
+								{/if}
+								<GFform.Validation />
+							</GFform.Item>
+						</GFform.Field>
+					</div>
+				{/each}
+			{/if}
+			<GFform.Button class="" size="lg" type="submit"></GFform.Button>
+		</form>
+	</GFform.Root>
+{/if}
 
 {#if $formObject}
 	<div class="mt-6 max-w-lg bg-black p-2 text-left text-white">
diff --git a/apps/svelte-gravity-forms/src/lib/components/ui/form/form-input.svelte b/apps/svelte-gravity-forms/src/lib/components/ui/form/form-input.svelte
deleted file mode 100644
index 2cada46..0000000
--- a/apps/svelte-gravity-forms/src/lib/components/ui/form/form-input.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { getFormField } from 'formsnap';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { Input, type InputEvents } from '$lib/components/ui/input/index.js';
-
-	type $$Props = HTMLInputAttributes;
-	type $$Events = InputEvents;
-
-	const { attrStore, value } = getFormField();
-</script>
-
-<Input
-	{...$attrStore}
-	bind:value={$value}
-	{...$$restProps}
-	on:blur
-	on:change
-	on:click
-	on:focus
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	on:input
-/>
diff --git a/apps/svelte-gravity-forms/src/lib/components/ui/form/index.ts b/apps/svelte-gravity-forms/src/lib/components/ui/form/index.ts
index 6028eeb..c961067 100644
--- a/apps/svelte-gravity-forms/src/lib/components/ui/form/index.ts
+++ b/apps/svelte-gravity-forms/src/lib/components/ui/form/index.ts
@@ -3,7 +3,7 @@ import * as RadioGroupComp from '$lib/components/ui/radio-group/index.js';
 import * as SelectComp from '$lib/components/ui/select/index.js';
 import type { Writable } from 'svelte/store';
 import Item from './form-item.svelte';
-import Input from './form-input.svelte';
+import { Input } from '$components/input/index.js';
 import Textarea from './form-textarea.svelte';
 import Description from './form-description.svelte';
 import Label from './form-label.svelte';
diff --git a/apps/svelte-gravity-forms/src/lib/components/validation/index.ts b/apps/svelte-gravity-forms/src/lib/components/validation/index.ts
new file mode 100644
index 0000000..7556fab
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/validation/index.ts
@@ -0,0 +1,7 @@
+import Root from './validation.svelte';
+
+export {
+	Root,
+	//
+	Root as Validation
+};
diff --git a/apps/svelte-gravity-forms/src/lib/components/validation/validation.svelte b/apps/svelte-gravity-forms/src/lib/components/validation/validation.svelte
new file mode 100644
index 0000000..6ca08c8
--- /dev/null
+++ b/apps/svelte-gravity-forms/src/lib/components/validation/validation.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Form as FormPrimitive } from 'formsnap';
+	import { cn } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<FormPrimitive.Validation
+	class={cn('text-destructive text-sm font-medium', className)}
+	{...$$restProps}
+/>
diff --git a/apps/svelte-gravity-forms/src/lib/internal/types.ts b/apps/svelte-gravity-forms/src/lib/internal/types.ts
index 62e803e..0a53b1d 100644
--- a/apps/svelte-gravity-forms/src/lib/internal/types.ts
+++ b/apps/svelte-gravity-forms/src/lib/internal/types.ts
@@ -29,7 +29,7 @@ export type GFFieldsProps = {
 	choices?: string;
 	conditionalLogic?: string;
 	productField?: string;
-	layoutGridColumnSpan?: string;
+	layoutGridColumnSpan?: number;
 	enablePasswordInput?: boolean;
 	enableEnhancedUI?: number;
 	layoutGroupId?: string;