@mohamed-karawia/library 0.1.15 → 0.1.19

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

@@ -73,6 +73,10 @@ const Forms = (props) => {
         console.log(cardProps)
     }
 
+    const onAction = (action, index) => {
+        console.log(action)
+    }
+
     return (
         <BaseMaterial {...worldStyles.containerStyle} {...props}>
         <Navbar />
@@ -112,13 +116,31 @@ const Forms = (props) => {
             </Left>
             <Center>
                 <SpaceContainer
-                    title="Music Album"
                     discription="Lorem ipsum dolor sit amet consectetur."
                     hideTitle
                 >
                     <ViewForms
                         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/Event/Event.jsx

@@ -11,7 +11,6 @@ import BaseMaterial from '../../../Containers/BaseMaterial';
 import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
 import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
 import DetailedEvent from '../../../Events/Event/Event';
-import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
 
 import worldStyles from '../../ViewWorld/styles.json';
 
@@ -30,16 +29,25 @@ const Event = (props) => {
                         }}
                     />
                     <WidgetContainer
-                        widgetType='list'
+                        widgetType='spaces-list'
                         widgetProps={{
                             listTitle: 'Your Spaces',
                             type: 'sectioned',
-                            data: SPACES,
+                            spaces: SPACES,
                             cardStyle: 'card-style-3',
+                            cardClicked: () => alert('clicked'),
+                            headerStyles:{
+                                headerBackground: 'purple',
+                                padding: 3,
+                                controlsStyles:{
+                                    iconColor: 'white',
+                                    iconsGap: 5
+                                }
+                            },
                             sectionHeaderStyles: {
                                 cardBorderSize: 2,
                                 cardPadding: 2,
-                                cardBackgroundColor: '#fff',
+                                headerBackground: 'red',
                                 cardBorderColor: 'black',
                             },
                             customCardStyles: {

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

@@ -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/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 = () => {
@@ -66,7 +66,7 @@ const Music = (props) => {
       case 'delete':
         deleteSonngFromAlbum(index)
         break;
-    
+
       default:
         break;
     }
@@ -129,9 +129,16 @@ const Music = (props) => {
                 headerBackground: 'black',
                 titleColor: '#ffff',
                 controlsStyles: {
-                    iconSize: 25
+                  iconSize: 25
+                }
+              }}
+              customCardStyles={{
+                cardBackgroundColor: 'white',
+                controlsStyles: {
+                  iconColor: 'black'
                 }
-            }} />
+              }}
+            />
           </SpaceContainer>
 
         </Center>
@@ -149,7 +156,8 @@ const Music = (props) => {
               prevSong: prevSong,
               currentSong: currentSong,
               borderRadius: '10',
-              primaryColor: 'black'
+              primaryColor: 'black',
+              backgroundColor: 'white'
             }}
             headerStyles={{
               controlsStyles: {

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

@@ -60,6 +60,15 @@ const MusicAlbums = (props) => {
     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 />
@@ -90,9 +99,6 @@ const MusicAlbums = (props) => {
                                 cardBackgroundColor: 'black',
                                 cardTitleColor: 'white',
                                 onHoverBackgroundColor: '#F6891F',
-                                controlsStyles: {
-                                    showOnHover: true,
-                                }
                             },
                         }}
                     />
@@ -104,7 +110,7 @@ const MusicAlbums = (props) => {
                         hideTitle
                     >
                         <ViewAlbums
-                        title="Music Albums"
+                            title="Music Albums"
                             albums={albums}
                             cardIconClicked={cardIconClicked}
                             onAddAlbum={onAddAlbum}
@@ -116,34 +122,29 @@ const MusicAlbums = (props) => {
                                     iconSize: 25
                                 }
                             }}
+                            customCardStyles={{
+                                darkOnHover: true,
+                            }}
                             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':
@@ -113,32 +122,28 @@ const Albums = (props) => {
                             onAddAlbum={onAddAlbum}
                             columnsNumber={2}
                             cardClicked={cardClicked}
+                            customCardStyles={{
+                                cardBackgroundColor: 'white'
+                            }}
                         />
                     </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/Photo Album/ViewAlbum/ViewAlbum.jsx

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