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

package/core/utils.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Validators = _interopRequireDefault(require("./Validators"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var uniqueCounter = 1;
+var utils = {
+  configs: {},
+  setDefaultConfigs: function setDefaultConfigs(configs) {
+    this.configs = _objectSpread(_objectSpread({}, this.configs), configs);
+  },
+  getDefaultConfigs: function getDefaultConfigs() {
+    return this.configs;
+  },
+  getDefaultConfig: function getDefaultConfig(key) {
+    return this.configs ? this.configs[key] : "";
+  },
+  getQueryParams: function getQueryParams() {
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var queryParams = [];
+    queryParams = Object.keys(params).map(function (key) {
+      return "".concat(key, "=").concat(params[key]);
+    });
+    return queryParams.join("&");
+  },
+  isEven: function isEven(value) {
+    return value % 2 === 0;
+  },
+  getPagIndex: function getPagIndex(pageConfig) {
+    var perPageCount = pageConfig.perPageCount,
+        pageNo = pageConfig.pageNo;
+    var startIndex = (pageNo - 1) * perPageCount;
+    var endIndex = pageNo * perPageCount;
+    return {
+      start: startIndex,
+      end: endIndex
+    };
+  },
+  omit: function omit() {
+    var object = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var omitKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var newObject = {};
+
+    for (var key in object) {
+      if (omitKeys.indexOf(key) === -1) {
+        newObject[key] = object[key];
+      }
+    }
+
+    return newObject;
+  },
+  getUniqueId: function getUniqueId() {
+    return uniqueCounter++;
+  },
+  isObjectEmpty: function isObjectEmpty(obj) {
+    return Object.keys(obj).length ? false : true;
+  },
+  debounce: function debounce(func, debounceTime) {
+    var timeout;
+    return function () {
+      var context = this,
+          args = arguments;
+      clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        timeout = null;
+        func.apply(context, args);
+      }, debounceTime);
+    };
+  },
+  checkIfValid: function checkIfValid(value, validations) {
+    var isValidValue = true;
+    var errorMessage;
+
+    for (var i = 0; i < validations.length; i++) {
+      var validationObj = validations[i];
+      var type = validationObj.type,
+          _validationObj$messag = validationObj.message,
+          message = _validationObj$messag === void 0 ? "Invalid field value" : _validationObj$messag;
+      isValidValue = _Validators["default"][type](value, validationObj);
+
+      if (!isValidValue) {
+        errorMessage = message;
+        break;
+      }
+    }
+
+    return {
+      isValid: isValidValue,
+      error: errorMessage
+    };
+  },
+  isObject: function isObject(value) {
+    return Object.prototype.toString.call(value) === "[object Object]";
+  },
+  isArray: function isArray(value) {
+    return Object.prototype.toString.call(value) === "[object Array]";
+  }
+};
+var _default = utils;
+exports["default"] = _default;

package/index.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Accordian", {
+  enumerable: true,
+  get: function get() {
+    return _components.Accordian;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _components.Button;
+  }
+});
+Object.defineProperty(exports, "ButtonAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _Button.ButtonAppearance;
+  }
+});
+Object.defineProperty(exports, "ButtonSize", {
+  enumerable: true,
+  get: function get() {
+    return _Button.ButtonSize;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _components.Checkbox;
+  }
+});
+Object.defineProperty(exports, "DataLoader", {
+  enumerable: true,
+  get: function get() {
+    return _components.DataLoader;
+  }
+});
+Object.defineProperty(exports, "DragDropFileUploader", {
+  enumerable: true,
+  get: function get() {
+    return _components.DragDropFileUploader;
+  }
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _components.Dropdown;
+  }
+});
+Object.defineProperty(exports, "DropdownButton", {
+  enumerable: true,
+  get: function get() {
+    return _components.DropdownButton;
+  }
+});
+Object.defineProperty(exports, "FileUploader", {
+  enumerable: true,
+  get: function get() {
+    return _components.FileUploader;
+  }
+});
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function get() {
+    return _components.Form;
+  }
+});
+Object.defineProperty(exports, "InlineModal", {
+  enumerable: true,
+  get: function get() {
+    return _components.InlineModal;
+  }
+});
+Object.defineProperty(exports, "InlineModalActivator", {
+  enumerable: true,
+  get: function get() {
+    return _InlineModal.InlineModalActivator;
+  }
+});
+Object.defineProperty(exports, "InlineModalBody", {
+  enumerable: true,
+  get: function get() {
+    return _InlineModal.InlineModalBody;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _components.Input;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _components.List;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _components.Modal;
+  }
+});
+Object.defineProperty(exports, "NotificationComponent", {
+  enumerable: true,
+  get: function get() {
+    return _components.NotificationComponent;
+  }
+});
+Object.defineProperty(exports, "PaginationComponent", {
+  enumerable: true,
+  get: function get() {
+    return _components.PaginationComponent;
+  }
+});
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function get() {
+    return _components.ProgressBar;
+  }
+});
+Object.defineProperty(exports, "RadioList", {
+  enumerable: true,
+  get: function get() {
+    return _components.RadioList;
+  }
+});
+Object.defineProperty(exports, "RangeSlider", {
+  enumerable: true,
+  get: function get() {
+    return _components.RangeSlider;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _components.Table;
+  }
+});
+Object.defineProperty(exports, "TabsComponent", {
+  enumerable: true,
+  get: function get() {
+    return _components.TabsComponent;
+  }
+});
+Object.defineProperty(exports, "Textarea", {
+  enumerable: true,
+  get: function get() {
+    return _components.Textarea;
+  }
+});
+Object.defineProperty(exports, "Toggle", {
+  enumerable: true,
+  get: function get() {
+    return _components.Toggle;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _components.Tooltip;
+  }
+});
+Object.defineProperty(exports, "customHooks", {
+  enumerable: true,
+  get: function get() {
+    return _core.customHooks;
+  }
+});
+Object.defineProperty(exports, "dataLoader", {
+  enumerable: true,
+  get: function get() {
+    return _core.dataLoader;
+  }
+});
+Object.defineProperty(exports, "utils", {
+  enumerable: true,
+  get: function get() {
+    return _core.utils;
+  }
+});
+
+var _components = require("./components");
+
+var _core = require("./core");
+
+var _Button = require("./components/Button");
+
+var _InlineModal = require("./components/InlineModal");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unbxd-ui/unbxd-react-components",
-  "version": "0.2.101-beta.1",
+  "version": "0.2.101-beta.2",
   "description": "React components library",
   "keywords": [
     "react components",

package/.babelrc

@@ -1,4 +0,0 @@
-{
-    "presets": ["@babel/preset-env", "@babel/preset-react"],
-    "plugins": [ "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-class-properties"]
-}

package/.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-    "env": {
-        "browser": true,
-        "es6": true,
-        "amd": true,
-        "node": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 2018,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "babel"
-    ],
-    "rules": {
-        "react/prop-types": [2, { ignore: ["children"] }],
-        "no-unsafe-finally": 0,
-        "no-func-assign": 0
-    },
-    "settings": {
-        "react": {
-            "version": "detect"
-        }
-    }
-};

package/CONTRIBUTE.md

@@ -1,105 +0,0 @@
-## Setting up the project for development
-
-### Prerequisites
-
-Install [npm](https://www.npmjs.com/get-npm)
-
-### Setting Up
-
-Install the npm packages using the following command
-
-```
-npm install
-```
-
-Start the JS build with watcher using the following command
-
-```
-npm run build -- --watch
-```
-
-To watch SCSS files & compile them to CSS use the following command
-
-```
-npm run scss -- --watch
-```
-
-**Note:** Prefix all the CSS classNames with namespace `"RCB-"`
-
-### Linting your JS files
-
-Run the following command to lint the JS code
-
-```
-npm run lint
-```
-
-Or Install your editor specific plugin by referring to [this link](https://eslint.org/docs/user-guide/integrations)
-
-### Viewing the components
-
-View the available components along with their accepted props using [storybook](https://storybook.js.org/)
-
-To start the storybook run the following command
-
-```
-npm run storybook
-```
-
-The storybook can then be viewed at http://localhost:6006/
-
-### Publishing the storybook to github pages
-
-Run the following command to publish the storybook to github pages:
-
-```
-npm run deploy-storybook
-```
-
-### Publishing the package to npm
-
-First login to npm using the following command:
-
-```
-npm login
-```
-
-Then run the following command to publish the package to npm:
-
-```
-npm run publish
-```
-
-This publishes the package to [unbxd-ui](https://www.npmjs.com/settings/unbxd-ui/packages) org on npm. 
-To be able to publish to this org you need to get yourself added on the team. Contact Divya or Manu for the same.
-
-
-### Creating new stories for the components
-
-To help boostrap a new story file, use the following steps
-
-1. Install the VS Code extension [File Templates](https://marketplace.visualstudio.com/items?itemName=brpaz.file-templates)
-2. Place the templates in the location expected by the extension
-    - In Mac,
-    ```cp ./vscode-templates/NewStoryTemplate.stories.js $HOME/Library/Application\ Support/Code/User/FileTemplates```
-
-    - In Linux,
-    ```cp ./vscode-templates/NewStoryTemplate.stories.js $HOME/.config/Code/User/FileTemplates```
-
-    - In Windows,
-    ```cp ./vscode-templates/NewStoryTemplate.stories.js C:\Users\User\AppData\Roaming\Code\User\FileTemplates```
-3. To use the templates you can do one of the following:
-    - In VSCode, right click on the folder where you want to generate the new file. You should see an option "Files : New from template". Selecting this option a list of available templates should appear. Just select your template and the file will be created.
-    - You can also do the same from the Command Palette. In this case the new file will be created in the root directory of the project.
-    - Its also possible to do the other way around and create a template based on an open file. For that "right-click" on any opened file and you should see the option of the context menu.
-
-**Note:** The template will expect the Component name as a parameter
-
-## FAQs
-1) I am getting error "No PostCSS Config found"
-
-Create a file called postcss.config.js in `/lib/components/` folder
-
-## TODO
-
-- Minify JS / CSS

package/src/Intro.stories.mdx

@@ -1,119 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Design System|Introduction" />
-
-## Introduction to the RCB (React Components Bundle) library
-
-RCB contains a bunch of low level components (atoms of a design system) that you can use individually 
-or combine them to make additional components (molecules of a design system) to build web pages.
-
-## Using the components library
-
-First, install the package from npm
-
-```
-npm install react-components-bundle
-```
-
-Next, import the required components. There are 2 ways to achieve this.
-
-If you want a minimal footprint from the RCB library and include only the components which you use, 
-then import the components individually as shown below. 
-This enables tree shaking and therefore components that you did not use will not get included in your final bundle.
-
-```
-import Button from "react-components-bundle/components/Button";
-```
-
-If size of the bundle does not matter or you will use all/most of the components in the RCB library, 
-then you can import the components as shown below:
-
-```
-import { Button } from "react-components-bundle";
-```
-
-### Using core CSS
-
-Finally, include the core CSS like below,
-
-```
-import "react-components-bundle/components/core.css";
-```
-
-The core CSS file will contain the core styles without which the component will not behave as expected. 
-Hence do not forget to include this. 
-
-### Using theme CSS
-
-Theme CSS file will contain the styles which suggests a theme for all the components but is not a must have to use the library.
-
-You can use the theme CSS in 2 ways:
-
-**1. Use individual component CSS**
-
-You can import the individual files for each of the components like below:
-
-```
-import "react-components-bundle/components/Table/tableTheme.css";
-```
-
-**2. Include the bundled CSS file which has all component's CSS**
-
-You can import the bundled CSS file which contains all the component's CSS like below:
-
-```
-import "react-components-bundle/components/theme.css";
-```
-
-## Library structure
-
-```
-react-components-bundle
-│
-│
-└─── components
-│    │   
-│    └─── Button
-│    │
-│    └─── DataLoader
-│    │   
-│    └─── Form
-│    │    │   
-│    │    └─── Input
-│    │    │    
-│    │    └─── Checkbox
-│    │    │    
-│    │    └─── DragDropFileUploader
-│    │    │    
-│    │    └─── Dropdown
-│    │    │   
-│    │    └─── FileUploader
-│    │    │   
-│    │    └─── RadioList
-│    │    │   
-│    │    └─── RangeSlider
-│    │    │    
-│    │    └─── TextArea
-│    │    │    
-│    │    └─── Toggle
-│    │
-│    └─── InlineModal
-│    │
-│    └─── List
-│    │
-│    └─── Modal
-│    │
-│    └─── NotificationComponent
-│    │
-│    └─── ProgressBar
-│    │
-│    └─── Table
-│    │
-│    └─── TabsComponent
-│   
-└─── core
-     │
-     └─── dataLoader
-     │
-     └─── utils
-```

package/src/components/Accordian/Accordian.js

@@ -1,89 +0,0 @@
-import React, { useState, cloneElement } from "react";
-import PropTypes from "prop-types";
-import List from "../List";
-
-const ALL = "ALL";
-
-const getDefaultOpenedItems = (items = [], defaultOpen) =>{
-    let arr = [];
-    if(items.length > 0) {
-        items.forEach((item) => {
-            const {
-                id
-            } = item;
-            if(id === defaultOpen || defaultOpen === ALL ) {
-                arr.push(id)
-            }
-        })
-    }
-    return arr;
-}
-
-const AccordianItem = (props) => {
-    const {
-        itemData,
-        allowOneOpen,
-        openedItems,
-        setOpenedItems
-    } = props;    
-    const { titleComponent, bodyComponent, id } = itemData;
-    const isOpen = openedItems.find(item => item === id) ? true: false;
-    const onItemClick = () => {
-        let newList = [id];
-        if(!allowOneOpen) {
-            newList = isOpen ? openedItems.filter(item => item !== id) : [...openedItems, id]
-        }
-        setOpenedItems(newList)
-    }
-    return <li className={`RCB-accordian-item ${isOpen ? "RCB-accordian-open" : "RCB-accordian-close"}`}>
-        <div className="RCB-accordian-title" onClick={onItemClick}>{cloneElement(titleComponent, { isOpen: isOpen })}</div>        
-        {isOpen && <div className="RCB-accordian-body">{bodyComponent}</div>}
-    </li>
-};
-
-AccordianItem.propTypes = {
-    itemData: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        titleComponent: PropTypes.element.isRequired,
-        bodyComponent: PropTypes.element.isRequired,
-    }),
-    setOpenedItems: PropTypes.func,
-    openedItems: PropTypes.array,
-    allowOneOpen: PropTypes.bool
-};
-
-
-const Accordian = ({defaultOpen, items, allowOneOpen}) => {
-    const defaultOpened = getDefaultOpenedItems(items, defaultOpen);
-    const [openedItems, setOpenedItems] = useState(defaultOpened);
-    return (<div className={`RCB-accordian`}>
-        {
-            <List 
-                items={items}
-                openedItems={openedItems}
-                defaultOpen={defaultOpen}
-                allowOneOpen={allowOneOpen}
-                setOpenedItems={setOpenedItems}
-                ListItem={AccordianItem} /> 
-        }
-    </div>);
-};
-
-Accordian.propTypes = {
-    defaultOpen: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        titleComponent: PropTypes.element.isRequired,
-        bodyComponent: PropTypes.element.isRequired,
-    })).isRequired,
-    // /* set to false if you want more than one accordian item to be open at a time */
-    allowOneOpen: PropTypes.bool
-};
-
-Accordian.defaultProps = {
-    allowOneOpen: false,
-    defaultOpen:"",//"ALL","ID","",
-    items:[]
-};
-
-export default Accordian;