@mohamed-karawia/library 0.1.21 → 0.1.22

package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js

@@ -37,7 +37,7 @@ var _bs = require("react-icons/bs");
 
 var _templateObject;
 
-var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor"];
+var _excluded = ["album", "cardBackgroundColor", "cardTitleColor", "cardTitleFontSize", "descColor", "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); }
 
@@ -68,6 +68,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       cardTitleColor = _ref.cardTitleColor,
       cardTitleFontSize = _ref.cardTitleFontSize,
       descColor = _ref.descColor,
+      community = _ref.community,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -81,6 +82,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
       setShowConfigModal = _useState4[1];
 
   var _useState5 = (0, _react.useState)( /*#__PURE__*/_react.default.createElement(ViewAlbum, {
+    preview: true,
     album: album
   })),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -90,6 +92,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
   var formChanged = function formChanged(values) {
     console.log('context changed');
     setCenterContext( /*#__PURE__*/_react.default.createElement(ViewAlbum, Object.assign({
+      preview: true,
       album: album
     }, values)));
   };
@@ -101,16 +104,6 @@ var ViewAlbum = function ViewAlbum(_ref) {
     title: 'Context',
     id: 'community'
   }];
-  var sections = [{
-    title: 'Styles',
-    data: [{
-      title: 'Styling',
-      component: /*#__PURE__*/_react.default.createElement(_Tabs.default, {
-        title: "Video Album Config",
-        tabs: tabs
-      })
-    }]
-  }];
   var cardStyles = {
     darkOnHover: true,
     cardBackgroundColor: cardBackgroundColor,
@@ -132,17 +125,19 @@ var ViewAlbum = function ViewAlbum(_ref) {
   };
 
   var onHeaderIconClicked = function onHeaderIconClicked(action) {
-    switch (action) {
-      case 'add':
-        setShowModal(true);
-        break;
-
-      case 'config':
-        setShowConfigModal(true);
-        break;
-
-      default:
-        break;
+    if (!props.preview) {
+      switch (action) {
+        case 'add':
+          setShowModal(true);
+          break;
+
+        case 'config':
+          setShowConfigModal(true);
+          break;
+
+        default:
+          break;
+      }
     }
   };
 
@@ -159,6 +154,11 @@ var ViewAlbum = function ViewAlbum(_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 || "Video Album",
     data: album,
@@ -182,9 +182,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     cancelHandler: cancelHandler
   })), /*#__PURE__*/_react.default.createElement(_ReactModal.default, {
     modalIsOpen: showConfigModal,
-    closeModal: function closeModal() {
-      return setShowConfigModal(false);
-    },
+    closeModal: cancelConfig,
     exitModalButton: function exitModalButton(e) {
       return /*#__PURE__*/_react.default.createElement("div", null);
     }
@@ -201,6 +199,7 @@ var ViewAlbum = function ViewAlbum(_ref) {
     id: "preview"
   }), /*#__PURE__*/_react.default.createElement(_Community.default, {
     center: centerContext,
+    community: community,
     id: "community"
   }))));
 };

package/dist/stories/store/communities.js

@@ -81,35 +81,33 @@ var community = {
         }]
       }],
       styles: {
-        header: {},
-        body: {
-          sectionHeaderStyles: {
-            padding: 2,
-            headerBackground: "#00ADC4",
-            titleColor: "white"
-          },
-          customCardStyles: {
-            cardPadding: 6,
-            cardTitleFontSize: 15,
-            cardBackgroundColor: "white",
-            cardTitleColor: "#00ADC4",
-            cardBorderSize: 1,
-            cardBorderColor: "#00ADC4",
-            onHoverBackgroundColor: "#d3d3d3",
-            controlsStyles: {
-              showOnHover: true,
-              iconColor: "#00ADC4"
-            }
-          },
-          borderRadius: 10,
-          primaryColor: "#00ADC4",
-          iconsColor: "#00ADC4",
-          backgroundColor: "white",
-          discColor: "gray",
-          dateColor: "gray",
-          iconColor: "#00ADC4",
-          cardTitleFontSize: 15
-        }
+        headerStyles: {},
+        sectionHeaderStyles: {
+          padding: 2,
+          headerBackground: "#00ADC4",
+          titleColor: "white"
+        },
+        customCardStyles: {
+          cardPadding: 6,
+          cardTitleFontSize: 15,
+          cardBackgroundColor: "white",
+          cardTitleColor: "#00ADC4",
+          cardBorderSize: 1,
+          cardBorderColor: "#00ADC4",
+          onHoverBackgroundColor: "#d3d3d3",
+          controlsStyles: {
+            showOnHover: true,
+            iconColor: "#00ADC4"
+          }
+        },
+        borderRadius: 10,
+        primaryColor: "#00ADC4",
+        iconsColor: "#00ADC4",
+        backgroundColor: "white",
+        discColor: "gray",
+        dateColor: "gray",
+        iconColor: "#00ADC4",
+        cardTitleFontSize: 15
       }
     }
   },

package/package.json

@@ -10,7 +10,7 @@
       ]
     ]
   },
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",

package/src/stories/Chat/Chat.jsx

@@ -24,14 +24,14 @@ const Chat = ({
     users,
     title,
     backgroundColor,
+    community,
     ...props }) => {
 
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Chat users={users} data={data}/>)
+    const [centerContext, setCenterContext] = useState(<Chat preview={true}  users={users} data={data}/>)
 
     const formChanged = (values) => {
-        console.log('context changed')
-        setCenterContext(<Chat users={users} data={data} {...values} />)
+        setCenterContext(<Chat preview={true}  users={users} data={data} {...values} />)
     }
 
     let tabs = [
@@ -43,17 +43,17 @@ const Chat = ({
         }
     ]
 
-    let sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling',
-                    id: 'styling'
-                }
-            ]
-        }
-    ]
+    // let sections = [
+    //     {
+    //         title: 'Styles',
+    //         data: [
+    //             {
+    //                 title: 'Styling',
+    //                 id: 'styling'
+    //             }
+    //         ]
+    //     }
+    // ]
 
     const onIconClicked = (action) => {
         if (!props.preview) {
@@ -67,6 +67,11 @@ const Chat = ({
         }
     }
 
+     const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container
             backgroundColor={backgroundColor}>
@@ -84,12 +89,12 @@ const Chat = ({
             />
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
-                )}
+                )} preview={true} 
             >
-                <Sections
+                {/* <Sections
                     sections={sections}
                     backgroundColor={'white'}
                     sectionHeaderStyles={{
@@ -105,7 +110,7 @@ const Chat = ({
                         controlsStyles: {
                             showOnHover: true,
                         }
-                    }}>
+                    }}> */}
                     <Tabs
                         title="Chat Config"
                         tabs={tabs}
@@ -118,9 +123,10 @@ const Chat = ({
                         />
                         <Community
                             center={centerContext}
+                            community={community} 
                             id="community" />
                     </Tabs>
-                </Sections>
+                {/* </Sections> */}
             </Modal>
         </Container>
     )

package/src/stories/Community/Community.jsx

@@ -37,7 +37,7 @@ const Community = (props) => {
         dispatch(addEvent(event))
     }
 
-    console.log(space)
+    console.log(community)
 
     const eventIconClicked = (action, index) => {
         switch (action) {
@@ -66,26 +66,25 @@ const Community = (props) => {
                             listTitle: spacesWidget.listTitle,
                             spaces: spacesWidget.spaces,
                             cardClicked: switchSpace,
-                            headerStyles: spacesWidget.styles.header,
-                            ...spacesWidget.styles.body
+                            ...spacesWidget.styles
                         }}
                     />
                 </Left>
                 <Center>
                     {
                         {
-                            'chat': <Chat {...space.spaceProps} {...space.styles} />,
-                            'event': <Event {...space.spaceProps} {...space.styles} />,
-                            'events_list': <EventsList cardIconClicked={eventIconClicked} onAddEvent={onAddEvent}  {...space.spaceProps} {...space.styles} />,
-                            'folders': <Folders {...space.spaceProps} {...space.styles} />,
-                            'notes': <Notes {...space.spaceProps} {...space.styles} />,
-                            'music_album': <MusicAlbum {...space.spaceProps} {...space.styles} />,
-                            'music_albums': <MusicAlbums {...space.spaceProps} {...space.styles} />,
-                            'photo_album': <PhotoAlbum {...space.spaceProps} {...space.styles}/>,
-                            'photo_albums': <PhotoAlbums {...space.spaceProps} {...space.styles}/>,
-                            'video_albums': <VideoAlbums {...space.spaceProps} {...space.styles}/>,
-                            'video_album': <VideoAlbum  {...space.spaceProps} {...space.styles}/>,
-                            'video_space': <VideoSpace {...space.spaceProps} {...space.styles}/>
+                            'chat': <Chat community={community}  {...space.spaceProps} {...space.styles} />,
+                            'event': <Event community={community} {...space.spaceProps} {...space.styles} />,
+                            'events_list': <EventsList community={community} cardIconClicked={eventIconClicked} onAddEvent={onAddEvent}  {...space.spaceProps} {...space.styles} />,
+                            'folders': <Folders community={community}  {...space.spaceProps} {...space.styles} />,
+                            'notes': <Notes community={community} {...space.spaceProps} {...space.styles} />,
+                            'music_album': <MusicAlbum community={community} {...space.spaceProps} {...space.styles} />,
+                            'music_albums': <MusicAlbums community={community} {...space.spaceProps} {...space.styles} />,
+                            'photo_album': <PhotoAlbum community={community} {...space.spaceProps} {...space.styles}/>,
+                            'photo_albums': <PhotoAlbums community={community} {...space.spaceProps} {...space.styles}/>,
+                            'video_albums': <VideoAlbums community={community} {...space.spaceProps} {...space.styles}/>,
+                            'video_album': <VideoAlbum community={community} {...space.spaceProps} {...space.styles}/>,
+                            'video_space': <VideoSpace community={community} {...space.spaceProps} {...space.styles}/>
 
                         }[spaceType]
                     }

package/src/stories/Events/Event/Event.jsx

@@ -30,13 +30,14 @@ const Event = ({
     discColor,
     discSize,
     headerStyles,
+    community,
     ...props
 }) => {
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Event title={title} cover={cover} date={date} disc={disc}/>)
+    const [centerContext, setCenterContext] = useState(<Event preview={true}  title={title} cover={cover} date={date} disc={disc}/>)
 
     const formChanged = (values) => {
-        setCenterContext(<Event title={title} cover={cover} date={date} disc={disc} {...values} />)
+        setCenterContext(<Event preview={true}  title={title} cover={cover} date={date} disc={disc} {...values} />)
     }
 
     let tabs = [
@@ -71,6 +72,12 @@ const Event = ({
             }
         }
     }
+
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container
             backgroundColor={backgroundColor}>
@@ -97,7 +104,7 @@ const Event = ({
             </Details>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
@@ -130,6 +137,7 @@ const Event = ({
                     />
                     <Community
                             center={centerContext}
+                            community={community}  preview={true} 
                             id="community" />
                 </Tabs>
             </Modal>

package/src/stories/Events/EventsList/EventsList.jsx

@@ -25,15 +25,16 @@ const cardControls = [
 
 const EventsList = ({
     events,
+    community,
     ...props
 }) => {
 
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<EventsList events={events} />)
+    const [centerContext, setCenterContext] = useState(<EventsList preview={true} events={events} {...props}/>)
 
     const formChanged = (values) => {
-        setCenterContext(<EventsList events={events} {...values} />)
+        setCenterContext(<EventsList preview={true} events={events} {...values} />)
     }
 
     let tabs = [
@@ -93,6 +94,11 @@ const EventsList = ({
         props.onAddEvent(event)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <List
@@ -122,7 +128,7 @@ const EventsList = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
@@ -145,7 +151,7 @@ const EventsList = ({
                         }
                     }} /> */}
                 <Tabs
-                    title="Event Config"
+                    title="Events Config"
                     tabs={tabs}>
                     <EventsPreview
                         componentProps={{ events, title: props.title || "My Events", preview: true }}
@@ -154,6 +160,7 @@ const EventsList = ({
                     />
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>

package/src/stories/Library/Folders/Folders.jsx

@@ -31,14 +31,15 @@ const Folders = ({
     rowGap,
     cardClicked,
     iconColor,
+    community,
     ...props
 }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Folders folders={folders} />)
+    const [centerContext, setCenterContext] = useState(<Folders preview={true} folders={folders} />)
 
     const formChanged = (values) => {
-        setCenterContext(<Folders folders={folders} {...values} />)
+        setCenterContext(<Folders preview={true} folders={folders} {...values} />)
     }
 
     let tabs = [
@@ -64,16 +65,23 @@ const Folders = ({
         }
     ]
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     const onIconClicked = (action) => {
-        switch (action) {
-            case 'add':
-                setShowModal(true)
-                break;
-            case 'config':
-                setShowConfigModal(true)
-                break;
-            default:
-                break;
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
         }
     }
 
@@ -120,7 +128,7 @@ const Folders = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
@@ -143,15 +151,16 @@ const Folders = ({
                         }
                     }} /> */}
                 <Tabs
-                    title="Event Config"
+                    title="Folders Config"
                     tabs={tabs}>
                     <FoldersPreview
-                        componentProps={{ folders, title: props.title || "Your Folders" }}
+                        componentProps={{ folders, title: props.title || "Your Folders", preview: true }}
                         formChanged={formChanged}
                         id='preview'
                     />
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>

package/src/stories/Library/Notes/Notes.jsx

@@ -27,14 +27,15 @@ const Notes = ({
     cardTitleFontSize,
     cardTitleColor,
     cardPadding,
+    community,
     ...props
 }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Notes notes={notes} />)
+    const [centerContext, setCenterContext] = useState(<Notes preview={true} notes={notes} />)
 
     const formChanged = (values) => {
-        setCenterContext(<Notes notes={notes} {...values} />)
+        setCenterContext(<Notes preview={true} notes={notes} {...values} />)
     }
 
     let tabs = [
@@ -61,15 +62,17 @@ const Notes = ({
     ]
 
     const onIconClicked = (action) => {
-        switch (action) {
-            case 'add':
-                setShowModal(true)
-                break;
-            case 'config':
-                setShowConfigModal(true)
-                break;
-            default:
-                break;
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
         }
     }
 
@@ -90,6 +93,11 @@ const Notes = ({
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <List
@@ -119,20 +127,22 @@ const Notes = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
             >
                 <Tabs
-                    title="Event Config"
+                    title="Notes Config"
                     tabs={tabs}>
                     <NotesPreview
-                        componentProps={{ notes, title: props.title || "Your Notes" }}
-                        formChanged={formChanged }
+                        componentProps={{ notes, title: props.title || "Your Notes" , preview: true}}
+                        formChanged={formChanged}
+                        id="preview"
                     />
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>