@mohamed-karawia/library 0.1.14 → 0.1.18

package/src/stories/Library/ViewNote/ViewNote.jsx

@@ -2,19 +2,8 @@ import React from 'react';
 
 import Editor from '../../Common Inputs/EditorComponent/EditorComponent';
 
-const ViewNote = () => {
+const ViewNote = ({data, ...props}) => {
 
-    const data = {
-        blocks: [
-            {
-                type: "header",
-                data: {
-                  text: "New Note",
-                  level: 1
-                }
-              }
-        ]
-    }
 
     return (
         <Editor data={data}/>

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

@@ -50,7 +50,7 @@ const ViewAlbum = ({
     return (
         <Container>
             <List
-                listTitle="My Album"
+                listTitle={props.title || "My Album"}
                 data={album}
                 cardStyle="card-style-7"
                 type="flat"
@@ -59,13 +59,6 @@ const ViewAlbum = ({
                 listControls={listControls}
                 cardControls={cardControls}
                 cardIconClicked={cardIconClicked}
-                customCardStyles={{
-                    cardBackgroundColor: cardBackgroundColor,
-                    cardTitleColor: songTitleColor,
-                    controlsStyles: {
-                        iconColor: 'black'
-                    }
-                }}
                 {...props}
             />
             <Modal
@@ -77,8 +70,8 @@ const ViewAlbum = ({
                 <AddSong
                     saveHandler={onAddSong}
                     cancelHandler={cancelHandler}
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel" />
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"} />
             </Modal>
         </Container>
     )
@@ -89,7 +82,7 @@ const Container = styled.div`
 `
 
 ViewAlbum.defaultProps = {
-    cardBackgroundColor: 'white',
+    
 };
 
 ViewAlbum.propTypes = {
@@ -99,6 +92,11 @@ 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,
 };
 
 export default ViewAlbum

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

@@ -21,14 +21,12 @@ const galleryControls = [
 
 const ViewAlbums = ({
     albums,
-    cardBackgroundColor,
     albumTitleColor,
     descColor,
     ...props
 }) => {
     const cardStyles = {
         darkOnHover: true,
-        cardBackgroundColor: cardBackgroundColor,
         cardTitleColor: albumTitleColor,
         descColor,
         controlsStyles: {
@@ -76,18 +74,14 @@ const ViewAlbums = ({
     return (
         <Container>
             <Gallery
-                galleryTitle={props.title}
+                galleryTitle={props.title || 'musicAlbums'}
                 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,14 +93,14 @@ const ViewAlbums = ({
                 <CreateAlbum
                     saveHandler={onAddAlbum}
                     cancelHandler={cancelHandler}
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel" />
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"} />
             </Modal>
         </Container>
     )
 }
 const Container = styled.div`
-
+    width: 100%;
 `
 
 ViewAlbums.defaultProps = {
@@ -120,7 +114,9 @@ ViewAlbums.propTypes = {
     cardBackgroundColor: PropTypes.string,
     albumTitleColor: PropTypes.string,
     descColor: PropTypes.string,
-    title: PropTypes.string
+    title: PropTypes.string,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
 };
 
 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>
@@ -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>

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

@@ -69,6 +69,14 @@ const Forms = (props) => {
         },
     ])
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
+    const onAction = (action, index) => {
+        console.log(action)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
         <Navbar />
@@ -108,12 +116,32 @@ const Forms = (props) => {
             </Left>
             <Center>
                 <SpaceContainer
-                    title="Music Album"
                     discription="Lorem ipsum dolor sit amet consectetur."
                     hideTitle
                 >
                     <ViewForms
-                        data={forms} />
+                        data={forms}
+                        cardClicked={cardClicked}
+                        cardIconClicked={onAction}
+                        headerStyles={{
+                            padding: 10,
+                            headerBackground: '#FE1744',
+                            titleColor: '#ffff',
+                            controlsStyles: {
+                                dropdownBackground: 'black',
+                                dropdownFontColor: 'white',
+                                dropdownItemHoverColor: '#FE1744'
+                            },
+                        }}
+                        sectionHeaderStyles={{
+                            cardTitleColor: 'white',
+                            cardBackgroundColor: 'black',
+                            cardPadding: 10
+                        }}
+                        customCardStyles={{
+                            cardBackgroundColor: 'white'
+                        }}
+                         />
 
                 </SpaceContainer>
 

package/src/stories/Pages/Events/Events/Events.jsx

@@ -19,11 +19,11 @@ import { SPACES } from '../../ViewWorld/constatnts';
 const Events = (props) => {
 
     const [events, setEvents] = useState([
-        {title: 'Event one', date: '15-11-2020 : 5-8-2021'},
-        {title: 'Event two', date: '14-12-2020 : 14-4-2023'},
-        {title: 'Event three', date: '5-6-2021 : 5-8-2021'},
-        {title: 'Event four', date: '14-4-2023'},
-        {title: 'Event five', date: '5-6-2021 : 14-4-2023'},
+        { title: 'Event one', date: '15-11-2020 : 5-8-2021' },
+        { title: 'Event two', date: '14-12-2020 : 14-4-2023' },
+        { title: 'Event three', date: '5-6-2021 : 5-8-2021' },
+        { title: 'Event four', date: '14-4-2023' },
+        { title: 'Event five', date: '5-6-2021 : 14-4-2023' },
     ])
 
     const onAddEvent = (event) => {
@@ -35,7 +35,7 @@ const Events = (props) => {
             case 'delete':
                 deleteEvent(index)
                 break;
-        
+
             default:
                 break;
         }
@@ -45,78 +45,84 @@ const Events = (props) => {
         setEvents(deleteFromArrayByIndex(events, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
-        <Navbar />
-        <Body {...worldStyles.bodyStyle}>
-            <Left>
-                <WidgetContainer
-                    widgetType='logo'
-                    widgetProps={{
-                        imgUrl: props.imgUrl,
-                    }}
-                />
-                <WidgetContainer
-                    widgetType='list'
-                    widgetProps={{
-                        listTitle: 'Your Spaces',
-                        type: 'sectioned',
-                        data: SPACES,
-                        cardStyle: 'card-style-3',
-                        sectionHeaderStyles: {
-                            cardBorderSize: 2,
-                            cardPadding: 2,
-                            cardBackgroundColor: '#fff',
-                            cardBorderColor: 'black',
-                        },
-                        customCardStyles: {
-                            cardPadding: 6,
-                            cardTitleFontSize: 15,
-                            cardBackgroundColor: 'black',
-                            cardTitleColor: 'white',
-                            onHoverBackgroundColor: '#F6891F',
-                            controlsStyles: {
-                                showOnHover: true,
-                            }
-                        },
-                    }}
-                />
-            </Left>
-            <Center>
-                <SpaceContainer
-                    title="Music Album"
-                    discription="Lorem ipsum dolor sit amet consectetur."
-                    hideTitle
-                >
-                    <EventsList
-                       events={events}
-                       iconColor='#FE1744'
-                       cardTitleFontSize={15}
-                       onAddEvent={onAddEvent}
-                       cardIconClicked={cardIconClicked}
-                       headerStyles={{
-                        padding: 10,
-                        headerBackground: '#FE1744',
-                        titleColor: '#ffff',
-                        controlsStyles: {
-                            iconSize: 25
-                        }
-                    }}
-                    customCardStyles={{
-                        controlsStyles: {
-                            iconColor: '#FE1744'
-                        }
-                    }}
+            <Navbar />
+            <Body {...worldStyles.bodyStyle}>
+                <Left>
+                    <WidgetContainer
+                        widgetType='logo'
+                        widgetProps={{
+                            imgUrl: props.imgUrl,
+                        }}
+                    />
+                    <WidgetContainer
+                        widgetType='list'
+                        widgetProps={{
+                            listTitle: 'Your Spaces',
+                            type: 'sectioned',
+                            data: SPACES,
+                            cardStyle: 'card-style-3',
+                            sectionHeaderStyles: {
+                                cardBorderSize: 2,
+                                cardPadding: 2,
+                                cardBackgroundColor: '#fff',
+                                cardBorderColor: 'black',
+                            },
+                            customCardStyles: {
+                                cardPadding: 6,
+                                cardTitleFontSize: 15,
+                                cardBackgroundColor: 'black',
+                                cardTitleColor: 'white',
+                                onHoverBackgroundColor: '#F6891F',
+                                controlsStyles: {
+                                    showOnHover: true,
+                                }
+                            },
+                        }}
                     />
+                </Left>
+                <Center>
+                    <SpaceContainer
+                        title="Music Album"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <EventsList
+                            events={events}
+                            iconColor='#FE1744'
+                            cardTitleFontSize={15}
+                            onAddEvent={onAddEvent}
+                            cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: '#FE1744',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            customCardStyles={{
+                                cardBackgroundColor: 'white',
+                                controlsStyles: {
+                                    iconColor: '#FE1744',
+                                }
+                            }}
+                        />
 
-                </SpaceContainer>
+                    </SpaceContainer>
 
-            </Center>
-            <Right>
+                </Center>
+                <Right>
 
-            </Right>
-        </Body>
-    </BaseMaterial>
+                </Right>
+            </Body>
+        </BaseMaterial>
     )
 }
 

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

@@ -46,6 +46,10 @@ const Library = (props) => {
         setFolders(deleteFromArrayByIndex(folders, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -80,6 +84,7 @@ const Library = (props) => {
                                     showOnHover: true,
                                 }
                             },
+                            cardClicked
                         }}
                     />
                 </Left>
@@ -95,6 +100,7 @@ const Library = (props) => {
                             columnsNumber={3}
                             onAddFolder={onAddFolder}
                             cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
                             headerStyles={{
                                 padding: 10,
                                 headerBackground: '#ff2d2d',
@@ -105,7 +111,7 @@ const Library = (props) => {
                             }} 
                             customCardStyles={{
                                 cardPadding: 10,
-                                iconColor: '#ff2d2d'
+                                iconColor: '#ff2d2d',
                             }}
                             
                             />

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

@@ -46,6 +46,10 @@ const Notes = (props) => {
         setNotes(deleteFromArrayByIndex(notes, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -93,6 +97,7 @@ const Notes = (props) => {
                             onAddNote={onAddNote}
                             cardIconClicked={cardIconClicked}
                             notes={notes}
+                            cardClicked={cardClicked}
                             headerStyles={{
                                 padding: 10,
                                 headerBackground: '#FE1744',