@mohamed-karawia/library 0.1.22 → 0.1.23

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/{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';
 
 
 

package/src/stories/Spaces/Chat/Chat.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { BsGear } from "react-icons/bs";
+
+import List from "../../Reusable Components/ReusableList/ReusableList";
+import RichTextInput from "../../Common Inputs/RichTextInput/RichTextInput";
+import ChatContifgModal from "../../Modals/ChatConfigModal/ChatContifgModal";
+
+const listControls = [{ icon: <BsGear />, action: "config", name: "Config" }];
+
+const Chat = ({ data, users, title, backgroundColor, community, ...props }) => {
+  const [showConfigModal, setShowConfigModal] = useState(false);
+
+
+  const onIconClicked = (action) => {
+    if (!props.preview) {
+      switch (action) {
+        case "config":
+          setShowConfigModal(true);
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  const cancelConfig = () => {
+    setShowConfigModal(false);
+    localStorage.removeItem("formStyles");
+  };
+
+  return (
+    <Container backgroundColor={backgroundColor}>
+      <List
+        listTitle={title || "Chat"}
+        type="flat"
+        data={data}
+        cardStyle="card-style-8"
+        iconClicked={onIconClicked}
+        listControls={listControls}
+        {...props}
+      />
+      <RichTextInput users={users} />
+      <ChatContifgModal
+        title={props.title}
+        showConfigModal={showConfigModal}
+        cancelConfig={cancelConfig}
+        community={community}
+        data={data}
+        users={users}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  background-color: ${({ backgroundColor }) =>
+    backgroundColor || "transparent"};
+`;
+
+Chat.defaultProps = {
+  title: "Chat Space",
+};
+
+Chat.propTypes = {
+  data: PropTypes.array.isRequired,
+  title: PropTypes.string,
+  users: PropTypes.array,
+  backgroundColor: PropTypes.string,
+  customCardStyles: PropTypes.object,
+  headerStyles: PropTypes.object,
+  preview: PropTypes.bool,
+};
+
+export default Chat;

package/src/stories/Spaces/EventsList/EventsList.jsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
+import List from '../../Reusable Components/ReusableList/ReusableList';
+import CreateEventModal from '../../Modals/CreateEventModal/CreateEventModal';
+import EventsConfigModal from '../../Modals/EventsConfigModal/EventsConfigModal';
+
+const listControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
+]
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete Image' },
+]
+
+const EventsList = ({
+    events,
+    community,
+    actions,
+    ...props
+}) => {
+
+    const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+
+    const onIconClicked = (action) => {
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        if (!props.preview) {
+            props.cardIconClicked(action, index)
+        }
+    }
+
+    const cardClicked = (index, props) => {
+        if (!props.preview) {
+            props.cardClicked(props)
+        }
+    }
+
+    const onAddFolder = (event) => {
+        setShowModal(false)
+        props.onAddEvent(event)
+    }
+
+    const closeModal = () => {
+        setShowModal(false);
+    }
+
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
+    return (
+        <Container>
+            <List
+                listTitle={props.title || "My Events"}
+                data={events}
+                type='flat'
+                cardStyle="card-style-11"
+                listControls={listControls}
+                cardControls={cardControls}
+                iconClicked={onIconClicked}
+                cardClicked={cardClicked}
+                cardIconClicked={cardIconClicked}
+                {...props}
+            />
+            <CreateEventModal
+                showModal={showModal}
+                onAddFolder={onAddFolder}
+                closeModal={closeModal}
+                actions={actions}
+            />
+            <EventsConfigModal
+                title={props.title}
+                events={events}
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                community={community}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+EventsList.defaultProps = {};
+
+EventsList.propTypes = {
+    notes: PropTypes.array.isRequired,
+    title: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    preview: PropTypes.bool
+}
+
+export default EventsList

package/src/stories/{Library/Notes/Notes.jsx → Spaces/NotesList/NotesList.jsx}

@@ -5,12 +5,8 @@ import styled from 'styled-components';
 import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
 import { BsGear } from "react-icons/bs";
 import List from '../../Reusable Components/ReusableList/ReusableList';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-import CreateFolder from '../CreateFolder/CreateFolder';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections'
-import NotesPreview from '../../PreviewComponents/NotesPreview/NotesPreview';
-import Community from '../../Reusable Components/Community/Community';
+import CreateNoteModal from '../../Modals/CreateNoteModal/CreateNoteModal';
+import NotesConfigModal from '../../Modals/NotesConfigModal/NotesConfigModal';
 
 const listControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
@@ -32,34 +28,8 @@ const Notes = ({
 }) => {
     const [showModal, setShowModal] = useState(false);
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Notes preview={true} notes={notes} />)
 
-    const formChanged = (values) => {
-        setCenterContext(<Notes preview={true} notes={notes} {...values} />)
-    }
 
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
-
-    const sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling', component: (<Tabs
-                        title="Notes Config"
-                        tabs={tabs}
-                    />)
-                }
-            ]
-        }
-    ]
 
     const onIconClicked = (action) => {
         if (!props.preview) {
@@ -93,6 +63,10 @@ const Notes = ({
         setShowModal(false)
     }
 
+    const closeModal = () => {
+        setShowModal(false);
+    }
+
     const cancelConfig = () => {
         setShowConfigModal(false);
         localStorage.removeItem('formStyles')
@@ -112,40 +86,20 @@ const Notes = ({
                 cardIconClicked={cardIconClicked}
                 {...props}
             />
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <CreateFolder
-                    saveBtnText={props.saveBtnText || "Create"}
-                    cancelBtnText={props.cancelBtnText || "Cancel"}
-                    saveHandler={onAddFolder}
-                    cancelHandler={cancelHandler}
-                />
-            </Modal>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={cancelConfig}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}
-            >
-                <Tabs
-                    title="Notes Config"
-                    tabs={tabs}>
-                    <NotesPreview
-                        componentProps={{ notes, title: props.title || "Your Notes" , preview: true}}
-                        formChanged={formChanged}
-                        id="preview"
-                    />
-                    <Community
-                        center={centerContext}
-                        community={community}
-                        id="community" />
-                </Tabs>
-            </Modal>
+            <CreateNoteModal
+                showModal={showModal}
+                closeModal={closeModal}
+                onAddFolder={onAddFolder}
+                cancelHandler={cancelHandler}
+                saveBtnText={props.saveBtnText}
+                cancelBtnText={props.cancelBtnText}
+            />
+            <NotesConfigModal 
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                notes={notes}
+                community={community}
+            />
         </Container>
     )
 }

package/src/stories/{Photo Album/DetailedPhoto/DetailedPhoto.jsx → Spaces/ViewDetailedPhoto/ViewDetailedPhoto.jsx}

@@ -11,7 +11,7 @@ const DetailedPhoto = (props) => {
 DetailedPhoto.defaultProps = {};
 
 DetailedPhoto.propTypes = {
-
+    img: PropTypes.string
 }
 
 export default DetailedPhoto