@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Library/CreateFolder/CreateFolder.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+import TextField from '../../Common Inputs/TextField/TextField';
+import TextArea from '../../Common Inputs/CustomTextarea/CustomTextarea'
+
+const CreateFolder = ({saveBtnText, cancelBtnText, ...props}) => {
+
+    const initialValues = {
+        title: '',
+        description: ''
+    }
+
+    const formSchema = Yup.object().shape({
+        title: Yup.string()
+            .required("Required"),
+    });
+
+    const sections = [
+        {
+            title: "Folder Name",
+            body: [
+                (<TextField label="Title" name="title" />),
+                (<TextArea label="Discription" name="description" />)
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const folder = { ...values }
+        const date = new Date()
+        folder.date = date.toISOString().split('T')[0]
+        props.saveHandler(folder)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+
+
+    return (
+        <ReusableForm
+            formTitle="Add Photo"
+            initialValues={initialValues}
+            formSchema={formSchema}
+            sections={sections}
+            headerStyles={props.headerStyles}
+            saveBtnText={saveBtnText}
+            cancelBtnText={cancelBtnText}
+            saveHandler={onCreate}
+            cancelHandler={cancelHandler}
+            headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+            }}
+            sectionPadding={10}
+            bodyRowGap={10}
+            {...props.formStyles}
+        />
+    )
+}
+
+
+CreateFolder.defaultProps = {};
+
+CreateFolder.propTypes = {
+    saveHandler: PropTypes.func,
+    cancelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    formStyles: PropTypes.object
+}
+
+export default CreateFolder

package/src/stories/Library/CreateFolder/CreateFolder.stories.jsx

@@ -0,0 +1,32 @@
+import CreateFolder from './CreateFolder';
+
+export default {
+    title: 'Library/Create New Folder',
+    component: CreateFolder
+}
+
+const formStyles = {
+    headerStyles: {
+        padding: 10,
+        headerBackground: 'black',
+        titleColor: '#ffff',
+    },
+    sectionPadding: 10,
+    bodyRowGap: 10
+}
+
+const saveHandler = (photo) => {
+    console.log(photo)
+}
+
+const cancelHandler = () => {
+    console.log('Canceled')
+}
+
+export const Folder = args => <CreateFolder
+    saveHandler={saveHandler}
+    cancelHandler={cancelHandler}
+    saveBtnText="Create"
+    cancelBtnText="Cancel"
+    formStyles={formStyles}
+    {...args} />

package/src/stories/Library/Folders/Folders.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+
+import Gallery from '../../Reusable Components/Gallery/Gallery';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import CreateFolder from '../CreateFolder/CreateFolder';
+
+const galleryControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+]
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete Image' },
+]
+
+const Folders = ({
+    folders,
+    folderTitle,
+    columnsNumber,
+    columnGap,
+    rowGap,
+    cardClicked,
+    iconColor,
+    headerStyles,
+    ...props
+}) => {
+    const [showModal, setShowModal] = useState(false);
+
+    const onIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    const onAddFolder = (folder) => {
+        props.onAddFolder(folder)
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <Gallery
+                galleryTitle="Your Folders"
+                data={folders}
+                type="flat"
+                cardStyle="card-style-10"
+                headerStyles={headerStyles}
+                columnsNumber={columnsNumber}
+                galleryColumnGap={columnGap}
+                galleryRowGap={rowGap}
+                galleryControls={galleryControls}
+                iconClicked={onIconClicked}
+                cardClicked={cardClicked}
+                cardIconClicked={cardIconClicked}
+                cardControls={cardControls}
+                rowsHeight={140}
+                customCardStyles={{
+                    cardPadding: 10,
+                    iconColor
+                }}
+                {...props} />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <CreateFolder
+                    saveBtnText="Create"
+                    cancelBtnText="Cancel"
+                    saveHandler={onAddFolder}
+                    cancelHandler={cancelHandler}
+                />
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+Folders.defaultProps = {};
+
+Folders.propTypes = {
+    folders: PropTypes.array,
+    folderTitle: PropTypes.string,
+    columnsNumber: PropTypes.number,
+    columnGap: PropTypes.number,
+    rowGap: PropTypes.number,
+    galleryControls: PropTypes.array,
+    onIconClicked: PropTypes.func,
+    cardClicked: PropTypes.func,
+    cardIconClicked: PropTypes.func,
+    cardControls: PropTypes.array,
+    iconColor: PropTypes.string,
+    titleColor: PropTypes.string,
+    cardTitleColor: PropTypes.string,
+    cardDescriptionColor: PropTypes.string,
+    headerStyles: PropTypes.object
+}
+
+export default Folders;

package/src/stories/Library/Folders/Folders.stories.jsx

@@ -0,0 +1,34 @@
+import Folders from "./Folders";
+
+export default {
+    title: 'Library/Folders',
+    component: Folders
+}
+
+const folders = [
+    { title: 'Folder one', description: 'Discription for folder one' },
+    { title: 'Folder two', description: 'Discription for folder two' },
+    { title: 'Folder three', description: 'Discription for folder three' },
+    { title: 'Folder four', description: 'Discription for folder four' },
+    { title: 'Folder five', description: 'Discription for folder five' },
+    { title: 'Folder six', description: 'Discription for folder six' },
+]
+
+const Template = (args) => (
+    <Folders {...args} />
+);
+
+export const viewFolders = Template.bind({});
+viewFolders.args = {
+    folders,
+    folderTitle: 'Your Folders',
+    columnsNumber: 3,
+    headerStyles: {
+        padding: 10,
+        headerBackground: '#ff2d2d',
+        titleColor: 'white',
+        controlsStyles: {
+            iconSize: 25
+        }
+    }
+};

package/src/stories/Library/Notes/Notes.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+import List from '../../Reusable Components/ReusableList/ReusableList';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import CreateFolder from '../CreateFolder/CreateFolder';
+
+
+const listControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+]
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete Image' },
+]
+
+const Notes = ({
+    notes,
+    iconColor,
+    cardTitleFontSize,
+    cardTitleColor,
+    cardPadding,
+    ...props
+}) => {
+    const [showModal, setShowModal] = useState(false);
+
+    const onIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const cardClicked = () => {
+        console.log('test')
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    const onAddFolder = (folder) => {
+        props.onAddNote(folder)
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <List
+                listTitle="My Notes"
+                data={notes}
+                type='flat'
+                cardStyle="card-style-11"
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: '#FE1744',
+                    titleColor: '#ffff',
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                customCardStyles={{
+                    iconColor,
+                    cardTitleFontSize,
+                    cardTitleColor,
+                    cardPadding,
+                    controlsStyles: {
+                        iconColor: '#FE1744'
+                    }
+                }}
+                listControls={listControls}
+                cardControls={cardControls}
+                iconClicked={onIconClicked}
+                cardClicked={cardClicked}
+                cardIconClicked={cardIconClicked}
+            />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <CreateFolder
+                    saveBtnText="Create"
+                    cancelBtnText="Cancel"
+                    saveHandler={onAddFolder}
+                    cancelHandler={cancelHandler}
+                />
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+Notes.defaultProps = {};
+
+Notes.propTypes = {
+    notes: PropTypes.array.isRequired,
+    iconColor: PropTypes.string,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardPadding: PropTypes.number
+}
+
+export default Notes;

package/src/stories/Library/Notes/Notes.stories.jsx

@@ -0,0 +1,24 @@
+import Notes from './Notes';
+
+export default {
+    title: 'Library/Notes List',
+    component: Notes
+}
+
+const notes = [
+    {title: 'Study notes', date: '15/11/2020'},
+    {title: 'Music notes', date: '14/12/2020'},
+    {title: 'Workout notes', date: '5/8/2021'},
+    {title: 'Gaming notes', date: '14/4/2023'},
+    {title: 'Working notes', date: '5/6/2021'},
+]
+
+const Template = (args) => (
+    <Notes
+        {...args} />
+);
+
+export const List = Template.bind({});
+List.args = {
+    notes,
+};

package/src/stories/Library/ViewNote/ViewNote.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Editor from '../../Common Inputs/EditorComponent/EditorComponent';
+
+const ViewNote = () => {
+
+    const data = {
+        blocks: [
+            {
+                type: "header",
+                data: {
+                  text: "New Note",
+                  level: 1
+                }
+              }
+        ]
+    }
+
+    return (
+        <Editor data={data}/>
+    )
+}
+
+
+export default ViewNote

package/src/stories/Library/ViewNote/ViewNote.stories.jsx

@@ -0,0 +1,16 @@
+import ViewNote from './ViewNote';
+
+export default {
+    title: 'Library/View Note',
+    component: ViewNote
+}
+
+const Template = (args) => (
+    <ViewNote
+        {...args} />
+);
+
+export const Note = Template.bind({});
+Note.args = {
+    
+};

package/src/stories/Misc/Thumbnail/Thumbnail.jsx

@@ -0,0 +1,79 @@
+
+import React from 'react'
+import styled from 'styled-components'
+
+class Thumb extends React.PureComponent {
+    state = {
+      loading: false,
+      thumb: undefined,
+      file: {}
+    };
+  
+    componentWillReceiveProps(nextProps) {
+      if (!nextProps.file) { return; }
+
+      // Prevent from re-rendering
+      if(nextProps.file.lastModified === this.state.file.lastModified) {return;}
+  
+      this.setState({ loading: true }, () => {
+        let reader = new FileReader();
+  
+        reader.onloadend = () => {
+          this.setState({ loading: false, thumb: reader.result, file: nextProps.file });
+        };
+  
+        reader.readAsDataURL(nextProps.file);
+      });
+    }
+  
+    render() {
+      const { type, file } = this.props;
+      const { loading, thumb } = this.state;
+
+      const ImageThumbnail = styled.img`
+        border-radius: 50%;
+        object-fit: cover;
+        height: 175px;
+        width: 175px;
+        max-height: 175px;
+        max-width: 175px;
+        box-sizing: border-box;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+          0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      `
+      const ImageThumbHorizontal = styled.img`
+        height: 100%;
+        width: auto;
+        object-fit: contain;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+          0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      `
+
+      const ImageThumbnailLoading = styled.div`
+        height: 175px;
+        width: 175px;
+        max-height: 175px;
+        max-width: 175px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: Helvetica, Arial, sans-serif;
+        border: ${props => props.type === 'thumbnail' ? '1px solid #000' : 'none'};
+        margin: 0;
+        box-sizing: border-box;
+      `
+
+      if (loading) return <ImageThumbnailLoading type={type}>Loading...</ImageThumbnailLoading>
+
+      if (type === 'thumbnail') {
+        return <ImageThumbnail 
+                src={thumb ? thumb : 'https://avatars.dicebear.com/api/pixel-art-neutral/storybook.svg'}
+                alt={file ? file.name : ''}
+              />
+      } else {
+          return <ImageThumbHorizontal src={thumb} alt={file ? file.name: ''} />
+      } 
+    }
+}
+export default Thumb

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

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import List from '../../Reusable Components/ReusableList/ReusableList';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+
+import { AiOutlineFileAdd, AiOutlineDelete } from "react-icons/ai";
+import AddSong from '../../Forms/AddSong/AddSong';
+
+const listControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+]
+
+const cardControls = [
+    { icon: (<AiOutlineDelete />), action: 'delete', name: 'Delete album' },
+]
+
+const ViewAlbum = ({
+    album,
+    cardBackgroundColor,
+    songTitleColor,
+    ...props }) => {
+    const [showModal, setShowModal] = useState(false)
+
+    const onIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const onAddSong = (song) => {
+        setShowModal(false)
+        props.onAddSong(song)
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <List
+                listTitle="My Album"
+                data={album}
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                cardStyle="card-style-7"
+                type="flat"
+                cardClicked={(index) => props.cardClicked(index)}
+                iconClicked={onIconClicked}
+                listControls={listControls}
+                cardControls={cardControls}
+                cardIconClicked={cardIconClicked}
+                customCardStyles={{
+                    cardBackgroundColor: cardBackgroundColor,
+                    cardTitleColor: songTitleColor,
+                    controlsStyles: {
+                        iconColor: 'black'
+                    }
+                }}
+            />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <AddSong
+                    saveHandler={onAddSong}
+                    cancelHandler={cancelHandler}
+                    saveBtnText="Create"
+                    cancelBtnText="Cancel" />
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+ViewAlbum.defaultProps = {
+    cardBackgroundColor: 'white',
+};
+
+ViewAlbum.propTypes = {
+    album: PropTypes.array,
+    onDeleteSong: PropTypes.func,
+    onAddSong: PropTypes.func,
+    cardClicked: PropTypes.func,
+    cardBackgroundColor: PropTypes.string,
+    songTitleColor: PropTypes.string,
+};
+
+export default ViewAlbum

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

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