@auto-engineer/generate-react-client 1.63.0 → 1.65.0

package/dist/starter/src/components/ui/Field.stories.tsx

@@ -1,50 +1,50 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Field, FieldLabel, FieldDescription, FieldError, FieldContent } from '@/components/ui/Field';
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/ui/Field';
 import { Input } from '@/components/ui/Input';
 
 const meta: Meta<typeof Field> = {
-  title: 'UI Components/Field',
-  component: Field,
+	title: 'UI Components/Field',
+	component: Field,
 };
 export default meta;
 type Story = StoryObj<typeof Field>;
 
 /** Shows a vertical form field with label, input, and helper description text. */
 export const Default: Story = {
-  render: () => (
-    <Field>
-      <FieldLabel htmlFor="email">Email</FieldLabel>
-      <FieldContent>
-        <Input id="email" type="email" placeholder="you@example.com" />
-        <FieldDescription>We will never share your email.</FieldDescription>
-      </FieldContent>
-    </Field>
-  ),
+	render: () => (
+		<Field>
+			<FieldLabel htmlFor="email">Email</FieldLabel>
+			<FieldContent>
+				<Input id="email" type="email" placeholder="you@example.com" />
+				<FieldDescription>We will never share your email.</FieldDescription>
+			</FieldContent>
+		</Field>
+	),
 };
 
 /** Shows a field in an invalid state with error styling and a validation error message. */
 export const WithError: Story = {
-  render: () => (
-    <Field data-invalid="true">
-      <FieldLabel htmlFor="email-err">Email</FieldLabel>
-      <FieldContent>
-        <Input id="email-err" type="email" defaultValue="invalid-email" aria-invalid="true" />
-        <FieldDescription>Enter a valid email address.</FieldDescription>
-        <FieldError>Please enter a valid email address.</FieldError>
-      </FieldContent>
-    </Field>
-  ),
+	render: () => (
+		<Field data-invalid="true">
+			<FieldLabel htmlFor="email-err">Email</FieldLabel>
+			<FieldContent>
+				<Input id="email-err" type="email" defaultValue="invalid-email" aria-invalid="true" />
+				<FieldDescription>Enter a valid email address.</FieldDescription>
+				<FieldError>Please enter a valid email address.</FieldError>
+			</FieldContent>
+		</Field>
+	),
 };
 
 /** Shows a field with horizontal orientation where the label and input are side by side. */
 export const Horizontal: Story = {
-  render: () => (
-    <Field orientation="horizontal">
-      <FieldLabel htmlFor="name-h">Full Name</FieldLabel>
-      <FieldContent>
-        <Input id="name-h" placeholder="John Doe" />
-        <FieldDescription>Your first and last name.</FieldDescription>
-      </FieldContent>
-    </Field>
-  ),
+	render: () => (
+		<Field orientation="horizontal">
+			<FieldLabel htmlFor="name-h">Full Name</FieldLabel>
+			<FieldContent>
+				<Input id="name-h" placeholder="John Doe" />
+				<FieldDescription>Your first and last name.</FieldDescription>
+			</FieldContent>
+		</Field>
+	),
 };

package/dist/starter/src/components/ui/Field.tsx

@@ -1,28 +1,27 @@
 'use client';
 
-import { useMemo } from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
+import { useMemo } from 'react';
 import { Label } from '@/components/ui/Label';
 import { Separator } from '@/components/ui/Separator';
+import { cn } from '@/lib/utils';
 
 /**
  * A semantic fieldset container for grouping related form fields.
  * Use as a top-level wrapper around FieldGroup or multiple Field components.
  */
 function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        'flex flex-col gap-6',
-        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<fieldset
+			data-slot="field-set"
+			className={cn(
+				'flex flex-col gap-6',
+				'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /**
@@ -30,53 +29,53 @@ function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  * Use variant="label" for a smaller label-sized heading.
  */
 function FieldLegend({
-  className,
-  variant = 'legend',
-  ...props
+	className,
+	variant = 'legend',
+	...props
 }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}
-      {...props}
-    />
-  );
+	return (
+		<legend
+			data-slot="field-legend"
+			data-variant={variant}
+			className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Container for a group of Field components. Provides container query context for responsive layouts. */
 function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="field-group"
+			className={cn(
+				'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
-  variants: {
-    orientation: {
-      vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
-      horizontal: [
-        'flex-row items-center',
-        '[&>[data-slot=field-label]]:flex-auto',
-        'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-      ],
-      responsive: [
-        'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
-        '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
-        '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
-      ],
-    },
-  },
-  defaultVariants: {
-    orientation: 'vertical',
-  },
+	variants: {
+		orientation: {
+			vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+			horizontal: [
+				'flex-row items-center',
+				'[&>[data-slot=field-label]]:flex-auto',
+				'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+			responsive: [
+				'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+				'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+		},
+	},
+	defaultVariants: {
+		orientation: 'vertical',
+	},
 });
 
 /**
@@ -85,105 +84,105 @@ const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:tex
  * Set data-invalid="true" to apply error styling.
  */
 function Field({
-  className,
-  /** Layout direction: "vertical" stacks label above input, "horizontal" places them side by side, "responsive" switches at the md breakpoint. */
-  orientation = 'vertical',
-  ...props
+	className,
+	/** Layout direction: "vertical" stacks label above input, "horizontal" places them side by side, "responsive" switches at the md breakpoint. */
+	orientation = 'vertical',
+	...props
 }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			role="group"
+			data-slot="field"
+			data-orientation={orientation}
+			className={cn(fieldVariants({ orientation }), className)}
+			{...props}
+		/>
+	);
 }
 
 /** Container for the input element plus optional description and error within a Field. */
 function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="field-content"
+			className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Label for a form field. Supports wrapping checkbox/radio inputs for card-style selection. */
 function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<Label
+			data-slot="field-label"
+			className={cn(
+				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+				'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Non-interactive title text for a field, used when a label association is not needed. */
 function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="field-label"
+			className={cn(
+				'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Helper text displayed below the input to provide additional guidance. */
 function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<p
+			data-slot="field-description"
+			className={cn(
+				'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+				'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+				'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** A visual separator between fields within a FieldGroup. Optionally displays centered text. */
 function FieldSeparator({
-  children,
-  className,
-  ...props
+	children,
+	className,
+	...props
 }: React.ComponentProps<'div'> & {
-  children?: React.ReactNode;
+	children?: React.ReactNode;
 }) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  );
+	return (
+		<div
+			data-slot="field-separator"
+			data-content={!!children}
+			className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
+			{...props}
+		>
+			<Separator className="absolute inset-0 top-1/2" />
+			{children && (
+				<span
+					className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+					data-slot="field-separator-content"
+				>
+					{children}
+				</span>
+			)}
+		</div>
+	);
 }
 
 /**
@@ -191,61 +190,61 @@ function FieldSeparator({
  * Accepts either children or an errors array; deduplicates and renders as a list if multiple.
  */
 function FieldError({
-  className,
-  children,
-  /** Array of error objects with message strings. Automatically deduplicated. */
-  errors,
-  ...props
+	className,
+	children,
+	/** Array of error objects with message strings. Automatically deduplicated. */
+	errors,
+	...props
 }: React.ComponentProps<'div'> & {
-  errors?: Array<{ message?: string } | undefined>;
+	errors?: Array<{ message?: string } | undefined>;
 }) {
-  const content = useMemo(() => {
-    if (children) {
-      return children;
-    }
-
-    if (!errors?.length) {
-      return null;
-    }
-
-    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
-
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message;
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
-      </ul>
-    );
-  }, [children, errors]);
-
-  if (!content) {
-    return null;
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn('text-destructive text-sm font-normal', className)}
-      {...props}
-    >
-      {content}
-    </div>
-  );
+	const content = useMemo(() => {
+		if (children) {
+			return children;
+		}
+
+		if (!errors?.length) {
+			return null;
+		}
+
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+		if (uniqueErrors?.length === 1) {
+			return uniqueErrors[0]?.message;
+		}
+
+		return (
+			<ul className="ml-4 flex list-disc flex-col gap-1">
+				{uniqueErrors.map((error) => error?.message && <li key={error.message}>{error.message}</li>)}
+			</ul>
+		);
+	}, [children, errors]);
+
+	if (!content) {
+		return null;
+	}
+
+	return (
+		<div
+			role="alert"
+			data-slot="field-error"
+			className={cn('text-destructive text-sm font-normal', className)}
+			{...props}
+		>
+			{content}
+		</div>
+	);
 }
 
 export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
+	Field,
+	FieldLabel,
+	FieldDescription,
+	FieldError,
+	FieldGroup,
+	FieldLegend,
+	FieldSeparator,
+	FieldSet,
+	FieldContent,
+	FieldTitle,
 };

package/dist/starter/src/components/ui/Form.stories.tsx

@@ -1,45 +1,45 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useForm } from 'react-hook-form';
+import { type FieldValues, useForm } from 'react-hook-form';
+import { Button } from '@/components/ui/Button';
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form';
 import { Input } from '@/components/ui/Input';
-import { Button } from '@/components/ui/Button';
 
 const meta: Meta<typeof Form> = {
-  title: 'UI Components/Form',
-  component: Form,
+	title: 'UI Components/Form',
+	component: Form,
 };
 export default meta;
 type Story = StoryObj<typeof Form>;
 
 function FormDemo() {
-  const form = useForm({
-    defaultValues: { username: '' },
-  });
+	const form = useForm<FieldValues>({
+		defaultValues: { username: '' },
+	});
 
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(() => {})} className="w-full max-w-sm space-y-6">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter username" {...field} />
-              </FormControl>
-              <FormDescription>This is your public display name.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  );
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(() => {})} className="w-full max-w-sm space-y-6">
+				<FormField
+					control={form.control}
+					name="username"
+					render={({ field }) => (
+						<FormItem>
+							<FormLabel>Username</FormLabel>
+							<FormControl>
+								<Input placeholder="Enter username" {...field} />
+							</FormControl>
+							<FormDescription>This is your public display name.</FormDescription>
+							<FormMessage />
+						</FormItem>
+					)}
+				/>
+				<Button type="submit">Submit</Button>
+			</form>
+		</Form>
+	);
 }
 
 /** Demonstrates a complete form field with label, input, description, and validation message wiring. */
 export const Default: Story = {
-  render: () => <FormDemo />,
+	render: () => <FormDemo />,
 };