@mohamed-karawia/library 0.1.18 → 0.1.22

package/src/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.jsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Preview from '../../Preview/Preview';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+
+import { Container, Left, Right } from '../globalStyles';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+const SpacesListPreview = (props) => {
+    const [spacesStyles, setSpacesStyles] = useState({});
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+        },
+        sectionHeaderStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+        },
+        customCardStyles: {
+            cardBackgroundColor: '',
+            onHoverBackgroundColor: '',
+            cardRadius: '',
+            cardTitleFontSize: '',
+            cardTitleFontWeight: '',
+            cardTitleColor: '',
+            cardImageRadius: '',
+            cardPadding: 0,
+            imgSize: 0,
+            cardBorderSize: 0,
+            cardBorderColor: 'purple'
+        }
+    }
+
+    const sections = [
+        {
+            title: "Header Styles",
+            body: [
+                (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+                (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+                (<Picker label="Title Color" name="headerStyles.titleColor" />),
+                (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />)
+            ]
+        },
+        {
+            title: "Section Header Styles",
+            body: [
+                (<Picker label="Header Background" name="sectionHeaderStyles.headerBackground" />),
+                (<TextField type="number" label="Padding" name="sectionHeaderStyles.padding" />),
+                (<Picker label="Title Color" name="sectionHeaderStyles.titleColor" />),
+                (<TextField type="number" label="Title Font Size" name="sectionHeaderStyles.titleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="sectionHeaderStyles.titleFontWeight" />)
+            ]
+        },
+        {
+            title: "Card Styles",
+            body: [
+                (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
+                (<Picker label="Hover Color" name="customCardStyles.onHoverBackgroundColor" />),
+                (<TextField type="number" label="Card Radius" name="customCardStyles.cardRadius" />),
+                (<TextField type="number" label="Title Font Size" name="customCardStyles.cardTitleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="customCardStyles.cardTitleFontWeight" />),
+                (<Picker label="Title Color" name="customCardStyles.cardTitleColor" />),
+                (<TextField type="number" label="Card Image Radius" name="customCardStyles.cardImageRadius" />),
+                (<TextField type="number" label="Card Padding" name="customCardStyles.cardPadding" />),
+                (<TextField type="number" label="Image Size" name="customCardStyles.imgSize" />),
+                (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
+                (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
+            ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setSpacesStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+
+
+  return (
+    <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Spaces List Styles"
+                    initialValues={initialValues}
+                    sections={sections}
+                    headerStyles={{
+                        padding: 10,
+                        headerBackground: 'black',
+                        titleColor: '#ffff',
+                    }}
+                    sectionHeaderStyles={{
+                        padding: 6,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                    }}
+                    bodyPadding={10}
+                    saveBtnText="Save"
+                    cancelBtnText="Cancel"
+                    saveBtnHandle={submitHandler}
+                    cancelHandler={cancelHandler}
+                    handleChange={handleChange}
+                    bodyRowGap={20}
+                    bodyColumnGap={10}
+                />
+            </Left>
+            <Right>
+                <Preview type={'Spaces-List'} componentProps={props.componentProps} stylingProps={spacesStyles} />
+            </Right>
+        </Container>
+  );
+};
+
+SpacesListPreview.defaultProps = {};
+
+SpacesListPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default SpacesListPreview;

package/src/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.jsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Preview from '../../Preview/Preview';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+
+import { Container, Left, Right } from '../globalStyles';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+const VideoAlbumPreview = (props) => {
+    const [videoAlbumStyles, setVideoAlbumStyles] = useState({});
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+            controlsStyles: {
+                iconSize: '',
+                iconColor: ''
+            }
+        },
+        customCardStyles: {
+            cardBackgroundColor: '',
+            onHoverBackgroundColor: '',
+            cardRadius: '',
+            cardTitleFontSize: '',
+            cardTitleFontWeight: '',
+            cardTitleColor: '',
+            cardImageRadius: '',
+            cardDescriptionFontSize: '',
+            cardDescriptionColor: '',
+            cardPadding: 0,
+            imgSize: 0,
+            cardBorderSize: 0,
+            cardBorderColor: 'purple'
+        }
+    }
+
+    const sections = [
+        {
+            title: "Header Styles",
+            body: [
+                (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+                (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+                (<Picker label="Title Color" name="headerStyles.titleColor" />),
+                (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />),
+                (<TextField type="number" label="Controls Size" name="headerStyles.controlsStyles.iconSize" />),
+                (<Picker label="Controls Color" name="headerStyles.controlsStyles.iconColor" />),
+            ]
+        },
+        {
+            title: "Card Styles",
+            body: [
+                (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
+                (<Picker label="Hover Color" name="customCardStyles.onHoverBackgroundColor" />),
+                (<TextField type="number" label="Card Radius" name="customCardStyles.cardRadius" />),
+                (<TextField type="number" label="Title Font Size" name="customCardStyles.cardTitleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="customCardStyles.cardTitleFontWeight" />),
+                (<Picker label="Title Color" name="customCardStyles.cardTitleColor" />),
+                (<TextField type="number" label="Card Image Radius" name="customCardStyles.cardImageRadius" />),
+                (<TextField type="number" label="Artist Font Size" name="customCardStyles.cardDescriptionFontSize" />),
+                (<Picker label="Artist Font Color" name="customCardStyles.cardDescriptionColor" />),
+                (<TextField type="number" label="Card Padding" name="customCardStyles.cardPadding" />),
+                (<TextField type="number" label="Image Size" name="customCardStyles.imgSize" />),
+                (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
+                (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
+            ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setVideoAlbumStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Video Albums Styles"
+                    initialValues={initialValues}
+                    sections={sections}
+                    headerStyles={{
+                        padding: 10,
+                        headerBackground: 'black',
+                        titleColor: '#ffff',
+                    }}
+                    sectionHeaderStyles={{
+                        padding: 6,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                    }}
+                    bodyPadding={10}
+                    saveBtnText="Save"
+                    cancelBtnText="Cancel"
+                    saveBtnHandle={submitHandler}
+                    cancelHandler={cancelHandler}
+                    handleChange={handleChange}
+                    bodyRowGap={20}
+                    bodyColumnGap={10}
+                />
+            </Left>
+            <Right>
+                <Preview type={'Video-Album'} componentProps={props.componentProps} stylingProps={videoAlbumStyles} />
+            </Right>
+        </Container>
+    );
+};
+
+VideoAlbumPreview.defaultProps = {};
+
+VideoAlbumPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default VideoAlbumPreview;

package/src/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.jsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Preview from '../../Preview/Preview';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+
+import { Container, Left, Right } from '../globalStyles';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+
+const VideoAlbumsPreview = (props) => {
+    const [videoAlbumsStyles, setVideoAlbumsStyles] = useState({});
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+            controlsStyles: {
+                iconSize: '',
+                iconColor: ''
+            }
+        },
+        customCardStyles: {
+            cardBackgroundColor: '',
+            onHoverBackgroundColor: '',
+            cardRadius: '',
+            cardTitleFontSize: '',
+            cardTitleFontWeight: '',
+            cardTitleColor: '',
+            cardImageRadius: '',
+            cardPadding: 0,
+            cardBorderSize: 0,
+            cardBorderColor: 'purple'
+        }
+    }
+
+    const sections = [
+        {
+            title: "Header Styles",
+            body: [
+                (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+                (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+                (<Picker label="Title Color" name="headerStyles.titleColor" />),
+                (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />),
+                (<TextField type="number" label="Controls Size" name="headerStyles.controlsStyles.iconSize" />),
+                (<Picker label="Controls Color" name="headerStyles.controlsStyles.iconColor" />),
+            ]
+        },
+        {
+            title: "Card Styles",
+            body: [
+                (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
+                (<Picker label="Hover Color" name="customCardStyles.onHoverBackgroundColor" />),
+                (<TextField type="number" label="Card Radius" name="customCardStyles.cardRadius" />),
+                (<TextField type="number" label="Title Font Size" name="customCardStyles.cardTitleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="customCardStyles.cardTitleFontWeight" />),
+                (<Picker label="Title Color" name="customCardStyles.cardTitleColor" />),
+                (<TextField type="number" label="Card Image Radius" name="customCardStyles.cardImageRadius" />),
+                (<TextField type="number" label="Card Padding" name="customCardStyles.cardPadding" />),
+                (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
+                (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
+            ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setVideoAlbumsStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Video Albums Styles"
+                    initialValues={initialValues}
+                    sections={sections}
+                    headerStyles={{
+                        padding: 10,
+                        headerBackground: 'black',
+                        titleColor: '#ffff',
+                    }}
+                    sectionHeaderStyles={{
+                        padding: 6,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                    }}
+                    bodyPadding={10}
+                    saveBtnText="Save"
+                    cancelBtnText="Cancel"
+                    saveBtnHandle={submitHandler}
+                    cancelHandler={cancelHandler}
+                    handleChange={handleChange}
+                    bodyRowGap={20}
+                    bodyColumnGap={10}
+                />
+            </Left>
+            <Right>
+                <Preview type={'Video-Albums'} componentProps={props.componentProps} stylingProps={videoAlbumsStyles} />
+            </Right>
+        </Container>
+    );
+};
+
+VideoAlbumsPreview.defaultProps = {};
+
+VideoAlbumsPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default VideoAlbumsPreview;

package/src/stories/PreviewComponents/VideoPreview/VideoPreview.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Preview from '../../Preview/Preview';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+
+import { Container, Left, Right } from '../globalStyles';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+const VideoPreview = (props) => {
+    const [videoStyles, setVideoStyles] = useState({});
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+        },
+        iconsColor: '',
+        backgroundColor: '',
+        detailsPadding: '',
+        titleFontSize: '',
+        titleColor: '',
+        discFontSize: '',
+        discColor: '',
+        dateFontSize: '',
+        dateColor: '',
+        commentBackgroundColor: '',
+        commentTitleColor: '',
+        commentTitleFontSize: ''
+    }
+
+    const sections = [
+        {
+            title: "Header Styles",
+            body: [
+                (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+                (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+                (<Picker label="Title Color" name="headerStyles.titleColor" />),
+                (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />)
+            ]
+        },
+        {
+            title: "Player Styles",
+            body: [
+                (<Picker label="Icons Color" name="iconsColor" />),
+            ]
+        },
+        {
+            title: "Space Styles",
+            body: [
+                (<Picker label="Background Color" name="backgroundColor" />),
+                (<TextField type="number" label="Details Padding" name="detailsPadding" />),
+                (<TextField type="number" label="Title Font Size" name="titleFontSize" />),
+                (<Picker label="Title Color" name="titleColor" />),
+                (<TextField type="number" label="Discription Font Size" name="discFontSize" />),
+                (<Picker label="Discription Color" name="discColor" />),
+                (<TextField type="number" label="Date Font Size" name="dateFontSize" />),
+                (<Picker label="Date Color" name="dateColor" />),
+                (<Picker label="Comment Background Color" name="commentBackgroundColor" />),
+                (<Picker label="Comment Title Color" name="commentTitleColor" />),
+                (<TextField type="number" label="Comment title Font Size" name="commentTitleFontSize" />),
+            ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setVideoStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Video Styles"
+                    initialValues={initialValues}
+                    sections={sections}
+                    headerStyles={{
+                        padding: 10,
+                        headerBackground: 'black',
+                        titleColor: '#ffff',
+                    }}
+                    sectionHeaderStyles={{
+                        padding: 6,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                    }}
+                    bodyPadding={10}
+                    saveBtnText="Save"
+                    cancelBtnText="Cancel"
+                    saveBtnHandle={submitHandler}
+                    cancelHandler={cancelHandler}
+                    handleChange={handleChange}
+                    bodyRowGap={20}
+                    bodyColumnGap={10}
+                />
+            </Left>
+            <Right>
+                <Preview type={'Video-Space'} componentProps={props.componentProps} stylingProps={videoStyles} />
+            </Right>
+        </Container>
+    );
+};
+
+VideoPreview.defaultProps = {};
+
+VideoPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default VideoPreview;

package/src/stories/PreviewComponents/globalStyles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+
+export const Container = styled.div`
+    width: 100%;
+    display: flex;
+    background-color: 'transparent';
+    align-items: flex-start;
+`
+
+export const Left = styled.div`
+    flex: 1;
+`
+
+export const Right = styled.div`
+    flex: 2;
+    position: sticky;
+    top: 0;
+    bottom: 0;
+`

package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx

@@ -35,7 +35,7 @@ const CardStyle10 = ({
             </SvgWrapper>
             <Content {...props}>
                 <Title {...props}>{title}</Title>
-                <Description {...props}>{description}</Description>
+                <CardDescription {...props}>{description}</CardDescription>
             </Content>
             <Controls
                 controls={cardControls}
@@ -62,7 +62,6 @@ const Card = styled(MainCard)`
 
 const Content = styled(globalContent)`
     align-items: center;
-    justify-content: space-between;
 
 `
 
@@ -75,6 +74,10 @@ const SvgWrapper = styled.div`
     }
 `
 
+const CardDescription = styled(Description)`
+    text-align: center;
+`
+
 CardStyle10.defaultProps = {}
 
 CardStyle10.propTypes = {

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

@@ -21,13 +21,13 @@ const CardStyle11 = ({ title, date, ...props }) => {
 
     return (
         <Card
-        onClick={cardClicked}
+
             {...props}>
-            <SvgWrapper {...props}>
+            <SvgWrapper onClick={cardClicked} {...props}>
                 <BiNotepad />
             </SvgWrapper>
             <Content {...props}>
-                <Title {...props}>{title}</Title>
+                <Title onClick={cardClicked} {...props}>{title}</Title>
                 <Date {...props}>{date}</Date>
             </Content>
             {props.cardControls
@@ -46,7 +46,7 @@ const Card = styled(MainCard)`
 `
 
 const Date = styled.h5`
-    color: gray;
+    color: ${props => props.dateColor || 'gray'};
     font-weight: 300;
 `
 
@@ -57,7 +57,7 @@ const Content = styled(globalContent)`
 `
 
 const SvgWrapper = styled.div`
-
+    cursor: pointer;
     svg{
         width: 50px;
         height: 50px;

package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx

@@ -24,9 +24,9 @@ const CardStyle6 = ({ title, description, img, date, ...props }) => {
             onMouseEnter={e => setShowIcons(true)}
             onMouseLeave={e => setShowIcons(false)}
             {...props}>
-            <ImgWrapper 
-            onClick={() => props.cardClicked()}
-            {...props}>
+            <ImgWrapper
+                onClick={() => props.cardClicked()}
+                {...props}>
                 <Img src={img} />
             </ImgWrapper>
             <Content {...props}>
@@ -43,6 +43,12 @@ const CardStyle6 = ({ title, description, img, date, ...props }) => {
                     controls={props.cardControls}
                     show={showIcons}
                     onIconClicked={iconCliked}
+                    showOnHover={true}
+                    position='center'
+                    dropdownFontColor="white"
+                    iconBorderRadius={100}
+                    iconSize={40}
+                    iconsGap={10}
                     {...props.controlsStyles} />}
         </Card>
     )
@@ -51,12 +57,12 @@ const CardStyle6 = ({ title, description, img, date, ...props }) => {
 const Card = styled(MainCard)`
     flex-direction: column;
     cursor: pointer;
-    height: 100%;
+    overflow-y: scroll;
 `
 
 const ImgWrapper = styled.div`
     width: 100%;
-    height: 80%;
+    min-height: 90%;
     border-radius: ${props => props.cardRadius + 'px ' + props.cardRadius + 'px ' + '0 0'};
 `
 
@@ -92,7 +98,7 @@ const Date = styled.p`
 
 const Desc = styled(Description)`
     padding: 2px 20px;
-    color: ${props => props.descColor || '#5f5f5f'};
+    color: ${props => props.cardDiscriptionColor};
 `
 
 CardStyle6.defaultProps = {}

package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx

@@ -29,7 +29,7 @@ const CardStyle8 = ({ username, date, text, img, media, ...props }) => {
             <Content {...props}>
                 <Header>
                     <Title {...props}>{username}</Title>
-                    <Date>{date}</Date>
+                    <Date {...props}>{date}</Date>
                 </Header>
                 <Description {...props}>{text}</Description>
                 {media && <Media>
@@ -73,7 +73,7 @@ const Header = styled.div`
 
 const Date = styled.p`
     font-size: 14px;
-    color: gray;
+    color: ${props => props.dateColor || 'gray'};
 `
 
 const Media = styled.div`