@webiny/admin-ui 6.0.0-alpha.3 → 6.0.0-alpha.5
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/CodeEditor/CodeEditor.d.ts +2 -2
- package/CodeEditor/CodeEditor.js +4 -4
- package/CodeEditor/CodeEditor.js.map +1 -1
- package/CodeEditor/CodeEditor.mdx +2 -2
- package/CodeEditor/CodeEditor.stories.d.ts +1 -1
- package/CodeEditor/CodeEditor.stories.js +3 -11
- package/CodeEditor/CodeEditor.stories.js.map +1 -1
- package/CodeEditor/CodeEditorPrimitive.d.ts +8 -18
- package/CodeEditor/CodeEditorPrimitive.js +26 -24
- package/CodeEditor/CodeEditorPrimitive.js.map +1 -1
- package/CodeEditor/CodeEditorPrimitive.stories.d.ts +1 -1
- package/CodeEditor/CodeEditorPrimitive.stories.js +1 -1
- package/CodeEditor/CodeEditorPrimitive.stories.js.map +1 -1
- package/CodeEditor/index.d.ts +2 -2
- package/CodeEditor/index.js +2 -2
- package/CodeEditor/index.js.map +1 -1
- package/package.json +9 -10
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { CodeEditorPrimitiveProps } from "./CodeEditorPrimitive";
|
|
3
|
-
import type { FormComponentProps } from "../FormComponent";
|
|
2
|
+
import type { CodeEditorPrimitiveProps } from "./CodeEditorPrimitive.js";
|
|
3
|
+
import type { FormComponentProps } from "../FormComponent/index.js";
|
|
4
4
|
type CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;
|
|
5
5
|
declare const CodeEditor: (({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
|
|
6
6
|
original: ({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
|
package/CodeEditor/CodeEditor.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useMemo } from "react";
|
|
2
|
-
import { makeDecoratable } from "../utils";
|
|
3
|
-
import { CodeEditorPrimitive } from "./CodeEditorPrimitive";
|
|
4
|
-
import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
|
|
2
|
+
import { makeDecoratable } from "../utils.js";
|
|
3
|
+
import { CodeEditorPrimitive } from "./CodeEditorPrimitive.js";
|
|
4
|
+
import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
|
|
5
5
|
const DecoratableCodeEditor = ({
|
|
6
6
|
label,
|
|
7
7
|
description,
|
|
@@ -17,7 +17,7 @@ const DecoratableCodeEditor = ({
|
|
|
17
17
|
} = validation || {};
|
|
18
18
|
const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
|
|
19
19
|
return /*#__PURE__*/React.createElement("div", {
|
|
20
|
-
className: "
|
|
20
|
+
className: "w-full"
|
|
21
21
|
}, /*#__PURE__*/React.createElement(FormComponentLabel, {
|
|
22
22
|
text: label,
|
|
23
23
|
required: required,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","makeDecoratable","CodeEditorPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCodeEditor","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","CodeEditor"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { CodeEditorPrimitiveProps } from \"./CodeEditorPrimitive\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n FormComponentDescription,\n FormComponentErrorMessage,\n FormComponentLabel,\n FormComponentNote\n} from \"~/FormComponent\";\n\ntype CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;\n\nconst DecoratableCodeEditor = ({\n label,\n description,\n note,\n required,\n disabled,\n validation,\n ...props\n}: CodeEditorProps) => {\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n return (\n <div className={\"
|
|
1
|
+
{"version":3,"names":["React","useMemo","makeDecoratable","CodeEditorPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCodeEditor","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","CodeEditor"],"sources":["CodeEditor.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { CodeEditorPrimitiveProps } from \"./CodeEditorPrimitive.js\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n FormComponentDescription,\n FormComponentErrorMessage,\n FormComponentLabel,\n FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;\n\nconst DecoratableCodeEditor = ({\n label,\n description,\n note,\n required,\n disabled,\n validation,\n ...props\n}: CodeEditorProps) => {\n const { isValid: validationIsValid, message: validationMessage } = validation || {};\n const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n return (\n <div className={\"w-full\"}>\n <FormComponentLabel\n text={label}\n required={required}\n disabled={disabled}\n invalid={invalid}\n />\n <FormComponentDescription text={description} disabled={disabled} />\n <CodeEditorPrimitive {...props} disabled={disabled} />\n <FormComponentErrorMessage\n text={validationMessage}\n invalid={invalid}\n disabled={disabled}\n />\n <FormComponentNote text={note} disabled={disabled} />\n </div>\n );\n};\nconst CodeEditor = makeDecoratable(\"CodeEditor\", DecoratableCodeEditor);\n\nexport { CodeEditor, type CodeEditorProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,mBAAmB;AAE5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGnB,OAAO,CAAC,MAAMgB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIjB,KAAA,CAAAqB,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBtB,KAAA,CAAAqB,aAAA,CAACf,kBAAkB;IACfiB,IAAI,EAAEd,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFpB,KAAA,CAAAqB,aAAA,CAACjB,wBAAwB;IAACmB,IAAI,EAAEb,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEb,KAAA,CAAAqB,aAAA,CAAClB,mBAAmB,EAAAqB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA;EAAS,EAAE,CAAC,eACtDb,KAAA,CAAAqB,aAAA,CAAChB,yBAAyB;IACtBkB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAACd,iBAAiB;IAACgB,IAAI,EAAEZ,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGxB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASkB,UAAU","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Canvas, Meta, Controls } from '@storybook/blocks';
|
|
1
|
+
import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
|
|
2
2
|
|
|
3
3
|
import * as CodeEditorStories from './CodeEditor.stories';
|
|
4
4
|
|
|
@@ -97,4 +97,4 @@ const CodeEditorExample = () => {
|
|
|
97
97
|
};
|
|
98
98
|
|
|
99
99
|
export default CodeEditorExample;
|
|
100
|
-
```
|
|
100
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
|
2
|
-
import { CodeEditor } from "./CodeEditor";
|
|
2
|
+
import { CodeEditor } from "./CodeEditor.js";
|
|
3
3
|
const meta = {
|
|
4
4
|
title: "Components/Form/CodeEditor",
|
|
5
5
|
component: CodeEditor,
|
|
@@ -127,7 +127,6 @@ export const Documentation = {
|
|
|
127
127
|
disabled: false,
|
|
128
128
|
description: "Enter your configuration in JSON format",
|
|
129
129
|
note: "Note: Make sure your JSON is valid",
|
|
130
|
-
mode: "json",
|
|
131
130
|
theme: "github",
|
|
132
131
|
value: '{\n "name": "example",\n "version": "1.0.0"\n}',
|
|
133
132
|
validation: undefined
|
|
@@ -153,11 +152,6 @@ export const Documentation = {
|
|
|
153
152
|
description: "Additional note text below the field",
|
|
154
153
|
control: "text"
|
|
155
154
|
},
|
|
156
|
-
mode: {
|
|
157
|
-
description: "The language mode for syntax highlighting",
|
|
158
|
-
control: "select",
|
|
159
|
-
options: ["html", "json"]
|
|
160
|
-
},
|
|
161
155
|
theme: {
|
|
162
156
|
description: "The theme for the code editor",
|
|
163
157
|
control: "select",
|
|
@@ -168,12 +162,10 @@ export const Documentation = {
|
|
|
168
162
|
control: "text"
|
|
169
163
|
},
|
|
170
164
|
validation: {
|
|
171
|
-
description: "Object containing validation state and message. Please refer to the example code for details on usage."
|
|
172
|
-
control: "none"
|
|
165
|
+
description: "Object containing validation state and message. Please refer to the example code for details on usage."
|
|
173
166
|
},
|
|
174
167
|
onChange: {
|
|
175
|
-
description: "Function called when the code changes"
|
|
176
|
-
control: "none"
|
|
168
|
+
description: "Function called when the code changes"
|
|
177
169
|
}
|
|
178
170
|
}
|
|
179
171
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","CodeEditor","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","Default","WithLabel","args","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","render","value","setValue","setValidation","handleChange","newValue","trim","createElement","Object","assign","
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","CodeEditor","meta","title","component","argTypes","onChange","action","disabled","control","defaultValue","parameters","layout","Default","WithLabel","args","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","render","value","setValue","setValidation","handleChange","newValue","trim","createElement","Object","assign","theme","undefined","options"],"sources":["CodeEditor.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditor } from \"./CodeEditor.js\";\n\nconst meta: Meta<typeof CodeEditor> = {\n title: \"Components/Form/CodeEditor\",\n component: CodeEditor,\n argTypes: {\n onChange: { action: \"onChange\" },\n disabled: {\n control: \"boolean\",\n defaultValue: false\n }\n },\n parameters: {\n layout: \"padded\"\n }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditor>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n args: {\n label: \"Any field label\"\n }\n};\n\nexport const WithLabelRequired: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n required: true\n }\n};\n\nexport const WithDescription: Story = {\n args: {\n ...Default.args,\n description: \"Provide the required information for processing your request.\"\n }\n};\n\nexport const WithNotes: Story = {\n args: {\n ...Default.args,\n note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n }\n};\n\nexport const WithErrors: Story = {\n args: {\n ...Default.args,\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Disabled: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n disabled: true\n }\n};\n\nexport const FullExample: Story = {\n args: {\n ...Default.args,\n label: \"Any field label\",\n required: true,\n description: \"Provide the required information for processing your request.\",\n note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Documentation: Story = {\n render: args => {\n const [value, setValue] = useState(args.value || \"\");\n const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n // Update value when args.value changes\n useEffect(() => {\n setValue(args.value || \"\");\n }, [args.value]);\n\n const handleChange = (newValue: string | undefined) => {\n setValue(newValue);\n\n // Simple required validation\n if (args.required && (!newValue || newValue.trim() === \"\")) {\n setValidation({ isValid: false, message: \"This field is required\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n };\n\n // Validate on required change or value change\n useEffect(() => {\n if (args.required && (!value || value.trim() === \"\")) {\n setValidation({ isValid: false, message: \"This field is required\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n }, [args.required, value]);\n\n return (\n <CodeEditor\n {...args}\n value={value}\n onChange={handleChange}\n validation={validation}\n required={args.required}\n />\n );\n },\n args: {\n label: \"JSON Configuration\",\n required: true,\n disabled: false,\n description: \"Enter your configuration in JSON format\",\n note: \"Note: Make sure your JSON is valid\",\n theme: \"github\",\n value: '{\\n \"name\": \"example\",\\n \"version\": \"1.0.0\"\\n}',\n validation: undefined\n },\n argTypes: {\n label: {\n description: \"Label text for the code editor\",\n control: \"text\"\n },\n required: {\n description: \"Makes the field required when set to true\",\n control: \"boolean\"\n },\n disabled: {\n description: \"Disables the code editor when set to true\",\n control: \"boolean\"\n },\n description: {\n description: \"Additional description text below the field\",\n control: \"text\"\n },\n note: {\n description: \"Additional note text below the field\",\n control: \"text\"\n },\n theme: {\n description: \"The theme for the code editor\",\n control: \"select\",\n options: [\"github\", \"twilight\", \"chrome\"]\n },\n value: {\n description: \"The code content\",\n control: \"text\"\n },\n validation: {\n description:\n \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n },\n onChange: {\n description: \"Function called when the code changes\"\n }\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,33 +1,23 @@
|
|
|
1
|
-
/// <reference types="ace-builds/ace-modes" />
|
|
2
|
-
/// <reference types="ace-builds/types/ace-ext" />
|
|
3
|
-
/// <reference types="ace-builds/types/ace-theme" />
|
|
4
1
|
import React from "react";
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
import "ace-builds/src-noconflict/mode-json";
|
|
8
|
-
import "ace-builds/src-noconflict/ext-searchbox";
|
|
9
|
-
import "ace-builds/src-noconflict/theme-github";
|
|
10
|
-
import "ace-builds/src-noconflict/theme-twilight";
|
|
11
|
-
import "ace-builds/src-noconflict/theme-chrome";
|
|
12
|
-
interface CodeEditorPrimitiveProps extends React.ComponentProps<typeof AceEditor> {
|
|
13
|
-
mode: string;
|
|
2
|
+
import type { EditorProps } from "@monaco-editor/react";
|
|
3
|
+
interface CodeEditorPrimitiveProps extends Partial<EditorProps> {
|
|
14
4
|
disabled?: boolean;
|
|
15
5
|
}
|
|
16
|
-
declare const CodeEditorPrimitive: (({ value,
|
|
17
|
-
original: ({ value,
|
|
6
|
+
declare const CodeEditorPrimitive: (({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
|
|
7
|
+
original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
|
|
18
8
|
originalName: string;
|
|
19
9
|
displayName: string;
|
|
20
10
|
} & {
|
|
21
|
-
original: (({ value,
|
|
22
|
-
original: ({ value,
|
|
11
|
+
original: (({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
|
|
12
|
+
original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
|
|
23
13
|
originalName: string;
|
|
24
14
|
displayName: string;
|
|
25
15
|
};
|
|
26
16
|
originalName: string;
|
|
27
17
|
displayName: string;
|
|
28
18
|
} & {
|
|
29
|
-
createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value,
|
|
30
|
-
original: ({ value,
|
|
19
|
+
createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
|
|
20
|
+
original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
|
|
31
21
|
originalName: string;
|
|
32
22
|
displayName: string;
|
|
33
23
|
}>) => (props: unknown) => React.JSX.Element;
|
|
@@ -1,32 +1,34 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import
|
|
3
|
-
import { makeDecoratable } from "../utils";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
// Themes
|
|
11
|
-
import "ace-builds/src-noconflict/theme-github";
|
|
12
|
-
import "ace-builds/src-noconflict/theme-twilight";
|
|
13
|
-
import "ace-builds/src-noconflict/theme-chrome";
|
|
1
|
+
import React, { useMemo } from "react";
|
|
2
|
+
import MonacoEditor from "@monaco-editor/react";
|
|
3
|
+
import { makeDecoratable } from "../utils.js";
|
|
4
|
+
const monacoOptions = {
|
|
5
|
+
readOnly: false,
|
|
6
|
+
minimap: {
|
|
7
|
+
enabled: false
|
|
8
|
+
}
|
|
9
|
+
};
|
|
14
10
|
const DecoratableCodeEditorPrimitive = ({
|
|
15
11
|
value,
|
|
16
|
-
theme = "github",
|
|
17
12
|
disabled,
|
|
13
|
+
options: optionsInput,
|
|
18
14
|
...rest
|
|
19
15
|
}) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
})
|
|
16
|
+
// Editor is readonly if it's explicitly disabled, or if there's no `onChange` passed via props.
|
|
17
|
+
const readOnly = [disabled, rest.onChange].filter(Boolean).length === 0;
|
|
18
|
+
const options = useMemo(() => {
|
|
19
|
+
return {
|
|
20
|
+
...monacoOptions,
|
|
21
|
+
...optionsInput,
|
|
22
|
+
domReadOnly: readOnly,
|
|
23
|
+
readOnly
|
|
24
|
+
};
|
|
25
|
+
}, [disabled, rest.onChange]);
|
|
26
|
+
return /*#__PURE__*/React.createElement(MonacoEditor, Object.assign({
|
|
27
|
+
height: "calc(100vh - 400px)",
|
|
28
|
+
language: "json",
|
|
29
|
+
defaultValue: value,
|
|
30
|
+
options: options
|
|
31
|
+
}, rest));
|
|
30
32
|
};
|
|
31
33
|
const CodeEditorPrimitive = makeDecoratable("CodeEditorPrimitive", DecoratableCodeEditorPrimitive);
|
|
32
34
|
export { CodeEditorPrimitive };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","
|
|
1
|
+
{"version":3,"names":["React","useMemo","MonacoEditor","makeDecoratable","monacoOptions","readOnly","minimap","enabled","DecoratableCodeEditorPrimitive","value","disabled","options","optionsInput","rest","onChange","filter","Boolean","length","domReadOnly","createElement","Object","assign","height","language","defaultValue","CodeEditorPrimitive"],"sources":["CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n readOnly: false,\n minimap: {\n enabled: false\n }\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n value,\n disabled,\n options: optionsInput,\n ...rest\n}: CodeEditorPrimitiveProps) => {\n // Editor is readonly if it's explicitly disabled, or if there's no `onChange` passed via props.\n const readOnly = [disabled, rest.onChange].filter(Boolean).length === 0;\n\n const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n return {\n ...monacoOptions,\n ...optionsInput,\n domReadOnly: readOnly,\n readOnly\n };\n }, [disabled, rest.onChange]);\n\n return (\n <MonacoEditor\n height={\"calc(100vh - 400px)\"}\n language={\"json\"}\n defaultValue={value}\n options={options}\n {...rest}\n />\n );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,OAAOC,YAAY,MAAM,sBAAsB;AAE/C,SAASC,eAAe;AAMxB,MAAMC,aAAgD,GAAG;EACrDC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAE;IACLC,OAAO,EAAE;EACb;AACJ,CAAC;AAED,MAAMC,8BAA8B,GAAGA,CAAC;EACpCC,KAAK;EACLC,QAAQ;EACRC,OAAO,EAAEC,YAAY;EACrB,GAAGC;AACmB,CAAC,KAAK;EAC5B;EACA,MAAMR,QAAQ,GAAG,CAACK,QAAQ,EAAEG,IAAI,CAACC,QAAQ,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM,KAAK,CAAC;EAEvE,MAAMN,OAAO,GAAGV,OAAO,CAAC,MAA6C;IACjE,OAAO;MACH,GAAGG,aAAa;MAChB,GAAGQ,YAAY;MACfM,WAAW,EAAEb,QAAQ;MACrBA;IACJ,CAAC;EACL,CAAC,EAAE,CAACK,QAAQ,EAAEG,IAAI,CAACC,QAAQ,CAAC,CAAC;EAE7B,oBACId,KAAA,CAAAmB,aAAA,CAACjB,YAAY,EAAAkB,MAAA,CAAAC,MAAA;IACTC,MAAM,EAAE,qBAAsB;IAC9BC,QAAQ,EAAE,MAAO;IACjBC,YAAY,EAAEf,KAAM;IACpBE,OAAO,EAAEA;EAAQ,GACbE,IAAI,CACX,CAAC;AAEV,CAAC;AAED,MAAMY,mBAAmB,GAAGtB,eAAe,CAAC,qBAAqB,EAAEK,8BAA8B,CAAC;AAElG,SAASiB,mBAAmB","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { CodeEditorPrimitive } from "./CodeEditorPrimitive";
|
|
2
|
+
import { CodeEditorPrimitive } from "./CodeEditorPrimitive.js";
|
|
3
3
|
declare const meta: Meta<typeof CodeEditorPrimitive>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof CodeEditorPrimitive>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["CodeEditorPrimitive","meta","title","component","argTypes","onChange","action","parameters","layout","Default"],"sources":["CodeEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive\";\n\nconst meta: Meta<typeof CodeEditorPrimitive> = {\n title: \"Components/Form Primitives/CodeEditor\",\n component: CodeEditorPrimitive,\n argTypes: {\n onChange: { action: \"onChange\" }\n },\n parameters: {\n layout: \"padded\"\n }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditorPrimitive>;\n\nexport const Default: Story = {};\n"],"mappings":"AACA,SAASA,mBAAmB;AAE5B,MAAMC,IAAsC,GAAG;EAC3CC,KAAK,EAAE,uCAAuC;EAC9CC,SAAS,EAAEH,mBAAmB;EAC9BI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW;EACnC,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeP,IAAI;AAGnB,OAAO,MAAMQ,OAAc,GAAG,CAAC,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["CodeEditorPrimitive","meta","title","component","argTypes","onChange","action","parameters","layout","Default"],"sources":["CodeEditorPrimitive.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { CodeEditorPrimitive } from \"./CodeEditorPrimitive.js\";\n\nconst meta: Meta<typeof CodeEditorPrimitive> = {\n title: \"Components/Form Primitives/CodeEditor\",\n component: CodeEditorPrimitive,\n argTypes: {\n onChange: { action: \"onChange\" }\n },\n parameters: {\n layout: \"padded\"\n }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CodeEditorPrimitive>;\n\nexport const Default: Story = {};\n"],"mappings":"AACA,SAASA,mBAAmB;AAE5B,MAAMC,IAAsC,GAAG;EAC3CC,KAAK,EAAE,uCAAuC;EAC9CC,SAAS,EAAEH,mBAAmB;EAC9BI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW;EACnC,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeP,IAAI;AAGnB,OAAO,MAAMQ,OAAc,GAAG,CAAC,CAAC","ignoreList":[]}
|
package/CodeEditor/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./CodeEditorPrimitive";
|
|
2
|
-
export * from "./CodeEditor";
|
|
1
|
+
export * from "./CodeEditorPrimitive.js";
|
|
2
|
+
export * from "./CodeEditor.js";
|
package/CodeEditor/index.js
CHANGED
package/CodeEditor/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CodeEditorPrimitive\";\nexport * from \"./CodeEditor\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CodeEditorPrimitive.js\";\nexport * from \"./CodeEditor.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/admin-ui",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.5",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"@fortawesome/fontawesome-svg-core": "1.3.0",
|
|
14
14
|
"@fortawesome/react-fontawesome": "0.1.19",
|
|
15
15
|
"@minoru/react-dnd-treeview": "3.5.2",
|
|
16
|
+
"@monaco-editor/react": "4.7.0",
|
|
16
17
|
"@tanstack/react-table": "8.20.6",
|
|
17
|
-
"@webiny/icons": "6.0.0-alpha.
|
|
18
|
-
"@webiny/react-composition": "6.0.0-alpha.
|
|
19
|
-
"@webiny/react-router": "6.0.0-alpha.
|
|
20
|
-
"@webiny/utils": "6.0.0-alpha.
|
|
21
|
-
"ace-builds": "1.37.5",
|
|
18
|
+
"@webiny/icons": "6.0.0-alpha.5",
|
|
19
|
+
"@webiny/react-composition": "6.0.0-alpha.5",
|
|
20
|
+
"@webiny/react-router": "6.0.0-alpha.5",
|
|
21
|
+
"@webiny/utils": "6.0.0-alpha.5",
|
|
22
22
|
"bytes": "3.1.2",
|
|
23
23
|
"class-variance-authority": "0.7.1",
|
|
24
24
|
"clsx": "2.1.1",
|
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
"mobx": "6.9.0",
|
|
29
29
|
"radix-ui": "1.4.2",
|
|
30
30
|
"react": "18.2.0",
|
|
31
|
-
"react-ace": "13.0.0",
|
|
32
31
|
"react-color": "2.19.3",
|
|
33
32
|
"react-custom-scrollbars": "4.2.1",
|
|
34
33
|
"react-dnd": "16.0.1",
|
|
@@ -51,8 +50,8 @@
|
|
|
51
50
|
"@types/react-color": "2.17.11",
|
|
52
51
|
"@types/react-custom-scrollbars": "4.0.10",
|
|
53
52
|
"@types/react-virtualized": "9.22.0",
|
|
54
|
-
"@webiny/cli": "6.0.0-alpha.
|
|
55
|
-
"@webiny/project-utils": "6.0.0-alpha.
|
|
53
|
+
"@webiny/cli": "6.0.0-alpha.5",
|
|
54
|
+
"@webiny/project-utils": "6.0.0-alpha.5",
|
|
56
55
|
"chalk": "4.1.2",
|
|
57
56
|
"css-loader": "6.10.0",
|
|
58
57
|
"file-loader": "6.2.0",
|
|
@@ -82,5 +81,5 @@
|
|
|
82
81
|
]
|
|
83
82
|
}
|
|
84
83
|
},
|
|
85
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "b7e120541b093e91f214904a9f13e4c2c4640978"
|
|
86
85
|
}
|