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/Events/Events/Events.jsx ADDED Viewed

@@ -0,0 +1,110 @@
+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 EventsList from '../../../Events/EventsList/EventsList';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import worldStyles from '../../ViewWorld/styles.json';
+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'},
+    ])
+    const onAddEvent = (event) => {
+        setEvents(addObjectToArray(events, event))
+    }
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                deleteEvent(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const deleteEvent = (index) => {
+        setEvents(deleteFromArrayByIndex(events, 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
+                >
+                    <EventsList
+                       events={events}
+                       iconColor='#FE1744'
+                       cardTitleFontSize={15}
+                       onAddEvent={onAddEvent}
+                       cardIconClicked={cardIconClicked}
+                    />
+                </SpaceContainer>
+            </Center>
+            <Right>
+            </Right>
+        </Body>
+    </BaseMaterial>
+    )
+}
+export default Events

package/src/stories/Pages/Events/Events/Events.stories.jsx ADDED Viewed

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

package/src/stories/Pages/Library/Folders/Library.jsx ADDED Viewed

@@ -0,0 +1,118 @@
+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 Folders from '../../../Library/Folders/Folders';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+const Library = (props) => {
+    const [folders, setFolders] = useState([
+        { 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 onAddFolder = (folder) => {
+        setFolders(addObjectToArray(folders, folder))
+    }
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                deleteFolder(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const deleteFolder = (index) => {
+        setFolders(deleteFromArrayByIndex(folders, 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
+                    >
+                        <Folders
+                            folders={folders}
+                            folderTitle='Your Folders'
+                            columnsNumber={3}
+                            onAddFolder={onAddFolder}
+                            cardIconClicked={cardIconClicked}
+                            headerStyles={{
+                                padding: 10,
+                                headerBackground: '#ff2d2d',
+                                titleColor: 'white',
+                                controlsStyles: {
+                                    iconSize: 25
+                                }
+                            }} />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Library

package/src/stories/Pages/Library/Folders/Library.stories.jsx ADDED Viewed

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

package/src/stories/Pages/Library/Notes/Notes.jsx ADDED Viewed

@@ -0,0 +1,109 @@
+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 ViewNotes from '../../../Library/Notes/Notes';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+const Notes = (props) => {
+    const [notes, setNotes] = useState([
+        {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'},
+    ])
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                deleteNote(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const onAddNote = (folder) => {
+        setNotes(addObjectToArray(notes, folder))
+    }
+    const deleteNote = (index) => {
+        setNotes(deleteFromArrayByIndex(notes, 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
+                    >
+                        <ViewNotes
+                        onAddNote={onAddNote}
+                        cardIconClicked={cardIconClicked}
+                        notes={notes}
+                             />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Notes

package/src/stories/Pages/Library/Notes/Notes.stories.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+import Notes from './Notes';
+export default {
+    title: 'Pages/Library/Notes',
+    component: Notes
+}
+export const ViewNotes = args => <Notes {...args} />

package/src/stories/Pages/Music/MusicAlbum/Music.jsx ADDED Viewed

@@ -0,0 +1,159 @@
+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 MusicAlbum from '../../../Music 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/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 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: 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: 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' },
+  ])
+  const nextSong = () => {
+    if (currentSong < album.length - 1) {
+      setCurrentSong(currentSong + 1)
+    }
+  }
+  const prevSong = () => {
+    if (currentSong !== 0) {
+      setCurrentSong(currentSong - 1)
+    }
+  }
+  const onPlaySong = (index) => {
+    setCurrentSong(index)
+  }
+  const onAddSong = (song) => {
+    const newSong = {
+      song: song.song.file,
+      cover: 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 cardIconClicked = (action, index) => {
+    switch (action) {
+      case 'delete':
+        deleteSonngFromAlbum(index)
+        break;
+      default:
+        break;
+    }
+  }
+  const deleteSonngFromAlbum = (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
+          >
+            <MusicAlbum
+              album={album}
+              onAddSong={onAddSong}
+              cardIconClicked={cardIconClicked}
+              cardClicked={onPlaySong} />
+          </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 Music

package/src/stories/Pages/Music/MusicAlbum/Music.stories.jsx ADDED Viewed

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

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

@@ -0,0 +1,138 @@
+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 '../../../Music 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/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 MusicAlbums = (props) => {
+    const [albums, setAlbums] = useState([
+        { index: 0, img: img4, title: 'Tomorrows |', description: 'Son Lux' },
+        { index: 1, img: img5, title: 'Blond', description: 'Frank Ocean' },
+        { index: 2, img: img6, title: 'Love At First Sting', description: 'Scorpions' },
+        { index: 3, img: img1, title: 'The 1975', description: '1975' },
+        { index: 4, img: img3, title: 'Hardwired...To Self-Destruct', description: 'Metallica' },
+        { index: 5, img: img2, title: 'Use Your IIIlusion |', description: "Guns N' Roses" },
+    ])
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                deleteFromAlbums(index)
+                break;
+            default:
+                break;
+        }
+    }
+    const onAddAlbum = (album) => {
+        const newAlbum = {
+            img: album.cover.meta.previewUrl,
+            title: album.title,
+            description: album.artist
+        }
+        setAlbums(addObjectToArray(albums, newAlbum))
+    }
+    const deleteFromAlbums = (index) => {
+        setAlbums(deleteFromArrayByIndex(albums, 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
+                    >
+                        <ViewAlbums
+                            albums={albums}
+                            cardIconClicked={cardIconClicked}
+                            onAddAlbum={onAddAlbum} />
+                    </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 MusicAlbums

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

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