@tcn/ui-table 0.0.2

package/README.md

@@ -0,0 +1,133 @@
+# Table
+
+This repo contains classes and components used for implementing UI tables.
+
+## Architectural Overview
+
+This table contrasts with our past efforts in how we separate the business of data management from data rendering, and this approach has greatly simplified both the implementation and usage of the table.
+
+All responsibilities relating to display (including localization and formatting) are handled here in the table itself, where we have access to our I18n and theme contexts.
+
+Data handling is confined to the `DataSource` interface (discussed in more detail below).
+
+We have thus eliminated all of the entanglement between presentation and data handling.
+
+## Components
+
+This package provides several components that can be used together or independently:
+
+- `TableHeader`: Displays the table title and search functionality
+- `TableBody`: The main table component that renders the data
+- `TableColumn`: Configures how each column is displayed
+- `TableFooter`: Shows pagination controls
+
+The components are designed to work independently from each other, but may consume a common `DataSource`, allowing you to:
+- Use them together for a complete table experience
+- Implement your own header/footer components
+- Customize the layout and styling
+
+In other words, if you pass the `TableBody` and `TableFooter` the same `DataStore` instance, the paging controls in the footer will affect the `TableBody`.
+
+### `TableBody`
+
+The core component that renders the actual table (as a semantic HTML `<table>` element). It handles:
+- Column configuration
+- Data rendering
+- Sorting
+- Sticky columns
+- Row highlighting
+
+## Data Source
+
+The `Table` components (except the `TableColumn`) require a `DataSource` which manages:
+- Data fetching and updates
+- Sorting
+- Filtering
+- Pagination
+
+The `DataSource` interface and implementations are found in a separate `ResourceStore` module.
+
+### Available Data Sources
+
+1. `StaticDataSource`: For working with static data
+2. `AIPDataSource`: For working with AIP-compliant REST resources
+
+## Column Configuration
+
+The `TableBody` is configured with `TableColumn` components that describe:
+- Column position
+- Header content
+- Footer content
+- Sorting behavior
+- Cell rendering
+- Sticky positioning
+- Width
+
+### Basic Column Example
+
+```tsx
+const s = useStringTranslation();
+
+<TableBody dataSource={personSource}>
+  <TableColumn
+    heading={s("Name")}
+    fieldName="name"
+  /> 
+</TableBody>
+```
+
+### Column Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `heading` | `ReactNode` | Yes | Content to display in the column header |
+| `footer` | `ReactNode` | No | Content to display in the column footer |
+| `fieldName` | `string` | No* | Name of the field in the data source |
+| `canSort` | `boolean` | No | Whether the column can be sorted |
+| `render` | `(item: T) => ReactNode` | No | Custom render function for cell content |
+| `sticky` | `"start" \| "end"` | No | Makes the column stick to the start or end |
+| `width` | `number` | No | Column width in pixels |
+
+\* Required if `canSort` is `true`
+
+### Custom Cell Rendering
+
+You can customize how cells are rendered using the `render` prop:
+
+```tsx
+const d = useDateTranslation();
+const s = useStringTranslation();
+
+<TableBody dataSource={personSource}>
+  <TableColumn
+    heading={s("Birthdate")}
+    fieldName="birthdate"
+    render={(item) => d(item.birthdate)}
+  />
+</TableBody>
+```
+
+### Action Columns
+
+Columns that don't represent data (like action buttons):
+
+```tsx
+<TableBody dataSource={personSource}>
+  <TableColumn
+    heading={s("Actions")}
+    render={(item) => (
+      <Button onClick={() => myDomain.edit(item)}>
+        {s("Edit")}
+      </Button>
+    )}
+    sticky="end"
+  />
+</TableBody>
+```
+
+## Styling
+
+The table components use CSS modules for styling. You can:
+- Override default styles using CSS modules
+- Use the provided CSS variables for consistent theming
+- Add custom classes to individual components

package/dist/__stories__/aip_table.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta;
+export declare function Basic(): React.JSX.Element;
+export default meta;

package/dist/__stories__/aip_table.stories.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { AIPDataSource } from '@tcn-internal/resource-store';
+import { Button } from '@tcn/ui-controls';
+import { Box, FlexBox, HStack, VStack } from '@tcn/ui-layout';
+import { TableBody } from "../_components/table_body/table_body.js";
+import { TableColumn } from "../_components/table_body/table_column.js";
+import { TableFooter } from "../_components/table_footer.js";
+import { TableHeader } from "../_components/table_header.js";
+import { useSignalValue, useSignalValueEffect } from '@tcn/state';
+import { useToken } from "./auth_provider.js";
+const meta = {
+    title: 'AIP Table',
+};
+const resourceURL = 'https://api.dev.tcn.com/tcn/org/organizations/v1alpha1/organizations';
+const resourceName = 'organizations';
+export function Basic() {
+    const authToken = useToken();
+    const [source] = useState(() => {
+        const fields = [
+            {
+                fieldName: 'name',
+                sourceFieldName: 'name',
+                getValue: (i) => i.name,
+            },
+            {
+                fieldName: 'displayName',
+                sourceFieldName: 'display_name',
+                getValue: (i) => i.displayName,
+            },
+            {
+                fieldName: 'billingId',
+                sourceFieldName: 'billing_id',
+                getValue: (i) => i.billingId,
+            },
+            {
+                fieldName: 'clientSid',
+                sourceFieldName: 'client_sid',
+                getValue: (i) => i.clientSid,
+            },
+            {
+                fieldName: 'timeZone',
+                sourceFieldName: 'time_zone',
+                getValue: (i) => i.timeZone,
+            },
+            {
+                fieldName: 'createTime',
+                sourceFieldName: 'create_time',
+                getValue: (i) => new Date(i.createTime),
+            },
+            {
+                fieldName: 'updateTime',
+                sourceFieldName: 'update_time',
+                getValue: (i) => new Date(i.updateTime),
+            },
+        ];
+        return new AIPDataSource({
+            resourceUrl: resourceURL,
+            resourceName,
+            fields,
+            authToken,
+        });
+    });
+    const tokenValue = useSignalValue(authToken);
+    useSignalValueEffect(_ => {
+        source.execute();
+    }, authToken);
+    return (React.createElement(VStack, null,
+        React.createElement(HStack, { height: "auto" }, tokenValue === '' ? 'Sign in to load data' : ''),
+        React.createElement(VStack, { flex: true },
+            React.createElement(Box, { height: "auto" },
+                React.createElement(TableHeader, { title: "Organizations", dataSource: source })),
+            React.createElement(FlexBox, null,
+                React.createElement(TableBody, { dataSource: source },
+                    React.createElement(TableColumn, { heading: "Name", fieldName: "name", render: (i) => i.name, width: 320, footer: "Note: not for display", sticky: "start" }),
+                    React.createElement(TableColumn, { heading: "Display Name", fieldName: "display_name", width: 300, render: (i) => i.displayName }),
+                    React.createElement(TableColumn, { heading: "Client SID", fieldName: "client_sid", width: 80, render: (i) => i.clientSid, canSort: true }),
+                    React.createElement(TableColumn, { heading: "Random Stuff", footer: "Not derived from data", width: 300, render: () => Array.from({ length: Math.floor(Math.random() * 30) }, () => Math.floor(Math.random() * 94) + 32)
+                            .map(num => String.fromCharCode(num))
+                            .join('') }),
+                    React.createElement(TableColumn, { heading: "Created Time", fieldName: "create_time", width: 200, render: (i) => i.createTime.toLocaleString() }),
+                    React.createElement(TableColumn, { heading: "Update Time", fieldName: "update_time", width: 200, render: (i) => (React.createElement("div", { style: { color: 'red' } }, i.updateTime.toLocaleString())) }),
+                    React.createElement(TableColumn, { heading: "Actions", width: 80, render: (i) => (React.createElement("div", null,
+                            React.createElement(Button, { onClick: () => alert(`Edit ${i.name}`) }, "Edit"))), sticky: "end" }))),
+            React.createElement(Box, { height: "auto" },
+                React.createElement(TableFooter, { dataSource: source })))));
+}
+export default meta;
+//# sourceMappingURL=aip_table.stories.js.map

package/dist/__stories__/aip_table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aip_table.stories.js","sourceRoot":"","sources":["../../src/__stories__/aip_table.stories.tsx"],"names":[],"mappings":"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"}

package/dist/__stories__/auth_provider.d.ts

@@ -0,0 +1,4 @@
+import { Signal } from '@tcn/state';
+import React from 'react';
+export declare const AuthContext: React.Context<Signal<string> | null>;
+export declare function useToken(): Signal<string>;

package/dist/__stories__/auth_provider.js

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+export const AuthContext = React.createContext(null);
+export function useToken() {
+    const token = useContext(AuthContext);
+    if (token == null) {
+        throw new Error('Token cannot be null.');
+    }
+    return token;
+}
+//# sourceMappingURL=auth_provider.js.map

package/dist/__stories__/auth_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth_provider.js","sourceRoot":"","sources":["../../src/__stories__/auth_provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAwB,IAAI,CAAC,CAAC;AAE5E,MAAM,UAAU,QAAQ;IACtB,MAAM,KAAK,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAEtC,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import React from 'react';
+declare const meta: Meta;
+export declare function Basic(): React.JSX.Element;
+export declare function WithSort(): React.JSX.Element;
+export declare function ComplexHeadersAndFooters(): React.JSX.Element;
+export default meta;

package/dist/__stories__/table.stories.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { StaticDataSource, StaticNumberField, StaticStringField, } from '@tcn-internal/resource-store';
+import { useSignalValue } from '@tcn/state';
+import { TableBody } from "../_components/table_body/table_body.js";
+import { TableColumn } from "../_components/table_body/table_column.js";
+const meta = {
+    title: 'Table',
+};
+const items = [
+    { id: 'one', name: 'Sam Spade', age: 22 },
+    { id: 'two', name: 'Kelsior', age: 166 },
+    { id: 'three', name: 'Tress', age: 17 },
+    { id: 'four', name: 'Breeze', age: 45 },
+    { id: 'five', name: 'Spook', age: 17 },
+    { id: 'six', name: 'Anne', age: 32 },
+    { id: 'seven', name: 'Hoid', age: 1934 },
+    { id: 'eight', name: 'Vasher', age: 320 },
+];
+export function Basic() {
+    const [source] = useState(() => {
+        return new StaticDataSource(items, [
+            new StaticStringField('name', i => i.name),
+            new StaticNumberField('age', i => i.age),
+        ]);
+    });
+    return (React.createElement(TableBody, { dataSource: source },
+        React.createElement(TableColumn, { heading: "Name", fieldName: "name" }),
+        React.createElement(TableColumn, { heading: "Age", fieldName: "age" }),
+        React.createElement("div", null, "Other kinds of children don't render")));
+}
+export function WithSort() {
+    const [source] = useState(() => {
+        return new StaticDataSource(items, [
+            new StaticStringField('name', i => i.name),
+            new StaticNumberField('age', i => i.age),
+        ]);
+    });
+    const currentResults = useSignalValue(source.broadcasts.currentResults);
+    return (React.createElement(TableBody, { dataSource: source },
+        React.createElement(TableColumn, { heading: "Name", footer: "Some Names", fieldName: "name", canSort: true }),
+        React.createElement(TableColumn, { heading: "Age", footer: `Average Age: ${Math.round(currentResults.reduce((sum, i) => sum + i.age, 0) / currentResults.length)}`, fieldName: "age", canSort: true, width: 120 })));
+}
+export function ComplexHeadersAndFooters() {
+    const [source] = useState(() => {
+        return new StaticDataSource(items, [
+            new StaticStringField('name', i => i.name),
+            new StaticNumberField('age', i => i.age),
+        ]);
+    });
+    return (React.createElement(TableBody, { dataSource: source },
+        React.createElement(TableColumn, { heading: React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                React.createElement("span", null, "\uD83D\uDC64"),
+                React.createElement("span", null, "Name")), footer: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
+                React.createElement("span", null, "Total:"),
+                React.createElement("span", null, items.length)), fieldName: "name", render: (i) => i.name }),
+        React.createElement(TableColumn, { heading: React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                React.createElement("span", null, "\uD83C\uDF82"),
+                React.createElement("span", null, "Age")), footer: React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
+                React.createElement("span", null, "Average:"),
+                React.createElement("span", null, Math.round(items.reduce((sum, i) => sum + i.age, 0) / items.length))), fieldName: "age", render: (i) => i.age })));
+}
+export default meta;
+//# sourceMappingURL=table.stories.js.map

package/dist/__stories__/table.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../src/__stories__/table.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,gDAAiD;AACrE,OAAO,EAAE,WAAW,EAAE,kDAAmD;AAEzE,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,OAAO;CACf,CAAC;AAQF,MAAM,KAAK,GAAe;IACxB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,EAAE,EAAE;IACzC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE;IACxC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE;IACvC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE;IACvC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE;IACtC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE;IACxC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE;CAC1C,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC7B,OAAO,IAAI,gBAAgB,CAAW,KAAK,EAAE;YAC3C,IAAI,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1C,IAAI,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;SACzC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,MAAM;QAC3B,oBAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,GAAG;QAC/C,oBAAC,WAAW,IAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,KAAK,GAAG;QAC7C,wEAA+C,CACrC,CACb,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC7B,OAAO,IAAI,gBAAgB,CAAW,KAAK,EAAE;YAC3C,IAAI,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1C,IAAI,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;SACzC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,MAAM;QAC3B,oBAAC,WAAW,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,YAAY,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,SAAG;QAC3E,oBAAC,WAAW,IACV,OAAO,EAAC,KAAK,EACb,MAAM,EAAE,gBAAgB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,EAAE,EAC/G,SAAS,EAAC,KAAK,EACf,OAAO,QACP,KAAK,EAAE,GAAG,GACV,CACQ,CACb,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC7B,OAAO,IAAI,gBAAgB,CAAW,KAAK,EAAE;YAC3C,IAAI,iBAAiB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1C,IAAI,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;SACzC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,SAAS,IAAC,UAAU,EAAE,MAAM;QAC3B,oBAAC,WAAW,IACV,OAAO,EACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC/D,iDAAe;gBACf,yCAAiB,CACb,EAER,MAAM,EACJ,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE;gBAC9D,2CAAmB;gBACnB,kCAAO,KAAK,CAAC,MAAM,CAAQ,CACvB,EAER,SAAS,EAAC,MAAM,EAChB,MAAM,EAAE,CAAC,CAAW,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAC/B;QACF,oBAAC,WAAW,IACV,OAAO,EACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE;gBAC/D,iDAAe;gBACf,wCAAgB,CACZ,EAER,MAAM,EACJ,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE;gBAC9D,6CAAqB;gBACrB,kCACG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAC/D,CACH,EAER,SAAS,EAAC,KAAK,EACf,MAAM,EAAE,CAAC,CAAW,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,GAC9B,CACQ,CACb,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}

package/dist/_components/cells/cell.module.css

@@ -0,0 +1,43 @@
+.table-cell[data-stick-to="start"] {
+  position: sticky;
+  top: 0;
+  left: var(--start-offset, 0);
+}
+
+.table-cell[data-stick-to="end"] {
+  position: sticky;
+  top: 0;
+  right: var(--end-offset, 0);
+}
+
+.table-cell[data-stick-to="start"]:dir(rtl) {
+  position: sticky;
+  top: 0;
+  right: var(--start-offset, 0);
+}
+
+.table-cell[data-stick-to="end"]:dir(rtl) {
+  position: sticky;
+  top: 0;
+  left: var(--end-offset, 0);
+}
+
+.table-cell[data-is-last-sticky-start="true"] {
+  border-inline-end: 1px solid #ccc;
+}
+
+:global(.dark-mode) .table-cell[data-is-last-sticky-start="true"] {
+  border-inline-end: 1px solid #202020;
+}
+
+.table-cell[data-is-last-sticky-end="true"] {
+  border-inline-start: 1px solid #ccc;
+}
+
+:global(.dark-mode) .table-cell[data-is-last-sticky-end="true"] {
+  border-inline-start: 1px solid #202020;
+}
+
+.table-cell[data-no-border="true"] {
+  border-inline: none;
+}

package/dist/_components/cells/data_cell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type DataCellProps = {
+    content: React.ReactNode;
+    sticky?: 'start' | 'end';
+    width?: number;
+};
+export declare function DataCell({ content, sticky, width }: DataCellProps): React.JSX.Element;

package/dist/_components/cells/data_cell.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cellStyles from './cell.module.css';
+export function DataCell({ content, sticky, width }) {
+    return (React.createElement("td", { className: cellStyles['table-cell'], "data-stick-to": sticky, style: {
+            width: `${width}px`,
+            minWidth: `${width}px`,
+            maxWidth: `${width}px`,
+            padding: '4px 6px',
+        } }, content));
+}
+//# sourceMappingURL=data_cell.js.map

package/dist/_components/cells/data_cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data_cell.js","sourceRoot":"","sources":["../../../src/_components/cells/data_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAQ3C,MAAM,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAiB;IAChE,OAAO,CACL,4BACE,SAAS,EAAE,UAAU,CAAC,YAAY,CAAC,mBACpB,MAAM,EACrB,KAAK,EAAE;YACL,KAAK,EAAE,GAAG,KAAK,IAAI;YACnB,QAAQ,EAAE,GAAG,KAAK,IAAI;YACtB,QAAQ,EAAE,GAAG,KAAK,IAAI;YACtB,OAAO,EAAE,SAAS;SACnB,IAEA,OAAO,CACL,CACN,CAAC;AACJ,CAAC"}

package/dist/_components/cells/footer_cell.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type FooterCellProps = {
+    content: React.ReactNode;
+    sticky?: 'start' | 'end';
+    width?: number;
+};
+export declare function FooterCell({ content, sticky, width }: FooterCellProps): React.JSX.Element;

package/dist/_components/cells/footer_cell.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cellStyles from './cell.module.css';
+export function FooterCell({ content, sticky, width }) {
+    return (React.createElement("td", { className: cellStyles['table-cell'], "data-stick-to": sticky, style: {
+            width: `${width}px`,
+            minWidth: `${width}px`,
+            maxWidth: `${width}px`,
+            padding: '4px 6px',
+        } }, content));
+}
+//# sourceMappingURL=footer_cell.js.map

package/dist/_components/cells/footer_cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer_cell.js","sourceRoot":"","sources":["../../../src/_components/cells/footer_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAQ3C,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAmB;IACpE,OAAO,CACL,4BACE,SAAS,EAAE,UAAU,CAAC,YAAY,CAAC,mBACpB,MAAM,EACrB,KAAK,EAAE;YACL,KAAK,EAAE,GAAG,KAAK,IAAI;YACnB,QAAQ,EAAE,GAAG,KAAK,IAAI;YACtB,QAAQ,EAAE,GAAG,KAAK,IAAI;YACtB,OAAO,EAAE,SAAS;SACnB,IAEA,OAAO,CACL,CACN,CAAC;AACJ,CAAC"}

package/dist/_components/cells/header_cell.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type HeaderCellProps = {
+    heading: React.ReactNode;
+    index: number;
+    sticky?: 'start' | 'end';
+    onResize?: (width: number) => void;
+    width?: number;
+    sortMode?: 'none' | 'asc' | 'desc';
+    onSortModeChange?: () => void;
+    canSort?: boolean;
+};
+export declare function HeaderCell({ heading, sticky, onResize, width, sortMode, onSortModeChange, canSort, }: HeaderCellProps): React.JSX.Element;

package/dist/_components/cells/header_cell.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Box, FlexBox, HStack } from '@tcn/ui-layout';
+import cellStyles from './cell.module.css';
+export function HeaderCell({ heading, sticky, onResize, width, sortMode, onSortModeChange, canSort, }) {
+    const zIndex = sticky != null ? 2 : 1;
+    return (React.createElement("th", { className: cellStyles['table-cell'], "data-stick-to": sticky, style: { width: `${width}px`, zIndex } },
+        React.createElement(Box, { padding: "4px 6px", overflow: "hidden", enableResizeOnEnd: true, onWidthResize: newSize => onResize?.(newSize), style: { width: `${width}px` }, onClick: e => e.stopPropagation() },
+            React.createElement(HStack, { onClick: () => canSort && onSortModeChange?.() },
+                React.createElement(FlexBox, { shrinkWeight: 1, className: "ellipsis" }, heading),
+                React.createElement(Box, { width: "auto" },
+                    sortMode === 'asc' && '↓',
+                    sortMode === 'desc' && '↑')))));
+}
+//# sourceMappingURL=header_cell.js.map

package/dist/_components/cells/header_cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header_cell.js","sourceRoot":"","sources":["../../../src/_components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAa3C,MAAM,UAAU,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACS;IAChB,MAAM,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,OAAO,CACL,4BACE,SAAS,EAAE,UAAU,CAAC,YAAY,CAAC,mBACpB,MAAM,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,MAAM,EAAE;QAEtC,oBAAC,GAAG,IACF,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAC,QAAQ,EACjB,iBAAiB,QACjB,aAAa,EAAE,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,EAC7C,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,EAC9B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;YAEjC,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,gBAAgB,EAAE,EAAE;gBACpD,oBAAC,OAAO,IAAC,YAAY,EAAE,CAAC,EAAE,SAAS,EAAC,UAAU,IAC3C,OAAO,CACA;gBACV,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM;oBACd,QAAQ,KAAK,KAAK,IAAI,GAAG;oBACzB,QAAQ,KAAK,MAAM,IAAI,GAAG,CACvB,CACC,CACL,CACH,CACN,CAAC;AACJ,CAAC"}

package/dist/_components/table_body/table_body.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+import { DataSource } from '@tcn-internal/resource-store';
+import { TableColumnProps } from './table_column.js';
+export type TableBodyProps<T> = {
+    dataSource: DataSource<T>;
+    children: ReactElement<TableColumnProps<T>>[];
+    height?: string;
+    width?: string;
+    zIndex?: number;
+    highlightedRows?: Set<number> | null;
+};
+export declare function TableBody<T>({ dataSource, children, width, height, zIndex, highlightedRows, }: TableBodyProps<T>): React.JSX.Element;

package/dist/_components/table_body/table_body.js

@@ -0,0 +1,67 @@
+import React, { isValidElement, useState, useRef } from 'react';
+import { Status, useRunnerStatus, useSignalValue } from '@tcn/state';
+import { Text } from '@tcn/ui-core';
+import { Box } from '@tcn/ui-layout';
+import { DataCell } from '../cells/data_cell.js';
+import { FooterCell } from '../cells/footer_cell.js';
+import { HeaderCell } from '../cells/header_cell.js';
+import styles from './table_body.module.css';
+import { TableBodyPresenter } from './table_body_presenter.js';
+import { TableColumn } from './table_column.js';
+// @TODO: Props for loading and error states
+function wrapContent(content) {
+    if (typeof content === 'string') {
+        return React.createElement(Text, null, content);
+    }
+    return content;
+}
+export function TableBody({ dataSource, children, width = '100%', height = '100%', zIndex, highlightedRows, }) {
+    const rows = useSignalValue(dataSource.broadcasts.currentResults);
+    const page = useSignalValue(dataSource.broadcasts.currentPageIndex);
+    const scrollerRef = useRef(null);
+    const columns = React.Children.toArray(children).filter((child) => isValidElement(child) && child.type === TableColumn);
+    const [presenter] = useState(() => new TableBodyPresenter({
+        dataSource,
+        columns: columns.map(column => ({
+            fieldName: column.props.fieldName,
+            width: column.props.width ?? 100,
+            sortMode: 'none',
+            canSort: column.props.canSort ?? false,
+            heading: column.props.heading,
+            footer: column.props.footer,
+            sticky: column.props.sticky,
+            render: column.props.render,
+        })),
+        scrollerRef,
+    }));
+    const columnInfo = useSignalValue(presenter.broadcasts.columnInfo);
+    const itemsStatus = useRunnerStatus(dataSource.broadcasts.currentResults);
+    return (React.createElement(Box, { ref: scrollerRef, zIndex: zIndex, className: styles['table-body-wrapper'], style: { overflow: 'auto' } },
+        React.createElement("table", { className: styles['table-body'], style: { width, height } },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    columnInfo.map((column, index) => (React.createElement(HeaderCell, { key: `h-${index}`, index: index, heading: wrapContent(column.heading), sticky: column.sticky, onResize: newSize => presenter.setColumnWidth(index, newSize), width: column.width, sortMode: column.sortMode, onSortModeChange: () => presenter.setNextColumnSortMode(index), canSort: column.canSort }))),
+                    React.createElement("th", { key: "fill", className: "fill" }))),
+            React.createElement("tbody", null,
+                itemsStatus === Status.SUCCESS &&
+                    rows.map((item, rowIndex) => (React.createElement("tr", { key: `${page}-${rowIndex}`, "data-selected": highlightedRows?.has(rowIndex) },
+                        columnInfo.map((col, colIndex) => {
+                            const fieldName = col.fieldName;
+                            const render = col.render;
+                            const content = render
+                                ? render(item)
+                                : fieldName
+                                    ? item[fieldName]
+                                    : '';
+                            return (React.createElement(DataCell, { key: `${page}-${rowIndex}-${colIndex}`, content: content, sticky: col.sticky, width: col.width }));
+                        }),
+                        React.createElement("td", { key: "fill", className: "fill" })))),
+                itemsStatus === Status.PENDING && 'Loading...',
+                itemsStatus === Status.ERROR && 'Error loading data',
+                React.createElement("tr", { key: "fill", className: "fill" })),
+            React.createElement("tfoot", null,
+                React.createElement("tr", null,
+                    columnInfo.map((col, colIndex) => (React.createElement(FooterCell, { key: `footer-${colIndex}`, content: wrapContent(col.footer), sticky: col.sticky, width: col.width }))),
+                    React.createElement("td", { key: "footer-fill", className: "fill" }))))));
+}
+//# sourceMappingURL=table_body.js.map

package/dist/_components/table_body/table_body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_body.js","sourceRoot":"","sources":["../../../src/_components/table_body/table_body.tsx"],"names":[],"mappings":"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"}

package/dist/_components/table_body/table_body.module.css

@@ -0,0 +1,241 @@
+.table-body-wrapper {
+  box-shadow: var(--table-box-shadow, inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5));
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: #333;
+}
+
+.table-body {
+  border-spacing: 0;
+  width: auto;
+  min-width: 100%;
+  height: auto;
+  min-height: 100%;
+  font-size: 12px;
+  table-layout: fixed;
+  background-color: #ebebeb;
+}
+
+:global(.dark-mode) .table-body {
+  background-color: #333;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+td {
+  text-align: start;
+  padding: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0px 4px;
+  background-color: inherit;
+}
+
+.table-body tr {
+  font-size: 12px;
+}
+
+.table-body tr[data-clickable="true"] {
+  cursor: pointer;
+}
+
+.table-body thead tr th {
+  position: sticky;
+  top: 0px;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.table-body thead {
+  position: sticky;
+  top: 0px;
+  z-index: 3;
+}
+
+.table-body tbody {
+  position: relative;
+  z-index: 1;
+}
+
+.table-body tfoot {
+  position: relative;
+  z-index: 2;
+}
+
+.table-body th {
+  background-color: #f1f1f1; /* Light grey background */
+  color: #000; /* Black text color */
+  font-weight: normal;
+  text-align: start;
+  border-inline-start: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+
+.table-body th:first-child {
+  border-inline-start: none;
+}
+
+.table-body th:last-child {
+  border-inline: 1px solid #ccc;
+}
+
+:global(.dark-mode) .table-body th:last-child {
+  border-inline: 1px solid #202020;
+}
+
+.table-body td:last-child {
+  border-inline: 1px solid #ccc;
+}
+
+:global(.dark-mode) .table-body td:last-child {
+  border-inline: 1px solid #202020;
+}
+
+:global(.dark-mode) .table-body th {
+  color: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid #202020;
+  border-inline-start: 1px solid #202020;
+  background-color: #333;
+}
+
+.table-body td {
+  border-bottom: 1px solid #e0e0e0; /* Lighter border for cells */
+}
+
+:global(.dark-mode) .table-body td {
+  border-bottom: 1px solid #202020; /* Lighter border for cells */
+}
+
+.table-body tr:nth-child(odd) {
+  background-color: #f1f1f1;
+}
+
+.table-body tr:nth-child(even) {
+  background-color: rgba(255, 255, 255);
+}
+
+:global(.dark-mode) .table-body tr:nth-child(odd) {
+  background-color: #3b3b3b; /* Zebra striping for rows */
+}
+
+:global(.dark-mode) .table-body tr:nth-child(even) {
+  background-color: #2e2e2e;
+}
+
+/* Hover effect for rows */
+.table-body tr:hover {
+  background-color: #dedede;
+}
+
+:global(.dark-mode) .table-body tr:hover {
+  background-color: rgba(30, 30, 30, 1);
+}
+
+/* Styling for the table's header row to mimic macOS window styling */
+.table-body thead {
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
+}
+
+/* Footer styling, if applicable */
+.table-body tfoot td {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+
+.table-body tr:global(.fill) {
+  height: auto;
+}
+
+.table-body tr td:global(.fill) {
+  width: auto;
+  min-width: none;
+  background-color: inherit;
+}
+
+.table-body tr th:global(.fill) {
+  width: auto;
+  background-color: inherit;
+}
+
+.table-body tfoot {
+  position: sticky;
+  bottom: 0px;
+}
+
+.table-body tr[data-selected="true"] {
+  background-color: var(--accent-color, #549aff);
+  color: #fff;
+}
+
+:global(.dark-mode) .table-body tr[data-selected="true"] {
+  background-color: var(--accent-color, #549aff);
+  color: #fff;
+}
+
+.table-body td,
+.table-body th {
+  padding: 4px 6px;
+  max-height: 22px;
+  height: 22px;
+  font-size: 12px;
+}
+
+:global(.small-text) .table-body td,
+:global(.small-text) .table-body th {
+  padding: 2px 4px;
+  max-height: 20px;
+  height: 20px;
+  font-size: 10px;
+}
+
+:global(.medium-small-text) .table-body td,
+:global(.medium-small-text) .table-body th {
+  padding: 4px 6px;
+  max-height: 22px;
+  height: 22px;
+  font-size: 12px;
+}
+
+:global(.medium-text) .table-body td,
+:global(.medium-text) .table-body th {
+  padding: 6px 8px;
+  max-height: 24px;
+  height: 24px;
+  font-size: 14px;
+}
+
+:global(.medium-large-text) .table-body td,
+:global(.medium-large-text) .table-body th {
+  padding: 8px 10px;
+  max-height: 26px;
+  height: 26px;
+  font-size: 16px;
+}
+
+:global(.large-text) .table-body td,
+:global(.large-text) .table-body th {
+  padding: 10px 12px;
+  height: 28px;
+  max-height: 28px;
+  font-size: 18px;
+}
+
+.table-body th {
+  padding: 0 !important;
+}
+
+.table-body tr th:global(.spacer) {
+  background-color: #f1f1f1;
+}
+
+:global(.dark-mode) .table-body tr th:global(.spacer) {
+  background-color: #333;
+}
+
+.table-body tr th:global(.fill) {
+  background-color: #f1f1f1;
+}
+
+:global(.dark-mode) .table-body tr th:global(.fill) {
+  background-color: #333;
+}

package/dist/_components/table_body/table_body_presenter.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, RefObject } from 'react';
+import { DataSource } from '@tcn-internal/resource-store';
+type SortMode = 'none' | 'asc' | 'desc';
+export type ColumnInfo = {
+    width: number;
+    render?: (item: any) => ReactNode;
+    sortMode: SortMode;
+    canSort: boolean;
+    heading: ReactNode;
+    footer?: ReactNode;
+    sticky?: 'start' | 'end';
+    fieldName?: string;
+};
+export declare class TableBodyPresenter {
+    private _columnInfo;
+    private _dataSource;
+    private _broadcasts;
+    private _scrollerRef?;
+    private _pageSubscription?;
+    constructor({ dataSource, columns, scrollerRef, }: {
+        dataSource: DataSource<any>;
+        columns: ColumnInfo[];
+        scrollerRef?: RefObject<HTMLDivElement>;
+    });
+    get broadcasts(): {
+        columnInfo: import("@tcn/state").IBroadcast<ColumnInfo[]>;
+    };
+    setColumnWidth(index: number, width: number): void;
+    setColumnSortMode(index: number, sortMode: SortMode): void;
+    setNextColumnSortMode(index: number): void;
+}
+export {};

package/dist/_components/table_body/table_body_presenter.js

@@ -0,0 +1,55 @@
+import { Signal } from '@tcn/state';
+const sortModes = ['none', 'asc', 'desc'];
+export class TableBodyPresenter {
+    _columnInfo = new Signal([]);
+    _dataSource;
+    _broadcasts = {
+        columnInfo: this._columnInfo.broadcast,
+    };
+    _scrollerRef;
+    _pageSubscription;
+    constructor({ dataSource, columns, scrollerRef, }) {
+        this._dataSource = dataSource;
+        this._columnInfo.set(columns);
+        this._scrollerRef = scrollerRef;
+        this._pageSubscription = this._dataSource.broadcasts.currentPageIndex.subscribe(_ => {
+            if (this._scrollerRef?.current) {
+                this._scrollerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        });
+    }
+    get broadcasts() {
+        return this._broadcasts;
+    }
+    setColumnWidth(index, width) {
+        this._columnInfo.transform(columnInfo => {
+            columnInfo[index].width = width;
+            return columnInfo;
+        });
+    }
+    setColumnSortMode(index, sortMode) {
+        const column = this._columnInfo.get()[index];
+        const fieldName = column.fieldName;
+        if (!column.canSort) {
+            return;
+        }
+        if (!fieldName) {
+            // can't sort a field without a name
+            return;
+        }
+        this._dataSource.setFieldSort(fieldName, sortMode);
+        this._columnInfo.transform(columnInfo => {
+            columnInfo[index].sortMode = sortMode;
+            return columnInfo;
+        });
+    }
+    setNextColumnSortMode(index) {
+        const column = this._columnInfo.get()[index];
+        const currentMode = column.sortMode;
+        const currentIndex = sortModes.indexOf(currentMode);
+        const nextIndex = (currentIndex + 1) % sortModes.length;
+        const nextMode = sortModes[nextIndex];
+        this.setColumnSortMode(index, nextMode);
+    }
+}
+//# sourceMappingURL=table_body_presenter.js.map

package/dist/_components/table_body/table_body_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_body_presenter.js","sourceRoot":"","sources":["../../../src/_components/table_body/table_body_presenter.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,MAAM,EAAE,MAAM,YAAY,CAAC;AAInD,MAAM,SAAS,GAAe,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAatD,MAAM,OAAO,kBAAkB;IACrB,WAAW,GAAG,IAAI,MAAM,CAAe,EAAE,CAAC,CAAC;IAC3C,WAAW,CAAkB;IAC7B,WAAW,GAAG;QACpB,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,SAAS;KACvC,CAAC;IAEM,YAAY,CAA6B;IAEzC,iBAAiB,CAAyB;IAElD,YAAY,EACV,UAAU,EACV,OAAO,EACP,WAAW,GAKZ;QACC,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;QAC9B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;QAEhC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAClF,IAAI,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YACrE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,cAAc,CAAC,KAAa,EAAE,KAAa;QACzC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE;YACtC,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC;YAChC,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB,CAAC,KAAa,EAAE,QAAkB;QACjD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;QAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,oCAAoC;YACpC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAEnD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE;YACtC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACtC,OAAO,UAAU,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qBAAqB,CAAC,KAAa;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;QAE7C,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;QACpC,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACpD,MAAM,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC;QACxD,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;QAEtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC1C,CAAC;CACF"}

package/dist/_components/table_body/table_body_presenter.test.d.ts

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

package/dist/_components/table_body/table_body_presenter.test.js

@@ -0,0 +1,125 @@
+import { StaticDataSource, StaticStringField } from '@tcn-internal/resource-store';
+import { Signal } from '@tcn/state';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { TableBodyPresenter } from './table_body_presenter.js';
+describe('TableBodyPresenter', () => {
+    let dataSource;
+    let mockColumnInfo;
+    beforeEach(() => {
+        dataSource = new StaticDataSource([], [
+            new StaticStringField('name', i => i.name),
+            new StaticStringField('age', i => i.age),
+        ]);
+        mockColumnInfo = [
+            {
+                width: 100,
+                sortMode: 'none',
+                canSort: true,
+                heading: 'Name',
+                fieldName: 'name',
+            },
+            {
+                width: 100,
+                sortMode: 'none',
+                canSort: false,
+                heading: 'Age',
+                fieldName: 'age',
+            },
+        ];
+    });
+    describe('constructor', () => {
+        it('initializes with provided data source and columns', () => {
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: mockColumnInfo,
+            });
+            const columnInfo = presenter.broadcasts.columnInfo.get();
+            expect(columnInfo).toEqual(mockColumnInfo);
+        });
+    });
+    describe('setColumnWidth', () => {
+        it('updates the width of the specified column', () => {
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: mockColumnInfo,
+            });
+            const newWidth = 200;
+            presenter.setColumnWidth(0, newWidth);
+            const columnInfo = presenter.broadcasts.columnInfo.get();
+            expect(columnInfo[0].width).toBe(newWidth);
+            expect(columnInfo[1].width).toBe(mockColumnInfo[1].width);
+        });
+    });
+    describe('setColumnSortMode', () => {
+        it('updates sort mode and calls setFieldSort when fieldName exists', () => {
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: mockColumnInfo,
+            });
+            const newSortMode = 'asc';
+            presenter.setColumnSortMode(0, newSortMode);
+            const columnInfo = presenter.broadcasts.columnInfo.get();
+            expect(columnInfo[0].sortMode).toBe(newSortMode);
+            expect(dataSource.broadcasts.sortStatus.get()).toEqual([['name', 'asc']]);
+        });
+        it('does not update sort mode or call setFieldSort when fieldName is missing', () => {
+            const columnsWithoutFieldName = [
+                {
+                    width: 100,
+                    sortMode: 'none',
+                    canSort: true,
+                    heading: 'Name',
+                },
+            ];
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: columnsWithoutFieldName,
+            });
+            const newSortMode = 'asc';
+            presenter.setColumnSortMode(0, newSortMode);
+            const columnInfo = presenter.broadcasts.columnInfo.get();
+            expect(columnInfo[0].sortMode).toBe('none');
+            expect(dataSource.broadcasts.sortStatus.get()).toEqual([]);
+        });
+    });
+    describe('setNextColumnSortMode', () => {
+        it('cycles through sort modes in order: none -> asc -> desc -> none', () => {
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: mockColumnInfo,
+            });
+            // First click: none -> asc
+            presenter.setNextColumnSortMode(0);
+            expect(presenter.broadcasts.columnInfo.get()[0].sortMode).toBe('asc');
+            expect(dataSource.broadcasts.sortStatus.get()).toEqual([['name', 'asc']]);
+            // Second click: asc -> desc
+            presenter.setNextColumnSortMode(0);
+            expect(presenter.broadcasts.columnInfo.get()[0].sortMode).toBe('desc');
+            expect(dataSource.broadcasts.sortStatus.get()).toEqual([['name', 'desc']]);
+            // Third click: desc -> none
+            presenter.setNextColumnSortMode(0);
+            expect(presenter.broadcasts.columnInfo.get()[0].sortMode).toBe('none');
+            expect(dataSource.broadcasts.sortStatus.get()).toEqual([]);
+        });
+        it('does not cycle sort modes for unsortable columns', () => {
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: mockColumnInfo,
+            });
+            presenter.setNextColumnSortMode(1);
+            expect(presenter.broadcasts.columnInfo.get()[1].sortMode).toBe('none');
+            expect(dataSource.broadcasts.sortStatus.get()).toEqual([]);
+        });
+    });
+    describe('broadcasts', () => {
+        it('provides access to column info signal', () => {
+            const presenter = new TableBodyPresenter({
+                dataSource,
+                columns: mockColumnInfo,
+            });
+            expect(presenter.broadcasts.columnInfo).toBeInstanceOf(Signal);
+            expect(presenter.broadcasts.columnInfo.get()).toEqual(mockColumnInfo);
+        });
+    });
+});
+//# sourceMappingURL=table_body_presenter.test.js.map

package/dist/_components/table_body/table_body_presenter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_body_presenter.test.js","sourceRoot":"","sources":["../../../src/_components/table_body/table_body_presenter.test.ts"],"names":[],"mappings":"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"}

package/dist/_components/table_body/table_column.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type BaseTableColumnProps<T> = {
+    heading: React.ReactNode;
+    footer?: React.ReactNode;
+    render?: (item: T) => React.ReactNode;
+    sticky?: 'start' | 'end';
+    width?: number;
+};
+type SortableTableColumnProps<T> = BaseTableColumnProps<T> & {
+    fieldName: string;
+    canSort: true;
+};
+type NonSortableTableColumnProps<T> = BaseTableColumnProps<T> & {
+    fieldName?: string;
+    canSort?: false;
+};
+export type TableColumnProps<T> = SortableTableColumnProps<T> | NonSortableTableColumnProps<T>;
+export declare function TableColumn<T>(_props: TableColumnProps<T>): null;
+export {};

package/dist/_components/table_body/table_column.js

@@ -0,0 +1,6 @@
+// This component never gets rendered. It is given as children to the
+// table body as configuration
+export function TableColumn(_props) {
+    return null;
+}
+//# sourceMappingURL=table_column.js.map

package/dist/_components/table_body/table_column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_column.js","sourceRoot":"","sources":["../../../src/_components/table_body/table_column.tsx"],"names":[],"mappings":"AAsBA,qEAAqE;AACrE,8BAA8B;AAC9B,MAAM,UAAU,WAAW,CAAI,MAA2B;IACxD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/_components/table_footer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DataSource } from '@tcn-internal/resource-store';
+export type TableFooterProps<T> = {
+    dataSource: DataSource<T>;
+};
+export declare function TableFooter<T>({ dataSource }: TableFooterProps<T>): React.JSX.Element;

package/dist/_components/table_footer.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui-controls';
+import { Box } from '@tcn/ui-layout';
+export function TableFooter({ dataSource }) {
+    const pageIndex = useSignalValue(dataSource.broadcasts.currentPageIndex);
+    return (React.createElement(Box, null,
+        "Page: ",
+        pageIndex + 1,
+        React.createElement(Button, { onClick: () => dataSource.previousPage(), disabled: pageIndex === 0 }, "<"),
+        React.createElement(Button, { onClick: () => dataSource.nextPage() }, ">")));
+}
+//# sourceMappingURL=table_footer.js.map

package/dist/_components/table_footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_footer.js","sourceRoot":"","sources":["../../src/_components/table_footer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAMrC,MAAM,UAAU,WAAW,CAAI,EAAE,UAAU,EAAuB;IAChE,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAEzE,OAAO,CACL,oBAAC,GAAG;;QACK,SAAS,GAAG,CAAC;QACpB,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,SAAS,KAAK,CAAC,QAElE;QACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAe,CACvD,CACP,CAAC;AACJ,CAAC"}

package/dist/_components/table_header.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DataSource } from '@tcn-internal/resource-store';
+export type TableHeaderProps = {
+    title: string;
+    dataSource: DataSource<any>;
+};
+export declare function TableHeader({ title, dataSource }: TableHeaderProps): React.JSX.Element;

package/dist/_components/table_header.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useSignalValue } from '@tcn/state';
+import { Input } from '@tcn/ui-controls';
+import { Text } from '@tcn/ui-core';
+import { Box, FlexBox, HStack } from '@tcn/ui-layout';
+export function TableHeader({ title, dataSource }) {
+    const filterString = useSignalValue(dataSource.broadcasts.filterString);
+    return (React.createElement(HStack, null,
+        React.createElement(FlexBox, { width: "auto" },
+            React.createElement(Text, { variant: "large" }, title)),
+        React.createElement(Box, { width: "300px" },
+            React.createElement(Input, { placeholder: "Search", value: filterString, onChange: e => dataSource.setFilterString(e) }))));
+}
+//# sourceMappingURL=table_header.js.map

package/dist/_components/table_header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_header.js","sourceRoot":"","sources":["../../src/_components/table_header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAOtD,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAoB;IACjE,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAExE,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,OAAO,IAAC,KAAK,EAAC,MAAM;YACnB,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,IAAE,KAAK,CAAQ,CAC5B;QACV,oBAAC,GAAG,IAAC,KAAK,EAAC,OAAO;YAChB,oBAAC,KAAK,IACJ,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,GAC5C,CACE,CACC,CACV,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { TableBody } from './_components/table_body/table_body.js';
+export { TableColumn } from './_components/table_body/table_column.js';
+export { TableFooter } from './_components/table_footer.js';
+export { TableHeader } from './_components/table_header.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { TableBody } from './_components/table_body/table_body.js';
+export { TableColumn } from './_components/table_body/table_column.js';
+export { TableFooter } from './_components/table_footer.js';
+export { TableHeader } from './_components/table_header.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@tcn/ui-table",
+  "version": "0.0.2",
+  "type": "module",
+  "author": "TCN",
+  "description": "Blackcat UI Table",
+  "files": [
+    "dist/**/*"
+  ],
+  "main": "dist/index.js",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "check-all": "concurrently 'yarn check-types' 'biome check .'",
+    "check-types": "tspc --project ./tsconfig.types.json --noEmit",
+    "check-format": "biome format .",
+    "check-lint": "biome lint .",
+    "fix-all": "biome check --write",
+    "fix-format": "biome format --write",
+    "fix-lint": "biome lint --write",
+    "fix-imports": "biome check --formatter-enabled=false --linter-enabled=false --organize-imports-enabled=true --write",
+    "build": "tspc && copyfiles -u 1 'src/**/*.css' dist/",
+    "build-types": "tspc --project ./tsconfig.types.json --emitDeclarationOnly",
+    "test": "vitest run",
+    "test-coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@tcn-internal/sb-tcn-auth-addon": "^0.0.1",
+    "@types/copyfiles": "^2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^8.2.2",
+    "copyfiles": "^2.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "read-pkg-up": "^11.0.0",
+    "storybook": "^8.0.4",
+    "ts-patch": "^3.2.1",
+    "typescript": "5.4.3",
+    "typescript-transform-paths": "^3.5.1",
+    "vite": "^5.2.6",
+    "vite-css-modules": "^1.5.2",
+    "vitest": "^2.1.4"
+  },
+  "dependencies": {
+    "@tcn-internal/resource-store": "1.0.4",
+    "@tcn/state": "^0.1.4",
+    "@tcn/ui-controls": "^0.2.34",
+    "@tcn/ui-core": "^0.4.1",
+    "@tcn/ui-layout": "^0.3.38",
+    "classnames": "^2.5.1"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}