@webiny/admin-ui 0.0.0-unstable.6844005670 → 0.0.0-unstable.7be00a75a9

package/Dialog/Dialog.stories.js

@@ -1,373 +1,416 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { Dialog } from "./Dialog.js";
 import { Button } from "../Button/index.js";
 import { DropdownMenu } from "../DropdownMenu/index.js";
-import { ReactComponent as NotificationIcon } from "@webiny/icons/notifications_active.svg";
+import { ReactComponent } from "@webiny/icons/notifications_active.svg";
 import { Tabs } from "../Tabs/index.js";
 import { IconPicker } from "../IconPicker/index.js";
-
-// @ts-expect-error
 library.add(fas);
 const meta = {
-  title: "Components/Dialog",
-  component: Dialog,
-  argTypes: {}
+    title: "Components/Dialog",
+    component: Dialog,
+    argTypes: {}
 };
-export default meta;
-export const Default = {
-  args: {
-    size: "md",
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    title: "Dialog Title",
-    description: "A short dialog description.",
-    info: /*#__PURE__*/React.createElement(React.Fragment, null, "Learn more about this ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "here"), "."),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "The amazing, splendid, and most useful umbrella, resistant to rain and friendly to winds, is something that deserves all admiration. Crafted with perfect textures, it bravely withstands storms and gently shades the rays of the sun. A remarkable innovation, with an ergonomically designed grip most suited to the hand, it remains stable even in the fiercest weather."),
-    onOpenChange: opened => {
-      console.log(`Dialog is ${opened ? "opened" : "closed"}.`);
+const Dialog_stories = meta;
+const Default = {
+    args: {
+        size: "md",
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        title: "Dialog Title",
+        description: "A short dialog description.",
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null, "Learn more about this ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "here"), "."),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "The amazing, splendid, and most useful umbrella, resistant to rain and friendly to winds, is something that deserves all admiration. Crafted with perfect textures, it bravely withstands storms and gently shades the rays of the sun. A remarkable innovation, with an ergonomically designed grip most suited to the hand, it remains stable even in the fiercest weather."),
+        onOpenChange: (opened)=>{
+            console.log(`Dialog is ${opened ? "opened" : "closed"}.`);
+        },
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, null), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, null))
     },
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, null), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, null))
-  },
-  argTypes: {}
+    argTypes: {}
 };
-export const SizeSmall = {
-  args: {
-    ...Default.args,
-    size: "sm"
-  }
+const SizeSmall = {
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
 };
-export const SizeMedium = {
-  args: {
-    ...Default.args,
-    size: "md"
-  }
+const SizeMedium = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
 };
-export const SizeLarge = {
-  args: {
-    ...Default.args,
-    size: "lg"
-  }
+const SizeLarge = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
 };
-export const SizeExtraLarge = {
-  args: {
-    ...Default.args,
-    size: "xl"
-  }
+const SizeExtraLarge = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
 };
-export const SizeFullScreen = {
-  args: {
-    ...Default.args,
-    size: "full"
-  }
+const SizeFullScreen = {
+    args: {
+        ...Default.args,
+        size: "full"
+    }
 };
-export const ControlledVisibility = {
-  render: props => {
-    const [open, setOpen] = React.useState(false);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open",
-      onClick: () => setOpen(true)
-    }), /*#__PURE__*/React.createElement(Dialog, Object.assign({}, props, {
-      open: open,
-      onOpenChange: open => {
-        if (!open) {
-          setOpen(false);
+const ControlledVisibility = {
+    render: (props)=>{
+        const [open, setOpen] = react.useState(false);
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open",
+            onClick: ()=>setOpen(true)
+        }), /*#__PURE__*/ react.createElement(Dialog, {
+            ...props,
+            open: open,
+            onOpenChange: (open)=>{
+                if (!open) setOpen(false);
+            }
+        }));
+    },
+    args: {
+        ...Default.args,
+        trigger: null
+    }
+};
+const WithOpenCloseEventHandler = {
+    args: {
+        ...Default.args,
+        onClose: ()=>{
+            console.log("onClose triggered");
+        },
+        onOpen: ()=>{
+            console.log("onOpen triggered");
         }
-      }
-    })));
-  },
-  args: {
-    ...Default.args,
-    trigger: null
-  }
+    }
 };
-export const WithOpenCloseEventHandler = {
-  args: {
-    ...Default.args,
-    onClose: () => {
-      console.log("onClose triggered");
+const WithDropdownMenu = {
+    render: (props)=>{
+        const [open, setOpen] = react.useState(false);
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu, {
+            trigger: /*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Open"
+            })
+        }, /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            text: "Open Dialog",
+            content: "Open Dialog",
+            onClick: ()=>setOpen(true)
+        })), /*#__PURE__*/ react.createElement(Dialog, {
+            ...props,
+            open: open,
+            onOpenChange: ()=>setOpen(false)
+        }));
     },
-    onOpen: () => {
-      console.log("onOpen triggered");
+    args: {
+        ...Default.args,
+        trigger: null
     }
-  }
 };
-export const WithDropdownMenu = {
-  render: props => {
-    const [open, setOpen] = React.useState(false);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
-        text: "Open"
-      })
-    }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      text: "Open Dialog",
-      content: "Open Dialog",
-      onClick: () => setOpen(true)
-    })), /*#__PURE__*/React.createElement(Dialog, Object.assign({}, props, {
-      open: open,
-      onOpenChange: () => setOpen(false)
-    })));
-  },
-  args: {
-    ...Default.args,
-    trigger: null
-  }
-};
-export const WithoutCloseButton = {
-  args: {
-    ...Default.args,
-    showCloseButton: false
-  }
+const WithoutCloseButton = {
+    args: {
+        ...Default.args,
+        showCloseButton: false
+    }
 };
-export const AlertDialog = {
-  args: {
-    ...Default.args,
-    info: null,
-    showCloseButton: false,
-    title: "Confirm Action",
-    description: "Are you sure you want to delete this item?",
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "This action cannot be undone."), /*#__PURE__*/React.createElement("p", null, "Deleted items cannot be recovered."))
-  }
+const AlertDialog = {
+    args: {
+        ...Default.args,
+        info: null,
+        showCloseButton: false,
+        title: "Confirm Action",
+        description: "Are you sure you want to delete this item?",
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("p", null, "This action cannot be undone."), /*#__PURE__*/ react.createElement("p", null, "Deleted items cannot be recovered."))
+    }
 };
-export const DropdownMenuInDialog = {
-  args: {
-    ...Default.args,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenu, {
-      trigger: /*#__PURE__*/React.createElement(Button, {
-        variant: "primary",
-        text: "Open"
-      })
-    }, /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      text: "Billing"
-    }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      text: "Settings"
-    }), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      text: "Keyboard shortcuts"
-    })))
-  }
+const DropdownMenuInDialog = {
+    args: {
+        ...Default.args,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(DropdownMenu, {
+            trigger: /*#__PURE__*/ react.createElement(Button, {
+                variant: "primary",
+                text: "Open"
+            })
+        }, /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            text: "Billing"
+        }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            text: "Settings"
+        }), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            text: "Keyboard shortcuts"
+        })))
+    }
 };
-export const DropdownIconPickerInDialog = {
-  args: {
-    ...Default.args
-  },
-  render: args => {
-    const [value, setValue] = useState("");
-    return /*#__PURE__*/React.createElement(Dialog, args, /*#__PURE__*/React.createElement(IconPicker, {
-      icons: [{
-        prefix: "fas",
-        name: "trash-restore-alt"
-      }, {
-        prefix: "fas",
-        name: "trash-can-arrow-up"
-      }, {
-        prefix: "fas",
-        name: "naira-sign"
-      }, {
-        prefix: "fas",
-        name: "cart-arrow-down"
-      }, {
-        prefix: "fas",
-        name: "walkie-talkie"
-      }, {
-        prefix: "fas",
-        name: "file-edit"
-      }, {
-        prefix: "fas",
-        name: "file-pen"
-      }, {
-        prefix: "fas",
-        name: "receipt"
-      }, {
-        prefix: "fas",
-        name: "pen-square"
-      }, {
-        prefix: "fas",
-        name: "pencil-square"
-      }, {
-        prefix: "fas",
-        name: "square-pen"
-      }, {
-        prefix: "fas",
-        name: "suitcase-rolling"
-      }, {
-        prefix: "fas",
-        name: "person-circle-exclamation"
-      }, {
-        prefix: "fas",
-        name: "chevron-down"
-      }, {
-        prefix: "fas",
-        name: "battery"
-      }, {
-        prefix: "fas",
-        name: "battery-5"
-      }, {
-        prefix: "fas",
-        name: "battery-full"
-      }, {
-        prefix: "fas",
-        name: "skull-crossbones"
-      }, {
-        prefix: "fas",
-        name: "code-compare"
-      }, {
-        prefix: "fas",
-        name: "list-dots"
-      }, {
-        prefix: "fas",
-        name: "list-ul"
-      }, {
-        prefix: "fas",
-        name: "school-lock"
-      }, {
-        prefix: "fas",
-        name: "tower-cell"
-      }, {
-        prefix: "fas",
-        name: "long-arrow-alt-down"
-      }, {
-        prefix: "fas",
-        name: "down-long"
-      }, {
-        prefix: "fas",
-        name: "ranking-star"
-      }, {
-        prefix: "fas",
-        name: "chess-king"
-      }, {
-        prefix: "fas",
-        name: "person-harassing"
-      }, {
-        prefix: "fas",
-        name: "brazilian-real-sign"
-      }, {
-        prefix: "fas",
-        name: "landmark-alt"
-      }],
-      value: value,
-      onChange: value => {
-        console.log("Selected icon:", value);
-        setValue(value);
-      }
-    }));
-  }
+const DropdownIconPickerInDialog = {
+    args: {
+        ...Default.args
+    },
+    render: (args)=>{
+        const [value, setValue] = useState("");
+        return /*#__PURE__*/ react.createElement(Dialog, args, /*#__PURE__*/ react.createElement(IconPicker, {
+            icons: [
+                {
+                    prefix: "fas",
+                    name: "trash-restore-alt"
+                },
+                {
+                    prefix: "fas",
+                    name: "trash-can-arrow-up"
+                },
+                {
+                    prefix: "fas",
+                    name: "naira-sign"
+                },
+                {
+                    prefix: "fas",
+                    name: "cart-arrow-down"
+                },
+                {
+                    prefix: "fas",
+                    name: "walkie-talkie"
+                },
+                {
+                    prefix: "fas",
+                    name: "file-edit"
+                },
+                {
+                    prefix: "fas",
+                    name: "file-pen"
+                },
+                {
+                    prefix: "fas",
+                    name: "receipt"
+                },
+                {
+                    prefix: "fas",
+                    name: "pen-square"
+                },
+                {
+                    prefix: "fas",
+                    name: "pencil-square"
+                },
+                {
+                    prefix: "fas",
+                    name: "square-pen"
+                },
+                {
+                    prefix: "fas",
+                    name: "suitcase-rolling"
+                },
+                {
+                    prefix: "fas",
+                    name: "person-circle-exclamation"
+                },
+                {
+                    prefix: "fas",
+                    name: "chevron-down"
+                },
+                {
+                    prefix: "fas",
+                    name: "battery"
+                },
+                {
+                    prefix: "fas",
+                    name: "battery-5"
+                },
+                {
+                    prefix: "fas",
+                    name: "battery-full"
+                },
+                {
+                    prefix: "fas",
+                    name: "skull-crossbones"
+                },
+                {
+                    prefix: "fas",
+                    name: "code-compare"
+                },
+                {
+                    prefix: "fas",
+                    name: "list-dots"
+                },
+                {
+                    prefix: "fas",
+                    name: "list-ul"
+                },
+                {
+                    prefix: "fas",
+                    name: "school-lock"
+                },
+                {
+                    prefix: "fas",
+                    name: "tower-cell"
+                },
+                {
+                    prefix: "fas",
+                    name: "long-arrow-alt-down"
+                },
+                {
+                    prefix: "fas",
+                    name: "down-long"
+                },
+                {
+                    prefix: "fas",
+                    name: "ranking-star"
+                },
+                {
+                    prefix: "fas",
+                    name: "chess-king"
+                },
+                {
+                    prefix: "fas",
+                    name: "person-harassing"
+                },
+                {
+                    prefix: "fas",
+                    name: "brazilian-real-sign"
+                },
+                {
+                    prefix: "fas",
+                    name: "landmark-alt"
+                }
+            ],
+            value: value,
+            onChange: (value)=>{
+                console.log("Selected icon:", value);
+                setValue(value);
+            }
+        }));
+    }
 };
-export const WithIcon = {
-  args: {
-    ...Default.args,
-    icon: /*#__PURE__*/React.createElement(Dialog.Icon, {
-      icon: /*#__PURE__*/React.createElement(NotificationIcon, null),
-      label: "Title icon"
-    })
-  }
+const WithIcon = {
+    args: {
+        ...Default.args,
+        icon: /*#__PURE__*/ react.createElement(Dialog.Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Title icon"
+        })
+    }
 };
-export const PreventOutsideDismiss = {
-  args: {
-    ...Default.args,
-    dismissible: false
-  }
+const PreventOutsideDismiss = {
+    args: {
+        ...Default.args,
+        dismissible: false
+    }
 };
-export const WithTabs = {
-  args: {
-    ...Default.args,
-    bodyPadding: false,
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, {
-      separator: true,
-      spacing: "lg",
-      tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "account",
-        value: "account",
-        trigger: "Account",
-        content: "Make changes to your account here."
-      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "company",
-        value: "company",
-        trigger: "Company",
-        content: "Make changes to your company info here."
-      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "security",
-        value: "security",
-        trigger: "Security",
-        content: "Make changes to your security settings here."
-      }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-        key: "development",
-        value: "development",
-        trigger: "Development",
-        content: "Make changes to your development settings here."
-      })]
-    }))
-  }
+const WithTabs = {
+    args: {
+        ...Default.args,
+        bodyPadding: false,
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Tabs, {
+            separator: true,
+            spacing: "lg",
+            tabs: [
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "account",
+                    value: "account",
+                    trigger: "Account",
+                    content: "Make changes to your account here."
+                }),
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "company",
+                    value: "company",
+                    trigger: "Company",
+                    content: "Make changes to your company info here."
+                }),
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "security",
+                    value: "security",
+                    trigger: "Security",
+                    content: "Make changes to your security settings here."
+                }),
+                /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                    key: "development",
+                    value: "development",
+                    trigger: "Development",
+                    content: "Make changes to your development settings here."
+                })
+            ]
+        }))
+    }
 };
-export const Documentation = {
-  render: args => {
-    const [open, setOpen] = useState(false);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open Dialog",
-      onClick: () => setOpen(true)
-    }), /*#__PURE__*/React.createElement(Dialog, Object.assign({}, args, {
-      open: open,
-      onOpenChange: open => setOpen(open)
-    })));
-  },
-  args: {
-    title: "Dialog Title",
-    description: "A short dialog description.",
-    showCloseButton: true,
-    dismissible: true,
-    bodyPadding: true,
-    info: /*#__PURE__*/React.createElement(React.Fragment, null, "Learn more about this ", /*#__PURE__*/React.createElement("a", {
-      href: "#"
-    }, "here"), "."),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is the dialog content area. You can place any content here including forms, text, images, or other components."),
-    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, null), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, null))
-  },
-  argTypes: {
-    title: {
-      description: "Title displayed in the header",
-      control: "text"
-    },
-    description: {
-      description: "Description displayed below the title",
-      control: "text"
+const Documentation = {
+    render: (args)=>{
+        const [open, setOpen] = useState(false);
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open Dialog",
+            onClick: ()=>setOpen(true)
+        }), /*#__PURE__*/ react.createElement(Dialog, {
+            ...args,
+            open: open,
+            onOpenChange: (open)=>setOpen(open)
+        }));
     },
-    size: {
-      description: "Controls the size of the dialog",
-      control: "select",
-      options: ["sm", "md", "lg", "xl", "full"]
+    args: {
+        title: "Dialog Title",
+        description: "A short dialog description.",
+        showCloseButton: true,
+        dismissible: true,
+        bodyPadding: true,
+        info: /*#__PURE__*/ react.createElement(react.Fragment, null, "Learn more about this ", /*#__PURE__*/ react.createElement("a", {
+            href: "#"
+        }, "here"), "."),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, "This is the dialog content area. You can place any content here including forms, text, images, or other components."),
+        actions: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Dialog.CancelAction, null), /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, null))
     },
-    showCloseButton: {
-      description: "Show close button, please refer to the 'Without Close Button' example below for details.",
-      control: "boolean",
-      defaultValue: true
-    },
-    dismissible: {
-      description: "Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.",
-      control: "boolean",
-      defaultValue: true
-    },
-    bodyPadding: {
-      description: "Add padding to the Dialog body.",
-      control: "boolean",
-      defaultValue: true
-    },
-    info: {
-      description: "Additional info displayed below the description, please refer to the example below for details."
-    },
-    children: {
-      description: "Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details."
-    },
-    actions: {
-      description: "Actions displayed in the footer, please refer to the code example for details."
+    argTypes: {
+        title: {
+            description: "Title displayed in the header",
+            control: "text"
+        },
+        description: {
+            description: "Description displayed below the title",
+            control: "text"
+        },
+        size: {
+            description: "Controls the size of the dialog",
+            control: "select",
+            options: [
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "full"
+            ]
+        },
+        showCloseButton: {
+            description: "Show close button, please refer to the 'Without Close Button' example below for details.",
+            control: "boolean",
+            defaultValue: true
+        },
+        dismissible: {
+            description: "Allow dialog to be dismissed by clicking outside or pressing Escape, please refer to the 'Prevent Outside Dismiss' example below for details.",
+            control: "boolean",
+            defaultValue: true
+        },
+        bodyPadding: {
+            description: "Add padding to the Dialog body.",
+            control: "boolean",
+            defaultValue: true
+        },
+        info: {
+            description: "Additional info displayed below the description, please refer to the example below for details."
+        },
+        children: {
+            description: "Content of the dialog, please refer to the 'With Dropdown Menu' and ''With Tabs' example below for details."
+        },
+        actions: {
+            description: "Actions displayed in the footer, please refer to the code example for details."
+        }
     }
-  }
 };
+export default Dialog_stories;
+export { AlertDialog, ControlledVisibility, Default, Documentation, DropdownIconPickerInDialog, DropdownMenuInDialog, PreventOutsideDismiss, SizeExtraLarge, SizeFullScreen, SizeLarge, SizeMedium, SizeSmall, WithDropdownMenu, WithIcon, WithOpenCloseEventHandler, WithTabs, WithoutCloseButton };
 
 //# sourceMappingURL=Dialog.stories.js.map