@mohamed-karawia/react-storybook 0.1.1

package/dist/stories/Pages/Library/Folders/Library.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _Folders = _interopRequireDefault(require("../../../Library/Folders/Folders"));
+
+var _util = require("../../../helpers/util");
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+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 Library = function Library(props) {
+  var _useState = (0, _react.useState)([{
+    title: 'Folder one',
+    description: 'Discription for folder one'
+  }, {
+    title: 'Folder two',
+    description: 'Discription for folder two'
+  }, {
+    title: 'Folder three',
+    description: 'Discription for folder three'
+  }, {
+    title: 'Folder four',
+    description: 'Discription for folder four'
+  }, {
+    title: 'Folder five',
+    description: 'Discription for folder five'
+  }, {
+    title: 'Folder six',
+    description: 'Discription for folder six'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      folders = _useState2[0],
+      setFolders = _useState2[1];
+
+  var onAddFolder = function onAddFolder(folder) {
+    setFolders((0, _util.addObjectToArray)(folders, folder));
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        deleteFolder(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var deleteFolder = function deleteFolder(index) {
+    setFolders((0, _util.deleteFromArrayByIndex)(folders, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "logo",
+    widgetProps: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Music Album",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_Folders.default, {
+    folders: folders,
+    folderTitle: "Your Folders",
+    columnsNumber: 3,
+    onAddFolder: onAddFolder,
+    cardIconClicked: cardIconClicked,
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#ff2d2d',
+      titleColor: 'white',
+      controlsStyles: {
+        iconSize: 25
+      }
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = Library;
+exports.default = _default;

package/dist/stories/Pages/Library/Folders/Library.stories.js

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

package/dist/stories/Pages/Library/Notes/Notes.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _Notes = _interopRequireDefault(require("../../../Library/Notes/Notes"));
+
+var _util = require("../../../helpers/util");
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+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 Notes = function Notes(props) {
+  var _useState = (0, _react.useState)([{
+    title: 'Study notes',
+    date: '15/11/2020'
+  }, {
+    title: 'Music notes',
+    date: '14/12/2020'
+  }, {
+    title: 'Workout notes',
+    date: '5/8/2021'
+  }, {
+    title: 'Gaming notes',
+    date: '14/4/2023'
+  }, {
+    title: 'Working notes',
+    date: '5/6/2021'
+  }]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      notes = _useState2[0],
+      setNotes = _useState2[1];
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        deleteNote(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var onAddNote = function onAddNote(folder) {
+    setNotes((0, _util.addObjectToArray)(notes, folder));
+  };
+
+  var deleteNote = function deleteNote(index) {
+    setNotes((0, _util.deleteFromArrayByIndex)(notes, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "logo",
+    widgetProps: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Music Album",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_Notes.default, {
+    onAddNote: onAddNote,
+    cardIconClicked: cardIconClicked,
+    notes: notes
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null)));
+};
+
+var _default = Notes;
+exports.default = _default;

package/dist/stories/Pages/Library/Notes/Notes.stories.js

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

package/dist/stories/Pages/Music/MusicAlbum/Music.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Body = _interopRequireDefault(require("../../../Layout/Body/Body"));
+
+var _Left = _interopRequireDefault(require("../../../Layout/Left/Left"));
+
+var _Center = _interopRequireDefault(require("../../../Layout/Center/Center"));
+
+var _Right = _interopRequireDefault(require("../../../Layout/Right/Right"));
+
+var _Navbar = _interopRequireDefault(require("../../../Navbar/Navbar"));
+
+var _ViewAlbum = _interopRequireDefault(require("../../../Music Album/ViewAlbum/ViewAlbum"));
+
+var _BaseMaterial = _interopRequireDefault(require("../../../Containers/BaseMaterial"));
+
+var _SpaceContainer = _interopRequireDefault(require("../../../Reusable Components/SpaceContainer/SpaceContainer"));
+
+var _WidgetContainer = _interopRequireDefault(require("../../../Reusable Components/WidgetContainer/WidgetContainer"));
+
+var _styles = _interopRequireDefault(require("../../ViewWorld/styles.json"));
+
+var _constatnts = require("../../ViewWorld/constatnts");
+
+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 Music = function Music(props) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentSong = _useState2[0],
+      setCurrentSong = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([{
+    index: 0,
+    cover: _music4.default,
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    title: 'Plans We Made',
+    description: 'Son Lux',
+    time: '5:20'
+  }, {
+    index: 2,
+    cover: _music6.default,
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    title: 'Still Loving You',
+    description: 'Scorpions',
+    time: '4:20'
+  }, {
+    index: 1,
+    cover: _music5.default,
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    title: 'Night',
+    description: 'Frank Ocean',
+    time: '5:20'
+  }, {
+    index: 3,
+    cover: _music.default,
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    title: 'Somebody Else',
+    description: '1975',
+    time: '5:20'
+  }, {
+    index: 4,
+    cover: _music3.default,
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    title: 'Enter Sandman',
+    description: 'Metallica',
+    time: '5:20'
+  }, {
+    index: 5,
+    cover: _music2.default,
+    musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3',
+    title: 'November Rain',
+    description: "Guns N' Roses",
+    time: '5:20'
+  }]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      album = _useState4[0],
+      setAlbum = _useState4[1];
+
+  var nextSong = function nextSong() {
+    if (currentSong < album.length - 1) {
+      setCurrentSong(currentSong + 1);
+    }
+  };
+
+  var prevSong = function prevSong() {
+    if (currentSong !== 0) {
+      setCurrentSong(currentSong - 1);
+    }
+  };
+
+  var onPlaySong = function onPlaySong(index) {
+    setCurrentSong(index);
+  };
+
+  var onAddSong = function onAddSong(song) {
+    var newSong = {
+      song: song.song.file,
+      cover: song.cover.meta.previewUrl,
+      title: song.title,
+      description: song.artist,
+      time: new Date(song.song.meta.duration * 1000).toISOString().substr(14, 5)
+    };
+    setAlbum((0, _util.addObjectToArray)(album, newSong));
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    switch (action) {
+      case 'delete':
+        deleteSonngFromAlbum(index);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var deleteSonngFromAlbum = function deleteSonngFromAlbum(index) {
+    setAlbum((0, _util.deleteFromArrayByIndex)(album, index));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_BaseMaterial.default, Object.assign({}, _styles.default.containerStyle, props), /*#__PURE__*/_react.default.createElement(_Navbar.default, null), /*#__PURE__*/_react.default.createElement(_Body.default, _styles.default.bodyStyle, /*#__PURE__*/_react.default.createElement(_Left.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "logo",
+    widgetProps: {
+      imgUrl: props.imgUrl
+    }
+  }), /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "list",
+    widgetProps: {
+      listTitle: 'Your Spaces',
+      type: 'sectioned',
+      data: _constatnts.SPACES,
+      cardStyle: 'card-style-3',
+      sectionHeaderStyles: {
+        cardBorderSize: 2,
+        cardPadding: 2,
+        cardBackgroundColor: '#fff',
+        cardBorderColor: 'black'
+      },
+      customCardStyles: {
+        cardPadding: 6,
+        cardTitleFontSize: 15,
+        cardBackgroundColor: 'black',
+        cardTitleColor: 'white',
+        onHoverBackgroundColor: '#F6891F',
+        controlsStyles: {
+          showOnHover: true
+        }
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Center.default, null, /*#__PURE__*/_react.default.createElement(_SpaceContainer.default, {
+    title: "Music Album",
+    discription: "Lorem ipsum dolor sit amet consectetur.",
+    hideTitle: true
+  }, /*#__PURE__*/_react.default.createElement(_ViewAlbum.default, {
+    album: album,
+    onAddSong: onAddSong,
+    cardIconClicked: cardIconClicked,
+    cardClicked: onPlaySong
+  }))), /*#__PURE__*/_react.default.createElement(_Right.default, null, /*#__PURE__*/_react.default.createElement(_WidgetContainer.default, {
+    widgetType: "music player",
+    controlsStyles: {
+      iconColor: 'black',
+      dropdownBackground: 'black',
+      dropdownFontColor: 'white'
+    },
+    widgetProps: {
+      playlist: album,
+      nextSong: nextSong,
+      prevSong: prevSong,
+      currentSong: currentSong,
+      borderRadius: '10',
+      primaryColor: 'black'
+    },
+    headerStyles: {
+      controlsStyles: {
+        iconColor: 'red'
+      }
+    }
+  }))));
+};
+
+var _default = Music;
+exports.default = _default;

package/dist/stories/Pages/Music/MusicAlbum/Music.stories.js

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