@mohamed-karawia/library 0.1.18 → 0.1.19

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 = {
+        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 = {
+        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`

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

@@ -24,7 +24,7 @@ export const globalContent = styled.div`
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: ${props => props.contentGap}px;
+    gap: ${props => props.contentGap || 10}px;
 `
 
 export const Title = styled.h3`
@@ -32,6 +32,7 @@ export const Title = styled.h3`
     color: ${props => props.cardTitleColor || 'black'};
     font-size: ${props => props.cardTitleFontSize}px;
     font-weight: ${props => props.cardTitleFontWeight || 300};
+    cursor: pointer;
 `
 
 export const Description = styled.h5`

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

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+// import Head from '../../Layout/Head/Head'
+import Navbar from '../../Navbar/Navbar'
+import Body from '../../Layout/Body/Body'
+import Left from '../../Layout/Left/Left'
+import Center from '../../Layout/Center/Center'
+import Right from '../../Layout/Right/Right'
+import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
+import styles from '../../styling.json'
+
+
+
+const Community = ({
+  context,
+  ...props
+}) => {
+
+  const spaces = [
+    {
+      title: 'Main List',
+      data: [
+        { title: 'Cargo Sprint', path: 'cago' },
+        { title: 'Movies', path: 'movies' }
+      ],
+    },
+    {
+      title: 'Entertainment',
+      data: [
+        { title: 'Gaming', path: 'games' },
+        { title: 'Music', path: 'music' }
+      ]
+    }
+  ]
+
+  return (
+    <Container>
+      <Navbar />
+      <Body>
+        <Left>
+          <WidgetContainer
+            widgetType='spaces-list'
+            widgetProps={{
+              listTitle: 'Your Spaces',
+              spaces: spaces,
+              cardClicked: () => alert('clicked'),
+              headerStyles: styles.widgetContainer.header,
+              sectionHeaderStyles: styles.widgetContainer.body.sectionHeaderStyles,
+              customCardStyles: styles.widgetContainer.body.customCardStyles,
+            }}
+          />
+        </Left>
+        <Center>{props.center}</Center>
+        <Right>{props.right}</Right>
+      </Body>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+    width: 100%;
+    height: auto;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+`
+
+export default Community;

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

@@ -11,15 +11,21 @@ const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null,
     let child;
 
     const iconCliked = (action) => {
-        props.iconClicked(action)
+        if (!props.preview) {
+            props.iconClicked(action)
+        }
     }
 
     const clicked = (index, cardProps) => {
+        if (!props.preview) {
         props.cardClicked(index, cardProps)
+        }
     }
 
     const cardIconClicked = (action, index) => {
+        if (!props.preview) {
         props.cardIconClicked(action, index)
+        }
     }
 
     const mapOverCardsData = (data) => {
@@ -69,8 +75,7 @@ const GalleryBody = styled.div`
     display: ${({ type }) => type === 'flat' ? 'grid' : 'flex'};
     flex-direction: column;
     grid-template-columns: ${props => 'repeat(' + props.columnsNumber + ', 1fr)'};
-    grid-auto-rows: ${props => props.rowsHeight || 400}px;
-    /* grid-auto-rows: ${props => props.rowsHeight + 'px' || 'minmax(min-content, 400px)'}; */
+    grid-auto-rows: ${props => props.rowsHeight ? `${props.rowsHeight}px` : '1fr'};
     column-gap: ${props => props.galleryColumnGap}px;
     row-gap: ${props => props.galleryRowGap}px;
 `
@@ -83,12 +88,8 @@ const Section = styled.div`
     row-gap: ${props => props.galleryRowGap}px;
 `
 
-const SectionBody = styled.div`
-    padding: ${props => props.galleryBodyPadding}px;
+const SectionBody = styled(GalleryBody)`
     display: grid;
-    grid-template-columns: ${props => 'repeat(' + props.columnsNumber + ', 1fr)'};
-    column-gap: ${props => props.galleryColumnGap}px;
-    row-gap: ${props => props.galleryRowGap}px;
 `
 
 Gallery.defaultProps = {
@@ -108,7 +109,7 @@ Gallery.propTypes = {
     galleryColumnGap: PropTypes.number,
     galleryRowGap: PropTypes.number,
     rowsHeight: PropTypes.number
-    
+
 };
 
 export default Gallery

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

@@ -17,42 +17,22 @@ const ReactModalComponent = ({
   closeModal,
   children,
   exitModalButton,
-  onOverlayCloseClick
+  shouldCloseOnOverlayClick
 }) => {
   return (
-    <ModalContainer
+    <Modal
       isOpen={modalIsOpen}
       onRequestClose={closeModal}
-      ariaHideApp={false}
-      contentLabel={title}
-      shouldCloseOnOverlayClick={onOverlayCloseClick === 'true'}
-      borderColor={borderColor}
-      boxShadow={boxShadow}
-      backgroundColor={backgroundColor}
-      padding={padding}
-      height={height}
-      width={width}
-      color={color}
-      borderRadius={borderRadius}
     >
       {children}
-      {exitModalButton(closeModal)}
-    </ModalContainer>
+    </Modal>
   );
 };
 
 const ModalContainer = styled(Modal)`
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  transform: translate(-50%, -50%);
   background-color: ${({backgroundColor}) => backgroundColor};
   border-radius: ${({borderRadius}) => borderRadius}px;
   box-shadow: ${({boxShadow}) => boxShadow};
-  height: ${({height}) => height};
-  width: ${({width}) => width};
   color: ${({color}) => color};
   border-color: ${({borderColor}) => borderColor};
   padding: ${({padding}) => padding}px;
@@ -69,8 +49,6 @@ ReactModalComponent.propTypes = {
 
 ReactModalComponent.defaultProps = {
   title: "",
-  height: "80vh",
-  width: "50vw",
 };
 
 export default ReactModalComponent;

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

@@ -1,13 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import { Formik, Form } from 'formik';
+import { useFormikContext, Formik, Form } from 'formik';
 import ReusableHeader from '../ReusableHeader/ReusableHeader';
 import Buttons from '../../Buttons/Buttons/Buttons';
 
 const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
 
+    const AutoSubmitToken = () => {
+        const { values, submitForm } = useFormikContext();
+        useEffect(() => {
+            if (props.handleChange) {
+                props.handleChange(values)
+            }
+        }, [values, submitForm]);
+        return null;
+
+    };
+
     const submitHandler = (values) => {
         props.saveHandler(values)
     }
@@ -18,9 +29,9 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
 
     return (
         <Formik
-        initialValues={initialValues}
-        validationSchema={props.formSchema}
-        onSubmit={values => submitHandler(values)}
+            initialValues={initialValues}
+            validationSchema={props.formSchema}
+            onSubmit={values => submitHandler(values)}
         >
             <CreateForm {...props}>
                 <ReusableHeader title={formTitle} {...props.headerStyles} />
@@ -51,7 +62,7 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
                             size="md"
                             variant="primary"
                             type="submit"
-                            buttonClicked={() => {}}
+                            buttonClicked={() => { }}
                         />
                         {
                             props.cancelBtnText &&
@@ -63,6 +74,7 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
                                 buttonClicked={handleCancel} />
                         }
                     </FormFooter>}
+                <AutoSubmitToken />
             </CreateForm>
         </Formik>
     )