@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/demos/text-input-demo/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusTextInput from "../../components/ModusTextInput";
+
+export default function TextInputDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Text Input"
+      description="Text input components provide a way for users to enter text data. Use text inputs for names, emails, passwords, and any other text-based form data."
+    >
+      <DemoExample
+        title="Input Types"
+        description="Text inputs with different input types."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="text-type-input"
+              label="Text"
+              type="text"
+              placeholder="Enter text"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="email-type-input"
+              label="Email"
+              type="email"
+              placeholder="user@example.com"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="password-type-input"
+              label="Password"
+              type="password"
+              placeholder="Enter password"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="url-type-input"
+              label="URL"
+              type="url"
+              placeholder="https://example.com"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="tel-type-input"
+              label="Phone"
+              type="tel"
+              placeholder="+1 (555) 123-4567"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Text Input Sizes"
+        description="Text inputs in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="small-text-input"
+              label="Small"
+              placeholder="Enter text"
+              size="sm"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="medium-text-input"
+              label="Medium"
+              placeholder="Enter text"
+              size="md"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="large-text-input"
+              label="Large"
+              placeholder="Enter text"
+              size="lg"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Text Input with Icons"
+        description="Text inputs with clear button or search icon."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="clear-input"
+              label="With Clear"
+              placeholder="Type to search..."
+              includeClear={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="search-input"
+              label="Search"
+              placeholder="Search..."
+              includeSearch={true}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Required and Disabled States"
+        description="Text inputs in required and disabled states."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="required-input"
+              label="Required"
+              placeholder="This field is required"
+              required={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTextInput
+              inputId="disabled-input"
+              label="Disabled"
+              placeholder="Cannot edit"
+              disabled={true}
+              value="Disabled value"
+            />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/textarea-demo/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusTextarea from "../../components/ModusTextarea";
+
+export default function TextareaDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Textarea"
+      description="Textareas support longer responses or feedback. Offer guidance on what to include and set an appropriate height."
+    >
+      <DemoExample
+        title="Customer feedback"
+        description="Use the default size for two to three sentence responses."
+      >
+        <ModusTextarea
+          label="Share feedback"
+          placeholder="Tell us what worked well and what can improve."
+          rows={4}
+        />
+      </DemoExample>
+      <DemoExample
+        title="Detailed notes"
+        description="Increase the height when expecting longer entries."
+      >
+        <ModusTextarea
+          label="Site visit notes"
+          rows={6}
+          feedback={{
+            level: "info",
+            message: "Include location details and follow-up actions.",
+          }}
+        />
+      </DemoExample>
+      <DemoExample
+        title="Feedback States"
+        description="Display validation feedback with info, success, and error states."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusTextarea
+            label="Info feedback"
+            placeholder="Enter details..."
+            rows={3}
+            feedback={{
+              level: "info",
+              message: "This is helpful information about the field.",
+            }}
+          />
+          <ModusTextarea
+            label="Success feedback"
+            placeholder="Enter details..."
+            rows={3}
+            value="Valid input provided."
+            feedback={{
+              level: "success",
+              message: "Great! Your input looks good.",
+            }}
+          />
+          <ModusTextarea
+            label="Error feedback"
+            placeholder="Enter details..."
+            rows={3}
+            feedback={{
+              level: "error",
+              message: "This field is required. Please enter a value.",
+            }}
+          />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/theme-switcher-demo/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusThemeSwitcher from "../../components/ModusThemeSwitcher";
+
+export default function ThemeSwitcherDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Theme Switcher"
+      description="The theme switcher toggles between Modus light and dark modes. Place it in the header or settings where users expect personalization controls."
+    >
+      <DemoExample
+        title="Theme toggle"
+        description="Use the default configuration to respect system preferences and allow quick switching."
+      >
+        <div className="flex items-center gap-4">
+          <ModusThemeSwitcher ariaLabel="Switch theme" />
+          <div className="text-sm text-foreground opacity-80">
+            Toggle between light and dark experiences.
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/time-input-demo/page.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusTimeInput from "../../components/ModusTimeInput";
+
+export default function TimeInputDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Time Input"
+      description="Time input components allow users to enter or select a time value. Use time inputs for scheduling, appointments, or any scenario requiring time selection."
+    >
+      <DemoExample
+        title="Basic Time Input"
+        description="Simple time input with label."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="start-time-input"
+              label="Start time"
+              value="09:00"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="end-time-input"
+              label="End time"
+              value="17:00"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Time Input Sizes"
+        description="Time inputs in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="small-time-input"
+              label="Small"
+              value="09:00"
+              size="sm"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="medium-time-input"
+              label="Medium"
+              value="09:00"
+              size="md"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="large-time-input"
+              label="Large"
+              value="09:00"
+              size="lg"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Time Input with Seconds"
+        description="Time inputs displaying seconds."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="seconds-time-input"
+              label="Time with Seconds"
+              value="09:30:45"
+              showSeconds={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="seconds-default-time-input"
+              label="Default Format"
+              value="09:30"
+              showSeconds={false}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Time Input with Constraints"
+        description="Time inputs with min and max values."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="min-max-time-input"
+              label="Business Hours"
+              value="09:00"
+              min="09:00"
+              max="17:00"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="afternoon-time-input"
+              label="Afternoon Hours"
+              value="14:00"
+              min="12:00"
+              max="18:00"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Required and Disabled States"
+        description="Time inputs in required and disabled states."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="required-time-input"
+              label="Required"
+              value="09:00"
+              required={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusTimeInput
+              inputId="disabled-time-input"
+              label="Disabled"
+              value="09:00"
+              disabled={true}
+            />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

package/templates/react/src/demos/toast-demo/page.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusToast from "../../components/ModusToast";
+import { ModusWcButton } from "@trimble-oss/moduswebcomponents-react";
+import type {
+  ModusToastItem,
+  ToastPosition,
+  ToastVariant,
+} from "../../components/ModusToast";
+
+export default function ToastDemoPage() {
+  const [toasts, setToasts] = useState<ModusToastItem[]>([]);
+
+  const addToast = (
+    variant: ToastVariant,
+    position: ToastPosition = "top-end",
+    title: string,
+    description: string,
+  ) => {
+    const id = `toast-${variant}-${Date.now()}`;
+    const newToast: ModusToastItem = {
+      id,
+      title,
+      description,
+      variant,
+      dismissible: true,
+      position,
+      delay: variant === "warning" ? null : 4000,
+    };
+    setToasts((prev) => [...prev, newToast]);
+  };
+
+  const removeToast = (toastId: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== toastId));
+  };
+
+  const clearAllToasts = () => {
+    setToasts([]);
+  };
+
+  return (
+    <DemoPage
+      title="Modus Toast"
+      description="Toasts deliver lightweight confirmations or alerts without disrupting workflow. Keep the message brief and allow dismissal."
+    >
+      <DemoExample
+        title="Interactive toast triggers"
+        description="Click the buttons below to trigger different toasts in various positions and variants."
+      >
+        <div className="space-y-6">
+          {/* Toast Variants */}
+          <div>
+            <div className="text-lg font-semibold text-foreground mb-4">
+              Toast Variants
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusWcButton
+                color="primary"
+                variant="filled"
+                onButtonClick={() =>
+                  addToast(
+                    "success",
+                    "top-end",
+                    "Success!",
+                    "Your action completed successfully.",
+                  )
+                }
+              >
+                Success Toast
+              </ModusWcButton>
+              <ModusWcButton
+                color="warning"
+                variant="filled"
+                onButtonClick={() =>
+                  addToast(
+                    "warning",
+                    "top-end",
+                    "Warning!",
+                    "Please review your input.",
+                  )
+                }
+              >
+                Warning Toast
+              </ModusWcButton>
+              <ModusWcButton
+                color="danger"
+                variant="filled"
+                onButtonClick={() =>
+                  addToast(
+                    "error",
+                    "top-end",
+                    "Error!",
+                    "Something went wrong.",
+                  )
+                }
+              >
+                Error Toast
+              </ModusWcButton>
+              <ModusWcButton
+                color="secondary"
+                variant="filled"
+                onButtonClick={() =>
+                  addToast(
+                    "info",
+                    "top-end",
+                    "Info",
+                    "Here's some helpful information.",
+                  )
+                }
+              >
+                Info Toast
+              </ModusWcButton>
+            </div>
+          </div>
+
+          {/* Toast Positions */}
+          <div>
+            <div className="text-lg font-semibold text-foreground mb-4">
+              Toast Positions
+            </div>
+            <div className="space-y-4">
+              {/* Top Positions */}
+              <div className="bg-card border border-border rounded-lg p-4">
+                <div className="text-sm font-medium text-muted-foreground mb-3">
+                  Top
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "info",
+                        "top-start",
+                        "Top Start",
+                        "Toast in top-left corner",
+                      )
+                    }
+                  >
+                    Top Start
+                  </ModusWcButton>
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "info",
+                        "top-center",
+                        "Top Center",
+                        "Toast in top-center",
+                      )
+                    }
+                  >
+                    Top Center
+                  </ModusWcButton>
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "info",
+                        "top-end",
+                        "Top End",
+                        "Toast in top-right corner",
+                      )
+                    }
+                  >
+                    Top End
+                  </ModusWcButton>
+                </div>
+              </div>
+
+              {/* Middle Positions */}
+              <div className="bg-card border border-border rounded-lg p-4">
+                <div className="text-sm font-medium text-muted-foreground mb-3">
+                  Middle
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "success",
+                        "middle-start",
+                        "Middle Start",
+                        "Toast in middle-left",
+                      )
+                    }
+                  >
+                    Middle Start
+                  </ModusWcButton>
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "success",
+                        "middle-center",
+                        "Middle Center",
+                        "Toast in center",
+                      )
+                    }
+                  >
+                    Middle Center
+                  </ModusWcButton>
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "success",
+                        "middle-end",
+                        "Middle End",
+                        "Toast in middle-right",
+                      )
+                    }
+                  >
+                    Middle End
+                  </ModusWcButton>
+                </div>
+              </div>
+
+              {/* Bottom Positions */}
+              <div className="bg-card border border-border rounded-lg p-4">
+                <div className="text-sm font-medium text-muted-foreground mb-3">
+                  Bottom
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "warning",
+                        "bottom-start",
+                        "Bottom Start",
+                        "Toast in bottom-left",
+                      )
+                    }
+                  >
+                    Bottom Start
+                  </ModusWcButton>
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "warning",
+                        "bottom-center",
+                        "Bottom Center",
+                        "Toast in bottom-center",
+                      )
+                    }
+                  >
+                    Bottom Center
+                  </ModusWcButton>
+                  <ModusWcButton
+                    color="secondary"
+                    variant="outlined"
+                    onButtonClick={() =>
+                      addToast(
+                        "warning",
+                        "bottom-end",
+                        "Bottom End",
+                        "Toast in bottom-right",
+                      )
+                    }
+                  >
+                    Bottom End
+                  </ModusWcButton>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Special Features */}
+          <div>
+            <div className="text-lg font-semibold text-foreground mb-4">
+              Special Features
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusWcButton
+                color="danger"
+                variant="outlined"
+                onButtonClick={clearAllToasts}
+              >
+                Clear All Toasts
+              </ModusWcButton>
+            </div>
+          </div>
+
+          {/* Toast Display */}
+          <ModusToast toasts={toasts} onDismiss={removeToast} />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}