@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/components/ModusSwitch.tsx

@@ -0,0 +1,130 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcSwitch } from "@trimble-oss/moduswebcomponents-react";
+
+type SwitchSize = "sm" | "md" | "lg";
+
+/**
+ * Props for the ModusSwitch component.
+ */
+export interface ModusSwitchProps {
+  /** The value of the switch. */
+  value?: boolean;
+  /** Whether the switch is disabled. */
+  disabled?: boolean;
+  /** Whether the switch is in an indeterminate state. */
+  indeterminate?: boolean;
+  /** Whether the switch is required. */
+  required?: boolean;
+  /** The size of the switch. */
+  size?: SwitchSize;
+  /** The label for the switch. */
+  label?: string;
+  /** The name of the switch. */
+  name?: string;
+  /** The ID of the input element. */
+  inputId?: string;
+  /** The tab index of the input element. */
+  inputTabIndex?: number;
+  /** A custom CSS class to apply to the switch. */
+  customClass?: string;
+  /** The ARIA label for the switch. */
+  'aria-label'?: string;
+  /** A callback function to handle input changes. */
+  onInputChange?: (event: CustomEvent<InputEvent>) => void;
+  /** A callback function to handle input focus. */
+  onInputFocus?: (event: CustomEvent<FocusEvent>) => void;
+  /** A callback function to handle input blur. */
+  onInputBlur?: (event: CustomEvent<FocusEvent>) => void;
+}
+
+/**
+ * Renders a Modus switch component.
+ * @param {ModusSwitchProps} props - The component props.
+ *@returns {JSX.Element} The rendered switch component.
+ */
+export default function ModusSwitch({
+  value = false,
+  disabled = false,
+  indeterminate = false,
+  required = false,
+  size = 'md',
+  label,
+  name,
+  inputId,
+  inputTabIndex,
+  customClass,
+  'aria-label': ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusSwitchProps) {
+  const switchRef = useRef<HTMLModusWcSwitchElement>(null);
+
+  useEffect(() => {
+    const switchElement = switchRef.current;
+    if (!switchElement) {
+      return;
+    }
+
+    const handleInputChange = (event: Event) => {
+      onInputChange?.(event as CustomEvent<InputEvent>);
+    };
+    const handleInputFocus = (event: Event) => {
+      onInputFocus?.(event as CustomEvent<FocusEvent>);
+    };
+    const handleInputBlur = (event: Event) => {
+      onInputBlur?.(event as CustomEvent<FocusEvent>);
+    };
+
+    if (onInputChange) {
+      switchElement.addEventListener("inputChange", handleInputChange);
+    }
+    if (onInputFocus) {
+      switchElement.addEventListener("inputFocus", handleInputFocus);
+    }
+    if (onInputBlur) {
+      switchElement.addEventListener("inputBlur", handleInputBlur);
+    }
+
+    return () => {
+      if (onInputChange) {
+        switchElement.removeEventListener("inputChange", handleInputChange);
+      }
+      if (onInputFocus) {
+        switchElement.removeEventListener("inputFocus", handleInputFocus);
+      }
+      if (onInputBlur) {
+        switchElement.removeEventListener("inputBlur", handleInputBlur);
+      }
+    };
+  }, [onInputBlur, onInputChange, onInputFocus]);
+
+  useEffect(() => {
+    const switchElement = switchRef.current;
+    if (!switchElement) {
+      return;
+    }
+
+    switchElement.value = value;
+    switchElement.indeterminate = indeterminate;
+  }, [indeterminate, value]);
+
+  return (
+    <ModusWcSwitch
+      ref={switchRef}
+      value={value}
+      disabled={disabled}
+      indeterminate={indeterminate}
+      required={required}
+      size={size}
+      label={label}
+      name={name}
+      inputId={inputId}
+      inputTabIndex={inputTabIndex}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

package/templates/react/src/components/ModusTable.tsx

@@ -0,0 +1,309 @@
+import { useEffect, useRef, useState } from "react";
+import { ModusWcTable } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Represents a column in a table.
+ */
+export interface TableColumn {
+  /** A unique identifier for the column. */
+  id: string;
+  /** The header text for the column. */
+  header: string;
+  /** The key to access the data for this column in a row object. */
+  accessor: string;
+  /** The width of the column. */
+  width?: string;
+  /** Whether the column is sortable. */
+  sortable?: boolean;
+  /** The type of editor to use for this column. */
+  editor?: "number" | "text" | "autocomplete" | "date" | "custom";
+  /** A function to render the cell content. */
+  cellRenderer?: (value: unknown, row: unknown) => string | HTMLElement;
+  /** A function to render a custom editor. */
+  customEditorRenderer?: (
+    value: unknown,
+    onCommit: (value: unknown) => void
+  ) => HTMLElement;
+}
+
+/**
+ * Represents a row of data in a table.
+ */
+export interface TableData {
+  [key: string]: unknown;
+}
+
+/**
+ * Props for the ModusTable component.
+ */
+export interface ModusTableProps {
+  /** The columns to display in the table. */
+  columns: TableColumn[];
+  /** The data to display in the table. */
+  data: TableData[];
+  /** The current page number. */
+  currentPage?: number;
+  /** The available page size options. */
+  pageSizeOptions?: number[];
+  /** Whether the table is paginated. */
+  paginated?: boolean;
+  /** Whether to show the page size selector. */
+  showPageSizeSelector?: boolean;
+  /** The row selection mode. */
+  selectable?: "none" | "single" | "multi";
+  /** The IDs of the selected rows. */
+  selectedRowIds?: string[];
+  /** Whether the table is sortable. */
+  sortable?: boolean;
+  /** The density of the table. */
+  density?: "compact" | "comfortable" | "relaxed";
+  /** Whether the table is editable. */
+  editable?: boolean | ((row: unknown) => boolean);
+  /** Whether to show a hover effect on rows. */
+  hover?: boolean;
+  /** Whether to show zebra striping on rows. */
+  zebra?: boolean;
+  /** A custom CSS class to apply to the table. */
+  customClass?: string;
+  /** The ARIA label for the table. */
+  ariaLabel?: string;
+  /** A callback function to handle the start of a cell edit. */
+  onCellEditStart?: (
+    event: CustomEvent<{ rowIndex: number; colId: string }>
+  ) => void;
+  /** A callback function to handle the commit of a cell edit. */
+  onCellEditCommit?: (
+    event: CustomEvent<{
+      rowIndex: number;
+      colId: string;
+      newValue: unknown;
+      updatedRow: unknown;
+    }>
+  ) => void;
+  /** A callback function to handle sort changes. */
+  onSortChange?: (
+    event: CustomEvent<Array<{ columnId: string; direction: "asc" | "desc" }>>
+  ) => void;
+  /** A callback function to handle pagination changes. */
+  onPaginationChange?: (
+    event: CustomEvent<{ currentPage: number; pageSize: number }>
+  ) => void;
+  /** A callback function to handle row clicks. */
+  onRowClick?: (event: CustomEvent<{ row: unknown; index: number }>) => void;
+  /** A callback function to handle row selection changes. */
+  onRowSelectionChange?: (
+    event: CustomEvent<{ selectedRows: unknown[]; selectedRowIds: string[] }>
+  ) => void;
+}
+
+/**
+ * Renders a Modus table component with advanced features.
+ *
+ * This component provides a comprehensive data table with sorting, pagination,
+ * selection, editing, and other advanced features. It supports both controlled
+ * and uncontrolled modes for maximum flexibility.
+ *
+ * @example
+ * // Basic table
+ * <ModusTable
+ *   columns={columns}
+ *   data={data}
+ * />
+ *
+ * @example
+ * // Paginated table with selection
+ * <ModusTable
+ *   columns={columns}
+ *   data={data}
+ *   paginated={true}
+ *   selectable="single"
+ *   onRowSelectionChange={handleSelection}
+ * />
+ *
+ * @example
+ * // Editable table with custom cell renderers
+ * <ModusTable
+ *   columns={columns}
+ *   data={data}
+ *   editable={true}
+ *   onCellEditCommit={handleCellEdit}
+ *   density="compact"
+ *   zebra={true}
+ * />
+ *
+ * @param {ModusTableProps} props - The component props.
+ * @returns {JSX.Element} The rendered table component.
+ * @see {@link https://modus.trimble.com/components/table} - Modus Table documentation
+ * @see {@link TableColumn} - Column configuration interface
+ * @see {@link TableData} - Data row interface
+ */
+export default function ModusTable({
+  columns,
+  data,
+  currentPage = 1,
+  pageSizeOptions = [5, 10, 15],
+  paginated = false,
+  showPageSizeSelector = true,
+  selectable = "none",
+  selectedRowIds,
+  sortable = true,
+  density = "comfortable",
+  editable = false,
+  hover = true,
+  zebra = false,
+  customClass,
+  ariaLabel,
+  onCellEditStart,
+  onCellEditCommit,
+  onSortChange,
+  onPaginationChange,
+  onRowClick,
+  onRowSelectionChange,
+}: ModusTableProps) {
+  const tableRef = useRef<HTMLModusWcTableElement>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // Handle hydration
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Event handlers setup - moved to after component initialization
+  useEffect(() => {
+    const table = tableRef.current;
+    if (!table || !mounted) return;
+
+    console.log("Setting up event listeners on initialized table");
+
+    const handleCellEditStart = (event: Event) => {
+      console.log("Cell edit start event received:", event);
+      const customEvent = event as CustomEvent<{
+        rowIndex: number;
+        colId: string;
+      }>;
+      onCellEditStart?.(customEvent);
+    };
+
+    const handleCellEditCommit = (event: Event) => {
+      console.log("Cell edit commit event received:", event);
+      const customEvent = event as CustomEvent<{
+        rowIndex: number;
+        colId: string;
+        newValue: unknown;
+        updatedRow: unknown;
+      }>;
+      onCellEditCommit?.(customEvent);
+    };
+
+    const handleSortChange = (event: Event) => {
+      const customEvent = event as CustomEvent<
+        Array<{ columnId: string; direction: "asc" | "desc" }>
+      >;
+      onSortChange?.(customEvent);
+    };
+
+    const handlePaginationChange = (event: Event) => {
+      const customEvent = event as CustomEvent<{
+        currentPage: number;
+        pageSize: number;
+      }>;
+      onPaginationChange?.(customEvent);
+    };
+
+    const handleRowClick = (event: Event) => {
+      const customEvent = event as CustomEvent<{ row: unknown; index: number }>;
+      onRowClick?.(customEvent);
+    };
+
+    const handleRowSelectionChange = (event: Event) => {
+      const customEvent = event as CustomEvent<{
+        selectedRows: unknown[];
+        selectedRowIds: string[];
+      }>;
+      onRowSelectionChange?.(customEvent);
+    };
+
+    // Add event listeners
+    if (onCellEditStart)
+      table.addEventListener("cellEditStart", handleCellEditStart);
+    if (onCellEditCommit)
+      table.addEventListener("cellEditCommit", handleCellEditCommit);
+    if (onSortChange) table.addEventListener("sortChange", handleSortChange);
+    if (onPaginationChange)
+      table.addEventListener("paginationChange", handlePaginationChange);
+    if (onRowClick) table.addEventListener("rowClick", handleRowClick);
+    if (onRowSelectionChange)
+      table.addEventListener("rowSelectionChange", handleRowSelectionChange);
+
+    return () => {
+      // Cleanup event listeners
+      if (onCellEditStart)
+        table.removeEventListener("cellEditStart", handleCellEditStart);
+      if (onCellEditCommit)
+        table.removeEventListener("cellEditCommit", handleCellEditCommit);
+      if (onSortChange)
+        table.removeEventListener("sortChange", handleSortChange);
+      if (onPaginationChange)
+        table.removeEventListener("paginationChange", handlePaginationChange);
+      if (onRowClick) table.removeEventListener("rowClick", handleRowClick);
+      if (onRowSelectionChange)
+        table.removeEventListener(
+          "rowSelectionChange",
+          handleRowSelectionChange
+        );
+    };
+  }, [
+    mounted,
+    onCellEditStart,
+    onCellEditCommit,
+    onSortChange,
+    onPaginationChange,
+    onRowClick,
+    onRowSelectionChange,
+  ]);
+
+  // Ensure props are set on the web component after mounting
+  useEffect(() => {
+    const table = tableRef.current;
+    if (!table || !mounted) return;
+
+    console.log("Setting props on web component:", { columns, data, editable });
+
+    // Force update the web component with the props
+    if (columns && columns.length > 0) {
+      table.columns = columns;
+    }
+    if (data && data.length > 0) {
+      table.data = data;
+    }
+    if (editable !== undefined) {
+      table.editable = editable;
+    }
+  }, [mounted, columns, data, editable]);
+
+  // Don't render until mounted to avoid hydration issues
+  if (!mounted) {
+    return <div className="animate-pulse h-32 bg-muted rounded"></div>;
+  }
+
+  return (
+    <ModusWcTable
+      ref={tableRef}
+      columns={columns}
+      data={data}
+      currentPage={currentPage}
+      pageSizeOptions={pageSizeOptions}
+      paginated={paginated}
+      showPageSizeSelector={showPageSizeSelector}
+      selectable={selectable}
+      selectedRowIds={selectedRowIds}
+      sortable={sortable}
+      density={density}
+      editable={editable}
+      hover={hover}
+      zebra={zebra}
+      customClass={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

package/templates/react/src/components/ModusTabs.tsx

@@ -0,0 +1,114 @@
+import type { ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import { ModusWcTabs } from "@trimble-oss/moduswebcomponents-react";
+
+export type ModusTabsStyle = "bordered" | "boxed" | "lifted" | "none";
+export type ModusTabsSize = "sm" | "md" | "lg";
+
+/**
+ * Represents a single tab in a tabs component.
+ */
+export interface ModusTab {
+  /** The label for the tab. */
+  label?: string;
+  /** An icon to display in the tab. */
+  icon?: string;
+  /** The position of the icon relative to the label. */
+  iconPosition?: 'left' | 'right';
+  /** Whether the tab is disabled. */
+  disabled?: boolean;
+  /** A custom CSS class to apply to the tab. */
+  customClass?: string;
+}
+
+/**
+ * Props for the ModusTabs component.
+ */
+export interface ModusTabsProps {
+  /** The tabs to display. */
+  tabs: ModusTab[];
+  /** The content panels for each tab. */
+  panels: ReactNode[];
+  /** The index of the initially active tab. */
+  activeTabIndex?: number;
+  /** The size of the tabs. */
+  size?: ModusTabsSize;
+  /** The style of the tabs. */
+  tabStyle?: ModusTabsStyle;
+  /** A custom CSS class to apply to the tabs component. */
+  customClass?: string;
+  /** The ARIA label for the tabs component. */
+  ariaLabel?: string;
+  /** A callback function to handle tab changes. */
+  onTabChange?: (detail: { previousTab: number; newTab: number }) => void;
+}
+
+/**
+ * Renders a Modus tabs component.
+ * @param {ModusTabsProps} props - The component props.
+ * @returns {JSX.Element} The rendered tabs component.
+ */
+export default function ModusTabs({
+  tabs = [],
+  panels = [],
+  activeTabIndex = 0,
+  size = 'md',
+  tabStyle = 'bordered',
+  customClass,
+  ariaLabel = 'Tabs navigation',
+  onTabChange,
+}: ModusTabsProps) {
+  const tabsRef = useRef<HTMLModusWcTabsElement>(null);
+
+  useEffect(() => {
+    const tabsElement = tabsRef.current;
+    if (!tabsElement) {
+      return;
+    }
+
+    tabsElement.activeTabIndex = activeTabIndex;
+  }, [activeTabIndex]);
+
+  useEffect(() => {
+    const tabsElement = tabsRef.current;
+    if (!tabsElement) {
+      return;
+    }
+
+    const handleTabChange = (event: Event) => {
+      const customEvent = event as CustomEvent<{
+        previousTab: number;
+        newTab: number;
+      }>;
+      onTabChange?.(customEvent.detail);
+    };
+
+    if (onTabChange) {
+      tabsElement.addEventListener("tabChange", handleTabChange);
+    }
+
+    return () => {
+      if (onTabChange) {
+        tabsElement.removeEventListener("tabChange", handleTabChange);
+      }
+    };
+  }, [onTabChange]);
+
+  return (
+    <ModusWcTabs
+      ref={tabsRef}
+      size={size}
+      tabStyle={tabStyle}
+      custom-class={customClass}
+      active-tab-index={activeTabIndex}
+      aria-label={ariaLabel}
+      tabs={tabs}
+    >
+      {panels.map((panel, index) => (
+        <div key={`tab-panel-${index}`} slot={`tab-${index}`}>
+          {panel}
+        </div>
+      ))}
+    </ModusWcTabs>
+  );
+}