@webiny/admin-ui 6.0.0-alpha.0

package/CheckboxGroup/primitives/index.d.ts

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

package/CheckboxGroup/primitives/index.js

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

package/CheckboxGroup/primitives/index.js.map

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

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

@@ -0,0 +1,23 @@
+import { CheckboxGroupPrimitiveVm } from "../CheckboxGroupPrimitive";
+import type { CheckboxItemDto } from "../../../Checkbox/domains/CheckboxItemDto";
+interface CheckboxGroupPresenterParams<TValue = string | number> {
+    items: CheckboxItemDto[];
+    values: TValue[];
+    onCheckedChange?: (values: TValue[]) => void;
+}
+interface ICheckboxGroupPresenter<TValue = string | number> {
+    vm: CheckboxGroupPrimitiveVm;
+    init: (params: CheckboxGroupPresenterParams<TValue>) => void;
+    changeChecked: (value: TValue) => void;
+}
+declare class CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {
+    private params?;
+    private items;
+    constructor();
+    init(params: CheckboxGroupPresenterParams<TValue>): void;
+    get vm(): CheckboxGroupPrimitiveVm;
+    changeChecked: (value: TValue) => void;
+    private getUpdatedValues;
+    private getItems;
+}
+export { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js

@@ -0,0 +1,47 @@
+import { makeAutoObservable } from "mobx";
+import { CheckboxItem } from "../../../Checkbox/domains/CheckboxItem";
+import { CheckboxItemMapper } from "../../../Checkbox/domains/CheckboxItemMapper";
+class CheckboxGroupPresenter {
+  params = undefined;
+  items = [];
+  constructor() {
+    makeAutoObservable(this);
+  }
+  init(params) {
+    this.params = params;
+    this.items = this.getItems(params.items, params.values);
+  }
+  get vm() {
+    return {
+      items: this.items.map(item => CheckboxItemMapper.toFormatted(item))
+    };
+  }
+  changeChecked = value => {
+    if (!this.params?.items) {
+      return;
+    }
+    const currentValues = [...this.params.values];
+    const newValues = this.getUpdatedValues(currentValues, value);
+    this.items = this.getItems(this.params.items, newValues);
+    this.params.onCheckedChange?.(newValues);
+  };
+  getUpdatedValues(currentValues, value) {
+    const index = currentValues.indexOf(value);
+    if (index > -1) {
+      return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];
+    }
+    return [...currentValues, value];
+  }
+  getItems(items, values) {
+    if (!items.length) {
+      return [];
+    }
+    return items.map(item => CheckboxItem.create({
+      ...item,
+      checked: values.some(value => value === item.value)
+    }));
+  }
+}
+export { CheckboxGroupPresenter };
+
+//# sourceMappingURL=CheckboxGroupPresenter.js.map

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

@@ -0,0 +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 { 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":[]}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,149 @@
+import { CheckboxGroupPresenter } from "./CheckboxGroupPresenter";
+describe("CheckboxGroupPresenter", () => {
+  let presenter;
+  const onCheckedChange = jest.fn();
+  beforeEach(() => {
+    presenter = new CheckboxGroupPresenter();
+  });
+  it("initializes with given props", () => {
+    const mockProps = {
+      items: [{
+        value: "item1",
+        label: "Item 1"
+      }, {
+        value: "item2",
+        label: "Item 2"
+      }],
+      values: ["item1"],
+      onCheckedChange
+    };
+    presenter.init(mockProps);
+    expect(presenter.vm.items).toEqual([{
+      id: expect.any(String),
+      value: "item1",
+      label: "Item 1",
+      checked: true,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }, {
+      id: expect.any(String),
+      value: "item2",
+      label: "Item 2",
+      checked: false,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }]);
+  });
+  it("updates checked state when changeChecked is called", () => {
+    const mockProps = {
+      items: [{
+        value: "item1",
+        label: "Item 1"
+      }, {
+        value: "item2",
+        label: "Item 2"
+      }],
+      values: ["item1"],
+      onCheckedChange
+    };
+    presenter.init(mockProps);
+    presenter.changeChecked("item2");
+    expect(presenter.vm.items).toEqual([{
+      id: expect.any(String),
+      value: "item1",
+      label: "Item 1",
+      checked: true,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }, {
+      id: expect.any(String),
+      value: "item2",
+      label: "Item 2",
+      checked: true,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }]);
+    expect(mockProps.onCheckedChange).toHaveBeenCalledWith(["item1", "item2"]);
+  });
+  it("removes an item from checked state when changeChecked is called on an already checked item", () => {
+    const mockProps = {
+      items: [{
+        id: expect.any(String),
+        value: "item1",
+        label: "Item 1",
+        checked: true,
+        indeterminate: false,
+        disabled: false,
+        hasLabel: true
+      }, {
+        id: expect.any(String),
+        value: "item2",
+        label: "Item 2",
+        checked: true,
+        indeterminate: false,
+        disabled: false,
+        hasLabel: true
+      }],
+      values: ["item1", "item2"],
+      onCheckedChange
+    };
+    presenter.init(mockProps);
+    presenter.changeChecked("item2");
+    expect(presenter.vm.items).toEqual([{
+      id: expect.any(String),
+      value: "item1",
+      label: "Item 1",
+      checked: true,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }, {
+      id: expect.any(String),
+      value: "item2",
+      label: "Item 2",
+      checked: false,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }]);
+    expect(mockProps.onCheckedChange).toHaveBeenCalledWith(["item1"]);
+  });
+  it("handles items with missing values correctly", () => {
+    const mockProps = {
+      items: [{
+        value: "item1",
+        label: "Item 1"
+      }, {
+        label: "Item 2"
+      } // Missing `value`
+      ],
+      // Simulate improper data
+      values: ["item1"],
+      onCheckedChange
+    };
+    presenter.init(mockProps);
+    expect(presenter.vm.items).toEqual([{
+      id: expect.any(String),
+      value: "item1",
+      label: "Item 1",
+      checked: true,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }, {
+      id: expect.any(String),
+      value: undefined,
+      label: "Item 2",
+      checked: false,
+      indeterminate: false,
+      disabled: false,
+      hasLabel: true
+    }]);
+  });
+});
+
+//# sourceMappingURL=CheckboxGroupPresenter.test.js.map

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

@@ -0,0 +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":[]}

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

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

package/CheckboxGroup/primitives/presenters/index.js

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

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

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

package/CheckboxGroup/primitives/useCheckboxGroup.d.ts

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

package/CheckboxGroup/primitives/useCheckboxGroup.js

@@ -0,0 +1,30 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { CheckboxGroupPresenter } from "./presenters";
+export const useCheckboxGroup = props => {
+  const params = useMemo(() => ({
+    items: props.items,
+    values: props.value || [],
+    onCheckedChange: props.onChange
+  }), [props.items, props.value, props.onChange]);
+  const presenter = useMemo(() => {
+    const presenter = new CheckboxGroupPresenter();
+    presenter.init(params);
+    return presenter;
+  }, []);
+  const [vm, setVm] = useState(presenter.vm);
+  useEffect(() => {
+    presenter.init(params);
+  }, [params]);
+  useEffect(() => {
+    return autorun(() => {
+      setVm(presenter.vm);
+    });
+  }, [presenter]);
+  return {
+    vm,
+    changeChecked: presenter.changeChecked
+  };
+};
+
+//# sourceMappingURL=useCheckboxGroup.js.map

package/CheckboxGroup/primitives/useCheckboxGroup.js.map

@@ -0,0 +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 { CheckboxGroupPrimitiveProps } from \"./CheckboxGroupPrimitive\";\nimport { CheckboxGroupPresenter, CheckboxGroupPresenterParams } 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;AAE9B,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

@@ -0,0 +1,24 @@
+import React from "react";
+import { CodeEditorPrimitiveProps } from "./CodeEditorPrimitive";
+import { FormComponentProps } from "../FormComponent";
+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;
+    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;
+        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;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { CodeEditor, type CodeEditorProps };

package/CodeEditor/CodeEditor.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "../utils";
+import { CodeEditorPrimitive } from "./CodeEditorPrimitive";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableCodeEditor = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(CodeEditorPrimitive, Object.assign({}, props, {
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const CodeEditor = makeDecoratable("CodeEditor", DecoratableCodeEditor);
+export { CodeEditor };
+
+//# sourceMappingURL=CodeEditor.js.map

package/CodeEditor/CodeEditor.js.map

@@ -0,0 +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 { CodeEditorPrimitive, CodeEditorPrimitiveProps } from \"./CodeEditorPrimitive\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    FormComponentProps\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;AACxB,SAASC,mBAAmB;AAC5B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,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":[]}

package/CodeEditor/CodeEditor.mdx

@@ -0,0 +1,100 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as CodeEditorStories from './CodeEditor.stories';
+
+<Meta of={CodeEditorStories} />
+
+# Code Editor
+
+The Code Editor component is a specialized input field that allows users to write and edit code with syntax highlighting, making it easier to work with HTML, JSON, and other code formats. It provides a more user-friendly experience for editing code compared to a standard text area.
+
+## Usage
+
+<Canvas of={CodeEditorStories.Documentation} source={ { code: `
+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}
+        />
+    );
+};
+
+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'
+                    );
+                },
+            }
+        ]}
+/>
+
+<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}
+        />
+    );
+};
+
+export default CodeEditorExample;
+```

package/CodeEditor/CodeEditor.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeEditor } from "./CodeEditor";
+declare const meta: Meta<typeof CodeEditor>;
+export default meta;
+type Story = StoryObj<typeof CodeEditor>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithLabelRequired: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const Documentation: Story;