@mohamed-karawia/library 0.1.6 → 0.1.11

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

package/src/stories/Reusable Components/Cards/Card.stories.jsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import Card from './Card';
-
-export default {
-    title: 'Reusable Components/Cards/Regular Card',
-    component: Card,
-};
-
-const Template = (args) => <Card  {...args} />;
-
-export const CardWithImage = Template.bind({});
-CardWithImage.args = {
-    title: 'Card with image',
-    description: 'Lorem ipsum dolor sit amet consectetur.',
-    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
-    cardBackgroundColor: '#f1d6d6',
-    cardRadius: '20',
-    cardTitleFontSize: '',
-    cardTitleColor: '',
-    cardImageRadius: '100',
-    cardDescriptionFontSize: '',
-    cardDescriptionColor: '',
-    cardDirection: '',
-    cardPadding: '10',
-    imgSize: '90',
-    cardBorderSize: '',
-    cardBorderColor: '',
-    controlsStyles: {
-        showOnHover: true,
-        iconBackground: "#272727",
-        dropdownBackground: "#272727",
-        dropdownFontColor: "white",
-        dropdownItemHoverColor: "#414141",
-        iconBackgroundHover: "#414141"
-    }
-};
-
-export const CardWithImageColumn = Template.bind({});
-CardWithImageColumn.args = {
-    title: 'Card with image column',
-    description: 'Lorem ipsum dolor sit amet consectetur.',
-    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
-    cardBackgroundColor: '#f1d6d6',
-    cardRadius: '20',
-    cardTitleFontSize: '',
-    cardTitleColor: '',
-    cardImageRadius: '100',
-    cardDescriptionFontSize: '',
-    cardDescriptionColor: '',
-    cardDirection: 'column',
-    cardPadding: '10',
-    imgSize: '90',
-    cardBorderSize: '',
-    cardBorderColor: '',
-    controlsStyles: {
-        showOnHover: true,
-        iconBackground: "#272727",
-        dropdownBackground: "#272727",
-        dropdownFontColor: "white",
-        dropdownItemHoverColor: "#414141",
-        iconBackgroundHover: "#414141"
-    }
-};
-
-export const CardWithoutImage = Template.bind({});
-CardWithoutImage.args = {
-    title: 'Card with image',
-    description: 'Lorem ipsum dolor sit amet consectetur.',
-    img: '',
-    cardBackgroundColor: '#f1d6d6',
-    cardRadius: '20',
-    cardTitleFontSize: '',
-    cardTitleColor: '',
-    cardImageRadius: '100',
-    cardDescriptionFontSize: '',
-    cardDescriptionColor: '',
-    cardDirection: '',
-    cardPadding: '10',
-    imgSize: '90',
-    cardBorderSize: '',
-    cardBorderColor: '',
-    controlsStyles: {
-        showOnHover: true,
-        iconBackground: "#272727",
-        dropdownBackground: "#272727",
-        dropdownFontColor: "white",
-        dropdownItemHoverColor: "#414141",
-        iconBackgroundHover: "#414141"
-    }
-};
-
-export const CardWithoutImageColumn = Template.bind({});
-CardWithoutImageColumn.args = {
-    title: 'Card with image column',
-    description: 'Lorem ipsum dolor sit amet consectetur.',
-    img: '',
-    cardBackgroundColor: '#f1d6d6',
-    onHoverBackgroundColor: '',
-    cardRadius: '20',
-    cardTitleFontSize: '',
-    cardTitleColor: '',
-    cardImageRadius: '100',
-    cardDescriptionFontSize: '',
-    cardDescriptionColor: '',
-    cardDirection: 'column',
-    cardPadding: '10',
-    imgSize: '90',
-    cardBorderSize: '',
-    cardBorderColor: '',
-    controlsStyles: {
-        showOnHover: true,
-        iconBackground: "#272727",
-        dropdownBackground: "#272727",
-        dropdownFontColor: "white",
-        dropdownItemHoverColor: "#414141",
-        iconBackgroundHover: "#414141"
-    }
-};

package/src/stories/Reusable Components/Controls/Controls.stories.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Controls from './Controls';
-
-import { AiOutlineUserAdd, AiOutlineDelete } from "react-icons/ai";
-import { IoIosAirplane, IoIosAlarm } from "react-icons/io";
-
-const controls = [
-    { icon: (<AiOutlineUserAdd />), action: 'add', name: 'Add member' },
-    { icon: (<AiOutlineDelete />), action: 'remove', name: 'Add member' },
-    { icon: (<IoIosAirplane />), action: 'add', name: 'Some Icon' },
-    { icon: (<IoIosAlarm />), action: 'remove', name: 'Another Icons' },
-]
-
-export default {
-    title: 'reusable Components/Controls',
-    component: Controls
-}
-
-const Template = (args) => <Controls {...args} />;
-
-export const fixedControls = Template.bind({});
-fixedControls.args = {
-    controls,
-};

package/src/stories/Reusable Components/Gallery/Gallery.stories.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import Gallery from './Gallery';
-// Data
-import { controls, data, dataWithSections, cardControls } from '../fakeData';
-// Styles
-import { headingControlsStyles, galleryCardControlsStyles } from '../commonStyles';
-
-export default {
-    title: 'Reusable components/Gallery',
-    component: Gallery
-}
-
-const Template = (args) => (
-    <Gallery
-        galleryTitle="Reusable Gallery"
-        galleryControls={controls}
-        headerStyles={{
-            padding: 10,
-            headerBackground: '#FE1744',
-            titleColor: '#ffff',
-        }}
-        columnsNumber={3}
-        galleryColumnGap={10}
-        controlsStyles={headingControlsStyles}
-        cardStyle="card-style-6"
-        customCardStyles={galleryCardControlsStyles}
-        {...args} />
-);
-
-export const GalleryFlat = Template.bind({});
-GalleryFlat.args = {
-    data: data,
-    type: "flat",
-    cardControls: cardControls
-};
-
-export const GallerySectioned = Template.bind({});
-GallerySectioned.args = {
-    data: dataWithSections,
-    type: "sectioned",
-    cardControls: cardControls
-}

package/src/stories/Reusable Components/Mention/Mention.stories.jsx

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import Mention from "./Mention";
-
-export default {
-    title: 'Resuable Components/Mention',
-    component: Mention
-}
-
-const users = [
-    {
-        id: 'walter',
-        display: 'Walter White',
-    },
-    {
-        id: 'jesse',
-        display: 'Jesse Pinkman',
-    },
-    {
-        id: 'gus',
-        display: 'Gustavo "Gus" Fring',
-    },
-    {
-        id: 'saul',
-        display: 'Saul Goodman',
-    },
-    {
-        id: 'hank',
-        display: 'Hank Schrader',
-    },
-    {
-        id: 'skyler',
-        display: 'Skyler White',
-    },
-    {
-        id: 'mike',
-        display: 'Mike Ehrmantraut',
-    },
-    {
-        id: 'lydia',
-        display: 'Lydìã Rôdarté-Qüayle',
-    },
-]
-
-export const MentionArea = args => {
-    const [value, setValue] = useState('');
-
-    return (
-    <Mention
-        value={value}
-        handleOnChange={(value) => setValue(value)}
-        users={users}
-        {...args}
-        />
-        )
-}