@mohamed-karawia/library 0.1.0

package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js

@@ -0,0 +1,150 @@
+"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 _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _AddVideo = _interopRequireDefault(require("../../Forms/AddVideo/AddVideo"));
+
+var _ai = require("react-icons/ai");
+
+var _templateObject;
+
+var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor"];
+
+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 cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillPlayCircle, null),
+  action: 'play',
+  name: 'play video'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete video'
+}];
+var galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Album'
+}];
+
+var ViewAlbum = function ViewAlbum(_ref) {
+  var album = _ref.album,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      cardTitleColor = _ref.cardTitleColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      descColor = _ref.descColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var cardStyles = {
+    darkOnHover: true,
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleFontSize: cardTitleFontSize,
+    cardTitleColor: cardTitleColor,
+    descColor: descColor,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'center',
+      iconBackground: "transparent",
+      dropdownBackground: "#272727",
+      dropdownFontColor: "white",
+      dropdownItemHoverColor: "#414141",
+      iconBorderRadius: 100,
+      iconSize: 25,
+      iconsGap: 10,
+      iconColor: 'white'
+    }
+  };
+
+  var onHeaderIconClicked = function onHeaderIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var onAddVideo = function onAddVideo(album) {
+    setShowModal(false);
+    props.onAddVideo(album);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: "Video Album",
+    data: album,
+    type: "flat",
+    cardStyle: "card-style-6",
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    columnsNumber: 3,
+    galleryColumnGap: 10,
+    galleryRowGap: 20,
+    galleryControls: galleryControls,
+    iconClicked: onHeaderIconClicked,
+    cardControls: cardControls,
+    cardClicked: function cardClicked() {
+      return null;
+    },
+    cardIconClicked: cardIconClicked,
+    customCardStyles: cardStyles
+  }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showModal,
+    closeModal: function closeModal() {
+      return setShowModal(false);
+    },
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AddVideo.default, {
+    saveHandler: onAddVideo,
+    cancelHandler: cancelHandler
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+ViewAlbum.defaultProps = {};
+var _default = ViewAlbum;
+exports.default = _default;

package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Gallery = exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ViewAlbum = _interopRequireDefault(require("./ViewAlbum"));
+
+var _util = require("../../helpers/util");
+
+var _music = _interopRequireDefault(require("../../assets/images/music1.jpg"));
+
+var _music2 = _interopRequireDefault(require("../../assets/images/music2.jpg"));
+
+var _music3 = _interopRequireDefault(require("../../assets/images/music3.jpg"));
+
+var _music4 = _interopRequireDefault(require("../../assets/images/music4.jpg"));
+
+var _music5 = _interopRequireDefault(require("../../assets/images/music5.jpg"));
+
+var _music6 = _interopRequireDefault(require("../../assets/images/music6.jpg"));
+
+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: 'Video Album/Album Gallery',
+  component: _ViewAlbum.default
+};
+exports.default = _default;
+
+var Gallery = function Gallery(args) {
+  var _useState = (0, _react.useState)([{
+    index: 0,
+    img: _music4.default,
+    title: 'Plans We Made',
+    description: 'Son Lux',
+    time: '5:20'
+  }, {
+    index: 2,
+    img: _music6.default,
+    title: 'Still Loving You',
+    description: 'Scorpions',
+    time: '4:20'
+  }, {
+    index: 1,
+    img: _music5.default,
+    title: 'Night',
+    description: 'Frank Ocean',
+    time: '5:20'
+  }, {
+    index: 3,
+    img: _music.default,
+    title: 'Somebody Else',
+    description: '1975',
+    time: '5:20'
+  }, {
+    index: 4,
+    img: _music3.default,
+    title: 'Enter Sandman',
+    description: 'Metallica',
+    time: '5:20'
+  }, {
+    index: 5,
+    img: _music2.default,
+    title: 'November Rain',
+    description: "Guns N' Roses",
+    time: '5:20'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      album = _useState2[0],
+      setAlbum = _useState2[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        deleteFromAlbums(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    var newAlbum = {
+      img: album.cover.preview,
+      title: album.title,
+      description: album.artist
+    };
+    setAlbum((0, _util.addObjectToArray)(album, newAlbum));
+  };
+
+  var deleteFromAlbums = function deleteFromAlbums(index) {
+    setAlbum((0, _util.deleteFromArrayByIndex)(album, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, Object.assign({
+    album: album,
+    cardIconClicked: cardIconClicked,
+    onAddAlbum: onAddAlbum
+  }, args));
+};
+
+exports.Gallery = Gallery;

package/dist/stories/Widgets/LogoWidget/LogoWidget.js

@@ -0,0 +1,32 @@
+"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 LogoWidget = function LogoWidget(_ref) {
+  var imgUrl = _ref.imgUrl;
+  return /*#__PURE__*/_react.default.createElement(Image, {
+    src: imgUrl
+  });
+};
+
+LogoWidget.defaultProps = {
+  imgUrl: ""
+};
+
+var Image = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
+
+var _default = LogoWidget;
+exports.default = _default;

package/dist/stories/Widgets/LogoWidget/LogoWidget.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CargoSprint = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _LogoWidget = _interopRequireDefault(require("./LogoWidget"));
+
+var _default = {
+  title: "Widgets/Logo",
+  component: _LogoWidget.default
+};
+exports.default = _default;
+
+var CargoSprint = function CargoSprint() {
+  return /*#__PURE__*/_react.default.createElement(_LogoWidget.default, {
+    imgUrl: "https://cargosprint.com/assets/img/cs-logos/Logo-CargoSprint_horizontal-color.png"
+  });
+};
+
+exports.CargoSprint = CargoSprint;

package/dist/stories/Widgets/MusicPlayer/MusicPlayer.js

@@ -0,0 +1,49 @@
+"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 _reactJinkeMusicPlayer = _interopRequireDefault(require("react-jinke-music-player"));
+
+require("react-jinke-music-player/assets/index.css");
+
+var _templateObject;
+
+var MusicPlayer = function MusicPlayer(props) {
+  return /*#__PURE__*/_react.default.createElement(MusicPlayers, Object.assign({
+    showDownload: false,
+    autoPlay: false,
+    showMediaSession: true
+  }, props));
+};
+
+var MusicPlayers = (0, _styledComponents.default)(_reactJinkeMusicPlayer.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    button.rc-switch.theme-switch-container.rc-switch-checked{\n        background-color: ", " !important;\n        border: 1px solid ", ";\n    }\n\n   .rc-slider-track,\n   .rc-slider-handle{\n    background-color: ", " !important;\n  }\n\n  .audio-lists-panel-content .audio-item.playing, .audio-lists-panel-content .audio-item.playing svg{\n      color: ", " !important;\n  }\n\n  .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing span.player-name,\n    .react-jinke-music-player-main.light-theme .audio-lists-panel .audio-item.playing svg{\n    color: ", " !important;\n  }\n   \n   .react-jinke-music-player-mobile-progress .rc-slider-handle,\n   .react-jinke-music-player-mobile-progress .rc-slider-track{\n    background-color: ", " !important;\n   }\n  \n  svg{\n    fill: ", ";\n  }\n\n  svg:hover{\n    fill: ", ";\n  }\n\n\n"])), function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.hoverColor;
+});
+MusicPlayer.defaultProps = {};
+var _default = MusicPlayers;
+exports.default = _default;

package/dist/stories/Widgets/MusicPlayer/MusicPlayer.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Music = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MusicPlayer = _interopRequireDefault(require("./MusicPlayer"));
+
+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: 'widgets/Music Player',
+  components: _MusicPlayer.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_MusicPlayer.default, Object.assign({
+    audioLists: Songs
+  }, args));
+};
+
+var Music = Template.bind({});
+exports.Music = Music;
+Music.args = {
+  primaryColor: '',
+  hoverColor: ''
+};

package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js

@@ -0,0 +1,93 @@
+"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 _reactH5AudioPlayer = _interopRequireDefault(require("react-h5-audio-player"));
+
+require("react-h5-audio-player/lib/styles.css");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["currentSong"];
+
+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 MusicPlayerWidget = function MusicPlayerWidget(_ref) {
+  var currentSong = _ref.currentSong,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var musicPlayerHeading = /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(CoverWrapper, null, /*#__PURE__*/_react.default.createElement(Img, {
+    src: props.playlist[currentSong].cover,
+    alt: props.playlist[currentSong],
+    borderRadius: props.borderRadius
+  })), /*#__PURE__*/_react.default.createElement(MusicName, props, props.playlist[currentSong].title), /*#__PURE__*/_react.default.createElement(ArtistName, null, props.playlist[currentSong].description));
+
+  return /*#__PURE__*/_react.default.createElement(MusicPlayer, Object.assign({
+    autoPlay: "none",
+    src: props.playlist[currentSong].musicSrc,
+    onPlay: function onPlay(e) {
+      return console.log("onPlay");
+    },
+    layout: "stacked",
+    header: musicPlayerHeading,
+    showSkipControls: true,
+    onClickPrevious: function onClickPrevious() {
+      return props.prevSong();
+    },
+    onClickNext: function onClickNext() {
+      return props.nextSong();
+    }
+  }, props));
+};
+
+var MusicPlayer = (0, _styledComponents.default)(_reactH5AudioPlayer.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    font-family: ", ";\n    background-color:  ", ";\n    border-radius: ", ";\n    padding: ", "px;\n    width: ", "px;\n    box-shadow: ", ";\n\n    .rhap_progress-filled,\n    .rhap_progress-indicator {\n        background-color: ", ";\n    }\n    \n    .rhap_repeat-button,\n    .rhap_main-controls-button,\n    .rhap_volume-button,\n    .rhap_time {\n        color: ", ";\n    }\n    \n    .rhap_download-progress,\n    .rhap_volume-bar {\n        background-color: gray ;\n    }\n    \n\n    .rhap_volume-indicator {\n        background: ", ";\n    }\n\n"])), function (props) {
+  return props.fontFamily || 'inherit';
+}, function (props) {
+  return props.backgroundColor || 'inherit';
+}, function (props) {
+  return props.borderRadius ? props.borderRadius + 'px' : 'inherit';
+}, function (props) {
+  return props.padding ? props.padding + 'px' : 'inherit';
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.boxShadow || "";
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
+});
+
+var Header = _styledComponents.default.header(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px;\n"])));
+
+var CoverWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+var Img = _styledComponents.default.img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    height: inherit;\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    object-position: center;\n"])));
+
+var MusicName = _styledComponents.default.h3(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    font-size: ", "px;\n"])), function (props) {
+  return props.fontColor;
+}, function (props) {
+  return props.fontSize;
+});
+
+var ArtistName = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin: 0;\n    color: #7a7a7a;\n    text-transform: capitalize;\n"])));
+
+var _default = MusicPlayerWidget;
+exports.default = _default;

package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MusicWidget = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MusicPlayerWidget = _interopRequireDefault(require("./MusicPlayerWidget"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+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: 'widgets/Music Player Widget',
+  compomemt: _MusicPlayerWidget.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, null, /*#__PURE__*/_react.default.createElement(_MusicPlayerWidget.default, Object.assign({
+    playlist: Songs
+  }, args)));
+};
+
+var MusicWidget = Template.bind({});
+exports.MusicWidget = MusicWidget;
+MusicWidget.args = {
+  fontFamily: '',
+  backgroundColor: '',
+  primaryColor: '',
+  borderRadius: '',
+  padding: '',
+  width: '',
+  fontColor: '',
+  fontSize: ''
+};

package/dist/stories/Widgets/SpacesList/SpacesList.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+var _excluded = ["children"];
+
+var SpacesList = function SpacesList(_ref) {
+  var children = _ref.children,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({
+    fill: true
+  }, rest), children);
+};
+
+SpacesList.defaultProps = {};
+var _default = SpacesList;
+exports.default = _default;

package/dist/stories/Widgets/SpacesList/SpacesList.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FewItems = exports.OneItem = exports.NoItems = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SpacesList = _interopRequireDefault(require("./SpacesList"));
+
+var _SpacesListItem = _interopRequireDefault(require("./SpacesListItem"));
+
+var _default = {
+  title: "Widgets/SpacesList/List",
+  component: _SpacesList.default
+};
+exports.default = _default;
+
+var NoItems = function NoItems(args) {
+  return /*#__PURE__*/_react.default.createElement(_SpacesList.default, args);
+};
+
+exports.NoItems = NoItems;
+
+var OneItem = function OneItem(args) {
+  return /*#__PURE__*/_react.default.createElement(_SpacesList.default, args, /*#__PURE__*/_react.default.createElement(_SpacesListItem.default, {
+    marginTop: args.itemSpacing
+  }));
+};
+
+exports.OneItem = OneItem;
+
+var FewItems = function FewItems(args) {
+  return /*#__PURE__*/_react.default.createElement(_SpacesList.default, args, /*#__PURE__*/_react.default.createElement(_SpacesListItem.default, null), /*#__PURE__*/_react.default.createElement(_SpacesListItem.default, {
+    spaceName: "Welcome",
+    marginTop: args.itemSpacing
+  }), /*#__PURE__*/_react.default.createElement(_SpacesListItem.default, {
+    spaceName: "Announcements",
+    marginTop: args.itemSpacing
+  }), /*#__PURE__*/_react.default.createElement(_SpacesListItem.default, {
+    spaceName: "Client Feedback",
+    marginTop: args.itemSpacing
+  }), /*#__PURE__*/_react.default.createElement(_SpacesListItem.default, {
+    spaceName: "Daily Video Call",
+    marginTop: args.itemSpacing
+  }));
+};
+
+exports.FewItems = FewItems;