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

package/src/components/Table/Table.stories.js

@@ -1,198 +0,0 @@
-import React, { useState, Fragment, useCallback } from "react";
-import Table from "./Table";
-import DataLoader from "../DataLoader";
-import dataLoader from "../../core/dataLoader";
-import { Input } from "../Form";
-import { TODOS, FRUITS_LIST } from "../../../public/Constants";
-
-const getFruitsColumnConfigs = () => {
-    let columnConfigs = [
-        {
-            label: "Id",
-            key: "id",
-            sortable: true
-        },
-        {
-            label: "Task Name",
-            key: "name",
-            sortable: true
-        }
-    ];
-
-    return columnConfigs;
-};
-
-const getTodosColumnConfigs = () => {
-  let columnConfigs = [
-    {
-      label: "Id",
-      key: "id",
-    },
-    {
-      label: "Task Name",
-      key: "title",
-    },
-    {
-      label: "Status",
-      key: "completed",
-      valueFormatter: function({ value }) {
-        return value ? "Completed" : "Not Started";
-      },
-    },
-  ];
-
-  return columnConfigs;
-};
-
-const getUsersColumnConfigs = () => {
-  let columnConfigs = [
-    {
-      label: "Avatar",
-      key: "avatar",
-      /* eslint-disable react/prop-types */
-      valueFormatter: function renderUserImage({ value }) {
-        return <img src={value} />;
-      },
-      /* eslint-enable react/prop-types */
-    },
-    {
-      label: "first_name",
-      key: "name",
-      sortable: true,
-      valueFormatter: function({ record }) {
-        const { first_name, last_name } = record;
-
-        return `${first_name} ${last_name}`;
-      },
-    },
-  ];
-
-  return columnConfigs;
-};
-
-/* eslint-disable react/prop-types */
-const TODODetail = props => {
-  const { parentRecord = {} } = props;
-  const { id } = parentRecord;
-  const [todoData, setTodoData] = useState({});
-  const { title, completed } = todoData;
-
-  dataLoader.addRequestConfig("getTodoById", {
-    method: "GET",
-    url: function(params) {
-      return `https://jsonplaceholder.typicode.com/todos/${params.id}`;
-    },
-  });
-
-  const onDataLoaded = ([todoData]) => {
-    setTodoData(todoData);
-  };
-
-  const requests = [
-    {
-      requestId: "getTodoById",
-      urlParams: {
-        id
-      },
-    },
-  ];
-
-  return (
-    <DataLoader requests={requests} onDataLoaded={onDataLoaded}>
-      <div>
-        <b>Title:</b> {title}{" "}
-      </div>
-      <div>
-        <b>Status:</b> {completed ? "Completed" : "Not Completed"}{" "}
-      </div>
-    </DataLoader>
-  );
-};
-/* eslint-enable react/prop-types */
-
-export const SimpleUsage = () => {
-  return <Table records={FRUITS_LIST} 
-            columnConfigs={getFruitsColumnConfigs()} />;
-};
-
-export const ExpandedTable = () => {
-  return (
-    <Table
-      records={TODOS}
-      columnConfigs={getTodosColumnConfigs()}
-      isExpandableTable={true}
-      ExpandedRowComponent={TODODetail}
-    />
-  );
-};
-
-export const TableWithSearch = () => {
-    const [ searchBy, setSearchBy ] = useState("");
-    
-    const onSearchChange = (value) => {
-        setSearchBy(value);
-    };
-
-    const getRequestKeys = useCallback(() => ({searchBy: "title"}));
-
-    return (<Fragment>
-        <Input name="searchBy" onChange={onSearchChange} />
-        <Table
-            records={TODOS} searchBy={searchBy} getRequestKeys={getRequestKeys}
-            columnConfigs={getTodosColumnConfigs()}
-        />
-    </Fragment>);
-};
-
-export const TableWithoutPaginationBar = () => {
-
-    return (<Fragment>
-        <Table
-            records={TODOS} 
-            showPaginateBar={false}
-            columnConfigs={getTodosColumnConfigs()}
-        />
-    </Fragment>);
-};
-
-export const ServerSideTable = () => {
-    const [ searchBy, setSearchBy ] = useState("");
-
-    dataLoader.addRequestConfig("getUsers", {
-        method: "GET",
-        url: "https://reqres.in/api/users",
-    });
-
-    const onSearchChange = (value) => {
-        setSearchBy(value);
-    };
-
-    const responseFormatter = (response) => {
-        return {
-            ...response,
-            entries: response.data
-        };
-    };
-
-    return (<Fragment>
-        <Input name="searchBy" onChange={onSearchChange} />
-        <Table
-            searchBy={searchBy}
-            paginationType="SERVER"
-            requestId="getUsers"
-            perPageKey="per_page"
-            responseFormatter={responseFormatter}
-            columnConfigs={getUsersColumnConfigs()}
-        />
-     </Fragment>);
-};
-
-export default {
-  title: "Table",
-
-  parameters: {
-    info: {
-      propTablesExclude: [ServerSideTable],
-    },
-  },
-};

package/src/components/Table/index.js

@@ -1,8 +0,0 @@
-import Table from "./Table";
-import PaginationComponent from "./PaginationComponent";
-
-export {
-    PaginationComponent
-};
-
-export default Table;

package/src/components/Table/table.css

@@ -1 +0,0 @@
-.RCB-table{border-collapse:collapse;width:100%}.RCB-table td{padding:10px}.RCB-th{background-color:#125c7f;color:#FFF;font-weight:normal}.RCB-th.RCB-expand-column{width:50px}.RCB-tr .expand-open:before{content:"▼"}.RCB-tr .expand-close:before{content:"▶"}.RCB-parent-row{cursor:pointer}.RCB-even-tr{background-color:#82bed9}.RCB-odd-tr{background-color:#dcf1fa}.RCB-expanded-row{background-color:#ecf2f4}.RCB-paginate-wrapper{background-color:rgba(148,170,202,0.14);text-align:right;font-size:14px;padding:5px}.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}

package/src/components/Table/tableCore.css

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

package/src/components/Table/tableCore.scss

@@ -1,94 +0,0 @@
-.RCB {
-    &-table {
-        border-collapse: collapse;
-        width: 100%;
-    }
-
-    &-th {
-        &.RCB-expand-column {
-            width: 50px;
-        }
-    }
-
-    &-th-sortable {
-        cursor: pointer;
-    }
-
-    &-th-sort {
-        &:after {
-            content: "\2B0D"
-        }
-    }
-
-    &-th-asc {
-        &:after {
-            content: "\25B2";
-        }
-    }
-
-    &-th-dsc {
-        &:after {
-            content: "\25BC";
-        }
-    }
-
-    &-tr {
-    
-        .expand-open {
-            &:before {
-                content: "▼"
-            }
-        }
-    
-        .expand-close {
-            &:before {
-                content: "▶"
-            }
-        }
-    }
-
-    &-paginate-wrapper {
-        .RCB-per-page-count {
-            display: inline-block;
-        }
-
-        .RCB-form-el-cont {
-            margin: 0;
-        }
-
-        .RCB-inline-modal-btn {
-            background: transparent;
-            padding: 0;
-        }
-    }
-
-    &-paginate-nav {
-        display: inline-block;
-        border-radius: 12px;
-        border: solid 1px #8399ae;
-        background-color: #f6f7f9;
-        vertical-align: middle;
-        margin-left: 15px;
-        overflow: hidden;
-    }
-
-    &-page-nav {
-        padding: 0 5px;
-        text-decoration: none;
-        color: inherit;
-    
-        &:first-child {
-            border-right: solid 1px #8399ae;
-        }
-    
-        &.disabled {
-            color: #ccc;
-            pointer-events: none;
-            cursor: not-allowed;
-        }
-    }
-
-    &-no-data {
-        text-align: center;
-    }
-}

package/src/components/Table/tableTheme.css

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

package/src/components/Table/tableTheme.scss

@@ -1,34 +0,0 @@
-.RCB {
-    &-table {
-        td {
-            padding: 10px;
-        }
-    }
-
-    &-th {
-        background-color: #2287b4;
-        color: #FFF;
-        font-weight: normal;
-        padding: 10px;
-    }
-
-    &-even-tr {
-        background-color: #FFF;
-    }
-
-    &-odd-tr {
-        background-color: #dcf1fa;
-    }
-
-    &-expanded-row {
-        background-color: #ecf2f4;
-    }
-
-    &-paginate-bar {
-        background-color: #a3c9db;
-        text-align: right;
-        font-size: 14px;
-        padding: 5px;
-        border-radius: 5px 5px 0 0;
-    }
-}

package/src/components/TabsComponent/TabsComponent.js

@@ -1,99 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import List from "../List";
-
-const DefaultTabTitleItem = (props) => {
-    const { itemData, selected, changeTab, disabled:allDisabled } = props;
-    const { id, label, disabled } = itemData;
-    const isSelected = id === selected;
-    const className = `RCB-tab-title ${isSelected ? "selected" : ""} ${(allDisabled || disabled) ? "RCB-tab-disabled" : ""}`;
-
-    const triggerTabChange = () => {
-        changeTab(id);
-    };
-
-    return (<li className={className} selected={isSelected} onClick={triggerTabChange}>
-        {label}
-    </li>);
-};
-
-DefaultTabTitleItem.propTypes = {
-    itemData: PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        label: PropTypes.any.isRequired,
-        disabled: PropTypes.bool
-    }).isRequired,
-    selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    changeTab: PropTypes.func.isRequired,
-    disabled: PropTypes.bool
-};
-
-const TabsComponent = (props) => {
-    const { className, items, selectedTab, onTabChange, onTabChanged, appearance, disabled, staticTabContent, TabTitleItem } = props;
-    const getSelected = () => disabled ? "" : defaultSelected;
-    const defaultSelected = selectedTab || (items[0] ? items[0].id : "");
-    const [ selected, setSelected ] = useState(getSelected());
-    const appearanceClassName = `RCB-tabs-${appearance.toLowerCase()}`;
-
-    useEffect(() => {
-        setSelected(getSelected());
-    }, [disabled, selectedTab]);
-
-    const changeTab = (id) => {
-        const changeTab = onTabChange(id);
-
-        if (changeTab) {
-            setSelected(id);
-            if (typeof(onTabChanged) === "function") {
-                onTabChanged(id);
-            }
-        }
-    };
-
-    const selecetdTabData = items.find(obj => obj.id === selected);
-    const { bodyComponent } = selecetdTabData || {};
-
-    return (<div className={`RCB-tabs-container ${appearanceClassName} ${className}`}>
-        <List items={items} ListItem={TabTitleItem} selected={selected} disabled={disabled} changeTab={changeTab} className="RCB-tabs-header" />
-        <div className="RCB-tab-content">
-            {staticTabContent || bodyComponent}
-        </div>
-    </div>)
-};
-
-TabsComponent.propTypes = {
-    /* custom tab title component */
-    TabTitleItem: PropTypes.any,
-    /** Pass any additional classNames to Tabs component */
-    className: PropTypes.string,
-    /** Array of tab items. Each object in array should contain {id, label, bodyComponent: <Component />, disabled} */
-    items: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        label: PropTypes.any.isRequired,
-        bodyComponent: PropTypes.instanceOf(Object),
-        disabled: PropTypes.bool
-    })).isRequired,
-    /** ID of the tab item to be selected */
-    selectedTab: PropTypes.string,
-    /** Horizontal or vertical tabs */
-    appearance: PropTypes.oneOf(["HORIZONTAL", "VERTICAL"]),
-    /**  Function called when a tab change has been triggerd by the user, 
-     * return false if you want to stop the tab change action */
-    onTabChange: PropTypes.func,
-    /**  Function called when a tab change action has been completed */
-    onTabChanged: PropTypes.func,
-    /** disable all tabs */
-    disabled: PropTypes.bool,
-    /** if you want to show a static tab content in disabled state (i.e. "disabled=true"), pass it in this prop */
-    staticTabContent: PropTypes.any
-};
-
-TabsComponent.defaultProps = {
-    TabTitleItem: DefaultTabTitleItem,
-    className: "",
-    appearance: "HORIZONTAL",
-    disabled: false,
-    onTabChange: () => true
-};
-
-export default TabsComponent;

package/src/components/TabsComponent/TabsComponent.stories.js

@@ -1,69 +0,0 @@
-import React from "react";
-import TabsComponent from "./TabsComponent";
-
-const SetupTab = () => {
-  return <div>This is Setup Tab</div>;
-};
-
-const ConfigTab = () => {
-  return <div>This is Configuration Tab</div>;
-};
-
-const InfoTab = () => {
-  return <div>This is Info Tab</div>;
-};
-
-let items = [
-  {
-    id: "SETUP",
-    label: "Setup",
-    disabled: true,
-    bodyComponent: <SetupTab />,
-  },
-  {
-    id: "CONFIG",
-    label: "Configuration",
-    bodyComponent: <ConfigTab />,
-  },
-  {
-    id: "INFO",
-    label: "Info",
-    bodyComponent: <InfoTab />,
-  },
-];
-
-export default {
-  title: "TabsComponent",
-};
-
-export const SimpleUsage = () => {
-  const onTabChanged = () => {};
-
-  return <TabsComponent items={items} selectedTab="CONFIG" onTabChanged={onTabChanged} />;
-};
-
-export const HorizontalTabs = () => {
-  const onTabChanged = () => {};
-
-  return (
-    <TabsComponent
-      items={items}
-      selectedTab="CONFIG"
-      onTabChanged={onTabChanged}
-      appearance="HORIZONTAL"
-    />
-  );
-};
-
-export const VerticalTabs = () => {
-  const onTabChanged = () => {};
-
-  return (
-    <TabsComponent
-      items={items}
-      selectedTab="CONFIG"
-      onTabChanged={onTabChanged}
-      appearance="VERTICAL"
-    />
-  );
-};

package/src/components/TabsComponent/index.js

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

package/src/components/TabsComponent/tabs.css

@@ -1 +0,0 @@
-.RCB-tab-title{list-style-type:none;display:inline-block;padding:10px;cursor:pointer}.RCB-tab-title.selected{background:#FFF;font-weight:bold;border:1px solid #cacaca;border-bottom:0;position:relative;z-index:1;bottom:-1px}.RCB-tab-content{list-style-type:none;border:1px solid #cacaca;padding:10px}.RCB-tab-content.selected{display:block}

package/src/components/TabsComponent/tabsCore.css

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

package/src/components/TabsComponent/tabsCore.scss

@@ -1,59 +0,0 @@
-.RCB {
-    &-tabs-container {
-        display: flex;
-    }
-
-    &-tab-title {
-        list-style-type: none;
-        padding: 10px;
-        cursor: pointer;
-
-        &.selected {
-            background: #FFF;
-            font-weight: bold;
-            border: 1px solid #cacaca;
-            position: relative;
-            z-index: 1;
-        }
-    }
-
-    &-tabs-horizontal {
-        flex-direction: column;
-        
-        .RCB-tab-title {
-            display: inline-block;
-
-            &.selected {
-                border-bottom: 0;
-                bottom: -1px;
-            }
-        }
-    }
-
-    &-tabs-vertical {
-        .RCB-tab-title {
-            display: block;
-
-            &.selected {
-                border-right: 0;
-                right: -1px;
-            }
-        }
-    }
-
-    &-tab-content {
-        list-style-type: none;
-        border: 1px solid #cacaca;
-        padding: 10px;
-
-        &.selected {
-            display: block;
-        }
-    }
-
-    &-tab-disabled {
-        pointer-events: none;
-        cursor: not-allowed;
-        color: #ccc;
-    }
-}

package/src/components/Tooltip/Tooltip.js

@@ -1,87 +0,0 @@
-import React, { forwardRef,Fragment, useRef, useState,useImperativeHandle,useEffect } from "react";
-import PropTypes from "prop-types";
-
-/* eslint-disable react/prop-types */
-const DefaultTooltipActivator = () => {
-    return (<Fragment>i</Fragment>);
-};
-
-let Tooltip = (props, ref) => {
-    const {
-        TooltipActivator,
-        activatorAction,
-        direction,
-        children,
-        className,
-        ...restProps
-    } = props;
-    
-    const [actionClassName, setActionClassName] = useState("");
-    const [isOpen, setIsOpen] = useState(false);
-    let dirClassName = "RCB-tooltip-right";
-    switch(direction) {
-        case "bottom":
-            dirClassName = "RCB-tooltip-bottom";
-            break;
-        
-        case "left":
-            dirClassName = "RCB-tooltip-left";
-            break;
-        
-        case "top":
-            dirClassName = "RCB-tooltip-top";
-            break;
-        
-        default:
-            dirClassName = "RCB-tooltip-right";
-            break;
-    }
-    
-    useImperativeHandle(ref, () => ({
-        hideToolTip: () => {
-            setIsOpen(false);
-        }
-    }));
-
-    const showToolTipClick = (e) => {
-        e.stopPropagation();
-        setIsOpen(!isOpen);
-        setActionClassName("RCB-tooltip-click");
-    }
-
-    const showToolTipHover = () => {
-        setActionClassName("RCB-tooltip-hover");
-        setIsOpen(true);
-    }
-
-    const hideToolTip = () => {
-        setIsOpen(false);
-    }
-
-    const eventProps = (activatorAction === "click") ? { onClick: showToolTipClick } : { onMouseEnter: showToolTipHover, onMouseLeave: hideToolTip };
-
-    return (<div className={`RCB-tooltip ${className}`}>
-        <div className="RCB-tooltip-btn" {...eventProps}>
-            <TooltipActivator {...restProps}></TooltipActivator>
-        </div>
-        {isOpen && <div className={`RCB-tooltip-body ${dirClassName} ${actionClassName}`} >
-            {children}
-        </div>}
-    </div>);
-};
-
-Tooltip = forwardRef(Tooltip);
-
-Tooltip.propTypes = {
-    TooltipActivator: PropTypes.func,
-    activatorAction: PropTypes.oneOf(["click", "hover"]),
-    direction: PropTypes.oneOf(["right", "bottom","left","top"])
-};
-
-Tooltip.defaultProps = {
-    TooltipActivator: DefaultTooltipActivator,
-    activatorAction: "hover",
-    direction: "right"
-};
-
-export default Tooltip;

package/src/components/Tooltip/Tooltip.stories.js

@@ -1,16 +0,0 @@
-import React from "react";
-import Tooltip from "./Tooltip";
-
-const CustomActivator = () => {
-    return <span>Hover over me</span>;
-}
-
-export const SimpleUsage = () => {
-    return (<Tooltip tooltipActivator={<CustomActivator />}>
-        <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700231-icon-61-warning-512.png" width={20}/>This is a sample tooltip
-    </Tooltip>);
-};
-
-export default {
-    title: "Tooltip",
-};