@mohamed-karawia/library 0.1.22 → 0.1.23

package/src/stories/Modals/ShowImgModal/ShowImgModal.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { AiOutlineArrowLeft, AiOutlineArrowRight, AiOutlineClose } from "react-icons/ai";
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import DetailedPhoto from '../../Spaces/ViewDetailedPhoto/ViewDetailedPhoto';
+
+const ShowImgModal = ({
+    showImgModal,
+    closeModal,
+    prevPhoto,
+    nextPhoto,
+    openedImg,
+    ...props
+}) => {
+    return (
+        <Modal
+            modalIsOpen={showImgModal}
+            closeModal={closeModal}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+            width="70vw"
+            height="90vh">
+            <CloseIconContainer onClick={closeModal}>
+                <AiOutlineClose />
+            </CloseIconContainer>
+            <LeftIconContainer onClick={prevPhoto}>
+                <AiOutlineArrowLeft />
+            </LeftIconContainer>
+            <DetailedPhoto cardClicked={nextPhoto} img={openedImg} />
+            <RightIconContainer onClick={nextPhoto}>
+                <AiOutlineArrowRight />
+            </RightIconContainer>
+        </Modal>
+    )
+}
+
+const IconContainer = styled.div`
+    width: 30px;
+    height: 30px;
+    background-color: #757575;
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50rem;
+    z-index: 999;
+    cursor: pointer;
+    opacity: .4;
+    transition: all .2s;
+
+    &:hover{
+        opacity: 1;
+        transform: scale(1.1) translateY(-50%);
+    }
+
+    svg{
+        color: white;
+    }
+    
+`
+
+const CloseIconContainer = styled.div`
+    position: absolute;
+    z-index: 999;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+
+    svg{
+        color: white;
+    }
+`
+
+const LeftIconContainer = styled(IconContainer)`
+   left: 10px;
+`
+
+const RightIconContainer = styled(IconContainer)`
+    right: 10px;
+`
+
+export default ShowImgModal

package/src/stories/Modals/VideoAlbumConfigModal/VideoAlbumConfigModal.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ViewAlbum from '../../Spaces/ViewVideoAlbumList/ViewVideoAlbumList';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import VideoAlbumPreview from '../../PreviewComponents/VideoAlbumPreview/VideoAlbumPreview';
+import Community from '../../Reusable Components/Community/Community';
+
+const VideoAlbumConfig = ({
+    showConfigModal,
+    cancelConfig,
+    album,
+    community,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<ViewAlbum preview={true} album={album} />)
+
+    const formChanged = (values) => {
+        console.log('context changed')
+        setCenterContext(<ViewAlbum preview={true} album={album} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}>
+            <Tabs
+                title="Video Album Config"
+                tabs={tabs}
+                id='styling'
+            >
+                <VideoAlbumPreview
+                    componentProps={{ album, preview: true }}
+                    formChanged={formChanged}
+                    id="preview" />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+VideoAlbumConfig.defaultProps = {};
+
+VideoAlbumConfig.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    album: PropTypes.array,
+    community: PropTypes.object,
+}
+
+export default VideoAlbumConfig

package/src/stories/Modals/VideoAlbumsConfigModal/VideoAlbumsConfigModal.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import AlbumsGallery from '../../Spaces/ViewVideoAlbums/ViewVideoAlbums';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Sections from '../../Reusable Components/Sections/Sections'
+import VideoAlbumsPreview from '../../PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview';
+import Community from '../../Reusable Components/Community/Community';
+
+const VideoAlbumsConfigModal = ({
+  showConfigModal,
+  cancelConfig,
+  videoAlbums,
+  community,
+  ...props
+}) => {
+  const [centerContext, setCenterContext] = useState(<AlbumsGallery preview={true} videoAlbums={videoAlbums} />)
+
+  const formChanged = (values) => {
+    setCenterContext(<AlbumsGallery preview={true} videoAlbums={videoAlbums} {...values} />)
+  }
+
+  let tabs = [
+    {
+      title: 'New', id: 'preview'
+    },
+    {
+      title: 'Context', id: 'community'
+    }
+  ]
+
+  return (
+    <Modal
+      modalIsOpen={showConfigModal}
+      closeModal={cancelConfig}
+      exitModalButton={(e) => (
+        <div></div>
+      )}>
+      <Tabs
+        title="Video Gallery Config"
+        tabs={tabs}
+        id='styling'
+      >
+        <VideoAlbumsPreview
+          componentProps={{ videoAlbums, preview: true }}
+          formChanged={formChanged}
+          id="preview" />
+        <Community
+          center={centerContext}
+          community={community}
+          id="community" />
+      </Tabs>
+    </Modal>
+  )
+}
+
+VideoAlbumsConfigModal.defaultProps = {};
+
+VideoAlbumsConfigModal.propTypes = {
+  showConfigModal: PropTypes.func,
+  cancelConfig: PropTypes.func,
+  videoAlbums: PropTypes.array,
+  community: PropTypes.object,
+}
+
+export default VideoAlbumsConfigModal

package/src/stories/Modals/VideoConfigModal/VideoConfigModal.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import VideoSpace from '../../Spaces/ViewVideo/ViewVideo';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import VideoPreview from '../../PreviewComponents/VideoPreview/VideoPreview';
+import Community from '../../Reusable Components/Community/Community';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+
+const VideoConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    community,
+    videoSrc,
+    title,
+    discription,
+    date,
+    users,
+    comments,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<VideoSpace users={users} preview={true} videoSrc={videoSrc} comments={comments} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<VideoSpace users={users} preview={true} videoSrc={videoSrc} comments={comments} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Video Space Config"
+                tabs={tabs}
+                id='styling'
+            >
+                <VideoPreview
+                    componentProps={{ title, discription, comments, date, preview: true }}
+                    formChanged={formChanged}
+                    id="preview" />
+
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+VideoConfigModal.defaultProps = {};
+
+VideoConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    community: PropTypes.object,
+    videoSrc: PropTypes.string,
+    title: PropTypes.string,
+    discription: PropTypes.string,
+    date: PropTypes.string,
+    users: PropTypes.array,
+    comments: PropTypes.array,
+}
+
+export default VideoConfigModal

package/src/stories/Pages/Chat/Chat.jsx

@@ -14,7 +14,7 @@ import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetCon
 import worldStyles from '../ViewWorld/styles.json';
 
 import { SPACES } from '../ViewWorld/constatnts';
-import ChatSpace from '../../Chat/Chat';
+import ChatSpace from '../../Spaces/Chat/Chat';
 
 
 const Chat = ({

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

@@ -10,7 +10,7 @@ import Navbar from '../../../Navbar/Navbar';
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
 import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
-import DetailedEvent from '../../../Events/Event/Event';
+import DetailedEvent from '../../../Spaces/ViewEvent/Event';
 
 import worldStyles from '../../ViewWorld/styles.json';
 

package/src/stories/Pages/Events/Events/Events.jsx

@@ -10,7 +10,7 @@ import Navbar from '../../../Navbar/Navbar';
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
 import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
-import EventsList from '../../../Events/EventsList/EventsList';
+import EventsList from '../../../Spaces/EventsList/EventsList';
 import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
 
 import worldStyles from '../../ViewWorld/styles.json';

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

@@ -10,7 +10,7 @@ import Navbar from '../../../Navbar/Navbar';
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
 import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
-import Folders from '../../../Library/Folders/Folders';
+import Folders from '../../../Spaces/ViewFolders/ViewFolders';
 import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
 
 import worldStyles from '../../ViewWorld/styles.json';

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

@@ -10,7 +10,7 @@ import Navbar from '../../../Navbar/Navbar';
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
 import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
-import ViewNotes from '../../../Library/Notes/Notes';
+import ViewNotes from '../../../Spaces/NotesList/NotesList';
 import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
 
 import worldStyles from '../../ViewWorld/styles.json';

package/src/stories/Pages/Music/MusicAlbum/Music.jsx

@@ -6,7 +6,7 @@ import Center from '../../../Layout/Center/Center';
 import Right from '../../../Layout/Right/Right';
 
 import Navbar from '../../../Navbar/Navbar';
-import MusicAlbum from '../../../Music Album/ViewAlbum/ViewAlbum';
+import MusicAlbum from '../../../Spaces/ViewMusicAlbumList/ViewMusicAlbumList';
 
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";

package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx

@@ -6,7 +6,7 @@ import Center from '../../../Layout/Center/Center';
 import Right from '../../../Layout/Right/Right';
 
 import Navbar from '../../../Navbar/Navbar';
-import ViewAlbums from '../../../Music Album/ViewAlbums/ViewAlbums';
+import ViewAlbums from '../../../Spaces/ViewMusicAlbums/ViewMusicAlbums';
 
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";

package/src/stories/Pages/Photos/Album/Album.jsx

@@ -6,7 +6,7 @@ import Center from '../../../Layout/Center/Center';
 import Right from '../../../Layout/Right/Right';
 
 import Navbar from '../../../Navbar/Navbar';
-import ViewAlbum from '../../../Photo Album/ViewAlbum/ViewAlbum';
+import ViewAlbum from '../../../Spaces/ViewPhotoAlbums/ViewPhotoAlbums';
 
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";

package/src/stories/Pages/Photos/Albums/Albums.jsx

@@ -6,7 +6,7 @@ import Center from '../../../Layout/Center/Center';
 import Right from '../../../Layout/Right/Right';
 
 import Navbar from '../../../Navbar/Navbar';
-import ViewAlbums from '../../../Photo Album/ViewAlbums/ViewAlbums';
+import ViewAlbums from '../../../Spaces/ViewPhotoAlbums/ViewPhotoAlbums';
 
 import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";

package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx

@@ -13,7 +13,7 @@ import WidgetContainer from "../../../Reusable Components/WidgetContainer/Widget
 
 import worldStyles from '../../ViewWorld/styles.json';
 
-import VideoSpace from '../../../VideoAlbum/VideoSpace/VideoSpace';
+import VideoSpace from '../../../Spaces/ViewVideo/ViewVideo';
 import { SPACES } from '../../ViewWorld/constatnts';
 
 const DetailedVideo = (props) => {

package/src/stories/Pages/Video/VideoAlbum/Video.jsx

@@ -13,7 +13,7 @@ import WidgetContainer from "../../../Reusable Components/WidgetContainer/Widget
 
 import worldStyles from '../../ViewWorld/styles.json';
 
-import ViewAlbum from '../../../VideoAlbum/ViewAlbum/ViewAlbum'
+import ViewAlbum from '../../../Spaces/ViewVideoAlbumList/ViewVideoAlbumList'
 import { SPACES } from '../../ViewWorld/constatnts';
 
 import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';

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

@@ -9,117 +9,119 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 
 const ChatPreview = (props) => {
-    const [chatStyles, setChatStyles] = useState({});
-    const 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: 'purple',
-          dateColor: ''
-        }
+  const [chatStyles, setChatStyles] = useState({});
+  const 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: 'purple',
+      dateColor: ''
+    }
+  }
 
-      const sections = [
-        {
-          title: "Header Styles",
-          body: [
-            (<Picker label="Header Background" name="headerStyles.headerBackground" />),
-            (<TextField type="number" label="Padding" name="headerStyles.padding" />),
-            (<Picker label="Title Color" name="headerStyles.titleColor" />),
-            (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
-            (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />),
-            (<TextField type="number" label="Controls Size" name="headerStyles.controlsStyles.iconSize" />),
-            (<Picker label="Controls Color" name="headerStyles.controlsStyles.iconColor" />),
-          ]
-        },
-        {
-          title: "Card Styles",
-          body: [
-            (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
-            (<Picker label="Hover Color" name="customCardStyles.onHoverBackgroundColor" />),
-            (<TextField type="number" label="Card Radius" name="customCardStyles.cardRadius" />),
-            (<TextField type="number" label="Title Font Size" name="customCardStyles.cardTitleFontSize" />),
-            (<TextField type="number" label="Title Font Weight" name="customCardStyles.cardTitleFontWeight" />),
-            (<Picker label="Title Color" name="customCardStyles.cardTitleColor" />),
-            (<TextField type="number" label="Card Image Radius" name="customCardStyles.cardImageRadius" />),
-            (<TextField type="number" label="Text Font Size" name="customCardStyles.cardDescriptionFontSize" />),
-            (<Picker label="Text Font Color" name="customCardStyles.cardDescriptionColor" />),
-            (<TextField type="number" label="Card Padding" name="customCardStyles.cardPadding" />),
-            (<TextField type="number" label="Image Size" name="customCardStyles.imgSize" />),
-            (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
-            (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
-            (<Picker label="Date Color" name="customCardStyles.dateColor" />),
-          ]
-        },
+  const sections = [
+    {
+      title: "Header Styles",
+      body: [
+        (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+        (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+        (<Picker label="Title Color" name="headerStyles.titleColor" />),
+        (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+        (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />),
+        (<TextField type="number" label="Controls Size" name="headerStyles.controlsStyles.iconSize" />),
+        (<Picker label="Controls Color" name="headerStyles.controlsStyles.iconColor" />),
       ]
+    },
+    {
+      title: "Card Styles",
+      body: [
+        (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
+        (<Picker label="Hover Color" name="customCardStyles.onHoverBackgroundColor" />),
+        (<TextField type="number" label="Card Radius" name="customCardStyles.cardRadius" />),
+        (<TextField type="number" label="Title Font Size" name="customCardStyles.cardTitleFontSize" />),
+        (<TextField type="number" label="Title Font Weight" name="customCardStyles.cardTitleFontWeight" />),
+        (<Picker label="Title Color" name="customCardStyles.cardTitleColor" />),
+        (<TextField type="number" label="Card Image Radius" name="customCardStyles.cardImageRadius" />),
+        (<TextField type="number" label="Text Font Size" name="customCardStyles.cardDescriptionFontSize" />),
+        (<Picker label="Text Font Color" name="customCardStyles.cardDescriptionColor" />),
+        (<TextField type="number" label="Card Padding" name="customCardStyles.cardPadding" />),
+        (<TextField type="number" label="Image Size" name="customCardStyles.imgSize" />),
+        (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
+        (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
+        (<Picker label="Date Color" name="customCardStyles.dateColor" />),
+      ]
+    },
+  ]
 
-      const handleChange = (values) => {
-        if(values){
-          props.formChanged(values)
-          setChatStyles(values)
-          localStorage.setItem('formStyles', JSON.stringify(values))
-      }
-      }
-    
-      const submitHandler = (values) => {
-        console.log(values);
-      }
-    
-      const cancelHandler = () => {
-        console.log('Canceled')
+  const handleChange = (values) => {
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values)
+        setChatStyles(values)
+        localStorage.setItem('formStyles', JSON.stringify(values))
       }
+    }
+  }
+
+  const submitHandler = (values) => {
+    console.log(values);
+  }
+
+  const cancelHandler = () => {
+    console.log('Canceled')
+  }
   return (
     <Container>
-    <Left>
-      <ReusableForm
-        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}
-      />
-    </Left>
-    <Right>
-      <Preview type={'Chat'} componentProps={props.componentProps} stylingProps={chatStyles} />
-    </Right>
-  </Container>
+      <Left>
+        <ReusableForm
+          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}
+        />
+      </Left>
+      <Right>
+        <Preview type={'Chat'} componentProps={props.componentProps} stylingProps={chatStyles} />
+      </Right>
+    </Container>
   );
 };
 

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

@@ -58,10 +58,12 @@ const EventPreview = (props) => {
     ]
 
     const handleChange = (values) => {
-        if(values){
-            props.formChanged(values)
-            setEventStyles(values)
-            localStorage.setItem('formStyles', JSON.stringify(values))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setEventStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }