@altimateai/ui-components 0.0.1-beta.4 → 0.0.1-beta.5

package/dist/storybook/Alert.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Alert, AlertTitle, AlertDescription } from "../shadcn";
+import { InfoCircleIcon } from "@ac-assets/icons";
+
+export default {
+  title: "Shadcn/Components/Alert",
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive"],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => (
+  <Alert {...args}>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components and dependencies to your app using the cli.
+    </AlertDescription>
+  </Alert>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: "default",
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  variant: "destructive",
+};
+
+export const WithIcon: StoryFn = () => (
+  <Alert>
+    <InfoCircleIcon className="al-h-4 al-w-4" />
+    <AlertTitle>Info Alert</AlertTitle>
+    <AlertDescription>This is an informational alert with an icon.</AlertDescription>
+  </Alert>
+);
+
+export const DestructiveWithIcon: StoryFn = () => (
+  <Alert variant="destructive">
+    <InfoCircleIcon className="al-h-4 al-w-4" />
+    <AlertTitle>Error Alert</AlertTitle>
+    <AlertDescription>Something went wrong! Please try again later.</AlertDescription>
+  </Alert>
+);
+
+export const TitleOnly: StoryFn = () => (
+  <Alert>
+    <AlertTitle>Simple Alert with Title Only</AlertTitle>
+  </Alert>
+);
+
+export const DescriptionOnly: StoryFn = () => (
+  <Alert>
+    <AlertDescription>Simple Alert with Description Only</AlertDescription>
+  </Alert>
+);

package/dist/storybook/AlertDialog.stories.tsx

@@ -0,0 +1,161 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/AlertDialog",
+  component: AlertDialog,
+} as Meta;
+
+const Template: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete your account and remove your
+          data from our servers.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const Default = Template.bind({});
+
+export const DestructiveAction: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger className="al-bg-destructive al-text-destructive-foreground hover:al-bg-destructive/90 al-h-10 al-px-4 al-py-2 al-rounded-md">
+      Delete Account
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Account</AlertDialogTitle>
+        <AlertDialogDescription>
+          This will permanently delete your account and remove all your data. This action cannot be
+          undone.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction className="al-bg-destructive al-text-destructive-foreground hover:al-bg-destructive/90">
+          Delete
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const WithCustomTrigger: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger asChild>
+      <button className="al-rounded-full al-bg-primary al-p-2">
+        <span className="al-sr-only">Open Dialog</span>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M3 6h18" />
+          <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+        </svg>
+      </button>
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Item</AlertDialogTitle>
+        <AlertDialogDescription>Are you sure you want to delete this item?</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Delete</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const WithForm: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger>Unsubscribe</AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Unsubscribe from Newsletter</AlertDialogTitle>
+        <AlertDialogDescription>
+          Please tell us why you&apos;re unsubscribing:
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <div className="al-grid al-gap-4 al-py-4">
+        <div className="al-grid al-gap-2">
+          <label htmlFor="reason" className="al-text-sm al-font-medium al-leading-none">
+            Reason
+          </label>
+          <select
+            id="reason"
+            className="al-flex al-h-10 al-w-full al-rounded-md al-border al-border-input al-bg-background al-px-3 al-py-2 al-text-sm al-ring-offset-background"
+          >
+            <option>Too many emails</option>
+            <option>Content not relevant</option>
+            <option>Other</option>
+          </select>
+        </div>
+      </div>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Confirm</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
+
+export const LongContent: StoryFn = () => (
+  <AlertDialog>
+    <AlertDialogTrigger>Show Terms</AlertDialogTrigger>
+    <AlertDialogContent className="al-max-h-[90vh] al-overflow-y-auto">
+      <AlertDialogHeader>
+        <AlertDialogTitle>Terms of Service</AlertDialogTitle>
+        <AlertDialogDescription className="al-whitespace-pre-line">
+          {`Please read these terms carefully before using our service.
+          
+          1. Introduction
+          These terms and conditions govern your use of our service.
+          
+          2. Acceptance of Terms
+          By accessing or using our service, you agree to be bound by these terms.
+          
+          3. Privacy Policy
+          Your privacy is important to us. Please review our privacy policy.
+          
+          4. User Obligations
+          You agree to use our service in accordance with these terms.
+          
+          5. Termination
+          We reserve the right to terminate your access to our service.`}
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Decline</AlertDialogCancel>
+        <AlertDialogAction>Accept</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);

package/dist/storybook/Avatar.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Avatar, AvatarImage, AvatarFallback } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Avatar",
+  component: Avatar,
+} as Meta<typeof Avatar>;
+
+const Template: StoryFn = () => (
+  <div className="flex gap-4">
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+export const WithFallback = () => (
+  <div className="flex gap-4">
+    <Avatar>
+      <AvatarImage src="invalid-image.jpg" alt="@invalid" />
+      <AvatarFallback>IN</AvatarFallback>
+    </Avatar>
+  </div>
+);
+
+export const Sizes = () => (
+  <div className="flex gap-4 items-center">
+    <Avatar className="h-6 w-6">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@small" />
+      <AvatarFallback>SM</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@medium" />
+      <AvatarFallback>MD</AvatarFallback>
+    </Avatar>
+    <Avatar className="h-14 w-14">
+      <AvatarImage src="https://github.com/shadcn.png" alt="@large" />
+      <AvatarFallback>LG</AvatarFallback>
+    </Avatar>
+  </div>
+);
+
+export const CustomColors = () => (
+  <div className="flex gap-4">
+    <Avatar>
+      <AvatarFallback className="bg-blue-500 text-white">BL</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarFallback className="bg-green-500 text-white">GR</AvatarFallback>
+    </Avatar>
+    <Avatar>
+      <AvatarFallback className="bg-red-500 text-white">RD</AvatarFallback>
+    </Avatar>
+  </div>
+);

package/dist/storybook/Badge.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Badge",
+  component: Badge,
+} as Meta<typeof Badge>;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: "Badge",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Destructive",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline",
+  },
+};

package/dist/storybook/Button.stories.tsx

@@ -0,0 +1,109 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Button, ButtonProps } from "../shadcn";
+import { CloseIcon } from "@ac-assets/icons";
+
+export default {
+  title: "Shadcn/Components/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "outline", "secondary", "ghost", "link"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: "Button",
+};
+
+export const Destructive = Template.bind({});
+Destructive.args = {
+  variant: "destructive",
+  children: "Delete",
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  variant: "outline",
+  children: "Outline",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: "secondary",
+  children: "Secondary",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "sm",
+  children: "Small",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: "lg",
+  children: "Large",
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  size: "icon",
+  children: "🔍",
+};
+
+const buttonVariants = ["Default", "Secondary", "Destructive", "Success", "Ghost", "Link"];
+
+export const Buttons = {
+  render: () => (
+    <div className="al-space-y-4">
+      {buttonVariants.map(v => (
+        <div className="al-space-x-4" key={v}>
+          <Button variant={v.toLowerCase() as ButtonProps["variant"]} className="al-align-bottom">
+            {v}
+          </Button>
+          <Button
+            variant={v.toLowerCase() as ButtonProps["variant"]}
+            size="sm"
+            className="al-align-bottom"
+          >
+            {v} sm
+          </Button>
+          <Button
+            variant={v.toLowerCase() as ButtonProps["variant"]}
+            disabled
+            className="al-align-bottom"
+          >
+            {v} disabled
+          </Button>
+          <Button variant={v.toLowerCase() as ButtonProps["variant"]} className="al-align-bottom">
+            <CloseIcon />
+            {v} with icon
+          </Button>
+          <Button
+            variant={v.toLowerCase() as ButtonProps["variant"]}
+            size="icon"
+            className="al-align-bottom"
+          >
+            <CloseIcon />
+          </Button>
+          <Button
+            variant={v.toLowerCase() as ButtonProps["variant"]}
+            size="lg"
+            className="al-align-bottom"
+          >
+            {v} lg
+          </Button>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/dist/storybook/Card.stories.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Button } from "../shadcn";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Card",
+  component: Card,
+} as Meta;
+
+const Template: StoryFn = () => (
+  <Card className="w-[350px]">
+    <CardHeader>
+      <CardTitle>Card Title</CardTitle>
+      <CardDescription>Card Description</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p>Card Content</p>
+    </CardContent>
+    <CardFooter>
+      <Button>Action</Button>
+    </CardFooter>
+  </Card>
+);
+
+export const Default = Template.bind({});
+
+export const WithForm = () => (
+  <Card className="w-[350px]">
+    <CardHeader>
+      <CardTitle>Create Account</CardTitle>
+      <CardDescription>Enter your details below.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div className="grid w-full items-center gap-4">
+        <div className="flex flex-col space-y-1.5">
+          <label htmlFor="name">Name</label>
+          <input id="name" className="border rounded p-2" />
+        </div>
+        <div className="flex flex-col space-y-1.5">
+          <label htmlFor="email">Email</label>
+          <input id="email" className="border rounded p-2" />
+        </div>
+      </div>
+    </CardContent>
+    <CardFooter className="flex justify-between">
+      <Button variant="outline">Cancel</Button>
+      <Button>Create</Button>
+    </CardFooter>
+  </Card>
+);
+
+export const Pricing = () => (
+  <Card className="w-[350px]">
+    <CardHeader>
+      <CardTitle>Pro Plan</CardTitle>
+      <CardDescription>$29/month</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <ul className="space-y-2">
+        <li>✓ Feature 1</li>
+        <li>✓ Feature 2</li>
+        <li>✓ Feature 3</li>
+      </ul>
+    </CardContent>
+    <CardFooter>
+      <Button className="w-full">Subscribe</Button>
+    </CardFooter>
+  </Card>
+);

package/dist/storybook/Checkbox.stories.tsx

@@ -0,0 +1,65 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "../shadcn";
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Shadcn/Components/Checkbox",
+  component: Checkbox,
+  args: {
+    "aria-label": "Checkbox demo",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: args => (
+    <div className="al-flex al-items-center al-space-x-2">
+      <Checkbox {...args} id="terms" />
+      <label
+        htmlFor="terms"
+        className="al-text-sm al-font-medium al-leading-none al-peer-disabled:al-cursor-not-allowed al-peer-disabled:al-opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  ),
+};
+
+export const Checked: Story = {
+  render: args => (
+    <div className="al-flex al-items-center al-space-x-2">
+      <Checkbox {...args} id="checked" defaultChecked />
+      <label htmlFor="checked" className="al-text-sm al-font-medium al-leading-none">
+        Checked by default
+      </label>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: args => (
+    <div className="al-flex al-items-center al-space-x-2">
+      <Checkbox {...args} id="disabled" disabled />
+      <label htmlFor="disabled" className="al-text-sm al-font-medium al-leading-none al-opacity-70">
+        Disabled checkbox
+      </label>
+    </div>
+  ),
+};
+
+export const WithDescription: Story = {
+  render: args => (
+    <div className="al-items-top al-flex al-space-x-2">
+      <Checkbox {...args} id="description" />
+      <div className="al-grid al-gap-1.5 al-leading-none">
+        <label htmlFor="description" className="al-text-sm al-font-medium al-leading-none">
+          Accept terms
+        </label>
+        <p className="al-text-sm al-text-muted-foreground">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  ),
+};

package/dist/storybook/Command.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Command",
+  component: Command,
+} as Meta;
+
+const Template: StoryFn = () => (
+  <Command className="al-rounded-lg al-border al-shadow-md">
+    <CommandInput placeholder="Type a command or search..." />
+    <CommandList>
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandGroup heading="Suggestions">
+        <CommandItem>Option 1</CommandItem>
+        <CommandItem>Option 2</CommandItem>
+        <CommandItem>Option 3</CommandItem>
+      </CommandGroup>
+      <CommandGroup heading="Settings">
+        <CommandItem>Profile</CommandItem>
+        <CommandItem>Billing</CommandItem>
+        <CommandItem>Settings</CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </Command>
+);
+
+export const Default = Template.bind({});

package/dist/storybook/DropdownMenu.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Button,
+} from "../shadcn";
+import { MoreIcon, CopyIcon, RefreshIcon } from "@ac-assets/icons";
+
+export default {
+  title: "Shadcn/Components/DropdownMenu",
+  component: DropdownMenu,
+} as Meta;
+
+const Template: StoryFn = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant="ghost" size="sm" className="al-p-0 al-h-8 al-w-8">
+        <MoreIcon className="al-h-4 al-w-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem onClick={() => console.log("Copy clicked")}>
+        <CopyIcon className="al-mr-2 al-h-4 al-w-4" />
+        Copy message
+      </DropdownMenuItem>
+      <DropdownMenuItem onClick={() => console.log("Regenerate clicked")}>
+        <RefreshIcon className="al-mr-2 al-h-4 al-w-4" />
+        Regenerate response
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const Default = Template.bind({});