@intlayer/design-system 2.0.12 → 3.0.0

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs

@@ -0,0 +1,298 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../jsx-runtime-DvCoRj5u.cjs");
+const client = require("@intlayer/config/client");
+const core = require("@intlayer/core");
+const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const reactIntlayer = require("react-intlayer");
+const utils_camelCase = require("../../../utils/camelCase.cjs");
+const utils_dictionary = require("../../../utils/dictionary.cjs");
+const components_Accordion_Accordion = require("../../Accordion/Accordion.cjs");
+const components_Button_Button = require("../../Button/Button.cjs");
+const components_DictionaryEditor_useEditedContentStore = require("../../DictionaryEditor/useEditedContentStore.cjs");
+const components_DictionaryEditor_useEditionPanelStore = require("../../DictionaryEditor/useEditionPanelStore.cjs");
+require("clsx");
+require("tailwind-merge");
+require("../../TextArea/AutoSizeTextArea.cjs");
+require("../../TextArea/TextArea.cjs");
+const components_DictionaryFieldEditor_getIsEditableSection = require("../getIsEditableSection.cjs");
+const components_DictionaryFieldEditor_NavigationView_navigationViewNode_content = require("./navigationViewNode.content.cjs");
+const traceKeys = ["filePath", "id", "nodeType"];
+const NavigationViewNode = ({
+  section: sectionProp,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { locales } = client.getConfiguration().internationalization;
+  const section = utils_dictionary.getDictionaryValueByKeyPath(sectionProp, keyPath);
+  const addEditedContent = components_DictionaryEditor_useEditedContentStore.useEditedContentStore((s) => s.addEditedContent);
+  const { setFocusedContentKeyPath, focusedContent } = components_DictionaryEditor_useEditionPanelStore.useEditionPanelStore(
+    (s) => ({
+      setFocusedContentKeyPath: s.setFocusedContentKeyPath,
+      focusedContent: s.focusedContent
+    })
+  );
+  const {
+    addNewElement,
+    addNewField,
+    goToElement,
+    goToField,
+    goToEnumeration,
+    goToTranslation
+  } = reactIntlayer.useDictionary(components_DictionaryFieldEditor_NavigationView_navigationViewNode_content.navigationViewContent);
+  const nodeType = utils_dictionary.getSectionType(section);
+  const isEditableSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(section);
+  const getIsSelected = require$$0.useCallback(
+    (keyPath2) => (focusedContent?.keyPath?.length ?? 0) > 0 && core.isSameKeyPath(keyPath2, focusedContent?.keyPath ?? []),
+    [focusedContent?.keyPath]
+  );
+  if (isEditableSection) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
+  if (typeof section === "object") {
+    if (nodeType === core.NodeType.Translation) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
+        const childKeyPath = [
+          ...keyPath,
+          { type: core.NodeType.Translation, key: translationKey }
+        ];
+        const subSection = utils_dictionary.getDictionaryValueByKeyPath(
+          sectionProp,
+          childKeyPath
+        );
+        const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
+        if (isEditableSubSection) {
+          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            components_Button_Button.Button,
+            {
+              label: `${goToTranslation.label.value} ${translationKey}`,
+              isActive: getIsSelected(childKeyPath),
+              variant: "hoverable",
+              color: "text",
+              className: "w-full",
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              IconRight: lucideReact.ChevronRight,
+              children: translationKey
+            },
+            translationKey
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Accordion_Accordion.Accordion,
+          {
+            identifier: translationKey,
+            label: `${goToTranslation.label.value} ${translationKey}`,
+            isActive: getIsSelected(childKeyPath),
+            onClick: () => setFocusedContentKeyPath(childKeyPath),
+            header: translationKey,
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              NavigationViewNode,
+              {
+                keyPath: childKeyPath,
+                section: sectionProp,
+                dictionaryKey
+              }
+            ) }) })
+          },
+          translationKey
+        );
+      }) });
+    }
+    if (nodeType === core.NodeType.Enumeration) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: Object.keys(
+        section[core.NodeType.Enumeration]
+      ).map((key) => {
+        const childKeyPath = [
+          ...keyPath,
+          { type: core.NodeType.Enumeration, key }
+        ];
+        const subSection = utils_dictionary.getDictionaryValueByKeyPath(
+          sectionProp,
+          childKeyPath
+        );
+        const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
+        if (isEditableSubSection) {
+          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            components_Button_Button.Button,
+            {
+              label: `${goToEnumeration.label.value} ${key}`,
+              isActive: getIsSelected(childKeyPath),
+              variant: "hoverable",
+              color: "text",
+              className: "w-full",
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              IconRight: lucideReact.ChevronRight,
+              children: key
+            },
+            key
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Accordion_Accordion.Accordion,
+          {
+            identifier: key,
+            label: `${goToEnumeration.label.value} ${key}`,
+            isActive: getIsSelected(childKeyPath),
+            onClick: () => setFocusedContentKeyPath(childKeyPath),
+            header: key,
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              NavigationViewNode,
+              {
+                keyPath: childKeyPath,
+                section: sectionProp,
+                dictionaryKey
+              }
+            ) }) })
+          },
+          key
+        );
+      }) });
+    }
+    if (nodeType === core.NodeType.Array) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-between gap-2", children: [
+        section.map((subSection, index) => {
+          const childKeyPath = [
+            ...keyPath,
+            { type: core.NodeType.Array, key: index }
+          ];
+          const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
+          if (isEditableSubSection) {
+            return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              components_Button_Button.Button,
+              {
+                label: `${goToElement.label.value} ${index}`,
+                isActive: getIsSelected(childKeyPath),
+                variant: "hoverable",
+                color: "text",
+                className: "w-full",
+                onClick: () => setFocusedContentKeyPath(childKeyPath),
+                IconRight: lucideReact.ChevronRight,
+                children: index
+              },
+              `${index}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            components_Accordion_Accordion.Accordion,
+            {
+              identifier: `${index}`,
+              label: `${goToElement.label.value} ${index}`,
+              isActive: getIsSelected(childKeyPath),
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              header: index,
+              children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                NavigationViewNode,
+                {
+                  keyPath: childKeyPath,
+                  section: sectionProp,
+                  dictionaryKey
+                }
+              ) }) })
+            },
+            `${index}`
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Button_Button.Button,
+          {
+            label: addNewElement.label.value,
+            variant: "hoverable",
+            color: "neutral",
+            textAlign: "left",
+            onClick: () => {
+              const newKeyPath = [
+                ...keyPath,
+                {
+                  type: core.NodeType.Array,
+                  key: section.length
+                }
+              ];
+              addEditedContent(dictionaryKey, {}, newKeyPath, false);
+              setFocusedContentKeyPath(newKeyPath);
+            },
+            Icon: lucideReact.Plus,
+            children: addNewElement.text
+          }
+        )
+      ] });
+    }
+    const sectionArray = Object.keys(section);
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full max-w-full flex-col justify-between gap-2", children: [
+      sectionArray.map((key) => {
+        const childKeyPath = [
+          ...keyPath,
+          { type: core.NodeType.Object, key }
+        ];
+        const subSection = utils_dictionary.getDictionaryValueByKeyPath(
+          sectionProp,
+          childKeyPath
+        );
+        const isEditableSubSection = components_DictionaryFieldEditor_getIsEditableSection.getIsEditableSection(subSection);
+        if (isEditableSubSection) {
+          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            components_Button_Button.Button,
+            {
+              label: `${goToField.label.value} ${key}`,
+              isActive: getIsSelected(childKeyPath),
+              variant: "hoverable",
+              color: "text",
+              className: "w-full",
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              IconRight: lucideReact.ChevronRight,
+              children: utils_camelCase.camelCaseToSentence(key)
+            },
+            key
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          components_Accordion_Accordion.Accordion,
+          {
+            identifier: key,
+            label: `${goToField.label.value} ${key}`,
+            isActive: getIsSelected(childKeyPath),
+            onClick: () => setFocusedContentKeyPath(childKeyPath),
+            header: utils_camelCase.camelCaseToSentence(key),
+            children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              NavigationViewNode,
+              {
+                keyPath: childKeyPath,
+                section: sectionProp,
+                dictionaryKey
+              }
+            ) }) })
+          },
+          key
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        components_Button_Button.Button,
+        {
+          label: addNewField.label.value,
+          variant: "hoverable",
+          color: "neutral",
+          textAlign: "left",
+          onClick: () => {
+            const newKeyPath = [
+              ...keyPath,
+              { type: core.NodeType.Object, key: "newField" }
+            ];
+            addEditedContent(dictionaryKey, {}, newKeyPath, false);
+            setFocusedContentKeyPath(newKeyPath);
+          },
+          Icon: lucideReact.Plus,
+          children: addNewField.text
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    "Error loading section --",
+    nodeType,
+    "--",
+    JSON.stringify(section),
+    "--",
+    JSON.stringify(keyPath)
+  ] });
+};
+exports.NavigationViewNode = NavigationViewNode;
+exports.traceKeys = traceKeys;
+//# sourceMappingURL=NavigationViewNode.cjs.map

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, useMemo, type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["getConfiguration","getDictionaryValueByKeyPath","useEditedContentStore","useEditionPanelStore","useDictionary","navigationViewContent","getSectionType","getIsEditableSection","useCallback","keyPath","isSameKeyPath","jsx","Fragment","NodeType","Button","ChevronRight","Accordion","jsxs","Plus","camelCaseToSentence"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.d.ts

@@ -0,0 +1,11 @@
+import { KeyPath, DictionaryValue } from '@intlayer/core';
+import { FC } from 'react';
+
+export declare const traceKeys: string[];
+export type NodeWrapperProps = {
+    dictionaryKey: string;
+    keyPath: KeyPath[];
+    section: DictionaryValue;
+};
+export declare const NavigationViewNode: FC<NodeWrapperProps>;
+//# sourceMappingURL=NavigationViewNode.d.ts.map

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationViewNode.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAwB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAgBtD,eAAO,MAAM,SAAS,EAAE,MAAM,EAAmC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAoTnD,CAAC"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -0,0 +1,298 @@
+import { j as jsxRuntimeExports } from "../../../jsx-runtime-BgSF1HG2.js";
+import { getConfiguration } from "@intlayer/config/client";
+import { isSameKeyPath, NodeType } from "@intlayer/core";
+import { ChevronRight, Plus } from "lucide-react";
+import { useCallback } from "react";
+import { useDictionary } from "react-intlayer";
+import { camelCaseToSentence } from "../../../utils/camelCase.mjs";
+import { getDictionaryValueByKeyPath, getSectionType } from "../../../utils/dictionary.mjs";
+import { Accordion } from "../../Accordion/Accordion.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { useEditedContentStore } from "../../DictionaryEditor/useEditedContentStore.mjs";
+import { useEditionPanelStore } from "../../DictionaryEditor/useEditionPanelStore.mjs";
+import "clsx";
+import "tailwind-merge";
+import "../../TextArea/AutoSizeTextArea.mjs";
+import "../../TextArea/TextArea.mjs";
+import { getIsEditableSection } from "../getIsEditableSection.mjs";
+import { navigationViewContent } from "./navigationViewNode.content.mjs";
+const traceKeys = ["filePath", "id", "nodeType"];
+const NavigationViewNode = ({
+  section: sectionProp,
+  keyPath,
+  dictionaryKey
+}) => {
+  const { locales } = getConfiguration().internationalization;
+  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);
+  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);
+  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(
+    (s) => ({
+      setFocusedContentKeyPath: s.setFocusedContentKeyPath,
+      focusedContent: s.focusedContent
+    })
+  );
+  const {
+    addNewElement,
+    addNewField,
+    goToElement,
+    goToField,
+    goToEnumeration,
+    goToTranslation
+  } = useDictionary(navigationViewContent);
+  const nodeType = getSectionType(section);
+  const isEditableSection = getIsEditableSection(section);
+  const getIsSelected = useCallback(
+    (keyPath2) => (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(keyPath2, focusedContent?.keyPath ?? []),
+    [focusedContent?.keyPath]
+  );
+  if (isEditableSection) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "-" });
+  if (typeof section === "object") {
+    if (nodeType === NodeType.Translation) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
+        const childKeyPath = [
+          ...keyPath,
+          { type: NodeType.Translation, key: translationKey }
+        ];
+        const subSection = getDictionaryValueByKeyPath(
+          sectionProp,
+          childKeyPath
+        );
+        const isEditableSubSection = getIsEditableSection(subSection);
+        if (isEditableSubSection) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              label: `${goToTranslation.label.value} ${translationKey}`,
+              isActive: getIsSelected(childKeyPath),
+              variant: "hoverable",
+              color: "text",
+              className: "w-full",
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              IconRight: ChevronRight,
+              children: translationKey
+            },
+            translationKey
+          );
+        }
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Accordion,
+          {
+            identifier: translationKey,
+            label: `${goToTranslation.label.value} ${translationKey}`,
+            isActive: getIsSelected(childKeyPath),
+            onClick: () => setFocusedContentKeyPath(childKeyPath),
+            header: translationKey,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              NavigationViewNode,
+              {
+                keyPath: childKeyPath,
+                section: sectionProp,
+                dictionaryKey
+              }
+            ) }) })
+          },
+          translationKey
+        );
+      }) });
+    }
+    if (nodeType === NodeType.Enumeration) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: Object.keys(
+        section[NodeType.Enumeration]
+      ).map((key) => {
+        const childKeyPath = [
+          ...keyPath,
+          { type: NodeType.Enumeration, key }
+        ];
+        const subSection = getDictionaryValueByKeyPath(
+          sectionProp,
+          childKeyPath
+        );
+        const isEditableSubSection = getIsEditableSection(subSection);
+        if (isEditableSubSection) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              label: `${goToEnumeration.label.value} ${key}`,
+              isActive: getIsSelected(childKeyPath),
+              variant: "hoverable",
+              color: "text",
+              className: "w-full",
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              IconRight: ChevronRight,
+              children: key
+            },
+            key
+          );
+        }
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Accordion,
+          {
+            identifier: key,
+            label: `${goToEnumeration.label.value} ${key}`,
+            isActive: getIsSelected(childKeyPath),
+            onClick: () => setFocusedContentKeyPath(childKeyPath),
+            header: key,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              NavigationViewNode,
+              {
+                keyPath: childKeyPath,
+                section: sectionProp,
+                dictionaryKey
+              }
+            ) }) })
+          },
+          key
+        );
+      }) });
+    }
+    if (nodeType === NodeType.Array) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-between gap-2", children: [
+        section.map((subSection, index) => {
+          const childKeyPath = [
+            ...keyPath,
+            { type: NodeType.Array, key: index }
+          ];
+          const isEditableSubSection = getIsEditableSection(subSection);
+          if (isEditableSubSection) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button,
+              {
+                label: `${goToElement.label.value} ${index}`,
+                isActive: getIsSelected(childKeyPath),
+                variant: "hoverable",
+                color: "text",
+                className: "w-full",
+                onClick: () => setFocusedContentKeyPath(childKeyPath),
+                IconRight: ChevronRight,
+                children: index
+              },
+              `${index}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Accordion,
+            {
+              identifier: `${index}`,
+              label: `${goToElement.label.value} ${index}`,
+              isActive: getIsSelected(childKeyPath),
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              header: index,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                NavigationViewNode,
+                {
+                  keyPath: childKeyPath,
+                  section: sectionProp,
+                  dictionaryKey
+                }
+              ) }) })
+            },
+            `${index}`
+          );
+        }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            label: addNewElement.label.value,
+            variant: "hoverable",
+            color: "neutral",
+            textAlign: "left",
+            onClick: () => {
+              const newKeyPath = [
+                ...keyPath,
+                {
+                  type: NodeType.Array,
+                  key: section.length
+                }
+              ];
+              addEditedContent(dictionaryKey, {}, newKeyPath, false);
+              setFocusedContentKeyPath(newKeyPath);
+            },
+            Icon: Plus,
+            children: addNewElement.text
+          }
+        )
+      ] });
+    }
+    const sectionArray = Object.keys(section);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full max-w-full flex-col justify-between gap-2", children: [
+      sectionArray.map((key) => {
+        const childKeyPath = [
+          ...keyPath,
+          { type: NodeType.Object, key }
+        ];
+        const subSection = getDictionaryValueByKeyPath(
+          sectionProp,
+          childKeyPath
+        );
+        const isEditableSubSection = getIsEditableSection(subSection);
+        if (isEditableSubSection) {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              label: `${goToField.label.value} ${key}`,
+              isActive: getIsSelected(childKeyPath),
+              variant: "hoverable",
+              color: "text",
+              className: "w-full",
+              onClick: () => setFocusedContentKeyPath(childKeyPath),
+              IconRight: ChevronRight,
+              children: camelCaseToSentence(key)
+            },
+            key
+          );
+        }
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Accordion,
+          {
+            identifier: key,
+            label: `${goToField.label.value} ${key}`,
+            isActive: getIsSelected(childKeyPath),
+            onClick: () => setFocusedContentKeyPath(childKeyPath),
+            header: camelCaseToSentence(key),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 pl-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              NavigationViewNode,
+              {
+                keyPath: childKeyPath,
+                section: sectionProp,
+                dictionaryKey
+              }
+            ) }) })
+          },
+          key
+        );
+      }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          label: addNewField.label.value,
+          variant: "hoverable",
+          color: "neutral",
+          textAlign: "left",
+          onClick: () => {
+            const newKeyPath = [
+              ...keyPath,
+              { type: NodeType.Object, key: "newField" }
+            ];
+            addEditedContent(dictionaryKey, {}, newKeyPath, false);
+            setFocusedContentKeyPath(newKeyPath);
+          },
+          Icon: Plus,
+          children: addNewField.text
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    "Error loading section --",
+    nodeType,
+    "--",
+    JSON.stringify(section),
+    "--",
+    JSON.stringify(keyPath)
+  ] });
+};
+export {
+  NavigationViewNode,
+  traceKeys
+};
+//# sourceMappingURL=NavigationViewNode.mjs.map