@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,331 @@
+import { Gif } from '@giphy/react-components';
+import { Emoji as SingleEmoji } from 'emoji-mart';
+import React, { useState, useEffect } from 'react';
+import { BiGift, BiPlusCircle } from 'react-icons/bi';
+import styled from 'styled-components';
+import ReactModalComponent from '../../Reusable Components/ReactModal/ReactModal';
+import MentionArea from '../../Reusable Components/Mention/Mention';
+import Emoji from './Components/Emoji/Emoji';
+import Gify from './Components/Gif/Gif';
+const RichTextInput = ({ users, ...props }) => {
+  const [show, setShow] = useState(false);
+  const [source, setSource] = useState(0);
+  const [text, setText] = useState('');
+  const [file, setFile] = useState();
+  const [gif, setGif] = useState();
+  const emojis = [
+    'smiley',
+    'wink',
+    'innocent',
+    'yum',
+    'joy',
+    'money_mouth_face',
+  ];
+  const [displayEmoji, setDisplayEmoji] = useState(emojis[0]);
+  const customStyles = {
+    content: {
+      borderColor: 'black',
+      boxShadow: '',
+      backgroundColor: '',
+      padding: '',
+      height: '50%',
+      width: '50%',
+      color: '',
+      borderRadius: '',
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)',
+    },
+  };
+
+
+  return (
+    <div>
+      <Container>
+        <LeftContainer>
+          <FileLabel>
+            <BiPlusCircle
+              style={{ width: '30px', height: '20px', color: 'grey' }}
+              onMouseOver={(e) => (e.target.style.color = 'black')}
+              onMouseOut={(e) => (e.target.style.color = 'grey')}
+            />
+            <FileInput
+              type='file'
+              name='file'
+              onChange={(e) => {
+                const objectURL = URL.createObjectURL(e.target.files[0]);
+                setFile({ url: objectURL, fileName: e.target.files[0].name });
+                setShow(true);
+              }}
+              onClick={(e) => (e.target.value = null)}
+            />
+          </FileLabel>
+        </LeftContainer>
+        <CenterContainer>
+          {/* <TextInput
+            placeholder='Type your message'
+            value={text}
+            onChange={(e) => {
+              setText(e.target.value);
+            }}
+          /> */}
+          {/* <CustomAutoComplete 
+            items={users}
+          /> */}
+          {
+            users ?
+              <MentionArea value={text} handleOnChange={(newValue) => setText(newValue)} users={users} />
+              :
+              <TextInput
+                placeholder='Type your message'
+                value={text}
+                onChange={(e) => {
+                  setText(e.target.value);
+                }}
+              />
+          }
+        </CenterContainer>
+        <RightContainer>
+          <GifTab
+            onClick={() => {
+              setShow((show) => !show);
+              setSource(0);
+            }}
+          >
+            <BiGift
+              style={{ width: '50px', height: '25px', color: 'grey' }}
+              onMouseOver={(e) => (e.target.style.color = 'black')}
+              onMouseOut={(e) => (e.target.style.color = 'grey')}
+            />
+          </GifTab>
+          <EmojiTab
+            onClick={() => {
+              setShow((show) => !show);
+              setSource(1);
+            }}
+          >
+            <SingleEmoji
+              emoji={displayEmoji}
+              onOver={(emoji, e) => {
+                let i = emojis.indexOf(displayEmoji);
+                if (i === emojis.length - 1) i = -1;
+                setDisplayEmoji(emojis[i + 1]);
+                emoji = displayEmoji;
+              }}
+              size={24}
+            />
+          </EmojiTab>
+        </RightContainer>
+      </Container>
+      {show && (
+        <ReactModalComponent
+          customStyle={customStyles}
+          modalIsOpen={show}
+          closeModal={(show) => {
+            setShow(!show);
+            setFile('');
+          }}
+          exitModalButton={(e) => (
+            //   <button onClick={e}>{'Close'}</button>
+            <div></div>
+          )}
+        >
+          {/* <Gify/> */}
+          {/* <Emoji /> */}
+          <ModalContainer>
+            {!file ? (
+              <div>
+                <TopBar>
+                  <Tab
+                    selected={source === 0 ? true : false}
+                    onClick={() => setSource(0)}
+                  >
+                    GIFs
+                  </Tab>
+                  <Tab
+                    selected={source === 1 ? true : false}
+                    onClick={() => setSource(1)}
+                  >
+                    Emoji
+                  </Tab>
+                </TopBar>
+                {source === 0 ? (
+                  <Gify
+                    setDisplayGif={(gif) => {
+                      setShow(false);
+                      setGif(gif);
+                    }}
+                  />
+                ) : (
+                  <Emoji
+                    setEmoji={(emoji) => {
+                      let temp = `${text}${emoji.native}`;
+                      setText(temp);
+                    }}
+                  />
+                )}
+              </div>
+            ) : (
+              <FileContainer>
+                <PreviewImage src={file.url} />
+                <FileName>{file.fileName}</FileName>
+                <FileInputContainer>
+                  <FileInputText
+                    placeholder='Type your message'
+                    value={text}
+                    onChange={(e) => {
+                      setText(e.target.value);
+                    }}
+                  />
+                  <div style={{ width: '10%' }}>
+                    <EmojiTab
+                      onClick={() => {
+                        setShow((show) => !show);
+                        setSource(1);
+                      }}
+                    >
+                      <SingleEmoji
+                        emoji={displayEmoji}
+                        onOver={(emoji, e) => {
+                          let i = emojis.indexOf(displayEmoji);
+                          if (i === emojis.length - 1) i = -1;
+                          setDisplayEmoji(emojis[i + 1]);
+                          emoji = displayEmoji;
+                        }}
+                        size={26}
+                      />
+                    </EmojiTab>
+                  </div>
+                </FileInputContainer>
+              </FileContainer>
+            )}
+          </ModalContainer>
+        </ReactModalComponent>
+      )}
+      {gif && <Gif gif={gif} width='200' />}
+    </div>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  border: 1px solid grey;
+  align-items: center;
+`;
+const LeftContainer = styled.div`
+  width: 5vw;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+  :hover {
+    font-weight: 600;
+  }
+`;
+
+const CenterContainer = styled.div`
+  width: 100%;
+`;
+const TextInput = styled.input`
+  width: 100%;
+  height: 26px;
+  border: 0px;
+  outline: none;
+  margin-right: 2%;
+  margin-left: 1%;
+`;
+const RightContainer = styled.div`
+  width: 10vw;
+  align-self: flex-end;
+  flex-direction: row;
+  display: flex;
+`;
+const GifTab = styled.div`
+  height: 5vh;
+  width: 5vw;
+  align-items: center;
+  justify-content: center;
+  :hover {
+    cursor: pointer;
+  }
+`;
+const EmojiTab = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  :hover {
+    cursor: pointer;
+  }
+`;
+const ModalContainer = styled.div``;
+
+const TopBar = styled.div`
+  display: flex;
+  border: 1px solid #fdfdfd;
+`;
+
+const Tab = styled.label`
+  border: ${(props) => (props.selected ? '1px solid grey' : '')};
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: ${(props) => (props.selected ? 'grey' : 'white')};
+  color: ${(props) => (props.selected ? 'white' : 'black')};
+  :hover {
+    cursor: pointer;
+    font-weight: 550;
+  }
+`;
+
+const FileInput = styled.input`
+  display: none;
+`;
+
+const FileLabel = styled.label`
+  margin-top: auto;
+  align-items: center;
+  justify-content: center;
+  :hover {
+    cursor: pointer;
+  }
+`;
+
+const PreviewImage = styled.img`
+  height: 30%;
+  width: 30%;
+  margin-left: 5%;
+`;
+
+const FileContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const FileName = styled.label`
+  margin-left: 5%;
+  margin-top: 2%;
+  font-size: large;
+  font-weight: 600;
+`;
+const FileInputText = styled.input`
+  border: 0px;
+  outline: none;
+  width: 90%;
+`;
+const FileInputContainer = styled.div`
+  border: 1px solid black;
+  width: 93%;
+  height: 30px;
+  display: flex;
+  margin-right: 2%;
+  margin-top: 3%;
+  margin-left: 5%;
+  justify-content: space-between;
+`;
+export default RichTextInput;

package/src/stories/Common Inputs/RichTextInput/RichTextInput.stories.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import RichTextInput from './RichTextInput';
+
+export default {
+  title: 'Common Inputs/RichTextInput',
+  component: RichTextInput,
+};
+
+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 Default = (args) => <RichTextInput users={users} {...args} />

package/src/stories/Common Inputs/TextField/TextField.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 TextField = (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;
+    text-transform: capitalize;
+    font-size: ${props => props.labelFontSize || 15}px;
+    color: ${props => props.labelColor || 'black'};
+`
+
+const Input = styled.input`
+    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;
+`
+
+
+TextField.defaultProps = {};
+
+TextField.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 TextField

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

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

package/src/stories/Containers/BaseMaterial.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import styled from "styled-components";
+
+const BaseMaterial = props => {
+  return (
+    <StyledBaseMaterial
+      borderWidth={props.borderWidth}
+      backgroundColor={props.backgroundColor}
+      borderColor={props.borderColor}
+      boxShadow={props.boxShadow}
+      borderRadius={props.borderRadius}
+      padding={props.padding}
+      fontFamily={props.fontFamily}
+      inputBGColor={props.inputBGColor}
+      fill={props.fill}
+      paddingLeft={props.paddingLeft}
+      paddingRight={props.paddingRight}
+      verticalSpacing={props.verticalSpacing}
+    >
+      {props.children}
+    </StyledBaseMaterial>
+  );
+};
+
+const StyledBaseMaterial = styled.div`
+  box-sizing: border-box;
+  margin-top: ${props => props.verticalSpacing || 0}px;
+  margin-bottom: ${props => props.verticalSpacing || 0}px;
+  width: ${props => props.fill ? "100%" : "auto"};
+  padding: ${props => props.padding || 0}px;
+  border-width: ${props => props.borderWidth || 0}px;
+  padding-left: ${props => props.paddingLeft || "auto"}px;
+  padding-right: ${props => props.paddingRight || "auto"}px;
+  background: ${props => props.backgroundColor || ""};
+  border-color: ${props => props.borderColor || ""};
+  border-style: solid;
+  box-shadow: ${props => props.boxShadow || ""};
+  border-radius: ${props => props.borderRadius || ""}px;
+  font-family: ${props => props.fontFamily || "Arial"};
+  > input {
+    background-color: ${props => props.inputBGColor || ""};
+  }
+`;
+
+BaseMaterial.defaultProps = {};
+
+BaseMaterial.propTypes = {
+  borderWidth: PropTypes.number,
+  borderColor: PropTypes.string,
+  boxShadow: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  borderRadius: PropTypes.number,
+  padding: PropTypes.number
+};
+
+export default BaseMaterial;

package/src/stories/Containers/BaseMaterial.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import BaseMaterial from "./BaseMaterial"
+
+export default {
+    title: 'Containers/BaseMaterial',
+    component: BaseMaterial
+}
+
+export const Default = (args) => <BaseMaterial {...args} />

package/src/stories/Containers/WidgetExample/WidgetBody.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+const WidgetBody = (props) => {
+    return (
+    <div>{props.children}</div>
+    )
+}
+
+export default WidgetBody

package/src/stories/Containers/WidgetExample/WidgetBody.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import WidgetBody from "./WidgetBody"
+
+export default {
+    title: 'Containers/WidgetBody',
+    component: WidgetBody
+}
+
+export const Default = (args) => <WidgetBody {...args} />

package/src/stories/Containers/WidgetExample/WidgetExample.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+import BaseMaterial from "../BaseMaterial"
+
+import WidgetHead from "./WidgetHead"
+import WidgetBody from "./WidgetBody"
+
+const WidgetExample = props => (
+    <BaseMaterial>
+        <WidgetHead>
+            <p>Head</p>
+        </WidgetHead>
+        <WidgetBody>
+            <p>Body</p>
+        </WidgetBody>
+    </BaseMaterial>
+)
+
+export default WidgetExample

package/src/stories/Containers/WidgetExample/WidgetExample.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import WidgetExample from "./WidgetExample"
+
+export default {
+    title: 'Containers/WidgetExample',
+    component: WidgetExample
+}
+
+export const Default = (args) => <WidgetExample {...args} />

package/src/stories/Containers/WidgetExample/WidgetHead.jsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+const WidgetHead = (props) => (
+    <div>
+        {props.children}
+    </div>
+)
+
+export default WidgetHead

package/src/stories/Containers/WidgetExample/WidgetHead.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import WidgetHead from "./WidgetHead"
+
+export default {
+    title: 'Containers/WidgetHead',
+    component: WidgetHead
+}
+
+export const Default = (args) => <WidgetHead {...args} />

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

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import Form from '../../../Reusable Components/ReusableForm/ReusableForm';
+import Buttons from '../../../Buttons/Buttons/Buttons';
+import TextField from '../../../Common Inputs/TextField/TextField';
+
+const AddQuestion = (props) => {
+    const [sections, setSections] = useState([])
+    const [showSecondForm, setShowSecondForm] = useState(false);
+
+    const onAddType = () => {
+        setShowSecondForm(true)
+        setSections([...sections, {
+            title: "Question",
+            body: [(<TextField label={`Question ${sections.length + 1}`} name={`question${sections.length}`} />)],
+            hideTitle: true
+        }])
+    }
+
+    const onAddQuestion = (values) => {
+        console.log(values)
+    }
+
+    const cancelHandler = () => {
+        alert('Form Canceled')
+    }
+    return (
+        <Container>
+            <Buttons
+                label='Add Question'
+                size="md"
+                variant="primary"
+                type="submit"
+                buttonClicked={onAddType}
+            />
+
+            {showSecondForm &&
+                <Form
+                    sections={sections}
+                    initialValues={{}}
+                    bodyPadding={10}
+                    saveBtnText="Add"
+                    cancelBtnText="Cancel"
+                    saveHandler={onAddQuestion}
+                    cancelHandler={cancelHandler} />}
+        </Container>
+    )
+}
+
+const Container = styled.div`
+     padding: 10px;
+     background-color: 'white';
+     display: flex;
+     flex-direction: column;
+     
+     &(:first-child){
+         align-self: center;
+     }
+`
+
+export default AddQuestion

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

@@ -0,0 +1,8 @@
+import CreateForm from "./CreateForm";
+
+export default {
+    title: 'Enrollment/Admin/Create Form',
+    component: CreateForm
+}
+
+export const Question = args => <CreateForm {...args} />