@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,108 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcRating } from "@trimble-oss/moduswebcomponents-react";
+
+type RatingVariant = "star" | "heart" | "smiley" | "thumb";
+type RatingSize = "sm" | "md" | "lg";
+
+/**
+ * Represents the detail of a rating change event.
+ */
+export interface RatingChangeDetail {
+  /** The new rating value. */
+  newRating: number;
+}
+
+/**
+ * Props for the ModusRating component.
+ */
+export interface ModusRatingProps {
+  /** The variant of the rating component. */
+  variant?: RatingVariant;
+  /** The total number of rating items. */
+  count?: number;
+  /** The current rating value. */
+  value?: number;
+  /** Whether to allow half ratings. */
+  allowHalf?: boolean;
+  /** The size of the rating items. */
+  size?: RatingSize;
+  /** Whether the rating component is disabled. */
+  disabled?: boolean;
+  /** A custom CSS class to apply to the rating component. */
+  customClass?: string;
+  /** The ARIA label for the rating component. */
+  'aria-label'?: string;
+  /** A function to get the ARIA label text for a given rating value. */
+  getAriaLabelText?: (ratingValue: number) => string;
+  /** A callback function to handle rating changes. */
+  onRatingChange?: (event: CustomEvent<RatingChangeDetail>) => void;
+}
+
+/**
+ * Renders a Modus rating component.
+ * @param {ModusRatingProps} props - The component props.
+ * @returns {JSX.Element} The rendered rating component.
+ */
+export default function ModusRating({
+  variant = 'smiley',
+  count = 5,
+  value = 0,
+  allowHalf = false,
+  size = 'md',
+  disabled = false,
+  customClass,
+  'aria-label': ariaLabel,
+  getAriaLabelText,
+  onRatingChange,
+}: ModusRatingProps) {
+  const ratingRef = useRef<HTMLModusWcRatingElement>(null);
+
+  useEffect(() => {
+    const rating = ratingRef.current;
+    if (!rating) {
+      return;
+    }
+
+    if (getAriaLabelText) {
+      rating.getAriaLabelText = getAriaLabelText;
+      return () => {
+        rating.getAriaLabelText = undefined;
+      };
+    }
+
+    return;
+  }, [getAriaLabelText]);
+
+  useEffect(() => {
+    const rating = ratingRef.current;
+    if (!rating || !onRatingChange) {
+      return;
+    }
+
+    const handleRatingChange = (event: Event) => {
+      onRatingChange(event as CustomEvent<RatingChangeDetail>);
+    };
+
+    rating.addEventListener("ratingChange", handleRatingChange);
+
+    return () => {
+      rating.removeEventListener("ratingChange", handleRatingChange);
+    };
+  }, [onRatingChange]);
+
+  return (
+    <ModusWcRating
+      ref={ratingRef}
+      variant={variant}
+      count={count}
+      value={value}
+      allowHalf={allowHalf}
+      size={size}
+      disabled={disabled}
+      customClass={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,171 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcSelect } from "@trimble-oss/moduswebcomponents-react";
+
+type SelectSize = "sm" | "md" | "lg";
+type FeedbackLevel = "error" | "info" | "success" | "warning";
+
+/**
+ * Represents an option in a select component.
+ */
+export interface ModusSelectOption {
+  /** The text to display for the option. */
+  label: string;
+  /** The value of the option. */
+  value: string;
+  /** Whether the option is disabled. */
+  disabled?: boolean;
+}
+
+/**
+ * Represents feedback for a select component.
+ */
+export interface ModusSelectFeedback {
+  /** The severity level of the feedback. */
+  level: FeedbackLevel;
+  /** The message to display as feedback. */
+  message?: string;
+}
+
+/**
+ * Props for the ModusSelect component.
+ */
+export interface ModusSelectProps {
+  /** The options to display in the select component. */
+  options: ModusSelectOption[];
+  /** The value of the select component. */
+  value?: string;
+  /** The label for the select component. */
+  label?: string;
+  /** The name of the select component. */
+  name?: string;
+  /** The size of the select component. */
+  size?: SelectSize;
+  /** Whether the select component is required. */
+  required?: boolean;
+  /** Whether the select component is disabled. */
+  disabled?: boolean;
+  /** Whether the select component has a border. */
+  bordered?: 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 select component. */
+  customClass?: string;
+  /** Feedback to display for the select component. */
+  feedback?: ModusSelectFeedback;
+  /** The ARIA label for the select component. */
+  '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 select component.
+ * @param {ModusSelectProps} props - The component props.
+ * @returns {JSX.Element} The rendered select component.
+ */
+export default function ModusSelect({
+  options,
+  value = '',
+  label,
+  name,
+  size = 'md',
+  required = false,
+  disabled = false,
+  bordered = true,
+  inputId,
+  inputTabIndex,
+  customClass,
+  feedback,
+  'aria-label': ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusSelectProps) {
+  const selectRef = useRef<HTMLModusWcSelectElement>(null);
+
+  // Sync options array with the web component
+  useEffect(() => {
+    const select = selectRef.current;
+    if (!select) {
+      return;
+    }
+
+    // Assign a new array to trigger re-render within the component
+    select.options = [...options];
+  }, [options]);
+
+  // Sync feedback (object set via property, not attribute)
+  useEffect(() => {
+    const select = selectRef.current;
+    if (!select) {
+      return;
+    }
+
+    select.feedback = feedback;
+  }, [feedback]);
+
+  // Wire up events
+  useEffect(() => {
+    const select = selectRef.current;
+    if (!select) {
+      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) {
+      select.addEventListener("inputChange", handleInputChange);
+    }
+    if (onInputFocus) {
+      select.addEventListener("inputFocus", handleInputFocus);
+    }
+    if (onInputBlur) {
+      select.addEventListener("inputBlur", handleInputBlur);
+    }
+
+    return () => {
+      if (onInputChange) {
+        select.removeEventListener("inputChange", handleInputChange);
+      }
+      if (onInputFocus) {
+        select.removeEventListener("inputFocus", handleInputFocus);
+      }
+      if (onInputBlur) {
+        select.removeEventListener("inputBlur", handleInputBlur);
+      }
+    };
+  }, [onInputChange, onInputFocus, onInputBlur]);
+
+  return (
+    <ModusWcSelect
+      ref={selectRef}
+      value={value}
+      label={label}
+      name={name}
+      size={size}
+      required={required}
+      disabled={disabled}
+      bordered={bordered}
+      inputId={inputId}
+      inputTabIndex={inputTabIndex}
+      customClass={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,149 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ModusWcSideNavigation } from "@trimble-oss/moduswebcomponents-react";
+import ModusMenu from "./ModusMenu";
+import type { MenuItem } from "./ModusMenu";
+
+type SideNavSize = "sm" | "md" | "lg";
+
+/**
+ * Props for the ModusSideNavigation component.
+ */
+export interface ModusSideNavigationProps {
+  /** The items to display in the side navigation. */
+  items: MenuItem[];
+  /** Whether the side navigation is expanded. */
+  expanded?: boolean;
+  /** The default expanded state of the side navigation. */
+  defaultExpanded?: boolean;
+  /** Whether to collapse the side navigation when clicking outside of it. */
+  collapseOnClickOutside?: boolean;
+  /** The maximum width of the side navigation. */
+  maxWidth?: string;
+  /** The size of the side navigation. */
+  size?: SideNavSize;
+  /** A custom CSS class to apply to the side navigation. */
+  customClass?: string;
+  /** Whether to automatically collapse the side navigation when an item is selected. */
+  autoCollapseOnSelect?: boolean;
+  /** A callback function to handle expanded state changes. */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** A callback function to handle item selection. */
+  onItemSelect?: (item: MenuItem) => void;
+}
+
+/**
+ * Renders a Modus side navigation component.
+ * @param {ModusSideNavigationProps} props - The component props.
+ * @returns {JSX.Element} The rendered side navigation component.
+ */
+export default function ModusSideNavigation({
+  items,
+  expanded,
+  defaultExpanded = false,
+  collapseOnClickOutside = true,
+  maxWidth = '256px',
+  size = 'md',
+  customClass,
+  autoCollapseOnSelect = true,
+  onExpandedChange,
+  onItemSelect,
+}: ModusSideNavigationProps) {
+  const navRef = useRef<HTMLModusWcSideNavigationElement>(null);
+  const isControlled = expanded !== undefined;
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+
+  const currentExpanded = useMemo(
+    () => (isControlled ? Boolean(expanded) : internalExpanded),
+    [expanded, internalExpanded, isControlled]
+  );
+
+  // Synchronize expanded state to the web component
+  useEffect(() => {
+    const nav = navRef.current;
+    if (nav && nav.expanded !== currentExpanded) {
+      nav.expanded = currentExpanded;
+    }
+  }, [currentExpanded]);
+
+  // Keep collapse-on-click-outside and max-width up to date
+  useEffect(() => {
+    const nav = navRef.current;
+    if (!nav) {
+      return;
+    }
+
+    nav.collapseOnClickOutside = collapseOnClickOutside;
+    nav.maxWidth = maxWidth;
+    if (customClass) {
+      nav.customClass = customClass;
+    } else {
+      nav.customClass = undefined;
+    }
+  }, [collapseOnClickOutside, maxWidth, customClass]);
+
+  // Handle expanded change events from the component
+  useEffect(() => {
+    const nav = navRef.current;
+    if (!nav) {
+      return;
+    }
+
+    const handleExpandedChange = (event: Event) => {
+      const customEvent = event as CustomEvent<boolean>;
+      const newExpanded = customEvent.detail;
+
+      if (!isControlled) {
+        setInternalExpanded(newExpanded);
+      }
+      onExpandedChange?.(newExpanded);
+    };
+
+    nav.addEventListener("expandedChange", handleExpandedChange);
+
+    return () => {
+      nav.removeEventListener("expandedChange", handleExpandedChange);
+    };
+  }, [isControlled, onExpandedChange]);
+
+  const collapseNavigation = useCallback(() => {
+    const nav = navRef.current;
+    if (!nav) {
+      return;
+    }
+    nav.expanded = false;
+    if (!isControlled) {
+      setInternalExpanded(false);
+    }
+    onExpandedChange?.(false);
+  }, [isControlled, onExpandedChange]);
+
+  const handleItemSelect = useCallback(
+    (item: MenuItem) => {
+      onItemSelect?.(item);
+      if (autoCollapseOnSelect) {
+        collapseNavigation();
+      }
+    },
+    [autoCollapseOnSelect, collapseNavigation, onItemSelect]
+  );
+
+  return (
+    <ModusWcSideNavigation
+      ref={navRef}
+      custom-class={customClass}
+      collapseOnClickOutside={collapseOnClickOutside}
+      expanded={currentExpanded}
+      maxWidth={maxWidth}
+    >
+      <ModusMenu
+        items={items}
+        size={size}
+        orientation="vertical"
+        bordered={false}
+        onItemSelect={handleItemSelect}
+      />
+    </ModusWcSideNavigation>
+  );
+}
+
+export type { MenuItem as ModusSideNavigationItem };

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

@@ -0,0 +1,42 @@
+import { ModusWcSkeleton } from "@trimble-oss/moduswebcomponents-react";
+
+type SkeletonShape = "circle" | "rectangle";
+
+/**
+ * Props for the ModusSkeleton component.
+ */
+export interface ModusSkeletonProps {
+  /** The height of the skeleton. */
+  height?: string;
+  /** The width of the skeleton. */
+  width?: string;
+  /** The shape of the skeleton. */
+  shape?: SkeletonShape;
+  /** A custom CSS class to apply to the skeleton. */
+  customClass?: string;
+  /** The ARIA label for the skeleton. */
+  ariaLabel?: string;
+}
+
+/**
+ * Renders a Modus skeleton component.
+ * @param {ModusSkeletonProps} props - The component props.
+ * @returns {JSX.Element} The rendered skeleton component.
+ */
+export default function ModusSkeleton({
+  height = "var(--modus-wc-line-height-md)",
+  width = "100%",
+  shape = "rectangle",
+  customClass,
+  ariaLabel = "Loading placeholder",
+}: ModusSkeletonProps) {
+  return (
+    <ModusWcSkeleton
+      height={height}
+      width={width}
+      shape={shape}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,128 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcSlider } from "@trimble-oss/moduswebcomponents-react";
+
+type SliderSize = "sm" | "md" | "lg";
+
+/**
+ * Props for the ModusSlider component.
+ */
+export interface ModusSliderProps {
+  /** The current value of the slider. */
+  value?: number;
+  /** The minimum value of the slider. */
+  min?: number;
+  /** The maximum value of the slider. */
+  max?: number;
+  /** The step interval for the slider. */
+  step?: number;
+  /** The label for the slider. */
+  label?: string;
+  /** The name of the slider. */
+  name?: string;
+  /** The size of the slider. */
+  size?: SliderSize;
+  /** Whether the slider is required. */
+  required?: boolean;
+  /** Whether the slider 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 slider. */
+  customClass?: string;
+  /** The ARIA label for the slider. */
+  '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 slider component.
+ * @param {ModusSliderProps} props - The component props.
+ * @returns {JSX.Element} The rendered slider component.
+ */
+export default function ModusSlider({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  name,
+  size = 'md',
+  required = false,
+  disabled = false,
+  inputId,
+  inputTabIndex,
+  customClass,
+  'aria-label': ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusSliderProps) {
+  const sliderRef = useRef<HTMLModusWcSliderElement>(null);
+
+  useEffect(() => {
+    const slider = sliderRef.current;
+    if (!slider) {
+      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) {
+      slider.addEventListener("inputChange", handleInputChange);
+    }
+    if (onInputFocus) {
+      slider.addEventListener("inputFocus", handleInputFocus);
+    }
+    if (onInputBlur) {
+      slider.addEventListener("inputBlur", handleInputBlur);
+    }
+
+    return () => {
+      if (onInputChange) {
+        slider.removeEventListener("inputChange", handleInputChange);
+      }
+      if (onInputFocus) {
+        slider.removeEventListener("inputFocus", handleInputFocus);
+      }
+      if (onInputBlur) {
+        slider.removeEventListener("inputBlur", handleInputBlur);
+      }
+    };
+  }, [onInputBlur, onInputChange, onInputFocus]);
+
+  return (
+    <ModusWcSlider
+      ref={sliderRef}
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      label={label}
+      name={name}
+      size={size}
+      required={required}
+      disabled={disabled}
+      inputId={inputId}
+      inputTabIndex={inputTabIndex}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,85 @@
+
+
+import { useEffect, useRef } from "react";
+import { ModusWcStepper } from "@trimble-oss/moduswebcomponents-react";
+
+export type StepperColor =
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "info"
+  | "success"
+  | "warning"
+  | "error"
+  | "neutral";
+
+/**
+ * Represents a single step in a stepper component.
+ */
+export interface ModusStepperItem {
+  /** The label for the step. */
+  label?: string;
+  /** The color of the step. */
+  color?: StepperColor;
+  /** The content of the step. */
+  content?: string;
+  /** A custom CSS class to apply to the step. */
+  customClass?: string;
+}
+
+/**
+ * Props for the ModusStepper component.
+ */
+export interface ModusStepperProps {
+  /** The steps to display in the stepper. */
+  steps: ModusStepperItem[];
+  /** The orientation of the stepper. */
+  orientation?: 'horizontal' | 'vertical';
+  /** A custom CSS class to apply to the stepper. */
+  customClass?: string;
+  /** The ARIA label for the stepper. */
+  ariaLabel?: string;
+}
+
+/**
+ * Renders a Modus stepper component.
+ * @param {ModusStepperProps} props - The component props.
+ * @returns {JSX.Element} The rendered stepper component.
+ */
+export default function ModusStepper({
+  steps,
+  orientation = 'horizontal',
+  customClass,
+  ariaLabel = 'Workflow progress',
+}: ModusStepperProps) {
+  const stepperRef = useRef<HTMLModusWcStepperElement>(null);
+
+  // Keep steps array in sync (assign new array for stencil change detection)
+  useEffect(() => {
+    const stepper = stepperRef.current;
+    if (!stepper) {
+      return;
+    }
+
+    stepper.steps = steps.map((step) => ({ ...step }));
+  }, [steps]);
+
+  // Keep custom class up to date
+  useEffect(() => {
+    const stepper = stepperRef.current;
+    if (!stepper) {
+      return;
+    }
+
+    stepper.customClass = customClass;
+  }, [customClass]);
+
+  return (
+    <ModusWcStepper
+      ref={stepperRef}
+      orientation={orientation}
+      aria-label={ariaLabel}
+      custom-class={customClass}
+    />
+  );
+}