npm - @mohamed-karawia/library - Versions diffs - 0.1.18 → 0.1.22 - Mend

@mohamed-karawia/library 0.1.18 → 0.1.22

Files changed (113) hide show

package/src/stories/Reusable Components/Cards/globalCardStyles.js CHANGED Viewed

@@ -24,7 +24,7 @@ export const globalContent = styled.div`
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: ${props => props.contentGap}px;
+    gap: ${props => props.contentGap || 10}px;
 `
 export const Title = styled.h3`
@@ -32,6 +32,7 @@ export const Title = styled.h3`
     color: ${props => props.cardTitleColor || 'black'};
     font-size: ${props => props.cardTitleFontSize}px;
     font-weight: ${props => props.cardTitleFontWeight || 300};
+    cursor: pointer;
 `
 export const Description = styled.h5`

package/src/stories/Reusable Components/Community/Community.jsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from 'styled-components'
+// import Head from '../../Layout/Head/Head'
+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 WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
+import BaseMaterial from '../../Containers/BaseMaterial'
+// import styles from '../../styling.json'
+const Community = ({
+  context,
+  community,
+  ...props
+}) => {
+  const spacesWidget = community.spacesListWidget.widgetSpacesList
+  return (
+    <BaseMaterial {...community.styles}>
+      <Navbar {...community.navbarStyles} />
+      <Body>
+        <Left>
+          <WidgetContainer
+            widgetType='spaces-list'
+            widgetProps={{
+              listTitle: spacesWidget.listTitle,
+              spaces: spacesWidget.spaces,
+              cardClicked: () => null,
+              ...spacesWidget.styles
+            }}
+          />
+        </Left>
+        <Center>{props.center}</Center>
+        <Right>{props.right}</Right>
+      </Body>
+    </BaseMaterial>
+  );
+};
+export default Community;

package/src/stories/Reusable Components/Gallery/Gallery.jsx CHANGED Viewed

@@ -11,15 +11,21 @@ const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null,
     let child;
     const iconCliked = (action) => {
-        props.iconClicked(action)
+        if (!props.preview) {
+            props.iconClicked(action)
+        }
     }
     const clicked = (index, cardProps) => {
+        if (!props.preview) {
         props.cardClicked(index, cardProps)
+        }
     }
     const cardIconClicked = (action, index) => {
+        if (!props.preview) {
         props.cardIconClicked(action, index)
+        }
     }
     const mapOverCardsData = (data) => {
@@ -69,8 +75,7 @@ const GalleryBody = styled.div`
     display: ${({ type }) => type === 'flat' ? 'grid' : 'flex'};
     flex-direction: column;
     grid-template-columns: ${props => 'repeat(' + props.columnsNumber + ', 1fr)'};
-    grid-auto-rows: ${props => props.rowsHeight || 400}px;
-    /* grid-auto-rows: ${props => props.rowsHeight + 'px' || 'minmax(min-content, 400px)'}; */
+    grid-auto-rows: ${props => props.rowsHeight ? `${props.rowsHeight}px` : '1fr'};
     column-gap: ${props => props.galleryColumnGap}px;
     row-gap: ${props => props.galleryRowGap}px;
 `
@@ -83,12 +88,8 @@ const Section = styled.div`
     row-gap: ${props => props.galleryRowGap}px;
 `
-const SectionBody = styled.div`
-    padding: ${props => props.galleryBodyPadding}px;
+const SectionBody = styled(GalleryBody)`
     display: grid;
-    grid-template-columns: ${props => 'repeat(' + props.columnsNumber + ', 1fr)'};
-    column-gap: ${props => props.galleryColumnGap}px;
-    row-gap: ${props => props.galleryRowGap}px;
 `
 Gallery.defaultProps = {
@@ -108,7 +109,7 @@ Gallery.propTypes = {
     galleryColumnGap: PropTypes.number,
     galleryRowGap: PropTypes.number,
     rowsHeight: PropTypes.number
 };
 export default Gallery

package/src/stories/Reusable Components/ReactModal/ReactModal.jsx CHANGED Viewed

@@ -17,42 +17,22 @@ const ReactModalComponent = ({
   closeModal,
   children,
   exitModalButton,
-  onOverlayCloseClick
+  shouldCloseOnOverlayClick
 }) => {
   return (
-    <ModalContainer
+    <Modal
       isOpen={modalIsOpen}
       onRequestClose={closeModal}
-      ariaHideApp={false}
-      contentLabel={title}
-      shouldCloseOnOverlayClick={onOverlayCloseClick === 'true'}
-      borderColor={borderColor}
-      boxShadow={boxShadow}
-      backgroundColor={backgroundColor}
-      padding={padding}
-      height={height}
-      width={width}
-      color={color}
-      borderRadius={borderRadius}
     >
       {children}
-      {exitModalButton(closeModal)}
-    </ModalContainer>
+    </Modal>
   );
 };
 const ModalContainer = styled(Modal)`
-  position: absolute;
-  top: 45%;
-  left: 50%;
-  right: auto;
-  bottom: auto;
-  transform: translate(-50%, -50%);
   background-color: ${({backgroundColor}) => backgroundColor};
   border-radius: ${({borderRadius}) => borderRadius}px;
   box-shadow: ${({boxShadow}) => boxShadow};
-  height: ${({height}) => height};
-  width: ${({width}) => width};
   color: ${({color}) => color};
   border-color: ${({borderColor}) => borderColor};
   padding: ${({padding}) => padding}px;
@@ -69,8 +49,6 @@ ReactModalComponent.propTypes = {
 ReactModalComponent.defaultProps = {
   title: "",
-  height: "80vh",
-  width: "50vw",
 };
 export default ReactModalComponent;

package/src/stories/Reusable Components/ReusableForm/ReusableForm.jsx CHANGED Viewed

@@ -1,13 +1,24 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Formik, Form } from 'formik';
+import { useFormikContext, Formik, Form } from 'formik';
 import ReusableHeader from '../ReusableHeader/ReusableHeader';
 import Buttons from '../../Buttons/Buttons/Buttons';
 const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
+    const AutoSubmitToken = () => {
+        const { values, submitForm } = useFormikContext();
+        useEffect(() => {
+            if (props.handleChange) {
+                props.handleChange(values)
+            }
+        }, [values, submitForm]);
+        return null;
+    };
     const submitHandler = (values) => {
         props.saveHandler(values)
     }
@@ -18,9 +29,9 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
     return (
         <Formik
-        initialValues={initialValues}
-        validationSchema={props.formSchema}
-        onSubmit={values => submitHandler(values)}
+            initialValues={initialValues}
+            validationSchema={props.formSchema}
+            onSubmit={values => submitHandler(values)}
         >
             <CreateForm {...props}>
                 <ReusableHeader title={formTitle} {...props.headerStyles} />
@@ -51,7 +62,7 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
                             size="md"
                             variant="primary"
                             type="submit"
-                            buttonClicked={() => {}}
+                            buttonClicked={() => { }}
                         />
                         {
                             props.cancelBtnText &&
@@ -63,6 +74,7 @@ const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
                                 buttonClicked={handleCancel} />
                         }
                     </FormFooter>}
+                <AutoSubmitToken />
             </CreateForm>
         </Formik>
     )

package/src/stories/Reusable Components/ReusableList/ReusableList.jsx CHANGED Viewed

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { getCardStyle } from '../../helpers/util';
-import CardStyle3 from '../Cards/Card-style-3/CardStyle3';
 import ReusableHeader from '../ReusableHeader/ReusableHeader';
 const ReusableList = ({
@@ -20,15 +19,21 @@ const ReusableList = ({
     let child;
     const iconCliked = (action) => {
-        props.iconClicked(action)
+        if (props.iconClicked) {
+            props.iconClicked(action)
+        }
     }
     const clicked = (index, cardProps) => {
-        props.cardClicked(index, cardProps)
+        if (props.cardClicked) {
+            props.cardClicked(index, cardProps)
+        }
     }
     const cardIconClicked = (action, index) => {
-        props.cardIconClicked(action, index)
+        if (props.cardIconClicked) {
+            props.cardIconClicked(action, index)
+        }
     }
     const mapOverCardsData = (data) => {

package/src/stories/Reusable Components/Tabs/Tabs.jsx ADDED Viewed

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+import { useState } from 'react';
+const Tabs = ({ title, tabs, ...props }) => {
+    const [child, setChild] = useState(props.children[0])
+    const tabClicked = (tab) => {
+        let renderedComponent = props.children.find(child => child.props.id === tab.id)
+        setChild(renderedComponent)
+    }
+    return (
+        <Container>
+            <ReusableHeader
+                title={title}
+                {...props.headerStyles} />
+            <TabsContainer>
+                <Menu>
+                    {tabs.map(tab => <Tab onClick={() => tabClicked(tab)}>{tab.title}</Tab>)}
+                </Menu>
+                {child}
+            </TabsContainer>
+        </Container>
+    );
+};
+const Container = styled.div`
+    font-family: sans-serif;
+`
+const TabsContainer = styled.div`
+`
+const Menu = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    background-color: white;
+`
+const Tab = styled.div`
+    padding: 5px 8px;
+    cursor: pointer;
+    background-color: white;
+    border: 1px solid gray;
+    color: #414141;
+    transition: all .3s;
+    &:hover {
+        background-color: #414141;
+        color: white;
+    }
+`
+Tabs.defaultProps = {};
+Tabs.propTypes = {
+    title: PropTypes.string,
+    tabs: PropTypes.array,
+    headerStyles: PropTypes.object
+}
+export default Tabs;

package/src/stories/Sections/Sections.jsx CHANGED Viewed

@@ -7,10 +7,13 @@ import ReusableList from '../Reusable Components/ReusableList/ReusableList';
 const Sections = ({sections, ...props}) => {
-    const [center, setCenter] = useState(sections[0].data[0].component)
+    const [center, setCenter] = useState(props.children[0] || props.children)
+    console.log('renders')
     const cardClicked = (index, cardProps) => {
-        setCenter(cardProps.component)
+        let child = props.children.find(child => child.props.id === cardProps.id)
+        setCenter(child)
+        console.log(child)
     }
     return (

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx CHANGED Viewed

@@ -5,8 +5,14 @@ import styled from 'styled-components';
 import Gallery from '../../Reusable Components/Gallery/Gallery';
 import Modal from '../../Reusable Components/ReactModal/ReactModal';
 import CreateVideoAlbum from '../../Forms/CreateVideoAlbum/CreateVideoAlbum';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Sections from '../../Sections/Sections'
+import VideoAlbumsPreview from '../../PreviewComponents/VideoAlbumsPreview/VideoAlbumsPreview';
+import Community from '../../Reusable Components/Community/Community';
 import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
 const cardControls = [
     { icon: (<AiFillDelete />), action: 'delete', name: 'Delete album' },
@@ -14,6 +20,7 @@ const cardControls = [
 const galleryControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 const AlbumsGallery = ({
@@ -23,8 +30,25 @@ const AlbumsGallery = ({
     cardTitleFontSize,
     countColor,
     countFontSize,
+    community,
     ...props }) => {
-    const [showModal, setShowModal] = useState(false)
+    const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<AlbumsGallery preview={true} videoAlbums={videoAlbums} />)
+    const formChanged = (values) => {
+        setCenterContext(<AlbumsGallery preview={true} videoAlbums={videoAlbums} {...values} />)
+    }
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
     const cardStyles = {
         cardBackgroundColor,
@@ -51,12 +75,17 @@ const AlbumsGallery = ({
     }
     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;
+            }
         }
     }
@@ -73,6 +102,11 @@ const AlbumsGallery = ({
         setShowModal(false)
     }
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
     return (
         <Container>
             <Gallery
@@ -81,14 +115,6 @@ const AlbumsGallery = ({
                 type="flat"
                 cardStyle="card-style-6"
                 columnsNumber={3}
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: '#FE1744',
-                    titleColor: '#ffff',
-                    controlsStyles: {
-                        iconSize: 25
-                    }
-                }}
                 iconClicked={onIconClicked}
                 galleryColumnGap={10}
                 galleryRowGap={20}
@@ -97,6 +123,7 @@ const AlbumsGallery = ({
                 cardClicked={() => null}
                 cardIconClicked={cardIconClicked}
                 customCardStyles={cardStyles}
+                {...props}
             />
             <Modal
                 modalIsOpen={showModal}
@@ -108,7 +135,28 @@ const AlbumsGallery = ({
                     saveHandler={onAddAlbum}
                     cancelHandler={cancelHandler} />
             </Modal>
-        </Container>
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={cancelConfig}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <Tabs
+                    title="Video Gallery Config"
+                    tabs={tabs}
+                    id='styling'
+                >
+                    <VideoAlbumsPreview
+                    componentProps={{ videoAlbums, preview: true }}
+                    formChanged={formChanged}
+                    id="preview" />
+                    <Community
+                        center={centerContext}
+                        community={community}
+                        id="community" />
+                </Tabs>
+            </Modal>
+        </Container >
     )
 }

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx CHANGED Viewed

@@ -1,10 +1,23 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import Modal from '../../Reusable Components/ReactModal/ReactModal'
 import VideoPlayer from '../VideoPlayer/VideoPlayer';
 import Comments from '../Comments/Comments';
 import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
+import ReusableHeader from '../../Reusable Components/ReusableHeader/ReusableHeader';
+import { BsGear } from "react-icons/bs";
+import VideoPreview from '../../PreviewComponents/VideoPreview/VideoPreview';
+import Community from '../../Reusable Components/Community/Community';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+const controls = [
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
+]
 const VideoSpace = ({
     videoSrc,
@@ -25,10 +38,50 @@ const VideoSpace = ({
     commentBackgroundColor,
     commentTitleColor,
     commentTitleFontSize,
+    community,
     ...props }) => {
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<VideoSpace users={users} preview={true} videoSrc={videoSrc} comments={comments} />)
+    const formChanged = (values) => {
+        setCenterContext(<VideoSpace users={users} preview={true} videoSrc={videoSrc} comments={comments} {...values} />)
+    }
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+    const iconClicked = (action) => {
+        if (!props.preview) {
+            switch (action) {
+                case 'config':
+                    setShowConfigModal(true)
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    const cancelConfig = () => {
+        setShowConfigModal(false);
+        localStorage.removeItem('formStyles')
+    }
     return (
         <Container backgroundColor={backgroundColor}>
+            <ReusableHeader
+                title={title || 'Video Space'}
+                controls={controls}
+                iconClicked={iconClicked}
+                {...props.headerStyles}
+            />
             <VideoPlayer
                 iconsColor={iconsColor}
                 src={videoSrc} />
@@ -47,6 +100,29 @@ const VideoSpace = ({
             <RichTextInput
                 users={users}
             />
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={cancelConfig}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}
+            >
+                <Tabs
+                    title="Video Space Config"
+                    tabs={tabs}
+                    id='styling'
+                >
+                    <VideoPreview
+                        componentProps={{ title, discription, comments, date, preview: true }}
+                        formChanged={formChanged}
+                        id="preview" />
+                    <Community
+                        center={centerContext}
+                        community={community}
+                        id="community" />
+                </Tabs>
+            </Modal>
         </Container>
     )
 }