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

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -7,60 +7,60 @@ import { cn } from '@/lib/utils';
  * Compose with CardHeader, CardTitle, CardDescription, CardContent, CardFooter, and CardAction.
  */
 function Card({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card"
-      className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="card"
+			className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className)}
+			{...props}
+		/>
+	);
 }
 
 /** The top section of a Card, containing the title, description, and optional action slot. */
 function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 /** The primary heading of a Card, rendered as semibold text. */
 function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />;
+	return <div data-slot="card-title" className={cn('leading-none font-semibold', className)} {...props} />;
 }
 
 /** A short summary below the CardTitle, styled in muted foreground. */
 function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
+	return <div data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />;
 }
 
 /** An optional action element (e.g., a button or menu) aligned to the top-right of the CardHeader. */
 function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			data-slot="card-action"
+			className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+			{...props}
+		/>
+	);
 }
 
 /** The main body area of a Card for arbitrary content. */
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
+	return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
 }
 
 /** The bottom section of a Card, typically used for action buttons or metadata. */
 function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div data-slot="card-footer" className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />
-  );
+	return (
+		<div data-slot="card-footer" className={cn('flex items-center px-6 [.border-t]:pt-6', className)} {...props} />
+	);
 }
 
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

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

@@ -1,56 +1,56 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@/components/ui/Carousel';
 import { Card, CardContent } from '@/components/ui/Card';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/Carousel';
 
 const meta: Meta<typeof Carousel> = {
-  title: 'UI Components/Carousel',
-  component: Carousel,
+	title: 'UI Components/Carousel',
+	component: Carousel,
 };
 export default meta;
 type Story = StoryObj<typeof Carousel>;
 
 /** Shows a basic carousel with one full-width slide visible at a time and navigation arrows. */
 export const Default: Story = {
-  render: () => (
-    <div className="w-full max-w-xs mx-auto">
-      <Carousel>
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  ),
+	render: () => (
+		<div className="w-full max-w-xs mx-auto">
+			<Carousel>
+				<CarouselContent>
+					{Array.from({ length: 5 }).map((_, index) => (
+						<CarouselItem key={index}>
+							<Card>
+								<CardContent className="flex aspect-square items-center justify-center p-6">
+									<span className="text-4xl font-semibold">{index + 1}</span>
+								</CardContent>
+							</Card>
+						</CarouselItem>
+					))}
+				</CarouselContent>
+				<CarouselPrevious />
+				<CarouselNext />
+			</Carousel>
+		</div>
+	),
 };
 
 /** Demonstrates showing three slides simultaneously using `basis-1/3` on each CarouselItem. */
 export const ThirdWidth: Story = {
-  render: () => (
-    <div className="w-full max-w-sm mx-auto">
-      <Carousel>
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="basis-1/3">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-2">
-                  <span className="text-2xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    </div>
-  ),
+	render: () => (
+		<div className="w-full max-w-sm mx-auto">
+			<Carousel>
+				<CarouselContent>
+					{Array.from({ length: 5 }).map((_, index) => (
+						<CarouselItem key={index} className="basis-1/3">
+							<Card>
+								<CardContent className="flex aspect-square items-center justify-center p-2">
+									<span className="text-2xl font-semibold">{index + 1}</span>
+								</CardContent>
+							</Card>
+						</CarouselItem>
+					))}
+				</CarouselContent>
+				<CarouselPrevious />
+				<CarouselNext />
+			</Carousel>
+		</div>
+	),
 };

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

@@ -1,11 +1,10 @@
 'use client';
 
-import * as React from 'react';
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
+import * as React from 'react';
 import { Button } from '@/components/ui/Button';
+import { cn } from '@/lib/utils';
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -13,31 +12,31 @@ type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: 'horizontal' | 'vertical';
-  setApi?: (api: CarouselApi) => void;
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: 'horizontal' | 'vertical';
+	setApi?: (api: CarouselApi) => void;
 };
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
 } & CarouselProps;
 
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+	const context = React.useContext(CarouselContext);
 
-  if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />');
-  }
+	if (!context) {
+		throw new Error('useCarousel must be used within a <Carousel />');
+	}
 
-  return context;
+	return context;
 }
 
 /**
@@ -46,180 +45,180 @@ function useCarousel() {
  * Supports horizontal and vertical orientation, and accepts Embla plugins (e.g., autoplay).
  */
 function Carousel({
-  orientation = 'horizontal',
-  opts,
-  setApi,
-  plugins,
-  className,
-  children,
-  ...props
+	orientation = 'horizontal',
+	opts,
+	setApi,
+	plugins,
+	className,
+	children,
+	...props
 }: React.ComponentProps<'div'> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
-    },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return;
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        scrollNext();
-      }
-    },
-    [scrollPrev, scrollNext],
-  );
-
-  React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-
-  React.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on('reInit', onSelect);
-    api.on('select', onSelect);
-
-    return () => {
-      api?.off('select', onSelect);
-    };
-  }, [api, onSelect]);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
-        role="region"
-        aria-roledescription="carousel"
-        data-slot="carousel"
-        {...props}
-      >
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
+	const [carouselRef, api] = useEmblaCarousel(
+		{
+			...opts,
+			axis: orientation === 'horizontal' ? 'x' : 'y',
+		},
+		plugins,
+	);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+	const onSelect = React.useCallback((api: CarouselApi) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+
+	const handleKeyDown = React.useCallback(
+		(event: React.KeyboardEvent<HTMLDivElement>) => {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				scrollNext();
+			}
+		},
+		[scrollPrev, scrollNext],
+	);
+
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on('reInit', onSelect);
+		api.on('select', onSelect);
+
+		return () => {
+			api?.off('select', onSelect);
+		};
+	}, [api, onSelect]);
+
+	return (
+		<CarouselContext.Provider
+			value={{
+				carouselRef,
+				api: api,
+				opts,
+				orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+				scrollPrev,
+				scrollNext,
+				canScrollPrev,
+				canScrollNext,
+			}}
+		>
+			<div
+				onKeyDownCapture={handleKeyDown}
+				className={cn('relative', className)}
+				role="region"
+				aria-roledescription="carousel"
+				data-slot="carousel"
+				{...props}
+			>
+				{children}
+			</div>
+		</CarouselContext.Provider>
+	);
 }
 
 /** The scrollable container for carousel slides. Wraps CarouselItem children in a flex layout. */
 function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
-  const { carouselRef, orientation } = useCarousel();
+	const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
-      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />
-    </div>
-  );
+	return (
+		<div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
+			<div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />
+		</div>
+	);
 }
 
 /** A single slide within the carousel. Takes full width by default; use `basis-*` classes to show multiple slides. */
 function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const { orientation } = useCarousel();
-
-  return (
-    <div
-      role="group"
-      aria-roledescription="slide"
-      data-slot="carousel-item"
-      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
-      {...props}
-    />
-  );
+	const { orientation } = useCarousel();
+
+	return (
+		<div
+			role="group"
+			aria-roledescription="slide"
+			data-slot="carousel-item"
+			className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
+			{...props}
+		/>
+	);
 }
 
 /** Navigation button to scroll to the previous slide, automatically disabled at the beginning. */
 function CarouselPrevious({
-  className,
-  variant = 'outline',
-  size = 'icon',
-  ...props
+	className,
+	variant = 'outline',
+	size = 'icon',
+	...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-
-  return (
-    <Button
-      data-slot="carousel-previous"
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -left-12 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-previous"
+			variant={variant}
+			size={size}
+			className={cn(
+				'absolute size-8 rounded-full',
+				orientation === 'horizontal'
+					? 'top-1/2 -left-12 -translate-y-1/2'
+					: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeft />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
 }
 
 /** Navigation button to scroll to the next slide, automatically disabled at the end. */
 function CarouselNext({
-  className,
-  variant = 'outline',
-  size = 'icon',
-  ...props
+	className,
+	variant = 'outline',
+	size = 'icon',
+	...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-
-  return (
-    <Button
-      data-slot="carousel-next"
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -right-12 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-next"
+			variant={variant}
+			size={size}
+			className={cn(
+				'absolute size-8 rounded-full',
+				orientation === 'horizontal'
+					? 'top-1/2 -right-12 -translate-y-1/2'
+					: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRight />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
 }
 
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

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

@@ -3,37 +3,37 @@ import { Bar, BarChart, XAxis, YAxis } from 'recharts';
 import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/Chart';
 
 const meta: Meta<typeof ChartContainer> = {
-  title: 'UI Components/Chart',
-  component: ChartContainer,
+	title: 'UI Components/Chart',
+	component: ChartContainer,
 };
 export default meta;
 type Story = StoryObj<typeof ChartContainer>;
 
 const chartData = [
-  { month: 'Jan', desktop: 186, mobile: 80 },
-  { month: 'Feb', desktop: 305, mobile: 200 },
-  { month: 'Mar', desktop: 237, mobile: 120 },
-  { month: 'Apr', desktop: 73, mobile: 190 },
-  { month: 'May', desktop: 209, mobile: 130 },
-  { month: 'Jun', desktop: 214, mobile: 140 },
+	{ month: 'Jan', desktop: 186, mobile: 80 },
+	{ month: 'Feb', desktop: 305, mobile: 200 },
+	{ month: 'Mar', desktop: 237, mobile: 120 },
+	{ month: 'Apr', desktop: 73, mobile: 190 },
+	{ month: 'May', desktop: 209, mobile: 130 },
+	{ month: 'Jun', desktop: 214, mobile: 140 },
 ];
 
 const chartConfig = {
-  desktop: { label: 'Desktop', color: 'var(--chart-1)' },
-  mobile: { label: 'Mobile', color: 'var(--chart-2)' },
+	desktop: { label: 'Desktop', color: 'var(--chart-1)' },
+	mobile: { label: 'Mobile', color: 'var(--chart-2)' },
 } satisfies ChartConfig;
 
 /** Shows a grouped bar chart with desktop and mobile data series, tooltips, and themed colors. */
 export const Default: Story = {
-  render: () => (
-    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-      <BarChart data={chartData}>
-        <XAxis dataKey="month" />
-        <YAxis />
-        <ChartTooltip content={<ChartTooltipContent />} />
-        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-      </BarChart>
-    </ChartContainer>
-  ),
+	render: () => (
+		<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+			<BarChart data={chartData}>
+				<XAxis dataKey="month" />
+				<YAxis />
+				<ChartTooltip content={<ChartTooltipContent />} />
+				<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+				<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+			</BarChart>
+		</ChartContainer>
+	),
 };