@mohamed-karawia/library 0.1.14 → 0.1.18

package/src/stories/Pages/Music/MusicAlbum/Music.jsx

@@ -26,12 +26,12 @@ import img6 from '../../../assets/images/music6.jpg';
 const Music = (props) => {
   const [currentSong, setCurrentSong] = useState(0)
   const [album, setAlbum] = useState([
-    { index: 0, cover: img4, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
+    { index: 0, cover: img4, musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
     { index: 2, cover: img6, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Still Loving You', description: 'Scorpions', time: '4:20' },
-    { index: 1, cover: img5, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Night', description: 'Frank Ocean', time: '5:20' },
+    { index: 1, cover: img5, musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', title: 'Night', description: 'Frank Ocean', time: '5:20' },
     { index: 3, cover: img1, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Somebody Else', description: '1975', time: '5:20' },
-    { index: 4, cover: img3, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
-    { index: 5, cover: img2, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
+    { index: 4, cover: img3, musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
+    { index: 5, cover: img2, musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
   ])
 
   const nextSong = () => {
@@ -66,7 +66,7 @@ const Music = (props) => {
       case 'delete':
         deleteSonngFromAlbum(index)
         break;
-    
+
       default:
         break;
     }
@@ -129,9 +129,16 @@ const Music = (props) => {
                 headerBackground: 'black',
                 titleColor: '#ffff',
                 controlsStyles: {
-                    iconSize: 25
+                  iconSize: 25
+                }
+              }}
+              customCardStyles={{
+                cardBackgroundColor: 'white',
+                controlsStyles: {
+                  iconColor: 'black'
                 }
-            }} />
+              }}
+            />
           </SpaceContainer>
 
         </Center>
@@ -149,7 +156,8 @@ const Music = (props) => {
               prevSong: prevSong,
               currentSong: currentSong,
               borderRadius: '10',
-              primaryColor: 'black'
+              primaryColor: 'black',
+              backgroundColor: 'white'
             }}
             headerStyles={{
               controlsStyles: {

package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx

@@ -60,6 +60,15 @@ const MusicAlbums = (props) => {
     const cardClicked = (index, cardProps) => {
         console.log(cardProps)
     }
+
+    const notes = [
+        {title: 'Study notes', date: '15/11/2020'},
+        {title: 'Music notes', date: '14/12/2020'},
+        {title: 'Workout notes', date: '5/8/2021'},
+        {title: 'Gaming notes', date: '14/4/2023'},
+        {title: 'Working notes', date: '5/6/2021'},
+    ]
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -104,7 +113,7 @@ const MusicAlbums = (props) => {
                         hideTitle
                     >
                         <ViewAlbums
-                        title="Music Albums"
+                            title="Music Albums"
                             albums={albums}
                             cardIconClicked={cardIconClicked}
                             onAddAlbum={onAddAlbum}
@@ -116,34 +125,39 @@ const MusicAlbums = (props) => {
                                     iconSize: 25
                                 }
                             }}
+                            customCardStyles={{
+                                darkOnHover: true,
+                                controlsStyles: {
+                                    showOnHover: true,
+                                    position: 'center',
+                                    dropdownFontColor: "white",
+                                    iconBorderRadius: 100,
+                                    iconSize: 40,
+                                    iconsGap: 10,
+                                    iconColor: 'white',
+                                    containerPadding: 20,
+                                }
+                            }}
                             cardClicked={cardClicked}
-                             />
+                        />
                     </SpaceContainer>
 
                 </Center>
                 <Right>
-                    {/* <WidgetContainer
-                    widgetType='music player'
-                    controlsStyles={{
-                        iconColor: 'black',
-                        dropdownBackground: 'black',
-                        dropdownFontColor: 'white',
-                    }}
-                    widgetProps={{
-                        playlist: album,
-                        nextSong: nextSong,
-                        prevSong: prevSong,
-                        currentSong: currentSong,
-                        borderRadius: '10',
-                        primaryColor: 'black'
-                    }}
-                    headerStyles={{
-                        controlsStyles: {
-                            iconColor: 'red',
-                        },
-                    }}
-                /> */}
-
+                    <WidgetContainer
+                        widgetType='notes'
+                        widgetProps={{
+                            notes,
+                            headerStyles:{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                        }
+                    />
                 </Right>
             </Body>
         </BaseMaterial>

package/src/stories/Pages/Photos/Album/Album.jsx

@@ -105,7 +105,13 @@ const Album = (props) => {
                             addPhoto={onAddPhoto}
                             deletePhoto={onDeletePhoto}
                             cardIconClicked={cardIconClicked}
-                            columnsNumber={2} />
+                            columnsNumber={2}
+                            headerStyles={{
+                                padding: 10,
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Photos/Albums/Albums.jsx

@@ -36,6 +36,15 @@ const Albums = (props) => {
         { img: img6, title: 'Album 6', count: '24' },
     ])
 
+     const folders = [
+        { title: 'Folder one', description: 'Discription for folder one' },
+        { title: 'Folder two', description: 'Discription for folder two' },
+        { title: 'Folder three', description: 'Discription for folder three' },
+        { title: 'Folder four', description: 'Discription for folder four' },
+        { title: 'Folder five', description: 'Discription for folder five' },
+        { title: 'Folder six', description: 'Discription for folder six' },
+    ]
+
     const cardIconClicked = (action, index) => {
         switch (action) {
             case 'delete':
@@ -113,32 +122,28 @@ const Albums = (props) => {
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
                             cardClicked={cardClicked}
+                            customCardStyles={{
+                                cardBackgroundColor: 'white'
+                            }}
                         />
                     </SpaceContainer>
 
                 </Center>
                 <Right>
-                    {/* <WidgetContainer
-                        widgetType='music player'
-                        controlsStyles={{
-                            iconColor: 'black',
-                            dropdownBackground: 'black',
-                            dropdownFontColor: 'white',
-                        }}
+                <WidgetContainer
+                        widgetType='folders'
                         widgetProps={{
-                            playlist: album,
-                            nextSong: nextSong,
-                            prevSong: prevSong,
-                            currentSong: currentSong,
-                            borderRadius: '10',
-                            primaryColor: 'black'
-                        }}
-                        headerStyles={{
-                            controlsStyles: {
-                                iconColor: 'red',
-                            },
-                        }}
-                    /> */}
+                            folders,
+                            columnsNumber: 3,
+                            customCardStyles:{
+                                cardPadding: 10,
+                                iconColor: '#ff2d2d',
+                                controlsStyles: {
+                                    iconColor:'#FE1744'
+                                }
+                            }}
+                        }
+                    />
 
                 </Right>
             </Body>

package/src/stories/Pages/ViewWorld/styles.json

@@ -1,6 +1,6 @@
 {
   "containerStyle": {
-    "backgroundColor": "white"
+    "backgroundColor": "red"
   },
   "headStyle": {},
   "bodyStyle": {},

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

@@ -20,9 +20,6 @@ const ViewAlbum = ({
     album,
     cardBackgroundColor,
     imgTitleColor,
-    columnsNumber,
-    columnGap,
-    rowGap,
     descColor,
     ...props
 }) => {
@@ -111,21 +108,10 @@ const ViewAlbum = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Photo Album"
+                galleryTitle={props.title || "Photo Album"}
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: props.headerBackground,
-                    titleColor: props.titleColor,
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
@@ -143,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}
@@ -245,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,36 +18,8 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
-    cardBackgroundColor,
-    cardTitleColor,
-    cardTitleFontSize,
-    albumTitleColor,
-    countColor,
-    countFontSize,
-    columnsNumber,
-    columnGap,
-    rowGap,
     ...props }) => {
 
-    const cardStyles = {
-        darkOnHover: true,
-        cardBackgroundColor,
-        cardTitleColor,
-        cardTitleFontSize,
-        countColor,
-        countFontSize,
-        controlsStyles: {
-            showOnHover: true,
-            position: 'center',
-            dropdownFontColor: "white",
-            iconBorderRadius: 100,
-            iconSize: 40,
-            iconsGap: 10,
-            iconColor: 'white',
-            containerPadding: 20,
-        }
-    }
-
     const [showModal, setShowModal] = useState(false)
 
     const onIconClicked = (action) => {
@@ -76,26 +48,14 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Photo Albums"
+                galleryTitle={props.title || "Photo Albums"}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: props.headerBackground,
-                    titleColor: props.titleColor,
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={cardStyles}
                 {...props} />
 
             <Modal
@@ -113,33 +73,19 @@ const ViewAlbums = ({
 }
 
 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/Cards/Card-style-10/CardStyle10.jsx

@@ -19,14 +19,19 @@ const CardStyle10 = ({
         props.iconClicked(action, props.index)
     }
 
+    const cardClicked = () => {
+        props.cardClicked()
+    }
+
 
     return (
         <Card
+            onClick={cardClicked}
             onMouseEnter={e => setShowIcons(true)}
             onMouseLeave={e => setShowIcons(false)}
             {...props}>
             <SvgWrapper {...props}>
-                <AiFillFolderOpen />
+                <AiFillFolderOpen {...props}/>
             </SvgWrapper>
             <Content {...props}>
                 <Title {...props}>{title}</Title>
@@ -42,7 +47,6 @@ const CardStyle10 = ({
                 iconSize={20}
                 iconsGap={10}
                 maxIcons={0}
-                iconColor='#FE1744'
                 dropdownFontSize={10}
                 {...props.controlsStyles} />
         </Card>
@@ -64,10 +68,10 @@ const Content = styled(globalContent)`
 
 const SvgWrapper = styled.div`
 
-    svg{
+    & svg{
         width: 70px;
         height: 70px;
-        fill: ${props => props.iconColor}
+        fill: ${(props) => props.iconColor}
     }
 `
 

package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx

@@ -15,8 +15,13 @@ const CardStyle11 = ({ title, date, ...props }) => {
         props.iconClicked(action, props.index)
     }
 
+    const cardClicked = () => {
+        props.cardClicked()
+    }
+
     return (
         <Card
+        onClick={cardClicked}
             {...props}>
             <SvgWrapper {...props}>
                 <BiNotepad />

package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx

@@ -17,7 +17,7 @@ const CardStyle3 = ({ title, description, path, ...props }) => {
     }
 
     return (
-        <MainCard
+        <Card
             onClick={cardClicked}
             onMouseEnter={e => setShowIcons(true)}
             onMouseLeave={e => setShowIcons(false)}
@@ -33,7 +33,7 @@ const CardStyle3 = ({ title, description, path, ...props }) => {
                     show={showIcons}
                     onIconClicked={iconCliked}
                     {...props.controlsStyles} />}
-        </MainCard>
+        </Card>
     )
 }
 
@@ -42,6 +42,9 @@ const Content = styled(globalContent)`
     row-gap: ${props => props.rowGap}px;
 `
 
+const Card = styled(MainCard)`
+    cursor: pointer;
+`
 
 CardStyle3.defaultProps = {}
 

package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx

@@ -6,29 +6,31 @@ import PropTypes from "prop-types";
 import {
     MainCard,
     globalContent,
-    Title,
+    Title as glboalTitle,
     Img
 } from '../globalCardStyles';
 
 const CardStyle9 = ({ username, answered, img, status, ...props }) => {
     console.log(props)
 
-    const onAccept = () => {
-        alert(props.index)
+    const onAction = (action) => {
+        props.iconClicked(action)
     }
 
     return (
-        <Card {...props}>
+        <Card 
+            
+        {...props}>
             <ImgWrapper {...props}>
                 <Img src={img} />
             </ImgWrapper>
             <Content {...props}>
-                    <Title {...props}>{username}</Title>
+                    <Title onClick={() => props.cardClicked()} {...props}>{username}</Title>
                     <Answered>Questions Answered: {answered}</Answered>
                     <Buttons>
-                        <Accept onClick={onAccept}>Accept</Accept>
-                        <Decline >Decline</Decline>
-                        {status === 'pending' && <Review>In Review</Review>}
+                        <Accept onClick={() => onAction('accept')}>Accept</Accept>
+                        <Decline onClick={() => onAction('decline')}>Decline</Decline>
+                        {status === 'pending' && <Review onClick={() => onAction('review')}>In Review</Review>}
                     </Buttons>
             </Content>
         </Card>
@@ -55,6 +57,10 @@ const Content = styled(globalContent)`
     justify-content: space-between;
 `
 
+const Title = styled(glboalTitle)`
+    cursor: pointer;
+`
+
 const Answered = styled.h5`
     font-weight: 300;
 `

package/src/stories/Reusable Components/Cards/globalCardStyles.js

@@ -7,7 +7,7 @@ export const MainCard = styled.div`
     }
     font-family: sans-serif;
     display: flex;
-    background-color: ${props => props.cardBackgroundColor || 'white'};
+    background-color: ${props => props.cardBackgroundColor || 'transparent'};
     border-radius: ${props => props.cardRadius}px;
     border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
     align-items: center;

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/Reusable Components/ReusableList/ReusableList.jsx

@@ -7,15 +7,24 @@ import { getCardStyle } from '../../helpers/util';
 import CardStyle3 from '../Cards/Card-style-3/CardStyle3';
 import ReusableHeader from '../ReusableHeader/ReusableHeader';
 
-const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls = null, ...props }) => {
+const ReusableList = ({
+    data,
+    cardStyle,
+    customCardStyles,
+    type,
+    cardControls = null,
+    headerStyles,
+    sectionHeaderStyles,
+    ...props
+}) => {
     let child;
 
     const iconCliked = (action) => {
         props.iconClicked(action)
     }
 
-    const clicked = (index) => {
-        props.cardClicked(index)
+    const clicked = (index, cardProps) => {
+        props.cardClicked(index, cardProps)
     }
 
     const cardIconClicked = (action, index) => {
@@ -33,7 +42,7 @@ const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls =
     } else {
         child = data.map(section => (
             <Section priority={section.priority}>
-                <CardStyle3 title={section.title} {...props.sectionHeaderStyles} />
+                <ReusableHeader title={section.title} {...sectionHeaderStyles} />
                 <SectionBody>
                     {mapOverCardsData(section.data)}
                 </SectionBody>
@@ -48,7 +57,7 @@ const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls =
                 title={props.listTitle}
                 controls={props.listControls}
                 iconClicked={iconCliked}
-                {...props.headerStyles}
+                {...headerStyles}
             />}
             <ListBody {...props}>
                 {child}
@@ -97,7 +106,9 @@ ReusableList.propTypes = {
     customCardStyles: PropTypes.object,
     listRowGap: PropTypes.number,
     listTitle: PropTypes.string,
-    hideTitle: PropTypes.bool
+    hideTitle: PropTypes.bool,
+    headerStyles: PropTypes.object,
+    sectionHeaderStyles: PropTypes.object
 };
 
 export default ReusableList