@mohamed-karawia/library 0.1.15 → 0.1.19

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", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "albumTitleColor", "countColor", "countFontSize", "columnsNumber", "columnGap", "rowGap"];
+var _excluded = ["albums"];
 
 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,57 +52,68 @@ 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,
-      cardBackgroundColor = _ref.cardBackgroundColor,
-      cardTitleColor = _ref.cardTitleColor,
-      cardTitleFontSize = _ref.cardTitleFontSize,
-      albumTitleColor = _ref.albumTitleColor,
-      countColor = _ref.countColor,
-      countFontSize = _ref.countFontSize,
-      columnsNumber = _ref.columnsNumber,
-      columnGap = _ref.columnGap,
-      rowGap = _ref.rowGap,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var cardStyles = {
-    darkOnHover: true,
-    cardBackgroundColor: cardBackgroundColor,
-    cardTitleColor: cardTitleColor,
-    cardTitleFontSize: cardTitleFontSize,
-    countColor: countColor,
-    countFontSize: countFontSize,
-    controlsStyles: {
-      showOnHover: true,
-      position: 'center',
-      dropdownFontColor: "white",
-      iconBorderRadius: 100,
-      iconSize: 40,
-      iconsGap: 10,
-      iconColor: 'white',
-      containerPadding: 20
-    }
-  };
 
   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;
+  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, {
+    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({
+      albums: albums
+    }, values)));
+  };
 
-      default:
-        break;
+  var tabs = [{
+    title: 'New',
+    id: 'preview'
+  }, {
+    title: 'Context',
+    id: 'community'
+  }];
+
+  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) {
@@ -105,26 +126,14 @@ var ViewAlbums = function ViewAlbums(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_Gallery.default, Object.assign({
-    galleryTitle: "Photo Albums",
+    galleryTitle: props.title || "Photo Albums",
     data: albums,
     type: "flat",
     cardStyle: "card-style-6",
-    headerStyles: {
-      padding: 10,
-      headerBackground: props.headerBackground,
-      titleColor: props.titleColor,
-      controlsStyles: {
-        iconSize: 25
-      }
-    },
-    columnsNumber: columnsNumber,
-    galleryColumnGap: columnGap,
-    galleryRowGap: rowGap,
     galleryControls: galleryControls,
     iconClicked: onIconClicked,
     cardControls: cardControls,
-    cardIconClicked: cardIconClicked,
-    customCardStyles: cardStyles
+    cardIconClicked: cardIconClicked
   }, props)), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showModal,
     closeModal: function closeModal() {
@@ -136,18 +145,34 @@ var ViewAlbums = function ViewAlbums(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CreateAlbum.default, {
     saveHandler: onAddAlbum,
     cancelHandler: cancelHandler
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
+    modalIsOpen: showConfigModal,
+    closeModal: function closeModal() {
+      return setShowConfigModal(false);
+    },
+    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,
+    id: "community"
+  }))));
 };
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n"])));
 
-ViewAlbums.defaultProps = {
-  columnsNumber: 3,
-  headerBackground: '#FE1744',
-  titleColor: 'white',
-  cardBackgroundColor: 'white',
-  columnGap: 10,
-  rowGap: 20
-};
+ViewAlbums.defaultProps = {};
 var _default = ViewAlbums;
 exports.default = _default;

package/dist/stories/Preview/Preview.js

@@ -0,0 +1,37 @@
+"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 _util = require("../helpers/util");
+
+var _templateObject;
+
+var _excluded = ["type", "componentProps", "stylingProps"];
+
+var Preview = function Preview(_ref) {
+  var type = _ref.type,
+      componentProps = _ref.componentProps,
+      stylingProps = _ref.stylingProps,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var child = (0, _util.getComponentType)(type, componentProps, stylingProps);
+  return /*#__PURE__*/_react.default.createElement(Container, null, child);
+};
+
+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 = {
+    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 = {
+    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;