@dxos/react-ui-mosaic 0.3.3-main.006ca4d

package/src/views/Grid/Grid.tsx

@@ -0,0 +1,248 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { useDroppable } from '@dnd-kit/core';
+import { PlusCircle } from '@phosphor-icons/react';
+import defaultsDeep from 'lodash.defaultsdeep';
+import React, { type FC, useState, useMemo, useEffect } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { Button, useMediaQuery } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import {
+  calculateCellWidth,
+  createMatrix,
+  getBounds,
+  getDimension,
+  getPanelBounds,
+  type Dimension,
+  type Position,
+  type Size,
+} from './layout';
+import { type MosaicContainerProps, type MosaicDataItem, Mosaic, Path, useMosaic } from '../../mosaic';
+
+//
+// Selection
+//
+
+// TODO(burdon): Factor out as mosaic standard.
+type ControlledSelection = {
+  selected?: string;
+  onSelect?: (id: string) => void;
+};
+
+//
+// Context.
+//
+
+type GridOptions = {
+  size: Size;
+  cellBounds: Dimension;
+  spacing?: number;
+};
+
+const defaultGridOptions: GridOptions = {
+  size: { x: 8, y: 8 },
+  cellBounds: { width: 280, height: 280 },
+  spacing: 8,
+};
+
+//
+// Container.
+//
+
+export type GridLayout = { [id: string]: Position };
+
+export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicContainerProps<TData, Position> &
+  ControlledSelection & {
+    items?: TData[];
+    layout?: GridLayout;
+    options?: Partial<GridOptions>;
+    margin?: boolean;
+    square?: boolean;
+    debug?: boolean;
+    onCreate?: (position: Position) => void;
+  };
+
+/**
+ * Grid content.
+ */
+// TODO(burdon): Make generic (and forwardRef).
+export const Grid = ({
+  id,
+  items = [],
+  layout = {},
+  options: opts,
+  margin,
+  square = true,
+  debug,
+  selected: controlledSelected,
+  Component = Mosaic.DefaultComponent,
+  className,
+  onDrop,
+  onSelect,
+  onCreate,
+}: GridProps) => {
+  const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
+  const options = defaultsDeep({}, opts, defaultGridOptions);
+  const { matrix, bounds, cellBounds } = useMemo(() => {
+    // Change default cell bounds to screen width if mobile.
+    const cellWidth = calculateCellWidth(options.cellBounds.width, width ?? 0);
+    const cellBounds = {
+      width: cellWidth,
+      height: square ? cellWidth : options.cellBounds.height,
+    };
+
+    return {
+      matrix: createMatrix(options.size, ({ x, y }) => ({ x, y })),
+      bounds: getPanelBounds(options.size, cellBounds, options.spacing),
+      cellBounds,
+    };
+  }, [options, width]);
+
+  // No margin if mobile.
+  const [isNotMobile] = useMediaQuery('md');
+  const marginSize = margin && !isNotMobile ? Math.max(cellBounds.width, cellBounds.height) : 0;
+
+  const [selected, setSelected] = useState(controlledSelected);
+  useEffect(() => {
+    setSelected(controlledSelected);
+    if (controlledSelected) {
+      scrollToCenter(controlledSelected);
+    }
+  }, [controlledSelected]);
+
+  const scrollToCenter = (id: string) => {
+    const item = items.find((item) => item.id === id);
+    if (item && width && height) {
+      const pos = getBounds(layout[item.id], cellBounds);
+      const top = pos.top + marginSize - (height - cellBounds.height) / 2;
+      const left = pos.left + marginSize - (width - cellBounds.width) / 2;
+      containerRef.current!.scrollTo({ top, left, behavior: 'smooth' });
+    }
+  };
+
+  // TODO(burdon): Focus ring/navigation.
+  // TODO(burdon): Set center point on container (via translation?) Scale container to zoom.
+  const handleSelect = (id: string) => {
+    setSelected(id);
+    scrollToCenter(id);
+    onSelect?.(id);
+  };
+
+  useEffect(() => {
+    if (selected) {
+      scrollToCenter(selected);
+    }
+  }, [selected, width, height]);
+
+  return (
+    <Mosaic.Container
+      {...{
+        id,
+        Component,
+        getOverlayProps: () => ({ grow: true }),
+        getOverlayStyle: () => getDimension(cellBounds, options.spacing),
+        onDrop,
+      }}
+    >
+      <div className={mx('flex grow overflow-auto', className)}>
+        <div ref={containerRef} className={mx('grow overflow-auto snap-x snap-mandatory md:snap-none bg-neutral-600')}>
+          <div className='group block relative bg-neutral-500' style={{ ...bounds, margin: marginSize }}>
+            {matrix && (
+              <div style={{ padding: options.spacing }}>
+                <div className='relative'>
+                  {matrix.map((row) =>
+                    row.map(({ x, y }) => (
+                      <GridCell
+                        key={`${x}-${y}`}
+                        path={id}
+                        position={{ x, y }}
+                        bounds={getBounds({ x, y }, cellBounds)}
+                        padding={options.spacing}
+                        onCreate={onCreate}
+                      />
+                    )),
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* TODO(burdon): Events: onDoubleClick={() => handleSelect(id)} */}
+            <div>
+              {items.map((item) => {
+                const position = layout[item.id] ?? { x: 0, y: 0 };
+                return (
+                  <Mosaic.DraggableTile
+                    key={item.id}
+                    item={item}
+                    path={id}
+                    position={position}
+                    Component={Component}
+                    draggableStyle={{
+                      position: 'absolute',
+                      ...getBounds(position, cellBounds, options.spacing),
+                    }}
+                    onSelect={() => handleSelect(item.id)}
+                    // debug={debug}
+                  />
+                );
+              })}
+            </div>
+          </div>
+
+          {debug && <Mosaic.Debug data={{ items: items?.length }} position='bottom-right' />}
+        </div>
+      </div>
+    </Mosaic.Container>
+  );
+};
+
+/**
+ * Grid cell.
+ */
+const GridCell: FC<{
+  path: string;
+  position: Position;
+  bounds: Dimension;
+  padding?: number;
+  onCreate?: (position: Position) => void;
+}> = ({ path, position, bounds, padding, onCreate }) => {
+  const { overItem } = useMosaic();
+  const isOverContainer = path === overItem?.path;
+  const { setNodeRef, isOver } = useDroppable({
+    id: Path.create(path, 'cell', `${position.x}-${position.y}`),
+    data: { path, position },
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ ...bounds, padding }}
+      className='absolute flex justify-center items-center grow select-none cursor-pointer'
+    >
+      <div
+        className={mx(
+          'group/cell hidden group-hover:flex w-full h-full items-center justify-center',
+          isOverContainer && 'flex',
+          'box-border border-dashed border-4 border-neutral-600/50 rounded-lg',
+          'transition ease-in-out duration-200 bg-neutral-500',
+          isOver && 'flex bg-neutral-600',
+        )}
+      >
+        <div className={mx('hidden group-hover/cell:flex', isOverContainer && 'hidden')}>
+          {onCreate && (
+            // TODO(burdon): Style button.
+            <Button variant='ghost' onClick={() => onCreate(position)}>
+              <PlusCircle className={getSize(8)} />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/views/Grid/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './layout';
+
+export * from './Grid';

package/src/views/Grid/layout.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export type Size = { x: number; y: number };
+export type Position = { x: number; y: number };
+export type Dimension = { width: number; height: number };
+export type Bounds = { left: number; top: number; width: number; height: number };
+
+export const createMatrix = <TValue>(size: Size, value: (position: Position) => TValue): TValue[][] => {
+  const matrix: TValue[][] = [];
+  for (let x = 0; x < size.x; x++) {
+    matrix.push(Array.from({ length: size.y }, (_, y) => value({ x, y })));
+  }
+
+  return matrix;
+};
+
+export const getDimension = ({ width, height }: Dimension, spacing = 0): Dimension => ({
+  width: width - spacing * 2,
+  height: height - spacing * 2,
+});
+
+export const getBounds = ({ x, y }: Position, { width, height }: Dimension, spacing = 0): Bounds => ({
+  left: x * width + spacing * 2,
+  top: y * height + spacing * 2,
+  width: width - spacing * 2,
+  height: height - spacing * 2,
+});
+
+export const getPanelBounds = ({ x, y }: Position, { width, height }: Dimension, spacing = 0): Dimension => ({
+  width: x * width + spacing * 2,
+  height: y * height + spacing * 2,
+});
+
+export const calculateCellWidth = (
+  defaultWidth: number,
+  screenWidth: number,
+  options: { min: number; max: number } = { min: 260, max: 400 },
+) => {
+  return screenWidth > options.min && screenWidth < options.max ? screenWidth : defaultWidth;
+};

package/src/views/Grid/testing.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { faker } from '@faker-js/faker';
+import React, { useState } from 'react';
+
+import { Grid, type GridLayout, type GridProps } from './Grid';
+import { type Position } from './layout';
+import { type MosaicDataItem, type MosaicDropEvent } from '../../mosaic';
+import { ComplexCard, TestObjectGenerator } from '../../testing';
+
+export type DemoGridProps = GridProps & {
+  initialItems?: MosaicDataItem[];
+  initialLayout?: GridLayout;
+  types?: string[];
+  debug?: boolean;
+};
+
+export const DemoGrid = ({
+  id = 'grid',
+  options = { size: { x: 8, y: 8 } },
+  Component = ComplexCard,
+  initialItems,
+  initialLayout,
+  types,
+  debug,
+  className,
+}: DemoGridProps) => {
+  const [selected, setSelected] = useState<string>();
+  const [items, setItems] = useState<MosaicDataItem[]>(
+    initialItems ??
+      (() => {
+        const generator = new TestObjectGenerator({ types });
+        return generator.createObjects({ length: 12 });
+      }),
+  );
+  const [layout, setLayout] = useState<GridLayout>(
+    initialLayout ??
+      (() =>
+        items.reduce<GridLayout>((map, item, i) => {
+          map[item.id] = {
+            x: faker.number.int({ min: 0, max: (options.size?.x ?? 1) - 1 }),
+            y: faker.number.int({ min: 0, max: (options.size?.y ?? 1) - 1 }),
+          };
+          return map;
+        }, {})),
+  );
+
+  const handleDrop = ({ active, over }: MosaicDropEvent<Position>) => {
+    if (over.path !== id) {
+      setItems((items) => items.filter((item) => item.id !== active.item.id));
+    } else {
+      setItems((items) => {
+        if (items.findIndex((item) => item.id === active.item.id) === -1) {
+          return [active.item, ...items];
+        } else {
+          return items;
+        }
+      });
+      setLayout((layout) => ({ ...layout, [active.item.id]: over.position! }));
+    }
+  };
+
+  const handleCreate = (position: Position) => {
+    setItems((items) => {
+      const item = new TestObjectGenerator({ types }).createObject();
+      setTimeout(() => {
+        setSelected(item.id);
+      });
+      setLayout((layout) => ({ ...layout, [item.id]: position }));
+      return [item, ...items];
+    });
+  };
+
+  return (
+    <Grid
+      id={id}
+      items={items}
+      layout={layout}
+      options={options}
+      Component={Component}
+      className={className}
+      debug={debug}
+      selected={selected}
+      onSelect={setSelected}
+      onDrop={handleDrop}
+      onCreate={handleCreate}
+    />
+  );
+};

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

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type PublicKey } from '@dxos/react-client';
+import { Expando } from '@dxos/react-client/echo';
+import { ClientSpaceDecorator } from '@dxos/react-client/testing';
+
+import { Kanban } from './Kanban';
+import { EchoKanban, columnValues } from './testing';
+import { Mosaic } from '../../mosaic';
+import { FullscreenDecorator, TestObjectGenerator, range } from '../../testing';
+
+const generator = new TestObjectGenerator();
+
+export default {
+  title: 'Views/Kanban',
+  component: Kanban,
+  render: ({
+    // TODO(wittjosiah): Can't use id because of ClientSpaceDecorator.
+    basePath = 'projects',
+    spaceKey,
+    debug,
+  }: {
+    basePath: string;
+    spaceKey: PublicKey;
+    debug: boolean;
+  }) => {
+    return (
+      <Mosaic.Root debug={debug}>
+        <Mosaic.DragOverlay />
+        <EchoKanban id={basePath} spaceKey={spaceKey} generator={generator} debug={debug} />
+      </Mosaic.Root>
+    );
+  },
+  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));
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const ECHO = {};

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

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React from 'react';
+
+import { Kanban } from './Kanban';
+import { DemoKanban, type DemoKanbanProps } from './testing';
+import { Mosaic } from '../../mosaic';
+import { ComplexCard, FullscreenDecorator, SimpleCard } from '../../testing';
+
+faker.seed(3);
+
+export default {
+  component: Kanban,
+  render: (args: DemoKanbanProps) => {
+    return (
+      <Mosaic.Root debug={args.debug}>
+        <Mosaic.DragOverlay />
+        <DemoKanban {...args} />
+      </Mosaic.Root>
+    );
+  },
+  decorators: [FullscreenDecorator()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {
+  args: {
+    Component: SimpleCard,
+    count: 3,
+    debug: true,
+  },
+};
+
+export const Complex = {
+  args: {
+    Component: ComplexCard,
+    types: ['document', 'image'],
+    count: 4,
+    debug: true,
+  },
+};

package/src/views/Kanban/Kanban.tsx

@@ -0,0 +1,139 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { forwardRef, useMemo } from 'react';
+
+import { Card } from '@dxos/react-ui';
+import { groupSurface, mx } from '@dxos/react-ui-theme';
+
+import {
+  Mosaic,
+  type MosaicContainerProps,
+  type MosaicDataItem,
+  type MosaicTileComponent,
+  Path,
+  useItemsWithPreview,
+  useContainer,
+} from '../../mosaic';
+
+// Example:
+// https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-multiple-containers--basic-setup
+
+export type KanbanColumn<TData extends MosaicDataItem = MosaicDataItem> = MosaicDataItem & {
+  title: string;
+  items: TData[];
+};
+
+export type KanbanProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicContainerProps<TData, number> & {
+  columns: KanbanColumn<TData>[];
+  debug?: boolean;
+};
+
+export const Kanban = ({
+  id,
+  columns,
+  Component: TileComponent = Mosaic.DefaultComponent,
+  debug,
+  onDrop,
+}: KanbanProps) => {
+  const Component = useMemo(() => OverlayComponent(id, TileComponent), [id, TileComponent]);
+
+  return (
+    <Mosaic.Container
+      {...{
+        id,
+        debug,
+        Component,
+        // Restrict columns to x-axis.
+        modifier: ({ path, item }, { transform }) =>
+          path === Path.create(id, item.id) ? { ...transform, y: 0 } : transform,
+        // Restrict to objects from other columns.
+        // TODO(burdon): Consider objects from other containers.
+        // TODO(wittjosiah): Allow override.
+        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'adopt' : 'reject'),
+        onDrop,
+      }}
+    >
+      <div className='grow flex overflow-y-hidden overflow-x-auto'>
+        <div className='flex'>
+          <Mosaic.SortableContext items={columns} direction='horizontal'>
+            {columns.map((column, index) => (
+              <Mosaic.SortableTile
+                key={column.id}
+                item={column}
+                path={id}
+                position={index}
+                Component={Component}
+                debug={debug}
+              />
+            ))}
+          </Mosaic.SortableContext>
+        </div>
+      </div>
+    </Mosaic.Container>
+  );
+};
+
+const OverlayComponent = (id: string, Component: MosaicTileComponent<any>): MosaicTileComponent<any> =>
+  forwardRef((props, ref) => {
+    const isColumn = Path.hasRoot(props.path, id) && Path.length(props.path) === 2;
+    if (isColumn && props.active === 'overlay') {
+      return (
+        // Needs to not override the main kanban path.
+        <Mosaic.Container {...{ id: `${id}-active`, Component }}>
+          <KanbanColumnComponent {...props} ref={ref} />
+        </Mosaic.Container>
+      );
+    }
+
+    return isColumn ? <KanbanColumnComponent {...props} ref={ref} /> : <Component {...props} ref={ref} />;
+  });
+
+const KanbanColumnComponent: MosaicTileComponent<KanbanColumn> = forwardRef(
+  ({ path, item, active, draggableStyle, draggableProps, debug }, forwardRef) => {
+    const { id, title, items } = item;
+    const { Component } = useContainer();
+    const itemsWithPreview = useItemsWithPreview({ path, items });
+
+    return (
+      <div role='none' className='grow flex flex-col' ref={forwardRef}>
+        <div
+          className={mx(
+            groupSurface,
+            'grow flex flex-col w-[300px] snap-center overflow-hidden m-1',
+            active === 'rearrange' && 'opacity-0',
+          )}
+          style={draggableStyle}
+        >
+          <Card.Root classNames='shrink-0 bg-cyan-200'>
+            <Card.Header>
+              <Card.DragHandle {...draggableProps} />
+              <Card.Title title={title} />
+              <Card.Menu />
+            </Card.Header>
+          </Card.Root>
+
+          <div className={mx('flex flex-col grow overflow-y-scroll')}>
+            <div className='flex flex-col my-1'>
+              <Mosaic.SortableContext id={path} items={itemsWithPreview} direction='vertical'>
+                {itemsWithPreview.map((item, index) => (
+                  <Mosaic.SortableTile
+                    key={item.id}
+                    item={item}
+                    path={path}
+                    position={index}
+                    Component={Component!}
+                    className='m-1'
+                    // debug={debug}
+                  />
+                ))}
+              </Mosaic.SortableContext>
+            </div>
+          </div>
+          {debug && <Mosaic.Debug data={{ path, id, items: itemsWithPreview.length }} />}
+        </div>
+      </div>
+    );
+  },
+);

package/src/views/Kanban/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Kanban';