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

package/src/components/Tooltip/index.js

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

package/src/components/Tooltip/tooltipCore.css

@@ -0,0 +1 @@
+.RCB-tooltip{display:inline-block;position:relative}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-hover{display:inline-block}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-click{display:inline-block}.RCB-tooltip-body{display:none;position:absolute;z-index:1}

package/src/components/Tooltip/tooltipCore.scss

@@ -0,0 +1,22 @@
+.RCB {
+    &-tooltip {
+        display: inline-block;
+        position: relative;
+
+        .RCB-tooltip-body {
+            &.RCB-tooltip-hover {
+                display: inline-block;
+            }
+        
+            &.RCB-tooltip-click {
+                display: inline-block;
+            }
+        }
+    }
+
+    &-tooltip-body {
+        display: none;
+        position: absolute;
+        z-index: 1;
+    }
+}

package/src/components/Tooltip/tooltipTheme.css

@@ -0,0 +1 @@
+.RCB-tooltip-btn{display:inline-block;font-style:italic;font-size:12px;color:#9199AA;background-color:#F8FAFB;border:1px solid #D0DDE2;padding:0px 6px;border-radius:50%;text-align:center}.RCB-tooltip-body{background:#FFF;padding:10px;border-radius:4px;box-shadow:0px 1px 7px 0px #ccc;margin-left:15px}

package/src/components/Tooltip/tooltipTheme.scss

@@ -0,0 +1,21 @@
+.RCB {
+    &-tooltip-btn {
+        display: inline-block;
+        font-style: italic;
+        font-size: 12px;
+        color: #9199AA;
+        background-color: #F8FAFB;
+        border: 1px solid #D0DDE2;
+        padding: 0px 6px;
+        border-radius: 50%;
+        text-align: center;
+    }
+
+    &-tooltip-body {
+        background: #FFF;
+        padding: 10px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 7px 0px #ccc;
+        margin-left: 15px;
+    }
+}

package/src/components/core.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-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}.RCB-modal{position:fixed;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center;z-index:2}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}.RCB-modal-close:before{content:"X"}.RCB-inline-modal{position:relative;display:inline-block}.RCB-inline-modal.hover-open .RCB-inline-modal-body{display:none}.RCB-inline-modal.hover-open:hover .RCB-inline-modal-body{display:block}.RCB-inline-modal-body{position:absolute;z-index:1}.RCB-inline-modal-body.RCB-align-left{left:0}.RCB-inline-modal-body.RCB-align-right{right:0}.RCB-list{margin:0;padding:0}.RCB-table{border-collapse:collapse;width:100%}.RCB-th.RCB-expand-column{width:50px}.RCB-th-sortable{cursor:pointer}.RCB-th-sort:after{content:"\2B0D"}.RCB-th-asc:after{content:"\25B2"}.RCB-th-dsc:after{content:"\25BC"}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-paginate-wrapper .RCB-per-page-count{display:inline-block}.RCB-paginate-wrapper .RCB-form-el-cont{margin:0}.RCB-paginate-wrapper .RCB-inline-modal-btn{background:transparent;padding:0}.RCB-paginate-nav{display:inline-block;border-radius:12px;border:solid 1px #8399ae;background-color:#f6f7f9;vertical-align:middle;margin-left:15px;overflow:hidden}.RCB-page-nav{padding:0 5px;text-decoration:none;color:inherit}.RCB-page-nav:first-child{border-right:solid 1px #8399ae}.RCB-page-nav.disabled{color:#ccc;pointer-events:none;cursor:not-allowed}.RCB-no-data{text-align:center}.RCB-tabs-container{display:flex}.RCB-tab-title{list-style-type:none;padding:10px;cursor:pointer}.RCB-tab-title.selected{background:#FFF;font-weight:bold;border:1px solid #cacaca;position:relative;z-index:1}.RCB-tabs-horizontal{flex-direction:column}.RCB-tabs-horizontal .RCB-tab-title{display:inline-block}.RCB-tabs-horizontal .RCB-tab-title.selected{border-bottom:0;bottom:-1px}.RCB-tabs-vertical .RCB-tab-title{display:block}.RCB-tabs-vertical .RCB-tab-title.selected{border-right:0;right:-1px}.RCB-tab-content{list-style-type:none;border:1px solid #cacaca;padding:10px}.RCB-tab-content.selected{display:block}.RCB-tab-disabled{pointer-events:none;cursor:not-allowed;color:#ccc}.RCB-progress-bar{width:100%;position:relative;background:#ccc}.RCB-progress-value{height:100%;position:absolute;top:0;background:#3d9565}.RCB-tooltip{display:inline-block;position:relative}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-hover{display:inline-block}.RCB-tooltip .RCB-tooltip-body.RCB-tooltip-click{display:inline-block}.RCB-tooltip-body{display:none;position:absolute;z-index:1}.RCB-accordian-title{cursor:pointer}.RCB-list{list-style-type:none}.RCB-hidden{display:none}.RCB-no-pointer{pointer-events:none}.RCB-disabled .RCB-inline-modal-btn{cursor:not-allowed;pointer-events:none}

package/src/components/core.scss

@@ -0,0 +1,29 @@
+/**
+    Add all the styles here without which the component behaviour would be meaningless 
+    & hence these styles are must haves for anyone using the component
+**/
+
+@import "./Form/formCore.scss";
+@import "./Modal/modalCore.scss";
+@import "./InlineModal/inlineModalCore.scss";
+@import "./List/listCore.scss";
+@import "./Table/tableCore.scss";
+@import "./TabsComponent/tabsCore.scss";
+@import "./ProgressBar/progressBarCore.scss";
+@import "./Tooltip/tooltipCore.scss";
+@import "./Accordian/accordianCore.scss";
+
+.RCB-hidden {
+    display: none;
+}
+
+.RCB-no-pointer {
+    pointer-events: none;
+}
+
+.RCB-disabled {
+    .RCB-inline-modal-btn {
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}

package/src/components/index.js

@@ -0,0 +1,38 @@
+import Button, { DropdownButton } from "./Button";
+import List from "./List";
+import Modal from "./Modal";
+import InlineModal from "./InlineModal";
+import DataLoader from "./DataLoader";
+import Form, { Input, Textarea, Checkbox, RadioList, Dropdown, RangeSlider, FileUploader, DragDropFileUploader, Toggle } from "./Form";
+import Table , { PaginationComponent } from "./Table";
+import TabsComponent from "./TabsComponent";
+import NotificationComponent from "./NotificationComponent";
+import ProgressBar from "./ProgressBar";
+import Tooltip from "./Tooltip";
+import Accordian from "./Accordian";
+
+export {
+    Button,
+    DropdownButton,
+    List,
+    Modal,
+    InlineModal,
+    DataLoader,
+    Form,
+    Input,
+    Textarea,
+    Checkbox,
+    RadioList,
+    Dropdown,
+    RangeSlider,
+    FileUploader,
+    DragDropFileUploader,
+    Toggle,
+    Table,
+    PaginationComponent,
+    TabsComponent,
+    NotificationComponent,
+    ProgressBar,
+    Tooltip,
+    Accordian
+};

package/src/components/theme.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}.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}.RCB-inline-modal-btn{display:inline-block;background:#FFF;border:1px solid #eee;padding:10px;border-radius:3px;cursor:pointer}.RCB-inline-modal-body{background:#FFF;border:1px solid #efeeee;box-shadow:0 9px 12px 0 rgba(0,0,0,0.15)}.RCB-notif{padding:10px;border-radius:3px}.RCB-notif-success{color:#129274;border:solid 1px #2cb191;background-color:#edfffb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75178;background-color:#fff3f6}.RCB-notif-warning{color:#445870;border:solid 1px #efbf6a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #45b5c1;background-color:#f4fcff}.RCB-table td{padding:10px}.RCB-th{background-color:#2287b4;color:#FFF;font-weight:normal;padding:10px}.RCB-even-tr{background-color:#FFF}.RCB-odd-tr{background-color:#dcf1fa}.RCB-expanded-row{background-color:#ecf2f4}.RCB-paginate-bar{background-color:#a3c9db;text-align:right;font-size:14px;padding:5px;border-radius:5px 5px 0 0}.RCB-tooltip-btn{display:inline-block;font-style:italic;font-size:12px;color:#9199AA;background-color:#F8FAFB;border:1px solid #D0DDE2;padding:0px 6px;border-radius:50%;text-align:center}.RCB-tooltip-body{background:#FFF;padding:10px;border-radius:4px;box-shadow:0px 1px 7px 0px #ccc;margin-left:15px}.RCB-accordian-title{padding:10px;border:1px solid #ccc}

package/src/components/theme.scss

@@ -0,0 +1,11 @@
+/**
+    Add all the styles here which suggests a theme for the component but is not a must have to use the component
+**/
+
+@import "./Button/buttonTheme.scss";
+@import "./Form/formTheme.scss";
+@import "./InlineModal/inlineModalTheme.scss";
+@import "./NotificationComponent/notificationTheme.scss";
+@import "./Table/tableTheme.scss";
+@import "./Tooltip/tooltipTheme.scss";
+@import "./Accordian/accordianTheme.scss";

package/src/core/Validators.js

@@ -0,0 +1,34 @@
+import utils from "./utils";
+
+const VALIDATORS = {
+    EMAIL: (value = "") => {
+        const regEx = /^[_A-Za-z0-9-+]+(\.[_A-Za-z0-9-\\+]+)*@[_A-Za-z0-9-+]+(\.[_A-Za-z0-9-+]+)*(\.[A-Za-z]{2,})$/i;
+        return regEx.test(value.trim());
+    },
+    NUMERIC: (value = "") => {
+        const regEx = /^\d+$/;
+        const numValue = +value;
+        return regEx.test(numValue);
+    },
+    ALPHA_NUMERIC: (value = "") => {
+        const regEx = /^[A-Za-z0-9]+$/;
+        return regEx.test(value.trim());
+    },
+    URL: (value = "") => {
+        const regEx = /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/i;
+        return regEx.test(value.trim());
+    },
+    REQUIRED: (value) => {
+        if ((utils.isArray(value) && value.length == 0)
+            || (value !== 0 && !value)) {
+            return false;
+        }
+        return true;
+    },
+    CUSTOM: (value, validationObj) => {
+        const { validator = () => {} } = validationObj;
+        return validator.call(null, value, validationObj);
+    }
+};
+
+export default VALIDATORS;

package/src/core/customHooks.js

@@ -0,0 +1,20 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+
+export function useDidUpdateEffect(fn, inputs) {
+    const didMountRef = useRef(false);
+  
+    useEffect(() => {
+      if (didMountRef.current)
+        fn();
+      else
+        didMountRef.current = true;
+    }, inputs);
+}
+
+export function useForceUpdate() {
+    const [, setTick] = useState(0);
+    const update = useCallback(() => {
+      setTick(tick => tick + 1);
+    }, []);
+    return update;
+}

package/src/core/dataLoader.js

@@ -0,0 +1,143 @@
+import { Promise } from "bluebird";
+import { fetch as fetchPolyfill } from "whatwg-fetch";
+import utils from "./utils";
+
+const UNAUTHORIZED = 401,
+    NOT_FOUND = 404;
+
+class DataLoader {
+    _requestsMap = {}
+    _commonHeaders = {}
+    _responseParser = x => x
+    _requestParser = x => x
+    _exceptionHandler = x => x
+    _middlewares = {}
+    setCommonHeaders (headers) {
+        this._commonHeaders = {...this._commonHeaders, ...headers};
+    }
+    setResponseParser (responseParser) {
+        this._responseParser = responseParser;
+    }
+    setRequestParser (requestParser) {
+        this._requestParser = requestParser;
+    }
+    setExceptionHandler (exceptionHandler) {
+        this._exceptionHandler = exceptionHandler;
+    }
+    addRequestConfig (requestId, requestConfig) {
+        this._requestsMap[requestId] = requestConfig;
+    }
+    getRequestMiddleware (requestId) {
+        let requestMiddleware = x => x, 
+            middleware = this._middlewares[requestId];
+
+        if (typeof(middleware) !== "undefined" && typeof(middleware.reqParser) === "function") {
+            requestMiddleware = middleware.reqParser;
+        }
+
+        return requestMiddleware;
+    }
+    getResponseMiddleware (requestId) {
+        let responseMiddleware = x => x, 
+            middleware = this._middlewares[requestId];
+
+        if (typeof(middleware) !== "undefined" && typeof(middleware.resParser) === "function") {
+            responseMiddleware = middleware.resParser;
+        }
+
+        return responseMiddleware;
+    }
+    getRequestParams (requestId, params) {
+        const requestParser = this.getRequestMiddleware(requestId);
+        return requestParser(params, requestId);
+    }
+    parseResponseData (requestId, response, headers, status) {
+        const responseParser = this.getResponseMiddleware(requestId);
+        const commonParser = this._responseParser;
+        /* parse through common parser */
+        response = typeof(commonParser) === "function" ? commonParser(response, requestId, headers, status) : response;
+        return responseParser(response, requestId, headers, status);
+    }
+    getRequestDef ({ requestId, urlParams = {}, params = {}, headers = {} }) {
+        const requestConfig = this._requestsMap[requestId];
+        const { url, method = "GET" } = requestConfig;
+        const finalRequestParams = this.getRequestParams(requestId, params);
+        
+        let requestUrl = (typeof(url) === "function") ? url(urlParams) : url;
+        let reqMethod = method.toLowerCase();
+
+        let requestMetadata = {
+            method: (reqMethod === "form_post" || reqMethod === "upload") ? "post" : method,
+            headers: {...this._commonHeaders, ...headers}
+        };
+
+        const requestHeaders = requestMetadata.headers;
+
+        for (let header in requestHeaders) {
+            if (requestHeaders[header] === null) {
+                /* if header is set as null, delete it from the headers list */
+                delete requestHeaders[header];
+            }
+        }
+
+        if (reqMethod === "get") {
+            requestUrl = `${requestUrl}?${utils.getQueryParams(finalRequestParams)}`;
+        } else  if (["post", "delete", "put", "patch"].indexOf(reqMethod) > -1) {
+            requestMetadata.body = JSON.stringify(finalRequestParams);
+        } else if (reqMethod === "form_post" || reqMethod === "upload") {
+            const formData = new FormData();
+            for (const key in finalRequestParams) {
+                formData.append(key, finalRequestParams[key]);
+            }
+            requestMetadata.body = formData;
+            delete requestHeaders["Content-Type"];
+        }
+
+        return new Promise((resolve, reject) => {
+            return fetchPolyfill(requestUrl, requestMetadata)
+                .then(response => {
+                    const { status, statusText, headers } = response;
+
+                    if (status === UNAUTHORIZED || status === NOT_FOUND) {
+                        this._exceptionHandler(response);
+                        reject(response);
+                    } else {
+                        const stringStatus = status.toString();
+                        if (stringStatus.indexOf("2") === 0 || stringStatus.indexOf("4") === 0) {
+                            /* Success : 2** response code, or 4** response code */
+                            return response.json().then((data) => {
+                                return {
+                                  headers: headers,
+                                  status: status,
+                                  json: data
+                                }
+                            })
+                        } else {
+                            this._exceptionHandler(statusText);
+                            reject(statusText);
+                        }
+                    }
+                })
+                .then(({headers, json, status}) => {
+                    const parsedResponse = this.parseResponseData(requestId, json, headers, status);
+                    resolve(parsedResponse);
+                })
+                .catch(exception => {
+                    this._exceptionHandler(exception);
+                    reject(exception);
+                });
+        });
+    }
+    addMiddleware (requestId, { requestParser, responseParser }) {
+        if (typeof(this._middlewares[requestId]) !== "undefined") {
+            throw new Error(`Middleware for ${requestId} already exists`);
+        }
+
+        this._middlewares[requestId] = {
+            reqParser: requestParser,
+            resParser: responseParser
+        };
+    }
+}
+
+export default new DataLoader();

package/src/core/dataLoader.stories.js

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from "react";
+import dataLoader from "./dataLoader";
+import List from "../components/List";
+
+dataLoader.addRequestConfig("getUsers", {
+    method: "GET",
+    url: "https://jsonplaceholder.typicode.com/users",
+});
+
+dataLoader.addRequestConfig("getTodo", {
+    method: "GET",
+    url: function(params) {
+        return `https://jsonplaceholder.typicode.com/todos/${params.todoId}`
+    }
+});
+
+dataLoader.addRequestConfig("getPost", {
+    method: "GET",
+    url: function(params) {
+        return `https://jsonplaceholder.typicode.com/posts/${params.id}`
+    }
+});
+
+export const SimpleUsage = () => {
+    const [ data, setData ] = useState([]);
+
+    useEffect(() => {
+        const def = dataLoader.getRequestDef({
+            requestId: "getUsers"
+        });
+    
+        def.done((response) => {
+            setData(response);
+        });
+    
+        def.catch((e) => {
+            console.error(e);
+        });
+    }, []);
+
+    return (<div>
+        <p>Use the <code>dataLoader</code> instance to make explicit API calls. 
+        This would mostly be required for create/update/delete calls like POST, PUT, PATCH or DELETE</p>
+        {(data && data.length > 0) && <List items={data} />}
+    </div>);
+};
+
+export const RequestMiddleware = () => {
+    const [ data, setData ] = useState([]);
+    const { title } = data;
+
+    useEffect(() => {
+        dataLoader.addMiddleware("getTodo", {
+            requestParser: function(requestId, params) {
+                return {
+                    todoId: params.id
+                };
+            }
+        });
+
+        const def = dataLoader.getRequestDef({
+            requestId: "getTodo",
+            params: {
+                id: 1
+            },
+            urlParams: {
+                todoId: 1
+            }
+        });
+    
+        def.done((response) => {
+            setData(response);
+        });
+    
+        def.catch((e) => {
+            console.error(e);
+        });
+    }, []);
+
+    return (<div>
+        <p>Use the <code>addMiddleware</code> functionality to add request middleware code to parse/modify the request data before sending it to the API.</p>
+        <div>Todo name is {title}</div>
+    </div>);
+};
+
+export const ResponseMiddleware = () => {
+    const [ data, setData ] = useState([]);
+    const { postName } = data;
+
+    useEffect(() => {
+        dataLoader.addMiddleware("getPost", {
+            responseParser: function(requestId, response) {
+                return {
+                    postName: response.title
+                };
+            }
+        });
+
+        const def = dataLoader.getRequestDef({
+            requestId: "getPost",
+            urlParams: {
+                id: 1
+            }
+        });
+    
+        def.done((response) => {
+            setData(response);
+        });
+    
+        def.catch((e) => {
+            console.error(e);
+        });
+    }, []);
+
+    return (<div>
+        <p>Use the <code>addMiddleware</code> functionality to add response middleware code to parse/modify the response data before using it in the component</p>
+        <div>Post name is {postName}</div>
+    </div>);
+};
+
+export default {
+    title: "Data fetching|dataLoader (instance)"
+};

package/src/core/index.js

@@ -0,0 +1,3 @@
+export dataLoader from "./dataLoader";
+export utils from "./utils";
+export customHooks from "./customHooks";

package/src/core/utils.js

@@ -0,0 +1,95 @@
+import VALIDATORS from "./Validators";
+let uniqueCounter = 1;
+
+const utils = {
+    configs: {},
+    setDefaultConfigs: function(configs) {
+        this.configs = {...this.configs, ...configs};
+    },
+    getDefaultConfigs: function() {
+        return this.configs;
+    },
+    getDefaultConfig: function(key) {
+        return this.configs ? this.configs[key] : "";
+    },
+    getQueryParams: function(params = {}) {
+        let queryParams = [];
+        
+        queryParams = Object.keys(params).map(key => {
+            return `${key}=${params[key]}`;
+        });
+
+        return queryParams.join("&");
+    },
+    isEven: function(value) {
+        return value % 2 === 0;
+    },
+    getPagIndex: function(pageConfig) {
+        const { perPageCount, pageNo } = pageConfig;
+        const startIndex = (pageNo - 1) * perPageCount;
+        const endIndex = pageNo * perPageCount;
+
+        return {
+            start: startIndex,
+            end: endIndex
+        };
+    },
+    omit: function(object = {}, omitKeys = []) {
+        let newObject = {};
+
+        for (let key in object) {
+            if (omitKeys.indexOf(key) === -1) {
+                newObject[key] = object[key];
+            }
+        }
+
+        return newObject;
+    },
+    getUniqueId: function() {
+        return uniqueCounter++;
+    },
+    isObjectEmpty: function(obj) {
+        return Object.keys(obj).length ? false : true;
+    },
+    debounce: function(func, debounceTime) {
+        let timeout;
+
+        return function() {
+            const context = this, 
+                args = arguments;
+            clearTimeout(timeout);
+            timeout = setTimeout(function() {
+                timeout = null;
+                func.apply(context, args);
+            }, debounceTime);
+        };
+    },
+    checkIfValid: function(value, validations) {
+        let isValidValue = true;
+        let errorMessage;
+    
+        for (let i = 0; i < validations.length; i++) {
+            const validationObj = validations[i];
+            const { type, message = "Invalid field value" } = validationObj;
+            isValidValue = VALIDATORS[type](value, validationObj);
+    
+            if (!isValidValue) {
+                errorMessage = message;
+                break;
+            }
+        }
+    
+        return {
+            isValid: isValidValue,
+            error: errorMessage
+        };
+    },
+    isObject: function(value) {
+        return Object.prototype.toString.call(value) === "[object Object]";
+    },
+    isArray: function(value) {
+        return Object.prototype.toString.call(value) === "[object Array]";
+    }
+}
+
+export default utils;

package/src/index.js

@@ -0,0 +1,68 @@
+import {
+    Button,
+    DropdownButton,
+    List,
+    Modal,
+    InlineModal,
+    DataLoader,
+    Form,
+    Input,
+    Textarea,
+    Checkbox,
+    RadioList,
+    Dropdown,
+    RangeSlider,
+    FileUploader,
+    DragDropFileUploader,
+    Toggle,
+    Table,
+    PaginationComponent,
+    TabsComponent,
+    NotificationComponent,
+    ProgressBar,
+    Tooltip,
+    Accordian
+} from "./components";
+
+import { 
+    dataLoader, 
+    utils,
+    customHooks
+} from "./core";
+
+import { ButtonAppearance, ButtonSize } from "./components/Button";
+
+import { InlineModalActivator, InlineModalBody } from "./components/InlineModal";
+
+export {
+    Button,
+    ButtonAppearance,
+    ButtonSize,
+    DropdownButton,
+    List,
+    Modal,
+    InlineModal,
+    InlineModalActivator,
+    InlineModalBody,
+    Form,
+    Input,
+    Textarea,
+    Checkbox,
+    RadioList,
+    Dropdown,
+    RangeSlider,
+    FileUploader,
+    DragDropFileUploader,
+    Toggle,
+    DataLoader,
+    Table,
+    PaginationComponent,
+    TabsComponent,
+    NotificationComponent,
+    ProgressBar,
+    Tooltip,
+    Accordian,
+    dataLoader,
+    utils,
+    customHooks
+};

package/vscode-templates/NewStoryTemplate.stories.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import #{component_name} from "./#{component_name}";
+
+storiesOf("#{component_name}", module)
+    .add("Simple Usage", () => {
+        return (<#{component_name}></#{component_name}>);
+    });