@mohamed-karawia/library 0.1.15 → 0.1.19

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,14 +39,18 @@ 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'};
-    background-color:  ${props => props.backgroundColor || '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;
     width: ${props => props.width}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

@@ -15,6 +15,23 @@ 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 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();
@@ -40,17 +57,17 @@ export const addObjectToArray = (arr, obj) => {
 	return newArray;
 }
 
-export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked) => {
+export const getCardStyle = (cardProps, cardType, customCardStyles, cardControls, index, clicked, cardIconClicked, onAction) => {
 	const cardTypes = {
 		'card-style-1': (<CardStyle1 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} />),
 		'card-style-2': (<CardStyle2 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
-		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={(path) => clicked(path)}/>),
+		'card-style-3': (<CardStyle3 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)}/>),
 		'card-style-4': (<CardStyle4 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls}/>),
 		'card-style-6': (<CardStyle6 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-7': (<CardStyle7 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-8': (<CardStyle8 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
-		'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
-		'card-style-10': (<CardStyle10 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'card-style-9': (<CardStyle9 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)}/>),
+		'card-style-10': (<CardStyle10 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 		'card-style-11': (<CardStyle11 key={index} {...cardProps} {...customCardStyles} cardControls={cardControls} cardClicked={() => clicked(index, cardProps)} iconClicked={(action) => cardIconClicked(action, index)} />),
 	}
 	return cardTypes[cardType]
@@ -61,7 +78,34 @@ export const getWidgetType = (widgetType, props, cardClicked) => {
 		'list': (<ReusableList cardClicked={(path) => cardClicked(path)} {...props}/>),
 		'music player': (<MusicPlayerWidget {...props} />),
 		'logo': (<LogoWidget {...props}/>),
-		'video player': (<VideoPlayer {...props}/>)
+		'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]
-}
+}
+
+export const getComponentType = (componentType, componentProps,  stylingProps) => {
+	const componentTypes = {
+		'Navbar': (<Navbar {...componentProps} {...stylingProps}/>),
+		'MusicAlbums': (<MusicAlbums {...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]
+}
+