@k3-universe/react-kit 0.0.1

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

@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useMemo, useState } from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from '../../../shadcn/ui/table';
+import { Input } from '../../../shadcn/ui/input';
+import { Button } from '../../../shadcn/ui/button';
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '../../../shadcn/ui/select';
+import { Checkbox } from '../../../shadcn/ui/checkbox';
+
+const meta: Meta<typeof Table> = {
+  title: 'Shadcn/UI/Table',
+  component: Table,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+export const Basic: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead>Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>INV001</TableCell>
+          <TableCell>Paid</TableCell>
+          <TableCell>Credit Card</TableCell>
+          <TableCell>$250.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>INV002</TableCell>
+          <TableCell>Processing</TableCell>
+          <TableCell>PayPal</TableCell>
+          <TableCell>$150.00</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>INV003</TableCell>
+          <TableCell>Unpaid</TableCell>
+          <TableCell>Bank Transfer</TableCell>
+          <TableCell>$350.00</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  ),
+};
+
+type Invoice = {
+  id: string;
+  status: 'Paid' | 'Processing' | 'Unpaid';
+  method: 'Credit Card' | 'PayPal' | 'Bank Transfer';
+  amount: number; // cents
+};
+
+function formatCurrency(cents: number) {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(cents / 100);
+}
+
+const SAMPLE_DATA: Invoice[] = [
+  { id: 'INV001', status: 'Paid',        method: 'Credit Card',   amount: 25000 },
+  { id: 'INV002', status: 'Processing',  method: 'PayPal',        amount: 15000 },
+  { id: 'INV003', status: 'Unpaid',      method: 'Bank Transfer', amount: 35000 },
+  { id: 'INV004', status: 'Paid',        method: 'Credit Card',   amount: 12000 },
+  { id: 'INV005', status: 'Unpaid',      method: 'PayPal',        amount: 9800 },
+  { id: 'INV006', status: 'Processing',  method: 'Bank Transfer', amount: 44000 },
+  { id: 'INV007', status: 'Paid',        method: 'Credit Card',   amount: 199900 },
+  { id: 'INV008', status: 'Processing',  method: 'PayPal',        amount: 5600 },
+  { id: 'INV009', status: 'Unpaid',      method: 'Credit Card',   amount: 7600 },
+  { id: 'INV010', status: 'Paid',        method: 'Bank Transfer', amount: 87500 },
+];
+
+type SortKey = keyof Pick<Invoice, 'id' | 'status' | 'method' | 'amount'>;
+type SortDir = 'asc' | 'desc';
+
+function useSortedFilteredPagedData(
+  data: Invoice[],
+  opts: {
+    sortKey: SortKey | null;
+    sortDir: SortDir;
+    query: string;
+    status: 'all' | Invoice['status'];
+    page: number;
+    pageSize: number;
+  },
+) {
+  const filtered = useMemo(() => {
+    const q = opts.query.trim().toLowerCase();
+    return data.filter((row) => {
+      const matchesQuery = q ? row.id.toLowerCase().includes(q) || row.method.toLowerCase().includes(q) : true;
+      const matchesStatus = opts.status === 'all' ? true : row.status === opts.status;
+      return matchesQuery && matchesStatus;
+    });
+  }, [data, opts.query, opts.status]);
+
+  const sorted = useMemo(() => {
+    if (!opts.sortKey) return filtered;
+    const sortedCopy = [...filtered].sort((a, b) => {
+      const key = opts.sortKey as SortKey;
+      const av = a[key];
+      const bv = b[key];
+      if (typeof av === 'number' && typeof bv === 'number') return av - bv;
+      return String(av).localeCompare(String(bv));
+    });
+    return opts.sortDir === 'asc' ? sortedCopy : sortedCopy.reverse();
+  }, [filtered, opts.sortDir, opts.sortKey]);
+
+  const total = sorted.length;
+  const start = opts.page * opts.pageSize;
+  const end = start + opts.pageSize;
+  const pageRows = sorted.slice(start, end);
+  const totalPages = Math.max(1, Math.ceil(total / opts.pageSize));
+
+  return { rows: pageRows, total, totalPages };
+}
+
+type StatusFilter = 'all' | Invoice['status'];
+
+function TableAdvancedDemo() {
+  const [query, setQuery] = useState('');
+  const [status, setStatus] = useState<StatusFilter>('all');
+  const [sortKey, setSortKey] = useState<SortKey | null>('id');
+  const [sortDir, setSortDir] = useState<SortDir>('asc');
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(5);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+
+  const { rows, total, totalPages } = useSortedFilteredPagedData(SAMPLE_DATA, {
+    sortKey,
+    sortDir,
+    query,
+    status,
+    page,
+    pageSize,
+  });
+
+  function onSort(nextKey: SortKey) {
+    setPage(0);
+    setSortKey((prev) => {
+      if (prev !== nextKey) {
+        setSortDir('asc');
+        return nextKey;
+      }
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+      return prev;
+    });
+  }
+
+  // Selection helpers
+  const pageIds = rows.map((r) => r.id);
+  const allPageSelected = pageIds.length > 0 && pageIds.every((id) => selected.has(id));
+  const somePageSelected = pageIds.some((id) => selected.has(id)) && !allPageSelected;
+  function toggleAllOnPage(checked: boolean) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (checked) {
+        pageIds.forEach((id) => next.add(id));
+      } else {
+        pageIds.forEach((id) => next.delete(id));
+      }
+      return next;
+    });
+  }
+  function toggleOne(id: string, checked: boolean) {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <Input
+          placeholder="Search invoice or method..."
+          value={query}
+          onChange={(e) => {
+            setPage(0);
+            setQuery(e.target.value);
+          }}
+          className="w-60"
+        />
+        <Select value={status} onValueChange={(v) => { setPage(0); setStatus(v as StatusFilter); }}>
+          <SelectTrigger className="w-44">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All statuses</SelectItem>
+            <SelectItem value="Paid">Paid</SelectItem>
+            <SelectItem value="Processing">Processing</SelectItem>
+            <SelectItem value="Unpaid">Unpaid</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={String(pageSize)} onValueChange={(v) => { setPage(0); setPageSize(parseInt(v, 10)); }}>
+          <SelectTrigger className="w-36">
+            <SelectValue placeholder="Page size" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="5">5 / page</SelectItem>
+            <SelectItem value="10">10 / page</SelectItem>
+            <SelectItem value="20">20 / page</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {selected.size > 0 && (
+        <div className="flex items-center justify-between rounded-md border bg-muted/40 px-3 py-2 text-sm">
+          <div>
+            <strong>{selected.size}</strong> selected
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => setSelected(new Set())}>Clear selection</Button>
+            <Button variant="default">Bulk action</Button>
+          </div>
+        </div>
+      )}
+
+      <Table>
+        <TableCaption>Invoices ({total} total)</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-10">
+              <Checkbox
+                checked={somePageSelected ? 'indeterminate' : allPageSelected}
+                onCheckedChange={(v) => toggleAllOnPage(v === 'indeterminate' ? true : Boolean(v))}
+                aria-label="Select all on page"
+              />
+            </TableHead>
+            <TableHead>
+              <Button variant="ghost" onClick={() => onSort('id')}>
+                Invoice {sortKey === 'id' && (sortDir === 'asc' ? '▲' : '▼')}
+              </Button>
+            </TableHead>
+            <TableHead>
+              <Button variant="ghost" onClick={() => onSort('status')}>
+                Status {sortKey === 'status' && (sortDir === 'asc' ? '▲' : '▼')}
+              </Button>
+            </TableHead>
+            <TableHead>
+              <Button variant="ghost" onClick={() => onSort('method')}>
+                Method {sortKey === 'method' && (sortDir === 'asc' ? '▲' : '▼')}
+              </Button>
+            </TableHead>
+            <TableHead className="text-right">
+              <Button variant="ghost" onClick={() => onSort('amount')}>
+                Amount {sortKey === 'amount' && (sortDir === 'asc' ? '▲' : '▼')}
+              </Button>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell className="w-10">
+                <Checkbox
+                  checked={selected.has(row.id)}
+                  onCheckedChange={(v) => toggleOne(row.id, Boolean(v))}
+                  aria-label={`Select ${row.id}`}
+                />
+              </TableCell>
+              <TableCell className="font-medium">{row.id}</TableCell>
+              <TableCell>{row.status}</TableCell>
+              <TableCell>{row.method}</TableCell>
+              <TableCell className="text-right">{formatCurrency(row.amount)}</TableCell>
+            </TableRow>
+          ))}
+          {rows.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={5} className="text-center text-muted-foreground">
+                No results
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+
+      <div className="flex items-center justify-between gap-2">
+        <div className="text-sm text-muted-foreground">Page {page + 1} of {totalPages}</div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={() => setPage(0)} disabled={page === 0}>
+            « First
+          </Button>
+          <Button variant="outline" onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0}>
+            ‹ Prev
+          </Button>
+          <Button variant="outline" onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}>
+            Next ›
+          </Button>
+          <Button variant="outline" onClick={() => setPage(totalPages - 1)} disabled={page >= totalPages - 1}>
+            Last »
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const WithSortingFilteringPagination: Story = {
+  render: () => <TableAdvancedDemo />,
+};

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../shadcn/ui/tabs';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Shadcn/UI/Tabs',
+  component: Tabs,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Basic: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">Make changes to your account here.</TabsContent>
+      <TabsContent value="password">Change your password here.</TabsContent>
+    </Tabs>
+  ),
+};

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from '../../../shadcn/ui/textarea';
+import { Label } from '../../../shadcn/ui/label';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Shadcn/UI/Textarea',
+  component: Textarea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const Basic: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-2">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea id="message" placeholder="Type your message here." />
+    </div>
+  ),
+};
+
+export const WithDescription: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-2">
+      <Label htmlFor="bio">Bio</Label>
+      <Textarea id="bio" placeholder="Tell us a little about yourself" />
+      <p className="text-sm text-muted-foreground">Your bio will be displayed on your profile.</p>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-2">
+      <Label htmlFor="disabled-textarea">Disabled</Label>
+      <Textarea id="disabled-textarea" placeholder="Can't type here" disabled />
+    </div>
+  ),
+};

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Toggle } from '../../../shadcn/ui/toggle';
+import { Bold, Italic, Underline } from 'lucide-react';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Shadcn/UI/Toggle',
+  component: Toggle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+function ToggleDemo() {
+  const [bold, setBold] = useState(false);
+  const [italic, setItalic] = useState(true);
+  const [underline, setUnderline] = useState(false);
+  return (
+    <div className="flex items-center gap-2">
+      <Toggle aria-label="Toggle bold" pressed={bold} onPressedChange={setBold}>
+        <Bold />
+      </Toggle>
+      <Toggle aria-label="Toggle italic" pressed={italic} onPressedChange={setItalic}>
+        <Italic />
+      </Toggle>
+      <Toggle aria-label="Toggle underline" pressed={underline} onPressedChange={setUnderline}>
+        <Underline />
+      </Toggle>
+    </div>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <ToggleDemo />,
+};

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleGroup, ToggleGroupItem } from '../../../shadcn/ui/toggle-group';
+import { Bold, Italic, Underline } from 'lucide-react';
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'Shadcn/UI/ToggleGroup',
+  component: ToggleGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Single: Story = {
+  render: () => (
+    <ToggleGroup type="single" defaultValue="bold" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../../../shadcn/ui/tooltip';
+import { Button } from '../../../shadcn/ui/button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Shadcn/UI/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Basic: Story = {
+  render: () => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>Tooltip content</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ),
+};

package/storybook-static/assets/Accordion.stories-N1auke5L.js

@@ -0,0 +1,52 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{A as n,a as o,b as r,c as i}from"./accordion-bQe9Rep4.js";import{r as T}from"./iframe-G-6sM9Mt.js";import"./index-DvM9azdj.js";import"./index-BDwnENHR.js";import"./index-1v1lhNFD.js";import"./index-DW48STyt.js";import"./index-CAwQR9Pv.js";import"./index-I343IfOC.js";import"./index-DqWzLCH-.js";import"./index-_crRFOM5.js";import"./index-CZaD3imo.js";import"./index-B-fXBfyD.js";import"./index-Bq6UNRVc.js";import"./index-DhoByIgc.js";import"./index-ClNNG_ys.js";import"./utils-D-KgF5mV.js";import"./chevron-down-BqLjUn1_.js";import"./createLucideIcon-1ZwIAs_l.js";import"./preload-helper-Dp1pzeXC.js";const G={title:"Shadcn/UI/Accordion",component:n},c={args:{type:"single",collapsible:!0},render:t=>e.jsxs(n,{...t,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Is it accessible?"}),e.jsx(i,{children:"Yes. It adheres to WAI-ARIA design patterns."})]}),e.jsxs(o,{value:"item-2",children:[e.jsx(r,{children:"Is it styled?"}),e.jsx(i,{children:"Yes. It comes with default styles that can be overridden."})]}),e.jsxs(o,{value:"item-3",children:[e.jsx(r,{children:"Is it animated?"}),e.jsx(i,{children:"Yes. It uses utility classes for smooth animations."})]})]})},s={args:{type:"multiple",defaultValue:["item-1"]},render:t=>e.jsxs(n,{...t,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Open multiple items?"}),e.jsx(i,{children:"Yes. In multiple mode you can keep several sections open."})]}),e.jsxs(o,{value:"item-2",children:[e.jsx(r,{children:"Keeps state independent?"}),e.jsx(i,{children:"Each item can be toggled independently in multiple mode."})]}),e.jsxs(o,{value:"item-3",children:[e.jsx(r,{children:"Works with defaultValue?"}),e.jsx(i,{children:"Provide an array of values to open initially."})]})]})},d={render:t=>e.jsxs(n,{...t,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Interactable item"}),e.jsx(i,{children:"This item can be toggled as usual."})]}),e.jsxs(o,{value:"item-2",disabled:!0,children:[e.jsx(r,{children:"Disabled item"}),e.jsx(i,{children:"This content cannot be toggled because the item is disabled."})]})]})};function y(){const[t,C]=T.useState("item-1");return e.jsxs(n,{type:"single",collapsible:!0,value:t,onValueChange:C,children:[e.jsxs(o,{value:"item-1",children:[e.jsx(r,{children:"Controlled: Item 1"}),e.jsx(i,{children:"Clicking again will collapse because collapsible is true."})]}),e.jsxs(o,{value:"item-2",children:[e.jsx(r,{children:"Controlled: Item 2"}),e.jsx(i,{children:"State is managed via value/onValueChange."})]})]})}const a={render:()=>e.jsx(y,{})};var l,m,u;c.parameters={...c.parameters,docs:{...(l=c.parameters)==null?void 0:l.docs,source:{originalSource:`{
+  args: {
+    type: 'single',
+    collapsible: true
+  },
+  render: args => <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to WAI-ARIA design patterns.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>Yes. It comes with default styles that can be overridden.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>Yes. It uses utility classes for smooth animations.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+}`,...(u=(m=c.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var p,g,A;s.parameters={...s.parameters,docs:{...(p=s.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  args: {
+    type: 'multiple',
+    defaultValue: ['item-1']
+  },
+  render: args => <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Open multiple items?</AccordionTrigger>
+        <AccordionContent>Yes. In multiple mode you can keep several sections open.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Keeps state independent?</AccordionTrigger>
+        <AccordionContent>Each item can be toggled independently in multiple mode.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Works with defaultValue?</AccordionTrigger>
+        <AccordionContent>Provide an array of values to open initially.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+}`,...(A=(g=s.parameters)==null?void 0:g.docs)==null?void 0:A.source}}};var h,I,x;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  render: args => <Accordion {...args}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Interactable item</AccordionTrigger>
+        <AccordionContent>This item can be toggled as usual.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2" disabled>
+        <AccordionTrigger>Disabled item</AccordionTrigger>
+        <AccordionContent>This content cannot be toggled because the item is disabled.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+}`,...(x=(I=d.parameters)==null?void 0:I.docs)==null?void 0:x.source}}};var j,v,b;a.parameters={...a.parameters,docs:{...(j=a.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  render: () => <ControlledAccordionDemo />
+}`,...(b=(v=a.parameters)==null?void 0:v.docs)==null?void 0:b.source}}};const H=["Basic","Multiple","DisabledItem","Controlled"];export{c as Basic,a as Controlled,d as DisabledItem,s as Multiple,H as __namedExportsOrder,G as default};