create-auto-app 1.33.0 → 1.35.0

package/templates/typical/client/src/components/ui/DesignSystem-Typography.mdx

@@ -1,31 +0,0 @@
-import { Meta, Stories } from '@storybook/addon-docs/blocks';
-
-<Meta title="Design System/Typography" />
-
-# Typography
-
-Typography classes used across the design system. All styles are composed from
-Tailwind CSS utility classes -- no custom font-size tokens are needed.
-
-## Reference
-
-| Element | Tailwind Classes | Usage |
-| --- | --- | --- |
-| **H1** | `text-5xl font-extrabold tracking-tight` | Hero or display headings |
-| **H2** | `text-4xl font-bold tracking-tight` | Page-level headings |
-| **H3** | `text-3xl font-bold` | Section headings |
-| **H4** | `text-2xl font-semibold` | Subsection headings |
-| **H5** | `text-xl font-semibold` | Card or widget headings |
-| **Body (lead)** | `text-base leading-relaxed` | Long-form paragraphs where extra line-height aids readability |
-| **Body** | `text-base` | Default body text, UI labels |
-| **Muted** | `text-sm text-muted-foreground` | Descriptions, help text, secondary information |
-| **Small / Caption** | `text-xs text-muted-foreground` | Captions, timestamps, metadata |
-
-## Guidelines
-
-- Prefer semantic heading order (`H1` > `H2` > `H3` ...) for accessibility.
-- Use **lead body** (`leading-relaxed`) only for multi-line content blocks; single-line labels should use the plain **body** style.
-- `text-muted-foreground` maps to the theme's muted colour and automatically adapts between light and dark modes.
-- Avoid mixing heading classes with body classes on the same element.
-
-<Stories />

package/templates/typical/client/src/components/ui/DesignSystem-Typography.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-interface TypographyRowProps {
-  label: string;
-  className: string;
-  sample?: string;
-}
-
-function TypographyRow({ label, className, sample }: TypographyRowProps) {
-  return (
-    <div className="flex flex-col gap-1 border-b border-border pb-4">
-      <div className="flex items-baseline gap-3">
-        <span className="text-xs font-mono text-muted-foreground min-w-[120px] shrink-0">{label}</span>
-        <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">{className}</code>
-      </div>
-      <div className={className}>{sample ?? 'The quick brown fox jumps over the lazy dog'}</div>
-    </div>
-  );
-}
-
-function TypographyScale() {
-  return (
-    <div className="flex flex-col gap-6 max-w-3xl">
-      <div className="flex flex-col gap-1 pb-4">
-        <h2 className="text-2xl font-semibold">Typography Scale</h2>
-        <p className="text-sm text-muted-foreground">
-          Visual reference for typography classes used throughout the design system.
-        </p>
-      </div>
-
-      <div className="flex flex-col gap-6">
-        <h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Headings</h3>
-        <TypographyRow label="H1" className="text-5xl font-extrabold tracking-tight" sample="Display Heading" />
-        <TypographyRow label="H2" className="text-4xl font-bold tracking-tight" sample="Page Heading" />
-        <TypographyRow label="H3" className="text-3xl font-bold" sample="Section Heading" />
-        <TypographyRow label="H4" className="text-2xl font-semibold" sample="Subsection Heading" />
-        <TypographyRow label="H5" className="text-xl font-semibold" sample="Card Heading" />
-      </div>
-
-      <div className="flex flex-col gap-6 mt-4">
-        <h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Body</h3>
-        <TypographyRow
-          label="Body (lead)"
-          className="text-base leading-relaxed"
-          sample="Body text with relaxed leading for longer paragraphs. This style improves readability for multi-line content blocks."
-        />
-        <TypographyRow
-          label="Body"
-          className="text-base"
-          sample="Default body text used for general content and UI labels."
-        />
-      </div>
-
-      <div className="flex flex-col gap-6 mt-4">
-        <h3 className="text-lg font-semibold text-muted-foreground uppercase tracking-wide">Muted &amp; Small</h3>
-        <TypographyRow
-          label="Muted"
-          className="text-sm text-muted-foreground"
-          sample="Secondary text for descriptions, help text, and supplementary information."
-        />
-        <TypographyRow
-          label="Small / Caption"
-          className="text-xs text-muted-foreground"
-          sample="Captions, timestamps, and fine-print details."
-        />
-      </div>
-    </div>
-  );
-}
-
-const meta: Meta = {
-  title: 'Design System/Typography',
-  tags: ['!autodocs', '!manifest'],
-};
-export default meta;
-type Story = StoryObj;
-
-export const TypeScale: Story = {
-  render: () => <TypographyScale />,
-};

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

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/Dialog';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Label } from '@/components/ui/Label';
-
-const meta: Meta<typeof Dialog> = {
-  title: 'UI Components/Dialog',
-  component: Dialog,
-};
-export default meta;
-type Story = StoryObj<typeof Dialog>;
-
-export const Default: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
-      </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Edit profile</DialogTitle>
-          <DialogDescription>Make changes to your profile here. Click save when you are done.</DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
-              Name
-            </Label>
-            <Input id="name" defaultValue="John Doe" className="col-span-3" />
-          </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
-              Username
-            </Label>
-            <Input id="username" defaultValue="@johndoe" className="col-span-3" />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};
-
-export const WithCloseButton: Story = {
-  render: () => (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline">Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Confirm Action</DialogTitle>
-          <DialogDescription>Are you sure you want to proceed? This action cannot be undone.</DialogDescription>
-        </DialogHeader>
-        <DialogFooter showCloseButton>
-          <Button variant="destructive">Confirm</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};

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

@@ -1,136 +0,0 @@
-import * as React from 'react';
-import { XIcon } from 'lucide-react';
-import { Dialog as DialogPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/Button';
-
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-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}
-    />
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  );
-}
-
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

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

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { DirectionProvider, useDirection } from '@/components/ui/Direction';
-
-const meta: Meta<typeof DirectionProvider> = {
-  title: 'UI Components/Direction',
-  component: DirectionProvider,
-};
-export default meta;
-type Story = StoryObj<typeof DirectionProvider>;
-
-function DirectionDisplay() {
-  const direction = useDirection();
-  return <p className="text-sm text-muted-foreground">Current direction: {direction ?? 'not set'}</p>;
-}
-
-export const LTR: Story = {
-  render: () => (
-    <DirectionProvider dir="ltr">
-      <div className="space-y-2">
-        <DirectionDisplay />
-        <p>This content is rendered in a left-to-right context.</p>
-      </div>
-    </DirectionProvider>
-  ),
-};
-
-export const RTL: Story = {
-  render: () => (
-    <DirectionProvider dir="rtl">
-      <div className="space-y-2" dir="rtl">
-        <DirectionDisplay />
-        <p>This content is rendered in a right-to-left context.</p>
-      </div>
-    </DirectionProvider>
-  ),
-};

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

@@ -1,18 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Direction } from 'radix-ui';
-
-function DirectionProvider({
-  dir,
-  direction,
-  children,
-}: React.ComponentProps<typeof Direction.DirectionProvider> & {
-  direction?: React.ComponentProps<typeof Direction.DirectionProvider>['dir'];
-}) {
-  return <Direction.DirectionProvider dir={direction ?? dir}>{children}</Direction.DirectionProvider>;
-}
-
-const useDirection = Direction.useDirection;
-
-export { DirectionProvider, useDirection };

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

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerClose,
-} from '@/components/ui/Drawer';
-import { Button } from '@/components/ui/Button';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'UI Components/Drawer',
-  component: Drawer,
-};
-export default meta;
-type Story = StoryObj<typeof Drawer>;
-
-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>
-  ),
-};
-
-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>
-  ),
-};

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

@@ -1,106 +0,0 @@
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from 'vaul';
-
-import { cn } from '@/lib/utils';
-
-function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
-}
-
-function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
-}
-
-function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
-}
-
-function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
-}
-
-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}
-    />
-  );
-}
-
-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>
-  );
-}
-
-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}
-    />
-  );
-}
-
-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} />;
-}
-
-function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn('text-foreground font-semibold', className)}
-      {...props}
-    />
-  );
-}
-
-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}
-    />
-  );
-}
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-};

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

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-} 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,
-};
-export default meta;
-type Story = StoryObj<typeof DropdownMenu>;
-
-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>
-  ),
-};
-
-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>
-  ),
-};