@tcn/ui-table 2.2.0 → 2.3.0

package/package.json

@@ -1,74 +1,74 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
+  "description": "React table component library",
   "author": "TCN",
-  "description": "Blackcat UI Table",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "access": "public",
+  "blackcatConfig": {
+    "storybook": {
+      "publish": true,
+      "title": "UI Table",
+      "port": 6300
+    }
+  },
   "files": [
-    "dist/**/*"
+    "dist",
+    "src",
+    "types",
+    "README.md",
+    "tsconfig.json"
   ],
-  "main": "dist/index.js",
-  "license": "Apache-2.0",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "@bc-monorepo/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "clarity-pattern-parser": "^11.5.4",
+    "@tcn/aip-160": "1.2.5",
+    "@tcn/icons": "2.2.1",
+    "@tcn/resource-store": "2.5.0",
+    "@tcn/ui": "0.4.0",
+    "@tcn/state": "1.1.1"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "scripts": {
-    "check-all": "concurrently 'yarn check-types' 'biome check .'",
-    "check-types": "./node_modules/.bin/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",
+    "start": "pnpm storybook",
+    "build": "vite build",
+    "clean": "rm -rf dist storybook-static",
+    "clean-all": "pnpm clean && rm -rf node_modules",
     "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",
-    "@tcn/sb-blackcat-addon": "^3.0.12",
-    "@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/aip-160": "^1.2.2",
-    "@tcn/icons": "^2.1.0",
-    "@tcn/resource-store": "^2.4.0",
-    "@tcn/state": "^0.3.1",
-    "@tcn/ui": "^0.3.3",
-    "clarity-pattern-parser": "^11.5.4",
-    "classnames": "^2.5.1"
-  },
-  "packageManager": "yarn@4.0.2"
-}
+    "check-all": "concurrently 'pnpm check-types' 'pnpm run biome check .'",
+    "check-types": "tsc --project tsconfig.typecheck.json --noEmit",
+    "check-format": "pnpm run biome format .",
+    "check-lint": "pnpm run biome lint .",
+    "check-imports": "pnpm run biome check --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "fix-all": "pnpm run biome check --write",
+    "fix-format": "pnpm run biome format --write",
+    "fix-lint": "pnpm run biome lint --write",
+    "fix-imports": "pnpm run biome check --write --unsafe --formatter-enabled=false --linter-enabled=false --assist-enabled=true",
+    "publish-dry-run": "pnpm build && pnpm publish --dry-run --force --no-git-checks",
+    "biome": "pnpm exec biome",
+    "storybook": "bash ../../scripts/ensure-addon-built.sh && storybook dev",
+    "storybook:silent": "storybook dev --no-open --disable-telemetry --quiet",
+    "storybook:build": "storybook build"
+  }
+}

package/src/__stories__/aip_table.stories.tsx

@@ -0,0 +1,190 @@
+import { Meta } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { AIPDataSource } from '@tcn/resource-store';
+
+import { Button } from '@tcn/ui/actions';
+import { HStack, Spacer, VStack } from '@tcn/ui/stacks';
+import { GlobalSearch } from '../components/global_search.js';
+import { Table } from '../components/table/table.js';
+import { TableColumn } from '../components/table/table_column.js';
+import { TablePager } from '../components/table_pager.js';
+
+import { Signal, useSignalValue, useSignalValueEffect } from '@tcn/state';
+import { Title } from '@tcn/ui/typography';
+
+import styles from './table.module.css';
+
+import { VPanel } from '@tcn/ui/surfaces';
+import { AuthContext, useToken } from './auth_provider.js';
+
+const meta: Meta = {
+  title: 'AIP Table',
+};
+
+type Organization = {
+  name: string;
+  displayName: string;
+  billingId: string;
+  clientSid: string;
+  timeZone: string;
+  createTime: Date;
+  updateTime: Date;
+};
+
+const resourceURL =
+  'https://api.dev.tcn.com/tcn/org/organizations/v1alpha1/organizations';
+const resourceName = 'organizations';
+
+function BasicContent() {
+  const authToken = useToken();
+
+  const [source] = useState(() => {
+    const fields = [
+      {
+        fieldName: 'name',
+        sourceFieldName: 'name',
+        getValue: (i: Organization) => i.name,
+      },
+      {
+        fieldName: 'displayName',
+        sourceFieldName: 'display_name',
+        getValue: (i: Organization) => i.displayName,
+      },
+      {
+        fieldName: 'billingId',
+        sourceFieldName: 'billing_id',
+        getValue: (i: Organization) => i.billingId,
+      },
+      {
+        fieldName: 'clientSid',
+        sourceFieldName: 'client_sid',
+        getValue: (i: Organization) => i.clientSid,
+      },
+      {
+        fieldName: 'timeZone',
+        sourceFieldName: 'time_zone',
+        getValue: (i: Organization) => i.timeZone,
+      },
+      {
+        fieldName: 'createTime',
+        sourceFieldName: 'create_time',
+        getValue: (i: Organization) => new Date(i.createTime),
+      },
+      {
+        fieldName: 'updateTime',
+        sourceFieldName: 'update_time',
+        getValue: (i: Organization) => new Date(i.updateTime),
+      },
+    ];
+    return new AIPDataSource<Organization, Organization>({
+      resourceUrl: resourceURL,
+      resourceName,
+      fields,
+      getAuthToken: () => authToken.get(),
+    });
+  });
+
+  const tokenValue = useSignalValue(authToken);
+
+  useSignalValueEffect(_ => {
+    source.list();
+  }, authToken);
+
+  return (
+    <VStack>
+      <HStack height="auto">{tokenValue === '' ? 'Sign in to load data' : ''}</HStack>
+      <VPanel>
+        <HStack className={styles.header} padding="8px" vAlign="center">
+          <Title>Organizations</Title>
+          <Spacer />
+          <GlobalSearch dataSource={source} />
+        </HStack>
+        <VStack height="flex">
+          <Table dataSource={source} onRowClick={i => alert(`Clicked ${i.name}`)}>
+            <TableColumn
+              heading="Name"
+              fieldName="name"
+              render={(i: Organization) => i.name}
+              width={320}
+              footer="Note: not for display"
+              sticky="start"
+            />
+            <TableColumn
+              heading="Display Name"
+              fieldName="display_name"
+              width={300}
+              render={(i: Organization) => i.displayName}
+            />
+            <TableColumn
+              heading="Client SID"
+              fieldName="client_sid"
+              width={80}
+              render={(i: Organization) => i.clientSid}
+              canSort
+            />
+            <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('')
+              }
+            />
+            <TableColumn
+              heading="Created Time"
+              fieldName="create_time"
+              width={200}
+              render={(i: Organization) => i.createTime.toLocaleString()}
+            />
+            <TableColumn
+              heading="Update Time"
+              fieldName="update_time"
+              width={200}
+              render={(i: Organization) => (
+                <div style={{ color: 'red' }}>{i.updateTime.toLocaleString()}</div>
+              )}
+            />
+            <TableColumn
+              heading="Actions"
+              width={80}
+              render={(i: Organization) => (
+                <div>
+                  <Button
+                    onClick={e => {
+                      e.stopPropagation();
+                      alert(`Edit ${i.name}`);
+                    }}
+                  >
+                    Edit
+                  </Button>
+                </div>
+              )}
+              sticky="end"
+            />
+          </Table>
+        </VStack>
+        <HStack padding="8px">
+          <TablePager dataSource={source} />
+        </HStack>
+      </VPanel>
+    </VStack>
+  );
+}
+
+export function Basic() {
+  const [tokenSignal] = useState(() => new Signal<string>(''));
+
+  return (
+    <AuthContext.Provider value={tokenSignal}>
+      <BasicContent />
+    </AuthContext.Provider>
+  );
+}
+
+export default meta;

package/src/__stories__/auth_provider.tsx

@@ -0,0 +1,14 @@
+import { Signal } from '@tcn/state';
+import React, { useContext } from 'react';
+
+export const AuthContext = React.createContext<Signal<string> | null>(null);
+
+export function useToken() {
+  const token = useContext(AuthContext);
+
+  if (token == null) {
+    throw new Error('Token cannot be null.');
+  }
+
+  return token;
+}

package/src/__stories__/demo.stories.tsx

@@ -0,0 +1,137 @@
+import { FilterTwoFilledIcon } from '@tcn/icons/filter_two_filled_icon.js';
+import {
+  StaticDataSource,
+  StaticDateField,
+  StaticNumberField,
+  StaticStringField,
+} from '@tcn/resource-store';
+import { useSignalValue } from '@tcn/state';
+import { Button } from '@tcn/ui/actions';
+import { Box, HStack, Spacer } from '@tcn/ui/stacks';
+import { VPanel } from '@tcn/ui/surfaces';
+import { Title } from '@tcn/ui/typography';
+import React, { useState } from 'react';
+import { GlobalSearch } from '../components/global_search.js';
+import { Table } from '../components/table/table.js';
+import { TableColumn } from '../components/table/table_column.js';
+import { DateFieldFilter } from '../components/table_filter_panel/field_filters/date_field_filter.js';
+import { MulitSelectFieldFilter } from '../components/table_filter_panel/field_filters/mulit_select_field_filter.js';
+import { NumberFieldFilter } from '../components/table_filter_panel/field_filters/number_field_filter.js';
+import { NumberRangeFieldFilter } from '../components/table_filter_panel/field_filters/number_range_field_filter.js';
+import { SelectFieldFilter } from '../components/table_filter_panel/field_filters/select_field_filter.js';
+import { StringFieldFilter } from '../components/table_filter_panel/field_filters/string_field_filter.js';
+import { TableFilterPanel } from '../components/table_filter_panel/table_filter_panel.js';
+import { TablePager } from '../components/table_pager.js';
+import { DataItem, items } from './sample_data.js';
+
+export default {
+  title: 'Demo',
+};
+
+export function Demo() {
+  const [source] = useState(() => {
+    const source = new StaticDataSource<DataItem>(items, [
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticNumberField('skillLevel', i => i.skillLevel),
+      new StaticStringField('city', i => i.city),
+      new StaticDateField('birthdate', i => i.birthdate),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+    source.setPageSize(80);
+
+    return source;
+  });
+
+  // biome-ignore lint/correctness/noUnusedVariables: need a reference to the subscription to prevent it from being garbage collected
+  const [sub] = useState(() =>
+    source.broadcasts.filterString.subscribe(filterString => {
+      // biome-ignore lint/suspicious/noConsole: Debug logging in story
+      console.log('filterString:', filterString);
+    })
+  );
+
+  const [showFilter, setShowFilter] = useState(false);
+
+  const filterString = useSignalValue(source.broadcasts.filterString);
+  const isFiltered = filterString !== '';
+
+  return (
+    <VPanel height="100%">
+      <HStack padding="8px" vAlign="center">
+        <Title>Cosmerinas</Title>
+        <Spacer />
+        <GlobalSearch dataSource={source} />
+        <Button onClick={() => setShowFilter(!showFilter)}>
+          Filter
+          {isFiltered ? <FilterTwoFilledIcon /> : null}
+        </Button>
+      </HStack>
+      <HStack height="flex">
+        {showFilter && (
+          <Box width="300px" enableResizeOnEnd height="100%" padding="4px">
+            <TableFilterPanel dataSource={source}>
+              <StringFieldFilter fieldName="name" label="Name (string)" />
+              <NumberFieldFilter fieldName="age" label="Age (number)" />
+              <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
+              <SelectFieldFilter
+                fieldName="isActive"
+                label="Active (select)"
+                options={[
+                  { label: 'Yes', value: true },
+                  { label: 'No', value: false },
+                ]}
+              />
+              <NumberRangeFieldFilter
+                fieldName="skillLevel"
+                label="Skill Level (number range)"
+              />
+              <MulitSelectFieldFilter
+                fieldName="occupation"
+                label="Occupation (multi select)"
+                options={[
+                  { label: 'Detective', value: 'Detective' },
+                  { label: 'Mistborn', value: 'Mistborn' },
+                  { label: 'Soother', value: 'Soother' },
+                  { label: 'Tin-eye', value: 'Tin-eye' },
+                  { label: 'Writer', value: 'Writer' },
+                  { label: 'Chef', value: 'Chef' },
+                  { label: 'Musician', value: 'Musician' },
+                  { label: 'Merchant', value: 'Merchant' },
+                  { label: 'King', value: 'King' },
+                  { label: 'Assassin', value: 'Assassin' },
+                  { label: 'Adventurer', value: 'Adventurer' },
+                  { label: 'Other', value: 'Other' },
+                ]}
+              />
+            </TableFilterPanel>
+          </Box>
+        )}
+        <Box width="100%" height="flex">
+          <Table dataSource={source} height="100%" width="flex">
+            <TableColumn heading="Name" fieldName="name" />
+            <TableColumn heading="Age" fieldName="age" canSort />
+            <TableColumn heading="Email" fieldName="email" width={200} />
+            <TableColumn heading="Skill Level" fieldName="skillLevel" />
+            <TableColumn heading="City" fieldName="city" />
+            <TableColumn
+              heading="Birthdate"
+              fieldName="birthdate"
+              render={(i: DataItem) => i.birthdate.toLocaleDateString()}
+            />
+            <TableColumn heading="Occupation" fieldName="occupation" />
+            <TableColumn heading="Active" fieldName="isActive" />
+          </Table>
+        </Box>
+      </HStack>
+      <HStack padding="8px">
+        <Box width="flex">
+          <code style={{ fontFamily: 'monospace' }}>{filterString}</code>
+        </Box>
+        <TablePager dataSource={source} />
+      </HStack>
+    </VPanel>
+  );
+}