@dxos/react-ui-table 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

package/src/util/table-buttons.ts

@@ -2,20 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell';
+export type TableButton = 'columnSettings' | 'rowMenu' | 'newColumn' | 'referencedCell' | 'sort';
 
 export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
   columnSettings: 'data-table-column-settings-button',
   newColumn: 'data-table-new-column-button',
   referencedCell: 'data-table-ref-cell-button',
   rowMenu: 'data-table-row-menu-button',
+  sort: 'data-table-sort-button',
 } as const;
 
 type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
   | { type: 'referencedCell'; schemaId: string; targetId: string }
-  | { type: 'rowMenu'; rowIndex: number };
+  | { type: 'rowMenu'; rowIndex: number }
+  | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
 const createButton = ({
   attr,
@@ -23,18 +25,21 @@ const createButton = ({
   disabled = false,
   icon,
   testId,
+  type = 'primary',
 }: {
   attr: string;
   data: Record<string, string>;
   disabled?: boolean;
   icon: string;
   testId: string;
+  type?: 'primary' | 'secondary';
 }) => {
   const dataAttrs = Object.entries(data)
     .map(([k, v]) => `${k}="${v}"`)
     .join(' ');
 
-  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  const positionClass = type === 'primary' ? 'inline-end-2' : 'inline-end-9';
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? 'disabled' : ''}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 
 const addColumnButton = {
@@ -111,9 +116,34 @@ const rowMenuButton = {
   }),
 } as const;
 
+const sortButton = {
+  attr: BUTTON_IDENTIFIERS.sort,
+  icon: 'ph--sort-ascending--regular',
+  render: ({ fieldId, direction }: Omit<Extract<ButtonData, { type: 'sort' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.sort,
+      icon: direction === 'desc' ? 'ph--sort-descending--regular' : 'ph--sort-ascending--regular',
+      data: {
+        'data-field-id': fieldId,
+        'data-direction': direction ?? '',
+      },
+      testId: 'table-sort-button',
+      // TODO(ZaymonFC): All buttons should be rendered into an absolutely positioned flex container.
+      // This is a bit hacky.
+      type: 'secondary',
+    });
+  },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'sort' }> => ({
+    type: 'sort',
+    fieldId: el.getAttribute('data-field-id')!,
+    direction: el.getAttribute('data-direction') as 'asc' | 'desc' | undefined,
+  }),
+} as const;
+
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
+  sort: sortButton,
 } as const;

package/src/util/table-controls.ts

@@ -23,8 +23,8 @@ export const CONTROL_IDENTIFIERS = {
 } as const;
 
 const BASE_CLASSES = {
-  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox',
-  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch',
+  checkbox: 'absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox',
+  switch: 'absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch',
 } as const;
 
 const renderAttributes = (data: Record<string, string>) => {

package/src/util/table.ts

@@ -13,10 +13,9 @@ import {
   TypedObject,
   TypeEnum,
 } from '@dxos/echo-schema';
-import { log } from '@dxos/log';
 import { PublicKey } from '@dxos/react-client';
 import { create, makeRef, type Space } from '@dxos/react-client/echo';
-import { createFieldId, createView, ViewProjection } from '@dxos/schema';
+import { createFieldId, createView, getSchemaProperties, ViewProjection } from '@dxos/schema';
 
 import { type TableType } from '../types';
 
@@ -24,70 +23,97 @@ type InitialiseTableProps = {
   space: Space;
   table: TableType;
   initialRow?: boolean;
+  initialSchema?: string;
 };
 
+// TODO(ZaymonFC): Clean up the branching in this file.
+
 // TODO(burdon): Pass in type.
 // TODO(burdon): User should determine typename.
 export const initializeTable = async ({
   space,
   table,
   initialRow = true,
+  initialSchema,
 }: InitialiseTableProps): Promise<EchoSchema> => {
-  log('initializeTable', { table });
+  if (initialSchema) {
+    const schema = await space.db.schemaRegistry.query({ typename: initialSchema }).firstOrUndefined();
 
-  const ContactSchema = TypedObject({
-    typename: `example.com/type/${PublicKey.random().truncate()}`,
-    version: '0.1.0',
-  })({
-    name: S.optional(S.String).annotations({
-      [AST.TitleAnnotationId]: 'Name',
-    }),
-    active: S.optional(S.Boolean),
-    email: S.optional(Format.Email),
-    salary: S.optional(Format.Currency()).annotations({
-      [AST.TitleAnnotationId]: 'Salary',
-    }), // TODO(burdon): Should default to prop name?
-  });
+    if (!schema) {
+      throw new Error(`Schema not found: ${initialSchema}`);
+    }
 
-  const [contactSchema] = await space.db.schemaRegistry.register([ContactSchema]);
+    // We need to get the schema properties here. For now, only simple types and refs, not compound types
+    // are going to be supported.
+    const fields = getSchemaProperties(schema.ast)
+      .filter((prop) => prop.type !== 'object' || prop.format === FormatEnum.Ref)
+      .map((prop) => prop.name);
 
-  table.view = makeRef(
-    createView({
-      name: 'Test',
-      typename: contactSchema.typename,
-      jsonSchema: contactSchema.jsonSchema,
-      fields: ['name', 'active', 'email', 'salary'],
-    }),
-  );
+    table.view = makeRef(
+      createView({
+        // TODO(ZaymonFC): Don't hardcode name?
+        name: 'View',
+        typename: schema.typename,
+        jsonSchema: schema.jsonSchema,
+        fields,
+      }),
+    );
 
-  const projection = new ViewProjection(contactSchema, table.view.target!);
-  projection.setFieldProjection({
-    field: {
-      id: table.view.target!.fields.find((f) => f.path === 'salary')!.id,
-      path: 'salary' as JsonPath,
-      size: 150,
-    },
-  });
+    return schema;
+  } else {
+    const ContactSchema = TypedObject({
+      typename: `example.com/type/${PublicKey.random().truncate()}`,
+      version: '0.1.0',
+    })({
+      name: S.optional(S.String).annotations({
+        [AST.TitleAnnotationId]: 'Name',
+      }),
+      active: S.optional(S.Boolean),
+      email: S.optional(Format.Email),
+      salary: S.optional(Format.Currency()).annotations({
+        [AST.TitleAnnotationId]: 'Salary',
+      }), // TODO(burdon): Should default to prop name?
+    });
 
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: 'manager' as JsonPath,
-      referencePath: 'name' as JsonPath,
-    },
-    props: {
-      property: 'manager' as JsonProp,
-      type: TypeEnum.Ref,
-      format: FormatEnum.Ref,
-      referenceSchema: contactSchema.typename,
-      title: 'Manager',
-    },
-  });
+    const [contactSchema] = await space.db.schemaRegistry.register([ContactSchema]);
 
-  if (initialRow) {
-    // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-    space.db.add(create(contactSchema, {}));
-  }
+    table.view = makeRef(
+      createView({
+        name: 'View',
+        typename: contactSchema.typename,
+        jsonSchema: contactSchema.jsonSchema,
+        fields: ['name', 'active', 'email', 'salary'],
+      }),
+    );
+
+    const projection = new ViewProjection(contactSchema, table.view.target!);
+    projection.setFieldProjection({
+      field: {
+        id: table.view.target!.fields.find((f) => f.path === 'salary')!.id,
+        path: 'salary' as JsonPath,
+        size: 150,
+      },
+    });
 
-  return contactSchema;
+    projection.setFieldProjection({
+      field: {
+        id: createFieldId(),
+        path: 'manager' as JsonPath,
+        referencePath: 'name' as JsonPath,
+      },
+      props: {
+        property: 'manager' as JsonProp,
+        type: TypeEnum.Ref,
+        format: FormatEnum.Ref,
+        referenceSchema: contactSchema.typename,
+        title: 'Manager',
+      },
+    });
+    if (initialRow) {
+      // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
+      space.db.add(create(contactSchema, {}));
+    }
+
+    return contactSchema;
+  }
 };

package/dist/lib/node/chunk-YSBXNBDJ.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Ref, ObjectId, S, TypedObject } from '@dxos/echo-schema';\nimport { ThreadType } from '@dxos/plugin-space';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = S.Struct({\n  id: ObjectId, // TODO(burdon): Where should this be?\n  name: S.optional(S.String),\n  view: S.optional(Ref(ViewType)),\n  // TODO(burdon): Should not import from plugin. Either factor out type or use reverse deps when supported.\n  threads: S.optional(S.Array(Ref(ThreadType))),\n});\n\n// type TableType = S.Schema.Type<typeof TableSchema>;\n\nexport class TableType extends TypedObject({\n  typename: 'dxos.org/type/Table',\n  version: '0.1.0',\n})(TableSchema.fields) {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAA8C;AAC9C,0BAA2B;AAC3B,oBAAyB;AAElB,IAAMA,cAAcC,qBAAEC,OAAO;EAClCC,IAAIC;EACJC,MAAMJ,qBAAEK,SAASL,qBAAEM,MAAM;EACzBC,MAAMP,qBAAEK,aAASG,wBAAIC,sBAAAA,CAAAA;;EAErBC,SAASV,qBAAEK,SAASL,qBAAEW,UAAMH,wBAAII,8BAAAA,CAAAA,CAAAA;AAClC,CAAA;AAIO,IAAMC,YAAN,kBAAwBC,gCAAY;EACzCC,UAAU;EACVC,SAAS;AACX,CAAA,EAAGjB,YAAYkB,MAAM,EAAA;AAAG;",
-  "names": ["TableSchema", "S", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "ThreadType", "TableType", "TypedObject", "typename", "version", "fields"]
-}

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

@@ -1,21 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type ToolbarAction = {
-    type: 'add-row';
-} | {
-    type: 'comment';
-};
-export type ToolbarActionType = ToolbarAction['type'];
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
-export type ToolbarProps = ThemedClassName<PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
-}>>;
-declare const useToolbarContext: (consumerName: string) => ToolbarProps;
-export declare const Toolbar: {
-    Root: ({ classNames, children, onAction }: ToolbarProps) => React.JSX.Element;
-    Editing: () => React.JSX.Element;
-    Actions: () => React.JSX.Element;
-    Separator: () => React.JSX.Element;
-};
-export { useToolbarContext };
-//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAA6B,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAUjG,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG,eAAe,CACxC,iBAAiB,CAAC;IAChB,QAAQ,CAAC,EAAE,oBAAoB,CAAC;CACjC,CAAC,CACH,CAAC;AAEF,QAAA,MAA+B,iBAAiB,wCAA0C,CAAC;AAkD3F,eAAO,MAAM,OAAO;+CAhDqC,YAAY;;;;CAqDpE,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/types/src/components/Toolbar/common.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { type IconProps, type ToolbarButtonProps as NaturalToolbarButtonProps, type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps } from '@dxos/react-ui';
-export declare const buttonStyles = "min-bs-0 p-2";
-export declare const tooltipProps: {
-    side: "top";
-    classNames: string;
-};
-export declare const ToolbarSeparator: () => React.JSX.Element;
-type ToolbarButtonProps = NaturalToolbarButtonProps & Pick<IconProps, 'icon'>;
-export declare const ToolbarButton: ({ icon, children, ...props }: ToolbarButtonProps) => React.JSX.Element;
-export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & Pick<IconProps, 'icon'>;
-export declare const ToolbarToggleButton: ({ icon, children, ...props }: ToolbarToggleButtonProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=common.d.ts.map

package/dist/types/src/components/Toolbar/common.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/common.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,KAAK,SAAS,EAGd,KAAK,kBAAkB,IAAI,yBAAyB,EACpD,KAAK,2BAA2B,IAAI,kCAAkC,EACvE,MAAM,gBAAgB,CAAC;AAIxB,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAC3C,eAAO,MAAM,YAAY;;;CAA+C,CAAC;AAEzE,eAAO,MAAM,gBAAgB,yBAAkD,CAAC;AAMhF,KAAK,kBAAkB,GAAG,yBAAyB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9E,eAAO,MAAM,aAAa,iCAAkC,kBAAkB,sBAiB7E,CAAC;AAMF,MAAM,MAAM,wBAAwB,GAAG,kCAAkC,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEpG,eAAO,MAAM,mBAAmB,iCAAkC,wBAAwB,sBAiBzF,CAAC"}

package/dist/types/src/components/Toolbar/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Toolbar';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Toolbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/src/components/Toolbar/Toolbar.tsx

@@ -1,87 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren } from 'react';
-
-import { Toolbar as NaturalToolbar, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-
-import { ToolbarButton, ToolbarSeparator } from './common';
-import { translationKey } from '../../translations';
-
-//
-// Root
-//
-
-// TODO(Zan): This should become a union later.
-export type ToolbarAction = { type: 'add-row' } | { type: 'comment' };
-
-export type ToolbarActionType = ToolbarAction['type'];
-
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
-
-export type ToolbarProps = ThemedClassName<
-  PropsWithChildren<{
-    onAction?: ToolbarActionHandler;
-  }>
->;
-
-const [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');
-
-const ToolbarRoot = ({ classNames, children, onAction }: ToolbarProps) => {
-  return (
-    <ToolbarContextProvider onAction={onAction}>
-      <NaturalToolbar.Root
-        classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface', classNames]}
-      >
-        {children}
-      </NaturalToolbar.Root>
-    </ToolbarContextProvider>
-  );
-};
-
-const Editing = () => {
-  const { onAction } = useToolbarContext('Editing');
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <>
-      <ToolbarButton
-        value='add-row'
-        icon='ph--plus--regular'
-        data-testid='table.toolbar.add-row'
-        onClick={() => onAction?.({ type: 'add-row' })}
-      >
-        {t('add row')}
-      </ToolbarButton>
-    </>
-  );
-};
-
-const Actions = () => {
-  const { onAction } = useToolbarContext('Actions');
-  const { t } = useTranslation(translationKey);
-
-  return (
-    <>
-      <ToolbarButton
-        value='comment'
-        icon='ph--chat-text--regular'
-        data-testid='table.toolbar.comment'
-        onClick={() => onAction?.({ type: 'comment' })}
-      >
-        {t('create comment')}
-      </ToolbarButton>
-    </>
-  );
-};
-
-export const Toolbar = {
-  Root: ToolbarRoot,
-  Editing,
-  Actions,
-  Separator: ToolbarSeparator,
-};
-
-export { useToolbarContext };

package/src/components/Toolbar/common.tsx

@@ -1,71 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React from 'react';
-
-import {
-  Icon,
-  type IconProps,
-  Toolbar as NaturalToolbar,
-  Tooltip,
-  type ToolbarButtonProps as NaturalToolbarButtonProps,
-  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
-} from '@dxos/react-ui';
-
-// TODO(burdon): Factor out into new package (react-ui-toolbar) in common with react-ui-editor, etc.
-
-export const buttonStyles = 'min-bs-0 p-2';
-export const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
-
-export const ToolbarSeparator = () => <div role='separator' className='grow' />;
-
-//
-// ToolbarButton
-//
-
-type ToolbarButtonProps = NaturalToolbarButtonProps & Pick<IconProps, 'icon'>;
-
-export const ToolbarButton = ({ icon, children, ...props }: ToolbarButtonProps) => {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
-          <Icon icon={icon} size={5} />
-          <span className='sr-only'>{children}</span>
-        </NaturalToolbar.Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {children}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};
-
-//
-// ToolbarToggleButton
-//
-
-export type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & Pick<IconProps, 'icon'>;
-
-export const ToolbarToggleButton = ({ icon, children, ...props }: ToolbarToggleButtonProps) => {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
-          <Icon icon={icon} size={5} />
-          <span className='sr-only'>{children}</span>
-        </NaturalToolbar.ToggleGroupItem>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {children}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
-};