@mohamed-karawia/react-storybook 0.1.1

package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.jsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ReactPlayer from 'react-player';
+import { TimeSeekSlider } from 'react-time-seek-slider';
+import 'react-time-seek-slider/lib/ui-time-seek-slider.css';
+import Slider from 'rc-slider';
+
+import { AiFillPlayCircle, AiFillPauseCircle, AiFillSound } from "react-icons/ai";
+import { BiSkipNext, BiSkipPrevious, BiVolumeMute } from "react-icons/bi";
+import { ImBackward2, ImForward3 } from "react-icons/im";
+
+const VideoPlayer = ({
+    src,
+    iconsColor,
+    onHoverIconsColor,
+    ...props
+}) => {
+    const player = useRef(null);
+    const [play, setPlay] = useState(false);
+    const [duration, setDuration] = useState(0);
+    const [progress, setProgress] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+
+    const handleUserKeyPress = useCallback(event => {
+        const { keyCode } = event;
+        switch (keyCode) {
+            case 39:
+                goForward()
+                break;
+            case 37:
+                goBack()
+                break;
+            case 32:
+                setPlay(!play)
+                break;
+            default:
+                break;
+        }
+    }, []);
+
+    useEffect(() => {
+        window.addEventListener("keydown", handleUserKeyPress);
+    }, [handleUserKeyPress, play]);
+
+    const onProgress = ({ playedSeconds }) => {
+        setProgress(playedSeconds)
+    }
+
+    const onDuration = (duration) => {
+        setDuration(duration)
+    }
+
+    const changeTimeStamp = (time) => {
+        setProgress(time)
+        player.current.seekTo(time, 'seconds')
+    }
+
+    const onVideoEnd = () => {
+        props.nextVideo()
+    }
+
+    const goBack = () => {
+        changeTimeStamp(progress - 5)
+    }
+
+    const goForward = () => {
+        changeTimeStamp(progress + 5)
+    }
+
+    const prevVideo = () => {
+        props.prevVideo()
+    }
+
+    const nextVideo = () => {
+        props.nextVideo()
+    }
+
+    const toggleMute = () => {
+        setMuted(!muted)
+    }
+
+    const changeVolume = (value) => {
+        setVolume(value / 100)
+    }
+
+    return (
+        <Container iconsColor={iconsColor}>
+            <ReactPlayer
+                ref={player}
+                playing={play}
+                volume={volume}
+                muted={muted}
+                onPlay={() => setPlay(true)}
+                onPause={() => setPlay(false)}
+                onEnded={onVideoEnd}
+                width="100%"
+                onProgress={onProgress}
+                onDuration={onDuration}
+                url={src} />
+            <Controls>
+                <Left iconsColor={iconsColor} onHoverIconsColor={onHoverIconsColor}>
+                    <BiSkipPrevious onClick={prevVideo} />
+                    <ImBackward2 onClick={() => goBack()} />
+                    <PlayContainer onClick={() => setPlay(!play)}>
+                        {play ? <AiFillPauseCircle /> : <AiFillPlayCircle />}
+                    </PlayContainer>
+                    <ImForward3 onClick={() => goForward()} />
+                    <BiSkipNext onClick={nextVideo} />
+                </Left>
+                <Center>
+                    <TimeSeekSlider
+                        max={duration}
+                        currentTime={progress}
+                        progress={400}
+                        onSeeking={(time) => {
+                            changeTimeStamp(time)
+                        }}
+                        offset={20}
+                        secondsPrefix="00:00:"
+                        minutesPrefix="00:"
+                    />
+                </Center>
+                <Right iconsColor={iconsColor} onHoverIconsColor={onHoverIconsColor}>
+                    {!muted ? <AiFillSound onClick={toggleMute} /> : <BiVolumeMute onClick={toggleMute} />}
+                    <Slider min={0} max={100} onChange={changeVolume} />
+                </Right>
+            </Controls>
+        </Container>
+
+    )
+}
+
+const Container = styled.div`
+    position: relative;
+
+    .ui-time-seek-slider .track .main .connect{
+        background-color: ${({iconsColor}) => iconsColor};
+    }
+
+    .ui-time-seek-slider .thumb .handler{
+        background-color: ${({iconsColor}) => iconsColor};
+    }
+`
+
+const Controls = styled.div`
+    box-sizing: border-box;
+    width: 100%;
+    background-color: #000000c0;
+    height: 40px;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    padding: 0 10px;
+    gap: 10px;
+`
+const Left = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    
+    svg{
+        width: 25px;
+        height: 25px;
+        fill: ${({iconsColor}) => iconsColor};
+        cursor: pointer;
+        &:hover{
+            fill: ${({onHoverIconsColor}) => onHoverIconsColor};
+        }
+    }
+`
+
+const PlayContainer = styled.div`
+    display: flex;
+    align-items: center;
+`
+
+const Center = styled.div`
+    width: 70%;
+    align-self: center;
+`
+
+const Right = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 2;
+    
+    svg{
+        width: 25px;
+        height: 25px;
+        fill: ${({iconsColor}) => iconsColor};
+        cursor: pointer;
+        &:hover{
+            fill: ${({onHoverIconsColor}) => onHoverIconsColor};
+        }
+    }
+`
+
+VideoPlayer.defaultProps = {
+    src: 'https://www.youtube.com/watch?v=vETUpJ88cfA'
+};
+
+VideoPlayer.propTypes = {
+    src: PropTypes.string,
+    iconsColor: PropTypes.string,
+    onHoverIconsColor: PropTypes.string,
+    nextVideo: PropTypes.func,
+    prevVideo: PropTypes.func
+};
+
+
+export default VideoPlayer;

package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.stories.jsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import VideoPlayer from "./VideoPlayer";
+
+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';
+
+export default {
+    title: 'Video Album/Video Player',
+    component: VideoPlayer
+}
+
+export const Video = args => {
+    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':
+                deleteSonngFromAlbum(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 onAddSong = (song) => {
+        const newSong = {
+            song: song.song.file,
+            img: song.cover.meta.previewUrl,
+            title: song.title,
+            description: song.artist,
+            time: new Date(song.song.meta.duration * 1000).toISOString().substr(14, 5)
+        }
+        setAlbum(addObjectToArray(album, newSong))
+    }
+
+    const deleteSonngFromAlbum = (index) => {
+        setAlbum(deleteFromArrayByIndex(album, index))
+    }
+
+    return (
+        <VideoPlayer
+            iconsColor="white"
+            src={album[currentVideo].src}
+            nextVideo={nextVideo}
+            prevVideo={prevVideo}
+            {...args} />
+    )
+}

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import VideoPlayer from '../VideoPlayer/VideoPlayer';
+import Comments from '../Comments/Comments';
+import RichTextInput from '../../Common Inputs/RichTextInput/RichTextInput';
+
+const VideoSpace = ({
+    title,
+    discription,
+    date,
+    users,
+    iconsColor,
+    backgroundColor,
+    detailsPadding,
+    titleFontSize,
+    titleColor,
+    dateFontSize,
+    dateColor,
+    discFontSize,
+    discColor,
+    comments,
+    commentBackgroundColor,
+    commentTitleColor,
+    commentTitleFontSize,
+    ...props }) => {
+
+    return (
+        <Container backgroundColor={backgroundColor}>
+            <VideoPlayer
+                iconsColor={iconsColor} />
+            <VideoDetails detailsPadding={detailsPadding}>
+                <Top>
+                    <Title titleFontSize={titleFontSize} titleColor={titleColor}>{title}</Title>
+                    <Date dateFontSize={dateFontSize} dateColor={dateColor}>{date}</Date>
+                </Top>
+                <Discription discFontSize={discFontSize} discColor={discColor}>{discription}</Discription>
+            </VideoDetails>
+            <Comments
+                cardBackgroundColor={commentBackgroundColor}
+                comments={comments}
+                cardTitleColor={commentTitleColor}
+                cardTitleFontSize={commentTitleFontSize} />
+            <RichTextInput
+                users={users}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    font-family: sans-serif;
+    background-color: ${({ backgroundColor }) => backgroundColor};
+`
+
+const VideoDetails = styled.div`
+    padding: ${({ detailsPadding }) => detailsPadding}px;
+`
+
+const Top = styled.div`
+    display: flex;
+    align-items: center;
+`
+
+const Title = styled.h3`
+    font-size: ${({ titleFontSize }) => titleFontSize}px;
+    color: ${({ titleColor }) => titleColor};
+    flex-grow: 1;
+    margin: 0;
+`
+
+const Date = styled.p`
+    font-size: ${({ dateFontSize }) => dateFontSize}px;
+    color: ${({ dateColor }) => dateColor};
+`
+const Discription = styled.p`
+    font-size: ${({ discFontSize }) => discFontSize}px;
+    color: ${({ discColor }) => discColor};
+`
+
+VideoSpace.defaultProps = {};
+
+VideoSpace.propTypes = {
+    users: PropTypes.string,
+    iconsColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    detailsPadding: PropTypes.number,
+    titleFontSize: PropTypes.number,
+    titleColor: PropTypes.string,
+    discFontSize: PropTypes.string,
+    discColor: PropTypes.string,
+    dateFontSize: PropTypes.number,
+    dateColor: PropTypes.string,
+    commentBackgroundColor: PropTypes.string,
+    commentTitleColor: PropTypes.string,
+    commentTitleFontSize: PropTypes.string
+};
+
+
+export default VideoSpace

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.stories.jsx

@@ -0,0 +1,23 @@
+import VideoSpace from "./VideoSpace";
+
+export default {
+    title: 'Video Album/Video Space',
+    component: VideoSpace
+}
+
+const comments = [
+    { 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.' },
+]
+
+export const Space = args =>
+    <VideoSpace
+        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}
+        {...args} />

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Gallery from '../../Reusable Components/Gallery/Gallery';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import AddVideo from '../../Forms/AddVideo/AddVideo';
+
+import { AiFillPlayCircle, AiFillDelete, AiOutlineFileAdd } from "react-icons/ai";
+
+
+
+const cardControls = [
+    { icon: (<AiFillPlayCircle />), action: 'play', name: 'play video' },
+    {icon: (<AiFillDelete />), action: 'delete', name: 'Delete video'}
+]
+
+const galleryControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+]
+
+const ViewAlbum = ({
+    album,
+    cardBackgroundColor,
+    cardTitleColor,
+    cardTitleFontSize,
+    descColor,
+     ...props}) => {
+    const [showModal, setShowModal] = useState(false);
+
+    const cardStyles = {
+        darkOnHover: true,
+        cardBackgroundColor,
+        cardTitleFontSize,
+        cardTitleColor,
+        descColor,
+        controlsStyles: {
+            showOnHover: true,
+            position: 'center',
+            iconBackground: "transparent",
+            dropdownBackground: "#272727",
+            dropdownFontColor: "white",
+            dropdownItemHoverColor: "#414141",
+            iconBorderRadius: 100,
+            iconSize: 25,
+            iconsGap: 10,
+            iconColor: 'white',
+        }
+    }
+
+    const onHeaderIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+
+    const onAddVideo = (album) => {
+        setShowModal(false)
+        props.onAddVideo(album)
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <Gallery
+                galleryTitle="Video Album"
+                data={album}
+                type="flat"
+                cardStyle="card-style-6"
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                columnsNumber={3}
+                galleryColumnGap={10}
+                galleryRowGap={20}
+                galleryControls={galleryControls}
+                iconClicked={onHeaderIconClicked}
+                cardControls={cardControls}
+                cardClicked={() => null}
+                cardIconClicked={cardIconClicked}
+                customCardStyles={cardStyles}
+                {...props}
+            />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <AddVideo
+                    saveHandler={onAddVideo}
+                    cancelHandler={cancelHandler} />
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+ViewAlbum.defaultProps = {};
+
+ViewAlbum.propTypes = {
+    album: PropTypes.array,
+    cardBackgroundColor: PropTypes.string,
+    cardTitleColor: PropTypes.string,
+    cardTitleFontSize: PropTypes.number,
+    descColor: PropTypes.string,
+    cardIconClicked: PropTypes.func,
+    onAddAlbum: PropTypes.func
+}
+
+export default ViewAlbum

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import ViewAlbum from './ViewAlbum';
+import { deleteFromArrayByIndex, addObjectToArray } 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';
+
+export default {
+    title: 'Video Album/Album Gallery',
+    component: ViewAlbum
+}
+
+export const Gallery = args => {
+    const [album, setAlbum] = useState([
+        { index: 0, img: img4, title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
+        { index: 2, img: img6, title: 'Still Loving You', description: 'Scorpions', time: '4:20' },
+        { index: 1, img: img5, title: 'Night', description: 'Frank Ocean', time: '5:20' },
+        { index: 3, img: img1, title: 'Somebody Else', description: '1975', time: '5:20' },
+        { index: 4, img: img3, title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
+        { index: 5, img: img2, title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
+    ])
+
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                deleteFromAlbums(index)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const onAddAlbum = (album) => {
+        const newAlbum = {
+            img: album.cover.preview,
+            title: album.title,
+            description: album.artist
+        }
+        setAlbum(addObjectToArray(album, newAlbum))
+    }
+
+    const deleteFromAlbums = (index) => {
+        setAlbum(deleteFromArrayByIndex(album, index))
+    }
+
+    return (
+        <ViewAlbum
+            album={album}
+            cardIconClicked={cardIconClicked}
+            onAddAlbum={onAddAlbum}
+        {...args} />
+    )
+}

package/src/stories/Widgets/LogoWidget/LogoWidget.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const LogoWidget = ({ imgUrl }) => {
+  return <Image src={imgUrl} />;
+};
+
+LogoWidget.defaultProps = {
+  imgUrl: ""
+};
+
+LogoWidget.propTypes = {
+  imgUrl: PropTypes.string
+};
+
+const Image = styled.img`
+  width: 100%;
+`;
+
+export default LogoWidget;

package/src/stories/Widgets/LogoWidget/LogoWidget.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+import LogoWidget from "./LogoWidget";
+
+export default {
+  title: "Widgets/Logo",
+  component: LogoWidget
+};
+
+export const CargoSprint = () => (
+  <LogoWidget imgUrl="https://cargosprint.com/assets/img/cs-logos/Logo-CargoSprint_horizontal-color.png" />
+);