@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Buttons/Buttons/Buttons.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import PropTypes from 'prop-types'
+
+const Buttons = ({ variant, size, label, type, ...props }) => {
+    return (
+        <StyledButton onClick={() => props.buttonClicked()} variant={variant} size={size} type={type}>
+           { label } 
+        </StyledButton>
+    )
+}
+
+const StyledButton = styled.button.attrs(props => ({
+    type: props.type
+    }))`
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    letter-spacing: .1cm;
+    border: 0;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+    color: #fff;
+    ${props => props.variant === 'primary' && css`
+        background-color: #2e2e2e;
+        &:hover{
+            background-color: #5e5e5e;
+        }
+    `}
+    ${props => props.variant === 'secondary' && css`
+        background-color: #888;
+        &:hover{
+            background-color: #555;
+        }
+    `}
+    ${props => props.size === 'sm' && css`
+        padding: 10px 16px;
+        font-size: 12px;
+    `}
+    ${props => props.size === 'md' && css`
+        padding: 11px 20px; 
+        font-size: 14px;
+    `}
+    
+    ${props => props.size === 'lg' && css`
+        padding: 12px 3rem; 
+        font-size: 16px;
+    `}
+` 
+
+Buttons.propTypes = {
+    variant: PropTypes.oneOf(['primary', 'secondary']),
+    label: PropTypes.string,
+    size: PropTypes.oneOf(['sm', 'md', 'lg'])
+}
+
+export default Buttons

package/src/stories/Buttons/Buttons/Buttons.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Button from './Buttons'
+
+export default { 
+    title: 'Buttons/Primary',
+    component: Button,
+}
+
+const Template = (args) => <Button {...args} />
+
+export const Primary = Template.bind({});
+Primary.args = {
+    variant: 'primary',
+    label: 'Submit',
+    size: 'md',
+    type: 'submit'
+}
+export const Secondary = Template.bind({});
+Secondary.args = {
+    variant: 'secondary',
+    label: 'Submit',
+    size: 'md',
+    type: 'submit'
+}

package/src/stories/Buttons/ReactModal/ReactModal.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import ReactModal from "../../Reusable Components/ReactModal/ReactModal";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const ReactModalIndex = ({
+  closeButtonPosition,
+   borderColor, 
+   boxShadow, 
+   backgroundColor, 
+   onOverlayCloseClick, 
+   borderRadius, 
+   padding, 
+   height, 
+   width, 
+   color, 
+   children, 
+   modalBtnOpenText, 
+   modalBtnCloseText, 
+   modalContent}
+   , ...props) => {
+  const [modalIsOpen, setIsOpen] = useState(false);
+
+  const toggleModal = () => {
+    setIsOpen((prevState) => !prevState);
+  };
+
+
+  return (
+    <div>
+      <button onClick={toggleModal}>{modalBtnOpenText}</button>
+      <ReactModal
+        onOverlayCloseClick={onOverlayCloseClick}
+        modalIsOpen={modalIsOpen}
+        closeModal={toggleModal}
+        borderColor={borderColor}
+        boxShadow={boxShadow}
+        backgroundColor={backgroundColor}
+        padding={padding}
+        height={height}
+        width={width}
+        color={color}
+        borderRadius={borderRadius}
+        exitModalButton = {(e)=> <Container position={closeButtonPosition} onClick={e}>{modalBtnCloseText}</Container>}
+      >
+        {modalContent}
+      </ReactModal>
+    </div>
+  );
+};
+
+const Container = styled.button`
+    ${({position})=> position === 'TopRight' && 
+      "position: absolute; right: 0; top: 0;"
+    }
+    ${({position})=> position === 'TopLeft' && "position: absolute; left: 0; top: 0;"}
+    ${({position})=> position === 'BottomRight' && "float: right"}
+`
+
+ReactModalIndex.propTypes = {
+  borderColor: PropTypes.string,
+  boxShadow: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  borderRadius: PropTypes.number,
+  padding: PropTypes.number,
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  closeButtonPosition: PropTypes.oneOf(["TopLeft", "TopRight", "BottomLeft", "BottomRight"]),
+  onOverlayCloseClick: PropTypes.oneOf([true, false]),
+};
+
+ReactModalIndex.defaultProps = {
+  height: "80vh",
+  width: "50vw",
+  closeButtonPosition: "TopRight",
+  onOverlayCloseClick: false
+}
+
+
+export default ReactModalIndex;

package/src/stories/Buttons/ReactModal/ReactModal.stories.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import ReactModal from "./ReactModal";
+import ReactModalDemo from "./ReactModalDemo";
+
+export default {
+  title: "Buttons/React Modal",
+  component: ReactModal
+};
+
+export const Modal = args => (
+  <ReactModal
+    {...args}
+    modalBtnOpenText="Lets Open The Modal"
+    modalBtnCloseText="Lets Close The Modal"
+    modalContent={<ReactModalDemo />}
+  />
+);

package/src/stories/Buttons/ReactModal/ReactModalDemo.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const ReactDummyHook = () => {
+  return (
+    <div>
+      <h2>Hello</h2>
+      <div>I am a modal</div>
+    </div>
+  );
+};
+
+export default ReactDummyHook;

package/src/stories/Chat/Chat.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { controls } from '../Reusable Components/fakeData';
+import ReusableHeader from '../Reusable Components/ReusableHeader/ReusableHeader';
+import List from '../Reusable Components/ReusableList/ReusableList';
+import RichTextInput from '../Common Inputs/RichTextInput/RichTextInput';
+
+const Chat = ({
+    data,
+    title,
+    titleColor,
+    headerBackground,
+    headerPadding,
+    cardBackgroundColor,
+    cardTitleColor,
+    textColor,
+    users,
+    ...props }) => {
+
+    return (
+        <Container
+            cardBackgroundColor={cardBackgroundColor}>
+            <ReusableHeader
+                title={title}
+                titleColor={titleColor}
+                controls={controls}
+                controlsStyles={{
+                    iconColor: 'white',
+                    maxIcons: 4,
+                    dropdownBackground: 'white'
+                }}
+                headerBackground={headerBackground}
+                padding={headerPadding} />
+            <List
+                type="flat"
+                data={data}
+                cardStyle="card-style-8"
+                customCardStyles={{
+                    cardBackgroundColor,
+                    cardTitleColor,
+                    cardDescriptionColor: textColor
+                }}
+            />
+            <RichTextInput
+                users={users}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    background-color: ${cardBackgroundColor => cardBackgroundColor};
+    width: 100%;
+    padding: 15px 0;
+`
+
+Chat.defaultProps = {
+    title: 'Chat Space'
+};
+
+Chat.propTypes = {
+    data: PropTypes.array.isRequired,
+    title: PropTypes.string,
+    titleColor: PropTypes.string,
+    headerBackground: PropTypes.string,
+    headerPadding: PropTypes.number,
+    cardBackgroundColor: PropTypes.string,
+    cardTitleColor: PropTypes.string,
+    textColor: PropTypes.string
+}
+
+export default Chat

package/src/stories/Chat/Chat.stories.jsx

@@ -0,0 +1,59 @@
+import Chat from './Chat';
+
+export default {
+    title: 'Chat/Chat Space',
+    component: Chat
+}
+
+const data = [
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '},
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test ', media:(<img src="https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"/>)},
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '},
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '},
+]
+
+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',
+    },
+  ]
+
+const Template = (args) => (
+    <Chat
+        {...args} />
+);
+
+export const ChatSpace = Template.bind({});
+ChatSpace.args = {
+    data,
+    users
+};

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import styled from 'styled-components';
+// Formik
+import { Field, ErrorMessage } from 'formik';
+// Prop types
+import PropTypes from 'prop-types'
+
+const CheckboxGroup = (props) => {
+
+    return (
+        <Container  {...props}>
+            <FormLabel {...props}>{props.label}</FormLabel>
+            <CheckboxGroupWrapper  {...props}>
+                {props.options.map(option => (
+                    <CheckboxWrapper>
+                        <Field type="checkbox" name={props.name} value={option.value} />
+                        <Label {...props}>{option.label}</Label>
+                    </CheckboxWrapper>
+                ))}
+            </CheckboxGroupWrapper>
+            <ErrorMessage name={props.name} component={Error} />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+`
+
+const CheckboxGroupWrapper = styled.div`
+    display: flex;
+    flex-direction: ${props => props.flexDirection};
+    gap: ${props => props.flexGap}px;
+`
+
+const CheckboxWrapper = styled.div`
+
+`
+const FormLabel = styled.label`
+    margin-bottom: 10px;
+    text-transform: capitalize;
+    color: ${props => props.formLabelColor};
+    font-size: ${props => props.formLabelFontSize}px;
+`
+
+const Label = styled.label`
+    text-transform: capitalize;
+    color: ${props => props.labelColor};
+    font-size: ${props => props.labelFontSize}px;
+`
+
+const Error = styled.p`
+    color: red;
+    margin-top: 3px;
+`
+
+CheckboxGroup.defaultProps = {};
+
+CheckboxGroup.propTypes = {
+    formLabelFontSize: PropTypes.number,
+    formLabelColor: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    labelColor: PropTypes.string,
+    flexDirection: PropTypes.string,
+    flexGap: PropTypes.number,
+};
+
+export default CheckboxGroup

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import withFormik from "storybook-formik";
+import * as Yup from 'yup';
+
+import CheckboxGroup from './CheckboxGroup';
+
+const formSchema = Yup.object().shape({
+    acceptTerms: Yup.array()
+        .min(1, 'You must choose at least one element'),
+});
+
+const options = [
+    {label: 'option 1', value: '1'},
+    {label: 'option 2', value: '2'},
+    {label: 'option 3', value: '3'},
+]
+
+export default {
+    title: 'Common Inputs/Checkbox Group',
+    component: CheckboxGroup,
+    decorators: [withFormik],
+    parameters: {
+        formik: {
+            initialValues: {
+                acceptTerms: []
+            },
+            validationSchema: formSchema,
+        },
+    }
+};
+
+export const CheckBoxGroup = args =>  <CheckboxGroup label="Checkbox Group" name="acceptTerms" options={options} {...args} />

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

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Autocomplete from 'react-autocomplete';
+// // Formik
+// import { useField } from 'formik';
+
+const CustomAutoComplete = (props) => {
+    // const [field, meta, helpers] = useField(props)
+    const [value, setValue] = useState('')
+
+    const inputStyle = {
+        border: `${props.borderSize}px solid ${props.borderColor}`,
+        borderRadius: `${props.borderRadius}px`,
+        width: '100%',
+        padding: `0 ${props.padding}px`,
+        height: `100%`
+    }
+    return (
+        <AutocompleteWrapper>
+            <Label  {...props}>{props.label}</Label>
+            <Autocomplete
+                items={props.items}
+                shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
+                getItemValue={item => item.label}
+                inputProps={{ style: inputStyle, placeholder: props.placeholder, name: props.name}}
+                renderItem={(item, highlighted) =>
+                    <Dropdown
+                        key={item.id}
+                        highlighted={highlighted}
+                        {...props}
+                    >
+                        {item.label}
+                    </Dropdown>
+                }
+                value={value}
+                onChange={e => {
+                    setValue(e.target.value)
+                }}
+                onSelect={value => {
+                    setValue(value)
+                }}
+            />
+        </AutocompleteWrapper>
+    )
+}
+
+const AutocompleteWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Label = styled.label`
+  margin-bottom: 5px;
+  font-family: 'sans-serif';
+  // Customized Styles
+  text-transform: capitalize;
+  font-size: ${(props) => props.labelFontSize || 15}px;
+  color: ${(props) => props.labelColor || 'black'};
+`;
+
+const Dropdown = styled.div`
+  text-transform: capitalize;
+  font-family: 'sans-serif';
+  height: ${(props) => props.itemHeight + 'px'};
+  background-color: ${(props) =>
+    props.highlighted ? props.hoverColor || '#eee' : props.backgroundColor};
+  font-size: ${(props) => props.fontSize || 15}px;
+  color: ${(props) => props.fontColor || 'black'};
+`;
+
+const Error = styled.p`
+  color: red;
+  margin-top: 3px;
+`;
+
+CustomAutoComplete.defaultProps = {};
+
+
+CustomAutoComplete.propTypes = {
+  items: PropTypes.array,
+  placeholder: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderSize: PropTypes.string,
+  borderRadius: PropTypes.string,
+  padding: PropTypes.string,
+  height: PropTypes.string,
+  itemHeight: PropTypes.string,
+  width: PropTypes.string,
+  fontSize: PropTypes.number,
+  backgroundColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  fontColor: PropTypes.string,
+  onInputChange: PropTypes.func,
+};
+
+export default CustomAutoComplete;

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

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+// import withFormik from "storybook-formik";
+// import * as Yup from 'yup';
+
+import CustomAutoComplete from './CustomAutoComplete';
+
+// const formSchema = Yup.object().shape({
+//     search: Yup.string()
+//         .required("Required"),
+// });
+
+
+export default {
+    title: 'Common Inputs/Custom AutoComplete',
+    component: CustomAutoComplete,
+    // decorators: [withFormik],
+    // parameters: {
+    //     formik: {
+    //         initialValues: {
+    //             search: ''
+    //         },
+    //         validationSchema: formSchema,
+    //     },
+    // }
+};
+
+export const AutoComplete = args =>
+(<CustomAutoComplete 
+    label="themes"
+    items={[
+    { id: 'foo', label: 'foo' },
+    { id: 'bar', label: 'bar' },
+    { id: 'baz', label: 'baz' },
+]} name="search" {...args} 
+/>)

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

@@ -0,0 +1,115 @@
+import React from 'react';
+import styled from 'styled-components';
+// Dropzone
+import Dropzone from 'react-dropzone-uploader';
+// Formik
+import { useField } from 'formik';
+// Prop Types
+import PropTypes from "prop-types";
+
+const CustomDropZone = (props) => {
+    const [field, meta, helpers] = useField(props)
+
+    return (
+        <Container {...props}>
+            <Label htmlFor={props.name} {...props}>{props.label}</Label>
+            <Dropzone
+                name={props.name}
+                SubmitButtonComponent={null}
+                maxFiles={1}
+                multiple={false}
+                onChangeStatus={({ meta, file }, status) => {
+                    console.log(meta)
+                    helpers.setValue({
+                        file,
+                        meta
+                    })
+                }}
+                accept={props.fileType}
+                inputContent={props.inputContent}
+                inputWithFilesContent=""
+            />
+            {meta.error && <Error>{meta.error}</Error>}
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    & .dzu-dropzone {
+        width: ${props => props.width}px;
+        background-color: #fadada;
+        height: ${props => props.height ? `${props.height}px` : '100px'};
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-family: sans-serif;
+        background-color: #b6b6b6;
+        border-radius: ${props => props.borderRadius}px;
+        padding: 10px;
+        
+    }
+
+    & .dzu-dropzoneActive {
+        background-color: ${props => props.backgroundOnDrop};
+        border-color: ${props => props.borderOnDrop};
+    }
+
+    & .dzu-input {
+        /* display: none; */
+        display: block;
+    }
+
+    & .dzu-inputLabel {
+        font-size: ${props => props.fontSize}px;
+        color: ${props => props.fontColor};
+    }
+
+    & .dzu-previewContainer {
+        padding: 0;
+        position: relative;
+        width: 100%;
+        min-height: 60px;
+        z-index: 1;
+        border-radius: ${props => props.borderRadius}px;
+    }
+
+
+    & .dzu-previewImage {
+        width: 100%;
+        height: ${props => props.height ? `${props.height}px` : '100px'};
+        border-radius: ${props => props.borderRadius}px;
+    } 
+`
+const Label = styled.label`
+    margin-bottom: 5px;
+    text-transform: capitalize;
+    font-size: ${props => props.labelFontSize || 15}px;
+    color: ${props => props.labelColor || 'black'};
+`
+const Error = styled.p`
+    color: red;
+    margin-top: 3px;
+`
+
+CustomDropZone.defaultProps = {
+    inputContent: 'Upload image',
+    fileType: 'image/*'
+};
+
+CustomDropZone.propTypes = {
+    width: PropTypes.string,
+    height: PropTypes.string,
+    backgroundOnDrop: PropTypes.string,
+    borderOnDrop: PropTypes.string,
+    fontSize: PropTypes.number,
+    fontColor: PropTypes.string,
+    labelColor: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    borderRadius: PropTypes.number,
+};
+
+
+export default CustomDropZone