@webiny/admin-ui 0.0.0-unstable.06b2ede40f → 0.0.0-unstable.0d717d18dd

package/CodeEditor/CodeEditor.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as CodeEditorStories from './CodeEditor.stories';
+import * as CodeEditorStories from "./CodeEditor.stories";
 
 <Meta of={CodeEditorStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { CodeEditor } from "@webiny/admin-ui";
 
 const CodeEditorExample = () => {
-    const [code, setCode] = useState('{\\n  "name": "example",\\n  "version": "1.0.0"\\n}');
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [code, setCode] = useState('{\\n "name": "example",\\n "version": "1.0.0"\\n}');
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newCode: string) => {
         setCode(newCode);
@@ -42,59 +42,60 @@ const CodeEditorExample = () => {
             validation={validation}
         />
     );
+
 };
 
 export default CodeEditorExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CodeEditor/CodeEditor.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CodeEditor/CodeEditor.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={CodeEditorStories.Documentation} exclude={"onChange"}/>
+<Controls of={CodeEditorStories.Documentation} exclude={"onChange"} />
 
 ```tsx
 import React, { useState } from "react";
 import { CodeEditor } from "@webiny/admin-ui";
 
 const CodeEditorExample = () => {
-    const [code, setCode] = useState('{\n  "name": "example",\n  "version": "1.0.0"\n}');
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newCode: string) => {
-        setCode(newCode);
-
-        // Simple required validation
-        if (!newCode || newCode.trim() === "") {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <CodeEditor
-            label="JSON Configuration"
-            description="Enter your configuration in JSON format"
-            note="Note: Make sure your JSON is valid"
-            required={true}
-            mode="json"
-            theme="github"
-            value={code}
-            onChange={handleChange}
-            validation={validation}
-        />
-    );
+  const [code, setCode] = useState('{\n  "name": "example",\n  "version": "1.0.0"\n}');
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newCode: string) => {
+    setCode(newCode);
+
+    // Simple required validation
+    if (!newCode || newCode.trim() === "") {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <CodeEditor
+      label="JSON Configuration"
+      description="Enter your configuration in JSON format"
+      note="Note: Make sure your JSON is valid"
+      required={true}
+      mode="json"
+      theme="github"
+      value={code}
+      onChange={handleChange}
+      validation={validation}
+    />
+  );
 };
 
 export default CodeEditorExample;
-```
+```

package/CodeEditor/CodeEditor.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { CodeEditor } from "./CodeEditor";
+import { CodeEditor } from "./CodeEditor.js";
 declare const meta: Meta<typeof CodeEditor>;
 export default meta;
 type Story = StoryObj<typeof CodeEditor>;

package/CodeEditor/CodeEditor.stories.js

@@ -1,181 +1,171 @@
-import React, { useState, useEffect } from "react";
-import { CodeEditor } from "./CodeEditor";
+import react, { useEffect, useState } from "react";
+import { CodeEditor } from "./CodeEditor.js";
 const meta = {
-  title: "Components/Form/CodeEditor",
-  component: CodeEditor,
-  argTypes: {
-    onChange: {
-      action: "onChange"
+    title: "Components/Form/CodeEditor",
+    component: CodeEditor,
+    argTypes: {
+        onChange: {
+            action: "onChange"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    parameters: {
+        layout: "padded"
     }
-  },
-  parameters: {
-    layout: "padded"
-  }
 };
-export default meta;
-export const Default = {};
-export const WithLabel = {
-  args: {
-    label: "Any field label"
-  }
+const CodeEditor_stories = meta;
+const Default = {};
+const WithLabel = {
+    args: {
+        label: "Any field label"
+    }
 };
-export const WithLabelRequired = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true
-  }
+const WithLabelRequired = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: "Provide the required information for processing your request."
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const WithNotes = {
-  args: {
-    ...Default.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const WithNotes = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const WithErrors = {
-  args: {
-    ...Default.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const WithErrors = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Disabled = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    disabled: true
-  }
+const Disabled = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const FullExample = {
-  args: {
-    ...Default.args,
-    label: "Any field label",
-    required: true,
-    description: "Provide the required information for processing your request.",
-    note: "Note: Ensure your selection or input is accurate before proceeding.",
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const FullExample = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const Documentation = {
-  render: args => {
-    const [value, setValue] = useState(args.value || "");
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-
-    // Update value when args.value changes
-    useEffect(() => {
-      setValue(args.value || "");
-    }, [args.value]);
-    const handleChange = newValue => {
-      setValue(newValue);
-
-      // Simple required validation
-      if (args.required && (!newValue || newValue.trim() === "")) {
-        setValidation({
-          isValid: false,
-          message: "This field is required"
+const Documentation = {
+    render: (args)=>{
+        const [value, setValue] = useState(args.value || "");
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
-        });
-      }
-    };
-
-    // Validate on required change or value change
-    useEffect(() => {
-      if (args.required && (!value || value.trim() === "")) {
-        setValidation({
-          isValid: false,
-          message: "This field is required"
+        useEffect(()=>{
+            setValue(args.value || "");
+        }, [
+            args.value
+        ]);
+        const handleChange = (newValue)=>{
+            setValue(newValue);
+            args.required && (!newValue || "" === newValue.trim()) ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        useEffect(()=>{
+            args.required && (!value || "" === value.trim()) ? setValidation({
+                isValid: false,
+                message: "This field is required"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            args.required,
+            value
+        ]);
+        return /*#__PURE__*/ react.createElement(CodeEditor, {
+            ...args,
+            value: value,
+            onChange: handleChange,
+            validation: validation,
+            required: args.required
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
-        });
-      }
-    }, [args.required, value]);
-    return /*#__PURE__*/React.createElement(CodeEditor, Object.assign({}, args, {
-      value: value,
-      onChange: handleChange,
-      validation: validation,
-      required: args.required
-    }));
-  },
-  args: {
-    label: "JSON Configuration",
-    required: true,
-    disabled: false,
-    description: "Enter your configuration in JSON format",
-    note: "Note: Make sure your JSON is valid",
-    mode: "json",
-    theme: "github",
-    value: '{\n  "name": "example",\n  "version": "1.0.0"\n}',
-    validation: undefined
-  },
-  argTypes: {
-    label: {
-      description: "Label text for the code editor",
-      control: "text"
-    },
-    required: {
-      description: "Makes the field required when set to true",
-      control: "boolean"
-    },
-    disabled: {
-      description: "Disables the code editor when set to true",
-      control: "boolean"
-    },
-    description: {
-      description: "Additional description text below the field",
-      control: "text"
-    },
-    note: {
-      description: "Additional note text below the field",
-      control: "text"
-    },
-    mode: {
-      description: "The language mode for syntax highlighting",
-      control: "select",
-      options: ["html", "json"]
-    },
-    theme: {
-      description: "The theme for the code editor",
-      control: "select",
-      options: ["github", "twilight", "chrome"]
-    },
-    value: {
-      description: "The code content",
-      control: "text"
     },
-    validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
-      control: "none"
+    args: {
+        label: "JSON Configuration",
+        required: true,
+        disabled: false,
+        description: "Enter your configuration in JSON format",
+        note: "Note: Make sure your JSON is valid",
+        theme: "github",
+        value: '{\n  "name": "example",\n  "version": "1.0.0"\n}',
+        validation: void 0
     },
-    onChange: {
-      description: "Function called when the code changes",
-      control: "none"
+    argTypes: {
+        label: {
+            description: "Label text for the code editor",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the code editor when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        theme: {
+            description: "The theme for the code editor",
+            control: "select",
+            options: [
+                "github",
+                "twilight",
+                "chrome"
+            ]
+        },
+        value: {
+            description: "The code content",
+            control: "text"
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onChange: {
+            description: "Function called when the code changes"
+        }
     }
-  }
 };
+export default CodeEditor_stories;
+export { Default, Disabled, Documentation, FullExample, WithDescription, WithErrors, WithLabel, WithLabelRequired, WithNotes };
 
 //# sourceMappingURL=CodeEditor.stories.js.map

package/CodeEditor/CodeEditor.stories.js.map

@@ -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","mode","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\";\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) => {\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        mode: \"json\",\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        mode: {\n            description: \"The language mode for syntax highlighting\",\n            control: \"select\",\n            options: [\"html\", \"json\"]\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            control: \"none\"\n        },\n        onChange: {\n            description: \"Function called when the code changes\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeEditor/CodeEditor.stories.js","sources":["../../src/CodeEditor/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"],"names":["meta","CodeEditor","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","args","value","setValue","useState","validation","setValidation","useEffect","handleChange","newValue","undefined"],"mappings":";;AAIA,MAAMA,OAAgC;IAClC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,UAAU;YAAE,QAAQ;QAAW;QAC/B,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,2BAAeD;AAGR,MAAME,UAAiB,CAAC;AAExB,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,aAAoB;IAC7B,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,WAAkB;IAC3B,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,cAAqB;IAC9B,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAASH,KAAK,KAAK,IAAI;QACjD,MAAM,CAACI,YAAYC,cAAc,GAAGF,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1EG,UAAU;YACNJ,SAASF,KAAK,KAAK,IAAI;QAC3B,GAAG;YAACA,KAAK,KAAK;SAAC;QAEf,MAAMO,eAAe,CAACC;YAClBN,SAASM;YAGLR,KAAK,QAAQ,IAAK,EAACQ,YAAYA,AAAoB,OAApBA,SAAS,IAAI,EAAQ,IACpDH,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD;QAGAC,UAAU;YACFN,KAAK,QAAQ,IAAK,EAACC,SAASA,AAAiB,OAAjBA,MAAM,IAAI,EAAQ,IAC9CI,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAyB,KAElEA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACL,KAAK,QAAQ;YAAEC;SAAM;QAEzB,OAAO,WAAP,GACI,oBAACX,YAAUA;YACN,GAAGU,IAAI;YACR,OAAOC;YACP,UAAUM;YACV,YAAYH;YACZ,UAAUJ,KAAK,QAAQ;;IAGnC;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,OAAO;QACP,OAAO;QACP,YAAYS;IAChB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,UAAU;YACN,aAAa;YACb,SAAS;QACb;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;gBAAY;aAAS;QAC7C;QACA,OAAO;YACH,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,UAAU;YACN,aAAa;QACjB;IACJ;AACJ"}

package/CodeEditor/CodeEditorPrimitive.d.ts

@@ -1,33 +1,24 @@
-/// <reference types="ace-builds/ace-modes" />
-/// <reference types="ace-builds/types/ace-ext" />
-/// <reference types="ace-builds/types/ace-theme" />
 import React from "react";
-import AceEditor from "react-ace/lib/ace";
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/mode-json";
-import "ace-builds/src-noconflict/ext-searchbox";
-import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/theme-twilight";
-import "ace-builds/src-noconflict/theme-chrome";
-interface CodeEditorPrimitiveProps extends React.ComponentProps<typeof AceEditor> {
-    mode: string;
+import type { EditorProps } from "@monaco-editor/react";
+interface CodeEditorPrimitiveProps extends Partial<EditorProps> {
     disabled?: boolean;
 }
-declare const CodeEditorPrimitive: (({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-    original: ({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+declare const DecoratableCodeEditorPrimitive: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+declare const CodeEditorPrimitive: typeof DecoratableCodeEditorPrimitive & {
+    original: typeof DecoratableCodeEditorPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-        original: ({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableCodeEditorPrimitive & {
+        original: typeof DecoratableCodeEditorPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-        original: ({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof DecoratableCodeEditorPrimitive & {
+        original: typeof DecoratableCodeEditorPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CodeEditor/CodeEditorPrimitive.js

@@ -1,32 +1,31 @@
-import React from "react";
-import AceEditor from "react-ace/lib/ace";
-import { makeDecoratable } from "../utils";
-
-// Modes
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/mode-json";
-// Extensions
-import "ace-builds/src-noconflict/ext-searchbox";
-// Themes
-import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/theme-twilight";
-import "ace-builds/src-noconflict/theme-chrome";
-const DecoratableCodeEditorPrimitive = ({
-  value,
-  theme = "github",
-  disabled,
-  ...rest
-}) => {
-  return /*#__PURE__*/React.createElement(AceEditor, Object.assign({
-    value: value ? String(value) : "",
-    theme: theme,
-    readOnly: disabled
-  }, rest, {
-    width: "100%",
-    editorProps: {
-      $blockScrolling: Infinity // Suppresses scrolling warning in console.
-    }
-  }));
+import react, { useMemo } from "react";
+import _monaco_editor_react from "@monaco-editor/react";
+import { makeDecoratable } from "../utils.js";
+const monacoOptions = {
+    domReadOnly: true,
+    readOnly: true,
+    minimap: {
+        enabled: false
+    },
+    scrollBeyondLastLine: false,
+    wordWrap: "on"
+};
+const DecoratableCodeEditorPrimitive = ({ value, disabled, options: optionsInput, ...rest })=>{
+    const options = useMemo(()=>({
+            ...monacoOptions,
+            ...optionsInput,
+            domReadOnly: void 0 === disabled ? monacoOptions.domReadOnly : disabled,
+            readOnly: void 0 === disabled ? monacoOptions.readOnly : disabled
+        }), [
+        disabled
+    ]);
+    return /*#__PURE__*/ react.createElement(_monaco_editor_react, {
+        height: "calc(100vh - 400px)",
+        ...rest,
+        language: rest.language ?? "json",
+        defaultValue: value,
+        options: options
+    });
 };
 const CodeEditorPrimitive = makeDecoratable("CodeEditorPrimitive", DecoratableCodeEditorPrimitive);
 export { CodeEditorPrimitive };

package/CodeEditor/CodeEditorPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","AceEditor","makeDecoratable","DecoratableCodeEditorPrimitive","value","theme","disabled","rest","createElement","Object","assign","String","readOnly","width","editorProps","$blockScrolling","Infinity","CodeEditorPrimitive"],"sources":["CodeEditorPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport AceEditor from \"react-ace/lib/ace\";\nimport { makeDecoratable } from \"~/utils\";\n\n// Modes\nimport \"ace-builds/src-noconflict/mode-html\";\nimport \"ace-builds/src-noconflict/mode-json\";\n// Extensions\nimport \"ace-builds/src-noconflict/ext-searchbox\";\n// Themes\nimport \"ace-builds/src-noconflict/theme-github\";\nimport \"ace-builds/src-noconflict/theme-twilight\";\nimport \"ace-builds/src-noconflict/theme-chrome\";\n\ninterface CodeEditorPrimitiveProps extends React.ComponentProps<typeof AceEditor> {\n    mode: string;\n    disabled?: boolean;\n}\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    theme = \"github\",\n    disabled,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    return (\n        <AceEditor\n            value={value ? String(value) : \"\"}\n            theme={theme}\n            readOnly={disabled}\n            {...rest}\n            width=\"100%\"\n            editorProps={{\n                $blockScrolling: Infinity // Suppresses scrolling warning in console.\n            }}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,mBAAmB;AACzC,SAASC,eAAe;;AAExB;AACA,OAAO,qCAAqC;AAC5C,OAAO,qCAAqC;AAC5C;AACA,OAAO,yCAAyC;AAChD;AACA,OAAO,wCAAwC;AAC/C,OAAO,0CAA0C;AACjD,OAAO,wCAAwC;AAO/C,MAAMC,8BAA8B,GAAGA,CAAC;EACpCC,KAAK;EACLC,KAAK,GAAG,QAAQ;EAChBC,QAAQ;EACR,GAAGC;AACmB,CAAC,KAAK;EAC5B,oBACIP,KAAA,CAAAQ,aAAA,CAACP,SAAS,EAAAQ,MAAA,CAAAC,MAAA;IACNN,KAAK,EAAEA,KAAK,GAAGO,MAAM,CAACP,KAAK,CAAC,GAAG,EAAG;IAClCC,KAAK,EAAEA,KAAM;IACbO,QAAQ,EAAEN;EAAS,GACfC,IAAI;IACRM,KAAK,EAAC,MAAM;IACZC,WAAW,EAAE;MACTC,eAAe,EAAEC,QAAQ,CAAC;IAC9B;EAAE,EACL,CAAC;AAEV,CAAC;AAED,MAAMC,mBAAmB,GAAGf,eAAe,CAAC,qBAAqB,EAAEC,8BAA8B,CAAC;AAElG,SAASc,mBAAmB","ignoreList":[]}
+{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/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    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    },\n    scrollBeyondLastLine: false,\n    wordWrap: \"on\"\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;IACA,sBAAsB;IACtB,UAAU;AACd;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}