@unbxd-ui/unbxd-react-components 0.2.100 → 0.2.101-beta.1

package/src/components/Form/Toggle.js

@@ -0,0 +1,96 @@
+import React, { useState, useContext, useEffect } from "react";
+import { useDidUpdateEffect } from "../../core/customHooks";
+import { FormContext } from "./Form";
+import FormElementWrapper from "./FormElementWrapper";
+import PropTypes from "prop-types";
+  
+const Toggle = (props) => {
+    const { name, label, value, defaultValue, className, appearance, toggleElWidth, toggleKnobSize, onChange, disabled } = props;
+    const initialValue = typeof(onChange) === "function" ? value : defaultValue;
+    const [ isActive, setIsActive ] = useState(initialValue);
+    const { onValueChange } = useContext(FormContext);
+
+    const toggleActive = () => { 
+        if (typeof(onChange) === "function") {
+            onChange(!isActive);
+        } else {
+            setIsActive(!isActive);
+        }   
+    };
+
+    const postFormValueChange = (value) => {
+        typeof(onValueChange) === "function" && onValueChange(name, value);
+    };
+
+    useDidUpdateEffect(() => {
+        /* runs only when isActive changes, hence call the onChange function then */
+        const value = isActive;
+        postFormValueChange(value);
+    }, [isActive]);
+
+    useEffect(() => {
+        /* set the initial form element value in the form context */
+        postFormValueChange(defaultValue);
+    }, [defaultValue]);
+
+    useEffect(() => {
+        setIsActive(initialValue);
+    }, [initialValue]);
+
+    let toggleElCSS = {
+        width: `${toggleElWidth}px`
+    };
+
+    let toggleKnobCSS = {
+        width: `${toggleKnobSize}px`,
+        height: `${toggleKnobSize}px`
+    };
+
+    if (isActive) {
+        toggleKnobCSS.transform = `translateX(${toggleElWidth - toggleKnobSize}px)`;
+    }
+
+    const toggleClasses = `RCB-form-el RCB-toggle ${isActive ? "active" : ""} ${disabled ? "RCB-toggle-disable" : ""}`
+    
+
+    return (<FormElementWrapper className={className} appearance={appearance}>
+        <label className="RCB-form-el-label" htmlFor={name}>{label}</label>
+        <div className={toggleClasses} 
+            onClick={disabled ? () => {} : toggleActive} 
+            style={toggleElCSS}>
+            <div className="RCB-toggle-knob" style={toggleKnobCSS}></div>
+        </div>
+    </FormElementWrapper>);
+};
+
+Toggle.propTypes = {
+    /** Pass any additional classNames to Input component */
+    className: PropTypes.string,
+    /** Label for the input element */
+    label: PropTypes.string,
+    /** Unique ID for the input element */
+    name: PropTypes.string.isRequired,
+    /** Will be used only with onChange function, or else ignored */
+    value: PropTypes.bool,
+    defaultValue: PropTypes.bool,
+    /** Set this to true to disable the toggle component */
+    disabled: PropTypes.bool,
+    /** Define the appearance of the form element. Accepted values are either "inline" or "block" */
+    appearance: PropTypes.oneOf(["inline", "block"]),
+    /** Becomes a controlled component if onChange function is given */
+    onChange: PropTypes.func,
+    /** width of the toggle element in pixels */
+    toggleElWidth: PropTypes.number,
+    /** size of the toggle inner knob in pixels */
+    toggleKnobSize: PropTypes.number
+};
+
+Toggle.defaultProps = {
+    className: "",
+    disabled: false,
+    appearance: "inline",
+    toggleElWidth: 40,
+    toggleKnobSize: 13
+};
+
+export default Toggle;

package/src/components/Form/form.css

@@ -0,0 +1 @@
+.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-block{margin:20px 0}.RCB-form-el-block .RCB-form-el-label{display:block}.RCB-dropdown .RCB-list-item{list-style-type:none;padding:10px;cursor:pointer}.RCB-dropdown .RCB-list-item:hover{background-color:#eee}.RCB-dropdown .RCB-list-item.selected{background-color:#eee}.RCB-select-arrow{float:right;font-size:12px;color:#96a9bc;margin-right:12px;margin-left:8px}.RCB-select-arrow:after{content:"\25BC";vertical-align:middle}.RCB-file-input{cursor:pointer}.RCB-drag-drop-uploader{border:2px dashed rgba(104,128,145,0.42);padding:20px;text-align:center}.RCB-drag-over{background:#f3f3f3}.RCB-toggle{padding:2px 3px;background-color:#FFF;border:1px solid #CCC;border-radius:20px;cursor:pointer}.RCB-toggle.active{background-color:#2cb191}.RCB-toggle.active .RCB-toggle-knob{background-color:#FFF}.RCB-toggle-knob{background-color:#8399ae;border-radius:50%;-webkit-transition:transform .3s ease;-moz-transition:transform .3s ease;-ms-transition:transform .3s ease;transition:transform .3s ease}

package/src/components/Form/formCore.scss

@@ -0,0 +1,142 @@
+.RCB {
+    &-form-el {
+        &-inline {
+            margin: 20px 0;
+            display: inline-block;
+
+            .RCB-form-el-label {
+                margin-right: 15px;
+            }
+
+            .RCB-toggle {
+                display: inline-block;
+            }
+        }
+
+        &-block {
+            margin: 20px 0;
+
+            .RCB-form-el-label {
+                display: block;
+            }
+        }
+    }
+
+    &-dropdown {
+        .RCB-list-item {
+            list-style-type: none;
+            padding: 10px;
+            cursor: pointer;
+    
+            &:hover {
+                background-color: #eee;
+            }
+    
+            &.selected {
+                background-color: #eee;
+            }
+        }
+    }
+
+    &-dd-with-create {
+        .RCB-inline-modal-body {
+            display: flex;
+            flex-direction: column;
+
+            .RCB-list {
+                flex: 1;
+                overflow: scroll;
+            }
+        }
+
+        .RCB-dd-create-cta {
+            padding: 10px;
+            text-align: center;
+            border: 1px solid #bfbfbf;
+            cursor: pointer;
+        }
+    }
+
+    &-clear-selected {
+        background: #f2f0f0;
+        padding: 3px 6px;
+        font-size: 11px;
+        border-radius: 15px;
+        border: 1px solid #ccc;
+    }
+
+    &-selection-wrapper {
+        float: right;
+
+        .RCB-select-arrow {
+            float: unset;
+        }
+    }
+
+    &-select-arrow {
+        float: right;
+        font-size: 12px;
+        color:  #96a9bc;
+        margin-right: 12px;
+        margin-left: 8px;
+    
+        &:after {
+            content: "\25BC";
+            vertical-align: middle;
+        }
+    }
+
+    &-dd-label {
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 70%;
+        vertical-align: top;
+        white-space: nowrap;
+    }
+
+    &-file-input {
+        cursor: pointer;
+    }
+
+    &-drag-drop-uploader {
+        border: 2px dashed rgba(104,128,145,.42);
+        padding: 20px;
+        text-align: center;
+    }
+
+    &-drag-over {
+        background: #f3f3f3;
+    }
+
+    &-toggle {
+        padding: 2px 3px;
+        background-color: #FFF;
+        border: 1px solid #CCC;
+        border-radius: 20px;
+        box-sizing: content-box;
+        cursor: pointer;
+
+        &.active {
+            background-color: #2cb191;
+
+            .RCB-toggle-knob {
+                background-color: #FFF;
+            }
+        }
+
+        &-disable {
+            cursor: not-allowed;
+            opacity: 0.8;
+        }
+    }
+
+    &-toggle-knob {
+        background-color: #8399ae;
+        border-radius: 50%;
+        -webkit-transition: transform .3s ease;
+        -moz-transition: transform .3s ease;
+        -ms-transition: transform .3s ease;
+        transition: transform .3s ease;
+    }
+}

package/src/components/Form/formTheme.scss

@@ -0,0 +1,27 @@
+.RCB {
+    &-form-error {
+        font-size: 12px;
+        color: #d25b5b;
+    }
+
+    &-dd-search {
+        position: relative;
+    }
+
+    &-dd-search-icon {
+        position: absolute;
+        top: 5px;
+        left: 10px;
+
+        &:before {
+            content: "\1F50D";
+        }
+    }
+
+    &-dd-search-ip {
+        width: 100%;
+        padding: 10px 30px;
+        border: none;
+        border-bottom: 1px solid #CCC;
+    }
+}

package/src/components/Form/index.js

@@ -0,0 +1,13 @@
+import Form from "./Form";
+
+export Input from "./Input";
+export Checkbox from "./Checkbox";
+export RadioList from "./RadioList";
+export Textarea from "./Textarea";
+export Dropdown from "./Dropdown";
+export RangeSlider from "./RangeSlider";
+export FileUploader from "./FileUploader";
+export DragDropFileUploader from "./DragDropFileUploader";
+export Toggle from "./Toggle";
+
+export default Form;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import Form from "../Form";
+import Checkbox from "../Checkbox";
+import Button, { ButtonAppearance } from "../../Button";
+
+export const _Checkbox = () => {
+    const onSubmit = formData => {
+      const { data } = formData;
+  
+      console.log("Submitted data: ", data);
+    };
+  
+    return (
+      <Form onSubmit={onSubmit}>
+        <Checkbox name="orange" label="Orange" />
+        <Checkbox name="pineapple" label="Pineapple" value={true} onChange={()=>{}} />
+        <Checkbox name="grapes" label="Grapes" />
+        <br />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+          Submit
+        </Button>
+      </Form>
+    );
+};
+  
+_Checkbox.story = {
+    parameters: {
+        info: {
+            propTables: [Checkbox]
+        }
+    },
+};
+
+export default {
+    title: "Form|Checkbox",
+    parameters: {
+        info: {
+            propTables: [Checkbox]
+        }
+    }
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import DragDropFileUploader from "../DragDropFileUploader";
+
+export default {
+  title: "DragDropFileUploader",
+};
+
+export const SimpleUsage = () => {
+  const onFileChange = (files = []) => {
+    console.log("SELECTED FILES");
+    for (let i = 0; i < files.length; i++) {
+      console.log(files[i].name);
+    }
+  };
+
+  return (
+    <DragDropFileUploader onChange={onFileChange} appearance="block">
+      <div>Drag & drop files into this area</div>
+    </DragDropFileUploader>
+  );
+};

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

@@ -0,0 +1,124 @@
+import React from "react";
+import { FRUITS_LIST } from "../../../../public/Constants";
+import Dropdown from "../Dropdown";
+import dataLoader from "../../../core/dataLoader";
+
+export default {
+    title: "Dropdown",
+};
+
+export const SimpleUsage = () => {
+    const onChange = selectedFruit => {
+        console.log("Selected Fruit: ", selectedFruit);
+    };
+
+    return (
+        <Dropdown
+        name="fruit"
+        label="Select a fruit"
+        options={FRUITS_LIST}
+        halign="left"
+        appearance="block"
+        onChange={onChange}
+        noSelectionLabel="Select"
+        />
+    );
+};
+
+SimpleUsage.story = {
+    name: "Simple Usage ",
+
+    parameters: {
+        info: {
+        propTables: [Dropdown],
+        },
+    }
+};
+
+dataLoader.addRequestConfig("getPaginatedUsers", {
+    method: "GET",
+    url: "https://reqres.in/api/users",
+});
+
+export const PaginatedDropdown = () => {
+    const onChange = selected => {
+        console.log("Selected User: ", selected);
+    };
+
+    const responseFormatter = (response) => {
+        return {
+            ...response,
+            entries: response.data
+        };
+    };
+  
+    return (
+      <Dropdown
+        paginationType="SERVER"
+        requestId="getPaginatedUsers"
+        pageSize={3}
+        maxHeight={50}
+        name="user"
+        label="Select user"
+        appearance="block"
+        nameAttribute="first_name"
+        onChange={onChange}
+        noSelectionLabel="Select"
+        responseFormatter={responseFormatter}
+      />
+    );
+  };
+
+PaginatedDropdown.story = {
+    name: "Dropdown with server side pagination",
+  
+    parameters: {
+      info: {
+        propTables: [Dropdown],
+      },
+    },
+};
+
+
+
+
+export const SearchEnbaledDropdown = () => {
+    const onChange = selected => {
+        console.log("Selected User: ", selected);
+    };
+
+    const responseFormatter = (response) => {
+        return {
+            ...response,
+            entries: response.data
+        };
+    };
+  
+    return (
+      <Dropdown
+        paginationType="SERVER"
+        requestId="getPaginatedUsers"
+        pageSize={3}
+        maxHeight={50}
+        name="user"
+        label="Select user"
+        appearance="block"
+        nameAttribute="first_name"
+        onChange={onChange}
+        noSelectionLabel="Select"
+        showSearch={true}
+        perPageKey={"per_page"}
+        responseFormatter={responseFormatter}
+      />
+    );
+  };
+
+PaginatedDropdown.story = {
+    name: "Dropdown with server side search and pagination",
+  
+    parameters: {
+      info: {
+        propTables: [Dropdown],
+      },
+    },
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import FileUploader from "../FileUploader";
+
+export default {
+  title: "FileUploader",
+};
+
+export const SimpleUsage = () => {
+  const onFileChange = (files = []) => {
+    console.log("SELECTED FILES");
+    for (let i = 0; i < files.length; i++) {
+      console.log(files[i].name);
+    }
+  };
+
+  return (
+    <FileUploader name="files" appearance="block" onChange={onFileChange} multiple={true}>
+      <a href="javascript:void(0)">Upload File</a>
+    </FileUploader>
+  );
+};

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

@@ -0,0 +1,87 @@
+import React 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 Toggle from "../Toggle";
+import RangeSlider from "../RangeSlider";
+import Button, { ButtonAppearance } from "../../Button";
+import { FRUITS_LIST } from "../../../../public/Constants";
+
+const formValues = {
+    email: "anuhosad@gmail.com",
+    description: "This is some temporary description",
+    yesNoOption: "NO",
+    fruits: ["pineapple"],
+    fruit: FRUITS_LIST.find(obj => obj.id === 4),
+    isActive: true,
+    price: 75
+};
+
+export const FormExample = () => {
+    const onSubmit = formData => {
+        const { data } = formData;
+    
+        console.log("On submit ----> ", data);
+    };
+
+    const onChange = formData => {
+        const { data } = formData;
+    
+        console.log("On change ----> ", data);
+    };
+
+    return (<Form onSubmit={onSubmit} onChange={onChange}>
+        <Input defaultValue={formValues["email"]}
+            type="text"
+            name="email"
+            label="Name"
+            placeholder="Enter your email"
+            appearance="block"
+        />
+        <Textarea defaultValue={formValues["description"]} 
+          name="description"
+          label="Description"
+          placeholder="Enter your description"
+          appearance="block"
+        />
+        <RadioList defaultValue={formValues["yesNoOption"]} 
+          name="yesNoOption"
+          label="Are you sure?"
+          options={[
+            { id: "YES", name: "Yes" },
+            { id: "NO", name: "No" },
+          ]}
+          appearance="block"
+        />
+        <Checkbox name="orange" label="Orange" defaultValue={formValues["fruits"].includes("orange")}/>
+        <Checkbox name="pineapple" label="Pineapple" defaultValue={formValues["fruits"].includes("pineapple")} />
+        <Checkbox name="grapes" label="Grapes" defaultValue={formValues["fruits"].includes("grapes")} />
+        <br />
+        <Dropdown name="fruit"  defaultValue={formValues["fruit"]} label="Select fruit" options={FRUITS_LIST} appearance="block" />
+        <Toggle name="isActive" defaultValue={formValues["isActive"]} label="Is Active?" appearance="block" />
+        <RangeSlider defaultValue={formValues["price"]} 
+          name="price"
+          label="Select price range"
+          min="10"
+          max="100"
+          appearance="block"
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">Submit</Button>
+    </Form>);
+};
+
+FormExample.story = {
+    name: "Form"
+}
+
+export default {
+    title: "Form|Form",
+    parameters: {
+        info: {
+            propTables: [Form],
+        },
+    },
+};

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

@@ -0,0 +1,48 @@
+import React from "react";
+import Form from "../Form";
+import RadioList from "../RadioList";
+import Button, { ButtonAppearance } from "../../Button";
+
+export const _RadioList = () => {
+    const onSubmit = formData => {
+      const { data } = formData;
+  
+      console.log("Submitted data: ", data);
+    };
+  
+    return (
+      <Form onSubmit={onSubmit}>
+        <RadioList
+          name="yesNoOption"
+          label="Are you sure?"
+          options={[
+            { id: "YES", name: "Yes" },
+            { id: "NO", name: "No" },
+          ]}
+          appearance="block"
+        />
+        <Button appearance={ButtonAppearance.PRIMARY} className="full-width-btn">
+          Submit
+        </Button>
+      </Form>
+    );
+};
+  
+_RadioList.story = {
+    name: "RadioList",
+  
+    parameters: {
+        info: {
+            propTables: [RadioList]
+        }
+    }
+};
+
+export default {
+    title: "Form|RadioList",
+    parameters: {
+        info: {
+            propTables: [RadioList]
+        }
+    }
+};