@mohamed-karawia/library 0.1.0

package/src/stories/Forms/Create-Profile/subcomponents/LogoUploader.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Dropzone from 'react-dropzone';
+import styled from 'styled-components'
+
+import Thumbnail from '../../../Misc/Thumbnail/Thumbnail'
+
+const LogoUploader = ({ value, logo, setFieldValue }) => 
+    <Dropzone accept="image/*" onDrop={acceptedFiles => {
+        if (acceptedFiles.length === 0) return
+
+        setFieldValue(value, acceptedFiles[0])
+    }}>
+        {({getRootProps, getInputProps, isDragActive}) => (
+            <StyledDropSection active={isDragActive}>
+                <div {...getRootProps()} className="dropzoneWrapper">
+                    <input {...getInputProps()} />
+                    {
+                        isDragActive &&
+                        <p className="text-green">Slow & steady!</p>
+                    }
+
+                    {
+                        !isDragActive &&
+                        !logo &&
+                        <p>Drop File</p>
+                    }
+
+                    {
+                        logo &&
+                        !isDragActive && 
+                        <Thumbnail file={logo} type="horizontal" />
+                    }
+                </div>
+            </StyledDropSection>
+        )}
+    </Dropzone>
+
+const StyledDropSection = styled.section`
+    width: 100%;
+    height: 150px;
+    border: 2px dashed rgb(102, 102, 102);
+    border-radius: 5px;
+    padding: 1rem 0;
+    border: ${props => props.active && "2px solid #4AE54A"};
+    .dropzoneWrapper {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        outline: none;
+        p {
+            font-family:  Helvetica, Arial, sans-serif;
+            font-size: 1.5rem;
+        }
+        .text-green {
+            color: #4AE54A;
+        }
+    }
+`
+
+export default LogoUploader

package/src/stories/Forms/Create-Profile/subcomponents/LogoUploader.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import LogoUploader from './LogoUploader'
+
+import withFormik from 'storybook-formik'
+
+export default {
+    component: LogoUploader,
+    title: 'Components/CreateProfile/Subcomponents/LogoUploader',
+    decorators: [withFormik]
+}
+
+const Template = args => <LogoUploader {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+    logo: null,
+    value: 'logo'
+}
+
+Default.parameters = {
+    formik: {
+        initialValues: {
+            logo: null,
+        }
+    },
+    onSubmit: v => console.log(v)
+}

package/src/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import Thumbnail from '../../../Misc/Thumbnail/Thumbnail'
+import Camera from '../../../assets/camera.svg'
+
+const ProfilePhoto = ({setFieldValue, profilePhoto }) => 
+    <ProfilePhotoWrapper>
+        <Thumbnail file={profilePhoto} className="photoThumbnail" type="thumbnail"/>
+        <label 
+            htmlFor="profilePhoto" 
+            className="photoLabel">
+            <img 
+                src={Camera} 
+                alt="camera icon" 
+            />
+        </label>
+        <input 
+            id="profilePhoto" 
+            type="file" 
+            name="profilePhoto" 
+            className="photoInput"
+            onChange={(e) => { setFieldValue("profilePhoto", e.currentTarget.files[0])
+        }}
+        />
+    </ProfilePhotoWrapper>
+
+const ProfilePhotoWrapper = styled.div`
+    position: relative;
+    box-sizing: border-box;
+    max-height: 175px;
+    max-width: 175px;
+    .photoThumbnail, .photoLabel {
+        position: absolute;
+        transform: translateX(-50%);
+    }
+    .photoLabel {
+        bottom: 15%;
+        height: 50px;
+        right: -35px;
+        width: 50px;
+        cursor: pointer;
+        border-radius: 50%;
+        background-color: #333536;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all .3s ease-in-out;
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.9);
+        }
+    }
+    .photoInput {
+        display: none;
+    }
+`
+export default ProfilePhoto

package/src/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import ProfilePhoto from './ProfilePhoto'
+
+import withFormik from 'storybook-formik'
+
+export default {
+    component: ProfilePhoto,
+    title: 'Components/CreateProfile/Subcomponents/ProfilePhoto',
+    decorators: [withFormik]
+}
+
+const Template = args => <ProfilePhoto {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+    profilePhoto: null
+}
+
+Default.parameters = {
+    formik: {
+        initialValues: {
+            profilePhoto: null
+        }
+    },
+    onSubmit: v => console.log(v)
+}

package/src/stories/Forms/Create-Profile/subcomponents/ResetBtn.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import styled from 'styled-components'
+
+// Assets
+import Reset from '../../../assets/reset.svg'
+
+const ResetBtn = ({ setFieldValue, value, initValue }) => 
+        <ResetBtnWrapper onClick={() => setFieldValue(value, initValue)} >
+            <img src={Reset} alt="reset icon" />
+        </ResetBtnWrapper>
+
+const ResetBtnWrapper = styled.button.attrs(()=> ({
+    type: 'button'
+}))`
+    cursor: pointer;
+    border:none;
+    background-color: transparent;
+    outline: none;
+`
+
+export default ResetBtn

package/src/stories/Forms/Create-Profile/subcomponents/ResetBtn.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ResetBtn from './ResetBtn'
+
+import withFormik from 'storybook-formik'
+
+export default {
+    component: ResetBtn,
+    title: 'Components/CreateProfile/Subcomponents/ResetButton',
+    decorators: [withFormik]
+}
+
+const Template = args => <ResetBtn {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+    initValue: '',
+    value: 'servername'
+}

package/src/stories/Forms/CreateAlbum/CreateAlbum.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import styled from 'styled-components';
+
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+import TextField from '../../Common Inputs/TextField/TextField';
+import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
+
+const CreateAlbum = ({ saveBtnText, cancelBtnText, ...props }) => {
+    const initialValues = {
+        cover: null,
+        title: ''
+    }
+
+    const formSchema = Yup.object().shape({
+        title: Yup.string()
+            .required("Required"),
+    });
+
+    const sections = [
+        {
+            title: "Music Album",
+            body: [
+                (<CustomDropZone label="Album Cover" name="cover" />),
+                (<TextField label="Title" name="title" />),
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const album = { ...values }
+        const date = new Date()
+        album.date = date
+        props.saveHandler(album)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+
+    return (
+        <Container>
+            <ReusableForm
+                formTitle="Create Album"
+                initialValues={initialValues}
+                formSchema={formSchema}
+                sections={sections}
+                headerStyles={props.headerStyles}
+                saveBtnText='Create'
+                cancelBtnText='Cancel'
+                saveHandler={onCreate}
+                cancelHandler={cancelHandler}
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                }}
+                sectionPadding={10}
+                bodyRowGap={10}
+                {...props.formStyles}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+CreateAlbum.defaultProps = {};
+
+CreateAlbum.propTypes = {
+    saveHandler: PropTypes.func,
+    cancelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    formStyles: PropTypes.object
+}
+
+export default CreateAlbum

package/src/stories/Forms/CreateAlbum/CreateAlbum.stories.jsx

@@ -0,0 +1,37 @@
+import CreateAlbum from './CreateAlbum';
+
+export default {
+    title: 'Forms/Create Album',
+    component: CreateAlbum
+}
+
+const formStyles = {
+    headerStyles: {
+        padding: 10,
+        headerBackground: 'black',
+        titleColor: '#ffff',
+    },
+    sectionPadding: 10,
+    bodyRowGap: 10
+}
+
+const saveHandler = (album) => {
+    console.log(album)
+}
+
+const cancelHandler = () => {
+    console.log('Canceled')
+}
+
+const Template = (args) => (
+    <CreateAlbum {...args} />
+);
+
+export const Album = Template.bind({});
+Album.args = {
+    saveHandler: saveHandler,
+    cancelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    formStyles: formStyles,
+};

package/src/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+import TextField from '../../Common Inputs/TextField/TextField';
+import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
+import CustomTextarea from '../../Common Inputs/CustomTextarea/CustomTextarea';
+
+const CreateAnnouncementForm = ({formSchema, saveBtnText, cancelBtnText, ...props}) => {
+
+    const initialValues = {
+        cover: null,
+        title: '',
+        discription: ''
+    }
+
+
+    const sections = [
+        {
+            title: "Announcment Details",
+            body: [
+                (<CustomDropZone label="Announcment Cover" name="cover" />),
+                (<TextField label="Title" name="title" />),
+                (<CustomTextarea label="Discription" name="discription" />)
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const announcment = {...values}
+        const date = new Date()
+        announcment.date = date
+        props.saveHandler(announcment)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+
+    return (
+        <Container>
+            <ReusableForm
+                formTitle="Create Announcment"
+                initialValues={initialValues}
+                formSchema={formSchema}
+                sections={sections}
+                headerStyles={props.headerStyles}
+                saveBtnText={saveBtnText}
+                cancelBtnText={cancelBtnText}
+                saveHandler={onCreate}
+                cancelHandler={cancelHandler}
+                {...props.formStyles}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+export default CreateAnnouncementForm

package/src/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import * as Yup from 'yup';
+
+import CreateAnnouncementForm from './CreateAnnouncementForm';
+
+export default {
+    title: 'forms/Create Announcment',
+    component: CreateAnnouncementForm
+}
+
+const formSchema = Yup.object().shape({
+    title: Yup.string()
+        .required("Required"),
+    discription: Yup.string()
+        .required("Required"),
+});
+
+const formStyles = {
+    headerStyles: {
+        padding: 10,
+        headerBackground: 'black',
+        titleColor: '#ffff',
+    },
+    sectionPadding: 10,
+    bodyRowGap: 10
+}
+
+const saveHandler = (announcment) => {
+    console.log(announcment)
+}
+
+const cancelHandler = () => {
+    console.log('Canceled')
+}
+
+export const form = args => <CreateAnnouncementForm
+    formSchema={formSchema}
+    saveHandler={saveHandler}
+    cancelHandler={cancelHandler}
+    saveBtnText="Create"
+    cancelBtnText="Cancel"
+    formStyles={formStyles}
+    {...args} 
+    />

package/src/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import styled from 'styled-components';
+
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+import TextField from '../../Common Inputs/TextField/TextField';
+import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
+
+const CreateAlbum = ({saveBtnText, cancelBtnText, ...props}) => {
+    const initialValues = {
+        cover: null,
+        title: '',
+        artist: ''
+    }
+
+    const formSchema = Yup.object().shape({
+            title: Yup.string()
+            .required("Required"),
+            artist: Yup.string()
+            .required('Album artist is required')
+    });
+
+    const sections = [
+        {
+            title: "Announcment Details",
+            body: [
+                (<CustomDropZone label="Album Cover" name="cover" />),
+                (<TextField label="Title" name="title" />),
+                (<TextField label="Artist" name="artist" />),
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const album = {...values}
+        const date = new Date()
+        album.date = date
+        props.saveHandler(album)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+
+
+    return (
+        <Container>
+            <ReusableForm
+                formTitle="Create Album"
+                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}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+CreateAlbum.defaultProps = {};
+
+CreateAlbum.propTypes = {
+    saveHandler: PropTypes.func,
+    cancelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    formStyles: PropTypes.object,
+}
+
+export default CreateAlbum

package/src/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.stories.jsx

@@ -0,0 +1,38 @@
+import CreateAlbum from "./CreateMusicAlbum";
+
+export default {
+    title: 'Forms/Create Music Album',
+    component: CreateAlbum
+}
+
+const formStyles = {
+    headerStyles: {
+        padding: 10,
+        headerBackground: 'black',
+        titleColor: '#ffff',
+    },
+    sectionPadding: 10,
+    bodyRowGap: 10
+}
+
+const saveHandler = (album) => {
+    console.log(album)
+}
+
+const cancelHandler = () => {
+    console.log('Canceled')
+}
+
+
+const Template = (args) => (
+    <CreateAlbum {...args} />
+);
+
+export const Album = Template.bind({});
+Album.args = {
+    saveHandler: saveHandler,
+    cancelHandler: cancelHandler,
+    saveBtnText: 'Create',
+    cancelBtnText: 'Cancel',
+    formStyles: formStyles,
+};