@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Common Inputs/CustomDropzone/CustomDropzone.stories.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import withFormik from "storybook-formik";
+import * as Yup from 'yup';
+
+import CustomDropZone from './CustomDropZone';
+
+const formSchema = Yup.object().shape({
+    file: Yup.object()
+        .required("Required"),
+});
+
+export default {
+    title: 'Common Inputs/Custom Dropzone',
+    component: CustomDropZone,
+    decorators: [withFormik],
+    parameters: {
+        formik: {
+            initialValues: {
+                file: ''
+            },
+            validationSchema: formSchema,
+        },
+    }
+};
+
+export const Dropzone = args =>  <CustomDropZone label="Image" name="file" {...args} />

package/src/stories/Common Inputs/CustomSelect/CustomSelect.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import styled from 'styled-components';
+// React-select
+import Select from 'react-select';
+// Formik
+import { useField } from 'formik';
+// Prop Types
+import PropTypes from "prop-types";
+
+
+const CustomSelect = (props) => {
+    const [field, meta, helpers] = useField(props);
+
+    const colourStyles = {
+        control: styles => ({ ...styles, backgroundColor: props.selectBackground || 'white' }),
+        option: (styles, { isDisabled, isFocused, isSelected }) => {
+          return {
+            ...styles,
+            backgroundColor: isDisabled
+              ? null
+              : isSelected
+              ? props.selectedBackground || 'white'
+              : isFocused
+              ? props.hoverBackground || '#aaaaaa'
+              : props.background || null,
+            color: isDisabled
+              ? '#ccc'
+              : isSelected
+              ? props.optionSelectedColor || 'black'
+              : isFocused 
+              ? props.optionHoverColor
+              : props.optionColor || 'gray',
+            cursor: isDisabled ? 'not-allowed' : 'default',
+          };
+        },
+        input: styles => ({ ...styles, padding: `${props.padding}px` }),
+        placeholder: styles => ({ ...styles, fontFamily: 'sans-serif' }),
+        singleValue: (styles, { data }) => ({ ...styles }),
+      };
+
+    return (
+        <Container>
+            <Label htmlFor={props.name} {...props}>{props.label}</Label>
+            <Select
+                name={props.name}
+                options={props.options}
+                value={field.value.value}
+                onChange={(value) => helpers.setValue(value.value)}
+                onBlur={() => helpers.setTouched(true)}
+                styles={colourStyles} />
+            {meta.touched && meta.error ? <Error>{meta.error}</Error> : null}
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+`
+
+const Label = styled.label`
+    margin-bottom: 5px;
+    text-transform: capitalize;
+    color: ${props => props.labelColor};
+    font-size: ${props => props.labelFontSize}px;
+`
+
+const Error = styled.p`
+    color: red;
+    margin-top: 3px;
+`
+
+CustomSelect.defaultProps = {};
+
+CustomSelect.propTypes = {
+    labelColor: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    padding: PropTypes.number,
+    background: PropTypes.string,
+    selectBackground: PropTypes.string,
+    selectedBackground: PropTypes.string,
+    hoverBackground: PropTypes.string,
+    optionColor: PropTypes.string,
+    optionHoverColor: PropTypes.string,
+    optionSelectedColor: PropTypes.string,
+};
+
+export default CustomSelect

package/src/stories/Common Inputs/CustomSelect/CustomSelect.stories.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import withFormik from "storybook-formik";
+import * as Yup from 'yup';
+
+import CustomSelect from './CustomSelect';
+
+const formSchema = Yup.object().shape({
+    name: Yup.string()
+        .required("Required"),
+});
+
+const options = [
+    {label: 'select an option', value: ''},
+    {label: 'option 1', value: '1'},
+    {label: 'option 2', value: '2'},
+    {label: 'option 3', value: '3'},
+]
+
+export default {
+    title: 'Common Inputs/Custom Select',
+    component: CustomSelect,
+    decorators: [withFormik],
+    parameters: {
+        formik: {
+            initialValues: {
+                name: '',
+            },
+            validationSchema: formSchema,
+        },
+    }
+};
+
+export const Select = args => {
+
+    return <CustomSelect label="options" options={options} name="name" {...args} />
+}

package/src/stories/Common Inputs/CustomTextarea/CustomTextarea.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+// Formik
+import { useField } from 'formik'
+
+const CustomTextarea = (props) => {
+    const [field, meta] = useField(props)
+    return (
+        <TextFieldWrapper>
+            <Label htmlFor={field.name} {...props}>{props.label}</Label>
+            <Input {...field} {...props} />
+            {(meta.error && meta.touched) && <Error>{meta.error}</Error>}
+        </TextFieldWrapper>
+    )
+}
+
+const TextFieldWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+`
+const Label = styled.label`
+    margin-bottom: 5px;
+    // Customized Styles
+    text-transform: capitalize;
+    font-size: ${props => props.labelFontSize || 15}px;
+    color: ${props => props.labelColor || 'black'};
+`
+
+const Input = styled.textarea`
+    padding: ${props => props.padding || 5}px;
+    border: ${props => props.borderSize || 1}px solid;
+    border-top-color: ${props => props.borderTopColor || '#9e9e9e'};
+    border-bottom-color: ${props => props.borderBottomColor || '#9e9e9e'};
+    border-right-color: ${props => props.borderRightColor || '#9e9e9e'};
+    border-left-color: ${props => props.borderLeftColor || '#9e9e9e'};
+    border-radius: ${props => props.borderRadius || 0}px;
+    font-size: ${props => props.inputFontSize || 15}px;
+    color: ${props => props.inputFontColor || 'black'};
+`
+
+const Error = styled.p`
+    color: red;
+    margin-top: 3px;
+`
+
+
+CustomTextarea.defaultProps = {};
+
+CustomTextarea.propTypes = {
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelColor: PropTypes.string,
+    padding: PropTypes.number,
+    borderSize: PropTypes.number,
+    borderTopColor: PropTypes.string,
+    borderBottomColor: PropTypes.string,
+    borderRightColor: PropTypes.string,
+    borderLeftColor: PropTypes.string,
+    borderRadius: PropTypes.number,
+    inputFontSize: PropTypes.number,
+    inputFontColor: PropTypes.string
+};
+
+export default CustomTextarea

package/src/stories/Common Inputs/CustomTextarea/CustomTextarea.stories.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import withFormik from "storybook-formik";
+import * as Yup from 'yup';
+
+import CustomTextarea from './CustomTextarea';
+
+const formSchema = Yup.object().shape({
+    text: Yup.string()
+        .required("Required"),
+});
+
+export default {
+    title: 'Common Inputs/Custom Textarea',
+    component: CustomTextarea,
+    decorators: [withFormik],
+    parameters: {
+        formik: {
+            initialValues: {
+                text: '',
+                validationSchema: formSchema
+            },
+            validationSchema: formSchema,
+        },
+    }
+}
+
+export const TextArea = (args) => {
+
+    return <CustomTextarea name="text" label="text" {...args} />
+}

package/src/stories/Common Inputs/DatePicker/DatePicker.jsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import PropTypes from "prop-types";
+import styled from 'styled-components'
+
+import { useField } from 'formik';
+
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+import { DateRangePicker } from 'react-dates';
+
+const DatePicker = (props) => {
+    const [field, meta, helpers] = useField(props)
+    const [focused, setFocused] = useState();
+
+    return (
+        <Container {...props}>
+            <Label htmlFor={props.name} {...props}>{props.label}</Label>
+            <DateRangePicker
+                startDate={field.value.startDate}
+                startDateId="your_unique_start_date_id"
+                endDate={field.value.endDate}
+                endDateId="your_unique_end_date_id"
+                onDatesChange={(date) => helpers.setValue(date)}
+                focusedInput={focused}
+                onFocusChange={focusedInput => setFocused(focusedInput)}
+                onClose={() => helpers.setTouched(true)}
+            />
+            {meta.touched && meta.error && (!field.value.startDate || !field.value.endDate) ? <Error>{meta.error.startDate || meta.error.endDate}</Error> : null}
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & .CalendarDay {
+        border: none;
+        background-color: ${props => props.background};
+        color: ${props => props.color};
+        font-size: ${props => props.fontSize}px;
+        border-radius: ${props => props.borderRadius}px;
+        padding: ${props => props.padding}px;
+
+        &:hover{
+            background-color: ${props => props.mouseHoverBackground};
+            color: ${props => props.mouseHoverColor};;
+        }
+    }
+    
+    & .CalendarDay__selected_span {
+        background-color: ${props => props.selectedRangeColor};
+        color: ${props => props.selectedRangeFontColor};
+}
+
+    & .CalendarDay__selected {
+        color: ${props => props.selectedColor};
+}
+
+     & .CalendarDay__selected:hover {
+        color: ${props => props.selectedOnHoverColor};
+        background: ${props => props.selectedOnHoverBackground};
+}
+ 
+  & .CalendarDay__hovered_span:hover,
+  & .CalendarDay__hovered_span {
+    background: ${props => props.rangeHoverBackground};
+    color: ${props => props.rangeHoverColor}
+ }
+`
+
+const Label = styled.label`
+    margin-bottom: 5px;
+    text-transform: capitalize;
+    color: ${props => props.labelColor};
+    font-size: ${props => props.labelFontSize}px;
+`
+
+
+const Error = styled.p`
+    color: red;
+    margin-top: 3px;
+`
+
+DatePicker.defaultProps = {};
+
+DatePicker.propTypes = {
+    background: PropTypes.string,
+    selectedRangeColor: PropTypes.string,
+    color: PropTypes.string,
+    padding: PropTypes.number,
+    fontSize: PropTypes.number,
+    selectedRangeFontColor: PropTypes.string,
+    selectedColor: PropTypes.string,
+    selectedOnHoverColor: PropTypes.string,
+    rangeHoverBackground: PropTypes.string,
+    rangeHoverColor: PropTypes.string,
+    borderRadius: PropTypes.number,
+    mouseHoverColor: PropTypes.string,
+    mouseHoverBackground: PropTypes.string
+};
+
+export default DatePicker

package/src/stories/Common Inputs/DatePicker/DatePicker.stories.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import withFormik from "storybook-formik";
+
+import DatePicker from './DatePicker';
+import SingleDatePicker from './SingleDatePicker';
+
+import * as Yup from 'yup';
+
+const datePickerSchema = Yup.object().shape({
+    date: Yup.object().shape({
+        startDate: Yup.object()
+            .required("Required")
+            .typeError('Invalid Start Date'),
+        endDate: Yup.object()
+            .required("Required")
+            .typeError('Invalid End Date')
+    }),
+    singleDate: Yup.object()
+    .required("Required")
+    .typeError('Invalid Date'),
+});
+
+
+export default {
+    title: 'Common Inputs/Date Picker',
+    component: DatePicker,
+    decorators: [withFormik],
+    parameters: {
+        formik: {
+            initialValues: {
+                date: {
+                    startDate: null,
+                    endDate: null
+                },
+                singleDate: null
+            },
+            validationSchema: datePickerSchema
+        },
+    }
+}
+
+
+export const date = args => <>
+    <DatePicker label="Double Date Picker" name='date' {...args} />
+    <SingleDatePicker label="Single Date Picker" name='singleDate' {...args} />
+</>

package/src/stories/Common Inputs/DatePicker/SingleDatePicker.jsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+
+import PropTypes from "prop-types";
+import styled from 'styled-components'
+
+import { useField } from 'formik';
+
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+import { SingleDatePicker } from 'react-dates';
+
+
+const SingleCustomizedDatePicker = (props) => {
+    const [focused, setFocused] = useState();
+    const [field, meta, helpers] = useField(props)
+
+    console.log(field)
+    return (
+        <Container {...props}>
+            <Label htmlFor={props.name} {...props}>{props.label}</Label>
+            <SingleDatePicker
+                date={field.value}
+                onDateChange={date => helpers.setValue(date)} 
+                focused={focused} 
+                onFocusChange={({ focused }) => setFocused(focused)} 
+                id="your_unique_id" 
+                numberOfMonths={1}
+                onClose={() => helpers.setTouched(true)}
+            />
+            {meta.touched && meta.error && !field.value ? <Error>{meta.error}</Error> : null}
+
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & .CalendarDay {
+        border: none;
+        background-color: ${props => props.background};
+        color: ${props => props.color};
+        font-size: ${props => props.fontSize}px;
+        border-radius: ${props => props.borderRadius}px;
+        padding: ${props => props.padding}px;
+
+        &:hover{
+            background-color: ${props => props.mouseHoverBackground};
+            color: ${props => props.mouseHoverColor};
+        }
+    }
+
+    & .CalendarDay__selected {
+        color: ${props => props.selectedColor};
+}
+
+     & .CalendarDay__selected:hover {
+        color: ${props => props.selectedOnHoverColor};
+        background: ${props => props.selectedOnHoverBackground};
+}
+`
+
+const Label = styled.label`
+    margin-bottom: 5px;
+    text-transform: capitalize;
+    color: ${props => props.labelColor};
+    font-size: ${props => props.labelFontSize}px;
+`
+
+const Error = styled.p`
+    color: red;
+    margin-top: 3px;
+`
+
+SingleCustomizedDatePicker.defaultProps = {};
+
+SingleCustomizedDatePicker.propTypes = {
+    background: PropTypes.string,
+    color: PropTypes.string,
+    padding: PropTypes.number,
+    fontSize: PropTypes.number,
+    selectedColor: PropTypes.string,
+    selectedOnHoverColor: PropTypes.string,
+    borderRadius: PropTypes.number,
+    mouseHoverColor: PropTypes.string,
+    mouseHoverBackground: PropTypes.string
+};
+
+export default SingleCustomizedDatePicker

package/src/stories/Common Inputs/DropZone.jsx

@@ -0,0 +1,79 @@
+import React, { Component } from "react";
+import DropzoneComponent from "react-dropzone-component";
+import "dropzone/dist/min/dropzone.min.css";
+var ReactDOMServer = require("react-dom/server");
+
+var dropzoneComponentConfig = {
+  acceptedFiles: "image/png,image/jpg,image/jpeg",
+  showFiletypeIcon: true,
+};
+var dropzoneConfig = {
+  acceptedFile: "image/png,image/jpg,image/jpeg",
+  thumbnailHeight: 160,
+  maxFiles: 1,
+  dictDefaultMessage: "Upload your logo here",
+  previewTemplate: ReactDOMServer.renderToStaticMarkup(
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-around",
+        alignItems: "center",
+      }}
+      className="dz-preview dz-file-preview mb-3"
+    >
+      <div className="d-flex flex-row ">
+        <div className="p-0 w-30 position-relative">
+          <div className="dz-success-mark">
+            <span>
+              <i />
+            </span>
+          </div>
+          <div className="preview-container">
+            {/*  eslint-disable-next-line jsx-a11y/alt-text */}
+            <img data-dz-thumbnail className="img-thumbnail border-0" />
+            <i className="simple-icon-doc preview-icon" />
+          </div>
+        </div>
+        <div className="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative">
+          <div>
+            <span data-dz-name />
+          </div>
+          <div className="text-primary text-extra-small" data-dz-size />
+          <div className="dz-progress">
+            <span className="dz-upload" data-dz-uploadprogress />
+          </div>
+        </div>
+      </div>
+      <a href="#/" className="remove" data-dz-remove>
+        <i className="glyph-icon simple-icon-trash" />
+      </a>
+    </div>
+  ),
+  headers: { "My-Awesome-Header": "header value" },
+  addRemoveLinks: true,
+  uploadMultiple: false,
+};
+
+class DropzoneExample extends Component {
+  //
+  eventHandlers = {
+    drop: () => {},
+    error: (error) => "",
+    addedfile: async (file) => {
+    },
+  };
+
+  render() {
+    return (
+      <DropzoneComponent
+        config={dropzoneComponentConfig}
+        djsConfig={dropzoneConfig}
+        action="post.php"
+        eventHandlers={this.eventHandlers}
+      />
+    );
+  }
+}
+
+export default DropzoneExample;

package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react';
+import PropTypes from "prop-types";
+
+import styled from 'styled-components';
+
+// Editor.js
+import EditorJs from 'react-editor-js';
+// Editor.js Constants
+import { EDITOR_JS_TOOLS } from "./constants";
+
+
+const EditorComponent = (props) => {
+    const instanceRef = useRef(null)
+
+
+    async function handleSave() {
+        const savedData = await instanceRef.current.save()
+        console.log(savedData)
+    }
+
+    return (
+        <Container {...props}>
+            <EditorJs
+                instanceRef={(instance) => (instanceRef.current = instance)}
+                tools={EDITOR_JS_TOOLS}
+                data={props.data}
+            />
+            {/* <button onClick={handleSave}>save</button> */}
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    font-family: ${props => props.fontFamily || 'inherit'};
+    background-color: ${props => props.backgroundColor || 'inherit'};
+    background-image: url('${props => props.backgroundImage}');
+    color: ${props => props.fontColor};
+    padding: ${props => props.padding}px;
+`
+
+EditorComponent.defaultProps = {};
+
+EditorComponent.propTypes = {
+    fontFamily: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    backgroundImage: PropTypes.string,
+    fontColor: PropTypes.string
+};
+
+
+export default EditorComponent

package/src/stories/Common Inputs/EditorComponent/EditorComponent.stories.jsx

@@ -0,0 +1,60 @@
+import EditorComponent from "./EditorComponent";
+import BaseMaterial from "../../Containers/BaseMaterial";
+
+export default {
+    title: 'Common Inputs/EditorComponent',
+    component: EditorComponent
+}
+
+const data = {
+    blocks: [
+      {
+        type: "header",
+        data: {
+          text: "Editor.js",
+          level: 1
+        }
+      },
+      {
+        type: "paragraph",
+        data: {
+          text:
+            "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+        }
+      },
+      {
+          type: 'image',
+          "data" : {
+            "file": {
+                "url" : "https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"
+            },
+            "caption" : "Caption Example",
+            "withBorder" : false,
+            "withBackground" : false,
+            "stretched" : false
+        }
+      },
+      {
+        "type" : "paragraph",
+        "data" : {
+            "text" : "Create a directory for your module, enter it and run <mark class=\"cdx-marker\">npm init</mark> command."
+        }
+    },
+    {
+        "type" : "table",
+        "data" : {
+          "withHeadings": true,
+          "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ]
+        }
+      }
+    
+    ]
+  };
+
+export const Editor = args => {
+    return (
+        <BaseMaterial>
+            <EditorComponent data={data} {...args} />
+        </BaseMaterial>
+    )
+}