@mohamed-karawia/library 0.1.22 → 0.1.23

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";
@@ -29,21 +25,7 @@ const ViewAlbums = ({
 
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    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'
-        }
-    ]
+   
 
 
     const onIconClicked = (action) => {
@@ -72,7 +54,7 @@ const ViewAlbums = ({
         setShowModal(false)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
@@ -94,39 +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={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>
+            <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' },
@@ -41,22 +35,7 @@ const VideoSpace = ({
     community,
     ...props }) => {
     const [showConfigModal, setShowConfigModal] = useState(false);
-    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'
-        }
-    ]
-
-
+    
     const iconClicked = (action) => {
         if (!props.preview) {
             switch (action) {
@@ -100,29 +79,17 @@ const VideoSpace = ({
             <RichTextInput
                 users={users}
             />
-            <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 
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                community={community}
+                videoSrc={videoSrc}
+                title={title}
+                discription={discription}
+                date={date}
+                users={users}
+                comments={comments}
+            />
         </Container>
     )
 }

package/src/stories/{VideoAlbum/ViewAlbum/ViewAlbum.jsx → Spaces/ViewVideoAlbumList/ViewVideoAlbumList.jsx}

@@ -3,15 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import Gallery from '../../Reusable Components/Gallery/Gallery';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-import AddVideo from '../../Forms/AddVideo/AddVideo';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections'
-import VideoAlbumPreview from '../../PreviewComponents/VideoAlbumPreview/VideoAlbumPreview';
-import Community from '../../Reusable Components/Community/Community';
-
-
-
+import VideoAlbumConfigModal from '../../Modals/VideoAlbumConfigModal/VideoAlbumConfigModal';
+import AddVideoModal from '../../Modals/AddVideoModal/AddVideoModal';
 import { AiFillPlayCircle, AiFillDelete, AiOutlineFileAdd } from "react-icons/ai";
 import { BsGear } from "react-icons/bs";
 
@@ -35,22 +28,6 @@ const ViewAlbum = ({
     ...props }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    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'
-        }
-    ]
-
 
     const cardStyles = {
         darkOnHover: true,
@@ -97,7 +74,7 @@ const ViewAlbum = ({
         props.onAddVideo(album)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
@@ -120,37 +97,17 @@ const ViewAlbum = ({
                 customCardStyles={cardStyles}
                 {...props}
             />
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <AddVideo
-                    saveHandler={onAddVideo}
-                    cancelHandler={cancelHandler} />
-            </Modal>
-            <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>
+            <AddVideoModal
+                showModal={showModal}
+                onAddVideo={onAddVideo}
+                closeModal={closeModal}
+            />
+            <VideoAlbumConfigModal
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                album={album}
+                community={community}
+            />
         </Container>
     )
 }

package/src/stories/{VideoAlbum/AlbumsGallery/AlbumsGallery.jsx → Spaces/ViewVideoAlbums/ViewVideoAlbums.jsx}

@@ -3,12 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import Gallery from '../../Reusable Components/Gallery/Gallery';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-import CreateVideoAlbum from '../../Forms/CreateVideoAlbum/CreateVideoAlbum';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections'
-import VideoAlbumsPreview from '../../PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview';
-import Community from '../../Reusable Components/Community/Community';
+import AddVideoAlbumModal from '../../Modals/AddVideoAlbumModal/AddVideoAlbumModal';
+import VideoAlbumsConfigModal from '../../Modals/VideoAlbumsConfigModal/VideoAlbumsConfigModal';
 
 
 import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
@@ -34,20 +30,6 @@ const AlbumsGallery = ({
     ...props }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    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'
-        }
-    ]
 
 
     const cardStyles = {
@@ -98,7 +80,7 @@ const AlbumsGallery = ({
         props.onAddAlbum(album)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
@@ -125,37 +107,17 @@ const AlbumsGallery = ({
                 customCardStyles={cardStyles}
                 {...props}
             />
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <CreateVideoAlbum
-                    saveHandler={onAddAlbum}
-                    cancelHandler={cancelHandler} />
-            </Modal>
-            <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>
+            <AddVideoAlbumModal
+                showModal={showModal}
+                onAddAlbum={onAddAlbum}
+                closeModal={closeModal}
+            />
+            <VideoAlbumsConfigModal
+                videoAlbums={videoAlbums}
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                community={community}
+            />
         </Container >
     )
 }

package/src/stories/helpers/util.js

@@ -14,24 +14,24 @@ import CardStyle11 from '../Reusable Components/Cards/Card-style-11/CardStyle11'
 import ReusableList from '../Reusable Components/ReusableList/ReusableList';
 import MusicPlayerWidget from '../Widgets/MusicPlayerWidget/MusicPlayerWidget';
 import LogoWidget from '../Widgets/LogoWidget/LogoWidget';
-import VideoPlayer from '../VideoAlbum/VideoPlayer/VideoPlayer';
-import Notes from '../Library/Notes/Notes';
-import Folders from '../Library/Folders/Folders';
+import VideoPlayer from '../Widgets/VideoPlayer/VideoPlayer';
+import Notes from '../Spaces/NotesList/NotesList';
+import Folders from '../Spaces/ViewFolders/ViewFolders';
 import UsersWidget from '../Widgets/UsersWidget/UsersWidget';
 import SpacesListWidget from '../Widgets/SpacesListWidget/SpacesListWidget';
 // Preview Components
 import Navbar from '../Navbar/Navbar';
-import MusicAlbums from '../Music Album/ViewAlbums/ViewAlbums';
-import MusicAlbum from '../Music Album/ViewAlbum/ViewAlbum';
-import PhotoAlbums from '../Photo Album/ViewAlbums/ViewAlbums'
-import PhotoAlbum from '../Photo Album/ViewAlbum/ViewAlbum';
+import MusicAlbums from '../Spaces/ViewMusicAlbums/ViewMusicAlbums';
+import MusicAlbum from '../Spaces/ViewMusicAlbumList/ViewMusicAlbumList';
+import PhotoAlbums from '../Spaces/ViewPhotoAlbums/ViewPhotoAlbums'
+import PhotoAlbum from '../Spaces/ViewPhotoAlbumList/ViewPhotoAlbumList';
 import MusicPlayer from '../Widgets/MusicPlayerWidget/MusicPlayerWidget';
-import Chat from '../Chat/Chat';
-import Events from '../Events/EventsList/EventsList';
-import Event from '../Events/Event/Event';
-import VideoSpace from '../VideoAlbum/VideoSpace/VideoSpace';
-import VideoAlbums from '../VideoAlbum/AlbumsGallery/AlbumsGallery';
-import VideoAlbum from '../VideoAlbum/ViewAlbum/ViewAlbum';
+import Chat from '../Spaces/Chat/Chat';
+import Events from '../Spaces/EventsList/EventsList';
+import Event from '../Spaces/ViewEvent/Event';
+import VideoSpace from '../Spaces/ViewVideo/ViewVideo';
+import VideoAlbums from '../Spaces/ViewVideoAlbums/ViewVideoAlbums';
+import VideoAlbum from '../Spaces/ViewVideoAlbumList/ViewVideoAlbumList';
 
 export const stringSearch = (str, word) => {
 	str = str.toUpperCase();

package/src/stories/store/actions/actions.js

@@ -0,0 +1,7 @@
+export const addEvent = (state, action) => {
+    // state.spaces[1].spaceProps.events = [...state.spaces[1].spaceProps.events, action.payload]
+    alert('testtttt')
+    // console.log(action)
+    // alert
+    console.log(action)
+}

package/src/stories/store/store.js

@@ -1,7 +1,7 @@
 import { configureStore, createSlice } from '@reduxjs/toolkit';
-import { community } from './communities';
-
+import { community } from './community';
 
+import * as actions from './actions/actions.js'
 
 const Community = createSlice({
     name: 'community',
@@ -9,8 +9,7 @@ const Community = createSlice({
     reducers: {
         addEvent: (state, action) => {
             state.spaces[1].spaceProps.events = [...state.spaces[1].spaceProps.events, action.payload]
-            // console.log(action)
-            // alert
+            // alert('tseteattet')
             console.log(action)
         },
         deleteEvent: (state, action) => {

package/src/stories/Chat/Chat.jsx

@@ -1,154 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-
-import { BsGear } from "react-icons/bs";
-import List from '../Reusable Components/ReusableList/ReusableList';
-import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
-import ChatPreview from '../PreviewComponents/ChatPreview/ChatPreview';
-import Modal from '../Reusable Components/ReactModal/ReactModal';
-import Community from '../Reusable Components/Community/Community';
-
-
-import Tabs from '../Reusable Components/Tabs/Tabs';
-import Sections from '../Sections/Sections'
-
-
-const listControls = [
-    { icon: (<BsGear />), action: 'config', name: 'Config' },
-]
-
-const Chat = ({
-    data,
-    users,
-    title,
-    backgroundColor,
-    community,
-    ...props }) => {
-
-    const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Chat preview={true}  users={users} data={data}/>)
-
-    const formChanged = (values) => {
-        setCenterContext(<Chat preview={true}  users={users} data={data} {...values} />)
-    }
-
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
-
-    // let sections = [
-    //     {
-    //         title: 'Styles',
-    //         data: [
-    //             {
-    //                 title: 'Styling',
-    //                 id: 'styling'
-    //             }
-    //         ]
-    //     }
-    // ]
-
-    const onIconClicked = (action) => {
-        if (!props.preview) {
-            switch (action) {
-                case 'config':
-                    setShowConfigModal(true)
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-
-     const cancelConfig = () => {
-        setShowConfigModal(false);
-        localStorage.removeItem('formStyles')
-    }
-
-    return (
-        <Container
-            backgroundColor={backgroundColor}>
-            <List
-                listTitle={title || 'Chat'}
-                type="flat"
-                data={data}
-                cardStyle="card-style-8"
-                iconClicked={onIconClicked}
-                listControls={listControls}
-                {...props}
-            />
-            <RichTextInput
-                users={users}
-            />
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={cancelConfig}
-                exitModalButton={(e) => (
-                    <div></div>
-                )} preview={true} 
-            >
-                {/* <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="Chat Config"
-                        tabs={tabs}
-                        id='styling'
-                    >
-                        <ChatPreview
-                            componentProps={{ data, users, title: props.title || "Chat", preview: true }}
-                            formChanged={formChanged}
-                            id="preview"
-                        />
-                        <Community
-                            center={centerContext}
-                            community={community} 
-                            id="community" />
-                    </Tabs>
-                {/* </Sections> */}
-            </Modal>
-        </Container>
-    )
-}
-
-const Container = styled.div`
-    width: 100%;
-    background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
-`
-
-Chat.defaultProps = {
-    title: 'Chat Space'
-};
-
-Chat.propTypes = {
-    data: PropTypes.array.isRequired,
-    title: PropTypes.string,
-    users: PropTypes.array,
-    backgroundColor: PropTypes.string,
-    customCardStyles: PropTypes.object,
-    headerStyles: PropTypes.object,
-    preview: PropTypes.bool
-}
-
-export default Chat