@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,107 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusSkeleton from "../../components/ModusSkeleton";
+
+/**
+ * Demo page showcasing the Modus Skeleton component.
+ *
+ * Demonstrates skeleton loading features including:
+ * - Basic skeleton
+ * - Different shapes
+ * - Custom sizes
+ * - Real-world examples
+ */
+export default function SkeletonDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Skeleton"
+      description="Skeleton components provide loading placeholders that mimic the shape of content being loaded. Use skeletons to improve perceived performance and provide visual feedback during data loading."
+    >
+      <DemoExample
+        title="Basic Skeleton"
+        description="Simple skeleton with default rectangle shape."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusSkeleton />
+          <ModusSkeleton />
+          <ModusSkeleton />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Skeleton Shapes"
+        description="Skeletons in different shapes."
+      >
+        <div className="flex flex-wrap gap-6 items-center">
+          <div className="flex flex-col gap-2 items-center">
+            <ModusSkeleton shape="rectangle" width="200px" height="20px" />
+            <div className="text-sm text-muted-foreground">Rectangle</div>
+          </div>
+
+          <div className="flex flex-col gap-2 items-center">
+            <ModusSkeleton shape="circle" width="64px" height="64px" />
+            <div className="text-sm text-muted-foreground">Circle</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Custom Sizes"
+        description="Skeletons with custom width and height."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Small</div>
+            <ModusSkeleton width="100px" height="12px" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Medium</div>
+            <ModusSkeleton width="200px" height="16px" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Large</div>
+            <ModusSkeleton width="300px" height="24px" />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Real-World Example"
+        description="Skeleton loading states for common UI patterns."
+      >
+        <div className="flex flex-col gap-6">
+          {/* Card skeleton */}
+          <div className="p-6 rounded-lg bg-card border-default">
+            <div className="flex gap-4">
+              <ModusSkeleton shape="circle" width="64px" height="64px" />
+              <div className="flex flex-col gap-2 flex-1">
+                <ModusSkeleton width="60%" height="20px" />
+                <ModusSkeleton width="40%" height="16px" />
+              </div>
+            </div>
+          </div>
+
+          {/* List skeleton */}
+          <div className="flex flex-col gap-3">
+            <ModusSkeleton width="100%" height="16px" />
+            <ModusSkeleton width="90%" height="16px" />
+            <ModusSkeleton width="95%" height="16px" />
+            <ModusSkeleton width="85%" height="16px" />
+          </div>
+
+          {/* Form skeleton */}
+          <div className="flex flex-col gap-4">
+            <ModusSkeleton width="120px" height="14px" />
+            <ModusSkeleton width="100%" height="40px" />
+            <ModusSkeleton width="100px" height="14px" />
+            <ModusSkeleton width="100%" height="40px" />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusSlider from "../../components/ModusSlider";
+
+/**
+ * Demo page showcasing the Modus Slider component.
+ *
+ * Demonstrates slider features including:
+ * - Basic slider
+ * - Sizes
+ */
+export default function SliderDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Slider"
+      description="Slider components allow users to select a numeric value by dragging a handle along a track. Use sliders for volume, brightness, or any continuous numeric input."
+    >
+      <DemoExample
+        title="Basic Slider"
+        description="Simple slider with default range."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusSlider
+              inputId="volume-slider"
+              label="Volume"
+              min={0}
+              max={100}
+              value={50}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Slider Sizes"
+        description="Sliders in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusSlider
+              inputId="small-slider"
+              label="Small"
+              min={0}
+              max={100}
+              value={50}
+              size="sm"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusSlider
+              inputId="medium-slider"
+              label="Medium"
+              min={0}
+              max={100}
+              value={50}
+              size="md"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusSlider
+              inputId="large-slider"
+              label="Large"
+              min={0}
+              max={100}
+              value={50}
+              size="lg"
+            />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,86 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusStepper, {
+  type ModusStepperItem,
+} from "../../components/ModusStepper";
+
+/**
+ * Demo page showcasing the Modus Stepper component.
+ *
+ * Demonstrates stepper features including:
+ * - Horizontal stepper
+ * - Vertical stepper
+ * - Step colors
+ * - Custom content
+ */
+export default function StepperDemoPage() {
+  const horizontalSteps: ModusStepperItem[] = [
+    { label: "Step 1", color: "primary" },
+    { label: "Step 2", color: "info" },
+    { label: "Step 3" },
+  ];
+
+  const verticalSteps: ModusStepperItem[] = [
+    { label: "Setup", color: "success" },
+    { label: "Configure", color: "warning" },
+    { label: "Deploy", color: "error" },
+  ];
+
+  const coloredSteps: ModusStepperItem[] = [
+    { label: "Primary", color: "primary" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" },
+    { label: "Error", color: "error" },
+  ];
+
+  const customContentSteps: ModusStepperItem[] = [
+    { label: "Step 1", content: "1" },
+    { label: "Step 2", content: "✓" },
+    { label: "Step 3", content: "3" },
+  ];
+
+  return (
+    <DemoPage
+      title="Modus Stepper"
+      description="Stepper components display a list of steps in a process or workflow. Use steppers to guide users through multi-step forms, wizards, or sequential processes."
+    >
+      <DemoExample
+        title="Horizontal Stepper"
+        description="Stepper displayed horizontally."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusStepper steps={horizontalSteps} orientation="horizontal" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Vertical Stepper"
+        description="Stepper displayed vertically."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusStepper steps={verticalSteps} orientation="vertical" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Stepper with Colors"
+        description="Steps with different color themes."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusStepper steps={coloredSteps} orientation="horizontal" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Stepper with Custom Content"
+        description="Steps with custom content in indicators."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusStepper steps={customContentSteps} orientation="horizontal" />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,146 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusSwitch from "../../components/ModusSwitch";
+import ModusInputLabel from "../../components/ModusInputLabel";
+
+/**
+ * Demo page showcasing the Modus Switch component.
+ *
+ * Demonstrates switch features including:
+ * - Basic switch
+ * - Sizes
+ * - Required fields
+ * - Disabled state
+ */
+export default function SwitchDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Switch"
+      description="Switch components allow users to toggle between on and off states. Use switches for binary settings like enabling/disabling features or turning notifications on/off."
+    >
+      <DemoExample
+        title="Basic Switch"
+        description="Simple switch toggle controls."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="notifications-switch"
+              labelText="Notifications"
+            />
+            <ModusSwitch
+              inputId="notifications-switch"
+              label="Enable notifications"
+              value={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="dark-mode-switch" labelText="Dark Mode" />
+            <ModusSwitch
+              inputId="dark-mode-switch"
+              label="Dark mode"
+              value={false}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Switch Sizes"
+        description="Switches in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="small-switch" labelText="Small" />
+            <ModusSwitch
+              inputId="small-switch"
+              label="Small switch"
+              size="sm"
+              value={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="medium-switch"
+              labelText="Medium (Default)"
+            />
+            <ModusSwitch
+              inputId="medium-switch"
+              label="Medium switch"
+              size="md"
+              value={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="large-switch" labelText="Large" />
+            <ModusSwitch
+              inputId="large-switch"
+              label="Large switch"
+              size="lg"
+              value={true}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Required Switch"
+        description="Switches marked as required fields."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="required-switch"
+              labelText="Terms Agreement"
+              required={true}
+            />
+            <ModusSwitch
+              inputId="required-switch"
+              label="I agree to the terms and conditions"
+              required={true}
+              value={false}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled Switch"
+        description="Switches in disabled state."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="disabled-on-switch"
+              labelText="Disabled (On)"
+            />
+            <ModusSwitch
+              inputId="disabled-on-switch"
+              label="Disabled switch (on)"
+              disabled={true}
+              value={true}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="disabled-off-switch"
+              labelText="Disabled (Off)"
+            />
+            <ModusSwitch
+              inputId="disabled-off-switch"
+              label="Disabled switch (off)"
+              disabled={true}
+              value={false}
+            />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}