@mohamed-karawia/library 0.1.3 → 0.1.7

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

@@ -1,270 +0,0 @@
-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/Photo Album/DetailedPhoto/DetailedPhoto.stories.jsx

@@ -1,20 +0,0 @@
-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} />
-

package/src/stories/Photo Album/ViewAlbum/ViewAlbum.stories.jsx

@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-import ViewAlbum from "./ViewAlbum";
-import { deleteFromArrayByIndex, addObjectToArray } from '../../helpers/util';
-
-import img1 from '../../assets/images/album1.jpg';
-import img2 from '../../assets/images/album2.jpg';
-import img3 from '../../assets/images/album3.jpg';
-import img4 from '../../assets/images/album4.jpg';
-import img5 from '../../assets/images/album5.jpg';
-import img6 from '../../assets/images/album6.jpg';
-
-
-export default {
-    title: 'Photo Album/View Album',
-    component: ViewAlbum
-}
-
-export const Album = args => {
-    const [album, setAlbum] = useState([
-        { index: 0, img: img5, title: 'Image 1', description: 'This is description test', date: '2021-11-30' },
-        { index: 1, img: img3, title: 'Image 2', description: 'This is description test', date: '2021-11-30' },
-        { index: 2, img: img6, title: 'Image 3', description: 'This is description test', date: '2021-11-30' },
-        { index: 3, img: img2, title: 'Image 4', description: 'This is description test', date: '2021-11-30' },
-        { index: 4, img: img1, title: 'Image 5', description: 'This is description test', date: '2021-11-30' },
-        { index: 5, img: img4, title: 'Image 6', description: 'This is description test', date: '2021-11-30' },
-    ])
-
-    const onAddPhoto = (photo) => {
-        const newImg = {
-            img: photo.cover.meta.previewUrl,
-            title: photo.title,
-            description: photo.description,
-            date: photo.date
-        }
-        setAlbum(addObjectToArray(album, newImg))
-    }
-
-    const cardIconClicked = (action, index) => {
-        switch (action) {
-            case 'delete':
-                onDeletePhoto(index)
-                break;
-            default:
-                break;
-        }
-    }
-
-    const onDeletePhoto = (index) => {
-        setAlbum(deleteFromArrayByIndex(album, index))
-    }
-
-    return (
-        <ViewAlbum
-            album={album}
-            addPhoto={onAddPhoto}
-            deletePhoto={onDeletePhoto}
-            cardIconClicked={cardIconClicked}
-            {...args} />
-    )
-}

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.stories.jsx

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import ViewAlbums from './ViewAlbums';
-import { deleteFromArrayByIndex, addObjectToArray } from '../../helpers/util';
-
-import img1 from '../../assets/images/album1.jpg';
-import img2 from '../../assets/images/album2.jpg';
-import img3 from '../../assets/images/album3.jpg';
-import img4 from '../../assets/images/album4.jpg';
-import img5 from '../../assets/images/album5.jpg';
-import img6 from '../../assets/images/album6.jpg';
-
-
-export default {
-    title: 'Photo Album/Albums/Albums',
-    component: ViewAlbums
-}
-
-export const Albums = args => {
-    const [albums, setAlbums] = useState([
-        { img: img1, title: 'Album 1', count: '24' },
-        { img: img2, title: 'Album 2', count: '24' },
-        { img: img3, title: 'Album 3', count: '24' },
-        { img: img4, title: 'Album 4', count: '24' },
-        { img: img5, title: 'Album 5', count: '24' },
-        { img: img6, title: 'Album 6', count: '24' },
-    ])
-
-    const cardIconClicked = (action, index) => {
-        switch (action) {
-            case 'delete':
-                onDeleteAlbum(index)
-                break;
-            default:
-                break;
-        }
-    }
-
-    const onDeleteAlbum = (index) => {
-        setAlbums(deleteFromArrayByIndex(albums, index))
-    }
-
-    const onAddAlbum = (album) => {
-        const newAlbum = {
-            img: album.cover.meta.previewUrl,
-            title: album.title,
-            count: '55'
-        }
-        setAlbums(addObjectToArray(albums, newAlbum))
-    }
-
-    return (
-        <ViewAlbums
-            albums={albums}
-            cardIconClicked={cardIconClicked}
-            onDeleteAlbum={onDeleteAlbum}
-            onAddAlbum={onAddAlbum}
-            {...args} />
-    )
-}

package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import CardStyle1 from './CardStyle1';
-
-import { cardControls } from '../../fakeData'
-
-export default {
-    title: 'Reusable Components/Cards/Card style 1',
-    component: CardStyle1
-}
-
-export const Card = args => (
-    <CardStyle1
-        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
-        title="Card Style 1"
-        description="Card style 1 description test"
-        cardControls={cardControls}
-        controlsStyles={{
-            iconColor: 'black',
-            showOnHover: true,
-        }}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.stories.jsx

@@ -1,21 +0,0 @@
-import CardStyle10 from "./CardStyle10";
-import { AiOutlineHeart, AiOutlineAudioMuted } from "react-icons/ai";
-
-
-export default {
-    title: 'Reusable Components/Cards/Card style 10',
-    component: CardStyle10
-}
-
-const cardControls = [
-    { icon: (<AiOutlineHeart />), action: 'like', name: 'Add member' },
-    { icon: (<AiOutlineAudioMuted />), action: 'mute', name: 'Add member' },
-]
-
-export const Card = args => (
-    <CardStyle10
-        title="Folder"
-        description="Folder description test"
-        cardControls={cardControls}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.stories.jsx

@@ -1,21 +0,0 @@
-import CardStyle11 from "./CardStyle11";
-import { AiOutlineHeart, AiOutlineAudioMuted } from "react-icons/ai";
-
-export default {
-    title: 'Reusable components/Cards/Card Style 11',
-    component: CardStyle11
-}
-
-const cardControls = [
-    { icon: (<AiOutlineHeart />), action: 'like', name: 'Add member' },
-    { icon: (<AiOutlineAudioMuted />), action: 'mute', name: 'Add member' },
-]
-
-export const Card = args => <CardStyle11 
-    title="Study Notes"
-    date="15/11/2021"
-    cardControls={cardControls}
-    controlsStyles={{
-        iconColor: 'black'
-    }}
-{...args} />

package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.stories.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import CardStyle2 from './CardStyle2';
-
-import { cardControls } from '../../fakeData'
-
-export default {
-    title: 'Reusable Components/Cards/Card style 2',
-    component: CardStyle2
-}
-
-export const Card = args => (
-    <CardStyle2
-        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
-        title="Card Style 2"
-        description="Card style 2 description test"
-        cardControls={cardControls}
-        darkOnHover={true}
-        controlsStyles={{
-            iconColor: 'black',
-            position: 'center',
-            showOnHover: true
-        }}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import CardStyle3 from './CardStyle3';
-
-import { cardControls } from '../../fakeData'
-
-
-export default {
-    title: 'Reusable Components/Cards/Card style 3',
-    component: CardStyle3
-}
-
-export const Card = args => (
-    <CardStyle3
-        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
-        title="Card Style 3"
-        description="Card style 3 description test"
-        cardControls={cardControls}
-        controlsStyles={{
-            iconColor: 'black'
-        }}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import CardStyle4 from './CardStyle4';
-
-import { cardControls } from '../../fakeData'
-
-export default {
-    title: 'Reusable Components/Cards/Card style 4',
-    component: CardStyle4
-}
-
-export const Card = args => (
-    <CardStyle4
-        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
-        title="Card Style 4"
-        description="Card style 4 description test"
-        cardControls={cardControls}
-        darkOnHover={true}
-        controlsStyles={{
-            iconColor: 'black',
-            position: 'center',
-            showOnHover: true,
-            iconColor: 'red'
-        }}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.jsx

@@ -1,9 +0,0 @@
-import CardStyle6 from "./CardStyle6";
-import img from '../../../assets/images/album1.jpg'
-
-export default {
-    title: 'Reusable Components/cards/Card style 6',
-    component: CardStyle6
-}
-
-export const Card = args => <CardStyle6 img={img} title="Test" {...args}/>

package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import CardStyle7 from './CardStyle7';
-import { cardControls } from '../../fakeData'
-
-import img4 from '../../../assets/images/music4.jpg';
-
-export default {
-    title: 'Reusable Components/Cards/Card style 7',
-    component: CardStyle7
-}
-
-export const Card = args => (
-    <CardStyle7
-        img={img4}
-        title="Card Style 7"
-        description="Card style 7 description test"
-        time="5:10"
-        cardControls={cardControls}
-        controlsStyles={{
-            iconColor: 'black',
-        }}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.jsx

@@ -1,29 +0,0 @@
-import CardStyle8 from './CardStyle8';
-
-import { controls } from '../../fakeData'
-
-export default {
-    title: 'Reusable Components/Cards/Card style 8',
-    component: CardStyle8
-}
-
-export const Card = args => (
-    <CardStyle8
-        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
-        username="Card Style 8"
-        date="15/12/2021"
-        text="Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test "
-        cardControls={controls}
-        media={(<img src="https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"/>)}
-        controlsStyles={{
-            iconColor: 'black',
-            showOnHover: true,
-            position: 'absolute',
-            iconBackground: '#414141',
-            iconSize: 18,
-            iconColor: 'white',
-            dropdownBackground: '#414141',
-            dropdownFontColor: 'white'
-        }}
-        {...args}
-    />)

package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.stories.jsx

@@ -1,14 +0,0 @@
-import CardStyle9 from "./CardStyle9";
-
-export default {
-    title: 'Reusable Components/Cards/Card style 9',
-    component: CardStyle9
-}
-
-export const Card = args =>
-    <CardStyle9
-        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
-        username="User Name"
-        answered={'3/4'}
-        status="pending"
-        {...args} />