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

package/src/components/Button/buttonTheme.css

@@ -1 +0,0 @@
-.RCB-btn{border-radius:3px;cursor:pointer}.RCB-btn-default:hover{background:#f3f3f3}.RCB-btn-primary{background:#1fa7fd;color:#FFF;border:0}.RCB-btn-primary:hover{background:#208dd2}.RCB-btn-secondary{background:#FFF;border:1px solid #95c7e7}.RCB-btn-secondary:hover{background:#eef8ff}.RCB-btn-small{padding:6px 8px}.RCB-btn-medium{padding:10px 15px}.RCB-btn-large{padding:15px 22px}

package/src/components/Button/buttonTheme.scss

@@ -1,45 +0,0 @@
-.RCB {
-    &-btn {
-        border-radius: 3px;
-        cursor: pointer;
-    }
-
-    &-btn {
-        &-default {
-            &:hover {
-                background: #f3f3f3;
-            }
-        }
-    
-        &-primary {
-            background: #1fa7fd;
-            color: #FFF;
-            border: 0;
-    
-            &:hover {
-                background: #208dd2;
-            }
-        }
-    
-        &-secondary {
-            background: #FFF;
-            border: 1px solid #95c7e7;
-    
-            &:hover {
-                background: #eef8ff;
-            }
-        }
-    
-        &-small {
-            padding: 6px 8px;
-        }
-    
-        &-medium {
-            padding: 10px 15px;
-        }
-    
-        &-large {
-            padding: 15px 22px;
-        }
-    }
-}

package/src/components/Button/index.js

@@ -1,5 +0,0 @@
-import Button, { ButtonAppearance, ButtonSize } from "./Button";
-import DropdownButton from "./DropdownButton";
-
-export default Button;
-export { ButtonAppearance, ButtonSize, DropdownButton };

package/src/components/DataLoader/DataLoader.js

@@ -1,86 +0,0 @@
-import React, { useState, useEffect, Fragment } from "react";
-import PropTypes from "prop-types";
-import Promise from "bluebird";
-import dequal from "dequal";
-import dataLoader from "../../core/dataLoader";
-import cloneDeep from "lodash.clonedeep";
-import utils from "../../core/utils";
-
-const DefaultLoader = () => {
-    return (<div>Loading...</div>);
-};
-
-const loadData = (requests) => {
-    let promisesArray = requests.map(reqObj => {
-        return dataLoader.getRequestDef(reqObj);
-    });
-
-    return Promise.all(promisesArray);
-};
-
-const DataLoader = (props) => {
-    const [ isLoading, setIsLoading ] = useState(true);
-    const dataRef = React.useRef();
-    const { children, Loader, requests, onDataLoaded, onDataFailed } = props;
-
-    const renderLoader = () => {
-        const LoaderComponent = Loader || utils.getDefaultConfig("DefaultLoader") || DefaultLoader;
-        return <LoaderComponent />;
-    };
-
-    const renderChildren = () => {
-        return children;
-    };
-
-    const fetchData = () => {
-        setIsLoading(true);
-        loadData(requests)
-            .then(resultsArray => {
-                onDataLoaded(resultsArray);
-            })
-            .catch(exception => {
-                onDataFailed(exception);
-            })
-            .finally(() => {
-                setIsLoading(false);
-            });
-    }
-
-    useEffect(() => {
-        /* 
-        As useEffect does not do a deep comparision on dependent props, 
-        do a manual deep comparision to decide whether to load data
-        */
-        if (!dequal(requests, dataRef.current)) {
-            dataRef.current = cloneDeep(requests);
-            fetchData();
-        }
-    });
-
-    return (<Fragment>
-        {isLoading ? 
-            renderLoader()
-            : renderChildren()}
-    </Fragment>);
-};
-
-DataLoader.propTypes = {
-    /** Requests array */
-    requests: PropTypes.array.isRequired,
-    /** Callback function which is called when data is loaded */
-    onDataLoaded: PropTypes.func,
-    /** Callback function which is called when data fetching fails */
-    onDataFailed: PropTypes.func,
-    /** Custom loader component */
-    Loader: PropTypes.oneOfType([
-        PropTypes.instanceOf(Element),
-        PropTypes.func
-    ])
-};
-
-DataLoader.defaultProps = {
-    onDataLoaded: () => {},
-    onDataFailed: () => {}
-}
-
-export default DataLoader;

package/src/components/DataLoader/DataLoader.stories.js

@@ -1,72 +0,0 @@
-import React, { Fragment } from "react";
-import DataLoader from "./DataLoader";
-import dataLoader from "../../core/dataLoader";
-
-export const SimpleUsage = () => {
-    dataLoader.addRequestConfig("getTodos", {
-        method: "GET",
-        url: "https://jsonplaceholder.typicode.com/todos",
-    });
-
-    const onDataLoaded = ([todos]) => {
-        console.log(todos);
-    };
-
-    const onDataFailed = e => {
-        console.log("Error ", e);
-    };
-
-    const requests = [
-        {
-        requestId: "getTodos",
-        },
-    ];
-
-    return (<Fragment>
-        <p>Use the <code>DataLoader</code> component to make implicit API calls by wrapping the JSX content where you want the API data with this component.
-        This would mostly be used for GET calls.</p>
-        <DataLoader requests={requests} onDataLoaded={onDataLoaded} onDataFailed={onDataFailed}>
-            <div>Received the data</div>
-        </DataLoader>
-    </Fragment>);
-};
-
-export const FunctionUrl = () => {
-  dataLoader.addRequestConfig("getTodoById", {
-    method: "GET",
-    url: function(params) {
-      return `https://jsonplaceholder.typicode.com/todos/${params.id}`;
-    },
-  });
-
-  const onDataLoaded = ([todo]) => {
-    console.log(todo);
-  };
-
-  const onDataFailed = e => {
-    console.log("Error ", e);
-  };
-
-  const requests = [
-    {
-      requestId: "getTodoById",
-      urlParams: {
-        id: 1,
-      },
-    },
-  ];
-
-  return (
-    <DataLoader requests={requests} onDataLoaded={onDataLoaded} onDataFailed={onDataFailed}>
-      <div>Recieved todo data</div>
-    </DataLoader>
-  );
-};
-
-FunctionUrl.story = {
-  name: "Function URL",
-};
-
-export default {
-    title: "Data fetching|DataLoader (Component)"
-};

package/src/components/DataLoader/index.js

@@ -1,3 +0,0 @@
-import DataLoader from "./DataLoader";
-
-export default DataLoader;

package/src/components/Form/Checkbox.js

@@ -1,73 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import PropTypes from "prop-types";
-import { FormContext } from "./Form";
-import FormElementWrapper from "./FormElementWrapper";
-  
-const Checkbox = (props) => {
-    const { label, name, className, value, defaultValue, appearance, onChange, ...restProps } = props;
-    const { onValueChange } = useContext(FormContext);
-
-    const postFormValueChange = (value) => {
-        typeof(onValueChange) === "function" && onValueChange(name, value);
-    };
-
-    const onInputChange = (event) => {
-        const value = event.target.checked;
-
-        if (typeof(onChange) === "function") {
-            onChange(value);
-        }
-
-        postFormValueChange(value);
-    }
-
-    useEffect(() => {
-        /* set the initial form element value in the form context */
-        const postValue = typeof(onChange) === "function" ? value : defaultValue;
-        postFormValueChange(postValue);
-    }, [value, defaultValue]);
-
-    let inputProps = {
-        type: "checkbox",
-        label,
-        name,
-        id: name,
-        defaultChecked: defaultValue,
-        className: "RCB-form-el",
-        onChange: onInputChange,
-        ...restProps
-    };
-
-    if (typeof(onChange) === "function") {
-        /* make it a controlled component if onChange function is given */
-        inputProps.checked = value;
-    }
-
-    return (<FormElementWrapper className={className} appearance={appearance}>
-        <input {...inputProps} data-hj-allow />
-        <label className="RCB-form-el-label" htmlFor={name}>{label}</label>
-    </FormElementWrapper>);
-};
-
-Checkbox.propTypes = {
-    /** Pass any additional classNames to Input component */
-    className: PropTypes.string,
-    /** Label for the input element */
-    label: PropTypes.any,
-    /** Unique ID for the input element */
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /** Will be used only with onChange function, or else ignored */
-    value: PropTypes.bool,
-    defaultValue: 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
-};
-
-Checkbox.defaultProps = {
-    className: "",
-    appearance: "inline"
-};
-
-export default Checkbox;

package/src/components/Form/DragDropFileUploader.js

@@ -1,67 +0,0 @@
-import React, { useState, useContext } from "react";
-import PropTypes from "prop-types";
-import { FormContext } from "./Form";
-import FormElementWrapper from "./FormElementWrapper";
-
-const DragDropFileUploader = (props) => {
-    const { name, label, children, onChange, className, appearance } = props;
-    const [ isDragOver, setIsDragOver ] = useState(false);
-    const { onValueChange } = useContext(FormContext);
-
-    const onDragEnter = () => {
-        setIsDragOver(true);
-    };
-
-    const onDragLeave = () => {
-        setIsDragOver(false);
-    };
-
-    const onDragOver = (event) => {
-        event.preventDefault();
-    };
-
-    const onDrop = (event) => {
-        event.preventDefault();
-        let value = event.dataTransfer.files;
-
-        if (typeof(onChange) === "function") {
-            onChange(value);
-        }
-
-        typeof(onValueChange) === "function" && onValueChange(name, value);
-
-        setIsDragOver(false);
-    };
-
-    return (<FormElementWrapper className={className} appearance={appearance}>
-        <label className="RCB-form-el-label">{label}</label>
-        <div onDragEnter={onDragEnter} onDragLeave={onDragLeave} 
-                onDragOver={onDragOver} onDrop={onDrop} 
-                className={`RCB-drag-drop-uploader ${isDragOver ? "RCB-drag-over" : ""}`}>
-            {children}
-        </div>
-    </FormElementWrapper>);
-};
-
-DragDropFileUploader.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,
-    /** mime type of the acceptable files */
-    accept: PropTypes.string,
-    /** 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
-};
-
-DragDropFileUploader.defaultProps = {
-    className: "",
-    appearance: "inline",
-    accept: "image/*"
-};
-
-export default DragDropFileUploader;