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

@@ -0,0 +1,193 @@
+import React, { useEffect, useState, Suspense, lazy } from "react";
+import axios from 'axios';
+import Head from '../../Layout/Head/Head';
+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 EditorComponent from "../../Common Inputs/EditorComponent/EditorComponent";
+import MusicPlayer from "../../Widgets/MusicPlayer/MusicPlayer";
+import Spinner from "../../Reusable Components/Spinner/Spinner";
+import worldStyles from './styles.json';
+import Chat from '../../Agora/Chat/Chat';
+// API CODE: let world = await API.GET('/world/:world_id')
+import { cardControls } from '../../Reusable Components/fakeData';
+import { SPACES } from './constatnts';
+import Room from '../../Agora/Room/Room';
+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 EditorComponent = lazy(() => import('../../Common Inputs/EditorComponent/EditorComponent'));
+const ViewWorld = (props) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [data, setData] = useState({});
+  const [musicPlayer, setMusicPlayer] = useState();
+  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)
+  }
+  useEffect(() => {
+    fetchMusic();
+    fetchEditorData();
+  }, []);
+  const fetchEditorData = () => {
+    setIsLoading(true);
+    axios
+      .get('https://jsonplaceholder.typicode.com/editor')
+      .then((res) => {
+        console.log(res);
+        setData(res.data);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        setIsLoading(false);
+        console.log(err);
+      });
+  };
+  const fetchMusic = () => {
+    axios
+      .get('https://jsonplaceholder.typicode.com/music')
+      .then((res) => {
+        setMusicPlayer(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+  return (
+    <BaseMaterial {...worldStyles.containerStyle} {...props}>
+      <Navbar />
+      <Body {...worldStyles.bodyStyle}>
+        <Left>
+          <WidgetContainer
+            widgetType='logo'
+            widgetProps={{
+              imgUrl: props.imgUrl,
+            }}
+            headerStyles={{ ...data.listStyles }}
+          />
+          {data.sectionsStyles && (
+            <WidgetContainer
+              widgetType='list'
+              widgetProps={{
+                listTitle: 'Your Spaces',
+                listControls: cardControls,
+                type: 'sectioned',
+                data: SPACES,
+                cardStyle: 'card-style-3',
+                cardControls: cardControls,
+                sectionHeaderStyles: { ...data.sectionsStyles.sectionHeader },
+                customCardStyles: { ...data.sectionsStyles.card },
+                ...data.listStyles,
+              }}
+            />
+          )}
+        </Left>
+        <Center>
+          {
+            isLoading ?
+              <Spinner color="#FCB4BE" />
+              :
+              <SpaceContainer
+                title="Space Title"
+                discription="Lorem ipsum dolor sit amet consectetur."
+                controls={cardControls}
+                headerStyles={{
+                  headerBackground: "#FE4454",
+                  controlsStyles: {
+                    iconsGap: 3,
+                    iconColor: 'white'
+                  }
+                }}
+              >
+                <Suspense fallback={<Spinner color="#FCB4BE" />}>
+                  <EditorComponent
+                    padding="10"
+                    data={data.editorData}
+                    {...data.styles}
+                    {...props.editor} />
+                </Suspense>
+              </SpaceContainer>
+          }
+        </Center>
+        <Right>
+          {musicPlayer && (
+            <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>
+      {/* {musicPlayer && (
+        <MusicPlayer audioLists={musicPlayer.songs} {...musicPlayer.styles} />
+      )} */}
+    </BaseMaterial>
+  );
+};
+export default ViewWorld;

package/src/stories/Pages/ViewWorld/ViewWorld.stories.js ADDED Viewed

@@ -0,0 +1,270 @@
+import React from 'react';
+import withMock from 'storybook-addon-mock';
+import ViewWorld from './ViewWorld';
+// Temporary constatns
+import {
+  CARGO_DATA,
+  CARGO_SONGS,
+  MUSIC_DATA,
+  MUSIC_SONGS,
+  GAMING_DATA,
+  GAMING_SONGS,
+  MOVIES_DATA,
+  MOVIES_SONGS
+} from "./constatnts";
+export default {
+  title: 'Pages/world/world_id',
+  component: ViewWorld,
+  decorators: [withMock]
+};
+const Template = (args) => <ViewWorld {...args} />;
+// Cargo Sprint data
+export const Public = Template.bind({});
+Public.parameters = {
+    mockData: [
+        {
+            url: 'https://jsonplaceholder.typicode.com/editor',
+            method: 'GET',
+            status: 200,
+            response: {
+              editorData: CARGO_DATA,
+                styles: {
+                  backgroundColor: '#fff',
+                },
+                listStyles: {
+                  headerTitleColor: '#F6891F',
+                },
+                sectionsStyles: {
+                  sectionHeader: {
+                    cardBorderSize: 2,
+                    cardPadding: 2,
+                    cardBackgroundColor: '#fff',
+                    cardBorderColor: '#F6891F',
+                  },
+                  card: {
+                    cardPadding: 6,
+                    cardTitleFontSize: 15,
+                    cardBackgroundColor: 'black',
+                    cardTitleColor: 'white',
+                    onHoverBackgroundColor: '#F6891F',
+                    controlsStyles: {
+                      showOnHover: true,
+                    }
+                  }
+                }
+            }
+        },
+        {
+          url: 'https://jsonplaceholder.typicode.com/music',
+          method: 'GET',
+          status: 200,
+          response: {
+              songs: CARGO_SONGS,
+              styles: {
+                backgroundColor: '#fff',
+                primaryColor: 'black'
+              }
+          }
+      },
+    ],
+};
+Public.args= {
+  imgUrl: 'https://cargosprint.com/assets/img/cs-logos/Logo-CargoSprint_horizontal-color.png'
+}
+// Music Data
+export const Music = Template.bind({});
+Music.parameters = {
+  mockData: [
+      {
+          url: 'https://jsonplaceholder.typicode.com/editor',
+          method: 'GET',
+          status: 200,
+          response: {
+            editorData: MUSIC_DATA,
+            styles: {
+              backgroundColor: 'black',
+              fontColor: '#fff'
+            },
+            listStyles: {
+              headerTitleColor: '#E445AC',
+            },
+            sectionsStyles: {
+              sectionHeader: {
+                cardBorderSize: 2,
+                cardPadding: 2,
+                cardBackgroundColor: 'black',
+                cardBorderColor: '#E445AC',
+                cardTitleColor: 'white'
+              },
+              card: {
+                cardPadding: 6,
+                cardTitleFontSize: 15,
+                cardBackgroundColor: '#fff',
+                onHoverBackgroundColor: '#E445AC',
+                cardTitleColor: 'black',
+                controlsStyles: {
+                  showOnHover: true,
+                }
+              }
+            }
+        }
+      },
+      {
+        url: 'https://jsonplaceholder.typicode.com/music',
+        method: 'GET',
+        status: 200,
+        response: {
+            songs: MUSIC_SONGS,
+            styles: {
+              backgroundColor: '#e445ac',
+              primaryColor: '#a9afac',
+              borderSize: 3,
+              borderColor: 'white',
+            }
+        }
+    },
+  ],
+};
+Music.args = {
+  backgroundColor: 'black',
+  color: '#FCB4BE',
+  imgUrl: 'https://i.imgur.com/6vISA8U.png',
+  hoverColor: 'black'
+}
+// Gaming Data
+export const Gaming = Template.bind({});
+Gaming.parameters = {
+  mockData: [
+      {
+          url: 'https://jsonplaceholder.typicode.com/editor',
+          method: 'GET',
+          status: 200,
+          response: {
+            editorData: GAMING_DATA,
+            styles: {
+              backgroundColor: 'black',
+              fontColor: '#fff'
+            },
+            listStyles: {
+              headerTitleColor: '#FE4554',
+            },
+            sectionsStyles: {
+              sectionHeader: {
+                cardBorderSize: 2,
+                cardPadding: 2,
+                cardBackgroundColor: '#fff',
+                cardBorderColor: '#FE4554',
+                cardTitleColor: 'black'
+              },
+              card: {
+                cardPadding: 6,
+                cardTitleFontSize: 15,
+                cardBackgroundColor: '#131F2A',
+                cardTitleColor: 'white',
+                onHoverBackgroundColor: '#FE4554',
+                cardTitleColor: 'white',
+                controlsStyles: {
+                  showOnHover: true,
+                }
+              }
+            }
+        }
+      },
+      {
+        url: 'https://jsonplaceholder.typicode.com/music',
+        method: 'GET',
+        status: 200,
+        response: {
+            songs: GAMING_SONGS,
+            styles: {
+              backgroundColor: '#131F2A',
+              primaryColor: '#FE4554',
+              borderSize: 2,
+              borderColor: '#FE4554',
+              borderRadius: 15
+            }
+        }
+    },
+  ],
+};
+Gaming.args = {
+  backgroundColor: '#131F2A',
+  color: 'white',
+  imgUrl: 'https://i.imgur.com/sye5txB.png',
+  hoverColor: 'black',
+  editor: {
+    backgroundImage: 'https://img.wallpapersafari.com/tablet/1536/2048/36/65/dgOZ6K.jpg'
+  }
+}
+// Movies Data
+export const Movies = Template.bind({});
+Movies.parameters = {
+  mockData: [
+      {
+          url: 'https://jsonplaceholder.typicode.com/editor',
+          method: 'GET',
+          status: 200,
+          response: {
+            editorData: MOVIES_DATA,
+            styles: {
+              backgroundColor: 'black',
+              fontColor: '#fff'
+            },
+            listStyles: {
+              headerTitleColor: '#FE4554',
+            },
+            sectionsStyles: {
+              sectionHeader: {
+                cardBorderSize: 2,
+                cardPadding: 2,
+                cardBackgroundColor: 'transparent',
+                cardBorderColor: '#FE4554',
+                cardTitleColor: 'white'
+              },
+              card: {
+                cardPadding: 6,
+                cardTitleFontSize: 15,
+                cardBackgroundColor: 'black',
+                onHoverBackgroundColor: '#FE4554',
+                cardTitleColor: 'gray',
+                controlsStyles: {
+                  showOnHover: true,
+                }
+              }
+            }
+        }
+      },
+      {
+        url: 'https://jsonplaceholder.typicode.com/music',
+        method: 'GET',
+        status: 200,
+        response: {
+            songs: MOVIES_SONGS,
+            styles: {
+              backgroundColor: 'black',
+              primaryColor: 'gray',
+              borderSize: 2,
+              borderColor: 'gray',
+              borderRadius: 15
+            }
+        }
+    },
+  ],
+};
+Movies.args = {
+  backgroundColor: 'black',
+  color: 'gray',
+  imgUrl: 'https://i.imgur.com/DfxFp56.png',
+  hoverColor: 'black',
+  editor: {
+    backgroundImage: 'https://thegreatfredini.files.wordpress.com/2015/10/img_0687.jpg'
+  }
+}

package/src/stories/Pages/ViewWorld/constatnts.js ADDED Viewed

@@ -0,0 +1,158 @@
+export const SPACES = [
+  {
+    title: 'Main List',
+    data: [
+      {title: 'Cargo Sprint'},
+      {title: 'Movies'}
+    ]
+  },
+  {
+    title: 'Entertainment List',
+    data: [
+      {title: 'Gaming'},
+      {title: 'Music'}
+    ]
+  }
+]
+  export const CARGO_DATA = {
+    blocks: [
+      {
+        type: "header",
+        data: {
+          text: "How To Handle Client Feedback at CargoSprint",
+          level: 1
+        }
+      },
+      {
+        type: "paragraph",
+        data: {
+          text:
+            "Hey. Meet the Editor. On this page you can see it in action — try to edit this text."
+        }
+      },
+      {
+          type: 'image',
+          "data" : {
+            "file": {
+                "url" : "https://cargosprint.com/assets/img/cs-home/isla-spass.svg"
+            },
+            "withBorder" : false,
+            "withBackground" : false,
+            "stretched" : false,
+            "caption": "CargoSprint logistics process"
+        }
+      },
+      {
+        "type" : "paragraph",
+        "data" : {
+            "text" : "Create a directory for your module, enter it and run <mark class=\"cdx-marker\">npm init</mark> command."
+        }
+    },
+    {
+        "type" : "table",
+        "data" : {
+          "withHeadings": true,
+          "content" : [ [ "Todo", "Doing", "Done" ], [ "CargoSprint Staff Interface", "", "" ], [ "", "DHL Project", "" ], ["", "", "Design Requirements"] ]
+        }
+      }
+    ]
+  }
+  export const CARGO_SONGS = [
+    { name: 'Requiem For A Dream', 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: 'Mushroomtopia', 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: 'Glow In The Dark', 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 const MUSIC_DATA = {
+    blocks: [
+      {
+        type: "header",
+        data: {
+          text: "Your favorite songs in one place with your friends Share The Music",
+          level: 2
+        }
+      },
+      {
+        type: "paragraph",
+        data: {
+          text:
+            "Find and listen to all the licensed songs you need and share the joy in REAL TIME while chatting with your friends. You don't need a subscription anymore."
+        }
+      },
+      {
+          type: 'image',
+          "data" : {
+            "file": {
+                "url" : "https://i.pinimg.com/originals/1b/12/f8/1b12f8f1f3ce3da4f68a176364335370.jpg"
+            },
+            "withBorder" : false,
+            "withBackground" : false,
+            "stretched" : false,
+            "caption": "1975 Concert"
+        }
+      }
+    ]
+  }
+  export const MUSIC_SONGS = [
+    { title: 'Requiem For A Dream', artist: 'frank ra', musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', cover: 'https://images.squarespace-cdn.com/content/v1/59c466b7cd0f682a310bac1e/1521413279928-QS15G3LTKI5JPASSHC5E/Website007.jpg?format=1000w' },
+    { title: 'Mushroomtopia', 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' },
+    { title: 'Glow In The Dark', 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 const GAMING_DATA = {
+    blocks: [
+      {
+        type: "header",
+        data: {
+          text: "Enjoy the first person reality experience.",
+          level: 2
+        }
+      },
+      {
+        type: "paragraph",
+        data: {
+          text:
+            "Valorant is a first person shooting game, in a 5 vs 5. make sure to bring your friends."
+        }
+      }
+    ]
+  }
+  export const GAMING_SONGS = [
+    { name: 'Requiem For A Dream', musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', cover: 'https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-5k-dq.jpg' },
+    { name: 'Mushroomtopia', 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: 'Glow In The Dark', 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 const MOVIES_DATA = {
+    blocks: [
+      {
+        type: "header",
+        data: {
+          text: "All The Movies You Want - In One Place",
+          level: 2
+        }
+      },
+      {
+        type: "paragraph",
+        data: {
+          text:
+            "Watch with your friends in real-time in our service"
+        }
+      }
+    ]
+  }
+  export const MOVIES_SONGS = [
+    { name: 'Shutter island', musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', cover: 'https://wallpaperaccess.com/full/2058367.jpg' },
+    { name: 'Mushroomtopia', 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: 'Glow In The Dark', 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' },
+  ]

package/src/stories/Pages/ViewWorld/styles.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "containerStyle": {
+    "backgroundColor": "white"
+  },
+  "headStyle": {},
+  "bodyStyle": {},
+  "widgetsStyle": {
+    "backgroundColor": "#F5F5F5",
+    "itemSpacing": 10,
+    "borderRadius": 4,
+    "padding": 10,
+    "verticalSpacing": 5,
+    "boxShadow": "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+    "fontFamily": "Arial"
+  },
+  "spacesStyle": {},
+  "navbarStyle": {}
+}

package/src/stories/Photo Album/DetailedPhoto/DetailedPhoto.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CardStyle6 from '../../Reusable Components/Cards/Card-style-6/CardStyle6';
+const DetailedPhoto = (props) => {
+    return (
+        <CardStyle6 cardClicked={() => props.cardClicked()} {...props.img}/>
+    )
+}
+DetailedPhoto.defaultProps = {};
+DetailedPhoto.propTypes = {
+}
+export default DetailedPhoto

package/src/stories/Photo Album/DetailedPhoto/DetailedPhoto.stories.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import DetailedPhoto from "./DetailedPhoto";
+import img5 from '../../assets/images/album5.jpg';
+export default {
+    title: 'Photo Album/Photo',
+    component: DetailedPhoto
+}
+export const photo = args => <DetailedPhoto
+    img={{
+            index: 0,
+            img: img5,
+            title: 'Image 1',
+            description: 'This is description test',
+            date: '2021-11-30'
+        }}
+    {...args} />