@mohamed-karawia/library 0.1.12 → 0.1.16

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

@@ -115,14 +115,6 @@ const ViewAlbum = ({
                 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}

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

@@ -18,36 +18,11 @@ 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) => {
@@ -80,23 +55,13 @@ const ViewAlbums = ({
                 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}
-                cardClicked={() => null}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={cardStyles}
                 {...props} />
 
             <Modal
@@ -114,7 +79,7 @@ const ViewAlbums = ({
 }
 
 const Container = styled.div`
-
+    width: 100%;
 `
 
 ViewAlbums.defaultProps = {

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

@@ -14,8 +14,8 @@ const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null,
         props.iconClicked(action)
     }
 
-    const clicked = (index) => {
-        props.cardClicked(index)
+    const clicked = (index, cardProps) => {
+        props.cardClicked(index, cardProps)
     }
 
     const cardIconClicked = (action, index) => {

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

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/VideoSpace/VideoSpace.jsx

@@ -7,6 +7,7 @@ import Comments from '../Comments/Comments';
 import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
 
 const VideoSpace = ({
+    videoSrc,
     title,
     discription,
     date,
@@ -29,7 +30,8 @@ const VideoSpace = ({
     return (
         <Container backgroundColor={backgroundColor}>
             <VideoPlayer
-                iconsColor={iconsColor} />
+                iconsColor={iconsColor}
+                src={videoSrc} />
             <VideoDetails detailsPadding={detailsPadding}>
                 <Top>
                     <Title titleFontSize={titleFontSize} titleColor={titleColor}>{title}</Title>

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

@@ -79,21 +79,12 @@ const ViewAlbum = ({
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 columnsNumber={3}
                 galleryColumnGap={10}
                 galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
-                cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
                 {...props}

package/src/stories/helpers/util.js

@@ -15,6 +15,8 @@ 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'
 
 export const stringSearch = (str, word) => {
 	str = str.toUpperCase();
@@ -40,18 +42,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)} iconClicked={(action) => cardIconClicked(action, index)} />),
+		'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 +63,9 @@ 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]
 }