@assure-one/design-system 1.35.0 → 1.37.0

package/codemods/transforms/cm-09-side-drawer-to-sheet.mjs

@@ -0,0 +1,348 @@
+/**
+ * CM-09 — `SideDrawer` → `Sheet` (class R; plan §29 seq 11, registry
+ * `C-SIDEDRAWER`, lands with W5-08).
+ *
+ * W5-08 turned `SideDrawer` into a deprecated adapter over `Sheet`. A drawer
+ * with a `SideDrawer.Header` is a mechanical rewrite onto the Sheet parts;
+ * what has no Sheet equivalent is reported for a human.
+ *
+ * ## What it rewrites
+ *
+ * ```tsx
+ * <SideDrawer open={open} onClose={onClose} width="md" side="left">
+ *   <SideDrawer.Header title={name} subtitle="…" onClose={onClose} />
+ *   <SideDrawer.Body className="…">…</SideDrawer.Body>
+ *   <SideDrawer.Footer>…</SideDrawer.Footer>
+ * </SideDrawer>
+ * ```
+ *
+ * becomes
+ *
+ * ```tsx
+ * <Sheet open={open} onOpenChange={(open) => !open && onClose()}>
+ *   <SheetContent side="left" size="lg">
+ *     <SheetHeader>
+ *       <SheetTitle>{name}</SheetTitle>
+ *       <SheetDescription>…</SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody className="…">…</SheetBody>
+ *     <SheetFooter>…</SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
+ *
+ * - `onClose` → `onOpenChange`: a handler by reference is called, an arrow
+ *   with an expression body is inlined, anything else is called through
+ *   `(expr)()`
+ * - `width` → `size` on the content: `sm` → `sm` (420px), `md` → `lg`
+ *   (640px); `lg` (50vw) and the omitted default have no step and become
+ *   `xl` (760px), reported as `width-approximate`
+ * - `side` moves to the content
+ * - `SideDrawer.Header title subtitle` → `SheetHeader` with `SheetTitle` and
+ *   `SheetDescription`; the header's `onClose` is dropped because the sheet's
+ *   built-in close button (the last child of the content) closes through
+ *   `onOpenChange`; a header without `onClose` gets `showCloseButton={false}`
+ * - `SideDrawer.Body` → `SheetBody`, `SideDrawer.Footer` → `SheetFooter`
+ *   (`className` kept)
+ * - the named import follows when no `SideDrawer` element is left
+ *
+ * ## What it reports
+ *
+ * | rule                | action  | severity | why                                                                          |
+ * | ------------------- | ------- | -------- | ---------------------------------------------------------------------------- |
+ * | `renamed`           | applied | low      | root, content, parts and import rewritten                                    |
+ * | `width-approximate` | applied | medium   | `lg` / default (50vw) → `xl` (760px); set `--ds-sheet-width` for an exact width |
+ * | `header-close`      | applied | low      | the header's close button is now the sheet's built-in one                    |
+ * | `rendering`         | applied | low      | Sheet parts pad differently (`p-6` header/footer, `px-6` body; no rules between them) |
+ * | `no-header`         | review  | high     | a drawer without `SideDrawer.Header` has no title to become the `SheetTitle` |
+ * | `width-dynamic`     | review  | high     | `width={expr}` cannot be mapped to a `size` step                             |
+ * | `spread-props`      | review  | medium   | `{...props}` on the drawer or a part may carry any of the above              |
+ *
+ * Elements already on `Sheet` are not touched (idempotency). Local components
+ * with the same name are not touched; test files are skipped.
+ */
+import { analyseForms, isWithin } from "../lib/forms.mjs";
+import { applyEdits, openingOf } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-09",
+  title: "SideDrawer → Sheet (drawers with a header rewritten; the rest reported)",
+  class: "R",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-SIDEDRAWER"],
+};
+
+export const RULES = {
+  renamed: { action: "applied", severity: "low" },
+  "width-approximate": { action: "applied", severity: "medium" },
+  "header-close": { action: "applied", severity: "low" },
+  rendering: { action: "applied", severity: "low" },
+  "no-header": { action: "review", severity: "high" },
+  "width-dynamic": { action: "review", severity: "high" },
+  "spread-props": { action: "review", severity: "medium" },
+};
+
+/** `width` preset → `size` step. `lg` (50vw) has no step; `xl` is the nearest. */
+export const WIDTH_TO_SIZE = { sm: "sm", md: "lg", lg: "xl" };
+
+const PART_TO_SHEET = {
+  "SideDrawer.Header": "SheetHeader",
+  "SideDrawer.Body": "SheetBody",
+  "SideDrawer.Footer": "SheetFooter",
+};
+
+/** Children text for a title/subtitle attribute: a literal becomes text, an expression stays. */
+function childrenOf(ts, sf, attr) {
+  const init = attr.initializer;
+  if (!init) return "";
+  if (ts.isStringLiteral(init)) {
+    return /[{}<>]/.test(init.text) ? `{${init.getText(sf)}}` : init.text;
+  }
+  return init.getText(sf);
+}
+
+/** The `onOpenChange` handler that calls the drawer's `onClose` on close. */
+function closeHandler(ts, sf, attr) {
+  const init = attr.initializer;
+  const inner = init && ts.isJsxExpression(init) ? init.expression : null;
+  if (!inner) return null;
+  if (ts.isIdentifier(inner) || ts.isPropertyAccessExpression(inner)) {
+    return `(open) => !open && ${inner.getText(sf)}()`;
+  }
+  if (ts.isArrowFunction(inner) && inner.parameters.length === 0 && !ts.isBlock(inner.body)) {
+    return `(open) => !open && ${inner.body.getText(sf)}`;
+  }
+  return `(open) => !open && (${inner.getText(sf)})()`;
+}
+
+const attrsOf = (ts, sf, opening) => {
+  const map = new Map();
+  for (const attr of opening.attributes.properties) {
+    if (ts.isJsxAttribute(attr)) map.set(attr.name.getText(sf), attr);
+  }
+  return map;
+};
+
+const indentOf = (sf, node) => {
+  const text = sf.text;
+  const lineStart = text.lastIndexOf("\n", node.getStart(sf)) + 1;
+  return /^[ \t]*/.exec(text.slice(lineStart, node.getStart(sf)))[0];
+};
+
+export function transform(file, { ts }) {
+  const facts = analyseForms(ts, file.source, file.rel);
+  const sf = facts.sf;
+  const findings = [];
+  const edits = [];
+  const needed = new Set();
+  let remaining = 0;
+  let renamedAny = false;
+
+  const drawers = facts.elements.filter(
+    (el) => el.isDs && el.base === "SideDrawer" && el.component === "SideDrawer",
+  );
+
+  for (const el of drawers) {
+    const base = {
+      line: el.line,
+      registryId: "C-SIDEDRAWER",
+      match: `<${el.tag}>`,
+      component: el.component,
+      gate: null,
+      detail: {},
+    };
+    const add = (rule, detail = {}) =>
+      findings.push({ ...base, rule, ...RULES[rule], detail: { ...base.detail, ...detail } });
+
+    const parts = facts.elements.filter(
+      (p) =>
+        p.isDs &&
+        p.base === "SideDrawer" &&
+        p.component !== "SideDrawer" &&
+        isWithin(facts.elements, p.index, el.index) &&
+        !drawers.some(
+          (other) =>
+            other !== el &&
+            isWithin(facts.elements, p.index, other.index) &&
+            isWithin(facts.elements, other.index, el.index),
+        ),
+    );
+    const header = parts.find((p) => p.component === "SideDrawer.Header") ?? null;
+    const width = el.props.get("width");
+
+    let blocked = false;
+    if (el.spread || parts.some((p) => p.spread)) {
+      add("spread-props");
+      blocked = true;
+    }
+    if (width && width.expression) {
+      add("width-dynamic");
+      blocked = true;
+    }
+    if (!header || ts.isJsxElement(header.node)) {
+      add("no-header");
+      blocked = true;
+    }
+    if (blocked || !ts.isJsxElement(el.node)) {
+      remaining += 1;
+      continue;
+    }
+
+    // ── The drawer's own opening tag → <Sheet open onOpenChange> ─────────
+    const opening = el.node.openingElement;
+    const attrs = attrsOf(ts, sf, opening);
+    const inner = [];
+    inner.push({ pos: opening.tagName.getStart(sf), end: opening.tagName.getEnd(), text: "Sheet" });
+    const closing = el.node.closingElement.tagName;
+    inner.push({ pos: closing.getStart(sf), end: closing.getEnd(), text: "Sheet" });
+
+    const onClose = attrs.get("onClose");
+    if (onClose) {
+      const handler = closeHandler(ts, sf, onClose);
+      if (handler) {
+        inner.push({
+          pos: onClose.getStart(sf),
+          end: onClose.getEnd(),
+          text: `onOpenChange={${handler}}`,
+        });
+      }
+    }
+    const removeAttr = (name) => {
+      const list = opening.attributes.properties;
+      const index = list.findIndex((a) => ts.isJsxAttribute(a) && a.name.getText(sf) === name);
+      if (index < 0) return;
+      const from = index === 0 ? opening.attributes.pos : list[index - 1].getEnd();
+      inner.push({ pos: from, end: list[index].getEnd(), text: "" });
+    };
+    removeAttr("width");
+    removeAttr("side");
+
+    // ── The content: side, size, showCloseButton ─────────────────────────
+    const preset = width ? width.literals[0] : "lg";
+    const size = WIDTH_TO_SIZE[preset] ?? "xl";
+    const contentAttrs = [];
+    const side = attrs.get("side");
+    contentAttrs.push(side ? `side=${side.initializer.getText(sf)}` : 'side="right"');
+    contentAttrs.push(`size="${size}"`);
+    const headerAttrs = attrsOf(ts, sf, header.node);
+    if (!headerAttrs.has("onClose")) contentAttrs.push("showCloseButton={false}");
+    needed.add("Sheet").add("SheetContent").add("SheetHeader").add("SheetTitle");
+
+    // ── SideDrawer.Header → SheetHeader with title and description ───────
+    const headerIndent = indentOf(sf, header.node);
+    const headerRows = [];
+    headerRows.push(`<SheetTitle>${childrenOf(ts, sf, headerAttrs.get("title"))}</SheetTitle>`);
+    const subtitle = headerAttrs.get("subtitle");
+    if (subtitle) {
+      needed.add("SheetDescription");
+      const value = childrenOf(ts, sf, subtitle);
+      headerRows.push(
+        subtitle.initializer && ts.isJsxExpression(subtitle.initializer)
+          ? `{${subtitle.initializer.expression.getText(sf)} ? <SheetDescription>${value}</SheetDescription> : null}`
+          : `<SheetDescription>${value}</SheetDescription>`,
+      );
+    }
+    const headerClass = headerAttrs.get("className");
+    const headerOpen = `<SheetHeader${headerClass ? ` ${headerClass.getText(sf)}` : ""}>`;
+    inner.push({
+      pos: header.node.getStart(sf),
+      end: header.node.getEnd(),
+      text: [
+        headerOpen,
+        ...headerRows.map((row) => `${headerIndent}  ${row}`),
+        `${headerIndent}</SheetHeader>`,
+      ].join("\n"),
+    });
+
+    // ── Body / Footer → SheetBody / SheetFooter ──────────────────────────
+    for (const part of parts) {
+      if (part === header) continue;
+      const to = PART_TO_SHEET[part.component];
+      if (!to) continue;
+      needed.add(to);
+      const partOpening = openingOf(ts, part.node);
+      inner.push({
+        pos: partOpening.tagName.getStart(sf),
+        end: partOpening.tagName.getEnd(),
+        text: to,
+      });
+      if (ts.isJsxElement(part.node)) {
+        const tag = part.node.closingElement.tagName;
+        inner.push({ pos: tag.getStart(sf), end: tag.getEnd(), text: to });
+      }
+    }
+
+    // ── Assemble: apply the inner edits to the element's own text, indent
+    // the children one level and wrap them in <SheetContent>. ──────────────
+    const start = el.node.getStart(sf);
+    const end = el.node.getEnd();
+    const local = inner.map((e) => ({ ...e, pos: e.pos - start, end: e.end - start }));
+    const text = applyEdits(file.source.slice(start, end), local);
+    // Where the (edited) opening tag ends: its original length plus what the
+    // edits inside it added or removed.
+    const openingEnd = opening.getEnd() - start;
+    const openEnd = local
+      .filter((e) => e.end <= openingEnd)
+      .reduce((at, e) => at + e.text.length - (e.end - e.pos), openingEnd);
+    const closeStart = text.lastIndexOf("</Sheet>");
+    const indent = indentOf(sf, el.node);
+    const children = text.slice(openEnd, closeStart).replace(/\n(?=[^\n])/g, "\n  ");
+    const trimmed = children.replace(/\s+$/, "");
+    edits.push({
+      pos: start,
+      end,
+      text: `${text.slice(0, openEnd)}\n${indent}  <SheetContent ${contentAttrs.join(" ")}>${trimmed}\n${indent}  </SheetContent>\n${indent}${text.slice(closeStart)}`,
+    });
+
+    renamedAny = true;
+    add("renamed");
+    if (WIDTH_TO_SIZE[preset] === "xl" || !WIDTH_TO_SIZE[preset]) {
+      add("width-approximate", { width: preset, size });
+    }
+    if (headerAttrs.has("onClose")) {
+      add("header-close", {
+        header: headerAttrs.get("onClose").initializer?.getText(sf) ?? null,
+        drawer: onClose?.initializer?.getText(sf) ?? null,
+      });
+    }
+    add("rendering");
+  }
+
+  // The import: `SideDrawer` → the Sheet parts the file now uses, when no
+  // element is left on the old name.
+  if (renamedAny && remaining === 0) {
+    for (const stmt of sf.statements) {
+      if (!ts.isImportDeclaration(stmt) || !ts.isStringLiteral(stmt.moduleSpecifier)) continue;
+      if (!stmt.moduleSpecifier.text.startsWith("@assure-one/design-system")) continue;
+      const bindings = stmt.importClause?.namedBindings;
+      if (!bindings || !ts.isNamedImports(bindings)) continue;
+      const present = new Set(bindings.elements.map((e) => (e.propertyName ?? e.name).text));
+      for (const element of bindings.elements) {
+        const imported = (element.propertyName ?? element.name).text;
+        if (imported !== "SideDrawer" || element.propertyName) continue;
+        const names = [...needed].filter((n) => !present.has(n)).sort();
+        if (names.length) {
+          edits.push({ pos: element.getStart(sf), end: element.getEnd(), text: names.join(", ") });
+        } else {
+          const list = bindings.elements;
+          const index = list.indexOf(element);
+          const from = index === 0 ? element.getStart(sf) : list[index - 1].getEnd();
+          const to = index === 0 && list.length > 1 ? list[1].getStart(sf) : element.getEnd();
+          edits.push({ pos: from, end: to, text: "" });
+        }
+      }
+    }
+  }
+
+  return {
+    output: edits.length ? applyEdits(file.source, edits) : file.source,
+    findings,
+    notTransformed: [],
+    parseErrors: facts.parseErrors,
+  };
+}