@dxos/react-ui-table 0.4.10-main.0302e13 → 0.4.10-main.05dbd64

package/src/schema/schema.ts

@@ -0,0 +1,92 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as AST from '@effect/schema/AST';
+import type * as S from '@effect/schema/Schema';
+
+import { type ColumnType } from './types';
+
+export type ClassifiedColumnType = ColumnType | 'display';
+
+// TODO(burdon): Rename getX? and return typed array?
+export const classifySchemaProperties = (schema: S.Schema<any, any>): [string, ClassifiedColumnType][] => {
+  const recurse = (node: AST.AST, path: string[], acc: [string, ClassifiedColumnType][]) => {
+    const properties = AST.getPropertySignatures(node);
+    properties.forEach((prop) => {
+      const propName = prop.name.toString();
+
+      if (prop.isOptional) {
+        const unwrappedAst = unwrapOptionProperty(prop);
+        if (isStruct(unwrappedAst)) {
+          return recurse(unwrappedAst, [...path, propName], acc);
+        }
+      }
+
+      if (isStruct(prop.type)) {
+        recurse(prop.type, [...path, propName], acc);
+      } else {
+        acc.push([path.concat(propName).join('.'), propertyToColumn(prop)]);
+      }
+    });
+
+    return acc;
+  };
+
+  return recurse(schema.ast, [], []);
+};
+
+const isStruct = (node: AST.AST) => AST.isTypeLiteral(node);
+
+const isOptionalUnion = (prop: AST.PropertySignature) => AST.isUnion(prop.type) && prop.isOptional;
+
+const unwrapOptionProperty = (prop: AST.PropertySignature) => {
+  if (!isOptionalUnion(prop)) {
+    throw new Error(`Not an optional property: ${String(prop.name)}`);
+  }
+
+  if (!AST.isUnion(prop.type)) {
+    throw new Error(`Not a union type: ${String(prop.name)}`);
+  }
+
+  const [type, _undefinedCase] = prop.type.types;
+  return type;
+};
+
+const typeToColumn = (type: AST.AST): ClassifiedColumnType => {
+  if (AST.isStringKeyword(type)) {
+    return 'string';
+  } else if (AST.isNumberKeyword(type)) {
+    return 'number';
+  } else if (AST.isBooleanKeyword(type)) {
+    return 'boolean';
+  }
+
+  if (AST.isRefinement(type)) {
+    return typeToColumn(type.from);
+  }
+
+  // TODO(zan): How should we be thinking about transformations?
+  // - Which of these are we storing in the database?
+  // - For types that aren't the 'DateFromString' transformation, should we be using the 'from' or 'to' type?
+
+  if (AST.isTransform(type)) {
+    const identifier = AST.getIdentifierAnnotation(type);
+    if (identifier._tag === 'Some') {
+      if (identifier.value === 'DateFromString') {
+        return 'date';
+      }
+    }
+  }
+
+  return 'display';
+};
+
+const propertyToColumn = (prop: AST.PropertySignature): ClassifiedColumnType => {
+  let type = prop.type;
+  if (prop.isOptional) {
+    type = unwrapOptionProperty(prop);
+  }
+
+  return typeToColumn(type);
+};

package/src/schema/schemaToColumns.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ColumnDef } from '@tanstack/react-table';
+
+import type { S } from '@dxos/echo-schema';
+
+import { classifySchemaProperties } from './schema';
+import { createColumnBuilder } from '../helpers';
+
+export const schemaToColumnDefs = <T>(schema: S.Schema<T, any>): ColumnDef<T, any>[] => {
+  const { helper, builder } = createColumnBuilder<T>();
+
+  const classified = classifySchemaProperties(schema);
+  return classified.map(([name, type]) => {
+    const propertyKey = name.toString();
+
+    let column: Partial<ColumnDef<any, any>> | undefined;
+    switch (type) {
+      case 'string': {
+        column = builder.string({ label: propertyKey });
+        break;
+      }
+      case 'number': {
+        column = builder.number({ label: propertyKey });
+        break;
+      }
+      case 'boolean': {
+        column = builder.switch({ label: propertyKey });
+        break;
+      }
+      case 'date': {
+        column = builder.date({ label: propertyKey });
+        break;
+      }
+      case 'display': {
+        column = builder.display({ label: propertyKey, id: propertyKey });
+        break;
+      }
+      default: {
+        throw new Error(`Unhandled column type: ${type}`);
+      }
+    }
+
+    return helper.accessor(propertyKey as any, column);
+  });
+};

package/src/theme.ts

@@ -82,7 +82,7 @@ export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent, is
     canBeCurrent ? ghostSelectedCurrent : ghostSelected,
     canBeCurrent && focusRing,
     canBeCurrent && 'cursor-pointer rounded',
-    isPinned && 'sticky z-[20] bottom-[-1px] base-surface shadow-sm',
+    isPinned && 'sticky z-1 bottom-[-1px] base-surface',
     ...etc,
   );
 

package/dist/types/src/components/ColumnMenu.d.ts

@@ -1,13 +0,0 @@
-import { type HeaderContext, type RowData } from '@tanstack/react-table';
-import { type TableDef, type ColumnProps } from '../schema';
-export type ColumnMenuProps<TData extends RowData, TValue> = {
-    context: HeaderContext<TData, TValue>;
-    tableDefs: TableDef[];
-    tableDef: TableDef;
-    column: ColumnProps;
-    onUpdate?: (id: string, column: ColumnProps) => void;
-    onDelete?: (id: string) => void;
-};
-export declare const ColumnMenu: <TData extends unknown, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => JSX.Element;
-export declare const ColumnPanel: <TData extends unknown, TValue>({ context, tableDefs, tableDef, column, onUpdate, onDelete, }: ColumnMenuProps<TData, TValue>) => JSX.Element;
-//# sourceMappingURL=ColumnMenu.d.ts.map

package/dist/types/src/components/ColumnMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAQzE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAmB,MAAM,WAAW,CAAC;AAG7E,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM,IAAI;IAC3D,OAAO,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,sGAoBtB,CAAC;AAQF,eAAO,MAAM,WAAW,+IAkMvB,CAAC"}

package/dist/types/src/components/ColumnMenu.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnMenu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ColumnMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;;;;;;AAE7C,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;yBAiBR,GAAG;;;;CASd,CAAC"}

package/dist/types/src/components/SortButton.d.ts

@@ -1,8 +0,0 @@
-import { type SortDirection } from '@tanstack/react-table';
-type SortButtonProps = {
-    sortDirection: false | SortDirection;
-    onClick: (e: any) => void;
-};
-export declare const SortButton: ({ sortDirection, onClick }: SortButtonProps) => JSX.Element;
-export {};
-//# sourceMappingURL=SortButton.d.ts.map

package/dist/types/src/components/SortButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SortButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,eAAe,GAAG;IAAE,aAAa,EAAE,KAAK,GAAG,aAAa,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAAE,CAAC;AAE3F,eAAO,MAAM,UAAU,+BAAgC,eAAe,gBAoBrE,CAAC"}

package/dist/types/src/components/hooks/usePinLastRow.d.ts

@@ -1,3 +0,0 @@
-import { type Table } from '@tanstack/react-table';
-export declare const usePinLastRow: (pinLastRow: boolean | undefined, table: Table<any>, data: any, getScrollElement?: () => Element | null) => void;
-//# sourceMappingURL=usePinLastRow.d.ts.map

package/dist/types/src/components/hooks/usePinLastRow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"usePinLastRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/hooks/usePinLastRow.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAGnD,eAAO,MAAM,aAAa,eACZ,OAAO,GAAG,SAAS,SACxB,MAAM,GAAG,CAAC,QACX,GAAG,qBACU,MAAM,OAAO,GAAG,IAAI,SA+BxC,CAAC"}

package/dist/types/src/schema.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE1E,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/src/components/ColumnMenu.stories.tsx

@@ -1,46 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-
-import React from 'react';
-
-import { withTheme } from '@dxos/storybook-utils';
-
-import { ColumnMenu } from './ColumnMenu';
-import { type ColumnProps } from '../schema';
-
-export default {
-  title: 'react-ui-table/ColumnMenu',
-  component: ColumnMenu,
-  decorators: [withTheme],
-};
-
-export const Default = {
-  args: {
-    column: {
-      id: 'test',
-      label: 'test',
-    } as ColumnProps,
-    context: {
-      header: {
-        column: {
-          getCanSort: () => true,
-          getToggleSortingHandler: () => () => console.log('toggleSort'),
-          getIsSorted: () => false,
-        },
-      },
-    },
-  },
-  decorators: [
-    (Story: any) => (
-      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};

package/src/components/ColumnMenu.tsx

@@ -1,248 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Check, Trash, X, GearSix } from '@phosphor-icons/react';
-import { type HeaderContext, type RowData } from '@tanstack/react-table';
-import React, { type FC, type PropsWithChildren, useRef, useState } from 'react';
-
-import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
-import { safeParseInt } from '@dxos/util';
-
-import { SortButton } from './SortButton';
-import { type TableDef, type ColumnProps, type ColumnType } from '../schema';
-import { translationKey } from '../translations';
-
-export type ColumnMenuProps<TData extends RowData, TValue> = {
-  context: HeaderContext<TData, TValue>;
-  tableDefs: TableDef[];
-  tableDef: TableDef;
-  column: ColumnProps;
-  onUpdate?: (id: string, column: ColumnProps) => void;
-  onDelete?: (id: string) => void;
-};
-
-export const ColumnMenu = <TData extends RowData, TValue>({ column, ...props }: ColumnMenuProps<TData, TValue>) => {
-  const title = column.label?.length ? column.label : column.id;
-
-  const header = props.context.header;
-
-  const canSort = header.column.getCanSort();
-  const sortDirection = header.column.getIsSorted();
-  const toggleSort = header.column.getToggleSortingHandler();
-
-  return (
-    <div className='flex items-center gap-2'>
-      <div className='flex-1 min-is-0 truncate' title={title}>
-        {title}
-      </div>
-      <div className='flex gap-0'>
-        {canSort && toggleSort && <SortButton sortDirection={sortDirection} onClick={toggleSort} />}
-        <ColumnPanel {...props} column={column} />
-      </div>
-    </div>
-  );
-};
-
-const Section: FC<PropsWithChildren & { className?: string }> = ({ children, className }) => (
-  <div role='none' className={mx('p-2', className)}>
-    {children}
-  </div>
-);
-
-export const ColumnPanel = <TData extends RowData, TValue>({
-  context,
-  tableDefs,
-  tableDef,
-  column,
-  onUpdate,
-  onDelete,
-}: ColumnMenuProps<TData, TValue>) => {
-  const [open, setOpen] = useState(false);
-  const [prop, setProp] = useState(column.id);
-  const [refTable, setRefTable] = useState(column.refTable);
-  const [refProp, setRefProp] = useState(column.refProp);
-  const [type, setType] = useState(String(column.type));
-  const [label, setLabel] = useState(column.label);
-  const [digits, setDigits] = useState(String(column.digits ?? '0'));
-  const propRef = useRef<HTMLInputElement>(null);
-  const { t } = useTranslation(translationKey);
-
-  const handleCancel = () => {
-    setProp(column.id);
-    setOpen(false);
-  };
-
-  const handleSave = () => {
-    // Check valid.
-    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
-      propRef.current?.focus();
-      return;
-    }
-
-    // If already exists then check same type.
-    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-    if (current) {
-      // TODO(burdon): Allow multiple columns with different refProps. Ensure correct table prop is updated.
-      if (current.type !== 'ref' /* || current.ref !== refTable */) {
-        // TODO(burdon): Show error.
-        propRef.current?.focus();
-        return;
-      }
-    }
-
-    onUpdate?.(prop, {
-      id: prop, // TODO(burdon): Make unique.
-      prop,
-      label,
-      type: type as ColumnProps['type'],
-      refTable,
-      refProp,
-      digits: safeParseInt(digits),
-    });
-
-    setOpen(false);
-  };
-
-  return (
-    <Popover.Root open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
-      <Popover.Trigger asChild>
-        <Button variant='ghost'>
-          <GearSix className={mx(getSize(4), 'rotate-90')} />
-        </Button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content>
-          <Popover.Viewport classNames='w-60'>
-            <DensityProvider density='fine'>
-              <div className='flex flex-col gap-1'>
-                <Section>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1'>{t('column label label')}</Input.Label>
-                    <Input.TextInput
-                      placeholder='Column label'
-                      value={label ?? ''}
-                      onChange={(event) => setLabel(event.target.value)}
-                      autoFocus
-                    />
-                  </Input.Root>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>{t('property key label')}</Input.Label>
-                    <Input.TextInput
-                      ref={propRef}
-                      placeholder='Property key'
-                      // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
-                      value={prop ?? ''}
-                      onChange={(event) => setProp(event.target.value.replace(/[^\w_]/g, ''))}
-                    />
-                  </Input.Root>
-                  <Input.Root>
-                    <Input.Label classNames='mbe-1 mbs-3'>{t('column type label')}</Input.Label>
-                    <Select.Root value={type} onValueChange={setType}>
-                      <Select.TriggerButton placeholder='Type' classNames='is-full' />
-                      <Select.Portal>
-                        <Select.Content>
-                          <Select.Viewport>
-                            {(['number', 'boolean', 'string', 'ref'] as ColumnType[]).map((type) => (
-                              <Select.Option key={type} value={type}>
-                                {t(`${type} column type label`)}
-                              </Select.Option>
-                            ))}
-                          </Select.Viewport>
-                        </Select.Content>
-                      </Select.Portal>
-                    </Select.Root>
-                  </Input.Root>
-                </Section>
-
-                {type === 'number' && (
-                  <>
-                    <Section>
-                      <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>{t('digits label')}</Input.Label>
-                        {/* TODO(burdon): Constrain input to numbers. */}
-                        <Input.TextInput value={digits ?? ''} onChange={(event) => setDigits(event.target.value)} />
-                      </Input.Root>
-                    </Section>
-                  </>
-                )}
-
-                {/* TODO(burdon): Selectors on same line. */}
-                {type === 'ref' && (
-                  <>
-                    <Section>
-                      <Input.Root>
-                        <Input.Label classNames='mbe-1 mbs-3'>Table</Input.Label>
-                        <Select.Root value={refTable} onValueChange={setRefTable}>
-                          <Select.TriggerButton placeholder='Table' classNames='is-full' />
-                          <Select.Portal>
-                            <Select.Content>
-                              <Select.Viewport>
-                                {tableDefs
-                                  .filter((t) => t.id !== tableDef.id)
-                                  .map(({ id, name }) => (
-                                    <Select.Option key={id} value={id}>
-                                      {name ?? id}
-                                    </Select.Option>
-                                  ))}
-                              </Select.Viewport>
-                            </Select.Content>
-                          </Select.Portal>
-                        </Select.Root>
-                      </Input.Root>
-
-                      {refTable && (
-                        <Input.Root>
-                          <Input.Label classNames='mbe-1 mbs-3'>Table property</Input.Label>
-                          <Select.Root value={refProp} onValueChange={setRefProp}>
-                            <Select.TriggerButton placeholder='Property' classNames='is-full' />
-                            <Select.Portal>
-                              <Select.Content>
-                                <Select.Viewport>
-                                  {tableDefs
-                                    .find((tableDef) => tableDef.id === refTable)
-                                    ?.columns.map(({ id, label }) => (
-                                      <Select.Option key={id} value={id}>
-                                        {label ?? id}
-                                      </Select.Option>
-                                    ))}
-                                </Select.Viewport>
-                              </Select.Content>
-                            </Select.Portal>
-                          </Select.Root>
-                        </Input.Root>
-                      )}
-                    </Section>
-                  </>
-                )}
-
-                <Separator classNames='mli-2' />
-
-                <Section className='space-b-1.5'>
-                  {/* TODO(burdon): Style as DropdownMenuItem. */}
-                  <Button variant='primary' classNames='is-full flex gap-2' onClick={handleSave}>
-                    <span>{t('save label')}</span>
-                    <div className='grow' />
-                    <Check className={getSize(5)} />
-                  </Button>
-                  <Button classNames='is-full flex gap-2' onClick={handleCancel}>
-                    <span>{t('cancel label', { ns: 'os' })}</span>
-                    <div className='grow' />
-                    <X className={getSize(5)} />
-                  </Button>
-                  <Button classNames='is-full flex gap-2' onClick={() => onDelete?.(column.id)}>
-                    <span>{t('delete label')}</span>
-                    <div className='grow' />
-                    <Trash className={getSize(5)} />
-                  </Button>
-                </Section>
-              </div>
-            </DensityProvider>
-          </Popover.Viewport>
-          <Popover.Arrow />
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};

package/src/components/SortButton.tsx

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { CaretUpDown, SortAscending, SortDescending } from '@phosphor-icons/react';
-import { type SortDirection } from '@tanstack/react-table';
-import React, { type ReactElement } from 'react';
-
-import { Button } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
-
-type SortButtonProps = { sortDirection: false | SortDirection; onClick: (e: any) => void };
-
-export const SortButton = ({ sortDirection, onClick }: SortButtonProps) => {
-  let icon: ReactElement;
-  const size = getSize(4);
-
-  switch (sortDirection) {
-    case 'asc':
-      icon = <SortAscending className={size} />;
-      break;
-    case 'desc':
-      icon = <SortDescending className={size} />;
-      break;
-    default:
-      icon = <CaretUpDown className={size} />;
-  }
-
-  return (
-    <Button variant='ghost' onClick={onClick}>
-      {icon}
-    </Button>
-  );
-};

package/src/components/hooks/usePinLastRow.ts

@@ -1,43 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Table } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
-
-export const usePinLastRow = (
-  pinLastRow: boolean | undefined,
-  table: Table<any>,
-  data: any,
-  getScrollElement?: () => Element | null,
-) => {
-  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
-
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
-    }
-
-    const rows = table.getRowModel().rows;
-    const rowToPin = rows[rows.length - 1];
-    const rowId = rowToPin.id;
-
-    if (rowId === pinnedRowKey) {
-      return;
-    }
-
-    table.resetRowPinning();
-    rowToPin.pin('bottom');
-
-    const scrollElement = getScrollElement?.();
-    const isFirstRender = pinnedRowKey === undefined;
-
-    if (scrollElement && !isFirstRender) {
-      requestAnimationFrame(() => {
-        scrollElement.scrollTo({ top: scrollElement.scrollHeight });
-      });
-    }
-
-    setPinnedRowKey(rowId);
-  }, [pinLastRow, table, getScrollElement, pinnedRowKey, setPinnedRowKey, data]);
-};