@extrachill/components 0.2.0 → 1.0.0

package/README.md

@@ -2,45 +2,36 @@
 
 Shared React components for the Extra Chill Platform ecosystem.
 
-## Overview
+## Install
 
-This package provides reusable UI components used across multiple Extra Chill WordPress plugins, ensuring consistent design and reducing code duplication.
+```bash
+npm install @extrachill/components
+```
 
 ## Components
 
-- **DataTable** - Sortable data table with configurable columns
-- **Pagination** - Page navigation with configurable items per page
-- **SearchBox** - Debounced search input
-- **Modal** - Accessible modal dialog
-- **Tabs** - Controlled tab navigation for React apps and blocks
-
-## Installation
-
-From a plugin within the Extra Chill Platform:
-
-```json
-{
-  "dependencies": {
-    "@extrachill/components": "file:../../extrachill-components"
-  }
-}
-```
+| Component | Description |
+|-----------|-------------|
+| **DataTable** | Admin table with optional row selection, loading states |
+| **Pagination** | Previous/Next page navigation |
+| **SearchBox** | Search input with clear button |
+| **Modal** | Accessible modal dialog wrapping `@wordpress/components` |
 
 ## Usage
 
-```jsx
-import { DataTable, Pagination, SearchBox, Modal, Tabs } from '@extrachill/components';
+```tsx
+import { DataTable, Pagination, SearchBox, Modal } from '@extrachill/components';
 import '@extrachill/components/styles/components.scss';
 
-function MyComponent() {
+function UsersTable() {
   return (
     <DataTable
       columns={[
-        { key: 'name', label: 'Name', sortable: true },
-        { key: 'email', label: 'Email' }
+        { key: 'name', label: 'Name' },
+        { key: 'email', label: 'Email' },
       ]}
       data={users}
-      onSort={handleSort}
+      isLoading={isLoading}
     />
   );
 }
@@ -48,17 +39,12 @@ function MyComponent() {
 
 ## Peer Dependencies
 
-This package requires the following peer dependencies (provided by `@wordpress/scripts`):
-
-- `@wordpress/components` ^28.0.0
-- `@wordpress/element` ^6.0.0
-- `react` ^18.0.0
+Requires `@wordpress/components`, `@wordpress/element`, and `react` — all provided by `@wordpress/scripts` in WordPress plugin builds.
 
 ## Used By
 
-- `extrachill-admin-tools` - Network administration tools
-- `extrachill-analytics` - Analytics dashboard
-- `extrachill-studio` - Team collaboration workspace
+- `extrachill-admin-tools` — Network admin tools
+- `extrachill-seo` — SEO audit dashboard
 
 ## License
 

package/dist/index.d.mts

@@ -0,0 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * DataTable Component
+ *
+ * Reusable table for admin interfaces with optional row selection.
+ */
+interface DataTableColumn<T = Record<string, unknown>> {
+    /** Unique key matching a field in the data row. */
+    key: string;
+    /** Display label for the column header. */
+    label: string;
+    /** Fixed column width (CSS value). */
+    width?: string;
+    /** Custom render function for the cell. */
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+interface DataTableProps<T = Record<string, unknown>> {
+    /** Column definitions. */
+    columns: DataTableColumn<T>[];
+    /** Row data. */
+    data: T[];
+    /** Show a loading spinner instead of the table. */
+    isLoading?: boolean;
+    /** Enable row selection checkboxes. */
+    selectable?: boolean;
+    /** Currently selected row IDs. */
+    selectedIds?: Array<string | number>;
+    /** Callback when selection changes. */
+    onSelectChange?: (ids: Array<string | number>) => void;
+    /** Message shown when data is empty. */
+    emptyMessage?: string;
+    /** Key used to identify each row. */
+    rowKey?: string;
+}
+declare function DataTable<T extends Record<string, unknown>>({ columns, data, isLoading, selectable, selectedIds, onSelectChange, emptyMessage, rowKey, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pagination Component
+ *
+ * Page navigation for admin interfaces.
+ */
+interface PaginationProps {
+    /** Current page number (1-indexed). */
+    currentPage: number;
+    /** Total number of pages. */
+    totalPages: number;
+    /** Total number of items across all pages. */
+    totalItems: number;
+    /** Callback when page changes. */
+    onPageChange: (page: number) => void;
+}
+declare function Pagination({ currentPage, totalPages, totalItems, onPageChange, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * SearchBox Component
+ *
+ * Search input with clear button for admin interfaces.
+ */
+interface SearchBoxProps {
+    /** Current search value. */
+    value?: string;
+    /** Callback when search is submitted. */
+    onSearch: (value: string) => void;
+    /** Placeholder text for the input. */
+    placeholder?: string;
+    /** Callback when search is cleared. Falls back to onSearch('') if not provided. */
+    onClear?: () => void;
+}
+declare function SearchBox({ value, onSearch, placeholder, onClear, }: SearchBoxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Modal Component
+ *
+ * Accessible modal dialog wrapping @wordpress/components Modal.
+ */
+interface ModalProps {
+    /** Modal title displayed in the header. */
+    title: string;
+    /** Whether the modal is currently visible. */
+    isOpen: boolean;
+    /** Callback when the modal is closed. */
+    onClose: () => void;
+    /** Modal content. */
+    children: React.ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+}
+declare function Modal({ title, isOpen, onClose, children, className, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+export { DataTable, type DataTableColumn, type DataTableProps, Modal, type ModalProps, Pagination, type PaginationProps, SearchBox, type SearchBoxProps };

package/dist/index.d.ts

@@ -1,11 +1,91 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
 /**
- * @extrachill/components
+ * DataTable Component
  *
- * Shared React components for the Extra Chill Platform.
+ * Reusable table for admin interfaces with optional row selection.
  */
-export { DataTable, type DataTableProps, type DataTableColumn } from './DataTable.tsx';
-export { Pagination, type PaginationProps } from './Pagination.tsx';
-export { SearchBox, type SearchBoxProps } from './SearchBox.tsx';
-export { Modal, type ModalProps } from './Modal.tsx';
-export { Tabs, type TabsProps, type TabItem } from './Tabs.tsx';
-//# sourceMappingURL=index.d.ts.map
+interface DataTableColumn<T = Record<string, unknown>> {
+    /** Unique key matching a field in the data row. */
+    key: string;
+    /** Display label for the column header. */
+    label: string;
+    /** Fixed column width (CSS value). */
+    width?: string;
+    /** Custom render function for the cell. */
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+interface DataTableProps<T = Record<string, unknown>> {
+    /** Column definitions. */
+    columns: DataTableColumn<T>[];
+    /** Row data. */
+    data: T[];
+    /** Show a loading spinner instead of the table. */
+    isLoading?: boolean;
+    /** Enable row selection checkboxes. */
+    selectable?: boolean;
+    /** Currently selected row IDs. */
+    selectedIds?: Array<string | number>;
+    /** Callback when selection changes. */
+    onSelectChange?: (ids: Array<string | number>) => void;
+    /** Message shown when data is empty. */
+    emptyMessage?: string;
+    /** Key used to identify each row. */
+    rowKey?: string;
+}
+declare function DataTable<T extends Record<string, unknown>>({ columns, data, isLoading, selectable, selectedIds, onSelectChange, emptyMessage, rowKey, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pagination Component
+ *
+ * Page navigation for admin interfaces.
+ */
+interface PaginationProps {
+    /** Current page number (1-indexed). */
+    currentPage: number;
+    /** Total number of pages. */
+    totalPages: number;
+    /** Total number of items across all pages. */
+    totalItems: number;
+    /** Callback when page changes. */
+    onPageChange: (page: number) => void;
+}
+declare function Pagination({ currentPage, totalPages, totalItems, onPageChange, }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * SearchBox Component
+ *
+ * Search input with clear button for admin interfaces.
+ */
+interface SearchBoxProps {
+    /** Current search value. */
+    value?: string;
+    /** Callback when search is submitted. */
+    onSearch: (value: string) => void;
+    /** Placeholder text for the input. */
+    placeholder?: string;
+    /** Callback when search is cleared. Falls back to onSearch('') if not provided. */
+    onClear?: () => void;
+}
+declare function SearchBox({ value, onSearch, placeholder, onClear, }: SearchBoxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Modal Component
+ *
+ * Accessible modal dialog wrapping @wordpress/components Modal.
+ */
+interface ModalProps {
+    /** Modal title displayed in the header. */
+    title: string;
+    /** Whether the modal is currently visible. */
+    isOpen: boolean;
+    /** Callback when the modal is closed. */
+    onClose: () => void;
+    /** Modal content. */
+    children: React.ReactNode;
+    /** Additional CSS class name. */
+    className?: string;
+}
+declare function Modal({ title, isOpen, onClose, children, className, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+export { DataTable, type DataTableColumn, type DataTableProps, Modal, type ModalProps, Pagination, type PaginationProps, SearchBox, type SearchBoxProps };

package/dist/index.js

@@ -1,10 +1,213 @@
-/**
- * @extrachill/components
- *
- * Shared React components for the Extra Chill Platform.
- */
-export { DataTable } from "./DataTable.js";
-export { Pagination } from "./Pagination.js";
-export { SearchBox } from "./SearchBox.js";
-export { Modal } from "./Modal.js";
-export { Tabs } from "./Tabs.js";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DataTable: () => DataTable,
+  Modal: () => Modal,
+  Pagination: () => Pagination,
+  SearchBox: () => SearchBox
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/DataTable.tsx
+var import_components = require("@wordpress/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTable({
+  columns,
+  data,
+  isLoading = false,
+  selectable = false,
+  selectedIds = [],
+  onSelectChange = () => {
+  },
+  emptyMessage = "No data found.",
+  rowKey = "id"
+}) {
+  const allSelected = data.length > 0 && selectedIds.length === data.length;
+  const someSelected = selectedIds.length > 0 && selectedIds.length < data.length;
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      onSelectChange(data.map((row) => row[rowKey]));
+    } else {
+      onSelectChange([]);
+    }
+  };
+  const handleSelectRow = (id, checked) => {
+    if (checked) {
+      onSelectChange([...selectedIds, id]);
+    } else {
+      onSelectChange(selectedIds.filter((sid) => sid !== id));
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ec-data-table__loading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading..." })
+    ] });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ec-data-table__empty", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "ec-data-table wp-list-table widefat fixed striped", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+      selectable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "ec-data-table__check-column", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.CheckboxControl,
+        {
+          checked: allSelected,
+          indeterminate: someSelected,
+          onChange: handleSelectAll,
+          __nextHasNoMarginBottom: true
+        }
+      ) }),
+      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { style: col.width ? { width: col.width } : {}, children: col.label }, col.key))
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+      selectable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "ec-data-table__check-column", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.CheckboxControl,
+        {
+          checked: selectedIds.includes(row[rowKey]),
+          onChange: (checked) => handleSelectRow(row[rowKey], checked),
+          __nextHasNoMarginBottom: true
+        }
+      ) }),
+      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, col.key))
+    ] }, String(row[rowKey]))) })
+  ] });
+}
+
+// src/components/Pagination.tsx
+var import_components2 = require("@wordpress/components");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Pagination({
+  currentPage,
+  totalPages,
+  totalItems,
+  onPageChange
+}) {
+  if (totalPages <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ec-pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "ec-pagination__info", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages,
+      " (",
+      totalItems,
+      " items)"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ec-pagination__buttons", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_components2.Button,
+        {
+          variant: "secondary",
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(currentPage - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_components2.Button,
+        {
+          variant: "secondary",
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(currentPage + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/SearchBox.tsx
+var import_element = require("@wordpress/element");
+var import_components3 = require("@wordpress/components");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function SearchBox({
+  value = "",
+  onSearch,
+  placeholder = "Search...",
+  onClear
+}) {
+  const [inputValue, setInputValue] = (0, import_element.useState)(value);
+  const handleSearch = () => {
+    onSearch(inputValue);
+  };
+  const handleClear = () => {
+    setInputValue("");
+    if (onClear) {
+      onClear();
+    } else {
+      onSearch("");
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "ec-search-box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_components3.TextControl,
+      {
+        value: inputValue,
+        onChange: setInputValue,
+        placeholder,
+        onKeyDown: handleKeyDown,
+        __nextHasNoMarginBottom: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components3.Button, { variant: "secondary", onClick: handleSearch, children: "Search" }),
+    inputValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components3.Button, { variant: "tertiary", onClick: handleClear, children: "Clear" })
+  ] });
+}
+
+// src/components/Modal.tsx
+var import_components4 = require("@wordpress/components");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Modal({
+  title,
+  isOpen,
+  onClose,
+  children,
+  className = ""
+}) {
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_components4.Modal,
+    {
+      title,
+      onRequestClose: onClose,
+      className: `ec-modal ${className}`.trim(),
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTable,
+  Modal,
+  Pagination,
+  SearchBox
+});

package/dist/index.mjs

@@ -0,0 +1,183 @@
+// src/components/DataTable.tsx
+import { CheckboxControl, Spinner } from "@wordpress/components";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  isLoading = false,
+  selectable = false,
+  selectedIds = [],
+  onSelectChange = () => {
+  },
+  emptyMessage = "No data found.",
+  rowKey = "id"
+}) {
+  const allSelected = data.length > 0 && selectedIds.length === data.length;
+  const someSelected = selectedIds.length > 0 && selectedIds.length < data.length;
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      onSelectChange(data.map((row) => row[rowKey]));
+    } else {
+      onSelectChange([]);
+    }
+  };
+  const handleSelectRow = (id, checked) => {
+    if (checked) {
+      onSelectChange([...selectedIds, id]);
+    } else {
+      onSelectChange(selectedIds.filter((sid) => sid !== id));
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ec-data-table__loading", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      /* @__PURE__ */ jsx("span", { children: "Loading..." })
+    ] });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "ec-data-table__empty", children: /* @__PURE__ */ jsx("p", { children: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsxs("table", { className: "ec-data-table wp-list-table widefat fixed striped", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      selectable && /* @__PURE__ */ jsx("th", { className: "ec-data-table__check-column", children: /* @__PURE__ */ jsx(
+        CheckboxControl,
+        {
+          checked: allSelected,
+          indeterminate: someSelected,
+          onChange: handleSelectAll,
+          __nextHasNoMarginBottom: true
+        }
+      ) }),
+      columns.map((col) => /* @__PURE__ */ jsx("th", { style: col.width ? { width: col.width } : {}, children: col.label }, col.key))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+      selectable && /* @__PURE__ */ jsx("td", { className: "ec-data-table__check-column", children: /* @__PURE__ */ jsx(
+        CheckboxControl,
+        {
+          checked: selectedIds.includes(row[rowKey]),
+          onChange: (checked) => handleSelectRow(row[rowKey], checked),
+          __nextHasNoMarginBottom: true
+        }
+      ) }),
+      columns.map((col) => /* @__PURE__ */ jsx("td", { children: col.render ? col.render(row[col.key], row) : String(row[col.key] ?? "") }, col.key))
+    ] }, String(row[rowKey]))) })
+  ] });
+}
+
+// src/components/Pagination.tsx
+import { Button } from "@wordpress/components";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Pagination({
+  currentPage,
+  totalPages,
+  totalItems,
+  onPageChange
+}) {
+  if (totalPages <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "ec-pagination", children: [
+    /* @__PURE__ */ jsxs2("span", { className: "ec-pagination__info", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages,
+      " (",
+      totalItems,
+      " items)"
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "ec-pagination__buttons", children: [
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          variant: "secondary",
+          disabled: currentPage <= 1,
+          onClick: () => onPageChange(currentPage - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          variant: "secondary",
+          disabled: currentPage >= totalPages,
+          onClick: () => onPageChange(currentPage + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/SearchBox.tsx
+import { useState } from "@wordpress/element";
+import { TextControl, Button as Button2 } from "@wordpress/components";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SearchBox({
+  value = "",
+  onSearch,
+  placeholder = "Search...",
+  onClear
+}) {
+  const [inputValue, setInputValue] = useState(value);
+  const handleSearch = () => {
+    onSearch(inputValue);
+  };
+  const handleClear = () => {
+    setInputValue("");
+    if (onClear) {
+      onClear();
+    } else {
+      onSearch("");
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleSearch();
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "ec-search-box", children: [
+    /* @__PURE__ */ jsx3(
+      TextControl,
+      {
+        value: inputValue,
+        onChange: setInputValue,
+        placeholder,
+        onKeyDown: handleKeyDown,
+        __nextHasNoMarginBottom: true
+      }
+    ),
+    /* @__PURE__ */ jsx3(Button2, { variant: "secondary", onClick: handleSearch, children: "Search" }),
+    inputValue && /* @__PURE__ */ jsx3(Button2, { variant: "tertiary", onClick: handleClear, children: "Clear" })
+  ] });
+}
+
+// src/components/Modal.tsx
+import { Modal as WPModal } from "@wordpress/components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Modal({
+  title,
+  isOpen,
+  onClose,
+  children,
+  className = ""
+}) {
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(
+    WPModal,
+    {
+      title,
+      onRequestClose: onClose,
+      className: `ec-modal ${className}`.trim(),
+      children
+    }
+  );
+}
+export {
+  DataTable,
+  Modal,
+  Pagination,
+  SearchBox
+};