@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/components/data-table/index.tsx

@@ -0,0 +1,368 @@
+"use client"
+
+import React from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  ColumnDef,
+  flexRender,
+  SortingState,
+  ColumnFiltersState,
+  VisibilityState,
+} from '@tanstack/react-table'
+import { Button } from './button'
+import { Input } from './input'
+import { Card, CardContent } from './card'
+import { 
+  ChevronLeft, 
+  ChevronRight, 
+  ChevronsLeft, 
+  ChevronsRight,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Search,
+  Filter,
+  Download,
+  Settings,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { useDocsProAccess } from '@/components/docs/docs-pro-provider'
+import { useSubscription } from '../../hooks/use-subscription'
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  searchable?: boolean
+  filterable?: boolean
+  exportable?: boolean
+  selectable?: boolean
+  pagination?: boolean
+  pageSize?: number
+  className?: string
+  onRowSelect?: (rows: TData[]) => void
+  onExport?: (data: TData[]) => void
+  features?: {
+    sorting?: boolean
+    filtering?: boolean
+    pagination?: boolean
+    search?: boolean
+    columnVisibility?: boolean
+    rowSelection?: boolean
+    export?: boolean | string[]
+    density?: boolean
+    fullscreen?: boolean
+    print?: boolean
+  }
+  theme?: {
+    headerBg?: string
+    headerText?: string
+    borderColor?: string
+    rowHoverBg?: string
+    selectedRowBg?: string
+  }
+  texts?: {
+    searchPlaceholder?: string
+    noResults?: string
+    rowsPerPage?: string
+    selectedRows?: string
+    exportButton?: string
+    columnsButton?: string
+    densityButton?: string
+    filterButton?: string
+  }
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  searchable = true,
+  filterable = true,
+  exportable = true,
+  selectable = false,
+  pagination = true,
+  pageSize = 10,
+  className,
+  onRowSelect,
+  onExport,
+  features = {},
+  theme = {},
+  texts = {},
+}: DataTableProps<TData, TValue>) {
+  // Check if we're in docs mode or have pro access
+  const docsProAccess = useDocsProAccess()
+  const { hasProAccess, isLoading } = useSubscription()
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="py-12 text-center">
+          <div className="max-w-md mx-auto space-y-4">
+            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
+              <p className="text-muted-foreground text-sm mb-4">
+                Data Table is available exclusively to MoonUI Pro subscribers.
+              </p>
+              <div className="flex gap-3 justify-center">
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+  const [globalFilter, setGlobalFilter] = React.useState('')
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: 'includesString',
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+    },
+    initialState: {
+      pagination: {
+        pageSize,
+      },
+    },
+  })
+
+  React.useEffect(() => {
+    if (onRowSelect && selectable) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows.map(row => row.original)
+      onRowSelect(selectedRows)
+    }
+  }, [rowSelection, onRowSelect, selectable, table])
+
+  // Merge features with defaults
+  const enabledFeatures = {
+    sorting: features.sorting !== false,
+    filtering: features.filtering !== false || filterable,
+    pagination: features.pagination !== false || pagination,
+    search: features.search !== false || searchable,
+    columnVisibility: features.columnVisibility !== false,
+    rowSelection: features.rowSelection !== false || selectable,
+    export: features.export !== false || exportable,
+  }
+
+  const handleExport = () => {
+    if (onExport) {
+      const selectedRows = table.getFilteredSelectedRowModel().rows
+      const dataToExport = selectedRows.length > 0 
+        ? selectedRows.map(row => row.original)
+        : table.getFilteredRowModel().rows.map(row => row.original)
+      onExport(dataToExport)
+    }
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {/* Toolbar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          {searchable && (
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search all columns..."
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+                className="pl-8 w-64"
+              />
+            </div>
+          )}
+          
+          {filterable && (
+            <Button variant="outline" size="sm">
+              <Filter className="mr-2 h-4 w-4" />
+              Filters
+            </Button>
+          )}
+        </div>
+
+        <div className="flex items-center space-x-2">
+          {exportable && (
+            <Button variant="outline" size="sm" onClick={handleExport}>
+              <Download className="mr-2 h-4 w-4" />
+              Export
+            </Button>
+          )}
+          
+          <Button variant="outline" size="sm">
+            <Settings className="mr-2 h-4 w-4" />
+            Columns
+          </Button>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="rounded-md border">
+        <table className="w-full">
+          <thead>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id} className="border-b">
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className="h-12 px-4 text-left align-middle font-medium text-muted-foreground"
+                  >
+                    {header.isPlaceholder ? null : (
+                      <div
+                        className={cn(
+                          "flex items-center space-x-2",
+                          header.column.getCanSort() && "cursor-pointer select-none"
+                        )}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {header.column.getCanSort() && (
+                          <div className="ml-2">
+                            {header.column.getIsSorted() === 'asc' ? (
+                              <ArrowUp className="h-4 w-4" />
+                            ) : header.column.getIsSorted() === 'desc' ? (
+                              <ArrowDown className="h-4 w-4" />
+                            ) : (
+                              <ArrowUpDown className="h-4 w-4" />
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className={cn(
+                    "border-b transition-colors hover:bg-muted/50",
+                    row.getIsSelected() && "bg-muted"
+                  )}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td key={cell.id} className="p-4 align-middle">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={columns.length} className="h-24 text-center">
+                  No results found.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {pagination && (
+        <div className="flex items-center justify-between px-2">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {selectable && table.getFilteredSelectedRowModel().rows.length > 0 && (
+              <span>
+                {table.getFilteredSelectedRowModel().rows.length} of{" "}
+                {table.getFilteredRowModel().rows.length} row(s) selected.
+              </span>
+            )}
+          </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={table.getState().pagination.pageSize}
+                onChange={(e) => table.setPageSize(Number(e.target.value))}
+                className="h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm"
+              >
+                {[10, 20, 30, 40, 50].map((pageSize) => (
+                  <option key={pageSize} value={pageSize}>
+                    {pageSize}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div className="flex w-[100px] 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"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <ChevronsLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                className="h-8 w-8 p-0"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                className="h-8 w-8 p-0"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="outline"
+                className="hidden h-8 w-8 p-0 lg:flex"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <ChevronsRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/draggable-list/index.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import React, { ReactNode } from "react"
+import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd"
+import { cn } from "@moontra/moonui"
+
+export interface DraggableListProps<T> {
+  items: T[]
+  onReorder: (items: T[]) => void
+  renderItem: (item: T, index: number) => ReactNode
+  keyExtractor: (item: T) => string
+  direction?: "vertical" | "horizontal"
+  className?: string
+  droppableId?: string
+  disabled?: boolean
+}
+
+export function DraggableList<T>({
+  items,
+  onReorder,
+  renderItem,
+  keyExtractor,
+  direction = "vertical",
+  className,
+  droppableId = "draggable-list",
+  disabled = false,
+}: DraggableListProps<T>) {
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination || disabled) {
+      return
+    }
+
+    const sourceIndex = result.source.index
+    const destinationIndex = result.destination.index
+
+    if (sourceIndex === destinationIndex) {
+      return
+    }
+
+    const newItems = Array.from(items)
+    const [reorderedItem] = newItems.splice(sourceIndex, 1)
+    newItems.splice(destinationIndex, 0, reorderedItem)
+
+    onReorder(newItems)
+  }
+
+  return (
+    <DragDropContext onDragEnd={handleDragEnd}>
+      <Droppable 
+        droppableId={droppableId} 
+        direction={direction}
+        isDropDisabled={disabled}
+      >
+        {(provided, snapshot) => (
+          <div
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+            className={cn(
+              "space-y-2",
+              direction === "horizontal" && "flex space-y-0 space-x-2",
+              snapshot.isDraggingOver && "bg-muted/50 rounded-lg",
+              className
+            )}
+          >
+            {items.map((item, index) => (
+              <Draggable
+                key={keyExtractor(item)}
+                draggableId={keyExtractor(item)}
+                index={index}
+                isDragDisabled={disabled}
+              >
+                {(provided, snapshot) => (
+                  <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    className={cn(
+                      "transition-all duration-200",
+                      snapshot.isDragging && "rotate-2 scale-105 shadow-lg z-50",
+                      disabled && "cursor-not-allowed opacity-50"
+                    )}
+                    style={{
+                      ...provided.draggableProps.style,
+                      transform: snapshot.isDragging
+                        ? provided.draggableProps.style?.transform
+                        : "none",
+                    }}
+                  >
+                    {renderItem(item, index)}
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  )
+}