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

package/dist/starter/src/App.tsx

@@ -6,24 +6,22 @@ import { Separator } from '@/components/ui/Separator';
 const queryClient = new QueryClient();
 
 const LandingPage = () => (
-  <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/50">
-    <Card className="border-0 shadow-none bg-transparent">
-      <CardContent className="flex flex-col items-center gap-6">
-        <h1 className="text-5xl md:text-7xl font-extralight tracking-tight text-foreground">
-          Your ideas await
-        </h1>
-        <Separator className="w-16 bg-muted-foreground/30" />
-      </CardContent>
-    </Card>
-  </div>
+	<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/50">
+		<Card className="border-0 shadow-none bg-transparent">
+			<CardContent className="flex flex-col items-center gap-6">
+				<h1 className="text-5xl md:text-7xl font-extralight tracking-tight text-foreground">Your ideas await</h1>
+				<Separator className="w-16 bg-muted-foreground/30" />
+			</CardContent>
+		</Card>
+	</div>
 );
 
 export const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<LandingPage />} />
-      </Routes>
-    </BrowserRouter>
-  </QueryClientProvider>
+	<QueryClientProvider client={queryClient}>
+		<BrowserRouter>
+			<Routes>
+				<Route path="/" element={<LandingPage />} />
+			</Routes>
+		</BrowserRouter>
+	</QueryClientProvider>
 );

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

@@ -1,49 +1,49 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/Accordion';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/Accordion';
 
 const meta: Meta<typeof Accordion> = {
-  title: 'UI Components/Accordion',
-  component: Accordion,
+	title: 'UI Components/Accordion',
+	component: Accordion,
 };
 export default meta;
 type Story = StoryObj<typeof Accordion>;
 
 /** Shows the accordion in single-select mode where only one item can be open at a time, with collapsible behavior. */
 export const Default: Story = {
-  render: () => (
-    <Accordion type="single" collapsible className="w-full max-w-md">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern for accordions.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>Yes. It uses CSS animations for smooth open and close transitions.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
+	render: () => (
+		<Accordion type="single" collapsible className="w-full max-w-md">
+			<AccordionItem value="item-1">
+				<AccordionTrigger>Is it accessible?</AccordionTrigger>
+				<AccordionContent>Yes. It adheres to the WAI-ARIA design pattern for accordions.</AccordionContent>
+			</AccordionItem>
+			<AccordionItem value="item-2">
+				<AccordionTrigger>Is it styled?</AccordionTrigger>
+				<AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>
+			</AccordionItem>
+			<AccordionItem value="item-3">
+				<AccordionTrigger>Is it animated?</AccordionTrigger>
+				<AccordionContent>Yes. It uses CSS animations for smooth open and close transitions.</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	),
 };
 
 /** Demonstrates multiple panels open simultaneously using `type="multiple"`. */
 export const Multiple: Story = {
-  render: () => (
-    <Accordion type="multiple" className="w-full max-w-md">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>First section</AccordionTrigger>
-        <AccordionContent>Content for the first section. Multiple items can be open at once.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Second section</AccordionTrigger>
-        <AccordionContent>Content for the second section. Try opening multiple items.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Third section</AccordionTrigger>
-        <AccordionContent>Content for the third section. All three can be open simultaneously.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
+	render: () => (
+		<Accordion type="multiple" className="w-full max-w-md">
+			<AccordionItem value="item-1">
+				<AccordionTrigger>First section</AccordionTrigger>
+				<AccordionContent>Content for the first section. Multiple items can be open at once.</AccordionContent>
+			</AccordionItem>
+			<AccordionItem value="item-2">
+				<AccordionTrigger>Second section</AccordionTrigger>
+				<AccordionContent>Content for the second section. Try opening multiple items.</AccordionContent>
+			</AccordionItem>
+			<AccordionItem value="item-3">
+				<AccordionTrigger>Third section</AccordionTrigger>
+				<AccordionContent>Content for the third section. All three can be open simultaneously.</AccordionContent>
+			</AccordionItem>
+		</Accordion>
+	),
 };

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

@@ -1,55 +1,55 @@
-import * as React from 'react';
 import { ChevronDownIcon } from 'lucide-react';
 import { Accordion as AccordionPrimitive } from 'radix-ui';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 /** Expandable content sections. Use `type="single"` for one open at a time, `type="multiple"` for many. */
 function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 /** A single collapsible section within an Accordion, identified by a unique `value` prop. */
 function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn('border-b last:border-b-0', className)}
-      {...props}
-    />
-  );
+	return (
+		<AccordionPrimitive.Item
+			data-slot="accordion-item"
+			className={cn('border-b last:border-b-0', className)}
+			{...props}
+		/>
+	);
 }
 
 /** The clickable heading that toggles the visibility of its associated AccordionContent. Renders a chevron icon that rotates when open. */
 function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
+				className={cn(
+					'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	);
 }
 
 /** The collapsible body of an AccordionItem, animated with slide-up/slide-down transitions. */
 function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn('pt-0 pb-4', className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
+	return (
+		<AccordionPrimitive.Content
+			data-slot="accordion-content"
+			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			{...props}
+		>
+			<div className={cn('pt-0 pb-4', className)}>{children}</div>
+		</AccordionPrimitive.Content>
+	);
 }
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -1,29 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Alert, AlertTitle, AlertDescription } from '@/components/ui/Alert';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/Alert';
 
 const meta: Meta<typeof Alert> = {
-  title: 'UI Components/Alert',
-  component: Alert,
+	title: 'UI Components/Alert',
+	component: Alert,
 };
 export default meta;
 type Story = StoryObj<typeof Alert>;
 
 /** Shows the default informational alert variant with a title and description. */
 export const Default: Story = {
-  render: () => (
-    <Alert>
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
-    </Alert>
-  ),
+	render: () => (
+		<Alert>
+			<AlertTitle>Heads up!</AlertTitle>
+			<AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+		</Alert>
+	),
 };
 
 /** Shows the destructive variant used for error or warning messages. */
 export const Destructive: Story = {
-  render: () => (
-    <Alert variant="destructive">
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-    </Alert>
-  ),
+	render: () => (
+		<Alert variant="destructive">
+			<AlertTitle>Error</AlertTitle>
+			<AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+		</Alert>
+	),
 };

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

@@ -1,22 +1,22 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
+	'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive:
+					'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
 );
 
 /**
@@ -25,32 +25,32 @@ const alertVariants = cva(
  * An optional leading SVG icon is automatically laid out in a grid column.
  */
 function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
+	return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />;
 }
 
 /** The heading of an Alert, rendered as a single-line truncated title. */
 function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+			{...props}
+		/>
+	);
 }
 
 /** The body text of an Alert, styled in muted foreground for secondary emphasis. */
 function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export { Alert, AlertTitle, AlertDescription };

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

@@ -1,67 +1,67 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from '@/components/ui/AlertDialog';
 import { Button } from '@/components/ui/Button';
 
 const meta: Meta<typeof AlertDialog> = {
-  title: 'UI Components/AlertDialog',
-  component: AlertDialog,
+	title: 'UI Components/AlertDialog',
+	component: AlertDialog,
 };
 export default meta;
 type Story = StoryObj<typeof AlertDialog>;
 
 /** Shows a standard confirmation dialog with cancel and continue actions. */
 export const Default: Story = {
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline">Delete Account</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your data from our
-            servers.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
+	render: () => (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="outline">Delete Account</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete your account and remove your data from our
+						servers.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction>Continue</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	),
 };
 
 /** Demonstrates a destructive confirmation using the destructive button variant for dangerous actions like deletion. */
 export const DestructiveAction: Story = {
-  render: () => (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive">Delete Item</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete this item?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This item will be permanently removed. This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  ),
+	render: () => (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive">Delete Item</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Delete this item?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This item will be permanently removed. This action cannot be undone.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	),
 };