@mohamed-karawia/library 0.1.3 → 0.1.7

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.jsx

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-import AlbumsGallery from "./AlbumsGallery";
-import { deleteFromArrayByIndex, addObjectToArray } 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';
-
-export default {
-    title: 'Video Album/Albums Gallery',
-    component: AlbumsGallery
-}
-
-export const Gallery = args => {
-    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 onAddAlbum = (album) => {
-        const newAlbum = {
-            img: album.cover.meta.previewUrl,
-            title: album.title,
-            count: '55'
-        }
-        setAlbums(addObjectToArray(albums, newAlbum))
-    }
-
-    const onDeleteAlbum = (index) => {
-        setAlbums(deleteFromArrayByIndex(albums, index))
-    }
-
-    return (
-        <AlbumsGallery
-            videoAlbums={albums}
-            onAddAlbum={onAddAlbum}
-            cardIconClicked={cardIconClicked}
-            {...args}
-        />
-    )
-}

package/src/stories/VideoAlbum/Comments/Comments.stories.jsx

@@ -1,18 +0,0 @@
-import Comments from "./Comments";
-
-export default {
-    title: 'Video Album/Comments',
-    component: Comments
-}
-
-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 videoComments = args => <Comments
-    comments={comments}
-{...args}/>

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

@@ -1,82 +0,0 @@
-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.stories.jsx

@@ -1,23 +0,0 @@
-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.stories.jsx

@@ -1,57 +0,0 @@
-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.stories.js

@@ -1,12 +0,0 @@
-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" />
-);

package/src/stories/Widgets/MusicPlayer/MusicPlayer.stories.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import MusicPlayer from './MusicPlayer';
-
-
-const Songs = [
-    { name: 'Music 1', musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80' },
-    { name: 'Music 2', musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', cover: 'https://c4.wallpaperflare.com/wallpaper/729/961/256/black-minimalistic-music-piano-black-background-1680x1050-entertainment-music-hd-art-wallpaper-preview.jpg' },
-    { name: 'Music 3', musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80' },
-]
-
-export default {
-    title: 'widgets/Music Player',
-    components: MusicPlayer,
-}
-
-const Template = (args) => <MusicPlayer audioLists={Songs}  {...args} />;
-
-export const Music = Template.bind({});
-Music.args = {
-    primaryColor: '',
-    hoverColor: ''
-};

package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.stories.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import MusicPlayerWidget from './MusicPlayerWidget';
-import BaseMaterial from '../../Containers/BaseMaterial';
-
-const Songs = [
-    { name: 'Music 1', musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80' },
-    { name: 'Music 2', musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', cover: 'https://c4.wallpaperflare.com/wallpaper/729/961/256/black-minimalistic-music-piano-black-background-1680x1050-entertainment-music-hd-art-wallpaper-preview.jpg' },
-    { name: 'Music 3', musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80' },
-]
-
-export default {
-    title: 'widgets/Music Player Widget',
-    compomemt: MusicPlayerWidget
-}
-
-const Template = (args) => (
-    <BaseMaterial>
-        <MusicPlayerWidget playlist={Songs}  {...args} />
-    </BaseMaterial>
-)
-
-export const MusicWidget = Template.bind({});
-MusicWidget.args = {
-    fontFamily: '',
-    backgroundColor: '',
-    primaryColor: '',
-    borderRadius: '',
-    padding: '',
-    width: '',
-    fontColor: '',
-    fontSize: '',
-};

package/src/stories/Widgets/SpacesList/SpacesList.stories.jsx

@@ -1,27 +0,0 @@
-import React from "react";
-
-import SpacesList from "./SpacesList";
-import SpacesListItem from "./SpacesListItem";
-
-export default {
-  title: "Widgets/SpacesList/List",
-  component: SpacesList
-};
-
-export const NoItems = args => <SpacesList {...args} />;
-
-export const OneItem = args => (
-  <SpacesList {...args}>
-    <SpacesListItem marginTop={args.itemSpacing} />
-  </SpacesList>
-);
-
-export const FewItems = args => (
-  <SpacesList {...args}>
-    <SpacesListItem />
-    <SpacesListItem spaceName="Welcome" marginTop={args.itemSpacing} />
-    <SpacesListItem spaceName="Announcements" marginTop={args.itemSpacing} />
-    <SpacesListItem spaceName="Client Feedback" marginTop={args.itemSpacing} />
-    <SpacesListItem spaceName="Daily Video Call" marginTop={args.itemSpacing} />
-  </SpacesList>
-);

package/src/stories/Widgets/SpacesList/SpacesListItem.stories.jsx

@@ -1,10 +0,0 @@
-import React from 'react';
-
-import SpacesListItem from './SpacesListItem';
-
-export default {
-  title: 'Widgets/SpacesList/Item',
-  component: SpacesListItem,
-};
-
-export const Default = (args) => <SpacesListItem {...args} />