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

package/src/components/Button/Button.js

@@ -0,0 +1,67 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/** ButtonAppearance enum */
+export const ButtonAppearance = {
+    DEFAULT: "default",
+    PRIMARY: "primary",
+    SECONDARY: "secondary"
+};
+/** ButtonSize enum */
+export const ButtonSize = {
+    SMALL: "small",
+    MEDIUM: "medium",
+    LARGE: "large"
+};
+
+/**
+ * 
+ * Displays a Button component 
+ */
+const Button = (props) => {
+    const { children, className, loading, disabled, appearance, size, onClick, ...restProps } = props;
+    const btnClassName = `RCB-btn RCB-btn-${appearance} RCB-btn-${size} ${className}` + (loading ? " RCB-btn-loading" : "");
+
+    return (<button className={btnClassName} disabled={disabled} onClick={onClick} {...restProps}>
+        {children}
+    </button>);
+};
+
+Button.propTypes = {
+    /** Add any additional classes to Button component */
+    className: PropTypes.string,
+    /** Boolean indicating whether the button should render as disabled */
+    disabled: PropTypes.bool,
+    /** Boolean indicating whether the button is in loading state */
+    loading: PropTypes.bool,
+    /** String indicating how Button should be rendered. 
+     * Must be one of,
+     * ButtonAppearance = {
+        DEFAULT: "default",
+        PRIMARY: "primary",
+        SECONDARY: "secondary"
+       }   
+    */
+    appearance: PropTypes.oneOf(Object.values(ButtonAppearance)),
+    /** String indicating the size of the Button
+     * Must be one of,
+     * ButtonSize = {
+        SMALL: "small",
+        MEDIUM: "medium",
+        LARGE: "large"
+    }
+    */
+    size: PropTypes.oneOf(Object.values(ButtonSize)),
+    /** Button onClick handler */
+    onClick: PropTypes.func
+};
+
+Button.defaultProps = {
+    onClick: () => {},
+    appearance: ButtonAppearance.DEFAULT,
+    size: ButtonSize.SMALL,
+    className: ""
+};
+
+export default Button;
+

package/src/components/Button/Button.stories.js

@@ -0,0 +1,103 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import Button, { ButtonAppearance, ButtonSize } from "./Button";
+
+export const SimpleUsage = () => {
+  return (
+    <div className="margin-btns">
+      <Button size={ButtonSize.SMALL} onClick={action("clicked")}>
+        SMALL
+      </Button>
+      <Button size={ButtonSize.MEDIUM} onClick={action("clicked")}>
+        MEDIUM
+      </Button>
+      <Button size={ButtonSize.LARGE} onClick={action("clicked")}>
+        LARGE
+      </Button>
+    </div>
+  );
+};
+
+SimpleUsage.story = {
+  parameters: {
+    docs: {
+      storyDescription: "Depicts a simple usage of the button",
+    },
+  },
+};
+
+export const PrimaryButton = () => {
+  return (
+    <div className="margin-btns">
+      <Button
+        appearance={ButtonAppearance.PRIMARY}
+        size={ButtonSize.SMALL}
+        onClick={action("clicked")}
+      >
+        SMALL
+      </Button>
+      <Button
+        appearance={ButtonAppearance.PRIMARY}
+        size={ButtonSize.MEDIUM}
+        onClick={action("clicked")}
+      >
+        MEDIUM
+      </Button>
+      <Button
+        appearance={ButtonAppearance.PRIMARY}
+        size={ButtonSize.LARGE}
+        onClick={action("clicked")}
+      >
+        LARGE
+      </Button>
+    </div>
+  );
+};
+
+PrimaryButton.story = {
+  parameters: {
+    docs: {
+      storyDescription: "Depicts a primary button",
+    },
+  },
+};
+
+export const SecondaryButton = () => {
+  return (
+    <div className="margin-btns">
+      <Button
+        appearance={ButtonAppearance.SECONDARY}
+        size={ButtonSize.SMALL}
+        onClick={action("clicked")}
+      >
+        SMALL
+      </Button>
+      <Button
+        appearance={ButtonAppearance.SECONDARY}
+        size={ButtonSize.MEDIUM}
+        onClick={action("clicked")}
+      >
+        MEDIUM
+      </Button>
+      <Button
+        appearance={ButtonAppearance.SECONDARY}
+        size={ButtonSize.LARGE}
+        onClick={action("clicked")}
+      >
+        LARGE
+      </Button>
+    </div>
+  );
+};
+
+SecondaryButton.story = {
+  parameters: {
+    docs: {
+      storyDescription: "Depicts a secondary button",
+    },
+  },
+};
+
+export default {
+    title: "Button",
+};

package/src/components/Button/DropdownButton.js

@@ -0,0 +1,60 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import InlineModal, { InlineModalActivator, InlineModalBody } from "../InlineModal";
+import List from "../List";
+
+const DefaultDropdownButtonItem = (props) => {
+    let { itemData = {}, onClick } = props;
+    let { name } = itemData;
+
+    const onItemClicked = () => {
+        onClick(itemData);
+    };
+
+    return (<li className="RCB-list-item" onClick={onItemClicked}>{name}</li>);
+};
+
+DefaultDropdownButtonItem.propTypes = {
+    itemData: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired
+    }).isRequired,
+    onClick: PropTypes.func.isRequired
+};
+  
+const DropdownButton = (props) => {
+    const { label, options, className, onClick, DropdownButtonItem, ...restProps } = props;
+    const modalRef = useRef();
+
+    const onItemClicked = (itemData) => {
+        onClick(itemData);
+        modalRef.current.hideModal();
+    };
+
+    return (<InlineModal className={`RCB-dropdown-button ${className}`} ref={modalRef}>
+        <InlineModalActivator>{label}</InlineModalActivator>
+        <InlineModalBody>
+            <List items={options} ListItem={DropdownButtonItem} onClick={onItemClicked} {...restProps} />
+        </InlineModalBody>
+    </InlineModal>);
+};
+
+DropdownButton.propTypes = {
+    label: PropTypes.string,
+    /** Dropdown items list */
+    options: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        name: PropTypes.string,
+    })).isRequired,
+    onClick: PropTypes.func.isRequired,
+    DropdownButtonItem: PropTypes.any,
+    className: PropTypes.string
+};
+
+DropdownButton.defaultProps = {
+    label: "Select",
+    DropdownButtonItem: DefaultDropdownButtonItem,
+    className: ""
+};
+
+export default DropdownButton;

package/src/components/Button/DropdownButton.stories.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { Fragment } from "react";
+import DropdownButton from "./DropdownButton";
+
+const DROPDOWN_OPTIONS = [{
+    id: "PrintApple",
+    name: "Print Apple",
+    message: "Apple"
+}, {
+    id: "PrintMango",
+    name: "Print Mango",
+    message: "Mango"
+}, {
+    id: "PrintGrapes",
+    name: "Print Grapes",
+    message: "Grapes"
+}];
+
+export const DefaultDropdownButton = () => {
+    const [ message, setMessage ] = useState();
+
+    const printMessage = (data) => {
+        const { message } = data;
+        setMessage(message);
+    };
+
+    return (<Fragment>
+        <DropdownButton 
+            label="Actions" 
+            options={DROPDOWN_OPTIONS} 
+            onClick={printMessage} />
+        <div>{`Message is ${message}`}</div>
+    </Fragment>);
+};
+
+export default {
+    title: "Dropdown Button"
+};

package/src/components/Button/buttonTheme.css

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

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

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

package/src/components/DataLoader/DataLoader.js

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

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

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

package/src/components/Form/Checkbox.js

@@ -0,0 +1,73 @@
+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} />
+        <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

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