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,72 @@
+import {
+  Button,
+  FocusModal,
+  Heading,
+  Table,
+  useToggleState,
+} from "@medusajs/ui"
+import { useState } from "react"
+
+export default function useToggleStateDemo() {
+  const [editOpen, showEdit, closeEdit] = useToggleState()
+  const [entityToEdit, setEntityToEdit] = useState<string>()
+
+  const entities = ["foo", "bar", "baz"]
+
+  const editEntity = (entity: string) => {
+    setEntityToEdit(entity)
+    showEdit()
+  }
+
+  const onSave = () => {
+    // do entity update, etc.
+    closeEdit()
+  }
+
+  return (
+    <>
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Entity Name</Table.HeaderCell>
+            <Table.HeaderCell className="text-right">Actions</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {entities.map((entity, index) => (
+            <Table.Row key={index}>
+              <Table.Cell>{entity}</Table.Cell>
+              <Table.Cell className="text-right">
+                <Button variant="secondary" onClick={() => editEntity(entity)}>
+                  Edit
+                </Button>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <FocusModal
+        open={editOpen}
+        onOpenChange={(modalOpened) => {
+          if (!modalOpened) {
+            closeEdit()
+          }
+        }}
+      >
+        <FocusModal.Content>
+          <FocusModal.Header>
+            <FocusModal.Title>Edit Entity</FocusModal.Title>
+          </FocusModal.Header>
+          <FocusModal.Body>
+            <div className="p-10">
+              <Heading>Edit {entityToEdit}</Heading>
+            </div>
+          </FocusModal.Body>
+          <FocusModal.Footer>
+            <Button onClick={() => onSave()}>Save</Button>
+          </FocusModal.Footer>
+        </FocusModal.Content>
+      </FocusModal>
+    </>
+  )
+}