Updated Shad / Added forms

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-button.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import * as Button from '$comp/ui/button/index.js';
+
+    type $$Props = Button.Props;
+    type $$Events = Button.Events;
+</script>
+
+<Button.Root type="submit" on:click on:keydown {...$$restProps}>
+    <slot />
+</Button.Root>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-description.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import * as FormPrimitive from 'formsnap';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = FormPrimitive.DescriptionProps;
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+</script>
+
+<FormPrimitive.Description class={cn('text-[0.8rem] text-muted-foreground', className)} {...$$restProps} let:descriptionAttrs>
+    <slot {descriptionAttrs} />
+</FormPrimitive.Description>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-element-field.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
+    type T = Record<string, unknown>;
+    type U = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+    import type { HTMLAttributes } from 'svelte/elements';
+    import * as FormPrimitive from 'formsnap';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = FormPrimitive.ElementFieldProps<T, U> & HTMLAttributes<HTMLDivElement>;
+
+    export let form: SuperForm<T>;
+    export let name: U;
+
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+</script>
+
+<FormPrimitive.ElementField {form} {name} let:constraints let:errors let:tainted let:value>
+    <div class={cn('space-y-2', className)}>
+        <slot {constraints} {errors} {tainted} {value} />
+    </div>
+</FormPrimitive.ElementField>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-field-errors.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import * as FormPrimitive from 'formsnap';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = FormPrimitive.FieldErrorsProps & {
+        errorClasses?: string | undefined | null;
+    };
+
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+    export let errorClasses: $$Props['class'] = undefined;
+</script>
+
+<FormPrimitive.FieldErrors class={cn('text-[0.8rem] font-medium text-destructive', className)} {...$$restProps} let:errors let:fieldErrorsAttrs let:errorAttrs>
+    <slot {errors} {fieldErrorsAttrs} {errorAttrs}>
+        {#each errors as error}
+            <div {...errorAttrs} class={cn(errorClasses)}>{error}</div>
+        {/each}
+    </slot>
+</FormPrimitive.FieldErrors>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-field.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" context="module">
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    import type { FormPath, SuperForm } from 'sveltekit-superforms';
+    type T = Record<string, unknown>;
+    type U = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+    import type { HTMLAttributes } from 'svelte/elements';
+    import * as FormPrimitive from 'formsnap';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = FormPrimitive.FieldProps<T, U> & HTMLAttributes<HTMLElement>;
+
+    export let form: SuperForm<T>;
+    export let name: U;
+
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+</script>
+
+<FormPrimitive.Field {form} {name} let:constraints let:errors let:tainted let:value>
+    <div class={cn('space-y-2', className)}>
+        <slot {constraints} {errors} {tainted} {value} />
+    </div>
+</FormPrimitive.Field>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-fieldset.svelte

@@ -0,0 +1,23 @@
+<script lang="ts" context="module">
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    import type { FormPath, SuperForm } from 'sveltekit-superforms';
+    type T = Record<string, unknown>;
+    type U = unknown;
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+    import * as FormPrimitive from 'formsnap';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = FormPrimitive.FieldsetProps<T, U>;
+
+    export let form: SuperForm<T>;
+    export let name: U;
+
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+</script>
+
+<FormPrimitive.Fieldset {form} {name} let:constraints let:errors let:tainted let:value class={cn('space-y-2', className)}>
+    <slot {constraints} {errors} {tainted} {value} />
+</FormPrimitive.Fieldset>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { Label as LabelPrimitive } from 'bits-ui';
+    import { getFormControl } from 'formsnap';
+    import { Label } from '$comp/ui/label/index.js';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = LabelPrimitive.Props;
+
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+
+    const { labelAttrs } = getFormControl();
+</script>
+
+<Label {...$labelAttrs} class={cn('data-[fs-error]:text-destructive', className)} {...$$restProps}>
+    <slot {labelAttrs} />
+</Label>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/form-legend.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import * as FormPrimitive from 'formsnap';
+    import { cn } from '$lib/utils.js';
+
+    type $$Props = FormPrimitive.LegendProps;
+
+    let className: $$Props['class'] = undefined;
+    export { className as class };
+</script>
+
+<FormPrimitive.Legend {...$$restProps} class={cn('text-sm font-medium leading-none data-[fs-error]:text-destructive', className)} let:legendAttrs>
+    <slot {legendAttrs} />
+</FormPrimitive.Legend>

src/Exceptionless.Web/ClientApp/src/lib/components/ui/form/index.ts

@@ -0,0 +1,33 @@
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Button from './form-button.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.svelte';
+
+const Control = FormPrimitive.Control;
+
+export {
+    Field,
+    Control,
+    Label,
+    FieldErrors,
+    Description,
+    Fieldset,
+    Legend,
+    ElementField,
+    Button,
+    //
+    Field as FormField,
+    Control as FormControl,
+    Description as FormDescription,
+    Label as FormLabel,
+    FieldErrors as FormFieldErrors,
+    Fieldset as FormFieldset,
+    Legend as FormLegend,
+    ElementField as FormElementField,
+    Button as FormButton
+};