@mohamed-karawia/library 0.1.18 → 0.1.22

package/dist/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.js

@@ -0,0 +1,189 @@
+"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 PhotoAlbumPreview = function PhotoAlbumPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      photoAlbumStyles = _useState2[0],
+      setPhotoAlbumStyles = _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: ''
+    }
+  };
+  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: "Discription Font Size",
+      name: "customCardStyles.cardDescriptionFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Discription 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"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setPhotoAlbumStyles(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: "Photo Album 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: 'PhotoAlbum',
+    componentProps: props.componentProps,
+    stylingProps: photoAlbumStyles
+  })));
+};
+
+PhotoAlbumPreview.defaultProps = {};
+var _default = PhotoAlbumPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.js

@@ -0,0 +1,189 @@
+"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 PhotoAlbumsPreview = function PhotoAlbumsPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      photoAlbumsStyles = _useState2[0],
+      setPhotoAlbumsStyles = _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: '',
+      countColor: '',
+      countFontSize: '',
+      cardImageRadius: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: 'purple'
+    }
+  };
+  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: "Count Font Size",
+      name: "customCardStyles.countFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Count Font Color",
+      name: "customCardStyles.countColor"
+    }), /*#__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"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setPhotoAlbumsStyles(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: "Photo Albums 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: 'PhotoAlbums',
+    componentProps: props.componentProps,
+    stylingProps: photoAlbumsStyles
+  })));
+};
+
+PhotoAlbumsPreview.defaultProps = {};
+var _default = PhotoAlbumsPreview;
+exports.default = _default;

package/dist/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.js

@@ -0,0 +1,197 @@
+"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 SpacesListPreview = function SpacesListPreview(props) {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      spacesStyles = _useState2[0],
+      setSpacesStyles = _useState2[1];
+
+  var initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: ''
+    },
+    sectionHeaderStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: ''
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: 'purple'
+    }
+  };
+  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: "Section Header Styles",
+    body: [/*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Header Background",
+      name: "sectionHeaderStyles.headerBackground"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Padding",
+      name: "sectionHeaderStyles.padding"
+    }), /*#__PURE__*/_react.default.createElement(_Picker.default, {
+      label: "Title Color",
+      name: "sectionHeaderStyles.titleColor"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Size",
+      name: "sectionHeaderStyles.titleFontSize"
+    }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      type: "number",
+      label: "Title Font Weight",
+      name: "sectionHeaderStyles.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: "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"
+    })]
+  }];
+
+  var handleChange = function handleChange(values) {
+    if (values) {
+      props.formChanged(values);
+      setSpacesStyles(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: "Spaces List 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: 'Spaces-List',
+    componentProps: props.componentProps,
+    stylingProps: spacesStyles
+  })));
+};
+
+SpacesListPreview.defaultProps = {};
+var _default = SpacesListPreview;
+exports.default = _default;