@mohamed-karawia/library 0.1.18 → 0.1.19

package/src/stories/Reusable Components/ReusableList/ReusableList.jsx

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 
 import { getCardStyle } from '../../helpers/util';
 
-import CardStyle3 from '../Cards/Card-style-3/CardStyle3';
 import ReusableHeader from '../ReusableHeader/ReusableHeader';
 
 const ReusableList = ({
@@ -20,15 +19,21 @@ const ReusableList = ({
     let child;
 
     const iconCliked = (action) => {
-        props.iconClicked(action)
+        if (props.iconClicked) {
+            props.iconClicked(action)
+        }
     }
 
     const clicked = (index, cardProps) => {
-        props.cardClicked(index, cardProps)
+        if (props.cardClicked) {
+            props.cardClicked(index, cardProps)
+        }
     }
 
     const cardIconClicked = (action, index) => {
-        props.cardIconClicked(action, index)
+        if (props.cardIconClicked) {
+            props.cardIconClicked(action, index)
+        }
     }
 
     const mapOverCardsData = (data) => {

package/src/stories/Reusable Components/Tabs/Tabs.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+import { useState } from 'react';
+
+const Tabs = ({ title, tabs, ...props }) => {
+    const [child, setChild] = useState(props.children[0])
+
+    const tabClicked = (tab) => {
+        let renderedComponent = props.children.find(child => child.props.id === tab.id)
+        setChild(renderedComponent)
+    }
+
+    return (
+        <Container>
+            <ReusableHeader
+                title={title}
+                {...props.headerStyles} />
+            <TabsContainer>
+                <Menu>
+                    {tabs.map(tab => <Tab onClick={() => tabClicked(tab)}>{tab.title}</Tab>)}
+                </Menu>
+                {child}
+            </TabsContainer>
+        </Container>
+    );
+};
+
+const Container = styled.div`
+    font-family: sans-serif;
+`
+
+const TabsContainer = styled.div`
+    
+`
+
+const Menu = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    background-color: white;
+`
+
+const Tab = styled.div`
+    padding: 5px 8px;
+    cursor: pointer;
+    background-color: white;
+    border: 1px solid gray;
+    color: #414141;
+    transition: all .3s;
+    &:hover {
+        background-color: #414141;
+        color: white;
+    }
+`
+
+Tabs.defaultProps = {};
+
+Tabs.propTypes = {
+    title: PropTypes.string,
+    tabs: PropTypes.array,
+    headerStyles: PropTypes.object
+}
+
+export default Tabs;

package/src/stories/Sections/Sections.jsx

@@ -7,10 +7,13 @@ import ReusableList from '../Reusable Components/ReusableList/ReusableList';
 
 
 const Sections = ({sections, ...props}) => {
-    const [center, setCenter] = useState(sections[0].data[0].component)
+    const [center, setCenter] = useState(props.children[0] || props.children)
+    console.log('renders')
 
     const cardClicked = (index, cardProps) => {
-        setCenter(cardProps.component)
+        let child = props.children.find(child => child.props.id === cardProps.id)
+        setCenter(child)
+        console.log(child)
     }
 
     return (

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx

@@ -5,8 +5,14 @@ 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 { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
 
 const cardControls = [
     { icon: (<AiFillDelete />), action: 'delete', name: 'Delete album' },
@@ -14,6 +20,7 @@ const cardControls = [
 
 const galleryControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 
 const AlbumsGallery = ({
@@ -24,7 +31,23 @@ const AlbumsGallery = ({
     countColor,
     countFontSize,
     ...props }) => {
-    const [showModal, setShowModal] = useState(false)
+    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 = {
         cardBackgroundColor,
@@ -51,12 +74,17 @@ const AlbumsGallery = ({
     }
 
     const onIconClicked = (action) => {
-        switch (action) {
-            case 'add':
-                setShowModal(true)
-                break;
-            default:
-                break;
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
         }
     }
 
@@ -81,14 +109,6 @@ const AlbumsGallery = ({
                 type="flat"
                 cardStyle="card-style-6"
                 columnsNumber={3}
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 iconClicked={onIconClicked}
                 galleryColumnGap={10}
                 galleryRowGap={20}
@@ -97,6 +117,7 @@ const AlbumsGallery = ({
                 cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}
@@ -108,7 +129,27 @@ const AlbumsGallery = ({
                     saveHandler={onAddAlbum}
                     cancelHandler={cancelHandler} />
             </Modal>
-        </Container>
+            <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>
+        </Container >
     )
 }
 

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx

@@ -1,10 +1,23 @@
-import React from 'react';
+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 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' },
+]
 
 const VideoSpace = ({
     videoSrc,
@@ -26,9 +39,43 @@ const VideoSpace = ({
     commentTitleColor,
     commentTitleFontSize,
     ...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) {
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
 
     return (
         <Container backgroundColor={backgroundColor}>
+            <ReusableHeader
+                title={title || 'Video Space'}
+                controls={controls}
+                iconClicked={iconClicked}
+                {...props.headerStyles}
+            />
             <VideoPlayer
                 iconsColor={iconsColor}
                 src={videoSrc} />
@@ -47,6 +94,28 @@ 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>
         </Container>
     )
 }

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx

@@ -5,18 +5,24 @@ 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 { AiFillPlayCircle, AiFillDelete, AiOutlineFileAdd } from "react-icons/ai";
 
 
+import { AiFillPlayCircle, AiFillDelete, AiOutlineFileAdd } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
 
 const cardControls = [
     { icon: (<AiFillPlayCircle />), action: 'play', name: 'play video' },
-    {icon: (<AiFillDelete />), action: 'delete', name: 'Delete video'}
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete video' }
 ]
 
 const galleryControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 
 const ViewAlbum = ({
@@ -25,8 +31,38 @@ const ViewAlbum = ({
     cardTitleColor,
     cardTitleFontSize,
     descColor,
-     ...props}) => {
+    ...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,
@@ -53,6 +89,9 @@ const ViewAlbum = ({
             case 'add':
                 setShowModal(true)
                 break;
+            case 'config':
+                setShowConfigModal(true)
+                break;
             default:
                 break;
         }
@@ -96,6 +135,26 @@ const ViewAlbum = ({
                     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>
         </Container>
     )
 }

package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.jsx

@@ -5,10 +5,9 @@ import styled from 'styled-components';
 import AudioPlayer from 'react-h5-audio-player';
 import 'react-h5-audio-player/lib/styles.css';
 
+import ReusableHeader from '../../Reusable Components/ReusableHeader/ReusableHeader';
 
-
-const MusicPlayerWidget = ({currentSong , ...props}) => {
-    
+const MusicPlayerWidget = ({ currentSong, ...props }) => {
 
     const musicPlayerHeading = (
         <Header>
@@ -23,9 +22,12 @@ const MusicPlayerWidget = ({currentSong , ...props}) => {
         </Header>
     )
 
-    
-
     return (
+        <Container>
+        <ReusableHeader
+            title={props.title || 'Music Player'}
+            {...props.headerStyles}
+        />
             <MusicPlayer
                 autoPlay='none'
                 src={props.playlist[currentSong].musicSrc}
@@ -37,13 +39,17 @@ const MusicPlayerWidget = ({currentSong , ...props}) => {
                 onClickNext={() => props.nextSong()}
                 {...props}
             />
+        </Container>
     )
 }
 
+const Container = styled.div`
+    width: 100%;
+`
 
 const MusicPlayer = styled(AudioPlayer)`
 
-    font-family: ${props => props.fontFamily || 'inherit'};
+    font-family: ${props => props.fontFamily || 'sans-serif'};
     background-color:  ${props => props.backgroundColor || 'transparent'};
     border-radius: ${props => props.borderRadius ? props.borderRadius + 'px' : 'inherit'};
     padding: ${props => props.padding ? props.padding + 'px' : 'inherit'}px;
@@ -96,6 +102,7 @@ const Img = styled.img`
 const MusicName = styled.h3`
     color: ${props => props.fontColor};
     font-size: ${props => props.fontSize}px;
+    font-weight: 300;
 `
 
 const ArtistName = styled.p`

package/src/stories/Widgets/SpacesListWidget/SpacesListWidget.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import List from '../../Reusable Components/ReusableList/ReusableList';
+
+import { AiOutlineFileAdd } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
+
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import SpaceListPreview from '../../PreviewComponents/SpacesListPreview/SpacesListPreview';
+import CreateSpace from '../../Forms/CreateSpace/CreateSpace';
+
+const SpacesListWidget = ({
+    spaces,
+    ...props
+}) => {
+    const [showCreateModal, setShowCreateModal] = useState(false)
+    const [showConfigModal, setShowConfigModal] = useState(false)
+
+    const listControls = [
+        { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Create Space' },
+        { icon: (<BsGear />), action: 'config', name: 'Config' },
+    ]
+
+    const onIconClicked = (action) => {
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowCreateModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
+    return (
+        <Container>
+            <List
+                listTitle={props.title || 'My Spaces'}
+                type='sectioned'
+                data={spaces}
+                iconClicked={onIconClicked}
+                listControls={listControls}
+                cardStyle='card-style-3'
+                {...props}
+            />
+            <Modal
+                modalIsOpen={showCreateModal}
+                closeModal={() => setShowCreateModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}
+            >
+                <CreateSpace />
+            </Modal>
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={() => setShowConfigModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}
+            >
+                <SpaceListPreview
+                    componentProps={{ spaces, preview: true }}
+                />
+            </Modal>
+        </Container>
+    );
+};
+
+const Container = styled.div`
+    
+`
+
+export default SpacesListWidget;

package/src/stories/Widgets/UsersWidget/UsersWidget.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import List from '../../Reusable Components/ReusableList/ReusableList';
+
+const UsersWidget = ({
+    users,
+    ...props
+}) => {
+
+    return (
+        <List
+            listTitle={props.title || 'Members List'}
+            cardStyle="card-style-1"
+            data={users}
+            type="flat"
+            {...props}
+        />
+    );
+};
+
+export default UsersWidget;

package/src/stories/helpers/util.js

@@ -16,13 +16,22 @@ 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'
-// Components
+import Folders from '../Library/Folders/Folders';
+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 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';
 
 export const stringSearch = (str, word) => {
 	str = str.toUpperCase();
@@ -72,6 +81,9 @@ export const getWidgetType = (widgetType, props, cardClicked) => {
 		'video player': (<VideoPlayer {...props}/>),
 		'notes': (<Notes {...props}/>),
 		'folders': (<Folders {...props}/>),
+		'users': (<UsersWidget {...props}/>),
+		'profile': (<CardStyle2 {...props}/>),
+		'spaces-list': (<SpacesListWidget cardClicked={(path) => cardClicked(path)} {...props}/>),
 	}
 	return widgetTypes[widgetType]
 }
@@ -83,6 +95,16 @@ export const getComponentType = (componentType, componentProps,  stylingProps) =
 		'MusicAlbum': (<MusicAlbum {...componentProps} {...stylingProps}/>),
 		'PhotoAlbum': (<PhotoAlbum {...componentProps} {...stylingProps}/>),
 		'PhotoAlbums': (<PhotoAlbums  {...componentProps}{...stylingProps}/>),
+		'MusicPlayer': (<MusicPlayer  {...componentProps}{...stylingProps}/>),
+		'Folders': (<Folders  {...componentProps}{...stylingProps}/>),
+		'Notes': (<Notes  {...componentProps}{...stylingProps}/>),
+		'Spaces-List': (<SpacesListWidget {...componentProps}{...stylingProps}/>),
+		'Chat': (<Chat {...componentProps}{...stylingProps}/>),
+		'Events': (<Events {...componentProps}{...stylingProps}/>),
+		'Event': (<Event {...componentProps}{...stylingProps}/>),
+		'Video-Space': (<VideoSpace {...componentProps}{...stylingProps}/>),
+		'Video-Albums': (<VideoAlbums {...componentProps}{...stylingProps}/>),
+		'Video-Album': (<VideoAlbum {...componentProps}{...stylingProps}/>),
 	}
 	return componentTypes[componentType]
 }