@mohamed-karawia/library 0.1.0

package/src/stories/Events/EventsList/EventsList.stories.jsx

@@ -0,0 +1,25 @@
+import EventsList from "./EventsList";
+
+export default {
+    title: 'Events/Events List',
+    component: EventsList
+};
+
+const events = [
+    {title: 'Event one', date: '15/11/2020 : 5/8/2021'},
+    {title: 'Event two', date: '14/12/2020 : 14/4/2023'},
+    {title: 'Event three', date: '5/6/2021 : 5/8/2021'},
+    {title: 'Event four', date: '14/4/2023'},
+    {title: 'Event five', date: '5/6/2021 : 14/4/2023'},
+]
+
+const Template = (args) => (
+    <EventsList {...args} />
+);
+
+export const List = Template.bind({});
+List.args = {
+    events,
+    iconColor: '#FE1744',
+    cardTitleFontSize: 15
+};

package/src/stories/Forms/AddPhoto/AddPhoto.jsx

@@ -0,0 +1,85 @@
+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';
+import CustomTextarea from '../../Common Inputs/CustomTextarea/CustomTextarea';
+
+const AddPhoto = ({saveBtnText, cancelBtnText, ...props}) => {
+    const initialValues = {
+        img: null,
+        title: '',
+        description: ''
+    }
+
+    const formSchema = Yup.object().shape({
+            title: Yup.string()
+            .required("Required"),
+    });
+
+    const sections = [
+        {
+            title: "Upload Photo",
+            body: [
+                (<CustomDropZone label="Image" name="cover" />),
+                (<TextField label="Title" name="title" />),
+                (<CustomTextarea label="Description" name="description" />)
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const photo = {...values}
+        const date = new Date()
+        photo.date = date.toISOString().split('T')[0]
+        props.saveHandler(photo)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+
+    return (
+       <Container>
+            <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}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+AddPhoto.defaultProps = {};
+
+AddPhoto.propTypes = {
+    saveHandler: PropTypes.func,
+    cancelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    formStyles: PropTypes.object
+}
+
+export default AddPhoto

package/src/stories/Forms/AddPhoto/AddPhoto.stories.jsx

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

package/src/stories/Forms/AddSong/AddSong.jsx

@@ -0,0 +1,86 @@
+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 AddSong = (props) => {
+    const initialValues = {
+        song: null,
+        cover: null,
+        title: '',
+        artist: ''
+    }
+
+    const formSchema = Yup.object().shape({
+        title: Yup.string()
+            .required("Required"),
+        artist: Yup.string()
+            .required('Required')
+    });
+
+    const sections = [
+        {
+            title: "Announcment Details",
+            body: [
+                (<CustomDropZone fileType="audio/*" inputContent="Insert Song" label="Upload Song" name="song" />),
+                (<CustomDropZone inputContent="Song Cover" label="Upload 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}
+                saveBtnText={props.saveBtnText}
+                cancelBtnText={props.cancelBtnText}
+                saveHandler={onCreate}
+                cancelHandler={cancelHandler}
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                }}
+                sectionPadding={10}
+                bodyRowGap={10}
+                {...props.formStyles}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+AddSong.defaultProps = {};
+
+AddSong.propTypes = {
+    saveHandler: PropTypes.func,
+    candelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string
+}
+
+export default AddSong

package/src/stories/Forms/AddSong/AddSong.stories.jsx

@@ -0,0 +1,26 @@
+import AddSong from "./AddSong";
+
+export default {
+    title: 'Music Albums/Add Song',
+    component: AddSong
+}
+
+const onAddSong = (song) => {
+    console.log(song)
+}
+
+const cancelHandler = () => {
+    console.log('Canceled')
+}
+
+const Template = (args) => (
+    <AddSong {...args} />
+);
+
+export const Song = Template.bind({});
+Song.args = {
+    saveHandler: onAddSong,
+    candelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+};

package/src/stories/Forms/AddVideo/AddVideo.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+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 AddVideo = (props) => {
+    const initialValues = {
+        video: null,
+        cover: null,
+        link: '',
+        title: '',
+        discription: ''
+    }
+
+    const formSchema = Yup.object().shape({
+        title: Yup.string()
+            .required("Required"),
+        discription: Yup.string()
+            .required('Required')
+    });
+
+    const sections = [
+        {
+            title: "Add Video",
+            body: [
+                (<CustomDropZone fileType="video/*" inputContent="Video" label="Upload Video" name="video" />),
+                (<TextField label="or insert link" name="link" />),
+                (<CustomDropZone inputContent="Video Cover" label="Upload Cover" name="cover" />),
+                (<TextField label="Title" name="title" />),
+                (<TextField label="discription" name="discription" />),
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const video = { ...values }
+        const date = new Date()
+        video.date = date
+        props.saveHandler(video)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+    return (
+        <Container>
+            <ReusableForm
+                formTitle="Add Video"
+                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`
+
+`
+
+export default AddVideo

package/src/stories/Forms/AddVideo/AddVideo.stories.jsx

@@ -0,0 +1,20 @@
+import AddVideo from "./AddVideo";
+
+export default {
+    title: 'Forms/Add Video',
+    component: AddVideo
+}
+
+const saveHandler = (photo) => {
+    console.log(photo)
+}
+
+const cancelHandler = () => {
+    console.log('Canceled')
+}
+
+export const Video = args => <AddVideo
+    saveHandler={saveHandler}
+    cancelHandler={cancelHandler}
+    {...args}
+    {...args} />

package/src/stories/Forms/Create-Profile/CreateProfile.jsx

@@ -0,0 +1,278 @@
+import React from 'react'
+import { Formik, Form } from "formik";
+import styled from "styled-components";
+
+// Formik Fields
+import InputField from '../../Common Inputs/Formik/InputField/InputField';
+import RadioField from '../../Common Inputs/Formik/RadioField/RadioField'; 
+
+// Subcomponents
+import ProfilePhoto from './subcomponents/ProfilePhoto'
+import LogoUploader from './subcomponents/LogoUploader'
+import ResetBtn from './subcomponents/ResetBtn'
+
+// Widgets
+import Button from '../../Buttons/Buttons/Buttons'
+
+// Just dummy data used to loop
+// For presentation
+const dummyData = [1, 2, 3, 4, 5, 6]
+
+const CreateProfile = () => {
+    return (
+        <Container>
+           <Formik
+            initialValues={{
+                profilePhoto: null,
+                username: '',
+                servername: '',
+                logo: null,
+                preset: '',
+                theme: '',
+                themeSelected: '',
+                styles: 
+                {
+                    width: '',
+                    border: '',
+                    borderColor: '',
+                    color: '',
+                    height: '',
+                    font: ''
+                }
+            }}
+            onSubmit = {( values ) => {
+                console.log(values)
+            }}
+           >
+            {({ values, setFieldValue, initialValues }) => (
+                <Form>
+                    <Row>
+                        <Heading>Create Profile</Heading>
+                    </Row>
+                    <Row>
+                        <Col size={1} >
+                            <ProfilePhoto 
+                            profilePhoto={values.profilePhoto} setFieldValue={setFieldValue}
+                            />
+                        </Col>
+                        <Col 
+                        size={3} 
+                        justify="flex-end" 
+                        align="center" 
+                        direction="row"
+                        >
+                            <InputField 
+                            name="username" 
+                            type="text" 
+                            placeholder="username" 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={3}>
+                            <Heading>
+                                Create Server
+                            </Heading>
+                        </Col>
+                        <Col size={1} justify="flex-end" align="flex-end">
+                            <ResetBtn 
+                            value="servername" 
+                            setFieldValue={setFieldValue} initValue={initialValues.servername} />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={1}>
+                            <InputField 
+                            name="servername" 
+                            type="text" 
+                            placeholder="server name" 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={3}>
+                            <Heading>
+                                Upload Logo
+                            </Heading>
+                        </Col>
+                        <Col size={1} 
+                        justify="flex-end" 
+                        align="flex-end"
+                        >
+                            <ResetBtn 
+                            value="logo" 
+                            setFieldValue={setFieldValue} initValue={initialValues.logo} 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={1}>
+                            <LogoUploader 
+                            value="logo" 
+                            logo={values.logo} 
+                            setFieldValue={setFieldValue} 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={3}>
+                            <Heading>Presets</Heading>
+                        </Col>
+                        <Col 
+                        size={1} 
+                        justify="flex-end" 
+                        align="flex-end"
+                        >
+                            <ResetBtn 
+                            value="preset" 
+                            setFieldValue={setFieldValue} initValue={initialValues.preset} 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <GridColumn gridsize={3}>
+                            {
+                                dummyData.map(
+                                    (n) => 
+                                    <RadioField 
+                                    name="preset" 
+                                    value={`Preset ${n}`}
+                                    >
+                                        {`Preset ${n}`}
+                                    </RadioField>
+                                )
+                            }
+                        </GridColumn>
+                    </Row>
+                    <Row>
+                        <Col size={3}>
+                            <Heading>Themes</Heading>
+                        </Col>
+                        <Col size={1} 
+                        justify="flex-end" 
+                        align="flex-end"
+                        >
+                            <ResetBtn 
+                            value="theme" 
+                            setFieldValue={setFieldValue} initValue={initialValues.theme} 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={1} >
+                            <InputField 
+                            name="theme" 
+                            type="text" 
+                            placeholder="search..." 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <GridColumn gridsize={3}>
+                            {
+                                dummyData.map(
+                                    (n) => 
+                                    <RadioField name="themeSelected" 
+                                    value={`Theme ${n}`}
+                                    >
+                                        {`Theme ${n}`}
+                                    </RadioField>
+                                )
+                            }
+                        </GridColumn>
+                    </Row>
+                    <Row>
+                        <Col size={3}>
+                            <Heading>Styles</Heading>
+                        </Col>
+                        <Col 
+                        size={1} 
+                        justify="flex-end" 
+                        align="flex-end">
+                            <ResetBtn 
+                            value="styles" 
+                            setFieldValue={setFieldValue} initValue={initialValues.styles} 
+                            />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <GridColumn gridsize={3}>
+                            <InputField className="style" name="styles.width" type="text" placeholder="#width" />
+                            <InputField className="style" name="styles.height" type="text" placeholder="#height" />
+                            <InputField className="style" name="styles.border" type="text" placeholder="#border" />
+                            <InputField className="style" name="styles.borderColor" type="text" placeholder="#border color" />
+                            <InputField className="style" name="styles.color" type="text" placeholder="#color" />
+                            <InputField className="style" name="styles.font" type="text" placeholder="#font" />
+                        </GridColumn>
+                    </Row>
+                    <Row>
+                        <Col size={3}>
+                            <Heading>Preview</Heading>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col size={1}>
+                            <PreviewBox />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col 
+                        size={1} 
+                        justify="flex-end"
+                        >
+                            <Button 
+                            label="CREATE" 
+                            size="lg" 
+                            variant="primary" 
+                            type="submit" 
+                            /> 
+                        </Col>
+                    </Row>
+                </Form>
+            )}
+           </Formik> 
+        </Container>
+    )
+}
+const Container = styled.section`
+    width: 60%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    box-sizing: border-box;
+`
+const Row = styled.div`
+    display: flex;
+    margin: 1.5rem 0;
+`
+
+const Col = styled.div`
+    flex: ${(props) => props.size};
+    display: flex;
+    justify-content: ${(props) => props.justify};
+    align-items: ${(props) => props.align};
+    flex-direction: ${(props) => props.direction};
+    padding: 0 15px;
+`
+const GridColumn = styled.div`
+    display: grid;
+    width: 100%;
+    grid-template-columns: ${(props) => `repeat(${props.gridsize}, 1fr)`};
+    justify-items: center;
+    grid-gap: 1rem;
+    padding: 0 15px;
+`
+const Heading = styled.div`
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 2rem;
+`
+
+const PreviewBox = styled.div`
+    border: 3px solid #222222;
+    width: 100%;
+    min-height: 400px;
+    height: 600px;
+`
+
+export default CreateProfile

package/src/stories/Forms/Create-Profile/CreateProfile.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import CreateProfile from './CreateProfile'
+
+import withFormik from 'storybook-formik'
+
+export default {
+    title: 'Forms/Create-Profile-2',
+    component: CreateProfile,
+    decorators: [withFormik]
+}
+
+const Template = args => <CreateProfile {...args} />
+
+export const Default = Template.bind({})
+Default.parameters = {
+    formik: {
+        initialValues: {
+            profilePhoto: null,
+            username: '',
+            servername: '',
+            logo: null,
+            preset: '',
+            theme: '',
+            themeSelected: '',
+            styles: 
+            {
+                width: '',
+                border: '',
+                borderColor: '',
+                color: '',
+                height: '',
+                font: ''
+            }
+        }
+    }
+}