@tuturuuu/ui 0.0.4

package/src/components/ui/custom/tables/data-table.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../table';
+import { DataTablePagination } from './data-table-pagination';
+import { DataTableToolbar } from './data-table-toolbar';
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { cn } from '@tuturuuu/utils/format';
+import { ReactNode, useState } from 'react';
+
+export interface DataTableProps<TData, TValue> {
+  hideToolbar?: boolean;
+  hidePagination?: boolean;
+  columns?: ColumnDef<TData, TValue>[];
+  filters?: ReactNode[] | ReactNode;
+  extraColumns?: any[];
+  extraData?: any;
+  newObjectTitle?: string;
+  editContent?: ReactNode;
+  namespace?: string | undefined;
+  data?: TData[];
+  count?: number | null;
+  pageIndex?: number;
+  pageSize?: number;
+  defaultQuery?: string;
+  defaultVisibility?: VisibilityState;
+  disableSearch?: boolean;
+  isEmpty?: boolean;
+  toolbarImportContent?: ReactNode;
+  toolbarExportContent?: ReactNode;
+  className?: string;
+  onRefresh?: () => void;
+  // eslint-disable-next-line no-unused-vars
+  onSearch?: (query: string) => void;
+  // eslint-disable-next-line no-unused-vars
+  setParams?: (params: { page?: number; pageSize?: string }) => void;
+  resetParams?: () => void;
+  t?: any;
+  columnGenerator?: (
+    // eslint-disable-next-line no-unused-vars
+    t: any,
+    // eslint-disable-next-line no-unused-vars
+    namespace: string | undefined,
+    // eslint-disable-next-line no-unused-vars
+    extraColumns?: any[],
+    // eslint-disable-next-line no-unused-vars
+    extraData?: any
+  ) => ColumnDef<TData, TValue>[];
+}
+
+export function DataTable<TData, TValue>({
+  hideToolbar = false,
+  hidePagination = false,
+  columns,
+  filters,
+  extraColumns,
+  extraData,
+  newObjectTitle,
+  editContent,
+  namespace,
+  data,
+  count,
+  pageIndex = 0,
+  pageSize = 10,
+  defaultQuery,
+  defaultVisibility = {},
+  disableSearch,
+  isEmpty,
+  t,
+  toolbarImportContent,
+  toolbarExportContent,
+  className,
+  onRefresh,
+  onSearch,
+  setParams,
+  resetParams,
+  columnGenerator,
+}: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = useState({});
+  const [columnVisibility, setColumnVisibility] =
+    useState<VisibilityState>(defaultVisibility);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data: data || [],
+    columns:
+      columnGenerator && t
+        ? columnGenerator(t, namespace, extraColumns, extraData)
+        : columns || [],
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination: {
+        pageIndex,
+        pageSize,
+      },
+    },
+    pageCount:
+      count != undefined ? Math.max(Math.ceil(count / pageSize), 1) : undefined,
+    enableRowSelection: true,
+    autoResetPageIndex: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {hideToolbar || (
+        <DataTableToolbar
+          hasData={!!data}
+          namespace={namespace}
+          table={table}
+          newObjectTitle={newObjectTitle}
+          editContent={editContent}
+          filters={filters}
+          extraColumns={extraColumns}
+          disableSearch={disableSearch}
+          t={t}
+          isEmpty={isEmpty || !data?.length}
+          defaultQuery={defaultQuery}
+          onSearch={onSearch || (() => {})}
+          onRefresh={onRefresh || (() => {})}
+          resetParams={resetParams || (() => {})}
+          importContent={toolbarImportContent}
+          exportContent={toolbarExportContent}
+        />
+      )}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id} className="text-foreground/70">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={`${namespace}-${row.id}`}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={`${namespace}-${cell.id}`}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={
+                    (namespace && columnGenerator?.(t, namespace)?.length) ||
+                    columns?.length ||
+                    1
+                  }
+                  className="h-24 text-center opacity-60"
+                >
+                  {data
+                    ? `${t?.('common.no-results')}.`
+                    : `${t?.('common.loading')}...`}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {hidePagination ||
+        (count !== undefined && (
+          <>
+            <DataTablePagination
+              t={t}
+              table={table}
+              count={count}
+              className="rounded-lg border bg-foreground/[0.025] px-4 py-2 backdrop-blur-xl dark:bg-foreground/5"
+              setParams={setParams}
+            />
+            <div className="h-4" />
+          </>
+        ))}
+    </div>
+  );
+}

package/src/components/ui/custom/uploaded-files-card.tsx

@@ -0,0 +1,50 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../card';
+import { ScrollArea, ScrollBar } from '../scroll-area';
+import { EmptyCard } from './empty-card';
+
+interface UploadedFilesCardProps {
+  uploadedFiles: any[];
+}
+
+export function UploadedFilesCard({ uploadedFiles }: UploadedFilesCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Uploaded files</CardTitle>
+        <CardDescription>View the uploaded files here</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {uploadedFiles.length > 0 ? (
+          <ScrollArea className="pb-4">
+            <div className="flex w-max space-x-2.5">
+              {uploadedFiles.map((file) => (
+                <div key={file.key} className="relative aspect-video w-64">
+                  <img
+                    src={file.url}
+                    alt={file.name}
+                    sizes="(min-width: 640px) 640px, 100vw"
+                    loading="lazy"
+                    className="rounded-md object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        ) : (
+          <EmptyCard
+            title="No files uploaded"
+            description="Upload some files to see them here"
+            className="w-full"
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/dialog.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@tuturuuu/utils/format';
+import { XIcon } from 'lucide-react';
+import * as React from 'react';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        'text-lg leading-none font-semibold tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/components/ui/drawer.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'group/drawer-content fixed z-50 flex h-auto flex-col bg-background',
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg',
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg',
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          className
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('font-semibold tracking-tight text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};