@intlayer/design-system 6.1.6-canary.0 → 6.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs +4 -2
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.d.ts +1 -0
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.d.ts.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs +4 -2
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs +2 -2
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs +2 -2
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs +3 -0
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.d.ts +1 -0
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.d.ts.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs +3 -0
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map +1 -1
- package/dist/components/Link/Link.cjs +0 -4
- package/dist/components/Link/Link.cjs.map +1 -1
- package/dist/components/Link/Link.d.ts.map +1 -1
- package/dist/components/Link/Link.mjs +0 -4
- package/dist/components/Link/Link.mjs.map +1 -1
- package/dist/components/MarkDownRender/processor.cjs +12 -9
- package/dist/components/MarkDownRender/processor.cjs.map +1 -1
- package/dist/components/MarkDownRender/processor.d.ts.map +1 -1
- package/dist/components/MarkDownRender/processor.mjs +12 -9
- package/dist/components/MarkDownRender/processor.mjs.map +1 -1
- package/dist/hooks/auth.cjs +2 -2
- package/dist/hooks/auth.cjs.map +1 -1
- package/dist/hooks/auth.mjs +2 -2
- package/dist/hooks/auth.mjs.map +1 -1
- package/dist/hooks/useAuth/useOAuth2.cjs +3 -3
- package/dist/hooks/useAuth/useOAuth2.cjs.map +1 -1
- package/dist/hooks/useAuth/useOAuth2.mjs +3 -3
- package/dist/hooks/useAuth/useOAuth2.mjs.map +1 -1
- package/dist/hooks/useAuth/useSession.cjs +3 -3
- package/dist/hooks/useAuth/useSession.cjs.map +1 -1
- package/dist/hooks/useAuth/useSession.mjs +3 -3
- package/dist/hooks/useAuth/useSession.mjs.map +1 -1
- package/package.json +18 -18
|
@@ -31,7 +31,8 @@ const DictionaryFieldEditor = ({
|
|
|
31
31
|
onClickDictionaryList,
|
|
32
32
|
isDarkMode,
|
|
33
33
|
mode,
|
|
34
|
-
onDelete
|
|
34
|
+
onDelete,
|
|
35
|
+
onSave
|
|
35
36
|
}) => {
|
|
36
37
|
const config = editorReact.useConfiguration();
|
|
37
38
|
const [editorView, setEditorView] = ReactExports.useState(
|
|
@@ -115,7 +116,8 @@ const DictionaryFieldEditor = ({
|
|
|
115
116
|
onDelete: () => {
|
|
116
117
|
setFocusedContent(null);
|
|
117
118
|
onDelete?.();
|
|
118
|
-
}
|
|
119
|
+
},
|
|
120
|
+
onSave
|
|
119
121
|
}
|
|
120
122
|
)
|
|
121
123
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DictionaryFieldEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useConfiguration,\n useDictionariesRecordActions,\n useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n dictionary: Dictionary;\n onClickDictionaryList?: () => void;\n onDelete?: () => void;\n isDarkMode?: boolean;\n mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n DetailsEditor,\n ContentEditor,\n StructureEditor,\n JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n dictionary,\n onClickDictionaryList,\n isDarkMode,\n mode,\n onDelete,\n}) => {\n const config = useConfiguration();\n const [editorView, setEditorView] = useState<EditorViewType>(\n EditorViewType.ContentEditor\n );\n const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n const { setFocusedContent } = useFocusDictionaryActions();\n const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n useEffect(() => {\n // Focus the dictionary if not focused\n setFocusedContent((prev) => ({\n ...(prev ?? {}),\n dictionaryKey: dictionary.key,\n dictionaryLocalId: dictionary.localId,\n }));\n setLocaleDictionaries((prev) => ({\n ...prev,\n [dictionary.localId!]: dictionary,\n }));\n }, []);\n\n return (\n <LocaleSwitcherContentProvider\n availableLocales={config?.internationalization.locales ?? []}\n >\n <div className=\"flex size-full flex-col gap-6 px-2\">\n <Button\n onClick={onClickDictionaryList}\n variant={ButtonVariant.HOVERABLE}\n className=\"z-10 ml-5 mr-auto\"\n color={ButtonColor.TEXT}\n Icon={ArrowLeft}\n label={returnToDictionaryList.label.value}\n >\n {returnToDictionaryList.text}\n </Button>\n\n <SwitchSelector\n defaultValue={editorView}\n onChange={(value) => setEditorView(value)}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"m-auto w-full max-w-xl\"\n choices={[\n {\n content: 'Details',\n value: EditorViewType.DetailsEditor,\n },\n {\n content: 'Structure',\n value: EditorViewType.StructureEditor,\n },\n {\n content: 'Content',\n value: EditorViewType.ContentEditor,\n },\n {\n content: 'JSON',\n value: EditorViewType.JSONEditor,\n },\n ].filter(\n ({ value }) =>\n !(\n !mode.includes('remote') &&\n value === EditorViewType.DetailsEditor\n )\n )}\n />\n\n {editorView === EditorViewType.DetailsEditor && (\n <DictionaryDetailsForm dictionary={dictionary} />\n )}\n {editorView === EditorViewType.StructureEditor && (\n <StructureEditor dictionary={dictionary} />\n )}\n {editorView === EditorViewType.ContentEditor && (\n <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n {editorView === EditorViewType.JSONEditor && (\n <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n\n <SaveForm\n dictionary={dictionary}\n mode={mode}\n onDelete={() => {\n setFocusedContent(null);\n onDelete?.();\n }}\n />\n </div>\n </LocaleSwitcherContentProvider>\n );\n};\n"],"names":["useConfiguration","useState","useIntlayer","useFocusDictionaryActions","useDictionariesRecordActions","useEffect","jsx","LocaleSwitcherContentProvider","jsxs","Button","ButtonVariant","ButtonColor","ArrowLeft","SwitchSelector","SwitchSelectorColor","SwitchSelectorSize","DictionaryDetailsForm","StructureEditor","ContentEditor","JSONEditor","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DictionaryFieldEditor.cjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useConfiguration,\n useDictionariesRecordActions,\n useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n dictionary: Dictionary;\n onClickDictionaryList?: () => void;\n onDelete?: () => void;\n onSave?: () => void;\n isDarkMode?: boolean;\n mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n DetailsEditor,\n ContentEditor,\n StructureEditor,\n JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n dictionary,\n onClickDictionaryList,\n isDarkMode,\n mode,\n onDelete,\n onSave,\n}) => {\n const config = useConfiguration();\n const [editorView, setEditorView] = useState<EditorViewType>(\n EditorViewType.ContentEditor\n );\n const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n const { setFocusedContent } = useFocusDictionaryActions();\n const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n useEffect(() => {\n // Focus the dictionary if not focused\n setFocusedContent((prev) => ({\n ...(prev ?? {}),\n dictionaryKey: dictionary.key,\n dictionaryLocalId: dictionary.localId,\n }));\n setLocaleDictionaries((prev) => ({\n ...prev,\n [dictionary.localId!]: dictionary,\n }));\n }, []);\n\n return (\n <LocaleSwitcherContentProvider\n availableLocales={config?.internationalization.locales ?? []}\n >\n <div className=\"flex size-full flex-col gap-6 px-2\">\n <Button\n onClick={onClickDictionaryList}\n variant={ButtonVariant.HOVERABLE}\n className=\"z-10 ml-5 mr-auto\"\n color={ButtonColor.TEXT}\n Icon={ArrowLeft}\n label={returnToDictionaryList.label.value}\n >\n {returnToDictionaryList.text}\n </Button>\n\n <SwitchSelector\n defaultValue={editorView}\n onChange={(value) => setEditorView(value)}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"m-auto w-full max-w-xl\"\n choices={[\n {\n content: 'Details',\n value: EditorViewType.DetailsEditor,\n },\n {\n content: 'Structure',\n value: EditorViewType.StructureEditor,\n },\n {\n content: 'Content',\n value: EditorViewType.ContentEditor,\n },\n {\n content: 'JSON',\n value: EditorViewType.JSONEditor,\n },\n ].filter(\n ({ value }) =>\n !(\n !mode.includes('remote') &&\n value === EditorViewType.DetailsEditor\n )\n )}\n />\n\n {editorView === EditorViewType.DetailsEditor && (\n <DictionaryDetailsForm dictionary={dictionary} />\n )}\n {editorView === EditorViewType.StructureEditor && (\n <StructureEditor dictionary={dictionary} />\n )}\n {editorView === EditorViewType.ContentEditor && (\n <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n {editorView === EditorViewType.JSONEditor && (\n <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n\n <SaveForm\n dictionary={dictionary}\n mode={mode}\n onDelete={() => {\n setFocusedContent(null);\n onDelete?.();\n }}\n onSave={onSave}\n />\n </div>\n </LocaleSwitcherContentProvider>\n );\n};\n"],"names":["useConfiguration","useState","useIntlayer","useFocusDictionaryActions","useDictionariesRecordActions","useEffect","jsx","LocaleSwitcherContentProvider","jsxs","Button","ButtonVariant","ButtonColor","ArrowLeft","SwitchSelector","SwitchSelectorColor","SwitchSelectorSize","DictionaryDetailsForm","StructureEditor","ContentEditor","JSONEditor","SaveForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAASA,YAAAA,iBAAA;AACf,QAAM,CAAC,YAAY,aAAa,IAAIC,aAAAA;AAAAA,IAClC;AAAA;AAAA,EAAA;AAEF,QAAM,EAAE,uBAAA,IAA2BC,cAAAA,YAAY,yBAAyB;AACxE,QAAM,EAAE,kBAAA,IAAsBC,sCAAA;AAC9B,QAAM,EAAE,sBAAA,IAA0BC,yCAAA;AAElCC,eAAAA,UAAU,MAAM;AAEd,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAI,QAAQ,CAAA;AAAA,MACZ,eAAe,WAAW;AAAA,MAC1B,mBAAmB,WAAW;AAAA,IAAA,EAC9B;AACF,0BAAsB,CAAC,UAAU;AAAA,MAC/B,GAAG;AAAA,MACH,CAAC,WAAW,OAAQ,GAAG;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACEC,2BAAAA;AAAAA,IAACC,sEAAAA;AAAAA,IAAA;AAAA,MACC,kBAAkB,QAAQ,qBAAqB,WAAW,CAAA;AAAA,MAE1D,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAACG,yBAAAA;AAAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,SAASC,yBAAAA,cAAc;AAAA,YACvB,WAAU;AAAA,YACV,OAAOC,yBAAAA,YAAY;AAAA,YACnB,MAAMC,YAAAA;AAAAA,YACN,OAAO,uBAAuB,MAAM;AAAA,YAEnC,UAAA,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1BN,2BAAAA;AAAAA,UAACO,gCAAAA;AAAAA,UAAA;AAAA,YACC,cAAc;AAAA,YACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,YACxC,OAAOC,gCAAAA,oBAAoB;AAAA,YAC3B,MAAMC,gCAAAA,mBAAmB;AAAA,YACzB,WAAU;AAAA,YACV,SAAS;AAAA,cACP;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,YACT,EACA;AAAA,cACA,CAAC,EAAE,MAAA,MACD,EACE,CAAC,KAAK,SAAS,QAAQ,KACvB,UAAU;AAAA,YAAA;AAAA,UAEhB;AAAA,QAAA;AAAA,QAGD,eAAe,KACdT,2BAAAA,IAACU,yEAAAA,uBAAA,EAAsB,WAAA,CAAwB;AAAA,QAEhD,eAAe,KACdV,2BAAAA,IAACW,iDAAAA,iBAAA,EAAgB,WAAA,CAAwB;AAAA,QAE1C,eAAe,KACdX,2BAAAA,IAACY,+CAAAA,eAAA,EAAc,YAAwB,YAAwB;AAAA,QAEhE,eAAe,KACdZ,2BAAAA,IAACa,4CAAAA,YAAA,EAAW,YAAwB,YAAwB;AAAA,QAG9Db,2BAAAA;AAAAA,UAACc,mDAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AACd,gCAAkB,IAAI;AACtB,yBAAA;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DictionaryFieldEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAerD,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;CAC9B,CAAC;AASF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,
|
|
1
|
+
{"version":3,"file":"DictionaryFieldEditor.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOjD,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAerD,KAAK,0BAA0B,GAAG;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;CAC9B,CAAC;AASF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAsGhE,CAAC"}
|
|
@@ -29,7 +29,8 @@ const DictionaryFieldEditor = ({
|
|
|
29
29
|
onClickDictionaryList,
|
|
30
30
|
isDarkMode,
|
|
31
31
|
mode,
|
|
32
|
-
onDelete
|
|
32
|
+
onDelete,
|
|
33
|
+
onSave
|
|
33
34
|
}) => {
|
|
34
35
|
const config = useConfiguration();
|
|
35
36
|
const [editorView, setEditorView] = useState(
|
|
@@ -113,7 +114,8 @@ const DictionaryFieldEditor = ({
|
|
|
113
114
|
onDelete: () => {
|
|
114
115
|
setFocusedContent(null);
|
|
115
116
|
onDelete?.();
|
|
116
|
-
}
|
|
117
|
+
},
|
|
118
|
+
onSave
|
|
117
119
|
}
|
|
118
120
|
)
|
|
119
121
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DictionaryFieldEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useConfiguration,\n useDictionariesRecordActions,\n useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n dictionary: Dictionary;\n onClickDictionaryList?: () => void;\n onDelete?: () => void;\n isDarkMode?: boolean;\n mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n DetailsEditor,\n ContentEditor,\n StructureEditor,\n JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n dictionary,\n onClickDictionaryList,\n isDarkMode,\n mode,\n onDelete,\n}) => {\n const config = useConfiguration();\n const [editorView, setEditorView] = useState<EditorViewType>(\n EditorViewType.ContentEditor\n );\n const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n const { setFocusedContent } = useFocusDictionaryActions();\n const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n useEffect(() => {\n // Focus the dictionary if not focused\n setFocusedContent((prev) => ({\n ...(prev ?? {}),\n dictionaryKey: dictionary.key,\n dictionaryLocalId: dictionary.localId,\n }));\n setLocaleDictionaries((prev) => ({\n ...prev,\n [dictionary.localId!]: dictionary,\n }));\n }, []);\n\n return (\n <LocaleSwitcherContentProvider\n availableLocales={config?.internationalization.locales ?? []}\n >\n <div className=\"flex size-full flex-col gap-6 px-2\">\n <Button\n onClick={onClickDictionaryList}\n variant={ButtonVariant.HOVERABLE}\n className=\"z-10 ml-5 mr-auto\"\n color={ButtonColor.TEXT}\n Icon={ArrowLeft}\n label={returnToDictionaryList.label.value}\n >\n {returnToDictionaryList.text}\n </Button>\n\n <SwitchSelector\n defaultValue={editorView}\n onChange={(value) => setEditorView(value)}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"m-auto w-full max-w-xl\"\n choices={[\n {\n content: 'Details',\n value: EditorViewType.DetailsEditor,\n },\n {\n content: 'Structure',\n value: EditorViewType.StructureEditor,\n },\n {\n content: 'Content',\n value: EditorViewType.ContentEditor,\n },\n {\n content: 'JSON',\n value: EditorViewType.JSONEditor,\n },\n ].filter(\n ({ value }) =>\n !(\n !mode.includes('remote') &&\n value === EditorViewType.DetailsEditor\n )\n )}\n />\n\n {editorView === EditorViewType.DetailsEditor && (\n <DictionaryDetailsForm dictionary={dictionary} />\n )}\n {editorView === EditorViewType.StructureEditor && (\n <StructureEditor dictionary={dictionary} />\n )}\n {editorView === EditorViewType.ContentEditor && (\n <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n {editorView === EditorViewType.JSONEditor && (\n <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n\n <SaveForm\n dictionary={dictionary}\n mode={mode}\n onDelete={() => {\n setFocusedContent(null);\n onDelete?.();\n }}\n />\n </div>\n </LocaleSwitcherContentProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"DictionaryFieldEditor.mjs","sources":["../../../src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useConfiguration,\n useDictionariesRecordActions,\n useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useEffect, useState, type FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonVariant } from '../Button';\nimport { LocaleSwitcherContentProvider } from '../LocaleSwitcherContentDropDown';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { ContentEditor } from './ContentEditor';\nimport { DictionaryDetailsForm } from './DictionaryDetails/DictionaryDetailsForm';\nimport { JSONEditor } from './JSONEditor';\nimport { SaveForm } from './SaveForm/SaveForm';\nimport { StructureEditor } from './StructureEditor';\n\ntype DictionaryFieldEditorProps = {\n dictionary: Dictionary;\n onClickDictionaryList?: () => void;\n onDelete?: () => void;\n onSave?: () => void;\n isDarkMode?: boolean;\n mode: ('local' | 'remote')[];\n};\n\nenum EditorViewType {\n DetailsEditor,\n ContentEditor,\n StructureEditor,\n JSONEditor,\n}\n\nexport const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({\n dictionary,\n onClickDictionaryList,\n isDarkMode,\n mode,\n onDelete,\n onSave,\n}) => {\n const config = useConfiguration();\n const [editorView, setEditorView] = useState<EditorViewType>(\n EditorViewType.ContentEditor\n );\n const { returnToDictionaryList } = useIntlayer('dictionary-field-editor');\n const { setFocusedContent } = useFocusDictionaryActions();\n const { setLocaleDictionaries } = useDictionariesRecordActions();\n\n useEffect(() => {\n // Focus the dictionary if not focused\n setFocusedContent((prev) => ({\n ...(prev ?? {}),\n dictionaryKey: dictionary.key,\n dictionaryLocalId: dictionary.localId,\n }));\n setLocaleDictionaries((prev) => ({\n ...prev,\n [dictionary.localId!]: dictionary,\n }));\n }, []);\n\n return (\n <LocaleSwitcherContentProvider\n availableLocales={config?.internationalization.locales ?? []}\n >\n <div className=\"flex size-full flex-col gap-6 px-2\">\n <Button\n onClick={onClickDictionaryList}\n variant={ButtonVariant.HOVERABLE}\n className=\"z-10 ml-5 mr-auto\"\n color={ButtonColor.TEXT}\n Icon={ArrowLeft}\n label={returnToDictionaryList.label.value}\n >\n {returnToDictionaryList.text}\n </Button>\n\n <SwitchSelector\n defaultValue={editorView}\n onChange={(value) => setEditorView(value)}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"m-auto w-full max-w-xl\"\n choices={[\n {\n content: 'Details',\n value: EditorViewType.DetailsEditor,\n },\n {\n content: 'Structure',\n value: EditorViewType.StructureEditor,\n },\n {\n content: 'Content',\n value: EditorViewType.ContentEditor,\n },\n {\n content: 'JSON',\n value: EditorViewType.JSONEditor,\n },\n ].filter(\n ({ value }) =>\n !(\n !mode.includes('remote') &&\n value === EditorViewType.DetailsEditor\n )\n )}\n />\n\n {editorView === EditorViewType.DetailsEditor && (\n <DictionaryDetailsForm dictionary={dictionary} />\n )}\n {editorView === EditorViewType.StructureEditor && (\n <StructureEditor dictionary={dictionary} />\n )}\n {editorView === EditorViewType.ContentEditor && (\n <ContentEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n {editorView === EditorViewType.JSONEditor && (\n <JSONEditor dictionary={dictionary} isDarkMode={isDarkMode} />\n )}\n\n <SaveForm\n dictionary={dictionary}\n mode={mode}\n onDelete={() => {\n setFocusedContent(null);\n onDelete?.();\n }}\n onSave={onSave}\n />\n </div>\n </LocaleSwitcherContentProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,iBAAA;AACf,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA;AAAA,EAAA;AAEF,QAAM,EAAE,uBAAA,IAA2B,YAAY,yBAAyB;AACxE,QAAM,EAAE,kBAAA,IAAsB,0BAAA;AAC9B,QAAM,EAAE,sBAAA,IAA0B,6BAAA;AAElC,YAAU,MAAM;AAEd,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAI,QAAQ,CAAA;AAAA,MACZ,eAAe,WAAW;AAAA,MAC1B,mBAAmB,WAAW;AAAA,IAAA,EAC9B;AACF,0BAAsB,CAAC,UAAU;AAAA,MAC/B,GAAG;AAAA,MACH,CAAC,WAAW,OAAQ,GAAG;AAAA,IAAA,EACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,kBAAkB,QAAQ,qBAAqB,WAAW,CAAA;AAAA,MAE1D,UAAA,qBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,SAAS,cAAc;AAAA,YACvB,WAAU;AAAA,YACV,OAAO,YAAY;AAAA,YACnB,MAAM;AAAA,YACN,OAAO,uBAAuB,MAAM;AAAA,YAEnC,UAAA,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,QAG1B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAc;AAAA,YACd,UAAU,CAAC,UAAU,cAAc,KAAK;AAAA,YACxC,OAAO,oBAAoB;AAAA,YAC3B,MAAM,mBAAmB;AAAA,YACzB,WAAU;AAAA,YACV,SAAS;AAAA,cACP;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBACE,SAAS;AAAA,gBACT,OAAO;AAAA;AAAA,cAAA;AAAA,YACT,EACA;AAAA,cACA,CAAC,EAAE,MAAA,MACD,EACE,CAAC,KAAK,SAAS,QAAQ,KACvB,UAAU;AAAA,YAAA;AAAA,UAEhB;AAAA,QAAA;AAAA,QAGD,eAAe,KACd,oBAAC,uBAAA,EAAsB,WAAA,CAAwB;AAAA,QAEhD,eAAe,KACd,oBAAC,iBAAA,EAAgB,WAAA,CAAwB;AAAA,QAE1C,eAAe,KACd,oBAAC,eAAA,EAAc,YAAwB,YAAwB;AAAA,QAEhE,eAAe,KACd,oBAAC,YAAA,EAAW,YAAwB,YAAwB;AAAA,QAG9D;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AACd,gCAAkB,IAAI;AACtB,yBAAA;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
4
|
+
const defaultConfiguration = require("@intlayer/config/built");
|
|
5
5
|
const core = require("@intlayer/core");
|
|
6
6
|
const editorReact = require("@intlayer/editor-react");
|
|
7
7
|
const lucideReact = require("lucide-react");
|
|
@@ -16,7 +16,7 @@ const NavigationViewNode = ({
|
|
|
16
16
|
keyPath,
|
|
17
17
|
dictionaryKey
|
|
18
18
|
}) => {
|
|
19
|
-
const { locales } =
|
|
19
|
+
const { locales } = defaultConfiguration?.internationalization;
|
|
20
20
|
const section = core.getContentNodeByKeyPath(sectionProp, keyPath);
|
|
21
21
|
const { addEditedContent } = editorReact.useEditedContentActions();
|
|
22
22
|
const { setFocusedContentKeyPath, focusedContent } = editorReact.useFocusDictionary();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n isSameKeyPath,\n NodeType,\n type ContentNode,\n type KeyPath,\n} from '@intlayer/core';\nimport {\n useEditedContentActions,\n useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n Button,\n ButtonColor,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionaryKey,\n}) => {\n const { locales } = configuration?.internationalization;\n const section = getContentNodeByKeyPath(sectionProp, keyPath);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return <>React Node</>;\n }\n\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\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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 unknown as ContentNode[]).map((_, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Array, key: index },\n ];\n\n return (\n <NavigationViewNode\n key={JSON.stringify(childKeyPath)}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionaryKey,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\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={ButtonVariant.HOVERABLE}\n color={ButtonColor.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 label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 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 return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"names":["getContentNodeByKeyPath","useEditedContentActions","useFocusDictionary","useIntlayer","getNodeType","keyPath","isSameKeyPath","getIsEditableSection","jsx","Fragment","Button","ButtonVariant","ButtonColor","ChevronRight","NodeType","jsxs","ButtonTextAlign","sectionArray","getEmptyNode","Plus","isEditableSubSection","Accordion","camelCaseToSentence"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n isSameKeyPath,\n NodeType,\n type ContentNode,\n type KeyPath,\n} from '@intlayer/core';\nimport {\n useEditedContentActions,\n useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n Button,\n ButtonColor,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionaryKey,\n}) => {\n const { locales } = configuration?.internationalization;\n const section = getContentNodeByKeyPath(sectionProp, keyPath);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return <>React Node</>;\n }\n\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\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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 unknown as ContentNode[]).map((_, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Array, key: index },\n ];\n\n return (\n <NavigationViewNode\n key={JSON.stringify(childKeyPath)}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionaryKey,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\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={ButtonVariant.HOVERABLE}\n color={ButtonColor.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 label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 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 return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"names":["configuration","getContentNodeByKeyPath","useEditedContentActions","useFocusDictionary","useIntlayer","getNodeType","keyPath","isSameKeyPath","getIsEditableSection","jsx","Fragment","Button","ButtonVariant","ButtonColor","ChevronRight","NodeType","jsxs","ButtonTextAlign","sectionArray","getEmptyNode","Plus","isEditableSubSection","Accordion","camelCaseToSentence"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import defaultConfiguration from "@intlayer/config/built";
|
|
3
3
|
import { getContentNodeByKeyPath, getNodeType, NodeType, getEmptyNode, isSameKeyPath } from "@intlayer/core";
|
|
4
4
|
import { useEditedContentActions, useFocusDictionary } from "@intlayer/editor-react";
|
|
5
5
|
import { ChevronRight, Plus } from "lucide-react";
|
|
@@ -14,7 +14,7 @@ const NavigationViewNode = ({
|
|
|
14
14
|
keyPath,
|
|
15
15
|
dictionaryKey
|
|
16
16
|
}) => {
|
|
17
|
-
const { locales } =
|
|
17
|
+
const { locales } = defaultConfiguration?.internationalization;
|
|
18
18
|
const section = getContentNodeByKeyPath(sectionProp, keyPath);
|
|
19
19
|
const { addEditedContent } = useEditedContentActions();
|
|
20
20
|
const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n isSameKeyPath,\n NodeType,\n type ContentNode,\n type KeyPath,\n} from '@intlayer/core';\nimport {\n useEditedContentActions,\n useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n Button,\n ButtonColor,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionaryKey,\n}) => {\n const { locales } = configuration?.internationalization;\n const section = getContentNodeByKeyPath(sectionProp, keyPath);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return <>React Node</>;\n }\n\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\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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 unknown as ContentNode[]).map((_, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Array, key: index },\n ];\n\n return (\n <NavigationViewNode\n key={JSON.stringify(childKeyPath)}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionaryKey,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\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={ButtonVariant.HOVERABLE}\n color={ButtonColor.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 label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 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 return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"names":["keyPath","sectionArray","isEditableSubSection"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\n\nimport {\n getContentNodeByKeyPath,\n getEmptyNode,\n getNodeType,\n isSameKeyPath,\n NodeType,\n type ContentNode,\n type KeyPath,\n} from '@intlayer/core';\nimport {\n useEditedContentActions,\n useFocusDictionary,\n} from '@intlayer/editor-react';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Accordion } from '../../Accordion';\nimport {\n Button,\n ButtonColor,\n ButtonTextAlign,\n ButtonVariant,\n} from '../../Button';\nimport { getIsEditableSection } from '../getIsEditableSection';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n dictionaryKey: string;\n keyPath: KeyPath[];\n section: ContentNode;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n section: sectionProp,\n keyPath,\n dictionaryKey,\n}) => {\n const { locales } = configuration?.internationalization;\n const section = getContentNodeByKeyPath(sectionProp, keyPath);\n const { addEditedContent } = useEditedContentActions();\n const { setFocusedContentKeyPath, focusedContent } = useFocusDictionary();\n const { addNewElement, goToField } = useIntlayer('navigation-view');\n const nodeType = getNodeType(section);\n const getIsSelected = (keyPath: KeyPath[]) =>\n (focusedContent?.keyPath?.length ?? 0) > 0 &&\n isSameKeyPath(keyPath, focusedContent?.keyPath ?? []);\n const isEditableSubSection = getIsEditableSection(section);\n\n if (!section) return <></>;\n\n if (isEditableSubSection) {\n return (\n <Button\n label={goToField.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n className=\"w-full\"\n onClick={() => setFocusedContentKeyPath(keyPath)}\n IconRight={ChevronRight}\n >\n {camelCaseToSentence(keyPath[keyPath.length - 1].key as string)}\n </Button>\n );\n }\n\n if (typeof section === 'object') {\n if (nodeType === NodeType.ReactNode) {\n return <>React Node</>;\n }\n\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\n return (\n <NavigationViewNode\n key={translationKey}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n </div>\n );\n }\n\n if (nodeType === NodeType.Enumeration || nodeType === NodeType.Condition) {\n return (\n <div className=\"flex flex-col justify-between gap-2\">\n {Object.keys(\n (section as any)[nodeType as unknown as keyof typeof section]\n ).map((key) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: nodeType, key },\n ];\n\n return (\n <NavigationViewNode\n key={key}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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 unknown as ContentNode[]).map((_, index) => {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: NodeType.Array, key: index },\n ];\n\n return (\n <NavigationViewNode\n key={JSON.stringify(childKeyPath)}\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\n );\n })}\n\n <Button\n label={addNewElement.label.value}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.NEUTRAL}\n textAlign={ButtonTextAlign.LEFT}\n onClick={() => {\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.Array,\n key: (section as unknown as ContentNode[]).length,\n },\n ];\n const sectionArray = section as unknown as ContentNode[];\n const emptySectionEl =\n getEmptyNode(\n sectionArray[\n (sectionArray.length - 1) as keyof typeof sectionArray\n ] as ContentNode\n ) ?? '';\n addEditedContent(\n dictionaryKey,\n emptySectionEl,\n newKeyPath,\n false\n );\n setFocusedContentKeyPath(newKeyPath);\n }}\n Icon={Plus}\n >\n {addNewElement.text}\n </Button>\n </div>\n );\n }\n\n if (typeof section.nodeType === 'string') {\n const childKeyPath: KeyPath[] = [\n ...keyPath,\n { type: section.nodeType } as KeyPath,\n ];\n\n return (\n <NavigationViewNode\n keyPath={childKeyPath}\n section={sectionProp}\n dictionaryKey={dictionaryKey}\n />\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\n const subSection = getContentNodeByKeyPath(sectionProp, childKeyPath);\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={ButtonVariant.HOVERABLE}\n color={ButtonColor.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 label={`${goToField.label.value} ${key}`}\n isActive={getIsSelected(childKeyPath)}\n onClick={() => setFocusedContentKeyPath(childKeyPath)}\n header={camelCaseToSentence(key)}\n >\n <div className=\"mt-2 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 return (\n <>\n Error loading section --\n {nodeType}\n --\n {JSON.stringify(section)}\n --\n {JSON.stringify(keyPath)}\n </>\n );\n};\n"],"names":["configuration","keyPath","sectionArray","isEditableSubSection"],"mappings":";;;;;;;;;;AA4BO,MAAM,YAAsB,CAAC,YAAY,MAAM,UAAU;AAQzD,MAAM,qBAA2C,CAAC;AAAA,EACvD,SAAS;AAAA,EACT;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,YAAYA,sBAAe;AACnC,QAAM,UAAU,wBAAwB,aAAa,OAAO;AAC5D,QAAM,EAAE,iBAAA,IAAqB,wBAAA;AAC7B,QAAM,EAAE,0BAA0B,eAAA,IAAmB,mBAAA;AACrD,QAAM,EAAE,eAAe,cAAc,YAAY,iBAAiB;AAClE,QAAM,WAAW,YAAY,OAAO;AACpC,QAAM,gBAAgB,CAACC,cACpB,gBAAgB,SAAS,UAAU,KAAK,KACzC,cAAcA,UAAS,gBAAgB,WAAW,CAAA,CAAE;AACtD,QAAM,uBAAuB,qBAAqB,OAAO;AAEzD,MAAI,CAAC,QAAS,QAAO,oBAAA,UAAA,CAAA,CAAE;AAEvB,MAAI,sBAAsB;AACxB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,UAAU,MAAM;AAAA,QACvB,SAAS,cAAc;AAAA,QACvB,OAAO,YAAY;AAAA,QACnB,WAAU;AAAA,QACV,SAAS,MAAM,yBAAyB,OAAO;AAAA,QAC/C,WAAW;AAAA,QAEV,8BAAoB,QAAQ,QAAQ,SAAS,CAAC,EAAE,GAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpE;AAEA,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,aAAa,SAAS,WAAW;AACnC,6CAAS,UAAA,aAAA,CAAU;AAAA,IACrB;AAEA,QAAI,aAAa,SAAS,aAAa;AACrC,iCACG,OAAA,EAAI,WAAU,uCACZ,UAAA,QAAQ,IAAI,CAAC,mBAAmB;AAC/B,cAAM,eAA0B;AAAA,UAC9B,GAAG;AAAA,UACH,EAAE,MAAM,SAAS,aAAa,KAAK,eAAA;AAAA,QAAe;AAGpD,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS;AAAA,YACT,SAAS;AAAA,YACT;AAAA,UAAA;AAAA,UAHK;AAAA,QAAA;AAAA,MAMX,CAAC,EAAA,CACH;AAAA,IAEJ;AAEA,QAAI,aAAa,SAAS,eAAe,aAAa,SAAS,WAAW;AACxE,aACE,oBAAC,OAAA,EAAI,WAAU,uCACZ,UAAA,OAAO;AAAA,QACL,QAAgB,QAA2C;AAAA,MAAA,EAC5D,IAAI,CAAC,QAAQ;AACb,cAAM,eAA0B;AAAA,UAC9B,GAAG;AAAA,UACH,EAAE,MAAM,UAAU,IAAA;AAAA,QAAI;AAGxB,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS;AAAA,YACT,SAAS;AAAA,YACT;AAAA,UAAA;AAAA,UAHK;AAAA,QAAA;AAAA,MAMX,CAAC,EAAA,CACH;AAAA,IAEJ;AAEA,QAAI,aAAa,SAAS,OAAO;AAC/B,aACE,qBAAC,OAAA,EAAI,WAAU,uCACX,UAAA;AAAA,QAAA,QAAqC,IAAI,CAAC,GAAG,UAAU;AACvD,gBAAM,eAA0B;AAAA,YAC9B,GAAG;AAAA,YACH,EAAE,MAAM,SAAS,OAAO,KAAK,MAAA;AAAA,UAAM;AAGrC,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,SAAS;AAAA,cACT,SAAS;AAAA,cACT;AAAA,YAAA;AAAA,YAHK,KAAK,UAAU,YAAY;AAAA,UAAA;AAAA,QAMtC,CAAC;AAAA,QAED;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,cAAc,MAAM;AAAA,YAC3B,SAAS,cAAc;AAAA,YACvB,OAAO,YAAY;AAAA,YACnB,WAAW,gBAAgB;AAAA,YAC3B,SAAS,MAAM;AACb,oBAAM,aAAwB;AAAA,gBAC5B,GAAG;AAAA,gBACH;AAAA,kBACE,MAAM,SAAS;AAAA,kBACf,KAAM,QAAqC;AAAA,gBAAA;AAAA,cAC7C;AAEF,oBAAMC,gBAAe;AACrB,oBAAM,iBACJ;AAAA,gBACEA,cACGA,cAAa,SAAS,CACzB;AAAA,cAAA,KACG;AACP;AAAA,gBACE;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAEF,uCAAyB,UAAU;AAAA,YACrC;AAAA,YACA,MAAM;AAAA,YAEL,UAAA,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB,GACF;AAAA,IAEJ;AAEA,QAAI,OAAO,QAAQ,aAAa,UAAU;AACxC,YAAM,eAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,EAAE,MAAM,QAAQ,SAAA;AAAA,MAAS;AAG3B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA,UACT;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAEA,UAAM,eAAe,OAAO,KAAK,OAAO;AACxC,+BACG,OAAA,EAAI,WAAU,yDACZ,UAAA,aAAa,IAAI,CAAC,QAAQ;AACzB,YAAM,eAA0B;AAAA,QAC9B,GAAG;AAAA,QACH,EAAE,MAAM,SAAS,QAAQ,IAAA;AAAA,MAAI;AAG/B,YAAM,aAAa,wBAAwB,aAAa,YAAY;AACpE,YAAMC,wBAAuB,qBAAqB,UAAU;AAE5D,UAAIA,uBAAsB;AACxB,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,GAAG,UAAU,MAAM,KAAK,IAAI,GAAG;AAAA,YAEtC,UAAU,cAAc,YAAY;AAAA,YACpC,SAAS,cAAc;AAAA,YACvB,OAAO,YAAY;AAAA,YACnB,WAAU;AAAA,YACV,SAAS,MAAM,yBAAyB,YAAY;AAAA,YACpD,WAAW;AAAA,YAEV,8BAAoB,GAAG;AAAA,UAAA;AAAA,UARnB;AAAA,QAAA;AAAA,MAWX;AAEA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,OAAO,GAAG,UAAU,MAAM,KAAK,IAAI,GAAG;AAAA,UACtC,UAAU,cAAc,YAAY;AAAA,UACpC,SAAS,MAAM,yBAAyB,YAAY;AAAA,UACpD,QAAQ,oBAAoB,GAAG;AAAA,UAE/B,8BAAC,OAAA,EAAI,WAAU,+BACb,UAAA,oBAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,SAAS;AAAA,cACT;AAAA,YAAA;AAAA,UAAA,GAEJ,EAAA,CACF;AAAA,QAAA;AAAA,QAdK;AAAA,MAAA;AAAA,IAiBX,CAAC,EAAA,CACH;AAAA,EAEJ;AAEA,SACE,qBAAA,UAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IAEC;AAAA,IAAS;AAAA,IAET,KAAK,UAAU,OAAO;AAAA,IAAE;AAAA,IAExB,KAAK,UAAU,OAAO;AAAA,EAAA,GACzB;AAEJ;"}
|
|
@@ -25,6 +25,7 @@ const SaveForm = ({
|
|
|
25
25
|
mode,
|
|
26
26
|
className,
|
|
27
27
|
onDelete,
|
|
28
|
+
onSave,
|
|
28
29
|
...props
|
|
29
30
|
}) => {
|
|
30
31
|
const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = ReactExports.useState(false);
|
|
@@ -60,6 +61,7 @@ const SaveForm = ({
|
|
|
60
61
|
onSuccess: () => {
|
|
61
62
|
setLocaleDictionary(editedContent?.[dictionary.localId]);
|
|
62
63
|
restoreEditedContent(dictionary.localId);
|
|
64
|
+
onSave?.();
|
|
63
65
|
}
|
|
64
66
|
}
|
|
65
67
|
);
|
|
@@ -75,6 +77,7 @@ const SaveForm = ({
|
|
|
75
77
|
if (res) {
|
|
76
78
|
setLocaleDictionary(editedContent?.[dictionary.localId]);
|
|
77
79
|
restoreEditedContent(dictionary.localId);
|
|
80
|
+
onSave?.();
|
|
78
81
|
}
|
|
79
82
|
}
|
|
80
83
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaveForm.cjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useDictionariesRecordActions,\n useEditedContent,\n} from '@intlayer/editor-react';\nimport {\n ArrowUpFromLine,\n Download,\n RotateCcw,\n Save,\n Trash,\n} from 'lucide-react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type FormHTMLAttributes,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Modal, ModalSize } from '../../../components/Modal';\nimport {\n useAuth,\n useDeleteDictionary,\n usePushDictionaries,\n useWriteDictionary,\n} from '../../../hooks';\nimport { cn } from '../../../utils/cn';\nimport { ButtonColor, ButtonVariant } from '../../Button';\nimport { Form } from '../../Form';\n\ntype DictionaryDetailsProps = {\n dictionary: Dictionary;\n mode: ('local' | 'remote')[];\n onDelete?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n dictionary,\n mode,\n className,\n onDelete,\n ...props\n}) => {\n const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n const { setLocaleDictionary } = useDictionariesRecordActions();\n const { mutate: deleteDictionary, isPending: isDeleting } =\n useDeleteDictionary();\n const { mutate: writeDictionary, isPending: isWriting } =\n useWriteDictionary();\n const { mutate: pushDictionaries, isPending: isPushing } =\n usePushDictionaries();\n const isLoading = isWriting || isPushing;\n\n const { editedContent, restoreEditedContent } = useEditedContent();\n const {\n deleteButton,\n resetButton,\n saveButton,\n publishButton,\n downloadButton,\n confirmation,\n } = useIntlayer('save-dictionary-details');\n const { isAuthenticated } = useAuth();\n\n const editedDictionary = editedContent?.[dictionary.localId!];\n\n const isEdited =\n editedDictionary &&\n JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n const isDistantDictionary =\n typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n const handleSaveDictionaryConfirmation = async () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n writeDictionary(\n {\n dictionary: updatedDictionary,\n },\n {\n onSuccess: () => {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n },\n }\n );\n };\n\n const handlePushDictionary = () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n pushDictionaries([updatedDictionary], {\n onSuccess: (res) => {\n if (res) {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n }\n },\n });\n };\n\n const handleDeleteDictionary = () => {\n if (!(dictionary as unknown as DistantDictionary).id) return;\n\n deleteDictionary(\n (dictionary as unknown as DistantDictionary).id.toString(),\n {\n onSuccess: (res) => {\n if (res) {\n onDelete?.();\n }\n },\n }\n );\n };\n\n return (\n <>\n <Modal\n isOpen={isFormatAlertModalOpen}\n title={confirmation.title.value}\n size={ModalSize.MD}\n >\n <form className=\"size-full px-3\">\n <p className=\"text-neutral py-4 text-sm\">{confirmation.message}</p>\n\n <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n <Form.Button\n label={confirmation.cancelButton.label.value}\n disabled={!isEdited || isLoading}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n variant={ButtonVariant.OUTLINE}\n onClick={() => setIsFormatAlertModalOpen(false)}\n >\n {confirmation.cancelButton.text}\n </Form.Button>\n <Form.Button\n label={confirmation.confirmButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handleSaveDictionaryConfirmation}\n >\n {confirmation.confirmButton.text}\n </Form.Button>\n </div>\n </form>\n </Modal>\n <form\n className={cn('flex justify-end gap-2 max-md:flex-col', className)}\n {...props}\n >\n {mode.includes('remote') &&\n isDistantDictionary &&\n onDelete &&\n isAuthenticated && (\n <Form.Button\n label={deleteButton.label.value}\n Icon={Trash}\n color={ButtonColor.ERROR}\n variant={ButtonVariant.OUTLINE}\n className=\"max-md:w-full\"\n isLoading={isDeleting}\n onClick={handleDeleteDictionary}\n >\n {deleteButton.text}\n </Form.Button>\n )}\n {isEdited && (\n <Form.Button\n label={resetButton.label.value}\n disabled={!isEdited}\n Icon={RotateCcw}\n variant={ButtonVariant.OUTLINE}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n onClick={() => restoreEditedContent(dictionary.localId!)}\n >\n {resetButton.text}\n </Form.Button>\n )}\n {mode.includes('local') && (\n <Form.Button\n label={downloadButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Download}\n color={ButtonColor.TEXT}\n variant={\n isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n }\n className=\"max-md:w-full\"\n isLoading={isWriting}\n onClick={() => setIsFormatAlertModalOpen(true)}\n >\n {downloadButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n <Form.Button\n label={publishButton.label.value}\n disabled={isLoading}\n Icon={ArrowUpFromLine}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {publishButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') &&\n isAuthenticated &&\n isDistantDictionary &&\n isEdited && (\n <Form.Button\n label={saveButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color=\"text\"\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {saveButton.text}\n </Form.Button>\n )}\n </form>\n </>\n );\n};\n"],"names":["useState","useDictionariesRecordActions","useDeleteDictionary","useWriteDictionary","usePushDictionaries","useEditedContent","useIntlayer","useAuth","jsxs","Fragment","jsx","Modal","ModalSize","Form","ButtonColor","ButtonVariant","Save","cn","Trash","RotateCcw","Download","ArrowUpFromLine"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,WAAuC,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,wBAAwB,yBAAyB,IAAIA,aAAAA,SAAS,KAAK;AAC1E,QAAM,EAAE,oBAAA,IAAwBC,yCAAA;AAChC,QAAM,EAAE,QAAQ,kBAAkB,WAAW,WAAA,IAC3CC,iBAAAA,oBAAA;AACF,QAAM,EAAE,QAAQ,iBAAiB,WAAW,UAAA,IAC1CC,iBAAAA,mBAAA;AACF,QAAM,EAAE,QAAQ,kBAAkB,WAAW,UAAA,IAC3CC,iBAAAA,oBAAA;AACF,QAAM,YAAY,aAAa;AAE/B,QAAM,EAAE,eAAe,qBAAA,IAAyBC,6BAAA;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEC,cAAAA,YAAY,yBAAyB;AACzC,QAAM,EAAE,gBAAA,IAAoBC,8BAAA;AAE5B,QAAM,mBAAmB,gBAAgB,WAAW,OAAQ;AAE5D,QAAM,WACJ,oBACA,KAAK,UAAU,gBAAgB,MAAM,KAAK,UAAU,UAAU;AAEhE,QAAM,sBACJ,OAAQ,YAA6C,OAAO;AAE9D,QAAM,mCAAmC,YAAY;AACnD,QAAI,CAAC,gBAAgB,WAAW,OAAQ,EAAG;AAE3C,UAAM,oBAAoB;AAAA,MACxB,GAAG;AAAA,MACH,GAAG,gBAAgB,WAAW,OAAQ;AAAA,IAAA;AAGxC;AAAA,MACE;AAAA,QACE,YAAY;AAAA,MAAA;AAAA,MAEd;AAAA,QACE,WAAW,MAAM;AACf,8BAAoB,gBAAgB,WAAW,OAAQ,CAAC;AACxD,+BAAqB,WAAW,OAAQ;AAAA,QAC1C;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,gBAAgB,WAAW,OAAQ,EAAG;AAE3C,UAAM,oBAAoB;AAAA,MACxB,GAAG;AAAA,MACH,GAAG,gBAAgB,WAAW,OAAQ;AAAA,IAAA;AAGxC,qBAAiB,CAAC,iBAAiB,GAAG;AAAA,MACpC,WAAW,CAAC,QAAQ;AAClB,YAAI,KAAK;AACP,8BAAoB,gBAAgB,WAAW,OAAQ,CAAC;AACxD,+BAAqB,WAAW,OAAQ;AAAA,QAC1C;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAEA,QAAM,yBAAyB,MAAM;AACnC,QAAI,CAAE,WAA4C,GAAI;AAEtD;AAAA,MACG,WAA4C,GAAG,SAAA;AAAA,MAChD;AAAA,QACE,WAAW,CAAC,QAAQ;AAClB,cAAI,KAAK;AACP,uBAAA;AAAA,UACF;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO,aAAa,MAAM;AAAA,QAC1B,MAAMC,uBAAAA,UAAU;AAAA,QAEhB,UAAAJ,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,UAAAE,2BAAAA,IAAC,KAAA,EAAE,WAAU,6BAA6B,UAAA,aAAa,SAAQ;AAAA,UAE/DF,2BAAAA,KAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,YAAAE,2BAAAA;AAAAA,cAACG,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,OAAO,aAAa,aAAa,MAAM;AAAA,gBACvC,UAAU,CAAC,YAAY;AAAA,gBACvB,OAAOC,yBAAAA,YAAY;AAAA,gBACnB,WAAU;AAAA,gBACV,SAASC,yBAAAA,cAAc;AAAA,gBACvB,SAAS,MAAM,0BAA0B,KAAK;AAAA,gBAE7C,uBAAa,aAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAE7BL,2BAAAA;AAAAA,cAACG,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,OAAO,aAAa,cAAc,MAAM;AAAA,gBACxC,UAAU,CAAC,YAAY;AAAA,gBACvB,MAAMG,YAAAA;AAAAA,gBACN,OAAOF,yBAAAA,YAAY;AAAA,gBACnB,WAAU;AAAA,gBACV,WAAW;AAAA,gBACX,SAAS;AAAA,gBAER,uBAAa,cAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAC9B,EAAA,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFN,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWS,SAAAA,GAAG,0CAA0C,SAAS;AAAA,QAChE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,KAAK,SAAS,QAAQ,KACrB,uBACA,YACA,mBACEP,2BAAAA;AAAAA,YAACG,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,OAAO,aAAa,MAAM;AAAA,cAC1B,MAAMK,YAAAA;AAAAA,cACN,OAAOJ,yBAAAA,YAAY;AAAA,cACnB,SAASC,yBAAAA,cAAc;AAAA,cACvB,WAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS;AAAA,cAER,UAAA,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnB,YACCL,2BAAAA;AAAAA,YAACG,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,OAAO,YAAY,MAAM;AAAA,cACzB,UAAU,CAAC;AAAA,cACX,MAAMM,YAAAA;AAAAA,cACN,SAASJ,yBAAAA,cAAc;AAAA,cACvB,OAAOD,yBAAAA,YAAY;AAAA,cACnB,WAAU;AAAA,cACV,SAAS,MAAM,qBAAqB,WAAW,OAAQ;AAAA,cAEtD,UAAA,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGhB,KAAK,SAAS,OAAO,KACpBJ,2BAAAA;AAAAA,YAACG,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,OAAO,eAAe,MAAM;AAAA,cAC5B,UAAU,CAAC,YAAY;AAAA,cACvB,MAAMO,YAAAA;AAAAA,cACN,OAAON,yBAAAA,YAAY;AAAA,cACnB,SACE,kBAAkBC,yBAAAA,cAAc,UAAUA,yBAAAA,cAAc;AAAA,cAE1D,WAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS,MAAM,0BAA0B,IAAI;AAAA,cAE5C,UAAA,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAGnB,KAAK,SAAS,QAAQ,KAAK,mBAAmB,CAAC,uBAC9CL,2BAAAA;AAAAA,YAACG,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,OAAO,cAAc,MAAM;AAAA,cAC3B,UAAU;AAAA,cACV,MAAMQ,YAAAA;AAAAA,cACN,OAAOP,yBAAAA,YAAY;AAAA,cACnB,WAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS;AAAA,cAER,UAAA,cAAc;AAAA,YAAA;AAAA,UAAA;AAAA,UAGlB,KAAK,SAAS,QAAQ,KACrB,mBACA,uBACA,YACEJ,2BAAAA;AAAAA,YAACG,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,OAAO,WAAW,MAAM;AAAA,cACxB,UAAU,CAAC,YAAY;AAAA,cACvB,MAAMG,YAAAA;AAAAA,cACN,OAAM;AAAA,cACN,WAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS;AAAA,cAER,UAAA,WAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}
|
|
1
|
+
{"version":3,"file":"SaveForm.cjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useDictionariesRecordActions,\n useEditedContent,\n} from '@intlayer/editor-react';\nimport {\n ArrowUpFromLine,\n Download,\n RotateCcw,\n Save,\n Trash,\n} from 'lucide-react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type FormHTMLAttributes,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Modal, ModalSize } from '../../../components/Modal';\nimport {\n useAuth,\n useDeleteDictionary,\n usePushDictionaries,\n useWriteDictionary,\n} from '../../../hooks';\nimport { cn } from '../../../utils/cn';\nimport { ButtonColor, ButtonVariant } from '../../Button';\nimport { Form } from '../../Form';\n\ntype DictionaryDetailsProps = {\n dictionary: Dictionary;\n mode: ('local' | 'remote')[];\n onDelete?: () => void;\n onSave?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n dictionary,\n mode,\n className,\n onDelete,\n onSave,\n ...props\n}) => {\n const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n const { setLocaleDictionary } = useDictionariesRecordActions();\n const { mutate: deleteDictionary, isPending: isDeleting } =\n useDeleteDictionary();\n const { mutate: writeDictionary, isPending: isWriting } =\n useWriteDictionary();\n const { mutate: pushDictionaries, isPending: isPushing } =\n usePushDictionaries();\n const isLoading = isWriting || isPushing;\n\n const { editedContent, restoreEditedContent } = useEditedContent();\n const {\n deleteButton,\n resetButton,\n saveButton,\n publishButton,\n downloadButton,\n confirmation,\n } = useIntlayer('save-dictionary-details');\n const { isAuthenticated } = useAuth();\n\n const editedDictionary = editedContent?.[dictionary.localId!];\n\n const isEdited =\n editedDictionary &&\n JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n const isDistantDictionary =\n typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n const handleSaveDictionaryConfirmation = async () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n writeDictionary(\n {\n dictionary: updatedDictionary,\n },\n {\n onSuccess: () => {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n },\n }\n );\n };\n\n const handlePushDictionary = () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n pushDictionaries([updatedDictionary], {\n onSuccess: (res) => {\n if (res) {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n }\n },\n });\n };\n\n const handleDeleteDictionary = () => {\n if (!(dictionary as unknown as DistantDictionary).id) return;\n\n deleteDictionary(\n (dictionary as unknown as DistantDictionary).id.toString(),\n {\n onSuccess: (res) => {\n if (res) {\n onDelete?.();\n }\n },\n }\n );\n };\n\n return (\n <>\n <Modal\n isOpen={isFormatAlertModalOpen}\n title={confirmation.title.value}\n size={ModalSize.MD}\n >\n <form className=\"size-full px-3\">\n <p className=\"text-neutral py-4 text-sm\">{confirmation.message}</p>\n\n <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n <Form.Button\n label={confirmation.cancelButton.label.value}\n disabled={!isEdited || isLoading}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n variant={ButtonVariant.OUTLINE}\n onClick={() => setIsFormatAlertModalOpen(false)}\n >\n {confirmation.cancelButton.text}\n </Form.Button>\n <Form.Button\n label={confirmation.confirmButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handleSaveDictionaryConfirmation}\n >\n {confirmation.confirmButton.text}\n </Form.Button>\n </div>\n </form>\n </Modal>\n <form\n className={cn('flex justify-end gap-2 max-md:flex-col', className)}\n {...props}\n >\n {mode.includes('remote') &&\n isDistantDictionary &&\n onDelete &&\n isAuthenticated && (\n <Form.Button\n label={deleteButton.label.value}\n Icon={Trash}\n color={ButtonColor.ERROR}\n variant={ButtonVariant.OUTLINE}\n className=\"max-md:w-full\"\n isLoading={isDeleting}\n onClick={handleDeleteDictionary}\n >\n {deleteButton.text}\n </Form.Button>\n )}\n {isEdited && (\n <Form.Button\n label={resetButton.label.value}\n disabled={!isEdited}\n Icon={RotateCcw}\n variant={ButtonVariant.OUTLINE}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n onClick={() => restoreEditedContent(dictionary.localId!)}\n >\n {resetButton.text}\n </Form.Button>\n )}\n {mode.includes('local') && (\n <Form.Button\n label={downloadButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Download}\n color={ButtonColor.TEXT}\n variant={\n isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n }\n className=\"max-md:w-full\"\n isLoading={isWriting}\n onClick={() => setIsFormatAlertModalOpen(true)}\n >\n {downloadButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n <Form.Button\n label={publishButton.label.value}\n disabled={isLoading}\n Icon={ArrowUpFromLine}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {publishButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') &&\n isAuthenticated &&\n isDistantDictionary &&\n isEdited && (\n <Form.Button\n label={saveButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color=\"text\"\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {saveButton.text}\n </Form.Button>\n )}\n </form>\n </>\n );\n};\n"],"names":["useState","useDictionariesRecordActions","useDeleteDictionary","useWriteDictionary","usePushDictionaries","useEditedContent","useIntlayer","useAuth","jsxs","Fragment","jsx","Modal","ModalSize","Form","ButtonColor","ButtonVariant","Save","cn","Trash","RotateCcw","Download","ArrowUpFromLine"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ type DictionaryDetailsProps = {
|
|
|
4
4
|
dictionary: Dictionary;
|
|
5
5
|
mode: ('local' | 'remote')[];
|
|
6
6
|
onDelete?: () => void;
|
|
7
|
+
onSave?: () => void;
|
|
7
8
|
} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
|
|
8
9
|
export declare const SaveForm: FC<DictionaryDetailsProps>;
|
|
9
10
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaveForm.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAYjD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,kBAAkB,EAExB,MAAM,OAAO,CAAC;AAaf,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"SaveForm.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAYjD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACP,KAAK,kBAAkB,EAExB,MAAM,OAAO,CAAC;AAaf,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC;AAE5E,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAkN/C,CAAC"}
|
|
@@ -23,6 +23,7 @@ const SaveForm = ({
|
|
|
23
23
|
mode,
|
|
24
24
|
className,
|
|
25
25
|
onDelete,
|
|
26
|
+
onSave,
|
|
26
27
|
...props
|
|
27
28
|
}) => {
|
|
28
29
|
const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);
|
|
@@ -58,6 +59,7 @@ const SaveForm = ({
|
|
|
58
59
|
onSuccess: () => {
|
|
59
60
|
setLocaleDictionary(editedContent?.[dictionary.localId]);
|
|
60
61
|
restoreEditedContent(dictionary.localId);
|
|
62
|
+
onSave?.();
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
65
|
);
|
|
@@ -73,6 +75,7 @@ const SaveForm = ({
|
|
|
73
75
|
if (res) {
|
|
74
76
|
setLocaleDictionary(editedContent?.[dictionary.localId]);
|
|
75
77
|
restoreEditedContent(dictionary.localId);
|
|
78
|
+
onSave?.();
|
|
76
79
|
}
|
|
77
80
|
}
|
|
78
81
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaveForm.mjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useDictionariesRecordActions,\n useEditedContent,\n} from '@intlayer/editor-react';\nimport {\n ArrowUpFromLine,\n Download,\n RotateCcw,\n Save,\n Trash,\n} from 'lucide-react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type FormHTMLAttributes,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Modal, ModalSize } from '../../../components/Modal';\nimport {\n useAuth,\n useDeleteDictionary,\n usePushDictionaries,\n useWriteDictionary,\n} from '../../../hooks';\nimport { cn } from '../../../utils/cn';\nimport { ButtonColor, ButtonVariant } from '../../Button';\nimport { Form } from '../../Form';\n\ntype DictionaryDetailsProps = {\n dictionary: Dictionary;\n mode: ('local' | 'remote')[];\n onDelete?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n dictionary,\n mode,\n className,\n onDelete,\n ...props\n}) => {\n const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n const { setLocaleDictionary } = useDictionariesRecordActions();\n const { mutate: deleteDictionary, isPending: isDeleting } =\n useDeleteDictionary();\n const { mutate: writeDictionary, isPending: isWriting } =\n useWriteDictionary();\n const { mutate: pushDictionaries, isPending: isPushing } =\n usePushDictionaries();\n const isLoading = isWriting || isPushing;\n\n const { editedContent, restoreEditedContent } = useEditedContent();\n const {\n deleteButton,\n resetButton,\n saveButton,\n publishButton,\n downloadButton,\n confirmation,\n } = useIntlayer('save-dictionary-details');\n const { isAuthenticated } = useAuth();\n\n const editedDictionary = editedContent?.[dictionary.localId!];\n\n const isEdited =\n editedDictionary &&\n JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n const isDistantDictionary =\n typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n const handleSaveDictionaryConfirmation = async () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n writeDictionary(\n {\n dictionary: updatedDictionary,\n },\n {\n onSuccess: () => {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n },\n }\n );\n };\n\n const handlePushDictionary = () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n pushDictionaries([updatedDictionary], {\n onSuccess: (res) => {\n if (res) {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n }\n },\n });\n };\n\n const handleDeleteDictionary = () => {\n if (!(dictionary as unknown as DistantDictionary).id) return;\n\n deleteDictionary(\n (dictionary as unknown as DistantDictionary).id.toString(),\n {\n onSuccess: (res) => {\n if (res) {\n onDelete?.();\n }\n },\n }\n );\n };\n\n return (\n <>\n <Modal\n isOpen={isFormatAlertModalOpen}\n title={confirmation.title.value}\n size={ModalSize.MD}\n >\n <form className=\"size-full px-3\">\n <p className=\"text-neutral py-4 text-sm\">{confirmation.message}</p>\n\n <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n <Form.Button\n label={confirmation.cancelButton.label.value}\n disabled={!isEdited || isLoading}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n variant={ButtonVariant.OUTLINE}\n onClick={() => setIsFormatAlertModalOpen(false)}\n >\n {confirmation.cancelButton.text}\n </Form.Button>\n <Form.Button\n label={confirmation.confirmButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handleSaveDictionaryConfirmation}\n >\n {confirmation.confirmButton.text}\n </Form.Button>\n </div>\n </form>\n </Modal>\n <form\n className={cn('flex justify-end gap-2 max-md:flex-col', className)}\n {...props}\n >\n {mode.includes('remote') &&\n isDistantDictionary &&\n onDelete &&\n isAuthenticated && (\n <Form.Button\n label={deleteButton.label.value}\n Icon={Trash}\n color={ButtonColor.ERROR}\n variant={ButtonVariant.OUTLINE}\n className=\"max-md:w-full\"\n isLoading={isDeleting}\n onClick={handleDeleteDictionary}\n >\n {deleteButton.text}\n </Form.Button>\n )}\n {isEdited && (\n <Form.Button\n label={resetButton.label.value}\n disabled={!isEdited}\n Icon={RotateCcw}\n variant={ButtonVariant.OUTLINE}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n onClick={() => restoreEditedContent(dictionary.localId!)}\n >\n {resetButton.text}\n </Form.Button>\n )}\n {mode.includes('local') && (\n <Form.Button\n label={downloadButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Download}\n color={ButtonColor.TEXT}\n variant={\n isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n }\n className=\"max-md:w-full\"\n isLoading={isWriting}\n onClick={() => setIsFormatAlertModalOpen(true)}\n >\n {downloadButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n <Form.Button\n label={publishButton.label.value}\n disabled={isLoading}\n Icon={ArrowUpFromLine}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {publishButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') &&\n isAuthenticated &&\n isDistantDictionary &&\n isEdited && (\n <Form.Button\n label={saveButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color=\"text\"\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {saveButton.text}\n </Form.Button>\n )}\n </form>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SaveForm.mjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport type { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport type { Dictionary } from '@intlayer/core';\nimport {\n useDictionariesRecordActions,\n useEditedContent,\n} from '@intlayer/editor-react';\nimport {\n ArrowUpFromLine,\n Download,\n RotateCcw,\n Save,\n Trash,\n} from 'lucide-react';\nimport {\n type DetailedHTMLProps,\n type FC,\n type FormHTMLAttributes,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Modal, ModalSize } from '../../../components/Modal';\nimport {\n useAuth,\n useDeleteDictionary,\n usePushDictionaries,\n useWriteDictionary,\n} from '../../../hooks';\nimport { cn } from '../../../utils/cn';\nimport { ButtonColor, ButtonVariant } from '../../Button';\nimport { Form } from '../../Form';\n\ntype DictionaryDetailsProps = {\n dictionary: Dictionary;\n mode: ('local' | 'remote')[];\n onDelete?: () => void;\n onSave?: () => void;\n} & DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({\n dictionary,\n mode,\n className,\n onDelete,\n onSave,\n ...props\n}) => {\n const [isFormatAlertModalOpen, setIsFormatAlertModalOpen] = useState(false);\n const { setLocaleDictionary } = useDictionariesRecordActions();\n const { mutate: deleteDictionary, isPending: isDeleting } =\n useDeleteDictionary();\n const { mutate: writeDictionary, isPending: isWriting } =\n useWriteDictionary();\n const { mutate: pushDictionaries, isPending: isPushing } =\n usePushDictionaries();\n const isLoading = isWriting || isPushing;\n\n const { editedContent, restoreEditedContent } = useEditedContent();\n const {\n deleteButton,\n resetButton,\n saveButton,\n publishButton,\n downloadButton,\n confirmation,\n } = useIntlayer('save-dictionary-details');\n const { isAuthenticated } = useAuth();\n\n const editedDictionary = editedContent?.[dictionary.localId!];\n\n const isEdited =\n editedDictionary &&\n JSON.stringify(editedDictionary) !== JSON.stringify(dictionary);\n\n const isDistantDictionary =\n typeof (dictionary as unknown as DistantDictionary)?.id !== 'undefined';\n\n const handleSaveDictionaryConfirmation = async () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n writeDictionary(\n {\n dictionary: updatedDictionary,\n },\n {\n onSuccess: () => {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n },\n }\n );\n };\n\n const handlePushDictionary = () => {\n if (!editedContent?.[dictionary.localId!]) return;\n\n const updatedDictionary = {\n ...dictionary,\n ...editedContent?.[dictionary.localId!],\n };\n\n pushDictionaries([updatedDictionary], {\n onSuccess: (res) => {\n if (res) {\n setLocaleDictionary(editedContent?.[dictionary.localId!]);\n restoreEditedContent(dictionary.localId!);\n onSave?.();\n }\n },\n });\n };\n\n const handleDeleteDictionary = () => {\n if (!(dictionary as unknown as DistantDictionary).id) return;\n\n deleteDictionary(\n (dictionary as unknown as DistantDictionary).id.toString(),\n {\n onSuccess: (res) => {\n if (res) {\n onDelete?.();\n }\n },\n }\n );\n };\n\n return (\n <>\n <Modal\n isOpen={isFormatAlertModalOpen}\n title={confirmation.title.value}\n size={ModalSize.MD}\n >\n <form className=\"size-full px-3\">\n <p className=\"text-neutral py-4 text-sm\">{confirmation.message}</p>\n\n <div className=\"mt-12 flex justify-end gap-2 max-md:flex-col\">\n <Form.Button\n label={confirmation.cancelButton.label.value}\n disabled={!isEdited || isLoading}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n variant={ButtonVariant.OUTLINE}\n onClick={() => setIsFormatAlertModalOpen(false)}\n >\n {confirmation.cancelButton.text}\n </Form.Button>\n <Form.Button\n label={confirmation.confirmButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handleSaveDictionaryConfirmation}\n >\n {confirmation.confirmButton.text}\n </Form.Button>\n </div>\n </form>\n </Modal>\n <form\n className={cn('flex justify-end gap-2 max-md:flex-col', className)}\n {...props}\n >\n {mode.includes('remote') &&\n isDistantDictionary &&\n onDelete &&\n isAuthenticated && (\n <Form.Button\n label={deleteButton.label.value}\n Icon={Trash}\n color={ButtonColor.ERROR}\n variant={ButtonVariant.OUTLINE}\n className=\"max-md:w-full\"\n isLoading={isDeleting}\n onClick={handleDeleteDictionary}\n >\n {deleteButton.text}\n </Form.Button>\n )}\n {isEdited && (\n <Form.Button\n label={resetButton.label.value}\n disabled={!isEdited}\n Icon={RotateCcw}\n variant={ButtonVariant.OUTLINE}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n onClick={() => restoreEditedContent(dictionary.localId!)}\n >\n {resetButton.text}\n </Form.Button>\n )}\n {mode.includes('local') && (\n <Form.Button\n label={downloadButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Download}\n color={ButtonColor.TEXT}\n variant={\n isAuthenticated ? ButtonVariant.OUTLINE : ButtonVariant.DEFAULT\n }\n className=\"max-md:w-full\"\n isLoading={isWriting}\n onClick={() => setIsFormatAlertModalOpen(true)}\n >\n {downloadButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') && isAuthenticated && !isDistantDictionary && (\n <Form.Button\n label={publishButton.label.value}\n disabled={isLoading}\n Icon={ArrowUpFromLine}\n color={ButtonColor.TEXT}\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {publishButton.text}\n </Form.Button>\n )}\n {mode.includes('remote') &&\n isAuthenticated &&\n isDistantDictionary &&\n isEdited && (\n <Form.Button\n label={saveButton.label.value}\n disabled={!isEdited || isLoading}\n Icon={Save}\n color=\"text\"\n className=\"max-md:w-full\"\n isLoading={isPushing}\n onClick={handlePushDictionary}\n >\n {saveButton.text}\n </Form.Button>\n )}\n </form>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const configuration = require("@intlayer/config/built");
|
|
5
4
|
const core = require("@intlayer/core");
|
|
6
5
|
const classVarianceAuthority = require("class-variance-authority");
|
|
7
6
|
const lucideReact = require("lucide-react");
|
|
@@ -103,18 +102,15 @@ const Link = (props) => {
|
|
|
103
102
|
href: hrefProp,
|
|
104
103
|
...otherProps
|
|
105
104
|
} = props;
|
|
106
|
-
const { internationalization } = configuration;
|
|
107
105
|
const isExternalLink = checkIsExternalLink(props);
|
|
108
106
|
const isChildrenString = typeof children === "string";
|
|
109
107
|
const rel = isExternalLink ? "noopener noreferrer nofollow" : void 0;
|
|
110
108
|
const target = isExternalLink ? "_blank" : "_self";
|
|
111
|
-
const hrefLang = locale ? locale === internationalization.defaultLocale ? "x-default" : locale : void 0;
|
|
112
109
|
const href = locale && hrefProp && !isExternalLink ? core.getLocalizedUrl(hrefProp, locale) : hrefProp;
|
|
113
110
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
114
111
|
"a",
|
|
115
112
|
{
|
|
116
113
|
href,
|
|
117
|
-
hrefLang,
|
|
118
114
|
"aria-label": label,
|
|
119
115
|
rel,
|
|
120
116
|
target,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n /** Default underlined link with hover effects */\n DEFAULT = 'default',\n /** Link without visible underline or hover effects */\n INVISIBLE_LINK = 'invisible-link',\n /** Button-styled link with solid background */\n BUTTON = 'button',\n /** Button-styled link with outlined border */\n BUTTON_OUTLINED = 'button-outlined',\n /** Link with subtle hover background effect */\n HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n /** Primary brand color */\n PRIMARY = 'primary',\n /** Secondary brand color */\n SECONDARY = 'secondary',\n /** Destructive/danger color for critical actions */\n DESTRUCTIVE = 'destructive',\n /** Neutral/muted color for less prominent links */\n NEUTRAL = 'neutral',\n /** Light color for dark backgrounds */\n LIGHT = 'light',\n /** Dark color for light backgrounds */\n DARK = 'dark',\n /** Default text color */\n TEXT = 'text',\n /** Inverse text color for opposite backgrounds */\n TEXT_INVERSE = 'text-inverse',\n /** Error/red color for error states */\n ERROR = 'error',\n /** Success/green color for positive actions */\n SUCCESS = 'success',\n /** Custom color - no default styling applied */\n CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n /** Default underline behavior based on variant */\n DEFAULT = 'default',\n /** Always show underline */\n TRUE = 'true',\n /** Never show underline */\n FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n 'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n [`${LinkVariant.BUTTON}`]:\n 'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n color: LinkColor.PRIMARY,\n underlined: LinkUnderlined.DEFAULT,\n },\n }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n /**\n * Accessible label for screen readers (required)\n * Provides context about what the link does or where it leads\n * @example \"Navigate to home page\"\n */\n label: string;\n\n /**\n * Whether this link opens in a new tab/window\n * When true, adds target=\"_blank\" and security attributes\n * Auto-detected for URLs starting with http/https when undefined\n * @default undefined (auto-detect based on href)\n */\n isExternalLink?: boolean;\n\n /**\n * Whether this link represents the current page/active state\n * Adds aria-current=\"page\" for accessibility\n * @default false\n */\n isActive?: boolean;\n\n /**\n * Locale for internationalized URLs\n * When provided, URLs are automatically localized using Intlayer\n * @example 'fr', 'es', 'en'\n */\n locale?: LocalesValues;\n };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: 'https://example.com' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true ||\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n *\n * ## Key Features\n * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles\n * - **Color Themes**: Comprehensive color palette for different contexts and meanings\n * - **External Link Detection**: Automatic detection and handling of external URLs\n * - **Internationalization**: Built-in support for localized URLs via Intlayer\n * - **Security**: Automatic security attributes for external links (noopener, noreferrer)\n * - **Accessibility**: Full ARIA support with proper labels and current page indication\n * - **Visual Feedback**: Hover effects, underline options, and active states\n *\n * ## Use Cases\n * - Navigation within applications (internal links)\n * - External links to other websites with security measures\n * - Button-styled links for call-to-action scenarios\n * - Subtle hoverable links for navigation menus\n * - Multi-language website navigation with automatic URL localization\n *\n * ## Security Features\n * External links automatically receive security attributes:\n * - `rel=\"noopener noreferrer nofollow\"` - Prevents security vulnerabilities\n * - `target=\"_blank\"` - Opens in new tab/window\n * - External link icon indication for user clarity\n *\n * ## Internationalization\n * When used with Intlayer, the component automatically:\n * - Localizes internal URLs based on the current or specified locale\n * - Sets appropriate `hrefLang` attributes for SEO\n * - Maintains proper URL structure for multi-language sites\n *\n * @component\n * @example\n * ```tsx\n * // Basic internal link\n * <Link href=\"/about\" label=\"Go to about page\">\n * About Us\n * </Link>\n *\n * // External link with auto-detection\n * <Link href=\"https://example.com\" label=\"Visit external site\">\n * External Site\n * </Link>\n *\n * // Button-styled link\n * <Link\n * href=\"/signup\"\n * variant={LinkVariant.BUTTON}\n * color={LinkColor.PRIMARY}\n * label=\"Sign up for account\"\n * >\n * Get Started\n * </Link>\n *\n * // Localized link\n * <Link\n * href=\"/products\"\n * locale=\"fr\"\n * label=\"Voir les produits\"\n * >\n * Produits\n * </Link>\n *\n * // Active navigation link\n * <Link\n * href=\"/dashboard\"\n * isActive={true}\n * variant={LinkVariant.HOVERABLE}\n * label=\"Current page: Dashboard\"\n * >\n * Dashboard\n * </Link>\n * ```\n *\n * @param props - Link component props\n * @param props.children - Content to display inside the link\n * @param props.href - URL or path to navigate to\n * @param props.label - Accessible label describing the link's purpose\n * @param props.variant - Visual style variant\n * @param props.color - Color theme for the link\n * @param props.underlined - Underline visibility option\n * @param props.isExternalLink - Override external link detection\n * @param props.isActive - Whether this link represents the current page\n * @param props.locale - Locale for URL internationalization\n * @param props.className - Additional CSS classes\n * @returns Accessible and internationalized link component\n */\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.PRIMARY,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n isExternalLink: isExternalLinkProp,\n href: hrefProp,\n ...otherProps\n } = props;\n const { internationalization } = configuration;\n\n const isExternalLink = checkIsExternalLink(props);\n const isChildrenString = typeof children === 'string';\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const hrefLang = locale\n ? locale === internationalization.defaultLocale\n ? 'x-default'\n : locale\n : undefined;\n\n const href =\n locale && hrefProp && !isExternalLink\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n hrefLang={hrefLang}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n className={cn(\n linkVariants({\n variant,\n color,\n underlined,\n className,\n })\n )}\n {...otherProps}\n >\n {variant === 'button' ? <span>{children}</span> : children}\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n </a>\n );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined","cva","getLocalizedUrl","jsxs","cn","jsx","ExternalLink"],"mappings":";;;;;;;;AAiBO,IAAK,gCAAAA,iBAAL;AAELA,eAAA,SAAA,IAAU;AAEVA,eAAA,gBAAA,IAAiB;AAEjBA,eAAA,QAAA,IAAS;AAETA,eAAA,iBAAA,IAAkB;AAElBA,eAAA,WAAA,IAAY;AAVF,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAkBL,IAAK,8BAAAC,eAAL;AAELA,aAAA,SAAA,IAAU;AAEVA,aAAA,WAAA,IAAY;AAEZA,aAAA,aAAA,IAAc;AAEdA,aAAA,SAAA,IAAU;AAEVA,aAAA,OAAA,IAAQ;AAERA,aAAA,MAAA,IAAO;AAEPA,aAAA,MAAA,IAAO;AAEPA,aAAA,cAAA,IAAe;AAEfA,aAAA,OAAA,IAAQ;AAERA,aAAA,SAAA,IAAU;AAEVA,aAAA,QAAA,IAAS;AAtBC,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AA8BL,IAAK,mCAAAC,oBAAL;AAELA,kBAAA,SAAA,IAAU;AAEVA,kBAAA,MAAA,IAAO;AAEPA,kBAAA,OAAA,IAAQ;AANE,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAaL,MAAM,eAAeC,uBAAAA;AAAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,CAAC,GAAG,SAAA,EAAqB,GACvB;AAAA,QACF,CAAC,GAAG,gBAAA,EAA4B,GAC9B;AAAA,QACF,CAAC,GAAG,QAAA,EAAoB,GACtB;AAAA,QACF,CAAC,GAAG,iBAAA,EAA6B,GAC/B;AAAA,QACF,CAAC,GAAG,WAAA,EAAuB,GACzB;AAAA,MAAA;AAAA,MAEJ,OAAO;AAAA,QACL,CAAC,GAAG,SAAA,EAAmB,GAAG;AAAA,QAC1B,CAAC,GAAG,WAAA,EAAqB,GAAG;AAAA,QAC5B,CAAC,GAAG,aAAA,EAAuB,GAAG;AAAA,QAC9B,CAAC,GAAG,SAAA,EAAmB,GAAG;AAAA,QAC1B,CAAC,GAAG,OAAA,EAAiB,GAAG;AAAA,QACxB,CAAC,GAAG,MAAA,EAAgB,GAAG;AAAA,QACvB,CAAC,GAAG,MAAA,EAAgB,GAAG;AAAA,QACvB,CAAC,GAAG,cAAA,EAAwB,GAAG;AAAA,QAC/B,CAAC,GAAG,OAAA,EAAiB,GAAG;AAAA,QACxB,CAAC,GAAG,SAAA,EAAmB,GAAG;AAAA,QAC1B,CAAC,GAAG,QAAA,EAAkB,GAAG;AAAA,MAAA;AAAA,MAE3B,YAAY;AAAA,QACV;AAAA,UAAC;AAAA;AAAA,WAAyB;AAAA,QAC1B;AAAA,UAAC;AAAA;AAAA,WAAsB;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,WAAuB;AAAA,MAAA;AAAA,IAC1B;AAAA,IAGF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA;AAAA,IAAA;AAAA,EACd;AAEJ;AAyDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA,gBAAgB;AAClB,MAA0B;AACxB,QAAM,cAAc,OAAO,SAAS,YAAY,KAAK,WAAW;AAChE,QAAM,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,IAAI;AAE5B,SAAO;AACT;AA4FO,MAAM,OAAsB,CAAC,UAAU;AAC5C,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAE,yBAAyB;AAEjC,QAAM,iBAAiB,oBAAoB,KAAK;AAChD,QAAM,mBAAmB,OAAO,aAAa;AAE7C,QAAM,MAAM,iBAAiB,iCAAiC;AAE9D,QAAM,SAAS,iBAAiB,WAAW;AAE3C,QAAM,WAAW,SACb,WAAW,qBAAqB,gBAC9B,cACA,SACF;AAEJ,QAAM,OACJ,UAAU,YAAY,CAAC,iBACnBC,qBAAgB,UAAU,MAAM,IAChC;AAEN,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,gBAAc,WAAW,SAAS;AAAA,MAClC,WAAWC,SAAAA;AAAAA,QACT,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,MAEF,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YAAY,WAAWC,2BAAAA,IAAC,QAAA,EAAM,SAAA,CAAS,IAAU;AAAA,QACjD,kBAAkB,oBACjBA,2BAAAA,IAACC,YAAAA,cAAA,EAAa,WAAU,2BAAA,CAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI3D;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n /** Default underlined link with hover effects */\n DEFAULT = 'default',\n /** Link without visible underline or hover effects */\n INVISIBLE_LINK = 'invisible-link',\n /** Button-styled link with solid background */\n BUTTON = 'button',\n /** Button-styled link with outlined border */\n BUTTON_OUTLINED = 'button-outlined',\n /** Link with subtle hover background effect */\n HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n /** Primary brand color */\n PRIMARY = 'primary',\n /** Secondary brand color */\n SECONDARY = 'secondary',\n /** Destructive/danger color for critical actions */\n DESTRUCTIVE = 'destructive',\n /** Neutral/muted color for less prominent links */\n NEUTRAL = 'neutral',\n /** Light color for dark backgrounds */\n LIGHT = 'light',\n /** Dark color for light backgrounds */\n DARK = 'dark',\n /** Default text color */\n TEXT = 'text',\n /** Inverse text color for opposite backgrounds */\n TEXT_INVERSE = 'text-inverse',\n /** Error/red color for error states */\n ERROR = 'error',\n /** Success/green color for positive actions */\n SUCCESS = 'success',\n /** Custom color - no default styling applied */\n CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n /** Default underline behavior based on variant */\n DEFAULT = 'default',\n /** Always show underline */\n TRUE = 'true',\n /** Never show underline */\n FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n 'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n [`${LinkVariant.BUTTON}`]:\n 'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n color: LinkColor.PRIMARY,\n underlined: LinkUnderlined.DEFAULT,\n },\n }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n /**\n * Accessible label for screen readers (required)\n * Provides context about what the link does or where it leads\n * @example \"Navigate to home page\"\n */\n label: string;\n\n /**\n * Whether this link opens in a new tab/window\n * When true, adds target=\"_blank\" and security attributes\n * Auto-detected for URLs starting with http/https when undefined\n * @default undefined (auto-detect based on href)\n */\n isExternalLink?: boolean;\n\n /**\n * Whether this link represents the current page/active state\n * Adds aria-current=\"page\" for accessibility\n * @default false\n */\n isActive?: boolean;\n\n /**\n * Locale for internationalized URLs\n * When provided, URLs are automatically localized using Intlayer\n * @example 'fr', 'es', 'en'\n */\n locale?: LocalesValues;\n };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: 'https://example.com' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true ||\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n *\n * ## Key Features\n * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles\n * - **Color Themes**: Comprehensive color palette for different contexts and meanings\n * - **External Link Detection**: Automatic detection and handling of external URLs\n * - **Internationalization**: Built-in support for localized URLs via Intlayer\n * - **Security**: Automatic security attributes for external links (noopener, noreferrer)\n * - **Accessibility**: Full ARIA support with proper labels and current page indication\n * - **Visual Feedback**: Hover effects, underline options, and active states\n *\n * ## Use Cases\n * - Navigation within applications (internal links)\n * - External links to other websites with security measures\n * - Button-styled links for call-to-action scenarios\n * - Subtle hoverable links for navigation menus\n * - Multi-language website navigation with automatic URL localization\n *\n * ## Security Features\n * External links automatically receive security attributes:\n * - `rel=\"noopener noreferrer nofollow\"` - Prevents security vulnerabilities\n * - `target=\"_blank\"` - Opens in new tab/window\n * - External link icon indication for user clarity\n *\n * ## Internationalization\n * When used with Intlayer, the component automatically:\n * - Localizes internal URLs based on the current or specified locale\n * - Sets appropriate `hrefLang` attributes for SEO\n * - Maintains proper URL structure for multi-language sites\n *\n * @component\n * @example\n * ```tsx\n * // Basic internal link\n * <Link href=\"/about\" label=\"Go to about page\">\n * About Us\n * </Link>\n *\n * // External link with auto-detection\n * <Link href=\"https://example.com\" label=\"Visit external site\">\n * External Site\n * </Link>\n *\n * // Button-styled link\n * <Link\n * href=\"/signup\"\n * variant={LinkVariant.BUTTON}\n * color={LinkColor.PRIMARY}\n * label=\"Sign up for account\"\n * >\n * Get Started\n * </Link>\n *\n * // Localized link\n * <Link\n * href=\"/products\"\n * locale=\"fr\"\n * label=\"Voir les produits\"\n * >\n * Produits\n * </Link>\n *\n * // Active navigation link\n * <Link\n * href=\"/dashboard\"\n * isActive={true}\n * variant={LinkVariant.HOVERABLE}\n * label=\"Current page: Dashboard\"\n * >\n * Dashboard\n * </Link>\n * ```\n *\n * @param props - Link component props\n * @param props.children - Content to display inside the link\n * @param props.href - URL or path to navigate to\n * @param props.label - Accessible label describing the link's purpose\n * @param props.variant - Visual style variant\n * @param props.color - Color theme for the link\n * @param props.underlined - Underline visibility option\n * @param props.isExternalLink - Override external link detection\n * @param props.isActive - Whether this link represents the current page\n * @param props.locale - Locale for URL internationalization\n * @param props.className - Additional CSS classes\n * @returns Accessible and internationalized link component\n */\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.PRIMARY,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n isExternalLink: isExternalLinkProp,\n href: hrefProp,\n ...otherProps\n } = props;\n\n const isExternalLink = checkIsExternalLink(props);\n const isChildrenString = typeof children === 'string';\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const href =\n locale && hrefProp && !isExternalLink\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n className={cn(\n linkVariants({\n variant,\n color,\n underlined,\n className,\n })\n )}\n {...otherProps}\n >\n {variant === 'button' ? <span>{children}</span> : children}\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n </a>\n );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined","cva","getLocalizedUrl","jsxs","cn","jsx","ExternalLink"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,oBAAY,WAAW;IACrB,iDAAiD;IACjD,OAAO,YAAY;IACnB,sDAAsD;IACtD,cAAc,mBAAmB;IACjC,+CAA+C;IAC/C,MAAM,WAAW;IACjB,8CAA8C;IAC9C,eAAe,oBAAoB;IACnC,+CAA+C;IAC/C,SAAS,cAAc;CACxB;AAED;;;;GAIG;AACH,oBAAY,SAAS;IACnB,0BAA0B;IAC1B,OAAO,YAAY;IACnB,4BAA4B;IAC5B,SAAS,cAAc;IACvB,oDAAoD;IACpD,WAAW,gBAAgB;IAC3B,mDAAmD;IACnD,OAAO,YAAY;IACnB,uCAAuC;IACvC,KAAK,UAAU;IACf,uCAAuC;IACvC,IAAI,SAAS;IACb,yBAAyB;IACzB,IAAI,SAAS;IACb,kDAAkD;IAClD,YAAY,iBAAiB;IAC7B,uCAAuC;IACvC,KAAK,UAAU;IACf,+CAA+C;IAC/C,OAAO,YAAY;IACnB,gDAAgD;IAChD,MAAM,WAAW;CAClB;AAED;;;;GAIG;AACH,oBAAY,cAAc;IACxB,kDAAkD;IAClD,OAAO,YAAY;IACnB,4BAA4B;IAC5B,IAAI,SAAS;IACb,2BAA2B;IAC3B,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;8EA0CxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,GAAI,+CAGjC,SAAS,KAAG,OASd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAkD9B,CAAC"}
|