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

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

@@ -1,84 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,216 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

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

package/src/components/InlineModal/inlineModal.css

@@ -1 +0,0 @@
-.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

@@ -1 +0,0 @@
-.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

@@ -1,31 +0,0 @@
-.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

@@ -1 +0,0 @@
-.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

@@ -1,16 +0,0 @@
-.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);
-    }
-}