Clean modal

1"use client";
2
3import {
4  Button,
5  ConfirmModal,
6  Modal,
7  ModalBody,
8  ModalFooter,
9  ModalSection,
10  ModalTitle,
11  SchemaForm,
12  Table,
13  useModal,
14} from "@versable-git/ui";
15import { useState } from "react";
16
17const RECORD_ID = "clean-modal-record";
18const FORM_ID = "clean-modal-form";
19const CONFIRM_ID = "clean-modal-confirm";
20const WIZARD_ID = "clean-modal-wizard";
21
22const NAME_SCHEMA = {
23  type: "object",
24  properties: {
25    name: { type: "string", title: "Name" },
26    email: { type: "string", title: "Notify", format: "email" },
27  },
28  required: ["name"],
29};
30
31/**
32 * The four modal shapes the flipped defaults touch: a record view with a
33 * sectioned body, a form inside `ModalBody`, a destructive confirm now
34 * rhythmed by the same component, and a wizard footer opting `divider` on
35 * to show it is still available.
36 */
37export function CleanModal() {
38  const { openModal, closeModal } = useModal();
39  const [formValue, setFormValue] = useState<Record<string, unknown>>();
40
41  return (
42    <div className="flex flex-wrap gap-3">
43      <Button size="sm" content="Record modal" Icon="Copy" onClick={() => openModal(RECORD_ID)} />
44      <Button size="sm" content="Form modal" Icon="InputForm" onClick={() => openModal(FORM_ID)} />
45      <Button size="sm" content="Destructive confirm" Icon="Trash" color="error" variant="outline" onClick={() => openModal(CONFIRM_ID)} />
46      <Button size="sm" content="Wizard footer" Icon="Right" onClick={() => openModal(WIZARD_ID)} />
47
48      <Modal elementId={RECORD_ID} size="md">
49        <ModalTitle title="Disc Brake Rotor" subtitle="SKU RT-330" identifier="prt_9f21a" Icon="PartType" />
50        <ModalBody>
51          <ModalSection label="Details">
52            <dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
53              <dt className="text-base-content/65">Brand</dt>
54              <dd>Brembo</dd>
55              <dt className="text-base-content/65">Weight</dt>
56              <dd>4.8 kg</dd>
57            </dl>
58          </ModalSection>
59          <ModalSection label="Fitment" count="2 vehicles">
60            <Table
61              density="compact"
62              columns={[
63                { key: "make", header: "Make" },
64                { key: "model", header: "Model" },
65              ]}
66              rows={[
67                { make: "Ford", model: "F-150" },
68                { make: "Ford", model: "Ranger" },
69              ]}
70              rowKey={(r) => `${r.make}-${r.model}`}
71            />
72          </ModalSection>
73        </ModalBody>
74        <ModalFooter next={{ content: "Close", onClick: () => closeModal() }} />
75      </Modal>
76
77      <Modal elementId={FORM_ID} size="sm">
78        <ModalTitle title="Add a watcher" Icon="Team" />
79        <ModalBody>
80          <SchemaForm schema={NAME_SCHEMA} value={formValue} onChange={setFormValue} />
81        </ModalBody>
82        <ModalFooter
83          back={{ content: "Cancel", onClick: () => closeModal() }}
84          next={{ content: "Save", color: "success", onClick: () => closeModal() }}
85        />
86      </Modal>
87
88      <ConfirmModal elementId={CONFIRM_ID} preset="delete" title="Delete this part?" message="This removes it from every fitment list. This cannot be undone." />
89
90      <Modal elementId={WIZARD_ID} size="sm">
91        <ModalTitle title="Import mapping" subtitle="Step 2 of 3" Icon="Workflow" />
92        <ModalBody>
93          <p className="text-base-content/70 text-sm">Match each source column to a kit field before continuing.</p>
94        </ModalBody>
95        <ModalFooter divider spread back={{ content: "Back" }} next={{ content: "Continue", color: "primary", onClick: () => closeModal() }}>
96          <Button size="sm" variant="ghost" content="Save draft" onClick={() => closeModal()} />
97        </ModalFooter>
98      </Modal>
99    </div>
100  );
101}
102