@westpac/ui 0.2.0 → 0.3.0

package/dist/components/table/components/row/row.component.js

@@ -0,0 +1,61 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { Children, cloneElement, useContext } from 'react';
+import { TableContext } from '../../table.component.js';
+import { styles as rowStyles } from './row.styles.js';
+const generateHighlightMap = (highlighted, tdCount)=>{
+    const map = Array(tdCount).fill(false);
+    highlighted.forEach((highlight)=>{
+        if (typeof highlight === 'number') {
+            map[highlight] = true;
+        } else if (Array.isArray(highlight)) {
+            map.fill(true, highlight[0], highlight[1] + 1);
+        }
+    });
+    return map;
+};
+export function Row({ className , children , highlighted , ...props }) {
+    let highlightedChildren;
+    const highlightedRow = typeof highlighted === 'boolean';
+    if (Array.isArray(highlighted)) {
+        const highlightMap = generateHighlightMap(highlighted, Children.count(children));
+        highlightedChildren = Children.map(children, (child, index)=>{
+            if (highlightMap[index] === true) {
+                if (index === 0 || highlightMap[index - 1] === false) {
+                    return cloneElement(child, {
+                        highlightStart: true,
+                        highlighted: true
+                    });
+                } else {
+                    return cloneElement(child, {
+                        highlighted: true
+                    });
+                }
+            } else {
+                return child;
+            }
+        });
+    }
+    const { striped  } = useContext(TableContext);
+    const styles = rowStyles({
+        striped,
+        highlightedRow
+    });
+    return React.createElement("tr", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), highlightedChildren || children);
+}

package/dist/components/table/components/row/row.styles.d.ts

@@ -0,0 +1,29 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    striped: {
+        true: {
+            base: string;
+        };
+    };
+    highlightedRow: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    striped: {
+        true: {
+            base: string;
+        };
+    };
+    highlightedRow: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}>;

package/dist/components/table/components/row/row.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'hover:bg-background'
+    },
+    variants: {
+        striped: {
+            true: {
+                base: 'even:bg-background hover:bg-default'
+            }
+        },
+        highlightedRow: {
+            true: {
+                base: 'border-primary border border-b-[3px] border-l-[6px] border-r-0'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/components/row/row.types.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export type RowProps = {
+    /**
+     * Should be `true` if entire row should be highlighted
+     * Can pass array of cell positions to highlight multiple cells without adding props manually to cells
+     * See docs for examples how to use array
+     */
+    highlighted?: boolean | unknown[];
+} & HTMLAttributes<HTMLTableRowElement>;

package/dist/components/table/components/row/row.types.js

@@ -0,0 +1 @@
+export { };

package/dist/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './table.component.js';
+export { type TableProps } from './table.types.js';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { Table } from './table.component.js';

package/dist/components/table/table.component.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TableContextState, type TableProps } from './table.types.js';
+export declare const TableContext: React.Context<TableContextState>;
+export declare function Table({ bordered, striped, children, className, ...props }: TableProps): JSX.Element;
+export declare namespace Table {
+    var Body: typeof import("./components/index.js").Body;
+    var Caption: typeof import("./components/index.js").Caption;
+    var Cell: typeof import("./components/index.js").Cell;
+    var Footer: typeof import("./components/index.js").Footer;
+    var Header: typeof import("./components/index.js").Header;
+    var HeaderCell: typeof import("./components/index.js").HeaderCell;
+    var HeaderRow: typeof import("./components/index.js").HeaderRow;
+    var Row: typeof import("./components/index.js").Row;
+}

package/dist/components/table/table.component.js

@@ -0,0 +1,42 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import React, { createContext } from 'react';
+import { Body, Caption, Cell, Footer, Header, HeaderCell, HeaderRow, Row } from './components/index.js';
+import { styles as tableStyles } from './table.styles.js';
+export const TableContext = createContext({
+    bordered: false,
+    striped: false
+});
+export function Table({ bordered =false , striped =false , children , className , ...props }) {
+    const styles = tableStyles({});
+    return React.createElement(TableContext.Provider, {
+        value: {
+            bordered,
+            striped
+        }
+    }, React.createElement("table", _extends({
+        className: styles.base({
+            className
+        })
+    }, props), children));
+}
+Table.Body = Body;
+Table.Caption = Caption;
+Table.Cell = Cell;
+Table.Footer = Footer;
+Table.Header = Header;
+Table.HeaderCell = HeaderCell;
+Table.HeaderRow = HeaderRow;
+Table.Row = Row;

package/dist/components/table/table.stories.d.ts

@@ -0,0 +1,21 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { Table } from './table.component.js';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * > Default usage example
+ */
+export declare const DefaultStory: Story;
+/**
+ * > Striped example
+ */
+export declare const StripedTable: Story;
+/**
+ * > Striped example
+ */
+export declare const BorderedTable: Story;
+/**
+ * > Example of table with highlighted rows or cells
+ */
+export declare const HighlightedRowCellTable: Story;

package/dist/components/table/table.stories.js

@@ -0,0 +1,62 @@
+import { Table } from './table.component.js';
+const meta = {
+    title: 'Example/Table',
+    component: Table,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    parameters: {
+        layout: 'center'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+            colspan: 3
+        }, "Footer goes here and should colSpan all columns"))
+    }
+};
+export const StripedTable = {
+    args: {
+        striped: true,
+        children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+            colspan: 3
+        }, "Footer goes here and should colSpan all columns"))
+    }
+};
+export const BorderedTable = {
+    args: {
+        bordered: true,
+        children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+            colspan: 3
+        }, "Footer goes here and should colSpan all columns"))
+    }
+};
+export const HighlightedRowCellTable = {
+    args: {
+        children: React.createElement(React.Fragment, null, React.createElement(Table.Caption, null, "Caption this table width is: ", React.createElement("em", null, "(100%)")), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Name"), React.createElement(Table.HeaderCell, null, "Type"), React.createElement(Table.HeaderCell, null, "Date Modified"))), React.createElement(Table.Body, null, React.createElement(Table.Row, {
+            highlighted: true
+        }, React.createElement(Table.Cell, null, "Games"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "6/7/2020")), React.createElement(Table.Row, {
+            highlighted: [
+                0,
+                2
+            ]
+        }, React.createElement(Table.Cell, null, "Program Files"), React.createElement(Table.Cell, null, "File folder"), React.createElement(Table.Cell, null, "4/7/2021")), React.createElement(Table.Row, {
+            highlighted: [
+                1,
+                2
+            ]
+        }, React.createElement(Table.Cell, null, "bootmgr"), React.createElement(Table.Cell, null, "System file"), React.createElement(Table.Cell, null, "11/20/2010")), React.createElement(Table.Row, null, React.createElement(Table.Cell, {
+            highlightStart: true,
+            highlighted: true
+        }, "log.txt"), React.createElement(Table.Cell, null, "Text Document"), React.createElement(Table.Cell, null, "1/18/2016"))), React.createElement(Table.Footer, {
+            colspan: 3
+        }, "Footer goes here and should colSpan all columns"))
+    }
+};

package/dist/components/table/table.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {}, {
+    base: string;
+}>;

package/dist/components/table/table.styles.js

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'w-full'
+    },
+    variants: {}
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/table/table.types.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+export type TableProps = {
+    /**
+     * Whether the table should have borders around every cell and the table
+     */
+    bordered?: boolean;
+    /**
+     * Whether the table should have even rows with a different background color
+     */
+    striped?: boolean;
+} & HTMLAttributes<HTMLTableElement>;
+export type TableContextState = {
+    /**
+     * bordered
+     */
+    bordered?: boolean;
+    /**
+     * striped
+     */
+    striped?: boolean;
+};

package/dist/components/table/table.types.js

@@ -0,0 +1 @@
+export { };