@mohamed-karawia/library 0.1.22 → 0.1.23

package/src/stories/Events/EventsList/EventsList.jsx

@@ -1,187 +0,0 @@
-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 Modal from '../../Reusable Components/ReactModal/ReactModal';
-import CreateEvent from '../CreateEvent/CreateEvent';
-import EventsPreview from '../../PreviewComponents/EventsPreview/EventsPreview';
-// import { Events } from './EventsList.stories';
-// import { eventsList } from '../../Pages/Events/Events/Events.stories';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections';
-import Community from '../../Reusable Components/Community/Community';
-
-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,
-    ...props
-}) => {
-
-    const [showModal, setShowModal] = useState(false);
-    const [showConfigModal, setShowConfigModal] = useState(false);
-    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'
-        }
-    ]
-
-    let sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling',
-                    id: 'styling'
-                }
-            ]
-        }
-    ]
-
-    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 cancelHandler = () => {
-        setShowModal(false)
-    }
-
-    const onAddFolder = (event) => {
-        setShowModal(false)
-        props.onAddEvent(event)
-    }
-
-    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}
-            />
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <CreateEvent
-                    saveBtnText={props.saveBtnText || 'Create'}
-                    cancelBtnText={props.cancelBtnText || "Cancel"}
-                    saveHandler={onAddFolder}
-                    cancelHandler={cancelHandler}
-                />
-            </Modal>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={cancelConfig}
-                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="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>
-        </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/Folders/Folders.jsx

@@ -1,196 +0,0 @@
-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 Modal from '../../Reusable Components/ReactModal/ReactModal';
-import CreateFolder from '../CreateFolder/CreateFolder';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections'
-import FoldersPreview from '../../PreviewComponents/FoldersPreview/FoldersPreview';
-// import { Folders as Context } from '../../Pages/Library/Folders/Library.stories';
-// import { ViewFolders } from './Folders.stories';
-import Community from '../../Reusable Components/Community/Community';
-
-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 [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'
-        }
-    ]
-
-    const sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling', component: (<Tabs
-                        title="Folders Config"
-                        tabs={tabs}
-                    />)
-                }
-            ]
-        }
-    ]
-
-    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 cancelHandler = () => {
-        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} />
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}
-            >
-                <CreateFolder
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
-                    saveHandler={onAddFolder}
-                    cancelHandler={cancelHandler}
-                />
-            </Modal>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={cancelConfig}
-                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="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>
-        </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/Music Album/ViewAlbum/ViewAlbum.jsx

@@ -1,172 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-import List from '../../Reusable Components/ReusableList/ReusableList';
-import Modal from '../../Reusable Components/ReactModal/ReactModal';
-
-import { AiOutlineFileAdd, AiOutlineDelete } from "react-icons/ai";
-import { BsGear } from "react-icons/bs";
-import AddSong from '../../Forms/AddSong/AddSong';
-import Tabs from '../../Reusable Components/Tabs/Tabs';
-import Sections from '../../Sections/Sections';
-import MusicAlbumPreview from '../../PreviewComponents/MusicAlbumPreview/MusicAlbumPreview';
-import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
-import Community from '../../Reusable Components/Community/Community';
-import { SPACES } from '../../Pages/ViewWorld/constatnts';
-// import styles from '../../styling.json'
-
-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 [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'
-        }
-    ]
-
-    let sections = [
-        {
-            title: 'Styles',
-            data: [
-                {
-                    title: 'Styling',
-                    id: 'styling'
-                }
-            ]
-        }
-    ]
-
-    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 cancelHandler = () => {
-        setShowModal(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}
-            />
-            <Modal
-                modalIsOpen={showModal}
-                closeModal={() => setShowModal(false)}
-                exitModalButton={(e) => (
-                    <div></div>
-                )}>
-                <AddSong
-                    saveHandler={onAddSong}
-                    cancelHandler={cancelHandler}
-                    saveBtnText={props.saveBtnText || "Create"}
-                    cancelBtnText={props.cancelBtnText || "Cancel"} />
-            </Modal>
-            <Modal
-                modalIsOpen={showConfigModal}
-                closeModal={() => {
-                    localStorage.removeItem('formStyles')
-                    setShowConfigModal(false)
-                }}
-                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>
-        </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