@codefast/ui 0.0.38 → 0.0.40

package/src/react/data-table.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import * as React from "react";
+import type * as ReactTable from "@tanstack/react-table";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CaretSortIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+  EyeNoneIcon,
+  MixerHorizontalIcon,
+} from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Button } from "./button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+
+/* -----------------------------------------------------------------------------
+ * Component: DataTableViewOptions
+ * -------------------------------------------------------------------------- */
+
+interface DataTableViewOptionsProps<TData> {
+  table: ReactTable.Table<TData>;
+}
+
+function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+          <MixerHorizontalIcon className="mr-2 size-4" />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-36">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => {
+                  column.toggleVisibility(Boolean(value));
+                }}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DataTablePagination
+ * -------------------------------------------------------------------------- */
+
+interface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
+  table: ReactTable.Table<TData>;
+}
+
+function DataTablePagination<TData>({
+  table,
+  className,
+  ...props
+}: DataTablePaginationProps<TData>): React.JSX.Element {
+  return (
+    <div className={cn("flex items-center justify-between px-2", className)} {...props}>
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={String(table.getState().pagination.pageSize)}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="w-18 h-8">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={String(pageSize)}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-28 items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon-xs"
+            className="hidden  lg:flex"
+            onClick={() => {
+              table.setPageIndex(0);
+            }}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <DoubleArrowLeftIcon className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon-xs"
+            onClick={() => {
+              table.previousPage();
+            }}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeftIcon className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon-xs"
+            onClick={() => {
+              table.nextPage();
+            }}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRightIcon className="size-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon-xs"
+            className="hidden  lg:flex"
+            onClick={() => {
+              table.setPageIndex(table.getPageCount() - 1);
+            }}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <DoubleArrowRightIcon className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DataTableColumnHeader
+ * -------------------------------------------------------------------------- */
+
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  column: ReactTable.Column<TData, TValue>;
+  title: string;
+}
+
+function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {
+  if (!column.getCanSort()) {
+    return <div className={className}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="xs" className="data-[state=open]:bg-accent -ml-3">
+            <span>{title}</span>
+            <SortIcon sorted={column.getIsSorted()} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            onClick={() => {
+              column.toggleSorting(false);
+            }}
+          >
+            <ArrowUpIcon className="text-muted-foreground/70 mr-2 size-3.5" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              column.toggleSorting(true);
+            }}
+          >
+            <ArrowDownIcon className="text-muted-foreground/70 mr-2 size-3.5" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => {
+              column.toggleVisibility(false);
+            }}
+          >
+            <EyeNoneIcon className="text-muted-foreground/70 mr-2 size-3.5" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+function SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {
+  switch (sorted) {
+    case "desc":
+      return <ArrowDownIcon className="ml-2 size-4" />;
+    case "asc":
+      return <ArrowUpIcon className="ml-2 size-4" />;
+    default:
+      return <CaretSortIcon className="ml-2 size-4" />;
+  }
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  DataTableViewOptions,
+  DataTablePagination,
+  DataTableColumnHeader,
+  type DataTableViewOptionsProps,
+  type DataTablePaginationProps,
+  type DataTableColumnHeaderProps,
+};

package/src/react/dialog.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Dialog
+ * -------------------------------------------------------------------------- */
+
+type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+const Dialog = DialogPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogTrigger
+ * -------------------------------------------------------------------------- */
+
+type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+const DialogTrigger = DialogPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogClose
+ * -------------------------------------------------------------------------- */
+
+type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+const DialogClose = DialogPrimitive.Close;
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogContent
+ * -------------------------------------------------------------------------- */
+
+type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+
+const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
+  ({ children, className, ...props }, ref) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none">
+          <Cross2Icon className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  ),
+);
+
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogHeader
+ * -------------------------------------------------------------------------- */
+
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element {
+  return <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogFooter
+ * -------------------------------------------------------------------------- */
+
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element {
+  return <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogTitle
+ * -------------------------------------------------------------------------- */
+
+type DialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
+type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogDescription
+ * -------------------------------------------------------------------------- */
+
+type DialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
+type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+
+const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  ),
+);
+
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  type DialogProps,
+  type DialogTriggerProps,
+  type DialogCloseProps,
+  type DialogContentProps,
+  type DialogHeaderProps,
+  type DialogFooterProps,
+  type DialogTitleProps,
+  type DialogDescriptionProps,
+};

package/src/react/drawer.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Drawer
+ * -------------------------------------------------------------------------- */
+
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+
+function Drawer({ shouldScaleBackground = true, ...props }: DrawerProps): React.JSX.Element {
+  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerTrigger
+ * -------------------------------------------------------------------------- */
+
+type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger>;
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerClose
+ * -------------------------------------------------------------------------- */
+
+type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>;
+const DrawerClose = DrawerPrimitive.Close;
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerContent
+ * -------------------------------------------------------------------------- */
+
+type DrawerContentElement = React.ElementRef<typeof DrawerPrimitive.Content>;
+type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>;
+
+const DrawerContent = React.forwardRef<DrawerContentElement, DrawerContentProps>(
+  ({ children, className, ...props }, ref) => (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border",
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 h-2 w-24 rounded-full" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  ),
+);
+
+DrawerContent.displayName = "DrawerContent";
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerHeader
+ * -------------------------------------------------------------------------- */
+
+type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+function DrawerHeader({ className, ...props }: DrawerHeaderProps): React.JSX.Element {
+  return <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerFooter
+ * -------------------------------------------------------------------------- */
+
+type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+function DrawerFooter({ className, ...props }: DrawerFooterProps): React.JSX.Element {
+  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerTitle
+ * -------------------------------------------------------------------------- */
+
+type DrawerTitleElement = React.ElementRef<typeof DrawerPrimitive.Title>;
+type DrawerTitleProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>;
+
+const DrawerTitle = React.forwardRef<DrawerTitleElement, DrawerTitleProps>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: DrawerDescription
+ * -------------------------------------------------------------------------- */
+
+type DrawerDescriptionElement = React.ElementRef<typeof DrawerPrimitive.Description>;
+type DrawerDescriptionProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>;
+
+const DrawerDescription = React.forwardRef<DrawerDescriptionElement, DrawerDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <DrawerPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  ),
+);
+
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  type DrawerProps,
+  type DrawerTriggerProps,
+  type DrawerCloseProps,
+  type DrawerContentProps,
+  type DrawerHeaderProps,
+  type DrawerFooterProps,
+  type DrawerTitleProps,
+  type DrawerDescriptionProps,
+};