@mohamed-karawia/library 0.1.21 → 0.1.24

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";
 
@@ -31,38 +24,10 @@ const ViewAlbum = ({
     cardTitleColor,
     cardTitleFontSize,
     descColor,
+    community,
     ...props }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album}/>)
-
-    const formChanged = (values) => {
-        console.log('context changed')
-        setCenterContext(<ViewAlbum album={album} {...values} />)
-    }
-
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
-
-    const sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling', component: (<Tabs
-                        title="Video Album Config"
-                        tabs={tabs}
-                    />)
-                }
-            ]
-        }
-    ]
 
     const cardStyles = {
         darkOnHover: true,
@@ -85,15 +50,17 @@ const ViewAlbum = ({
     }
 
     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;
+            }
         }
     }
 
@@ -107,10 +74,15 @@ const ViewAlbum = ({
         props.onAddVideo(album)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -125,36 +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={() => setShowConfigModal(false)}
-                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}
-                            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";
@@ -30,23 +26,10 @@ 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 formChanged = (values) => {
-        setCenterContext(<AlbumsGallery videoAlbums={videoAlbums} {...values} />)
-    }
-
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
 
 
     const cardStyles = {
@@ -97,10 +80,15 @@ const AlbumsGallery = ({
         props.onAddAlbum(album)
     }
 
-    const cancelHandler = () => {
+    const closeModal = () => {
         setShowModal(false)
     }
 
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container>
             <Gallery
@@ -119,36 +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={() => setShowConfigModal(false)}
-                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}
-                        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/{communities.js → community.js}

@@ -64,37 +64,35 @@ export const community = {
                 }
             ],
             styles: {
-                header: {
+                headerStyles: {
 
                 },
-                body: {
-                    sectionHeaderStyles: {
-                        padding: 2,
-                        headerBackground: "#00ADC4",
-                        titleColor: "white"
-                    },
-                    customCardStyles: {
-                        cardPadding: 6,
-                        cardTitleFontSize: 15,
-                        cardBackgroundColor: "white",
-                        cardTitleColor: "#00ADC4",
-                        cardBorderSize: 1,
-                        cardBorderColor: "#00ADC4",
-                        onHoverBackgroundColor: "#d3d3d3",
-                        controlsStyles: {
-                            showOnHover: true,
-                            iconColor: "#00ADC4"
-                        }
-                    },
-                    borderRadius: 10,
-                    primaryColor: "#00ADC4",
-                    iconsColor: "#00ADC4",
-                    backgroundColor: "white",
-                    discColor: "gray",
-                    dateColor: "gray",
-                    iconColor: "#00ADC4",
-                    cardTitleFontSize: 15
+                sectionHeaderStyles: {
+                    padding: 2,
+                    headerBackground: "#00ADC4",
+                    titleColor: "white"
                 },
+                customCardStyles: {
+                    cardPadding: 6,
+                    cardTitleFontSize: 15,
+                    cardBackgroundColor: "white",
+                    cardTitleColor: "#00ADC4",
+                    cardBorderSize: 1,
+                    cardBorderColor: "#00ADC4",
+                    onHoverBackgroundColor: "#d3d3d3",
+                    controlsStyles: {
+                        showOnHover: true,
+                        iconColor: "#00ADC4"
+                    }
+                },
+                borderRadius: 10,
+                primaryColor: "#00ADC4",
+                iconsColor: "#00ADC4",
+                backgroundColor: "white",
+                discColor: "gray",
+                dateColor: "gray",
+                iconColor: "#00ADC4",
+                cardTitleFontSize: 15
 
             }
         }
@@ -487,7 +485,7 @@ export const community = {
                     { img: 'https://images.unsplash.com/photo-1574031493536-05e45f214ab6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8em9vfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60', title: 'Album 4', count: '24' },
                     { img: 'https://images.unsplash.com/photo-1458832463097-ab73e7b4fc4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fHpvb3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60', title: 'Album 5', count: '24' },
                     { img: 'https://images.unsplash.com/photo-1610655012457-9cbd66fe510b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHpvb3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60', title: 'Album 6', count: '24' },
-                    
+
                 ],
                 title: 'My Albums'
             },

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,148 +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,
-    ...props }) => {
-
-    const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Chat users={users} data={data}/>)
-
-    const formChanged = (values) => {
-        console.log('context changed')
-        setCenterContext(<Chat 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;
-            }
-        }
-    }
-
-    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={() => setShowConfigModal(false)}
-                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',
-                        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}
-                            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