Storybook (#328)

* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components
- Updated dependencies
- Set `retries` to a fixed value of 3 for consistent test retries across environments.
- Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete.
- Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.

packages/ui/package.json

@@ -33,12 +33,12 @@
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
     "eslint": "^9.33.0",
-    "next": "15.4.7",
+    "next": "15.5.0",
     "next-themes": "0.4.6",
     "prettier": "^3.6.2",
     "react-day-picker": "^9.9.0",
     "react-hook-form": "^7.62.0",
-    "react-i18next": "^15.6.1",
+    "react-i18next": "^15.7.1",
     "sonner": "^2.0.7",
     "tailwindcss": "4.1.12",
     "tailwindcss-animate": "^1.0.7",
@@ -68,9 +68,11 @@
     "./input": "./src/shadcn/input.tsx",
     "./label": "./src/shadcn/label.tsx",
     "./popover": "./src/shadcn/popover.tsx",
+    "./progress": "./src/shadcn/progress.tsx",
     "./scroll-area": "./src/shadcn/scroll-area.tsx",
     "./select": "./src/shadcn/select.tsx",
     "./sheet": "./src/shadcn/sheet.tsx",
+    "./slider": "./src/shadcn/slider.tsx",
     "./table": "./src/shadcn/table.tsx",
     "./tabs": "./src/shadcn/tabs.tsx",
     "./tooltip": "./src/shadcn/tooltip.tsx",

packages/ui/src/shadcn/slider.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+
+import { Slider as SliderPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils';
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none items-center select-none',
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="bg-primary absolute h-full" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

packages/ui/src/shadcn/table.tsx

@@ -6,20 +6,20 @@ const Table: React.FC<React.HTMLAttributes<HTMLTableElement>> = ({
   className,
   ...props
 }) => (
-  <div className="relative w-full overflow-auto">
+  <div
+    className={cn('bg-background relative flex flex-1 flex-col overflow-auto')}
+  >
     <table
       className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
 );
-Table.displayName = 'Table';
 
 const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
   className,
   ...props
 }) => <thead className={cn('[&_tr]:border-b', className)} {...props} />;
-TableHeader.displayName = 'TableHeader';
 
 const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
   className,
@@ -27,7 +27,6 @@ const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
 }) => (
   <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
 );
-TableBody.displayName = 'TableBody';
 
 const TableFooter: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
   className,
@@ -35,13 +34,12 @@ const TableFooter: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
 }) => (
   <tfoot
     className={cn(
-      'bg-muted/50 border-t font-medium last:[&>tr]:border-b-0',
+      'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
   />
 );
-TableFooter.displayName = 'TableFooter';
 
 const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
   className,
@@ -49,13 +47,12 @@ const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
 }) => (
   <tr
     className={cn(
-      'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+      'hover:bg-muted/50 data-[state=selected]:bg-muted group/row border-b transition-colors',
       className,
     )}
     {...props}
   />
 );
-TableRow.displayName = 'TableRow';
 
 const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
   className,
@@ -63,13 +60,12 @@ const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
 }) => (
   <th
     className={cn(
-      'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'text-muted-foreground h-8 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}
   />
 );
-TableHead.displayName = 'TableHead';
 
 const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
   className,
@@ -77,13 +73,12 @@ const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
 }) => (
   <td
     className={cn(
-      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'px-2 py-1.5 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}
   />
 );
-TableCell.displayName = 'TableCell';
 
 const TableCaption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
   className,
@@ -94,7 +89,6 @@ const TableCaption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
     {...props}
   />
 );
-TableCaption.displayName = 'TableCaption';
 
 export {
   Table,