@mohamed-karawia/library 0.1.20 → 0.1.23

package/src/stories/PreviewComponents/ChatPreview/ChatPreview.jsx

@@ -9,117 +9,119 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 
 const ChatPreview = (props) => {
-    const [chatStyles, setChatStyles] = useState({});
-    const initialValues = {
-        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',
-          dateColor: ''
-        }
+  const [chatStyles, setChatStyles] = 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',
+      dateColor: ''
+    }
+  }
 
-      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="Text Font Size" name="customCardStyles.cardDescriptionFontSize" />),
-            (<Picker label="Text 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="Date Color" name="customCardStyles.dateColor" />),
-          ]
-        },
+  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="Text Font Size" name="customCardStyles.cardDescriptionFontSize" />),
+        (<Picker label="Text 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="Date Color" name="customCardStyles.dateColor" />),
+      ]
+    },
+  ]
 
-      const handleChange = (values) => {
-        if(values){
-          props.formChanged(values)
-          setChatStyles(values)
-          localStorage.setItem('formStyles', JSON.stringify(values))
-      }
-      }
-    
-      const submitHandler = (values) => {
-        console.log(values);
-      }
-    
-      const cancelHandler = () => {
-        console.log('Canceled')
+  const handleChange = (values) => {
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values)
+        setChatStyles(values)
+        localStorage.setItem('formStyles', JSON.stringify(values))
       }
+    }
+  }
+
+  const submitHandler = (values) => {
+    console.log(values);
+  }
+
+  const cancelHandler = () => {
+    console.log('Canceled')
+  }
   return (
     <Container>
-    <Left>
-      <ReusableForm
-        formTitle="Chat 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={'Chat'} componentProps={props.componentProps} stylingProps={chatStyles} />
-    </Right>
-  </Container>
+      <Left>
+        <ReusableForm
+          formTitle="Chat 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={'Chat'} componentProps={props.componentProps} stylingProps={chatStyles} />
+      </Right>
+    </Container>
   );
 };
 

package/src/stories/PreviewComponents/EventPreview/EventPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const EventPreview = (props) => {
     const [eventStyles, setEventStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,
@@ -58,10 +58,12 @@ const EventPreview = (props) => {
     ]
 
     const handleChange = (values) => {
-        if(values){
-            props.formChanged(values)
-            setEventStyles(values)
-            localStorage.setItem('formStyles', JSON.stringify(values))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setEventStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }
 

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

@@ -8,118 +8,120 @@ 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 [eventsStyles, setEventsStyles] = 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: '',
+      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 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')
+  const handleChange = (values) => {
+    if (props.formChanged) {
+      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>
+      <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>
   );
 };
 

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

@@ -10,7 +10,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const FoldersPreview = (props) => {
   const [foldersStyles, setFoldersStyles] = useState({});
-  const initialValues = {
+  const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
     headerStyles: {
       headerBackground: '',
       padding: 0,
@@ -69,11 +69,13 @@ const FoldersPreview = (props) => {
   ]
 
   const handleChange = (values) => {
-    if(values){
-      props.formChanged(values)
-      setFoldersStyles(values)
-      localStorage.setItem('formStyles', JSON.stringify(values))
-  }
+    if (props.formChanged) {
+      if (values) {
+        props.formChanged(values)
+        setFoldersStyles(values)
+        localStorage.setItem('formStyles', JSON.stringify(values))
+      }
+    }
   }
 
   const submitHandler = (values) => {

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

@@ -66,10 +66,12 @@ const MusicAlbum = (props) => {
     ]
 
     const handleChange = (values) => {
-        if(values){
-            props.formChanged(values)
-            setMusicAlbumStyles(values)
-            localStorage.setItem('formStyles', JSON.stringify(values))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setMusicAlbumStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }
 

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

@@ -12,7 +12,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 const MusicAlbumsPreview = (props) => {
     const [musicAlbumsStyles, setMusicAlbumsStyles] = useState({})
 
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,
@@ -43,7 +43,7 @@ const MusicAlbumsPreview = (props) => {
             body: [
                 (<Picker label="Header Background" name="headerStyles.headerBackground" />),
                 (<TextField type="number" label="Padding" name="headerStyles.padding" />),
-                (<Picker label="Title Color"  name="headerStyles.titleColor" />),
+                (<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" />)
             ]
@@ -52,27 +52,29 @@ const MusicAlbumsPreview = (props) => {
             title: "Card Styles",
             body: [
                 (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
-                (<Picker label="Hover Color"  name="customCardStyles.onHoverBackgroundColor" />),
+                (<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" />),
+                (<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" />),
+                (<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="Border Color" name="customCardStyles.cardBorderColor" />),
             ]
         },
     ]
 
     const handleChange = (values) => {
-        if(values){
-            props.formChanged(values)
-            setMusicAlbumsStyles(values)
-            localStorage.setItem('formStyles', JSON.stringify(values))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setMusicAlbumsStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }
 
@@ -111,7 +113,7 @@ const MusicAlbumsPreview = (props) => {
                 />
             </Left>
             <Right>
-                <Preview type={'MusicAlbums'} componentProps={props.componentProps} stylingProps={musicAlbumsStyles} da />
+                <Preview type={'MusicAlbums'} componentProps={props.componentProps} stylingProps={musicAlbumsStyles} />
             </Right>
         </Container>
     );