docs: migrate UI docs (#13245)

* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
2025-08-20 11:42:25 +03:00
parent 5b7a041246
commit d1a1135328
748 changed files with 13079 additions and 7319 deletions
@@ -0,0 +1,48 @@
+import { Button, FocusModal, Input, Label } from "@medusajs/ui"
+import { useState } from "react"
+
+export default function FocusModalForm() {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState("")
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setOpen(false)
+  }
+
+  return (
+    <div className="flex flex-col gap-2 items-center">
+      <FocusModal open={open} onOpenChange={setOpen}>
+        <FocusModal.Trigger asChild>
+          <Button>Create Item</Button>
+        </FocusModal.Trigger>
+        <FocusModal.Content>
+          <FocusModal.Header>
+            <FocusModal.Title>Create Item</FocusModal.Title>
+          </FocusModal.Header>
+          <form onSubmit={handleSubmit} className="flex flex-col flex-1">
+            <FocusModal.Body>
+              <div className="p-6">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  value={value}
+                  onChange={(e) => setValue(e.target.value)}
+                  placeholder="Enter your name"
+                />
+              </div>
+            </FocusModal.Body>
+            <FocusModal.Footer>
+              <Button type="submit">Submit</Button>
+            </FocusModal.Footer>
+          </form>
+        </FocusModal.Content>
+      </FocusModal>
+      {value && (
+        <div className="text-ui-fg-muted">
+          Form submitted with name: {value}
+        </div>
+      )}
+    </div>
+  )
+}