@dxos/react-ui-mosaic 0.3.3-main.3ce60d4

package/src/mosaic/util/path.test.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+import { Path } from './path';
+
+describe('paths', () => {
+  test('create', () => {
+    const path = Path.create('a', 'b', 'c');
+    expect(Path.first(path)).to.eq('a');
+    expect(Path.last(path)).to.eq('c');
+
+    expect(Path.hasRoot(path, 'a')).to.be.true;
+    expect(Path.hasRoot(path, 'x')).to.be.false;
+
+    expect(Path.hasChild(Path.create('a', 'b'), path)).to.be.true;
+    expect(Path.hasChild(Path.create('a'), path)).to.be.false;
+
+    expect(Path.hasDescendent(Path.create('a', 'b'), path)).to.be.true;
+    expect(Path.hasDescendent(Path.create('a'), path)).to.be.true;
+  });
+});

package/src/mosaic/util/path.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+const SEPARATOR = '/';
+
+export const Path = {
+  create: (...args: string[]) => args.join(SEPARATOR),
+
+  parts: (path: string) => path.split(SEPARATOR),
+  length: (path: string) => path.split(SEPARATOR).length,
+  first: (path: string) => path.split(SEPARATOR)[0] ?? path,
+  last: (path: string) => path.split(SEPARATOR).at(-1) ?? path,
+  parent: (path: string) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
+
+  hasRoot: (path: string, id: string) => Path.first(path) === id,
+  hasChild: (path: string, compare: string) => Path.parent(compare) === path,
+  hasDescendent: (path: string, compare: string) => compare !== path && compare.startsWith(path),
+  siblings: (path: string, compare: string) => Path.parent(path) === Path.parent(compare),
+  onPath: (path: string, id: string) => Path.parts(path).includes(id),
+};

package/src/mosaic/util/styles.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// https://docs.dndkit.com/api-documentation/draggable/usedraggable#transform
+
+import { CSS, type Transform } from '@dnd-kit/utilities';
+
+export const getTransformCSS = (transform: Transform | null) =>
+  transform ? CSS.Transform.toString(Object.assign(transform, { scaleX: 1, scaleY: 1 })) : undefined;

package/src/testing/Cards.tsx

@@ -0,0 +1,88 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { Card } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { Mosaic, type MosaicTileComponent } from '../mosaic';
+
+// TODO(burdon): Menu options.
+// TODO(burdon): Margin while dragging.
+
+export type SimpleCardProps = { id: string; title?: string; body?: string; image?: string };
+
+export const SimpleCard: MosaicTileComponent<SimpleCardProps> = forwardRef(
+  (
+    { className, active, draggableStyle, draggableProps, item: { id, title }, path, position, grow, debug, onSelect },
+    forwardRef,
+  ) => {
+    const full = !title;
+    return (
+      <div role='none' ref={forwardRef} className='flex w-full' style={draggableStyle}>
+        <Card.Root
+          noPadding={full}
+          classNames={mx(
+            className,
+            'w-full snap-center',
+            (active === 'origin' || active === 'rearrange') && 'opacity-0',
+            active === 'destination' && 'opacity-20',
+          )}
+          grow={grow}
+        >
+          <Card.Header floating={full} onDoubleClick={() => onSelect?.()}>
+            <Card.DragHandle position={full ? 'left' : undefined} {...draggableProps} />
+            {title && <Card.Title title={title} />}
+            <Card.Menu position={full ? 'right' : undefined} />
+          </Card.Header>
+          {debug && (
+            <Card.Body>
+              <Mosaic.Debug data={{ path, id, position }} />
+            </Card.Body>
+          )}
+        </Card.Root>
+      </div>
+    );
+  },
+);
+
+SimpleCard.displayName = 'SimpleCard';
+
+export const ComplexCard: MosaicTileComponent<SimpleCardProps> = forwardRef(
+  (
+    { className, isDragging, draggableStyle, draggableProps, item: { id, title, body, image }, grow, debug, onSelect },
+    forwardRef,
+  ) => {
+    const full = !title;
+    return (
+      <div role='none' ref={forwardRef} className='flex w-full' style={draggableStyle}>
+        <Card.Root
+          noPadding={full}
+          classNames={mx(className, 'w-full snap-center', isDragging && 'opacity-20')}
+          grow={grow}
+        >
+          <Card.Header floating={full} onDoubleClick={() => onSelect?.()}>
+            <Card.DragHandle position={full ? 'left' : undefined} {...draggableProps} />
+            {title && <Card.Title title={title} />}
+            <Card.Menu position={full ? 'right' : undefined} />
+          </Card.Header>
+          {image && <Card.Media src={image} />}
+          {title && body && (
+            <Card.Body gutter classNames='line-clamp-3 text-sm'>
+              {body}
+            </Card.Body>
+          )}
+          {debug && (
+            <Card.Body>
+              <Mosaic.Debug data={{ id }} />
+            </Card.Body>
+          )}
+        </Card.Root>
+      </div>
+    );
+  },
+);
+
+ComplexCard.displayName = 'ComplexCard';

package/src/testing/decorators.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type DecoratorFunction } from '@storybook/csf';
+import { type ReactRenderer } from '@storybook/react';
+import React from 'react';
+
+import { DensityProvider } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export const FullscreenDecorator = (className?: string): DecoratorFunction<ReactRenderer> => {
+  return (Story) => (
+    <div className={mx('flex fixed inset-0 overflow-hidden', className)}>
+      <DensityProvider density='fine'>
+        <Story />
+      </DensityProvider>
+    </div>
+  );
+};

package/src/testing/generator.ts

@@ -0,0 +1,135 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.
+
+// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).
+
+import { faker } from '@faker-js/faker';
+
+import { Schema as SchemaType } from '@dxos/client/echo';
+import { Expando, type TypedObject } from '@dxos/echo-schema';
+
+// TODO(burdon): Util.
+export const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>
+  Array.from({ length })
+    .map((_, i) => fn(i))
+    .filter(Boolean) as T[];
+
+// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?
+export type TestItem = { id: string; type: string } & Record<string, any>;
+
+type ObjectDataGenerator = {
+  createSchema?: () => SchemaType;
+  createData: () => any;
+};
+
+type ObjectFactory<T extends TypedObject> = {
+  schema?: SchemaType; // TODO(burdon): Support both typed and expando schema.
+  createObject: () => T;
+};
+
+type ObjectFactoryMap = { [type: string]: ObjectFactory<any> };
+
+const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
+  const schema = createSchema?.();
+  return {
+    schema,
+    createObject: () => new Expando(createData(), { schema }),
+  };
+};
+
+// TODO(burdon): Handle restricted values.
+export const Status = ['pending', 'active', 'done'];
+export const Priority = [1, 2, 3, 4, 5];
+
+export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
+  document: {
+    createData: () => ({
+      title: faker.lorem.sentence(3),
+      body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),
+    }),
+  },
+
+  image: {
+    createData: () => ({
+      title: faker.lorem.sentence(3),
+      image: faker.helpers.arrayElement(data.images),
+      body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,
+    }),
+  },
+
+  project: {
+    createSchema: () =>
+      new SchemaType({
+        props: [
+          {
+            id: 'title',
+            type: SchemaType.PropType.STRING,
+          },
+          {
+            id: 'repo',
+            type: SchemaType.PropType.STRING,
+          },
+          {
+            id: 'status',
+            type: SchemaType.PropType.STRING,
+          },
+          {
+            id: 'priority',
+            type: SchemaType.PropType.NUMBER,
+          },
+        ],
+      }),
+    createData: () => ({
+      title: faker.commerce.productName(),
+      repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,
+      status: faker.helpers.arrayElement(Status),
+      priority: faker.helpers.arrayElement(Priority),
+    }),
+  },
+};
+
+/**
+ * Typed object generator.
+ */
+export class TestObjectGenerator {
+  public readonly factories: ObjectFactoryMap;
+
+  constructor({ types, factories }: { types?: string[]; factories?: ObjectFactoryMap } = {}) {
+    this.factories =
+      factories ??
+      (types ?? Object.keys(defaultGenerators)).reduce<ObjectFactoryMap>((acc, type) => {
+        acc[type] = createFactory(defaultGenerators[type]);
+        return acc;
+      }, {});
+  }
+
+  get schema(): SchemaType[] {
+    return Object.values(this.factories).map((f) => f.schema!);
+  }
+
+  createObject({ types }: { types?: string[] } = {}) {
+    const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));
+    const factory = this.factories[type];
+    return factory?.createObject();
+  }
+
+  createObjects({ types, length }: { types?: string[]; length: number }) {
+    return range(() => this.createObject({ types }), length);
+  }
+}
+
+// https://unsplash.com
+// TODO(burdon): Use https://picsum.photos?
+const data = {
+  images: [
+    '/images/image-1.png',
+    '/images/image-2.png',
+    '/images/image-3.png',
+    '/images/image-4.png',
+    '/images/image-5.png',
+    '/images/image-6.png',
+  ],
+};

package/src/testing/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './decorators';
+export * from './generator';
+export * from './next-fractional-index';
+
+export * from './Cards';

package/src/testing/next-fractional-index.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type UniqueIdentifier } from '@dnd-kit/core';
+import { getIndexAbove, getIndexBelow, getIndexBetween } from '@tldraw/indices';
+
+import { type Node } from '@braneframe/plugin-graph';
+
+export const nextRearrangeIndex = (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => {
+  const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;
+  if (overOrderIndex >= 0) {
+    const activeOrderIndex = nodes.findIndex(({ id }) => id === activeId);
+    return overOrderIndex < 1
+      ? getIndexBelow(nodes[overOrderIndex].properties.index)
+      : activeOrderIndex < overOrderIndex
+      ? getIndexBetween(nodes[overOrderIndex].properties.index, nodes[overOrderIndex + 1]?.properties.index)
+      : getIndexBetween(nodes[overOrderIndex - 1].properties.index, nodes[overOrderIndex].properties.index);
+  } else {
+    return null;
+  }
+};
+
+export const nextCopyIndex = (nodes: Node[], overId?: UniqueIdentifier) => {
+  const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;
+  const previewOrderIndex = nodes.findIndex(({ id }) => id.startsWith('preview--'));
+  if (overOrderIndex >= 0) {
+    return overOrderIndex < 1
+      ? getIndexBelow(nodes[overOrderIndex].properties.index)
+      : previewOrderIndex < overOrderIndex && previewOrderIndex >= 0
+      ? getIndexBetween(nodes[overOrderIndex].properties.index, nodes[overOrderIndex + 1]?.properties.index)
+      : getIndexBetween(nodes[overOrderIndex - 1].properties.index, nodes[overOrderIndex]?.properties.index);
+  } else {
+    return nodes.length ? getIndexAbove(nodes[nodes.length - 1].properties.index) : 'a0';
+  }
+};

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

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Mosaic } from '../../mosaic';
+import { ComplexCard, FullscreenDecorator, SimpleCard } from '../../testing';
+import { DemoGrid } from '../Grid/testing';
+import { DemoKanban } from '../Kanban/testing';
+import { DemoStack } from '../Stack/testing';
+import { DemoTree } from '../Tree/testing';
+
+faker.seed(5);
+
+export default {
+  title: 'Views/Demo',
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const debug = false;
+const types = ['document', 'image'];
+
+export const Default = () => (
+  <Mosaic.Root debug={debug}>
+    <Mosaic.DragOverlay />
+    <div className='flex grow overflow-hidden'>
+      <div className='flex shrink-0 w-[280px] overflow-hidden'>
+        <DemoStack id='stack-1' Component={SimpleCard} types={types} debug={debug} className='p-2' />
+      </div>
+      <div className='flex grow overflow-hidden bg-neutral-900'>
+        <DemoGrid id='grid-1' Component={ComplexCard} types={types} debug={debug} className='p-4' />
+      </div>
+      <div className='flex shrink-0 w-[280px] overflow-hidden bg-neutral-900'>
+        <DemoStack id='stack-2' Component={ComplexCard} types={types} debug={debug} />
+      </div>
+    </div>
+  </Mosaic.Root>
+);
+
+export const Tree = () => (
+  <Mosaic.Root debug={debug}>
+    <Mosaic.DragOverlay />
+    <div className='flex grow overflow-hidden'>
+      <div className='flex shrink-0 w-[280px] overflow-hidden'>
+        <DemoTree id='tree-1' types={types} debug={debug} />
+      </div>
+      <div className='flex grow overflow-hidden'>
+        <DemoGrid id='grid-1' Component={ComplexCard} types={types} debug={debug} className='p-4 bg-neutral-900' />
+      </div>
+      <div className='flex shrink-0 w-[280px] overflow-hidden bg-neutral-900'>
+        <DemoStack id='stack-2' Component={ComplexCard} types={types} debug={debug} />
+      </div>
+    </div>
+  </Mosaic.Root>
+);
+
+export const Kanban = () => (
+  <Mosaic.Root debug={debug}>
+    <Mosaic.DragOverlay />
+    <div className='flex grow overflow-hidden'>
+      <div className='flex shrink-0 w-[280px] overflow-hidden'>
+        <DemoTree id='tree-1' types={types} debug={debug} />
+      </div>
+      <div className='flex grow overflow-hidden'>
+        <DemoKanban id='kanban-1' Component={SimpleCard} debug={debug} className='p-4' />
+      </div>
+      <div className='flex shrink-0 w-[280px] overflow-hidden bg-neutral-900 pl-2'>
+        <DemoStack id='stack-1' Component={ComplexCard} types={types} debug={debug} />
+      </div>
+    </div>
+  </Mosaic.Root>
+);

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

@@ -0,0 +1,74 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { faker } from '@faker-js/faker';
+import React, { type FC } from 'react';
+
+import { type PublicKey } from '@dxos/react-client';
+import { Expando } from '@dxos/react-client/echo';
+import { ClientSpaceDecorator } from '@dxos/react-client/testing';
+
+import { Mosaic } from '../../mosaic';
+import { FullscreenDecorator, TestObjectGenerator, range, Status, Priority } from '../../testing';
+import { EchoKanban } from '../Kanban/testing';
+import { GraphTree } from '../Tree/testing';
+
+faker.seed(3);
+const debug = true;
+const generator = new TestObjectGenerator();
+
+// TODO(burdon): Compute this?
+const columnValues: { [property: string]: any[] } = {
+  status: ['unknown', ...Status],
+  priority: ['unknown', ...Priority],
+};
+
+const Story: FC<{ spaceKey: PublicKey }> = ({ spaceKey }) => {
+  return (
+    <Mosaic.Root debug={debug}>
+      <Mosaic.DragOverlay />
+      <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} />
+        </div>
+      </div>
+    </Mosaic.Root>
+  );
+};
+
+export default {
+  title: 'Views/Demo',
+  render: Story,
+  decorators: [
+    FullscreenDecorator(),
+    ClientSpaceDecorator({
+      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(wittjosiah): This currently has a bug where empty over events are fired when dragging from tree onto kanban.
+//   The bug didn't exist before the cleanup refactor so seems likely it's a side effect of that.
+export const ECHO = {};

package/src/views/Grid/Grid.stories.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Grid, type GridLayout } from './Grid';
+import { DemoGrid } from './testing';
+import { Mosaic } from '../../mosaic';
+import { FullscreenDecorator, TestObjectGenerator } from '../../testing';
+
+faker.seed(99);
+
+const debug = true;
+
+// TODO(burdon): Create object.
+// TODO(burdon): Delete object (delete/remove from grid).
+// TODO(burdon): Editable cards (and other card stories).
+// TODO(burdon): Search story (drag from search stack).
+
+const size = { x: 4, y: 4 };
+const generator = new TestObjectGenerator({ types: ['document', 'image'] });
+const testItems = generator.createObjects({ length: 20 });
+const testLayout = testItems.reduce<GridLayout>((map, item) => {
+  map[item.id] = { x: faker.number.int({ min: 0, max: size.x - 1 }), y: faker.number.int({ min: 0, max: size.y - 1 }) };
+  return map;
+}, {});
+
+export default {
+  component: Grid,
+  render: () => {
+    return (
+      <Mosaic.Root debug={debug}>
+        <Mosaic.DragOverlay />
+        <DemoGrid id='grid' options={{ size }} initialItems={testItems} initialLayout={testLayout} />
+      </Mosaic.Root>
+    );
+  },
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};