@mohamed-karawia/library 0.1.12 → 0.1.16

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,17 @@ 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'
+                                },
+                            }} />
 
                     </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 />
@@ -113,7 +121,25 @@ const Forms = (props) => {
                     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
+                        }}
+                         />
 
                 </SpaceContainer>
 

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

@@ -67,11 +67,17 @@ const Event = (props) => {
                             date="15/11/1976 : 16/11/1976"
                             disc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro."
                             backgroundColor="black"
-                            headerBackground="black"
-                            headerTitleColor="white"
                             titleColor="white"
                             discColor="white"
                             dateColor="white"
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
                         />
 
                     </SpaceContainer>

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

@@ -45,6 +45,10 @@ const Events = (props) => {
         setEvents(deleteFromArrayByIndex(events, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+    
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
         <Navbar />
@@ -94,6 +98,20 @@ const Events = (props) => {
                        cardTitleFontSize={15}
                        onAddEvent={onAddEvent}
                        cardIconClicked={cardIconClicked}
+                       cardClicked={cardClicked}
+                       headerStyles={{
+                        padding: 10,
+                        headerBackground: '#FE1744',
+                        titleColor: '#ffff',
+                        controlsStyles: {
+                            iconSize: 25
+                        }
+                    }}
+                    customCardStyles={{
+                        controlsStyles: {
+                            iconColor: '#FE1744'
+                        }
+                    }}
                     />
 
                 </SpaceContainer>

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 />
@@ -95,6 +99,7 @@ const Library = (props) => {
                             columnsNumber={3}
                             onAddFolder={onAddFolder}
                             cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
                             headerStyles={{
                                 padding: 10,
                                 headerBackground: '#ff2d2d',
@@ -102,7 +107,13 @@ const Library = (props) => {
                                 controlsStyles: {
                                     iconSize: 25
                                 }
-                            }} />
+                            }} 
+                            customCardStyles={{
+                                cardPadding: 10,
+                                iconColor: '#ff2d2d'
+                            }}
+                            
+                            />
 
                     </SpaceContainer>
 

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

@@ -20,11 +20,11 @@ import { SPACES } from '../../ViewWorld/constatnts';
 const Notes = (props) => {
 
     const [notes, setNotes] = useState([
-        {title: 'Study notes', date: '15/11/2020'},
-        {title: 'Music notes', date: '14/12/2020'},
-        {title: 'Workout notes', date: '5/8/2021'},
-        {title: 'Gaming notes', date: '14/4/2023'},
-        {title: 'Working notes', date: '5/6/2021'},
+        { title: 'Study notes', date: '15/11/2020' },
+        { title: 'Music notes', date: '14/12/2020' },
+        { title: 'Workout notes', date: '5/8/2021' },
+        { title: 'Gaming notes', date: '14/4/2023' },
+        { title: 'Working notes', date: '5/6/2021' },
     ])
 
     const cardIconClicked = (action, index) => {
@@ -32,7 +32,7 @@ const Notes = (props) => {
             case 'delete':
                 deleteNote(index)
                 break;
-        
+
             default:
                 break;
         }
@@ -45,7 +45,11 @@ const Notes = (props) => {
     const deleteNote = (index) => {
         setNotes(deleteFromArrayByIndex(notes, index))
     }
-    
+
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -90,10 +94,25 @@ const Notes = (props) => {
                         hideTitle
                     >
                         <ViewNotes
-                        onAddNote={onAddNote}
-                        cardIconClicked={cardIconClicked}
-                        notes={notes}
-                             />
+                            onAddNote={onAddNote}
+                            cardIconClicked={cardIconClicked}
+                            notes={notes}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: '#FE1744',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            customCardStyles={{
+                                iconColor: '#FE1744',
+                                controlsStyles: {
+                                    iconColor: '#FE1744'
+                                }
+                            }}
+                        />
 
                     </SpaceContainer>
 

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

@@ -66,7 +66,7 @@ const Music = (props) => {
       case 'delete':
         deleteSonngFromAlbum(index)
         break;
-    
+
       default:
         break;
     }
@@ -123,7 +123,21 @@ const Music = (props) => {
               album={album}
               onAddSong={onAddSong}
               cardIconClicked={cardIconClicked}
-              cardClicked={onPlaySong} />
+              cardClicked={onPlaySong}
+              headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+                controlsStyles: {
+                  iconSize: 25
+                }
+              }}
+              customCardStyles={{
+                controlsStyles: {
+                  iconColor: 'blue'
+                }
+              }}
+            />
           </SpaceContainer>
 
         </Center>

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

@@ -56,6 +56,19 @@ const MusicAlbums = (props) => {
     const deleteFromAlbums = (index) => {
         setAlbums(deleteFromArrayByIndex(albums, index))
     }
+
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
+    const notes = [
+        {title: 'Study notes', date: '15/11/2020'},
+        {title: 'Music notes', date: '14/12/2020'},
+        {title: 'Workout notes', date: '5/8/2021'},
+        {title: 'Gaming notes', date: '14/4/2023'},
+        {title: 'Working notes', date: '5/6/2021'},
+    ]
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -100,35 +113,51 @@ const MusicAlbums = (props) => {
                         hideTitle
                     >
                         <ViewAlbums
+                            title="Music Albums"
                             albums={albums}
                             cardIconClicked={cardIconClicked}
-                            onAddAlbum={onAddAlbum} />
+                            onAddAlbum={onAddAlbum}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                            customCardStyles={{
+                                darkOnHover: true,
+                                controlsStyles: {
+                                    showOnHover: true,
+                                    position: 'center',
+                                    dropdownFontColor: "white",
+                                    iconBorderRadius: 100,
+                                    iconSize: 40,
+                                    iconsGap: 10,
+                                    iconColor: 'white',
+                                    containerPadding: 20,
+                                }
+                            }}
+                            cardClicked={cardClicked}
+                        />
                     </SpaceContainer>
 
                 </Center>
                 <Right>
-                    {/* <WidgetContainer
-                    widgetType='music player'
-                    controlsStyles={{
-                        iconColor: 'black',
-                        dropdownBackground: 'black',
-                        dropdownFontColor: 'white',
-                    }}
-                    widgetProps={{
-                        playlist: album,
-                        nextSong: nextSong,
-                        prevSong: prevSong,
-                        currentSong: currentSong,
-                        borderRadius: '10',
-                        primaryColor: 'black'
-                    }}
-                    headerStyles={{
-                        controlsStyles: {
-                            iconColor: 'red',
-                        },
-                    }}
-                /> */}
-
+                    <WidgetContainer
+                        widgetType='notes'
+                        widgetProps={{
+                            notes,
+                            headerStyles:{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }}
+                        }
+                    />
                 </Right>
             </Body>
         </BaseMaterial>

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

@@ -105,7 +105,13 @@ const Album = (props) => {
                             addPhoto={onAddPhoto}
                             deletePhoto={onDeletePhoto}
                             cardIconClicked={cardIconClicked}
-                            columnsNumber={2} />
+                            columnsNumber={2}
+                            headerStyles={{
+                                padding: 10,
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
                     </SpaceContainer>
 
                 </Center>

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

@@ -36,6 +36,15 @@ const Albums = (props) => {
         { img: img6, title: 'Album 6', count: '24' },
     ])
 
+     const folders = [
+        { title: 'Folder one', description: 'Discription for folder one' },
+        { title: 'Folder two', description: 'Discription for folder two' },
+        { title: 'Folder three', description: 'Discription for folder three' },
+        { title: 'Folder four', description: 'Discription for folder four' },
+        { title: 'Folder five', description: 'Discription for folder five' },
+        { title: 'Folder six', description: 'Discription for folder six' },
+    ]
+
     const cardIconClicked = (action, index) => {
         switch (action) {
             case 'delete':
@@ -59,6 +68,10 @@ const Albums = (props) => {
         setAlbums(addObjectToArray(albums, newAlbum))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
             <Navbar />
@@ -108,32 +121,26 @@ const Albums = (props) => {
                             onDeleteAlbum={onDeleteAlbum}
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
+                            cardClicked={cardClicked}
                         />
                     </SpaceContainer>
 
                 </Center>
                 <Right>
-                    {/* <WidgetContainer
-                        widgetType='music player'
-                        controlsStyles={{
-                            iconColor: 'black',
-                            dropdownBackground: 'black',
-                            dropdownFontColor: 'white',
-                        }}
+                <WidgetContainer
+                        widgetType='folders'
                         widgetProps={{
-                            playlist: album,
-                            nextSong: nextSong,
-                            prevSong: prevSong,
-                            currentSong: currentSong,
-                            borderRadius: '10',
-                            primaryColor: 'black'
-                        }}
-                        headerStyles={{
-                            controlsStyles: {
-                                iconColor: 'red',
-                            },
-                        }}
-                    /> */}
+                            folders,
+                            columnsNumber: 3,
+                            customCardStyles:{
+                                cardPadding: 10,
+                                iconColor: '#ff2d2d',
+                                controlsStyles: {
+                                    iconColor:'#FE1744'
+                                }
+                            }}
+                        }
+                    />
 
                 </Right>
             </Body>

package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx

@@ -76,7 +76,8 @@ const DetailedVideo = (props) => {
                             date="10/11/2022"
                             comments={comments}
                             discColor="gray"
-                            dateColor="gray" />
+                            dateColor="gray"
+                            videoSrc={'https://www.youtube.com/watch?v=vETUpJ88cfA'} />
                     </SpaceContainer>
 
                 </Center>

package/src/stories/Pages/Video/VideoAlbum/Video.jsx

@@ -84,6 +84,9 @@ const Video = (props) => {
         setAlbum(deleteFromArrayByIndex(album, index))
     }
 
+    const cardClicked = (index, cardProps) => {
+        console.log(cardProps)
+    }
 
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
@@ -132,7 +135,16 @@ const Video = (props) => {
                             album={album}
                             onAddVideo={onAddVideo}
                             onDeleteSong={deleteVideoFromAlbum}
-                            cardIconClicked={cardIconClicked} />
+                            cardIconClicked={cardIconClicked}
+                            cardClicked={cardClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: 'black',
+                                titleColor: '#ffff',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
                     </SpaceContainer>
 
                 </Center>