@aegov/design-system-react/dist/components/FileUpload/FileUpload.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithinForm = exports.WithPreview = exports.Simple = exports.MultipleFiles = exports.DragDrop = exports.DocumentUpload = exports.Disabled = exports.Default = exports.CustomFileTypes = exports.AllVariants = void 0;
var React = _interopRequireWildcard(require("react"));
var Form = _interopRequireWildcard(require("@radix-ui/react-form"));
var _FileUpload = require("./FileUpload");
var _react2 = require("@phosphor-icons/react");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var _default = exports.default = {
  title: 'Components/FileUpload',
  component: _FileUpload.FileUpload,
  parameters: {
    layout: 'centered'
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'simple', 'withPreview', 'dragDrop'],
      description: 'The visual variant of the upload component'
    },
    maxFiles: {
      control: 'number',
      description: 'Maximum number of files that can be uploaded'
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the upload is disabled'
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes'
    },
    acceptedFileTypes: {
      control: 'object',
      description: 'Object containing accepted MIME types'
    },
    onFilesSelected: {
      action: 'filesSelected',
      description: 'Callback when files are selected'
    }
  }
}; // Base template that wraps all stories with Form.Root
const Template = args => {
  console.log('FileUpload props:', args);
  return /*#__PURE__*/React.createElement(Form.Root, {
    className: "w-full"
  }, /*#__PURE__*/React.createElement(Form.Field, {
    name: "file",
    disabled: args.disabled
  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, args)));
};
const UploadLabel = ({
  disabled
}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_react2.UploadSimple, {
  size: 20,
  className: disabled ? 'opacity-50' : ''
}), "Upload file");

// Update all story exports to use the template
const Default = () => /*#__PURE__*/React.createElement(_FileUpload.FileUpload, {
  variant: "default",
  maxFiles: 1,
  disabled: false,
  acceptedFileTypes: {
    'image/jpeg': [],
    'image/png': [],
    'image/gif': []
  },
  label: /*#__PURE__*/React.createElement(UploadLabel, {
    disabled: false
  })
});
exports.Default = Default;
const Simple = exports.Simple = {
  render: args => /*#__PURE__*/React.createElement(Template, args),
  args: {
    variant: 'simple',
    maxFiles: 1,
    disabled: false,
    acceptedFileTypes: {
      'image/jpeg': [],
      'image/png': [],
      'image/gif': []
    }
  }
};
const WithPreview = exports.WithPreview = {
  render: args => /*#__PURE__*/React.createElement(Template, args),
  args: {
    variant: 'withPreview',
    maxFiles: 1,
    disabled: false,
    acceptedFileTypes: {
      'image/jpeg': [],
      'image/png': [],
      'image/gif': []
    }
  }
};
const DragDrop = exports.DragDrop = {
  render: args => /*#__PURE__*/React.createElement(Template, args),
  args: {
    variant: 'dragDrop',
    maxFiles: 3,
    disabled: false,
    acceptedFileTypes: {
      'image/jpeg': [],
      'image/png': [],
      'image/gif': []
    },
    label: 'Drag and drop files here'
  }
};
const Disabled = exports.Disabled = {
  render: args => /*#__PURE__*/React.createElement(Template, args),
  args: {
    variant: 'default',
    maxFiles: 1,
    disabled: true,
    acceptedFileTypes: {
      'image/jpeg': [],
      'image/png': [],
      'image/gif': []
    }
  }
};
const MultipleFiles = exports.MultipleFiles = {
  render: args => /*#__PURE__*/React.createElement(Template, args),
  args: {
    variant: 'dragDrop',
    maxFiles: 5,
    disabled: false,
    acceptedFileTypes: {
      'image/jpeg': [],
      'image/png': [],
      'image/gif': []
    },
    label: 'Drag and drop files here'
  }
};
const DocumentUpload = exports.DocumentUpload = {
  render: args => /*#__PURE__*/React.createElement(Template, args),
  args: {
    variant: 'simple',
    maxFiles: 1,
    disabled: false,
    acceptedFileTypes: {
      'application/pdf': [],
      'application/msword': [],
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': []
    },
    label: 'Upload documents'
  }
};

// Example of multiple fields in a form
const WithinForm = () => /*#__PURE__*/React.createElement(Form.Root, {
  onSubmit: e => {
    e.preventDefault();
    console.log('Form submitted');
  }
}, /*#__PURE__*/React.createElement("div", {
  className: "space-y-4"
}, /*#__PURE__*/React.createElement(Form.Field, {
  name: "name"
}, /*#__PURE__*/React.createElement(Form.Label, null, "Name"), /*#__PURE__*/React.createElement(Form.Control, {
  asChild: true
}, /*#__PURE__*/React.createElement("input", {
  type: "text",
  className: "w-full px-4 py-2 border rounded-lg",
  placeholder: "Enter your name"
}))), /*#__PURE__*/React.createElement(Form.Field, {
  name: "file",
  disabled: false
}, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, {
  variant: "simple",
  maxFiles: 1,
  disabled: false,
  onFilesSelected: files => console.log('Files selected:', files)
})), /*#__PURE__*/React.createElement("button", {
  type: "submit",
  className: "px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
}, "Submit")));

// Custom accepted files
exports.WithinForm = WithinForm;
const CustomFileTypes = exports.CustomFileTypes = Template.bind({});
CustomFileTypes.args = {
  variant: 'default',
  maxFiles: 1,
  acceptedFileTypes: {
    'application/pdf': []
  }
};

// All variants showcase
const AllVariants = exports.AllVariants = {
  render: () => /*#__PURE__*/React.createElement("div", {
    className: "flex flex-col gap-8 p-8"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "text-lg font-semibold mb-2"
  }, "Default Variant"), /*#__PURE__*/React.createElement(Form.Root, null, /*#__PURE__*/React.createElement(Form.Field, {
    name: "file1",
    disabled: false
  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, {
    variant: "default",
    disabled: false
  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "text-lg font-semibold mb-2"
  }, "Simple Variant"), /*#__PURE__*/React.createElement(Form.Root, null, /*#__PURE__*/React.createElement(Form.Field, {
    name: "file2"
  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, {
    variant: "simple"
  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "text-lg font-semibold mb-2"
  }, "Preview Variant"), /*#__PURE__*/React.createElement(Form.Root, null, /*#__PURE__*/React.createElement(Form.Field, {
    name: "file3"
  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, {
    variant: "withPreview",
    acceptedFileTypes: {
      'image/jpeg': [],
      'image/png': [],
      'image/gif': []
    }
  })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "text-lg font-semibold mb-2"
  }, "Drag & Drop Variant"), /*#__PURE__*/React.createElement(Form.Root, null, /*#__PURE__*/React.createElement(Form.Field, {
    name: "file4"
  }, /*#__PURE__*/React.createElement(_FileUpload.FileUpload, {
    variant: "dragDrop"
  })))))
};