@mohamed-karawia/library 0.1.21 → 0.1.24

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

@@ -11,7 +11,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const MusicPlayerPreview = (props) => {
     const [musicPlayerStyles, setMusicPlayerStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,
@@ -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

@@ -10,7 +10,7 @@ import Picker from '../../Common Inputs/Picker/Picker';
 const NavbarPreview = (props) => {
     const [navbarStyles, setNavbarStyles] = useState({})
 
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         iconSize: 'md',
         iconBackgroundColor: 'black',
         navbarColor: 'white',
@@ -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

@@ -10,7 +10,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const NotesPreview = (props) => {
     const [notesStyles, setNotesStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,
@@ -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))
+            }
         }
     }
 

package/src/stories/PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview.jsx

@@ -8,115 +8,117 @@ import Picker from '../../Common Inputs/Picker/Picker';
 import TextField from '../../Common Inputs/TextField/TextField';
 
 const PhotoAlbumPreview = (props) => {
-    const [photoAlbumStyles, setPhotoAlbumStyles] = 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: ''
-        }
+  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 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')
+  const handleChange = (values) => {
+    if (props.formChanged) {
+      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>
+      <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>
   );
 };
 

package/src/stories/PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview.jsx

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

package/src/stories/PreviewComponents/SpacesListPreview/SpacesListPreview.jsx

@@ -9,7 +9,7 @@ import TextField from '../../Common Inputs/TextField/TextField';
 
 const SpacesListPreview = (props) => {
     const [spacesStyles, setSpacesStyles] = useState({});
-    const initialValues = {
+    const initialValues = JSON.parse(localStorage.getItem('formStyles')) || {
         headerStyles: {
             headerBackground: '',
             padding: 0,
@@ -79,10 +79,12 @@ const SpacesListPreview = (props) => {
     ]
 
     const handleChange = (values) => {
-        if(values){
-            props.formChanged(values)
-            setSpacesStyles(values)
-            localStorage.setItem('formStyles', JSON.stringify(values))
+        if (props.formChanged) {
+            if (values) {
+                props.formChanged(values)
+                setSpacesStyles(values)
+                localStorage.setItem('formStyles', JSON.stringify(values))
+            }
         }
     }
 
@@ -95,8 +97,8 @@ const SpacesListPreview = (props) => {
     }
 
 
-  return (
-    <Container>
+    return (
+        <Container>
             <Left>
                 <ReusableForm
                     formTitle="Spaces List Styles"
@@ -126,7 +128,7 @@ const SpacesListPreview = (props) => {
                 <Preview type={'Spaces-List'} componentProps={props.componentProps} stylingProps={spacesStyles} />
             </Right>
         </Container>
-  );
+    );
 };
 
 SpacesListPreview.defaultProps = {};

package/src/stories/PreviewComponents/VideoAlbumPreview/VideoAlbumPreview.jsx

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

package/src/stories/PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview.jsx

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

package/src/stories/PreviewComponents/VideoPreview/VideoPreview.jsx

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

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

@@ -9,62 +9,39 @@ 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 BaseMaterial from '../../Containers/BaseMaterial'
 // import styles from '../../styling.json'
 
 
 
 const Community = ({
   context,
+  community,
   ...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' }
-      ]
-    }
-  ]
+  const spacesWidget = community.spacesListWidget.widgetSpacesList
 
   return (
-    <Container>
-      <Navbar />
+    <BaseMaterial {...community.styles}>
+      <Navbar {...community.navbarStyles} />
       <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,
+              listTitle: spacesWidget.listTitle,
+              spaces: spacesWidget.spaces,
+              cardClicked: () => null,
+              ...spacesWidget.styles
             }}
           />
         </Left>
         <Center>{props.center}</Center>
         <Right>{props.right}</Right>
       </Body>
-    </Container>
+    </BaseMaterial>
   );
 };
 
-const Container = styled.div`
-    width: 100%;
-    height: auto;
-    display: flex;
-    min-height: 100vh;
-    flex-direction: column;
-`
-
 export default Community;

package/src/stories/{Sections/Sections.jsx → Reusable Components/Sections/Sections.jsx }

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import ReusableList from '../Reusable Components/ReusableList/ReusableList';
+import ReusableList from '../ReusableList/ReusableList';