@julianoczkowski/create-trimble-app 2.0.0

package/templates/react/src/demos/file-dropzone-demo/page.tsx

@@ -0,0 +1,186 @@
+import { useRef, useState } from "react";
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusFileDropzone, {
+  type ModusFileDropzoneHandle,
+} from "../../components/ModusFileDropzone";
+import ModusButton from "../../components/ModusButton";
+import ModusProgress from "../../components/ModusProgress";
+
+export default function FileDropzoneDemoPage() {
+  const dropzoneRef = useRef<ModusFileDropzoneHandle>(null);
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const handleFileSelect = (event: CustomEvent<FileList>) => {
+    const files = event.detail;
+    const fileNames: string[] = [];
+    for (let i = 0; i < files.length; i++) {
+      fileNames.push(`${files[i].name} (${formatFileSize(files[i].size)})`);
+    }
+    setSelectedFiles(fileNames);
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  const handleReset = async () => {
+    await dropzoneRef.current?.reset();
+    setSelectedFiles([]);
+  };
+
+  const simulateUpload = () => {
+    setUploadProgress(0);
+    const interval = setInterval(() => {
+      setUploadProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          return 100;
+        }
+        return prev + 10;
+      });
+    }, 300);
+  };
+
+  return (
+    <DemoPage
+      title="Modus File Dropzone"
+      description="File dropzone allows users to drag and drop files for upload, with built-in validation for file types, sizes, counts, and filename lengths."
+    >
+      <DemoExample
+        title="Basic File Dropzone"
+        description="A simple file dropzone accepting document files."
+      >
+        <ModusFileDropzone
+          acceptFileTypes=".doc, .docx, .pdf"
+          instructions="Drag files here or browse to upload (.doc, .docx, .pdf)"
+          onFileSelect={handleFileSelect}
+        />
+        {selectedFiles.length > 0 && (
+          <div className="mt-4 p-4 bg-muted rounded-lg">
+            <div className="text-sm font-medium text-foreground mb-2">
+              Selected Files:
+            </div>
+            <div className="text-sm text-muted-foreground space-y-1">
+              {selectedFiles.map((file, index) => (
+                <div key={`file-${index}`}>{file}</div>
+              ))}
+            </div>
+          </div>
+        )}
+      </DemoExample>
+
+      <DemoExample
+        title="Multiple File Selection"
+        description="Allow users to select multiple files at once."
+      >
+        <ModusFileDropzone
+          acceptFileTypes="image/*"
+          multiple
+          instructions="Select multiple image files (drag or click)"
+        />
+      </DemoExample>
+
+      <DemoExample
+        title="With Validation Constraints"
+        description="Set limits on file count, total size, and filename length."
+      >
+        <ModusFileDropzone
+          acceptFileTypes=".doc, .docx, .pdf"
+          multiple
+          maxFileCount={3}
+          maxFileNameLength={20}
+          maxTotalFileSizeBytes={10485760}
+          invalidFileTypeMessage="Invalid file format. Please upload .doc, .docx, or .pdf files."
+          instructions="Upload files (max 3 files, 10MB total, filename max 20 chars)"
+        />
+      </DemoExample>
+
+      <DemoExample
+        title="Custom Messages"
+        description="Customize success, error, and drag-over messages."
+      >
+        <ModusFileDropzone
+          acceptFileTypes=".jpg, .jpeg, .png, .gif"
+          multiple
+          instructions="Upload your images here"
+          fileDraggedOverInstructions="Release to upload your images"
+          successMessage="Images uploaded successfully!"
+          invalidFileTypeMessage="Only image files (.jpg, .png, .gif) are allowed"
+        />
+      </DemoExample>
+
+      <DemoExample
+        title="With Progress Indicator"
+        description="Add custom content like progress bars using the slot."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusFileDropzone
+            acceptFileTypes=".pdf, .doc, .docx"
+            successMessage="Files ready for upload!"
+            instructions="Drag files here or browse to upload"
+            onFileSelect={simulateUpload}
+          >
+            {uploadProgress > 0 && uploadProgress < 100 && (
+              <div className="w-64 mt-4">
+                <ModusProgress
+                  value={uploadProgress}
+                  label={`${uploadProgress}% Uploaded`}
+                />
+              </div>
+            )}
+          </ModusFileDropzone>
+          {uploadProgress === 100 && (
+            <div className="text-sm text-success">Upload complete!</div>
+          )}
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Without State Icon"
+        description="Hide the upload/success/error icons for a minimal appearance."
+      >
+        <ModusFileDropzone
+          acceptFileTypes=".csv, .xlsx"
+          includeStateIcon={false}
+          instructions="Drop spreadsheet files here (.csv, .xlsx)"
+        />
+      </DemoExample>
+
+      <DemoExample
+        title="Disabled State"
+        description="Disable the dropzone when file upload is not available."
+      >
+        <ModusFileDropzone
+          disabled
+          instructions="File upload is currently disabled"
+        />
+      </DemoExample>
+
+      <DemoExample
+        title="Programmatic Reset"
+        description="Reset the dropzone state using a ref."
+      >
+        <div className="flex flex-col gap-4">
+          <ModusFileDropzone
+            ref={dropzoneRef}
+            acceptFileTypes=".txt, .md"
+            instructions="Upload text files, then use the reset button"
+          />
+          <ModusButton
+            variant="outlined"
+            color="secondary"
+            onButtonClick={handleReset}
+          >
+            Reset Dropzone
+          </ModusButton>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,313 @@
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusHandle from "../../components/ModusHandle";
+
+export default function HandleDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Handle"
+      description="Handle is a draggable component for resizing adjacent elements. It supports both bar and button styles, horizontal and vertical orientations, and keyboard navigation."
+    >
+      <DemoExample
+        title="Horizontal Bar Handle"
+        description="Drag the handle to resize the left and right panels."
+      >
+        <div className="flex h-64 border border-border rounded-lg overflow-hidden">
+          <div id="h-left-panel-1" className="bg-card p-4 min-w-24 w-[200px]">
+            <div className="text-sm font-medium text-foreground">
+              Left Panel
+            </div>
+            <div className="text-xs text-muted-foreground mt-2">
+              Drag the handle to resize
+            </div>
+          </div>
+          <ModusHandle
+            orientation="horizontal"
+            leftTarget="#h-left-panel-1"
+            rightTarget="#h-right-panel-1"
+          />
+          <div id="h-right-panel-1" className="bg-muted p-4 flex-1 min-w-24">
+            <div className="text-sm font-medium text-foreground">
+              Right Panel
+            </div>
+            <div className="text-xs text-muted-foreground mt-2">
+              This panel resizes automatically
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Vertical Bar Handle"
+        description="Resize panels vertically by dragging up or down."
+      >
+        <div className="flex flex-col h-80 border border-border rounded-lg overflow-hidden">
+          <div id="v-top-panel-1" className="bg-card p-4 min-h-16 h-[120px]">
+            <div className="text-sm font-medium text-foreground">Top Panel</div>
+            <div className="text-xs text-muted-foreground mt-2">
+              Drag the handle below to resize
+            </div>
+          </div>
+          <ModusHandle
+            orientation="vertical"
+            leftTarget="#v-top-panel-1"
+            rightTarget="#v-bottom-panel-1"
+          />
+          <div id="v-bottom-panel-1" className="bg-muted p-4 flex-1 min-h-16">
+            <div className="text-sm font-medium text-foreground">
+              Bottom Panel
+            </div>
+            <div className="text-xs text-muted-foreground mt-2">
+              This panel resizes automatically
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Button Type Handle"
+        description="A button-style handle with a drag icon for better visibility."
+      >
+        <div className="flex h-64 border border-border rounded-lg overflow-hidden">
+          <div id="btn-left-panel" className="bg-card p-4 min-w-24 w-[200px]">
+            <div className="text-sm font-medium text-foreground">Panel A</div>
+            <div className="text-xs text-muted-foreground mt-2">
+              Button handle style
+            </div>
+          </div>
+          <ModusHandle
+            type="button"
+            orientation="horizontal"
+            buttonColor="primary"
+            buttonVariant="outlined"
+            leftTarget="#btn-left-panel"
+            rightTarget="#btn-right-panel"
+          />
+          <div id="btn-right-panel" className="bg-muted p-4 flex-1 min-w-24">
+            <div className="text-sm font-medium text-foreground">Panel B</div>
+            <div className="text-xs text-muted-foreground mt-2">
+              Click and drag the button
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Button Handle Variants"
+        description="Different button colors and styles for the handle."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="btn-var-left-1" className="bg-card p-4 min-w-20 w-[120px]">
+              <div className="text-xs font-medium text-foreground">
+                Primary Filled
+              </div>
+            </div>
+            <ModusHandle
+              type="button"
+              orientation="horizontal"
+              buttonColor="primary"
+              buttonVariant="filled"
+              leftTarget="#btn-var-left-1"
+              rightTarget="#btn-var-right-1"
+            />
+            <div id="btn-var-right-1" className="bg-muted p-4 flex-1 min-w-20">
+              <div className="text-xs text-muted-foreground">Resize me</div>
+            </div>
+          </div>
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="btn-var-left-2" className="bg-card p-4 min-w-20 w-[120px]">
+              <div className="text-xs font-medium text-foreground">
+                Secondary Outlined
+              </div>
+            </div>
+            <ModusHandle
+              type="button"
+              orientation="horizontal"
+              buttonColor="secondary"
+              buttonVariant="outlined"
+              leftTarget="#btn-var-left-2"
+              rightTarget="#btn-var-right-2"
+            />
+            <div id="btn-var-right-2" className="bg-muted p-4 flex-1 min-w-20">
+              <div className="text-xs text-muted-foreground">Resize me</div>
+            </div>
+          </div>
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="btn-var-left-3" className="bg-card p-4 min-w-20 w-[120px]">
+              <div className="text-xs font-medium text-foreground">
+                Tertiary Borderless
+              </div>
+            </div>
+            <ModusHandle
+              type="button"
+              orientation="horizontal"
+              buttonColor="tertiary"
+              buttonVariant="borderless"
+              leftTarget="#btn-var-left-3"
+              rightTarget="#btn-var-right-3"
+            />
+            <div id="btn-var-right-3" className="bg-muted p-4 flex-1 min-w-20">
+              <div className="text-xs text-muted-foreground">Resize me</div>
+            </div>
+          </div>
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="btn-var-left-4" className="bg-card p-4 min-w-20 w-[120px]">
+              <div className="text-xs font-medium text-foreground">
+                Warning Filled
+              </div>
+            </div>
+            <ModusHandle
+              type="button"
+              orientation="horizontal"
+              buttonColor="warning"
+              buttonVariant="filled"
+              leftTarget="#btn-var-left-4"
+              rightTarget="#btn-var-right-4"
+            />
+            <div id="btn-var-right-4" className="bg-muted p-4 flex-1 min-w-20">
+              <div className="text-xs text-muted-foreground">Resize me</div>
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Handle Sizes"
+        description="Different bar sizes for the handle component."
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="flex h-40 border border-border rounded-lg overflow-hidden">
+            <div id="size-left-1" className="bg-card p-4 min-w-20 w-[100px]">
+              <div className="text-xs font-medium text-foreground">Default</div>
+            </div>
+            <ModusHandle
+              size="default"
+              orientation="horizontal"
+              leftTarget="#size-left-1"
+              rightTarget="#size-right-1"
+            />
+            <div id="size-right-1" className="bg-muted p-4 flex-1 min-w-20" />
+          </div>
+          <div className="flex h-40 border border-border rounded-lg overflow-hidden">
+            <div id="size-left-2" className="bg-card p-4 min-w-20 w-[100px]">
+              <div className="text-xs font-medium text-foreground">Large</div>
+            </div>
+            <ModusHandle
+              size="lg"
+              orientation="horizontal"
+              leftTarget="#size-left-2"
+              rightTarget="#size-right-2"
+            />
+            <div id="size-right-2" className="bg-muted p-4 flex-1 min-w-20" />
+          </div>
+          <div className="flex h-40 border border-border rounded-lg overflow-hidden">
+            <div id="size-left-3" className="bg-card p-4 min-w-20 w-[100px]">
+              <div className="text-xs font-medium text-foreground">
+                Extra Large
+              </div>
+            </div>
+            <ModusHandle
+              size="xl"
+              orientation="horizontal"
+              leftTarget="#size-left-3"
+              rightTarget="#size-right-3"
+            />
+            <div id="size-right-3" className="bg-muted p-4 flex-1 min-w-20" />
+          </div>
+          <div className="flex h-40 border border-border rounded-lg overflow-hidden">
+            <div id="size-left-4" className="bg-card p-4 min-w-20 w-[100px]">
+              <div className="text-xs font-medium text-foreground">
+                2X Large
+              </div>
+            </div>
+            <ModusHandle
+              size="2xl"
+              orientation="horizontal"
+              leftTarget="#size-left-4"
+              rightTarget="#size-right-4"
+            />
+            <div id="size-right-4" className="bg-muted p-4 flex-1 min-w-20" />
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Custom Default Split"
+        description="Set the initial split percentage for panels."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="text-sm text-muted-foreground">30/70 Split</div>
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="split-left-1" className="bg-card p-4 min-w-20">
+              <div className="text-xs font-medium text-foreground">30%</div>
+            </div>
+            <ModusHandle
+              orientation="horizontal"
+              defaultSplit={30}
+              leftTarget="#split-left-1"
+              rightTarget="#split-right-1"
+            />
+            <div id="split-right-1" className="bg-muted p-4 flex-1 min-w-20">
+              <div className="text-xs font-medium text-foreground">70%</div>
+            </div>
+          </div>
+          <div className="text-sm text-muted-foreground">70/30 Split</div>
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="split-left-2" className="bg-card p-4 min-w-20">
+              <div className="text-xs font-medium text-foreground">70%</div>
+            </div>
+            <ModusHandle
+              orientation="horizontal"
+              defaultSplit={70}
+              leftTarget="#split-left-2"
+              rightTarget="#split-right-2"
+            />
+            <div id="split-right-2" className="bg-muted p-4 flex-1 min-w-20">
+              <div className="text-xs font-medium text-foreground">30%</div>
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Keyboard Navigation"
+        description="The handle supports keyboard navigation for accessibility."
+      >
+        <div className="flex flex-col gap-4">
+          <div className="p-4 bg-muted rounded-lg">
+            <div className="text-sm font-medium text-foreground mb-2">
+              Keyboard Controls:
+            </div>
+            <div className="text-xs text-muted-foreground space-y-1">
+              <div>Arrow Keys: Move handle 5px per press</div>
+              <div>Shift + Arrow Keys: Move handle 15px per press</div>
+              <div>Tab: Focus the handle element</div>
+            </div>
+          </div>
+          <div className="flex h-48 border border-border rounded-lg overflow-hidden">
+            <div id="kb-left" className="bg-card p-4 min-w-24 w-[200px]">
+              <div className="text-sm font-medium text-foreground">
+                Focus Here
+              </div>
+              <div className="text-xs text-muted-foreground mt-2">
+                Tab to handle, use arrow keys
+              </div>
+            </div>
+            <ModusHandle
+              orientation="horizontal"
+              leftTarget="#kb-left"
+              rightTarget="#kb-right"
+              ariaLabel="Resize panels using arrow keys"
+            />
+            <div id="kb-right" className="bg-muted p-4 flex-1 min-w-24">
+              <div className="text-sm font-medium text-foreground">
+                Right Panel
+              </div>
+            </div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}

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

@@ -0,0 +1,72 @@
+"use client";
+
+import DemoExample from "../../components/DemoExample";
+import DemoPage from "../../components/DemoPage";
+import ModusIcon from "../../components/ModusIcon";
+
+export default function IconDemoPage() {
+  return (
+    <DemoPage
+      title="Modus Icon"
+      description="Icons provide visual communication and enhance user understanding. Use icons consistently to reinforce meaning and improve usability."
+    >
+      <DemoExample
+        title="Icon Sizes"
+        description="Different icon sizes using the Modus font scale."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusIcon name="star" size="sm" />
+            <div className="text-xs text-muted-foreground">Small (sm)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusIcon name="star" size="md" />
+            <div className="text-xs text-muted-foreground">Medium (md)</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusIcon name="star" size="lg" />
+            <div className="text-xs text-muted-foreground">Large (lg)</div>
+          </div>
+        </div>
+      </DemoExample>
+
+      <DemoExample
+        title="Status Icons"
+        description="Icons commonly used to indicate status or state."
+      >
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <ModusIcon
+              name="check_circle"
+              size="lg"
+              decorative={false}
+              ariaLabel="Success"
+              customClass="text-success"
+            />
+            <div className="text-xs text-muted-foreground">Success</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusIcon
+              name="info"
+              size="lg"
+              decorative={false}
+              ariaLabel="Info"
+              customClass="text-primary"
+            />
+            <div className="text-xs text-muted-foreground">Info</div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <ModusIcon
+              name="warning"
+              size="lg"
+              decorative={false}
+              ariaLabel="Warning"
+              customClass="text-warning"
+            />
+            <div className="text-xs text-muted-foreground">Warning</div>
+          </div>
+        </div>
+      </DemoExample>
+    </DemoPage>
+  );
+}