@mohamed-karawia/library 0.1.21 → 0.1.24

package/src/stories/Modals/PhotoAlbumsConfigModal/PhotoAlbumsConfigModal.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ViewAlbums from '../../Spaces/ViewPhotoAlbums/ViewPhotoAlbums';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import PhotoAlbumsPreview from '../../PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Community from '../../Reusable Components/Community/Community';
+
+const PhotoAlbumsConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    albums,
+    community,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<ViewAlbums preview={true} albums={albums} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbums preview={true} albums={albums} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Photo Albums Config"
+                tabs={tabs}
+                id='styling'
+            >
+                <PhotoAlbumsPreview
+                    componentProps={{ albums, title: props.title || 'Photo Albums', preview: true }}
+                    formChanged={formChanged}
+                    id='preview'
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+PhotoAlbumsConfigModal.defaultProps = {};
+
+PhotoAlbumsConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    albums: PropTypes.array,
+    community: PropTypes.object,
+    title: PropTypes.string
+}
+
+export default PhotoAlbumsConfigModal;

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';