@mohamed-karawia/library 0.1.18 → 0.1.19

package/dist/stories/store/store.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.deleteEvent = exports.addEvent = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _toolkit = require("@reduxjs/toolkit");
+
+var _communities = require("./communities");
+
+var Community = (0, _toolkit.createSlice)({
+  name: 'community',
+  initialState: _communities.community,
+  reducers: {
+    addEvent: function addEvent(state, action) {
+      state.spaces[1].spaceProps.events = [].concat((0, _toConsumableArray2.default)(state.spaces[1].spaceProps.events), [action.payload]); // console.log(action)
+      // alert
+
+      console.log(action);
+    },
+    deleteEvent: function deleteEvent(state, action) {
+      var eventsAfterDelete = (0, _toConsumableArray2.default)(state.spaces[1].spaceProps.events);
+      eventsAfterDelete.splice(action.payload, 1);
+      state.spaces[1].spaceProps.events = eventsAfterDelete;
+    }
+  }
+});
+var _Community$actions = Community.actions,
+    addEvent = _Community$actions.addEvent,
+    deleteEvent = _Community$actions.deleteEvent;
+exports.deleteEvent = deleteEvent;
+exports.addEvent = addEvent;
+var store = (0, _toolkit.configureStore)({
+  reducer: {
+    communities: Community.reducer
+  }
+});
+var _default = store;
+exports.default = _default;

package/package.json

@@ -10,7 +10,7 @@
       ]
     ]
   },
-  "version": "0.1.18",
+  "version": "0.1.19",
   "private": false,
   "dependencies": {
     "@babel/cli": "^7.16.7",
@@ -23,6 +23,7 @@
     "@editorjs/table": "^2.0.1",
     "@giphy/js-fetch-api": "^4.1.2",
     "@giphy/react-components": "^5.3.1",
+    "@reduxjs/toolkit": "^1.7.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -38,6 +39,7 @@
     "rc-slider": "^9.7.5",
     "react-async-hook": "^4.0.0",
     "react-autocomplete": "^1.8.1",
+    "react-color": "^2.19.3",
     "react-dates": "^21.8.0",
     "react-dom": "^16.14.0",
     "react-dropzone": "^11.4.0",
@@ -48,8 +50,9 @@
     "react-icons": "^4.2.0",
     "react-jinke-music-player": "^4.24.1",
     "react-mentions": "^4.3.0",
-    "react-modal": "^3.14.3",
+    "react-modal": "^3.14.4",
     "react-player": "^2.9.0",
+    "react-redux": "^7.2.6",
     "react-resize-observer": "^1.1.1",
     "react-scripts": "4.0.1",
     "react-select": "^4.3.1",

package/src/stories/Chat/Chat.jsx

@@ -1,9 +1,23 @@
-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 List from '../Reusable Components/ReusableList/ReusableList';
 import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
+import ChatPreview from '../PreviewComponents/ChatPreview/ChatPreview';
+import Modal from '../Reusable Components/ReactModal/ReactModal';
+import Community from '../Reusable Components/Community/Community';
+
+
+import Tabs from '../Reusable Components/Tabs/Tabs';
+import Sections from '../Sections/Sections'
+
+
+const listControls = [
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
+]
 
 const Chat = ({
     data,
@@ -12,26 +26,109 @@ const Chat = ({
     backgroundColor,
     ...props }) => {
 
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<Chat users={users} data={data}/>)
+
+    const formChanged = (values) => {
+        console.log('context changed')
+        setCenterContext(<Chat users={users} data={data} {...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}>
+        <Container
+            backgroundColor={backgroundColor}>
             <List
                 listTitle={title || 'Chat'}
                 type="flat"
                 data={data}
                 cardStyle="card-style-8"
+                iconClicked={onIconClicked}
+                listControls={listControls}
                 {...props}
             />
             <RichTextInput
                 users={users}
             />
+            <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="Chat Config"
+                        tabs={tabs}
+                        id='styling'
+                    >
+                        <ChatPreview
+                            componentProps={{ data, users, title: props.title || "Chat", preview: true }}
+                            formChanged={formChanged}
+                            id="preview"
+                        />
+                        <Community
+                            center={centerContext}
+                            id="community" />
+                    </Tabs>
+                </Sections>
+            </Modal>
         </Container>
     )
 }
 
 const Container = styled.div`
     width: 100%;
-    background-color: ${({backgroundColor}) => backgroundColor || 'transparent'};
+    background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
 `
 
 Chat.defaultProps = {
@@ -41,9 +138,11 @@ Chat.defaultProps = {
 Chat.propTypes = {
     data: PropTypes.array.isRequired,
     title: PropTypes.string,
+    users: PropTypes.array,
     backgroundColor: PropTypes.string,
     customCardStyles: PropTypes.object,
-    headerStyles: PropTypes.object
+    headerStyles: PropTypes.object,
+    preview: PropTypes.bool
 }
 
 export default Chat

package/src/stories/Common Inputs/Picker/Picker.jsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useField } from 'formik';
+
+import { ChromePicker } from 'react-color';
+
+
+
+const Picker = (props) => {
+  const [field, meta, helpers] = useField(props);
+
+  {
+    return (
+      <Container>
+        <Label htmlFor={props.name} {...props}>{props.label}</Label>
+      <ChromePicker
+        name={props.name}
+        color={field.value}
+        onChange={(color) => helpers.setValue(color.hex)}
+        onChangeComplete={(color) => helpers.setValue(color.hex)}
+      />
+      </Container>
+    );
+  }
+};
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+`
+
+const Label = styled.label`
+    margin-bottom: 5px;
+    text-transform: capitalize;
+    color: ${props => props.labelColor};
+    font-size: ${props => props.labelFontSize}px;
+`
+
+Picker.defaultProps = {};
+
+Picker.propTypes = {
+  name: PropTypes.string
+}
+
+export default Picker;

package/src/stories/Common Inputs/TextField/TextField.jsx

@@ -10,7 +10,7 @@ const TextField = (props) => {
     return (
         <TextFieldWrapper>
             <Label htmlFor={field.name} {...props}>{props.label}</Label>
-            <Input {...field} {...props} />
+            <Input type={props.type || 'text'} {...field} {...props} />
             {(meta.error && meta.touched) && <Error>{meta.error}</Error>}
         </TextFieldWrapper>
     )

package/src/stories/Community/Community.jsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import { useDispatch, useSelector } from 'react-redux';
+import { addEvent, deleteEvent } from '../store/store';
+
+import Navbar from '../Navbar/Navbar'
+import Body from '../Layout/Body/Body'
+import Left from '../Layout/Left/Left'
+import Center from '../Layout/Center/Center'
+import Right from '../Layout/Right/Right'
+import BaseMaterial from '../Containers/BaseMaterial';
+import WidgetContainer from "../Reusable Components/WidgetContainer/WidgetContainer";
+
+import Chat from '../Chat/Chat';
+import Event from '../Events/Event/Event';
+import EventsList from '../Events/EventsList/EventsList';
+import Folders from '../Library/Folders/Folders';
+import Notes from '../Library/Notes/Notes';
+import MusicAlbum from '../Music Album/ViewAlbum/ViewAlbum';
+import MusicAlbums from '../Music Album/ViewAlbums/ViewAlbums';
+import PhotoAlbum from '../Photo Album/ViewAlbum/ViewAlbum';
+import PhotoAlbums from '../Photo Album/ViewAlbums/ViewAlbums';
+import VideoAlbums from '../VideoAlbum/AlbumsGallery/AlbumsGallery';
+import VideoAlbum from '../VideoAlbum/ViewAlbum/ViewAlbum';
+import VideoSpace from '../VideoAlbum/VideoSpace/VideoSpace';
+
+const Community = (props) => {
+    const [spaceType, setSpaceType] = useState('chat');
+    const community = useSelector(state => state.communities)
+    const space = useSelector(state => {
+        return state.communities.spaces.find(x => x.spaceType === spaceType)
+    })
+    const spacesWidget = useSelector(state => state.communities.spacesListWidget.widgetSpacesList)
+    const dispatch = useDispatch();
+
+    const onAddEvent = (event) => {
+        dispatch(addEvent(event))
+    }
+
+    console.log(space)
+
+    const eventIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                dispatch(deleteEvent(index))
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    const switchSpace = (index, props) => {
+        setSpaceType(props.id)
+    }
+
+
+    return (
+        <BaseMaterial {...community.styles}>
+            <Navbar {...community.navbarStyles} />
+            <Body>
+                <Left>
+                    <WidgetContainer
+                        widgetType='spaces-list'
+                        widgetProps={{
+                            listTitle: spacesWidget.listTitle,
+                            spaces: spacesWidget.spaces,
+                            cardClicked: switchSpace,
+                            headerStyles: spacesWidget.styles.header,
+                            ...spacesWidget.styles.body
+                        }}
+                    />
+                </Left>
+                <Center>
+                    {
+                        {
+                            'chat': <Chat {...space.spaceProps} {...space.styles} />,
+                            'event': <Event {...space.spaceProps} {...space.styles} />,
+                            'events_list': <EventsList cardIconClicked={eventIconClicked} onAddEvent={onAddEvent}  {...space.spaceProps} {...space.styles} />,
+                            'folders': <Folders {...space.spaceProps} {...space.styles} />,
+                            'notes': <Notes {...space.spaceProps} {...space.styles} />,
+                            'music_album': <MusicAlbum {...space.spaceProps} {...space.styles} />,
+                            'music_albums': <MusicAlbums {...space.spaceProps} {...space.styles} />,
+                            'photo_album': <PhotoAlbum {...space.spaceProps} {...space.styles}/>,
+                            'photo_albums': <PhotoAlbums {...space.spaceProps} {...space.styles}/>,
+                            'video_albums': <VideoAlbums {...space.spaceProps} {...space.styles}/>,
+                            'video_album': <VideoAlbum  {...space.spaceProps} {...space.styles}/>,
+                            'video_space': <VideoSpace {...space.spaceProps} {...space.styles}/>
+
+                        }[spaceType]
+                    }
+                </Center>
+                <Right>{
+                    space.widgets && space.widgets.map(widget => (
+                        <WidgetContainer
+                        widgetType={widget.widgetType}
+                        widgetProps={{
+                            ...widget.widgetProps,
+                            ...widget.styles
+                        }}
+                    />
+                    ))
+                }</Right>
+            </Body>
+        </BaseMaterial>
+    );
+};
+
+
+export default Community;

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>
     )
 }
@@ -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 = () => {
@@ -80,6 +120,43 @@ const EventsList = ({
                     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>
     )
 }
@@ -93,14 +170,11 @@ EventsList.defaultProps = {};
 EventsList.propTypes = {
     notes: PropTypes.array.isRequired,
     title: PropTypes.string,
-    iconColor: PropTypes.string,
-    cardTitleFontSize: PropTypes.number,
-    cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number,
     headerStyles: PropTypes.object,
     customCardStyles: PropTypes.object,
     saveBtnText: PropTypes.string,
     cancelBtnText: PropTypes.string,
+    preview: PropTypes.bool
 }
 
 export default EventsList