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

package/lib/package.json

@@ -1,94 +0,0 @@
-{
-  "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/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;

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.css

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

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.css

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

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}