@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Card from '../../../Reusable Components/Cards/Card-style-1/CardStyle1';
+import List from '../../../Reusable Components/ReusableList/ReusableList';
+
+const DetailedForm = ({
+    userName,
+    userImg,
+    questions,
+    ...props
+}) => {
+
+    const onAccept = () => {
+        alert('Form Accepted')
+    }
+
+    const onDecline = () => {
+        alert('Form Declined')
+    }
+
+    return (
+        <Container>
+            <User>
+                <Card
+                    title={userName}
+                    img={userImg}
+                    cardImageRadius="100"
+                />
+            </User>
+            <List
+                listTitle="Form"
+                data={questions}
+                type='flat'
+                cardStyle='card-style-3'
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: '#FE1744',
+                    titleColor: '#ffff',
+                    controlsStyles: {
+                        dropdownBackground: 'black',
+                        dropdownFontColor: 'white',
+                        dropdownItemHoverColor: '#FE1744'
+                    },
+                }}
+                customCardStyles={{
+                    cardPadding: 10
+                }}
+            />
+            <Buttons>
+                <Accept onClick={onAccept}>Accept</Accept>
+                <Decline onClick={onDecline}>Decline</Decline>
+            </Buttons>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    background-color: white;
+    padding: 10px 0;
+    width: 100%;
+`
+
+const User = styled.div`
+
+`
+
+const Buttons = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+`
+
+const Button = styled.button`
+    padding: 7px 20px;
+    border: none;
+    color: white;
+    cursor: pointer;
+`
+
+const Accept = styled(Button)`
+    background-color: #69d869;
+`
+
+const Decline = styled(Button)`
+    background-color: #e24848;
+`
+
+DetailedForm.defaultProps = {};
+
+DetailedForm.propTypes = {
+    userName: PropTypes.string,
+    userImg: PropTypes.string,
+    questions: PropTypes.array
+}
+
+export default DetailedForm

package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.stories.jsx

@@ -0,0 +1,36 @@
+import DetailedForm from "./DetailedForm";
+
+export default {
+    title: 'Enrollment/Admin/Detailed Form',
+    component: DetailedForm
+}
+
+const questions = [
+        {
+            title: 'Question 1 ?',
+            description: 'Answer for question one'
+        },
+        {
+            title: 'Question 2 ?',
+            description: 'Answer for question two'
+        },
+        {
+            title: 'Question 3 ?',
+            description: 'Answer for question three'
+        },
+        {
+            title: 'Question 4 ?',
+            description: 'Answer for question four'
+        },
+        {
+            title: 'Question 5 ?',
+            description: 'Answer for question five'
+        },
+]
+
+export const Form = args =>
+    <DetailedForm
+        userName="User Name"
+        userImg="https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png"
+        questions={questions}
+        {...args} />

package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import List from '../../../Reusable Components/ReusableList/ReusableList';
+
+const ViewForms = ({
+    data,
+    ...props
+}) => {
+    return (
+        <List
+            listTitle="Submitted Form"
+            data={data}
+            cardStyle="card-style-9"
+            type="sectioned"
+            sectionHeaderStyles={{
+                cardTitleColor: 'white',
+                cardBackgroundColor: 'black',
+                cardPadding: 10
+            }}
+            headerStyles={{
+                padding: 10,
+                headerBackground: '#FE1744',
+                titleColor: '#ffff',
+                controlsStyles: {
+                    dropdownBackground: 'black',
+                    dropdownFontColor: 'white',
+                    dropdownItemHoverColor: '#FE1744'
+                },
+            }}
+        />
+    )
+}
+
+ViewForms.defaultProps = {};
+
+ViewForms.propTypes = {
+    data: PropTypes.array
+}
+
+export default ViewForms

package/src/stories/Enrollment/Admin/ViewForms/ViewForms.stories.jsx

@@ -0,0 +1,66 @@
+import ViewForms from './ViewForms';
+
+export default {
+    title: 'Enrollment/Admin/Submitted Forms',
+    component: ViewForms
+}
+
+const data = [
+    {
+        title: 'Pending',
+        data: [
+            {
+                username: 'User one',
+                answered: '3/5',
+                img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                status: 'pending'
+            },
+            {
+                username: 'User Two',
+                answered: '5/5',
+                img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                status: 'pending'
+            },
+            {
+                username: 'User Three',
+                answered: '5/5',
+                img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                status: 'pending'
+            },
+        ],
+        priority: 1
+    },
+    {
+        title: 'In Review',
+        data: [
+            {
+                username: 'User Four',
+                answered: '2/5',
+                img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                status: 'inReview'
+            },
+            {
+                username: 'User Five',
+                answered: '1/5',
+                img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                status: 'inReview'
+            },
+            {
+                username: 'User Six',
+                answered: '3/5',
+                img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                status: 'inReview'
+            },
+        ],
+        priority: 2
+    },
+]
+
+const Template = (args) => (<ViewForms
+    {...args} />
+);
+
+export const forms = Template.bind({});
+forms.args = {
+    data: data,
+}

package/src/stories/Enrollment/Guest/FillForm/FillForm.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Form from '../../../Reusable Components/ReusableForm/ReusableForm';
+
+const FillForm = ({
+    sections,
+    ...props
+}) => {
+
+    // const initialValues = {
+    //     question0: '',
+    //     question1: '',
+    //     question2: '',
+    //     question3: '',
+    //     question4: '',
+    // }
+
+    const onCreate = (values) => {
+        console.log(values)
+    }
+
+    const cancelHandler = () => {
+        console.log('Canceled')
+    }
+
+    return (
+        <Container>
+            <Form
+                // initialValues={initialValues}
+                formTitle="Join Community Form"
+                sections={sections}
+                saveBtnText={props.saveBtnText}
+                cancelBtnText={props.cancelBtnText}
+                saveHandler={onCreate}
+                cancelHandler={cancelHandler}
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                }}
+                bodyRowGap={10}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+FillForm.defaultProps = {};
+
+FillForm.propTypes = {
+    sections: PropTypes.array,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string
+}
+
+export default FillForm;

package/src/stories/Enrollment/Guest/FillForm/FillForm.stories.jsx

@@ -0,0 +1,27 @@
+import FillForm from "./FillForm";
+import TextField from '../../../Common Inputs/TextField/TextField';
+
+export default {
+    title: 'Enrollment/Guest/Fill Form',
+    component: FillForm
+}
+
+const sections = [
+    {
+        title: "Server Name",
+        body: [
+            (<TextField label="Question 1" name="question0" />),
+            (<TextField label="Question 2" name="question1" />),
+            (<TextField label="Question 3" name="question2" />),
+            (<TextField label="Question 4" name="question3" />),
+            (<TextField label="Question 5" name="question4" />),
+        ],
+        hideTitle: true
+    },
+]
+
+export const form = args => <FillForm 
+sections={sections}
+saveBtnText={'Submit'}
+cancelBtnText="Cancel"
+{...args} />

package/src/stories/Events/CreateEvent/CreateEvent.jsx

@@ -0,0 +1,96 @@
+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 DatePicker from '../../Common Inputs/DatePicker/DatePicker';
+import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
+import CustomTextarea from '../../Common Inputs/CustomTextarea/CustomTextarea';
+
+
+const CreateEvent = ({
+    saveBtnText,
+    cancelBtnText,
+    ...props
+}) => {
+
+    const initialValues = {
+        cover: null,
+        name: '',
+        disc: '',
+        date: {
+            startDate: null,
+            endDate: null
+        }
+    }
+
+    const formSchema = Yup.object().shape({
+        name: Yup.string()
+            .required("Required"),
+        disc: Yup.string()
+            .required("Required"),
+    });
+
+    const sections = [
+        {
+            title: "Create Event",
+            body: [
+                (<CustomDropZone label="Cover" name="cover" />),
+                (<TextField label="Title" name="name" />),
+                (<CustomTextarea label="Discription" name="disc" />),
+                (<DatePicker label="Date Range" name='date' />)
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const event = {
+            title: values.name,
+            date: `${values.date.startDate._d.toISOString().split('T')[0]} : ${values.date.endDate._d.toISOString().split('T')[0]}`
+         }
+        props.saveHandler(event)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+    return (
+        <Container>
+            <ReusableForm
+                formTitle="Create Event"
+                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`
+
+`
+
+CreateEvent.defaultProps = {};
+
+CreateEvent.propTypes = {
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string
+}
+
+export default CreateEvent

package/src/stories/Events/CreateEvent/CreateEvent.stories.jsx

@@ -0,0 +1,19 @@
+import CreateEvent from "./CreateEvent";
+
+export default {
+    title: 'Events/Create Event',
+    component: CreateEvent
+}
+
+const Template = (args) => (
+    <CreateEvent {...args} />
+);
+
+export const Form = Template.bind({});
+Form.args = {
+    // saveHandler: saveHandler,
+    // cancelHandler: cancelHandler,
+    saveBtnText: "Create",
+    cancelBtnText: "Cancel",
+    // formStyles: formStyles,
+};

package/src/stories/Events/Event/Event.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import ReusableHeader from '../../Reusable Components/ReusableHeader/ReusableHeader';
+
+const Event = ({
+    cover,
+    title,
+    date,
+    disc,
+    backgroundColor,
+    titleColor,
+    titleSize,
+    dateColor,
+    dateSize,
+    headerBackground,
+    headerTitleColor,
+    discColor,
+    discSize,
+}) => {
+    return (
+        <Container
+            backgroundColor={backgroundColor}>
+            <ReusableHeader
+                title='Event'
+                padding={10}
+                headerBackground={headerBackground}
+                titleColor={headerTitleColor}
+            />
+            <CoverWrapper>
+                <Cover src={cover} />
+            </CoverWrapper>
+            <Details>
+                <Header>
+                    <Title size={titleSize} color={titleColor}>{title}</Title>
+                    <Date color={dateColor} size={dateSize}>{date}</Date>
+                </Header>
+                <Disc
+                    discColor={discColor}
+                    discSize={discSize}
+                >
+                    {disc}
+                </Disc>
+            </Details>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+    font-family: sans-serif;
+    background-color: ${({ backgroundColor }) => backgroundColor};
+`
+
+const CoverWrapper = styled.div`
+    width: 100%;
+    height: 300px;
+`
+
+const Cover = styled.img`
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+`
+
+const Details = styled.div`
+    padding: 10px;
+`
+
+const Header = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`
+
+const Title = styled.h3`
+    font-weight: 100;
+    color: ${({ color }) => color};
+    font-size: ${({ size }) => size}px;
+`
+
+const Date = styled.h5`
+    font-weight: 100;
+    color: ${({ color }) => color};
+    font-size: ${({ size }) => size}px;
+`
+
+const Disc = styled.p`
+    color: ${({ discColor }) => discColor};
+    font-size: ${({ discSize }) => discSize}px;
+`
+
+Event.defaultProps = {};
+
+Event.propTypes = {
+    cover: PropTypes.string,
+    title: PropTypes.string,
+    date: PropTypes.string,
+    disc: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    titleColor: PropTypes.string,
+    titleSize: PropTypes.number,
+    dateColor: PropTypes.string,
+    dateSize: PropTypes.number,
+    headerBackground: PropTypes.string,
+    headerTitleColor: PropTypes.string,
+    discColor: PropTypes.string,
+    discSize: PropTypes.number,
+}
+
+export default Event

package/src/stories/Events/Event/Event.stories.jsx

@@ -0,0 +1,21 @@
+import Event from "./Event";
+
+export default {
+    title: 'Events/Detailed Event',
+    component: Event
+}
+
+export const Detailed = args =>
+    <Event
+        cover='https://lh3.googleusercontent.com/proxy/CPYbedfVXH1yUpEF4dAQoqrLVpc8f_e4y11lx7InsxCU21OtHOfv7iHVcYIDD_gp89pnLCt81KBtdORJtSXxykoo-OxBNaQBBU-P'
+        title="ACDC Concert"
+        date="15/11/1976 : 16/11/1976"
+        disc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro."
+        backgroundColor="black"
+        headerBackground="black"
+        headerTitleColor="white"
+        titleColor="white"
+        discColor="white"
+        dateColor="white"
+        {...args}
+    />

package/src/stories/Events/EventsList/EventsList.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 CreateEvent from '../CreateEvent/CreateEvent';
+
+const listControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+]
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete Image' },
+]
+
+const EventsList = ({
+    events,
+    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 = (event) => {
+        setShowModal(false)
+        props.onAddEvent(event)
+    }
+
+    return (
+    <Container>
+            <List
+                listTitle="My Events"
+                data={events}
+                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>
+                )}>
+                <CreateEvent
+                    saveBtnText="Create"
+                    cancelBtnText="Cancel"
+                    saveHandler={onAddFolder}
+                    cancelHandler={cancelHandler}
+                />
+            </Modal>
+        </Container>
+        )
+}
+
+const Container = styled.div`
+    width: 100%;
+`
+
+EventsList.defaultProps = {};
+
+EventsList.propTypes = {
+    notes: PropTypes.array.isRequired,
+    iconColor: PropTypes.string,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardPadding: PropTypes.number
+}
+
+export default EventsList