veza/apps/web/src/components/ui/Card.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card';
import { Button } from './button';

const meta = {
    title: 'UI/Card',
    component: Card,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['default', 'elevated', 'ghost', 'outline', 'muted', 'glass', 'interactive', 'glow', 'glowMagenta', 'spotlight'],
        },
        padding: {
            control: 'select',
            options: ['none', 'sm', 'default', 'lg'],
        },
    },
    args: {
        variant: 'default',
        padding: 'default',
    }
} satisfies Meta<typeof Card>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: (args) => (
    <Card {...args} className="max-w-sm w-full">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col space-y-2 text-sm text-muted-foreground">
          <p>Project Name: Veza App</p>
          <p>Framework: React</p>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  ),
};

export const Interactive: Story = {
  args: {
    variant: 'interactive',
  },
  render: (args) => (
    <Card {...args} className="max-w-sm w-full">
      <CardHeader>
        <CardTitle>Interactive Card</CardTitle>
        <CardDescription>Hover over me to see the effect.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">This card responds to user interaction.</p>
      </CardContent>
    </Card>
  ),
};

export const Spotlight: Story = {
  args: {
    variant: 'spotlight',
    spotlight: true,
  },
  render: (args) => (
    <div className="p-10 bg-black flex justify-center">
      <Card {...args} className="max-w-sm w-full text-foreground">
        <CardHeader>
          <CardTitle>Spotlight Effect</CardTitle>
          <CardDescription className="text-muted-foreground">Move your mouse over the card.</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm">The spotlight effect follows your cursor.</p>
        </CardContent>
      </Card>
    </div>
  ),
};

/** Long/short content, light and dark backgrounds. */
export const VisualStressTest: Story = {
  render: () => (
    <div className="flex flex-col gap-8 min-h-layout-story">
      <div className="p-4 bg-background">
        <Card className="max-w-sm" padding="default">
          <CardHeader>
            <CardTitle>A</CardTitle>
            <CardDescription>Minimal content.</CardDescription>
          </CardHeader>
        </Card>
      </div>
      <div className="p-4 bg-muted">
        <Card className="max-w-sm" padding="default">
          <CardHeader>
            <CardTitle>Very long card title that might wrap onto multiple lines</CardTitle>
            <CardDescription>
              Long description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">Extra body content for stress test.</p>
          </CardContent>
        </Card>
      </div>
    </div>
  ),
};