@mohamed-karawia/react-storybook 0.1.1

package/dist/stories/Reusable Components/Cards/Card.stories.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardWithoutImageColumn = exports.CardWithoutImage = exports.CardWithImageColumn = exports.CardWithImage = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _default = {
+  title: 'Reusable Components/Cards/Regular Card',
+  component: _Card.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Card.default, args);
+};
+
+var CardWithImage = Template.bind({});
+exports.CardWithImage = CardWithImage;
+CardWithImage.args = {
+  title: 'Card with image',
+  description: 'Lorem ipsum dolor sit amet consectetur.',
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  cardBackgroundColor: '#f1d6d6',
+  cardRadius: '20',
+  cardTitleFontSize: '',
+  cardTitleColor: '',
+  cardImageRadius: '100',
+  cardDescriptionFontSize: '',
+  cardDescriptionColor: '',
+  cardDirection: '',
+  cardPadding: '10',
+  imgSize: '90',
+  cardBorderSize: '',
+  cardBorderColor: '',
+  controlsStyles: {
+    showOnHover: true,
+    iconBackground: "#272727",
+    dropdownBackground: "#272727",
+    dropdownFontColor: "white",
+    dropdownItemHoverColor: "#414141",
+    iconBackgroundHover: "#414141"
+  }
+};
+var CardWithImageColumn = Template.bind({});
+exports.CardWithImageColumn = CardWithImageColumn;
+CardWithImageColumn.args = {
+  title: 'Card with image column',
+  description: 'Lorem ipsum dolor sit amet consectetur.',
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  cardBackgroundColor: '#f1d6d6',
+  cardRadius: '20',
+  cardTitleFontSize: '',
+  cardTitleColor: '',
+  cardImageRadius: '100',
+  cardDescriptionFontSize: '',
+  cardDescriptionColor: '',
+  cardDirection: 'column',
+  cardPadding: '10',
+  imgSize: '90',
+  cardBorderSize: '',
+  cardBorderColor: '',
+  controlsStyles: {
+    showOnHover: true,
+    iconBackground: "#272727",
+    dropdownBackground: "#272727",
+    dropdownFontColor: "white",
+    dropdownItemHoverColor: "#414141",
+    iconBackgroundHover: "#414141"
+  }
+};
+var CardWithoutImage = Template.bind({});
+exports.CardWithoutImage = CardWithoutImage;
+CardWithoutImage.args = {
+  title: 'Card with image',
+  description: 'Lorem ipsum dolor sit amet consectetur.',
+  img: '',
+  cardBackgroundColor: '#f1d6d6',
+  cardRadius: '20',
+  cardTitleFontSize: '',
+  cardTitleColor: '',
+  cardImageRadius: '100',
+  cardDescriptionFontSize: '',
+  cardDescriptionColor: '',
+  cardDirection: '',
+  cardPadding: '10',
+  imgSize: '90',
+  cardBorderSize: '',
+  cardBorderColor: '',
+  controlsStyles: {
+    showOnHover: true,
+    iconBackground: "#272727",
+    dropdownBackground: "#272727",
+    dropdownFontColor: "white",
+    dropdownItemHoverColor: "#414141",
+    iconBackgroundHover: "#414141"
+  }
+};
+var CardWithoutImageColumn = Template.bind({});
+exports.CardWithoutImageColumn = CardWithoutImageColumn;
+CardWithoutImageColumn.args = {
+  title: 'Card with image column',
+  description: 'Lorem ipsum dolor sit amet consectetur.',
+  img: '',
+  cardBackgroundColor: '#f1d6d6',
+  onHoverBackgroundColor: '',
+  cardRadius: '20',
+  cardTitleFontSize: '',
+  cardTitleColor: '',
+  cardImageRadius: '100',
+  cardDescriptionFontSize: '',
+  cardDescriptionColor: '',
+  cardDirection: 'column',
+  cardPadding: '10',
+  imgSize: '90',
+  cardBorderSize: '',
+  cardBorderColor: '',
+  controlsStyles: {
+    showOnHover: true,
+    iconBackground: "#272727",
+    dropdownBackground: "#272727",
+    dropdownFontColor: "white",
+    dropdownItemHoverColor: "#414141",
+    iconBackgroundHover: "#414141"
+  }
+};

package/dist/stories/Reusable Components/Cards/globalCardStyles.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Img = exports.ImgWrapper = exports.Description = exports.Title = exports.globalContent = exports.MainCard = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var MainCard = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n* {\n        margin: 0;\n        padding: 0;\n    }\n    font-family: sans-serif;\n    display: flex;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", ";\n    align-items: center;\n    padding: ", " !important;\n    order: ", ";\n    &:hover {\n        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);\n        -webkit-filter: ", ";\n        transition: all .2s ease;\n        background-color: ", ";\n    }\n"])), function (props) {
+  return props.cardBackgroundColor || 'white';
+}, function (props) {
+  return props.cardRadius;
+}, function (props) {
+  return props.cardBorderSize + 'px solid ' + props.cardBorderColor;
+}, function (props) {
+  return props.cardPadding + 'px' || 0;
+}, function (props) {
+  return props.priority;
+}, function (props) {
+  return props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)';
+}, function (props) {
+  return props.onHoverBackgroundColor;
+});
+
+exports.MainCard = MainCard;
+
+var globalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    gap: ", "px;\n"])), function (props) {
+  return props.contentGap;
+});
+
+exports.globalContent = globalContent;
+
+var Title = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    text-transform: capitalize;\n    color: ", ";\n    font-size: ", "px;\n    font-weight: ", ";\n"])), function (props) {
+  return props.cardTitleColor || 'black';
+}, function (props) {
+  return props.cardTitleFontSize;
+}, function (props) {
+  return props.cardTitleFontWeight || 300;
+});
+
+exports.Title = Title;
+
+var Description = _styledComponents.default.h5(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\ncolor: ", ";\nfont-size: ", "px;\nfont-weight: 500;\n"])), function (props) {
+  return props.cardDescriptionColor || 'black';
+}, function (props) {
+  return props.cardDescriptionFontSize;
+});
+
+exports.Description = Description;
+
+var ImgWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", ";\n"])), function (props) {
+  return props.imgSize || 100;
+}, function (props) {
+  return props.imgSize || 100;
+}, function (props) {
+  return props.cardImageRadius + 'px' || '100%';
+});
+
+exports.ImgWrapper = ImgWrapper;
+
+var Img = _styledComponents.default.img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: 100%;\n    object-position: center;\n    object-fit: cover;\n    border-radius: inherit;\n"])));
+
+exports.Img = Img;

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

@@ -0,0 +1,128 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _io = require("react-icons/io");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var _excluded = ["controls", "maxIcons"];
+
+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 Controls = function Controls(_ref) {
+  var controls = _ref.controls,
+      _ref$maxIcons = _ref.maxIcons,
+      maxIcons = _ref$maxIcons === void 0 ? 2 : _ref$maxIcons,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showMore = _useState2[0],
+      setShowMore = _useState2[1];
+
+  var showIcons = props.showOnHover && props.show || !props.showOnHover;
+  var showMoreIcon = showIcons && controls.length > maxIcons;
+
+  var clicked = function clicked(action) {
+    props.onIconClicked(action);
+  };
+
+  var dropdownMenu;
+
+  if (showMore) {
+    dropdownMenu = /*#__PURE__*/_react.default.createElement(IconsDropDown, props, controls.slice(maxIcons, controls.length).map(function (control, index) {
+      return /*#__PURE__*/_react.default.createElement(DropdownItem, Object.assign({
+        key: index
+      }, props, {
+        onClick: function onClick(e) {
+          return clicked(control.action);
+        }
+      }), control.icon, /*#__PURE__*/_react.default.createElement(IconName, null, control.name));
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ListIcons, props, showIcons && controls.slice(0, maxIcons).map(function (control, index) {
+    return /*#__PURE__*/_react.default.createElement(IconContainer, Object.assign({
+      key: index
+    }, props, {
+      onClick: function onClick() {
+        return clicked(control.action);
+      }
+    }), control.icon);
+  }), showMoreIcon && /*#__PURE__*/_react.default.createElement(IconContainer, Object.assign({
+    onClick: function onClick() {
+      return setShowMore(!showMore);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setShowMore(false);
+    }
+  }, props), /*#__PURE__*/_react.default.createElement(_io.IoIosMore, null), dropdownMenu));
+};
+
+var ListIcons = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", "px;\n    position: ", ";\n    left: ", ";\n    top: ", ";\n    bottom: ", ";\n    transform: ", ";\n\n    & * {\n        padding: 0;\n        margin: 0;\n    }\n\n    & svg{\n        fill: ", ";\n        width: ", "px;\n        height: ", "px;\n    }\n"])), function (props) {
+  return props.iconsGap;
+}, function (props) {
+  return props.position ? 'absolute' : 'static';
+}, function (props) {
+  return props.position === 'center' ? '50%' : '90%';
+}, function (props) {
+  return props.position === 'center' ? '50%' : '0';
+}, function (props) {
+  return props.position === 'center' ? 'unset' : '90%';
+}, function (props) {
+  return props.position === 'center' ? 'translate(-50%, -50%)' : 'translate(0, 0)';
+}, function (props) {
+  return props.iconColor || 'white';
+}, function (props) {
+  return props.iconSize;
+}, function (props) {
+  return props.iconSize;
+});
+
+var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    background-color: ", ";\n    border-radius: ", "px;\n    cursor: pointer;\n    position: relative;\n    padding: ", "px;\n\n    &:hover {\n        background-color: ", "\n    }\n\n"])), function (props) {
+  return props.iconBackground;
+}, function (props) {
+  return props.iconBorderRadius;
+}, function (props) {
+  return props.containerPadding;
+}, function (props) {
+  return props.iconBackgroundHover;
+});
+
+var IconsDropDown = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    right: 0;\n    top: 100%;\n    background-color: ", ";\n    min-width: 150px;\n    color: ", ";\n"])), function (props) {
+  return props.dropdownBackground;
+}, function (props) {
+  return props.dropdownFontColor;
+});
+
+var DropdownItem = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 3px !important;\n\n    &:hover{\n        background-color: ", ";\n        color: white;\n\n        svg{\n        fill: ", ";\n    }\n    }\n"])), function (props) {
+  return props.dropdownItemHoverColor;
+}, function (props) {
+  return props.iconHoverColor;
+});
+
+var IconName = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n   text-transform: capitalize;\n   font-size: ", "px;\n"])), function (props) {
+  return props.dropdownFontSize;
+});
+
+Controls.defaultProps = {};
+var _default = Controls;
+exports.default = _default;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fixedControls = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Controls = _interopRequireDefault(require("./Controls"));
+
+var _ai = require("react-icons/ai");
+
+var _io = require("react-icons/io");
+
+var controls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineUserAdd, null),
+  action: 'add',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineDelete, null),
+  action: 'remove',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_io.IoIosAirplane, null),
+  action: 'add',
+  name: 'Some Icon'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_io.IoIosAlarm, null),
+  action: 'remove',
+  name: 'Another Icons'
+}];
+var _default = {
+  title: 'reusable Components/Controls',
+  component: _Controls.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Controls.default, args);
+};
+
+var fixedControls = Template.bind({});
+exports.fixedControls = fixedControls;
+fixedControls.args = {
+  controls: controls
+};

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

@@ -0,0 +1,120 @@
+"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 _CardStyle = _interopRequireDefault(require("../Cards/Card-style-3/CardStyle3"));
+
+var _util = require("../../helpers/util");
+
+var _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var _excluded = ["data", "cardStyle", "customCardStyles", "type", "cardControls"];
+
+var Gallery = function Gallery(_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 if (type === 'sectioned') {
+    child = data.map(function (section, index) {
+      return /*#__PURE__*/_react.default.createElement(Section, {
+        priority: section.priority,
+        key: index
+      }, /*#__PURE__*/_react.default.createElement(_CardStyle.default, Object.assign({
+        title: section.title
+      }, props.sectionHeaderStyles)), /*#__PURE__*/_react.default.createElement(SectionBody, props, mapOverCardsData(section.data)));
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(GalleryContainer, props, /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: props.galleryTitle,
+    controls: props.galleryControls,
+    iconClicked: iconCliked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(GalleryBody, Object.assign({
+    type: type
+  }, props), child));
+};
+
+var GalleryContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    font-family: sans-serif;\n    width: ", ";\n    padding: 0;\n"])), function (props) {
+  return props.galleryWidth + 'px' || '100%';
+});
+
+var GalleryBody = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n    display: ", ";\n    flex-direction: column;\n    grid-template-columns: ", ";\n    grid-auto-rows: ", "px;\n    /* grid-auto-rows: ", "; */\n    column-gap: ", "px;\n    row-gap: ", "px;\n"])), function (props) {
+  return props.galleryBodyPadding;
+}, function (_ref2) {
+  var type = _ref2.type;
+  return type === 'flat' ? 'grid' : 'flex';
+}, function (props) {
+  return 'repeat(' + props.columnsNumber + ', 1fr)';
+}, function (props) {
+  return props.rowsHeight || 400;
+}, function (props) {
+  return props.rowsHeight + 'px' || 'minmax(min-content, 400px)';
+}, function (props) {
+  return props.galleryColumnGap;
+}, function (props) {
+  return props.galleryRowGap;
+});
+
+var Section = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    order: ", ";\n    column-gap: ", "px;\n    row-gap: ", "px;\n"])), function (_ref3) {
+  var priority = _ref3.priority;
+  return priority;
+}, function (props) {
+  return props.galleryColumnGap;
+}, function (props) {
+  return props.galleryRowGap;
+});
+
+var SectionBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: ", "px;\n    display: grid;\n    grid-template-columns: ", ";\n    column-gap: ", "px;\n    row-gap: ", "px;\n"])), function (props) {
+  return props.galleryBodyPadding;
+}, function (props) {
+  return 'repeat(' + props.columnsNumber + ', 1fr)';
+}, function (props) {
+  return props.galleryColumnGap;
+}, function (props) {
+  return props.galleryRowGap;
+});
+
+Gallery.defaultProps = {};
+var _default = Gallery;
+exports.default = _default;

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GallerySectioned = exports.GalleryFlat = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Gallery = _interopRequireDefault(require("./Gallery"));
+
+var _fakeData = require("../fakeData");
+
+var _commonStyles = require("../commonStyles");
+
+// Data
+// Styles
+var _default = {
+  title: 'Reusable components/Gallery',
+  component: _Gallery.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: "Reusable Gallery",
+    galleryControls: _fakeData.controls,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    columnsNumber: 3,
+    galleryColumnGap: 10,
+    controlsStyles: _commonStyles.headingControlsStyles,
+    cardStyle: "card-style-6",
+    customCardStyles: _commonStyles.galleryCardControlsStyles
+  }, args));
+};
+
+var GalleryFlat = Template.bind({});
+exports.GalleryFlat = GalleryFlat;
+GalleryFlat.args = {
+  data: _fakeData.data,
+  type: "flat",
+  cardControls: _fakeData.cardControls
+};
+var GallerySectioned = Template.bind({});
+exports.GallerySectioned = GallerySectioned;
+GallerySectioned.args = {
+  data: _fakeData.dataWithSections,
+  type: "sectioned",
+  cardControls: _fakeData.cardControls
+};

package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.js

@@ -0,0 +1 @@
+"use strict";

package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.stories.js

@@ -0,0 +1 @@
+"use strict";

package/dist/stories/Reusable Components/Lists/List.js

@@ -0,0 +1 @@
+"use strict";

package/dist/stories/Reusable Components/Lists/List.stories.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,72 @@
+"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 = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactMentions = require("react-mentions");
+
+var _templateObject;
+
+var _excluded = ["users", "value", "backgroundColor", "listColor", "listItemColor"];
+
+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 MentionArea = function MentionArea(_ref) {
+  var users = _ref.users,
+      value = _ref.value,
+      backgroundColor = _ref.backgroundColor,
+      listColor = _ref.listColor,
+      listItemColor = _ref.listItemColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  // const [value, setValue] = useState('')
+  // const handleOnChange =  (event, newValue, newPlainTextValue, mentions) => {
+  //     setValue(newValue)
+  //     console.log(event, newValue, newPlainTextValue, mentions)
+  // }
+  var handleOnChange = function handleOnChange(event, newValue, newPlainTextValue, mentions) {
+    props.handleOnChange(newValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    backgroundColor: backgroundColor,
+    listColor: listColor,
+    listItemColor: listItemColor
+  }, /*#__PURE__*/_react.default.createElement(_reactMentions.MentionsInput, {
+    className: "mention",
+    value: value,
+    onChange: handleOnChange
+  }, /*#__PURE__*/_react.default.createElement(_reactMentions.Mention, {
+    trigger: "@",
+    data: users
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    .mention{\n        border: none;\n\n        &__control{\n        background-color: ", ";\n        }\n\n        &__suggestions{\n\n            &__list{\n                background-color: ", ";\n                color: ", ";\n            }\n        }\n    }\n"])), function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var listColor = _ref3.listColor;
+  return listColor;
+}, function (_ref4) {
+  var listItemColor = _ref4.listItemColor;
+  return listItemColor;
+});
+
+MentionArea.defaultProps = {};
+var _default = MentionArea;
+exports.default = _default;