@ndlib/component-library 1.0.48 → 1.0.50

package/dist/components/elements/TableV2/TableV2.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TableV2 } from '.';
+declare const meta: Meta<typeof TableV2>;
+export default meta;
+type Story = StoryObj<typeof TableV2>;
+export declare const Default: Story;
+export declare const OmitColumn: Story;
+export declare const ResponsiveColumn: Story;
+export declare const ColumnGroup: Story;
+export declare const Sortable: Story;

package/dist/components/elements/TableV2/TableV2.stories.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TableV2, TableColumnV2 } from '.';
+import { SORT_DIRECTION, sortByKey } from '../../../utils/sortByKey';
+import { useState } from 'react';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/TableV2',
+    component: TableV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const data = [
+    {
+        name: 'Steve Rogers',
+        age: 100,
+        position: 'Ethics Officer',
+    },
+    {
+        name: 'Natasha Romanoff',
+        age: 35,
+        position: 'Opposition Researcher',
+    },
+    {
+        name: 'Thor',
+        age: 1500,
+        position: 'VP of Thunder',
+    },
+    {
+        name: 'Peter Parker',
+        age: 18,
+        position: 'Web Crawling Expert',
+    },
+    {
+        name: 'Kate Bishop',
+        age: 22,
+        position: 'Trust Fund Recipient',
+    },
+];
+export const Default = {
+    render: () => (_jsxs(TableV2, { data: data, alternateRowColor: true, children: [_jsx(TableColumnV2, { header: "Name", dataKey: "name", sx: {
+                    width: '160px',
+                } }), _jsx(TableColumnV2, { header: "Age", sx: {
+                    width: '100px',
+                }, children: (row) => row.age }), _jsx(TableColumnV2, { header: "Occupation", children: (row) => row.position })] })),
+};
+export const OmitColumn = {
+    render: () => {
+        const someCondition = false;
+        return (_jsxs(TableV2, { data: data, alternateRowColor: true, children: [_jsx(TableColumnV2, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), someCondition ? (_jsx(TableColumnV2, { header: "Age", sx: {
+                        width: '100px',
+                    }, children: (row) => row.age })) : null, _jsx(TableColumnV2, { header: "Occupation", children: (row) => row.position })] }));
+    },
+};
+export const ResponsiveColumn = {
+    render: () => {
+        return (_jsxs(TableV2, { data: data, alternateRowColor: true, children: [_jsx(TableColumnV2, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), _jsx(TableColumnV2, { breakpoint: 2, header: "Age", sx: {
+                        width: '100px',
+                    }, children: (row) => row.age }), _jsx(TableColumnV2, { header: "Occupation", children: (row) => row.position })] }));
+    },
+};
+export const ColumnGroup = {
+    render: () => {
+        return (_jsxs(TableV2, { data: data, alternateRowColor: true, children: [_jsx(TableColumnV2, { header: "Name", dataKey: "name", sx: {
+                        width: '160px',
+                    } }), [
+                    _jsx(TableColumnV2, { header: "Age", sx: {
+                            width: '100px',
+                        }, children: (row) => row.age }),
+                    _jsx(TableColumnV2, { header: "Occupation", children: (row) => row.position }),
+                ]] }));
+    },
+};
+const SortableStory = () => {
+    const [sortConfig, setSortConfig] = useState({
+        key: 'name',
+        direction: SORT_DIRECTION.ASC,
+    });
+    const sorted = sortByKey({
+        items: data,
+        config: sortConfig,
+    });
+    return (_jsxs(TableV2, { data: sorted, alternateRowColor: true, sortConfig: sortConfig, updateSort: setSortConfig, children: [_jsx(TableColumnV2, { header: "Name", dataKey: "name", sortable: true, sx: {
+                    width: '160px',
+                } }), [
+                _jsx(TableColumnV2, { header: "Age", sortKey: "age", sortable: true, sx: {
+                        width: '100px',
+                    }, children: (row) => row.age }),
+                _jsx(TableColumnV2, { header: "Occupation", sortable: true, dataKey: "position" }),
+            ]] }));
+};
+export const Sortable = {
+    render: SortableStory,
+};

package/dist/components/elements/TableV2/index.d.ts

@@ -0,0 +1,29 @@
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+import { SortConfig } from '../../../utils/sortByKey';
+type ColumnRenderFn<RowData> = (data: RowData) => React.ReactNode;
+type ColumnProps<RowData extends object> = {
+    header: string;
+    sortable?: boolean;
+    sortKey?: keyof RowData;
+    dataKey?: keyof RowData;
+    headerStyles?: StylesPropV2;
+    align?: 'left' | 'center' | 'right';
+    alignHeader?: 'left' | 'center' | 'right';
+    children?: ColumnRenderFn<RowData>;
+    breakpoint?: number;
+    sx?: StylesPropV2;
+};
+type ChildList = ChildList[] | JSX.Element | null | undefined;
+type TableProps<RowData> = StyledElementPropsV2<HTMLTableElement, {
+    data: RowData[];
+    sortConfig?: SortConfig<RowData>;
+    updateSort?: (sortConfig: SortConfig<RowData>) => void;
+    children: ChildList[];
+    cellStyles?: StylesPropV2;
+    alternateRowColor?: boolean;
+    showRowDividers?: boolean;
+    showColumnDividers?: boolean;
+}>;
+export declare function TableColumnV2<RowData extends object>(props: ColumnProps<RowData>): null;
+export declare function TableV2<RowData extends object>(props: TableProps<RowData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/elements/TableV2/index.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { COLOR } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+import { FONT_SIZE, TYPOGRAPHY_TYPE, typographyStyleMap, } from '../../../theme/typography';
+import { useMediaQueryV2 } from '../../providers/mediaV2';
+import { RowV2 } from '../RowV2';
+import _ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import _ArrowDropUp from '@mui/icons-material/ArrowDropUp';
+import { importedDefaultComponentShim } from '../../../utils/misc';
+import { Icon } from '../Icon';
+import { SORT_DIRECTION } from '../../../utils/sortByKey';
+import { processSx } from '../../../utils/processSx';
+const ArrowDropDown = importedDefaultComponentShim(_ArrowDropDown);
+const ArrowDropUp = importedDefaultComponentShim(_ArrowDropUp);
+const useColumnSpec = (children) => {
+    const headerList = [];
+    const parseHeaders = (children) => {
+        children.forEach((child) => {
+            if (Array.isArray(child)) {
+                parseHeaders(child);
+            }
+            else if (child) {
+                headerList.push(child.props.header);
+            }
+        });
+    };
+    parseHeaders(children);
+    const columnList = JSON.stringify(headerList);
+    return useMemo(() => {
+        const columnProps = [];
+        const parseColumnProps = (children) => {
+            children.forEach((child) => {
+                if (Array.isArray(child)) {
+                    parseColumnProps(child);
+                }
+                else if (child) {
+                    columnProps.push(child.props);
+                }
+            });
+        };
+        parseColumnProps(children);
+        return columnProps;
+    }, [columnList]);
+};
+export function TableColumnV2(props) {
+    const { flagInDevelopment } = useEnvironment();
+    flagInDevelopment('TableColumnV2 should not be used outside of Table component');
+    console.log('We offer this log to you in reverence, oh compiler gods', props);
+    return null;
+}
+export function TableV2(props) {
+    const { role, data, alternateRowColor = true, cellStyles, sx, children, showRowDividers = true, showColumnDividers = false, sortConfig, updateSort, } = props;
+    const cellTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM];
+    const headerTypographyStyles = typographyStyleMap[TYPOGRAPHY_TYPE.CONTROL_MEDIUM];
+    const { breakpoint } = useMediaQueryV2();
+    const columnSpec = useColumnSpec(children);
+    const getCellStyles = (params) => {
+        const { columnProps, rowIndex, columnIndex } = params;
+        const isLastColumn = columnIndex === columnSpec.length - 1;
+        const isLastRow = rowIndex === data.length - 1;
+        const cellAlign = columnProps.align || 'left';
+        const styles = Object.assign({ bg: alternateRowColor && rowIndex % 2 === 1
+                ? COLOR.EXTRA_EXTRA_LIGHT_GRAY
+                : COLOR.WHITE, p: 3, borderBottom: showRowDividers && !isLastRow ? '1px solid' : 'none', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, textAlign: cellAlign }, cellTypographyStyles);
+        return Object.assign(Object.assign(Object.assign({}, styles), cellStyles), columnProps.sx);
+    };
+    const processedStyles = processSx(sx);
+    return (_jsxs("table", { role: role, style: processedStyles, children: [_jsx("thead", { role: "rowgroup", children: _jsx("tr", { children: columnSpec.map((column, i) => {
+                        const isLastColumn = i === columnSpec.length - 1;
+                        if (column.breakpoint && breakpoint < column.breakpoint) {
+                            return null;
+                        }
+                        const canSort = sortConfig && column.sortable;
+                        const sortKey = column.sortKey || column.dataKey;
+                        const onSort = () => {
+                            if (canSort) {
+                                const direction = sortConfig.direction === SORT_DIRECTION.ASC
+                                    ? SORT_DIRECTION.DESC
+                                    : SORT_DIRECTION.ASC;
+                                updateSort &&
+                                    updateSort({ key: sortKey, direction });
+                            }
+                        };
+                        const headerStyles = Object.assign(Object.assign({ textAlign: (column.alignHeader || column.align || 'left'), borderBottom: '1px solid', borderRight: showColumnDividers && !isLastColumn ? '1px solid' : 'none', borderColor: COLOR.LIGHT_GRAY, px: 3, pb: 1 }, headerTypographyStyles), column.headerStyles);
+                        const processedHeaderStyles = processSx(headerStyles);
+                        return (_jsx("th", { role: "columnheader", style: processedHeaderStyles, children: _jsxs(RowV2, { onClick: onSort, tabIndex: canSort ? 0 : undefined, sx: { cursor: canSort ? 'pointer' : 'default' }, children: [column.header, canSort &&
+                                        sortConfig.key === sortKey &&
+                                        (sortConfig.direction === SORT_DIRECTION.ASC ? (_jsx(Icon, { icon: ArrowDropUp, sx: { ml: 1 }, size: FONT_SIZE.MD })) : (_jsx(Icon, { icon: ArrowDropDown, sx: { ml: 1 }, size: FONT_SIZE.MD })))] }) }, i));
+                    }) }) }), _jsx("tbody", { role: "rowgroup", children: data.map((rowData, rowIndex) => {
+                    return (_jsx("tr", { role: "row", children: columnSpec.map((column, columnIndex) => {
+                            if (column.breakpoint && breakpoint < column.breakpoint) {
+                                return null;
+                            }
+                            const { children, dataKey } = column;
+                            const cellStyles = getCellStyles({
+                                columnProps: column,
+                                rowIndex,
+                                columnIndex,
+                            });
+                            const processedCellStyles = processSx(cellStyles);
+                            return (_jsx("td", { style: processedCellStyles, children: _jsxs(_Fragment, { children: [dataKey ? rowData[dataKey] : null, !dataKey && children && children(rowData)] }) }, columnIndex));
+                        }) }, rowIndex));
+                }) })] }));
+}

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export { SpinnerV2, SPINNERV2_SIZE } from './components/elements/SpinnerV2';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { PillV2, PILLV2_SIZE, PILLV2_TYPE } from './components/elements/PillV2';
 export { Table, TableColumn } from './components/elements/Table';
+export { TableV2, TableColumnV2 } from './components/elements/TableV2';
 export { TabList, Tab } from './components/elements/TabList';
 export { TabListV2, TabV2 } from './components/elements/TabListV2';
 export { RawHtml } from './components/elements/RawHtml';

package/dist/index.js

@@ -58,6 +58,7 @@ export { SpinnerV2, SPINNERV2_SIZE } from './components/elements/SpinnerV2';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { PillV2, PILLV2_SIZE, PILLV2_TYPE } from './components/elements/PillV2';
 export { Table, TableColumn } from './components/elements/Table';
+export { TableV2, TableColumnV2 } from './components/elements/TableV2';
 export { TabList, Tab } from './components/elements/TabList';
 export { TabListV2, TabV2 } from './components/elements/TabListV2';
 export { RawHtml } from './components/elements/RawHtml';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "type": "module",
   "sideEffects": false,
   "files": [