@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/components/DataDisplay/DataTable/components/TableHeaders/TableActionHeader.tsx

@@ -0,0 +1,124 @@
+import { DialogButton } from '@/components/Navigation/DialogButton/DialogButton';
+import { Card } from '@/shadcn-components/DataDisplay/Card/Card';
+import { ColumnDef } from '@tanstack/react-table';
+import { Axios } from 'axios';
+import { LayoutGrid, Plus, Table } from 'lucide-react';
+import { useQuery } from 'react-query';
+import { Button } from '../../../../Input/Button/Button';
+import ColumnSelector from '../ColumnSelector/ColumnSelector';
+import DensitySelector from '../DensitySelector/DensitySelector';
+import { CreateViewForm } from '../ViewList/CreateViewForm';
+import { ResponsiveViews } from '../ViewList/ResponsiveViews';
+import { View } from '../ViewList/ViewButton';
+
+type TableActionHeaderProps = {
+  layoutMode: 'table' | 'card';
+  onLayoutChange: (mode: 'table' | 'card') => void;
+  uniqueId: string;
+  columns: ColumnDef<any, any>[];
+  viewsProps: {
+    type: string;
+    axios: Axios;
+  };
+};
+
+const TableActionHeader = ({
+  layoutMode,
+  onLayoutChange,
+  uniqueId,
+  columns,
+  viewsProps,
+}: TableActionHeaderProps) => {
+  const { data: views, isLoading } = useQuery(
+    viewsProps.type,
+    async (): Promise<View[]> => {
+      return viewsProps.axios
+        .get(`/admin/views/user-views/${viewsProps.type}`)
+        .then((data) => data.data);
+    },
+  );
+
+  return (
+    <Card className="w-full flex flex-row justify-between items-center py-2 px-2 lg:px-3 gap-2">
+      {/* Views Section */}
+      <div className="flex items-center gap-1 flex-1 min-w-0">
+        {isLoading ? (
+          <Button variant="secondary" size="sm" disabled>
+            Loading...
+          </Button>
+        ) : (
+          <ResponsiveViews
+            views={views || []}
+            uniqueId={uniqueId}
+            axios={viewsProps.axios}
+            viewType={viewsProps.type}
+          />
+        )}
+
+        {/* Add View Button - Icon only on mobile, with text on tablet+ */}
+        <DialogButton
+          anchor={({ open }) => (
+            <>
+              {/* Mobile: Icon only */}
+              <Button
+                variant="default"
+                size="icon-sm"
+                onClick={open}
+                className="md:hidden"
+              >
+                <Plus className="w-4 h-4" />
+              </Button>
+
+              {/* Tablet & Desktop: Icon + Text */}
+              <Button
+                variant="default"
+                size="sm"
+                onClick={open}
+                startIcon={<Plus />}
+                className="hidden md:flex"
+              >
+                Add View
+              </Button>
+            </>
+          )}
+          title="Save View"
+          maxWidth="lg"
+          content={({ close }) => (
+            <CreateViewForm
+              close={close}
+              axios={viewsProps.axios}
+              type={viewsProps.type}
+              uniqueId={uniqueId}
+            />
+          )}
+        />
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Density Selector  */}
+        <DensitySelector uniqueId={uniqueId} />
+        {/* Column Selector  */}
+        <ColumnSelector columns={columns} uniqueId={uniqueId} />
+        {/* Layout Switcher */}
+        <div className="flex gap-1 border rounded-md flex-shrink-0 bg-background">
+          <Button
+            variant={layoutMode === 'table' ? 'default' : 'ghost'}
+            size="sm"
+            onClick={() => onLayoutChange('table')}
+          >
+            <Table />
+          </Button>
+          <Button
+            variant={layoutMode === 'card' ? 'default' : 'ghost'}
+            size="sm"
+            onClick={() => onLayoutChange('card')}
+          >
+            <LayoutGrid />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export { TableActionHeader };

package/src/components/DataDisplay/DataTable/components/TableHeaders/TableSelectionHeader.tsx

@@ -0,0 +1,50 @@
+import { Card } from '@/shadcn-components/DataDisplay/Card/Card';
+import { X } from 'lucide-react';
+import { Button } from '../../../../Input/Button/Button';
+import { Separator } from '../../../Separator/Separator';
+
+type TableSelectionHeaderProps = {
+  selectedCount: number;
+  onClearSelection: () => void;
+  actions?: React.ReactNode[];
+};
+
+const TableSelectionHeader = ({
+  selectedCount,
+  onClearSelection,
+  actions = [],
+}: TableSelectionHeaderProps) => {
+  return (
+    <Card className="w-full flex flex-row items-center gap-2 py-2 px-2 lg:px-3">
+      {/* Selection Info Section */}
+      <div className="flex items-center gap-2 min-w-0">
+        <span className="text-sm font-medium whitespace-nowrap">
+          {selectedCount} selected
+        </span>
+
+        {/* Clear Selection Button */}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={onClearSelection}
+          aria-label="Clear selection"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Custom Actions Section */}
+      {actions.length > 0 && <Separator orientation="vertical" />}
+      {actions.length > 0 && (
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {actions.map((action, index) => (
+            <div key={index}>{action}</div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export { TableSelectionHeader };
+export type { TableSelectionHeaderProps };

package/src/components/DataDisplay/DataTable/components/TablePagination.tsx

@@ -0,0 +1,179 @@
+import { cn } from '@/lib/utils';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/shadcn-components/DataDisplay/Table/Pagination';
+import { useMediaQuery } from '../../../../hooks/export';
+import { DropDownButton } from '../../../Navigation/DropDownMenu/DropDownButton';
+import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
+import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
+import { Typography } from '../../Typography/Typography';
+
+export type PaginationProps = {
+  limit: number;
+  offset: number;
+  totalCount: number;
+  onPageChange: (offset: number) => void;
+  onLimitChange: (limit: number) => void;
+  rowCount: number;
+};
+
+export const TablePagination = (props: PaginationProps) => {
+  const { limit, offset, totalCount, onPageChange, onLimitChange, rowCount } =
+    props;
+
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  const currentPage = Math.ceil(offset / limit) + 1;
+  const totalPages = Math.ceil(totalCount / limit);
+
+  const getPaginationText = () => {
+    if (rowCount === 0) return 'No records';
+    return `${offset + 1} - ${offset + rowCount} of ${totalCount}`;
+  };
+
+  // Generate page numbers to display
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisiblePages = 5;
+    if (totalPages <= maxVisiblePages + 2) {
+      // Show all pages if total is small
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+      if (currentPage > 3) {
+        pages.push('...');
+      }
+      // Show pages around current page
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (currentPage < totalPages - 2) {
+        pages.push('...');
+      }
+
+      // Always show last page
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const handlePageClick = (page: number) => {
+    onPageChange((page - 1) * limit);
+  };
+
+  const pageLimitMenu = [
+    { label: '10 / Page', value: '10' },
+    { label: '20 / Page', value: '20' },
+    { label: '50 / Page', value: '50' },
+    { label: '100 / Page', value: '100' },
+    { label: '200 / Page', value: '200' },
+  ];
+
+  return (
+    <div className="flex flex-row justify-between items-center w-full py-2.5 px-4 bg-surface-grey pagination-container border-t">
+      <DropdownMenu
+        anchor={({ open }) => (
+          <DropDownButton variant={'secondary'} size={'sm'} onClick={open}>
+            {limit} / Page
+          </DropDownButton>
+        )}
+        menu={pageLimitMenu.map((item) => (
+          <DropdownMenuItem
+            key={item.value}
+            label={item.label}
+            onClick={() => onLimitChange(Number(item.value))}
+          />
+        ))}
+        align="start"
+        side="top"
+      />
+
+      <div className="flex items-center gap-6">
+        {/* Actual Pagination */}
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (currentPage > 1) {
+                    handlePageClick(currentPage - 1);
+                  }
+                }}
+                className={cn(
+                  currentPage === 1 && 'pointer-events-none opacity-50',
+                )}
+                size={'sm'}
+              />
+            </PaginationItem>
+
+            {getPageNumbers().map((page, index) => {
+              if (page === '...') {
+                return (
+                  <PaginationItem key={`ellipsis-${index}`}>
+                    <PaginationEllipsis />
+                  </PaginationItem>
+                );
+              }
+
+              const pageNumber = page as number;
+              const isActive = pageNumber === currentPage;
+
+              return (
+                <PaginationItem key={pageNumber}>
+                  <PaginationLink
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handlePageClick(pageNumber);
+                    }}
+                    isActive={isActive}
+                    size={'sm'}
+                  >
+                    {pageNumber}
+                  </PaginationLink>
+                </PaginationItem>
+              );
+            })}
+
+            <PaginationItem>
+              <PaginationNext
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (currentPage < totalPages) {
+                    handlePageClick(currentPage + 1);
+                  }
+                }}
+                className={cn(
+                  currentPage === totalPages &&
+                    'pointer-events-none opacity-50',
+                )}
+                size={'sm'}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+
+        <Typography variant="muted" className="text-nowrap hidden lg:block">
+          {getPaginationText()}
+        </Typography>
+      </div>
+    </div>
+  );
+};

package/src/components/DataDisplay/DataTable/components/TableView.tsx

@@ -0,0 +1,205 @@
+import { cn } from '@/lib/utils';
+import { Card } from '@/shadcn-components/DataDisplay/Card/Card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/shadcn-components/DataDisplay/Table/Table';
+import { flexRender, Row } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
+import React from 'react';
+import { Skeleton } from '../../Skeleton/Skeleton';
+import { TablePagination } from './TablePagination';
+
+interface TableViewProps<TData = any> {
+  table: any; // TanStack Table instance
+  rows: TData[];
+  columns: any[];
+  density?: 'standard' | 'compact' | 'comfortable';
+  tableClassName?: string;
+  headerClassName?: string;
+  isLoading?: boolean;
+  rowClassName?: string | ((row: Row<TData>) => string);
+  cellClassName?: string;
+  limit?: number;
+  offset?: number;
+  totalCount?: number;
+  onPageChange?: (page: number) => void;
+  onLimitChange?: (limit: number) => void;
+}
+
+const TableView = React.forwardRef<HTMLDivElement, TableViewProps>(
+  (
+    {
+      table,
+      rows,
+      columns,
+      isLoading,
+      density = 'standard',
+      tableClassName,
+      headerClassName,
+      rowClassName,
+      cellClassName,
+      limit,
+      offset,
+      totalCount,
+      onPageChange,
+      onLimitChange,
+    },
+    ref,
+  ) => {
+    const getRowHeightClass = (
+      density: 'standard' | 'compact' | 'comfortable',
+    ) => {
+      switch (density) {
+        case 'compact':
+          return 'h-8';
+        case 'comfortable':
+          return 'h-16';
+        case 'standard':
+        default:
+          return 'h-12';
+      }
+    };
+
+    const rowHeightClass = getRowHeightClass(density);
+
+    return (
+      <Card
+        ref={ref}
+        className={cn('w-full rounded-md border bg-background p-0 m-0 gap-0')}
+      >
+        <Table className={cn('rounded-md', tableClassName)}>
+          <TableHeader
+            className={cn('rounded-md, bg-secondary', headerClassName)}
+          >
+            {table.getHeaderGroups().map((headerGroup: any) => (
+              <TableRow key={headerGroup.id} className={rowHeightClass}>
+                {headerGroup.headers.map((header: any, index: number) => (
+                  <TableHead
+                    key={header.id}
+                    className={cn(
+                      index === 0 && 'pl-4 rounded-tl-md',
+                      index === headerGroup.headers.length - 1 &&
+                        'rounded-tr-md',
+                      cellClassName,
+                    )}
+                    style={{
+                      width:
+                        header.getSize() !== 150 ? header.getSize() : undefined,
+                    }}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <div
+                        className={cn(
+                          'flex items-center gap-2',
+                          header.column.getCanSort() &&
+                            'cursor-pointer select-none',
+                        )}
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                        {header.column.getCanSort() && (
+                          <span>
+                            {header.column.getIsSorted() === 'asc' ? (
+                              <ArrowUp className="h-3 w-3" />
+                            ) : header.column.getIsSorted() === 'desc' ? (
+                              <ArrowDown className="h-3 w-3" />
+                            ) : (
+                              <ArrowUpDown className="h-3 w-3" />
+                            )}
+                          </span>
+                        )}
+                      </div>
+                    )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              Array.from({ length: limit ?? 10 }).map((_, rowIndex) => (
+                <TableRow
+                  key={`skeleton-${rowIndex}`}
+                  className={rowHeightClass}
+                >
+                  {/* Use visible header columns count to render correct number of skeleton cells */}
+                  {table.getHeaderGroups()[0]?.headers.map((_: any, cellIndex: number) => (
+                    <TableCell
+                      key={`skeleton-cell-${rowIndex}-${cellIndex}`}
+                      className={cn(cellIndex === 0 && 'pl-4', cellClassName)}
+                    >
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row: any) => {
+                const customRowClassName =
+                  typeof rowClassName === 'function'
+                    ? rowClassName(row)
+                    : rowClassName;
+
+                return (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && 'selected'}
+                    className={cn(rowHeightClass, customRowClassName)}
+                  >
+                    {row.getVisibleCells().map((cell: any, index: number) => (
+                      <TableCell
+                        key={cell.id}
+                        className={cn(index === 0 && 'pl-4', cellClassName)}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              })
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+        {/* Pagination */}
+        {limit !== undefined &&
+          offset !== undefined &&
+          totalCount !== undefined &&
+          onPageChange !== undefined &&
+          onLimitChange !== undefined && (
+            <TablePagination
+              limit={limit}
+              offset={offset}
+              totalCount={totalCount}
+              onPageChange={onPageChange}
+              onLimitChange={onLimitChange}
+              rowCount={rows?.length || 0}
+            />
+          )}
+      </Card>
+    );
+  },
+);
+
+TableView.displayName = 'TableView';
+
+export default TableView;

package/src/components/DataDisplay/DataTable/components/ViewList/CreateViewForm.tsx

@@ -0,0 +1,79 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Axios } from 'axios';
+import { useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from 'react-query';
+import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
+import * as yup from 'yup';
+import { RootState } from '../../../../../redux/store';
+import { FormControlWrapper } from '../../../../Input/FormControlWrapper/FormControlWrapper';
+import { TextField } from '../../../../Input/TextField/TextField';
+
+export type CreateViewFormProps = {
+  close: () => void;
+  axios: Axios;
+  type: string;
+  uniqueId: string;
+};
+
+export const CreateViewForm = ({
+  axios,
+  type,
+  close,
+  uniqueId,
+}: CreateViewFormProps) => {
+  const schema = yup.object().shape({
+    name: yup.string().required('Name is required'),
+  });
+
+  const { control, handleSubmit } = useForm<{ name: string }>({
+    resolver: yupResolver(schema),
+  });
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const state = useSelector((state: RootState) => state.pageHeader[uniqueId]);
+
+  const createView = async (name: string) => {
+    return axios.post(`admin/views`, {
+      name,
+      type,
+      filters: state.filters,
+      columnVisibilityModel: state.columnVisibilityModel,
+      density: state.density,
+    });
+  };
+
+  const queryClient = useQueryClient();
+
+  const { mutate, isLoading } = useMutation(createView, {
+    onSuccess: (res) => {
+      close();
+      queryClient.invalidateQueries(type);
+      searchParams.set('viewId', res.data.viewId);
+      setSearchParams(searchParams);
+    },
+  });
+
+  const onSubmit = (data: { name: string }) => {
+    mutate(data.name);
+  };
+
+  return (
+    <FormControlWrapper
+      control={control}
+      formActionProps={{
+        submitButtonProps: {
+          title: 'Save',
+          onClick: handleSubmit(onSubmit),
+          loading: isLoading,
+        },
+        cancelButtonProps: {
+          title: 'Cancel',
+          onClick: close,
+        },
+      }}
+    >
+      <TextField name="name" label="View Name" />
+    </FormControlWrapper>
+  );
+};