npm - @mohamed-karawia/library - Versions diffs - 0.1.0 - Mend

@mohamed-karawia/library 0.1.0

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.

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