@intlayer/design-system 5.0.5 → 5.1.0

package/dist/components/DictionaryFieldEditor/StructureView/StructureView.cjs

@@ -0,0 +1,270 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const core = require("@intlayer/core");
+const editorReact = require("@intlayer/editor-react");
+const lucideReact = require("lucide-react");
+const reactIntlayer = require("react-intlayer");
+const utils_camelCase = require("../../../utils/camelCase.cjs");
+const components_Button_Button = require("../../Button/Button.cjs");
+const components_Container_index = require("../../Container/index.cjs");
+const components_EditableField_EditableFieldInput = require("../../EditableField/EditableFieldInput.cjs");
+require("react");
+require("clsx");
+require("tailwind-merge");
+require("../../Input/Input.cjs");
+require("../../Input/Checkbox.cjs");
+const components_DictionaryFieldEditor_NodeTypeSelector = require("../NodeTypeSelector.cjs");
+const components_DictionaryFieldEditor_StructureView_structureView_content = require("./structureView.content.cjs");
+const NodeTypeView = ({
+  section,
+  dictionaryKey,
+  keyPath,
+  onNodeTypeChange: onNodeTypeChangeProp
+}) => {
+  const locales = editorReact.useConfiguration().internationalization.locales;
+  const nodeType = core.getNodeType(section);
+  const children = core.getNodeChildren(section);
+  const onNodeTypeChange = (content) => {
+    const transformedContent = core.getDefaultNode(
+      nodeType,
+      locales,
+      content
+    );
+    onNodeTypeChangeProp(transformedContent);
+  };
+  if (nodeType === core.NodeType.Translation || nodeType === core.NodeType.Condition || nodeType === core.NodeType.Enumeration) {
+    const firstKey = Object.keys(
+      section[nodeType]
+    )[0];
+    const childrenKeyPath = [
+      ...keyPath,
+      { type: nodeType, key: firstKey }
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DictionaryFieldEditor_NodeTypeSelector.NodeTypeSelector,
+        {
+          section,
+          onValueChange: (nodeType2) => onNodeTypeChangeProp(
+            core.getDefaultNode(nodeType2, locales)
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NodeTypeView,
+        {
+          section: children,
+          keyPath: childrenKeyPath,
+          dictionaryKey,
+          onNodeTypeChange
+        }
+      )
+    ] });
+  }
+  if (nodeType === core.NodeType.Array) {
+    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 }];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DictionaryFieldEditor_NodeTypeSelector.NodeTypeSelector,
+        {
+          section,
+          onValueChange: (nodeType2) => onNodeTypeChangeProp(
+            core.getDefaultNode(nodeType2, locales)
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NodeTypeView,
+        {
+          section: children,
+          keyPath: childrenKeyPath,
+          dictionaryKey,
+          onNodeTypeChange
+        }
+      )
+    ] });
+  }
+  if (nodeType === core.NodeType.Object) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_DictionaryFieldEditor_NodeTypeSelector.NodeTypeSelector,
+        {
+          section,
+          onValueChange: (nodeType2) => onNodeTypeChangeProp(
+            core.getDefaultNode(nodeType2, locales)
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-10 mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+        StructureView,
+        {
+          keyPath,
+          section,
+          dictionaryKey
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_DictionaryFieldEditor_NodeTypeSelector.NodeTypeSelector,
+    {
+      section,
+      onValueChange: (nodeType2) => onNodeTypeChangeProp(core.getDefaultNode(nodeType2, locales))
+    }
+  );
+};
+const NodeView = ({
+  sectionKey,
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { focusedContent, setFocusedContentKeyPath } = editorReact.useFocusDictionary();
+  const { renameEditedContent, addEditedContent } = editorReact.useEditedContentActions();
+  const { titleInput, deleteButton } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_StructureView_structureView_content.structureViewContent);
+  const handleRenameNodeKey = (keyName) => {
+    renameEditedContent(dictionaryKey, keyName, keyPath);
+    const prevKeyPath = keyPath.slice(0, -1);
+    const lastKeyPath = keyPath[keyPath.length - 1];
+    const newKeyPath = [
+      ...prevKeyPath,
+      { ...lastKeyPath, key: keyName }
+    ];
+    setFocusedContentKeyPath(newKeyPath);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_Container_index.Container,
+    {
+      transparency: "xl",
+      roundedSize: "xl",
+      background: "hoverable",
+      className: "w-full min-w-80 gap-2 px-5 py-2",
+      backgroundColor: "contrast",
+      "aria-selected": core.isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),
+      onClick: () => setFocusedContentKeyPath(keyPath),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components_EditableField_EditableFieldInput.EditableFieldInput,
+              {
+                name: "key",
+                "aria-label": "Key",
+                placeholder: titleInput.placeholder.value,
+                defaultValue: sectionKey,
+                onSave: (value) => handleRenameNodeKey(value),
+                variant: "invisible"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components_Button_Button.Button,
+              {
+                label: deleteButton.label.value,
+                variant: "hoverable",
+                size: "icon-sm",
+                color: "text",
+                className: "translate-x-2",
+                Icon: lucideReact.Trash,
+                onClick: () => {
+                  addEditedContent(dictionaryKey, void 0, keyPath);
+                  const parentKeyPath = keyPath.slice(0, -1);
+                  setFocusedContentKeyPath(parentKeyPath);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-neutral dark:text-neutral-dark ml-3 text-sm", children: [
+            "( ",
+            utils_camelCase.camelCaseToSentence(sectionKey),
+            " )"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NodeTypeView,
+          {
+            keyPath,
+            dictionaryKey,
+            section,
+            onNodeTypeChange: (content) => {
+              addEditedContent(dictionaryKey, content, keyPath);
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+const ObjectView = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { addNodeButton } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_StructureView_structureView_content.structureViewContent);
+  const { setFocusedContentKeyPath } = editorReact.useFocusDictionaryActions();
+  const { addEditedContent } = editorReact.useEditedContentActions();
+  if (!section || typeof section !== "object") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Not an object" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mr-auto flex flex-col gap-2", children: Object.keys(section).map((key) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      NodeView,
+      {
+        sectionKey: key,
+        section: section?.[key],
+        keyPath: [...keyPath, { type: core.NodeType.Object, key }],
+        dictionaryKey
+      }
+    ) }, key)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_Button_Button.Button,
+      {
+        label: addNodeButton.label.value,
+        variant: "hoverable",
+        size: "md",
+        color: "text",
+        Icon: lucideReact.Plus,
+        className: "w-80",
+        onClick: () => {
+          const newKey = "newKey";
+          const newKeyPath = [
+            ...keyPath,
+            { type: core.NodeType.Object, key: newKey }
+          ];
+          addEditedContent(dictionaryKey, "", newKeyPath);
+          setFocusedContentKeyPath(newKeyPath);
+        },
+        children: addNodeButton.text
+      }
+    )
+  ] });
+};
+const StructureView = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  if (!section || typeof section !== "object" || typeof section.nodeType === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      NodeView,
+      {
+        sectionKey: "content",
+        section,
+        keyPath,
+        dictionaryKey
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ObjectView,
+    {
+      section,
+      keyPath,
+      dictionaryKey
+    }
+  );
+};
+exports.ObjectView = ObjectView;
+exports.StructureView = StructureView;
+//# sourceMappingURL=StructureView.cjs.map

package/dist/components/DictionaryFieldEditor/StructureView/StructureView.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StructureView.cjs","sources":["../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type KeyPath,\n  type TypedNode,\n  type ContentNode,\n  getNodeChildren,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  getDefaultNode,\n} from '@intlayer/core';\nimport {\n  useConfiguration,\n  useEditedContentActions,\n  useFocusDictionary,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { Plus, Trash } from 'lucide-react';\nimport { type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Button } from '../../Button';\nimport { Container } from '../../Container';\nimport { EditableFieldInput } from '../../EditableField';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { structureViewContent } from './structureView.content';\n\ntype NodeTypeViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n  section,\n  dictionaryKey,\n  keyPath,\n  onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n  const locales = useConfiguration().internationalization.locales;\n  const nodeType = getNodeType(section);\n  const children = getNodeChildren(section);\n\n  const onNodeTypeChange = (content?: ContentNode) => {\n    const transformedContent = getDefaultNode(\n      nodeType,\n      locales,\n      content\n    ) as ContentNode;\n\n    onNodeTypeChangeProp(transformedContent);\n  };\n\n  if (\n    nodeType === NodeType.Translation ||\n    nodeType === NodeType.Condition ||\n    nodeType === NodeType.Enumeration\n  ) {\n    const firstKey = Object.keys(\n      (section as unknown as TypedNode)[nodeType as keyof typeof section]\n    )[0];\n    const childrenKeyPath = [\n      ...keyPath,\n      { type: nodeType, key: firstKey },\n    ] as KeyPath[];\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Array) {\n    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Object) {\n    return (\n      <>\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n        <div className=\"ml-10 mt-6\">\n          <StructureView\n            keyPath={keyPath}\n            section={section}\n            dictionaryKey={dictionaryKey}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <NodeTypeSelector\n      section={section}\n      onValueChange={(nodeType) =>\n        onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n      }\n    />\n  );\n};\n\ntype NodeWrapperProps = {\n  sectionKey: string;\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nconst NodeView: FC<NodeWrapperProps> = ({\n  sectionKey,\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n  const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n  const { titleInput, deleteButton } = useDictionary(structureViewContent);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    renameEditedContent(dictionaryKey, keyName, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: keyName } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <Container\n      transparency=\"xl\"\n      roundedSize=\"xl\"\n      background=\"hoverable\"\n      className=\"w-full min-w-80 gap-2 px-5 py-2\"\n      backgroundColor=\"contrast\"\n      aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n      onClick={() => setFocusedContentKeyPath(keyPath)}\n    >\n      <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n        <div className=\"w-full\">\n          <div className=\"flex w-full items-center justify-between gap-10\">\n            <EditableFieldInput\n              name=\"key\"\n              aria-label=\"Key\"\n              placeholder={titleInput.placeholder.value}\n              defaultValue={sectionKey}\n              onSave={(value) => handleRenameNodeKey(value)}\n              variant=\"invisible\"\n            />\n            <Button\n              label={deleteButton.label.value}\n              variant=\"hoverable\"\n              size=\"icon-sm\"\n              color=\"text\"\n              className=\"translate-x-2\"\n              Icon={Trash}\n              onClick={() => {\n                addEditedContent(dictionaryKey, undefined, keyPath);\n\n                const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                setFocusedContentKeyPath(parentKeyPath);\n              }}\n            />\n          </div>\n\n          <span className=\"text-neutral dark:text-neutral-dark ml-3 text-sm\">\n            ( {camelCaseToSentence(sectionKey)} )\n          </span>\n        </div>\n\n        <NodeTypeView\n          keyPath={keyPath}\n          dictionaryKey={dictionaryKey}\n          section={section}\n          onNodeTypeChange={(content) => {\n            addEditedContent(dictionaryKey, content, keyPath);\n          }}\n        />\n      </div>\n    </Container>\n  );\n};\n\ntype ObjectViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { addNodeButton } = useDictionary(structureViewContent);\n  const { setFocusedContentKeyPath } = useFocusDictionaryActions();\n  const { addEditedContent } = useEditedContentActions();\n\n  if (!section || typeof section !== 'object') {\n    return <div>Not an object</div>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <ul className=\"mr-auto flex flex-col gap-2\">\n        {Object.keys(section).map((key) => (\n          <li key={key} className=\"flex w-full\">\n            <NodeView\n              sectionKey={key}\n              section={section?.[key as keyof typeof section]}\n              keyPath={[...keyPath, { type: NodeType.Object, key }]}\n              dictionaryKey={dictionaryKey}\n            />\n          </li>\n        ))}\n      </ul>\n      <Button\n        label={addNodeButton.label.value}\n        variant=\"hoverable\"\n        size=\"md\"\n        color=\"text\"\n        Icon={Plus}\n        className=\"w-80\"\n        onClick={() => {\n          const newKey = 'newKey';\n          const newKeyPath = [\n            ...keyPath,\n            { type: NodeType.Object, key: newKey },\n          ] as KeyPath[];\n          addEditedContent(dictionaryKey, '', newKeyPath);\n          setFocusedContentKeyPath(newKeyPath);\n        }}\n      >\n        {addNodeButton.text}\n      </Button>\n    </div>\n  );\n};\n\ntype StructureViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  if (\n    !section ||\n    typeof section !== 'object' ||\n    typeof section.nodeType === 'string'\n  ) {\n    return (\n      <NodeView\n        sectionKey=\"content\"\n        section={section}\n        keyPath={keyPath}\n        dictionaryKey={dictionaryKey}\n      />\n    );\n  }\n\n  return (\n    <ObjectView\n      section={section}\n      keyPath={keyPath}\n      dictionaryKey={dictionaryKey}\n    />\n  );\n};\n"],"names":["useConfiguration","getNodeType","getNodeChildren","getDefaultNode","NodeType","jsxs","jsx","NodeTypeSelector","nodeType","Fragment","useFocusDictionary","useEditedContentActions","useDictionary","structureViewContent","Container","isSameKeyPath","EditableFieldInput","Button","Trash","camelCaseToSentence","useFocusDictionaryActions","Plus"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,MAAM,eAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAAM;AACE,QAAA,UAAUA,YAAAA,mBAAmB,qBAAqB;AAClD,QAAA,WAAWC,iBAAY,OAAO;AAC9B,QAAA,WAAWC,qBAAgB,OAAO;AAElC,QAAA,mBAAmB,CAAC,YAA0B;AAClD,UAAM,qBAAqBC,KAAA;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,yBAAqB,kBAAkB;AAAA,EACzC;AAGE,MAAA,aAAaC,cAAS,eACtB,aAAaA,cAAS,aACtB,aAAaA,cAAS,aACtB;AACA,UAAM,WAAW,OAAO;AAAA,MACrB,QAAiC,QAAgC;AAAA,MAClE,CAAC;AACH,UAAM,kBAAkB;AAAA,MACtB,GAAG;AAAA,MACH,EAAE,MAAM,UAAU,KAAK,SAAS;AAAA,IAClC;AAGE,WAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAAC,2BAAA;AAAA,QAACC,kDAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe,CAACC,cACd;AAAA,YACEL,KAAA,eAAeK,WAAU,OAAO;AAAA,UAAA;AAAA,QAClC;AAAA,MAEJ;AAAA,MAEAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAAA;AAIA,MAAA,aAAaF,cAAS,OAAO;AACzB,UAAA,kBAAkB,CAAC,GAAG,SAAS,EAAE,MAAM,UAAU,KAAK,GAAc;AAExE,WAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAAC,2BAAA;AAAA,QAACC,kDAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe,CAACC,cACd;AAAA,YACEL,KAAA,eAAeK,WAAU,OAAO;AAAA,UAAA;AAAA,QAClC;AAAA,MAEJ;AAAA,MAEAF,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAAA;AAIA,MAAA,aAAaF,cAAS,QAAQ;AAChC,WAEIC,2BAAA,KAAAI,qBAAA,EAAA,UAAA;AAAA,MAAAH,2BAAA;AAAA,QAACC,kDAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe,CAACC,cACd;AAAA,YACEL,KAAA,eAAeK,WAAU,OAAO;AAAA,UAAA;AAAA,QAClC;AAAA,MAEJ;AAAA,MACAF,2BAAAA,IAAC,OAAI,EAAA,WAAU,cACb,UAAAA,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA,EAEJ,CAAA;AAAA,IAAA,GACF;AAAA,EAAA;AAKF,SAAAA,2BAAA;AAAA,IAACC,kDAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAe,CAACC,cACd,qBAAqBL,KAAAA,eAAeK,WAAU,OAAO,CAAgB;AAAA,IAAA;AAAA,EAEzE;AAEJ;AASA,MAAM,WAAiC,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,gBAAgB,yBAAyB,IAAIE,+BAAmB;AACxE,QAAM,EAAE,qBAAqB,iBAAiB,IAAIC,oCAAwB;AAE1E,QAAM,EAAE,YAAY,iBAAiBC,cAAAA,cAAcC,qEAAAA,oBAAoB;AAEjE,QAAA,sBAAsB,CAAC,YAAoB;AAC3B,wBAAA,eAAe,SAAS,OAAO;AACnD,UAAM,cAAyB,QAAQ,MAAM,GAAG,EAAE;AAClD,UAAM,cAAuB,QAAQ,QAAQ,SAAS,CAAC;AACvD,UAAM,aAAwB;AAAA,MAC5B,GAAG;AAAA,MACH,EAAE,GAAG,aAAa,KAAK,QAAQ;AAAA,IACjC;AACA,6BAAyB,UAAU;AAAA,EACrC;AAGE,SAAAP,2BAAA;AAAA,IAACQ,2BAAA;AAAA,IAAA;AAAA,MACC,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,YAAW;AAAA,MACX,WAAU;AAAA,MACV,iBAAgB;AAAA,MAChB,iBAAeC,KAAAA,cAAc,SAAS,gBAAgB,WAAW,CAAA,CAAE;AAAA,MACnE,SAAS,MAAM,yBAAyB,OAAO;AAAA,MAE/C,UAAAV,2BAAA,KAAC,OAAI,EAAA,WAAU,0DACb,UAAA;AAAA,QAACA,2BAAAA,KAAA,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,UAACA,2BAAAA,KAAA,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,YAAAC,2BAAA;AAAA,cAACU,4CAAA;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,aAAa,WAAW,YAAY;AAAA,gBACpC,cAAc;AAAA,gBACd,QAAQ,CAAC,UAAU,oBAAoB,KAAK;AAAA,gBAC5C,SAAQ;AAAA,cAAA;AAAA,YACV;AAAA,YACAV,2BAAA;AAAA,cAACW,yBAAA;AAAA,cAAA;AAAA,gBACC,OAAO,aAAa,MAAM;AAAA,gBAC1B,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,MAAMC,YAAA;AAAA,gBACN,SAAS,MAAM;AACI,mCAAA,eAAe,QAAW,OAAO;AAElD,wBAAM,gBAA2B,QAAQ,MAAM,GAAG,EAAE;AACpD,2CAAyB,aAAa;AAAA,gBAAA;AAAA,cACxC;AAAA,YAAA;AAAA,UACF,GACF;AAAA,UAEAb,2BAAAA,KAAC,QAAK,EAAA,WAAU,oDAAmD,UAAA;AAAA,YAAA;AAAA,YAC9Dc,gBAAAA,oBAAoB,UAAU;AAAA,YAAE;AAAA,UAAA,EACrC,CAAA;AAAA,QAAA,GACF;AAAA,QAEAb,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,kBAAkB,CAAC,YAAY;AACZ,+BAAA,eAAe,SAAS,OAAO;AAAA,YAAA;AAAA,UAClD;AAAA,QAAA;AAAA,MACF,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;AAQO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,cAAA,IAAkBM,cAAA,cAAcC,yFAAoB;AACtD,QAAA,EAAE,yBAAyB,IAAIO,sCAA0B;AACzD,QAAA,EAAE,iBAAiB,IAAIT,oCAAwB;AAErD,MAAI,CAAC,WAAW,OAAO,YAAY,UAAU;AACpC,WAAAL,2BAAA,IAAC,SAAI,UAAa,gBAAA,CAAA;AAAA,EAAA;AAIzB,SAAAD,2BAAA,KAAC,OAAI,EAAA,WAAU,uBACb,UAAA;AAAA,IAAAC,2BAAA,IAAC,MAAG,EAAA,WAAU,+BACX,UAAA,OAAO,KAAK,OAAO,EAAE,IAAI,CAAC,QACxBA,+BAAA,MAAA,EAAa,WAAU,eACtB,UAAAA,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ,SAAS,UAAU,GAA2B;AAAA,QAC9C,SAAS,CAAC,GAAG,SAAS,EAAE,MAAMF,cAAS,QAAQ,KAAK;AAAA,QACpD;AAAA,MAAA;AAAA,IAAA,KALK,GAOT,CACD,GACH;AAAA,IACAE,2BAAA;AAAA,MAACW,yBAAA;AAAA,MAAA;AAAA,QACC,OAAO,cAAc,MAAM;AAAA,QAC3B,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,MAAMI,YAAA;AAAA,QACN,WAAU;AAAA,QACV,SAAS,MAAM;AACb,gBAAM,SAAS;AACf,gBAAM,aAAa;AAAA,YACjB,GAAG;AAAA,YACH,EAAE,MAAMjB,KAAAA,SAAS,QAAQ,KAAK,OAAO;AAAA,UACvC;AACiB,2BAAA,eAAe,IAAI,UAAU;AAC9C,mCAAyB,UAAU;AAAA,QACrC;AAAA,QAEC,UAAc,cAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB,GACF;AAEJ;AAQO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEF,MAAA,CAAC,WACD,OAAO,YAAY,YACnB,OAAO,QAAQ,aAAa,UAC5B;AAEE,WAAAE,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAKF,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;;;"}

package/dist/components/DictionaryFieldEditor/StructureView/StructureView.d.ts

@@ -0,0 +1,16 @@
+import { KeyPath, ContentNode } from '@intlayer/core';
+import { FC } from 'react';
+type ObjectViewProps = {
+    dictionaryKey: string;
+    keyPath: KeyPath[];
+    section: ContentNode;
+};
+export declare const ObjectView: FC<ObjectViewProps>;
+type StructureViewProps = {
+    dictionaryKey: string;
+    keyPath: KeyPath[];
+    section: ContentNode;
+};
+export declare const StructureView: FC<StructureViewProps>;
+export {};
+//# sourceMappingURL=StructureView.d.ts.map

package/dist/components/DictionaryFieldEditor/StructureView/StructureView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StructureView.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,OAAO,EAEZ,KAAK,WAAW,EAMjB,MAAM,gBAAgB,CAAC;AAQxB,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiNhC,KAAK,eAAe,GAAG;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgD1C,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2BhD,CAAC"}

package/dist/components/DictionaryFieldEditor/StructureView/StructureView.mjs

@@ -0,0 +1,270 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { NodeType, isSameKeyPath, getNodeType, getNodeChildren, getDefaultNode } from "@intlayer/core";
+import { useFocusDictionaryActions, useEditedContentActions, useFocusDictionary, useConfiguration } from "@intlayer/editor-react";
+import { Plus, Trash } from "lucide-react";
+import { useDictionary } from "react-intlayer";
+import { camelCaseToSentence } from "../../../utils/camelCase.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { Container } from "../../Container/index.mjs";
+import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
+import "react";
+import "clsx";
+import "tailwind-merge";
+import "../../Input/Input.mjs";
+import "../../Input/Checkbox.mjs";
+import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
+import { structureViewContent } from "./structureView.content.mjs";
+const NodeTypeView = ({
+  section,
+  dictionaryKey,
+  keyPath,
+  onNodeTypeChange: onNodeTypeChangeProp
+}) => {
+  const locales = useConfiguration().internationalization.locales;
+  const nodeType = getNodeType(section);
+  const children = getNodeChildren(section);
+  const onNodeTypeChange = (content) => {
+    const transformedContent = getDefaultNode(
+      nodeType,
+      locales,
+      content
+    );
+    onNodeTypeChangeProp(transformedContent);
+  };
+  if (nodeType === NodeType.Translation || nodeType === NodeType.Condition || nodeType === NodeType.Enumeration) {
+    const firstKey = Object.keys(
+      section[nodeType]
+    )[0];
+    const childrenKeyPath = [
+      ...keyPath,
+      { type: nodeType, key: firstKey }
+    ];
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(
+        NodeTypeSelector,
+        {
+          section,
+          onValueChange: (nodeType2) => onNodeTypeChangeProp(
+            getDefaultNode(nodeType2, locales)
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NodeTypeView,
+        {
+          section: children,
+          keyPath: childrenKeyPath,
+          dictionaryKey,
+          onNodeTypeChange
+        }
+      )
+    ] });
+  }
+  if (nodeType === NodeType.Array) {
+    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 }];
+    return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(
+        NodeTypeSelector,
+        {
+          section,
+          onValueChange: (nodeType2) => onNodeTypeChangeProp(
+            getDefaultNode(nodeType2, locales)
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NodeTypeView,
+        {
+          section: children,
+          keyPath: childrenKeyPath,
+          dictionaryKey,
+          onNodeTypeChange
+        }
+      )
+    ] });
+  }
+  if (nodeType === NodeType.Object) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        NodeTypeSelector,
+        {
+          section,
+          onValueChange: (nodeType2) => onNodeTypeChangeProp(
+            getDefaultNode(nodeType2, locales)
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "ml-10 mt-6", children: /* @__PURE__ */ jsx(
+        StructureView,
+        {
+          keyPath,
+          section,
+          dictionaryKey
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    NodeTypeSelector,
+    {
+      section,
+      onValueChange: (nodeType2) => onNodeTypeChangeProp(getDefaultNode(nodeType2, locales))
+    }
+  );
+};
+const NodeView = ({
+  sectionKey,
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
+  const { renameEditedContent, addEditedContent } = useEditedContentActions();
+  const { titleInput, deleteButton } = useDictionary(structureViewContent);
+  const handleRenameNodeKey = (keyName) => {
+    renameEditedContent(dictionaryKey, keyName, keyPath);
+    const prevKeyPath = keyPath.slice(0, -1);
+    const lastKeyPath = keyPath[keyPath.length - 1];
+    const newKeyPath = [
+      ...prevKeyPath,
+      { ...lastKeyPath, key: keyName }
+    ];
+    setFocusedContentKeyPath(newKeyPath);
+  };
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      transparency: "xl",
+      roundedSize: "xl",
+      background: "hoverable",
+      className: "w-full min-w-80 gap-2 px-5 py-2",
+      backgroundColor: "contrast",
+      "aria-selected": isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),
+      onClick: () => setFocusedContentKeyPath(keyPath),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-10", children: [
+            /* @__PURE__ */ jsx(
+              EditableFieldInput,
+              {
+                name: "key",
+                "aria-label": "Key",
+                placeholder: titleInput.placeholder.value,
+                defaultValue: sectionKey,
+                onSave: (value) => handleRenameNodeKey(value),
+                variant: "invisible"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: deleteButton.label.value,
+                variant: "hoverable",
+                size: "icon-sm",
+                color: "text",
+                className: "translate-x-2",
+                Icon: Trash,
+                onClick: () => {
+                  addEditedContent(dictionaryKey, void 0, keyPath);
+                  const parentKeyPath = keyPath.slice(0, -1);
+                  setFocusedContentKeyPath(parentKeyPath);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "text-neutral dark:text-neutral-dark ml-3 text-sm", children: [
+            "( ",
+            camelCaseToSentence(sectionKey),
+            " )"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          NodeTypeView,
+          {
+            keyPath,
+            dictionaryKey,
+            section,
+            onNodeTypeChange: (content) => {
+              addEditedContent(dictionaryKey, content, keyPath);
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+const ObjectView = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { addNodeButton } = useDictionary(structureViewContent);
+  const { setFocusedContentKeyPath } = useFocusDictionaryActions();
+  const { addEditedContent } = useEditedContentActions();
+  if (!section || typeof section !== "object") {
+    return /* @__PURE__ */ jsx("div", { children: "Not an object" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("ul", { className: "mr-auto flex flex-col gap-2", children: Object.keys(section).map((key) => /* @__PURE__ */ jsx("li", { className: "flex w-full", children: /* @__PURE__ */ jsx(
+      NodeView,
+      {
+        sectionKey: key,
+        section: section?.[key],
+        keyPath: [...keyPath, { type: NodeType.Object, key }],
+        dictionaryKey
+      }
+    ) }, key)) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        label: addNodeButton.label.value,
+        variant: "hoverable",
+        size: "md",
+        color: "text",
+        Icon: Plus,
+        className: "w-80",
+        onClick: () => {
+          const newKey = "newKey";
+          const newKeyPath = [
+            ...keyPath,
+            { type: NodeType.Object, key: newKey }
+          ];
+          addEditedContent(dictionaryKey, "", newKeyPath);
+          setFocusedContentKeyPath(newKeyPath);
+        },
+        children: addNodeButton.text
+      }
+    )
+  ] });
+};
+const StructureView = ({
+  section,
+  keyPath,
+  dictionaryKey
+}) => {
+  if (!section || typeof section !== "object" || typeof section.nodeType === "string") {
+    return /* @__PURE__ */ jsx(
+      NodeView,
+      {
+        sectionKey: "content",
+        section,
+        keyPath,
+        dictionaryKey
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ObjectView,
+    {
+      section,
+      keyPath,
+      dictionaryKey
+    }
+  );
+};
+export {
+  ObjectView,
+  StructureView
+};
+//# sourceMappingURL=StructureView.mjs.map

package/dist/components/DictionaryFieldEditor/StructureView/StructureView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StructureView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type KeyPath,\n  type TypedNode,\n  type ContentNode,\n  getNodeChildren,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  getDefaultNode,\n} from '@intlayer/core';\nimport {\n  useConfiguration,\n  useEditedContentActions,\n  useFocusDictionary,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { Plus, Trash } from 'lucide-react';\nimport { type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Button } from '../../Button';\nimport { Container } from '../../Container';\nimport { EditableFieldInput } from '../../EditableField';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { structureViewContent } from './structureView.content';\n\ntype NodeTypeViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n  section,\n  dictionaryKey,\n  keyPath,\n  onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n  const locales = useConfiguration().internationalization.locales;\n  const nodeType = getNodeType(section);\n  const children = getNodeChildren(section);\n\n  const onNodeTypeChange = (content?: ContentNode) => {\n    const transformedContent = getDefaultNode(\n      nodeType,\n      locales,\n      content\n    ) as ContentNode;\n\n    onNodeTypeChangeProp(transformedContent);\n  };\n\n  if (\n    nodeType === NodeType.Translation ||\n    nodeType === NodeType.Condition ||\n    nodeType === NodeType.Enumeration\n  ) {\n    const firstKey = Object.keys(\n      (section as unknown as TypedNode)[nodeType as keyof typeof section]\n    )[0];\n    const childrenKeyPath = [\n      ...keyPath,\n      { type: nodeType, key: firstKey },\n    ] as KeyPath[];\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Array) {\n    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Object) {\n    return (\n      <>\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n        <div className=\"ml-10 mt-6\">\n          <StructureView\n            keyPath={keyPath}\n            section={section}\n            dictionaryKey={dictionaryKey}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <NodeTypeSelector\n      section={section}\n      onValueChange={(nodeType) =>\n        onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n      }\n    />\n  );\n};\n\ntype NodeWrapperProps = {\n  sectionKey: string;\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nconst NodeView: FC<NodeWrapperProps> = ({\n  sectionKey,\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n  const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n  const { titleInput, deleteButton } = useDictionary(structureViewContent);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    renameEditedContent(dictionaryKey, keyName, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: keyName } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <Container\n      transparency=\"xl\"\n      roundedSize=\"xl\"\n      background=\"hoverable\"\n      className=\"w-full min-w-80 gap-2 px-5 py-2\"\n      backgroundColor=\"contrast\"\n      aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n      onClick={() => setFocusedContentKeyPath(keyPath)}\n    >\n      <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n        <div className=\"w-full\">\n          <div className=\"flex w-full items-center justify-between gap-10\">\n            <EditableFieldInput\n              name=\"key\"\n              aria-label=\"Key\"\n              placeholder={titleInput.placeholder.value}\n              defaultValue={sectionKey}\n              onSave={(value) => handleRenameNodeKey(value)}\n              variant=\"invisible\"\n            />\n            <Button\n              label={deleteButton.label.value}\n              variant=\"hoverable\"\n              size=\"icon-sm\"\n              color=\"text\"\n              className=\"translate-x-2\"\n              Icon={Trash}\n              onClick={() => {\n                addEditedContent(dictionaryKey, undefined, keyPath);\n\n                const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                setFocusedContentKeyPath(parentKeyPath);\n              }}\n            />\n          </div>\n\n          <span className=\"text-neutral dark:text-neutral-dark ml-3 text-sm\">\n            ( {camelCaseToSentence(sectionKey)} )\n          </span>\n        </div>\n\n        <NodeTypeView\n          keyPath={keyPath}\n          dictionaryKey={dictionaryKey}\n          section={section}\n          onNodeTypeChange={(content) => {\n            addEditedContent(dictionaryKey, content, keyPath);\n          }}\n        />\n      </div>\n    </Container>\n  );\n};\n\ntype ObjectViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { addNodeButton } = useDictionary(structureViewContent);\n  const { setFocusedContentKeyPath } = useFocusDictionaryActions();\n  const { addEditedContent } = useEditedContentActions();\n\n  if (!section || typeof section !== 'object') {\n    return <div>Not an object</div>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <ul className=\"mr-auto flex flex-col gap-2\">\n        {Object.keys(section).map((key) => (\n          <li key={key} className=\"flex w-full\">\n            <NodeView\n              sectionKey={key}\n              section={section?.[key as keyof typeof section]}\n              keyPath={[...keyPath, { type: NodeType.Object, key }]}\n              dictionaryKey={dictionaryKey}\n            />\n          </li>\n        ))}\n      </ul>\n      <Button\n        label={addNodeButton.label.value}\n        variant=\"hoverable\"\n        size=\"md\"\n        color=\"text\"\n        Icon={Plus}\n        className=\"w-80\"\n        onClick={() => {\n          const newKey = 'newKey';\n          const newKeyPath = [\n            ...keyPath,\n            { type: NodeType.Object, key: newKey },\n          ] as KeyPath[];\n          addEditedContent(dictionaryKey, '', newKeyPath);\n          setFocusedContentKeyPath(newKeyPath);\n        }}\n      >\n        {addNodeButton.text}\n      </Button>\n    </div>\n  );\n};\n\ntype StructureViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  if (\n    !section ||\n    typeof section !== 'object' ||\n    typeof section.nodeType === 'string'\n  ) {\n    return (\n      <NodeView\n        sectionKey=\"content\"\n        section={section}\n        keyPath={keyPath}\n        dictionaryKey={dictionaryKey}\n      />\n    );\n  }\n\n  return (\n    <ObjectView\n      section={section}\n      keyPath={keyPath}\n      dictionaryKey={dictionaryKey}\n    />\n  );\n};\n"],"names":["nodeType"],"mappings":"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"}