@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/Toast/useToast.stories.js

@@ -1,179 +1,189 @@
-import React, { useState } from "react";
-import { ReactComponent as SettingsIcon } from "@webiny/icons/settings.svg";
+import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/settings.svg";
 import { Toast } from "./Toast.js";
 import { useToast } from "./useToast.js";
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
-const ToastComponent = props => {
-  const [lastToast, setLastToast] = useState("");
-  const {
-    showToast,
-    hideToast,
-    hideAllToasts
-  } = useToast();
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    text: "Show Toast",
-    onClick: () => {
-      const toast = showToast(props);
-      setLastToast(toast);
-    }
-  }), /*#__PURE__*/React.createElement(Button, {
-    text: "Hide latest toast",
-    onClick: () => hideToast(lastToast)
-  }), /*#__PURE__*/React.createElement(Button, {
-    text: "Hide all toasts",
-    onClick: () => hideAllToasts()
-  }));
+const ToastComponent = (props)=>{
+    const [lastToast, setLastToast] = useState("");
+    const { showToast, hideToast, hideAllToasts } = useToast();
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+        text: "Show Toast",
+        onClick: ()=>{
+            const toast = showToast(props);
+            setLastToast(toast);
+        }
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Hide latest toast",
+        onClick: ()=>hideToast(lastToast)
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Hide all toasts",
+        onClick: ()=>hideAllToasts()
+    }));
 };
 const meta = {
-  title: "Components/Toast",
-  component: ToastComponent,
-  parameters: {
-    layout: "fullscreen"
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "subtle"]
-    }
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "w-full h-64 flex justify-center items-center gap-sm"
-  }, /*#__PURE__*/React.createElement(Story, null), /*#__PURE__*/React.createElement(Toast.Provider, null))]
+    title: "Components/Toast",
+    component: ToastComponent,
+    parameters: {
+        layout: "fullscreen"
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "default",
+                "subtle"
+            ]
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-full h-64 flex justify-center items-center gap-sm"
+            }, /*#__PURE__*/ react.createElement(Story, null), /*#__PURE__*/ react.createElement(Toast.Provider, null))
+    ]
 };
-export default meta;
-export const Default = {
-  args: {
-    title: "New entry created"
-  }
+const useToast_stories = meta;
+const Default = {
+    args: {
+        title: "New entry created"
+    }
 };
-export const SubtleVariant = {
-  args: {
-    ...Default.args,
-    variant: "subtle"
-  }
+const SubtleVariant = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
+    }
 };
-export const WithTitleComponent = {
-  args: {
-    title: /*#__PURE__*/React.createElement(Toast.Title, {
-      text: "New entry created"
-    })
-  }
+const WithTitleComponent = {
+    args: {
+        title: /*#__PURE__*/ react.createElement(Toast.Title, {
+            text: "New entry created"
+        })
+    }
 };
-export const WithDescription = {
-  args: {
-    ...Default.args,
-    description: 'Entry "Article One" has been successfully created'
-  }
+const WithDescription = {
+    args: {
+        ...Default.args,
+        description: 'Entry "Article One" has been successfully created'
+    }
 };
-export const WithDescriptionComponent = {
-  args: {
-    ...Default.args,
-    description: /*#__PURE__*/React.createElement(Toast.Description, {
-      text: 'Entry "Article One" has been successfully created'
-    })
-  }
+const WithDescriptionComponent = {
+    args: {
+        ...Default.args,
+        description: /*#__PURE__*/ react.createElement(Toast.Description, {
+            text: 'Entry "Article One" has been successfully created'
+        })
+    }
 };
-export const WithActions = {
-  args: {
-    ...Default.args,
-    actions: /*#__PURE__*/React.createElement(Toast.Actions, null, /*#__PURE__*/React.createElement(Button, {
-      key: "action-1",
-      text: "Do the action",
-      onClick: () => console.log("doTheAction")
-    }), /*#__PURE__*/React.createElement(Button, {
-      key: "action-2",
-      text: "Dismiss",
-      onClick: () => console.log("dismiss"),
-      variant: "secondary"
-    }))
-  }
+const WithActions = {
+    args: {
+        ...Default.args,
+        actions: /*#__PURE__*/ react.createElement(Toast.Actions, null, /*#__PURE__*/ react.createElement(Button, {
+            key: "action-1",
+            text: "Do the action",
+            onClick: ()=>console.log("doTheAction")
+        }), /*#__PURE__*/ react.createElement(Button, {
+            key: "action-2",
+            text: "Dismiss",
+            onClick: ()=>console.log("dismiss"),
+            variant: "secondary"
+        }))
+    }
 };
-export const WithDescriptionAndActions = {
-  args: {
-    ...Default.args,
-    description: /*#__PURE__*/React.createElement(Toast.Description, {
-      text: 'Entry "Article One" has been successfully created'
-    }),
-    actions: /*#__PURE__*/React.createElement(Toast.Actions, null, /*#__PURE__*/React.createElement(Button, {
-      key: "action-1",
-      text: "Do the action",
-      onClick: () => console.log("doTheAction")
-    }), /*#__PURE__*/React.createElement(Button, {
-      key: "action-2",
-      text: "Dismiss",
-      onClick: () => console.log("dismiss"),
-      variant: "secondary"
-    }))
-  }
+const WithDescriptionAndActions = {
+    args: {
+        ...Default.args,
+        description: /*#__PURE__*/ react.createElement(Toast.Description, {
+            text: 'Entry "Article One" has been successfully created'
+        }),
+        actions: /*#__PURE__*/ react.createElement(Toast.Actions, null, /*#__PURE__*/ react.createElement(Button, {
+            key: "action-1",
+            text: "Do the action",
+            onClick: ()=>console.log("doTheAction")
+        }), /*#__PURE__*/ react.createElement(Button, {
+            key: "action-2",
+            text: "Dismiss",
+            onClick: ()=>console.log("dismiss"),
+            variant: "secondary"
+        }))
+    }
 };
-export const WithCustomIcon = {
-  args: {
-    ...Default.args,
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(SettingsIcon, null),
-      label: "Settings"
-    })
-  }
+const WithCustomIcon = {
+    args: {
+        ...Default.args,
+        icon: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Settings"
+        })
+    }
 };
-export const WithInfiniteDuration = {
-  args: {
-    ...Default.args,
-    duration: Infinity
-  }
+const WithInfiniteDuration = {
+    args: {
+        ...Default.args,
+        duration: 1 / 0
+    }
 };
-export const NotDismissible = {
-  args: {
-    ...Default.args,
-    dismissible: false
-  }
+const NotDismissible = {
+    args: {
+        ...Default.args,
+        dismissible: false
+    }
 };
-export const withCustomPosition = {
-  args: {
-    ...Default.args,
-    position: "bottom-right"
-  }
+const withCustomPosition = {
+    args: {
+        ...Default.args,
+        position: "bottom-right"
+    }
 };
-export const Documentation = {
-  args: {
-    title: "New entry created",
-    description: "Entry has been successfully created",
-    variant: "default",
-    position: "top-right",
-    duration: 6000,
-    dismissible: true,
-    actions: undefined,
-    icon: undefined
-  },
-  argTypes: {
-    title: {
-      description: "Please refer to the 'With Title Component' example below for details."
-    },
-    description: {
-      description: "Please refer to the 'With Description' and 'With Description Component' examples below for details."
-    },
-    variant: {
-      description: "Variant of the toast."
-    },
-    actions: {
-      description: "Please refer to the 'With Actions' example below for details."
-    },
-    icon: {
-      description: "Please refer to the 'With Custom Icon' example below for details."
-    },
-    duration: {
-      description: "Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.",
-      control: "number"
-    },
-    dismissible: {
-      description: "Please refer to the 'Not Dismissible' example below for details."
+const Documentation = {
+    args: {
+        title: "New entry created",
+        description: "Entry has been successfully created",
+        variant: "default",
+        position: "top-right",
+        duration: 6000,
+        dismissible: true,
+        actions: void 0,
+        icon: void 0
     },
-    position: {
-      description: "Please refer to the 'With Custom Position' example below for details.",
-      control: "select",
-      options: ["top-left", "top-right", "bottom-left", "bottom-right", "top-center", "bottom-center"]
+    argTypes: {
+        title: {
+            description: "Please refer to the 'With Title Component' example below for details."
+        },
+        description: {
+            description: "Please refer to the 'With Description' and 'With Description Component' examples below for details."
+        },
+        variant: {
+            description: "Variant of the toast."
+        },
+        actions: {
+            description: "Please refer to the 'With Actions' example below for details."
+        },
+        icon: {
+            description: "Please refer to the 'With Custom Icon' example below for details."
+        },
+        duration: {
+            description: "Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.",
+            control: "number"
+        },
+        dismissible: {
+            description: "Please refer to the 'Not Dismissible' example below for details."
+        },
+        position: {
+            description: "Please refer to the 'With Custom Position' example below for details.",
+            control: "select",
+            options: [
+                "top-left",
+                "top-right",
+                "bottom-left",
+                "bottom-right",
+                "top-center",
+                "bottom-center"
+            ]
+        }
     }
-  }
 };
+export default useToast_stories;
+export { Default, Documentation, NotDismissible, SubtleVariant, WithActions, WithCustomIcon, WithDescription, WithDescriptionAndActions, WithDescriptionComponent, WithInfiniteDuration, WithTitleComponent, withCustomPosition };
 
 //# sourceMappingURL=useToast.stories.js.map

package/Toast/useToast.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","SettingsIcon","Toast","useToast","Button","Icon","ToastComponent","props","lastToast","setLastToast","showToast","hideToast","hideAllToasts","createElement","Fragment","text","onClick","toast","meta","title","component","parameters","layout","argTypes","variant","control","options","decorators","Story","className","Provider","Default","args","SubtleVariant","WithTitleComponent","Title","WithDescription","description","WithDescriptionComponent","Description","WithActions","actions","Actions","key","console","log","WithDescriptionAndActions","WithCustomIcon","icon","label","WithInfiniteDuration","duration","Infinity","NotDismissible","dismissible","withCustomPosition","position","Documentation","undefined"],"sources":["useToast.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Toast } from \"./Toast.js\";\nimport { useToast, type ShowToastParams } from \"./useToast.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst ToastComponent = (props: ShowToastParams) => {\n    const [lastToast, setLastToast] = useState<string | number>(\"\");\n    const { showToast, hideToast, hideAllToasts } = useToast();\n    return (\n        <>\n            <Button\n                text={\"Show Toast\"}\n                onClick={() => {\n                    const toast = showToast(props);\n                    setLastToast(toast);\n                }}\n            />\n            <Button text={\"Hide latest toast\"} onClick={() => hideToast(lastToast)} />\n            <Button text={\"Hide all toasts\"} onClick={() => hideAllToasts()} />\n        </>\n    );\n};\n\nconst meta: Meta<ShowToastParams> = {\n    title: \"Components/Toast\",\n    component: ToastComponent,\n    parameters: {\n        layout: \"fullscreen\"\n    },\n    argTypes: {\n        variant: { control: \"select\", options: [\"default\", \"subtle\"] }\n    },\n    decorators: [\n        Story => (\n            <div className=\"w-full h-64 flex justify-center items-center gap-sm\">\n                <Story />\n                <Toast.Provider />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<ShowToastParams>;\n\nexport const Default: Story = {\n    args: {\n        title: \"New entry created\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    }\n};\n\nexport const WithTitleComponent: Story = {\n    args: {\n        title: <Toast.Title text={\"New entry created\"} />\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: 'Entry \"Article One\" has been successfully created'\n    }\n};\n\nexport const WithDescriptionComponent: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithDescriptionAndActions: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        ),\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Icon icon={<SettingsIcon />} label={\"Settings\"} />\n    }\n};\n\nexport const WithInfiniteDuration: Story = {\n    args: {\n        ...Default.args,\n        duration: Infinity\n    }\n};\n\nexport const NotDismissible: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const withCustomPosition: Story = {\n    args: {\n        ...Default.args,\n        position: \"bottom-right\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        title: \"New entry created\",\n        description: \"Entry has been successfully created\",\n        variant: \"default\",\n        position: \"top-right\",\n        duration: 6000,\n        dismissible: true,\n        actions: undefined,\n        icon: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Please refer to the 'With Title Component' example below for details.\"\n        },\n        description: {\n            description:\n                \"Please refer to the 'With Description' and 'With Description Component' examples below for details.\"\n        },\n        variant: {\n            description: \"Variant of the toast.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Actions' example below for details.\"\n        },\n        icon: {\n            description: \"Please refer to the 'With Custom Icon' example below for details.\"\n        },\n        duration: {\n            description:\n                \"Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.\",\n            control: \"number\"\n        },\n        dismissible: {\n            description: \"Please refer to the 'Not Dismissible' example below for details.\"\n        },\n        position: {\n            description: \"Please refer to the 'With Custom Position' example below for details.\",\n            control: \"select\",\n            options: [\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"top-center\",\n                \"bottom-center\"\n            ]\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,cAAc,IAAIC,YAAY,QAAQ,4BAA4B;AAE3E,SAASC,KAAK;AACd,SAASC,QAAQ;AACjB,SAASC,MAAM;AACf,SAASC,IAAI;AAEb,MAAMC,cAAc,GAAIC,KAAsB,IAAK;EAC/C,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGV,QAAQ,CAAkB,EAAE,CAAC;EAC/D,MAAM;IAAEW,SAAS;IAAEC,SAAS;IAAEC;EAAc,CAAC,GAAGT,QAAQ,CAAC,CAAC;EAC1D,oBACIL,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,qBACIhB,KAAA,CAAAe,aAAA,CAACT,MAAM;IACHW,IAAI,EAAE,YAAa;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX,MAAMC,KAAK,GAAGP,SAAS,CAACH,KAAK,CAAC;MAC9BE,YAAY,CAACQ,KAAK,CAAC;IACvB;EAAE,CACL,CAAC,eACFnB,KAAA,CAAAe,aAAA,CAACT,MAAM;IAACW,IAAI,EAAE,mBAAoB;IAACC,OAAO,EAAEA,CAAA,KAAML,SAAS,CAACH,SAAS;EAAE,CAAE,CAAC,eAC1EV,KAAA,CAAAe,aAAA,CAACT,MAAM;IAACW,IAAI,EAAE,iBAAkB;IAACC,OAAO,EAAEA,CAAA,KAAMJ,aAAa,CAAC;EAAE,CAAE,CACpE,CAAC;AAEX,CAAC;AAED,MAAMM,IAA2B,GAAG;EAChCC,KAAK,EAAE,kBAAkB;EACzBC,SAAS,EAAEd,cAAc;EACzBe,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,QAAQ,EAAE;IACNC,OAAO,EAAE;MAAEC,OAAO,EAAE,QAAQ;MAAEC,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ;IAAE;EACjE,CAAC;EACDC,UAAU,EAAE,CACRC,KAAK,iBACD9B,KAAA,CAAAe,aAAA;IAAKgB,SAAS,EAAC;EAAqD,gBAChE/B,KAAA,CAAAe,aAAA,CAACe,KAAK,MAAE,CAAC,eACT9B,KAAA,CAAAe,aAAA,CAACX,KAAK,CAAC4B,QAAQ,MAAE,CAChB,CACR;AAET,CAAC;AAED,eAAeZ,IAAI;AAInB,OAAO,MAAMa,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFb,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMc,aAAoB,GAAG;EAChCD,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfR,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMU,kBAAyB,GAAG;EACrCF,IAAI,EAAE;IACFb,KAAK,eAAErB,KAAA,CAAAe,aAAA,CAACX,KAAK,CAACiC,KAAK;MAACpB,IAAI,EAAE;IAAoB,CAAE;EACpD;AACJ,CAAC;AAED,OAAO,MAAMqB,eAAsB,GAAG;EAClCJ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfK,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,wBAA+B,GAAG;EAC3CN,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfK,WAAW,eACPvC,KAAA,CAAAe,aAAA,CAACX,KAAK,CAACqC,WAAW;MAACxB,IAAI,EAAE;IAAoD,CAAE;EAEvF;AACJ,CAAC;AAED,OAAO,MAAMyB,WAAkB,GAAG;EAC9BR,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfS,OAAO,eACH3C,KAAA,CAAAe,aAAA,CAACX,KAAK,CAACwC,OAAO,qBACV5C,KAAA,CAAAe,aAAA,CAACT,MAAM;MACHuC,GAAG,EAAE,UAAW;MAChB5B,IAAI,EAAE,eAAgB;MACtBC,OAAO,EAAEA,CAAA,KAAM4B,OAAO,CAACC,GAAG,CAAC,aAAa;IAAE,CAC7C,CAAC,eACF/C,KAAA,CAAAe,aAAA,CAACT,MAAM;MACHuC,GAAG,EAAE,UAAW;MAChB5B,IAAI,EAAE,SAAU;MAChBC,OAAO,EAAEA,CAAA,KAAM4B,OAAO,CAACC,GAAG,CAAC,SAAS,CAAE;MACtCrB,OAAO,EAAE;IAAY,CACxB,CACU;EAEvB;AACJ,CAAC;AAED,OAAO,MAAMsB,yBAAgC,GAAG;EAC5Cd,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfK,WAAW,eACPvC,KAAA,CAAAe,aAAA,CAACX,KAAK,CAACqC,WAAW;MAACxB,IAAI,EAAE;IAAoD,CAAE,CAClF;IACD0B,OAAO,eACH3C,KAAA,CAAAe,aAAA,CAACX,KAAK,CAACwC,OAAO,qBACV5C,KAAA,CAAAe,aAAA,CAACT,MAAM;MACHuC,GAAG,EAAE,UAAW;MAChB5B,IAAI,EAAE,eAAgB;MACtBC,OAAO,EAAEA,CAAA,KAAM4B,OAAO,CAACC,GAAG,CAAC,aAAa;IAAE,CAC7C,CAAC,eACF/C,KAAA,CAAAe,aAAA,CAACT,MAAM;MACHuC,GAAG,EAAE,UAAW;MAChB5B,IAAI,EAAE,SAAU;MAChBC,OAAO,EAAEA,CAAA,KAAM4B,OAAO,CAACC,GAAG,CAAC,SAAS,CAAE;MACtCrB,OAAO,EAAE;IAAY,CACxB,CACU;EAEvB;AACJ,CAAC;AAED,OAAO,MAAMuB,cAAqB,GAAG;EACjCf,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfgB,IAAI,eAAElD,KAAA,CAAAe,aAAA,CAACR,IAAI;MAAC2C,IAAI,eAAElD,KAAA,CAAAe,aAAA,CAACZ,YAAY,MAAE,CAAE;MAACgD,KAAK,EAAE;IAAW,CAAE;EAC5D;AACJ,CAAC;AAED,OAAO,MAAMC,oBAA2B,GAAG;EACvClB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfmB,QAAQ,EAAEC;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,cAAqB,GAAG;EACjCrB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfsB,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAyB,GAAG;EACrCvB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfwB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,aAAoB,GAAG;EAChCzB,IAAI,EAAE;IACFb,KAAK,EAAE,mBAAmB;IAC1BkB,WAAW,EAAE,qCAAqC;IAClDb,OAAO,EAAE,SAAS;IAClBgC,QAAQ,EAAE,WAAW;IACrBL,QAAQ,EAAE,IAAI;IACdG,WAAW,EAAE,IAAI;IACjBb,OAAO,EAAEiB,SAAS;IAClBV,IAAI,EAAEU;EACV,CAAC;EACDnC,QAAQ,EAAE;IACNJ,KAAK,EAAE;MACHkB,WAAW,EAAE;IACjB,CAAC;IACDA,WAAW,EAAE;MACTA,WAAW,EACP;IACR,CAAC;IACDb,OAAO,EAAE;MACLa,WAAW,EAAE;IACjB,CAAC;IACDI,OAAO,EAAE;MACLJ,WAAW,EAAE;IACjB,CAAC;IACDW,IAAI,EAAE;MACFX,WAAW,EAAE;IACjB,CAAC;IACDc,QAAQ,EAAE;MACNd,WAAW,EACP,mIAAmI;MACvIZ,OAAO,EAAE;IACb,CAAC;IACD6B,WAAW,EAAE;MACTjB,WAAW,EAAE;IACjB,CAAC;IACDmB,QAAQ,EAAE;MACNnB,WAAW,EAAE,uEAAuE;MACpFZ,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CACL,UAAU,EACV,WAAW,EACX,aAAa,EACb,cAAc,EACd,YAAY,EACZ,eAAe;IAEvB;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Toast/useToast.stories.js","sources":["../../src/Toast/useToast.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Toast } from \"./Toast.js\";\nimport { useToast, type ShowToastParams } from \"./useToast.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nconst ToastComponent = (props: ShowToastParams) => {\n    const [lastToast, setLastToast] = useState<string | number>(\"\");\n    const { showToast, hideToast, hideAllToasts } = useToast();\n    return (\n        <>\n            <Button\n                text={\"Show Toast\"}\n                onClick={() => {\n                    const toast = showToast(props);\n                    setLastToast(toast);\n                }}\n            />\n            <Button text={\"Hide latest toast\"} onClick={() => hideToast(lastToast)} />\n            <Button text={\"Hide all toasts\"} onClick={() => hideAllToasts()} />\n        </>\n    );\n};\n\nconst meta: Meta<ShowToastParams> = {\n    title: \"Components/Toast\",\n    component: ToastComponent,\n    parameters: {\n        layout: \"fullscreen\"\n    },\n    argTypes: {\n        variant: { control: \"select\", options: [\"default\", \"subtle\"] }\n    },\n    decorators: [\n        Story => (\n            <div className=\"w-full h-64 flex justify-center items-center gap-sm\">\n                <Story />\n                <Toast.Provider />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<ShowToastParams>;\n\nexport const Default: Story = {\n    args: {\n        title: \"New entry created\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    }\n};\n\nexport const WithTitleComponent: Story = {\n    args: {\n        title: <Toast.Title text={\"New entry created\"} />\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: 'Entry \"Article One\" has been successfully created'\n    }\n};\n\nexport const WithDescriptionComponent: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        )\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithDescriptionAndActions: Story = {\n    args: {\n        ...Default.args,\n        description: (\n            <Toast.Description text={'Entry \"Article One\" has been successfully created'} />\n        ),\n        actions: (\n            <Toast.Actions>\n                <Button\n                    key={\"action-1\"}\n                    text={\"Do the action\"}\n                    onClick={() => console.log(\"doTheAction\")}\n                />\n                <Button\n                    key={\"action-2\"}\n                    text={\"Dismiss\"}\n                    onClick={() => console.log(\"dismiss\")}\n                    variant={\"secondary\"}\n                />\n            </Toast.Actions>\n        )\n    }\n};\n\nexport const WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Icon icon={<SettingsIcon />} label={\"Settings\"} />\n    }\n};\n\nexport const WithInfiniteDuration: Story = {\n    args: {\n        ...Default.args,\n        duration: Infinity\n    }\n};\n\nexport const NotDismissible: Story = {\n    args: {\n        ...Default.args,\n        dismissible: false\n    }\n};\n\nexport const withCustomPosition: Story = {\n    args: {\n        ...Default.args,\n        position: \"bottom-right\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        title: \"New entry created\",\n        description: \"Entry has been successfully created\",\n        variant: \"default\",\n        position: \"top-right\",\n        duration: 6000,\n        dismissible: true,\n        actions: undefined,\n        icon: undefined\n    },\n    argTypes: {\n        title: {\n            description: \"Please refer to the 'With Title Component' example below for details.\"\n        },\n        description: {\n            description:\n                \"Please refer to the 'With Description' and 'With Description Component' examples below for details.\"\n        },\n        variant: {\n            description: \"Variant of the toast.\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Actions' example below for details.\"\n        },\n        icon: {\n            description: \"Please refer to the 'With Custom Icon' example below for details.\"\n        },\n        duration: {\n            description:\n                \"Duration in milliseconds before the toast auto-dismisses. Please refer to the 'With Infinite Duration' example below for details.\",\n            control: \"number\"\n        },\n        dismissible: {\n            description: \"Please refer to the 'Not Dismissible' example below for details.\"\n        },\n        position: {\n            description: \"Please refer to the 'With Custom Position' example below for details.\",\n            control: \"select\",\n            options: [\n                \"top-left\",\n                \"top-right\",\n                \"bottom-left\",\n                \"bottom-right\",\n                \"top-center\",\n                \"bottom-center\"\n            ]\n        }\n    }\n};\n"],"names":["ToastComponent","props","lastToast","setLastToast","useState","showToast","hideToast","hideAllToasts","useToast","Button","toast","meta","Story","Toast","Default","SubtleVariant","WithTitleComponent","WithDescription","WithDescriptionComponent","WithActions","console","WithDescriptionAndActions","WithCustomIcon","Icon","SettingsIcon","WithInfiniteDuration","Infinity","NotDismissible","withCustomPosition","Documentation","undefined"],"mappings":"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"}

package/Toggle/Toggle.d.ts

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

package/Toggle/Toggle.js

@@ -0,0 +1,27 @@
+import react, { useMemo } from "react";
+import { makeDecoratable } from "../utils.js";
+import { TogglePrimitive } from "./primitives/index.js";
+import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableToggle = ({ note, validation, ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(TogglePrimitive, {
+        ...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 Toggle = makeDecoratable("Toggle", DecoratableToggle);
+export { Toggle };
+
+//# sourceMappingURL=Toggle.js.map

package/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle/Toggle.js","sources":["../../src/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { TogglePrimitiveProps } from \"./primitives/index.js\";\nimport { TogglePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport { FormComponentErrorMessage, FormComponentNote } from \"~/FormComponent/index.js\";\n\ntype ToggleProps = TogglePrimitiveProps & FormComponentProps;\n\nconst DecoratableToggle = ({ note, validation, ...props }: ToggleProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"w-full\"}>\n            <TogglePrimitive {...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 Toggle = makeDecoratable(\"Toggle\", DecoratableToggle);\n\nexport { Toggle };\n"],"names":["DecoratableToggle","note","validation","props","validationIsValid","validationMessage","invalid","useMemo","TogglePrimitive","FormComponentErrorMessage","FormComponentNote","Toggle","makeDecoratable"],"mappings":";;;;AASA,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGC,OAAoB;IAClE,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACI,iBAAeA;QAAE,GAAGL,KAAK;QAAE,UAAUA,MAAM,QAAQ;sBACpD,oBAACM,2BAAyBA;QACtB,MAAMJ;QACN,SAASC;QACT,UAAUH,MAAM,QAAQ;sBAE5B,oBAACO,mBAAiBA;QAAC,MAAMT;QAAM,UAAUE,MAAM,QAAQ;;AAGnE;AAEA,MAAMQ,SAASC,gBAAgB,UAAUZ"}

package/Toggle/Toggle.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Toggle } from "../Toggle/index.js";
+declare const meta: Meta<typeof Toggle>;
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const WithIcon: Story;
+export declare const WithIconChecked: Story;
+export declare const IconOnly: Story;
+export declare const IconOnlyChecked: Story;
+export declare const Outline: Story;
+export declare const Ghost: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const Documentation: Story;