@mohamed-karawia/library 0.1.17 → 0.1.18

package/src/stories/Chat/Chat.jsx

@@ -2,23 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { controls } from '../Reusable Components/fakeData';
-import ReusableHeader from '../Reusable Components/ReusableHeader/ReusableHeader';
 import List from '../Reusable Components/ReusableList/ReusableList';
 import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
 
 const Chat = ({
     data,
-    title,
-    cardBackgroundColor,
-    textColor,
     users,
+    title,
+    backgroundColor,
     ...props }) => {
 
     return (
-        <Container>
+        <Container 
+        backgroundColor={backgroundColor}>
             <List
-                listTitle={title}
+                listTitle={title || 'Chat'}
                 type="flat"
                 data={data}
                 cardStyle="card-style-8"
@@ -32,9 +30,8 @@ const Chat = ({
 }
 
 const Container = styled.div`
-    background-color: ${cardBackgroundColor => cardBackgroundColor};
     width: 100%;
-    padding: 15px 0;
+    background-color: ${({backgroundColor}) => backgroundColor || 'transparent'};
 `
 
 Chat.defaultProps = {
@@ -44,9 +41,9 @@ Chat.defaultProps = {
 Chat.propTypes = {
     data: PropTypes.array.isRequired,
     title: PropTypes.string,
-    cardBackgroundColor: PropTypes.string,
-    cardTitleColor: PropTypes.string,
-    textColor: PropTypes.string
+    backgroundColor: PropTypes.string,
+    customCardStyles: PropTypes.object,
+    headerStyles: PropTypes.object
 }
 
 export default Chat

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

@@ -13,11 +13,11 @@ const DetailedForm = ({
 }) => {
 
     const onAccept = () => {
-        alert('Form Accepted')
+        props.onAccept()
     }
 
     const onDecline = () => {
-        alert('Form Declined')
+        props.onDecline()
     }
 
     return (
@@ -26,17 +26,14 @@ const DetailedForm = ({
                 <Card
                     title={userName}
                     img={userImg}
-                    cardImageRadius="100"
+                    {...props.userHeaderStyles}
                 />
             </User>
             <List
-                listTitle="Form"
+                listTitle={props.title || "Form"}
                 data={questions}
                 type='flat'
                 cardStyle='card-style-3'
-                customCardStyles={{
-                    cardPadding: 10
-                }}
                 {...props}
             />
             <Buttons>
@@ -48,7 +45,7 @@ const DetailedForm = ({
 }
 
 const Container = styled.div`
-    background-color: white;
+    background-color: ${props => props.backgroundColor || 'transparent'};
     padding: 10px 0;
     width: 100%;
 `
@@ -83,7 +80,8 @@ DetailedForm.defaultProps = {};
 DetailedForm.propTypes = {
     userName: PropTypes.string,
     userImg: PropTypes.string,
-    questions: PropTypes.array
+    questions: PropTypes.array,
+    title: PropTypes.string
 }
 
 export default DetailedForm

package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx

@@ -8,7 +8,7 @@ const ViewForms = ({
 }) => {
     return (
         <List
-            listTitle="Submitted Forms"
+            listTitle={props.title || "Submitted Forms"}
             data={data}
             cardStyle="card-style-9"
             type="sectioned"
@@ -20,7 +20,8 @@ const ViewForms = ({
 ViewForms.defaultProps = {};
 
 ViewForms.propTypes = {
-    data: PropTypes.array
+    data: PropTypes.array,
+    title: PropTypes.string
 }
 
 export default ViewForms

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

@@ -9,13 +9,6 @@ const FillForm = ({
     ...props
 }) => {
 
-    // const initialValues = {
-    //     question0: '',
-    //     question1: '',
-    //     question2: '',
-    //     question3: '',
-    //     question4: '',
-    // }
 
     const onCreate = (values) => {
         console.log(values)
@@ -28,19 +21,14 @@ const FillForm = ({
     return (
         <Container>
             <Form
-                // initialValues={initialValues}
-                formTitle="Join Community Form"
+                formTitle={props.formTitle || 'Join Community Form'}
                 sections={sections}
                 saveBtnText={props.saveBtnText}
                 cancelBtnText={props.cancelBtnText}
                 saveHandler={onCreate}
                 cancelHandler={cancelHandler}
-                headerStyles={{
-                    padding: 10,
-                    headerBackground: 'black',
-                    titleColor: '#ffff',
-                }}
-                bodyRowGap={10}
+                bodyRowGap={props.bodyRowGap || 10}
+                {...props}
             />
         </Container>
     )
@@ -55,7 +43,9 @@ FillForm.defaultProps = {};
 FillForm.propTypes = {
     sections: PropTypes.array,
     saveBtnText: PropTypes.string,
-    cancelBtnText: PropTypes.string
+    cancelBtnText: PropTypes.string,
+    formTitle: PropTypes.string,
+    bodyRowGap: PropTypes.number
 }
 
 export default FillForm;

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

@@ -47,7 +47,7 @@ const Event = ({
 const Container = styled.div`
     width: 100%;
     font-family: sans-serif;
-    background-color: ${({ backgroundColor }) => backgroundColor};
+    background-color: ${({ backgroundColor }) => backgroundColor || 'transparent'};
 `
 
 const CoverWrapper = styled.div`

package/src/stories/Events/EventsList/EventsList.jsx

@@ -54,9 +54,9 @@ const EventsList = ({
     }
 
     return (
-    <Container>
+        <Container>
             <List
-                listTitle="My Events"
+                listTitle={props.title || "My Events"}
                 data={events}
                 type='flat'
                 cardStyle="card-style-11"
@@ -74,14 +74,14 @@ const EventsList = ({
                     <div></div>
                 )}>
                 <CreateEvent
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
+                    saveBtnText={props.saveBtnText || 'Create'}
+                    cancelBtnText={props.cancelBtnText || "Cancel"}
                     saveHandler={onAddFolder}
                     cancelHandler={cancelHandler}
                 />
             </Modal>
         </Container>
-        )
+    )
 }
 
 const Container = styled.div`
@@ -92,10 +92,15 @@ EventsList.defaultProps = {};
 
 EventsList.propTypes = {
     notes: PropTypes.array.isRequired,
+    title: PropTypes.string,
     iconColor: PropTypes.string,
     cardTitleFontSize: PropTypes.number,
     cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number
+    cardPadding: PropTypes.number,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
 }
 
 export default EventsList

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

@@ -53,13 +53,10 @@ const Folders = ({
     return (
         <Container>
             <Gallery
-                galleryTitle="Your Folders"
+                galleryTitle={props.title || "Your Folders"}
                 data={folders}
                 type="flat"
                 cardStyle="card-style-10"
-                columnsNumber={columnsNumber}
-                galleryColumnGap={columnGap}
-                galleryRowGap={rowGap}
                 galleryControls={galleryControls}
                 iconClicked={onIconClicked}
                 cardClicked={cardClicked}
@@ -92,6 +89,7 @@ Folders.defaultProps = {};
 
 Folders.propTypes = {
     folders: PropTypes.array,
+    title: PropTypes.string,
     folderTitle: PropTypes.string,
     columnsNumber: PropTypes.number,
     columnGap: PropTypes.number,

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

@@ -56,7 +56,7 @@ const Notes = ({
     return (
         <Container>
             <List
-                listTitle="My Notes"
+                listTitle={props.title || "My Notes"}
                 data={notes}
                 type='flat'
                 cardStyle="card-style-11"
@@ -74,8 +74,8 @@ const Notes = ({
                     <div></div>
                 )}>
                 <CreateFolder
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel"
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"}
                     saveHandler={onAddFolder}
                     cancelHandler={cancelHandler}
                 />
@@ -95,7 +95,11 @@ Notes.propTypes = {
     iconColor: PropTypes.string,
     cardTitleFontSize: PropTypes.number,
     cardTitleColor: PropTypes.string,
-    cardPadding: PropTypes.number
+    cardPadding: PropTypes.number,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    headerStyles: PropTypes.object,
+    customCardStyles: PropTypes.object
 }
 
 export default Notes;

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"
@@ -70,8 +70,8 @@ const ViewAlbum = ({
                 <AddSong
                     saveHandler={onAddSong}
                     cancelHandler={cancelHandler}
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel" />
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"} />
             </Modal>
         </Container>
     )
@@ -82,7 +82,7 @@ const Container = styled.div`
 `
 
 ViewAlbum.defaultProps = {
-    cardBackgroundColor: 'white',
+    
 };
 
 ViewAlbum.propTypes = {
@@ -92,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

@@ -74,13 +74,10 @@ 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}
@@ -96,8 +93,8 @@ const ViewAlbums = ({
                 <CreateAlbum
                     saveHandler={onAddAlbum}
                     cancelHandler={cancelHandler}
-                    saveBtnText="Create"
-                    cancelBtnText="Cancel" />
+                    saveBtnText={props.saveBtnText || "Create"}
+                    cancelBtnText={props.cancelBtnText || "Cancel"} />
             </Modal>
         </Container>
     )
@@ -117,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/Pages/Enrollment/DetailedForm/DetailedForm.jsx

@@ -96,7 +96,16 @@ const DetailedForm = (props) => {
                                     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

@@ -116,7 +116,6 @@ const Forms = (props) => {
             </Left>
             <Center>
                 <SpaceContainer
-                    title="Music Album"
                     discription="Lorem ipsum dolor sit amet consectetur."
                     hideTitle
                 >
@@ -138,6 +137,9 @@ const Forms = (props) => {
                             cardTitleColor: 'white',
                             cardBackgroundColor: 'black',
                             cardPadding: 10
+                        }}
+                        customCardStyles={{
+                            cardBackgroundColor: 'white'
                         }}
                          />
 

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;
         }
@@ -48,80 +48,81 @@ const Events = (props) => {
     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}
-                       cardClicked={cardClicked}
-                       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

@@ -111,7 +111,7 @@ const Library = (props) => {
                             }} 
                             customCardStyles={{
                                 cardPadding: 10,
-                                iconColor: '#ff2d2d'
+                                iconColor: '#ff2d2d',
                             }}
                             
                             />

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/Photos/Albums/Albums.jsx

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

package/src/stories/Pages/ViewWorld/styles.json

@@ -1,6 +1,6 @@
 {
   "containerStyle": {
-    "backgroundColor": "white"
+    "backgroundColor": "red"
   },
   "headStyle": {},
   "bodyStyle": {},