@mohamed-karawia/library 0.1.16 → 0.1.20

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;

package/dist/stories/PreviewComponents/EventsPreview/EventsPreview.js

@@ -0,0 +1,192 @@
+"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 EventsPreview = function EventsPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      eventsStyles = _useState2[0],
+      setEventsStyles = _useState2[1];
+
+  var initialValues = {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: '',
+      controlsStyles: {
+        iconSize: '',
+        iconColor: ''
+      }
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      iconColor: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: '',
+      dateColor: '',
+      controlsStyles: ''
+    }
+  };
+  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: "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: "Icons Color",
+      name: "customCardStyles.iconColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Date Color",
+      name: "customCardStyles.dateColor"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Card Icon Color",
+      name: "customCardStyles.controlsStyles.iconColor"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setEventsStyles(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: 'Events',
+    componentProps: props.componentProps,
+    stylingProps: eventsStyles
+  })));
+};
+
+EventsPreview.defaultProps = {};
+var _default = EventsPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/FoldersPreview/FoldersPreview.js

@@ -0,0 +1,182 @@
+"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 FoldersPreview = function FoldersPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      foldersStyles = _useState2[0],
+      setFoldersStyles = _useState2[1];
+
+  var initialValues = {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: ''
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      cardDescriptionFontSize: '',
+      cardDescriptionColor: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: '',
+      iconColor: ''
+    }
+  };
+  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"
+    })]
+  }, {
+    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: "Artist Font Size",
+      name: "customCardStyles.cardDescriptionFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Artist 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: "Icon Color",
+      name: "customCardStyles.iconColor"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setFoldersStyles(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: "Folders 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: 'Folders',
+    componentProps: props.componentProps,
+    stylingProps: foldersStyles
+  })));
+};
+
+FoldersPreview.defaultProps = {};
+var _default = FoldersPreview;
+exports.default = _default;