create-auto-app 1.34.0 → 1.36.0

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

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from '@/components/ui/Button';
-import {
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from '@/components/ui/Toast';
-import { Toaster } from '@/components/ui/Toaster';
-import { useToast } from '@/hooks/use-toast';
-
-const meta: Meta<typeof Toast> = {
-  title: 'UI Components/Toast',
-  component: Toast,
-};
-export default meta;
-type Story = StoryObj<typeof Toast>;
-
-function ToastDemo() {
-  const { toast } = useToast();
-
-  return (
-    <div>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => {
-          toast({
-            title: 'UI Components/Scheduled: Catch up',
-            description: 'Friday, February 10, 2026 at 5:57 PM',
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </div>
-  );
-}
-
-/** Demonstrates triggering a basic toast notification with a title and description. */
-export const Default: Story = {
-  render: () => <ToastDemo />,
-};
-
-function ToastDestructiveDemo() {
-  const { toast } = useToast();
-
-  return (
-    <div>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => {
-          toast({
-            variant: 'destructive',
-            title: 'UI Components/Uh oh! Something went wrong.',
-            description: 'There was a problem with your request.',
-          });
-        }}
-      >
-        Show Destructive Toast
-      </Button>
-    </div>
-  );
-}
-
-/** Shows a destructive-variant toast for error or warning scenarios. */
-export const Destructive: Story = {
-  render: () => <ToastDestructiveDemo />,
-};
-
-function ToastWithActionDemo() {
-  const { toast } = useToast();
-
-  return (
-    <div>
-      <Toaster />
-      <Button
-        variant="outline"
-        onClick={() => {
-          toast({
-            title: 'UI Components/Event created',
-            description: 'Sunday, December 03, 2023 at 9:00 AM',
-            action: <ToastAction altText="Undo">Undo</ToastAction>,
-          });
-        }}
-      >
-        Show Toast with Action
-      </Button>
-    </div>
-  );
-}
-
-/** Shows a toast with an action button (e.g., "Undo") alongside the message. */
-export const WithAction: Story = {
-  render: () => <ToastWithActionDemo />,
-};
-
-/** Shows a toast rendered inline (always open) using the primitive subcomponents directly. */
-export const Inline: Story = {
-  render: () => (
-    <ToastProvider>
-      <Toast open>
-        <div className="grid gap-1">
-          <ToastTitle>Toast Title</ToastTitle>
-          <ToastDescription>This is a toast description.</ToastDescription>
-        </div>
-        <ToastClose />
-      </Toast>
-      <ToastViewport />
-    </ToastProvider>
-  ),
-};

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

@@ -1,123 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { XIcon } from 'lucide-react';
-import { Toast as ToastPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** Temporary notification at screen edge with swipe-to-dismiss. Supports default and destructive variants. */
-
-/** Provides the toast context for managing toast state and swipe behavior. */
-function ToastProvider({ ...props }: React.ComponentProps<typeof ToastPrimitive.Provider>) {
-  return <ToastPrimitive.Provider data-slot="toast-provider" {...props} />;
-}
-
-/** The fixed-position viewport where toasts are rendered, positioned at bottom-right on larger screens. */
-function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>) {
-  return (
-    <ToastPrimitive.Viewport
-      data-slot="toast-viewport"
-      className={cn(
-        'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-/** An individual toast notification with default or destructive variant styling. */
-function Toast({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>) {
-  return <ToastPrimitive.Root data-slot="toast" className={cn(toastVariants({ variant }), className)} {...props} />;
-}
-
-/** An action button displayed within a toast, such as "Undo" or "Retry". */
-function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>) {
-  return (
-    <ToastPrimitive.Action
-      data-slot="toast-action"
-      className={cn(
-        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** A close button positioned in the top-right corner of a toast, visible on hover. */
-function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>) {
-  return (
-    <ToastPrimitive.Close
-      data-slot="toast-close"
-      className={cn(
-        'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-        className,
-      )}
-      toast-close=""
-      {...props}
-    >
-      <XIcon className="h-4 w-4" />
-    </ToastPrimitive.Close>
-  );
-}
-
-/** The bold heading text of a toast notification. */
-function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {
-  return (
-    <ToastPrimitive.Title
-      data-slot="toast-title"
-      className={cn('text-sm font-semibold [&+div]:text-xs', className)}
-      {...props}
-    />
-  );
-}
-
-/** The secondary descriptive text of a toast notification. */
-function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>) {
-  return (
-    <ToastPrimitive.Description
-      data-slot="toast-description"
-      className={cn('text-sm opacity-90', className)}
-      {...props}
-    />
-  );
-}
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-  toastVariants,
-};

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

@@ -1,32 +0,0 @@
-'use client';
-
-import { useToast } from '@/hooks/use-toast';
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/Toast';
-
-/**
- * Renders all active toasts from the useToast hook into a fixed-position viewport.
- * Place once at the app root to enable imperative toast notifications via the useToast hook.
- */
-function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
-
-export { Toaster };

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

@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BoldIcon } from 'lucide-react';
-import { Toggle } from '@/components/ui/Toggle';
-
-const meta: Meta<typeof Toggle> = {
-  title: 'UI Components/Toggle',
-  component: Toggle,
-};
-export default meta;
-type Story = StoryObj<typeof Toggle>;
-
-/** Shows a toggle button with a bold icon in the default ghost variant. */
-export const Default: Story = {
-  args: {
-    'aria-label': 'Toggle bold',
-    children: <BoldIcon />,
-  },
-};
-
-/** Shows the outline variant with a visible border. */
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-    'aria-label': 'Toggle bold',
-    children: <BoldIcon />,
-  },
-};
-
-/** Shows a toggle with a text label instead of an icon. */
-export const WithText: Story = {
-  args: {
-    'aria-label': 'Toggle italic',
-    children: 'Italic',
-  },
-};
-
-/** Shows a toggle in its initially pressed (on) state. */
-export const Pressed: Story = {
-  args: {
-    defaultPressed: true,
-    'aria-label': 'Toggle bold',
-    children: <BoldIcon />,
-  },
-};

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

@@ -1,42 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Toggle as TogglePrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-/** A two-state button for toolbar controls. Has "default" (ghost) and "outline" variants in sm/default/lg sizes. */
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
-  );
-}
-
-export { Toggle, toggleVariants };

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

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BoldIcon, ItalicIcon, UnderlineIcon } from 'lucide-react';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/ToggleGroup';
-
-const meta: Meta<typeof ToggleGroup> = {
-  title: 'UI Components/ToggleGroup',
-  component: ToggleGroup,
-};
-export default meta;
-type Story = StoryObj<typeof ToggleGroup>;
-
-/** Shows a single-selection toggle group where only one item can be active at a time. */
-export const Single: Story = {
-  render: () => (
-    <ToggleGroup type="single">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-/** Shows a multi-selection toggle group with bold and italic pre-selected. */
-export const Multiple: Story = {
-  render: () => (
-    <ToggleGroup type="multiple" defaultValue={['bold', 'italic']}>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-/** Shows a toggle group using the outline variant with visible borders. */
-export const Outline: Story = {
-  render: () => (
-    <ToggleGroup type="single" variant="outline">
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <BoldIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <ItalicIcon />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <UnderlineIcon />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};

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

@@ -1,83 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-import { toggleVariants } from '@/components/ui/Toggle';
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-  }
->({
-  size: 'default',
-  variant: 'default',
-  spacing: 0,
-});
-
-/** A group of toggles where one (`type="single"`) or multiple (`type="multiple"`) can be active. */
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  /** Controls gap between items. When 0, items are visually joined with shared borders. */
-  spacing = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number;
-  }) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      style={{ '--gap': spacing } as React.CSSProperties}
-      className={cn(
-        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
-        className,
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>{children}</ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-/** An individual toggle button within a ToggleGroup. Inherits variant and size from the parent group context. */
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      data-spacing={context.spacing}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
-        'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };

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

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from '@/components/ui/Button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip';
-
-const meta: Meta<typeof Tooltip> = {
-  title: 'UI Components/Tooltip',
-  component: Tooltip,
-};
-export default meta;
-type Story = StoryObj<typeof Tooltip>;
-
-/** Shows a basic tooltip appearing on hover over a button. */
-export const Default: Story = {
-  render: () => (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">Hover me</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>This is a tooltip</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  ),
-};
-
-/** Shows a tooltip with additional spacing between the trigger and content via sideOffset. */
-export const WithSideOffset: Story = {
-  render: () => (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="outline">With offset</Button>
-        </TooltipTrigger>
-        <TooltipContent sideOffset={8}>
-          <p>Tooltip with side offset</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  ),
-};

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

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { Tooltip as TooltipPrimitive } from 'radix-ui';
-
-import { cn } from '@/lib/utils';
-
-/** Brief descriptive popup on hover/focus. Has enter/exit animations and arrow indicator. Wrap app in TooltipProvider first. */
-
-/** Provides shared tooltip configuration (e.g., delay duration) for all nested Tooltip instances. */
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
-}
-
-/** The root component that manages open/close state for a single tooltip. */
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
-}
-
-/** The element that triggers the tooltip on hover or focus. */
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-/** The popup content panel rendered via a portal with an arrow indicator. */
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/templates/typical/client/src/gql/execute.ts

@@ -1,11 +0,0 @@
-import request from 'graphql-request';
-import type { TypedDocumentString } from './graphql';
-
-const GRAPHQL_ENDPOINT = 'http://localhost:4000/graphql';
-
-export async function execute<TResult, TVariables>(
-  query: TypedDocumentString<TResult, TVariables>,
-  ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
-): Promise<TResult> {
-  return request(GRAPHQL_ENDPOINT, query.toString(), variables ? variables : undefined);
-}