@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,52 @@
+
+
+import { ModusWcInputFeedback } 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;
+}
+
+/**
+ * Props for the ModusInputFeedback component.
+ */
+interface ModusInputFeedbackProps {
+  /** The severity level of the feedback. */
+  level: 'error' | 'info' | 'success' | 'warning';
+  /** The message to display as feedback. */
+  message?: string;
+  /** An icon to display in the feedback. */
+  icon?: string;
+  /** The size of the feedback. */
+  size?: 'sm' | 'md' | 'lg';
+  /** A custom CSS class to apply to the feedback. */
+  customClass?: string;
+}
+
+/**
+ * Renders a Modus input feedback component.
+ * @param {ModusInputFeedbackProps} props - The component props.
+ * @returns {JSX.Element} The rendered input feedback component.
+ */
+export default function ModusInputFeedback({
+  level,
+  message = '',
+  icon,
+  size = 'md',
+  customClass = '',
+}: ModusInputFeedbackProps) {
+  return (
+    <ModusWcInputFeedback
+      level={level}
+      message={message}
+      icon={icon}
+      size={size}
+      custom-class={customClass}
+    />
+  );
+}

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

@@ -0,0 +1,50 @@
+import { ModusWcInputLabel } from "@trimble-oss/moduswebcomponents-react";
+import type { ReactNode } from "react";
+
+/**
+ * Props for the ModusInputLabel component.
+ */
+interface ModusInputLabelProps {
+  /** The ID of the input element this label is for. */
+  forId?: string;
+  /** The text to display as the label. */
+  labelText: string;
+  /** The text to display as a sub-label. */
+  subLabelText?: string;
+  /** Whether the input is required. */
+  required?: boolean;
+  /** The size of the label. */
+  size?: 'sm' | 'md' | 'lg';
+  /** A custom CSS class to apply to the label. */
+  customClass?: string;
+  /** The content to display inside the label. */
+  children?: ReactNode;
+}
+
+/**
+ * Renders a Modus input label component.
+ * @param {ModusInputLabelProps} props - The component props.
+ * @returns {JSX.Element} The rendered input label component.
+ */
+export default function ModusInputLabel({
+  forId,
+  labelText,
+  subLabelText,
+  required = false,
+  size = 'md',
+  customClass = '',
+  children,
+}: ModusInputLabelProps) {
+  return (
+    <ModusWcInputLabel
+      for-id={forId}
+      label-text={labelText}
+      sub-label-text={subLabelText}
+      required={required}
+      size={size}
+      custom-class={customClass}
+    >
+      {children}
+    </ModusWcInputLabel>
+  );
+}

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

@@ -0,0 +1,42 @@
+
+
+import { ModusWcLoader } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusLoader component.
+ */
+interface ModusLoaderProps {
+  /** The variant of the loader. */
+  variant?: 'spinner' | 'ball' | 'bars' | 'dots' | 'infinity' | 'ring';
+  /** The color of the loader. */
+  color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+  /** The size of the loader. */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  /** A custom CSS class to apply to the loader. */
+  customClass?: string;
+  /** The ARIA label for the loader. */
+  ariaLabel?: string;
+}
+
+/**
+ * Renders a Modus loader component.
+ * @param {ModusLoaderProps} props - The component props.
+ * @returns {JSX.Element} The rendered loader component.
+ */
+export default function ModusLoader({
+  variant = 'spinner',
+  color = 'primary',
+  size = 'md',
+  customClass = '',
+  ariaLabel = 'Loading',
+}: ModusLoaderProps) {
+  return (
+    <ModusWcLoader
+      variant={variant}
+      color={color}
+      size={size}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -0,0 +1,102 @@
+import { ModusWcLogo } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Available logo names for the ModusLogo component.
+ */
+export type LogoName =
+  // Trimble Products (19)
+  | "trimble"
+  | "siteworks"
+  | "earthworks"
+  | "financials"
+  | "worksmanager"
+  | "connect"
+  | "unity_construct"
+  | "trade_servicelive"
+  | "buildable"
+  | "livecount"
+  | "supplier_xchange"
+  | "app_xchange"
+  | "trimble_unity"
+  | "sketchup"
+  | "pc_miler"
+  | "copilot"
+  | "trimble_pay"
+  | "projectsight"
+  | "demand_planning"
+  // Viewpoint Products (17)
+  | "viewpoint"
+  | "viewpoint_analytics"
+  | "viewpoint_epayments"
+  | "viewpoint_estimating"
+  | "viewpoint_field_management"
+  | "viewpoint_field_time"
+  | "viewpoint_financial_controls"
+  | "viewpoint_hr_management"
+  | "viewpoint_jobpac_connect"
+  | "viewpoint_procontractor"
+  | "viewpoint_spectrum"
+  | "viewpoint_team"
+  | "viewpoint_vista"
+  | "viewpoint_spectrum_service_tech"
+  | "viewpoint_for_projects"
+  | "viewpoint_vista_field_service"
+  | "viewpoint_field_view";
+
+/**
+ * Props for the ModusLogo component.
+ */
+export interface ModusLogoProps {
+  /** The name of the logo to display (required). */
+  name: LogoName;
+  /** Show emblem version (icon only) instead of full logo. */
+  emblem?: boolean;
+  /** Custom CSS class to apply to the logo container (useful for sizing). */
+  customClass?: string;
+  /** Alt text for accessibility. If not provided, defaults to the logo name. */
+  alt?: string;
+}
+
+/**
+ * Renders a Modus logo component for displaying Trimble/Viewpoint product logos.
+ *
+ * The logo automatically switches between light and dark variants based on the current theme.
+ *
+ * @example
+ * // Basic Trimble logo
+ * <ModusLogo name="trimble" />
+ *
+ * @example
+ * // Emblem (icon-only) version
+ * <ModusLogo name="trimble" emblem />
+ *
+ * @example
+ * // With custom alt text and sizing
+ * <ModusLogo
+ *   name="connect"
+ *   alt="Trimble Connect Platform"
+ *   customClass="w-32"
+ * />
+ *
+ * @example
+ * // Viewpoint product logo
+ * <ModusLogo name="viewpoint_vista" />
+ *
+ * @param {ModusLogoProps} props - The component props.
+ * @returns {JSX.Element} The rendered logo component.
+ */
+export default function ModusLogo({
+  name,
+  emblem = false,
+  customClass,
+  alt,
+}: ModusLogoProps) {
+  return (
+    <ModusWcLogo
+      name={name}
+      emblem={emblem}
+      custom-class={customClass}
+      alt={alt}
+    />
+  );
+}

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

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { ModusWcMenu } from "@trimble-oss/moduswebcomponents-react";
+import ModusMenuItem from "./ModusMenuItem";
+
+/**
+ * Represents a single item in a menu.
+ */
+export interface MenuItem {
+  /** The text to display for the menu item. */
+  label: string;
+  /** The value of the menu item. */
+  value: string;
+  /** The text to display as a sub-label. */
+  subLabel?: string;
+  /** An icon to display at the start of the menu item. */
+  startIcon?: string;
+  /** Whether the menu item is selected. */
+  selected?: boolean;
+  /** Whether the menu item is disabled. */
+  disabled?: boolean;
+  /** Whether the menu item has a border. */
+  bordered?: boolean;
+}
+
+/**
+ * Props for the ModusMenu component.
+ */
+interface ModusMenuProps {
+  /** The items to display in the menu. */
+  items: MenuItem[];
+  /** The orientation of the menu. */
+  orientation?: 'vertical' | 'horizontal';
+  /** The size of the menu. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Whether the menu has a border. */
+  bordered?: boolean;
+  /** A custom CSS class to apply to the menu. */
+  customClass?: string;
+  /** The ARIA label for the menu. */
+  ariaLabel?: string;
+  /** A callback function to handle item selection. */
+  onItemSelect?: (item: MenuItem) => void;
+}
+
+/**
+ * Renders a Modus menu component.
+ * @param {ModusMenuProps} props - The component props.
+ * @returns {JSX.Element} The rendered menu component.
+ */
+export default function ModusMenu({
+  items,
+  orientation = 'vertical',
+  size = 'md',
+  bordered = false,
+  customClass = '',
+  ariaLabel = 'Menu',
+  onItemSelect,
+}: ModusMenuProps) {
+  const menuRef = useRef<HTMLModusWcMenuElement>(null);
+  const [selectedValue, setSelectedValue] = useState<string | null>(null);
+
+  // Handle item selection
+  const handleItemSelect = useCallback(
+    (event: CustomEvent<{ value: string }>) => {
+      const selectedItem = items.find(
+        (item) => item.value === event.detail.value
+      );
+      if (selectedItem) {
+        setSelectedValue(selectedItem.value);
+        onItemSelect?.(selectedItem);
+      }
+    },
+    [items, onItemSelect]
+  );
+
+  useEffect(() => {
+    const menu = menuRef.current;
+    if (!menu) return;
+
+    menu.addEventListener("itemSelect", handleItemSelect as EventListener);
+
+    return () => {
+      menu.removeEventListener("itemSelect", handleItemSelect as EventListener);
+    };
+  }, [items, onItemSelect, handleItemSelect]);
+
+  // Initialize selected value from items
+  useEffect(() => {
+    const selectedItem = items.find((item) => item.selected);
+    if (selectedItem) {
+      setSelectedValue(selectedItem.value);
+    }
+  }, [items]);
+
+  return (
+    <ModusWcMenu
+      ref={menuRef}
+      orientation={orientation}
+      size={size}
+      bordered={bordered}
+      custom-class={customClass}
+      aria-label={ariaLabel}
+    >
+      {items.map((item, index) => (
+        <ModusMenuItem
+          key={`${item.value}-${index}`}
+          label={item.label}
+          value={item.value}
+          subLabel={item.subLabel}
+          startIcon={item.startIcon}
+          selected={selectedValue === item.value || item.selected}
+          disabled={item.disabled}
+          bordered={item.bordered}
+          onItemSelect={handleItemSelect}
+        />
+      ))}
+    </ModusWcMenu>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from "react";
+import { ModusWcMenuItem } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusMenuItem component.
+ */
+export interface ModusMenuItemProps {
+  /** The text to display for the menu item. */
+  label: string;
+  /** The value of the menu item. */
+  value: string;
+  /** The text to display as a sub-label. */
+  subLabel?: string;
+  /** An icon to display at the start of the menu item. */
+  startIcon?: string;
+  /** Whether the menu item is selected. */
+  selected?: boolean;
+  /** Whether the menu item is disabled. */
+  disabled?: boolean;
+  /** Whether the menu item has a border. */
+  bordered?: boolean;
+  /** Whether the menu item is focused. */
+  focused?: boolean;
+  /** The size of the menu item. */
+  size?: 'sm' | 'md' | 'lg';
+  /** A custom CSS class to apply to the menu item. */
+  customClass?: string;
+  /** A callback function to handle item selection. */
+  onItemSelect?: (event: CustomEvent<{ value: string }>) => void;
+}
+
+/**
+ * Renders a Modus menu item component.
+ * @param {ModusMenuItemProps} props - The component props.
+ * @returns {JSX.Element} The rendered menu item component.
+ */
+export default function ModusMenuItem({
+  label,
+  value,
+  subLabel,
+  startIcon,
+  selected = false,
+  disabled = false,
+  bordered = false,
+  focused = false,
+  size = 'md',
+  customClass,
+  onItemSelect,
+}: ModusMenuItemProps) {
+  const menuItemRef = useRef<HTMLModusWcMenuItemElement>(null);
+
+  useEffect(() => {
+    const menuItem = menuItemRef.current;
+    if (!menuItem) return;
+
+    const handleItemSelect = (event: Event) => {
+      onItemSelect?.(event as CustomEvent<{ value: string }>);
+    };
+
+    if (onItemSelect) {
+      menuItem.addEventListener("itemSelect", handleItemSelect);
+    }
+
+    return () => {
+      if (onItemSelect) {
+        menuItem.removeEventListener("itemSelect", handleItemSelect);
+      }
+    };
+  }, [onItemSelect]);
+
+  return (
+    <ModusWcMenuItem
+      ref={menuItemRef}
+      label={label}
+      value={value}
+      sub-label={subLabel}
+      start-icon={startIcon}
+      selected={selected}
+      disabled={disabled}
+      bordered={bordered}
+      focused={focused}
+      size={size}
+      custom-class={customClass}
+    />
+  );
+}

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

@@ -0,0 +1,145 @@
+import { ModusWcModal } from "@trimble-oss/moduswebcomponents-react";
+import type { ReactNode } from "react";
+import { useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+
+/**
+ * Props for the ModusModal component.
+ */
+interface ModusModalProps {
+  /** A unique identifier for the modal. */
+  modalId: string;
+  /** The ARIA label for the modal. */
+  ariaLabel?: string;
+
+  /** The type of backdrop for the modal. */
+  backdrop?: 'default' | 'static';
+  /** The position of the modal. */
+  position?: 'top' | 'center' | 'bottom';
+  /** Whether the modal should be fullscreen. */
+  fullscreen?: boolean;
+  /** Whether to show the fullscreen toggle button. */
+  showFullscreenToggle?: boolean;
+  /** Whether to show the close button. */
+  showClose?: boolean;
+  /** A custom CSS class to apply to the modal. */
+  customClass?: string;
+
+  /** The header content of the modal. */
+  header?: ReactNode;
+  /** The main content of the modal. */
+  children: ReactNode;
+  /** The footer content of the modal. */
+  footer?: ReactNode;
+
+  /** A callback function to handle the close event. */
+  onClose?: () => void;
+
+  /** A CSS class to apply to the modal. */
+  className?: string;
+}
+
+/**
+ * A ref object for the ModusModal component.
+ */
+export interface ModusModalRef {
+  /** Opens the modal. */
+  openModal: () => void;
+  /** Closes the modal. */
+  closeModal: () => void;
+}
+
+/**
+ * Renders a Modus modal component.
+ * @param {ModusModalProps} props - The component props.
+ * @param {React.Ref<ModusModalRef>} ref - The ref object for the modal.
+ * @returns {JSX.Element} The rendered modal component.
+ */
+const ModusModal = forwardRef<ModusModalRef, ModusModalProps>(
+  (
+    {
+      modalId,
+      ariaLabel,
+      backdrop = 'default',
+      position = 'center',
+      fullscreen = false,
+      showFullscreenToggle = false,
+      showClose = true,
+      customClass,
+      header,
+      children,
+      footer,
+      onClose,
+      className,
+    },
+    ref
+  ) => {
+    const modalRef = useRef<HTMLModusWcModalElement>(null);
+
+    const openModal = () => {
+      if (modalRef.current) {
+        const dialog = modalRef.current.querySelector(
+          "dialog"
+        ) as HTMLDialogElement;
+        if (dialog) {
+          dialog.showModal();
+        }
+      }
+    };
+
+    const closeModal = () => {
+      if (modalRef.current) {
+        const dialog = modalRef.current.querySelector(
+          "dialog"
+        ) as HTMLDialogElement;
+        if (dialog) {
+          dialog.close();
+        }
+      }
+    };
+
+    useImperativeHandle(ref, () => ({
+      openModal,
+      closeModal,
+    }));
+
+    // Handle modal events
+    useEffect(() => {
+      const modal = modalRef.current;
+      if (modal) {
+        const handleClose = () => {
+          onClose?.();
+        };
+
+        const dialogElement = modal.querySelector("dialog");
+        if (dialogElement) {
+          dialogElement.addEventListener("close", handleClose);
+          return () => {
+            dialogElement.removeEventListener("close", handleClose);
+          };
+        }
+      }
+    }, [onClose]);
+
+    return (
+      <ModusWcModal
+        ref={modalRef}
+        modal-id={modalId}
+        aria-label={ariaLabel}
+        backdrop={backdrop}
+        position={position}
+        fullscreen={fullscreen}
+        show-fullscreen-toggle={showFullscreenToggle}
+        show-close={showClose}
+        custom-class={customClass || className}
+      >
+        {header && <div slot="header">{header}</div>}
+        <div slot="content">{children}</div>
+        {footer && <div slot="footer">{footer}</div>}
+      </ModusWcModal>
+    );
+  }
+);
+
+ModusModal.displayName = "ModusModal";
+
+export default ModusModal;