@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,236 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusAccordion from "../../components/ModusAccordion";
+
+const basicItems = [
+  {
+    id: "getting-started",
+    options: {
+      title: "Getting Started",
+      description: "Learn the basics",
+    },
+    content: (
+      <div className="p-4 text-foreground">
+        This is the content for the getting started section. You can include any content here.
+      </div>
+    ),
+  },
+  {
+    id: "components",
+    options: {
+      title: "Components",
+      description: "Explore available components",
+    },
+    content: (
+      <div className="p-4 text-foreground">
+        Discover all the available components in the Modus design system.
+      </div>
+    ),
+  },
+  {
+    id: "styling",
+    options: {
+      title: "Styling",
+      description: "Customize your design",
+    },
+    content: (
+      <div className="p-4 text-foreground">
+        Learn how to style and customize components to match your brand.
+      </div>
+    ),
+  },
+];
+
+const sizeItemsXs = [
+  {
+    id: "xs-panel",
+    options: {
+      title: "Extra Small Panel",
+      description: "Compact size for tight spaces",
+      size: "xs" as const,
+    },
+    content: (
+      <div className="p-4 text-foreground">Extra small accordion content.</div>
+    ),
+  },
+];
+
+const sizeItemsSm = [
+  {
+    id: "sm-panel",
+    options: {
+      title: "Small Panel",
+      description: "Standard small size",
+      size: "sm" as const,
+    },
+    content: (
+      <div className="p-4 text-foreground">Small accordion content.</div>
+    ),
+  },
+];
+
+const sizeItemsMd = [
+  {
+    id: "md-panel",
+    options: {
+      title: "Medium Panel",
+      description: "Default medium size",
+      size: "md" as const,
+    },
+    content: (
+      <div className="p-4 text-foreground">Medium accordion content.</div>
+    ),
+  },
+];
+
+const sizeItemsLg = [
+  {
+    id: "lg-panel",
+    options: {
+      title: "Large Panel",
+      description: "Prominent large size",
+      size: "lg" as const,
+    },
+    content: (
+      <div className="p-4 text-foreground">Large accordion content.</div>
+    ),
+  },
+];
+
+const iconItems = [
+  {
+    id: "settings",
+    options: {
+      title: "Settings",
+      description: "Configure your preferences",
+      icon: "settings",
+      iconAriaLabel: "Settings icon",
+    },
+    content: (
+      <div className="p-4 text-foreground">
+        Settings panel with icon in the header.
+      </div>
+    ),
+  },
+  {
+    id: "notifications",
+    options: {
+      title: "Notifications",
+      description: "Manage your notifications",
+      icon: "notifications",
+      iconAriaLabel: "Notifications icon",
+    },
+    content: (
+      <div className="p-4 text-foreground">
+        Notifications panel with icon in the header.
+      </div>
+    ),
+  },
+  {
+    id: "security",
+    options: {
+      title: "Security",
+      description: "Security and privacy settings",
+      icon: "lock",
+      iconAriaLabel: "Security icon",
+    },
+    content: (
+      <div className="p-4 text-foreground">
+        Security panel with icon in the header.
+      </div>
+    ),
+  },
+];
+
+const expandedStateItems = [
+  {
+    id: "expanded-default",
+    options: {
+      title: "Expanded by Default",
+      description: "This panel starts expanded",
+    },
+    expanded: true,
+    content: (
+      <div className="p-4 text-foreground">
+        This panel is expanded by default when the page loads.
+      </div>
+    ),
+  },
+  {
+    id: "collapsed-default",
+    options: {
+      title: "Collapsed by Default",
+      description: "This panel starts collapsed",
+    },
+    expanded: false,
+    content: (
+      <div className="p-4 text-foreground">
+        This panel is collapsed by default when the page loads.
+      </div>
+    ),
+  },
+];
+
+export default function AccordionDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Accordion"
+      description="Accordions organize and display collapsible content in a compact space. Use accordions to group related information and allow users to expand or collapse sections as needed."
+    >
+      <DemoExample
+        title="Basic Accordion"
+        description="Simple accordion with multiple collapsible panels."
+      >
+        <ModusAccordion items={basicItems} />
+      </DemoExample>
+
+      <DemoExample
+        title="Accordion Sizes"
+        description="Different sizes for various contexts and spacing needs."
+      >
+        <div className="flex flex-col gap-6">
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Extra Small (xs)
+            </div>
+            <ModusAccordion items={sizeItemsXs} />
+          </div>
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Small (sm)
+            </div>
+            <ModusAccordion items={sizeItemsSm} />
+          </div>
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Medium (md)
+            </div>
+            <ModusAccordion items={sizeItemsMd} />
+          </div>
+          <div>
+            <div className="text-base font-semibold mb-3 text-foreground">
+              Large (lg)
+            </div>
+            <ModusAccordion items={sizeItemsLg} />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Icons in Headers"
+        description="Enhance accordion headers with icons for better visual communication."
+      >
+        <ModusAccordion items={iconItems} />
+      </DemoExample>
+
+      <DemoExample
+        title="Default Expanded State"
+        description="Start with specific panels expanded by default."
+      >
+        <ModusAccordion items={expandedStateItems} />
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,94 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusAlert from "../../components/ModusAlert";
+
+export default function AlertDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Alert"
+      description="Alerts communicate important messages to users. Use alerts to notify users about success, warnings, errors, or informational messages."
+    >
+      <DemoExample
+        title="Alert Variants"
+        description="Different alert variants for various message types and contexts."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusAlert
+            alertTitle="Info Alert"
+            alertDescription="This is an informational message."
+            variant="info"
+          />
+          <ModusAlert
+            alertTitle="Success Alert"
+            alertDescription="Your action was completed successfully."
+            variant="success"
+          />
+          <ModusAlert
+            alertTitle="Warning Alert"
+            alertDescription="Please review this important warning."
+            variant="warning"
+          />
+          <ModusAlert
+            alertTitle="Error Alert"
+            alertDescription="An error occurred. Please try again."
+            variant="error"
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Dismissible Alerts"
+        description="Alerts that can be dismissed by users with a close button."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusAlert
+            alertTitle="Dismissible Info Alert"
+            alertDescription="You can close this alert."
+            variant="info"
+            dismissible
+          />
+          <ModusAlert
+            alertTitle="Dismissible Success Alert"
+            alertDescription="This alert can be dismissed."
+            variant="success"
+            dismissible
+          />
+          <ModusAlert
+            alertTitle="Dismissible Warning Alert"
+            alertDescription="Close this alert when you're done."
+            variant="warning"
+            dismissible
+          />
+          <ModusAlert
+            alertTitle="Dismissible Error Alert"
+            alertDescription="Dismiss this error alert after reviewing."
+            variant="error"
+            dismissible
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Alerts with Custom Icons"
+        description="Enhance alerts with custom icons for better visual communication."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusAlert
+            alertTitle="Notification"
+            alertDescription="You have new messages."
+            variant="info"
+            icon="notifications"
+          />
+          <ModusAlert
+            alertTitle="File Uploaded"
+            alertDescription="Your file has been uploaded successfully."
+            variant="success"
+            icon="upload"
+          />
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusAutocomplete from "../../components/ModusAutocomplete";
+import type { AutocompleteItem } from "../../components/ModusAutocomplete";
+
+const countryItems: AutocompleteItem[] = [
+  { label: "United States", value: "us", visibleInMenu: true },
+  { label: "Canada", value: "ca", visibleInMenu: true },
+  { label: "United Kingdom", value: "uk", visibleInMenu: true },
+  { label: "Australia", value: "au", visibleInMenu: true },
+  { label: "Germany", value: "de", visibleInMenu: true },
+  { label: "France", value: "fr", visibleInMenu: true },
+  { label: "Japan", value: "jp", visibleInMenu: true },
+];
+
+const skillItems: AutocompleteItem[] = [
+  { label: "Angular", value: "angular", visibleInMenu: true },
+  { label: "React", value: "react", visibleInMenu: true },
+  { label: "Vue.js", value: "vue", visibleInMenu: true },
+  { label: "TypeScript", value: "typescript", visibleInMenu: true },
+  { label: "JavaScript", value: "javascript", visibleInMenu: true },
+  { label: "Node.js", value: "nodejs", visibleInMenu: true },
+  { label: "Python", value: "python", visibleInMenu: true },
+];
+
+const sizeItems: AutocompleteItem[] = [
+  { label: "Option 1", value: "1", visibleInMenu: true },
+  { label: "Option 2", value: "2", visibleInMenu: true },
+  { label: "Option 3", value: "3", visibleInMenu: true },
+];
+
+const stateItems: AutocompleteItem[] = [
+  { label: "Option A", value: "a", visibleInMenu: true },
+  { label: "Option B", value: "b", visibleInMenu: true },
+];
+
+const loadingItems: AutocompleteItem[] = [
+  { label: "Result 1", value: "1", visibleInMenu: true },
+  { label: "Result 2", value: "2", visibleInMenu: true },
+];
+
+export default function AutocompleteDemoPage() {
+  const [selectedCountry, setSelectedCountry] = useState<string>("");
+  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
+
+  const handleCountrySelect = (event: CustomEvent<AutocompleteItem>) => {
+    setSelectedCountry(event.detail.value);
+    console.log("Selected country:", event.detail);
+  };
+
+  const handleSkillSelect = (event: CustomEvent<AutocompleteItem>) => {
+    const value = event.detail.value;
+    setSelectedSkills((current) => {
+      if (current.includes(value)) {
+        return current.filter((v) => v !== value);
+      } else {
+        return [...current, value];
+      }
+    });
+  };
+
+  useEffect(() => {
+    console.log("Selected skills:", selectedSkills);
+  }, [selectedSkills]);
+
+  return (
+    <DemoPage
+      title="Modus Autocomplete"
+      description="Autocomplete provides input suggestions as users type. Use autocomplete to help users find and select from a list of options quickly and efficiently."
+    >
+      <DemoExample
+        title="Basic Autocomplete"
+        description="Simple single-select autocomplete with a list of options."
+      >
+        <ModusAutocomplete
+          label="Search Countries"
+          placeholder="Type to search..."
+          items={countryItems}
+          value={selectedCountry}
+          onItemSelect={handleCountrySelect}
+        />
+      </DemoExample>
+
+      <DemoExample
+        title="Multi-Select Autocomplete"
+        description="Allow users to select multiple items with chips displayed for selected values."
+      >
+        <ModusAutocomplete
+          label="Select Skills"
+          placeholder="Type to search skills..."
+          items={skillItems}
+          multiSelect
+          onItemSelect={handleSkillSelect}
+        />
+        {selectedSkills.length > 0 && (
+          <div className="mt-4 p-4 rounded-lg bg-muted text-muted-foreground">
+            <div className="font-semibold mb-2">Selected Skills:</div>
+            <div className="text-sm">{selectedSkills.join(", ")}</div>
+          </div>
+        )}
+      </DemoExample>
+
+      <DemoExample
+        title="Autocomplete Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusAutocomplete
+            label="Small Autocomplete"
+            placeholder="Small size..."
+            items={sizeItems}
+            size="sm"
+          />
+          <ModusAutocomplete
+            label="Medium Autocomplete"
+            placeholder="Medium size..."
+            items={sizeItems}
+            size="md"
+          />
+          <ModusAutocomplete
+            label="Large Autocomplete"
+            placeholder="Large size..."
+            items={sizeItems}
+            size="lg"
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled and Read-Only States"
+        description="Autocomplete in disabled and read-only states."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusAutocomplete
+            label="Disabled Autocomplete"
+            placeholder="This is disabled"
+            items={stateItems}
+            disabled
+          />
+          <ModusAutocomplete
+            label="Read-Only Autocomplete"
+            placeholder="This is read-only"
+            items={stateItems}
+            value="Read-only value"
+            readOnly
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Loading State"
+        description="Show a spinner while fetching or processing autocomplete results."
+      >
+        <ModusAutocomplete
+          label="Search with Loading"
+          placeholder="Type to search..."
+          items={loadingItems}
+          showSpinner
+        />
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,135 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusAvatar from "../../components/ModusAvatar";
+
+export default function AvatarDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Avatar"
+      description="Avatars represent users or entities in the interface. Use avatars to personalize user experiences and provide visual identity."
+    >
+      <DemoExample
+        title="Avatar Sizes"
+        description="Different sizes for various contexts and display needs."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="Extra Small Avatar" size="xs" initials="X S" />
+            <div className="text-xs text-muted-foreground">Extra Small (xs)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="Small Avatar" size="sm" initials="SM" />
+            <div className="text-xs text-muted-foreground">Small (sm)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="Medium Avatar" size="md" initials="MD" />
+            <div className="text-xs text-muted-foreground">Medium (md)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="Large Avatar" size="lg" initials="LG" />
+            <div className="text-xs text-muted-foreground">Large (lg)</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Avatar Shapes"
+        description="Circle and square shapes for different design styles."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="Circle Avatar" shape="circle" initials="C" size="md" />
+            <div className="text-xs text-muted-foreground">Circle</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="Square Avatar" shape="square" initials="S" size="md" />
+            <div className="text-xs text-muted-foreground">Square</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Avatars with Images"
+        description="Avatars displaying user profile images."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <ModusAvatar
+            alt="User Avatar"
+            imgSrc="https://i.pravatar.cc/150?img=1"
+            size="md"
+            shape="circle"
+          />
+          <ModusAvatar
+            alt="User Avatar"
+            imgSrc="https://i.pravatar.cc/150?img=2"
+            size="md"
+            shape="circle"
+          />
+          <ModusAvatar
+            alt="User Avatar"
+            imgSrc="https://i.pravatar.cc/150?img=3"
+            size="md"
+            shape="circle"
+          />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Avatars with Initials"
+        description="Avatars displaying user initials when no image is available."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <ModusAvatar alt="John Doe" initials="J D" size="md" shape="circle" />
+          <ModusAvatar alt="Jane Smith" initials="J S" size="md" shape="circle" />
+          <ModusAvatar alt="Bob Johnson" initials="B J" size="md" shape="circle" />
+          <ModusAvatar alt="Alice Brown" initials="A B" size="md" shape="circle" />
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Fallback Behavior"
+        description="Avatars automatically fall back to initials when image fails to load."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <ModusAvatar
+            alt="User Avatar"
+            imgSrc="https://invalid-url.com/image.jpg"
+            initials="F B"
+            size="md"
+            shape="circle"
+          />
+          <div className="text-sm text-muted-foreground">
+            <div className="font-semibold mb-1">Fallback to Initials</div>
+            <div>When an image fails to load, the avatar automatically displays initials.</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Size Comparison"
+        description="Visual comparison of all avatar sizes side by side."
+      >
+        <div className="flex flex-wrap items-end gap-8">
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="XS Avatar" size="xs" initials="XS" shape="circle" />
+            <div className="text-xs text-muted-foreground">xs</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="SM Avatar" size="sm" initials="SM" shape="circle" />
+            <div className="text-xs text-muted-foreground">sm</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="MD Avatar" size="md" initials="MD" shape="circle" />
+            <div className="text-xs text-muted-foreground">md</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusAvatar alt="LG Avatar" size="lg" initials="LG" shape="circle" />
+            <div className="text-xs text-muted-foreground">lg</div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}