@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Table/stories/TableWithFiltering.story.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from "react";
+import { Table } from "../..";
+import { Input } from "../../Input";
+const COLUMNS = [
+    { label: "Name", dataKey: "name" },
+    { label: "Description", dataKey: "description" },
+];
+const ROWS = [
+    { name: "Albert Einstein", description: "scientist, physist" },
+    { name: "Homer Simpson", description: "father, doh!" },
+    { name: "Jane Austen", description: "author" },
+    { name: "Charles Darwin", description: "biologist" },
+    { name: "Regina Phalange", description: "doctor, alias" },
+    { name: "Marie Curie", description: "scientist, chemist" },
+    { name: "Kawhi Leonard", description: "athlete, basketball" },
+    { name: "Rosalind Franklin", description: "scientist, chemist" },
+    { name: "F. Scott Fitzgerald", description: "author" },
+];
+const transformColumn = (column, onChange) => {
+    return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(ColumnHeaderWithFilter, { onChange: (e) => onChange(dataKey, e), label: label })) });
+};
+const ColumnHeaderWithFilter = ({ onChange, label }) => (React.createElement(Input, { labelText: `Filter by ${label}`, onChange: onChange, name: label }));
+const TableWithFilters = ({ rowsPerPage }) => {
+    const [rows, setRows] = useState(ROWS);
+    const [filter, setFilter] = useState({});
+    const filterRows = (filterObj) => {
+        const filteredRows = Object.keys(filterObj).map((key) => ROWS.filter((row) => row[key].toLowerCase().includes(filterObj[key].toLowerCase())));
+        const filteredRowsByLength = filteredRows.sort((a, b) => a.length - b.length);
+        const commonRows = filteredRowsByLength.length > 1
+            ? filteredRowsByLength[0].filter((row) => filteredRowsByLength[1].includes(row))
+            : filteredRowsByLength[0] || ROWS;
+        setRows(commonRows);
+    };
+    useEffect(() => {
+        filterRows(filter);
+    }, [filter]);
+    const onFilterInputChange = (dataKey, e) => {
+        const filterValue = e.currentTarget.value;
+        return setFilter((state) => (Object.assign(Object.assign({}, state), { [dataKey]: filterValue })));
+    };
+    const columns = COLUMNS.map((column) => transformColumn(column, onFilterInputChange));
+    return React.createElement(Table, { columns: columns, rows: rows, keyField: "name", rowsPerPage: rowsPerPage });
+};
+export default {
+    title: "Components/Table/with filtering",
+};
+export const WithFiltering = () => React.createElement(TableWithFilters, null);
+WithFiltering.story = {
+    name: "with filtering",
+};
+export const WithFilteringAndPagination = () => React.createElement(TableWithFilters, { rowsPerPage: 4 });
+WithFilteringAndPagination.story = {
+    name: "with filtering and pagination",
+};

package/dist/src/Table/stories/TableWithSelectableRows.story.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const WithSelectableRows: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithPreselectedRows: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithSelectableRows: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithPreselectedRows: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Table/stories/TableWithSelectableRows.story.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Table } from "..";
+const columns = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity" },
+];
+const rowData = [
+    {
+        date: "2019-10-01",
+        expectedQuantity: "2,025 eaches",
+        actualQuantity: "1,800 eaches",
+        id: "r1",
+    },
+    {
+        date: "2019-10-02",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "2,250 eaches",
+        id: "r2",
+    },
+    {
+        date: "2019-10-03",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,425 eaches",
+        id: "r3",
+    },
+    {
+        date: "2019-10-04",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "675 eaches",
+        id: "r4",
+    },
+    {
+        date: "2019-10-07",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,575 eaches",
+        id: "r5",
+    },
+    {
+        date: "2019-10-22",
+        expectedQuantity: "1,725 eaches",
+        actualQuantity: "-",
+        id: "r7",
+    },
+    {
+        date: "2019-10-23",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r8",
+    },
+    {
+        date: "2019-10-24",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r9",
+    },
+];
+export default {
+    title: "Components/Table/with selectable rows",
+};
+export const WithSelectableRows = () => (React.createElement(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") }));
+WithSelectableRows.story = {
+    name: "with selectable rows",
+};
+export const WithPreselectedRows = () => (React.createElement(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
+WithPreselectedRows.story = {
+    name: "with preselected rows",
+};

package/dist/src/Table/stories/TableWithServerSidePagination.story.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const WithServerSidePagination: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithServerSidePagination: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Table/stories/TableWithServerSidePagination.story.js

@@ -0,0 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Table } from "../..";
+import { Pagination } from "../../Pagination";
+const COLUMNS = [
+    { label: "Number", dataKey: "id" },
+    { label: "Description", dataKey: "title" },
+    { label: "Completed", dataKey: "completed" },
+];
+class TableWithServerSidePagination extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getData = (pageNumber, callback) => {
+            const QUANTITY = 5;
+            const startingIndex = (pageNumber - 1) * QUANTITY;
+            const url = `https://jsonplaceholder.typicode.com/todos?_start=${startingIndex}&_limit=${QUANTITY}`;
+            fetch(url)
+                .then((response) => response.json())
+                .then((json) => {
+                this.setState({
+                    loading: false,
+                    rows: json.map((_a) => {
+                        var { completed } = _a, item = __rest(_a, ["completed"]);
+                        return (Object.assign(Object.assign({}, item), { completed: completed ? "Yes" : "-" }));
+                    }),
+                }, callback);
+            });
+        };
+        this.onSelectPage = (page) => {
+            this.getData(page, () => this.setState({ page }));
+        };
+        this.onSelectPrevious = () => {
+            const { page } = this.state;
+            this.onSelectPage(page - 1);
+        };
+        this.onSelectNext = () => {
+            const { page } = this.state;
+            this.onSelectPage(page + 1);
+        };
+        this.state = {
+            rows: [],
+            loading: true,
+            page: 1,
+        };
+    }
+    componentDidMount() {
+        const { page } = this.state;
+        this.getData(page, null);
+    }
+    render() {
+        const { rows, loading, page } = this.state;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Table, { columns: COLUMNS, rows: rows, loading: loading }),
+            React.createElement(Pagination, { pt: "x3", justifyContent: "flex-end", currentPage: page, totalPages: 5, onNext: this.onSelectNext, onPrevious: this.onSelectPrevious, onSelectPage: this.onSelectPage })));
+    }
+}
+export default {
+    title: "Components/Table/with server side pagination",
+};
+export const WithServerSidePagination = () => React.createElement(TableWithServerSidePagination, null);
+WithServerSidePagination.story = {
+    name: "with server-side pagination",
+};

package/dist/src/Tabs/Tab.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type TabButtonProps = React.ComponentPropsWithRef<"button"> & {
-    variant?: ComponentVariant;
-    selected?: boolean;
-    fullWidth?: boolean;
-};
-export type TabProps = TabButtonProps & {
-    label?: React.ReactNode;
-};
-declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default Tab;
+import React from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type TabButtonProps = React.ComponentPropsWithRef<"button"> & {
+    variant?: ComponentVariant;
+    selected?: boolean;
+    fullWidth?: boolean;
+};
+export type TabProps = TabButtonProps & {
+    label?: React.ReactNode;
+};
+declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;

package/dist/src/Tabs/Tab.js

@@ -0,0 +1,87 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { variant } from "styled-system";
+const barStyles = (theme) => ({
+    expanded: {
+        content: "''",
+        backgroundColor: theme.colors.darkBlue,
+        height: "3px",
+        display: "block",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderRadius: "2px 2px 0 0",
+    },
+    default: {
+        content: "''",
+        backgroundColor: theme.colors.grey,
+        height: "1px",
+        display: "block",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: theme.zIndices.tabsBar,
+    },
+});
+const getBarStyles = (selected, theme) => (selected ? barStyles(theme).expanded : barStyles(theme).default);
+const getBarHoverStyles = (selected, disabled, theme) => {
+    if (disabled || selected) {
+        return null;
+    }
+    return Object.assign(Object.assign({}, barStyles(theme).expanded), { backgroundColor: theme.colors.lightBlue });
+};
+const TabButton = styled.button(({ selected, disabled, fullWidth, theme }) => ({
+    width: fullWidth ? "100%" : undefined,
+    fontWeight: theme.fontWeights.medium,
+    textDecoration: "none",
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    cursor: disabled ? "default" : "pointer",
+    color: theme.colors.darkBlue,
+    backgroundColor: "transparent",
+    border: "none",
+    margin: theme.space.none,
+    position: "relative",
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: theme.space.x3,
+    paddingRight: theme.space.x3,
+    "&:focus": {
+        outline: "none",
+        backgroundColor: theme.colors.lightBlue,
+        "&:hover": {},
+    },
+    "&:active": {},
+    "&:disabled": {
+        opacity: ".5",
+    },
+    "&:before": Object.assign({}, getBarStyles(selected, theme)),
+    "&:hover": {
+        "&:before": Object.assign({}, getBarHoverStyles(selected, disabled, theme)),
+    },
+}), variant({
+    variants: {
+        touch: {
+            fontSize: "md",
+            lineHeight: "base",
+        },
+    },
+}));
+const Tab = React.forwardRef((_a, ref) => {
+    var { label } = _a, props = __rest(_a, ["label"]);
+    return (React.createElement(TabButton, Object.assign({ role: "tab", type: "button", ref: ref }, props), label));
+});
+export default Tab;

package/dist/src/Tabs/TabContainer.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const TabContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, never>> & string;
-export default TabContainer;
+/// <reference types="react" />
+declare const TabContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, never>> & string;
+export default TabContainer;

package/dist/src/Tabs/TabContainer.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { Box } from "../Box";
+const TabContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    whiteSpace: "nowrap",
+    overflowX: "auto",
+    overflowY: "hidden",
+    marginBottom: theme.space.x1,
+    "::-webkit-scrollbar": {
+        display: "none",
+    },
+    position: "relative",
+    "&:before": {
+        content: "''",
+        backgroundColor: theme.colors.grey,
+        height: "1px",
+        display: "block",
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+}));
+export default TabContainer;

package/dist/src/Tabs/TabScrollIndicator.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-type Side = "left" | "right";
-type TabScrollIndicatorProps = {
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    side?: Side;
-    width?: string | number;
-    ariaLabelLeft?: string;
-    ariaLabelRight?: string;
-};
-declare const TabScrollIndicator: React.FC<React.PropsWithChildren<TabScrollIndicatorProps>>;
-export default TabScrollIndicator;
+import React from "react";
+type Side = "left" | "right";
+type TabScrollIndicatorProps = {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    side?: Side;
+    width?: string | number;
+    ariaLabelLeft?: string;
+    ariaLabelRight?: string;
+};
+declare const TabScrollIndicator: React.FC<React.PropsWithChildren<TabScrollIndicatorProps>>;
+export default TabScrollIndicator;

package/dist/src/Tabs/TabScrollIndicator.js

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import styled from "styled-components";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../Icon";
+const TabScrollIndicatorButton = styled.button(({ side, width, theme }) => ({
+    position: "absolute",
+    color: theme.colors.black,
+    top: 0,
+    bottom: 0,
+    left: side === "left" ? 0 : undefined,
+    right: side === "right" ? 0 : undefined,
+    height: width,
+    width,
+    background: theme.colors.white,
+    opacity: 0.8,
+    zIndex: theme.zIndices.tabsScollIndicator,
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontWeight: theme.fontWeights.medium,
+    textDecoration: "none",
+    verticalAlign: "middle",
+    lineHeight: theme.lineHeights.base,
+    backgroundColor: theme.colors.white,
+    border: `0px solid`,
+    margin: theme.space.none,
+    cursor: "pointer",
+    "&:hover": {
+        backgroundColor: theme.colors.lightBlue,
+    },
+    "&:focus": {
+        outline: "none",
+    },
+    "&:active": {},
+    "&:disabled": {
+        opacity: ".5",
+    },
+}));
+const TabScrollIndicator = (_a) => {
+    var { side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick } = _a, props = __rest(_a, ["side", "width", "ariaLabelLeft", "ariaLabelRight", "onClick"]);
+    const { t } = useTranslation();
+    const rightArrowLabel = ariaLabelRight || t("next");
+    const leftArrowLabel = ariaLabelLeft || t("previous");
+    function preventFocusMovement(event) {
+        event.preventDefault();
+    }
+    return (React.createElement(TabScrollIndicatorButton, Object.assign({}, props, { width: width, tabIndex: -1, onClick: onClick, onMouseDown: preventFocusMovement, side: side, "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel }),
+        React.createElement(Icon, { icon: side === "right" ? "rightArrow" : "leftArrow" })));
+};
+export default TabScrollIndicator;

package/dist/src/Tabs/TabScrollIndicators.d.ts

@@ -1,30 +1,30 @@
-import React from "react";
-type TabScrollIndicatorsProps = {
-    tabRefs?: {
-        offsetWidth?: number;
-    }[];
-    tabContainerRef?: {
-        current?: object;
-    };
-    indicatorWidth?: number;
-};
-type TabScrollIndicatorsState = {
-    contentHiddenLeft: boolean;
-    contentHiddenRight: boolean;
-};
-declare class TabScrollIndicators extends React.Component<TabScrollIndicatorsProps, TabScrollIndicatorsState> {
-    constructor(props: any);
-    componentDidMount(): void;
-    getScrollLeftValueByTabIndex(index: any): number;
-    contentHiddenRight(): boolean;
-    contentHiddenLeft(): boolean;
-    findLastVisibleTab(): number;
-    findFirstVisibleTab(): number;
-    handleScroll(): void;
-    handleResize(): void;
-    conditionallyUpdateState(): void;
-    handleIndicatorClick(side: any): void;
-    applyScrollLeft(scrollLeft: any): void;
-    render(): React.JSX.Element;
-}
-export default TabScrollIndicators;
+import React from "react";
+type TabScrollIndicatorsProps = {
+    tabRefs?: {
+        offsetWidth?: number;
+    }[];
+    tabContainerRef?: {
+        current?: object;
+    };
+    indicatorWidth?: number;
+};
+type TabScrollIndicatorsState = {
+    contentHiddenLeft: boolean;
+    contentHiddenRight: boolean;
+};
+declare class TabScrollIndicators extends React.Component<TabScrollIndicatorsProps, TabScrollIndicatorsState> {
+    constructor(props: any);
+    componentDidMount(): void;
+    getScrollLeftValueByTabIndex(index: any): number;
+    contentHiddenRight(): boolean;
+    contentHiddenLeft(): boolean;
+    findLastVisibleTab(): number;
+    findFirstVisibleTab(): number;
+    handleScroll(): void;
+    handleResize(): void;
+    conditionallyUpdateState(): void;
+    handleIndicatorClick(side: any): void;
+    applyScrollLeft(scrollLeft: any): void;
+    render(): React.JSX.Element;
+}
+export default TabScrollIndicators;