@tcn/ui-transfer 1.0.0

package/dist/transfer_table.module-CI4PvlY3.js

@@ -0,0 +1,5 @@
+import './transfer_table.css';const e = "_tcn-transfer-table_22a0c1f", t = "_tcn-table-available-table_449024c", a = "_selected-item_1b75356", l = "_selected-item-new_f5e0db7", c = { "tcn-transfer-table": e, "tcn-table-available-table": t, "selected-item": a, "selected-item-new": l };
+export {
+  c as s
+};
+//# sourceMappingURL=transfer_table.module-CI4PvlY3.js.map

package/dist/transfer_table.module-CI4PvlY3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transfer_table.module-CI4PvlY3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@tcn/ui-transfer",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React transfer list and transfer table components",
+  "author": "TCN",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "access": "public",
+  "blackcatConfig": {
+    "storybook": {
+      "publish": true,
+      "title": "UI Transfer",
+      "port": 6400
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types",
+    "README.md",
+    "AI_USAGE.md",
+    "ai-docs",
+    "!ai-docs/*.local.md",
+    "tsconfig.json"
+  ],
+  "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": {
+    "clsx": "^2.1.1",
+    "@tcn/icons": "2.4.0",
+    "@tcn/ui-table": "4.0.0",
+    "@tcn/state": "1.3.4",
+    "@tcn/resource-store": "2.5.8"
+  },
+  "devDependencies": {
+    "@tcn/ui": "0.19.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tcn/ui": "^0.19.0",
+    "@tcn/ui-table": "^4.0.0"
+  },
+  "scripts": {
+    "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",
+    "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-blackcat-addon-built.sh && storybook dev",
+    "storybook:silent": "storybook dev --no-open --disable-telemetry --quiet",
+    "storybook:build": "storybook build"
+  }
+}

package/src/__stories__/available_list.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/react-vite';
+import React, { useState } from 'react';
+import { AvailableList } from '../components/index.js';
+import { VStack } from '@tcn/ui/stacks';
+
+const meta: Meta = {
+  title: 'Components/AvailableList',
+};
+export default meta;
+
+interface Fruit {
+  id: number;
+  name: string;
+}
+
+const initialItems: Fruit[] = [
+  { id: 1, name: 'Apple' },
+  { id: 2, name: 'Banana' },
+  { id: 3, name: 'Cherry' },
+  { id: 4, name: 'Date' },
+  { id: 5, name: 'Elderberry' },
+];
+
+export function Default() {
+  const [items, setItems] = useState(initialItems);
+
+  return (
+    <VStack hAlign="center">
+      <AvailableList
+        maxWidth={400}
+        items={items}
+        getItemKey={item => item.id}
+        renderItem={item => <span>{item.name}</span>}
+        onClickItem={item => {
+          alert(`Added: ${item.name}`);
+          setItems(prev => prev.filter(i => i.id !== item.id));
+        }}
+      />
+    </VStack>
+  );
+}

package/src/__stories__/sample_data.ts

@@ -0,0 +1,101 @@
+import {
+  StaticDataSource,
+  StaticNumberField,
+  StaticStringField,
+} from '@tcn/resource-store';
+import { TableColumnProps } from '@tcn/ui-table';
+
+export enum UserType {
+  AccountOwner = 'Account Owner',
+  Manager = 'Manager',
+  Agent = 'Agent',
+}
+
+export interface ExampleItem {
+  name: string;
+  userType: UserType;
+  permissionGroup: string;
+  huntGroup: number;
+  profileGroup: string;
+  skills: string;
+  labels: string;
+}
+
+export const mockData: ExampleItem[] = [
+  {
+    name: 'John Doe',
+    userType: UserType.AccountOwner,
+    permissionGroup: 'Permission Group 1',
+    huntGroup: 1,
+    profileGroup: 'Profile Group 1',
+    skills: 'Skill 1, Skill 2, Skill 3',
+    labels: 'Label 1, Label 2, Label 3',
+  },
+  {
+    name: 'Jane Smith',
+    userType: UserType.Manager,
+    permissionGroup: 'Permission Group 2',
+    huntGroup: 2,
+    profileGroup: 'Profile Group 2',
+    skills: 'Skill 4, Skill 5, Skill 6',
+    labels: 'Label 4, Label 5, Label 6',
+  },
+  {
+    name: 'Jim Beam',
+    userType: UserType.Agent,
+    permissionGroup: 'Permission Group 3',
+    huntGroup: 3,
+    profileGroup: 'Profile Group 3',
+    skills: 'Skill 7, Skill 8, Skill 9',
+    labels: 'Label 7, Label 8, Label 9',
+  },
+  {
+    name: 'Jane Doe',
+    userType: UserType.AccountOwner,
+    permissionGroup: 'Permission Group 1',
+    huntGroup: 1,
+    profileGroup: 'Profile Group 1',
+    skills: 'Skill 1, Skill 2, Skill 3',
+    labels: 'Label 1, Label 2, Label 3',
+  },
+  {
+    name: 'Bob Johnson',
+    userType: UserType.Manager,
+    permissionGroup: 'Permission Group 2',
+    huntGroup: 4,
+    profileGroup: 'Profile Group 2',
+    skills: 'Skill 10, Skill 11',
+    labels: 'Label 10',
+  },
+  {
+    name: 'Alice Williams',
+    userType: UserType.Agent,
+    permissionGroup: 'Permission Group 3',
+    huntGroup: 5,
+    profileGroup: 'Profile Group 3',
+    skills: 'Skill 12, Skill 13, Skill 14',
+    labels: 'Label 11, Label 12',
+  },
+];
+
+export function createMockDataSource(items: ExampleItem[]) {
+  return new StaticDataSource<ExampleItem>(items, [
+    new StaticStringField('name', i => i.name),
+    new StaticStringField('userType', i => i.userType),
+    new StaticStringField('permissionGroup', i => i.permissionGroup),
+    new StaticNumberField('huntGroup', i => i.huntGroup),
+    new StaticStringField('profileGroup', i => i.profileGroup),
+    new StaticStringField('skills', i => i.skills),
+    new StaticStringField('labels', i => i.labels),
+  ]);
+}
+
+export const mockDataColumns: TableColumnProps<ExampleItem>[] = [
+  { heading: 'Name', fieldName: 'name', canSort: true },
+  { heading: 'User Type', fieldName: 'userType', canSort: true },
+  { heading: 'Permission Group', fieldName: 'permissionGroup', canSort: true },
+  { heading: 'Hunt Group', fieldName: 'huntGroup', canSort: true },
+  { heading: 'Profile Group', fieldName: 'profileGroup', canSort: true },
+  { heading: 'Skills', fieldName: 'skills', canSort: true },
+  { heading: 'Labels', fieldName: 'labels', canSort: true },
+];

package/src/__stories__/selected_list.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/react-vite';
+import React, { useState } from 'react';
+import { SelectedList } from '../components/index.js';
+import { VStack } from '@tcn/ui/stacks';
+
+const meta: Meta = {
+  title: 'Components/SelectedList',
+};
+export default meta;
+
+interface Fruit {
+  id: number;
+  name: string;
+}
+
+const initialItems: Fruit[] = [
+  { id: 1, name: 'Apple' },
+  { id: 2, name: 'Banana' },
+  { id: 3, name: 'Cherry' },
+  { id: 4, name: 'Date' },
+  { id: 5, name: 'Elderberry' },
+];
+
+export function Default() {
+  const [items, setItems] = useState(initialItems);
+
+  return (
+    <VStack hAlign="center">
+      <SelectedList
+        maxWidth={400}
+        items={items}
+        getItemKey={item => item.id}
+        renderItem={item => <span>{item.name}</span>}
+        onClickItem={item => {
+          alert(`Removed: ${item.name}`);
+          setItems(prev => prev.filter(i => i.id !== item.id));
+        }}
+      />
+    </VStack>
+  );
+}

package/src/__stories__/transfer_list.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { TransferList } from '../transfer_list/index.js';
+
+const meta: Meta<typeof TransferList> = {
+  title: 'Components/TransferList',
+  component: TransferList,
+};
+
+export default meta;
+type Story = StoryObj<typeof TransferList>;
+
+export const Default: Story = {};

package/src/__stories__/transfer_table.stories.tsx

@@ -0,0 +1,128 @@
+import { Meta } from '@storybook/react-vite';
+import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
+import { StringFieldFilter } from '@tcn/ui-table';
+import { Button } from '@tcn/ui/actions';
+import { Header, Scaffold } from '@tcn/ui/layouts';
+import { ZStack } from '@tcn/ui/stacks';
+import { Panel } from '@tcn/ui/surfaces';
+import { Title } from '@tcn/ui/typography';
+import React, { useState } from 'react';
+import { TransferTable } from '../transfer_table/transfer_table.js';
+import { TransferTablePresenter } from '../transfer_table/transfer_table_presenter.js';
+import {
+  type ExampleItem,
+  createMockDataSource,
+  mockData,
+  mockDataColumns,
+} from './sample_data.js';
+
+const meta: Meta = {
+  title: 'Components/TransferTable',
+};
+export default meta;
+
+const StoryWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ZStack maxHeight="800px" padding="24px">
+      {children}
+    </ZStack>
+  );
+};
+
+export function Default() {
+  const [presenter] = useState(
+    () =>
+      new TransferTablePresenter<ExampleItem>({
+        dataSource: createMockDataSource(mockData),
+        columns: mockDataColumns,
+        getItemKey: item => item.name,
+        selectedItemRender: item => <div>{item.name}</div>,
+        onClickCancel: () => alert('Cancel'),
+        onClickAdd: items => alert(`Add ${items.length} item(s)`),
+      })
+  );
+
+  return (
+    <StoryWrapper>
+      <TransferTable {...presenter.getProps()} />
+    </StoryWrapper>
+  );
+}
+
+export function WithFilterPanel() {
+  const [presenter] = useState(
+    () =>
+      new TransferTablePresenter<ExampleItem>({
+        dataSource: createMockDataSource(mockData),
+        columns: mockDataColumns,
+        getItemKey: item => item.name,
+        selectedItemRender: item => <div>{item.name}</div>,
+        filterChildren: [
+          <StringFieldFilter key="name" fieldName="name" label="Name" />,
+          <StringFieldFilter key="skills" fieldName="skills" label="Skills" />,
+        ],
+        onClickCancel: () => alert('Cancel'),
+        onClickAdd: items => alert(`Add ${items.length} item(s)`),
+      })
+  );
+
+  return (
+    <StoryWrapper>
+      <TransferTable {...presenter.getProps()} />
+    </StoryWrapper>
+  );
+}
+
+export function InPanel() {
+  const [presenter] = useState(
+    () =>
+      new TransferTablePresenter<ExampleItem>({
+        dataSource: createMockDataSource(mockData),
+        columns: mockDataColumns,
+        getItemKey: item => item.name,
+        selectedItemRender: item => <div>{item.name}</div>,
+        filterChildren: [
+          <StringFieldFilter key="name" fieldName="name" label="Name" />,
+          <StringFieldFilter key="skills" fieldName="skills" label="Skills" />,
+        ],
+        onClickCancel: () => alert('Cancel'),
+        onClickAdd: items => alert(`Add ${items.length} item(s)`),
+      })
+  );
+
+  return (
+    <StoryWrapper>
+      <Panel>
+        <Header>
+          <Button utility hierarchy="tertiary" onClick={() => alert('Back')}>
+            <ChevronLeftIcon />
+          </Button>
+          <Title>Entity Settings</Title>
+        </Header>
+        <Scaffold>
+          <TransferTable {...presenter.getProps()} />
+        </Scaffold>
+      </Panel>
+    </StoryWrapper>
+  );
+}
+
+export function Empty() {
+  const [presenter] = useState(
+    () =>
+      new TransferTablePresenter<ExampleItem>({
+        dataSource: createMockDataSource([]),
+        columns: mockDataColumns,
+        getItemKey: item => item.name,
+        selectedItemRender: item => <div>{item.name}</div>,
+        onClickCancel: () => alert('Cancel'),
+        onClickAdd: items => alert(`Add ${items.length} item(s)`),
+      })
+  );
+
+  return (
+    <StoryWrapper>
+      <TransferTable {...presenter.getProps()} />
+    </StoryWrapper>
+  );
+}

package/src/__tests__/sanity.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sanity', () => {
+  it('works', () => {
+    expect(true).toBe(true);
+  });
+});

package/src/components/available_list/available_list.tsx

@@ -0,0 +1,39 @@
+import { List, type ListProps } from '@tcn/ui/layouts';
+import { clsx } from 'clsx';
+import React from 'react';
+import { AddableItem } from '../manage_list_item/index.js';
+
+export interface AvailableListOwnProps<T> {
+  items: T[];
+  getItemKey: (item: T) => string | number;
+  renderItem: (item: T) => React.ReactNode;
+  onClickItem: (item: T) => void;
+}
+
+export type AvailableListProps<T> = AvailableListOwnProps<T> & ListProps;
+
+function AvailableListInner<T>(
+  {
+    items,
+    getItemKey,
+    renderItem,
+    onClickItem,
+    className,
+    ...props
+  }: AvailableListProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <List ref={ref} className={clsx('tcn-available-list', className)} {...props}>
+      {items.map(item => (
+        <AddableItem key={getItemKey(item)} item={item} onClickItem={onClickItem}>
+          {renderItem(item)}
+        </AddableItem>
+      ))}
+    </List>
+  );
+}
+
+export const AvailableList = React.forwardRef(AvailableListInner) as <T>(
+  props: AvailableListProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;

package/src/components/available_list/index.ts

@@ -0,0 +1,5 @@
+export {
+  AvailableList,
+  type AvailableListOwnProps,
+  type AvailableListProps,
+} from './available_list.js';

package/src/components/index.ts

@@ -0,0 +1,19 @@
+export {
+  ManageListItem,
+  type ManageListItemOwnProps,
+  type ManageListItemProps,
+  RemovableItem,
+  type RemovableItemProps,
+  AddableItem,
+  type AddableItemProps,
+} from './manage_list_item/index.js';
+export {
+  SelectedList,
+  type SelectedListOwnProps,
+  type SelectedListProps,
+} from './selected_list/index.js';
+export {
+  AvailableList,
+  type AvailableListOwnProps,
+  type AvailableListProps,
+} from './available_list/index.js';

package/src/components/manage_list_item/addable_item.tsx

@@ -0,0 +1,22 @@
+import { ArrowRightIcon } from '@tcn/icons/arrow_right_icon.js';
+import React from 'react';
+import { ManageListItem, type ManageListItemProps } from './manage_list_item.js';
+
+export type AddableItemProps<T> = ManageListItemProps<T>;
+
+function AddableItemInner<T>(
+  { endAdornment, ...props }: AddableItemProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <ManageListItem
+      ref={ref}
+      endAdornment={endAdornment ?? <ArrowRightIcon />}
+      {...props}
+    />
+  );
+}
+
+export const AddableItem = React.forwardRef(AddableItemInner) as <T>(
+  props: AddableItemProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;

package/src/components/manage_list_item/index.ts

@@ -0,0 +1,7 @@
+export {
+  ManageListItem,
+  type ManageListItemOwnProps,
+  type ManageListItemProps,
+} from './manage_list_item.js';
+export { RemovableItem, type RemovableItemProps } from './removable_item.js';
+export { AddableItem, type AddableItemProps } from './addable_item.js';

package/src/components/manage_list_item/manage_list_item.tsx

@@ -0,0 +1,43 @@
+import { Item, type ItemProps } from '@tcn/ui/layouts';
+import { Spacer } from '@tcn/ui/stacks';
+import { clsx } from 'clsx';
+import React from 'react';
+
+export interface ManageListItemOwnProps<T> {
+  item: T;
+  children: React.ReactNode;
+  onClickItem: (item: T) => void;
+  endAdornment?: React.ReactNode;
+}
+
+export type ManageListItemProps<T> = ManageListItemOwnProps<T> &
+  Omit<ItemProps, 'children'>;
+
+function ManageListItemInner<T>(
+  {
+    item,
+    children,
+    onClickItem,
+    endAdornment,
+    className,
+    ...props
+  }: ManageListItemProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Item
+      ref={ref}
+      className={clsx('tcn-manage-list-item', className)}
+      onClick={() => onClickItem(item)}
+      {...props}
+    >
+      {children}
+      <Spacer />
+      {endAdornment}
+    </Item>
+  );
+}
+
+export const ManageListItem = React.forwardRef(ManageListItemInner) as <T>(
+  props: ManageListItemProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;

package/src/components/manage_list_item/removable_item.module.css

@@ -0,0 +1,3 @@
+.removable-item :global(.tcn-icon:last-child) {
+  color: var(--status-color-error);
+}

package/src/components/manage_list_item/removable_item.tsx

@@ -0,0 +1,25 @@
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { clsx } from 'clsx';
+import React from 'react';
+import { ManageListItem, type ManageListItemProps } from './manage_list_item.js';
+import styles from './removable_item.module.css';
+
+export type RemovableItemProps<T> = ManageListItemProps<T>;
+
+function RemovableItemInner<T>(
+  { endAdornment, className, ...props }: RemovableItemProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <ManageListItem
+      ref={ref}
+      className={clsx(styles['removable-item'], className)}
+      endAdornment={endAdornment ?? <CrossCircleIcon />}
+      {...props}
+    />
+  );
+}
+
+export const RemovableItem = React.forwardRef(RemovableItemInner) as <T>(
+  props: RemovableItemProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;

package/src/components/selected_list/index.ts

@@ -0,0 +1,5 @@
+export {
+  SelectedList,
+  type SelectedListOwnProps,
+  type SelectedListProps,
+} from './selected_list.js';

package/src/components/selected_list/selected_list.tsx

@@ -0,0 +1,50 @@
+import { List, type ListProps } from '@tcn/ui/layouts';
+import { clsx } from 'clsx';
+import React from 'react';
+import { RemovableItem } from '../manage_list_item/index.js';
+
+export interface SelectedListOwnProps<T> {
+  items: T[];
+  getItemKey: (item: T) => string | number;
+  renderItem: (item: T) => React.ReactNode;
+  onClickItem: (item: T) => void;
+  /** Override the default RemovableItem rendering per item. Receives the item and its rendered content. */
+  renderListItem?: (item: T, content: React.ReactNode) => React.ReactElement;
+}
+
+export type SelectedListProps<T> = SelectedListOwnProps<T> & ListProps;
+
+function SelectedListInner<T>(
+  {
+    items,
+    getItemKey,
+    renderItem,
+    onClickItem,
+    renderListItem,
+    className,
+    ...props
+  }: SelectedListProps<T>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <List ref={ref} className={clsx('tcn-selected-list', className)} {...props}>
+      {items.map(item => {
+        const content = renderItem(item);
+        if (renderListItem) {
+          return React.cloneElement(renderListItem(item, content), {
+            key: getItemKey(item),
+          });
+        }
+        return (
+          <RemovableItem key={getItemKey(item)} item={item} onClickItem={onClickItem}>
+            {content}
+          </RemovableItem>
+        );
+      })}
+    </List>
+  );
+}
+
+export const SelectedList = React.forwardRef(SelectedListInner) as <T>(
+  props: SelectedListProps<T> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement | null;

package/src/index.ts

@@ -0,0 +1,22 @@
+export {
+  ManageListItem,
+  type ManageListItemOwnProps,
+  type ManageListItemProps,
+  RemovableItem,
+  type RemovableItemProps,
+  AddableItem,
+  type AddableItemProps,
+  SelectedList,
+  type SelectedListOwnProps,
+  type SelectedListProps,
+  AvailableList,
+  type AvailableListOwnProps,
+  type AvailableListProps,
+} from './components/index.js';
+export { TransferList, type TransferListProps } from './transfer_list/index.js';
+export {
+  TransferTable,
+  TransferTablePresenter,
+  type SelectedItemsUpdate,
+  type TransferTableProps,
+} from './transfer_table/index.js';