@reactberry/system 2.0.0-beta

package/src/blocks/Table/Table.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import Text from "../../elements/text";
+
+// Table component types
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  [key: string]: any; // Allow additional props
+}
+
+export interface TableHeaderProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {
+  [key: string]: any; // Allow additional props
+}
+export interface TableBodyProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface TableFooterProps
+  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export interface TableRowProps
+  extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** Whether this row is selected */
+  selected?: boolean;
+  /** Whether this row is clickable */
+  clickable?: boolean;
+  /** Custom width for the row */
+  width?: string | number;
+
+  [key: string]: any; // Allow additional props
+}
+export interface TableCellProps
+  extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** Alignment of cell content */
+  align?: "left" | "center" | "right";
+  /** Whether this is a header cell */
+  header?: boolean;
+  /** Column span */
+  colSpan?: number;
+  /** Row span */
+  rowSpan?: number;
+  /** Whether to truncate text content */
+  truncate?: boolean;
+  [key: string]: any; // Allow additional props
+}
+
+export interface TableHeaderCellProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /** Alignment of cell content */
+  align?: "left" | "center" | "right";
+  /** Column span */
+  colSpan?: number;
+  /** Row span */
+  rowSpan?: number;
+  /** Whether to show a visual sort indicator */
+  sortable?: boolean;
+  /** Whether to truncate text content */
+  truncate?: boolean;
+  /** Custom width for the row */
+  width?: string | number;
+
+  [key: string]: any; // Allow additional props
+}
+
+export const Table: React.FC<TableProps> = ({ children, ...props }) => {
+  return (
+    <Text
+      as="table"
+      width="100%"
+      {...props}
+      // style={{ borderCollapse: "collapse" }}
+    >
+      {children}
+    </Text>
+  );
+};
+
+// Table Header component
+export const TableHeader: React.FC<TableHeaderProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <Text as="thead" {...props}>
+      {children}
+    </Text>
+  );
+};
+
+// Table Body component
+export const TableBody: React.FC<TableBodyProps> = ({ children, ...props }) => {
+  return (
+    <Text as="tbody" {...props}>
+      {children}
+    </Text>
+  );
+};
+
+// Table Footer component
+export const TableFooter: React.FC<TableFooterProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <Text as="tfoot" {...props}>
+      {children}
+    </Text>
+  );
+};
+
+export const TableRow: React.FC<TableRowProps> = ({ children, ...props }) => {
+  return (
+    <Text as="tr" {...props}>
+      {children}
+    </Text>
+  );
+};
+
+// Table Cell component
+export const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
+  (
+    {
+      children,
+      align = "center",
+      colSpan,
+      rowSpan,
+      truncate = true,
+      width,
+      ...props
+    },
+    ref,
+  ) => {
+    const Component = "td";
+
+    return (
+      <Text
+        as={Component}
+        ref={ref as any}
+        textAlign={align}
+        position={"relative"}
+        border="1px solid"
+        // borderWidth="1px 0"
+        //skin="row"
+        {...props}
+        width={width}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        height="2rem"
+      >
+        {/* If children is text, wrap in Text component for proper typography */}
+        {typeof children === "string" || typeof children === "number" ? (
+          <Text
+            fontSize={"s"}
+            title={truncate ? String(children) : undefined}
+            truncate={truncate}
+            style={{ verticalAlign: "middle" }}
+          >
+            {children}
+          </Text>
+        ) : (
+          <>{children}</>
+        )}
+      </Text>
+    );
+  },
+);
+
+// Table Header Cell component
+export const TableHeaderCell: React.FC<TableHeaderCellProps> = ({
+  children,
+  align = "left",
+  colSpan,
+  rowSpan,
+  width = "auto",
+  ...props
+}) => {
+  return (
+    <Text
+      as="th"
+      skin="row.header"
+      border="1px solid"
+      borderColor={"surface"}
+      fontSize="xxs"
+      fontWeight="700"
+      textAlign={align}
+      width={width}
+      {...props}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+    >
+      <Text
+        as="div"
+        width={width}
+        style={{
+          verticalAlign: "middle",
+        }}
+      >
+        {children}
+      </Text>
+    </Text>
+  );
+};
+
+// Convenience exports
+Table.displayName = "Table";
+TableHeader.displayName = "TableHeader";
+TableBody.displayName = "TableBody";
+TableFooter.displayName = "TableFooter";
+TableRow.displayName = "TableRow";
+TableCell.displayName = "TableCell";
+TableHeaderCell.displayName = "TableHeaderCell";

package/src/blocks/Table/TablePagination.tsx

@@ -0,0 +1,189 @@
+import React from "react";
+import Box from "../../elements/box";
+import Text from "../../elements/text";
+import Button from "../../elements/button";
+
+export interface TablePaginationProps {
+  /** Current page number (0-based) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Total number of items */
+  totalItems: number;
+  /** Number of items per page */
+  itemsPerPage: number;
+  /** Callback when page changes */
+  onPageChange: (page: number) => void;
+  /** Whether to show page size selector */
+  showPageSize?: boolean;
+  /** Available page size options */
+  pageSizeOptions?: number[];
+  /** Callback when page size changes */
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Whether to show item count information */
+  showItemCount?: boolean;
+  /** Maximum number of page buttons to show */
+  maxPageButtons?: number;
+}
+
+export const TablePagination: React.FC<TablePaginationProps> = ({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  showPageSize = false,
+  pageSizeOptions = [10, 25, 50, 100],
+  onPageSizeChange,
+  showItemCount = true,
+  maxPageButtons = 5,
+}) => {
+  const startItem = currentPage * itemsPerPage + 1;
+  const endItem = Math.min((currentPage + 1) * itemsPerPage, totalItems);
+
+  // Calculate page numbers to display
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+
+    if (totalPages <= maxPageButtons) {
+      // Show all pages
+      for (let i = 0; i < totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Show first page
+      pages.push(0);
+
+      // Calculate range around current page
+      const halfRange = Math.floor((maxPageButtons - 3) / 2);
+      const startRange = Math.max(1, currentPage - halfRange);
+      const endRange = Math.min(totalPages - 2, currentPage + halfRange);
+
+      // Add ellipsis if needed
+      if (startRange > 1) {
+        pages.push("...");
+      }
+
+      // Add pages in range
+      for (let i = startRange; i <= endRange; i++) {
+        pages.push(i);
+      }
+
+      // Add ellipsis if needed
+      if (endRange < totalPages - 2) {
+        pages.push("...");
+      }
+
+      // Show last page
+      pages.push(totalPages - 1);
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection={["column", "row"]}
+      alignItems={["stretch", "center"]}
+      justifyContent="space-between"
+      gap="m"
+      p="m"
+      borderTop="1px solid"
+      borderColor="palette.neutrals.200"
+    >
+      {/* Left side - Item count and page size */}
+      <Box display="flex" alignItems="center" gap="m" flexWrap="wrap">
+        {showItemCount && (
+          <Text fontSize="s" color="secondary">
+            Showing {startItem}-{endItem} of {totalItems} items
+          </Text>
+        )}
+
+        {showPageSize && onPageSizeChange && (
+          <Box display="flex" alignItems="center" gap="xs">
+            <Text fontSize="s" color="secondary">
+              Items per page:
+            </Text>
+            <select
+              style={{
+                padding: "var(--space-s)",
+                borderRadius: "var(--radii-s)",
+                border: "1px solid var(--colors-palette-neutrals-300)",
+                fontSize: "var(--fontSizes-s)",
+                backgroundColor: "white",
+                cursor: "pointer",
+              }}
+              value={itemsPerPage}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+            >
+              {pageSizeOptions.map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </Box>
+        )}
+      </Box>
+
+      {/* Right side - Pagination controls */}
+      <Box display="flex" alignItems="center" gap="xs">
+        <Button
+          variant="ghost"
+          $size="small"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 0}
+          aria-label="Previous page"
+        >
+          ←
+        </Button>
+
+        {pageNumbers.map((page, index) => {
+          if (page === "...") {
+            return (
+              <Box key={`ellipsis-${index}`} px="s">
+                <Text fontSize="s" color="secondary">
+                  ...
+                </Text>
+              </Box>
+            );
+          }
+
+          const pageNumber = page as number;
+          const isActive = pageNumber === currentPage;
+
+          return (
+            <Button
+              key={pageNumber}
+              variant={isActive ? "primary" : "ghost"}
+              $size="small"
+              onClick={() => onPageChange(pageNumber)}
+              aria-label={`Go to page ${pageNumber + 1}`}
+              aria-current={isActive ? "page" : undefined}
+              style={{
+                minWidth: "32px",
+              }}
+            >
+              {pageNumber + 1}
+            </Button>
+          );
+        })}
+
+        <Button
+          variant="ghost"
+          $size="small"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages - 1}
+          aria-label="Next page"
+        >
+          →
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+TablePagination.displayName = "TablePagination";

package/src/blocks/Table/index.ts

@@ -0,0 +1,33 @@
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableCell,
+  TableHeaderCell,
+} from "./Table";
+export type {
+  TableProps,
+  TableHeaderProps,
+  TableBodyProps,
+  TableFooterProps,
+  TableRowProps,
+  TableCellProps,
+  TableHeaderCellProps,
+} from "./Table";
+
+export { TablePagination } from "./TablePagination";
+export type { TablePaginationProps } from "./TablePagination";
+
+export {
+  useTableControls,
+  useTableFilters,
+  useFilteredTableControls,
+} from "./useTableControls";
+export type {
+  UseTableControlsOptions,
+  UseTableControlsReturn,
+  UseTableFiltersOptions,
+  UseTableFiltersReturn,
+} from "./useTableControls";