@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,197 @@
+"use client";
+
+import { useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusChip from "../../components/ModusChip";
+import ModusButton from "../../components/ModusButton";
+
+interface Tag {
+  id: string;
+  label: string;
+}
+
+export default function ChipDemoPage() {
+  // Removable tags demo state
+  const [activeTags, setActiveTags] = useState<Tag[]>([
+    { id: "urgent", label: "Urgent" },
+    { id: "review", label: "Needs Review" },
+    { id: "approved", label: "Approved" },
+    { id: "archived", label: "Archived" },
+  ]);
+  const [removedTags, setRemovedTags] = useState<Tag[]>([]);
+
+  const removeTag = (tagId: string) => {
+    const tag = activeTags.find((t) => t.id === tagId);
+    if (tag) {
+      setActiveTags((tags) => tags.filter((t) => t.id !== tagId));
+      setRemovedTags((tags) => [...tags, tag]);
+    }
+  };
+
+  const restoreTags = () => {
+    setActiveTags((tags) => [...tags, ...removedTags]);
+    setRemovedTags([]);
+  };
+
+  return (
+    <DemoPage
+      title="Modus Chip"
+      description="Compact visual elements for tags, selections, or status pills. Chips support filled/outline variants, three sizes, active/error/disabled states, and optional remove buttons."
+    >
+      <DemoExample
+        title="Removable Tags"
+        description="Chips with remove buttons for deletable items like tags, filters, or selections."
+      >
+        <div className="p-6 rounded-lg bg-card border-default">
+          <div className="text-base font-semibold mb-2 text-foreground">
+            Applied Tags
+          </div>
+          <div className="text-sm text-muted-foreground mb-4">
+            Click the X to remove tags
+          </div>
+          {activeTags.length > 0 ? (
+            <div className="flex flex-wrap gap-3">
+              {activeTags.map((tag) => (
+                <ModusChip
+                  key={tag.id}
+                  label={tag.label}
+                  showRemove
+                  onChipRemove={() => removeTag(tag.id)}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-sm text-muted-foreground italic">
+              No tags applied
+            </div>
+          )}
+          {removedTags.length > 0 && (
+            <div className="mt-4 pt-4 border-t border-default flex items-center gap-3">
+              <div className="text-sm text-muted-foreground">Removed:</div>
+              {removedTags.map((tag) => (
+                <ModusChip key={tag.id} label={tag.label} disabled size="sm" />
+              ))}
+              <ModusButton
+                color="primary"
+                variant="borderless"
+                size="sm"
+                onButtonClick={restoreTags}
+                className="ml-2"
+              >
+                Restore all
+              </ModusButton>
+            </div>
+          )}
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Chip Variants"
+        description="Two visual styles: filled (solid background) and outline (transparent with border)."
+      >
+        <div className="flex flex-col gap-6">
+          <div>
+            <div className="text-sm font-medium mb-3 text-muted-foreground">
+              Filled (Default)
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusChip label="Default" variant="filled" />
+              <ModusChip label="Active" variant="filled" active />
+              <ModusChip label="Removable" variant="filled" showRemove />
+            </div>
+          </div>
+          <div>
+            <div className="text-sm font-medium mb-3 text-muted-foreground">
+              Outline
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusChip label="Default" variant="outline" />
+              <ModusChip label="Active" variant="outline" active />
+              <ModusChip label="Removable" variant="outline" showRemove />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Chip Sizes"
+        description="Three size options: sm (20px), md (24px), and lg (28px) for different contexts."
+      >
+        <div className="flex flex-wrap items-center gap-4">
+          <ModusChip label="Small" size="sm" />
+          <ModusChip label="Medium" size="md" />
+          <ModusChip label="Large" size="lg" />
+        </div>
+        <div className="flex flex-wrap items-center gap-4 mt-4">
+          <ModusChip label="Small" size="sm" variant="outline" active />
+          <ModusChip label="Medium" size="md" variant="outline" active />
+          <ModusChip label="Large" size="lg" variant="outline" active />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="States"
+        description="Active state for selections, disabled state for unavailable options, and error state for validation."
+      >
+        <div className="flex flex-col gap-6">
+          <div>
+            <div className="text-sm font-medium mb-3 text-muted-foreground">
+              Active State
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusChip label="Selected" active />
+              <ModusChip label="Pressed" active variant="outline" />
+            </div>
+          </div>
+          <div>
+            <div className="text-sm font-medium mb-3 text-muted-foreground">
+              Disabled State
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusChip label="Disabled" disabled />
+              <ModusChip label="Disabled Outline" disabled variant="outline" />
+              <ModusChip label="Disabled Active" disabled active />
+            </div>
+          </div>
+          <div>
+            <div className="text-sm font-medium mb-3 text-muted-foreground">
+              Error State
+            </div>
+            <div className="flex flex-wrap gap-3">
+              <ModusChip label="Invalid" hasError />
+              <ModusChip label="Error" hasError variant="outline" />
+              <ModusChip label="Remove Error" hasError showRemove />
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Status Pills"
+        description="Use chips as status indicators with appropriate styling."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <div className="w-24 text-sm text-muted-foreground">
+              Order Status:
+            </div>
+            <ModusChip label="Pending" variant="outline" />
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="w-24 text-sm text-muted-foreground">Active:</div>
+            <ModusChip label="In Progress" active />
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="w-24 text-sm text-muted-foreground">Completed:</div>
+            <ModusChip label="Done" variant="filled" />
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="w-24 text-sm text-muted-foreground">Error:</div>
+            <ModusChip label="Failed" hasError />
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,179 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusDate from "../../components/ModusDate";
+
+export default function DateDemoPage() {
+  // Basic date input state
+  const [selectedDate, setSelectedDate] = useState<string>("");
+
+  // Date constraints state
+  const [startDate, setStartDate] = useState<string>("");
+  const [endDate, setEndDate] = useState<string>("");
+
+  // Calculate min and max dates
+  const minDate = useMemo(() => {
+    const today = new Date();
+    return today.toISOString().split("T")[0];
+  }, []);
+
+  const maxDate = useMemo(() => {
+    const oneYearFromNow = new Date();
+    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1);
+    return oneYearFromNow.toISOString().split("T")[0];
+  }, []);
+
+  const handleDateChange = (event: CustomEvent<InputEvent>) => {
+    const target = event.detail.target as HTMLInputElement;
+    setSelectedDate(target.value);
+  };
+
+  const handleStartDateChange = (event: CustomEvent<InputEvent>) => {
+    const target = event.detail.target as HTMLInputElement;
+    setStartDate(target.value);
+  };
+
+  const handleEndDateChange = (event: CustomEvent<InputEvent>) => {
+    const target = event.detail.target as HTMLInputElement;
+    setEndDate(target.value);
+  };
+
+  return (
+    <DemoPage
+      title="Modus Date"
+      description="Date inputs allow users to select dates from a calendar picker or enter dates manually. Use date inputs for birth dates, appointment scheduling, date ranges, and any scenario requiring date selection."
+    >
+      <DemoExample
+        title="Basic Date Input"
+        description="Simple date input with label for date selection."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate
+            label="Select Date"
+            value={selectedDate}
+            onInputChange={handleDateChange}
+          />
+          {selectedDate && (
+            <div className="mt-4 p-4 rounded-lg bg-muted text-muted-foreground">
+              <div className="font-semibold mb-2">Selected Date:</div>
+              <div className="text-sm">{selectedDate}</div>
+            </div>
+          )}
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Date Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate label="Small Date Input" size="sm" />
+          <ModusDate label="Medium Date Input (Default)" size="md" />
+          <ModusDate label="Large Date Input" size="lg" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Date Formats"
+        description="Different date format options for various locales and preferences."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate label="YYYY-MM-DD Format" format="yyyy-mm-dd" />
+          <ModusDate label="DD-MM-YYYY Format" format="dd-mm-yyyy" />
+          <ModusDate label="YYYY/MM/DD Format" format="yyyy/mm/dd" />
+          <ModusDate label="DD/MM/YYYY Format" format="dd/mm/yyyy" />
+          <ModusDate label="MMM DD, YYYY Format" format="MMM DD, YYYY" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Date Constraints"
+        description="Set minimum and maximum dates to restrict date selection."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate
+            label="Start Date (Min: Today)"
+            min={minDate}
+            value={startDate}
+            onInputChange={handleStartDateChange}
+          />
+          <ModusDate
+            label="End Date (Max: 1 Year from Start)"
+            min={startDate || minDate}
+            max={maxDate}
+            value={endDate}
+            onInputChange={handleEndDateChange}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Feedback Messages"
+        description="Display validation feedback with different severity levels."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate
+            label="Date with Success Feedback"
+            feedback={{
+              level: "success",
+              message: "Date is valid",
+            }}
+          />
+          <ModusDate
+            label="Date with Warning Feedback"
+            feedback={{
+              level: "warning",
+              message: "Please verify the date",
+            }}
+          />
+          <ModusDate
+            label="Date with Error Feedback"
+            feedback={{
+              level: "error",
+              message: "Invalid date format",
+            }}
+          />
+          <ModusDate
+            label="Date with Info Feedback"
+            feedback={{
+              level: "info",
+              message: "Select a date within the next 30 days",
+            }}
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled and Read-Only States"
+        description="Date inputs in disabled and read-only states."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate label="Disabled Date Input" disabled value="2024-01-15" />
+          <ModusDate label="Read-Only Date Input" readOnly value="2024-06-20" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Required Field"
+        description="Mark date inputs as required for form validation."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate label="Birth Date (Required)" required />
+          <ModusDate label="Appointment Date (Required)" required />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Bordered and Borderless"
+        description="Date inputs with and without borders."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusDate label="Bordered Date Input (Default)" bordered />
+          <ModusDate label="Borderless Date Input" bordered={false} />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,150 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusDropdownMenu from "../../components/ModusDropdownMenu";
+import type { MenuItem } from "../../components/ModusMenu";
+
+// Menu items for basic examples
+const basicMenuItems: MenuItem[] = [
+  { label: "Option 1", value: "option1" },
+  { label: "Option 2", value: "option2" },
+];
+
+const actionMenuItems: MenuItem[] = [
+  { label: "Action 1", value: "action1" },
+  { label: "Action 2", value: "action2" },
+];
+
+const itemMenuItems: MenuItem[] = [
+  { label: "Item 1", value: "item1" },
+  { label: "Item 2", value: "item2" },
+];
+
+export default function DropdownDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Dropdown Menu"
+      description="Dropdown menus provide a compact way to display multiple actions or options in a menu that opens on demand."
+    >
+      {/* Button Colors */}
+      <DemoExample
+        title="Button Colors"
+        description="Dropdown menus with different button colors."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusDropdownMenu
+            buttonColor="primary"
+            menuItems={basicMenuItems}
+            buttonContent={<div>Primary</div>}
+          />
+          <ModusDropdownMenu
+            buttonColor="secondary"
+            menuItems={basicMenuItems}
+            buttonContent={<div>Secondary</div>}
+          />
+          <ModusDropdownMenu
+            buttonColor="tertiary"
+            menuItems={basicMenuItems}
+            buttonContent={<div>Tertiary</div>}
+          />
+        </div>
+      </DemoExample>
+
+      {/* Button Variants */}
+      <DemoExample
+        title="Button Variants"
+        description="Dropdown menus with different button visual styles."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusDropdownMenu
+            buttonVariant="filled"
+            menuItems={actionMenuItems}
+            buttonContent={<div>Filled</div>}
+          />
+          <ModusDropdownMenu
+            buttonVariant="outlined"
+            menuItems={actionMenuItems}
+            buttonContent={<div>Outlined</div>}
+          />
+          <ModusDropdownMenu
+            buttonVariant="borderless"
+            menuItems={actionMenuItems}
+            buttonContent={<div>Borderless</div>}
+          />
+        </div>
+      </DemoExample>
+
+      {/* Custom Button Content */}
+      <DemoExample
+        title="Custom Button Content"
+        description="Dropdown menus with custom button content including icons."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusDropdownMenu
+            menuItems={[
+              { label: "Preferences", value: "prefs" },
+              { label: "Account", value: "account" },
+            ]}
+            buttonContent={
+              <div className="flex items-center gap-2">
+                <i className="modus-icons text-lg">settings</i>
+                <div>Settings</div>
+              </div>
+            }
+          />
+          <ModusDropdownMenu
+            menuItems={[
+              { label: "Profile", value: "profile" },
+              { label: "Settings", value: "settings" },
+              { label: "Log out", value: "logout" },
+            ]}
+            buttonContent={
+              <div className="flex items-center gap-2">
+                <i className="modus-icons text-lg">user_account</i>
+                <div>User Menu</div>
+                <i className="modus-icons text-sm">expand_more</i>
+              </div>
+            }
+          />
+        </div>
+      </DemoExample>
+
+      {/* Menu Placement */}
+      <DemoExample
+        title="Menu Placement"
+        description="Different menu placement options relative to the button."
+      >
+        <div className="flex flex-wrap gap-4">
+          <ModusDropdownMenu
+            menuPlacement="bottom-start"
+            menuItems={itemMenuItems}
+            buttonContent={<div>Bottom Start</div>}
+          />
+          <ModusDropdownMenu
+            menuPlacement="bottom-end"
+            menuItems={itemMenuItems}
+            buttonContent={<div>Bottom End</div>}
+          />
+          <ModusDropdownMenu
+            menuPlacement="top-start"
+            menuItems={itemMenuItems}
+            buttonContent={<div>Top Start</div>}
+          />
+        </div>
+      </DemoExample>
+
+      {/* Disabled State */}
+      <DemoExample
+        title="Disabled State"
+        description="Dropdown menu in disabled state."
+      >
+        <ModusDropdownMenu
+          disabled={true}
+          menuItems={itemMenuItems}
+          buttonContent={<div>Disabled Menu</div>}
+        />
+      </DemoExample>
+    </DemoPage>
+  );
+}