feat(admin-ui): add CodeEditor component

packages/admin-ui/package.json

@@ -27,10 +27,12 @@
     "@webiny/react-composition": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/utils": "0.0.0",
+    "ace-builds": "^1.37.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "mobx": "^6.9.0",
     "react": "18.2.0",
+    "react-ace": "^13.0.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.6",
     "tailwindcss-animate": "^1.0.7"

packages/admin-ui/src/CodeEditor/CodeEditor.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeEditor } from "./CodeEditor";
+
+const meta: Meta<typeof CodeEditor> = {
+    title: "Components/Form/CodeEditor",
+    component: CodeEditor,
+    tags: ["autodocs"],
+    argTypes: {
+        onChange: { action: "onChange" }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+
+export const Default: Story = {};
+
+export const WithLabel: Story = {
+    args: {
+        label: "Any field label"
+    }
+};
+
+export const WithLabelRequired: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    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."
+        }
+    }
+};

packages/admin-ui/src/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,38 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import { CodeEditorPrimitive, CodeEditorPrimitiveProps } from "./CodeEditorPrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;
+
+const DecoratableCodeEditor = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: CodeEditorProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"w-full"}>
+            <FormComponentLabel text={label} required={required} disabled={disabled} />
+            <FormComponentDescription text={description} />
+            <CodeEditorPrimitive {...props} disabled={disabled} />
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <FormComponentNote text={note} />
+        </div>
+    );
+};
+const CodeEditor = makeDecoratable("CodeEditor", DecoratableCodeEditor);
+
+export { CodeEditor, type CodeEditorProps };

packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeEditorPrimitive } from "./CodeEditorPrimitive";
+
+const meta: Meta<typeof CodeEditorPrimitive> = {
+    title: "Components/Form Primitives/CodeEditor",
+    component: CodeEditorPrimitive,
+    tags: ["autodocs"],
+    argTypes: {
+        onChange: { action: "onChange" }
+    },
+    parameters: {
+        layout: "padded"
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeEditorPrimitive>;
+
+export const Default: Story = {};

packages/admin-ui/src/CodeEditor/CodeEditorPrimitive.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import AceEditor from "react-ace";
+import "ace-builds/webpack-resolver";
+// 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";
+
+interface CodeEditorPrimitiveProps extends React.ComponentProps<typeof AceEditor> {
+    mode: string;
+    disabled?: boolean;
+}
+
+const CodeEditorPrimitive = ({
+    value,
+    theme = "github",
+    disabled,
+    ...rest
+}: CodeEditorPrimitiveProps) => {
+    return (
+        <AceEditor
+            value={value ? String(value) : ""}
+            theme={theme}
+            readOnly={disabled}
+            {...rest}
+            width="100%"
+            editorProps={{
+                $blockScrolling: Infinity // Suppresses scrolling warning in console.
+            }}
+        />
+    );
+};
+
+export { CodeEditorPrimitive, type CodeEditorPrimitiveProps };

packages/admin-ui/src/CodeEditor/index.ts

@@ -0,0 +1,2 @@
+export * from "./CodeEditorPrimitive";
+export * from "./CodeEditor";

packages/admin-ui/src/index.ts

@@ -3,6 +3,7 @@ export * from "./Avatar";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./CodeEditor";
 export * from "./FormComponent";
 export * from "./Grid";
 export * from "./Heading";

packages/ui/package.json

@@ -30,7 +30,6 @@
     "@svgr/webpack": "^6.1.1",
     "@tanstack/react-table": "^8.5.22",
     "@webiny/admin-ui": "0.0.0",
-    "brace": "^0.11.1",
     "classnames": "^2.5.1",
     "cropperjs": "^1.4.3",
     "dot-prop-immutable": "^2.1.1",
@@ -42,7 +41,6 @@
     "material-components-web": "^14.0.0",
     "nprogress": "^0.2.0",
     "nuka-carousel": "4.7.1",
-    "react-ace": "^6.1.4",
     "react-butterfiles": "^1.3.3",
     "react-color": "^2.19.3",
     "react-columned": "^1.1.3",

packages/ui/src/CodeEditor/CodeEditor.tsx

@@ -1,31 +1,6 @@
 import React from "react";
+import { CodeEditor as AdminCodeEditor } from "@webiny/admin-ui";
 import { FormComponentProps } from "~/types";
-import { css } from "emotion";
-
-import AceEditor from "react-ace";
-// Modes
-import "brace/mode/html";
-import "brace/mode/json";
-// Extensions
-import "brace/ext/searchbox";
-// Themes
-import "brace/theme/github";
-import "brace/theme/twilight";
-import "brace/theme/chrome";
-import { FormElementMessage } from "~/FormElementMessage";
-
-/**
- * Controls the helper text below the checkbox.
- * @type {string}
- */
-const webinyCheckboxHelperText = css(
-    {},
-    {
-        "&.mdc-text-field-helper-text": {
-            paddingTop: 5
-        }
-    }
-);
 
 interface Props extends FormComponentProps {
     mode: string;
@@ -39,46 +14,9 @@ interface Props extends FormComponentProps {
 }
 
 /**
- * CodeEditor component can be used to store simple boolean values.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please find out the new `CodeEditor` component props from the `@webiny/admin-ui` package instead.
  */
-class CodeEditor extends React.Component<Props> {
-    onChange = (value: string) => {
-        this.props.onChange && this.props.onChange(value);
-    };
-
-    public override render() {
-        const { value, description, validation, theme = "github", ...rest } = this.props;
-
-        const { isValid: validationIsValid, message: validationMessage } = validation || {};
-
-        return (
-            <React.Fragment>
-                <AceEditor
-                    value={value ? String(value) : ""}
-                    theme={theme}
-                    onChange={this.onChange}
-                    {...rest}
-                    width="100%"
-                    className={"mdc-text-field"}
-                    editorProps={{
-                        $blockScrolling: Infinity // Suppresses scrolling warning in console.
-                    }}
-                />
-
-                {validationIsValid === false && (
-                    <FormElementMessage error className={webinyCheckboxHelperText}>
-                        {validationMessage}
-                    </FormElementMessage>
-                )}
-
-                {validationIsValid !== false && description && (
-                    <FormElementMessage className={webinyCheckboxHelperText}>
-                        {description}
-                    </FormElementMessage>
-                )}
-            </React.Fragment>
-        );
-    }
-}
-
-export { CodeEditor };
+export const CodeEditor = ({ readOnly, ...props }: Props) => {
+    return <AdminCodeEditor disabled={readOnly} {...props} />;
+};