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

package/src/components/Form/Toggle.js

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

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

@@ -1 +0,0 @@
-.RCB-form-el-inline{margin:20px 0;display:inline-block}.RCB-form-el-inline .RCB-form-el-label{margin-right:15px}.RCB-form-el-inline .RCB-toggle{display:inline-block}.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-dd-with-create .RCB-inline-modal-body{display:flex;flex-direction:column}.RCB-dd-with-create .RCB-inline-modal-body .RCB-list{flex:1;overflow:scroll}.RCB-dd-with-create .RCB-dd-create-cta{padding:10px;text-align:center;border:1px solid #bfbfbf;cursor:pointer}.RCB-clear-selected{background:#f2f0f0;padding:3px 6px;font-size:11px;border-radius:15px;border:1px solid #ccc}.RCB-selection-wrapper{float:right}.RCB-selection-wrapper .RCB-select-arrow{float:unset}.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-dd-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:70%;vertical-align:top;white-space:nowrap}.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;box-sizing:content-box;cursor:pointer}.RCB-toggle.active{background-color:#2cb191}.RCB-toggle.active .RCB-toggle-knob{background-color:#FFF}.RCB-toggle-disable{cursor:not-allowed;opacity:0.8}.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

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

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

package/src/components/Form/formTheme.scss

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

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

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

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

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

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

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

@@ -1,48 +0,0 @@
-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]
-        }
-    }
-};