@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,179 @@
+import { useEffect, useRef } from "react";
+import { ModusWcTextInput } from "@trimble-oss/moduswebcomponents-react";
+import type { InputFeedbackProp } from "./ModusInputFeedback";
+
+/**
+ * Props for the ModusTextInput component.
+ */
+interface ModusTextInputProps {
+  /** The value of the text input. */
+  value?: string;
+  /** The type of the text input. */
+  type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url' | 'tel' | 'date' | 'time';
+  /** The placeholder text for the text input. */
+  placeholder?: string;
+  /** The name of the text input. */
+  name?: string;
+  /** The ID of the input element. */
+  inputId?: string;
+  /** Whether the text input is disabled. */
+  disabled?: boolean;
+  /** Whether the text input is read-only. */
+  readOnly?: boolean;
+  /** Whether the text input is required. */
+  required?: boolean;
+  /** Whether the text input has a border. */
+  bordered?: boolean;
+  /** Whether to include a clear button. */
+  includeClear?: boolean;
+  /** Whether to include a search icon. */
+  includeSearch?: boolean;
+  /** The ARIA label for the clear button. */
+  clearAriaLabel?: string;
+  /** Feedback to display for the text input. */
+  feedback?: InputFeedbackProp;
+  /** The maximum allowed length of the input. */
+  maxLength?: number;
+  /** The minimum allowed length of the input. */
+  minLength?: number;
+  /** A regular expression pattern to validate the input against. */
+  pattern?: string;
+  /** The auto-capitalize behavior for the input. */
+  autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  /** The autocomplete behavior for the input. */
+  autoComplete?: string;
+  /** The auto-correct behavior for the input. */
+  autoCorrect?: 'on' | 'off';
+  /** The enter key hint for the virtual keyboard. */
+  enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+  /** The input mode for the virtual keyboard. */
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+  /** The tab index of the input element. */
+  inputTabIndex?: number;
+  /** The size of the text input. */
+  size?: 'sm' | 'md' | 'lg';
+  /** A custom CSS class to apply to the text input. */
+  customClass?: string;
+  /** The label for the text input. */
+  label?: string;
+  /** The ARIA label for the text input. */
+  '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 text input component.
+ * @param {ModusTextInputProps} props - The component props.
+ * @returns {JSX.Element} The rendered text input component.
+ */
+export default function ModusTextInput({
+  value = '',
+  type = 'text',
+  placeholder = '',
+  name = '',
+  inputId,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  bordered = true,
+  includeClear = false,
+  includeSearch = false,
+  clearAriaLabel = 'Clear text',
+  feedback,
+  maxLength,
+  minLength,
+  pattern,
+  autoCapitalize,
+  autoComplete,
+  autoCorrect,
+  enterkeyhint,
+  inputMode = 'text',
+  inputTabIndex,
+  size = 'md',
+  customClass = '',
+  label,
+  'aria-label': ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusTextInputProps) {
+  const textInputRef = useRef<HTMLModusWcTextInputElement>(null);
+
+  useEffect(() => {
+    const textInput = textInputRef.current;
+    if (!textInput) 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>);
+    };
+
+    // Add event listeners
+    if (onInputChange) {
+      textInput.addEventListener("inputChange", handleInputChange);
+    }
+    if (onInputFocus) {
+      textInput.addEventListener("inputFocus", handleInputFocus);
+    }
+    if (onInputBlur) {
+      textInput.addEventListener("inputBlur", handleInputBlur);
+    }
+
+    return () => {
+      // Cleanup event listeners
+      if (onInputChange) {
+        textInput.removeEventListener("inputChange", handleInputChange);
+      }
+      if (onInputFocus) {
+        textInput.removeEventListener("inputFocus", handleInputFocus);
+      }
+      if (onInputBlur) {
+        textInput.removeEventListener("inputBlur", handleInputBlur);
+      }
+    };
+  }, [onInputChange, onInputFocus, onInputBlur]);
+
+  return (
+    <ModusWcTextInput
+      ref={textInputRef}
+      value={value}
+      type={type}
+      placeholder={placeholder}
+      name={name}
+      input-id={inputId}
+      disabled={disabled}
+      read-only={readOnly}
+      required={required}
+      bordered={bordered}
+      include-clear={includeClear}
+      include-search={includeSearch}
+      clear-aria-label={clearAriaLabel}
+      feedback={feedback}
+      max-length={maxLength}
+      min-length={minLength}
+      pattern={pattern}
+      auto-capitalize={autoCapitalize}
+      auto-complete={autoComplete}
+      auto-correct={autoCorrect}
+      enterkeyhint={enterkeyhint}
+      input-mode={inputMode}
+      input-tab-index={inputTabIndex}
+      size={size}
+      custom-class={customClass}
+      label={label}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,164 @@
+import { useEffect, useMemo, useRef } from "react";
+import { ModusWcTextarea } from "@trimble-oss/moduswebcomponents-react";
+import type { InputFeedbackProp } from "./ModusInputFeedback";
+
+type TextareaSize = "sm" | "md" | "lg";
+type EnterKeyHint =
+  | "enter"
+  | "done"
+  | "go"
+  | "next"
+  | "previous"
+  | "search"
+  | "send";
+
+/**
+ * Props for the ModusTextarea component.
+ */
+export interface ModusTextareaProps {
+  /** The value of the textarea. */
+  value?: string;
+  /** The label for the textarea. */
+  label?: string;
+  /** The placeholder text for the textarea. */
+  placeholder?: string;
+  /** Helper text to display below the textarea. */
+  helperText?: string;
+  /** Error text to display below the textarea. */
+  errorText?: string;
+  /** Valid text to display below the textarea. */
+  validText?: string;
+  /** Feedback to display for the textarea. */
+  feedback?: InputFeedbackProp;
+  /** The size of the textarea. */
+  size?: TextareaSize;
+  /** The number of rows to display. */
+  rows?: number;
+  /** The maximum allowed length of the input. */
+  maxLength?: number;
+  /** The minimum allowed length of the input. */
+  minLength?: number;
+  /** Whether the textarea is required. */
+  required?: boolean;
+  /** Whether the textarea is disabled. */
+  disabled?: boolean;
+  /** Whether the textarea is read-only. */
+  readOnly?: boolean;
+  /** The enter key hint for the virtual keyboard. */
+  enterkeyhint?: EnterKeyHint;
+  /** The name of the textarea. */
+  name?: string;
+  /** A custom CSS class to apply to the textarea. */
+  customClass?: string;
+  /** The ARIA label for the textarea. */
+  ariaLabel?: string;
+  /** A callback function to handle value changes. */
+  onValueChange?: (value: string) => void;
+}
+
+/**
+ * Renders a Modus textarea component.
+ * @param {ModusTextareaProps} props - The component props.
+ * @returns {JSX.Element} The rendered textarea component.
+ */
+export default function ModusTextarea({
+  value = "",
+  label,
+  placeholder,
+  helperText,
+  errorText,
+  validText,
+  feedback,
+  size = "md",
+  rows,
+  maxLength,
+  minLength,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  enterkeyhint,
+  name,
+  customClass,
+  ariaLabel,
+  onValueChange,
+}: ModusTextareaProps) {
+  const textareaRef = useRef<HTMLModusWcTextareaElement>(null);
+
+  /**
+   * Computes the appropriate feedback configuration based on provided props.
+   *
+   * This memoized function determines the feedback level and message by
+   * checking props in priority order: feedback > errorText > validText > helperText.
+   * This ensures consistent feedback display while allowing flexible prop usage.
+   *
+   * @returns {InputFeedbackProp | undefined} The computed feedback configuration
+   * @private
+   */
+  const computedFeedback = useMemo<InputFeedbackProp | undefined>(() => {
+    if (feedback) {
+      return feedback;
+    }
+    if (errorText) {
+      return { level: "error", message: errorText };
+    }
+    if (validText) {
+      return { level: "success", message: validText };
+    }
+    if (helperText) {
+      return { level: "info", message: helperText };
+    }
+    return undefined;
+  }, [errorText, feedback, helperText, validText]);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    const handleValueChange = (event: Event) => {
+      const customEvent = event as CustomEvent<string>;
+      onValueChange?.(customEvent.detail);
+    };
+
+    if (onValueChange) {
+      textarea.addEventListener("valueChange", handleValueChange);
+    }
+
+    return () => {
+      if (onValueChange) {
+        textarea.removeEventListener("valueChange", handleValueChange);
+      }
+    };
+  }, [onValueChange]);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    textarea.value = value;
+  }, [value]);
+
+  return (
+    <ModusWcTextarea
+      ref={textareaRef}
+      value={value}
+      label={label}
+      placeholder={placeholder}
+      feedback={computedFeedback}
+      size={size}
+      rows={rows}
+      max-length={maxLength}
+      min-length={minLength}
+      required={required}
+      disabled={disabled}
+      read-only={readOnly}
+      enterkeyhint={enterkeyhint}
+      name={name}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,58 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcThemeSwitcher } from "@trimble-oss/moduswebcomponents-react";
+import type { IThemeConfig } from "@trimble-oss/moduswebcomponents";
+
+export type ModusThemeConfig = IThemeConfig;
+
+/**
+ * Props for the ModusThemeSwitcher component.
+ */
+export interface ModusThemeSwitcherProps {
+  /** A custom CSS class to apply to the theme switcher. */
+  customClass?: string;
+  /** The ARIA label for the theme switcher. */
+  ariaLabel?: string;
+  /** A callback function to handle theme changes. */
+  onThemeChange?: (config: ModusThemeConfig) => void;
+}
+
+/**
+ * Renders a Modus theme switcher component.
+ * @param {ModusThemeSwitcherProps} props - The component props.
+ * @returns {JSX.Element} The rendered theme switcher component.
+ */
+export default function ModusThemeSwitcher({
+  customClass,
+  ariaLabel = 'Toggle theme',
+  onThemeChange,
+}: ModusThemeSwitcherProps) {
+  const switcherRef = useRef<HTMLModusWcThemeSwitcherElement>(null);
+
+  useEffect(() => {
+    const switcher = switcherRef.current;
+    if (!switcher || !onThemeChange) {
+      return;
+    }
+
+    const handleThemeChange = (event: Event) => {
+      const customEvent = event as CustomEvent<IThemeConfig>;
+      onThemeChange(customEvent.detail);
+    };
+
+    switcher.addEventListener("themeChange", handleThemeChange);
+
+    return () => {
+      switcher.removeEventListener("themeChange", handleThemeChange);
+    };
+  }, [onThemeChange]);
+
+  return (
+    <ModusWcThemeSwitcher
+      ref={switcherRef}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,176 @@
+import { useEffect, useRef } from "react";
+import { ModusWcTimeInput } from "@trimble-oss/moduswebcomponents-react";
+import type { InputFeedbackProp } from "./ModusInputFeedback";
+
+/**
+ * Props for the ModusTimeInput component.
+ */
+export interface ModusTimeInputProps {
+  /** The value of the time input. */
+  value?: string;
+  /** The label for the time input. */
+  label?: string;
+  /** The name of the time input. */
+  name?: string;
+  /** The ID of the input element. */
+  inputId?: string;
+  /** The minimum allowed time. */
+  min?: string;
+  /** The maximum allowed time. */
+  max?: string;
+  /** The step interval for the time input. */
+  step?: number;
+  /** Whether to show the seconds field. */
+  showSeconds?: boolean;
+  /** The ID of the datalist to use. */
+  datalistId?: string;
+  /** The options to display in the datalist. */
+  datalistOptions?: string[];
+  /** Whether to enable autocomplete for the time input. */
+  autoComplete?: 'on' | 'off';
+  /** Whether the time input has a border. */
+  bordered?: boolean;
+  /** Whether the time input is disabled. */
+  disabled?: boolean;
+  /** Whether the time input is read-only. */
+  readOnly?: boolean;
+  /** Whether the time input is required. */
+  required?: boolean;
+  /** The size of the time input. */
+  size?: 'sm' | 'md' | 'lg';
+  /** The tab index of the input element. */
+  inputTabIndex?: number;
+  /** A custom CSS class to apply to the time input. */
+  customClass?: string;
+  /** Feedback to display for the time input. */
+  feedback?: InputFeedbackProp;
+  /** The ARIA label for the time input. */
+  ariaLabel?: string;
+  /** A callback function to handle input changes. */
+  onInputChange?: (event: CustomEvent<Event>) => 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 time input component.
+ * @param {ModusTimeInputProps} props - The component props.
+ * @returns {JSX.Element} The rendered time input component.
+ */
+export default function ModusTimeInput({
+  value = '',
+  label,
+  name,
+  inputId,
+  min,
+  max,
+  step,
+  showSeconds = false,
+  datalistId,
+  datalistOptions = [],
+  autoComplete,
+  bordered = true,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  size = 'md',
+  inputTabIndex,
+  customClass,
+  feedback,
+  ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusTimeInputProps) {
+  const inputRef = useRef<HTMLModusWcTimeInputElement>(null);
+
+  useEffect(() => {
+    const timeInput = inputRef.current;
+    if (!timeInput) {
+      return;
+    }
+
+    if (Array.isArray(datalistOptions)) {
+      timeInput.datalistOptions = [...datalistOptions];
+    }
+  }, [datalistOptions]);
+
+  useEffect(() => {
+    const timeInput = inputRef.current;
+    if (!timeInput) {
+      return;
+    }
+
+    const handleInputChange = (event: Event) => {
+      onInputChange?.(event as CustomEvent<Event>);
+    };
+
+    const handleInputFocus = (event: Event) => {
+      onInputFocus?.(event as CustomEvent<FocusEvent>);
+    };
+
+    const handleInputBlur = (event: Event) => {
+      onInputBlur?.(event as CustomEvent<FocusEvent>);
+    };
+
+    if (onInputChange) {
+      timeInput.addEventListener("inputChange", handleInputChange);
+    }
+    if (onInputFocus) {
+      timeInput.addEventListener("inputFocus", handleInputFocus);
+    }
+    if (onInputBlur) {
+      timeInput.addEventListener("inputBlur", handleInputBlur);
+    }
+
+    return () => {
+      if (onInputChange) {
+        timeInput.removeEventListener("inputChange", handleInputChange);
+      }
+      if (onInputFocus) {
+        timeInput.removeEventListener("inputFocus", handleInputFocus);
+      }
+      if (onInputBlur) {
+        timeInput.removeEventListener("inputBlur", handleInputBlur);
+      }
+    };
+  }, [onInputBlur, onInputChange, onInputFocus]);
+
+  useEffect(() => {
+    const timeInput = inputRef.current;
+    if (!timeInput) {
+      return;
+    }
+    if (value !== undefined) {
+      timeInput.value = value;
+    }
+  }, [value]);
+
+  return (
+    <ModusWcTimeInput
+      ref={inputRef}
+      value={value}
+      label={label}
+      name={name}
+      inputId={inputId}
+      min={min}
+      max={max}
+      step={step}
+      showSeconds={showSeconds}
+      datalistId={datalistId}
+      datalistOptions={datalistOptions}
+      autoComplete={autoComplete}
+      bordered={bordered}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+      size={size}
+      inputTabIndex={inputTabIndex}
+      customClass={customClass}
+      feedback={feedback}
+      aria-label={ariaLabel}
+    />
+  );
+}