@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/MultiFilePicker/MultiFilePicker.mdx

@@ -0,0 +1,190 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as MultiFilePickerStories from './MultiFilePicker.stories';
+
+<Meta of={MultiFilePickerStories} />
+
+# Multi File Picker
+
+The Multi File Picker component allows users to select, preview, and manage multiple files. It provides an intuitive interface for file uploads in forms and content management systems, with support for different file types and preview options.
+
+## Usage
+
+The MultiFilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
+
+> ⚠️ **Note**: The MultiFilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
+In the Storybook example below, we've used random images from Picsum for demonstration purposes.
+However, if you use this example code in a real Webiny project, the MultiFilePicker will integrate with the actual File Manager as expected.
+
+<Canvas of={MultiFilePickerStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { MultiFilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const MultiFilePickerExample = () => {
+    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+        const formatFile = (file: FileManagerFileItem): FileItemDto => {
+            const metaItems = file.meta || [];
+
+            const getValue = (key: string) =>
+                metaItems.find((item: { key: string }) => item.key === key)?.value;
+
+            return {
+                id: file.id,
+                name: getValue("name") || "",
+                size: getValue("size") || 0,
+                mimeType: getValue("type") || "",
+                url: file.src || ""
+            };
+        };
+
+        return (
+            <div>
+                <FileManager
+                    accept={["image/*", "application/pdf"]}
+                    multiple={true}
+                    render={({ showFileManager }) => (
+                        <MultiFilePicker
+                            label="Upload Images"
+                            description="Select files to upload (JPG, PNG, PDF)"
+                            note="Note: Maximum file size is 5MB per file"
+                            type="area"
+                            required={true}
+                            values={selectedFiles}
+                            validation={validation}
+                            onSelectItem={() => {
+                                showFileManager(files => {
+                                    if (files && Array.isArray(files) && files.length > 0) {
+                                        const formatted = files.map(formatFile);
+                                        setSelectedFiles(prev => [...prev, ...formatted]);
+                                        setValidation({ isValid: true, message: "" });
+                                    }
+                                });
+                            }}
+                            onReplaceItem={(_, index) => {
+                                // For replacing, we'll use the first file from the selection
+                                showFileManager(files => {
+                                    if (files && Array.isArray(files) && files.length > 0) {
+                                        const updated = [...selectedFiles];
+                                        updated[index] = formatFile(files[0]);
+                                        setSelectedFiles(updated);
+                                    }
+                                });
+                            }}
+                            onRemoveItem={(_, index) => {
+                                const updated = [...selectedFiles];
+                                updated.splice(index, 1);
+                                if (updated.length === 0) {
+                                    setValidation({ isValid: false, message: "Please select at least one file" });
+                                }
+                                setSelectedFiles(updated);
+                            }}
+                            onEditItem={(file, index) => {
+                                alert(\`Editing: \${file?.name} at index \${index}\`);
+                        }}
+                    />
+                )}
+            />
+        </div>
+    );
+};
+
+    export default MultiFilePickerExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={MultiFilePickerStories.Documentation} />
+
+```tsx
+import React, { useState } from "react";
+import { MultiFilePicker, type FileItemDto } from "@webiny/admin-ui";
+import { FileManager } from "@webiny/app-admin/components";
+import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
+
+const MultiFilePickerExample = () => {
+    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const formatFile = (file: FileManagerFileItem): FileItemDto => {
+        const metaItems = file.meta || [];
+
+        const getValue = (key: string) =>
+            metaItems.find((item: { key: string }) => item.key === key)?.value;
+
+        return {
+            id: file.id,
+            name: getValue("name") || "",
+            size: getValue("size") || 0,
+            mimeType: getValue("type") || "",
+            url: file.src || ""
+        };
+    };
+
+    return (
+        <div>
+            <FileManager
+                accept={["image/*", "application/pdf"]}
+                multiple={true}
+                render={({ showFileManager }) => (
+                    <MultiFilePicker
+                        label="Upload Images"
+                        description="Select files to upload (JPG, PNG, PDF)"
+                        note="Note: Maximum file size is 5MB per file"
+                        type="area"
+                        required={true}
+                        values={selectedFiles}
+                        validation={validation}
+                        onSelectItem={() => {
+                            showFileManager(files => {
+                                if (files && Array.isArray(files) && files.length > 0) {
+                                    const formatted = files.map(formatFile);
+                                    setSelectedFiles(prev => [...prev, ...formatted]);
+                                    setValidation({ isValid: true, message: "" });
+                                }
+                            });
+                        }}
+                        onReplaceItem={(_, index) => {
+                            // For replacing, we'll use the first file from the selection
+                            showFileManager(files => {
+                                if (files && Array.isArray(files) && files.length > 0) {
+                                    const updated = [...selectedFiles];
+                                    updated[index] = formatFile(files[0]);
+                                    setSelectedFiles(updated);
+                                }
+                            });
+                        }}
+                        onRemoveItem={(_, index) => {
+                            const updated = [...selectedFiles];
+                            updated.splice(index, 1);
+                            if (updated.length === 0) {
+                                setValidation({ isValid: false, message: "Please select at least one file" });
+                            }
+                            setSelectedFiles(updated);
+                        }}
+                        onEditItem={(file, index) => {
+                            alert(`Editing: ${file?.name} at index ${index}`);
+                        }}
+                    />
+                )}
+            />
+        </div>
+    );
+};
+
+export default MultiFilePickerExample;
+```

package/MultiFilePicker/MultiFilePicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiFilePicker } from "./";
+declare const meta: Meta<typeof MultiFilePicker>;
+export default meta;
+type Story = StoryObj<typeof MultiFilePicker>;
+export declare const Default: Story;
+export declare const AreaType: Story;
+export declare const AreaWithLabel: Story;
+export declare const AreaWithLabelRequired: Story;
+export declare const AreaWithDescription: Story;
+export declare const AreaWithNotes: Story;
+export declare const AreaWithErrors: Story;
+export declare const AreaDisabled: Story;
+export declare const AreaWithValidateFunction: Story;
+export declare const AreaFullExample: Story;
+export declare const Compact: Story;
+export declare const CompactWithLabel: Story;
+export declare const CompactWithLabelRequired: Story;
+export declare const CompactWithDescription: Story;
+export declare const CompactWithNotes: Story;
+export declare const CompactWithErrors: Story;
+export declare const CompactDisabled: Story;
+export declare const CompactWithValidateFunction: Story;
+export declare const CompactFullExample: Story;
+export declare const Documentation: Story;

package/MultiFilePicker/MultiFilePicker.stories.js

@@ -0,0 +1,384 @@
+import React, { useState, useEffect } from "react";
+import { MultiFilePicker } from "./";
+import { Providers } from "../Providers";
+const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+const createFileList = (size = 10) => {
+  return Array.from({
+    length: size
+  }, (_, index) => {
+    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: `file-${index + 1}.jpg`,
+      mimeType: "image/jpeg",
+      size: fileSize,
+      url: `https://picsum.photos/${width}/${height}`
+    };
+  });
+};
+const meta = {
+  title: "Components/Form/Multi FilePicker",
+  component: MultiFilePicker,
+  argTypes: {
+    onSelectItem: {
+      action: "onSelectItem"
+    },
+    onEditItem: {
+      action: "onEditItem"
+    },
+    onRemoveItem: {
+      action: "onRemoveItem"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+      values: selectedFiles,
+      onSelectItem: () => setSelectedFiles(createFileList()),
+      onReplaceItem: (_, index) => setSelectedFiles(prevState => {
+        if (!prevState) {
+          return [];
+        }
+        return [...prevState.slice(0, index), ...createFileList(1), ...prevState.slice(index + 1)];
+      }),
+      onRemoveItem: item => setSelectedFiles(prevState => prevState?.filter(value => value.name !== item?.name)),
+      onEditItem: (item, i) => alert(`Editing ${item?.name} at position ${i}`)
+    })));
+  }
+};
+export default meta;
+export const Default = {};
+export const AreaType = {
+  args: {
+    ...Default.args,
+    type: "area"
+  }
+};
+export const AreaWithLabel = {
+  args: {
+    ...AreaType.args,
+    label: "Any field label"
+  }
+};
+export 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."
+  }
+};
+export 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."
+    }
+  }
+};
+export 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(MultiFilePicker, Object.assign({}, 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."
+    }
+  }
+};
+export const Compact = {
+  args: {
+    ...Default.args,
+    type: "compact"
+  }
+};
+export const CompactWithLabel = {
+  args: {
+    ...Compact.args,
+    label: "Any field label"
+  }
+};
+export 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."
+  }
+};
+export 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."
+    }
+  }
+};
+export 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(MultiFilePicker, Object.assign({}, 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."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+
+    // Update value when args.values changes
+    useEffect(() => {
+      if (!args.values) {
+        setSelectedFiles([]);
+      } else if (Array.isArray(args.values)) {
+        // Convert any string values to FileItemDto format
+        const formattedValues = args.values.map(value => {
+          if (typeof value === "string") {
+            return {
+              name: value.split("/").pop() || "file",
+              mimeType: "image/jpeg",
+              // Default mime type
+              size: 0,
+              url: value
+            };
+          }
+          return value;
+        });
+        setSelectedFiles(formattedValues);
+      }
+    }, [args.values]);
+    const handleSelect = () => {
+      setSelectedFiles(createFileList(3));
+      setValidation({
+        isValid: true,
+        message: ""
+      });
+    };
+    const handleReplace = (_, index) => {
+      setSelectedFiles(prevState => {
+        if (!prevState) {
+          return [];
+        }
+        return [...prevState.slice(0, index), ...createFileList(1), ...prevState.slice(index + 1)];
+      });
+      setValidation({
+        isValid: true,
+        message: ""
+      });
+    };
+    const handleEdit = (file, index) => {
+      if (file) {
+        console.log("Editing file:", file, "at index:", index);
+        alert(`Editing File: ${file.name} at position ${index}`);
+      }
+    };
+    const handleRemove = (file, index) => {
+      setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));
+      if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {
+        setValidation({
+          isValid: false,
+          message: "Please select at least one file"
+        });
+      }
+    };
+
+    // Validate on required change or value change
+    useEffect(() => {
+      if (args.required && (!selectedFiles || selectedFiles.length === 0)) {
+        setValidation({
+          isValid: false,
+          message: "Please select at least one file"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    }, [args.required, selectedFiles]);
+    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+      values: selectedFiles,
+      onSelectItem: handleSelect,
+      onReplaceItem: handleReplace,
+      onRemoveItem: handleRemove,
+      onEditItem: handleEdit,
+      validation: validation
+    })));
+  },
+  args: {
+    label: "Upload Images",
+    required: true,
+    disabled: false,
+    description: "Select files to upload (JPG, PNG, PDF)",
+    note: "Note: Maximum file size is 5MB per file",
+    type: "area",
+    values: [],
+    validation: undefined,
+    onSelectItem: undefined,
+    onReplaceItem: undefined,
+    onEditItem: undefined,
+    onRemoveItem: undefined
+  },
+  argTypes: {
+    label: {
+      description: "Label text for the file picker",
+      control: "text",
+      defaultValue: "Upload Images"
+    },
+    type: {
+      description: "The type of file picker to display",
+      control: "select",
+      options: ["area", "compact"],
+      defaultValue: "area"
+    },
+    required: {
+      description: "Makes the field required when set to true",
+      control: "boolean",
+      defaultValue: true
+    },
+    disabled: {
+      description: "Disables the field when set to true",
+      control: "boolean",
+      defaultValue: false
+    },
+    description: {
+      description: "Additional description text below the field",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the field",
+      control: "text"
+    },
+    values: {
+      description: "Array of selected files",
+      control: "object"
+    },
+    validation: {
+      description: "Validation state and message. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    onSelectItem: {
+      description: "Callback when user selects files - Please refer to the example code for details on usage.",
+      action: "onSelectItem",
+      control: "none"
+    },
+    onReplaceItem: {
+      description: "Callback when user replaces a file - Please refer to the example code for details on usage.",
+      action: "onReplaceItem",
+      control: "none"
+    },
+    onEditItem: {
+      description: "Callback when user edits a file - Please refer to the example code for details on usage.",
+      action: "onEditItem",
+      control: "none"
+    },
+    onRemoveItem: {
+      description: "Callback when user removes a file - Please refer to the example code for details on usage.",
+      action: "onRemoveItem",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=MultiFilePicker.stories.js.map

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","MultiFilePicker","Providers","getRandomNumber","min","max","Math","floor","random","createFileList","size","Array","from","length","_","index","width","height","fileSize","name","mimeType","url","meta","title","component","argTypes","onSelectItem","action","onEditItem","onRemoveItem","disabled","control","defaultValue","parameters","layout","render","args","selectedFiles","setSelectedFiles","createElement","Object","assign","values","onReplaceItem","prevState","slice","item","filter","value","i","alert","Default","AreaType","type","AreaWithLabel","label","AreaWithLabelRequired","required","AreaWithDescription","description","AreaWithNotes","note","AreaWithErrors","validation","isValid","message","AreaDisabled","AreaWithValidateFunction","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","isArray","formattedValues","map","split","pop","handleSelect","handleReplace","handleEdit","file","console","log","handleRemove","options"],"sources":["MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker\";\nimport { Providers } from \"~/Providers\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <Providers>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={() => setSelectedFiles(createFileList())}\n                    onReplaceItem={(_, index) =>\n                        setSelectedFiles(prevState => {\n                            if (!prevState) {\n                                return [];\n                            }\n\n                            return [\n                                ...prevState.slice(0, index),\n                                ...createFileList(1),\n                                ...prevState.slice(index + 1)\n                            ];\n                        })\n                    }\n                    onRemoveItem={item =>\n                        setSelectedFiles(prevState =>\n                            prevState?.filter(value => value.name !== item?.name)\n                        )\n                    }\n                    onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n                />\n            </Providers>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.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 Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.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 [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <Providers>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={handleSelect}\n                    onReplaceItem={handleReplace}\n                    onRemoveItem={handleRemove}\n                    onEditItem={handleEdit}\n                    validation={validation}\n                />\n            </Providers>\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\",\n            control: \"none\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\",\n            control: \"none\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\",\n            control: \"none\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\",\n            control: \"none\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/MultiFilePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MultiFilePicker";
+export * from "./primitives";

package/MultiFilePicker/index.js

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

package/MultiFilePicker/index.js.map

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