@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,93 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { ModusWcChip } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusChip component.
+ */
+export interface ModusChipProps {
+  /** The content to display inside the chip. */
+  children?: ReactNode;
+  /** Whether the chip is active. */
+  active?: boolean;
+  /** Whether the chip is disabled. */
+  disabled?: boolean;
+  /** Whether the chip has an error. */
+  hasError?: boolean;
+  /** The label for the chip. */
+  label?: string;
+  /** Whether to show the remove button. */
+  showRemove?: boolean;
+  /** The size of the chip. */
+  size?: 'sm' | 'md' | 'lg';
+  /** The variant of the chip. */
+  variant?: 'filled' | 'outline';
+  /** A custom CSS class to apply to the chip. */
+  customClass?: string;
+  /** The ARIA label for the chip. */
+  'aria-label'?: string;
+  /** A callback function to handle chip clicks. */
+  onChipClick?: (event: CustomEvent<MouseEvent | KeyboardEvent>) => void;
+  /** A callback function to handle chip removal. */
+  onChipRemove?: (event: CustomEvent<MouseEvent | KeyboardEvent>) => void;
+}
+
+/**
+ * Renders a Modus chip component.
+ * @param {ModusChipProps} props - The component props.
+ * @returns {JSX.Element} The rendered chip component.
+ */
+export default function ModusChip({
+  children,
+  active = false,
+  disabled = false,
+  hasError = false,
+  label = '',
+  showRemove = false,
+  size = 'md',
+  variant = 'filled',
+  customClass,
+  'aria-label': ariaLabel,
+  onChipClick,
+  onChipRemove,
+}: ModusChipProps) {
+  const chipRef = useRef<HTMLModusWcChipElement>(null);
+
+  useEffect(() => {
+    const chip = chipRef.current;
+    if (!chip) return;
+
+    const handleChipClick = (event: Event) => {
+      onChipClick?.(event as CustomEvent<MouseEvent | KeyboardEvent>);
+    };
+    const handleChipRemove = (event: Event) => {
+      onChipRemove?.(event as CustomEvent<MouseEvent | KeyboardEvent>);
+    };
+
+    if (onChipClick) chip.addEventListener("chipClick", handleChipClick);
+    if (onChipRemove) chip.addEventListener("chipRemove", handleChipRemove);
+
+    return () => {
+      if (onChipClick) chip.removeEventListener("chipClick", handleChipClick);
+      if (onChipRemove)
+        chip.removeEventListener("chipRemove", handleChipRemove);
+    };
+  }, [onChipClick, onChipRemove]);
+
+  return (
+    <ModusWcChip
+      ref={chipRef}
+      active={active}
+      disabled={disabled}
+      hasError={hasError}
+      label={label}
+      showRemove={showRemove}
+      size={size}
+      variant={variant}
+      customClass={customClass}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </ModusWcChip>
+  );
+}

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

@@ -0,0 +1,154 @@
+import { useEffect, useRef } from "react";
+import { ModusWcDate } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Represents feedback for an input component.
+ */
+export interface InputFeedbackProp {
+  /** The severity level of the feedback. */
+  level: "error" | "info" | "success" | "warning";
+  /** The message to display as feedback. */
+  message?: string;
+}
+
+/** Date format options. */
+export type DateFormat =
+  | "yyyy-mm-dd"
+  | "dd-mm-yyyy"
+  | "yyyy/mm/dd"
+  | "dd/mm/yyyy"
+  | "MMM DD, YYYY";
+
+/** Week start day options. */
+export type WeekStartDay = "sunday" | "monday";
+
+/**
+ * Props for the ModusDate component.
+ */
+export interface ModusDateProps {
+  /** The value of the date input (Format: YYYY-MM-DD). */
+  value?: string;
+  /** Whether the date input has a border. */
+  bordered?: boolean;
+  /** Whether the date input is disabled. */
+  disabled?: boolean;
+  /** Feedback to display for the date input. */
+  feedback?: InputFeedbackProp;
+  /** Date format pattern. */
+  format?: DateFormat;
+  /** The ID of the input element. */
+  inputId?: string;
+  /** The tab index of the input element. */
+  inputTabIndex?: number;
+  /** The label for the date input. */
+  label?: string;
+  /** The maximum allowed date (Format: YYYY-MM-DD). */
+  max?: string;
+  /** The minimum allowed date (Format: YYYY-MM-DD). */
+  min?: string;
+  /** The name of the input element. */
+  name?: string;
+  /** Whether the date input is read-only. */
+  readOnly?: boolean;
+  /** Whether the date input is required. */
+  required?: boolean;
+  /** The size of the date input. */
+  size?: "sm" | "md" | "lg";
+  /** First day of the week for the calendar view. */
+  weekStartDay?: WeekStartDay;
+  /** A custom CSS class to apply to the date input. */
+  customClass?: string;
+  /** The ARIA label for the date 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 date input component.
+ * @param {ModusDateProps} props - The component props.
+ * @returns {JSX.Element} The rendered date input component.
+ */
+export default function ModusDate({
+  value = "",
+  bordered = true,
+  disabled = false,
+  feedback,
+  format,
+  inputId,
+  inputTabIndex,
+  label,
+  max,
+  min,
+  name = "",
+  readOnly = false,
+  required = false,
+  size = "md",
+  weekStartDay,
+  customClass,
+  "aria-label": ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+}: ModusDateProps) {
+  const dateRef = useRef<HTMLModusWcDateElement>(null);
+
+  useEffect(() => {
+    const date = dateRef.current;
+    if (!date) 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) date.addEventListener("inputChange", handleInputChange);
+    if (onInputFocus) date.addEventListener("inputFocus", handleInputFocus);
+    if (onInputBlur) date.addEventListener("inputBlur", handleInputBlur);
+
+    return () => {
+      if (onInputChange)
+        date.removeEventListener("inputChange", handleInputChange);
+      if (onInputFocus)
+        date.removeEventListener("inputFocus", handleInputFocus);
+      if (onInputBlur) date.removeEventListener("inputBlur", handleInputBlur);
+    };
+  }, [onInputChange, onInputFocus, onInputBlur]);
+
+  // Note: format and weekStartDay are passed as attributes since they may not be
+  // exposed as typed props in the React bindings but are supported by the web component
+  const additionalProps: Record<string, unknown> = {};
+  if (format) additionalProps.format = format;
+  if (weekStartDay) additionalProps.weekStartDay = weekStartDay;
+
+  return (
+    <ModusWcDate
+      ref={dateRef}
+      value={value}
+      bordered={bordered}
+      disabled={disabled}
+      feedback={feedback}
+      inputId={inputId}
+      inputTabIndex={inputTabIndex}
+      label={label}
+      max={max}
+      min={min}
+      name={name}
+      readOnly={readOnly}
+      required={required}
+      size={size}
+      customClass={customClass}
+      aria-label={ariaLabel}
+      {...additionalProps}
+    />
+  );
+}

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

@@ -0,0 +1,148 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { ModusWcDropdownMenu } from "@trimble-oss/moduswebcomponents-react";
+import ModusMenuItem from "./ModusMenuItem";
+import type { MenuItem } from "./ModusMenu";
+
+/**
+ * Props for the ModusDropdownMenu component.
+ */
+export interface ModusDropdownMenuProps {
+  /** The content to display inside the dropdown menu. */
+  children?: ReactNode;
+  /** The items to display in the dropdown menu. */
+  menuItems?: MenuItem[];
+  /** The color of the dropdown button. */
+  buttonColor?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+  /** The size of the dropdown button. */
+  buttonSize?: 'xs' | 'sm' | 'md' | 'lg';
+  /** The variant of the dropdown button. */
+  buttonVariant?: 'filled' | 'outlined' | 'borderless';
+  /** A custom CSS class to apply to the dropdown menu. */
+  customClass?: string;
+  /** Whether the dropdown menu is disabled. */
+  disabled?: boolean;
+  /** Whether the dropdown menu has a border. */
+  menuBordered?: boolean;
+  /** The offset of the dropdown menu from the button. */
+  menuOffset?: number;
+  /** The placement of the dropdown menu. */
+  menuPlacement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end';
+  /** The size of the dropdown menu. */
+  menuSize?: 'sm' | 'md' | 'lg';
+  /** Whether the dropdown menu is visible. */
+  menuVisible?: boolean;
+  /** The content to display inside the dropdown button. */
+  buttonContent?: ReactNode;
+  /** A callback function to handle menu visibility changes. */
+  onMenuVisibilityChange?: (event: CustomEvent<{ isVisible: boolean }>) => void;
+  /** A callback function to handle item selection. */
+  onItemSelect?: (event: CustomEvent<{ value: string }>) => void;
+}
+
+/**
+ * Renders a Modus dropdown menu component.
+ * @param {ModusDropdownMenuProps} props - The component props.
+ * @returns {JSX.Element} The rendered dropdown menu component.
+ */
+export default function ModusDropdownMenu({
+  children,
+  menuItems,
+  buttonColor = 'primary',
+  buttonSize = 'md',
+  buttonVariant = 'filled',
+  customClass,
+  disabled = false,
+  menuBordered = true,
+  menuOffset = 10,
+  menuPlacement = 'bottom-start',
+  menuSize = 'md',
+  menuVisible = false,
+  buttonContent,
+  onMenuVisibilityChange,
+  onItemSelect,
+}: ModusDropdownMenuProps) {
+  const dropdownRef = useRef<HTMLModusWcDropdownMenuElement>(null);
+
+  useEffect(() => {
+    const dropdown = dropdownRef.current;
+    if (!dropdown) return;
+
+    const handleMenuVisibilityChange = (event: Event) => {
+      onMenuVisibilityChange?.(event as CustomEvent<{ isVisible: boolean }>);
+    };
+    const handleItemSelect = (event: Event) => {
+      onItemSelect?.(event as CustomEvent<{ value: string }>);
+
+      // Close the menu after item selection
+      const dropdown = dropdownRef.current;
+      if (dropdown) {
+        dropdown.menuVisible = false;
+      }
+    };
+
+    if (onMenuVisibilityChange)
+      dropdown.addEventListener(
+        "menuVisibilityChange",
+        handleMenuVisibilityChange
+      );
+    if (onItemSelect) dropdown.addEventListener("itemSelect", handleItemSelect);
+
+    return () => {
+      if (onMenuVisibilityChange)
+        dropdown.removeEventListener(
+          "menuVisibilityChange",
+          handleMenuVisibilityChange
+        );
+      if (onItemSelect)
+        dropdown.removeEventListener("itemSelect", handleItemSelect);
+    };
+  }, [onMenuVisibilityChange, onItemSelect]);
+
+  return (
+    <ModusWcDropdownMenu
+      ref={dropdownRef}
+      buttonColor={buttonColor}
+      buttonSize={buttonSize}
+      buttonVariant={buttonVariant}
+      customClass={customClass}
+      disabled={disabled}
+      menuBordered={menuBordered}
+      menuOffset={menuOffset}
+      menuPlacement={menuPlacement}
+      menuSize={menuSize}
+      menuVisible={menuVisible}
+    >
+      {buttonContent && <div slot="button">{buttonContent}</div>}
+      <div slot="menu">
+        {menuItems
+          ? menuItems.map((item) => (
+              <ModusMenuItem
+                key={item.value}
+                label={item.label}
+                value={item.value}
+                subLabel={item.subLabel}
+                startIcon={item.startIcon}
+                selected={item.selected}
+                disabled={item.disabled}
+                bordered={item.bordered}
+                onItemSelect={onItemSelect}
+              />
+            ))
+          : children}
+      </div>
+    </ModusWcDropdownMenu>
+  );
+}

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

@@ -0,0 +1,140 @@
+import { ModusWcFileDropzone } from "@trimble-oss/moduswebcomponents-react";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Props for the ModusFileDropzone component.
+ */
+export interface ModusFileDropzoneProps {
+  /** Accepted file types (e.g., '.jpg,.png' or 'image/*'). */
+  acceptFileTypes?: string;
+  /** Custom CSS class to apply to the dropzone element. */
+  customClass?: string;
+  /** Disables the file input and dropzone interaction. */
+  disabled?: boolean;
+  /** Custom instructions shown when files are dragged over the dropzone. */
+  fileDraggedOverInstructions?: string;
+  /** Show state icon (upload, success, error) in the dropzone. */
+  includeStateIcon?: boolean;
+  /** Custom instructions shown as the default dropzone message. */
+  instructions?: string;
+  /** Custom error message when an invalid file type is selected. */
+  invalidFileTypeMessage?: string;
+  /** Maximum number of files allowed; shows error if exceeded. */
+  maxFileCount?: number;
+  /** Maximum allowed length of filename (excluding extension); shows error if exceeded. */
+  maxFileNameLength?: number;
+  /** Maximum total file size in bytes; shows error if exceeded. */
+  maxTotalFileSizeBytes?: number;
+  /** Allow multiple file selection. */
+  multiple?: boolean;
+  /** Success message displayed when files are uploaded successfully. */
+  successMessage?: string;
+  /** Callback when files are selected (via drag-and-drop or file browser). */
+  onFileSelect?: (event: CustomEvent<FileList>) => void;
+  /** The ARIA label for the dropzone. */
+  ariaLabel?: string;
+  /** Custom content slot for progress indicators or additional instructions. */
+  children?: ReactNode;
+}
+
+/**
+ * Handle interface for ModusFileDropzone ref methods.
+ */
+export interface ModusFileDropzoneHandle {
+  /** Resets the dropzone to its initial state, clearing all error and success states. */
+  reset: () => Promise<void>;
+}
+
+/**
+ * Renders a Modus file dropzone component for drag-and-drop file uploads.
+ *
+ * @example
+ * // Basic file dropzone
+ * <ModusFileDropzone
+ *   acceptFileTypes=".doc, .docx, .pdf"
+ *   instructions="Drag files here or browse to upload"
+ * />
+ *
+ * @example
+ * // Multiple files with validation
+ * <ModusFileDropzone
+ *   acceptFileTypes="image/*"
+ *   multiple
+ *   maxFileCount={3}
+ *   maxTotalFileSizeBytes={10485760}
+ *   instructions="Upload images (max 3 files, 10MB total)"
+ *   onFileSelect={(e) => console.log('Files:', e.detail)}
+ * />
+ *
+ * @example
+ * // With ref for programmatic reset
+ * const dropzoneRef = useRef<ModusFileDropzoneHandle>(null);
+ * <ModusFileDropzone ref={dropzoneRef} />
+ * // Later: dropzoneRef.current?.reset();
+ *
+ * @param {ModusFileDropzoneProps} props - The component props.
+ * @param {React.Ref<ModusFileDropzoneHandle>} ref - The ref for accessing reset method.
+ * @returns {JSX.Element} The rendered file dropzone component.
+ */
+const ModusFileDropzone = forwardRef<
+  ModusFileDropzoneHandle,
+  ModusFileDropzoneProps
+>(
+  (
+    {
+      acceptFileTypes,
+      customClass,
+      disabled,
+      fileDraggedOverInstructions,
+      includeStateIcon = true,
+      instructions,
+      invalidFileTypeMessage,
+      maxFileCount,
+      maxFileNameLength,
+      maxTotalFileSizeBytes,
+      multiple,
+      successMessage,
+      onFileSelect,
+      ariaLabel,
+      children,
+    },
+    ref,
+  ) => {
+    const dropzoneRef = useRef<HTMLModusWcFileDropzoneElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      reset: async () => {
+        if (dropzoneRef.current) {
+          await dropzoneRef.current.reset();
+        }
+      },
+    }));
+
+    return (
+      <ModusWcFileDropzone
+        ref={dropzoneRef}
+        accept-file-types={acceptFileTypes}
+        custom-class={customClass}
+        disabled={disabled}
+        file-dragged-over-instructions={fileDraggedOverInstructions}
+        include-state-icon={includeStateIcon}
+        instructions={instructions}
+        invalid-file-type-message={invalidFileTypeMessage}
+        max-file-count={maxFileCount}
+        max-file-name-length={maxFileNameLength}
+        max-total-file-size-bytes={maxTotalFileSizeBytes}
+        multiple={multiple}
+        success-message={successMessage}
+        onFileSelect={onFileSelect}
+        aria-label={ariaLabel}
+      >
+        {children && <div slot="dropzone">{children}</div>}
+      </ModusWcFileDropzone>
+    );
+  },
+);
+
+ModusFileDropzone.displayName = "ModusFileDropzone";
+
+export default ModusFileDropzone;

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

@@ -0,0 +1,101 @@
+import { ModusWcHandle } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusHandle component.
+ */
+export interface ModusHandleProps {
+  /** Custom CSS class to apply to the handle element. */
+  customClass?: string;
+  /** Initial split percentage (1-100) for the left/top panel. */
+  defaultSplit?: number;
+  /** Spacing/density of the handle container. */
+  density?: "compact" | "comfortable" | "relaxed";
+  /** CSS selector or HTMLElement reference for the left/top panel to resize. */
+  leftTarget?: string;
+  /** Orientation of the handle (horizontal resizes left/right, vertical resizes top/bottom). */
+  orientation?: "horizontal" | "vertical";
+  /** CSS selector or HTMLElement reference for the right/bottom panel to resize. */
+  rightTarget?: string;
+  /** Size of the handle bar. */
+  size?: "default" | "lg" | "xl" | "2xl";
+  /** Type of handle to display - simple bar or button with drag icon. */
+  type?: "bar" | "button";
+  /** Color of the button (only applies when type="button"). */
+  buttonColor?: "primary" | "secondary" | "tertiary" | "warning" | "danger";
+  /** Size of the button (only applies when type="button"). */
+  buttonSize?: "xs" | "sm" | "md" | "lg";
+  /** Variant of the button (only applies when type="button"). */
+  buttonVariant?: "borderless" | "filled" | "outlined";
+  /** The ARIA label for the handle. */
+  ariaLabel?: string;
+}
+
+/**
+ * Renders a Modus handle component for resizing adjacent elements.
+ *
+ * @example
+ * // Basic horizontal handle
+ * <div className="flex h-[300px]">
+ *   <div id="left-panel" className="w-[200px]">Left</div>
+ *   <ModusHandle
+ *     orientation="horizontal"
+ *     leftTarget="#left-panel"
+ *     rightTarget="#right-panel"
+ *   />
+ *   <div id="right-panel" className="flex-1">Right</div>
+ * </div>
+ *
+ * @example
+ * // Button type handle
+ * <ModusHandle
+ *   type="button"
+ *   orientation="horizontal"
+ *   buttonColor="primary"
+ *   buttonVariant="outlined"
+ *   leftTarget="#panel-a"
+ *   rightTarget="#panel-b"
+ * />
+ *
+ * @example
+ * // With custom split percentage
+ * <ModusHandle
+ *   orientation="horizontal"
+ *   defaultSplit={30}
+ *   leftTarget="#left"
+ *   rightTarget="#right"
+ * />
+ *
+ * @param {ModusHandleProps} props - The component props.
+ * @returns {JSX.Element} The rendered handle component.
+ */
+export default function ModusHandle({
+  customClass,
+  defaultSplit = 50,
+  density = "comfortable",
+  leftTarget,
+  orientation = "horizontal",
+  rightTarget,
+  size = "default",
+  type = "bar",
+  buttonColor = "tertiary",
+  buttonSize = "md",
+  buttonVariant = "filled",
+  ariaLabel,
+}: ModusHandleProps) {
+  return (
+    <ModusWcHandle
+      custom-class={customClass}
+      default-split={defaultSplit}
+      density={density}
+      left-target={leftTarget}
+      orientation={orientation}
+      right-target={rightTarget}
+      size={size}
+      type={type}
+      button-color={buttonColor}
+      button-size={buttonSize}
+      button-variant={buttonVariant}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,49 @@
+
+
+import { ModusWcIcon } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusIcon component.
+ */
+interface ModusIconProps {
+  /** The name of the icon to display. */
+  name: string;
+  /** The size of the icon. */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** Whether the icon is decorative. */
+  decorative?: boolean;
+  /** A custom CSS class to apply to the icon. */
+  customClass?: string;
+  /** The ARIA label for the icon. */
+  ariaLabel?: string;
+  /** The color of the icon. */
+  color?: string;
+}
+
+/**
+ * Renders a Modus icon component.
+ * @param {ModusIconProps} props - The component props.
+ * @returns {JSX.Element} The rendered icon component.
+ */
+export default function ModusIcon({
+  name,
+  size = 'md',
+  decorative = true,
+  customClass = '',
+  ariaLabel,
+  color,
+}: ModusIconProps) {
+  // If decorative is false and no ariaLabel is provided, generate one
+  const finalAriaLabel = !decorative && !ariaLabel ? `${name} icon` : ariaLabel;
+
+  return (
+    <ModusWcIcon
+      name={name}
+      size={size}
+      decorative={decorative}
+      custom-class={customClass}
+      aria-label={finalAriaLabel}
+      style={color ? { color } : undefined}
+    />
+  );
+}