@mohamed-karawia/library 0.1.15 → 0.1.19

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;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -6,10 +6,19 @@ 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 = [
@@ -21,21 +30,55 @@ const ViewAlbum = ({
     cardBackgroundColor,
     songTitleColor,
     ...props }) => {
-    const [showModal, setShowModal] = useState(false)
+    const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+    const [centerContext, setCenterContext] = useState(<ViewAlbum album={album}/>)
 
-    const onIconClicked = (action) => {
-        switch (action) {
-            case 'add':
-                setShowModal(true)
-                break;
+    const formChanged = (values) => {
+        console.log('context changed')
+        setCenterContext(<ViewAlbum album={album} {...values} />)
+    }
+
+
+    let tabs = [
+        {
+            title: 'New', id: 'preview'
+        },
+        {
+            title: 'Context', id: 'community'
+        }
+    ]
+    let sections = [
+        {
+            title: 'Styles',
+            data: [
+                {
+                    title: 'Styling',
+                    id: 'styling'
+                }
+            ]
+        }
+    ]
 
-            default:
-                break;
+    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)
+        if (!props.preview) {
+            props.cardIconClicked(action, index)
+        }
     }
 
     const onAddSong = (song) => {
@@ -50,7 +93,7 @@ const ViewAlbum = ({
     return (
         <Container>
             <List
-                listTitle="My Album"
+                listTitle={props.title || "My Album"}
                 data={album}
                 cardStyle="card-style-7"
                 type="flat"
@@ -59,13 +102,6 @@ const ViewAlbum = ({
                 listControls={listControls}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={{
-                    cardBackgroundColor: cardBackgroundColor,
-                    cardTitleColor: songTitleColor,
-                    controlsStyles: {
-                        iconColor: 'black'
-                    }
-                }}
                 {...props}
             />
             <Modal
@@ -77,8 +113,78 @@ const ViewAlbum = ({
                 <AddSong
                     saveHandler={onAddSong}
                     cancelHandler={cancelHandler}
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel" />
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"} />
+            </Modal>
+            <Modal
+                modalIsOpen={showConfigModal}
+                closeModal={() => {
+                    localStorage.removeItem('formStyles')
+                    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="Music Album Config"
+                        tabs={tabs}
+                        id='styling'
+                    >
+                        <MusicAlbumPreview
+                            componentProps={{ album, title: props.title || "My Album", preview: true }}
+                            formChanged={formChanged}
+                            id="preview"
+                        />
+                        <Community
+                            right={(
+                                <WidgetContainer
+                                    widgetType='music player'
+                                    widgetProps={{
+                                        playlist: album,
+                                        currentSong: 1,
+                                    }}
+                                />
+                            )}
+                            left={
+                                (
+                                    <WidgetContainer
+                                        widgetType='spaces-list'
+                                        widgetProps={{
+                                            listTitle: 'Your Spaces',
+                                            type: 'sectioned',
+                                            spaces: SPACES,
+                                            cardStyle: 'card-style-3',
+                                            cardClicked: () => alert('clicked'),
+                                            headerStyles: styles.widgetContainer.header,
+                                            sectionHeaderStyles: styles.widgetContainer.body.sectionHeaderStyles,
+                                            customCardStyles: styles.widgetContainer.body.customCardStyles,
+                                        }}
+                                    />
+                                )
+                            }
+                            center={centerContext}
+                            id="community" />
+                    </Tabs>
+
+                </Sections>
             </Modal>
         </Container>
     )
@@ -89,7 +195,7 @@ const Container = styled.div`
 `
 
 ViewAlbum.defaultProps = {
-    cardBackgroundColor: 'white',
+
 };
 
 ViewAlbum.propTypes = {
@@ -99,6 +205,12 @@ ViewAlbum.propTypes = {
     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

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

@@ -5,11 +5,12 @@ import styled from 'styled-components';
 import Gallery from '../../Reusable Components/Gallery/Gallery';
 import Modal from '../../Reusable Components/ReactModal/ReactModal';
 import CreateAlbum from '../../Forms/CreateMusicAlbum/CreateMusicAlbum';
+import Tabs from '../../Reusable Components/Tabs/Tabs';
+import Sections from '../../Sections/Sections';
+import MusicAlbumsPreview from '../../PreviewComponents/MusicAlbumsPreview/MusicAlbumsPreview';
 
 import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
-
-
-
+import { BsGear } from "react-icons/bs";
 
 const cardControls = [
     { icon: (<AiFillDelete />), action: 'delete', name: 'Delete album' },
@@ -17,43 +18,49 @@ const cardControls = [
 
 const galleryControls = [
     { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+    { icon: (<BsGear />), action: 'config', name: 'Config' },
 ]
 
 const ViewAlbums = ({
     albums,
-    cardBackgroundColor,
     albumTitleColor,
     descColor,
     ...props
 }) => {
-    const cardStyles = {
-        darkOnHover: true,
-        cardBackgroundColor: cardBackgroundColor,
-        cardTitleColor: albumTitleColor,
-        descColor,
-        controlsStyles: {
-            showOnHover: true,
-            position: 'center',
-            iconBackground: "#272727",
-            dropdownBackground: "#272727",
-            dropdownFontColor: "white",
-            dropdownItemHoverColor: "#414141",
-            iconBackgroundHover: "#414141",
-            iconBorderRadius: 100,
-            iconSize: 25,
-            iconsGap: 10,
-            iconColor: 'white',
-            containerPadding: 20
-        }
-    }
 
     const [showModal, setShowModal] = useState(false);
+    const [showConfigModal, setShowConfigModal] = useState(false);
+
+    const tabs = [
+        {
+            title: 'New', component: (<MusicAlbumsPreview
+                componentProps={{ albums, title: props.title || 'Music Albums' }}
+            />)
+        }
+    ]
+
+    const sections = [
+        {
+            title: 'Styles',
+            data: [
+                {
+                    title: 'Styling', component: (<Tabs
+                        title="Music Albums Config"
+                        tabs={tabs}
+                    />)
+                }
+            ]
+        }
+    ]
 
     const onHeaderIconClicked = (action) => {
         switch (action) {
             case 'add':
                 setShowModal(true)
                 break;
+            case 'config':
+                setShowConfigModal(true)
+                break;
             default:
                 break;
         }
@@ -76,18 +83,14 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle={props.title}
+                galleryTitle={props.title || 'Music Albums'}
                 data={albums}
                 type="flat"
                 cardStyle="card-style-6"
-                columnsNumber={3}
-                galleryColumnGap={10}
-                galleryRowGap={20}
                 galleryControls={galleryControls}
                 iconClicked={onHeaderIconClicked}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={cardStyles}
                 {...props}
             />
             <Modal
@@ -99,19 +102,39 @@ const ViewAlbums = ({
                 <CreateAlbum
                     saveHandler={onAddAlbum}
                     cancelHandler={cancelHandler}
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel" />
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"} />
+            </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',
+                    }} />
             </Modal>
         </Container>
     )
 }
 const Container = styled.div`
-
+    width: 100%;
 `
 
-ViewAlbums.defaultProps = {
-    cardBackgroundColor: 'white'
-};
+ViewAlbums.defaultProps = {};
 
 ViewAlbums.propTypes = {
     albums: PropTypes.array,
@@ -120,7 +143,10 @@ ViewAlbums.propTypes = {
     cardBackgroundColor: PropTypes.string,
     albumTitleColor: PropTypes.string,
     descColor: PropTypes.string,
-    title: PropTypes.string
+    title: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    preview: PropTypes.bool
 };
 
 export default ViewAlbums

package/src/stories/Navbar/Navbar.jsx

@@ -4,14 +4,11 @@ import Select from 'react-select';
 import styled from 'styled-components';
 import CustomAutoComplete from '../Common Inputs/CustomAutoComplete/CustomAutoComplete';
 import BaseMaterial from '../Containers/BaseMaterial';
-import home from '../assets/home-svgrepo-com.svg';
-import discover from '../assets/compass-svgrepo-com.svg';
-import add from '../assets/add-svgrepo-com.svg';
-import basket from '../assets/basket-svgrepo-com.svg';
-import bell from '../assets/bell-svgrepo-com.svg';
-import medal from '../assets/medal-svgrepo-com.svg';
-import settings from '../assets/settings-svgrepo-com.svg';
-import search from '../assets/search-svgrepo-com.svg';
+
+import { AiFillHome, AiFillCompass, AiOutlineSearch, AiFillSetting, AiFillBell } from "react-icons/ai";
+import { MdAddBox } from "react-icons/md";
+import { BiMedal } from "react-icons/bi";
+import { IoBasketSharp } from "react-icons/io5";
 
 /* icon size can sm md lg  @sm by default*/
 /* icon background color @transparent by default*/
@@ -92,30 +89,30 @@ const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight
     <BaseMaterial>
       <NavBar color={navbarColor}>
         <UniverseContainer>
-          <IconContainer size={iconSize} color={iconBackgroundColor}>
-            <Icon src={home} size={iconSize} />
+          <IconContainer >
+            <AiFillHome size={iconSize} color={iconBackgroundColor} />
           </IconContainer>
-          <IconContainer size={iconSize} color={iconBackgroundColor}>
-            <Icon src={add} size={iconSize} />
+          <IconContainer >
+            <MdAddBox size={iconSize} color={iconBackgroundColor} />
           </IconContainer>
           <div style={{ width: '200px' }}>
             <Select options={options} styles={{ color: 'blue' }} />
           </div>
         </UniverseContainer>
         <DiscoverContainer>
-          <IconContainer size={iconSize} color={iconBackgroundColor}>
-            <Icon src={discover} size={iconSize} />
+          <IconContainer>
+            <AiFillCompass size={iconSize} color={iconBackgroundColor} />
           </IconContainer>
-          <IconContainer size={iconSize} color={iconBackgroundColor}>
-            <Icon src={medal} size={iconSize} />
+          <IconContainer>
+            <BiMedal  size={iconSize} color={iconBackgroundColor}/>
           </IconContainer>
-          <IconContainer size={iconSize} color={iconBackgroundColor}>
-            <Icon src={basket} size={iconSize} />
+          <IconContainer>
+            <IoBasketSharp size={iconSize} color={iconBackgroundColor}/>
           </IconContainer>
         </DiscoverContainer>
         <SearchContainer>
           <SearchBar>
-            <Icon src={search} size={iconSize} />
+            <AiOutlineSearch  color={iconBackgroundColor} />
 
             <Formik
               initialValues={initialValues}
@@ -171,11 +168,11 @@ const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight
             <UserName>illo</UserName>
           </ProfileContainer>
           <SettingsContainer>
-            <IconContainer size={iconSize} color={iconBackgroundColor}>
-              <Icon src={settings} size={iconSize} />
+            <IconContainer>
+              <AiFillSetting size={iconSize} color={iconBackgroundColor}/>
             </IconContainer>
-            <IconContainer size={iconSize} color={iconBackgroundColor}>
-              <Icon src={bell} size={iconSize} />
+            <IconContainer>
+              <AiFillBell size={iconSize} color={iconBackgroundColor}/>
             </IconContainer>
           </SettingsContainer>
         </ProfileBar>
@@ -208,7 +205,7 @@ const NavBar = styled.div`
 `;
 
 const UniverseContainer = styled('div')({
-  width: '346px',
+  width: '100%',
   height: '72px',
   display: 'flex',
   'align-items': 'center',
@@ -218,22 +215,8 @@ const UniverseContainer = styled('div')({
 
 const IconContainer = styled.div`
   flex: 0 0 auto;
-  width: ${(props) =>
-    props.size === 'sm'
-      ? '30px'
-      : props.size === 'md'
-      ? '35px'
-      : props.size === 'lg'
-      ? '40px'
-      : '30px'};
-  height: ${(props) =>
-    props.size === 'sm'
-      ? '30px'
-      : props.size === 'md'
-      ? '35px'
-      : props.size === 'lg'
-      ? '40px'
-      : '30px'};
+  
+  
   display: flex;
   align-items: center;
   margin-left: 0px;
@@ -241,7 +224,26 @@ const IconContainer = styled.div`
   border-radius: 20px;
   flex-direction: row;
   justify-content: center;
-  background-color: ${(props) => props.color || 'transparent'};
+
+  & svg {
+    width: ${(props) =>
+    props.size === 'sm'
+      ? '30px'
+      : props.size === 'md'
+        ? '35px'
+        : props.size === 'lg'
+          ? '40px'
+          : '30px'};
+  };
+  height: ${(props) =>
+    props.size === 'sm'
+      ? '30px'
+      : props.size === 'md'
+        ? '35px'
+        : props.size === 'lg'
+          ? '40px'
+          : '30px'};
+  fill: ${(props) => props.color || 'transparent'};
 `;
 
 const Icon = styled.img`
@@ -249,18 +251,18 @@ const Icon = styled.img`
     props.size === 'sm'
       ? '20px'
       : props.size === 'md'
-      ? '25px'
-      : props.size === 'lg'
-      ? '30px'
-      : '20px'};
+        ? '25px'
+        : props.size === 'lg'
+          ? '30px'
+          : '20px'};
   height: ${(props) =>
     props.size === 'sm'
       ? '20px'
       : props.size === 'md'
-      ? '25px'
-      : props.size === 'lg'
-      ? '30px'
-      : '20px'};
+        ? '25px'
+        : props.size === 'lg'
+          ? '30px'
+          : '20px'};
 `;
 
 const DiscoverContainer = styled('div')({

package/src/stories/Pages/Chat/Chat.jsx

@@ -67,13 +67,26 @@ const Chat = ({
                         discription="Lorem ipsum dolor sit amet consectetur."
                         hideTitle
                     >
-                        <ChatSpace data={data} users={users} />
-
+                        <ChatSpace
+                            data={data}
+                            users={users}
+                            title={'Chat'}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: '#00ADC4',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            customCardStyles={{
+                                cardTitleColor: '#00ADC4',
+                            }}
+                        />
                     </SpaceContainer>
-
                 </Center>
                 <Right>
-                    
+
                 </Right>
             </Body>
         </BaseMaterial>

package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx

@@ -86,7 +86,26 @@ const DetailedForm = (props) => {
                         <Detailed
                             userName="User Name"
                             userImg="https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png"
-                            questions={questions} />
+                            questions={questions}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: '#FE1744',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    dropdownBackground: 'black',
+                                    dropdownFontColor: 'white',
+                                    dropdownItemHoverColor: '#FE1744'
+                                },
+                            }}
+                            userHeaderStyles={{
+                                cardBackgroundColor: '#FE1744',
+                                cardImageRadius: "100",
+                                cardTitleColor: 'white',
+                            }}
+                            customCardStyles={{
+                                cardPadding: 10,
+                            }}
+                        />
 
                     </SpaceContainer>
 

package/src/stories/Pages/Enrollment/FillForm/FillForm.jsx

@@ -77,9 +77,15 @@ const FillForm = (props) => {
                         hideTitle
                     >
                         <Form
+                            formTitle="Community Form"
                             sections={sections}
                             saveBtnText={'Submit'}
                             cancelBtnText="Cancel" 
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                            }}
                             />
 
                     </SpaceContainer>