@mohamed-karawia/library 0.1.0

package/dist/stories/Layout/Left/Left.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 _Left = _interopRequireDefault(require("./Left"));
+
+var _default = {
+  title: "Layout/Left",
+  component: _Left.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Left.default, props, /*#__PURE__*/_react.default.createElement("p", null, "Left"));
+};
+
+exports.Default = Default;

package/dist/stories/Layout/Right/Right.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var Right = function Right(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(StyledRight, null, children);
+};
+
+var _default = Right;
+exports.default = _default;
+var StyledRight = (0, _styledComponents.default)('div')({
+  flex: '3',
+  display: 'flex',
+  'align-items': 'flex-end',
+  'flex-direction': 'column',
+  padding: '0 10px'
+});

package/dist/stories/Layout/Right/Right.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 _Right = _interopRequireDefault(require("./Right"));
+
+var _default = {
+  title: "Layout/Right",
+  component: _Right.default
+};
+exports.default = _default;
+
+var Default = function Default(props) {
+  return /*#__PURE__*/_react.default.createElement(_Right.default, props, /*#__PURE__*/_react.default.createElement("p", null, "Right"));
+};
+
+exports.Default = Default;

package/dist/stories/Library/CreateFolder/CreateFolder.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Yup = _interopRequireWildcard(require("yup"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+var _CustomTextarea = _interopRequireDefault(require("../../Common Inputs/CustomTextarea/CustomTextarea"));
+
+var _excluded = ["saveBtnText", "cancelBtnText"];
+
+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 CreateFolder = function CreateFolder(_ref) {
+  var _Object$assign;
+
+  var saveBtnText = _ref.saveBtnText,
+      cancelBtnText = _ref.cancelBtnText,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var initialValues = {
+    title: '',
+    description: ''
+  };
+  var formSchema = Yup.object().shape({
+    title: Yup.string().required("Required")
+  });
+  var sections = [{
+    title: "Folder Name",
+    body: [/*#__PURE__*/_react.default.createElement(_TextField.default, {
+      label: "Title",
+      name: "title"
+    }), /*#__PURE__*/_react.default.createElement(_CustomTextarea.default, {
+      label: "Discription",
+      name: "description"
+    })],
+    hideTitle: true
+  }];
+
+  var onCreate = function onCreate(values) {
+    var folder = (0, _objectSpread2.default)({}, values);
+    var date = new Date();
+    folder.date = date.toISOString().split('T')[0];
+    props.saveHandler(folder);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    props.cancelHandler();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_ReusableForm.default, Object.assign((_Object$assign = {
+    formTitle: "Add Photo",
+    initialValues: initialValues,
+    formSchema: formSchema,
+    sections: sections,
+    headerStyles: props.headerStyles,
+    saveBtnText: saveBtnText,
+    cancelBtnText: cancelBtnText,
+    saveHandler: onCreate,
+    cancelHandler: cancelHandler
+  }, (0, _defineProperty2.default)(_Object$assign, "headerStyles", {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  }), (0, _defineProperty2.default)(_Object$assign, "sectionPadding", 10), (0, _defineProperty2.default)(_Object$assign, "bodyRowGap", 10), _Object$assign), props.formStyles));
+};
+
+CreateFolder.defaultProps = {};
+var _default = CreateFolder;
+exports.default = _default;

package/dist/stories/Library/CreateFolder/CreateFolder.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Folder = exports.default = void 0;
+
+var _CreateFolder = _interopRequireDefault(require("./CreateFolder"));
+
+var _default = {
+  title: 'Library/Create New Folder',
+  component: _CreateFolder.default
+};
+exports.default = _default;
+var formStyles = {
+  headerStyles: {
+    padding: 10,
+    headerBackground: 'black',
+    titleColor: '#ffff'
+  },
+  sectionPadding: 10,
+  bodyRowGap: 10
+};
+
+var saveHandler = function saveHandler(photo) {
+  console.log(photo);
+};
+
+var cancelHandler = function cancelHandler() {
+  console.log('Canceled');
+};
+
+var Folder = function Folder(args) {
+  return /*#__PURE__*/React.createElement(_CreateFolder.default, Object.assign({
+    saveHandler: saveHandler,
+    cancelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    formStyles: formStyles
+  }, args));
+};
+
+exports.Folder = Folder;

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

@@ -0,0 +1,126 @@
+"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 _ai = require("react-icons/ai");
+
+var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery/Gallery"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _CreateFolder = _interopRequireDefault(require("../CreateFolder/CreateFolder"));
+
+var _templateObject;
+
+var _excluded = ["folders", "folderTitle", "columnsNumber", "columnGap", "rowGap", "cardClicked", "iconColor", "headerStyles"];
+
+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 galleryControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Photo'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var Folders = function Folders(_ref) {
+  var folders = _ref.folders,
+      folderTitle = _ref.folderTitle,
+      columnsNumber = _ref.columnsNumber,
+      columnGap = _ref.columnGap,
+      rowGap = _ref.rowGap,
+      cardClicked = _ref.cardClicked,
+      iconColor = _ref.iconColor,
+      headerStyles = _ref.headerStyles,
+      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 onIconClicked = function onIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  var onAddFolder = function onAddFolder(folder) {
+    props.onAddFolder(folder);
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
+    galleryTitle: "Your Folders",
+    data: folders,
+    type: "flat",
+    cardStyle: "card-style-10",
+    headerStyles: headerStyles,
+    columnsNumber: columnsNumber,
+    galleryColumnGap: columnGap,
+    galleryRowGap: rowGap,
+    galleryControls: galleryControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked,
+    cardControls: cardControls,
+    rowsHeight: 140,
+    customCardStyles: {
+      cardPadding: 10,
+      iconColor: iconColor
+    }
+  }, 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(_CreateFolder.default, {
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    saveHandler: onAddFolder,
+    cancelHandler: cancelHandler
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+
+Folders.defaultProps = {};
+var _default = Folders;
+exports.default = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.viewFolders = exports.default = void 0;
+
+var _Folders = _interopRequireDefault(require("./Folders"));
+
+var _default = {
+  title: 'Library/Folders',
+  component: _Folders.default
+};
+exports.default = _default;
+var folders = [{
+  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'
+}];
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_Folders.default, args);
+};
+
+var viewFolders = Template.bind({});
+exports.viewFolders = viewFolders;
+viewFolders.args = {
+  folders: folders,
+  folderTitle: 'Your Folders',
+  columnsNumber: 3,
+  headerStyles: {
+    padding: 10,
+    headerBackground: '#ff2d2d',
+    titleColor: 'white',
+    controlsStyles: {
+      iconSize: 25
+    }
+  }
+};

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

@@ -0,0 +1,135 @@
+"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 _ai = require("react-icons/ai");
+
+var _ReusableList = _interopRequireDefault(require("../../Reusable Components/ReusableList/ReusableList"));
+
+var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
+
+var _CreateFolder = _interopRequireDefault(require("../CreateFolder/CreateFolder"));
+
+var _templateObject;
+
+var _excluded = ["notes", "iconColor", "cardTitleFontSize", "cardTitleColor", "cardPadding"];
+
+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 listControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
+  action: 'add',
+  name: 'Add Photo'
+}];
+var cardControls = [{
+  icon: /*#__PURE__*/_react.default.createElement(_ai.AiFillDelete, null),
+  action: 'delete',
+  name: 'Delete Image'
+}];
+
+var Notes = function Notes(_ref) {
+  var notes = _ref.notes,
+      iconColor = _ref.iconColor,
+      cardTitleFontSize = _ref.cardTitleFontSize,
+      cardTitleColor = _ref.cardTitleColor,
+      cardPadding = _ref.cardPadding,
+      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 onIconClicked = function onIconClicked(action) {
+    switch (action) {
+      case 'add':
+        setShowModal(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var cardIconClicked = function cardIconClicked(action, index) {
+    props.cardIconClicked(action, index);
+  };
+
+  var cardClicked = function cardClicked() {
+    console.log('test');
+  };
+
+  var cancelHandler = function cancelHandler() {
+    setShowModal(false);
+  };
+
+  var onAddFolder = function onAddFolder(folder) {
+    props.onAddNote(folder);
+    setShowModal(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_ReusableList.default, {
+    listTitle: "My Notes",
+    data: notes,
+    type: "flat",
+    cardStyle: "card-style-11",
+    headerStyles: {
+      padding: 10,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff',
+      controlsStyles: {
+        iconSize: 25
+      }
+    },
+    customCardStyles: {
+      iconColor: iconColor,
+      cardTitleFontSize: cardTitleFontSize,
+      cardTitleColor: cardTitleColor,
+      cardPadding: cardPadding,
+      controlsStyles: {
+        iconColor: '#FE1744'
+      }
+    },
+    listControls: listControls,
+    cardControls: cardControls,
+    iconClicked: onIconClicked,
+    cardClicked: cardClicked,
+    cardIconClicked: cardIconClicked
+  }), /*#__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(_CreateFolder.default, {
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    saveHandler: onAddFolder,
+    cancelHandler: cancelHandler
+  })));
+};
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
+
+Notes.defaultProps = {};
+var _default = Notes;
+exports.default = _default;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = exports.default = void 0;
+
+var _Notes = _interopRequireDefault(require("./Notes"));
+
+var _default = {
+  title: 'Library/Notes List',
+  component: _Notes.default
+};
+exports.default = _default;
+var notes = [{
+  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'
+}];
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_Notes.default, args);
+};
+
+var List = Template.bind({});
+exports.List = List;
+List.args = {
+  notes: notes
+};

package/dist/stories/Library/ViewNote/ViewNote.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _EditorComponent = _interopRequireDefault(require("../../Common Inputs/EditorComponent/EditorComponent"));
+
+var ViewNote = function ViewNote() {
+  var data = {
+    blocks: [{
+      type: "header",
+      data: {
+        text: "New Note",
+        level: 1
+      }
+    }]
+  };
+  return /*#__PURE__*/_react.default.createElement(_EditorComponent.default, {
+    data: data
+  });
+};
+
+var _default = ViewNote;
+exports.default = _default;

package/dist/stories/Library/ViewNote/ViewNote.stories.js

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