@mohamed-karawia/library 0.1.16 → 0.1.20

package/src/stories/Pages/Music/MusicAlbum/Music.jsx

@@ -26,12 +26,12 @@ import img6 from '../../../assets/images/music6.jpg';
 const Music = (props) => {
   const [currentSong, setCurrentSong] = useState(0)
   const [album, setAlbum] = useState([
-    { index: 0, cover: img4, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
+    { index: 0, cover: img4, musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
     { index: 2, cover: img6, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Still Loving You', description: 'Scorpions', time: '4:20' },
-    { index: 1, cover: img5, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Night', description: 'Frank Ocean', time: '5:20' },
+    { index: 1, cover: img5, musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', title: 'Night', description: 'Frank Ocean', time: '5:20' },
     { index: 3, cover: img1, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Somebody Else', description: '1975', time: '5:20' },
-    { index: 4, cover: img3, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
-    { index: 5, cover: img2, musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
+    { index: 4, cover: img3, musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
+    { index: 5, cover: img2, musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
   ])
 
   const nextSong = () => {
@@ -133,8 +133,9 @@ const Music = (props) => {
                 }
               }}
               customCardStyles={{
+                cardBackgroundColor: 'white',
                 controlsStyles: {
-                  iconColor: 'blue'
+                  iconColor: 'black'
                 }
               }}
             />
@@ -155,7 +156,8 @@ const Music = (props) => {
               prevSong: prevSong,
               currentSong: currentSong,
               borderRadius: '10',
-              primaryColor: 'black'
+              primaryColor: 'black',
+              backgroundColor: 'white'
             }}
             headerStyles={{
               controlsStyles: {

package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx

@@ -99,9 +99,6 @@ const MusicAlbums = (props) => {
                                 cardBackgroundColor: 'black',
                                 cardTitleColor: 'white',
                                 onHoverBackgroundColor: '#F6891F',
-                                controlsStyles: {
-                                    showOnHover: true,
-                                }
                             },
                         }}
                     />
@@ -127,16 +124,6 @@ const MusicAlbums = (props) => {
                             }}
                             customCardStyles={{
                                 darkOnHover: true,
-                                controlsStyles: {
-                                    showOnHover: true,
-                                    position: 'center',
-                                    dropdownFontColor: "white",
-                                    iconBorderRadius: 100,
-                                    iconSize: 40,
-                                    iconsGap: 10,
-                                    iconColor: 'white',
-                                    containerPadding: 20,
-                                }
                             }}
                             cardClicked={cardClicked}
                         />

package/src/stories/Pages/Photos/Albums/Albums.jsx

@@ -122,6 +122,9 @@ const Albums = (props) => {
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
                             cardClicked={cardClicked}
+                            customCardStyles={{
+                                cardBackgroundColor: 'white'
+                            }}
                         />
                     </SpaceContainer>
 

package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx

@@ -6,10 +6,19 @@ import AddPhoto from '../../Forms/AddPhoto/AddPhoto'
 import Gallery from '../../Reusable Components/Gallery/Gallery';
 import Modal from '../../Reusable Components/ReactModal/ReactModal';
 import DetailedPhoto from '../DetailedPhoto/DetailedPhoto';
+import PhotoAlbumPreview from '../../PreviewComponents/PhotoAlbumPreview/PhotoAlbumPreview';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Sections from '../../Sections/Sections';
+import Community from '../../Reusable Components/Community/Community';
+
+
 import { AiOutlineArrowLeft, AiOutlineArrowRight, AiOutlineClose, AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import { BsGear } from "react-icons/bs";
+
 
 const galleryControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 
 const cardControls = [
@@ -20,9 +29,6 @@ const ViewAlbum = ({
     album,
     cardBackgroundColor,
     imgTitleColor,
-    columnsNumber,
-    columnGap,
-    rowGap,
     descColor,
     ...props
 }) => {
@@ -49,10 +55,27 @@ const ViewAlbum = ({
         }
     }
 
-    const [showModal, setShowModal] = useState(false)
-    const [showImgModal, setShowImgModal] = useState(false)
+    const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [showImgModal, setShowImgModal] = useState(false);
     const [openedImgIndex, setOpenedImgIndex] = useState(null);
-    const [openedImg, setOpenedImg] = useState(null)
+    const [openedImg, setOpenedImg] = useState(null);
+
+    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbum album={album} {...values} />)
+    }
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
 
     const handleUserKeyPress = useCallback(event => {
         const { key } = event;
@@ -73,13 +96,18 @@ const ViewAlbum = ({
             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 onAddPhoto = (photo) => {
@@ -111,13 +139,10 @@ const ViewAlbum = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Photo Album"
+                galleryTitle={props.title || "Photo Album"}
                 data={album}
                 type="flat"
                 cardStyle="card-style-6"
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
@@ -135,8 +160,8 @@ const ViewAlbum = ({
                 <AddPhoto
                     saveHandler={onAddPhoto}
                     cancelHandler={cancelHandler}
-                    saveBtnText={'Add'}
-                    cancelBtnText={'Cancel'} />
+                    saveBtnText={props.saveBtnText || 'Add'}
+                    cancelBtnText={props.saveBtnText || 'Cancel'} />
             </Modal>
             <Modal
                 modalIsOpen={showImgModal}
@@ -160,6 +185,27 @@ const ViewAlbum = ({
                     <AiOutlineArrowRight />
                 </RightIconContainer>
             </Modal>
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={() => setShowConfigModal(false)}
+                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}
+                    />
+                    <Community
+                        center={centerContext}
+                        id="community" />
+                </Tabs>
+            </Modal>
         </Container>
     )
 }
@@ -237,6 +283,10 @@ ViewAlbum.propTypes = {
     cardBackgroundColor: PropTypes.string,
     imgTitleColor: PropTypes.string,
     descColor: PropTypes.string,
+    title: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    preview: PropTypes.bool
 }
 
 export default ViewAlbum;

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -5,8 +5,13 @@ import PropTypes from 'prop-types';
 import CreateAlbum from '../../Forms/CreateAlbum/CreateAlbum'
 import Gallery from '../../Reusable Components/Gallery/Gallery';
 import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import PhotoAlbumsPreview from '../../PreviewComponents/PhotoAlbumsPreview/PhotoAlbumsPreview';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Sections from '../../Sections/Sections';
+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,29 +19,51 @@ const cardControls = [
 
 const galleryControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 
 const ViewAlbums = ({
     albums,
-    columnsNumber,
-    columnGap,
-    rowGap,
     ...props }) => {
 
-    const [showModal, setShowModal] = useState(false)
+    const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<ViewAlbums albums={albums} />)
+
+    const formChanged = (values) => {
+        setCenterContext(<ViewAlbums albums={albums} {...values} />)
+    }
+
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+
 
     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 onAddAlbum = (album) => {
@@ -51,13 +78,10 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Photo Albums"
+                galleryTitle={props.title || "Photo Albums"}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardControls={cardControls}
@@ -74,6 +98,28 @@ const ViewAlbums = ({
                     saveHandler={onAddAlbum}
                     cancelHandler={cancelHandler} />
             </Modal>
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={() => setShowConfigModal(false)}
+                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}
+                        id="community" />
+                </Tabs>
+            </Modal>
         </Container>
     )
 }
@@ -82,30 +128,17 @@ const Container = styled.div`
     width: 100%;
 `
 
-ViewAlbums.defaultProps = {
-    columnsNumber: 3,
-    headerBackground: '#FE1744',
-    titleColor: 'white',
-    cardBackgroundColor: 'white',
-    columnGap: 10,
-    rowGap: 20
-};
+ViewAlbums.defaultProps = {};
 
 ViewAlbums.propTypes = {
     albums: PropTypes.array,
     cardIconClicked: PropTypes.func,
     onDeleteAlbum: PropTypes.func,
     onAddAlbum: PropTypes.func,
-    columnsNumber: PropTypes.number,
-    headerBackground: PropTypes.string,
-    titleColor: PropTypes.string,
-    cardBackgroundColor: PropTypes.string,
-    columnGap: PropTypes.number,
-    rowGap: PropTypes.number,
-    countColor: PropTypes.string,
-    countFontSize: PropTypes.number,
-    cardTitleColor: PropTypes.string,
-    cardTitleFontSize: PropTypes.number,
+    title: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object,
+    preview: PropTypes.bool
 }
 
 export default ViewAlbums

package/src/stories/Preview/Preview.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { getComponentType } from '../helpers/util';
+
+const Preview = ({
+    type,
+    componentProps,
+    stylingProps,
+    ...props
+}) => {
+
+    const child = getComponentType(type, componentProps, stylingProps);
+
+    return (
+        <Container>
+            {child}
+        </Container>
+    )
+};
+
+const Container = styled.div`
+    width: 100%;
+`
+
+Preview.defaultProps = {};
+
+Preview.propTypes = {
+    type: PropTypes.string,
+    componentProps: PropTypes.object,
+    stylingProps: PropTypes.object
+}
+
+export default Preview;

package/src/stories/PreviewComponents/ChatPreview/ChatPreview.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Preview from '../../Preview/Preview';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+
+import { Container, Left, Right } from '../globalStyles';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+
+const ChatPreview = (props) => {
+    const [chatStyles, setChatStyles] = useState({});
+    const initialValues = {
+        headerStyles: {
+          headerBackground: '',
+          padding: 0,
+          titleColor: '',
+          titleFontSize: '',
+          titleFontWeight: '',
+          controlsStyles: {
+            iconSize: '',
+            iconColor: ''
+          }
+        },
+        customCardStyles: {
+          cardBackgroundColor: '',
+          onHoverBackgroundColor: '',
+          cardRadius: '',
+          cardTitleFontSize: '',
+          cardTitleFontWeight: '',
+          cardTitleColor: '',
+          cardImageRadius: '',
+          cardDescriptionFontSize: '',
+          cardDescriptionColor: '',
+          cardPadding: 0,
+          imgSize: 0,
+          cardBorderSize: 0,
+          cardBorderColor: 'purple',
+          dateColor: ''
+        }
+      }
+
+      const sections = [
+        {
+          title: "Header Styles",
+          body: [
+            (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+            (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+            (<Picker label="Title Color" name="headerStyles.titleColor" />),
+            (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+            (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />),
+            (<TextField type="number" label="Controls Size" name="headerStyles.controlsStyles.iconSize" />),
+            (<Picker label="Controls Color" name="headerStyles.controlsStyles.iconColor" />),
+          ]
+        },
+        {
+          title: "Card Styles",
+          body: [
+            (<Picker label="Card Background" name="customCardStyles.cardBackgroundColor" />),
+            (<Picker label="Hover Color" name="customCardStyles.onHoverBackgroundColor" />),
+            (<TextField type="number" label="Card Radius" name="customCardStyles.cardRadius" />),
+            (<TextField type="number" label="Title Font Size" name="customCardStyles.cardTitleFontSize" />),
+            (<TextField type="number" label="Title Font Weight" name="customCardStyles.cardTitleFontWeight" />),
+            (<Picker label="Title Color" name="customCardStyles.cardTitleColor" />),
+            (<TextField type="number" label="Card Image Radius" name="customCardStyles.cardImageRadius" />),
+            (<TextField type="number" label="Text Font Size" name="customCardStyles.cardDescriptionFontSize" />),
+            (<Picker label="Text Font Color" name="customCardStyles.cardDescriptionColor" />),
+            (<TextField type="number" label="Card Padding" name="customCardStyles.cardPadding" />),
+            (<TextField type="number" label="Image Size" name="customCardStyles.imgSize" />),
+            (<TextField type="number" label="Border Size" name="customCardStyles.cardBorderSize" />),
+            (<Picker label="Border Color" name="customCardStyles.cardBorderColor" />),
+            (<Picker label="Date Color" name="customCardStyles.dateColor" />),
+          ]
+        },
+      ]
+
+      const handleChange = (values) => {
+        if(values){
+          props.formChanged(values)
+          setChatStyles(values)
+          localStorage.setItem('formStyles', JSON.stringify(values))
+      }
+      }
+    
+      const submitHandler = (values) => {
+        console.log(values);
+      }
+    
+      const cancelHandler = () => {
+        console.log('Canceled')
+      }
+  return (
+    <Container>
+    <Left>
+      <ReusableForm
+        formTitle="Chat Styles"
+        initialValues={initialValues}
+        sections={sections}
+        headerStyles={{
+          padding: 10,
+          headerBackground: 'black',
+          titleColor: '#ffff',
+        }}
+        sectionHeaderStyles={{
+          padding: 6,
+          headerBackground: '#FE1744',
+          titleColor: '#ffff',
+        }}
+        bodyPadding={10}
+        saveBtnText="Save"
+        cancelBtnText="Cancel"
+        saveBtnHandle={submitHandler}
+        cancelHandler={cancelHandler}
+        handleChange={handleChange}
+        bodyRowGap={20}
+        bodyColumnGap={10}
+      />
+    </Left>
+    <Right>
+      <Preview type={'Chat'} componentProps={props.componentProps} stylingProps={chatStyles} />
+    </Right>
+  </Container>
+  );
+};
+
+ChatPreview.defaultProps = {};
+
+ChatPreview.propTypes = {
+  componentProps: PropTypes.object
+}
+
+export default ChatPreview;

package/src/stories/PreviewComponents/EventPreview/EventPreview.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Preview from '../../Preview/Preview';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+
+import { Container, Left, Right } from '../globalStyles';
+import Picker from '../../Common Inputs/Picker/Picker';
+import TextField from '../../Common Inputs/TextField/TextField';
+
+const EventPreview = (props) => {
+    const [eventStyles, setEventStyles] = useState({});
+    const initialValues = {
+        headerStyles: {
+            headerBackground: '',
+            padding: 0,
+            titleColor: '',
+            titleFontSize: '',
+            titleFontWeight: '',
+            controlsStyles: {
+                iconSize: '',
+                iconColor: ''
+            }
+        },
+        backgroundColor: '',
+        titleColor: '',
+        titleSize: '',
+        dateColor: '',
+        dateSize: '',
+        discColor: '',
+        discSize: '',
+    }
+
+    const sections = [
+        {
+            title: "Header Styles",
+            body: [
+                (<Picker label="Header Background" name="headerStyles.headerBackground" />),
+                (<TextField type="number" label="Padding" name="headerStyles.padding" />),
+                (<Picker label="Title Color" name="headerStyles.titleColor" />),
+                (<TextField type="number" label="Title Font Size" name="headerStyles.titleFontSize" />),
+                (<TextField type="number" label="Title Font Weight" name="headerStyles.titleFontWeight" />),
+                (<TextField type="number" label="Controls Size" name="headerStyles.controlsStyles.iconSize" />),
+                (<Picker label="Controls Color" name="headerStyles.controlsStyles.iconColor" />),
+            ]
+        },
+        {
+            title: "Event Styles",
+            body: [
+                (<Picker label="Background Color" name="backgroundColor" />),
+                (<Picker label="Title Color" name="titleColor" />),
+                (<TextField type="number" label="Title Size" name="titleSize" />),
+                (<Picker label="Date Color" name="dateColor" />),
+                (<TextField type="number" label="Date Size" name="dateSize" />),
+                (<Picker label="Discription Color" name="discColor" />),
+                (<TextField type="number" label="Discription Size" name="discSize" />),
+            ]
+        },
+    ]
+
+    const handleChange = (values) => {
+        if(values){
+            props.formChanged(values)
+            setEventStyles(values)
+            localStorage.setItem('formStyles', JSON.stringify(values))
+        }
+    }
+
+    const submitHandler = (values) => {
+        console.log(values);
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+
+    return (
+        <Container>
+            <Left>
+                <ReusableForm
+                    formTitle="Events Styles"
+                    initialValues={initialValues}
+                    sections={sections}
+                    headerStyles={{
+                        padding: 10,
+                        headerBackground: 'black',
+                        titleColor: '#ffff',
+                    }}
+                    sectionHeaderStyles={{
+                        padding: 6,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                    }}
+                    bodyPadding={10}
+                    saveBtnText="Save"
+                    cancelBtnText="Cancel"
+                    saveBtnHandle={submitHandler}
+                    cancelHandler={cancelHandler}
+                    handleChange={handleChange}
+                    bodyRowGap={20}
+                    bodyColumnGap={10}
+                />
+            </Left>
+            <Right>
+                <Preview type={'Event'} componentProps={props.componentProps} stylingProps={eventStyles} />
+            </Right>
+        </Container>
+    );
+};
+
+EventPreview.defaultProps = {};
+
+EventPreview.propTypes = {
+    componentProps: PropTypes.object
+}
+
+export default EventPreview;