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

package/lib/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@unbxd-ui/unbxd-react-components",
+  "version": "0.2.107-beta.1",
+  "description": "React components library",
+  "keywords": [
+    "react components",
+    "react library",
+    "react components library",
+    "react components bundle"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/unbxd/unbxd-react-components.git"
+  },
+  "author": "Anupama H",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "storybook": "start-storybook -p 6006 -s public",
+    "deploy-storybook": "storybook-to-ghpages",
+    "scss": "node-sass src/components -o src/components --output-style compressed",
+    "publish-scss": "node-sass src/components -o lib/components --output-style compressed",
+    "postcss": "postcss src/components/*.css --use autoprefixer --dir src/components",
+    "publish-postcss": "postcss src/components/*.css --use autoprefixer --dir lib/components",
+    "build-css": "npm run scss && npm run postcss",
+    "publish-css": "npm run publish-scss && npm run publish-postcss",
+    "build": "babel src -d lib",
+    "lint": "eslint src",
+    "copypackage": "cp -rf package.json Readme.md lib",
+    "copyscss": "cp -rf src/components/core.scss src/components/theme.scss lib/components",
+    "link": "npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm link",
+    "publish": "npm run publish-css && npm run build && npm run copypackage && npm run copyscss && cd lib && npm publish"
+  },
+  "dependencies": {
+    "@storybook/addon-a11y": "^7.0.25",
+    "@storybook/addon-storysource": "^7.0.25",
+    "bluebird": "^3.7.2",
+    "dequal": "^1.0.1",
+    "lodash.clonedeep": "^4.5.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-window": "^1.8.6",
+    "react-window-infinite-loader": "^1.0.7",
+    "sass": "^1.63.6",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-export-default-from": "^7.14.5",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@storybook/addon-actions": "^7.0.25",
+    "@storybook/addon-console": "^2.0.0",
+    "@storybook/addon-docs": "^7.0.26",
+    "@storybook/addon-info": "^4.1.8",
+    "@storybook/addon-links": "^7.0.25",
+    "@storybook/addons": "^7.0.25",
+    "@storybook/react": "^7.0.25",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "autoprefixer": "^10.4.14",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^3.6.0",
+    "eslint": "^7.2.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-react": "^7.26.1",
+    "mini-css-extract-plugin": "^0.8.2",
+    "node-sass": "^8.0.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss-cli": "^10.1.0",
+    "sass-loader": "^7.3.1",
+    "storybook-readme": "^4.0.5",
+    "terser-webpack-plugin": "^1.4.5",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12"
+  },
+  "overrides": {
+    "fbjs": "^3.0.5",
+    "marked": "^5.1.0",
+    "prismjs": "^1.29.0",
+    "glob-parent": "5.1.2",
+    "parse-url": "^8.1.0",
+    "@jest/transform":"^29.3.1",
+    "semver": "^7.3.5"
+
+  }
+}
+

package/package.json

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

package/src/Intro.stories.mdx

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

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

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

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

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

package/src/components/Accordian/accordianCore.scss

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

package/src/components/Accordian/accordianTheme.css

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

package/src/components/Accordian/accordianTheme.scss

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

package/src/components/Accordian/index.js

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

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;