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