@mohamed-karawia/library 0.1.21 → 0.1.22

package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx

@@ -29,14 +29,15 @@ const ViewAlbum = ({
     album,
     cardBackgroundColor,
     songTitleColor,
+    community,
     ...props }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album}/>)
+    const [centerContext, setCenterContext] = useState(<ViewAlbum preview={true}  album={album} />)
 
     const formChanged = (values) => {
         console.log('context changed')
-        setCenterContext(<ViewAlbum album={album} {...values} />)
+        setCenterContext(<ViewAlbum preview={true}  album={album} {...values} />)
     }
 
 
@@ -48,6 +49,7 @@ const ViewAlbum = ({
             title: 'Context', id: 'community'
         }
     ]
+
     let sections = [
         {
             title: 'Styles',
@@ -126,65 +128,19 @@ const ViewAlbum = ({
                     <div></div>
                 )}
             >
-                <Sections
-                    sections={sections}
-                    backgroundColor={'white'}
-                    sectionHeaderStyles={{
-                        titleColor: 'white',
-                        headerBackground: 'transparent'
-                    }}
-                    customCardStyles={{
-                        cardPadding: 6,
-                        cardTitleFontSize: 15,
-                        cardBackgroundColor: '#2c2c2c',
-                        cardTitleColor: 'white',
-                        onHoverBackgroundColor: '#555555',
-                        controlsStyles: {
-                            showOnHover: true,
-                        }
-                    }}>
-                    <Tabs
-                        title="Music Album Config"
-                        tabs={tabs}
-                        id='styling'
-                    >
-                        <MusicAlbumPreview
-                            componentProps={{ album, title: props.title || "My Album", preview: true }}
-                            formChanged={formChanged}
-                            id="preview"
-                        />
-                        <Community
-                            right={(
-                                <WidgetContainer
-                                    widgetType='music player'
-                                    widgetProps={{
-                                        playlist: album,
-                                        currentSong: 1,
-                                    }}
-                                />
-                            )}
-                            left={
-                                (
-                                    <WidgetContainer
-                                        widgetType='spaces-list'
-                                        widgetProps={{
-                                            listTitle: 'Your Spaces',
-                                            type: 'sectioned',
-                                            spaces: SPACES,
-                                            cardStyle: 'card-style-3',
-                                            cardClicked: () => alert('clicked'),
-                                            // headerStyles: styles.widgetContainer.header,
-                                            // sectionHeaderStyles: styles.widgetContainer.body.sectionHeaderStyles,
-                                            // customCardStyles: styles.widgetContainer.body.customCardStyles,
-                                        }}
-                                    />
-                                )
-                            }
-                            center={centerContext}
-                            id="community" />
-                    </Tabs>
-
-                </Sections>
+                <Tabs
+                    title="Album Config"
+                    tabs={tabs}>
+                    <MusicAlbumPreview
+                        componentProps={{ album, title: props.title || "My Album", preview: true }}
+                        formChanged={formChanged}
+                        id="preview"
+                    />
+                    <Community
+                        center={centerContext}
+                        community={community}
+                        id="community" />
+                </Tabs>
             </Modal>
         </Container>
     )

package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx

@@ -8,6 +8,8 @@ import CreateAlbum from '../../Forms/CreateMusicAlbum/CreateMusicAlbum';
 import Tabs from '../../Reusable Components/Tabs/Tabs';
 import Sections from '../../Sections/Sections';
 import MusicAlbumsPreview from '../../PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview';
+import Community from '../../Reusable Components/Community/Community';
+
 
 import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
 import { BsGear } from "react-icons/bs";
@@ -23,19 +25,22 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
-    albumTitleColor,
-    descColor,
+    community,
     ...props
 }) => {
 
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<ViewAlbums preview={true} albums={albums} />)
+
 
-    const tabs = [
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
         {
-            title: 'New', component: (<MusicAlbumsPreview
-                componentProps={{ albums, title: props.title || 'Music Albums' }}
-            />)
+            title: 'Context', id: 'community'
         }
     ]
 
@@ -54,15 +59,17 @@ const ViewAlbums = ({
     ]
 
     const 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;
+            }
         }
     }
 
@@ -70,6 +77,9 @@ const ViewAlbums = ({
         props.cardIconClicked(action, index)
     }
 
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbums preview={true} albums={albums} {...values} />)
+    }
 
     const onAddAlbum = (album) => {
         setShowModal(false)
@@ -80,6 +90,11 @@ const ViewAlbums = ({
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -107,25 +122,24 @@ const ViewAlbums = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
             >
-                <Sections
-                    sections={sections}
-                    backgroundColor={'white'}
-                    sectionHeaderStyles={{
-                        titleColor: 'white',
-                        headerBackground: 'transparent'
-                    }}
-                    customCardStyles={{
-                        cardPadding: 6,
-                        cardTitleFontSize: 15,
-                        cardBackgroundColor: '#2c2c2c',
-                        cardTitleColor: 'white',
-                        onHoverBackgroundColor: '#555555',
-                    }} />
+                <Tabs
+                    title="Albums Config"
+                    tabs={tabs}>
+                    <MusicAlbumsPreview
+                        componentProps={{ albums: albums, title: 'Music Albums', preview: true }}
+                        formChanged={formChanged}
+                        id='preview'
+                    />
+                    <Community
+                        center={centerContext}
+                        community={community}
+                        id="community" />
+                </Tabs>
             </Modal>
         </Container>
     )

package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx

@@ -30,6 +30,7 @@ const ViewAlbum = ({
     cardBackgroundColor,
     imgTitleColor,
     descColor,
+    community,
     ...props
 }) => {
 
@@ -61,10 +62,10 @@ const ViewAlbum = ({
     const [openedImgIndex, setOpenedImgIndex] = useState(null);
     const [openedImg, setOpenedImg] = useState(null);
 
-    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album} />)
+    const [centerContext, setCenterContext] = useState(<ViewAlbum preview={true} album={album} />)
 
     const formChanged = (values) => {
-        setCenterContext(<ViewAlbum album={album} {...values} />)
+        setCenterContext(<ViewAlbum preview={true} album={album} {...values} />)
     }
 
     let tabs = [
@@ -92,7 +93,8 @@ const ViewAlbum = ({
     }, [openedImgIndex, handleUserKeyPress]);
 
     const onIconClicked = (action) => {
-        switch (action) {
+        if(!props.preview){
+            switch (action) {
             case 'add':
                 setShowModal(true)
                 break;
@@ -101,7 +103,7 @@ const ViewAlbum = ({
                 break;
             default:
                 break;
-        }
+        }}
     }
 
     const cardIconClicked = (action, index) => {
@@ -136,6 +138,11 @@ const ViewAlbum = ({
         }
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -187,7 +194,7 @@ const ViewAlbum = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
@@ -200,9 +207,11 @@ const ViewAlbum = ({
                     <PhotoAlbumPreview
                         componentProps={{ album, title: props.title || 'Photo Album', preview: true }}
                         formChanged={formChanged}
+                        id='preview'
                     />
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -24,14 +24,15 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
+    community,
     ...props }) => {
 
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<ViewAlbums albums={albums} />)
+    const [centerContext, setCenterContext] = useState(<ViewAlbums preview={true} albums={albums} />)
 
     const formChanged = (values) => {
-        setCenterContext(<ViewAlbums albums={albums} {...values} />)
+        setCenterContext(<ViewAlbums preview={true} albums={albums} {...values} />)
     }
 
 
@@ -75,6 +76,11 @@ const ViewAlbums = ({
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -100,7 +106,7 @@ const ViewAlbums = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
@@ -117,6 +123,7 @@ const ViewAlbums = ({
                     />
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>

package/src/stories/PreviewComponents/ChatPreview/ChatPreview.jsx

@@ -10,7 +10,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const ChatPreview = (props) => {
     const [chatStyles, setChatStyles] = useState({});
-    const initialValues = {
+    const initialValues =  JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
           headerBackground: '',
           padding: 0,

package/src/stories/PreviewComponents/EventPreview/EventPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const EventPreview = (props) => {
     const [eventStyles, setEventStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/EventsPreview/EventsPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const EventsPreview = (props) => {
     const [eventsStyles, setEventsStyles] = useState({});
-    const initialValues = {
+    const initialValues =  JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
           headerBackground: '',
           padding: 0,

package/src/stories/PreviewComponents/FoldersPreview/FoldersPreview.jsx

@@ -10,7 +10,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const FoldersPreview = (props) => {
   const [foldersStyles, setFoldersStyles] = useState({});
-  const initialValues = {
+  const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/src/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.jsx

@@ -12,7 +12,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 const MusicAlbumsPreview = (props) => {
     const [musicAlbumsStyles, setMusicAlbumsStyles] = useState({})
 
-    const initialValues = {
+    const initialValues =  JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.jsx

@@ -11,7 +11,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const MusicPlayerPreview = (props) => {
     const [musicPlayerStyles, setMusicPlayerStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/NavbarPreview/NavbarPreview.jsx

@@ -10,7 +10,7 @@ import Picker from '../../Common Inputs/Picker/Picker';
 const NavbarPreview = (props) => {
     const [navbarStyles, setNavbarStyles] = useState({})
 
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         iconSize: 'md',
         iconBackgroundColor: 'black',
         navbarColor: 'white',

package/src/stories/PreviewComponents/NotesPreview/NotesPreview.jsx

@@ -10,7 +10,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const NotesPreview = (props) => {
     const [notesStyles, setNotesStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const PhotoAlbumPreview = (props) => {
     const [photoAlbumStyles, setPhotoAlbumStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
           headerBackground: '',
           padding: 0,

package/src/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const PhotoAlbumsPreview = (props) => {
   const [photoAlbumsStyles, setPhotoAlbumsStyles] = useState({});
-  const initialValues = {
+  const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,

package/src/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const SpacesListPreview = (props) => {
     const [spacesStyles, setSpacesStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const VideoAlbumPreview = (props) => {
     const [videoAlbumStyles, setVideoAlbumStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.jsx

@@ -10,7 +10,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const VideoAlbumsPreview = (props) => {
     const [videoAlbumsStyles, setVideoAlbumsStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/PreviewComponents/VideoPreview/VideoPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const VideoPreview = (props) => {
     const [videoStyles, setVideoStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,

package/src/stories/Reusable Components/Community/Community.jsx

@@ -9,62 +9,39 @@ import Left from '../../Layout/Left/Left'
 import Center from '../../Layout/Center/Center'
 import Right from '../../Layout/Right/Right'
 import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
+import BaseMaterial from '../../Containers/BaseMaterial'
 // import styles from '../../styling.json'
 
 
 
 const Community = ({
   context,
+  community,
   ...props
 }) => {
 
-  const spaces = [
-    {
-      title: 'Main List',
-      data: [
-        { title: 'Cargo Sprint', path: 'cago' },
-        { title: 'Movies', path: 'movies' }
-      ],
-    },
-    {
-      title: 'Entertainment',
-      data: [
-        { title: 'Gaming', path: 'games' },
-        { title: 'Music', path: 'music' }
-      ]
-    }
-  ]
+  const spacesWidget = community.spacesListWidget.widgetSpacesList
 
   return (
-    <Container>
-      <Navbar />
+    <BaseMaterial {...community.styles}>
+      <Navbar {...community.navbarStyles} />
       <Body>
         <Left>
           <WidgetContainer
             widgetType='spaces-list'
             widgetProps={{
-              listTitle: 'Your Spaces',
-              spaces: spaces,
-              cardClicked: () => alert('clicked'),
-              // headerStyles: styles.widgetContainer.header,
-              // sectionHeaderStyles: styles.widgetContainer.body.sectionHeaderStyles,
-              // customCardStyles: styles.widgetContainer.body.customCardStyles,
+              listTitle: spacesWidget.listTitle,
+              spaces: spacesWidget.spaces,
+              cardClicked: () => null,
+              ...spacesWidget.styles
             }}
           />
         </Left>
         <Center>{props.center}</Center>
         <Right>{props.right}</Right>
       </Body>
-    </Container>
+    </BaseMaterial>
   );
 };
 
-const Container = styled.div`
-    width: 100%;
-    height: auto;
-    display: flex;
-    min-height: 100vh;
-    flex-direction: column;
-`
-
 export default Community;

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx

@@ -30,13 +30,14 @@ const AlbumsGallery = ({
     cardTitleFontSize,
     countColor,
     countFontSize,
+    community,
     ...props }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<AlbumsGallery videoAlbums={videoAlbums} />)
+    const [centerContext, setCenterContext] = useState(<AlbumsGallery preview={true} videoAlbums={videoAlbums} />)
 
     const formChanged = (values) => {
-        setCenterContext(<AlbumsGallery videoAlbums={videoAlbums} {...values} />)
+        setCenterContext(<AlbumsGallery preview={true} videoAlbums={videoAlbums} {...values} />)
     }
 
     let tabs = [
@@ -101,6 +102,11 @@ const AlbumsGallery = ({
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -131,7 +137,7 @@ const AlbumsGallery = ({
             </Modal>
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}>
@@ -146,6 +152,7 @@ const AlbumsGallery = ({
                     id="preview" />
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx

@@ -38,12 +38,13 @@ const VideoSpace = ({
     commentBackgroundColor,
     commentTitleColor,
     commentTitleFontSize,
+    community,
     ...props }) => {
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<VideoSpace videoSrc={videoSrc} />)
+    const [centerContext, setCenterContext] = useState(<VideoSpace users={users} preview={true} videoSrc={videoSrc} comments={comments} />)
 
     const formChanged = (values) => {
-        setCenterContext(<VideoSpace videoSrc={videoSrc} {...values} />)
+        setCenterContext(<VideoSpace users={users} preview={true} videoSrc={videoSrc} comments={comments} {...values} />)
     }
 
     let tabs = [
@@ -68,6 +69,11 @@ const VideoSpace = ({
         }
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container backgroundColor={backgroundColor}>
             <ReusableHeader
@@ -96,7 +102,7 @@ const VideoSpace = ({
             />
             <Modal
                 modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
+                closeModal={cancelConfig}
                 exitModalButton={(e) => (
                     <div></div>
                 )}
@@ -113,6 +119,7 @@ const VideoSpace = ({
 
                     <Community
                         center={centerContext}
+                        community={community}
                         id="community" />
                 </Tabs>
             </Modal>