@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+
+/**
+ * Props for the DemoExample component.
+ */
+interface DemoExampleProps {
+  /** The title of the demo example. */
+  title: string;
+  /** A description of the demo example. */
+  description: string | ReactNode;
+  /** The content of the demo example. */
+  children: ReactNode;
+}
+
+/**
+ * Renders a styled container for a demo example.
+ * @param {DemoExampleProps} props - The component props.
+ * @param {string} props.title - The title of the demo example.
+ * @param {string | ReactNode} props.description - A description of the demo example.
+ * @param {ReactNode} props.children - The content of the demo example.
+ * @returns {JSX.Element} The rendered demo example component.
+ */
+export default function DemoExample({
+  title,
+  description,
+  children,
+}: DemoExampleProps) {
+  return (
+    <div className="flex flex-col gap-4 rounded-lg bg-background p-6 border-default">
+      <div className="flex flex-col gap-1">
+        <div className="text-lg font-medium text-foreground">{title}</div>
+        <div className="text-sm text-foreground opacity-80">{description}</div>
+      </div>
+      <div className="flex flex-col gap-4">{children}</div>
+    </div>
+  );
+}
+
+/**
+ * Renders a clean, unstyled container for a demo example.
+ * @param {DemoExampleProps} props - The component props.
+ * @param {string} props.title - The title of the demo example.
+ * @param {string | ReactNode} props.description - A description of the demo example.
+ * @param {ReactNode} props.children - The content of the demo example.
+ * @returns {JSX.Element} The rendered clean demo example component.
+ */
+export function DemoExampleClean({
+  title,
+  description,
+  children,
+}: DemoExampleProps) {
+  return (
+    <div className="flex flex-col gap-4 rounded-lg bg-background p-6 border-dashed">
+      <div className="flex flex-col gap-1">
+        <div className="text-lg font-medium text-foreground">{title}</div>
+        <div className="text-sm text-foreground opacity-80">{description}</div>
+      </div>
+      <div className="flex flex-col gap-4">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import ModusButton from "./ModusButton";
+
+/**
+ * Props for the DemoPage component.
+ */
+interface DemoPageProps {
+  /** The title of the demo page. */
+  title: string;
+  /** A description of the demo page. */
+  description: string;
+  /** The content of the demo page. */
+  children: ReactNode;
+  /** Whether to show the back button. Defaults to true. */
+  showBackButton?: boolean;
+}
+
+/**
+ * Renders a standard layout for a demo page.
+ * @param {DemoPageProps} props - The component props.
+ * @param {string} props.title - The title of the demo page.
+ * @param {string} props.description - A description of the demo page.
+ * @param {ReactNode} props.children - The content of the demo page.
+ * @param {boolean} props.showBackButton - Whether to show the back button. Defaults to true.
+ * @returns {JSX.Element} The rendered demo page component.
+ */
+export default function DemoPage({
+  title,
+  description,
+  children,
+  showBackButton = true,
+}: DemoPageProps) {
+  const navigate = useNavigate();
+
+  /**
+   * Handles the click event for the "Component List" button, navigating to the components gallery page.
+   */
+  const handleComponentListClick = () => {
+    navigate("/dev/components");
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto p-8 bg-background">
+      {showBackButton && (
+        <div className="flex items-center gap-4 mb-6">
+          <ModusButton
+            variant="filled"
+            color="tertiary"
+            size="md"
+            onButtonClick={handleComponentListClick}
+          >
+            <i className="modus-icons">arrow_back</i> Component List
+          </ModusButton>
+        </div>
+      )}
+      <div className="text-center mb-12">
+        <div className="text-4xl font-semibold mb-4 text-foreground">
+          {title}
+        </div>
+        <div className="text-lg leading-relaxed text-foreground text-center">
+          {description}
+        </div>
+      </div>
+      <div className="flex flex-col gap-6">{children}</div>
+
+      {/* Footer */}
+      <div className="text-center pt-8 box-content">
+        <div className="flex items-center justify-center gap-3 mb-3">
+          <img src="/vite.svg" alt="Vite" className="h-6 w-6" />
+          <div className="text-foreground-40">+</div>
+          <img src="/react.svg" alt="React" className="h-6 w-6" />
+        </div>
+        <div className="text-sm font-mono text-foreground-40">
+          2026 Modus React App v1.0.0 + React 19 + Vite + Tailwind CSS -
+          Created by Julian Oczkowski
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+import {
+  ModusWcAccordion,
+  ModusWcCollapse,
+} from "@trimble-oss/moduswebcomponents-react";
+import type { ReactNode } from "react";
+
+/**
+ * Represents the options for a collapse panel.
+ */
+interface CollapseOptions {
+  /** The title of the collapse panel. */
+  title: string;
+  /** A description for the collapse panel. */
+  description?: string;
+  /** An icon to display in the collapse panel. */
+  icon?: string;
+  /** The ARIA label for the icon. */
+  iconAriaLabel?: string;
+  /** The size of the collapse panel. */
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+
+/**
+ * Represents an item in the accordion.
+ */
+interface AccordionItem {
+  /** A unique identifier for the accordion item. */
+  id: string;
+  /** The options for the collapse panel. */
+  options: CollapseOptions;
+  /** The content to display when the accordion item is expanded. */
+  content: ReactNode;
+  /** Whether the accordion item is expanded by default. */
+  expanded?: boolean;
+  /** Whether the accordion item has a border. */
+  bordered?: boolean;
+}
+
+/**
+ * Props for the ModusAccordion component.
+ */
+interface ModusAccordionProps {
+  /** The items to display in the accordion. */
+  items: AccordionItem[];
+  /** A custom CSS class to apply to the accordion. */
+  customClass?: string;
+  /** A callback function to handle the expanded change event. */
+  onExpandedChange?: (event: CustomEvent<{ expanded: boolean; index: number }>) => void;
+  /** A CSS class to apply to the container element. */
+  className?: string;
+}
+
+/**
+ * Renders a Modus accordion component with a set of items.
+ * @param {ModusAccordionProps} props - The component props.
+ * @param {AccordionItem[]} props.items - The items to display in the accordion.
+ * @param {string} [props.customClass=""] - A custom CSS class to apply to the accordion.
+ * @param {(event: CustomEvent<{ expanded: boolean; index: number }>) => void} [props.onExpandedChange] - A callback function to handle the expanded change event.
+ * @param {string} [props.className=""] - A CSS class to apply to the container element.
+ * @returns {JSX.Element} The rendered accordion component.
+ */
+export default function ModusAccordion({
+  items,
+  customClass = '',
+  onExpandedChange,
+  className = '',
+}: ModusAccordionProps) {
+  return (
+    <div className={className}>
+      <ModusWcAccordion
+        custom-class={customClass}
+        onExpandedChange={onExpandedChange}
+      >
+        {items.map((item) => (
+          <ModusWcCollapse
+            key={item.id}
+            id={`collapse-${item.id}`}
+            collapse-id={item.id}
+            bordered={item.bordered || false}
+            options={item.options}
+            expanded={item.expanded}
+          >
+            <div slot="content">{item.content}</div>
+          </ModusWcCollapse>
+        ))}
+      </ModusWcAccordion>
+    </div>
+  );
+}

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

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { ModusWcAlert } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusAlert component.
+ */
+export interface ModusAlertProps {
+  /** The title of the alert. */
+  alertTitle?: string;
+  /** A description for the alert. */
+  alertDescription?: string;
+  /** The variant of the alert, controlling its color and icon. */
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  /** Whether the alert can be dismissed. */
+  dismissible?: boolean;
+  /** An icon to display in the alert. */
+  icon?: string;
+  /** The ARIA role of the alert. */
+  role?: 'alert' | 'log' | 'marquee' | 'status' | 'timer';
+  /** A custom CSS class to apply to the alert. */
+  customClass?: string;
+  /** A callback function to handle the dismiss click event. */
+  onDismissClick?: (event: CustomEvent<void>) => void;
+  /** The content to display inside the alert. */
+  children?: ReactNode;
+}
+
+/**
+ * Renders a Modus alert component.
+ * @param {ModusAlertProps} props - The component props.
+ * @param {string} [props.alertTitle] - The title of the alert.
+ * @param {string} [props.alertDescription] - A description for the alert.
+ * @param {'info' | 'success' | 'warning' | 'error'} [props.variant='info'] - The variant of the alert.
+ * @param {boolean} [props.dismissible=false] - Whether the alert can be dismissed.
+ * @param {string} [props.icon] - An icon to display in the alert.
+ * @param {'alert' | 'log' | 'marquee' | 'status' | 'timer'} [props.role='status'] - The ARIA role of the alert.
+ * @param {string} [props.customClass] - A custom CSS class to apply to the alert.
+ * @param {(event: CustomEvent<void>) => void} [props.onDismissClick] - A callback function to handle the dismiss click event.
+ * @param {ReactNode} [props.children] - The content to display inside the alert.
+ * @returns {JSX.Element} The rendered alert component.
+ */
+export default function ModusAlert({
+  alertTitle,
+  alertDescription,
+  variant = 'info',
+  dismissible = false,
+  icon,
+  role = 'status',
+  customClass,
+  onDismissClick,
+  children,
+}: ModusAlertProps) {
+  const alertRef = useRef<HTMLModusWcAlertElement>(null);
+
+  useEffect(() => {
+    const alert = alertRef.current;
+    if (!alert || !onDismissClick) return;
+
+    const handleDismissClick = (event: Event) => {
+      const customEvent = event as CustomEvent<void>;
+      onDismissClick(customEvent);
+    };
+
+    alert.addEventListener("dismissClick", handleDismissClick);
+    return () => {
+      alert.removeEventListener("dismissClick", handleDismissClick);
+    };
+  }, [onDismissClick]);
+
+  return (
+    <ModusWcAlert
+      ref={alertRef}
+      alert-title={alertTitle}
+      alert-description={alertDescription}
+      variant={variant}
+      dismissible={dismissible}
+      icon={icon}
+      role={role}
+      custom-class={customClass}
+    >
+      {children}
+    </ModusWcAlert>
+  );
+}

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

@@ -0,0 +1,207 @@
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import { ModusWcAutocomplete } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Represents an item in the autocomplete list.
+ */
+export interface AutocompleteItem {
+  /** The label to display for the item. */
+  label: string;
+  /** The value of the item. */
+  value: string;
+  /** Whether the item is visible in the menu. */
+  visibleInMenu: boolean;
+  /** Whether the item is selected. */
+  selected?: boolean;
+}
+
+/**
+ * Represents the content to display when there are no results.
+ */
+export interface AutocompleteNoResults {
+  /** The main label to display. */
+  label: string;
+  /** A sub-label to display. */
+  subLabel: string;
+  /** The severity of the message. */
+  severity?: 'error' | 'info' | 'success' | 'warning';
+}
+
+/**
+ * Props for the ModusAutocomplete component.
+ */
+export interface ModusAutocompleteProps {
+  /** Whether the autocomplete has a border. */
+  bordered?: boolean;
+  /** Whether the autocomplete is disabled. */
+  disabled?: boolean;
+  /** Whether multiple items can be selected. */
+  multiSelect?: boolean;
+  /** The items to display in the autocomplete list. */
+  items: AutocompleteItem[];
+  /** The value of the autocomplete. */
+  value?: string;
+  /** The placeholder text for the input. */
+  placeholder?: string;
+  /** The label for the autocomplete. */
+  label?: string;
+  /** The size of the autocomplete. */
+  size?: 'sm' | 'md' | 'lg';
+  /** The debounce time in milliseconds for input changes. */
+  debounceMs?: number;
+  /** The minimum number of characters to trigger the autocomplete. */
+  minChars?: number;
+  /** Whether to leave the menu open after an item is selected. */
+  leaveMenuOpen?: boolean;
+  /** Whether to show a spinner. */
+  showSpinner?: boolean;
+  /** The content to display when there are no results. */
+  noResults?: AutocompleteNoResults;
+  /** A custom CSS class to apply to the autocomplete. */
+  customClass?: string;
+  /** Whether the autocomplete is read-only. */
+  readOnly?: boolean;
+  /** Whether the autocomplete is required. */
+  required?: boolean;
+  /** The ID of the input element. */
+  inputId?: string;
+  /** The tab index of the input element. */
+  inputTabIndex?: number;
+  /** The name of the input element. */
+  name?: string;
+  /** The ARIA label for the autocomplete. */
+  'aria-label'?: 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;
+  /** A callback function to handle item selection. */
+  onItemSelect?: (event: CustomEvent<AutocompleteItem>) => void;
+  /** A callback function to handle chip removal. */
+  onChipRemove?: (event: CustomEvent<AutocompleteItem>) => void;
+  /** The content to display inside the autocomplete. */
+  children?: ReactNode;
+}
+
+/**
+ * Renders a Modus autocomplete component.
+ * @param {ModusAutocompleteProps} props - The component props.
+ * @returns {JSX.Element} The rendered autocomplete component.
+ */
+export default function ModusAutocomplete({
+  bordered = true,
+  disabled = false,
+  multiSelect = false,
+  items,
+  value = '',
+  placeholder,
+  label,
+  size = 'md',
+  debounceMs = 300,
+  minChars = 0,
+  leaveMenuOpen = false,
+  showSpinner = false,
+  noResults,
+  customClass,
+  readOnly = false,
+  required = false,
+  inputId,
+  inputTabIndex,
+  name,
+  'aria-label': ariaLabel,
+  onInputChange,
+  onInputFocus,
+  onInputBlur,
+  onItemSelect,
+  onChipRemove,
+  children,
+}: ModusAutocompleteProps) {
+  const autocompleteRef = useRef<HTMLModusWcAutocompleteElement>(null);
+
+  useEffect(() => {
+    const autocomplete = autocompleteRef.current;
+    if (!autocomplete) return;
+
+    const handleInputChange = (event: Event) => {
+      const customEvent = event as CustomEvent<Event>;
+      onInputChange?.(customEvent);
+    };
+
+    const handleInputFocus = (event: Event) => {
+      const customEvent = event as CustomEvent<FocusEvent>;
+      onInputFocus?.(customEvent);
+    };
+
+    const handleInputBlur = (event: Event) => {
+      const customEvent = event as CustomEvent<FocusEvent>;
+      onInputBlur?.(customEvent);
+    };
+
+    const handleItemSelect = (event: Event) => {
+      const customEvent = event as CustomEvent<AutocompleteItem>;
+      onItemSelect?.(customEvent);
+    };
+
+    const handleChipRemove = (event: Event) => {
+      const customEvent = event as CustomEvent<AutocompleteItem>;
+      onChipRemove?.(customEvent);
+    };
+
+    // Add event listeners
+    if (onInputChange)
+      autocomplete.addEventListener("inputChange", handleInputChange);
+    if (onInputFocus)
+      autocomplete.addEventListener("inputFocus", handleInputFocus);
+    if (onInputBlur)
+      autocomplete.addEventListener("inputBlur", handleInputBlur);
+    if (onItemSelect)
+      autocomplete.addEventListener("itemSelect", handleItemSelect);
+    if (onChipRemove)
+      autocomplete.addEventListener("chipRemove", handleChipRemove);
+
+    return () => {
+      // Cleanup event listeners
+      if (onInputChange)
+        autocomplete.removeEventListener("inputChange", handleInputChange);
+      if (onInputFocus)
+        autocomplete.removeEventListener("inputFocus", handleInputFocus);
+      if (onInputBlur)
+        autocomplete.removeEventListener("inputBlur", handleInputBlur);
+      if (onItemSelect)
+        autocomplete.removeEventListener("itemSelect", handleItemSelect);
+      if (onChipRemove)
+        autocomplete.removeEventListener("chipRemove", handleChipRemove);
+    };
+  }, [onInputChange, onInputFocus, onInputBlur, onItemSelect, onChipRemove]);
+
+  return (
+    <ModusWcAutocomplete
+      ref={autocompleteRef}
+      bordered={bordered}
+      disabled={disabled}
+      multiSelect={multiSelect}
+      items={items}
+      value={value}
+      placeholder={placeholder}
+      label={label}
+      size={size}
+      debounceMs={debounceMs}
+      minChars={minChars}
+      leaveMenuOpen={leaveMenuOpen}
+      showSpinner={showSpinner}
+      noResults={noResults}
+      customClass={customClass}
+      readOnly={readOnly}
+      required={required}
+      inputId={inputId}
+      inputTabIndex={inputTabIndex}
+      name={name}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </ModusWcAutocomplete>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { ModusWcAvatar } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Props for the ModusAvatar component.
+ */
+export interface ModusAvatarProps {
+  /** The alternative text for the avatar image. */
+  alt: string;
+  /** The source URL of the avatar image. */
+  imgSrc?: string;
+  /** Initials displayed when no image source is provided. */
+  initials?: string;
+  /** The shape of the avatar. */
+  shape?: "circle" | "square";
+  /** The size of the avatar. */
+  size?: "xs" | "sm" | "md" | "lg";
+  /** A custom CSS class to apply to the avatar. */
+  customClass?: string;
+}
+
+/**
+ * Renders a Modus avatar component.
+ * @param {ModusAvatarProps} props - The component props.
+ * @param {string} props.alt - The alternative text for the avatar image.
+ * @param {string} [props.imgSrc=""] - The source URL of the avatar image.
+ * @param {string} [props.initials=""] - Initials displayed when no image source is provided.
+ * @param {'circle' | 'square'} [props.shape='circle'] - The shape of the avatar.
+ * @param {'xs' | 'sm' | 'md' | 'lg'} [props.size='md'] - The size of the avatar.
+ * @param {string} [props.customClass] - A custom CSS class to apply to the avatar.
+ * @returns {JSX.Element} The rendered avatar component.
+ */
+export default function ModusAvatar({
+  alt,
+  imgSrc = "",
+  initials = "",
+  shape = "circle",
+  size = "md",
+  customClass,
+}: ModusAvatarProps) {
+  return (
+    <ModusWcAvatar
+      alt={alt}
+      imgSrc={imgSrc}
+      initials={initials}
+      shape={shape}
+      size={size}
+      customClass={customClass}
+    />
+  );
+}

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

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import { ModusWcBadge } from "@trimble-oss/moduswebcomponents-react";
+
+/**
+ * Available color tokens for the Modus badge component.
+ */
+export type ModusBadgeColor =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "high-contrast"
+  | "success"
+  | "warning"
+  | "danger";
+
+/**
+ * Badge sizing tokens supported by the underlying web component.
+ */
+export type ModusBadgeSize = "sm" | "md" | "lg";
+
+/**
+ * Render variants that control badge appearance.
+ */
+export type ModusBadgeVariant = "counter" | "filled" | "outlined" | "text";
+
+/**
+ * Props for the ModusBadge component.
+ */
+export interface ModusBadgeProps {
+  /** The content to display inside the badge. */
+  children: ReactNode;
+  /** The color of the badge. */
+  color?: ModusBadgeColor;
+  /** The variant of the badge. */
+  variant?: ModusBadgeVariant;
+  /** The size of the badge. */
+  size?: ModusBadgeSize;
+  /** A custom CSS class to apply to the badge. */
+  customClass?: string;
+  /** Accessible label describing the badge when used without text. */
+  ariaLabel?: string;
+}
+
+/**
+ * Renders a Modus badge component.
+ *
+ * Consumers can use the strongly typed props and project arbitrary content inside the badge.
+ *
+ * @example
+ * ```tsx
+ * <ModusBadge color="success" variant="filled">Ready</ModusBadge>
+ * ```
+ *
+ * @param {ModusBadgeProps} props - The component props.
+ * @param {ReactNode} props.children - The content to display inside the badge.
+ * @param {ModusBadgeColor} [props.color='primary'] - The color of the badge.
+ * @param {ModusBadgeVariant} [props.variant='filled'] - The variant of the badge.
+ * @param {ModusBadgeSize} [props.size='md'] - The size of the badge.
+ * @param {string} [props.customClass] - A custom CSS class to apply to the badge.
+ * @param {string} [props.ariaLabel] - Accessible label describing the badge when used without text.
+ * @returns {JSX.Element} The rendered badge component.
+ */
+export default function ModusBadge({
+  children,
+  color = "primary",
+  variant = "filled",
+  size = "md",
+  customClass,
+  ariaLabel,
+}: ModusBadgeProps) {
+  return (
+    <ModusWcBadge
+      color={color}
+      variant={variant}
+      size={size}
+      customClass={customClass}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </ModusWcBadge>
+  );
+}