@dxos/react-ui-mosaic 0.4.10-main.fa5a270 → 0.4.10-main.fd8ea31

package/dist/types/src/views/Kanban/testing.d.ts

@@ -1,7 +1,5 @@
 import { type FC } from 'react';
-import { type PublicKey } from '@dxos/react-client';
 import { type KanbanProps } from './Kanban';
-import { TestObjectGenerator } from '../../testing';
 export type DemoKanbanProps = Omit<KanbanProps, 'columns'> & {
     types?: string[];
     count?: number;
@@ -11,10 +9,4 @@ export declare const DemoKanban: FC<DemoKanbanProps>;
 export declare const columnValues: {
     [property: string]: any[];
 };
-export declare const EchoKanban: ({ id, spaceKey, generator, debug, }: {
-    id: string;
-    spaceKey: PublicKey;
-    generator: TestObjectGenerator;
-    debug?: boolean | undefined;
-}) => JSX.Element;
 //# sourceMappingURL=testing.d.ts.map

package/dist/types/src/views/Kanban/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Kanban/testing.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,KAAK,EAAE,EAAoB,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAKpD,OAAO,EAA6B,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAA+C,MAAM,eAAe,CAAC;AAWjG,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA6C1C,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,EAAE,CAAA;CAGrD,CAAC;AAEF,eAAO,MAAM,UAAU;QAMjB,MAAM;cACA,SAAS;eACR,mBAAmB;;iBA+G/B,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Kanban/testing.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AAIjD,OAAO,EAA6B,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAavE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA6C1C,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE;IAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,EAAE,CAAA;CAGrD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.4.10-main.fa5a270",
+  "version": "0.4.10-main.fd8ea31",
   "description": "An intermediate interface for drag-and-drop interactions.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,18 +24,18 @@
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.pick": "^4.4.0",
     "react-resize-detector": "^7.1.2",
-    "@dxos/invariant": "0.4.10-main.fa5a270",
-    "@dxos/react-ui": "0.4.10-main.fa5a270",
-    "@dxos/keys": "0.4.10-main.fa5a270",
-    "@dxos/debug": "0.4.10-main.fa5a270",
-    "@dxos/react-ui-theme": "0.4.10-main.fa5a270",
-    "@dxos/react-ui-card": "0.4.10-main.fa5a270",
-    "@dxos/util": "0.4.10-main.fa5a270",
-    "@dxos/react-ui-types": "0.4.10-main.fa5a270",
-    "@dxos/log": "0.4.10-main.fa5a270"
+    "@dxos/debug": "0.4.10-main.fd8ea31",
+    "@dxos/invariant": "0.4.10-main.fd8ea31",
+    "@dxos/keys": "0.4.10-main.fd8ea31",
+    "@dxos/log": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui-card": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui-types": "0.4.10-main.fd8ea31",
+    "@dxos/util": "0.4.10-main.fd8ea31",
+    "@dxos/react-ui-theme": "0.4.10-main.fd8ea31"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.0.5",
+    "@phosphor-icons/react": "^2.1.5",
     "@types/d3": "^7.4.2",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.pick": "^4.4.7",
@@ -44,14 +44,14 @@
     "d3": "^7.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^5.1.5",
+    "vite": "^5.2.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/app-graph": "0.4.10-main.fa5a270",
-    "@dxos/echo-schema": "0.4.10-main.fa5a270",
-    "@dxos/gem-core": "0.4.10-main.fa5a270",
-    "@dxos/react-client": "0.4.10-main.fa5a270",
-    "@dxos/storybook-utils": "0.4.10-main.fa5a270",
-    "@dxos/random": "0.4.10-main.fa5a270"
+    "@dxos/echo-schema": "0.4.10-main.fd8ea31",
+    "@dxos/app-graph": "0.4.10-main.fd8ea31",
+    "@dxos/random": "0.4.10-main.fd8ea31",
+    "@dxos/gem-core": "0.4.10-main.fd8ea31",
+    "@dxos/react-client": "0.4.10-main.fd8ea31",
+    "@dxos/storybook-utils": "0.4.10-main.fd8ea31"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/mosaic/Container.tsx

@@ -52,7 +52,7 @@ export type MosaicDropEvent<TPosition = unknown> = MosaicMoveEvent<TPosition> &
 };
 
 export type MosaicContainerProps<TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown> = ThemedClassName<
-  Omit<HTMLAttributes<HTMLElement>, 'onDrop'>
+  Omit<HTMLAttributes<HTMLElement>, 'onDrop' | 'onSelect'>
 > &
   PropsWithChildren<{
     id: string;

package/src/mosaic/Tile.tsx

@@ -4,7 +4,8 @@
 
 import { type DraggableAttributes, useDraggable, useDroppable } from '@dnd-kit/core';
 import { defaultAnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
-import React from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import React, { forwardRef } from 'react';
 import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -106,37 +107,34 @@ export const DraggableTile = ({
 /**
  * Basic droppable mosaic tile.
  */
-export const DroppableTile = ({
-  path: parentPath,
-  type = DEFAULT_TYPE,
-  item,
-  Component = DefaultComponent,
-  position,
-  ...props
-}: MosaicTileProps<any>) => {
-  const { operation } = useMosaic();
-  const path =
-    parentPath === item.id
-      ? parentPath // If the path is the same as the item id, then this is the root tile.
-      : Path.create(parentPath, item.id);
-  const { setNodeRef, isOver } = useDroppable({
-    id: path,
-    data: { path, type, item, position } satisfies MosaicDraggedItem,
-  });
-
-  return (
-    <Component
-      ref={setNodeRef}
-      item={item}
-      path={path}
-      type={type}
-      position={position}
-      operation={operation}
-      isOver={isOver}
-      {...props}
-    />
-  );
-};
+export const DroppableTile = forwardRef<HTMLDivElement | null, MosaicTileProps<any>>(
+  ({ path: parentPath, type = DEFAULT_TYPE, item, Component = DefaultComponent, position, ...props }, forwardedRef) => {
+    const { operation } = useMosaic();
+    const path =
+      parentPath === item.id
+        ? parentPath // If the path is the same as the item id, then this is the root tile.
+        : Path.create(parentPath, item.id);
+    const { setNodeRef, isOver } = useDroppable({
+      id: path,
+      data: { path, type, item, position } satisfies MosaicDraggedItem,
+    });
+
+    const ref = useComposedRefs<HTMLDivElement | null>(setNodeRef, forwardedRef);
+
+    return (
+      <Component
+        item={item}
+        path={path}
+        type={type}
+        position={position}
+        operation={operation}
+        isOver={isOver}
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);
 
 /**
  * Mosaic tile that can be sorted.

package/src/testing/generator.ts

@@ -4,8 +4,8 @@
 
 // TODO(burdon): Reconcile with @dxos/echo-generator.
 
-import { Schema } from '@dxos/client/echo';
-import { Expando, type TypedObject } from '@dxos/echo-schema';
+import type { EchoReactiveObject, S } from '@dxos/echo-schema';
+import { create } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 
 // TODO(burdon): Util.
@@ -17,12 +17,12 @@ export const range = <T>(fn: (i: number) => T | undefined, length: number): T[]
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => Schema;
+  createSchema?: () => S.Schema<any>;
   createData: () => any;
 };
 
-type ObjectFactory<T extends TypedObject> = {
-  schema?: Schema; // TODO(burdon): Support both typed and expando schema.
+type ObjectFactory<T extends EchoReactiveObject<any>> = {
+  schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -32,7 +32,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
   const schema = createSchema?.();
   return {
     schema,
-    createObject: () => new Expando(createData(), { schema }),
+    createObject: () => (schema ? create(schema, createData()) : create(createData())),
   };
 };
 
@@ -57,27 +57,34 @@ const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
   },
 
   project: {
-    createSchema: () =>
-      new Schema({
-        props: [
-          {
-            id: 'title',
-            type: Schema.PropType.STRING,
-          },
-          {
-            id: 'repo',
-            type: Schema.PropType.STRING,
-          },
-          {
-            id: 'status',
-            type: Schema.PropType.STRING,
-          },
-          {
-            id: 'priority',
-            type: Schema.PropType.NUMBER,
-          },
-        ],
-      }),
+    // createSchema: () =>
+    //   return object(StoredEchoSchema, {
+    //     typename: 'Project',
+    //     version: '0.1.0',
+    //     jsonSchema: effectToJsonSchema(
+    //
+    //     ),
+    //   })
+    //   new Schema({
+    //     props: [
+    //       {
+    //         id: 'title',
+    //         type: Schema.PropType.STRING,
+    //       },
+    //       {
+    //         id: 'repo',
+    //         type: Schema.PropType.STRING,
+    //       },
+    //       {
+    //         id: 'status',
+    //         type: Schema.PropType.STRING,
+    //       },
+    //       {
+    //         id: 'priority',
+    //         type: Schema.PropType.NUMBER,
+    //       },
+    //     ],
+    //   }),
     createData: () => ({
       title: faker.commerce.productName(),
       repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,
@@ -102,7 +109,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): Schema[] {
+  get schema(): S.Schema<any>[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 

package/src/views/Demo/Echo.stories.tsx

@@ -6,13 +6,14 @@ import React, { type FC } from 'react';
 
 import { faker } from '@dxos/random';
 import { type PublicKey } from '@dxos/react-client';
-import { Expando } from '@dxos/react-client/echo';
+import { create } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Mosaic } from '../../mosaic';
 import { FullscreenDecorator, TestObjectGenerator, range, Status, Priority } from '../../testing';
-import { EchoKanban } from '../Kanban/testing';
+
+// import { EchoKanban } from '../Kanban/testing';
 // import { GraphTree } from '../Tree/testing';
 
 faker.seed(3);
@@ -32,7 +33,7 @@ const Story: FC<{ spaceKey: PublicKey }> = ({ spaceKey }) => {
       <div className='flex grow overflow-hidden'>
         <div className='flex shrink-0 w-[280px] overflow-hidden'>{/* <GraphTree id='graph' debug={debug} /> */}</div>
         <div className='flex grow overflow-hidden'>
-          <EchoKanban id='projects' spaceKey={spaceKey} generator={generator} debug={debug} />
+          {/* <EchoKanban id='projects' spaceKey={spaceKey} generator={generator} debug={debug} /> */}
         </div>
       </div>
     </Mosaic.Root>
@@ -49,7 +50,7 @@ export default {
         const objects = [
           factory.schema,
           ...range(factory.createObject, 10),
-          new Expando({
+          create({
             type: 'kanban',
             title: 'Projects',
             schema: factory.schema,

package/src/views/Kanban/Echo.stories.tsx

@@ -5,16 +5,16 @@
 import React from 'react';
 
 import { type PublicKey } from '@dxos/react-client';
-import { Expando } from '@dxos/react-client/echo';
+// import { Expando } from '@dxos/react-client/echo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Kanban } from './Kanban';
-import { EchoKanban, columnValues } from './testing';
+// import { EchoKanban, columnValues } from './testing';
 import { Mosaic } from '../../mosaic';
-import { FullscreenDecorator, TestObjectGenerator, range } from '../../testing';
+import { FullscreenDecorator /* TestObjectGenerator, range */ } from '../../testing';
 
-const generator = new TestObjectGenerator();
+// const generator = new TestObjectGenerator();
 
 const Story = ({
   // TODO(wittjosiah): Can't use id because of ClientSpaceDecorator.
@@ -29,7 +29,7 @@ const Story = ({
   return (
     <Mosaic.Root debug={debug}>
       <Mosaic.DragOverlay />
-      <EchoKanban id={basePath} spaceKey={spaceKey} generator={generator} debug={debug} />
+      {/* <EchoKanban id={basePath} spaceKey={spaceKey} generator={generator} debug={debug} /> */}
     </Mosaic.Root>
   );
 };
@@ -39,25 +39,25 @@ export default {
   component: Kanban,
   render: () => (
     <ClientRepeater
-      onCreateSpace={async (space) => {
-        const factory = generator.factories.project;
-        const objects = [
-          factory.schema,
-          ...range(factory.createObject, 10),
-          new Expando({
-            type: 'kanban',
-            title: 'Projects',
-            schema: factory.schema,
-            // TODO(burdon): Standardize with other story.
-            columnProp: 'status',
-            columnValues: columnValues.status,
-            objectPosition: {}, // TODO(burdon): Make this a CRDT.
-          }),
-        ];
+      // onCreateSpace={async (space) => {
+      //   const factory = generator.factories.project;
+      //   const objects = [
+      //     factory.schema,
+      //     ...range(factory.createObject, 10),
+      //     new Expando({
+      //       type: 'kanban',
+      //       title: 'Projects',
+      //       schema: factory.schema,
+      //       // TODO(burdon): Standardize with other story.
+      //       columnProp: 'status',
+      //       columnValues: columnValues.status,
+      //       objectPosition: {}, // TODO(burdon): Make this a CRDT.
+      //     }),
+      //   ];
 
-        // TODO(burdon): Batch API.
-        objects.forEach((object) => space.db.add(object));
-      }}
+      //   // TODO(burdon): Batch API.
+      //   objects.forEach((object) => space.db.add(object));
+      // }}
       component={Story}
       createSpace
     />