@nulogy/components 14.8.2 → 15.0.1

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { Table } from "..";
+const columns = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity", align: "right" },
+];
+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/Density",
+};
+export const Default = () => React.createElement(Table, { columns: columns, rows: rowData });
+Default.story = {
+    name: "Default",
+};
+export const Compact = () => React.createElement(Table, { columns: columns, rows: rowData, compact: true });
+Compact.story = {
+    name: "Compact",
+};

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

@@ -1,6 +1,6 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _SortingHeader: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _SortingHeader: () => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { text, boolean } from "@storybook/addon-knobs";
+import { Table } from "../../index";
+export default {
+    title: "Components/Table/Headers",
+};
+export const _SortingHeader = () => (React.createElement(Table.SortingHeader, { onChange: action("sort change"), label: text("Label", "Header Label"), ascending: boolean("Ascending", false), active: boolean("Active", false) }));

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

@@ -1,18 +1,18 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const WithPagination: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithEverything: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithOnHoverActions: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithPagination: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithEverything: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithOnHoverActions: () => React.JSX.Element;

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

@@ -0,0 +1,302 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { boolean, number } from "@storybook/addon-knobs";
+import { useState } from "react";
+import { Box, DropdownButton, DropdownMenu, Text } from "../..";
+import { Table } from "..";
+const dateToString = ({ cellData }) => {
+    return new Date(cellData).toUTCString().split(" ").splice(0, 4).join(" ");
+};
+const sectionRow = ({ cellData }) => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
+    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, cellData)));
+const expandedContent = () => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
+    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, "Expands!")));
+const dropdownCellRenderer = ({ cellData }) => {
+    return (React.createElement(Box, { textAlign: "right", pr: "x3" },
+        React.createElement(DropdownMenu, null,
+            React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
+            React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete"))));
+};
+const columns = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity" },
+];
+const columnsWithEverything = [
+    { label: "Date", dataKey: "date", cellFormatter: dateToString, width: "15%" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity", width: "20%" },
+    { label: "Actual Quantity", dataKey: "actualQuantity", width: "20%" },
+    { label: "Note", dataKey: "note", width: "45%" },
+    {
+        label: "",
+        key: "actions",
+        width: "5%",
+        cellRenderer: dropdownCellRenderer,
+    },
+];
+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",
+    },
+];
+const rowDataWithEverything = [
+    {
+        heading: "ABC & XYZ Company",
+        cellRenderer: sectionRow,
+        id: "r1",
+    },
+    {
+        date: "2019-10-01",
+        expectedQuantity: "2,025 eaches",
+        actualQuantity: "1,800 eaches",
+        id: "r2",
+        expandedContent,
+        selectAriaLabel: "select item 12",
+        deselectAriaLabel: "deselect item 12",
+    },
+    {
+        date: "2019-10-02",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "2,250 eaches",
+        id: "r3",
+    },
+    {
+        date: "2019-10-03",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,425 eaches",
+        id: "r4",
+    },
+    {
+        date: "2019-10-04",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "675 eaches",
+        note: "1c Other Plant-related issue, equipment issues",
+        id: "r5",
+    },
+    {
+        date: "2019-10-07",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,575 eaches",
+        id: "r6",
+    },
+    {
+        date: "2019-10-22",
+        expectedQuantity: "1,725 eaches",
+        actualQuantity: "-",
+        id: "r7",
+    },
+    { heading: "And Another Company", cellRenderer: sectionRow, id: "r8" },
+    {
+        date: "2019-10-23",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r9",
+        expandedContent,
+    },
+    {
+        date: "2019-10-24",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r10",
+    },
+    {
+        date: "2020-01-24",
+        expectedQuantity: { value: 2475, unit: "eaches" },
+        id: "r11",
+    },
+];
+const footerRowData = [
+    {
+        date: "Total",
+        expectedQuantity: "18,000 eaches",
+        actualQuantity: "7,725 eaches",
+        id: "f1",
+    },
+    {
+        date: "Attainment",
+        expectedQuantity: "",
+        actualQuantity: "41.5%",
+        id: "f2",
+    },
+];
+export default {
+    title: "Components/Table",
+};
+export const WithPagination = () => (React.createElement(Table, { columns: columns, rows: rowData, rowsPerPage: number("Rows per page", 1), onPageChange: action("page changed"), className: "Table" }));
+WithPagination.story = {
+    name: "with pagination",
+};
+export const WithEverything = () => (React.createElement(Table, { columns: columnsWithEverything, rows: rowDataWithEverything, footerRows: footerRowData, rowsPerPage: number("Rows per page", 5), hasExpandableRows: boolean("Expandable", true), onRowExpansionChange: action("toggled expand"), hasSelectableRows: boolean("Selectable", true), onRowSelectionChange: action("row selection changed"), onPageChange: action("page changed"), className: "Table", onRowMouseEnter: action("row mouse enter"), onRowMouseLeave: action("row mouse leave") }));
+WithEverything.story = {
+    name: "with everything",
+};
+export const WithOnHoverActions = () => {
+    const rowDataWithHovers = [
+        {
+            date: "2019-10-01",
+            expectedQuantity: "2,025 eaches",
+            actualQuantity: "1,800 eaches",
+            id: "r1",
+        },
+        {
+            date: "2019-10-01",
+            expectedQuantity: "2,025 eaches",
+            actualQuantity: "1,800 eaches",
+            id: "r2",
+        },
+        {
+            date: "2019-10-02",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "2,250 eaches",
+            id: "r3",
+        },
+        {
+            date: "2019-10-03",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "1,425 eaches",
+            id: "r4",
+        },
+        {
+            date: "2019-10-04",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "675 eaches",
+            note: "1c Other Plant-related issue, equipment issues",
+            id: "r5",
+        },
+        {
+            date: "2019-10-07",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "1,575 eaches",
+            id: "r6",
+        },
+        {
+            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-23",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r9",
+        },
+        {
+            date: "2019-10-24",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r10",
+        },
+        {
+            date: "2019-10-23",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r11",
+        },
+        {
+            date: "2019-10-23",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r12",
+        },
+        {
+            date: "2019-10-24",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r13",
+        },
+        {
+            date: "2019-10-24",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r14",
+        },
+        {
+            date: "2019-10-24",
+            expectedQuantity: "2,475 eaches",
+            actualQuantity: "-",
+            id: "r15",
+        },
+    ];
+    const dropdownCellRendererWithHover = ({ cellData, row }) => {
+        return (React.createElement(Box, { textAlign: "right", pr: "x3", width: "40px" }, row.id === hoveredRow && (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownButton, { onClick: action(cellData) }, "Edit"),
+            React.createElement(DropdownButton, { onClick: action(cellData) }, "Delete")))));
+    };
+    const columnsWithHovers = [
+        {
+            label: "Date",
+            dataKey: "date",
+            cellFormatter: dateToString,
+            width: "15%",
+        },
+        { label: "Expected Quantity", dataKey: "expectedQuantity", width: "20%" },
+        { label: "Actual Quantity", dataKey: "actualQuantity", width: "20%" },
+        { label: "Note", dataKey: "note", width: "45%" },
+        {
+            label: "",
+            dataKey: "actions",
+            width: "100px",
+            cellRenderer: dropdownCellRendererWithHover,
+        },
+    ];
+    const [hoveredRow, setHoveredRow] = useState(null);
+    const onMouseEnter = ({ row }) => {
+        setHoveredRow(row.id);
+    };
+    const onMouseLeave = () => {
+        setHoveredRow(null);
+    };
+    return (React.createElement(Table, { columns: columnsWithHovers, rows: rowDataWithHovers, footerRows: footerRowData, hasSelectableRows: boolean("Selectable", true), onRowSelectionChange: action("row selection changed"), className: "Table", onRowMouseEnter: onMouseEnter, onRowMouseLeave: onMouseLeave, onMouseLeave: onMouseLeave }));
+};

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

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

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

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Table } from "../..";
+const COLUMNS = [
+    { label: "Name", dataKey: "name" },
+    { label: "Species Type", dataKey: "type" },
+];
+const ROWS = [
+    { name: "Antelope", type: "Mammal" },
+    { name: "Dingo", type: "Mammal" },
+    { name: "Chimpanzee", type: "Mammal" },
+    { name: "Iguana", type: "Lizard" },
+    { name: "Hippopotamus", type: "Mammal" },
+    { name: "Flamingo", type: "Avian" },
+    { name: "Giraffe", type: "Mammal" },
+    { name: "Black Bear", type: "Mammal" },
+    { name: "Elephant", type: "Mammal" },
+];
+const INITIAL_SORT_COLUMN = "name";
+const KEY_FIELD = "name";
+// This uses alphabetical sorting, but could be changed to something custom
+const numericAlphabeticalSort = (a, b) => String(a).localeCompare(b, undefined, {
+    numeric: false,
+    sensitivity: "base",
+});
+const applySort = (rows, sortColumn) => rows.sort((a, b) => {
+    return numericAlphabeticalSort(a[sortColumn], b[sortColumn]);
+});
+const sortRows = (rows, sortState) => {
+    const sortedRows = applySort(rows, sortState.sortColumn);
+    return sortState.ascending ? sortedRows : sortedRows.reverse();
+};
+const TableWithCustomSorting = () => {
+    const [sortState, setSortState] = useState({
+        ascending: true,
+        sortColumn: INITIAL_SORT_COLUMN,
+    });
+    const [rows, setRows] = useState(() => sortRows([...ROWS], sortState));
+    const onSortChange = (dataKey) => {
+        let newSortState;
+        setSortState((previousState) => {
+            const ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+            newSortState = { ascending, sortColumn: dataKey };
+            return newSortState;
+        });
+        setRows((previousState) => sortRows(previousState, newSortState));
+    };
+    const transformColumn = (column) => {
+        const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
+        return Object.assign(Object.assign({}, column), { headerFormatter: ({ label, dataKey }) => (React.createElement(Table.SortingHeader, { onChange: () => onSortChange(dataKey), label: label, ascending: isAscending, active: dataKey === sortState.sortColumn })) });
+    };
+    const columns = COLUMNS.map((column) => transformColumn(column));
+    return React.createElement(Table, { columns: columns, rows: rows, keyField: KEY_FIELD });
+};
+export default {
+    title: "Components/Table/with custom sorting",
+};
+export const WithCustomSorting = () => React.createElement(TableWithCustomSorting, null);
+WithCustomSorting.story = {
+    name: "with custom sorting",
+};

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

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

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Table } from "..";
+import { Box, Text } from "../..";
+const columns = [
+    { label: "Date", dataKey: "date" },
+    { label: "Expected Quantity", dataKey: "expectedQuantity" },
+    { label: "Actual Quantity", dataKey: "actualQuantity" },
+];
+const expandedContent = () => (React.createElement(Box, { bg: "lightBlue", py: "x1", px: "x2" },
+    React.createElement(Text, { fontWeight: "bold", color: "blackBlue" }, "Expands!")));
+const rowDataWithExpandable = [
+    {
+        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",
+        expandedContent,
+    },
+    {
+        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",
+        expandedContent,
+    },
+    {
+        date: "2019-10-07",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "1,575 eaches",
+        id: "r5",
+    },
+    {
+        date: "2019-10-22",
+        expectedQuantity: "1,725 eaches",
+        actualQuantity: "-",
+        id: "r6",
+        expandedContent,
+    },
+    {
+        date: "2019-10-23",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r7",
+    },
+    {
+        date: "2019-10-24",
+        expectedQuantity: "2,475 eaches",
+        actualQuantity: "-",
+        id: "r8",
+    },
+];
+export default {
+    title: "Components/Table/with expandable rows",
+};
+export const WithExpandableRows = () => (React.createElement(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") }));
+WithExpandableRows.story = {
+    name: "with expandable rows",
+};
+export const WithRowsExpandedByDefault = () => (React.createElement(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
+WithRowsExpandedByDefault.story = {
+    name: "with rows expanded by default",
+};

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

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