@tcn/ui-transfer 1.0.0

package/src/transfer_table/types.ts

@@ -0,0 +1,35 @@
+import { DataSource } from '@tcn/resource-store';
+import { IBroadcast } from '@tcn/state';
+import { FieldFilterProps, TableColumnProps } from '@tcn/ui-table';
+import { ReactElement } from 'react';
+
+export interface SelectedItemsUpdate<T> {
+  selectedItems: T[];
+  /** When true, newly appearing items will flash to indicate they were added. */
+  highlight: boolean;
+}
+
+export interface TransferTableProps<T> {
+  // available table props
+  dataSource: DataSource<T>;
+  columns: TableColumnProps<T>[];
+  onClickMoveAll: () => void;
+  onClickMove: (item: T) => void;
+  // selected list props
+  selectedItemsBroadcast: IBroadcast<SelectedItemsUpdate<T>>;
+  /**
+   * Derives a unique, stable identifier from the item (e.g. an id or name).
+   * Must be unique across all items and consistent on every call — do not use randomly generated values.
+   */
+  getSelectedItemKey: (item: T) => string | number;
+  selectedItemRender: (item: T) => React.ReactNode;
+  onRemoveAll: (items: T[]) => void;
+  onRemove: (item: T) => void;
+  // filter panel props
+  filterPanelIsOpenBroadcast: IBroadcast<boolean>;
+  filterChildren?: ReactElement<FieldFilterProps> | ReactElement<FieldFilterProps>[];
+  // filter header props
+  onClickFilterPanelToggle: () => void;
+  onClickCancel: () => void;
+  onClickAdd: (items: T[]) => void;
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "."
+  },
+  "include": ["src/**/*", ".storybook/**/*", "types/**/*", "package.json"]
+}

package/types/file_types.d.ts

@@ -0,0 +1,106 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css?url' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.css?raw' {
+  const url: string;
+  export default url;
+}
+
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.pdf' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.wasm' {
+  const content: any;
+  export default content;
+}
+
+declare module '*.prql' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.wav' {
+  const content: string;
+  export default content;
+}
+
+/**
+ * Stub declarations for react-color.
+ * @tcn/ui's color_input imports from react-color but the package ships no types.
+ * @types/react-color exists but doesn't include ColorState which @tcn/ui uses.
+ *
+ * TODO: fix @tcn/ui to use ColorResult instead of ColorState, then add
+ * @types/react-color as a dependency of @tcn/ui and remove this stub.
+ */
+declare module 'react-color' {
+  import type { ComponentType, ChangeEvent } from 'react';
+
+  export interface HSLColor {
+    a?: number;
+    h: number;
+    l: number;
+    s: number;
+  }
+
+  export interface RGBColor {
+    a?: number;
+    b: number;
+    g: number;
+    r: number;
+  }
+
+  export type Color = string | HSLColor | RGBColor;
+
+  export interface ColorResult {
+    hex: string;
+    hsl: HSLColor;
+    rgb: RGBColor;
+  }
+
+  /** @deprecated @tcn/ui uses this but it should be ColorResult */
+  export type ColorState = ColorResult;
+
+  export type ColorChangeHandler = (
+    color: ColorResult,
+    event: ChangeEvent<HTMLInputElement>
+  ) => void;
+
+  interface CommonPickerProps {
+    color?: Color;
+    onChange?: ColorChangeHandler;
+    onChangeComplete?: ColorChangeHandler;
+  }
+
+  export const ChromePicker: ComponentType<
+    CommonPickerProps & { disableAlpha?: boolean; className?: string }
+  >;
+}