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

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

@@ -1,58 +1,58 @@
-import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/Collapsible';
+import { useState } from 'react';
 import { Button } from '@/components/ui/Button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible';
 
 const meta: Meta<typeof Collapsible> = {
-  title: 'UI Components/Collapsible',
-  component: Collapsible,
+	title: 'UI Components/Collapsible',
+	component: Collapsible,
 };
 export default meta;
 type Story = StoryObj<typeof Collapsible>;
 
 function CollapsibleDemo() {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">3 items tagged</h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm">
-            {isOpen ? 'Hide' : 'Show'}
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/primitives</div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/colors</div>
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@stitches/react</div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+			<div className="flex items-center justify-between space-x-4 px-4">
+				<h4 className="text-sm font-semibold">3 items tagged</h4>
+				<CollapsibleTrigger asChild>
+					<Button variant="ghost" size="sm">
+						{isOpen ? 'Hide' : 'Show'}
+					</Button>
+				</CollapsibleTrigger>
+			</div>
+			<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/primitives</div>
+			<CollapsibleContent className="space-y-2">
+				<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/colors</div>
+				<div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@stitches/react</div>
+			</CollapsibleContent>
+		</Collapsible>
+	);
 }
 
 /** Shows a controlled collapsible section that starts closed and can be toggled with a button. */
 export const Default: Story = {
-  render: () => <CollapsibleDemo />,
+	render: () => <CollapsibleDemo />,
 };
 
 /** Shows a collapsible section that starts in the open state using `defaultOpen`. */
 export const DefaultOpen: Story = {
-  render: () => (
-    <Collapsible defaultOpen className="w-[350px] space-y-2">
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">Additional details</h4>
-        <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm">
-            Toggle
-          </Button>
-        </CollapsibleTrigger>
-      </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-2 text-sm shadow-sm">
-          This section is open by default and can be collapsed.
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  ),
+	render: () => (
+		<Collapsible defaultOpen className="w-[350px] space-y-2">
+			<div className="flex items-center justify-between space-x-4 px-4">
+				<h4 className="text-sm font-semibold">Additional details</h4>
+				<CollapsibleTrigger asChild>
+					<Button variant="ghost" size="sm">
+						Toggle
+					</Button>
+				</CollapsibleTrigger>
+			</div>
+			<CollapsibleContent className="space-y-2">
+				<div className="rounded-md border px-4 py-2 text-sm shadow-sm">
+					This section is open by default and can be collapsed.
+				</div>
+			</CollapsibleContent>
+		</Collapsible>
+	),
 };

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

@@ -2,17 +2,17 @@ import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
 
 /** A disclosure widget that toggles content visibility. Compose with CollapsibleTrigger and CollapsibleContent. */
 function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 /** The interactive element that toggles the CollapsibleContent open or closed. */
 function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+	return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
 }
 
 /** The content region that is shown or hidden when the Collapsible is toggled. */
 function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+	return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
 }
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -1,75 +1,75 @@
-import * as React from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
 import {
-  Combobox,
-  ComboboxInput,
-  ComboboxContent,
-  ComboboxList,
-  ComboboxItem,
-  ComboboxEmpty,
+	Combobox,
+	ComboboxContent,
+	ComboboxEmpty,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxList,
 } from '@/components/ui/Combobox';
 
 const frameworks = [
-  { value: 'react', label: 'React' },
-  { value: 'vue', label: 'Vue' },
-  { value: 'angular', label: 'Angular' },
-  { value: 'svelte', label: 'Svelte' },
-  { value: 'solid', label: 'SolidJS' },
+	{ value: 'react', label: 'React' },
+	{ value: 'vue', label: 'Vue' },
+	{ value: 'angular', label: 'Angular' },
+	{ value: 'svelte', label: 'Svelte' },
+	{ value: 'solid', label: 'SolidJS' },
 ];
 
 function SearchableCombobox() {
-  const [value, setValue] = React.useState<string | null>(null);
+	const [value, setValue] = React.useState<string | null>(null);
 
-  return (
-    <Combobox value={value} onValueChange={setValue}>
-      <ComboboxInput placeholder="Search frameworks..." />
-      <ComboboxContent>
-        <ComboboxList>
-          {frameworks.map((fw) => (
-            <ComboboxItem key={fw.value} value={fw.value}>
-              {fw.label}
-            </ComboboxItem>
-          ))}
-          <ComboboxEmpty>No framework found.</ComboboxEmpty>
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  );
+	return (
+		<Combobox value={value} onValueChange={setValue}>
+			<ComboboxInput placeholder="Search frameworks..." />
+			<ComboboxContent>
+				<ComboboxList>
+					{frameworks.map((fw) => (
+						<ComboboxItem key={fw.value} value={fw.value}>
+							{fw.label}
+						</ComboboxItem>
+					))}
+					<ComboboxEmpty>No framework found.</ComboboxEmpty>
+				</ComboboxList>
+			</ComboboxContent>
+		</Combobox>
+	);
 }
 
 function ClearableCombobox() {
-  const [value, setValue] = React.useState<string | null>(null);
+	const [value, setValue] = React.useState<string | null>(null);
 
-  return (
-    <Combobox value={value} onValueChange={setValue}>
-      <ComboboxInput placeholder="Pick a framework..." showClear />
-      <ComboboxContent>
-        <ComboboxList>
-          {frameworks.map((fw) => (
-            <ComboboxItem key={fw.value} value={fw.value}>
-              {fw.label}
-            </ComboboxItem>
-          ))}
-          <ComboboxEmpty>No framework found.</ComboboxEmpty>
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
-  );
+	return (
+		<Combobox value={value} onValueChange={setValue}>
+			<ComboboxInput placeholder="Pick a framework..." showClear />
+			<ComboboxContent>
+				<ComboboxList>
+					{frameworks.map((fw) => (
+						<ComboboxItem key={fw.value} value={fw.value}>
+							{fw.label}
+						</ComboboxItem>
+					))}
+					<ComboboxEmpty>No framework found.</ComboboxEmpty>
+				</ComboboxList>
+			</ComboboxContent>
+		</Combobox>
+	);
 }
 
 const meta: Meta = {
-  title: 'UI Components/Combobox',
-  component: ComboboxInput,
+	title: 'UI Components/Combobox',
+	component: ComboboxInput,
 };
 export default meta;
 type Story = StoryObj;
 
 /** Shows a searchable combobox with type-ahead filtering of framework options. */
 export const Default: Story = {
-  render: () => <SearchableCombobox />,
+	render: () => <SearchableCombobox />,
 };
 
 /** Demonstrates the combobox with a clear button that resets the selection. */
 export const WithClear: Story = {
-  render: () => <ClearableCombobox />,
+	render: () => <ClearableCombobox />,
 };