@mohamed-karawia/library 0.1.16 → 0.1.20

package/src/stories/Events/Event/Event.jsx

@@ -1,9 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 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'
+
+
+const listControls = [
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
+]
 const Event = ({
     cover,
     title,
@@ -16,13 +29,55 @@ const Event = ({
     dateSize,
     discColor,
     discSize,
-    headerStyles
+    headerStyles,
+    ...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) {
+            switch (action) {
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
     return (
         <Container
             backgroundColor={backgroundColor}>
             <ReusableHeader
                 title={title}
+                controls={listControls}
+                iconClicked={onIconClicked}
                 {...headerStyles}
             />
             <CoverWrapper>
@@ -40,6 +95,44 @@ 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>
         </Container>
     )
 }
@@ -47,7 +140,7 @@ const Event = ({
 const Container = styled.div`
     width: 100%;
     font-family: sans-serif;
-    background-color: ${({ backgroundColor }) => backgroundColor};
+    background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
 `
 
 const CoverWrapper = styled.div`
@@ -101,10 +194,10 @@ Event.propTypes = {
     titleSize: PropTypes.number,
     dateColor: PropTypes.string,
     dateSize: PropTypes.number,
-    headerBackground: PropTypes.string,
-    headerTitleColor: PropTypes.string,
     discColor: PropTypes.string,
     discSize: PropTypes.number,
+    headerStyles: PropTypes.object,
+    peview: PropTypes.bool
 }
 
 export default Event

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

@@ -3,12 +3,20 @@ 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 = [
@@ -17,31 +25,63 @@ const cardControls = [
 
 const EventsList = ({
     events,
-    iconColor,
-    cardTitleFontSize,
-    cardTitleColor,
-    cardPadding,
     ...props
 }) => {
 
     const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<EventsList events={events} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<EventsList 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) => {
-        switch (action) {
-            case 'add':
-                setShowModal(true)
-                break;
-            default:
-                break;
+        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)
+        if (!props.preview) {
+            props.cardIconClicked(action, index)
+        }
     }
 
-    const cardClicked = () => {
-        console.log('test')
+    const cardClicked = (index, props) => {
+        if (!props.preview) {
+            props.cardClicked(props)
+        }
     }
 
     const cancelHandler = () => {
@@ -54,9 +94,9 @@ const EventsList = ({
     }
 
     return (
-    <Container>
+        <Container>
             <List
-                listTitle="My Events"
+                listTitle={props.title || "My Events"}
                 data={events}
                 type='flat'
                 cardStyle="card-style-11"
@@ -74,14 +114,51 @@ const EventsList = ({
                     <div></div>
                 )}>
                 <CreateEvent
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
+                    saveBtnText={props.saveBtnText || 'Create'}
+                    cancelBtnText={props.cancelBtnText || "Cancel"}
                     saveHandler={onAddFolder}
                     cancelHandler={cancelHandler}
                 />
             </Modal>
+            <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}>
+                    <EventsPreview
+                        componentProps={{ events, title: props.title || "My Events", preview: true }}
+                        formChanged={formChanged}
+                        id='preview'
+                    />
+                    <Community
+                        center={centerContext}
+                        id="community" />
+                </Tabs>
+            </Modal>
         </Container>
-        )
+    )
 }
 
 const Container = styled.div`
@@ -92,10 +169,12 @@ EventsList.defaultProps = {};
 
 EventsList.propTypes = {
     notes: PropTypes.array.isRequired,
-    iconColor: PropTypes.string,
-    cardTitleFontSize: PropTypes.number,
-    cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number
+    title: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    preview: PropTypes.bool
 }
 
 export default EventsList

package/src/stories/Forms/CreateSpace/CreateSpace.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import styled from 'styled-components';
+
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+const CreateSpace = (props) => {
+
+    const initialValues = {
+        title: ''
+    }
+
+    const formSchema = Yup.object().shape({
+        title: Yup.string()
+            .required("Required"),
+    });
+
+    const sections = [
+        {
+            title: "Space Details",
+            body: [
+                (<TextField label="Title" name="title" />),
+            ],
+            hideTitle: false
+        },
+    ]
+
+    const onCreate = (values) => {
+        props.saveHandler(values)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+    return (
+        <Container>
+            <ReusableForm
+                formTitle={props.title || "Create Space"}
+                initialValues={initialValues}
+                formSchema={formSchema}
+                sections={sections}
+                saveBtnText={props.saveBtnText || 'Create'}
+                cancelBtnText={props.cancelBtnText || 'Cancel'}
+                saveHandler={onCreate}
+                cancelHandler={cancelHandler}
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                }}
+                sectionPadding={10}
+                bodyRowGap={10}
+                {...props.formStyles}
+            />
+        </Container>
+    );
+};
+
+const Container = styled.div`
+
+`
+
+CreateSpace.defaultProps = {};
+
+CreateSpace.propTypes = {
+    title: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string
+}
+
+export default CreateSpace;

package/src/stories/Library/Folders/Folders.jsx

@@ -2,13 +2,21 @@ 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 = [
@@ -26,12 +34,44 @@ const Folders = ({
     ...props
 }) => {
     const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<Folders folders={folders} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<Folders 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 onIconClicked = (action) => {
         switch (action) {
             case 'add':
                 setShowModal(true)
                 break;
+            case 'config':
+                setShowConfigModal(true)
+                break;
             default:
                 break;
         }
@@ -53,13 +93,10 @@ const Folders = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Your Folders"
+                galleryTitle={props.title || "Your Folders"}
                 data={folders}
                 type="flat"
                 cardStyle="card-style-10"
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
@@ -72,7 +109,8 @@ const Folders = ({
                 closeModal={() => setShowModal(false)}
                 exitModalButton={(e) => (
                     <div></div>
-                )}>
+                )}
+            >
                 <CreateFolder
                     saveBtnText="Create"
                     cancelBtnText="Cancel"
@@ -80,18 +118,56 @@ const Folders = ({
                     cancelHandler={cancelHandler}
                 />
             </Modal>
+            <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}>
+                    <FoldersPreview
+                        componentProps={{ folders, title: props.title || "Your Folders" }}
+                        formChanged={formChanged}
+                        id='preview'
+                    />
+                    <Community
+                        center={centerContext}
+                        id="community" />
+                </Tabs>
+            </Modal>
         </Container>
     )
 }
 
 const Container = styled.div`
-    background-color: black;
+    background-color: transparent;
 `
 
 Folders.defaultProps = {};
 
 Folders.propTypes = {
     folders: PropTypes.array,
+    title: PropTypes.string,
     folderTitle: PropTypes.string,
     columnsNumber: PropTypes.number,
     columnGap: PropTypes.number,

package/src/stories/Library/Notes/Notes.jsx

@@ -3,13 +3,18 @@ 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 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';
 
 const listControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 
 const cardControls = [
@@ -25,12 +30,44 @@ const Notes = ({
     ...props
 }) => {
     const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<Notes notes={notes} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<Notes 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) => {
         switch (action) {
             case 'add':
                 setShowModal(true)
                 break;
+            case 'config':
+                setShowConfigModal(true)
+                break;
             default:
                 break;
         }
@@ -56,7 +93,7 @@ const Notes = ({
     return (
         <Container>
             <List
-                listTitle="My Notes"
+                listTitle={props.title || "My Notes"}
                 data={notes}
                 type='flat'
                 cardStyle="card-style-11"
@@ -74,12 +111,31 @@ const Notes = ({
                     <div></div>
                 )}>
                 <CreateFolder
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"}
                     saveHandler={onAddFolder}
                     cancelHandler={cancelHandler}
                 />
             </Modal>
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={() => setShowConfigModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}
+            >
+                <Tabs
+                    title="Event Config"
+                    tabs={tabs}>
+                    <NotesPreview
+                        componentProps={{ notes, title: props.title || "Your Notes" }}
+                        formChanged={formChanged }
+                    />
+                    <Community
+                        center={centerContext}
+                        id="community" />
+                </Tabs>
+            </Modal>
         </Container>
     )
 }
@@ -95,7 +151,11 @@ Notes.propTypes = {
     iconColor: PropTypes.string,
     cardTitleFontSize: PropTypes.number,
     cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number
+    cardPadding: PropTypes.number,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object
 }
 
 export default Notes;

package/src/stories/Modals/NavbarPreviewModal/NavbarPreviewModal.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+
+import NavbarPreview from '../../PreviewComponents/NavbarPreview/NavbarPreview';
+import Button from '../../Buttons/Buttons/Buttons';
+
+const SectionedPreview = () => {
+    const [showModal, setShowModal] = useState(false);
+    return (
+        <Container>
+            <Button
+                label={'Open Configurator'}
+                size="md"
+                variant="primary"
+                buttonClicked={() => { setShowModal(true) }}
+            />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}>
+                <NavbarPreview />
+            </Modal>
+        </Container>
+    );
+};
+
+const Container = styled.div`
+
+`
+
+export default SectionedPreview;