@intlayer/design-system 6.1.6 → 7.0.0-canary.1

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs

@@ -0,0 +1,76 @@
+'use client';
+
+
+import { ArrayWrapper } from "./ArrayWrapper.mjs";
+import { ConditionWrapper } from "./ConditionWrapper.mjs";
+import { EnumerationWrapper } from "./EnumerationWrapper.mjs";
+import { StringWrapper } from "./StringWrapper.mjs";
+import { FileWrapper } from "./FileWrapper.mjs";
+import { InsertionWrapper } from "./InsertionWrapper.mjs";
+import { MarkdownWrapper } from "./MarkdownWrapper.mjs";
+import { NestedObjectWrapper } from "./NestedObjectWrapper.mjs";
+import { TranslationWrapper } from "./TranslationWrapper.mjs";
+import { jsx } from "react/jsx-runtime";
+import { getContentNodeByKeyPath, getNodeType } from "@intlayer/core";
+import { NodeType } from "@intlayer/types";
+
+//#region src/components/DictionaryEditor/NodeWrapper/index.tsx
+const traceKeys = [
+	"filePath",
+	"id",
+	"nodeType"
+];
+const NodeWrapper = (props) => {
+	const section = getContentNodeByKeyPath(props.editedContent, props.keyPath) ?? props.section;
+	const nodeType = getNodeType(section);
+	if (typeof section === "object") {
+		if (nodeType === NodeType.ReactNode) return /* @__PURE__ */ jsx("span", {
+			className: "text-neutral text-xs",
+			children: "React node not editable"
+		});
+		if (nodeType === NodeType.Nested) return /* @__PURE__ */ jsx("div", {
+			className: "ml-2 grid grid-cols-[auto,1fr] gap-2",
+			children: "[Nested] Dictionary"
+		});
+		if (nodeType === NodeType.Markdown) return /* @__PURE__ */ jsx(MarkdownWrapper, {
+			...props,
+			section
+		});
+		if (nodeType === NodeType.Translation) return /* @__PURE__ */ jsx(TranslationWrapper, {
+			...props,
+			section
+		});
+		if (nodeType === NodeType.Enumeration) return /* @__PURE__ */ jsx(EnumerationWrapper, {
+			...props,
+			section
+		});
+		if (nodeType === NodeType.Condition) return /* @__PURE__ */ jsx(ConditionWrapper, {
+			...props,
+			section
+		});
+		if (nodeType === NodeType.Insertion) return /* @__PURE__ */ jsx(InsertionWrapper, {
+			...props,
+			section
+		});
+		if (nodeType === NodeType.Array) return /* @__PURE__ */ jsx(ArrayWrapper, {
+			...props,
+			section
+		});
+		if (nodeType === NodeType.File) return /* @__PURE__ */ jsx(FileWrapper, {
+			...props,
+			section
+		});
+		return /* @__PURE__ */ jsx(NestedObjectWrapper, {
+			...props,
+			section
+		});
+	}
+	if (typeof section === "string") return /* @__PURE__ */ jsx(StringWrapper, {
+		...props,
+		section
+	});
+};
+
+//#endregion
+export { NodeWrapper, traceKeys };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["traceKeys: string[]","NodeWrapper: FC<NodeWrapperProps>"],"sources":["../../../../../src/components/DictionaryEditor/NodeWrapper/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ConditionContent,\n  type EnumerationContent,\n  type FileContent,\n  getContentNodeByKeyPath,\n  getNodeType,\n  type InsertionContent,\n  type MarkdownContent,\n  type TranslationContent,\n} from '@intlayer/core';\nimport {\n  type ContentNode,\n  type Dictionary,\n  type KeyPath,\n  type Locale,\n  NodeType,\n} from '@intlayer/types';\nimport type { FC, ReactNode } from 'react';\nimport { ArrayWrapper } from './ArrayWrapper';\nimport { ConditionWrapper } from './ConditionWrapper';\nimport { EnumerationWrapper } from './EnumerationWrapper';\nimport { FileWrapper } from './FileWrapper';\nimport { InsertionWrapper } from './InsertionWrapper';\nimport { MarkdownWrapper } from './MarkdownWrapper';\nimport { NestedObjectWrapper } from './NestedObjectWrapper';\nimport { StringWrapper } from './StringWrapper';\nimport { TranslationWrapper } from './TranslationWrapper';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  keyPath: KeyPath[];\n  dictionary: Dictionary;\n  section: ContentNode;\n  onContentChange: (content: { keyPath: KeyPath[]; newValue: string }) => void;\n  locale: Locale;\n  editedContent: ContentNode;\n  focusedKeyPath: KeyPath[] | undefined;\n  onFocusKeyPath: (keyPath: KeyPath[]) => void;\n  onClickEdit?: (keyPath: KeyPath[]) => void;\n  renderSection?: (content: string) => ReactNode;\n};\n\nexport const NodeWrapper: FC<NodeWrapperProps> = (props) => {\n  const editedContentValue = getContentNodeByKeyPath(\n    props.editedContent,\n    props.keyPath\n  );\n  const section = editedContentValue ?? props.section;\n  const nodeType = getNodeType(section);\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return (\n        <span className=\"text-neutral text-xs\">React node not editable</span>\n      );\n    }\n\n    if (nodeType === NodeType.Nested) {\n      return (\n        <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n          [Nested] Dictionary\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Markdown) {\n      return (\n        <MarkdownWrapper\n          {...props}\n          section={section as MarkdownContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <TranslationWrapper\n          {...props}\n          section={section as TranslationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <EnumerationWrapper\n          {...props}\n          section={section as EnumerationContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Condition) {\n      return (\n        <ConditionWrapper\n          {...props}\n          section={section as ConditionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Insertion) {\n      return (\n        <InsertionWrapper\n          {...props}\n          section={section as InsertionContent<ContentNode>}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <ArrayWrapper\n          {...props}\n          section={section as unknown as ContentNode[]}\n        />\n      );\n    }\n\n    if (nodeType === NodeType.File) {\n      return <FileWrapper {...props} section={section as FileContent} />;\n    }\n\n    return (\n      <NestedObjectWrapper\n        {...props}\n        section={section as Record<string, ContentNode>}\n      />\n    );\n  }\n\n  if (typeof section === 'string') {\n    return <StringWrapper {...props} section={section} />;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,MAAaA,YAAsB;CAAC;CAAY;CAAM;CAAW;AAejE,MAAaC,eAAqC,UAAU;CAK1D,MAAM,UAJqB,wBACzB,MAAM,eACN,MAAM,QACP,IACqC,MAAM;CAC5C,MAAM,WAAW,YAAY,QAAQ;AAErC,KAAI,OAAO,YAAY,UAAU;AAC/B,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GAAK,WAAU;aAAuB;IAA8B;AAIzE,MAAI,aAAa,SAAS,OACxB,QACE,oBAAC;GAAI,WAAU;aAAuC;IAEhD;AAIV,MAAI,aAAa,SAAS,SACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,YACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,UACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,MACxB,QACE,oBAAC;GACC,GAAI;GACK;IACT;AAIN,MAAI,aAAa,SAAS,KACxB,QAAO,oBAAC;GAAY,GAAI;GAAgB;IAA0B;AAGpE,SACE,oBAAC;GACC,GAAI;GACK;IACT;;AAIN,KAAI,OAAO,YAAY,SACrB,QAAO,oBAAC;EAAc,GAAI;EAAgB;GAAW"}

package/dist/esm/components/DictionaryEditor/index.mjs

@@ -0,0 +1,3 @@
+import { DictionaryEditor } from "./DictionaryEditor.mjs";
+
+export { DictionaryEditor };

package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs

@@ -0,0 +1,62 @@
+'use client';
+
+
+import { Container } from "../Container/index.mjs";
+import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
+import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
+import { getIsEditableSection } from "./getIsEditableSection.mjs";
+import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
+import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getContentNodeByKeyPath } from "@intlayer/core";
+import { useEditedContent, useFocusDictionary } from "@intlayer/editor-react";
+
+//#region src/components/DictionaryFieldEditor/ContentEditor.tsx
+const ContentEditor = ({ dictionary, isDarkMode }) => {
+	const { content, key, localId } = dictionary;
+	const { editedContent } = useEditedContent();
+	const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();
+	const focusedKeyPath = focusedContent?.keyPath;
+	const section = typeof editedContent?.[localId]?.content === "undefined" ? content : editedContent?.[localId]?.content;
+	const focusedSection = getContentNodeByKeyPath(section, focusedKeyPath ?? []);
+	const isEditableBaseSection = getIsEditableSection(section);
+	const isEditableFocusedSection = getIsEditableSection(focusedSection);
+	useEffect(() => {
+		if (typeof focusedSection === "undefined") setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "mb-6 flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx(KeyPathBreadcrumb, {
+			dictionaryKey: key,
+			keyPath: focusedKeyPath ?? [],
+			onClickKeyPath: setFocusedContentKeyPath
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: /* @__PURE__ */ jsx(LocaleSwitcherContent, {})
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-2 max-md:flex-col",
+		children: [typeof section === "object" && section && !isEditableBaseSection && Object.keys(section).length > 0 && /* @__PURE__ */ jsx(Container, {
+			border: true,
+			background: "none",
+			className: "top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]",
+			roundedSize: "xl",
+			transparency: "sm",
+			children: /* @__PURE__ */ jsx(NavigationViewNode, {
+				keyPath: [],
+				section,
+				dictionary
+			})
+		}), (isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && /* @__PURE__ */ jsx(TextEditorContainer, {
+			keyPath: focusedKeyPath ?? [],
+			section: focusedSection,
+			dictionary,
+			isDarkMode
+		})]
+	})] });
+};
+
+//#endregion
+export { ContentEditor };
+//# sourceMappingURL=ContentEditor.mjs.map

package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentEditor.mjs","names":["ContentEditor: FC<NodeEditorProps>"],"sources":["../../../../src/components/DictionaryFieldEditor/ContentEditor.tsx"],"sourcesContent":["'use client';\n\nimport { getContentNodeByKeyPath } from '@intlayer/core';\nimport { useEditedContent, useFocusDictionary } from '@intlayer/editor-react';\nimport type { Dictionary, LocalDictionaryId } from '@intlayer/types';\nimport { type FC, useEffect } from 'react';\nimport { Container } from '../Container';\nimport { LocaleSwitcherContent } from '../LocaleSwitcherContentDropDown';\nimport { TextEditorContainer } from './ContentEditorView/TextEditor';\nimport { getIsEditableSection } from './getIsEditableSection';\nimport { KeyPathBreadcrumb } from './KeyPathBreadcrumb';\nimport { NavigationViewNode } from './NavigationView/NavigationViewNode';\n\ntype NodeEditorProps = {\n  dictionary: Dictionary;\n  isDarkMode?: boolean;\n};\n\nexport const ContentEditor: FC<NodeEditorProps> = ({\n  dictionary,\n  isDarkMode,\n}) => {\n  const { content, key, localId } = dictionary;\n  const { editedContent } = useEditedContent();\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n\n  const focusedKeyPath = focusedContent?.keyPath;\n  const section =\n    typeof editedContent?.[localId as LocalDictionaryId]?.content ===\n    'undefined'\n      ? content\n      : editedContent?.[localId as LocalDictionaryId]?.content;\n\n  const focusedSection = getContentNodeByKeyPath(section, focusedKeyPath ?? []);\n  const isEditableBaseSection = getIsEditableSection(section);\n  const isEditableFocusedSection = getIsEditableSection(focusedSection);\n\n  useEffect(() => {\n    if (typeof focusedSection === 'undefined') {\n      setFocusedContentKeyPath(focusedContent?.keyPath?.slice(0, -1) ?? []);\n    }\n  }, []);\n\n  return (\n    <div>\n      <div className=\"mb-6 flex items-center justify-between gap-2\">\n        <KeyPathBreadcrumb\n          dictionaryKey={key}\n          keyPath={focusedKeyPath ?? []}\n          onClickKeyPath={setFocusedContentKeyPath}\n        />\n        <div className=\"flex items-center gap-2\">\n          <LocaleSwitcherContent />\n        </div>\n      </div>\n      <div className=\"flex gap-2 max-md:flex-col\">\n        {typeof section === 'object' &&\n          section &&\n          !isEditableBaseSection &&\n          Object.keys(section).length > 0 && (\n            <Container\n              border\n              background=\"none\"\n              className=\"top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]\"\n              roundedSize=\"xl\"\n              transparency=\"sm\"\n            >\n              <NavigationViewNode\n                keyPath={[]}\n                section={section}\n                dictionary={dictionary}\n              />\n            </Container>\n          )}\n        {(isEditableFocusedSection || (focusedKeyPath ?? []).length > 0) && (\n          <TextEditorContainer\n            keyPath={focusedKeyPath ?? []}\n            section={focusedSection}\n            dictionary={dictionary}\n            isDarkMode={isDarkMode}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAaA,iBAAsC,EACjD,YACA,iBACI;CACJ,MAAM,EAAE,SAAS,KAAK,YAAY;CAClC,MAAM,EAAE,kBAAkB,kBAAkB;CAC5C,MAAM,EAAE,gBAAgB,6BAA6B,oBAAoB;CAEzE,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,UACJ,OAAO,gBAAgB,UAA+B,YACtD,cACI,UACA,gBAAgB,UAA+B;CAErD,MAAM,iBAAiB,wBAAwB,SAAS,kBAAkB,EAAE,CAAC;CAC7E,MAAM,wBAAwB,qBAAqB,QAAQ;CAC3D,MAAM,2BAA2B,qBAAqB,eAAe;AAErE,iBAAgB;AACd,MAAI,OAAO,mBAAmB,YAC5B,0BAAyB,gBAAgB,SAAS,MAAM,GAAG,GAAG,IAAI,EAAE,CAAC;IAEtE,EAAE,CAAC;AAEN,QACE,qBAAC,oBACC,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,eAAe;GACf,SAAS,kBAAkB,EAAE;GAC7B,gBAAgB;IAChB,EACF,oBAAC;GAAI,WAAU;aACb,oBAAC,0BAAwB;IACrB;GACF,EACN,qBAAC;EAAI,WAAU;aACZ,OAAO,YAAY,YAClB,WACA,CAAC,yBACD,OAAO,KAAK,QAAQ,CAAC,SAAS,KAC5B,oBAAC;GACC;GACA,YAAW;GACX,WAAU;GACV,aAAY;GACZ,cAAa;aAEb,oBAAC;IACC,SAAS,EAAE;IACF;IACG;KACZ;IACQ,GAEd,6BAA6B,kBAAkB,EAAE,EAAE,SAAS,MAC5D,oBAAC;GACC,SAAS,kBAAkB,EAAE;GAC7B,SAAS;GACG;GACA;IACZ;GAEA,IACF"}