npm - @mohamed-karawia/library - Versions diffs - 0.1.0 - Mend

@mohamed-karawia/library 0.1.0

Files changed (539) hide show

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

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import ViewAlbum from '../../../Photo Album/ViewAlbum/ViewAlbum';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import img1 from '../../../assets/images/album1.jpg';
+import img2 from '../../../assets/images/album2.jpg';
+import img3 from '../../../assets/images/album3.jpg';
+import img4 from '../../../assets/images/album4.jpg';
+import img5 from '../../../assets/images/album5.jpg';
+import img6 from '../../../assets/images/album6.jpg';
+const Album = (props) => {
+    const [album, setAlbum] = useState([
+        { index: 0, img: img5, title: 'Image 1', description: 'This is description test', date: '2021-11-30' },
+        { index: 1, img: img3, title: 'Image 2', description: 'This is description test', date: '2021-11-30' },
+        { index: 2, img: img6, title: 'Image 3', description: 'This is description test', date: '2021-11-30' },
+        { index: 3, img: img2, title: 'Image 4', description: 'This is description test', date: '2021-11-30' },
+        { index: 4, img: img1, title: 'Image 5', description: 'This is description test', date: '2021-11-30' },
+        { index: 5, img: img4, title: 'Image 6', description: 'This is description test', date: '2021-11-30' },
+    ])
+    const onAddPhoto = (photo) => {
+        const newImg = {
+            img: photo.cover.meta.previewUrl,
+            title: photo.title,
+            description: photo.description,
+            date: photo.date
+        }
+        setAlbum(addObjectToArray(album, newImg))
+    }
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                onDeletePhoto(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const onDeletePhoto = (index) => {
+        setAlbum(deleteFromArrayByIndex(album, index))
+    }
+    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="Photo Albums"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <ViewAlbum
+                            album={album}
+                            addPhoto={onAddPhoto}
+                            deletePhoto={onDeletePhoto}
+                            cardIconClicked={cardIconClicked}
+                            columnsNumber={2} />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Album

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

@@ -0,0 +1,8 @@
+import Album from "./Album";
+export default {
+    title: 'pages/photos/Album',
+    component: Album
+}
+export const photoAlbum = args => <Album {...args} />

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

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import ViewAlbums from '../../../Photo Album/ViewAlbums/ViewAlbums';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import img1 from '../../../assets/images/album1.jpg';
+import img2 from '../../../assets/images/album2.jpg';
+import img3 from '../../../assets/images/album3.jpg';
+import img4 from '../../../assets/images/album4.jpg';
+import img5 from '../../../assets/images/album5.jpg';
+import img6 from '../../../assets/images/album6.jpg';
+const Albums = (props) => {
+    const [albums, setAlbums] = useState([
+        { img: img1, title: 'Album 1', count: '24' },
+        { img: img2, title: 'Album 2', count: '24' },
+        { img: img3, title: 'Album 3', count: '24' },
+        { img: img4, title: 'Album 4', count: '24' },
+        { img: img5, title: 'Album 5', count: '24' },
+        { img: img6, title: 'Album 6', count: '24' },
+    ])
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                onDeleteAlbum(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const onDeleteAlbum = (index) => {
+        setAlbums(deleteFromArrayByIndex(albums, index))
+    }
+    const onAddAlbum = (album) => {
+        const newAlbum = {
+            img: album.cover.meta.previewUrl,
+            title: album.title,
+            count: '55'
+        }
+        setAlbums(addObjectToArray(albums, newAlbum))
+    }
+    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="Photo Albums"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <ViewAlbums
+                            albums={albums}
+                            cardIconClicked={cardIconClicked}
+                            onDeleteAlbum={onDeleteAlbum}
+                            onAddAlbum={onAddAlbum}
+                            columnsNumber={2}
+                        />
+                    </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',
+                            },
+                        }}
+                    /> */}
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Albums

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

@@ -0,0 +1,8 @@
+import Albums from "./Albums";
+export default {
+    title: 'pages/Photos/Albums',
+    component: Albums
+}
+export const photoAlbums = args => <Albums {...args}/>

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

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../../ViewWorld/styles.json';
+import VideoSpace from '../../../VideoAlbum/VideoSpace/VideoSpace';
+import { SPACES } from '../../ViewWorld/constatnts';
+const DetailedVideo = (props) => {
+    const [comments, setComments] = useState([
+        { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
+        { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
+        { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
+        { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
+        { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
+    ])
+    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
+                    >
+                        <VideoSpace
+                            iconsColor="white"
+                            backgroundColor="white"
+                            title="Video Title"
+                            discription="Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium placeat nostrum tempora suscipit laborum quibusdam."
+                            date="10/11/2022"
+                            comments={comments}
+                            discColor="gray"
+                            dateColor="gray" />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default DetailedVideo;

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

@@ -0,0 +1,8 @@
+import DetailedVideo from "./DetailedVideo";
+export default {
+    title: 'Pages/Video/Detailed Video',
+    component: DetailedVideo
+}
+export const Video = args => <DetailedVideo {...args} />

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

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../../ViewWorld/styles.json';
+import ViewAlbum from '../../../VideoAlbum/ViewAlbum/ViewAlbum'
+import { SPACES } from '../../ViewWorld/constatnts';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import img1 from '../../../assets/images/music1.jpg';
+import img2 from '../../../assets/images/music2.jpg';
+import img3 from '../../../assets/images/music3.jpg';
+import img4 from '../../../assets/images/music4.jpg';
+import img5 from '../../../assets/images/music5.jpg';
+import img6 from '../../../assets/images/music6.jpg';
+const Video = (props) => {
+    const [currentVideo, setCurrentVideo] = useState(0);
+    const [album, setAlbum] = useState([
+        { index: 0, img: img4, src: 'https://www.youtube.com/watch?v=hl5Kt0BxTa8', title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
+        { index: 2, img: img6, src: 'https://www.youtube.com/watch?v=EYyarcp5LtU', title: 'Still Loving You', description: 'Scorpions', time: '4:20' },
+        { index: 1, img: img5, src: 'https://www.youtube.com/watch?v=vlaQu_rmIQo', title: 'Night', description: 'Frank Ocean', time: '5:20' },
+        { index: 3, img: img1, src: 'https://www.youtube.com/watch?v=VNsd8Yo5zvc', title: 'Somebody Else', description: '1975', time: '5:20' },
+        { index: 4, img: img3, src: 'https://www.youtube.com/watch?v=CD-E-LDc384', title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
+        { index: 5, img: img2, src: 'https://www.youtube.com/watch?v=8SbUC-UaAxE', title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
+    ])
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'play':
+                onPlayVideo(index)
+                break;
+            case 'delete':
+                deleteVideoFromAlbum(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const nextVideo = () => {
+        if (currentVideo < album.length - 1) {
+            setCurrentVideo(currentVideo + 1)
+        } else {
+            setCurrentVideo(0)
+        }
+    }
+    const prevVideo = () => {
+        if (currentVideo !== 0) {
+            setCurrentVideo(currentVideo - 1)
+        }
+    }
+    const onPlayVideo = (index) => {
+        setCurrentVideo(index)
+    }
+    const onAddVideo = (video) => {
+        console.log(video)
+        const newVideo = {
+            // video: video.video.file,
+            img: video.cover.meta.previewUrl,
+            title: video.title,
+            src: video.link,
+            description: video.discription,
+        }
+        setAlbum(addObjectToArray(album, newVideo))
+    }
+    const deleteVideoFromAlbum = (index) => {
+        setAlbum(deleteFromArrayByIndex(album, index))
+    }
+    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
+                    >
+                        <ViewAlbum
+                            album={album}
+                            onAddVideo={onAddVideo}
+                            onDeleteSong={deleteVideoFromAlbum}
+                            cardIconClicked={cardIconClicked} />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                    <WidgetContainer
+                        widgetType='video player'
+                        controlsStyles={{
+                            iconColor: 'black',
+                            dropdownBackground: 'black',
+                            dropdownFontColor: 'white',
+                        }}
+                        widgetProps={{
+                            src: album[currentVideo].src,
+                            iconsColor: 'white',
+                            nextVideo: nextVideo,
+                            prevVideo: prevVideo
+                        }}
+                        headerStyles={{
+                            controlsStyles: {
+                                iconColor: 'red',
+                            },
+                        }}
+                    />
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Video

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

@@ -0,0 +1,8 @@
+import Video from './Video';
+export default {
+    title: 'pages/Video/Video Album',
+    component: Video
+}
+export const Videos = args => <Video {...args} />