npm - @mohamed-karawia/react-storybook - Versions diffs - 0.1.1 - Mend

@mohamed-karawia/react-storybook 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of @mohamed-karawia/react-storybook might be problematic. Click here for more details.

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} />