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

package/FilePicker/FilePicker.stories.js

@@ -1,326 +1,329 @@
-import React, { useState, useEffect } from "react";
+import react, { useEffect, useState } from "react";
 import { FilePicker } from "./index.js";
-const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-const getFile = () => {
-  const width = getRandomNumber(500, 2000); // Random width between 500 and 2000
-  const height = getRandomNumber(500, 2000); // Random height between 500 and 2000
-  const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB
-
-  return {
-    name: "selected-file.jpg",
-    mimeType: "image/jpeg",
-    size: fileSize,
-    url: `https://picsum.photos/${width}/${height}`
-  };
+const getRandomNumber = (min, max)=>Math.floor(Math.random() * (max - min + 1)) + min;
+const getFile = ()=>{
+    const width = getRandomNumber(500, 2000);
+    const height = getRandomNumber(500, 2000);
+    const fileSize = getRandomNumber(500000, 5000000);
+    return {
+        name: "selected-file.jpg",
+        mimeType: "image/jpeg",
+        size: fileSize,
+        url: `https://picsum.photos/${width}/${height}`
+    };
 };
 const meta = {
-  title: "Components/Form/FilePicker",
-  component: FilePicker,
-  argTypes: {
-    onSelectItem: {
-      action: "onSelectItem"
-    },
-    onEditItem: {
-      action: "onEditItem"
+    title: "Components/Form/FilePicker",
+    component: FilePicker,
+    argTypes: {
+        onSelectItem: {
+            action: "onSelectItem"
+        },
+        onEditItem: {
+            action: "onEditItem"
+        },
+        onRemoveItem: {
+            action: "onRemoveItem"
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false
+        }
     },
-    onRemoveItem: {
-      action: "onRemoveItem"
+    parameters: {
+        layout: "padded"
     },
-    disabled: {
-      control: "boolean",
-      defaultValue: false
+    render: (args)=>{
+        const [selectedFile, setSelectedFile] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            value: selectedFile,
+            onSelectItem: ()=>setSelectedFile(getFile()),
+            onRemoveItem: ()=>setSelectedFile(null),
+            onEditItem: ()=>alert("Editing File")
+        });
     }
-  },
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [selectedFile, setSelectedFile] = useState(args.value);
-    return /*#__PURE__*/React.createElement(FilePicker, Object.assign({}, args, {
-      value: selectedFile,
-      onSelectItem: () => setSelectedFile(getFile()),
-      onRemoveItem: () => setSelectedFile(null),
-      onEditItem: () => alert(`Editing File`)
-    }));
-  }
 };
-export default meta;
-export const Default = {};
-export const AreaType = {
-  args: {
-    ...Default.args,
-    type: "area"
-  }
+const FilePicker_stories = meta;
+const Default = {};
+const AreaType = {
+    args: {
+        ...Default.args,
+        type: "area"
+    }
 };
-export const AreaWithLabel = {
-  args: {
-    ...AreaType.args,
-    label: "Any field label"
-  }
+const AreaWithLabel = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label"
+    }
 };
-export const AreaWithLabelRequired = {
-  args: {
-    ...AreaType.args,
-    label: "Any field label",
-    required: true
-  }
+const AreaWithLabelRequired = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const AreaWithDescription = {
-  args: {
-    ...AreaType.args,
-    description: "Provide the required information for processing your request."
-  }
+const AreaWithDescription = {
+    args: {
+        ...AreaType.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const AreaWithNotes = {
-  args: {
-    ...AreaType.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const AreaWithNotes = {
+    args: {
+        ...AreaType.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const AreaWithErrors = {
-  args: {
-    ...AreaType.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const AreaWithErrors = {
+    args: {
+        ...AreaType.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const AreaDisabled = {
-  args: {
-    ...AreaType.args,
-    label: "Any field label",
-    disabled: true
-  }
+const AreaDisabled = {
+    args: {
+        ...AreaType.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const AreaWithValidateFunction = {
-  args: {
-    ...AreaType.args
-  },
-  render: args => {
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: undefined
-    });
-    const validate = async () => {
-      setValidation({
-        isValid: false,
-        message: "Any custom error message."
-      });
-    };
-    return /*#__PURE__*/React.createElement(FilePicker, Object.assign({}, args, {
-      validate: validate,
-      validation: validation
-    }));
-  }
+const AreaWithValidateFunction = {
+    args: {
+        ...AreaType.args
+    },
+    render: (args)=>{
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: void 0
+        });
+        const validate = async ()=>{
+            setValidation({
+                isValid: false,
+                message: "Any custom error message."
+            });
+        };
+        return /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            validate: validate,
+            validation: validation
+        });
+    }
 };
-export const AreaFullExample = {
-  args: {
-    ...AreaType.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."
+const AreaFullExample = {
+    args: {
+        ...AreaType.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 Compact = {
-  args: {
-    ...Default.args,
-    type: "compact"
-  }
+const Compact = {
+    args: {
+        ...Default.args,
+        type: "compact"
+    }
 };
-export const CompactWithLabel = {
-  args: {
-    ...Compact.args,
-    label: "Any field label"
-  }
+const CompactWithLabel = {
+    args: {
+        ...Compact.args,
+        label: "Any field label"
+    }
 };
-export const CompactWithLabelRequired = {
-  args: {
-    ...Compact.args,
-    label: "Any field label",
-    required: true
-  }
+const CompactWithLabelRequired = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        required: true
+    }
 };
-export const CompactWithDescription = {
-  args: {
-    ...Compact.args,
-    description: "Provide the required information for processing your request."
-  }
+const CompactWithDescription = {
+    args: {
+        ...Compact.args,
+        description: "Provide the required information for processing your request."
+    }
 };
-export const CompactWithNotes = {
-  args: {
-    ...Compact.args,
-    note: "Note: Ensure your selection or input is accurate before proceeding."
-  }
+const CompactWithNotes = {
+    args: {
+        ...Compact.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
 };
-export const CompactWithErrors = {
-  args: {
-    ...Compact.args,
-    validation: {
-      isValid: false,
-      message: "This field is required."
+const CompactWithErrors = {
+    args: {
+        ...Compact.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
     }
-  }
 };
-export const CompactDisabled = {
-  args: {
-    ...Compact.args,
-    label: "Any field label",
-    disabled: true
-  }
+const CompactDisabled = {
+    args: {
+        ...Compact.args,
+        label: "Any field label",
+        disabled: true
+    }
 };
-export const CompactWithValidateFunction = {
-  args: {
-    ...Compact.args
-  },
-  render: args => {
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: undefined
-    });
-    const validate = async () => {
-      setValidation({
-        isValid: false,
-        message: "Any custom error message."
-      });
-    };
-    return /*#__PURE__*/React.createElement(FilePicker, Object.assign({}, args, {
-      validate: validate,
-      validation: validation
-    }));
-  }
+const CompactWithValidateFunction = {
+    args: {
+        ...Compact.args
+    },
+    render: (args)=>{
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: void 0
+        });
+        const validate = async ()=>{
+            setValidation({
+                isValid: false,
+                message: "Any custom error message."
+            });
+        };
+        return /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            validate: validate,
+            validation: validation
+        });
+    }
 };
-export const CompactFullExample = {
-  args: {
-    ...Compact.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."
+const CompactFullExample = {
+    args: {
+        ...Compact.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 [selectedFile, setSelectedFile] = useState(args.value);
-    const [validation, setValidation] = useState({
-      isValid: true,
-      message: ""
-    });
-
-    // Update value when args.value changes
-    useEffect(() => {
-      setSelectedFile(args.value);
-    }, [args.value]);
-    const handleSelect = () => {
-      setSelectedFile(getFile());
-      setValidation({
-        isValid: true,
-        message: ""
-      });
-    };
-    const handleEdit = file => {
-      if (file) {
-        console.log("Editing file:", file);
-        alert(`Editing File: ${file.name}`);
-      }
-    };
-    const handleRemove = () => {
-      setSelectedFile(null);
-      if (args.required) {
-        setValidation({
-          isValid: false,
-          message: "Please select a file"
-        });
-      }
-    };
-
-    // Validate on required change or value change
-    useEffect(() => {
-      if (args.required && !selectedFile) {
-        setValidation({
-          isValid: false,
-          message: "Please select a file"
+const Documentation = {
+    render: (args)=>{
+        const [selectedFile, setSelectedFile] = useState(args.value);
+        const [validation, setValidation] = useState({
+            isValid: true,
+            message: ""
         });
-      } else {
-        setValidation({
-          isValid: true,
-          message: ""
+        useEffect(()=>{
+            setSelectedFile(args.value);
+        }, [
+            args.value
+        ]);
+        const handleSelect = ()=>{
+            setSelectedFile(getFile());
+            setValidation({
+                isValid: true,
+                message: ""
+            });
+        };
+        const handleEdit = (file)=>{
+            if (file) {
+                console.log("Editing file:", file);
+                alert(`Editing File: ${file.name}`);
+            }
+        };
+        const handleRemove = ()=>{
+            setSelectedFile(null);
+            if (args.required) setValidation({
+                isValid: false,
+                message: "Please select a file"
+            });
+        };
+        useEffect(()=>{
+            args.required && !selectedFile ? setValidation({
+                isValid: false,
+                message: "Please select a file"
+            }) : setValidation({
+                isValid: true,
+                message: ""
+            });
+        }, [
+            args.required,
+            selectedFile
+        ]);
+        return /*#__PURE__*/ react.createElement(FilePicker, {
+            ...args,
+            value: selectedFile,
+            onSelectItem: handleSelect,
+            onRemoveItem: handleRemove,
+            onEditItem: handleEdit,
+            validation: validation
         });
-      }
-    }, [args.required, selectedFile]);
-    return /*#__PURE__*/React.createElement(FilePicker, Object.assign({}, args, {
-      value: selectedFile,
-      onSelectItem: handleSelect,
-      onRemoveItem: handleRemove,
-      onEditItem: handleEdit,
-      validation: validation
-    }));
-  },
-  args: {
-    label: "Upload Image",
-    required: true,
-    disabled: false,
-    description: "Select a file to upload (JPG, PNG, PDF)",
-    note: "Note: Maximum file size is 5MB",
-    type: "area",
-    value: null,
-    validation: undefined,
-    onSelectItem: undefined,
-    onEditItem: undefined,
-    onRemoveItem: undefined
-  },
-  argTypes: {
-    label: {
-      description: "Label text for the file picker",
-      control: "text"
-    },
-    required: {
-      description: "Makes the field required when set to true",
-      control: "boolean"
-    },
-    disabled: {
-      description: "Disables the file picker when set to true",
-      control: "boolean"
-    },
-    description: {
-      description: "Additional description text below the field",
-      control: "text"
-    },
-    note: {
-      description: "Additional note text below the field",
-      control: "text"
-    },
-    type: {
-      description: "The visual style of the file picker",
-      control: "radio",
-      options: ["area", "compact"]
-    },
-    value: {
-      description: "The currently selected file",
-      control: "object"
-    },
-    validation: {
-      description: "Object containing validation state and message. Please refer to the example code for details on usage."
-    },
-    onSelectItem: {
-      description: "Function called when a file is selected"
     },
-    onEditItem: {
-      description: "Function called when a file is edited"
+    args: {
+        label: "Upload Image",
+        required: true,
+        disabled: false,
+        description: "Select a file to upload (JPG, PNG, PDF)",
+        note: "Note: Maximum file size is 5MB",
+        type: "area",
+        value: null,
+        validation: void 0,
+        onSelectItem: void 0,
+        onEditItem: void 0,
+        onRemoveItem: void 0
     },
-    onRemoveItem: {
-      description: "Function called when a file is removed"
+    argTypes: {
+        label: {
+            description: "Label text for the file picker",
+            control: "text"
+        },
+        required: {
+            description: "Makes the field required when set to true",
+            control: "boolean"
+        },
+        disabled: {
+            description: "Disables the file picker when set to true",
+            control: "boolean"
+        },
+        description: {
+            description: "Additional description text below the field",
+            control: "text"
+        },
+        note: {
+            description: "Additional note text below the field",
+            control: "text"
+        },
+        type: {
+            description: "The visual style of the file picker",
+            control: "radio",
+            options: [
+                "area",
+                "compact"
+            ]
+        },
+        value: {
+            description: "The currently selected file",
+            control: "object"
+        },
+        validation: {
+            description: "Object containing validation state and message. Please refer to the example code for details on usage."
+        },
+        onSelectItem: {
+            description: "Function called when a file is selected"
+        },
+        onEditItem: {
+            description: "Function called when a file is edited"
+        },
+        onRemoveItem: {
+            description: "Function called when a file is removed"
+        }
     }
-  }
 };
+export default FilePicker_stories;
+export { AreaDisabled, AreaFullExample, AreaType, AreaWithDescription, AreaWithErrors, AreaWithLabel, AreaWithLabelRequired, AreaWithNotes, AreaWithValidateFunction, Compact, CompactDisabled, CompactFullExample, CompactWithDescription, CompactWithErrors, CompactWithLabel, CompactWithLabelRequired, CompactWithNotes, CompactWithValidateFunction, Default, Documentation };
 
 //# sourceMappingURL=FilePicker.stories.js.map