@mohamed-karawia/library 0.1.14 → 0.1.18

package/src/stories/Sections/Sections.jsx

@@ -0,0 +1,53 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import ReusableList from '../Reusable Components/ReusableList/ReusableList';
+
+
+
+const Sections = ({sections, ...props}) => {
+    const [center, setCenter] = useState(sections[0].data[0].component)
+
+    const cardClicked = (index, cardProps) => {
+        setCenter(cardProps.component)
+    }
+
+    return (
+        <Container {...props}>
+            <Left>
+            <ReusableList
+              type='sectioned'
+              data={sections}
+              cardStyle='card-style-3'
+              cardClicked={cardClicked}
+              {...props}
+          />
+            </Left>
+            <Center>{center}</Center>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    background-color: ${props => props.backgroundColor};
+    background-color: #414141;
+    display: flex;
+`
+
+const Left = styled.div`
+    flex: 1;
+`
+
+const Center = styled.div`
+    flex: 3;
+`
+
+Sections.defaultProps = {};
+
+Sections.propTypes = {
+    sections: PropTypes.array.isRequired,
+    backgroundColor: PropTypes.string,
+}
+
+export default Sections;

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

@@ -75,13 +75,10 @@ const ViewAlbum = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Video Album"
+                galleryTitle={props.title || "Video Album"}
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                columnsNumber={3}
-                galleryColumnGap={10}
-                galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
@@ -116,7 +113,8 @@ ViewAlbum.propTypes = {
     cardTitleFontSize: PropTypes.number,
     descColor: PropTypes.string,
     cardIconClicked: PropTypes.func,
-    onAddAlbum: PropTypes.func
+    onAddAlbum: PropTypes.func,
+    title: PropTypes.string
 }
 
 export default ViewAlbum

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

@@ -44,7 +44,7 @@ const MusicPlayerWidget = ({currentSong , ...props}) => {
 const MusicPlayer = styled(AudioPlayer)`
 
     font-family: ${props => props.fontFamily || 'inherit'};
-    background-color:  ${props => props.backgroundColor || 'inherit'};
+    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;

package/src/stories/helpers/util.js

@@ -15,6 +15,14 @@ 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'
+// 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';
 
 export const stringSearch = (str, word) => {
 	str = str.toUpperCase();
@@ -40,18 +48,18 @@ 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)} 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-11': (<CardStyle11 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 +69,21 @@ 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}/>),
 	}
 	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}/>),
+	}
+	return componentTypes[componentType]
+}
+