@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/SteppedProgress/domains/ProgressItemFormatter.js

@@ -0,0 +1,13 @@
+export class ProgressItemFormatter {
+  static format(item) {
+    return {
+      id: item.id,
+      label: item.label,
+      disabled: item.disabled,
+      errored: item.errored,
+      state: item.state
+    };
+  }
+}
+
+//# sourceMappingURL=ProgressItemFormatter.js.map

package/SteppedProgress/domains/ProgressItemFormatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ProgressItemFormatter","format","item","id","label","disabled","errored","state"],"sources":["ProgressItemFormatter.ts"],"sourcesContent":["import type { ProgressItem } from \"~/SteppedProgress/domains/ProgressItem\";\nimport type { ProgressItemFormatted } from \"~/SteppedProgress/domains/ProgressItemFormatted\";\n\nexport class ProgressItemFormatter {\n    static format(item: ProgressItem): ProgressItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            disabled: item.disabled,\n            errored: item.errored,\n            state: item.state\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,qBAAqB,CAAC;EAC/B,OAAOC,MAAMA,CAACC,IAAkB,EAAyB;IACrD,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,QAAQ,EAAEH,IAAI,CAACG,QAAQ;MACvBC,OAAO,EAAEJ,IAAI,CAACI,OAAO;MACrBC,KAAK,EAAEL,IAAI,CAACK;IAChB,CAAC;EACL;AACJ","ignoreList":[]}

package/SteppedProgress/domains/ProgressItemState.d.ts

@@ -0,0 +1,6 @@
+export declare enum ProgressItemState {
+    IN_PROGRESS = "IN_PROGRESS",
+    IDLE = "IDLE",
+    COMPLETED = "COMPLETED",
+    COMPLETED_AFFIRMATIVE = "COMPLETED_AFFIRMATIVE"
+}

package/SteppedProgress/domains/ProgressItemState.js

@@ -0,0 +1,9 @@
+export let ProgressItemState = /*#__PURE__*/function (ProgressItemState) {
+  ProgressItemState["IN_PROGRESS"] = "IN_PROGRESS";
+  ProgressItemState["IDLE"] = "IDLE";
+  ProgressItemState["COMPLETED"] = "COMPLETED";
+  ProgressItemState["COMPLETED_AFFIRMATIVE"] = "COMPLETED_AFFIRMATIVE";
+  return ProgressItemState;
+}({});
+
+//# sourceMappingURL=ProgressItemState.js.map

package/SteppedProgress/domains/ProgressItemState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ProgressItemState"],"sources":["ProgressItemState.ts"],"sourcesContent":["export enum ProgressItemState {\n    IN_PROGRESS = \"IN_PROGRESS\",\n    IDLE = \"IDLE\",\n    COMPLETED = \"COMPLETED\",\n    COMPLETED_AFFIRMATIVE = \"COMPLETED_AFFIRMATIVE\"\n}\n"],"mappings":"AAAA,WAAYA,iBAAiB,0BAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA","ignoreList":[]}

package/SteppedProgress/domains/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./ProgressItem";
+export * from "./ProgressItemDto";
+export * from "./ProgressItemState";
+export * from "./ProgressItemFormatted";
+export * from "./ProgressItemFormatter";

package/SteppedProgress/domains/index.js

@@ -0,0 +1,7 @@
+export * from "./ProgressItem";
+export * from "./ProgressItemDto";
+export * from "./ProgressItemState";
+export * from "./ProgressItemFormatted";
+export * from "./ProgressItemFormatter";
+
+//# sourceMappingURL=index.js.map

package/SteppedProgress/domains/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ProgressItem\";\nexport * from \"./ProgressItemDto\";\nexport * from \"./ProgressItemState\";\nexport * from \"./ProgressItemFormatted\";\nexport * from \"./ProgressItemFormatter\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/SteppedProgress/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./domains";
+export * from "./SteppedProgress";

package/SteppedProgress/index.js

@@ -0,0 +1,4 @@
+export * from "./domains";
+export * from "./SteppedProgress";
+
+//# sourceMappingURL=index.js.map

package/SteppedProgress/index.js.map

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

package/SteppedProgress/presenters/SteppedProgressPresenter.d.ts

@@ -0,0 +1,19 @@
+import { type ProgressItemParams, type ProgressItemFormatted } from "../domains";
+interface SteppedProgressPresenterParams {
+    items: ProgressItemParams[];
+}
+interface ISteppedProgressPresenter {
+    vm: {
+        items: ProgressItemFormatted[];
+    };
+    init: (props: SteppedProgressPresenterParams) => void;
+}
+declare class SteppedProgressPresenter implements ISteppedProgressPresenter {
+    private items;
+    constructor();
+    init(params: SteppedProgressPresenterParams): void;
+    get vm(): {
+        items: ProgressItemFormatted[];
+    };
+}
+export { SteppedProgressPresenter, type SteppedProgressPresenterParams };

package/SteppedProgress/presenters/SteppedProgressPresenter.js

@@ -0,0 +1,19 @@
+import { makeAutoObservable } from "mobx";
+import { ProgressItem, ProgressItemFormatter } from "../domains";
+class SteppedProgressPresenter {
+  items = [];
+  constructor() {
+    makeAutoObservable(this);
+  }
+  init(params) {
+    this.items = params.items.map(item => ProgressItem.create(item));
+  }
+  get vm() {
+    return {
+      items: this.items.map(item => ProgressItemFormatter.format(item))
+    };
+  }
+}
+export { SteppedProgressPresenter };
+
+//# sourceMappingURL=SteppedProgressPresenter.js.map

package/SteppedProgress/presenters/SteppedProgressPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","ProgressItem","ProgressItemFormatter","SteppedProgressPresenter","items","constructor","init","params","map","item","create","vm","format"],"sources":["SteppedProgressPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport {\n    ProgressItem,\n    type ProgressItemParams,\n    ProgressItemFormatter,\n    type ProgressItemFormatted\n} from \"../domains\";\n\ninterface SteppedProgressPresenterParams {\n    items: ProgressItemParams[];\n}\n\ninterface ISteppedProgressPresenter {\n    vm: {\n        items: ProgressItemFormatted[];\n    };\n    init: (props: SteppedProgressPresenterParams) => void;\n}\n\nclass SteppedProgressPresenter implements ISteppedProgressPresenter {\n    private items: ProgressItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init(params: SteppedProgressPresenterParams) {\n        this.items = params.items.map(item => ProgressItem.create(item));\n    }\n\n    get vm() {\n        return {\n            items: this.items.map(item => ProgressItemFormatter.format(item))\n        };\n    }\n}\n\nexport { SteppedProgressPresenter, type SteppedProgressPresenterParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AACzC,SACIC,YAAY,EAEZC,qBAAqB;AAezB,MAAMC,wBAAwB,CAAsC;EACxDC,KAAK,GAAmB,EAAE;EAElCC,WAAWA,CAAA,EAAG;IACVL,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOM,IAAIA,CAACC,MAAsC,EAAE;IAChD,IAAI,CAACH,KAAK,GAAGG,MAAM,CAACH,KAAK,CAACI,GAAG,CAACC,IAAI,IAAIR,YAAY,CAACS,MAAM,CAACD,IAAI,CAAC,CAAC;EACpE;EAEA,IAAIE,EAAEA,CAAA,EAAG;IACL,OAAO;MACHP,KAAK,EAAE,IAAI,CAACA,KAAK,CAACI,GAAG,CAACC,IAAI,IAAIP,qBAAqB,CAACU,MAAM,CAACH,IAAI,CAAC;IACpE,CAAC;EACL;AACJ;AAEA,SAASN,wBAAwB","ignoreList":[]}

package/SteppedProgress/presenters/SteppedProgressPresenter.test.d.ts

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

package/SteppedProgress/presenters/SteppedProgressPresenter.test.js

@@ -0,0 +1,76 @@
+import { SteppedProgressPresenter } from "./SteppedProgressPresenter";
+import { ProgressItemState } from "../domains";
+describe("SteppedProgressPresenter", () => {
+  it("should return the compatible `vm` based on props", () => {
+    const presenter = new SteppedProgressPresenter();
+
+    // `items`
+    {
+      presenter.init({
+        items: [{
+          label: "Step 1"
+        }]
+      });
+      expect(presenter.vm.items).toEqual([{
+        id: expect.any(String),
+        label: "Step 1",
+        disabled: false,
+        errored: false,
+        state: ProgressItemState.IDLE
+      }]);
+    }
+
+    // `items` disabled
+    {
+      presenter.init({
+        items: [{
+          label: "Step 1",
+          disabled: true
+        }]
+      });
+      expect(presenter.vm.items).toEqual([{
+        id: expect.any(String),
+        label: "Step 1",
+        disabled: true,
+        errored: false,
+        state: ProgressItemState.IDLE
+      }]);
+    }
+
+    // `items` errored
+    {
+      presenter.init({
+        items: [{
+          label: "Step 1",
+          errored: true
+        }]
+      });
+      expect(presenter.vm.items).toEqual([{
+        id: expect.any(String),
+        label: "Step 1",
+        disabled: false,
+        errored: true,
+        state: ProgressItemState.IDLE
+      }]);
+    }
+
+    // `items` state
+    {
+      presenter.init({
+        items: [{
+          label: "Step 1",
+          state: ProgressItemState.IN_PROGRESS
+        }]
+      });
+      expect(presenter.vm.items).toEqual([{
+        id: expect.any(String),
+        label: "Step 1",
+        disabled: false,
+        errored: false,
+        state: ProgressItemState.IN_PROGRESS
+      }]);
+    }
+  });
+});
+
+//# sourceMappingURL=SteppedProgressPresenter.test.js.map

package/SteppedProgress/presenters/SteppedProgressPresenter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SteppedProgressPresenter","ProgressItemState","describe","it","presenter","init","items","label","expect","vm","toEqual","id","any","String","disabled","errored","state","IDLE","IN_PROGRESS"],"sources":["SteppedProgressPresenter.test.ts"],"sourcesContent":["import { SteppedProgressPresenter } from \"./SteppedProgressPresenter\";\nimport { ProgressItemState } from \"../domains\";\n\ndescribe(\"SteppedProgressPresenter\", () => {\n    it(\"should return the compatible `vm` based on props\", () => {\n        const presenter = new SteppedProgressPresenter();\n\n        // `items`\n        {\n            presenter.init({\n                items: [\n                    {\n                        label: \"Step 1\"\n                    }\n                ]\n            });\n\n            expect(presenter.vm.items).toEqual([\n                {\n                    id: expect.any(String),\n                    label: \"Step 1\",\n                    disabled: false,\n                    errored: false,\n                    state: ProgressItemState.IDLE\n                }\n            ]);\n        }\n\n        // `items` disabled\n        {\n            presenter.init({\n                items: [\n                    {\n                        label: \"Step 1\",\n                        disabled: true\n                    }\n                ]\n            });\n\n            expect(presenter.vm.items).toEqual([\n                {\n                    id: expect.any(String),\n                    label: \"Step 1\",\n                    disabled: true,\n                    errored: false,\n                    state: ProgressItemState.IDLE\n                }\n            ]);\n        }\n\n        // `items` errored\n        {\n            presenter.init({\n                items: [\n                    {\n                        label: \"Step 1\",\n                        errored: true\n                    }\n                ]\n            });\n\n            expect(presenter.vm.items).toEqual([\n                {\n                    id: expect.any(String),\n                    label: \"Step 1\",\n                    disabled: false,\n                    errored: true,\n                    state: ProgressItemState.IDLE\n                }\n            ]);\n        }\n\n        // `items` state\n        {\n            presenter.init({\n                items: [\n                    {\n                        label: \"Step 1\",\n                        state: ProgressItemState.IN_PROGRESS\n                    }\n                ]\n            });\n\n            expect(presenter.vm.items).toEqual([\n                {\n                    id: expect.any(String),\n                    label: \"Step 1\",\n                    disabled: false,\n                    errored: false,\n                    state: ProgressItemState.IN_PROGRESS\n                }\n            ]);\n        }\n    });\n});\n"],"mappings":"AAAA,SAASA,wBAAwB;AACjC,SAASC,iBAAiB;AAE1BC,QAAQ,CAAC,0BAA0B,EAAE,MAAM;EACvCC,EAAE,CAAC,kDAAkD,EAAE,MAAM;IACzD,MAAMC,SAAS,GAAG,IAAIJ,wBAAwB,CAAC,CAAC;;IAEhD;IACA;MACII,SAAS,CAACC,IAAI,CAAC;QACXC,KAAK,EAAE,CACH;UACIC,KAAK,EAAE;QACX,CAAC;MAET,CAAC,CAAC;MAEFC,MAAM,CAACJ,SAAS,CAACK,EAAE,CAACH,KAAK,CAAC,CAACI,OAAO,CAAC,CAC/B;QACIC,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBN,KAAK,EAAE,QAAQ;QACfO,QAAQ,EAAE,KAAK;QACfC,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEf,iBAAiB,CAACgB;MAC7B,CAAC,CACJ,CAAC;IACN;;IAEA;IACA;MACIb,SAAS,CAACC,IAAI,CAAC;QACXC,KAAK,EAAE,CACH;UACIC,KAAK,EAAE,QAAQ;UACfO,QAAQ,EAAE;QACd,CAAC;MAET,CAAC,CAAC;MAEFN,MAAM,CAACJ,SAAS,CAACK,EAAE,CAACH,KAAK,CAAC,CAACI,OAAO,CAAC,CAC/B;QACIC,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBN,KAAK,EAAE,QAAQ;QACfO,QAAQ,EAAE,IAAI;QACdC,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEf,iBAAiB,CAACgB;MAC7B,CAAC,CACJ,CAAC;IACN;;IAEA;IACA;MACIb,SAAS,CAACC,IAAI,CAAC;QACXC,KAAK,EAAE,CACH;UACIC,KAAK,EAAE,QAAQ;UACfQ,OAAO,EAAE;QACb,CAAC;MAET,CAAC,CAAC;MAEFP,MAAM,CAACJ,SAAS,CAACK,EAAE,CAACH,KAAK,CAAC,CAACI,OAAO,CAAC,CAC/B;QACIC,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBN,KAAK,EAAE,QAAQ;QACfO,QAAQ,EAAE,KAAK;QACfC,OAAO,EAAE,IAAI;QACbC,KAAK,EAAEf,iBAAiB,CAACgB;MAC7B,CAAC,CACJ,CAAC;IACN;;IAEA;IACA;MACIb,SAAS,CAACC,IAAI,CAAC;QACXC,KAAK,EAAE,CACH;UACIC,KAAK,EAAE,QAAQ;UACfS,KAAK,EAAEf,iBAAiB,CAACiB;QAC7B,CAAC;MAET,CAAC,CAAC;MAEFV,MAAM,CAACJ,SAAS,CAACK,EAAE,CAACH,KAAK,CAAC,CAACI,OAAO,CAAC,CAC/B;QACIC,EAAE,EAAEH,MAAM,CAACI,GAAG,CAACC,MAAM,CAAC;QACtBN,KAAK,EAAE,QAAQ;QACfO,QAAQ,EAAE,KAAK;QACfC,OAAO,EAAE,KAAK;QACdC,KAAK,EAAEf,iBAAiB,CAACiB;MAC7B,CAAC,CACJ,CAAC;IACN;EACJ,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}

package/SteppedProgress/presenters/index.d.ts

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

package/SteppedProgress/presenters/index.js

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

package/SteppedProgress/presenters/index.js.map

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

package/SteppedProgress/useSteppedProgress.d.ts

@@ -0,0 +1,6 @@
+import type { SteppedProgressProps } from "./SteppedProgress";
+export declare const useSteppedProgress: (props: SteppedProgressProps) => {
+    vm: {
+        items: import("./domains").ProgressItemFormatted[];
+    };
+};

package/SteppedProgress/useSteppedProgress.js

@@ -0,0 +1,25 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { SteppedProgressPresenter } from "./presenters";
+export const useSteppedProgress = props => {
+  const params = useMemo(() => ({
+    items: props.items
+  }), [props.items]);
+  const presenter = useMemo(() => {
+    return new SteppedProgressPresenter();
+  }, []);
+  useEffect(() => {
+    presenter.init(params);
+  }, [params]);
+  const [vm, setVm] = useState(presenter.vm);
+  useEffect(() => {
+    return autorun(() => {
+      setVm(presenter.vm);
+    });
+  }, [presenter]);
+  return {
+    vm
+  };
+};
+
+//# sourceMappingURL=useSteppedProgress.js.map

package/SteppedProgress/useSteppedProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","autorun","SteppedProgressPresenter","useSteppedProgress","props","params","items","presenter","init","vm","setVm"],"sources":["useSteppedProgress.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport { SteppedProgressPresenter, type SteppedProgressPresenterParams } from \"./presenters\";\nimport type { SteppedProgressProps } from \"./SteppedProgress\";\n\nexport const useSteppedProgress = (props: SteppedProgressProps) => {\n    const params: SteppedProgressPresenterParams = useMemo(\n        () => ({\n            items: props.items\n        }),\n        [props.items]\n    );\n\n    const presenter = useMemo(() => {\n        return new SteppedProgressPresenter();\n    }, []);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return { vm };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAC9B,SAASC,wBAAwB;AAGjC,OAAO,MAAMC,kBAAkB,GAAIC,KAA2B,IAAK;EAC/D,MAAMC,MAAsC,GAAGN,OAAO,CAClD,OAAO;IACHO,KAAK,EAAEF,KAAK,CAACE;EACjB,CAAC,CAAC,EACF,CAACF,KAAK,CAACE,KAAK,CAChB,CAAC;EAED,MAAMC,SAAS,GAAGR,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIG,wBAAwB,CAAC,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAENJ,SAAS,CAAC,MAAM;IACZS,SAAS,CAACC,IAAI,CAACH,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAM,CAACI,EAAE,EAAEC,KAAK,CAAC,GAAGV,QAAQ,CAACO,SAAS,CAACE,EAAE,CAAC;EAE1CX,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBS,KAAK,CAACH,SAAS,CAACE,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACF,SAAS,CAAC,CAAC;EAEf,OAAO;IAAEE;EAAG,CAAC;AACjB,CAAC","ignoreList":[]}

package/Switch/Switch.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { SwitchPrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
+type SwitchProps = SwitchPrimitiveProps & FormComponentProps;
+declare const Switch: (({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
+    original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
+        original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ note, validation, ...props }: SwitchProps) => React.JSX.Element) & {
+        original: ({ note, validation, ...props }: SwitchProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Switch };

package/Switch/Switch.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "../utils";
+import { SwitchPrimitive } from "./primitives";
+import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
+const DecoratableSwitch = ({
+  note,
+  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(SwitchPrimitive, Object.assign({}, props, {
+    disabled: props.disabled
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: props.disabled
+  }));
+};
+const Switch = makeDecoratable("Switch", DecoratableSwitch);
+export { Switch };
+
+//# sourceMappingURL=Switch.js.map

package/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","SwitchPrimitive","FormComponentErrorMessage","FormComponentNote","DecoratableSwitch","note","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","Object","assign","disabled","text","Switch"],"sources":["Switch.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { SwitchPrimitiveProps } from \"./primitives\";\nimport { SwitchPrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent\";\n\ntype SwitchProps = SwitchPrimitiveProps & FormComponentProps;\n\nconst DecoratableSwitch = ({ note, validation, ...props }: SwitchProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <SwitchPrimitive {...props} disabled={props.disabled} />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={props.disabled}\n            />\n            <FormComponentNote text={note} disabled={props.disabled} />\n        </div>\n    );\n};\n\nconst Switch = makeDecoratable(\"Switch\", DecoratableSwitch);\n\nexport { Switch };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,eAAe;AAExB,SAASC,yBAAyB,EAAEC,iBAAiB;AAIrD,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAAmB,CAAC,KAAK;EACvE,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGb,OAAO,CAAC,MAAMU,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIX,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzBhB,KAAA,CAAAe,aAAA,CAACZ,eAAe,EAAAc,MAAA,CAAAC,MAAA,KAAKT,KAAK;IAAEU,QAAQ,EAAEV,KAAK,CAACU;EAAS,EAAE,CAAC,eACxDnB,KAAA,CAAAe,aAAA,CAACX,yBAAyB;IACtBgB,IAAI,EAAEP,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBK,QAAQ,EAAEV,KAAK,CAACU;EAAS,CAC5B,CAAC,eACFnB,KAAA,CAAAe,aAAA,CAACV,iBAAiB;IAACe,IAAI,EAAEb,IAAK;IAACY,QAAQ,EAAEV,KAAK,CAACU;EAAS,CAAE,CACzD,CAAC;AAEd,CAAC;AAED,MAAME,MAAM,GAAGnB,eAAe,CAAC,QAAQ,EAAEI,iBAAiB,CAAC;AAE3D,SAASe,MAAM","ignoreList":[]}

package/Switch/Switch.mdx

@@ -0,0 +1,98 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as SwitchStories from './Switch.stories';
+
+<Meta of={SwitchStories} />
+
+# Switch
+
+The Switch component is a user interface control that allows users to toggle between two states: on and off. It provides a visual representation of a setting that can be enabled or disabled, similar to a physical switch.
+
+## Usage
+
+<Canvas of={SwitchStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { Switch } from "@webiny/admin-ui";
+
+const SwitchExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked && true) { // true represents required field
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Switch
+                label="Enable feature"
+                description="Enabling this feature will activate additional functionality."
+                note="Note: This setting can be changed at any time."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SwitchExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Switch/Switch.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={SwitchStories.Documentation} exclude={"onChange"}/>
+
+```tsx
+import React, { useState } from "react";
+import { Switch } from "@webiny/admin-ui";
+
+const SwitchExample = () => {
+    const [isChecked, setIsChecked] = useState(false);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleChange = (checked: boolean) => {
+        setIsChecked(checked);
+
+        if (!checked && true) { // true represents required field
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <div>
+            <Switch
+                label="Enable feature"
+                description="Enabling this feature will activate additional functionality."
+                note="Note: This setting can be changed at any time."
+                checked={isChecked}
+                required={true}
+                onChange={handleChange}
+                validation={validation}
+            />
+        </div>
+    );
+};
+
+export default SwitchExample;
+```

package/Switch/Switch.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./";
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: 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;

package/Switch/Switch.stories.js

@@ -0,0 +1,172 @@
+import React, { useState, useEffect } from "react";
+import { Switch } from "./";
+import { Tooltip } from "../Tooltip";
+const meta = {
+  title: "Components/Form/Switch",
+  component: Switch,
+  parameters: {
+    layout: "padded"
+  },
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement(Story, null))],
+  render: args => {
+    const [checked, setChecked] = useState(args.checked);
+    return /*#__PURE__*/React.createElement(Switch, Object.assign({}, args, {
+      checked: checked,
+      onChange: value => setChecked(value)
+    }));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    label: "Any field label"
+  }
+};
+export const WithLabelRequired = {
+  args: {
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [checked, setChecked] = useState(args.checked || false);
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+
+    // Update checked state when args.checked changes
+    useEffect(() => {
+      setChecked(args.checked || false);
+    }, [args.checked]);
+    const handleChange = isChecked => {
+      setChecked(isChecked);
+
+      // Simple required validation
+      if (args.required && !isChecked) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    };
+
+    // Validate on required change
+    useEffect(() => {
+      if (args.required && !checked) {
+        setValidation({
+          isValid: false,
+          message: "This field is required"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    }, [args.required, checked]);
+    return /*#__PURE__*/React.createElement(Switch, Object.assign({}, args, {
+      checked: checked,
+      onChange: handleChange,
+      validation: validation,
+      required: args.required
+    }));
+  },
+  args: {
+    label: "Enable feature",
+    checked: false,
+    disabled: false,
+    required: true,
+    description: "Enabling this feature will activate additional functionality.",
+    note: "Note: This setting can be changed at any time.",
+    validation: undefined
+  },
+  argTypes: {
+    label: {
+      description: "Label text for the switch",
+      control: "text"
+    },
+    checked: {
+      description: "Determines if the switch is checked",
+      control: "boolean"
+    },
+    disabled: {
+      description: "Disables the switch when set to true",
+      control: "boolean"
+    },
+    required: {
+      description: "Makes the switch required when set to true",
+      control: "boolean"
+    },
+    description: {
+      description: "Additional description text below the switch",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the switch",
+      control: "text"
+    },
+    validation: {
+      description: "Object containing validation state and message. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    onChange: {
+      description: "Function called when the switch state changes",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=Switch.stories.js.map

package/Switch/Switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","Switch","Tooltip","meta","title","component","parameters","layout","argTypes","disabled","control","defaultValue","decorators","Story","createElement","Provider","render","args","checked","setChecked","Object","assign","onChange","value","Default","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","setValidation","handleChange","isChecked","undefined"],"sources":["Switch.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Switch } from \"~/Switch\";\nimport { Tooltip } from \"~/Tooltip\";\n\nconst meta: Meta<typeof Switch> = {\n    title: \"Components/Form/Switch\",\n    component: Switch,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return <Switch {...args} checked={checked} onChange={value => setChecked(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Switch>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    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        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 [checked, setChecked] = useState(args.checked || false);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update checked state when args.checked changes\n        useEffect(() => {\n            setChecked(args.checked || false);\n        }, [args.checked]);\n\n        const handleChange = (isChecked: boolean) => {\n            setChecked(isChecked);\n\n            // Simple required validation\n            if (args.required && !isChecked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change\n        useEffect(() => {\n            if (args.required && !checked) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, checked]);\n\n        return (\n            <Switch\n                {...args}\n                checked={checked}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Enable feature\",\n        checked: false,\n        disabled: false,\n        required: true,\n        description: \"Enabling this feature will activate additional functionality.\",\n        note: \"Note: This setting can be changed at any time.\",\n        validation: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the switch\",\n            control: \"text\"\n        },\n        checked: {\n            description: \"Determines if the switch is checked\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the switch when set to true\",\n            control: \"boolean\"\n        },\n        required: {\n            description: \"Makes the switch required when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the switch\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the switch\",\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 switch state changes\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}