@mohamed-karawia/library 0.1.18 → 0.1.22

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 = JSON.parse(localStorage.getItem('formStyles')) || {
+        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;

package/src/stories/PreviewComponents/NavbarPreview/NavbarPreview.jsx

@@ -0,0 +1,93 @@
+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';
+
+const NavbarPreview = (props) => {
+    const [navbarStyles, setNavbarStyles] = useState({})
+
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+        iconSize: 'md',
+        iconBackgroundColor: 'black',
+        navbarColor: 'white',
+    }
+
+    const sections = [
+        {
+            title: "Navbar Styles",
+            body: [
+                (
+                <CustomSelect label="Icon Size" options={[
+                    { label: 'select an option', value: '' },
+                    { label: 'small', value: 'sm' },
+                    { label: 'medium', value: 'md' },
+                    { label: 'large', value: 'lg' },
+                ]} name="iconSize" />
+            ),
+            (<Picker label="Icon Color" name="iconBackgroundColor" />),
+            (<Picker label="Background Color" name="navbarColor" />)
+        ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setNavbarStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Reusable form"
+                    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={'Navbar'} stylingProps={navbarStyles} />
+            </Right>
+        </Container>
+    )
+};
+
+NavbarPreview.defaultProps = {};
+
+NavbarPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default NavbarPreview;

package/src/stories/PreviewComponents/NotesPreview/NotesPreview.jsx

@@ -0,0 +1,122 @@
+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 NotesPreview = (props) => {
+    const [notesStyles, setNotesStyles] = useState({});
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+        },
+        customCardStyles: {
+            cardBackgroundColor: '',
+            onHoverBackgroundColor: '',
+            cardRadius: '',
+            cardTitleFontSize: '',
+            cardTitleFontWeight: '',
+            cardTitleColor: '',
+            cardImageRadius: '',
+            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="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)
+            setNotesStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Notes 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={'Notes'} componentProps={props.componentProps} stylingProps={notesStyles} />
+            </Right>
+        </Container>
+    );
+};
+
+NotesPreview.defaultProps = {};
+
+NotesPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default NotesPreview;

package/src/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.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 PhotoAlbumPreview = (props) => {
+    const [photoAlbumStyles, setPhotoAlbumStyles] = 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: ''
+        }
+      }
+
+      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="Discription Font Size" name="customCardStyles.cardDescriptionFontSize" />),
+            (<Picker label="Discription 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)
+          setPhotoAlbumStyles(values)
+          localStorage.setItem('formStyles', JSON.stringify(values))
+      }
+      }
+    
+      const submitHandler = (values) => {
+        console.log(values);
+      }
+    
+      const cancelHandler = () => {
+        console.log('Canceled')
+      }
+  return (
+    <Container>
+    <Left>
+      <ReusableForm
+        formTitle="Photo Album 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={'PhotoAlbum'} componentProps={props.componentProps} stylingProps={photoAlbumStyles} />
+    </Right>
+  </Container>
+  );
+};
+
+PhotoAlbumPreview.defaultProps = {};
+
+PhotoAlbumPreview.propTypes = {
+  componentProps: PropTypes.object
+}
+
+export default PhotoAlbumPreview;

package/src/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.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 PhotoAlbumsPreview = (props) => {
+  const [photoAlbumsStyles, setPhotoAlbumsStyles] = 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: '',
+      countColor: '',
+      countFontSize: '',
+      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" />),
+        (<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="Count Font Size" name="customCardStyles.countFontSize" />),
+        (<Picker label="Count Font Color" name="customCardStyles.countColor" />),
+        (<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)
+      setPhotoAlbumsStyles(values)
+      localStorage.setItem('formStyles', JSON.stringify(values))
+  }
+  }
+
+  const submitHandler = (values) => {
+    console.log(values);
+  }
+
+  const cancelHandler = () => {
+    console.log('Canceled')
+  }
+  return (
+    <Container>
+      <Left>
+        <ReusableForm
+          formTitle="Photo 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={'PhotoAlbums'} componentProps={props.componentProps} stylingProps={photoAlbumsStyles} />
+      </Right>
+    </Container>
+  );
+};
+
+PhotoAlbumsPreview.defaultProps = {};
+
+PhotoAlbumsPreview.propTypes = {
+  componentProps: PropTypes.object
+}
+
+export default PhotoAlbumsPreview;