@mohamed-karawia/library 0.1.0

package/dist/stories/Reusable Components/Mention/Mention.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionArea = exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Mention = _interopRequireDefault(require("./Mention"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Resuable Components/Mention',
+  component: _Mention.default
+};
+exports.default = _default;
+var users = [{
+  id: 'walter',
+  display: 'Walter White'
+}, {
+  id: 'jesse',
+  display: 'Jesse Pinkman'
+}, {
+  id: 'gus',
+  display: 'Gustavo "Gus" Fring'
+}, {
+  id: 'saul',
+  display: 'Saul Goodman'
+}, {
+  id: 'hank',
+  display: 'Hank Schrader'
+}, {
+  id: 'skyler',
+  display: 'Skyler White'
+}, {
+  id: 'mike',
+  display: 'Mike Ehrmantraut'
+}, {
+  id: 'lydia',
+  display: 'Lydìã Rôdarté-Qüayle'
+}];
+
+var MentionArea = function MentionArea(args) {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_Mention.default, Object.assign({
+    value: value,
+    handleOnChange: function handleOnChange(value) {
+      return setValue(value);
+    },
+    users: users
+  }, args));
+};
+
+exports.MentionArea = MentionArea;

package/dist/stories/Reusable Components/ReactModal/ReactModal.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactModal = _interopRequireDefault(require("react-modal"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var ReactModalComponent = function ReactModalComponent(_ref) {
+  var title = _ref.title,
+      borderColor = _ref.borderColor,
+      boxShadow = _ref.boxShadow,
+      backgroundColor = _ref.backgroundColor,
+      padding = _ref.padding,
+      height = _ref.height,
+      width = _ref.width,
+      color = _ref.color,
+      borderRadius = _ref.borderRadius,
+      modalIsOpen = _ref.modalIsOpen,
+      closeModal = _ref.closeModal,
+      children = _ref.children,
+      exitModalButton = _ref.exitModalButton,
+      onOverlayCloseClick = _ref.onOverlayCloseClick;
+  return /*#__PURE__*/_react.default.createElement(ModalContainer, {
+    isOpen: modalIsOpen,
+    onRequestClose: closeModal,
+    ariaHideApp: false,
+    contentLabel: title,
+    shouldCloseOnOverlayClick: onOverlayCloseClick === 'true',
+    borderColor: borderColor,
+    boxShadow: boxShadow,
+    backgroundColor: backgroundColor,
+    padding: padding,
+    height: height,
+    width: width,
+    color: color,
+    borderRadius: borderRadius
+  }, children, exitModalButton(closeModal));
+};
+
+var ModalContainer = (0, _styledComponents.default)(_reactModal.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 45%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  transform: translate(-50%, -50%);\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  height: ", ";\n  width: ", ";\n  color: ", ";\n  border-color: ", ";\n  padding: ", "px;\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var borderRadius = _ref3.borderRadius;
+  return borderRadius;
+}, function (_ref4) {
+  var boxShadow = _ref4.boxShadow;
+  return boxShadow;
+}, function (_ref5) {
+  var height = _ref5.height;
+  return height;
+}, function (_ref6) {
+  var width = _ref6.width;
+  return width;
+}, function (_ref7) {
+  var color = _ref7.color;
+  return color;
+}, function (_ref8) {
+  var borderColor = _ref8.borderColor;
+  return borderColor;
+}, function (_ref9) {
+  var padding = _ref9.padding;
+  return padding;
+});
+ReactModalComponent.defaultProps = {
+  title: "",
+  height: "80vh",
+  width: "50vw"
+};
+var _default = ReactModalComponent;
+exports.default = _default;

package/dist/stories/Reusable Components/ReusableForm/ReusableForm.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _formik = require("formik");
+
+var _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _Buttons = _interopRequireDefault(require("../../Buttons/Buttons/Buttons"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var _excluded = ["formTitle", "sections", "initialValues"];
+
+var ReusableForm = function ReusableForm(_ref) {
+  var formTitle = _ref.formTitle,
+      sections = _ref.sections,
+      initialValues = _ref.initialValues,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var submitHandler = function submitHandler(values) {
+    props.saveHandler(values);
+  };
+
+  var handleCancel = function handleCancel() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: initialValues,
+    validationSchema: props.formSchema,
+    onSubmit: function onSubmit(values) {
+      return submitHandler(values);
+    }
+  }, /*#__PURE__*/_react.default.createElement(CreateForm, props, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: formTitle
+  }, props.headerStyles)), sections.map(function (section) {
+    return /*#__PURE__*/_react.default.createElement(FormSection, Object.assign({
+      key: section.title
+    }, props), !section.hideTitle && section.title && /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+      title: section.title
+    }, props.sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(FormSectionBody, Object.assign({
+      columns: section.bodyColumns
+    }, props), section.body.map(function (input) {
+      return input;
+    })));
+  }), !props.hideFooter && /*#__PURE__*/_react.default.createElement(FormFooter, null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    label: props.saveBtnText,
+    size: "md",
+    variant: "primary",
+    type: "submit",
+    buttonClicked: function buttonClicked() {}
+  }), props.cancelBtnText && /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    type: "button",
+    label: props.cancelBtnText,
+    size: "md",
+    variant: "secondary",
+    buttonClicked: handleCancel
+  }))));
+};
+
+var CreateForm = (0, _styledComponents.default)(_formik.Form)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n\n"])), function (props) {
+  return props.formBackgroundColor || 'white';
+});
+
+var FormSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n"])), function (props) {
+  return props.sectionPadding;
+});
+
+var FormSectionBody = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n    grid-template-columns: ", ";\n    padding: ", "px;\n    row-gap: ", "px;\n    column-gap: ", "px;\n"])), function (_ref2) {
+  var columns = _ref2.columns;
+  return "repeat(".concat(columns, ", 1fr)") || 1;
+}, function (props) {
+  return props.bodyPadding;
+}, function (props) {
+  return props.bodyRowGap;
+}, function (props) {
+  return props.bodyColumnGap;
+});
+
+var FormFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n"])));
+
+var Button = _styledComponents.default.button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+ReusableForm.defaultProps = {};
+var _default = ReusableForm;
+exports.default = _default;

package/dist/stories/Reusable Components/ReusableForm/ReusableForm.stories.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.form = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _storybookFormik = _interopRequireDefault(require("storybook-formik"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _ReusableForm = _interopRequireDefault(require("./ReusableForm"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _CustomDropZone = _interopRequireDefault(require("../../Common Inputs/CustomDropzone/CustomDropZone"));
+
+var _CustomTextarea = _interopRequireDefault(require("../../Common Inputs/CustomTextarea/CustomTextarea"));
+
+var _CheckboxGroup = _interopRequireDefault(require("../../Common Inputs/CheckboxGroup/CheckboxGroup"));
+
+var _CustomAutoComplete = _interopRequireDefault(require("../../Common Inputs/CustomAutoComplete/CustomAutoComplete"));
+
+var _CustomSelect = _interopRequireDefault(require("../../Common Inputs/CustomSelect/CustomSelect"));
+
+var _DatePicker = _interopRequireDefault(require("../../Common Inputs/DatePicker/DatePicker"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var submitHandler = function submitHandler(values) {
+  console.log(values);
+};
+
+var cancelHandler = function cancelHandler() {
+  console.log('cancel');
+};
+
+var sections = [{
+  title: "Server Name",
+  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Server Name",
+    name: "userName"
+  })]
+}, {
+  title: "User Name",
+  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "User Name",
+    name: "firstName"
+  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Last Name",
+    name: "lastName"
+  })],
+  bodyColumns: 2
+}, {
+  title: 'More inputs',
+  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Input one",
+    name: "input1"
+  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Input two",
+    name: "input2"
+  })],
+  hideTitle: true
+}, {
+  title: "Server history",
+  body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Age",
+    name: "age"
+  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    label: "Hobby",
+    name: "hobby"
+  }), /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
+    label: "Discription",
+    name: "discription"
+  }), /*#__PURE__*/_react.default.createElement(_CheckboxGroup.default, {
+    label: "Checkbox Group",
+    name: "acceptTerms",
+    options: [{
+      label: 'option 1',
+      value: '1'
+    }, {
+      label: 'option 2',
+      value: '2'
+    }, {
+      label: 'option 3',
+      value: '3'
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_CustomAutoComplete.default, {
+    name: "search",
+    label: "Search",
+    items: [{
+      id: 'foo',
+      label: 'foo'
+    }, {
+      id: 'bar',
+      label: 'bar'
+    }, {
+      id: 'baz',
+      label: 'baz'
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+    label: "options",
+    options: [{
+      label: 'select an option',
+      value: ''
+    }, {
+      label: 'option 1',
+      value: '1'
+    }, {
+      label: 'option 2',
+      value: '2'
+    }, {
+      label: 'option 3',
+      value: '3'
+    }],
+    name: "select"
+  })]
+}, {
+  title: "User Media",
+  body: [/*#__PURE__*/_react.default.createElement(_CustomDropZone.default, {
+    label: "User Profile",
+    name: "file"
+  }), /*#__PURE__*/_react.default.createElement(_DatePicker.default, {
+    label: "Date Range",
+    name: "date"
+  })]
+}];
+var initialValues = {
+  userName: '',
+  firstName: '',
+  lastName: '',
+  input1: '',
+  input2: '',
+  age: '',
+  hobby: '',
+  discription: '',
+  acceptTerms: [],
+  search: '',
+  select: '',
+  file: '',
+  date: {
+    startDate: null,
+    endDate: null
+  }
+};
+var formSchema = Yup.object().shape({
+  userName: Yup.string().required("Required"),
+  firstName: Yup.string().required("Required"),
+  lastName: Yup.string().required("Required"),
+  age: Yup.string().required("Required"),
+  hobby: Yup.string().required("Required"),
+  discription: Yup.string().required('Required'),
+  acceptTerms: Yup.array().min(1, 'You must choose at least one element'),
+  search: Yup.string().required("Required"),
+  select: Yup.string().required("Required"),
+  date: Yup.object().shape({
+    startDate: Yup.object().required("Required").typeError('Invalid Start Date'),
+    endDate: Yup.object().required("Required").typeError('Invalid End Date')
+  })
+});
+var _default = {
+  title: 'Reusable Components/Reusable Formik Form',
+  component: _ReusableForm.default // decorators: [withFormik],
+  // parameters: {
+  //     formik: {
+  //         initialValues,
+  //         validationSchema: formSchema,
+  //         onSubmit: submitHandler
+  //     },
+  // }
+
+};
+exports.default = _default;
+
+var form = function form(args) {
+  return /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign({
+    formTitle: "Reusable form",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionHeaderStyles: {
+      padding: 6,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    bodyPadding: 10,
+    saveBtnText: "Save",
+    cancelBtnText: "Cancel",
+    saveBtnHandle: submitHandler,
+    cancelHandler: cancelHandler,
+    bodyRowGap: 20,
+    bodyColumnGap: 10
+  }, args));
+};
+
+exports.form = form;

package/dist/stories/Reusable Components/ReusableHeader/ReusableHeader.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Controls = _interopRequireDefault(require("../Controls/Controls"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var _excluded = ["title", "discription", "controls"];
+
+var ReusableHeader = function ReusableHeader(_ref) {
+  var title = _ref.title,
+      discription = _ref.discription,
+      controls = _ref.controls,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var iconCliked = function iconCliked(action) {
+    props.iconClicked(action);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(Title, props, title), /*#__PURE__*/_react.default.createElement(Discription, props, discription), controls && /*#__PURE__*/_react.default.createElement(_Controls.default, Object.assign({
+    controls: controls,
+    onIconClicked: iconCliked
+  }, props.controlsStyles)));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: sans-serif;\n    display: flex;\n    background-color: ", ";\n    padding: ", "px !important;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    > * {\n        margin: 0;\n        padding: 0;\n    }\n  \n"])), function (props) {
+  return props.headerBackground || 'white';
+}, function (props) {
+  return props.padding || 0;
+});
+
+var Title = _styledComponents.default.h3(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n    font-weight: ", ";\n"])), function (props) {
+  return props.titleColor;
+}, function (props) {
+  return props.titleFontSize;
+}, function (props) {
+  return props.titleFontWeight || 400;
+});
+
+var Discription = _styledComponents.default.p(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n    font-weight: ", ";\n"])), function (props) {
+  return props.DiscriptionColor;
+}, function (props) {
+  return props.DiscriptionFontSize;
+}, function (props) {
+  return props.DiscriptionFontWeight;
+});
+
+ReusableHeader.defaultProps = {};
+var _default = ReusableHeader;
+exports.default = _default;

package/dist/stories/Reusable Components/ReusableHeader/ReusableHeader.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ReusableHeader = _interopRequireDefault(require("./ReusableHeader"));
+
+var _fakeData = require("../fakeData");
+
+var _default = {
+  title: 'Reusable Components/Reusable Header',
+  component: _ReusableHeader.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, args);
+};
+
+var Header = Template.bind({});
+exports.Header = Header;
+Header.args = {
+  title: "Reusable Header",
+  discription: "This is a discription for header",
+  controls: _fakeData.controls,
+  controlsStyles: {
+    iconColor: 'red'
+  }
+};

package/dist/stories/Reusable Components/ReusableList/ReusableList.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _util = require("../../helpers/util");
+
+var _CardStyle = _interopRequireDefault(require("../Cards/Card-style-3/CardStyle3"));
+
+var _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls"];
+
+var ReusableList = function ReusableList(_ref) {
+  var data = _ref.data,
+      cardStyle = _ref.cardStyle,
+      customCardStyles = _ref.customCardStyles,
+      type = _ref.type,
+      _ref$cardControls = _ref.cardControls,
+      cardControls = _ref$cardControls === void 0 ? null : _ref$cardControls,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var child;
+
+  var iconCliked = function iconCliked(action) {
+    props.iconClicked(action);
+  };
+
+  var clicked = function clicked(index) {
+    props.cardClicked(index);
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var mapOverCardsData = function mapOverCardsData(data) {
+    return data.map(function (cardProps, index) {
+      return (0, _util.getCardStyle)(cardProps, cardStyle, customCardStyles, cardControls, index, clicked, cardIconClicked);
+    });
+  };
+
+  if (type === 'flat') {
+    child = mapOverCardsData(data);
+  } else {
+    child = data.map(function (section) {
+      return /*#__PURE__*/_react.default.createElement(Section, {
+        priority: section.priority
+      }, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+        title: section.title
+      }, props.sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, null, mapOverCardsData(section.data)));
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(List, props, !props.hideTitle && /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: props.listTitle,
+    controls: props.listControls,
+    iconClicked: iconCliked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(ListBody, props, child));
+};
+
+var List = _styledComponents.default.ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n    width: ", ";\n    padding: 0;\n    > * {\n        padding: 0;\n        margin: 0;\n    }\n"])), function (props) {
+  return props.listWidth + 'px' || '100%';
+});
+
+var ListBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    gap: ", "px;\n"])), function (props) {
+  return props.listRowGap;
+});
+
+var Section = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    order: ", ";\n"])), function (_ref2) {
+  var priority = _ref2.priority;
+  return priority;
+});
+
+var SectionBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n"])));
+
+ReusableList.defaultProps = {};
+var _default = ReusableList;
+exports.default = _default;