@mohamed-karawia/library 0.1.22 → 0.1.23

package/src/stories/Modals/CreateFolderModal/CreateFolderModal.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import CreateFolder from '../../Forms/CreateFolder/CreateFolder';
+
+const CreateFolderModal = ({
+    showModal,
+    closeModal,
+    onAddFolder,
+}) => {
+    return (
+        <Modal
+            modalIsOpen={showModal}
+            closeModal={closeModal}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <CreateFolder
+                saveBtnText="Create"
+                cancelBtnText="Cancel"
+                saveHandler={onAddFolder}
+                cancelHandler={closeModal}
+            />
+        </Modal>
+    )
+}
+
+CreateFolderModal.defaultProps = {};
+
+CreateFolderModal.propTypes = {
+    showModal: PropTypes.bool,
+    closeModal: PropTypes.func,
+    onAddFolder: PropTypes.func,
+    cancelHandler: PropTypes.func,
+}
+
+export default CreateFolderModal

package/src/stories/Modals/CreateMusicAlbumModal/CreateMusicAlbumModal.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from "../../Reusable Components/ReactModal/ReactModal";
+import CreateAlbum from "../../Forms/CreateMusicAlbum/CreateMusicAlbum";
+
+const CreateMusicAlbumModal = ({
+    showModal,
+    onAddAlbum,
+    closeModal,
+    ...props
+}) => {
+    return (
+        <Modal
+            modalIsOpen={showModal}
+            closeModal={closeModal}
+            exitModalButton={(e) => <div></div>}
+        >
+            <CreateAlbum
+                saveHandler={onAddAlbum}
+                cancelHandler={closeModal}
+                saveBtnText={props.saveBtnText || "Create"}
+                cancelBtnText={props.cancelBtnText || "Cancel"}
+            />
+        </Modal>
+    )
+}
+
+CreateMusicAlbumModal.defaultProps = {};
+
+CreateMusicAlbumModal.propTypes = {
+    showModal: PropTypes.bool,
+    onAddAlbum: PropTypes.func,
+    closeModal: PropTypes.func,
+}
+
+export default CreateMusicAlbumModal

package/src/stories/Modals/CreateNoteModal/CreateNoteModal.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import CreateFolder from '../../Forms/CreateFolder/CreateFolder';
+
+const CreateNoteModal = ({
+    showModal,
+    closeModal,
+    onAddFolder,
+    cancelHandler,
+    ...props
+}) => {
+    return (
+        <Modal
+            modalIsOpen={showModal}
+            closeModal={closeModal}
+            exitModalButton={(e) => (
+                <div></div>
+            )}>
+            <CreateFolder
+                saveBtnText={props.saveBtnText || "Create"}
+                cancelBtnText={props.cancelBtnText || "Cancel"}
+                saveHandler={onAddFolder}
+                cancelHandler={cancelHandler}
+            />
+        </Modal>
+    )
+}
+
+CreateNoteModal.defaultProps = {};
+
+CreateNoteModal.propTypes = {
+    showModal: PropTypes.bool,
+    closeModal: PropTypes.func,
+    onAddFolder: PropTypes.func,
+    cancelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+
+}
+
+export default CreateNoteModal

package/src/stories/Modals/EventConfigModal/EventConfigModal.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Event from '../../Spaces/ViewEvent/Event';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import EventPreview from '../../PreviewComponents/EventPreview/EventPreview';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Community from '../../Reusable Components/Community/Community';
+
+const EventConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    cover,
+    title,
+    date,
+    disc,
+    community,
+    ...props
+}) => {
+
+    const [centerContext, setCenterContext] = useState(<Event preview={true} title={title} cover={cover} date={date} disc={disc} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<Event preview={true} title={title} cover={cover} date={date} disc={disc} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Event Config"
+                tabs={tabs}
+            >
+                <EventPreview
+                    componentProps={{ cover, title, date, disc, preview: true }}
+                    formChanged={formChanged}
+                    id='preview'
+                />
+                <Community
+                    center={centerContext}
+                    community={community} preview={true}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+EventConfigModal.defaultProps = {};
+
+EventConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    cover: PropTypes.string,
+    title: PropTypes.string,
+    date: PropTypes.string,
+    disc: PropTypes.string,
+    community: PropTypes.object,
+}
+
+export default EventConfigModal

package/src/stories/Modals/EventsConfigModal/EventsConfigModal.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from "../../Reusable Components/ReactModal/ReactModal";
+import EventsPreview from '../../PreviewComponents/EventsPreview/EventsPreview';
+import Tabs from "../../Reusable Components/Tabs/Tabs";
+import EventsList from '../../Spaces/EventsList/EventsList';
+import Community from "../../Reusable Components/Community/Community";
+
+
+const EventsConfigModal = ({
+    events,
+    showConfigModal,
+    cancelConfig,
+    community,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<EventsList preview={true} events={events} {...props} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<EventsList preview={true} events={events} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Events Config"
+                tabs={tabs}>
+                <EventsPreview
+                    componentProps={{ events, title: props.title || "My Events", preview: true }}
+                    formChanged={formChanged}
+                    id='preview'
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+EventsConfigModal.defaultProps = {};
+
+EventsConfigModal.propTypes = {
+    events: PropTypes.array,
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    community: PropTypes.object,
+}
+
+export default EventsConfigModal

package/src/stories/Modals/FoldersConfigModal/FoldersConfigModal.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Folders from '../../Spaces/ViewFolders/ViewFolders';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import FoldersPreview from '../../PreviewComponents/FoldersPreview/FoldersPreview';
+import Community from '../../Reusable Components/Community/Community';
+
+const FoldersConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    folders,
+    community,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<Folders preview={true} folders={folders} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<Folders preview={true} folders={folders} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Folders Config"
+                tabs={tabs}>
+                <FoldersPreview
+                    componentProps={{ folders, title: props.title || "Your Folders", preview: true }}
+                    formChanged={formChanged}
+                    id='preview'
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+FoldersConfigModal.defaultProps = {};
+
+FoldersConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    folders: PropTypes.array,
+    community: PropTypes.object,
+}
+
+export default FoldersConfigModal;

package/src/stories/Modals/MusicAlbumConfigModal/MusicAlbumConfigModal.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ViewAlbum from '../../Spaces/ViewMusicAlbumList/ViewMusicAlbumList';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import MusicAlbumPreview from '../../PreviewComponents/MusicAlbumPreview/MusicAlbumPreview';
+import Community from '../../Reusable Components/Community/Community';
+
+const MusicAlbumConfigModal = ({
+    showConfigModal,
+    closeModal,
+    album,
+    community,
+    ...props
+}) => {
+
+    const [centerContext, setCenterContext] = useState(<ViewAlbum preview={true}  album={album} />)
+
+    const formChanged = (values) => {
+        console.log('context changed')
+        setCenterContext(<ViewAlbum preview={true}  album={album} {...values} />)
+    }
+
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={closeModal}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Album Config"
+                tabs={tabs}>
+                <MusicAlbumPreview
+                    componentProps={{ album, title: props.title || "My Album", preview: true }}
+                    formChanged={formChanged}
+                    id="preview"
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+MusicAlbumConfigModal.defaultProps = {};
+
+MusicAlbumConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    closeModal: PropTypes.func,
+    album: PropTypes.array,
+    community: PropTypes.object,
+}
+
+export default MusicAlbumConfigModal;

package/src/stories/Modals/MusicAlbumsConfigModal/MusicAlbumsConfigModal.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ViewAlbums from '../../Spaces/ViewMusicAlbums/ViewMusicAlbums';
+import Modal from "../../Reusable Components/ReactModal/ReactModal";
+import Tabs from "../../Reusable Components/Tabs/Tabs";
+import MusicAlbumsPreview from "../../PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview";
+import Community from "../../Reusable Components/Community/Community";
+
+const MusicAlbumsConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    albums,
+    community,
+    ...props
+}) => {
+
+    const [centerContext, setCenterContext] = useState(
+        <ViewAlbums preview={true} albums={albums} />
+    );
+
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbums preview={true} albums={albums} {...values} />);
+      };
+    
+
+    let tabs = [
+        {
+            title: "New",
+            id: "preview",
+        },
+        {
+            title: "Context",
+            id: "community",
+        },
+    ];
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => <div></div>}
+        >
+            <Tabs title="Albums Config" tabs={tabs}>
+                <MusicAlbumsPreview
+                    componentProps={{
+                        albums: albums,
+                        title: "Music Albums",
+                        preview: true,
+                    }}
+                    formChanged={formChanged}
+                    id="preview"
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community"
+                />
+            </Tabs>
+        </Modal>
+    )
+}
+
+MusicAlbumsConfigModal.defaultProps = {};
+
+MusicAlbumsConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    albums: PropTypes.array,
+    community: PropTypes.object,
+}
+
+export default MusicAlbumsConfigModal

package/src/stories/Modals/NotesConfigModal/NotesConfigModal.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Notes from '../../Spaces/NotesList/NotesList';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import NotesPreview from '../../PreviewComponents/NotesPreview/NotesPreview';
+import Community from '../../Reusable Components/Community/Community';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+
+
+const NotesConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    notes,
+    community,
+    ...props
+}) => {
+    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'
+        }
+    ]
+    return (
+        <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>
+    )
+}
+
+NotesConfigModal.defaultProps = {};
+
+NotesConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    notes: PropTypes.array,
+    community: PropTypes.object,
+}
+
+export default NotesConfigModal;

package/src/stories/Modals/PhotoAlbumConfigModal/PhotoAlbumConfigModal.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ViewAlbum from '../../Spaces/ViewPhotoAlbumList/ViewPhotoAlbumList';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import PhotoAlbumPreview from '../../PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Community from '../../Reusable Components/Community/Community';
+
+
+const PhotoAlbumConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    album,
+    community,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<ViewAlbum preview={true} album={album} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbum preview={true} album={album} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Photo Album Config"
+                tabs={tabs}
+                id='styling'
+            >
+                <PhotoAlbumPreview
+                    componentProps={{ album, title: props.title || 'Photo Album', preview: true }}
+                    formChanged={formChanged}
+                    id='preview'
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+PhotoAlbumConfigModal.defaultProps = {};
+
+PhotoAlbumConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    album: PropTypes.array,
+    community: PropTypes.object,
+    title: PropTypes.string
+}
+
+export default PhotoAlbumConfigModal

package/src/stories/Modals/PhotoAlbumsConfigModal/PhotoAlbumsConfigModal.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import ViewAlbums from '../../Spaces/ViewPhotoAlbums/ViewPhotoAlbums';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import PhotoAlbumsPreview from '../../PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Community from '../../Reusable Components/Community/Community';
+
+const PhotoAlbumsConfigModal = ({
+    showConfigModal,
+    cancelConfig,
+    albums,
+    community,
+    ...props
+}) => {
+    const [centerContext, setCenterContext] = useState(<ViewAlbums preview={true} albums={albums} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbums preview={true} albums={albums} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
+    return (
+        <Modal
+            modalIsOpen={showConfigModal}
+            closeModal={cancelConfig}
+            exitModalButton={(e) => (
+                <div></div>
+            )}
+        >
+            <Tabs
+                title="Photo Albums Config"
+                tabs={tabs}
+                id='styling'
+            >
+                <PhotoAlbumsPreview
+                    componentProps={{ albums, title: props.title || 'Photo Albums', preview: true }}
+                    formChanged={formChanged}
+                    id='preview'
+                />
+                <Community
+                    center={centerContext}
+                    community={community}
+                    id="community" />
+            </Tabs>
+        </Modal>
+    )
+}
+
+PhotoAlbumsConfigModal.defaultProps = {};
+
+PhotoAlbumsConfigModal.propTypes = {
+    showConfigModal: PropTypes.bool,
+    cancelConfig: PropTypes.func,
+    albums: PropTypes.array,
+    community: PropTypes.object,
+    title: PropTypes.string
+}
+
+export default PhotoAlbumsConfigModal;