@mohamed-karawia/library 0.1.18 → 0.1.22

package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js

@@ -23,11 +23,21 @@ var _Gallery = _interopRequireDefault(require("../../Reusable Components/Gallery
 
 var _ReactModal = _interopRequireDefault(require("../../Reusable Components/ReactModal/ReactModal"));
 
+var _PhotoAlbumsPreview = _interopRequireDefault(require("../../PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview"));
+
+var _Tabs = _interopRequireDefault(require("../../Reusable Components/Tabs/Tabs"));
+
+var _Sections = _interopRequireDefault(require("../../Sections/Sections"));
+
+var _Community = _interopRequireDefault(require("../../Reusable Components/Community/Community"));
+
 var _ai = require("react-icons/ai");
 
+var _bs = require("react-icons/bs");
+
 var _templateObject;
 
-var _excluded = ["albums"];
+var _excluded = ["albums", "community"];
 
 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); }
 
@@ -42,10 +52,15 @@ var galleryControls = [{
   icon: /*#__PURE__*/_react.default.createElement(_ai.AiOutlineFileAdd, null),
   action: 'add',
   name: 'Add Album'
+}, {
+  icon: /*#__PURE__*/_react.default.createElement(_bs.BsGear, null),
+  action: 'config',
+  name: 'Config'
 }];
 
 var ViewAlbums = function ViewAlbums(_ref) {
   var albums = _ref.albums,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -53,19 +68,55 @@ var ViewAlbums = function ViewAlbums(_ref) {
       showModal = _useState2[0],
       setShowModal = _useState2[1];
 
-  var onIconClicked = function onIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showConfigModal = _useState4[0],
+      setShowConfigModal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbums, {
+    preview: true,
+    albums: albums
+  })),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      centerContext = _useState6[0],
+      setCenterContext = _useState6[1];
+
+  var formChanged = function formChanged(values) {
+    setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbums, Object.assign({
+      preview: true,
+      albums: albums
+    }, values)));
+  };
+
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
 
-      default:
-        break;
+  var onIconClicked = function onIconClicked(action) {
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
   var cardIconClicked = function cardIconClicked(action, index) {
-    props.cardIconClicked(action, index);
+    if (!props.preview) {
+      props.cardIconClicked(action, index);
+    }
   };
 
   var onAddAlbum = function onAddAlbum(album) {
@@ -77,6 +128,11 @@ var ViewAlbums = function ViewAlbums(_ref) {
     setShowModal(false);
   };
 
+  var cancelConfig = function cancelConfig() {
+    setShowConfigModal(false);
+    localStorage.removeItem('formStyles');
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
     galleryTitle: props.title || "Photo Albums",
     data: albums,
@@ -97,7 +153,29 @@ var ViewAlbums = function ViewAlbums(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CreateAlbum.default, {
     saveHandler: onAddAlbum,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: cancelConfig,
+    exitModalButton: function exitModalButton(e) {
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
+    title: "Photo Albums Config",
+    tabs: tabs,
+    id: "styling"
+  }, /*#__PURE__*/_react.default.createElement(_PhotoAlbumsPreview.default, {
+    componentProps: {
+      albums: albums,
+      title: props.title || 'Photo Albums',
+      preview: true
+    },
+    formChanged: formChanged,
+    id: "preview"
+  }), /*#__PURE__*/_react.default.createElement(_Community.default, {
+    center: centerContext,
+    community: community,
+    id: "community"
+  }))));
 };
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));

package/dist/stories/Preview/Preview.js

@@ -32,5 +32,6 @@ var Preview = function Preview(_ref) {
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
+Preview.defaultProps = {};
 var _default = Preview;
 exports.default = _default;

package/dist/stories/PreviewComponents/ChatPreview/ChatPreview.js

@@ -0,0 +1,193 @@
+"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 _Preview = _interopRequireDefault(require("../../Preview/Preview"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _globalStyles = require("../globalStyles");
+
+var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+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 ChatPreview = function ChatPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      chatStyles = _useState2[0],
+      setChatStyles = _useState2[1];
+
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: '',
+      controlsStyles: {
+        iconSize: '',
+        iconColor: ''
+      }
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      cardDescriptionFontSize: '',
+      cardDescriptionColor: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: 'purple',
+      dateColor: ''
+    }
+  };
+  var sections = [{
+    title: "Header Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Header Background",
+      name: "headerStyles.headerBackground"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Padding",
+      name: "headerStyles.padding"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "headerStyles.titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "headerStyles.titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "headerStyles.titleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Controls Size",
+      name: "headerStyles.controlsStyles.iconSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Controls Color",
+      name: "headerStyles.controlsStyles.iconColor"
+    })]
+  }, {
+    title: "Card Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Card Background",
+      name: "customCardStyles.cardBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Hover Color",
+      name: "customCardStyles.onHoverBackgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Radius",
+      name: "customCardStyles.cardRadius"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "customCardStyles.cardTitleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "customCardStyles.cardTitleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "customCardStyles.cardTitleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Image Radius",
+      name: "customCardStyles.cardImageRadius"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Text Font Size",
+      name: "customCardStyles.cardDescriptionFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Text Font Color",
+      name: "customCardStyles.cardDescriptionColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Card Padding",
+      name: "customCardStyles.cardPadding"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Image Size",
+      name: "customCardStyles.imgSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Border Size",
+      name: "customCardStyles.cardBorderSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Border Color",
+      name: "customCardStyles.cardBorderColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Date Color",
+      name: "customCardStyles.dateColor"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setChatStyles(values);
+      localStorage.setItem('formStyles', JSON.stringify(values));
+    }
+  };
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    console.log('Canceled');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
+    formTitle: "Chat Styles",
+    initialValues: initialValues,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionHeaderStyles: {
+      padding: 6,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    bodyPadding: 10,
+    saveBtnText: "Save",
+    cancelBtnText: "Cancel",
+    saveBtnHandle: submitHandler,
+    cancelHandler: cancelHandler,
+    handleChange: handleChange,
+    bodyRowGap: 20,
+    bodyColumnGap: 10
+  })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
+    type: 'Chat',
+    componentProps: props.componentProps,
+    stylingProps: chatStyles
+  })));
+};
+
+ChatPreview.defaultProps = {};
+var _default = ChatPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/EventPreview/EventPreview.js

@@ -0,0 +1,158 @@
+"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 _Preview = _interopRequireDefault(require("../../Preview/Preview"));
+
+var _ReusableForm = _interopRequireDefault(require("../../Reusable Components/ReusableForm/ReusableForm"));
+
+var _globalStyles = require("../globalStyles");
+
+var _Picker = _interopRequireDefault(require("../../Common Inputs/Picker/Picker"));
+
+var _TextField = _interopRequireDefault(require("../../Common Inputs/TextField/TextField"));
+
+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 EventPreview = function EventPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      eventStyles = _useState2[0],
+      setEventStyles = _useState2[1];
+
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: '',
+      controlsStyles: {
+        iconSize: '',
+        iconColor: ''
+      }
+    },
+    backgroundColor: '',
+    titleColor: '',
+    titleSize: '',
+    dateColor: '',
+    dateSize: '',
+    discColor: '',
+    discSize: ''
+  };
+  var sections = [{
+    title: "Header Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Header Background",
+      name: "headerStyles.headerBackground"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Padding",
+      name: "headerStyles.padding"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "headerStyles.titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "headerStyles.titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "headerStyles.titleFontWeight"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Controls Size",
+      name: "headerStyles.controlsStyles.iconSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Controls Color",
+      name: "headerStyles.controlsStyles.iconColor"
+    })]
+  }, {
+    title: "Event Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Background Color",
+      name: "backgroundColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Size",
+      name: "titleSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Date Color",
+      name: "dateColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Date Size",
+      name: "dateSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Discription Color",
+      name: "discColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Discription Size",
+      name: "discSize"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setEventStyles(values);
+      localStorage.setItem('formStyles', JSON.stringify(values));
+    }
+  };
+
+  var submitHandler = function submitHandler(values) {
+    console.log(values);
+  };
+
+  var cancelHandler = function cancelHandler() {
+    console.log('Canceled');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_globalStyles.Container, null, /*#__PURE__*/_react.default.createElement(_globalStyles.Left, null, /*#__PURE__*/_react.default.createElement(_ReusableForm.default, {
+    formTitle: "Events Styles",
+    initialValues: initialValues,
+    sections: sections,
+    headerStyles: {
+      padding: 10,
+      headerBackground: 'black',
+      titleColor: '#ffff'
+    },
+    sectionHeaderStyles: {
+      padding: 6,
+      headerBackground: '#FE1744',
+      titleColor: '#ffff'
+    },
+    bodyPadding: 10,
+    saveBtnText: "Save",
+    cancelBtnText: "Cancel",
+    saveBtnHandle: submitHandler,
+    cancelHandler: cancelHandler,
+    handleChange: handleChange,
+    bodyRowGap: 20,
+    bodyColumnGap: 10
+  })), /*#__PURE__*/_react.default.createElement(_globalStyles.Right, null, /*#__PURE__*/_react.default.createElement(_Preview.default, {
+    type: 'Event',
+    componentProps: props.componentProps,
+    stylingProps: eventStyles
+  })));
+};
+
+EventPreview.defaultProps = {};
+var _default = EventPreview;
+exports.default = _default;