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

package/src/components/Accordian/Accordian.stories.js

@@ -1,92 +0,0 @@
-import React, { Fragment, useState } from "react";
-import Accordian from "./Accordian";
-
-
-export default {
-    title: 'Accordian',
-    component: Accordian,
-};
-
-const AccordianBody = () => {
-    const [count, setRandomNumber] = useState(1);
-    const onSetRandom = ()=>{
-        setRandomNumber(Math.round(Math.random()*10))
-    }
-    return <div style={{padding:'20px'}}>
-        <h3>This is accordian body</h3>
-        <button onClick={onSetRandom}> changed to {count}</button>
-    </div>
-}
-const AccordianTitle = ({id}) => {
-    return <div>
-        {`Title ${id}`}
-    </div>
-}  
-const Template = (args) => <Accordian {...args} />;
-
-export const Default = Template.bind();
-Default.args = {
-    items: [{
-        id: "41",
-        titleComponent: <AccordianTitle id={'41'}/>,
-        bodyComponent: <AccordianBody/>,
-    }, {
-        id: "42",
-        titleComponent: <AccordianTitle id={'42'}/>,
-        bodyComponent: <AccordianBody/>
-    }, {
-        id: "43",
-        titleComponent: <AccordianTitle id={'43'}/>,
-        bodyComponent: <AccordianBody/>
-    }, {
-        id: "44",
-        titleComponent: <AccordianTitle id={'44'}/>,
-        bodyComponent: <AccordianBody/>
-    }],
-    defaultOpen:""
-};
-
-export const DefaultOpen = Template.bind();
-DefaultOpen.args = {
-    items: [{
-        id: "41",
-        titleComponent: <AccordianTitle id={'41'}/>,
-        bodyComponent: <AccordianBody/>,
-    }, {
-        id: "42",
-        titleComponent: <AccordianTitle id={'42'}/>,
-        bodyComponent: <AccordianBody/>
-    }, {
-        id: "43",
-        titleComponent: <AccordianTitle id={'43'}/>,
-        bodyComponent: <AccordianBody/>
-    }, {
-        id: "44",
-        titleComponent: <AccordianTitle id={'44'}/>,
-        bodyComponent: <AccordianBody/>
-    }],
-    defaultOpen:"42"
-}
-
-export const OpenAtLeastOneAlways = Template.bind();
-OpenAtLeastOneAlways.args = {
-    items: [{
-        id: "411",
-        titleComponent: <AccordianTitle id={'41'}/>,
-        bodyComponent: <AccordianBody/>,
-    }, {
-        id: "421",
-        titleComponent: <AccordianTitle id={'42'}/>,
-        bodyComponent: <AccordianBody/>
-    }, {
-        id: "431",
-        titleComponent: <AccordianTitle id={'43'}/>,
-        bodyComponent: <AccordianBody/>
-    }, {
-        id: "441",
-        titleComponent: <AccordianTitle id={'44'}/>,
-        bodyComponent: <AccordianBody/>
-    }],
-    defaultOpen:"421",
-    allowOneOpen:true
-}

package/src/components/Accordian/accordianCore.scss

@@ -1,8 +0,0 @@
-.RCB {
-    &-accordian-title {
-       cursor: pointer;
-    }
-    &-list {
-        list-style-type: none;
-    }
-}

package/src/components/Accordian/accordianTheme.scss

@@ -1,6 +0,0 @@
-.RCB {
-    &-accordian-title {
-        padding: 10px;
-        border: 1px solid #ccc;
-    }
-}

package/src/components/Accordian/index.js

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

package/src/components/Button/Button.js

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

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

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

@@ -1,38 +0,0 @@
-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/button.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} />
-        <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;