@auto-engineer/generate-react-client 1.64.0 → 1.66.0

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

@@ -1,70 +1,70 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@/components/ui/Button';
 import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerClose,
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
 } from '@/components/ui/Drawer';
-import { Button } from '@/components/ui/Button';
 
 const meta: Meta<typeof Drawer> = {
-  title: 'UI Components/Drawer',
-  component: Drawer,
+	title: 'UI Components/Drawer',
+	component: Drawer,
 };
 export default meta;
 type Story = StoryObj<typeof Drawer>;
 
 /** Shows a bottom drawer with a title, description, body content, and action buttons. */
 export const Default: Story = {
-  render: () => (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Move Goal</DrawerTitle>
-          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-        </DrawerHeader>
-        <div className="p-4">
-          <p className="text-muted-foreground text-sm">Adjust the settings below to configure your preferences.</p>
-        </div>
-        <DrawerFooter>
-          <Button>Submit</Button>
-          <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
+	render: () => (
+		<Drawer>
+			<DrawerTrigger asChild>
+				<Button variant="outline">Open Drawer</Button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>Move Goal</DrawerTitle>
+					<DrawerDescription>Set your daily activity goal.</DrawerDescription>
+				</DrawerHeader>
+				<div className="p-4">
+					<p className="text-muted-foreground text-sm">Adjust the settings below to configure your preferences.</p>
+				</div>
+				<DrawerFooter>
+					<Button>Submit</Button>
+					<DrawerClose asChild>
+						<Button variant="outline">Cancel</Button>
+					</DrawerClose>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	),
 };
 
 /** Shows a drawer sliding in from the right side, useful for side panels and detail views. */
 export const RightSide: Story = {
-  render: () => (
-    <Drawer direction="right">
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Right Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Side Panel</DrawerTitle>
-          <DrawerDescription>This drawer opens from the right side.</DrawerDescription>
-        </DrawerHeader>
-        <div className="p-4">
-          <p className="text-muted-foreground text-sm">Content goes here.</p>
-        </div>
-        <DrawerFooter>
-          <DrawerClose asChild>
-            <Button variant="outline">Close</Button>
-          </DrawerClose>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  ),
+	render: () => (
+		<Drawer direction="right">
+			<DrawerTrigger asChild>
+				<Button variant="outline">Open Right Drawer</Button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>Side Panel</DrawerTitle>
+					<DrawerDescription>This drawer opens from the right side.</DrawerDescription>
+				</DrawerHeader>
+				<div className="p-4">
+					<p className="text-muted-foreground text-sm">Content goes here.</p>
+				</div>
+				<DrawerFooter>
+					<DrawerClose asChild>
+						<Button variant="outline">Close</Button>
+					</DrawerClose>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	),
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
 
 import { cn } from '@/lib/utils';
@@ -10,36 +10,36 @@ import { cn } from '@/lib/utils';
  * Compose with DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, and DrawerFooter.
  */
 function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
 /** Button or element that opens the drawer when clicked. */
 function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
 /** Renders drawer content into a React portal. */
 function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
 /** Programmatic close trigger for the drawer. */
 function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 /** Semi-transparent backdrop behind the drawer that dims the page content. */
 function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /**
@@ -47,78 +47,78 @@ function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof Draw
  * Automatically shows a drag handle for bottom drawers.
  */
 function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
-          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
-          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
-          className,
-        )}
-        {...props}
-      >
-        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  );
+	return (
+		<DrawerPortal data-slot="drawer-portal">
+			<DrawerOverlay />
+			<DrawerPrimitive.Content
+				data-slot="drawer-content"
+				className={cn(
+					'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+					'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+					'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+					'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
+					'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+					className,
+				)}
+				{...props}
+			>
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DrawerPortal>
+	);
 }
 
 /** Container for DrawerTitle and DrawerDescription at the top of the drawer. */
 function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn(
+				'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** Container for action buttons at the bottom of the drawer. */
 function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="drawer-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
+	return <div data-slot="drawer-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
 }
 
 /** Accessible title for the drawer. */
 function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn('text-foreground font-semibold', className)}
-      {...props}
-    />
-  );
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn('text-foreground font-semibold', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Accessible description text for the drawer, displayed below the title. */
 function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
+	return (
+		<DrawerPrimitive.Description
+			data-slot="drawer-description"
+			className={cn('text-muted-foreground text-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
 };

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

@@ -1,74 +1,74 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CreditCardIcon, LogOutIcon, SettingsIcon, UserIcon } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
 import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuTrigger,
 } from '@/components/ui/DropdownMenu';
-import { Button } from '@/components/ui/Button';
-import { UserIcon, SettingsIcon, LogOutIcon, CreditCardIcon } from 'lucide-react';
 
 const meta: Meta<typeof DropdownMenu> = {
-  title: 'UI Components/DropdownMenu',
-  component: DropdownMenu,
+	title: 'UI Components/DropdownMenu',
+	component: DropdownMenu,
 };
 export default meta;
 type Story = StoryObj<typeof DropdownMenu>;
 
 /** Shows a dropdown menu with grouped items, icons, keyboard shortcuts, and a destructive logout action. */
 export const Default: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open Menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <UserIcon />
-            <span>Profile</span>
-            <DropdownMenuShortcut>Ctrl+P</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CreditCardIcon />
-            <span>Billing</span>
-            <DropdownMenuShortcut>Ctrl+B</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <SettingsIcon />
-            <span>Settings</span>
-            <DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem variant="destructive">
-          <LogOutIcon />
-          <span>Log out</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
+	render: () => (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline">Open Menu</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent className="w-56">
+				<DropdownMenuLabel>My Account</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					<DropdownMenuItem>
+						<UserIcon />
+						<span>Profile</span>
+						<DropdownMenuShortcut>Ctrl+P</DropdownMenuShortcut>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						<CreditCardIcon />
+						<span>Billing</span>
+						<DropdownMenuShortcut>Ctrl+B</DropdownMenuShortcut>
+					</DropdownMenuItem>
+					<DropdownMenuItem>
+						<SettingsIcon />
+						<span>Settings</span>
+						<DropdownMenuShortcut>Ctrl+S</DropdownMenuShortcut>
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem variant="destructive">
+					<LogOutIcon />
+					<span>Log out</span>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	),
 };
 
 /** Shows a minimal dropdown menu with basic edit/duplicate/delete actions. */
 export const Simple: Story = {
-  render: () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline">Actions</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem>Edit</DropdownMenuItem>
-        <DropdownMenuItem>Duplicate</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ),
+	render: () => (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline">Actions</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				<DropdownMenuItem>Edit</DropdownMenuItem>
+				<DropdownMenuItem>Duplicate</DropdownMenuItem>
+				<DropdownMenuSeparator />
+				<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	),
 };