@mohamed-karawia/library 0.1.20 → 0.1.23

package/src/stories/Spaces/ViewMusicAlbums/ViewMusicAlbums.jsx

@@ -0,0 +1,108 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import Gallery from "../../Reusable Components/Gallery/Gallery";
+import CreateMusicAlbumModal from '../../Modals/CreateMusicAlbumModal/CreateMusicAlbumModal';
+import MusicAlbumsConfigModal from "../../Modals/MusicAlbumsConfigModal/MusicAlbumsConfigModal";
+
+
+import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
+
+const cardControls = [
+  { icon: <AiFillDelete />, action: "delete", name: "Delete album" },
+];
+
+const galleryControls = [
+  { icon: <AiOutlineFileAdd />, action: "add", name: "Add Album" },
+  { icon: <BsGear />, action: "config", name: "Config" },
+];
+
+const ViewAlbums = ({ albums, community, ...props }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [showConfigModal, setShowConfigModal] = useState(false);
+
+  const onHeaderIconClicked = (action) => {
+    if (!props.preview) {
+      switch (action) {
+        case "add":
+          setShowModal(true);
+          break;
+        case "config":
+          setShowConfigModal(true);
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  const cardIconClicked = (action, index) => {
+    props.cardIconClicked(action, index);
+  };
+
+
+  const onAddAlbum = (album) => {
+    setShowModal(false);
+    props.onAddAlbum(album);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+  };
+
+  const cancelConfig = () => {
+    setShowConfigModal(false);
+    localStorage.removeItem("formStyles");
+  };
+
+  return (
+    <Container>
+      <Gallery
+        galleryTitle={props.title || "Music Albums"}
+        data={albums}
+        type="flat"
+        cardStyle="card-style-6"
+        galleryControls={galleryControls}
+        iconClicked={onHeaderIconClicked}
+        cardControls={cardControls}
+        cardIconClicked={cardIconClicked}
+        {...props}
+      />
+      <CreateMusicAlbumModal
+        showModal={showModal}
+        onAddAlbum={onAddAlbum}
+        closeModal={closeModal}
+        saveBtnText={props.saveBtnText}
+        cancelBtnText={props.cancelBtnText}
+      />
+      <MusicAlbumsConfigModal
+        showConfigModal={showConfigModal}
+        cancelConfig={cancelConfig}
+        albums={albums}
+        community={community}
+      />
+    </Container>
+  );
+};
+const Container = styled.div`
+  width: 100%;
+`;
+
+ViewAlbums.defaultProps = {};
+
+ViewAlbums.propTypes = {
+  albums: PropTypes.array,
+  cardIconClicked: PropTypes.func,
+  onAddAlbum: PropTypes.func,
+  cardBackgroundColor: PropTypes.string,
+  albumTitleColor: PropTypes.string,
+  descColor: PropTypes.string,
+  title: PropTypes.string,
+  saveBtnText: PropTypes.string,
+  cancelBtnText: PropTypes.string,
+  preview: PropTypes.bool,
+};
+
+export default ViewAlbums;

package/src/stories/{Photo Album/ViewAlbum/ViewAlbum.jsx → Spaces/ViewPhotoAlbumList/ViewPhotoAlbumList.jsx}

@@ -4,15 +4,10 @@ import PropTypes from 'prop-types';
 
 import AddPhoto from '../../Forms/AddPhoto/AddPhoto'
 import Gallery from '../../Reusable Components/Gallery/Gallery';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-import DetailedPhoto from '../DetailedPhoto/DetailedPhoto';
-import PhotoAlbumPreview from '../../PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections';
-import Community from '../../Reusable Components/Community/Community';
-
-
-import { AiOutlineArrowLeft, AiOutlineArrowRight, AiOutlineClose, AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import AddPhotoModal from '../../Modals/AddPhotoModal/AddPhotoModal';
+import ShowImgModal from '../../Modals/ShowImgModal/ShowImgModal';
+import PhotoAlbumConfigModal from '../../Modals/PhotoAlbumConfigModal/PhotoAlbumConfigModal';
+import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
 import { BsGear } from "react-icons/bs";
 
 
@@ -30,6 +25,7 @@ const ViewAlbum = ({
     cardBackgroundColor,
     imgTitleColor,
     descColor,
+    community,
     ...props
 }) => {
 
@@ -61,20 +57,7 @@ const ViewAlbum = ({
     const [openedImgIndex, setOpenedImgIndex] = useState(null);
     const [openedImg, setOpenedImg] = useState(null);
 
-    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album} />)
-
-    const formChanged = (values) => {
-        setCenterContext(<ViewAlbum album={album} {...values} />)
-    }
 
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
 
 
     const handleUserKeyPress = useCallback(event => {
@@ -92,15 +75,17 @@ const ViewAlbum = ({
     }, [openedImgIndex, handleUserKeyPress]);
 
     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;
+            }
         }
     }
 
@@ -115,7 +100,7 @@ const ViewAlbum = ({
         props.addPhoto(photo)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
@@ -136,6 +121,16 @@ const ViewAlbum = ({
         }
     }
 
+    const closeImgModal = () => {
+        setShowImgModal(false)
+        setOpenedImgIndex(null)
+    }
+
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -151,61 +146,27 @@ const ViewAlbum = ({
                 customCardStyles={cardStyles}
                 {...props} />
 
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <AddPhoto
-                    saveHandler={onAddPhoto}
-                    cancelHandler={cancelHandler}
-                    saveBtnText={props.saveBtnText || 'Add'}
-                    cancelBtnText={props.saveBtnText || 'Cancel'} />
-            </Modal>
-            <Modal
-                modalIsOpen={showImgModal}
-                closeModal={() => {
-                    setShowImgModal(false)
-                    setOpenedImgIndex(null)
-                }}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}
-                width="70vw"
-                height="90vh">
-                <CloseIconContainer onClick={() => setShowImgModal(false)}>
-                    <AiOutlineClose />
-                </CloseIconContainer>
-                <LeftIconContainer onClick={prevPhoto}>
-                    <AiOutlineArrowLeft />
-                </LeftIconContainer>
-                <DetailedPhoto cardClicked={nextPhoto} img={openedImg} />
-                <RightIconContainer onClick={nextPhoto}>
-                    <AiOutlineArrowRight />
-                </RightIconContainer>
-            </Modal>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}
-            >
-                <Tabs
-                    title="Photo Album Config"
-                    tabs={tabs}
-                    id='styling'
-                >
-                    <PhotoAlbumPreview
-                        componentProps={{ album, title: props.title || 'Photo Album', preview: true }}
-                        formChanged={formChanged}
-                    />
-                    <Community
-                        center={centerContext}
-                        id="community" />
-                </Tabs>
-            </Modal>
+            <AddPhotoModal
+                showModal={showModal}
+                onAddPhoto={onAddPhoto}
+                closeModal={closeModal}
+                saveBtnText={props.saveBtnText}
+                cancelBtnText={props.cancelBtnText}
+            />
+            <ShowImgModal
+                showImgModal={showImgModal}
+                closeModal={closeImgModal}
+                prevPhoto={prevPhoto}
+                nextPhoto={nextPhoto}
+                openedImg={openedImg}
+            />
+            <PhotoAlbumConfigModal
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                album={album}
+                community={community}
+                title={props.title}
+            />
         </Container>
     )
 }
@@ -214,53 +175,6 @@ const Container = styled.div`
 
 `
 
-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;
-`
-
 ViewAlbum.defaultProps = {
     headerBackground: '#FE1744',
     titleColor: 'white',

package/src/stories/{Photo Album/ViewAlbums/ViewAlbums.jsx → Spaces/ViewPhotoAlbums/ViewPhotoAlbums.jsx}

@@ -2,13 +2,9 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import CreateAlbum from '../../Forms/CreateAlbum/CreateAlbum'
 import Gallery from '../../Reusable Components/Gallery/Gallery';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-import PhotoAlbumsPreview from '../../PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections';
-import Community from '../../Reusable Components/Community/Community';
+import AddPhotoAlbum from '../../Modals/AddPhotoAlbum/AddPhotoAlbum';
+import PhotoAlbumsConfigModal from '../../Modals/PhotoAlbumsConfigModal/PhotoAlbumsConfigModal';
 
 import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
 import { BsGear } from "react-icons/bs";
@@ -24,25 +20,12 @@ 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 formChanged = (values) => {
-        setCenterContext(<ViewAlbums albums={albums} {...values} />)
-    }
-
-
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
+   
 
 
     const onIconClicked = (action) => {
@@ -71,10 +54,15 @@ const ViewAlbums = ({
         setShowModal(false)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -88,38 +76,18 @@ const ViewAlbums = ({
                 cardIconClicked={cardIconClicked}
                 {...props} />
 
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <CreateAlbum
-                    saveHandler={onAddAlbum}
-                    cancelHandler={cancelHandler} />
-            </Modal>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
-                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}
-                        id="community" />
-                </Tabs>
-            </Modal>
+            <AddPhotoAlbum
+                showModal={showModal}
+                onAddAlbum={onAddAlbum}
+                closeModal={closeModal}
+            />
+            <PhotoAlbumsConfigModal 
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                albums={albums}
+                community={community}
+                title={props.title}
+            />
         </Container>
     )
 }

package/src/stories/{VideoAlbum/VideoSpace/VideoSpace.jsx → Spaces/ViewVideo/ViewVideo.jsx}

@@ -2,18 +2,12 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import Modal from '../../Reusable Components/ReactModal/ReactModal'
-import VideoPlayer from '../VideoPlayer/VideoPlayer';
-import Comments from '../Comments/Comments';
+import VideoPlayer from '../../Widgets/VideoPlayer/VideoPlayer';
+import VideoConfigModal from '../../Modals/VideoConfigModal/VideoConfigModal';
+import Comments from '../../Reusable Components/Comments/Comments';
 import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
 import ReusableHeader from '../../Reusable Components/ReusableHeader/ReusableHeader';
 import { BsGear } from "react-icons/bs";
-import VideoPreview from '../../PreviewComponents/VideoPreview/VideoPreview';
-import Community from '../../Reusable Components/Community/Community';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-
-
-
 
 const controls = [
     { icon: (<BsGear />), action: 'config', name: 'Config' },
@@ -38,24 +32,10 @@ const VideoSpace = ({
     commentBackgroundColor,
     commentTitleColor,
     commentTitleFontSize,
+    community,
     ...props }) => {
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<VideoSpace videoSrc={videoSrc} />)
-
-    const formChanged = (values) => {
-        setCenterContext(<VideoSpace videoSrc={videoSrc} {...values} />)
-    }
-
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
-
-
+    
     const iconClicked = (action) => {
         if (!props.preview) {
             switch (action) {
@@ -68,6 +48,11 @@ const VideoSpace = ({
         }
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container backgroundColor={backgroundColor}>
             <ReusableHeader
@@ -94,28 +79,17 @@ const VideoSpace = ({
             <RichTextInput
                 users={users}
             />
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
-                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}
-                        id="community" />
-                </Tabs>
-            </Modal>
+            <VideoConfigModal 
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                community={community}
+                videoSrc={videoSrc}
+                title={title}
+                discription={discription}
+                date={date}
+                users={users}
+                comments={comments}
+            />
         </Container>
     )
 }