@mohamed-karawia/library 0.1.4 → 0.1.8

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

@@ -1,167 +0,0 @@
-import React from 'react';
-import withFormik from "storybook-formik";
-import * as Yup from 'yup';
-
-import ReusableForm from './ReusableForm';
-import TextField from '../../Common Inputs/TextField/TextField';
-import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
-import CustomTextarea from '../../Common Inputs/CustomTextarea/CustomTextarea';
-import CheckboxGroup from '../../Common Inputs/CheckboxGroup/CheckboxGroup';
-import CustomAutoComplete from '../../Common Inputs/CustomAutoComplete/CustomAutoComplete';
-import CustomSelect from '../../Common Inputs/CustomSelect/CustomSelect';
-import DatePicker from '../../Common Inputs/DatePicker/DatePicker';
-
-const submitHandler = (values) => {
-    console.log(values)
-}
-
-const cancelHandler = () => {
-    console.log('cancel')
-}
-
-const sections = [
-    {
-        title: "Server Name",
-        body: [(<TextField label="Server Name" name="userName" />)]
-    },
-    {
-        title: "User Name",
-        body: [
-            (<TextField label="User Name" name="firstName" />),
-            (<TextField label="Last Name" name="lastName" />),
-        ],
-        bodyColumns: 2
-    },
-    {
-        title: 'More inputs',
-        body: [
-            (<TextField label="Input one" name="input1" />),
-            (<TextField label="Input two" name="input2" />),
-        ],
-        hideTitle: true
-    },
-    {
-        title: "Server history",
-        body: [
-            (<TextField label="Age" name="age" />),
-            (<TextField label="Hobby" name="hobby" />),
-            (<CustomTextarea label="Discription" name="discription" />),
-            (<CheckboxGroup label="Checkbox Group" name="acceptTerms" options={[
-                { label: 'option 1', value: '1' },
-                { label: 'option 2', value: '2' },
-                { label: 'option 3', value: '3' },
-            ]} />),
-            (<CustomAutoComplete
-                name="search"
-                label="Search"
-                items={[
-                    { id: 'foo', label: 'foo' },
-                    { id: 'bar', label: 'bar' },
-                    { id: 'baz', label: 'baz' },
-                ]}
-            />),
-            (
-                <CustomSelect label="options" options={[
-                    { label: 'select an option', value: '' },
-                    { label: 'option 1', value: '1' },
-                    { label: 'option 2', value: '2' },
-                    { label: 'option 3', value: '3' },
-                ]} name="select" />
-            )
-        ]
-    },
-    {
-        title: "User Media",
-        body: [
-            (<CustomDropZone label="User Profile" name="file" />),
-            (<DatePicker label="Date Range" name='date' />)
-        ],
-    },
-]
-
-const initialValues = {
-    userName: '',
-    firstName: '',
-    lastName: '',
-    input1: '',
-    input2: '',
-    age: '',
-    hobby: '',
-    discription: '',
-    acceptTerms: [],
-    search: '',
-    select: '',
-    file: '',
-    date: {
-        startDate: null,
-        endDate: null
-    }
-
-}
-const formSchema = Yup.object().shape({
-    userName: Yup.string()
-        .required("Required"),
-    firstName: Yup.string()
-        .required("Required"),
-    lastName: Yup.string()
-        .required("Required"),
-    age: Yup.string()
-        .required("Required"),
-    hobby: Yup.string()
-        .required("Required"),
-    discription: Yup.string()
-        .required('Required'),
-    acceptTerms: Yup.array()
-        .min(1, 'You must choose at least one element'),
-    search: Yup.string()
-        .required("Required"),
-    select: Yup.string()
-        .required("Required"),
-    date: Yup.object().shape({
-        startDate: Yup.object()
-            .required("Required")
-            .typeError('Invalid Start Date'),
-        endDate: Yup.object()
-            .required("Required")
-            .typeError('Invalid End Date')
-    })
-});
-
-export default {
-    title: 'Reusable Components/Reusable Formik Form',
-    component: ReusableForm,
-    // decorators: [withFormik],
-    // parameters: {
-    //     formik: {
-    //         initialValues,
-    //         validationSchema: formSchema,
-    //         onSubmit: submitHandler
-    //     },
-    // }
-}
-
-export const form = args => (
-    <ReusableForm
-        formTitle="Reusable form"
-        initialValues={initialValues}
-        formSchema={formSchema}
-        sections={sections}
-        headerStyles={{
-            padding: 10,
-            headerBackground: 'black',
-            titleColor: '#ffff',
-        }}
-        sectionHeaderStyles={{
-            padding: 6,
-            headerBackground: '#FE1744',
-            titleColor: '#ffff',
-        }}
-        bodyPadding={10}
-        saveBtnText="Save"
-        cancelBtnText="Cancel"
-        saveBtnHandle={submitHandler}
-        cancelHandler={cancelHandler}
-        bodyRowGap={20}
-        bodyColumnGap={10}
-        {...args} />
-)

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

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import ReusableHeader from './ReusableHeader';
-import { controls } from '../fakeData'
-
-export default {
-    title: 'Reusable Components/Reusable Header',
-    component: ReusableHeader
-}
-
-const Template = (args) => (<ReusableHeader {...args} />
-);
-
-export const Header = Template.bind({});
-Header.args = {
-    title: "Reusable Header",
-    discription: "This is a discription for header",
-    controls: controls,
-    controlsStyles: {
-        iconColor: 'red'
-    }
-};

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

@@ -1,70 +0,0 @@
-import React from 'react';
-// Components
-import ReusableList from './ReusableList';
-// Data
-import { controls, data, dataWithSections, cardControls } from '../fakeData';
-export default {
-    title: 'Reusable components/List',
-    component: ReusableList
-}
-
-const Template = (args) => (<ReusableList
-    listTitle='Reusable List'
-    cardStyle="card-style-1"
-    {...args} />
-);
-
-export const ListFlat = Template.bind({});
-ListFlat.args = {
-    data: data,
-    type: "flat",
-    cardControls,
-    headerStyles: {
-        padding: 10,
-        headerBackground: '#FE1744',
-        titleColor: '#ffff',
-        controlsStyles: {
-            dropdownBackground: 'black',
-            dropdownFontColor: 'white',
-            dropdownItemHoverColor: '#FE1744'
-        },
-    },
-    listControls: controls,
-    customCardStyles: {
-        controlsStyles: {
-            iconColor: 'black',
-            showOnHover: true
-        }
-    },
-    hideTitle: false
-};
-
-export const ListSectioned = Template.bind({});
-ListSectioned.args = {
-    data: dataWithSections,
-    type: "sectioned",
-    sectionHeaderStyles: {
-        cardTitleColor: 'white',
-        cardBackgroundColor: 'black',
-        cardPadding: 10
-    },
-    cardControls,
-    headerStyles: {
-        padding: 10,
-        headerBackground: '#FE1744',
-        titleColor: '#ffff',
-        controlsStyles: {
-            dropdownBackground: 'black',
-            dropdownFontColor: 'white',
-            dropdownItemHoverColor: '#FE1744'
-        },
-    },
-    listControls: controls,
-    customCardStyles: {
-        controlsStyles: {
-            iconColor: 'black',
-            showOnHover: true
-
-        }
-    },
-}

package/src/stories/Reusable Components/SearchCard/SearchCard.stories.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-import SearchCard from './SearchCard';
-
-export default {
-  title: 'Components/SearchCard/Item',
-  component: SearchCard,
-};
-
-export const Default = (args) => <SearchCard {...args} />

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

@@ -1,78 +0,0 @@
-import React from 'react';
-
-import SpaceContainer from './SpaceContainer';
-import EditorComponent from '../../Common Inputs/EditorComponent/EditorComponent'
-
-import { cardControls, controls } from '../fakeData';
-
-
-const data = {
-  blocks: [
-    {
-      type: "header",
-      data: {
-        text: "Editor.js",
-        level: 1
-      }
-    },
-    {
-      type: "paragraph",
-      data: {
-        text:
-          "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
-      }
-    },
-    {
-      type: 'image',
-      "data": {
-        "file": {
-          "url": "https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"
-        },
-        "caption": "Caption Example",
-        "withBorder": false,
-        "withBackground": false,
-        "stretched": false
-      }
-    },
-    {
-      "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": [["Kine", "Pigs", "Chicken"], ["1 pcs", "3 pcs", "12 pcs"], ["100$", "200$", "150$"]]
-      }
-    }
-
-  ]
-};
-
-export default {
-  title: 'Reusable Components/Space Container',
-  component: SpaceContainer
-}
-
-const Template = (args) => (
-  <SpaceContainer {...args}>
-    <EditorComponent data={data} />
-  </SpaceContainer>
-);
-
-export const EditorSpace = Template.bind({});
-EditorSpace.args = {
-  title: "Space Title",
-  discription: "Lorem ipsum dolor sit amet consectetur.",
-  controls: cardControls,
-  headerStyles: {
-    padding: 10,
-    headerBackground: '#FE1744',
-    titleColor: '#ffff',
-    controlsStyles: {
-      iconsGap: 5
-    },
-  },
-};

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

@@ -1,8 +0,0 @@
-import Spinner from "./Spinner";
-
-export default {
-    title: 'Reusable Components/Spinner/Spinner',
-    component: Spinner
-}
-
-export const spinner = args => <Spinner {...args} />

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

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import WidgetContainer from './WidgetContainer';
-import { data, controls } from '../fakeData'
-
-const Songs = [
-    { name: 'Music 1', 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: 'Music 2', 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: 'Music 3', 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 default {
-    title: 'Reusable components/Widget Container',
-    component: WidgetContainer
-}
-
-const Template = (args) => (<WidgetContainer {...args} />);
-
-export const ListWidget = Template.bind({});
-ListWidget.args = {
-    widgetType: "list",
-    widgetTitle: "test",
-    widgetControls: controls,
-    widgetProps: {
-        data: data,
-        cardStyle: "card-style-2",
-        type: "flat"
-    },
-    headerStyles: {
-        padding: 5,
-        headerBackground: '#FE1744',
-        titleColor: '#ffff',
-        controlsStyles: {
-            dropdownBackground: 'black',
-            dropdownFontColor: 'white',
-            dropdownItemHoverColor: '#FE1744'
-        },
-    }
-};
-
-
-export const MusicWidget = Template.bind({});
-MusicWidget.args = {
-    widgetType: "music player",
-    widgetTitle: "Music Player",
-    widgetControls: controls,
-    widgetProps: {
-        playlist: Songs
-    },
-    headerStyles: {
-        padding: 5,
-        headerBackground: '#FE1744',
-        titleColor: '#ffff',
-        controlsStyles: {
-            dropdownBackground: 'black',
-            dropdownFontColor: 'white',
-            dropdownItemHoverColor: '#FE1744'
-        },
-    }
-};
-

package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.stories.js

@@ -1,10 +0,0 @@
-import React from "react"
-
-import WelcomeSpace from "./WelcomeSpace"
-
-export default {
-    title: 'Spaces/Welcome',
-    component: WelcomeSpace
-}
-
-export const Default = (args) => <WelcomeSpace {...args} />

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.jsx

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-import AlbumsGallery from "./AlbumsGallery";
-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: 'Video Album/Albums Gallery',
-    component: AlbumsGallery
-}
-
-export const Gallery = 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 onAddAlbum = (album) => {
-        const newAlbum = {
-            img: album.cover.meta.previewUrl,
-            title: album.title,
-            count: '55'
-        }
-        setAlbums(addObjectToArray(albums, newAlbum))
-    }
-
-    const onDeleteAlbum = (index) => {
-        setAlbums(deleteFromArrayByIndex(albums, index))
-    }
-
-    return (
-        <AlbumsGallery
-            videoAlbums={albums}
-            onAddAlbum={onAddAlbum}
-            cardIconClicked={cardIconClicked}
-            {...args}
-        />
-    )
-}

package/src/stories/VideoAlbum/Comments/Comments.stories.jsx

@@ -1,18 +0,0 @@
-import Comments from "./Comments";
-
-export default {
-    title: 'Video Album/Comments',
-    component: Comments
-}
-
-const comments = [
-    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
-    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
-    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
-    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
-    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
-]
-
-export const videoComments = args => <Comments
-    comments={comments}
-{...args}/>

package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.stories.jsx

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-import VideoPlayer from "./VideoPlayer";
-
-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';
-
-export default {
-    title: 'Video Album/Video Player',
-    component: VideoPlayer
-}
-
-export const Video = args => {
-    const [currentVideo, setCurrentVideo] = useState(0);
-    const [album, setAlbum] = useState([
-        { index: 0, img: img4, src: 'https://www.youtube.com/watch?v=hl5Kt0BxTa8', title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
-        { index: 2, img: img6, src: 'https://www.youtube.com/watch?v=EYyarcp5LtU', title: 'Still Loving You', description: 'Scorpions', time: '4:20' },
-        { index: 1, img: img5, src: 'https://www.youtube.com/watch?v=vlaQu_rmIQo', title: 'Night', description: 'Frank Ocean', time: '5:20' },
-        { index: 3, img: img1, src: 'https://www.youtube.com/watch?v=VNsd8Yo5zvc', title: 'Somebody Else', description: '1975', time: '5:20' },
-        { index: 4, img: img3, src: 'https://www.youtube.com/watch?v=CD-E-LDc384', title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
-        { index: 5, img: img2, src: 'https://www.youtube.com/watch?v=8SbUC-UaAxE', title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
-    ])
-
-    const cardIconClicked = (action, index) => {
-        switch (action) {
-            case 'play':
-                onPlayVideo(index)
-                break;
-            case 'delete':
-                deleteSonngFromAlbum(index)
-                break;
-            default:
-                break;
-        }
-    }
-
-    const nextVideo = () => {
-        if (currentVideo < album.length - 1) {
-            setCurrentVideo(currentVideo + 1)
-        } else {
-            setCurrentVideo(0)
-        }
-    }
-
-    const prevVideo = () => {
-        if (currentVideo !== 0) {
-            setCurrentVideo(currentVideo - 1)
-        }
-    }
-
-    const onPlayVideo = (index) => {
-        setCurrentVideo(index)
-    }
-
-    const onAddSong = (song) => {
-        const newSong = {
-            song: song.song.file,
-            img: 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 deleteSonngFromAlbum = (index) => {
-        setAlbum(deleteFromArrayByIndex(album, index))
-    }
-
-    return (
-        <VideoPlayer
-            iconsColor="white"
-            src={album[currentVideo].src}
-            nextVideo={nextVideo}
-            prevVideo={prevVideo}
-            {...args} />
-    )
-}

package/src/stories/VideoAlbum/VideoSpace/VideoSpace.stories.jsx

@@ -1,23 +0,0 @@
-import VideoSpace from "./VideoSpace";
-
-export default {
-    title: 'Video Album/Video Space',
-    component: VideoSpace
-}
-
-const comments = [
-    { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
-    { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
-    { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
-    { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
-    { img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.' },
-]
-
-export const Space = args =>
-    <VideoSpace
-        backgroundColor="white"
-        title="Video Title"
-        discription="Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium placeat nostrum tempora suscipit laborum quibusdam."
-        date="10/11/2022"
-        comments={comments}
-        {...args} />

package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.jsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import ViewAlbum from './ViewAlbum';
-import { deleteFromArrayByIndex, addObjectToArray } 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';
-
-export default {
-    title: 'Video Album/Album Gallery',
-    component: ViewAlbum
-}
-
-export const Gallery = args => {
-    const [album, setAlbum] = useState([
-        { index: 0, img: img4, title: 'Plans We Made', description: 'Son Lux', time: '5:20' },
-        { index: 2, img: img6, title: 'Still Loving You', description: 'Scorpions', time: '4:20' },
-        { index: 1, img: img5, title: 'Night', description: 'Frank Ocean', time: '5:20' },
-        { index: 3, img: img1, title: 'Somebody Else', description: '1975', time: '5:20' },
-        { index: 4, img: img3, title: 'Enter Sandman', description: 'Metallica', time: '5:20' },
-        { index: 5, img: img2, title: 'November Rain', description: "Guns N' Roses", time: '5:20' },
-    ])
-
-    const cardIconClicked = (action, index) => {
-        switch (action) {
-            case 'delete':
-                deleteFromAlbums(index)
-                break;
-            default:
-                break;
-        }
-    }
-
-    const onAddAlbum = (album) => {
-        const newAlbum = {
-            img: album.cover.preview,
-            title: album.title,
-            description: album.artist
-        }
-        setAlbum(addObjectToArray(album, newAlbum))
-    }
-
-    const deleteFromAlbums = (index) => {
-        setAlbum(deleteFromArrayByIndex(album, index))
-    }
-
-    return (
-        <ViewAlbum
-            album={album}
-            cardIconClicked={cardIconClicked}
-            onAddAlbum={onAddAlbum}
-        {...args} />
-    )
-}