@unbxd-ui/unbxd-react-components 0.2.105 → 0.2.107-beta.2

package/src/components/Form/stories/RangeSlider.stories.js

@@ -0,0 +1,84 @@
+import React from "react";
+import Form from "../Form";
+import RangeSlider from "../RangeSlider";
+import Button, { ButtonAppearance } from "../../Button";
+
+export const _RangeSlider = () => {
+    const onSubmit = formData => {
+      const { data } = formData;
+      const { price } = data;
+  
+      console.log("Selected price: ", price);
+    };
+  
+    return (
+      <Form onSubmit={onSubmit}>
+        <RangeSlider
+          name="price"
+          label="Select price range"
+          min="10"
+          max="100"
+          appearance="block"
+          defaultValue="10"
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+          Submit
+        </Button>
+      </Form>
+    );
+};
+  
+_RangeSlider.story = {
+    name: "Range Slider ",
+  
+    parameters: {
+        info: {
+            propTables: [RangeSlider]
+        }
+    },
+};
+
+export const BubbleRangeSlider = () => {
+    const onSubmit = formData => {
+      const { data } = formData;
+      const { price } = data;
+  
+      console.log("Selected price: ", price);
+    };
+  
+    return (
+      <Form onSubmit={onSubmit}>
+        <RangeSlider
+          name="price"
+          label="Select price range"
+          min="10"
+          max="100"
+          appearance="block"
+          defaultValue="10"
+          showBubble={true}
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+          Submit
+        </Button>
+      </Form>
+    );
+};
+  
+BubbleRangeSlider.story = {
+    name: "Range Slider with Bubble",
+  
+    parameters: {
+        info: {
+            propTables: [RangeSlider]
+        }
+    },
+};
+
+export default {
+    title: "Form|RangeSlider",
+    parameters: {
+        info: {
+            propTables: [RangeSlider],
+        }
+    }
+};

package/src/components/Form/stories/TextInput.stories.js

@@ -0,0 +1,77 @@
+import React, { Fragment, useRef } from "react";
+import Form from "../Form";
+import Input from "../Input";
+import Button, { ButtonAppearance } from "../../Button";
+
+export const TextInput = () => {
+    const onSubmit = formData => {
+        const { data, errors = {} } = formData;
+
+        if (Object.keys(errors).length) {
+            console.log("ERRORS FOUND : ");
+            console.log(errors);
+        } else {
+            console.log("Submitted data: ", data);
+        }
+    };
+
+    return (
+        <Form onSubmit={onSubmit}>
+        <Input
+            type="text"
+            name="email"
+            label="Name"
+            placeholder="Enter your email"
+            appearance="block"
+            validations={[
+            {
+                type: "EMAIL",
+                message: "Please enter a valid email address",
+            },
+            ]}
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+            Submit
+        </Button>
+        </Form>
+    );
+};
+
+TextInput.story = {
+    parameters: {
+        info: {
+            propTables: [Input]
+        }
+    },
+};
+
+export const RefUsage = () => {
+    const inputRef = useRef();
+
+    const focusInput = () => {
+        inputRef.current.focus();
+    };
+
+    return (
+        <Fragment>
+            <Button appearance={ButtonAppearance.SECONDARY} className="full-width-btn" onClick={focusInput}>Focus input</Button>
+            <Input
+                ref={inputRef}
+                type="text"
+                name="email"
+                label="Name"
+                placeholder="Enter your email"
+                appearance="block"
+            />
+        </Fragment>
+    );
+};
+
+export default {
+    title: "Form|Text Input",
+    parameters: {
+        info: {
+            propTables: [TextInput]
+        }
+    }
+};

package/src/components/Form/stories/Textarea.stories.js

@@ -0,0 +1,43 @@
+import React from "react";
+import Form from "../Form";
+import Textarea from "../Textarea";
+import Button, { ButtonAppearance } from "../../Button";
+
+export const _Textarea = () => {
+    const onSubmit = formData => {
+      const { data } = formData;
+  
+      console.log("Submitted data: ", data);
+    };
+  
+    return (
+      <Form onSubmit={onSubmit}>
+        <Textarea
+          name="description"
+          label="Description"
+          placeholder="Enter your description"
+          appearance="block"
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+          Submit
+        </Button>
+      </Form>
+    );
+};
+  
+_Textarea.story = {
+    parameters: {
+      info: {
+        propTables: [Textarea],
+      },
+    },
+};
+
+export default {
+    title: "Form|Textarea",
+    parameters: {
+        info: {
+            propTables: [Textarea]
+        }
+    }
+};

package/src/components/Form/stories/Toggle.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Toggle from "../Toggle";
+
+export default {
+  title: "Toggle",
+};
+
+export const SimpleUsage = () => {
+  const onChange = isActive => {
+    console.log("isActive: ", isActive);
+  };
+
+  return <Toggle label="Is Active?" name="isActive" appearance="block" onChange={onChange} />;
+};

package/src/components/Form/stories/form.stories.js

@@ -0,0 +1,216 @@
+import React, { Fragment, useRef } from "react";
+import Form from "../Form";
+import Dropdown from "../Dropdown";
+import Input from "../Input";
+import Textarea from "../Textarea";
+import RadioList from "../RadioList";
+import Checkbox from "../Checkbox";
+import FileUploader from "../FileUploader";
+import DragDropFileUploader from "../DragDropFileUploader";
+import Toggle from "../Toggle";
+import RangeSlider from "../RangeSlider";
+import Button, { ButtonAppearance } from "../../Button";
+import { FRUITS_LIST } from "../../../../public/Constants";
+
+export const FormExample = () => {
+    const onSubmit = formData => {
+        const { data, errors = {} } = formData;
+    
+        if (Object.keys(errors).length) {
+            console.log("ERRORS FOUND : ");
+            console.log(errors);
+        } else {
+            console.log("Submitted data: ", data);
+        }
+    };
+
+    return (<Form onSubmit={onSubmit}>
+        <Input
+            type="text"
+            name="email"
+            label="Name"
+            placeholder="Enter your email"
+            appearance="block"
+        />
+        <Textarea
+          name="description"
+          label="Description"
+          placeholder="Enter your description"
+          appearance="block"
+        />
+        <RadioList
+          name="yesNoOption"
+          label="Are you sure?"
+          options={[
+            { id: "YES", name: "Yes" },
+            { id: "NO", name: "No" },
+          ]}
+          appearance="block"
+        />
+        <Checkbox name="orange" label="Orange" />
+        <Checkbox name="pineapple" label="Pineapple" value={true} onChange={()=>{}} />
+        <Checkbox name="grapes" label="Grapes" />
+        <br />
+        <Dropdown name="fruit" label="Select fruit" 
+            options={FRUITS_LIST} appearance="block"
+            validations={[{ type: "REQUIRED", message: "Please select a fruit" }]} />
+        <Toggle label="Is Active?" name="isActive" appearance="block" />
+        <RangeSlider
+          name="price"
+          label="Select price range"
+          min="10"
+          max="100"
+          appearance="block"
+          defaultValue="10"
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">Submit</Button>
+    </Form>);
+};
+
+FormExample.story = {
+    name: "Form"
+}
+
+export const _Dropdown = () => {
+  const onSubmit = formData => {
+    const { data } = formData;
+    const { fruit } = data;
+
+    console.log("Selected Fruit: ", fruit);
+  };
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <Dropdown name="fruit" label="Select fruit" options={FRUITS_LIST} appearance="block" />
+      <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+_Dropdown.story = {
+  name: "Dropdown ",
+
+  parameters: {
+    info: {
+      propTables: [Dropdown],
+    },
+  },
+};
+
+export const _FileUploader = () => {
+  const onSubmit = formData => {
+    const { data } = formData;
+    const { file } = data;
+
+    console.log("Selected file: ", file[0].name);
+  };
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <FileUploader name="file" appearance="block">
+        <a href="javascript:void(0)">Upload File</a>
+      </FileUploader>
+      <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+_FileUploader.story = {
+  name: "File Uploader ",
+
+  parameters: {
+    info: {
+      propTables: [FileUploader],
+    },
+  },
+};
+
+export const _DragDropFileUploader = () => {
+  const onSubmit = formData => {
+    const { data } = formData;
+    const { filesList } = data;
+
+    console.log("Selected file: ", filesList[0].name);
+  };
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <DragDropFileUploader name="filesList" appearance="block">
+        <div>Drag & drop files into this area</div>
+      </DragDropFileUploader>
+      <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+_DragDropFileUploader.story = {
+  name: "DragDrop File Uploader ",
+
+  parameters: {
+    info: {
+      propTables: [DragDropFileUploader],
+    },
+  },
+};
+
+export const _Toggle = () => {
+  const onSubmit = formData => {
+    const { data } = formData;
+    const { isActive } = data;
+
+    console.log("isActive: ", isActive);
+  };
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <Toggle label="Is Active?" name="isActive" appearance="block" />
+      <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+_Toggle.story = {
+  name: "Toggle ",
+
+  parameters: {
+    info: {
+      propTables: [Toggle],
+    },
+  },
+};
+
+export const GetFormData = () => {
+    const formRef = useRef();
+    const submitFormData = () => {
+        const formData = formRef.current.getFormData();
+        const { data } = formData;
+
+        console.log("Got data", data);
+    };
+
+    return (<Fragment>
+        <Form ref={formRef}>
+            <Input name="name" label="Enter name" />
+            <Input name="email" label="Enter Email ID" />
+            <Dropdown name="fruit" label="Select fruit" options={FRUITS_LIST} appearance="block" />
+        </Form>
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn" onClick={submitFormData}>Click to submit</Button>
+    </Fragment>);
+};
+
+export default {
+    title: "Form|Miscellanious",
+    parameters: {
+        info: {
+            propTables: [Form],
+        },
+    },
+};

package/src/components/InlineModal/InlineModal.js

@@ -0,0 +1,135 @@
+import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle } from "react";
+import PropTypes from "prop-types";
+
+export const InlineModalActivator = (props) => {
+    return props.children;
+}
+
+export const InlineModalBody = (props) => {
+    return props.children;
+}
+
+let InlineModal = (props, ref) => {
+    const { children, activatorAction, className, isModalOpen:propIsOpen, halign, onModalStateChange } = props;
+    let [ isModalOpen, setIsModalOpen ] = useState(propIsOpen);
+    let activatorProps = {};
+    let inlineModalClassName = `RCB-inline-modal ${className}`;
+    let showModalBody = isModalOpen;
+    const inlineModalRef = useRef();
+    const isFirstRun = useRef(true);
+
+    const changeModalState = (newState) => {
+        setIsModalOpen(newState);
+    }
+
+    const onActivatorClick = (e) => {
+        e.stopPropagation();
+        changeModalState(!isModalOpen);
+    }
+
+    const onBodyClick = (e) => {
+        const eventTarget = e.target;
+        const inlineModalNode = inlineModalRef.current;
+        let eventPathNodes = e.composedPath();
+        let isWithinModal = false;
+
+        if (inlineModalNode.contains(eventTarget)) {
+            isWithinModal = true;
+        } else {
+            for (let i = 0; i < eventPathNodes.length; i++) {
+                const node = eventPathNodes[i];
+                if (node!== window && inlineModalNode.contains(node)) {
+                    isWithinModal = true;
+                    break;
+                }
+            }
+        }
+
+        if (!isWithinModal) {
+            /* outside click -> close modal */
+            changeModalState(false);
+        }
+    }
+    
+    useEffect(() => {
+        /* add when mounted */
+        document.addEventListener("click", onBodyClick);
+
+        /* return function to be called when unmounted */
+        return () => {
+          document.removeEventListener("click", onBodyClick);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (isFirstRun.current) {
+            /* skip first run */
+            isFirstRun.current = false;
+            return;
+        }
+        typeof(onModalStateChange) === "function" && onModalStateChange(isModalOpen);
+    }, [isModalOpen]);
+
+    if (activatorAction === "click") {
+        activatorProps = {
+            onClick: onActivatorClick
+        };
+    } else if (activatorAction === "hover") {
+        inlineModalClassName += " hover-open";
+        showModalBody = true;
+    }
+
+    /* add methods that can be accessed via this component's ref */
+    useImperativeHandle(ref, () => ({
+        hideModal: () => {
+            changeModalState(false);
+        }
+    }));
+
+    return (<div className={inlineModalClassName} ref={inlineModalRef}>
+        <div {...activatorProps} className="RCB-inline-modal-btn">{children[0]}</div>
+        {showModalBody && <div className={`RCB-inline-modal-body RCB-align-${halign}`}>{children[1]}</div>}
+    </div>);
+}
+
+InlineModal = forwardRef(InlineModal);
+
+InlineModal.propTypes = {
+    /** Pass any additional classNames to InlineModal component */
+    className: PropTypes.string,
+    /** Horizontal alignment of the inline modal body */
+    halign: PropTypes.oneOf(["left", "right"]),
+    /** Event on which the modal should be opened */
+    activatorAction: PropTypes.oneOf(["click", "hover"]),
+    children: (props, propName, componentName) => {
+        const children = props[propName];
+
+        if (React.Children.count(children) !== 2) {
+            return new Error(
+                `${componentName} should have 2 children`
+            );
+        }
+
+        if (children[0].type !== InlineModalActivator || 
+            children[1].type !== InlineModalBody) {
+            return new Error(
+                `${componentName} should have an InlineModalActivator & InlineModalBody components as children`
+            );
+        }
+    },
+    /** Boolean prop to have the modal open or close */
+    isModalOpen: PropTypes.bool,
+    /** callback function that gets called when the modal state changes (either opens or closes) */
+    onModalStateChange: PropTypes.func
+};
+
+InlineModal.defaultProps = {
+    className: "",
+    halign: "left",
+    activatorAction: "click", // or "hover"
+    isModalOpen: false
+};
+
+InlineModal.displayName = "InlineModal";
+
+export default InlineModal;

package/src/components/InlineModal/InlineModal.stories.js

@@ -0,0 +1,54 @@
+import React, { Fragment, useState } from "react";
+import { linkTo } from "@storybook/addon-links";
+
+import { FRUITS_LIST } from "../../../public/Constants";
+import InlineModal, { InlineModalActivator, InlineModalBody } from "./InlineModal";
+import { List } from "../";
+
+/* eslint-disable react/prop-types */
+const CustomListItem = (props) => {
+    const { itemData } = props;
+    const { id, name } = itemData;
+
+    return (<li>
+        <input type="checkbox" id={id}></input>
+        <label htmlFor={id}>{name}</label>
+    </li>)
+};
+/* eslint-enable react/prop-types */
+
+export const SimpleUsage = () => {
+    const onModalStateChange = (isModalOpen) => {
+        console.log("Modal state change 1");
+        console.log({isModalOpen});
+    };
+
+    return (<Fragment>
+        <InlineModal onModalStateChange={onModalStateChange}>
+            <InlineModalActivator>
+                <div>Select a fruit</div>
+            </InlineModalActivator>
+            <InlineModalBody>
+                <List items={FRUITS_LIST} showApp={linkTo("List")} ListItem={CustomListItem} />
+            </InlineModalBody>
+        </InlineModal>
+    </Fragment>);
+};
+
+SimpleUsage.story = {
+    parameters: {
+        info: {
+            text: "Displaying a dropdown list of items",
+        }
+    }
+};
+
+export default {
+    title: "Modals|Inline modal",
+    parameters: {
+        info: {
+            propTables: [InlineModal, InlineModalActivator, InlineModalBody],
+            propTablesExclude: [List],
+        }
+    }
+};

package/src/components/InlineModal/index.js

@@ -0,0 +1,4 @@
+import InlineModal, { InlineModalActivator, InlineModalBody } from "./InlineModal";
+
+export default InlineModal;
+export { InlineModalActivator, InlineModalBody };

package/src/components/InlineModal/inlineModal.css

@@ -0,0 +1 @@
+.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-btn{display:inline-block;background:#FFF;border:1px solid #eee;padding:10px;border-radius:3px;cursor:pointer}.RCB-inline-modal-body{position:absolute;background:#FFF;border:1px solid #efeeee;box-shadow:0 9px 12px 0 rgba(0,0,0,0.15);z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}

package/src/components/InlineModal/inlineModalCore.css

@@ -0,0 +1 @@
+.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-body{position:absolute;z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}

package/src/components/InlineModal/inlineModalCore.scss

@@ -0,0 +1,31 @@
+.RCB {
+    &-inline-modal {
+        position: relative;
+        display: inline-block;
+
+        &.hover-open {
+            .RCB-inline-modal-body {
+                display: none;
+            }
+        
+            &:hover {
+                .RCB-inline-modal-body {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    &-inline-modal-body {
+        position: absolute;
+        z-index: 1;
+
+        &.RCB-align-left {
+            left: 0;
+        }
+
+        &.RCB-align-right {
+            right: 0;
+        }
+    }
+}

package/src/components/InlineModal/inlineModalTheme.css

@@ -0,0 +1 @@
+.RCB-inline-modal-btn{display:inline-block;background:#FFF;border:1px solid #eee;padding:10px;border-radius:3px;cursor:pointer}.RCB-inline-modal-body{background:#FFF;border:1px solid #efeeee;box-shadow:0 9px 12px 0 rgba(0,0,0,0.15)}

package/src/components/InlineModal/inlineModalTheme.scss

@@ -0,0 +1,16 @@
+.RCB {
+    &-inline-modal-btn {
+        display: inline-block;
+        background: #FFF;
+        border: 1px solid #eee;
+        padding: 10px;
+        border-radius: 3px;
+        cursor: pointer;
+    }
+
+    &-inline-modal-body {
+        background: #FFF;
+        border: 1px solid #efeeee;
+        box-shadow: 0 9px 12px 0 rgba(0,0,0,0.15);
+    }
+}