@mohamed-karawia/library 0.1.22 → 0.1.23

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 =  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 [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

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

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

@@ -56,10 +56,12 @@ const MusicPlayerPreview = (props) => {
     ]
 
     const handleChange = (values) => {
-        if(values){
-            props.formChanged(values)
-            setMusicPlayerStyles(values)
-            localStorage.setItem('formStyles', JSON.stringify(values))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setMusicPlayerStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }
 
@@ -72,35 +74,35 @@ const MusicPlayerPreview = (props) => {
     }
     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>
+            <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>
     );
 };
 

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

@@ -21,24 +21,26 @@ const NavbarPreview = (props) => {
             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" />)
-        ]
+                    <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))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setNavbarStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }
 
@@ -75,7 +77,7 @@ const NavbarPreview = (props) => {
                     handleChange={handleChange}
                     bodyRowGap={20}
                     bodyColumnGap={10}
-                     />
+                />
             </Left>
             <Right>
                 <Preview type={'Navbar'} stylingProps={navbarStyles} />

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

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