@mohamed-karawia/library 0.1.17 → 0.1.18

package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx

@@ -20,9 +20,6 @@ const ViewAlbum = ({
     album,
     cardBackgroundColor,
     imgTitleColor,
-    columnsNumber,
-    columnGap,
-    rowGap,
     descColor,
     ...props
 }) => {
@@ -111,13 +108,10 @@ const ViewAlbum = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Photo Album"
+                galleryTitle={props.title || "Photo Album"}
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
@@ -135,8 +129,8 @@ const ViewAlbum = ({
                 <AddPhoto
                     saveHandler={onAddPhoto}
                     cancelHandler={cancelHandler}
-                    saveBtnText={'Add'}
-                    cancelBtnText={'Cancel'} />
+                    saveBtnText={props.saveBtnText || 'Add'}
+                    cancelBtnText={props.saveBtnText || 'Cancel'} />
             </Modal>
             <Modal
                 modalIsOpen={showImgModal}
@@ -237,6 +231,9 @@ ViewAlbum.propTypes = {
     cardBackgroundColor: PropTypes.string,
     imgTitleColor: PropTypes.string,
     descColor: PropTypes.string,
+    title: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    saveBtnText: PropTypes.string,
 }
 
 export default ViewAlbum;

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -18,9 +18,6 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
-    columnsNumber,
-    columnGap,
-    rowGap,
     ...props }) => {
 
     const [showModal, setShowModal] = useState(false)
@@ -51,13 +48,10 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Photo Albums"
+                galleryTitle={props.title || "Photo Albums"}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardControls={cardControls}
@@ -82,30 +76,16 @@ const Container = styled.div`
     width: 100%;
 `
 
-ViewAlbums.defaultProps = {
-    columnsNumber: 3,
-    headerBackground: '#FE1744',
-    titleColor: 'white',
-    cardBackgroundColor: 'white',
-    columnGap: 10,
-    rowGap: 20
-};
+ViewAlbums.defaultProps = {};
 
 ViewAlbums.propTypes = {
     albums: PropTypes.array,
     cardIconClicked: PropTypes.func,
     onDeleteAlbum: PropTypes.func,
     onAddAlbum: PropTypes.func,
-    columnsNumber: PropTypes.number,
-    headerBackground: PropTypes.string,
-    titleColor: PropTypes.string,
-    cardBackgroundColor: PropTypes.string,
-    columnGap: PropTypes.number,
-    rowGap: PropTypes.number,
-    countColor: PropTypes.string,
-    countFontSize: PropTypes.number,
-    cardTitleColor: PropTypes.string,
-    cardTitleFontSize: PropTypes.number,
+    title: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object
 }
 
 export default ViewAlbums

package/src/stories/Preview/Preview.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import ProopTypes from 'prop-types';
+
+import { getComponentType } from '../helpers/util';
+
+const Preview = ({
+    type,
+    componentProps,
+    stylingProps,
+    ...props
+}) => {
+
+    const child = getComponentType(type, componentProps, stylingProps);
+
+    return (
+        <Container>
+            {child}
+        </Container>
+    )
+};
+
+const Container = styled.div`
+    width: 100%;
+`
+
+export default Preview;

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

@@ -91,7 +91,11 @@ const SectionBody = styled.div`
     row-gap: ${props => props.galleryRowGap}px;
 `
 
-Gallery.defaultProps = {};
+Gallery.defaultProps = {
+    columnsNumber: 3,
+    galleryColumnGap: 10,
+    galleryRowGap: 20
+};
 
 Gallery.propTypes = {
     data: PropTypes.array.isRequired,

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

@@ -69,7 +69,7 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
 }
 
 const CreateForm = styled(Form)`
-    background-color: ${props => props.formBackgroundColor || 'white'};
+    background-color: ${props => props.formBackgroundColor || 'transparent'};
     display: flex;
     flex-direction: column;
 

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

@@ -63,8 +63,6 @@ ReusableHeader.propTypes = {
     controlsStyles: PropTypes.object,
     headerBackground: PropTypes.string,
     padding: PropTypes.number,
-    horizontalPadding: PropTypes.number,
-    headerMarginBottom: PropTypes.number,
     titleColor: PropTypes.string,
     titleFontSize: PropTypes.number,
     titleFontWeight: PropTypes.number,

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

@@ -17,6 +17,12 @@ 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();
@@ -68,4 +74,16 @@ export const getWidgetType = (widgetType, props, cardClicked) => {
 		'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]
+}
+