@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListSectioned = exports.ListFlat = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ReusableList = _interopRequireDefault(require("./ReusableList"));
+
+var _fakeData = require("../fakeData");
+
+// Components
+// Data
+var _default = {
+  title: 'Reusable components/List',
+  component: _ReusableList.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ReusableList.default, Object.assign({
+    listTitle: "Reusable List",
+    cardStyle: "card-style-1"
+  }, args));
+};
+
+var ListFlat = Template.bind({});
+exports.ListFlat = ListFlat;
+ListFlat.args = {
+  data: _fakeData.data,
+  type: "flat",
+  cardControls: _fakeData.cardControls,
+  headerStyles: {
+    padding: 10,
+    headerBackground: '#FE1744',
+    titleColor: '#ffff',
+    controlsStyles: {
+      dropdownBackground: 'black',
+      dropdownFontColor: 'white',
+      dropdownItemHoverColor: '#FE1744'
+    }
+  },
+  listControls: _fakeData.controls,
+  customCardStyles: {
+    controlsStyles: {
+      iconColor: 'black',
+      showOnHover: true
+    }
+  },
+  hideTitle: false
+};
+var ListSectioned = Template.bind({});
+exports.ListSectioned = ListSectioned;
+ListSectioned.args = {
+  data: _fakeData.dataWithSections,
+  type: "sectioned",
+  sectionHeaderStyles: {
+    cardTitleColor: 'white',
+    cardBackgroundColor: 'black',
+    cardPadding: 10
+  },
+  cardControls: _fakeData.cardControls,
+  headerStyles: {
+    padding: 10,
+    headerBackground: '#FE1744',
+    titleColor: '#ffff',
+    controlsStyles: {
+      dropdownBackground: 'black',
+      dropdownFontColor: 'white',
+      dropdownItemHoverColor: '#FE1744'
+    }
+  },
+  listControls: _fakeData.controls,
+  customCardStyles: {
+    controlsStyles: {
+      iconColor: 'black',
+      showOnHover: true
+    }
+  }
+};

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

@@ -0,0 +1,81 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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 SearchCard = function SearchCard(_ref) {
+  var _ref$list = _ref.list,
+      list = _ref$list === void 0 ? [] : _ref$list,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? '' : _ref$item;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      filteredList = _useState2[0],
+      setFilteredList = _useState2[1];
+
+  var getFilteredList = function getFilteredList(item) {
+    var a = list.filter(function (l) {
+      if (l.name.indexOf(item) !== -1) return l;
+    });
+    console.log('item:', item, 'filtered array:', a);
+    setFilteredList(a);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (item.length > 0) getFilteredList(item);else setFilteredList([]);
+  }, [item]);
+  return /*#__PURE__*/_react.default.createElement(PresetDivContainer, null, filteredList.length > 0 && filteredList.map(function (t, index) {
+    return /*#__PURE__*/_react.default.createElement(PresetDiv, {
+      key: index,
+      onClick: function onClick() {
+        var a = filteredList.filter(function (the, i) {
+          if (i === index) {
+            the.selected = !the.selected;
+            return the;
+          } else {
+            the.selected = false;
+            return the;
+          }
+        });
+        setFilteredList(a);
+      },
+      selected: t.selected
+    }, /*#__PURE__*/_react.default.createElement(CardImage, {
+      src: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg"
+    }), /*#__PURE__*/_react.default.createElement(CardTitle, null, t.name), /*#__PURE__*/_react.default.createElement(CardDescription, null, t.name));
+  }));
+};
+
+var PresetDivContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  /* justify-content: center; */\n  margin-bottom: 2%;\n  /* margin-left: 2%; */\n"])));
+
+var PresetDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 2%;\n  width: 30%;\n  display: flex;\n  flex-direction: column;\n  /* flex: 1; */\n  border: 1px solid white;\n\n  background: ", ";\n  :hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
+  return props.selected ? '#ccc' : 'white';
+});
+
+var CardImage = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 70%;\n  width: 100%;\n  :hover {\n    opacity: 0.8;\n  }\n"])));
+
+var CardTitle = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 18px;\n  font-weight: 400;\n  margin-top: 1%;\n  margin-left: 2%;\n"])));
+
+var CardDescription = _styledComponents.default.label(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 200;\n  margin-top: 1%;\n  margin-left: 2%;\n"])));
+
+var _default = SearchCard;
+exports.default = _default;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SearchCard = _interopRequireDefault(require("./SearchCard"));
+
+var _default = {
+  title: 'Components/SearchCard/Item',
+  component: _SearchCard.default
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_SearchCard.default, args);
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,48 @@
+"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 _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2;
+
+var _excluded = ["title", "discription", "controls"];
+
+var SpaceContainer = function SpaceContainer(_ref) {
+  var title = _ref.title,
+      discription = _ref.discription,
+      controls = _ref.controls,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var iconClicked = function iconClicked(action) {
+    console.log(action);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, !props.hideTitle && /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: title,
+    discription: discription,
+    controls: controls,
+    iconClicked: iconClicked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(Body, null, props.children));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    font-family: sans-serif;\n    padding: 0;\n"])));
+
+var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    justify-content: center;\n"])));
+
+SpaceContainer.defaultProps = {};
+var _default = SpaceContainer;
+exports.default = _default;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorSpace = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SpaceContainer = _interopRequireDefault(require("./SpaceContainer"));
+
+var _EditorComponent = _interopRequireDefault(require("../../Common Inputs/EditorComponent/EditorComponent"));
+
+var _fakeData = require("../fakeData");
+
+var data = {
+  blocks: [{
+    type: "header",
+    data: {
+      text: "Editor.js",
+      level: 1
+    }
+  }, {
+    type: "paragraph",
+    data: {
+      text: "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+    }
+  }, {
+    type: 'image',
+    "data": {
+      "file": {
+        "url": "https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"
+      },
+      "caption": "Caption Example",
+      "withBorder": false,
+      "withBackground": false,
+      "stretched": false
+    }
+  }, {
+    "type": "paragraph",
+    "data": {
+      "text": "Create a directory for your module, enter it and run <mark class=\"cdx-marker\">npm init</mark> command."
+    }
+  }, {
+    "type": "table",
+    "data": {
+      "withHeadings": true,
+      "content": [["Kine", "Pigs", "Chicken"], ["1 pcs", "3 pcs", "12 pcs"], ["100$", "200$", "150$"]]
+    }
+  }]
+};
+var _default = {
+  title: 'Reusable Components/Space Container',
+  component: _SpaceContainer.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, args, /*#__PURE__*/_react.default.createElement(_EditorComponent.default, {
+    data: data
+  }));
+};
+
+var EditorSpace = Template.bind({});
+exports.EditorSpace = EditorSpace;
+EditorSpace.args = {
+  title: "Space Title",
+  discription: "Lorem ipsum dolor sit amet consectetur.",
+  controls: _fakeData.cardControls,
+  headerStyles: {
+    padding: 10,
+    headerBackground: '#FE1744',
+    titleColor: '#ffff',
+    controlsStyles: {
+      iconsGap: 5
+    }
+  }
+};

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

@@ -0,0 +1,28 @@
+"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 _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Spinner = function Spinner(props) {
+  return /*#__PURE__*/_react.default.createElement(Loader, props, "Loading...");
+};
+
+var Loader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &,\n    &:before,\n    &:after {\n    border-radius: 50%;\n    width: 2.5em;\n    height: 2.5em;\n    -webkit-animation-fill-mode: both;\n    animation-fill-mode: both;\n    -webkit-animation: load7 1.8s infinite ease-in-out;\n    animation: load7 1.8s infinite ease-in-out;\n    }\n    & {\n    color: ", ";\n    font-size: 10px;\n    margin: 80px auto;\n    position: relative;\n    text-indent: -9999em;\n    -webkit-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    transform: translateZ(0);\n    -webkit-animation-delay: -0.16s;\n    animation-delay: -0.16s;\n    }\n    &:before,\n    &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    }\n    &:before {\n    left: -3.5em;\n    -webkit-animation-delay: -0.32s;\n    animation-delay: -0.32s;\n    }\n    &:after {\n    left: 3.5em;\n    }\n    @-webkit-keyframes load7 {\n    0%,\n    80%,\n    100% {\n        box-shadow: 0 2.5em 0 -1.3em;\n    }\n    40% {\n        box-shadow: 0 2.5em 0 0;\n    }\n    }\n    @keyframes load7 {\n    0%,\n    80%,\n    100% {\n        box-shadow: 0 2.5em 0 -1.3em;\n    }\n    40% {\n        box-shadow: 0 2.5em 0 0;\n    }\n    }\n"])), function (props) {
+  return props.color || 'white';
+});
+
+Spinner.defaultProps = {};
+var _default = Spinner;
+exports.default = _default;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spinner = exports.default = void 0;
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
+var _default = {
+  title: 'Reusable Components/Spinner/Spinner',
+  component: _Spinner.default
+};
+exports.default = _default;
+
+var spinner = function spinner(args) {
+  return /*#__PURE__*/React.createElement(_Spinner.default, args);
+};
+
+exports.spinner = spinner;

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

@@ -0,0 +1,51 @@
+"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 _ReusableHeader = _interopRequireDefault(require("../ReusableHeader/ReusableHeader"));
+
+var _templateObject, _templateObject2;
+
+var _excluded = ["widgetTitle", "widgetType", "widgetControls", "widgetProps"];
+
+var WidgetContainer = function WidgetContainer(_ref) {
+  var widgetTitle = _ref.widgetTitle,
+      widgetType = _ref.widgetType,
+      widgetControls = _ref.widgetControls,
+      widgetProps = _ref.widgetProps,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var child = (0, _util.getWidgetType)(widgetType, widgetProps);
+
+  var iconCliked = function iconCliked(action) {
+    console.log(action);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, widgetTitle && /*#__PURE__*/_react.default.createElement(_ReusableHeader.default, Object.assign({
+    title: widgetTitle,
+    controls: widgetControls,
+    iconClicked: iconCliked
+  }, props.headerStyles)), /*#__PURE__*/_react.default.createElement(Body, null, child));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n"])));
+
+var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    padding: 0;\n"])));
+
+WidgetContainer.defaultProps = {};
+var _default = WidgetContainer;
+exports.default = _default;

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MusicWidget = exports.ListWidget = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _WidgetContainer = _interopRequireDefault(require("./WidgetContainer"));
+
+var _fakeData = require("../fakeData");
+
+var Songs = [{
+  name: 'Music 1',
+  musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+  cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80'
+}, {
+  name: 'Music 2',
+  musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3',
+  cover: 'https://c4.wallpaperflare.com/wallpaper/729/961/256/black-minimalistic-music-piano-black-background-1680x1050-entertainment-music-hd-art-wallpaper-preview.jpg'
+}, {
+  name: 'Music 3',
+  musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3',
+  cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80'
+}];
+var _default = {
+  title: 'Reusable components/Widget Container',
+  component: _WidgetContainer.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, args);
+};
+
+var ListWidget = Template.bind({});
+exports.ListWidget = ListWidget;
+ListWidget.args = {
+  widgetType: "list",
+  widgetTitle: "test",
+  widgetControls: _fakeData.controls,
+  widgetProps: {
+    data: _fakeData.data,
+    cardStyle: "card-style-2",
+    type: "flat"
+  },
+  headerStyles: {
+    padding: 5,
+    headerBackground: '#FE1744',
+    titleColor: '#ffff',
+    controlsStyles: {
+      dropdownBackground: 'black',
+      dropdownFontColor: 'white',
+      dropdownItemHoverColor: '#FE1744'
+    }
+  }
+};
+var MusicWidget = Template.bind({});
+exports.MusicWidget = MusicWidget;
+MusicWidget.args = {
+  widgetType: "music player",
+  widgetTitle: "Music Player",
+  widgetControls: _fakeData.controls,
+  widgetProps: {
+    playlist: Songs
+  },
+  headerStyles: {
+    padding: 5,
+    headerBackground: '#FE1744',
+    titleColor: '#ffff',
+    controlsStyles: {
+      dropdownBackground: 'black',
+      dropdownFontColor: 'white',
+      dropdownItemHoverColor: '#FE1744'
+    }
+  }
+};

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listCardStyled = exports.galleryCardControlsStyles = exports.headingControlsStyles = void 0;
+var headingControlsStyles = {
+  iconSize: 20,
+  iconBackground: '',
+  iconBackgroundHover: '',
+  iconHoverColor: 'gray',
+  iconsGap: 5,
+  iconBorderRadius: '',
+  dropdownBackground: '#272727',
+  dropdownFontColor: '',
+  dropdownItemHoverColor: '#000000'
+};
+exports.headingControlsStyles = headingControlsStyles;
+var galleryCardControlsStyles = {
+  cardPadding: 10,
+  cardBorderColor: "#FE1744",
+  cardBorderSize: 1,
+  cardDescriptionColor: "#FE1744",
+  darkOnHover: true,
+  controlsStyles: {
+    showOnHover: true,
+    position: 'center',
+    iconBackground: "#272727",
+    dropdownBackground: "#272727",
+    dropdownFontColor: "white",
+    dropdownItemHoverColor: "#414141",
+    iconBackgroundHover: "#414141",
+    iconBorderRadius: 100,
+    iconSize: 25,
+    iconsGap: 10,
+    iconColor: '#FE1744'
+  }
+};
+exports.galleryCardControlsStyles = galleryCardControlsStyles;
+var listCardStyled = {
+  cardPadding: 10,
+  cardBorderColor: "#FE1744",
+  cardBorderSize: 1,
+  cardDescriptionColor: "#FE1744",
+  controlsStyles: {
+    showOnHover: true,
+    iconBackground: "#272727",
+    dropdownBackground: "#272727",
+    dropdownFontColor: "white",
+    dropdownItemHoverColor: "#414141",
+    iconBackgroundHover: "#414141"
+  }
+};
+exports.listCardStyled = listCardStyled;

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dataWithSections = exports.data = exports.cardControls = exports.controls = void 0;
+
+var _ai = require("react-icons/ai");
+
+var _io = require("react-icons/io");
+
+// Icons
+// List and Gallery controls
+var controls = [{
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineUserAdd, null),
+  action: 'add',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineDelete, null),
+  action: 'remove',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/React.createElement(_io.IoIosAirplane, null),
+  action: 'add',
+  name: 'Some Icon'
+}, {
+  icon: /*#__PURE__*/React.createElement(_io.IoIosAlarm, null),
+  action: 'alarm',
+  name: 'Another Icons'
+}, {
+  icon: /*#__PURE__*/React.createElement(_io.IoIosAlarm, null),
+  action: 'alarm',
+  name: 'Another Icons'
+}, {
+  icon: /*#__PURE__*/React.createElement(_io.IoIosAlarm, null),
+  action: 'alarm',
+  name: 'Another Icons'
+}]; // Cards Controls
+
+exports.controls = controls;
+var cardControls = [{
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineHeart, null),
+  action: 'like',
+  name: 'Add member'
+}, {
+  icon: /*#__PURE__*/React.createElement(_ai.AiOutlineAudioMuted, null),
+  action: 'mute',
+  name: 'Add member'
+}]; // List and Gallery data
+
+exports.cardControls = cardControls;
+var data = [{
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'Card Style 1',
+  description: 'Card style 1 description test'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'Card Style 2',
+  description: 'Card style 2 description test'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'Card Style 3',
+  description: 'Card style 3 description test'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'Card Style 4',
+  description: 'Card style 4 description test'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'Card Style 3',
+  description: 'Card style 3 description test'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'Card Style 4',
+  description: 'Card style 4 description test'
+}]; // List and Gallery data with sections
+
+exports.data = data;
+var dataWithSections = [{
+  title: 'Section one',
+  data: [{
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'Card Style 1',
+    description: 'Card style 1 description test'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'Card Style 2',
+    description: 'Card style 2 description test'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'Card Style 2',
+    description: 'Card style 2 description test'
+  }],
+  priority: 2
+}, {
+  title: 'Section Two',
+  data: [{
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'Card Style 3',
+    description: 'Card style 3 description test'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'Card Style 4',
+    description: 'Card style 4 description test'
+  }, {
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    title: 'Card Style 4',
+    description: 'Card style 4 description test'
+  }],
+  priority: 1
+}];
+exports.dataWithSections = dataWithSections;