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

package/dist/storybook/Progress.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Progress } from "../shadcn";
+import { useEffect, useState } from "react";
+
+export default {
+  title: "Shadcn/Components/Progress",
+  component: Progress,
+  argTypes: {
+    value: {
+      control: { type: "number", min: 0, max: 100 },
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = args => <Progress {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 40,
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+  value: 0,
+};
+
+export const Full = Template.bind({});
+Full.args = {
+  value: 100,
+};
+
+export const CustomStyles: StoryFn = () => (
+  <div className="al-space-y-4">
+    <Progress value={40} className="al-h-2" />
+    <Progress value={60} className="al-h-3 al-bg-secondary/20" />
+    <Progress value={80} className="al-h-4 [&>div]:al-bg-green-500" />
+  </div>
+);
+
+export const WithLabel: StoryFn = () => (
+  <div className="al-space-y-2">
+    <div className="al-flex al-justify-between al-text-sm">
+      <span>Progress</span>
+      <span>40%</span>
+    </div>
+    <Progress value={40} />
+  </div>
+);
+
+export const Animated: StoryFn = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(prevProgress => {
+        if (prevProgress === 100) {
+          return 0;
+        }
+        return Math.min(prevProgress + 10, 100);
+      });
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return <Progress value={progress} />;
+};
+
+export const WithCustomMaxValue: StoryFn = () => (
+  <div className="al-space-y-2">
+    <div className="al-flex al-justify-between al-text-sm">
+      <span>Score</span>
+      <span>7/10</span>
+    </div>
+    <Progress value={7} max={10} />
+  </div>
+);
+
+export const Loading: StoryFn = () => (
+  <div className="al-space-y-2">
+    <div className="al-flex al-justify-between al-text-sm">
+      <span>Loading...</span>
+      <span className="al-text-muted-foreground">Please wait</span>
+    </div>
+    <Progress value={null} />
+  </div>
+);

package/dist/storybook/RadioGroup.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { RadioGroup, RadioGroupItem } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/RadioGroup",
+  component: RadioGroup,
+} as Meta;
+
+const Template: StoryFn = args => (
+  <RadioGroup defaultValue="option-1" {...args}>
+    {["option-1", "option-2", "option-3"].map(option => (
+      <div key={option} className="al-flex al-items-center al-space-x-2">
+        <RadioGroupItem value={option} id={option} />
+        <label htmlFor={option} className="al-text-sm al-font-medium">
+          {option.charAt(0).toUpperCase() + option.slice(1)}
+        </label>
+      </div>
+    ))}
+  </RadioGroup>
+);
+
+export const Default = Template.bind({});
+
+export const WithDisabledOption = () => (
+  <RadioGroup defaultValue="option-1">
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-1" id="option-1" />
+      <label htmlFor="option-1" className="text-sm font-medium">
+        Option 1
+      </label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-2" id="option-2" disabled />
+      <label htmlFor="option-2" className="text-sm font-medium text-muted-foreground">
+        Option 2 (Disabled)
+      </label>
+    </div>
+    <div className="flex items-center space-x-2">
+      <RadioGroupItem value="option-3" id="option-3" />
+      <label htmlFor="option-3" className="text-sm font-medium">
+        Option 3
+      </label>
+    </div>
+  </RadioGroup>
+);
+
+export const Horizontal = () => (
+  <RadioGroup defaultValue="option-1" className="al-flex al-space-x-4">
+    {["option-1", "option-2", "option-3"].map(option => (
+      <div key={option} className="al-flex al-items-center al-space-x-2">
+        <RadioGroupItem value={option} id={`h-${option}`} />
+        <label htmlFor={`h-${option}`} className="al-text-sm al-font-medium">
+          {option.charAt(0).toUpperCase() + option.slice(1)}
+        </label>
+      </div>
+    ))}
+  </RadioGroup>
+);

package/dist/storybook/Resizable.stories.tsx

@@ -0,0 +1,119 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Resizable",
+  component: ResizablePanelGroup,
+} as Meta;
+
+export const HorizontalLayout: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={25}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const VerticalLayout: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="vertical">
+      <ResizablePanel defaultSize={25}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const ThreePanels: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={20}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Navigation</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={60}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={20}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Properties</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const NestedPanels: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={30}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={70}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={70}>
+            <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+              <span className="al-font-semibold">Main Content</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={30}>
+            <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+              <span className="al-font-semibold">Console</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);
+
+export const WithMinSize: StoryFn = () => (
+  <div className="al-h-[400px] al-max-w-[800px] al-rounded-lg al-border">
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={25} minSize={20}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Min 20%</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Flexible</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={25} minSize={15}>
+        <div className="al-flex al-h-full al-items-center al-justify-center al-p-6">
+          <span className="al-font-semibold">Min 15%</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+);

package/dist/storybook/ScrollArea.stories.tsx

@@ -0,0 +1,101 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { ScrollArea } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/ScrollArea",
+  component: ScrollArea,
+} as Meta;
+
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
+
+export const Default: StoryFn = () => (
+  <ScrollArea className="al-h-72 al-w-48 al-rounded-md al-border">
+    <div className="al-p-4">
+      <h4 className="al-mb-4 al-text-sm al-font-medium al-leading-none">Tags</h4>
+      {tags.map(tag => (
+        <div key={tag} className="al-text-sm">
+          {tag}
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const HorizontalScroll: StoryFn = () => (
+  <ScrollArea className="al-w-96 al-whitespace-nowrap al-rounded-md al-border">
+    <div className="al-flex al-w-max al-space-x-4 al-p-4">
+      {Array.from({ length: 50 }, (_, i) => (
+        <div key={i} className="al-w-40 al-shrink-0 al-rounded-md al-border al-p-4">
+          <div className="al-text-sm">Item {i + 1}</div>
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const WithContent: StoryFn = () => (
+  <ScrollArea className="al-h-[300px] al-w-[350px] al-rounded-md al-border al-p-4">
+    <div className="al-space-y-4">
+      <h4 className="al-text-sm al-font-medium al-leading-none">Documentation</h4>
+      {Array.from({ length: 20 }, (_, i) => (
+        <div key={i} className="al-text-sm">
+          <h5 className="al-mb-1 al-font-medium">Section {i + 1}</h5>
+          <p className="al-text-muted-foreground">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua.
+          </p>
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const WithCard: StoryFn = () => (
+  <ScrollArea className="al-h-[300px] al-w-[600px] al-rounded-lg al-border">
+    <div className="al-p-6">
+      <h4 className="al-mb-4 al-text-xl al-font-bold">Recent Activity</h4>
+      {Array.from({ length: 20 }, (_, i) => (
+        <div key={i} className="al-mb-4 al-rounded-lg al-border al-p-4 last:al-mb-0">
+          <div className="al-flex al-items-center al-justify-between">
+            <div className="al-space-y-1">
+              <p className="al-text-sm al-font-medium al-leading-none">Activity {i + 1}</p>
+              <p className="al-text-sm al-text-muted-foreground">
+                This is a description of the activity that occurred.
+              </p>
+            </div>
+            <div className="al-text-sm al-text-muted-foreground">
+              {new Date().toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  </ScrollArea>
+);
+
+export const WithNestedContent: StoryFn = () => (
+  <ScrollArea className="al-h-[400px] al-w-[600px] al-rounded-lg al-border">
+    <div className="al-p-6">
+      <h4 className="al-mb-4 al-text-xl al-font-bold">Nested Content Example</h4>
+      <div className="al-grid al-gap-4">
+        {Array.from({ length: 5 }, (_, i) => (
+          <div key={i} className="al-space-y-2">
+            <h5 className="al-text-lg al-font-semibold">Section {i + 1}</h5>
+            <ScrollArea className="al-h-[150px] al-w-full al-rounded-md al-border">
+              <div className="al-p-4">
+                {Array.from({ length: 10 }, (_, j) => (
+                  <div key={j} className="al-mb-2 al-rounded al-border al-p-2 last:al-mb-0">
+                    <p className="al-text-sm">Subsection {j + 1}</p>
+                    <p className="al-text-xs al-text-muted-foreground">
+                      Nested scrollable content example.
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          </div>
+        ))}
+      </div>
+    </div>
+  </ScrollArea>
+);

package/dist/storybook/Select.stories.tsx

@@ -0,0 +1,95 @@
+import { Meta, StoryFn } from "@storybook/react";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+} from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Select",
+  component: Select,
+} as Meta;
+
+const Template: StoryFn = args => (
+  <Select {...args}>
+    <SelectTrigger>
+      <SelectValue placeholder="Select an option" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);
+
+export const Default = Template.bind({});
+
+export const WithGroups: StoryFn = () => (
+  <Select>
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue placeholder="Select a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="orange">Orange</SelectItem>
+      </SelectGroup>
+      <SelectSeparator />
+      <SelectGroup>
+        <SelectLabel>Vegetables</SelectLabel>
+        <SelectItem value="carrot">Carrot</SelectItem>
+        <SelectItem value="potato">Potato</SelectItem>
+        <SelectItem value="tomato">Tomato</SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+);
+
+export const Disabled: StoryFn = () => (
+  <Select disabled>
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue placeholder="Select an option" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);
+
+export const WithDisabledOptions: StoryFn = () => (
+  <Select>
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue placeholder="Select an option" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2" disabled>
+        Option 2 (Disabled)
+      </SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);
+
+export const WithDefaultValue: StoryFn = () => (
+  <Select defaultValue="option2">
+    <SelectTrigger className="al-w-[280px]">
+      <SelectValue />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="option1">Option 1</SelectItem>
+      <SelectItem value="option2">Option 2</SelectItem>
+      <SelectItem value="option3">Option 3</SelectItem>
+    </SelectContent>
+  </Select>
+);

package/dist/storybook/Sheet.stories.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Button } from "../shadcn";
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Sheet",
+  component: Sheet,
+  argTypes: {
+    side: {
+      control: "select",
+      options: ["top", "right", "bottom", "left"],
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = ({ side = "right" }) => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Open Sheet</Button>
+    </SheetTrigger>
+    <SheetContent side={side}>
+      <SheetHeader>
+        <SheetTitle>Sheet Title</SheetTitle>
+      </SheetHeader>
+      <div className="al-py-4">
+        <p>This is the sheet content.</p>
+      </div>
+    </SheetContent>
+  </Sheet>
+);
+
+export const Default = Template.bind({});
+
+export const LeftSide = Template.bind({});
+LeftSide.args = {
+  side: "left",
+};
+
+export const TopSide = Template.bind({});
+TopSide.args = {
+  side: "top",
+};
+
+export const BottomSide = Template.bind({});
+BottomSide.args = {
+  side: "bottom",
+};
+
+export const WithForm = () => (
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button variant="outline">Edit Profile</Button>
+    </SheetTrigger>
+    <SheetContent>
+      <SheetHeader>
+        <SheetTitle>Edit Profile</SheetTitle>
+      </SheetHeader>
+      <div className="al-grid al-gap-4 al-py-4">
+        <div className="al-grid al-gap-2">
+          <label htmlFor="name">Name</label>
+          <input id="name" className="al-border al-rounded al-p-2" />
+        </div>
+      </div>
+      <div className="al-flex al-justify-end">
+        <Button>Save Changes</Button>
+      </div>
+    </SheetContent>
+  </Sheet>
+);

package/dist/storybook/Sidebar.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryFn } from "@storybook/react";
+import { Sidebar, SidebarProvider } from "../shadcn";
+
+export default {
+  title: "Shadcn/Components/Sidebar",
+  component: Sidebar,
+  decorators: [
+    Story => (
+      <SidebarProvider>
+        <Story />
+      </SidebarProvider>
+    ),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+} as Meta<typeof Sidebar>;
+
+const Template: StoryFn<typeof Sidebar> = args => (
+  <div className="al-h-screen">
+    <Sidebar {...args}>
+      <div className="al-p-4">
+        <h2 className="al-text-lg al-font-semibold">Sidebar Content</h2>
+        <p className="al-mt-2">This is an example of sidebar content.</p>
+        <ul className="al-mt-4 al-space-y-2">
+          <li>Menu Item 1</li>
+          <li>Menu Item 2</li>
+          <li>Menu Item 3</li>
+        </ul>
+      </div>
+    </Sidebar>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const RightSide = Template.bind({});
+RightSide.args = {
+  side: "right",
+};
+
+export const FloatingVariant = Template.bind({});
+FloatingVariant.args = {
+  variant: "floating",
+};
+
+export const InsetVariant = Template.bind({});
+InsetVariant.args = {
+  variant: "inset",
+};
+
+export const IconCollapsible = Template.bind({});
+IconCollapsible.args = {
+  collapsible: "icon",
+};
+
+export const NonCollapsible = Template.bind({});
+NonCollapsible.args = {
+  collapsible: "none",
+};
+
+// Example with custom content and styling
+export const CustomStyling = Template.bind({});
+CustomStyling.args = {
+  className: "al-bg-primary al-text-primary-foreground",
+};
+
+// Example with controlled state
+export const ControlledState: StoryFn<typeof Sidebar> = args => {
+  return (
+    <div className="al-h-screen">
+      <SidebarProvider defaultOpen={false}>
+        <Sidebar {...args}>
+          <div className="al-p-4">
+            <h2 className="al-text-lg al-font-semibold">Controlled Sidebar</h2>
+            <p className="al-mt-2">This sidebar starts in a collapsed state.</p>
+          </div>
+        </Sidebar>
+      </SidebarProvider>
+    </div>
+  );
+};
+
+// Example with mobile view
+export const MobileView: StoryFn<typeof Sidebar> = args => {
+  return (
+    <div className="al-h-screen al-w-screen md:al-hidden">
+      <Sidebar {...args}>
+        <div className="al-p-4">
+          <h2 className="al-text-lg al-font-semibold">Mobile Sidebar</h2>
+          <p className="al-mt-2">This sidebar is optimized for mobile view.</p>
+        </div>
+      </Sidebar>
+    </div>
+  );
+};