@k3-universe/react-kit 0.0.1

package/src/stories/shadcn/ui/Popover.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Popover, PopoverTrigger, PopoverContent } from '../../../shadcn/ui/popover';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Shadcn/UI/Popover',
+  component: Popover,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+export const Basic: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64">
+        <div className="space-y-2">
+          <h4 className="font-medium leading-none">Dimensions</h4>
+          <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};
+
+function ControlledDemo() {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button onClick={() => setOpen((o) => !o)} variant="default">
+          {open ? 'Close' : 'Open'} popover
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>Controlled popover content</PopoverContent>
+    </Popover>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+};

package/src/stories/shadcn/ui/Progress.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+import { Progress } from '../../../shadcn/ui/progress';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Shadcn/UI/Progress',
+  component: Progress,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Progress>;
+
+function ProgressDemo() {
+  const [value, setValue] = useState(13);
+  useEffect(() => {
+    const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 7)), 700);
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <div className="w-64 space-y-2">
+      <Progress value={value} />
+      <div className="text-sm text-muted-foreground">{value}%</div>
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <ProgressDemo />,
+};

package/src/stories/shadcn/ui/RadioGroup.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RadioGroup, RadioGroupItem } from '../../../shadcn/ui/radio-group';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Shadcn/UI/RadioGroup',
+  component: RadioGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Basic: Story = {
+  render: () => (
+    <RadioGroup defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="default" id="r1" />
+        <Label htmlFor="r1">Default</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="comfortable" id="r2" />
+        <Label htmlFor="r2">Comfortable</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="compact" id="r3" />
+        <Label htmlFor="r3">Compact</Label>
+      </div>
+    </RadioGroup>
+  ),
+};

package/src/stories/shadcn/ui/Resizable.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../../../shadcn/ui/resizable';
+
+const meta: Meta<typeof ResizablePanelGroup> = {
+  title: 'Shadcn/UI/Resizable',
+  component: ResizablePanelGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ResizablePanelGroup>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="h-[240px] w-full">
+      <ResizablePanelGroup direction="horizontal" className="rounded-md border">
+        <ResizablePanel defaultSize={40} minSize={20} className="p-3">
+          <div className="h-full w-full rounded-sm bg-muted/40 p-2">Left content</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={60} minSize={20} className="p-3">
+          <div className="h-full w-full rounded-sm bg-muted/40 p-2">Right content</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="h-[300px] w-full">
+      <ResizablePanelGroup direction="vertical" className="rounded-md border">
+        <ResizablePanel defaultSize={50} minSize={20} className="p-3">
+          <div className="h-full w-full rounded-sm bg-muted/40 p-2">Top content</div>
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel defaultSize={50} minSize={20} className="p-3">
+          <div className="h-full w-full rounded-sm bg-muted/40 p-2">Bottom content</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/ScrollArea.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ScrollArea } from '../../../shadcn/ui/scroll-area';
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Shadcn/UI/ScrollArea',
+  component: ScrollArea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScrollArea>;
+
+const TAGS: string[] = [
+  'nextjs','shadcn','tailwind','radix','react','storybook','vitest','nx','pnpm','zod','react-hook-form','recharts','lucide','ui','forms','charts','table','sidebar','dialog','wizard','pagination','filtering','sorting','layout','accessibility','aria','dark-mode','light-mode','themes','components','hooks','state','routing','graphql','rest','cache','testing','automation','ci','cd','lint','format','prettier','eslint','typescript','javascript','css','html','design-system','docs','examples'
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-[225px] w-[350px] rounded-md border">
+      <ScrollArea className="h-full w-full rounded-md p-4">
+        <div className="space-y-4">
+          <h4 className="text-sm font-medium leading-none">Tags</h4>
+          <div className="space-y-2">
+            {TAGS.map((tag) => (
+              <div key={tag} className="text-sm text-muted-foreground">#{tag}</div>
+            ))}
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Select.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../shadcn/ui/select';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof Select> = {
+  title: 'Shadcn/UI/Select',
+  component: Select,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="grid w-[240px] gap-2">
+      <Label htmlFor="select">Theme</Label>
+      <Select>
+        <SelectTrigger id="select">
+          <SelectValue placeholder="Select a theme" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="light">Light</SelectItem>
+          <SelectItem value="dark">Dark</SelectItem>
+          <SelectItem value="system">System</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+function ControlledDemo() {
+  const [value, setValue] = useState<string>('system');
+  return (
+    <div className="grid w-[240px] gap-2">
+      <Label>Controlled</Label>
+      <Select value={value} onValueChange={setValue}>
+        <SelectTrigger>
+          <SelectValue placeholder="Pick one" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="cherry">Cherry</SelectItem>
+        </SelectContent>
+      </Select>
+      <div className="text-sm text-muted-foreground">Selected: {value}</div>
+    </div>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledDemo />,
+};

package/src/stories/shadcn/ui/Separator.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Separator } from '../../../shadcn/ui/separator';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Shadcn/UI/Separator',
+  component: Separator,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Separator>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-full max-w-sm">
+      <div className="text-sm font-medium leading-none">Radix Primitives</div>
+      <Separator className="my-2" />
+      <div className="text-sm text-muted-foreground">
+        An open-source UI component library.
+      </div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-10 items-center space-x-4 text-sm">
+      <div>Blog</div>
+      <Separator orientation="vertical" />
+      <div>Docs</div>
+      <Separator orientation="vertical" />
+      <div>Source</div>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Sheet.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from '../../../shadcn/ui/sheet';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Sheet> = {
+  title: 'Shadcn/UI/Sheet',
+  component: Sheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sheet>;
+
+export const Basic: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Sheet</Button>
+      </SheetTrigger>
+      <SheetContent side="right">
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="p-4 text-sm text-muted-foreground">
+          Put any content here. This panel slides from the right and can be closed via the X button.
+        </div>
+        <SheetFooter>
+          <div className="flex gap-2">
+            <Button variant="outline">Cancel</Button>
+            <Button>Save</Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/src/stories/shadcn/ui/Sidebar.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarTrigger,
+  SidebarHeader,
+  SidebarInput,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarSeparator,
+  SidebarInset,
+  SidebarRail,
+  SidebarFooter,
+  SidebarMenuBadge,
+  SidebarMenuAction,
+} from '../../../shadcn/ui/sidebar';
+import { Inbox, Send, Star, Trash2, Folder, Settings2, Plus } from 'lucide-react';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Shadcn/UI/Sidebar',
+  component: Sidebar,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Sidebar>;
+
+export const BasicLayout: Story = {
+  parameters: {
+    centered: false,
+  },
+  render: () => (
+    <div className="h-svh w-full">
+      <SidebarProvider>
+        <Sidebar>
+          <SidebarHeader>
+            <SidebarTrigger />
+            <SidebarInput placeholder="Search..." />
+          </SidebarHeader>
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Mailboxes</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton isActive tooltip="Inbox">
+                      <Inbox />
+                      <span>Inbox</span>
+                      <SidebarMenuBadge>12</SidebarMenuBadge>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton tooltip="Sent">
+                      <Send />
+                      <span>Sent</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton tooltip="Starred">
+                      <Star />
+                      <span>Starred</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton tooltip="Trash">
+                      <Trash2 />
+                      <span>Trash</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+            <SidebarSeparator />
+            <SidebarGroup>
+              <SidebarGroupLabel>Projects</SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton tooltip="Project Alpha">
+                      <Folder />
+                      <span>Alpha</span>
+                    </SidebarMenuButton>
+                    <SidebarMenuAction title="New item">
+                      <Plus />
+                    </SidebarMenuAction>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton tooltip="Project Beta">
+                      <Folder />
+                      <span>Beta</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton tooltip="Settings">
+                      <Settings2 />
+                      <span>Settings</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+          <SidebarFooter />
+          <SidebarRail />
+        </Sidebar>
+        <SidebarInset>
+          <div>
+            <h3>Content Area</h3>
+            <p>Put any content here. This panel slides from the right and can be closed via the X button.</p>
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Skeleton.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from '../../../shadcn/ui/skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Shadcn/UI/Skeleton',
+  component: Skeleton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Slider.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from '../../../shadcn/ui/slider';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Shadcn/UI/Slider',
+  component: Slider,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="w-[320px] grid gap-3">
+      <Label htmlFor="volume">Volume</Label>
+      <Slider id="volume" defaultValue={[50]} max={100} step={1} />
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Sonner.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toaster } from '../../../shadcn/ui/sonner';
+import { toast } from 'sonner';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Toaster> = {
+  title: 'Shadcn/UI/Sonner',
+  component: Toaster,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toaster>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="space-y-3">
+      <Toaster richColors position="top-right" />
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={() => toast('Hello from Sonner!')}>Default</Button>
+        <Button variant="secondary" onClick={() => toast.success('Saved successfully')}>Success</Button>
+        <Button variant="destructive" onClick={() => toast.error('Something went wrong')}>Error</Button>
+        <Button
+          variant="outline"
+          onClick={() =>
+            toast('Action required', {
+              action: {
+                label: 'Undo',
+                onClick: () => toast('Undone'),
+              },
+            })
+          }
+        >
+          With action
+        </Button>
+      </div>
+    </div>
+  ),
+};

package/src/stories/shadcn/ui/Switch.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Switch } from '../../../shadcn/ui/switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Shadcn/UI/Switch',
+  component: Switch,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+function SwitchDemo() {
+  const [enabled, setEnabled] = useState(false);
+  return (
+    <div className="flex items-center gap-3">
+      <Switch checked={enabled} onCheckedChange={setEnabled} id="demo-switch" />
+      <label htmlFor="demo-switch" className="text-sm">
+        {enabled ? 'Enabled' : 'Disabled'}
+      </label>
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <SwitchDemo />,
+};