create-auto-app 1.34.0 → 1.35.0

package/templates/typical/client/src/components/ui/Item.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions } from '@/components/ui/Item';
-import { Button } from '@/components/ui/Button';
-
-const meta: Meta<typeof Item> = {
-  title: 'UI Components/Item',
-  component: Item,
-};
-export default meta;
-type Story = StoryObj<typeof Item>;
-
-/** Standard item with title, description, and action buttons. */
-export const Default: Story = {
-  render: () => (
-    <Item>
-      <ItemContent>
-        <ItemTitle>Item Title</ItemTitle>
-        <ItemDescription>This is a description of the item with some details.</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="outline" size="sm">
-          Edit
-        </Button>
-        <Button variant="ghost" size="sm">
-          Delete
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
-};
-
-/** Item with visible border using the outline variant. */
-export const OutlineVariant: Story = {
-  render: () => (
-    <Item variant="outline">
-      <ItemContent>
-        <ItemTitle>Outline Item</ItemTitle>
-        <ItemDescription>An item displayed with the outline variant and a visible border.</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="outline" size="sm">
-          View
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
-};
-
-/** Compact item with reduced padding for dense lists. */
-export const SmallSize: Story = {
-  render: () => (
-    <Item size="sm">
-      <ItemContent>
-        <ItemTitle>Small Item</ItemTitle>
-        <ItemDescription>Compact item with reduced padding.</ItemDescription>
-      </ItemContent>
-      <ItemActions>
-        <Button variant="ghost" size="sm">
-          Action
-        </Button>
-      </ItemActions>
-    </Item>
-  ),
-};

package/templates/typical/client/src/components/ui/Item.tsx

@@ -1,168 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-import { Separator } from '@/components/ui/Separator';
-
-/** Container for a list of Item components. Provides list semantics for accessibility. */
-function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div role="list" data-slot="item-group" className={cn('group/item-group flex flex-col', className)} {...props} />
-  );
-}
-
-/** Horizontal divider between items in an ItemGroup. */
-function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
-  return <Separator data-slot="item-separator" orientation="horizontal" className={cn('my-0', className)} {...props} />;
-}
-
-const itemVariants = cva(
-  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: 'border-border',
-        muted: 'bg-muted/50',
-      },
-      size: {
-        default: 'p-4 gap-4 ',
-        sm: 'py-3 px-4 gap-2.5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-/** A flexible list item for displaying structured content like notifications, settings rows, or search results. Compose with ItemMedia, ItemContent, ItemTitle, ItemDescription, and ItemActions. */
-function Item({
-  className,
-  variant = 'default',
-  size = 'default',
-  asChild = false,
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : 'div';
-  return (
-    <Comp
-      data-slot="item"
-      data-variant={variant}
-      data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-const itemMediaVariants = cva(
-  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-/** Container for an icon, avatar, or image at the start of an Item. Use variant="icon" for styled icon backgrounds or variant="image" for thumbnails. */
-function ItemMedia({
-  className,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
-  return (
-    <div
-      data-slot="item-media"
-      data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
-      {...props}
-    />
-  );
-}
-
-/** Main content area of an Item, containing title and description. */
-function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-content"
-      className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
-      {...props}
-    />
-  );
-}
-
-/** Primary text label for an Item. */
-function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-title"
-      className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
-      {...props}
-    />
-  );
-}
-
-/** Secondary text below the title, limited to 2 lines. */
-function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  return (
-    <p
-      data-slot="item-description"
-      className={cn(
-        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Container for action buttons at the end of an Item. */
-function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />;
-}
-
-/** Full-width header row spanning the top of an Item, with space-between layout. */
-function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn('flex basis-full items-center justify-between gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-/** Full-width footer row spanning the bottom of an Item, with space-between layout. */
-function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="item-footer"
-      className={cn('flex basis-full items-center justify-between gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemActions,
-  ItemGroup,
-  ItemSeparator,
-  ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
-};

package/templates/typical/client/src/components/ui/Kbd.stories.tsx

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Kbd } from './Kbd';
-
-const meta: Meta<typeof Kbd> = {
-  title: 'UI Components/Kbd',
-  component: Kbd,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Shows a single keyboard key shortcut. */
-export const Default: Story = {
-  args: {
-    children: '⌘K',
-  },
-};
-
-/** Shows a key with a text label like "Ctrl". */
-export const WithText: Story = {
-  args: {
-    children: 'Ctrl',
-  },
-};
-
-/** Shows a key with an arrow symbol. */
-export const ArrowKeys: Story = {
-  args: {
-    children: '→',
-  },
-};
-
-/** Shows two keys composed together to represent a shortcut combination. */
-export const Multiple: Story = {
-  render: () => (
-    <div className="flex gap-2 items-center">
-      <Kbd>⌘</Kbd>
-      <span>+</span>
-      <Kbd>K</Kbd>
-    </div>
-  ),
-};
-
-/** Shows a three-key combination shortcut. */
-export const Combination: Story = {
-  render: () => (
-    <div className="flex gap-2 items-center">
-      <Kbd>Ctrl</Kbd>
-      <span>+</span>
-      <Kbd>Shift</Kbd>
-      <span>+</span>
-      <Kbd>P</Kbd>
-    </div>
-  ),
-};

package/templates/typical/client/src/components/ui/Kbd.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { cn } from '@/lib/utils';
-
-interface KbdProps {
-  children: React.ReactNode;
-  className?: string;
-}
-
-/**
- * Renders inline keyboard key indicators, styled to look like physical keys.
- * Use to display keyboard shortcuts or key combinations in documentation and UI hints.
- */
-export function Kbd({ children, className }: KbdProps) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn('border border-border rounded bg-muted px-1.5 py-0.5 text-xs font-medium', className)}
-    >
-      {children}
-    </kbd>
-  );
-}

package/templates/typical/client/src/components/ui/Label.stories.tsx

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Label } from './Label';
-
-const meta: Meta<typeof Label> = {
-  title: 'UI Components/Label',
-  component: Label,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: { type: 'radio' },
-      options: ['default', 'required'],
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    htmlFor: {
-      control: { type: 'text' },
-    },
-    children: {
-      control: { type: 'text' },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Shows a basic label associated with a form field. */
-export const Default: Story = {
-  args: {
-    children: 'Email address',
-    htmlFor: 'email',
-  },
-};
-
-/** Shows the label with the required prop, which appends a red asterisk. */
-export const Required: Story = {
-  args: {
-    children: 'Email address',
-    htmlFor: 'email',
-    required: true,
-  },
-};
-
-/** Shows the label using the "required" variant prop directly. */
-export const RequiredVariant: Story = {
-  args: {
-    children: 'Email address',
-    htmlFor: 'email',
-    variant: 'required',
-  },
-};
-
-/** Shows the label paired with a text input in a form layout. */
-export const WithForm: Story = {
-  render: (args) => (
-    <div className="space-y-2">
-      <Label htmlFor="example-input" required>
-        Example Field
-      </Label>
-      <input
-        id="example-input"
-        type="text"
-        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-        placeholder="Enter value..."
-      />
-    </div>
-  ),
-};
-
-/** Demonstrates the dimmed appearance when the associated input is disabled. */
-export const DisabledField: Story = {
-  render: (args) => (
-    <div className="space-y-2">
-      <Label htmlFor="disabled-input" required>
-        Disabled Field
-      </Label>
-      <input
-        id="disabled-input"
-        type="text"
-        disabled
-        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-        placeholder="Disabled input..."
-      />
-    </div>
-  ),
-};

package/templates/typical/client/src/components/ui/Label.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-  {
-    variants: {
-      variant: {
-        default: 'text-foreground',
-        required: "text-foreground after:content-['*'] after:ml-1 after:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
-  htmlFor?: string;
-  required?: boolean;
-  children?: React.ReactNode;
-}
-
-/**
- * An accessible label associated with a form control via the htmlFor prop.
- * Supports a "required" variant that appends a red asterisk, and automatically dims when its peer input is disabled.
- */
-const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, variant, required, ...props }, ref) => {
-  const effectiveVariant = required ? 'required' : variant || 'default';
-
-  return (
-    <label
-      ref={ref}
-      data-slot="label"
-      className={cn(labelVariants({ variant: effectiveVariant }), className)}
-      {...props}
-    />
-  );
-});
-Label.displayName = 'Label';
-
-export { Label, labelVariants };

package/templates/typical/client/src/components/ui/Menubar.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarShortcut,
-} from '@/components/ui/Menubar';
-
-const meta: Meta<typeof Menubar> = {
-  title: 'UI Components/Menubar',
-  component: Menubar,
-};
-export default meta;
-type Story = StoryObj<typeof Menubar>;
-
-/** Shows a menubar with File and Edit menus containing items and keyboard shortcuts. */
-export const Default: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Save <MenubarShortcut>Ctrl+S</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Exit</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            Undo <MenubarShortcut>Ctrl+Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Redo <MenubarShortcut>Ctrl+Y</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Cut</MenubarItem>
-          <MenubarItem>Copy</MenubarItem>
-          <MenubarItem>Paste</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};
-
-/** Demonstrates menu sections organized with labels to group related items. */
-export const WithLabels: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarLabel>Appearance</MenubarLabel>
-          <MenubarItem>Zoom In</MenubarItem>
-          <MenubarItem>Zoom Out</MenubarItem>
-          <MenubarSeparator />
-          <MenubarLabel>Layout</MenubarLabel>
-          <MenubarItem>Full Screen</MenubarItem>
-          <MenubarItem>Side by Side</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};