@jxsuite/studio 0.0.1 → 0.5.0

package/src/settings/collections-editor.js

@@ -0,0 +1,428 @@
+/**
+ * Collections Editor — visual schema builder for project content collections.
+ *
+ * Renders inside the Settings view "Collections" tab. Two-column layout: left column lists
+ * collection names, right column edits the selected collection's schema.
+ */
+
+import { html, render as litRender } from "lit-html";
+import { getPlatform } from "../platform.js";
+import { projectState } from "../store.js";
+import { fieldCardTpl, addFieldFormTpl, schemaForType } from "./schema-field-ui.js";
+
+// ─── Module state ─────────────────────────────────────────────────────────────
+
+/** @type {string | null} */
+let selectedCollection = null;
+let showAddField = false;
+let newFieldState = { name: "", type: "string", required: false };
+let showNewCollection = false;
+let newCollectionName = "";
+
+// ─── Persistence ──────────────────────────────────────────────────────────────
+
+async function saveProjectConfig() {
+  const platform = getPlatform();
+  const config = /** @type {any} */ (projectState).projectConfig;
+  await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+/** Get the schema object for the selected collection. */
+function getSelectedSchema() {
+  const config = projectState?.projectConfig;
+  return config?.collections?.[/** @type {string} */ (selectedCollection)]?.schema;
+}
+
+// ─── Handlers ─────────────────────────────────────────────────────────────────
+
+/** @param {() => void} rerender */
+function handleNewCollection(rerender) {
+  const slug = newCollectionName
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9-]/g, "");
+  if (!slug) return;
+
+  const config = projectState?.projectConfig;
+  if (!config) return;
+  if (!config.collections) config.collections = {};
+  if (config.collections[slug]) return; // already exists
+
+  config.collections[slug] = {
+    source: `./${slug}/**/*.md`,
+    schema: { type: "object", properties: {}, required: [] },
+  };
+
+  selectedCollection = slug;
+  showNewCollection = false;
+  newCollectionName = "";
+  rerender();
+
+  // Persist in background
+  saveProjectConfig().then(async () => {
+    const platform = getPlatform();
+    await platform.writeFile(`${slug}/.gitkeep`, "");
+  });
+}
+
+/** @param {() => void} rerender */
+function handleAddField(rerender) {
+  const name = newFieldState.name.trim();
+  if (!name || !selectedCollection) return;
+
+  const schema = getSelectedSchema();
+  if (!schema) return;
+
+  if (!schema.properties) schema.properties = {};
+  schema.properties[name] = schemaForType(newFieldState.type);
+
+  if (newFieldState.required) {
+    if (!schema.required) schema.required = [];
+    if (!schema.required.includes(name)) schema.required.push(name);
+  }
+
+  showAddField = false;
+  newFieldState = { name: "", type: "string", required: false };
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {() => void} rerender
+ */
+function handleDeleteField(fieldName, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties) return;
+
+  delete schema.properties[fieldName];
+  if (schema.required) {
+    schema.required = schema.required.filter((/** @type {string} */ r) => r !== fieldName);
+  }
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {() => void} rerender
+ */
+function handleToggleRequired(fieldName, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema) return;
+  if (!schema.required) schema.required = [];
+
+  const idx = schema.required.indexOf(fieldName);
+  if (idx >= 0) schema.required.splice(idx, 1);
+  else schema.required.push(fieldName);
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} oldName
+ * @param {string} newName
+ * @param {() => void} rerender
+ */
+function handleRenameField(oldName, newName, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties || !newName || schema.properties[newName]) return;
+
+  /** @type {Record<string, any>} */
+  const newProps = {};
+  for (const [key, val] of Object.entries(schema.properties)) {
+    newProps[key === oldName ? newName : key] = val;
+  }
+  schema.properties = newProps;
+
+  if (schema.required) {
+    schema.required = schema.required.map((/** @type {string} */ r) =>
+      r === oldName ? newName : r,
+    );
+  }
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {string} newType
+ * @param {() => void} rerender
+ */
+function handleChangeType(fieldName, newType, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties?.[fieldName]) return;
+
+  schema.properties[fieldName] = schemaForType(newType);
+  rerender();
+  saveProjectConfig();
+}
+
+// ─── Nested field handlers ───────────────────────────────────────────────────
+
+/**
+ * @param {string} parentName
+ * @param {{ name: string; type: string; required: boolean }} fieldState
+ * @param {() => void} rerender
+ */
+function handleAddNestedField(parentName, fieldState, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent) return;
+
+  if (!parent.properties) parent.properties = {};
+  parent.properties[fieldState.name] = schemaForType(fieldState.type);
+
+  if (fieldState.required) {
+    if (!parent.required) parent.required = [];
+    if (!parent.required.includes(fieldState.name)) parent.required.push(fieldState.name);
+  }
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {() => void} rerender
+ */
+function handleDeleteNested(parentName, childName, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent?.properties) return;
+
+  delete parent.properties[childName];
+  if (parent.required) {
+    parent.required = parent.required.filter((/** @type {string} */ r) => r !== childName);
+  }
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {() => void} rerender
+ */
+function handleToggleNestedRequired(parentName, childName, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent) return;
+  if (!parent.required) parent.required = [];
+
+  const idx = parent.required.indexOf(childName);
+  if (idx >= 0) parent.required.splice(idx, 1);
+  else parent.required.push(childName);
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} oldChild
+ * @param {string} newChild
+ * @param {() => void} rerender
+ */
+function handleRenameNested(parentName, oldChild, newChild, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent?.properties || !newChild || parent.properties[newChild]) return;
+
+  /** @type {Record<string, any>} */
+  const newProps = {};
+  for (const [key, val] of Object.entries(parent.properties)) {
+    newProps[key === oldChild ? newChild : key] = val;
+  }
+  parent.properties = newProps;
+
+  if (parent.required) {
+    parent.required = parent.required.map((/** @type {string} */ r) =>
+      r === oldChild ? newChild : r,
+    );
+  }
+
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {string} newType
+ * @param {() => void} rerender
+ */
+function handleChangeNestedType(parentName, childName, newType, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent?.properties?.[childName]) return;
+
+  parent.properties[childName] = schemaForType(newType);
+  rerender();
+  saveProjectConfig();
+}
+
+/** @param {() => void} rerender */
+function handleDeleteCollection(rerender) {
+  if (!selectedCollection) return;
+  const config = projectState?.projectConfig;
+  if (!config?.collections?.[selectedCollection]) return;
+
+  delete config.collections[selectedCollection];
+  selectedCollection = null;
+
+  rerender();
+  saveProjectConfig();
+}
+
+// ─── Render ───────────────────────────────────────────────────────────────────
+
+/**
+ * Render the collections editor.
+ *
+ * @param {HTMLElement} container
+ */
+export function renderCollectionsEditor(container) {
+  const rerender = () => renderCollectionsEditor(container);
+  const config = projectState?.projectConfig;
+  const collections = config?.collections || {};
+  const collectionNames = Object.keys(collections);
+
+  // Left column — collection list
+  const listTpl = html`
+    <div class="settings-list-panel">
+      ${collectionNames.map(
+        (name) => html`
+          <sp-action-button
+            size="s"
+            ?selected=${selectedCollection === name}
+            @click=${() => {
+              selectedCollection = name;
+              showAddField = false;
+              rerender();
+            }}
+          >
+            ${name}
+          </sp-action-button>
+        `,
+      )}
+      ${showNewCollection
+        ? html`
+            <div class="settings-inline-form">
+              <sp-textfield
+                size="s"
+                placeholder="collection-name"
+                .value=${newCollectionName}
+                @input=${(/** @type {any} */ e) => {
+                  newCollectionName = e.target.value;
+                }}
+                @keydown=${(/** @type {any} */ e) => {
+                  if (e.key === "Enter") handleNewCollection(rerender);
+                  if (e.key === "Escape") {
+                    showNewCollection = false;
+                    rerender();
+                  }
+                }}
+              ></sp-textfield>
+              <sp-action-button size="s" @click=${() => handleNewCollection(rerender)}>
+                Create
+              </sp-action-button>
+            </div>
+          `
+        : html`
+            <sp-action-button
+              size="s"
+              quiet
+              @click=${() => {
+                showNewCollection = true;
+                rerender();
+              }}
+            >
+              <sp-icon-add slot="icon"></sp-icon-add> New Collection
+            </sp-action-button>
+          `}
+    </div>
+  `;
+
+  // Right column — schema editor
+  let editorTpl;
+  if (!selectedCollection || !collections[selectedCollection]) {
+    editorTpl = html`<div class="settings-empty-state">Select or create a collection</div>`;
+  } else {
+    const col = collections[selectedCollection];
+    const schema = col.schema || {};
+    const properties = schema.properties || {};
+    const required = schema.required || [];
+
+    /** @type {import("./schema-field-ui.js").FieldHandlers} */
+    const handlers = {
+      onDelete: (n) => handleDeleteField(n, rerender),
+      onToggleRequired: (n) => handleToggleRequired(n, rerender),
+      onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
+      onChangeType: (n, t) => handleChangeType(n, t, rerender),
+      onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
+      onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
+      onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
+      onRenameNested: (p, o, n) => handleRenameNested(p, o, n, rerender),
+      onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
+    };
+
+    const fieldCards = Object.entries(properties).map(([name, def]) =>
+      fieldCardTpl(name, /** @type {any} */ (def), required.includes(name), handlers),
+    );
+
+    editorTpl = html`
+      <div class="settings-editor-panel">
+        <div class="settings-editor-header">
+          <h3>${selectedCollection}</h3>
+          <sp-field-label size="s">Source: ${col.source || "—"}</sp-field-label>
+          <sp-action-button
+            size="xs"
+            quiet
+            title="Delete collection"
+            @click=${() => handleDeleteCollection(rerender)}
+          >
+            <sp-icon-delete slot="icon"></sp-icon-delete>
+          </sp-action-button>
+        </div>
+        <div class="schema-field-list">${fieldCards}</div>
+        ${showAddField
+          ? addFieldFormTpl(newFieldState, {
+              onInput: (field, value) => {
+                newFieldState = { ...newFieldState, [field]: value };
+                rerender();
+              },
+              onConfirm: () => handleAddField(rerender),
+              onCancel: () => {
+                showAddField = false;
+                newFieldState = { name: "", type: "string", required: false };
+                rerender();
+              },
+            })
+          : html`
+              <sp-action-button
+                size="s"
+                quiet
+                @click=${() => {
+                  showAddField = true;
+                  rerender();
+                }}
+              >
+                <sp-icon-add slot="icon"></sp-icon-add> Add Field
+              </sp-action-button>
+            `}
+      </div>
+    `;
+  }
+
+  const tpl = html` <div class="settings-two-col">${listTpl} ${editorTpl}</div> `;
+
+  litRender(tpl, container);
+}