@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,230 @@
+
+
+import { ModusWcNumberInput } from "@trimble-oss/moduswebcomponents-react";
+import { useCallback, useEffect, useRef } from "react";
+
+// Type definitions for number input interfaces
+interface InputFeedback {
+  level: "error" | "info" | "success" | "warning";
+  message?: string;
+}
+
+/**
+ * Props for the ModusNumberInput component.
+ */
+interface ModusNumberInputProps {
+  /** The label for the number input. */
+  label?: string;
+  /** The placeholder text for the number input. */
+  placeholder?: string;
+  /** The value of the number input. */
+  value?: string;
+  /** The name of the number input. */
+  name?: string;
+  /** The size of the number input. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Whether the number input has a border. */
+  bordered?: boolean;
+  /** A custom CSS class to apply to the number input. */
+  customClass?: string;
+  /** The type of the number input. */
+  type?: 'number' | 'range';
+  /** The input mode for the number input. */
+  inputMode?: 'decimal' | 'numeric' | 'none';
+  /** Whether to enable autocomplete for the number input. */
+  autoComplete?: 'on' | 'off';
+  /** The minimum allowed value. */
+  min?: number;
+  /** The maximum allowed value. */
+  max?: number;
+  /** The step interval for the number input. */
+  step?: number;
+  /** Whether the number input is required. */
+  required?: boolean;
+  /** Whether the number input is disabled. */
+  disabled?: boolean;
+  /** Whether the number input is read-only. */
+  readOnly?: boolean;
+  /** The currency symbol to display. */
+  currencySymbol?: string;
+  /** Feedback to display for the number input. */
+  feedback?: InputFeedback;
+  /** The ID of the input element. */
+  inputId?: string;
+  /** The tab index of the input element. */
+  inputTabIndex?: number;
+  /** The ARIA label for the number input. */
+  ariaLabel?: string;
+  /** A callback function to handle input focus. */
+  onInputFocus?: (event: FocusEvent) => void;
+  /** A callback function to handle input blur. */
+  onInputBlur?: (event: FocusEvent) => void;
+  /** A callback function to handle input changes. */
+  onInputChange?: (value: string) => void;
+}
+
+/**
+ * Renders a Modus number input component.
+ * @param {ModusNumberInputProps} props - The component props.
+ * @returns {JSX.Element} The rendered number input component.
+ */
+export default function ModusNumberInput({
+  label,
+  placeholder = '',
+  value = '',
+  name,
+  size = 'md',
+  bordered = true,
+  customClass,
+  type = 'number',
+  inputMode = 'numeric',
+  autoComplete,
+  min,
+  max,
+  step,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  currencySymbol,
+  feedback,
+  inputId,
+  inputTabIndex,
+  ariaLabel,
+  onInputFocus,
+  onInputBlur,
+  onInputChange,
+}: ModusNumberInputProps) {
+  const numberInputRef = useRef<HTMLElement>(null);
+
+  // Event handlers with useCallback for performance
+  const handleInputFocus = useCallback(
+    (event: Event) => {
+      const focusEvent = event as FocusEvent;
+      onInputFocus?.(focusEvent);
+    },
+    [onInputFocus]
+  );
+
+  const handleInputBlur = useCallback(
+    (event: Event) => {
+      const focusEvent = event as FocusEvent;
+      onInputBlur?.(focusEvent);
+    },
+    [onInputBlur]
+  );
+
+  const handleInputChange = useCallback(
+    (event: Event) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const customEvent = event as any;
+      onInputChange?.(
+        customEvent.detail?.value || customEvent.target?.value || ""
+      );
+    },
+    [onInputChange]
+  );
+
+  // Set up event listeners when component mounts
+  useEffect(() => {
+    const numberInput = numberInputRef.current;
+    if (!numberInput) return;
+
+    // Add event listeners
+    numberInput.addEventListener("inputFocus", handleInputFocus);
+    numberInput.addEventListener("inputBlur", handleInputBlur);
+    numberInput.addEventListener("inputChange", handleInputChange);
+
+    // Cleanup event listeners
+    return () => {
+      numberInput.removeEventListener("inputFocus", handleInputFocus);
+      numberInput.removeEventListener("inputBlur", handleInputBlur);
+      numberInput.removeEventListener("inputChange", handleInputChange);
+    };
+  }, [handleInputFocus, handleInputBlur, handleInputChange]);
+
+  // Update number input properties when props change
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const numberInput = numberInputRef.current as any;
+    if (!numberInput) return;
+
+    // Update basic properties
+    numberInput.value = value;
+    numberInput.label = label;
+    numberInput.placeholder = placeholder;
+    numberInput.size = size;
+    numberInput.type = type;
+    numberInput.inputMode = inputMode;
+    numberInput.bordered = bordered;
+    numberInput.required = required;
+    numberInput.disabled = disabled;
+    numberInput.readOnly = readOnly;
+
+    // Update constraints
+    if (min !== undefined) {
+      numberInput.min = min;
+    }
+    if (max !== undefined) {
+      numberInput.max = max;
+    }
+    if (step !== undefined) {
+      numberInput.step = step;
+    }
+
+    // Update currency symbol
+    if (currencySymbol) {
+      numberInput.currencySymbol = currencySymbol;
+    }
+
+    // Update feedback
+    if (feedback) {
+      numberInput.feedback = feedback;
+    }
+
+    // Update accessibility
+    if (inputId) {
+      numberInput.inputId = inputId;
+    }
+    if (inputTabIndex !== undefined) {
+      numberInput.inputTabIndex = inputTabIndex;
+    }
+    if (ariaLabel) {
+      numberInput.ariaLabel = ariaLabel;
+    }
+    if (autoComplete) {
+      numberInput.autoComplete = autoComplete;
+    }
+    if (name) {
+      numberInput.name = name;
+    }
+  }, [
+    value,
+    label,
+    placeholder,
+    size,
+    type,
+    inputMode,
+    bordered,
+    required,
+    disabled,
+    readOnly,
+    min,
+    max,
+    step,
+    currencySymbol,
+    feedback,
+    inputId,
+    inputTabIndex,
+    ariaLabel,
+    autoComplete,
+    name,
+  ]);
+
+  return (
+    <ModusWcNumberInput
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={numberInputRef as any}
+      custom-class={customClass}
+    />
+  );
+}

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

@@ -0,0 +1,94 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcPagination } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Represents the ARIA labels for the pagination component.
+ */
+export interface AriaLabelValues {
+  /** The ARIA label for the first page button. */
+  firstPage?: string;
+  /** The ARIA label for the previous page button. */
+  previousPage?: string;
+  /** The ARIA label for a page button. */
+  page?: string;
+  /** The ARIA label for the next page button. */
+  nextPage?: string;
+  /** The ARIA label for the last page button. */
+  lastPage?: string;
+}
+
+/**
+ * Props for the ModusPagination component.
+ */
+export interface ModusPaginationProps {
+  /** The ARIA label for the pagination component. */
+  ariaLabel?: string;
+  /** The ARIA labels for the pagination buttons. */
+  ariaLabelValues?: AriaLabelValues;
+  /** The total number of pages. */
+  count?: number;
+  /** A custom CSS class to apply to the pagination component. */
+  customClass?: string;
+  /** The text to display for the next page button. */
+  nextButtonText?: string;
+  /** The current page number. */
+  page?: number;
+  /** The text to display for the previous page button. */
+  prevButtonText?: string;
+  /** The size of the pagination component. */
+  size?: 'sm' | 'md' | 'lg';
+  /** A callback function to handle page changes. */
+  onPageChange?: (event: CustomEvent<{ newPage: number; prevPage: number }>) => void;
+}
+
+/**
+ * Renders a Modus pagination component.
+ * @param {ModusPaginationProps} props - The component props.
+ * @returns {JSX.Element} The rendered pagination component.
+ */
+export default function ModusPagination({
+  ariaLabel,
+  ariaLabelValues,
+  count = 1,
+  customClass,
+  nextButtonText,
+  page = 1,
+  prevButtonText,
+  size = 'md',
+  onPageChange,
+}: ModusPaginationProps) {
+  const paginationRef = useRef<HTMLModusWcPaginationElement>(null);
+
+  useEffect(() => {
+    const pagination = paginationRef.current;
+    if (!pagination || !onPageChange) {
+      return;
+    }
+
+    const handlePageChange = (event: Event) => {
+      onPageChange(event as CustomEvent<{ newPage: number; prevPage: number }>);
+    };
+
+    pagination.addEventListener("pageChange", handlePageChange);
+
+    return () => {
+      pagination.removeEventListener("pageChange", handlePageChange);
+    };
+  }, [onPageChange]);
+
+  return (
+    <ModusWcPagination
+      ref={paginationRef}
+      aria-label={ariaLabel}
+      ariaLabelValues={ariaLabelValues}
+      count={count}
+      custom-class={customClass}
+      nextButtonText={nextButtonText}
+      page={page}
+      prevButtonText={prevButtonText}
+      size={size}
+    />
+  );
+}

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

@@ -0,0 +1,92 @@
+import { ModusWcPanel } from "@trimble-oss/moduswebcomponents-react";
+import type { ReactNode } from "react";
+
+/**
+ * Props for the ModusPanel component.
+ */
+export interface ModusPanelProps {
+  /** Custom CSS class to apply to the outer panel container. */
+  customClass?: string;
+  /** Width of the panel (accepts any valid CSS width value). */
+  width?: string;
+  /** Height of the panel (accepts any valid CSS height value). */
+  height?: string;
+  /** Enable floating mode with elevated shadow for overlay/modal-like appearance. */
+  floating?: boolean;
+  /** Content for the panel header section (typically navigation or title). */
+  header?: ReactNode;
+  /** Main content area of the panel. */
+  body?: ReactNode;
+  /** Content for the panel footer section (typically actions or secondary navigation). */
+  footer?: ReactNode;
+  /** Alternative way to pass body content as children. */
+  children?: ReactNode;
+  /** The ARIA label for the panel. */
+  ariaLabel?: string;
+}
+
+/**
+ * Renders a Modus panel component for organizing content in a structured layout.
+ *
+ * @example
+ * // Basic panel with header, body, and footer
+ * <ModusPanel
+ *   width="250px"
+ *   height="500px"
+ *   header={<div>Header Content</div>}
+ *   body={<div>Main Content</div>}
+ *   footer={<div>Footer Content</div>}
+ * />
+ *
+ * @example
+ * // Floating panel with elevated shadow
+ * <ModusPanel
+ *   width="320px"
+ *   height="auto"
+ *   floating
+ *   header={<div>Quick Actions</div>}
+ *   body={
+ *     <div>
+ *       <ModusButton fullWidth>New Document</ModusButton>
+ *       <ModusButton fullWidth>Upload File</ModusButton>
+ *     </div>
+ *   }
+ * />
+ *
+ * @example
+ * // Body-only panel using children
+ * <ModusPanel width="250px" height="auto">
+ *   <div>Content as children (placed in body slot)</div>
+ * </ModusPanel>
+ *
+ * @param {ModusPanelProps} props - The component props.
+ * @returns {JSX.Element} The rendered panel component.
+ */
+export default function ModusPanel({
+  customClass,
+  width = "350px",
+  height = "700px",
+  floating = false,
+  header,
+  body,
+  footer,
+  children,
+  ariaLabel,
+}: ModusPanelProps) {
+  // If body is not provided but children are, use children as body content
+  const bodyContent = body || children;
+
+  return (
+    <ModusWcPanel
+      custom-class={customClass}
+      width={width}
+      height={height}
+      floating={floating}
+      aria-label={ariaLabel}
+    >
+      {header && <div slot="header">{header}</div>}
+      {bodyContent && <div slot="body">{bodyContent}</div>}
+      {footer && <div slot="footer">{footer}</div>}
+    </ModusWcPanel>
+  );
+}

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

@@ -0,0 +1,70 @@
+
+
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { ModusWcProgress } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusProgress component.
+ */
+interface ModusProgressProps {
+  /** The variant of the progress bar. */
+  variant?: 'default' | 'radial';
+  /** The current value of the progress bar. */
+  value?: number;
+  /** The maximum value of the progress bar. */
+  max?: number;
+  /** Whether the progress is indeterminate. */
+  indeterminate?: boolean;
+  /** The label for the progress bar. */
+  label?: string;
+  /** A custom CSS class to apply to the progress bar. */
+  customClass?: string;
+  /** The ARIA label for the progress bar. */
+  ariaLabel?: string;
+  /** The content to display inside the progress bar (for radial variant). */
+  children?: ReactNode;
+}
+
+/**
+ * Renders a Modus progress component.
+ * @param {ModusProgressProps} props - The component props.
+ * @returns {JSX.Element} The rendered progress component.
+ */
+export default function ModusProgress({
+  variant = 'default',
+  value = 0,
+  max = 100,
+  indeterminate = false,
+  label = '',
+  customClass = '',
+  ariaLabel = 'Progress status',
+  children,
+}: ModusProgressProps) {
+  const normalizedValue = useMemo(() => {
+    if (indeterminate) {
+      return undefined;
+    }
+
+    if (max <= 0) {
+      return 0;
+    }
+
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    return Number.isFinite(clampedValue) ? clampedValue : 0;
+  }, [indeterminate, max, value]);
+
+  return (
+    <ModusWcProgress
+      variant={variant}
+      value={normalizedValue}
+      max={max}
+      indeterminate={indeterminate}
+      label={label}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    >
+      {variant === "radial" ? children : null}
+    </ModusWcProgress>
+  );
+}

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

@@ -0,0 +1,18 @@
+import "@trimble-oss/moduswebcomponents-react/modus-wc-styles.css";
+
+/**
+ * Props for the ModusProvider component.
+ */
+interface ModusProviderProps {
+  /** The child components to render within the provider. */
+  children: React.ReactNode;
+}
+
+/**
+ * A provider component that applies Modus web component styles.
+ * @param {ModusProviderProps} props - The component props.
+ * @returns {JSX.Element} The rendered provider component.
+ */
+export default function ModusProvider({ children }: ModusProviderProps) {
+  return <>{children}</>;
+}

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

@@ -0,0 +1,114 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcRadio } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusRadio component.
+ */
+export interface ModusRadioProps {
+  /** The label for the radio button. */
+  label?: string;
+  /** The value of the radio button. */
+  value?: boolean;
+  /** The name of the radio button group. */
+  name?: string;
+  /** The size of the radio button. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Whether the radio button is required. */
+  required?: boolean;
+  /** Whether the radio button is disabled. */
+  disabled?: boolean;
+  /** 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 radio button. */
+  customClass?: string;
+  /** The ARIA label for the radio button. */
+  '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 radio button component.
+ * @param {ModusRadioProps} props - The component props.
+ * @returns {JSX.Element} The rendered radio button component.
+ */
+export default function ModusRadio({
+  label,
+  value = false,
+  name = '',
+  size = 'md',
+  required = false,
+  disabled = false,
+  inputId,
+  inputTabIndex,
+  customClass,
+  'aria-label': ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusRadioProps) {
+  const radioRef = useRef<HTMLModusWcRadioElement>(null);
+
+  useEffect(() => {
+    const radio = radioRef.current;
+    if (!radio) {
+      return;
+    }
+
+    const handleChange = (event: Event) => {
+      onInputChange?.(event as CustomEvent<InputEvent>);
+    };
+    const handleFocus = (event: Event) => {
+      onInputFocus?.(event as CustomEvent<FocusEvent>);
+    };
+    const handleBlur = (event: Event) => {
+      onInputBlur?.(event as CustomEvent<FocusEvent>);
+    };
+
+    if (onInputChange) {
+      radio.addEventListener("inputChange", handleChange);
+    }
+    if (onInputFocus) {
+      radio.addEventListener("inputFocus", handleFocus);
+    }
+    if (onInputBlur) {
+      radio.addEventListener("inputBlur", handleBlur);
+    }
+
+    return () => {
+      if (onInputChange) {
+        radio.removeEventListener("inputChange", handleChange);
+      }
+      if (onInputFocus) {
+        radio.removeEventListener("inputFocus", handleFocus);
+      }
+      if (onInputBlur) {
+        radio.removeEventListener("inputBlur", handleBlur);
+      }
+    };
+  }, [onInputChange, onInputFocus, onInputBlur]);
+
+  return (
+    <ModusWcRadio
+      ref={radioRef}
+      label={label}
+      value={value}
+      name={name}
+      size={size}
+      required={required}
+      disabled={disabled}
+      inputId={inputId}
+      inputTabIndex={inputTabIndex}
+      customClass={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}