@mohamed-karawia/library 0.1.0

package/dist/stories/Spaces/WelcomeSpace/WelcomeSpace.js

@@ -0,0 +1,74 @@
+"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 _BaseMaterial = _interopRequireDefault(require("../../Containers/BaseMaterial"));
+
+var _templateObject;
+
+var WelcomeSpace = function WelcomeSpace(props) {
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, props, /*#__PURE__*/_react.default.createElement(Image, {
+    src: props.image_src,
+    alt: props.image_alt
+  }), /*#__PURE__*/_react.default.createElement(Container1, null, /*#__PURE__*/_react.default.createElement(WelcomeContainer, null, /*#__PURE__*/_react.default.createElement("p", null, props.text), /*#__PURE__*/_react.default.createElement("span", null, props.text1)), /*#__PURE__*/_react.default.createElement(RulesContainer, null, /*#__PURE__*/_react.default.createElement("p", null, props.text2), /*#__PURE__*/_react.default.createElement("span", null, props.text3)), /*#__PURE__*/_react.default.createElement(CreationContainer, null, /*#__PURE__*/_react.default.createElement("p", null, props.text4), /*#__PURE__*/_react.default.createElement("span", null, props.text5))));
+};
+
+var Container = (0, _styledComponents.default)("div")({
+  display: "flex",
+  position: "relative",
+  height: "1237px",
+  width: "100%",
+  "align-items": "flex-start",
+  "flex-direction": "column"
+});
+var Image = (0, _styledComponents.default)("img")({
+  width: "100%",
+  "object-fit": "cover",
+  height: "300px"
+});
+
+var Container1 = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;,\n  width: 100%;\n  align-items: flex-start;\n  flex: 1;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 16px;\n"])));
+
+var WelcomeContainer = (0, _styledComponents.default)("div")({
+  display: "flex",
+  "flex-direction": "column",
+  "justify-content": "flex-start",
+  "align-items": "flex-start"
+});
+var RulesContainer = (0, _styledComponents.default)("div")({
+  display: "flex",
+  "flex-direction": "column",
+  "justify-content": "flex-start",
+  "align-items": "flex-start",
+  "margin-top": 16
+});
+var CreationContainer = (0, _styledComponents.default)("div")({
+  display: "flex",
+  "flex-direction": "column",
+  "justify-content": "flex-start",
+  "align-items": "flex-start",
+  "margin-top": 16
+});
+WelcomeSpace.defaultProps = {
+  image_src: "https://play.teleporthq.io/static/svg/default-img.svg",
+  image_alt: "image",
+  text: "Welcome To My World",
+  text1: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  text2: "Rules",
+  text3: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  text4: "Created At",
+  text5: "January 15, 2019"
+};
+var _default = WelcomeSpace;
+exports.default = _default;

package/dist/stories/Spaces/WelcomeSpace/WelcomeSpace.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 _WelcomeSpace = _interopRequireDefault(require("./WelcomeSpace"));
+
+var _default = {
+  title: 'Spaces/Welcome',
+  component: _WelcomeSpace.default
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_WelcomeSpace.default, args);
+};
+
+exports.Default = Default;

package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js

@@ -0,0 +1,151 @@
+"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 _CreateVideoAlbum = _interopRequireDefault(require("../../Forms/CreateVideoAlbum/CreateVideoAlbum"));
+
+var _ai = require("react-icons/ai");
+
+var _templateObject;
+
+var _excluded = ["videoAlbums", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "countColor", "countFontSize"];
+
+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.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete album'
+}];
+var galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Album'
+}];
+
+var AlbumsGallery = function AlbumsGallery(_ref) {
+  var videoAlbums = _ref.videoAlbums,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      cardTitleColor = _ref.cardTitleColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      countColor = _ref.countColor,
+      countFontSize = _ref.countFontSize,
+      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 = {
+    cardBackgroundColor: cardBackgroundColor,
+    cardTitleColor: cardTitleColor,
+    cardTitleFontSize: cardTitleFontSize,
+    countColor: countColor,
+    countFontSize: countFontSize,
+    controlsStyles: {
+      showOnHover: true,
+      position: 'absolute',
+      iconBackground: "transparent",
+      dropdownBackground: "white",
+      dropdownFontColor: "#FE1744",
+      dropdownItemHoverColor: "#FE1744",
+      iconBackgroundHover: "white",
+      iconBorderRadius: 100,
+      iconSize: 20,
+      iconsGap: 10,
+      maxIcons: 0,
+      iconColor: '#FE1744',
+      iconHoverColor: 'white',
+      dropdownFontSize: 10
+    }
+  };
+
+  var onIconClicked = function onIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    setShowModal(false);
+    props.onAddAlbum(album);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, {
+    galleryTitle: "Video Albums",
+    data: videoAlbums,
+    type: "flat",
+    cardStyle: "card-style-6",
+    columnsNumber: 3,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    iconClicked: onIconClicked,
+    galleryColumnGap: 10,
+    galleryRowGap: 20,
+    galleryControls: galleryControls,
+    cardControls: cardControls,
+    cardClicked: function cardClicked() {
+      return null;
+    },
+    cardIconClicked: cardIconClicked,
+    customCardStyles: cardStyles
+  }), /*#__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(_CreateVideoAlbum.default, {
+    saveHandler: onAddAlbum,
+    cancelHandler: cancelHandler
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    \n"])));
+
+AlbumsGallery.defaultProps = {};
+var _default = AlbumsGallery;
+exports.default = _default;

package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.js

@@ -0,0 +1,101 @@
+"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 _AlbumsGallery = _interopRequireDefault(require("./AlbumsGallery"));
+
+var _util = require("../../helpers/util");
+
+var _album = _interopRequireDefault(require("../../assets/images/album1.jpg"));
+
+var _album2 = _interopRequireDefault(require("../../assets/images/album2.jpg"));
+
+var _album3 = _interopRequireDefault(require("../../assets/images/album3.jpg"));
+
+var _album4 = _interopRequireDefault(require("../../assets/images/album4.jpg"));
+
+var _album5 = _interopRequireDefault(require("../../assets/images/album5.jpg"));
+
+var _album6 = _interopRequireDefault(require("../../assets/images/album6.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/Albums Gallery',
+  component: _AlbumsGallery.default
+};
+exports.default = _default;
+
+var Gallery = function Gallery(args) {
+  var _useState = (0, _react.useState)([{
+    img: _album.default,
+    title: 'Album 1',
+    count: '24'
+  }, {
+    img: _album2.default,
+    title: 'Album 2',
+    count: '24'
+  }, {
+    img: _album3.default,
+    title: 'Album 3',
+    count: '24'
+  }, {
+    img: _album4.default,
+    title: 'Album 4',
+    count: '24'
+  }, {
+    img: _album5.default,
+    title: 'Album 5',
+    count: '24'
+  }, {
+    img: _album6.default,
+    title: 'Album 6',
+    count: '24'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      albums = _useState2[0],
+      setAlbums = _useState2[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        onDeleteAlbum(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onAddAlbum = function onAddAlbum(album) {
+    var newAlbum = {
+      img: album.cover.meta.previewUrl,
+      title: album.title,
+      count: '55'
+    };
+    setAlbums((0, _util.addObjectToArray)(albums, newAlbum));
+  };
+
+  var onDeleteAlbum = function onDeleteAlbum(index) {
+    setAlbums((0, _util.deleteFromArrayByIndex)(albums, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_AlbumsGallery.default, Object.assign({
+    videoAlbums: albums,
+    onAddAlbum: onAddAlbum,
+    cardIconClicked: cardIconClicked
+  }, args));
+};
+
+exports.Gallery = Gallery;

package/dist/stories/VideoAlbum/Comments/Comments.js

@@ -0,0 +1,58 @@
+"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 _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _templateObject;
+
+var _excluded = ["comments", "cardPadding", "imgSize", "cardTitleFontSize", "cardTitleColor", "contentGap", "cardBackgroundColor"];
+
+var Comments = function Comments(_ref) {
+  var comments = _ref.comments,
+      cardPadding = _ref.cardPadding,
+      imgSize = _ref.imgSize,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      cardTitleColor = _ref.cardTitleColor,
+      contentGap = _ref.contentGap,
+      cardBackgroundColor = _ref.cardBackgroundColor,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    data: comments,
+    type: "flat",
+    cardStyle: "card-style-1",
+    customCardStyles: {
+      cardPadding: cardPadding,
+      imgSize: imgSize,
+      cardTitleFontSize: cardTitleFontSize,
+      cardTitleColor: cardTitleColor,
+      contentGap: contentGap,
+      cardBackgroundColor: cardBackgroundColor
+    }
+  }));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+Comments.defaultProps = {
+  cardPadding: 10,
+  imgSize: 50,
+  cardTitleFontSize: 12,
+  cardTitleColor: '#353535',
+  cardBackgroundColor: 'white'
+};
+var _default = Comments;
+exports.default = _default;

package/dist/stories/VideoAlbum/Comments/Comments.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.videoComments = exports.default = void 0;
+
+var _Comments = _interopRequireDefault(require("./Comments"));
+
+var _default = {
+  title: 'Video Album/Comments',
+  component: _Comments.default
+};
+exports.default = _default;
+var comments = [{
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}, {
+  img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+  title: 'User Name',
+  description: 'This is A test for comments on videos.'
+}];
+
+var videoComments = function videoComments(args) {
+  return /*#__PURE__*/React.createElement(_Comments.default, Object.assign({
+    comments: comments
+  }, args));
+};
+
+exports.videoComments = videoComments;