@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+import styled from 'styled-components';
+import CardStyle3 from '../Cards/Card-style-3/CardStyle3';
+
+import { getCardStyle } from '../../helpers/util';
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+
+const Gallery = ({ data, cardStyle, customCardStyles, type, cardControls = null, ...props }) => {
+    let child;
+
+    const iconCliked = (action) => {
+        props.iconClicked(action)
+    }
+
+    const clicked = (index) => {
+        props.cardClicked(index)
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const mapOverCardsData = (data) => {
+        return data.map((cardProps, index) => (
+            getCardStyle(cardProps, cardStyle, customCardStyles, cardControls, index, clicked, cardIconClicked)
+        ))
+    }
+
+    if (type === 'flat') {
+        child = mapOverCardsData(data)
+    } else if (type === 'sectioned') {
+        child = data.map((section, index) => (
+            <Section priority={section.priority} key={index}>
+                <CardStyle3 title={section.title} {...props.sectionHeaderStyles} />
+                <SectionBody {...props}>
+                    {mapOverCardsData(section.data)}
+                </SectionBody>
+            </Section>
+        ))
+    }
+
+    return (
+        <GalleryContainer {...props}>
+            <ReusableHeader
+                title={props.galleryTitle}
+                controls={props.galleryControls}
+                iconClicked={iconCliked}
+                {...props.headerStyles}
+            />
+            <GalleryBody type={type} {...props}>
+                {child}
+            </GalleryBody>
+        </GalleryContainer>
+    )
+}
+
+const GalleryContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+    width: ${props => props.galleryWidth + 'px' || '100%'};
+    padding: 0;
+`
+
+const GalleryBody = styled.div`
+    padding: ${props => props.galleryBodyPadding}px;
+    display: ${({ type }) => type === 'flat' ? 'grid' : 'flex'};
+    flex-direction: column;
+    grid-template-columns: ${props => 'repeat(' + props.columnsNumber + ', 1fr)'};
+    grid-auto-rows: ${props => props.rowsHeight || 400}px;
+    /* grid-auto-rows: ${props => props.rowsHeight + 'px' || 'minmax(min-content, 400px)'}; */
+    column-gap: ${props => props.galleryColumnGap}px;
+    row-gap: ${props => props.galleryRowGap}px;
+`
+
+const Section = styled.div`
+    display: flex;
+    flex-direction: column;
+    order: ${({ priority }) => priority};
+    column-gap: ${props => props.galleryColumnGap}px;
+    row-gap: ${props => props.galleryRowGap}px;
+`
+
+const SectionBody = styled.div`
+    padding: ${props => props.galleryBodyPadding}px;
+    display: grid;
+    grid-template-columns: ${props => 'repeat(' + props.columnsNumber + ', 1fr)'};
+    column-gap: ${props => props.galleryColumnGap}px;
+    row-gap: ${props => props.galleryRowGap}px;
+`
+
+Gallery.defaultProps = {};
+
+Gallery.propTypes = {
+    data: PropTypes.array.isRequired,
+    type: PropTypes.oneOf(['flat', 'sectioned']),
+    cardControls: PropTypes.array,
+    galleryWidth: PropTypes.number,
+    galleryTitle: PropTypes.string,
+    galleryBodyPadding: PropTypes.number,
+    columnsNumber: PropTypes.number,
+    galleryColumnGap: PropTypes.number,
+    galleryRowGap: PropTypes.number,
+    rowsHeight: PropTypes.number
+    
+};
+
+export default Gallery

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import Gallery from './Gallery';
+// Data
+import { controls, data, dataWithSections, cardControls } from '../fakeData';
+// Styles
+import { headingControlsStyles, galleryCardControlsStyles } from '../commonStyles';
+
+export default {
+    title: 'Reusable components/Gallery',
+    component: Gallery
+}
+
+const Template = (args) => (
+    <Gallery
+        galleryTitle="Reusable Gallery"
+        galleryControls={controls}
+        headerStyles={{
+            padding: 10,
+            headerBackground: '#FE1744',
+            titleColor: '#ffff',
+        }}
+        columnsNumber={3}
+        galleryColumnGap={10}
+        controlsStyles={headingControlsStyles}
+        cardStyle="card-style-6"
+        customCardStyles={galleryCardControlsStyles}
+        {...args} />
+);
+
+export const GalleryFlat = Template.bind({});
+GalleryFlat.args = {
+    data: data,
+    type: "flat",
+    cardControls: cardControls
+};
+
+export const GallerySectioned = Template.bind({});
+GallerySectioned.args = {
+    data: dataWithSections,
+    type: "sectioned",
+    cardControls: cardControls
+}

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

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { MentionsInput, Mention } from 'react-mentions';
+
+const MentionArea = ({
+    users,
+    value,
+    backgroundColor,
+    listColor,
+    listItemColor,
+    ...props
+}) => {
+    // const [value, setValue] = useState('')
+
+    // const handleOnChange =  (event, newValue, newPlainTextValue, mentions) => {
+    //     setValue(newValue)
+    //     console.log(event, newValue, newPlainTextValue, mentions)
+    // }
+
+    const handleOnChange = (event, newValue, newPlainTextValue, mentions) => {
+        props.handleOnChange(newValue)
+    }
+
+    return (
+        <Container 
+        backgroundColor={backgroundColor}
+        listColor={listColor}
+        listItemColor={listItemColor}
+        >
+            <MentionsInput className="mention" value={value} onChange={handleOnChange}>
+                <Mention
+                    trigger="@"
+                    data={users}
+                />
+            </MentionsInput>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    .mention{
+        border: none;
+
+        &__control{
+        background-color: ${({backgroundColor}) => backgroundColor};
+        }
+
+        &__suggestions{
+
+            &__list{
+                background-color: ${({listColor}) => listColor};
+                color: ${({listItemColor}) => listItemColor};
+            }
+        }
+    }
+`
+
+MentionArea.defaultProps = {};
+
+MentionArea.propTypes = {
+    users: PropTypes.array,
+    backgroundColor: PropTypes.string,
+    listColor: PropTypes.string,
+    listItemColor: PropTypes.string
+}
+
+export default MentionArea

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

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import Mention from "./Mention";
+
+export default {
+    title: 'Resuable Components/Mention',
+    component: Mention
+}
+
+const users = [
+    {
+        id: 'walter',
+        display: 'Walter White',
+    },
+    {
+        id: 'jesse',
+        display: 'Jesse Pinkman',
+    },
+    {
+        id: 'gus',
+        display: 'Gustavo "Gus" Fring',
+    },
+    {
+        id: 'saul',
+        display: 'Saul Goodman',
+    },
+    {
+        id: 'hank',
+        display: 'Hank Schrader',
+    },
+    {
+        id: 'skyler',
+        display: 'Skyler White',
+    },
+    {
+        id: 'mike',
+        display: 'Mike Ehrmantraut',
+    },
+    {
+        id: 'lydia',
+        display: 'Lydìã Rôdarté-Qüayle',
+    },
+]
+
+export const MentionArea = args => {
+    const [value, setValue] = useState('');
+
+    return (
+    <Mention
+        value={value}
+        handleOnChange={(value) => setValue(value)}
+        users={users}
+        {...args}
+        />
+        )
+}

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

@@ -0,0 +1,76 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Modal from "react-modal";
+import styled from "styled-components";
+
+const ReactModalComponent = ({
+  title,
+  borderColor, 
+  boxShadow, 
+  backgroundColor, 
+  padding, 
+  height, 
+  width,
+  color,
+  borderRadius,
+  modalIsOpen,
+  closeModal,
+  children,
+  exitModalButton,
+  onOverlayCloseClick
+}) => {
+  return (
+    <ModalContainer
+      isOpen={modalIsOpen}
+      onRequestClose={closeModal}
+      ariaHideApp={false}
+      contentLabel={title}
+      shouldCloseOnOverlayClick={onOverlayCloseClick === 'true'}
+      borderColor={borderColor}
+      boxShadow={boxShadow}
+      backgroundColor={backgroundColor}
+      padding={padding}
+      height={height}
+      width={width}
+      color={color}
+      borderRadius={borderRadius}
+    >
+      {children}
+      {exitModalButton(closeModal)}
+    </ModalContainer>
+  );
+};
+
+const ModalContainer = styled(Modal)`
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  transform: translate(-50%, -50%);
+  background-color: ${({backgroundColor}) => backgroundColor};
+  border-radius: ${({borderRadius}) => borderRadius}px;
+  box-shadow: ${({boxShadow}) => boxShadow};
+  height: ${({height}) => height};
+  width: ${({width}) => width};
+  color: ${({color}) => color};
+  border-color: ${({borderColor}) => borderColor};
+  padding: ${({padding}) => padding}px;
+`
+
+ReactModalComponent.propTypes = {
+  title: PropTypes.string,
+  modalIsOpen: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  height: PropTypes.string,
+  width: PropTypes.string
+};
+
+ReactModalComponent.defaultProps = {
+  title: "",
+  height: "80vh",
+  width: "50vw",
+};
+
+export default ReactModalComponent;

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { Formik, Form } from 'formik';
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+import Buttons from '../../Buttons/Buttons/Buttons';
+
+const ReusableForm = ({ formTitle, sections, initialValues, ...props }) => {
+
+    const submitHandler = (values) => {
+        props.saveHandler(values)
+    }
+
+    const handleCancel = () => {
+        props.cancelHandler();
+    }
+
+    return (
+        <Formik
+        initialValues={initialValues}
+        validationSchema={props.formSchema}
+        onSubmit={values => submitHandler(values)}
+        >
+            <CreateForm {...props}>
+                <ReusableHeader title={formTitle} {...props.headerStyles} />
+                {
+                    sections.map(section => (
+                        <FormSection key={section.title} {...props}>
+                            {
+                                !section.hideTitle && section.title &&
+                                <ReusableHeader title={section.title} {...props.sectionHeaderStyles} />
+                            }
+
+                            <FormSectionBody columns={section.bodyColumns} {...props}>
+                                {
+                                    section.body.map(input => (
+                                        input
+                                    ))
+                                }
+                            </FormSectionBody>
+                        </FormSection>
+                    ))
+                }
+                {
+                    !props.hideFooter
+                    &&
+                    <FormFooter>
+                        <Buttons
+                            label={props.saveBtnText}
+                            size="md"
+                            variant="primary"
+                            type="submit"
+                            buttonClicked={() => {}}
+                        />
+                        {
+                            props.cancelBtnText &&
+                            <Buttons
+                                type="button"
+                                label={props.cancelBtnText}
+                                size="md"
+                                variant="secondary"
+                                buttonClicked={handleCancel} />
+                        }
+                    </FormFooter>}
+            </CreateForm>
+        </Formik>
+    )
+}
+
+const CreateForm = styled(Form)`
+    background-color: ${props => props.formBackgroundColor || 'white'};
+    display: flex;
+    flex-direction: column;
+
+`
+
+const FormSection = styled.div`
+    padding: ${props => props.sectionPadding}px;
+`
+
+const FormSectionBody = styled.div`
+    display: grid;
+    grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)` || 1};
+    padding: ${props => props.bodyPadding}px;
+    row-gap: ${props => props.bodyRowGap}px;
+    column-gap: ${props => props.bodyColumnGap}px;
+`
+
+const FormFooter = styled.div`
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+`
+
+const Button = styled.button`
+
+`
+
+ReusableForm.defaultProps = {};
+
+ReusableForm.propTypes = {
+    formTitle: PropTypes.string,
+    sections: PropTypes.array.isRequired,
+    initialValues: PropTypes.object.isRequired,
+    sectionPadding: PropTypes.number,
+    validationSchema: PropTypes.object,
+    headerStyles: PropTypes.object,
+    sectionHeaderStyles: PropTypes.object,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string,
+    hideFooter: PropTypes.bool,
+    formBackgroundColor: PropTypes.string,
+    bodyPadding: PropTypes.number,
+    bodyRowGap: PropTypes.number,
+    bodyColumnGap: PropTypes.number,
+    saveBtnHandler: PropTypes.func,
+    cancelHandler: PropTypes.func
+}
+
+export default ReusableForm

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

@@ -0,0 +1,167 @@
+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} />
+)