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

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

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

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

package/src/components/Table/table.css

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

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

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

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

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

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

package/src/components/TabsComponent/tabs.css

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

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

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

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

package/src/components/Tooltip/index.js

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