@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,185 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusProgress from "../../components/ModusProgress";
+import ModusButton from "../../components/ModusButton";
+
+/**
+ * Demo page showcasing the Modus Progress component.
+ *
+ * Demonstrates progress features including:
+ * - Basic progress bars
+ * - Different values
+ * - Radial progress
+ * - Indeterminate progress
+ * - With labels
+ */
+export default function ProgressDemoPage() {
+  const [progressValue, setProgressValue] = useState(0);
+  const [progressLabel, setProgressLabel] = useState("0%");
+  const [progressInterval, setProgressInterval] = useState<ReturnType<
+    typeof setInterval
+  > | null>(null);
+
+  const startProgress = () => {
+    if (progressInterval) {
+      clearInterval(progressInterval);
+    }
+
+    setProgressValue(0);
+    setProgressLabel("0%");
+
+    const interval = setInterval(() => {
+      setProgressValue((value) => {
+        const newValue = Math.min(value + 5, 100);
+        setProgressLabel(`${newValue}%`);
+        if (newValue >= 100 && interval) {
+          clearInterval(interval);
+          setProgressInterval(null);
+        }
+        return newValue;
+      });
+    }, 200);
+
+    setProgressInterval(interval);
+  };
+
+  const resetProgress = () => {
+    if (progressInterval) {
+      clearInterval(progressInterval);
+      setProgressInterval(null);
+    }
+    setProgressValue(0);
+    setProgressLabel("0%");
+  };
+
+  // Cleanup interval on unmount
+  useEffect(() => {
+    return () => {
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
+    };
+  }, [progressInterval]);
+
+  return (
+    <DemoPage
+      title="Modus Progress"
+      description="Progress components indicate the completion status of a task or process. Use progress bars for file uploads, form completion, or any process with measurable progress."
+    >
+      <DemoExample
+        title="Basic Progress Bar"
+        description="Simple progress bars with different values."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">0%</div>
+            <ModusProgress value={0} />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">25%</div>
+            <ModusProgress value={25} />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">50%</div>
+            <ModusProgress value={50} />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">75%</div>
+            <ModusProgress value={75} />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">100%</div>
+            <ModusProgress value={100} />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Progress with Labels"
+        description="Progress bars with custom labels."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusProgress value={45} label="45% complete" />
+          <ModusProgress value={72} label="72%" />
+          <ModusProgress value={90} label="Almost done" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Radial Progress"
+        description="Radial progress indicators for compact spaces."
+      >
+        <div className="flex flex-wrap gap-6">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">25%</div>
+            <ModusProgress variant="radial" value={25} label="25%" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">50%</div>
+            <ModusProgress variant="radial" value={50} label="50%" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">75%</div>
+            <ModusProgress variant="radial" value={75} label="75%" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">100%</div>
+            <ModusProgress variant="radial" value={100} label="100%" />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Indeterminate Progress"
+        description="Progress bars for tasks with unknown duration."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusProgress indeterminate />
+          <div className="text-sm text-muted-foreground">
+            Use indeterminate progress when the duration of a task is unknown.
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Interactive Example"
+        description="Dynamic progress bar that updates over time."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusProgress value={progressValue} label={progressLabel} />
+          <div className="flex gap-2">
+            <ModusButton
+              color="primary"
+              size="sm"
+              onButtonClick={startProgress}
+            >
+              Start Progress
+            </ModusButton>
+            <ModusButton
+              color="secondary"
+              size="sm"
+              onButtonClick={resetProgress}
+            >
+              Reset
+            </ModusButton>
+          </div>
+          <div className="p-4 rounded-lg bg-card border-default">
+            <div className="text-sm text-foreground">
+              <strong>Current Value:</strong> {progressValue}%
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,242 @@
+"use client";
+
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusRadio from "../../components/ModusRadio";
+import ModusInputLabel from "../../components/ModusInputLabel";
+
+/**
+ * Demo page showcasing the Modus Radio component.
+ *
+ * Demonstrates radio button features including:
+ * - Basic radio groups
+ * - Sizes
+ * - Disabled state
+ * - Required fields
+ * - With labels
+ */
+export default function RadioDemoPage() {
+  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+  const handleRadioChange = (value: string) => {
+    setSelectedOption(value);
+  };
+
+  return (
+    <DemoPage
+      title="Modus Radio"
+      description="Radio buttons allow users to select a single option from a group. Use radio buttons when only one option can be selected at a time."
+    >
+      <DemoExample
+        title="Basic Radio Group"
+        description="Simple radio button group with multiple options."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="option-a" labelText="Select Option" />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="option-a"
+                label="Option A"
+                name="basic-group"
+                value={true}
+              />
+              <ModusRadio
+                inputId="option-b"
+                label="Option B"
+                name="basic-group"
+                value={false}
+              />
+              <ModusRadio
+                inputId="option-c"
+                label="Option C"
+                name="basic-group"
+                value={false}
+              />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Radio Button Sizes"
+        description="Radio buttons in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="small-radio" labelText="Small" />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="small-radio"
+                label="Small Option"
+                name="small-group"
+                size="sm"
+                value={true}
+              />
+              <ModusRadio
+                inputId="small-radio-b"
+                label="Another Small Option"
+                name="small-group"
+                size="sm"
+                value={false}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="medium-radio"
+              labelText="Medium (Default)"
+            />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="medium-radio"
+                label="Medium Option"
+                name="medium-group"
+                size="md"
+                value={true}
+              />
+              <ModusRadio
+                inputId="medium-radio-b"
+                label="Another Medium Option"
+                name="medium-group"
+                size="md"
+                value={false}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="large-radio" labelText="Large" />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="large-radio"
+                label="Large Option"
+                name="large-group"
+                size="lg"
+                value={true}
+              />
+              <ModusRadio
+                inputId="large-radio-b"
+                label="Another Large Option"
+                name="large-group"
+                size="lg"
+                value={false}
+              />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Required Radio Group"
+        description="Radio buttons marked as required."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="required-a"
+              labelText="Required Selection"
+              required={true}
+            />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="required-a"
+                label="Yes"
+                name="required-group"
+                required={true}
+                value={true}
+              />
+              <ModusRadio
+                inputId="required-b"
+                label="No"
+                name="required-group"
+                required={true}
+                value={false}
+              />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled Radio Buttons"
+        description="Radio buttons in disabled state."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel forId="disabled-a" labelText="Disabled Options" />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="disabled-a"
+                label="Disabled Option 1"
+                name="disabled-group"
+                disabled={true}
+                value={true}
+              />
+              <ModusRadio
+                inputId="disabled-b"
+                label="Disabled Option 2"
+                name="disabled-group"
+                disabled={true}
+                value={false}
+              />
+              <ModusRadio
+                inputId="disabled-c"
+                label="Enabled Option"
+                name="disabled-group"
+                disabled={false}
+                value={false}
+              />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Interactive Example"
+        description="Radio buttons with two-way binding and event handling."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusInputLabel
+              forId="interactive-a"
+              labelText="Choose Your Plan"
+            />
+            <div className="flex flex-col gap-2">
+              <ModusRadio
+                inputId="interactive-a"
+                label="Free Plan"
+                name="interactive-group"
+                value={selectedOption === "free"}
+                onInputChange={() => handleRadioChange("free")}
+              />
+              <ModusRadio
+                inputId="interactive-b"
+                label="Pro Plan"
+                name="interactive-group"
+                value={selectedOption === "pro"}
+                onInputChange={() => handleRadioChange("pro")}
+              />
+              <ModusRadio
+                inputId="interactive-c"
+                label="Enterprise Plan"
+                name="interactive-group"
+                value={selectedOption === "enterprise"}
+                onInputChange={() => handleRadioChange("enterprise")}
+              />
+            </div>
+          </div>
+          {selectedOption && (
+            <div className="p-4 rounded-lg bg-card border-default">
+              <div className="text-sm text-foreground">
+                <strong>Selected Option:</strong> {selectedOption}
+              </div>
+            </div>
+          )}
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,97 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusRating from "../../components/ModusRating";
+
+export default function RatingDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Rating"
+      description="Rating components allow users to provide feedback through visual ratings. Use ratings for reviews, surveys, or any scenario requiring user opinion."
+    >
+      <DemoExample title="Star Rating" description="Star-based rating system.">
+        <div className="flex flex-col gap-6">
+          <ModusRating variant="star" value={0} count={5} />
+          <ModusRating variant="star" value={2.5} count={5} />
+          <ModusRating variant="star" value={5} count={5} />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Star Rating with Half Steps"
+        description="Star ratings that allow half-step increments."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusRating variant="star" value={2.5} count={5} allowHalf />
+          <ModusRating variant="star" value={3.5} count={5} allowHalf />
+          <ModusRating variant="star" value={4.5} count={5} allowHalf />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Smiley Rating"
+        description="Smiley face-based rating system."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusRating variant="smiley" value={1} count={5} />
+          <ModusRating variant="smiley" value={3} count={5} />
+          <ModusRating variant="smiley" value={5} count={5} />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Rating Sizes"
+        description="Ratings in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Small</div>
+            <ModusRating variant="star" value={3} count={5} size="sm" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">
+              Medium (Default)
+            </div>
+            <ModusRating variant="star" value={3} count={5} size="md" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">Large</div>
+            <ModusRating variant="star" value={3} count={5} size="lg" />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Custom Rating Count"
+        description="Ratings with custom number of items."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">3 Stars</div>
+            <ModusRating variant="star" value={2} count={3} />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm text-muted-foreground">10 Stars</div>
+            <ModusRating variant="star" value={7} count={10} />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled Rating"
+        description="Read-only rating display."
+      >
+        <div className="flex flex-col gap-6">
+          <ModusRating variant="star" value={4} count={5} disabled />
+          <div className="text-sm text-muted-foreground">
+            Disabled ratings are useful for displaying read-only ratings.
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,111 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusSelect from "../../components/ModusSelect";
+
+const countryOptions = [
+  { label: "United States", value: "us" },
+  { label: "Canada", value: "ca" },
+  { label: "Mexico", value: "mx" },
+  { label: "United Kingdom", value: "uk" },
+  { label: "Germany", value: "de" },
+  { label: "France", value: "fr" },
+  { label: "Japan", value: "jp" },
+];
+
+const languageOptions = [
+  { label: "English", value: "en" },
+  { label: "Spanish", value: "es" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Japanese", value: "ja" },
+];
+
+const sizeOptions = [
+  { label: "Option 1", value: "1" },
+  { label: "Option 2", value: "2" },
+  { label: "Option 3", value: "3" },
+];
+
+export default function SelectDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Select"
+      description="Select components provide a dropdown menu for choosing from a list of options. Use selects when you have multiple options and want to save space compared to radio buttons."
+    >
+      <DemoExample
+        title="Basic Select"
+        description="Simple select dropdown with options."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusSelect
+              inputId="country-select"
+              label="Choose a country"
+              options={countryOptions}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusSelect
+              inputId="language-select"
+              label="Select Language"
+              options={languageOptions}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Select Sizes"
+        description="Select dropdowns in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusSelect
+              inputId="small-select"
+              label="Small"
+              options={sizeOptions}
+              size="sm"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusSelect
+              inputId="medium-select"
+              label="Medium"
+              options={sizeOptions}
+              size="md"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusSelect
+              inputId="large-select"
+              label="Large"
+              options={sizeOptions}
+              size="lg"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled Select"
+        description="Select dropdowns in disabled state."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusSelect
+              inputId="disabled-select"
+              label="Disabled"
+              options={countryOptions}
+              disabled
+            />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}