@mohamed-karawia/library 0.1.16 → 0.1.20

package/src/stories/PreviewComponents/EventsPreview/EventsPreview.jsx

@@ -0,0 +1,132 @@
+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 EventsPreview = (props) => {
+    const [eventsStyles, setEventsStyles] = useState({});
+    const initialValues = {
+        headerStyles: {
+          headerBackground: '',
+          padding: 0,
+          titleColor: '',
+          titleFontSize: '',
+          titleFontWeight: '',
+          controlsStyles: {
+            iconSize: '',
+            iconColor: ''
+          }
+        },
+        customCardStyles: {
+          cardBackgroundColor: '',
+          onHoverBackgroundColor: '',
+          cardRadius: '',
+          cardTitleFontSize: '',
+          cardTitleFontWeight: '',
+          cardTitleColor: '',
+          cardImageRadius: '',
+          iconColor: '',
+          cardPadding: 0,
+          imgSize: 0,
+          cardBorderSize: 0,
+          cardBorderColor: '',
+          dateColor: '',
+          controlsStyles: ''
+        }
+      }
+
+      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="Image Size" name="customCardStyles.imgSize" />),
+            (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
+            (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
+            (<Picker label="Icons Color" name="customCardStyles.iconColor" />),
+            (<Picker label="Date Color" name="customCardStyles.dateColor" />),
+            (<Picker label="Card Icon Color" name="customCardStyles.controlsStyles.iconColor" />),
+          ]
+        },
+      ]
+
+      const handleChange = (values) => {
+        if(values){
+          props.formChanged(values)
+          setEventsStyles(values)
+          localStorage.setItem('formStyles', JSON.stringify(values))
+      }
+      }
+    
+      const submitHandler = (values) => {
+        console.log(values);
+      }
+    
+      const cancelHandler = () => {
+        console.log('Canceled')
+      }
+
+  return (
+    <Container>
+    <Left>
+      <ReusableForm
+        formTitle="Events 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={'Events'} componentProps={props.componentProps} stylingProps={eventsStyles} />
+    </Right>
+  </Container>
+  );
+};
+
+EventsPreview.defaultProps = {};
+
+EventsPreview.propTypes = {
+  componentProps: PropTypes.object
+}
+
+export default EventsPreview;

package/src/stories/PreviewComponents/FoldersPreview/FoldersPreview.jsx

@@ -0,0 +1,127 @@
+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 FoldersPreview = (props) => {
+  const [foldersStyles, setFoldersStyles] = useState({});
+  const initialValues = {
+    headerStyles: {
+      headerBackground: '',
+      padding: 0,
+      titleColor: '',
+      titleFontSize: '',
+      titleFontWeight: '',
+    },
+    customCardStyles: {
+      cardBackgroundColor: '',
+      onHoverBackgroundColor: '',
+      cardRadius: '',
+      cardTitleFontSize: '',
+      cardTitleFontWeight: '',
+      cardTitleColor: '',
+      cardImageRadius: '',
+      cardDescriptionFontSize: '',
+      cardDescriptionColor: '',
+      cardPadding: 0,
+      imgSize: 0,
+      cardBorderSize: 0,
+      cardBorderColor: '',
+      iconColor: ''
+    }
+  }
+
+  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: "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" />),
+        (<Picker label="Icon Color" name="customCardStyles.iconColor" />),
+      ]
+    },
+  ]
+
+  const handleChange = (values) => {
+    if(values){
+      props.formChanged(values)
+      setFoldersStyles(values)
+      localStorage.setItem('formStyles', JSON.stringify(values))
+  }
+  }
+
+  const submitHandler = (values) => {
+    console.log(values);
+  }
+
+  const cancelHandler = () => {
+    console.log('Canceled')
+  }
+
+  return (
+    <Container>
+      <Left>
+        <ReusableForm
+          formTitle="Folders 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={'Folders'} componentProps={props.componentProps} stylingProps={foldersStyles} />
+      </Right>
+    </Container>
+  );
+};
+
+FoldersPreview.defaultProps = {};
+
+FoldersPreview.propTypes = {
+  componentProps: PropTypes.object
+}
+
+export default FoldersPreview;

package/src/stories/PreviewComponents/MusicAlbumPreview/MusicAlbumPreview.jsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } 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 MusicAlbum = (props) => {
+    const [musicAlbumStyles, setMusicAlbumStyles] = useState(JSON.parse(localStorage.getItem('formStyles')) || {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+        },
+        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" />)
+            ]
+        },
+        {
+            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)
+            setMusicAlbumStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Music Album Styles"
+                    initialValues={musicAlbumStyles}
+                    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={'MusicAlbum'} componentProps={props.componentProps} stylingProps={musicAlbumStyles} />
+            </Right>
+        </Container>
+    );
+};
+
+MusicAlbum.defaultProps = {};
+
+MusicAlbum.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default MusicAlbum;

package/src/stories/PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview.jsx

@@ -0,0 +1,126 @@
+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 CustomSelect from '../../Common Inputs/CustomSelect/CustomSelect';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+
+const MusicAlbumsPreview = (props) => {
+    const [musicAlbumsStyles, setMusicAlbumsStyles] = useState({})
+
+    const initialValues = {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+        },
+        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" />)
+            ]
+        },
+        {
+            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)
+            setMusicAlbumsStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Music 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={'MusicAlbums'} componentProps={props.componentProps} stylingProps={musicAlbumsStyles} da />
+            </Right>
+        </Container>
+    );
+};
+
+MusicAlbumsPreview.defaultProps = {};
+
+MusicAlbumsPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default MusicAlbumsPreview;

package/src/stories/PreviewComponents/MusicPlayerPreview/MusicPlayerPreview.jsx

@@ -0,0 +1,113 @@
+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 CustomSelect from '../../Common Inputs/CustomSelect/CustomSelect';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+
+const MusicPlayerPreview = (props) => {
+    const [musicPlayerStyles, setMusicPlayerStyles] = useState({});
+    const initialValues = {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+            DiscriptionColor: '',
+            DiscriptionFontSize: '',
+            DiscriptionFontWeight: '',
+        },
+        backgroundColor: '',
+        primaryColor: '',
+        borderRadius: 0,
+        padding: 0,
+        fontColor: '',
+        fontSize: 20,
+    }
+
+    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="Background Color" name="backgroundColor" />),
+                (<Picker label="Primary Color" name="primaryColor" />),
+                (<TextField type="number" label="Border Radius" name="borderRadius" />),
+                (<TextField type="number" label="Padding" name="customCardStyles.cardTitleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="padding" />),
+                (<Picker label="Font Color" name="fontColor" />),
+                (<TextField type="number" label="Font Size" name="fontSize" />),
+            ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setMusicPlayerStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+    return (
+        <Container>
+        <Left>
+            <ReusableForm
+                formTitle="Music 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={'MusicPlayer'} componentProps={props.componentProps} stylingProps={musicPlayerStyles} da />
+        </Right>
+    </Container>
+    );
+};
+
+MusicPlayerPreview.defaultProps = {};
+
+MusicPlayerPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default MusicPlayerPreview;