@mohamed-karawia/library 0.1.20 → 0.1.23

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/Spaces/NotesList/NotesList.jsx

@@ -0,0 +1,125 @@
+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 CreateNoteModal from '../../Modals/CreateNoteModal/CreateNoteModal';
+import NotesConfigModal from '../../Modals/NotesConfigModal/NotesConfigModal';
+
+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 Notes = ({
+    notes,
+    iconColor,
+    cardTitleFontSize,
+    cardTitleColor,
+    cardPadding,
+    community,
+    ...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) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const cardClicked = () => {
+        console.log('test')
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    const onAddFolder = (folder) => {
+        props.onAddNote(folder)
+        setShowModal(false)
+    }
+
+    const closeModal = () => {
+        setShowModal(false);
+    }
+
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
+    return (
+        <Container>
+            <List
+                listTitle={props.title || "My Notes"}
+                data={notes}
+                type='flat'
+                cardStyle="card-style-11"
+                listControls={listControls}
+                cardControls={cardControls}
+                iconClicked={onIconClicked}
+                cardClicked={cardClicked}
+                cardIconClicked={cardIconClicked}
+                {...props}
+            />
+            <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>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+Notes.defaultProps = {};
+
+Notes.propTypes = {
+    notes: PropTypes.array.isRequired,
+    iconColor: PropTypes.string,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object
+}
+
+export default Notes;

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

package/src/stories/{Events/Event → Spaces/ViewEvent}/Event.jsx

@@ -4,15 +4,7 @@ import styled from 'styled-components';
 
 import { BsGear } from "react-icons/bs";
 import ReusableHeader from '../../Reusable Components/ReusableHeader/ReusableHeader';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-import EventPreview from '../../PreviewComponents/EventPreview/EventPreview';
-
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections';
-import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
-import Community from '../../Reusable Components/Community/Community';
-// import styles from '../../styling.json'
-
+import EventConfigModal from '../../Modals/EventConfigModal/EventConfigModal';
 
 const listControls = [
     { icon: (<BsGear />), action: 'config', name: 'Config' },
@@ -30,35 +22,10 @@ const Event = ({
     discColor,
     discSize,
     headerStyles,
+    community,
     ...props
 }) => {
     const [showConfigModal, setShowConfigModal] = useState(false);
-    const [centerContext, setCenterContext] = useState(<Event title={title} cover={cover} date={date} disc={disc}/>)
-
-    const formChanged = (values) => {
-        setCenterContext(<Event title={title} cover={cover} date={date} disc={disc} {...values} />)
-    }
-
-    let tabs = [
-        {
-            title: 'New', id: 'preview'
-        },
-        {
-            title: 'Context', id: 'community'
-        }
-    ]
-
-    let sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling',
-                    id: 'styling'
-                }
-            ]
-        }
-    ]
 
     const onIconClicked = (action) => {
         if (!props.preview) {
@@ -71,6 +38,12 @@ const Event = ({
             }
         }
     }
+
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
     return (
         <Container
             backgroundColor={backgroundColor}>
@@ -95,44 +68,15 @@ const Event = ({
                     {disc}
                 </Disc>
             </Details>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={() => setShowConfigModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}
-            >
-                {/* <Sections
-                    sections={sections}
-                    backgroundColor={'white'}
-                    sectionHeaderStyles={{
-                        titleColor: 'white',
-                        headerBackground: 'transparent'
-                    }}
-                    customCardStyles={{
-                        cardPadding: 6,
-                        cardTitleFontSize: 15,
-                        cardBackgroundColor: '#2c2c2c',
-                        cardTitleColor: 'white',
-                        onHoverBackgroundColor: '#555555',
-                        controlsStyles: {
-                            showOnHover: true,
-                        }
-                    }} /> */}
-                <Tabs
-                    title="Event Config"
-                    tabs={tabs}
-                >
-                    <EventPreview
-                        componentProps={{ cover, title, date, disc, preview: true }}
-                        formChanged={formChanged}
-                        id='preview'
-                    />
-                    <Community
-                            center={centerContext}
-                            id="community" />
-                </Tabs>
-            </Modal>
+            <EventConfigModal
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                cover={cover}
+                title={title}
+                date={date}
+                disc={disc}
+                community={community}
+            />
         </Container>
     )
 }

package/src/stories/Spaces/ViewFolders/ViewFolders.jsx

@@ -0,0 +1,122 @@
+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 Gallery from '../../Reusable Components/Gallery/Gallery';
+import CreateFolderModal from '../../Modals/CreateFolderModal/CreateFolderModal';
+import FoldersConfigModal from '../../Modals/FoldersConfigModal/FoldersConfigModal';
+
+
+const galleryControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
+]
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete Image' },
+]
+
+const Folders = ({
+    folders,
+    folderTitle,
+    columnsNumber,
+    columnGap,
+    rowGap,
+    cardClicked,
+    iconColor,
+    community,
+    ...props
+}) => {
+    const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
+
+    const onIconClicked = (action) => {
+        if (!props.preview) {
+            switch (action) {
+                case 'add':
+                    setShowModal(true)
+                    break;
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const closeModal = () => {
+        setShowModal(false);
+    }
+
+    const onAddFolder = (folder) => {
+        props.onAddFolder(folder)
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <Gallery
+                galleryTitle={props.title || "Your Folders"}
+                data={folders}
+                type="flat"
+                cardStyle="card-style-10"
+                galleryControls={galleryControls}
+                iconClicked={onIconClicked}
+                cardClicked={cardClicked}
+                cardIconClicked={cardIconClicked}
+                cardControls={cardControls}
+                rowsHeight={140}
+                {...props} />
+            <CreateFolderModal
+                showModal={showModal}
+                closeModal={closeModal}
+                onAddFolder={onAddFolder}
+            />
+            <FoldersConfigModal
+                showConfigModal={showConfigModal}
+                cancelConfig={cancelConfig}
+                folders={folders}
+                community={community}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    background-color: transparent;
+`
+
+Folders.defaultProps = {};
+
+Folders.propTypes = {
+    folders: PropTypes.array,
+    title: PropTypes.string,
+    folderTitle: PropTypes.string,
+    columnsNumber: PropTypes.number,
+    columnGap: PropTypes.number,
+    rowGap: PropTypes.number,
+    galleryControls: PropTypes.array,
+    onIconClicked: PropTypes.func,
+    cardClicked: PropTypes.func,
+    cardIconClicked: PropTypes.func,
+    cardControls: PropTypes.array,
+    iconColor: PropTypes.string,
+    titleColor: PropTypes.string,
+    cardTitleColor: PropTypes.string,
+    cardDescriptionColor: PropTypes.string,
+    headerStyles: PropTypes.object
+}
+
+export default Folders;

package/src/stories/Spaces/ViewMusicAlbumList/ViewMusicAlbumList.jsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import List from '../../Reusable Components/ReusableList/ReusableList';
+import AddSongModal from '../../Modals/AddSongModal/AddSongModal';
+import MusicAlbumConfigModal from '../../Modals/MusicAlbumConfigModal/MusicAlbumConfigModal';
+import { AiOutlineFileAdd, AiOutlineDelete } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
+
+const listControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
+]
+
+const cardControls = [
+    { icon: (<AiOutlineDelete />), action: 'delete', name: 'Delete album' },
+]
+
+const ViewAlbum = ({
+    album,
+    cardBackgroundColor,
+    songTitleColor,
+    community,
+    ...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 onAddSong = (song) => {
+        setShowModal(false)
+        props.onAddSong(song)
+    }
+
+    const closeModal = () => {
+        setShowModal(false)
+    }
+
+    const closeConfigModal = () => {
+        localStorage.removeItem('formStyles')
+        setShowConfigModal(false)
+    }
+
+    return (
+        <Container>
+            <List
+                listTitle={props.title || "My Album"}
+                data={album}
+                cardStyle="card-style-7"
+                type="flat"
+                cardClicked={(index) => props.cardClicked(index)}
+                iconClicked={onIconClicked}
+                listControls={listControls}
+                cardControls={cardControls}
+                cardIconClicked={cardIconClicked}
+                {...props}
+            />
+            <AddSongModal
+                showModal={showModal}
+                closeModal={closeModal}
+                onAddSong={onAddSong}
+                cancelHandler={closeModal}
+            />
+            <MusicAlbumConfigModal
+                showConfigModal={showConfigModal}
+                closeModal={closeConfigModal}
+                album={album}
+                community={community}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+ViewAlbum.defaultProps = {
+
+};
+
+ViewAlbum.propTypes = {
+    album: PropTypes.array,
+    onDeleteSong: PropTypes.func,
+    onAddSong: PropTypes.func,
+    cardClicked: PropTypes.func,
+    cardBackgroundColor: PropTypes.string,
+    songTitleColor: PropTypes.string,
+    title: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object,
+    preview: PropTypes.bool
+};
+
+export default ViewAlbum