@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.d.ts

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

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { CheckboxGroupPrimitive } from "./CheckboxGroupPrimitive";
-import { Button } from "../../Button";
+import { CheckboxGroupPrimitive } from "./CheckboxGroupPrimitive.js";
+import { Button } from "../../Button/index.js";
 const meta = {
   title: "Components/Form Primitives/CheckboxGroup",
   component: CheckboxGroupPrimitive,
@@ -10,12 +10,12 @@ const meta = {
   render: args => {
     const [values, setValues] = useState(args.value);
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, Object.assign({}, args, {
       value: values,
       onChange: values => setValues(values)
     })), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, values && values.join())));
   }
 };
@@ -88,17 +88,17 @@ export const WithExternalValueControl = {
   render: args => {
     const [values, setValues] = useState(args.value);
     return /*#__PURE__*/React.createElement("div", {
-      className: "wby-w-full"
+      className: "w-full"
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, Object.assign({}, args, {
       value: values,
       onChange: values => setValues(values)
     }))), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, /*#__PURE__*/React.createElement(Button, {
       text: "Reset",
       onClick: () => setValues([])
     })), /*#__PURE__*/React.createElement("div", {
-      className: "wby-mt-4 wby-text-center"
+      className: "mt-4 text-center"
     }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, values && values.join())));
   }
 };

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","CheckboxGroupPrimitive","Button","meta","title","component","parameters","layout","render","args","values","setValues","value","createElement","className","Object","assign","onChange","join","Default","items","label","WithLongLabels","WithSelectedValues","WithDisabledValue","disabled","WithExternalValueControl","text","onClick","WithNumericValues"],"sources":["CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive\";\nimport { Button } from \"~/Button\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useState","CheckboxGroupPrimitive","Button","meta","title","component","parameters","layout","render","args","values","setValues","value","createElement","className","Object","assign","onChange","join","Default","items","label","WithLongLabels","WithSelectedValues","WithDisabledValue","disabled","WithExternalValueControl","text","onClick","WithNumericValues"],"sources":["CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/CheckboxGroup/primitives/index.d.ts

@@ -1 +1 @@
-export * from "./CheckboxGroupPrimitive";
+export * from "./CheckboxGroupPrimitive.js";

package/CheckboxGroup/primitives/index.js

@@ -1,3 +1,3 @@
-export * from "./CheckboxGroupPrimitive";
+export * from "./CheckboxGroupPrimitive.js";
 
 //# sourceMappingURL=index.js.map

package/CheckboxGroup/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CheckboxGroupPrimitive\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CheckboxGroupPrimitive.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.d.ts

@@ -1,5 +1,5 @@
-import type { CheckboxGroupPrimitiveVm } from "../CheckboxGroupPrimitive";
-import type { CheckboxItemDto } from "../../../Checkbox/domains/CheckboxItemDto";
+import type { CheckboxGroupPrimitiveVm } from "../CheckboxGroupPrimitive.js";
+import type { CheckboxItemDto } from "../../../Checkbox/domains/CheckboxItemDto.js";
 interface CheckboxGroupPresenterParams<TValue = string | number> {
     items: CheckboxItemDto[];
     values: TValue[];

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js

@@ -1,6 +1,6 @@
 import { makeAutoObservable } from "mobx";
-import { CheckboxItem } from "../../../Checkbox/domains/CheckboxItem";
-import { CheckboxItemMapper } from "../../../Checkbox/domains/CheckboxItemMapper";
+import { CheckboxItem } from "../../../Checkbox/domains/CheckboxItem.js";
+import { CheckboxItemMapper } from "../../../Checkbox/domains/CheckboxItemMapper.js";
 class CheckboxGroupPresenter {
   params = undefined;
   items = [];

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","CheckboxItem","CheckboxItemMapper","CheckboxGroupPresenter","params","undefined","items","constructor","init","getItems","values","vm","map","item","toFormatted","changeChecked","value","currentValues","newValues","getUpdatedValues","onCheckedChange","index","indexOf","slice","length","create","checked","some"],"sources":["CheckboxGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CheckboxGroupPrimitiveVm } from \"../CheckboxGroupPrimitive\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto\";\n\ninterface CheckboxGroupPresenterParams<TValue = string | number> {\n    items: CheckboxItemDto[];\n    values: TValue[];\n    onCheckedChange?: (values: TValue[]) => void;\n}\n\ninterface ICheckboxGroupPresenter<TValue = string | number> {\n    vm: CheckboxGroupPrimitiveVm;\n    init: (params: CheckboxGroupPresenterParams<TValue>) => void;\n    changeChecked: (value: TValue) => void;\n}\n\nclass CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {\n    private params?: CheckboxGroupPresenterParams<TValue> = undefined;\n    private items: CheckboxItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init(params: CheckboxGroupPresenterParams<TValue>): void {\n        this.params = params;\n        this.items = this.getItems(params.items, params.values);\n    }\n\n    get vm(): CheckboxGroupPrimitiveVm {\n        return {\n            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))\n        };\n    }\n\n    public changeChecked = (value: TValue) => {\n        if (!this.params?.items) {\n            return;\n        }\n\n        const currentValues = [...this.params.values];\n        const newValues = this.getUpdatedValues(currentValues, value);\n        this.items = this.getItems(this.params.items, newValues);\n        this.params.onCheckedChange?.(newValues);\n    };\n\n    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {\n        const index = currentValues.indexOf(value);\n\n        if (index > -1) {\n            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];\n        }\n\n        return [...currentValues, value];\n    }\n\n    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {\n        if (!items.length) {\n            return [];\n        }\n\n        return items.map(item =>\n            CheckboxItem.create({\n                ...item,\n                checked: values.some(value => value === item.value)\n            })\n        );\n    }\n}\n\nexport { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,YAAY;AACrB,SAASC,kBAAkB;AAe3B,MAAMC,sBAAsB,CAAsE;EACtFC,MAAM,GAA0CC,SAAS;EACzDC,KAAK,GAAmB,EAAE;EAElCC,WAAWA,CAAA,EAAG;IACVP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOQ,IAAIA,CAACJ,MAA4C,EAAQ;IAC5D,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACE,KAAK,GAAG,IAAI,CAACG,QAAQ,CAACL,MAAM,CAACE,KAAK,EAAEF,MAAM,CAACM,MAAM,CAAC;EAC3D;EAEA,IAAIC,EAAEA,CAAA,EAA6B;IAC/B,OAAO;MACHL,KAAK,EAAE,IAAI,CAACA,KAAK,CAACM,GAAG,CAACC,IAAI,IAAIX,kBAAkB,CAACY,WAAW,CAACD,IAAI,CAAC;IACtE,CAAC;EACL;EAEOE,aAAa,GAAIC,KAAa,IAAK;IACtC,IAAI,CAAC,IAAI,CAACZ,MAAM,EAAEE,KAAK,EAAE;MACrB;IACJ;IAEA,MAAMW,aAAa,GAAG,CAAC,GAAG,IAAI,CAACb,MAAM,CAACM,MAAM,CAAC;IAC7C,MAAMQ,SAAS,GAAG,IAAI,CAACC,gBAAgB,CAACF,aAAa,EAAED,KAAK,CAAC;IAC7D,IAAI,CAACV,KAAK,GAAG,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACL,MAAM,CAACE,KAAK,EAAEY,SAAS,CAAC;IACxD,IAAI,CAACd,MAAM,CAACgB,eAAe,GAAGF,SAAS,CAAC;EAC5C,CAAC;EAEOC,gBAAgBA,CAACF,aAAuB,EAAED,KAAa,EAAY;IACvE,MAAMK,KAAK,GAAGJ,aAAa,CAACK,OAAO,CAACN,KAAK,CAAC;IAE1C,IAAIK,KAAK,GAAG,CAAC,CAAC,EAAE;MACZ,OAAO,CAAC,GAAGJ,aAAa,CAACM,KAAK,CAAC,CAAC,EAAEF,KAAK,CAAC,EAAE,GAAGJ,aAAa,CAACM,KAAK,CAACF,KAAK,GAAG,CAAC,CAAC,CAAC;IAChF;IAEA,OAAO,CAAC,GAAGJ,aAAa,EAAED,KAAK,CAAC;EACpC;EAEQP,QAAQA,CAACH,KAAwB,EAAEI,MAAgB,EAAkB;IACzE,IAAI,CAACJ,KAAK,CAACkB,MAAM,EAAE;MACf,OAAO,EAAE;IACb;IAEA,OAAOlB,KAAK,CAACM,GAAG,CAACC,IAAI,IACjBZ,YAAY,CAACwB,MAAM,CAAC;MAChB,GAAGZ,IAAI;MACPa,OAAO,EAAEhB,MAAM,CAACiB,IAAI,CAACX,KAAK,IAAIA,KAAK,KAAKH,IAAI,CAACG,KAAK;IACtD,CAAC,CACL,CAAC;EACL;AACJ;AAEA,SAASb,sBAAsB","ignoreList":[]}
+{"version":3,"names":["makeAutoObservable","CheckboxItem","CheckboxItemMapper","CheckboxGroupPresenter","params","undefined","items","constructor","init","getItems","values","vm","map","item","toFormatted","changeChecked","value","currentValues","newValues","getUpdatedValues","onCheckedChange","index","indexOf","slice","length","create","checked","some"],"sources":["CheckboxGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CheckboxGroupPrimitiveVm } from \"../CheckboxGroupPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\n\ninterface CheckboxGroupPresenterParams<TValue = string | number> {\n    items: CheckboxItemDto[];\n    values: TValue[];\n    onCheckedChange?: (values: TValue[]) => void;\n}\n\ninterface ICheckboxGroupPresenter<TValue = string | number> {\n    vm: CheckboxGroupPrimitiveVm;\n    init: (params: CheckboxGroupPresenterParams<TValue>) => void;\n    changeChecked: (value: TValue) => void;\n}\n\nclass CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {\n    private params?: CheckboxGroupPresenterParams<TValue> = undefined;\n    private items: CheckboxItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init(params: CheckboxGroupPresenterParams<TValue>): void {\n        this.params = params;\n        this.items = this.getItems(params.items, params.values);\n    }\n\n    get vm(): CheckboxGroupPrimitiveVm {\n        return {\n            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))\n        };\n    }\n\n    public changeChecked = (value: TValue) => {\n        if (!this.params?.items) {\n            return;\n        }\n\n        const currentValues = [...this.params.values];\n        const newValues = this.getUpdatedValues(currentValues, value);\n        this.items = this.getItems(this.params.items, newValues);\n        this.params.onCheckedChange?.(newValues);\n    };\n\n    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {\n        const index = currentValues.indexOf(value);\n\n        if (index > -1) {\n            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];\n        }\n\n        return [...currentValues, value];\n    }\n\n    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {\n        if (!items.length) {\n            return [];\n        }\n\n        return items.map(item =>\n            CheckboxItem.create({\n                ...item,\n                checked: values.some(value => value === item.value)\n            })\n        );\n    }\n}\n\nexport { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,YAAY;AACrB,SAASC,kBAAkB;AAe3B,MAAMC,sBAAsB,CAAsE;EACtFC,MAAM,GAA0CC,SAAS;EACzDC,KAAK,GAAmB,EAAE;EAElCC,WAAWA,CAAA,EAAG;IACVP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOQ,IAAIA,CAACJ,MAA4C,EAAQ;IAC5D,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACE,KAAK,GAAG,IAAI,CAACG,QAAQ,CAACL,MAAM,CAACE,KAAK,EAAEF,MAAM,CAACM,MAAM,CAAC;EAC3D;EAEA,IAAIC,EAAEA,CAAA,EAA6B;IAC/B,OAAO;MACHL,KAAK,EAAE,IAAI,CAACA,KAAK,CAACM,GAAG,CAACC,IAAI,IAAIX,kBAAkB,CAACY,WAAW,CAACD,IAAI,CAAC;IACtE,CAAC;EACL;EAEOE,aAAa,GAAIC,KAAa,IAAK;IACtC,IAAI,CAAC,IAAI,CAACZ,MAAM,EAAEE,KAAK,EAAE;MACrB;IACJ;IAEA,MAAMW,aAAa,GAAG,CAAC,GAAG,IAAI,CAACb,MAAM,CAACM,MAAM,CAAC;IAC7C,MAAMQ,SAAS,GAAG,IAAI,CAACC,gBAAgB,CAACF,aAAa,EAAED,KAAK,CAAC;IAC7D,IAAI,CAACV,KAAK,GAAG,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACL,MAAM,CAACE,KAAK,EAAEY,SAAS,CAAC;IACxD,IAAI,CAACd,MAAM,CAACgB,eAAe,GAAGF,SAAS,CAAC;EAC5C,CAAC;EAEOC,gBAAgBA,CAACF,aAAuB,EAAED,KAAa,EAAY;IACvE,MAAMK,KAAK,GAAGJ,aAAa,CAACK,OAAO,CAACN,KAAK,CAAC;IAE1C,IAAIK,KAAK,GAAG,CAAC,CAAC,EAAE;MACZ,OAAO,CAAC,GAAGJ,aAAa,CAACM,KAAK,CAAC,CAAC,EAAEF,KAAK,CAAC,EAAE,GAAGJ,aAAa,CAACM,KAAK,CAACF,KAAK,GAAG,CAAC,CAAC,CAAC;IAChF;IAEA,OAAO,CAAC,GAAGJ,aAAa,EAAED,KAAK,CAAC;EACpC;EAEQP,QAAQA,CAACH,KAAwB,EAAEI,MAAgB,EAAkB;IACzE,IAAI,CAACJ,KAAK,CAACkB,MAAM,EAAE;MACf,OAAO,EAAE;IACb;IAEA,OAAOlB,KAAK,CAACM,GAAG,CAACC,IAAI,IACjBZ,YAAY,CAACwB,MAAM,CAAC;MAChB,GAAGZ,IAAI;MACPa,OAAO,EAAEhB,MAAM,CAACiB,IAAI,CAACX,KAAK,IAAIA,KAAK,KAAKH,IAAI,CAACG,KAAK;IACtD,CAAC,CACL,CAAC;EACL;AACJ;AAEA,SAASb,sBAAsB","ignoreList":[]}

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.test.js

@@ -1,7 +1,8 @@
-import { CheckboxGroupPresenter } from "./CheckboxGroupPresenter";
+import { CheckboxGroupPresenter } from "./CheckboxGroupPresenter.js";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 describe("CheckboxGroupPresenter", () => {
   let presenter;
-  const onCheckedChange = jest.fn();
+  const onCheckedChange = vi.fn();
   beforeEach(() => {
     presenter = new CheckboxGroupPresenter();
   });

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["CheckboxGroupPresenter","describe","presenter","onCheckedChange","jest","fn","beforeEach","it","mockProps","items","value","label","values","init","expect","vm","toEqual","id","any","String","checked","indeterminate","disabled","hasLabel","changeChecked","toHaveBeenCalledWith","undefined"],"sources":["CheckboxGroupPresenter.test.ts"],"sourcesContent":["import { CheckboxGroupPresenter } from \"./CheckboxGroupPresenter\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto\";\n\ndescribe(\"CheckboxGroupPresenter\", () => {\n    let presenter: CheckboxGroupPresenter;\n    const onCheckedChange = jest.fn();\n\n    beforeEach(() => {\n        presenter = new CheckboxGroupPresenter();\n    });\n\n    it(\"initializes with given props\", () => {\n        const mockProps = {\n            items: [\n                { value: \"item1\", label: \"Item 1\" },\n                { value: \"item2\", label: \"Item 2\" }\n            ],\n            values: [\"item1\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: \"item2\",\n                label: \"Item 2\",\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n    });\n\n    it(\"updates checked state when changeChecked is called\", () => {\n        const mockProps = {\n            items: [\n                { value: \"item1\", label: \"Item 1\" },\n                { value: \"item2\", label: \"Item 2\" }\n            ],\n            values: [\"item1\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        presenter.changeChecked(\"item2\");\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: \"item2\",\n                label: \"Item 2\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n        expect(mockProps.onCheckedChange).toHaveBeenCalledWith([\"item1\", \"item2\"]);\n    });\n\n    it(\"removes an item from checked state when changeChecked is called on an already checked item\", () => {\n        const mockProps = {\n            items: [\n                {\n                    id: expect.any(String),\n                    value: \"item1\",\n                    label: \"Item 1\",\n                    checked: true,\n                    indeterminate: false,\n                    disabled: false,\n                    hasLabel: true\n                },\n                {\n                    id: expect.any(String),\n                    value: \"item2\",\n                    label: \"Item 2\",\n                    checked: true,\n                    indeterminate: false,\n                    disabled: false,\n                    hasLabel: true\n                }\n            ],\n            values: [\"item1\", \"item2\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        presenter.changeChecked(\"item2\");\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: \"item2\",\n                label: \"Item 2\",\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n        expect(mockProps.onCheckedChange).toHaveBeenCalledWith([\"item1\"]);\n    });\n\n    it(\"handles items with missing values correctly\", () => {\n        const mockProps = {\n            items: [\n                { value: \"item1\", label: \"Item 1\" },\n                { label: \"Item 2\" } // Missing `value`\n            ] as unknown as CheckboxItemDto[], // Simulate improper data\n            values: [\"item1\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: undefined,\n                label: \"Item 2\",\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CheckboxGroupPresenter","beforeEach","describe","expect","it","vi","presenter","onCheckedChange","fn","mockProps","items","value","label","values","init","vm","toEqual","id","any","String","checked","indeterminate","disabled","hasLabel","changeChecked","toHaveBeenCalledWith","undefined"],"sources":["CheckboxGroupPresenter.test.ts"],"sourcesContent":["import { CheckboxGroupPresenter } from \"./CheckboxGroupPresenter.js\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\nimport { beforeEach, describe, expect, it, vi } from \"vitest\";\n\ndescribe(\"CheckboxGroupPresenter\", () => {\n    let presenter: CheckboxGroupPresenter;\n    const onCheckedChange = vi.fn();\n\n    beforeEach(() => {\n        presenter = new CheckboxGroupPresenter();\n    });\n\n    it(\"initializes with given props\", () => {\n        const mockProps = {\n            items: [\n                { value: \"item1\", label: \"Item 1\" },\n                { value: \"item2\", label: \"Item 2\" }\n            ],\n            values: [\"item1\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: \"item2\",\n                label: \"Item 2\",\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n    });\n\n    it(\"updates checked state when changeChecked is called\", () => {\n        const mockProps = {\n            items: [\n                { value: \"item1\", label: \"Item 1\" },\n                { value: \"item2\", label: \"Item 2\" }\n            ],\n            values: [\"item1\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        presenter.changeChecked(\"item2\");\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: \"item2\",\n                label: \"Item 2\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n        expect(mockProps.onCheckedChange).toHaveBeenCalledWith([\"item1\", \"item2\"]);\n    });\n\n    it(\"removes an item from checked state when changeChecked is called on an already checked item\", () => {\n        const mockProps = {\n            items: [\n                {\n                    id: expect.any(String),\n                    value: \"item1\",\n                    label: \"Item 1\",\n                    checked: true,\n                    indeterminate: false,\n                    disabled: false,\n                    hasLabel: true\n                },\n                {\n                    id: expect.any(String),\n                    value: \"item2\",\n                    label: \"Item 2\",\n                    checked: true,\n                    indeterminate: false,\n                    disabled: false,\n                    hasLabel: true\n                }\n            ],\n            values: [\"item1\", \"item2\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        presenter.changeChecked(\"item2\");\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: \"item2\",\n                label: \"Item 2\",\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n        expect(mockProps.onCheckedChange).toHaveBeenCalledWith([\"item1\"]);\n    });\n\n    it(\"handles items with missing values correctly\", () => {\n        const mockProps = {\n            items: [\n                { value: \"item1\", label: \"Item 1\" },\n                { label: \"Item 2\" } // Missing `value`\n            ] as unknown as CheckboxItemDto[], // Simulate improper data\n            values: [\"item1\"],\n            onCheckedChange\n        };\n        presenter.init(mockProps);\n\n        expect(presenter.vm.items).toEqual([\n            {\n                id: expect.any(String),\n                value: \"item1\",\n                label: \"Item 1\",\n                checked: true,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            },\n            {\n                id: expect.any(String),\n                value: undefined,\n                label: \"Item 2\",\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                hasLabel: true\n            }\n        ]);\n    });\n});\n"],"mappings":"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","ignoreList":[]}

package/CheckboxGroup/primitives/presenters/index.d.ts

@@ -1 +1 @@
-export * from "./CheckboxGroupPresenter";
+export * from "./CheckboxGroupPresenter.js";

package/CheckboxGroup/primitives/presenters/index.js

@@ -1,3 +1,3 @@
-export * from "./CheckboxGroupPresenter";
+export * from "./CheckboxGroupPresenter.js";
 
 //# sourceMappingURL=index.js.map

package/CheckboxGroup/primitives/presenters/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CheckboxGroupPresenter\";\n"],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./CheckboxGroupPresenter.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/CheckboxGroup/primitives/useCheckboxGroup.d.ts

@@ -1,5 +1,5 @@
-import type { CheckboxGroupPrimitiveProps } from "./CheckboxGroupPrimitive";
+import type { CheckboxGroupPrimitiveProps } from "./CheckboxGroupPrimitive.js";
 export declare const useCheckboxGroup: (props: CheckboxGroupPrimitiveProps) => {
-    vm: import("./CheckboxGroupPrimitive").CheckboxGroupPrimitiveVm;
+    vm: import("./CheckboxGroupPrimitive.js").CheckboxGroupPrimitiveVm;
     changeChecked: (value: string | number) => void;
 };

package/CheckboxGroup/primitives/useCheckboxGroup.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { CheckboxGroupPresenter } from "./presenters";
+import { CheckboxGroupPresenter } from "./presenters/index.js";
 export const useCheckboxGroup = props => {
   const params = useMemo(() => ({
     items: props.items,

package/CheckboxGroup/primitives/useCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","CheckboxGroupPresenter","useCheckboxGroup","props","params","items","values","value","onCheckedChange","onChange","presenter","init","vm","setVm","changeChecked"],"sources":["useCheckboxGroup.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { CheckboxGroupPrimitiveProps } from \"./CheckboxGroupPrimitive\";\nimport type { CheckboxGroupPresenterParams } from \"./presenters\";\nimport { CheckboxGroupPresenter } from \"./presenters\";\n\nexport const useCheckboxGroup = (props: CheckboxGroupPrimitiveProps) => {\n    const params: CheckboxGroupPresenterParams = useMemo(\n        () => ({\n            items: props.items,\n            values: props.value || [],\n            onCheckedChange: props.onChange\n        }),\n        [props.items, props.value, props.onChange]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new CheckboxGroupPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeChecked: presenter.changeChecked };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,gBAAgB,GAAIC,KAAkC,IAAK;EACpE,MAAMC,MAAoC,GAAGN,OAAO,CAChD,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,MAAM,EAAEH,KAAK,CAACI,KAAK,IAAI,EAAE;IACzBC,eAAe,EAAEL,KAAK,CAACM;EAC3B,CAAC,CAAC,EACF,CAACN,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACI,KAAK,EAAEJ,KAAK,CAACM,QAAQ,CAC7C,CAAC;EAED,MAAMC,SAAS,GAAGZ,OAAO,CAAC,MAAM;IAC5B,MAAMY,SAAS,GAAG,IAAIT,sBAAsB,CAAC,CAAC;IAC9CS,SAAS,CAACC,IAAI,CAACP,MAAM,CAAC;IACtB,OAAOM,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGd,QAAQ,CAACW,SAAS,CAACE,EAAE,CAAC;EAE1Cf,SAAS,CAAC,MAAM;IACZa,SAAS,CAACC,IAAI,CAACP,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBa,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,aAAa,EAAEJ,SAAS,CAACI;EAAc,CAAC;AACzD,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","CheckboxGroupPresenter","useCheckboxGroup","props","params","items","values","value","onCheckedChange","onChange","presenter","init","vm","setVm","changeChecked"],"sources":["useCheckboxGroup.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { CheckboxGroupPrimitiveProps } from \"./CheckboxGroupPrimitive.js\";\nimport type { CheckboxGroupPresenterParams } from \"./presenters/index.js\";\nimport { CheckboxGroupPresenter } from \"./presenters/index.js\";\n\nexport const useCheckboxGroup = (props: CheckboxGroupPrimitiveProps) => {\n    const params: CheckboxGroupPresenterParams = useMemo(\n        () => ({\n            items: props.items,\n            values: props.value || [],\n            onCheckedChange: props.onChange\n        }),\n        [props.items, props.value, props.onChange]\n    );\n\n    const presenter = useMemo(() => {\n        const presenter = new CheckboxGroupPresenter();\n        presenter.init(params);\n        return presenter;\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm, changeChecked: presenter.changeChecked };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAG9B,SAASC,sBAAsB;AAE/B,OAAO,MAAMC,gBAAgB,GAAIC,KAAkC,IAAK;EACpE,MAAMC,MAAoC,GAAGN,OAAO,CAChD,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE,KAAK;IAClBC,MAAM,EAAEH,KAAK,CAACI,KAAK,IAAI,EAAE;IACzBC,eAAe,EAAEL,KAAK,CAACM;EAC3B,CAAC,CAAC,EACF,CAACN,KAAK,CAACE,KAAK,EAAEF,KAAK,CAACI,KAAK,EAAEJ,KAAK,CAACM,QAAQ,CAC7C,CAAC;EAED,MAAMC,SAAS,GAAGZ,OAAO,CAAC,MAAM;IAC5B,MAAMY,SAAS,GAAG,IAAIT,sBAAsB,CAAC,CAAC;IAC9CS,SAAS,CAACC,IAAI,CAACP,MAAM,CAAC;IACtB,OAAOM,SAAS;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACE,EAAE,EAAEC,KAAK,CAAC,GAAGd,QAAQ,CAACW,SAAS,CAACE,EAAE,CAAC;EAE1Cf,SAAS,CAAC,MAAM;IACZa,SAAS,CAACC,IAAI,CAACP,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZP,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBa,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE,EAAE;IAAEE,aAAa,EAAEJ,SAAS,CAACI;EAAc,CAAC;AACzD,CAAC","ignoreList":[]}

package/CodeEditor/CodeEditor.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
-import type { CodeEditorPrimitiveProps } from "./CodeEditorPrimitive";
-import type { FormComponentProps } from "../FormComponent";
+import type { CodeEditorPrimitiveProps } from "./CodeEditorPrimitive.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
 type CodeEditorProps = CodeEditorPrimitiveProps & FormComponentProps;
-declare const CodeEditor: (({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+declare const CodeEditor: (({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: CodeEditorProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CodeEditor/CodeEditor.js

@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { makeDecoratable } from "../utils";
-import { CodeEditorPrimitive } from "./CodeEditorPrimitive";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { makeDecoratable } from "../utils.js";
+import { CodeEditorPrimitive } from "./CodeEditorPrimitive.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableCodeEditor = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -17,9 +18,10 @@ const DecoratableCodeEditor = ({
   } = validation || {};
   const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid

package/CodeEditor/CodeEditor.js.map

@@ -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={\"wby-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;EAAa,gBACzBtB,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":[]}
+{"version":3,"names":["React","useMemo","makeDecoratable","CodeEditorPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableCodeEditor","label","description","note","hint","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    hint,\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                hint={hint}\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,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,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IAACoB,IAAI,EAAEd,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEd,KAAA,CAAAsB,aAAA,CAACnB,mBAAmB,EAAAsB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA;EAAS,EAAE,CAAC,eACtDd,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AACD,MAAMa,UAAU,GAAGzB,eAAe,CAAC,YAAY,EAAEM,qBAAqB,CAAC;AAEvE,SAASmB,UAAU","ignoreList":[]}

package/CodeEditor/CodeEditor.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as CodeEditorStories from './CodeEditor.stories';
 
@@ -97,4 +97,4 @@ const CodeEditorExample = () => {
 };
 
 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 type { Meta, StoryObj } from "@storybook/react-webpack5";
+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,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { CodeEditor } from "./CodeEditor";
+import { CodeEditor } from "./CodeEditor.js";
 const meta = {
   title: "Components/Form/CodeEditor",
   component: CodeEditor,
@@ -127,7 +127,6 @@ export const Documentation = {
     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
@@ -153,11 +152,6 @@ export const Documentation = {
       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",
@@ -168,12 +162,10 @@ export const Documentation = {
       control: "text"
     },
     validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
-      control: "none"
+      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",
-      control: "none"
+      description: "Function called when the code changes"
     }
   }
 };

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,"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-webpack5\";\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":[]}

package/CodeEditor/CodeEditorPrimitive.d.ts

@@ -1,33 +1,23 @@
-/// <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 CodeEditorPrimitive: (({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
+    original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
-        original: ({ value, theme, disabled, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
+    original: (({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
+        original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
         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<(({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element) & {
+        original: ({ value, disabled, options: optionsInput, ...rest }: CodeEditorPrimitiveProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CodeEditor/CodeEditorPrimitive.js

@@ -1,31 +1,33 @@
-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";
+import React, { useMemo } from "react";
+import MonacoEditor from "@monaco-editor/react";
+import { makeDecoratable } from "../utils.js";
+const monacoOptions = {
+  domReadOnly: true,
+  readOnly: true,
+  minimap: {
+    enabled: false
+  }
+};
 const DecoratableCodeEditorPrimitive = ({
   value,
-  theme = "github",
   disabled,
+  options: optionsInput,
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(AceEditor, Object.assign({
-    value: value ? String(value) : "",
-    theme: theme,
-    readOnly: disabled
+  const options = useMemo(() => {
+    return {
+      ...monacoOptions,
+      ...optionsInput,
+      domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,
+      readOnly: disabled === undefined ? monacoOptions.readOnly : disabled
+    };
+  }, [disabled]);
+  return /*#__PURE__*/React.createElement(MonacoEditor, Object.assign({
+    height: "calc(100vh - 400px)"
   }, rest, {
-    width: "100%",
-    editorProps: {
-      $blockScrolling: Infinity // Suppresses scrolling warning in console.
-    }
+    language: "json",
+    defaultValue: value,
+    options: options
   }));
 };
 const CodeEditorPrimitive = makeDecoratable("CodeEditorPrimitive", DecoratableCodeEditorPrimitive);

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,"names":["React","useMemo","MonacoEditor","makeDecoratable","monacoOptions","domReadOnly","readOnly","minimap","enabled","DecoratableCodeEditorPrimitive","value","disabled","options","optionsInput","rest","undefined","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    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    }\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={\"json\"}\n            defaultValue={value}\n            options={options}\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,WAAW,EAAE,IAAI;EACjBC,QAAQ,EAAE,IAAI;EACdC,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,MAAMF,OAAO,GAAGX,OAAO,CAAC,MAA6C;IACjE,OAAO;MACH,GAAGG,aAAa;MAChB,GAAGS,YAAY;MACfR,WAAW,EAAEM,QAAQ,KAAKI,SAAS,GAAGX,aAAa,CAACC,WAAW,GAAGM,QAAQ;MAC1EL,QAAQ,EAAEK,QAAQ,KAAKI,SAAS,GAAGX,aAAa,CAACE,QAAQ,GAAGK;IAChE,CAAC;EACL,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EACd,oBACIX,KAAA,CAAAgB,aAAA,CAACd,YAAY,EAAAe,MAAA,CAAAC,MAAA;IACTC,MAAM,EAAE;EAAsB,GAC1BL,IAAI;IACRM,QAAQ,EAAE,MAAO;IACjBC,YAAY,EAAEX,KAAM;IACpBE,OAAO,EAAEA;EAAQ,EACpB,CAAC;AAEV,CAAC;AAED,MAAMU,mBAAmB,GAAGnB,eAAe,CAAC,qBAAqB,EAAEM,8BAA8B,CAAC;AAElG,SAASa,mBAAmB","ignoreList":[]}