@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,332 @@
+"use client";
+
+import { useRef } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusButton from "../../components/ModusButton";
+import ModusModal, { type ModusModalRef } from "../../components/ModusModal";
+
+export default function ModalDemoPage() {
+  // Modal refs for controlling modals
+  const centeredModalRef = useRef<ModusModalRef>(null);
+  const topModalRef = useRef<ModusModalRef>(null);
+  const bottomModalRef = useRef<ModusModalRef>(null);
+  const fullscreenModalRef = useRef<ModusModalRef>(null);
+  const staticModalRef = useRef<ModusModalRef>(null);
+  const customModalRef = useRef<ModusModalRef>(null);
+
+  return (
+    <DemoPage
+      title="Modus Modal"
+      description="Modals focus attention on a short, interruptive task. Keep content concise and provide a clear primary action."
+    >
+      <DemoExample
+        title="Centered Dialog"
+        description="Default centered modal for quick confirmations or lightweight forms."
+      >
+        <div className="space-y-4">
+          <ModusButton
+            onButtonClick={() => {
+              centeredModalRef.current?.openModal();
+            }}
+          >
+            Open Centered Modal
+          </ModusButton>
+          <ModusModal
+            ref={centeredModalRef}
+            modalId="modal-centered"
+            ariaLabel="Archive project"
+            onClose={() => {}}
+            header={
+              <div className="text-xl font-semibold text-foreground">
+                Archive project
+              </div>
+            }
+            footer={
+              <div className="flex gap-2">
+                <ModusButton
+                  variant="borderless"
+                  onButtonClick={() => {
+                    centeredModalRef.current?.closeModal();
+                  }}
+                >
+                  Cancel
+                </ModusButton>
+                <ModusButton
+                  color="danger"
+                  onButtonClick={() => {
+                    centeredModalRef.current?.closeModal();
+                  }}
+                >
+                  Archive
+                </ModusButton>
+              </div>
+            }
+          >
+            <div className="text-sm text-foreground opacity-80">
+              Archived projects are hidden from your active workspace. You can
+              restore them later from the settings panel.
+            </div>
+          </ModusModal>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Position Variants"
+        description="Different vertical positions for various use cases."
+      >
+        <div className="flex gap-4 flex-wrap">
+          <ModusButton
+            onButtonClick={() => {
+              topModalRef.current?.openModal();
+            }}
+          >
+            Top Position
+          </ModusButton>
+          <ModusButton
+            onButtonClick={() => {
+              bottomModalRef.current?.openModal();
+            }}
+          >
+            Bottom Position
+          </ModusButton>
+        </div>
+
+        <ModusModal
+          ref={topModalRef}
+          modalId="modal-top"
+          ariaLabel="Top positioned modal"
+          onClose={() => {}}
+          position="top"
+          header={
+            <div className="text-xl font-semibold text-foreground">
+              Top Modal
+            </div>
+          }
+          footer={
+            <div className="flex gap-2">
+              <ModusButton
+                variant="borderless"
+                onButtonClick={() => {
+                  topModalRef.current?.closeModal();
+                }}
+              >
+                Cancel
+              </ModusButton>
+              <ModusButton
+                onButtonClick={() => {
+                  topModalRef.current?.closeModal();
+                }}
+              >
+                Confirm
+              </ModusButton>
+            </div>
+          }
+        >
+          <div className="text-sm text-foreground opacity-80">
+            This modal appears at the top of the screen. Useful for
+            notifications or quick actions.
+          </div>
+        </ModusModal>
+
+        <ModusModal
+          ref={bottomModalRef}
+          modalId="modal-bottom"
+          ariaLabel="Bottom positioned modal"
+          onClose={() => {}}
+          position="bottom"
+          header={
+            <div className="text-xl font-semibold text-foreground">
+              Bottom Modal
+            </div>
+          }
+          footer={
+            <div className="flex gap-2">
+              <ModusButton
+                variant="borderless"
+                onButtonClick={() => {
+                  bottomModalRef.current?.closeModal();
+                }}
+              >
+                Cancel
+              </ModusButton>
+              <ModusButton
+                onButtonClick={() => {
+                  bottomModalRef.current?.closeModal();
+                }}
+              >
+                Confirm
+              </ModusButton>
+            </div>
+          }
+        >
+          <div className="text-sm text-foreground opacity-80">
+            This modal appears at the bottom of the screen. Great for mobile
+            interfaces.
+          </div>
+        </ModusModal>
+      </DemoExample>
+
+      <DemoExample
+        title="Fullscreen Modal"
+        description="Full-screen modals for complex workflows or detailed content."
+      >
+        <div className="space-y-4">
+          <ModusButton
+            onButtonClick={() => {
+              fullscreenModalRef.current?.openModal();
+            }}
+          >
+            Open Fullscreen Modal
+          </ModusButton>
+          <ModusModal
+            ref={fullscreenModalRef}
+            modalId="modal-fullscreen"
+            ariaLabel="Fullscreen modal"
+            onClose={() => {}}
+            fullscreen={true}
+            showFullscreenToggle={true}
+            header={
+              <div className="text-xl font-semibold text-foreground">
+                Fullscreen Modal
+              </div>
+            }
+            footer={
+              <div className="flex gap-2">
+                <ModusButton
+                  variant="borderless"
+                  onButtonClick={() => {
+                    fullscreenModalRef.current?.closeModal();
+                  }}
+                >
+                  Cancel
+                </ModusButton>
+                <ModusButton
+                  onButtonClick={() => {
+                    fullscreenModalRef.current?.closeModal();
+                  }}
+                >
+                  Save Changes
+                </ModusButton>
+              </div>
+            }
+          >
+            <div className="space-y-4">
+              <div className="text-sm text-foreground opacity-80">
+                This is a fullscreen modal that covers the entire viewport.
+                Perfect for complex forms or detailed content.
+              </div>
+              <div className="text-sm text-foreground opacity-80">
+                You can toggle between fullscreen and normal size using the
+                button in the header.
+              </div>
+            </div>
+          </ModusModal>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Static Backdrop"
+        description="Modal that doesn't close when clicking outside - user must use explicit actions."
+      >
+        <div className="space-y-4">
+          <ModusButton
+            onButtonClick={() => {
+              staticModalRef.current?.openModal();
+            }}
+          >
+            Open Static Modal
+          </ModusButton>
+          <ModusModal
+            ref={staticModalRef}
+            modalId="modal-static"
+            ariaLabel="Static backdrop modal"
+            onClose={() => {}}
+            backdrop="static"
+            header={
+              <div className="text-xl font-semibold text-foreground">
+                Important Action
+              </div>
+            }
+            footer={
+              <div className="flex gap-2">
+                <ModusButton
+                  variant="borderless"
+                  onButtonClick={() => {
+                    staticModalRef.current?.closeModal();
+                  }}
+                >
+                  Cancel
+                </ModusButton>
+                <ModusButton
+                  color="danger"
+                  onButtonClick={() => {
+                    staticModalRef.current?.closeModal();
+                  }}
+                >
+                  Delete Forever
+                </ModusButton>
+              </div>
+            }
+          >
+            <div className="text-sm text-foreground opacity-80">
+              This modal has a static backdrop. Clicking outside won&apos;t
+              close it - you must use the buttons or press Escape.
+            </div>
+          </ModusModal>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Custom Styling"
+        description="Modal with custom dimensions and styling."
+      >
+        <div className="space-y-4">
+          <ModusButton
+            onButtonClick={() => {
+              customModalRef.current?.openModal();
+            }}
+          >
+            Open Custom Modal
+          </ModusButton>
+          <ModusModal
+            ref={customModalRef}
+            modalId="modal-custom"
+            ariaLabel="Custom styled modal"
+            onClose={() => {}}
+            customClass="expanded-modal"
+            header={
+              <div className="text-xl font-semibold text-foreground">
+                Custom Size Modal
+              </div>
+            }
+            footer={
+              <div className="flex gap-2">
+                <ModusButton
+                  variant="borderless"
+                  onButtonClick={() => {
+                    customModalRef.current?.closeModal();
+                  }}
+                >
+                  Cancel
+                </ModusButton>
+                <ModusButton
+                  onButtonClick={() => {
+                    customModalRef.current?.closeModal();
+                  }}
+                >
+                  Save
+                </ModusButton>
+              </div>
+            }
+          >
+            <div className="text-sm text-foreground opacity-80">
+              This modal has custom dimensions applied via CSS classes. The
+              modal is wider and taller than the default.
+            </div>
+          </ModusModal>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,141 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusNavbar from "../../components/ModusNavbar";
+
+const navbarUserCard = {
+  name: "John Doe",
+  email: "john.doe@example.com",
+  avatarSrc: "https://i.pravatar.cc/64?img=12",
+};
+
+export default function NavbarDemoPage() {
+  const handleHelpClick = () => {
+    console.log("Help button clicked");
+  };
+
+  const handleAppsClick = () => {
+    console.log("Apps button clicked");
+  };
+
+  const handleNotificationsClick = () => {
+    console.log("Notifications button clicked");
+  };
+
+  const handleMainMenuOpenChange = (open: boolean) => {
+    console.log(`Main menu ${open ? "opened" : "closed"}`);
+  };
+
+  return (
+    <DemoPage
+      title="Modus Navbar"
+      description="The navbar provides a consistent top-level navigation and user controls. Use the navbar for primary navigation, user profile access, search, and application-wide actions."
+    >
+      <DemoExample
+        title="Basic Navbar"
+        description="A basic navbar with user card and search functionality."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusNavbar
+            userCard={navbarUserCard}
+            visibility={{ user: true, search: true, searchInput: true }}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Navbar with Help Button"
+        description="Navbar with user card and help button for accessing documentation and support."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusNavbar
+            userCard={navbarUserCard}
+            visibility={{ user: true, help: true }}
+            onHelpClick={handleHelpClick}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Navbar with All Buttons"
+        description="Navbar showing all available buttons: user, search, help, apps, notifications, and main menu."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusNavbar
+            userCard={navbarUserCard}
+            visibility={{
+              user: true,
+              search: true,
+              searchInput: true,
+              help: true,
+              apps: true,
+              notifications: true,
+              mainMenu: true,
+            }}
+            onHelpClick={handleHelpClick}
+            onAppsClick={handleAppsClick}
+            onNotificationsClick={handleNotificationsClick}
+            onMainMenuOpenChange={handleMainMenuOpenChange}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Condensed Navbar"
+        description="A condensed version of the navbar suitable for tighter spaces."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusNavbar
+            userCard={navbarUserCard}
+            visibility={{
+              user: true,
+              mainMenu: true,
+              notifications: true,
+              help: true,
+            }}
+            condensed={true}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Navbar with Custom Slots"
+        description="Navbar with custom content in start, center, and end slots."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusNavbar
+            userCard={navbarUserCard}
+            visibility={{
+              user: true,
+              search: true,
+              searchInput: true,
+              help: true,
+            }}
+            startContent={
+              <div className="flex items-center gap-2">
+                <div className="text-sm text-foreground">
+                  Custom Start Content
+                </div>
+              </div>
+            }
+            centerContent={
+              <div className="flex items-center gap-2">
+                <div className="text-sm text-foreground">
+                  Custom Center Content
+                </div>
+              </div>
+            }
+            endContent={
+              <div className="flex items-center gap-2">
+                <div className="text-sm text-foreground">
+                  Custom End Content
+                </div>
+              </div>
+            }
+          />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,180 @@
+"use client";
+
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusNumberInput from "../../components/ModusNumberInput";
+
+export default function NumberInputDemoPage() {
+  const [numberValue, setNumberValue] = useState<string>("");
+
+  const handleNumberChange = (value: string) => {
+    setNumberValue(value);
+  };
+
+  const getDoubleValue = (): number => {
+    const num = parseFloat(numberValue);
+    return isNaN(num) ? 0 : num * 2;
+  };
+
+  return (
+    <DemoPage
+      title="Modus Number Input"
+      description="Number inputs provide a controlled way to enter numeric values. Use number inputs for quantities, amounts, ratings, or any numeric data entry."
+    >
+      <DemoExample
+        title="Basic Number Input"
+        description="Simple number input with label."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="quantity-input"
+              label="Quantity"
+              placeholder="0"
+              step={1}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="price-input"
+              label="Price"
+              placeholder="0.00"
+              step={0.01}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Number Input Sizes"
+        description="Number inputs in different sizes."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="small-number"
+              label="Small"
+              size="sm"
+              placeholder="0"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="medium-number"
+              label="Medium"
+              size="md"
+              placeholder="0"
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="large-number"
+              label="Large"
+              size="lg"
+              placeholder="0"
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Number Input with Constraints"
+        description="Number inputs with min, max, and step values."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="age-input"
+              label="Age"
+              placeholder="Enter age"
+              min={1}
+              max={120}
+              step={1}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="percentage-input"
+              label="Percentage"
+              placeholder="0"
+              min={0}
+              max={100}
+              step={1}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="decimal-input"
+              label="Decimal"
+              placeholder="0.0"
+              min={0}
+              max={10}
+              step={0.1}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Currency Number Input"
+        description="Number input with currency symbol."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="usd-input"
+              label="USD Amount"
+              placeholder="0.00"
+              currencySymbol="$"
+              step={0.01}
+            />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="eur-input"
+              label="EUR Amount"
+              placeholder="0.00"
+              currencySymbol="€"
+              step={0.01}
+            />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Interactive Example"
+        description="Number input with two-way binding and event handling."
+      >
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <ModusNumberInput
+              inputId="interactive-number"
+              label="Enter a Number"
+              placeholder="0"
+              value={numberValue}
+              step={1}
+              onInputChange={handleNumberChange}
+            />
+          </div>
+          {numberValue !== null && numberValue !== "" && (
+            <div className="p-4 rounded-lg bg-card border border-border">
+              <div className="text-sm text-foreground mb-2">
+                <strong>Current Value:</strong> {numberValue}
+              </div>
+              <div className="text-sm text-foreground">
+                <strong>Double Value:</strong> {getDoubleValue()}
+              </div>
+            </div>
+          )}
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}