@dxos/plugin-kanban 0.6.8-main.046e6cf

package/dist/types/src/types/kanban.d.ts

@@ -0,0 +1,76 @@
+import { Expando, ref, S } from '@dxos/echo-schema';
+declare const KanbanItemType_base: import("@dxos/echo-schema").AbstractTypedObject<{
+    object?: import("@dxos/echo-schema").Ref<Expando>;
+    name?: string | undefined;
+    index?: string | undefined;
+} & {
+    id: string;
+}, S.Struct.Encoded<{
+    object: S.optional<ref<Expando>>;
+    name: S.optional<typeof S.String>;
+    index: S.optional<typeof S.String>;
+}>>;
+export declare class KanbanItemType extends KanbanItemType_base {
+}
+declare const KanbanColumnType_base: import("@dxos/echo-schema").AbstractTypedObject<{
+    name?: string | undefined;
+    index?: string | undefined;
+    items: import("@dxos/echo-schema").Ref<{
+        object?: import("@dxos/echo-schema").Ref<Expando>;
+        name?: string | undefined;
+        index?: string | undefined;
+    } & {
+        id: string;
+    }>[];
+} & {
+    id: string;
+}, S.Struct.Encoded<{
+    name: S.optional<typeof S.String>;
+    index: S.optional<typeof S.String>;
+    items: S.mutable<S.Array$<ref<{
+        object?: import("@dxos/echo-schema").Ref<Expando>;
+        name?: string | undefined;
+        index?: string | undefined;
+    } & {
+        id: string;
+    }>>>;
+}>>;
+export declare class KanbanColumnType extends KanbanColumnType_base {
+}
+declare const KanbanType_base: import("@dxos/echo-schema").AbstractTypedObject<{
+    name?: string | undefined;
+    columns: import("@dxos/echo-schema").Ref<{
+        name?: string | undefined;
+        index?: string | undefined;
+        items: import("@dxos/echo-schema").Ref<{
+            object?: import("@dxos/echo-schema").Ref<Expando>;
+            name?: string | undefined;
+            index?: string | undefined;
+        } & {
+            id: string;
+        }>[];
+    } & {
+        id: string;
+    }>[];
+} & {
+    id: string;
+}, S.Struct.Encoded<{
+    name: S.optional<typeof S.String>;
+    columns: S.mutable<S.Array$<ref<{
+        name?: string | undefined;
+        index?: string | undefined;
+        items: import("@dxos/echo-schema").Ref<{
+            object?: import("@dxos/echo-schema").Ref<Expando>;
+            name?: string | undefined;
+            index?: string | undefined;
+        } & {
+            id: string;
+        }>[];
+    } & {
+        id: string;
+    }>>>;
+}>>;
+export declare class KanbanType extends KanbanType_base {
+}
+export {};
+//# sourceMappingURL=kanban.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.d.ts","sourceRoot":"","sources":["../../../../src/types/kanban.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;;;;;AAEjE,qBAAa,cAAe,SAAQ,mBAIlC;CAAG;;;;;;;;;;;;;;;;;;;;;;;;AAEL,qBAAa,gBAAiB,SAAQ,qBAIpC;CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEL,qBAAa,UAAW,SAAQ,eAG9B;CAAG"}

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

@@ -0,0 +1,18 @@
+import type { GraphBuilderProvides, IntentResolverProvides, MetadataRecordsProvides, SurfaceProvides, TranslationsProvides } from '@dxos/app-framework';
+import { type SchemaProvides } from '@dxos/plugin-client';
+import { type KanbanColumnType, type KanbanItemType, type KanbanType } from './kanban';
+export declare enum KanbanAction {
+    CREATE = "dxos.org/plugin/kanban/action/create"
+}
+export type KanbanPluginProvides = SurfaceProvides & IntentResolverProvides & GraphBuilderProvides & MetadataRecordsProvides & TranslationsProvides & SchemaProvides;
+export interface KanbanModel {
+    root: KanbanType;
+    createColumn(): KanbanColumnType;
+    createItem(column: KanbanColumnType): KanbanItemType;
+}
+export type Location = {
+    column: KanbanColumnType;
+    item?: KanbanItemType;
+    idx?: number;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAcvF,oBAAY,YAAY;IACtB,MAAM,yCAA4B;CACnC;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAChD,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,CAAC;AAUjB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,IAAI,gBAAgB,CAAC;IACjC,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,cAAc,CAAC;CACtD;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@dxos/plugin-kanban",
+  "version": "0.6.8-main.046e6cf",
+  "description": "Kanban DXOS Surface plugin",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/index.cjs"
+      },
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "node": {
+        "default": "./dist/lib/node/meta.cjs"
+      },
+      "types": "./dist/types/src/meta.d.ts"
+    },
+    "./types": {
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": {
+        "default": "./dist/lib/node/types/index.cjs"
+      },
+      "types": "./dist/types/src/types/index.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ],
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/modifiers": "^6.0.0",
+    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@preact/signals-core": "^1.6.0",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/plugin-graph": "0.6.8-main.046e6cf",
+    "@dxos/plugin-space": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf",
+    "@dxos/util": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-editor": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf"
+  },
+  "optionalDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/KanbanPlugin.tsx

@@ -0,0 +1,112 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconProps, Kanban } from '@phosphor-icons/react';
+import React from 'react';
+
+import { resolvePlugin, type PluginDefinition, parseIntentPlugin, NavigationAction } from '@dxos/app-framework';
+import { create } from '@dxos/echo-schema';
+import { parseClientPlugin } from '@dxos/plugin-client';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { SpaceAction } from '@dxos/plugin-space';
+import { loadObjectReferences } from '@dxos/react-client/echo';
+
+import { KanbanMain } from './components';
+import meta, { KANBAN_PLUGIN } from './meta';
+import translations from './translations';
+import { KanbanColumnType, KanbanItemType, KanbanType } from './types';
+import { KanbanAction, type KanbanPluginProvides } from './types';
+
+export const KanbanPlugin = (): PluginDefinition<KanbanPluginProvides> => {
+  return {
+    meta,
+    provides: {
+      metadata: {
+        records: {
+          [KanbanType.typename]: {
+            placeholder: ['kanban title placeholder', { ns: KANBAN_PLUGIN }],
+            icon: (props: IconProps) => <Kanban {...props} />,
+            iconSymbol: 'ph--kanban--regular',
+            // TODO(wittjosiah): Move out of metadata.
+            loadReferences: (kanban: KanbanType) => loadObjectReferences(kanban, (kanban) => kanban.columns),
+          },
+          [KanbanColumnType.typename]: {
+            // TODO(wittjosiah): Move out of metadata.
+            loadReferences: (column: KanbanColumnType) => loadObjectReferences(column, (column) => column.items),
+          },
+          [KanbanItemType.typename]: {
+            // TODO(wittjosiah): Move out of metadata.
+            loadReferences: (item: KanbanItemType) => [], // loadObjectReferences(item, (item) => item.object),
+          },
+        },
+      },
+      echo: {
+        schema: [KanbanType, KanbanColumnType, KanbanItemType],
+      },
+      translations,
+      graph: {
+        builder: (plugins) => {
+          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          if (!client || !dispatch) {
+            return [];
+          }
+
+          return createExtension({
+            id: KanbanAction.CREATE,
+            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
+            actions: ({ node }) => {
+              const id = node.id.split('/').at(-1);
+              const [spaceId, objectId] = id?.split(':') ?? [];
+              const space = client.spaces.get().find((space) => space.id === spaceId);
+              const object = objectId && space?.db.getObjectById(objectId);
+              const target = objectId ? object : space;
+              if (!target) {
+                return;
+              }
+
+              return [
+                {
+                  id: `${KANBAN_PLUGIN}/create/${node.id}`,
+                  data: async () => {
+                    await dispatch([
+                      { plugin: KANBAN_PLUGIN, action: KanbanAction.CREATE },
+                      { action: SpaceAction.ADD_OBJECT, data: { target } },
+                      { action: NavigationAction.OPEN },
+                    ]);
+                  },
+                  properties: {
+                    label: ['create kanban label', { ns: KANBAN_PLUGIN }],
+                    icon: (props: IconProps) => <Kanban {...props} />,
+                    iconSymbol: 'ph--kanban--regular',
+                    testId: 'kanbanPlugin.createObject',
+                  },
+                },
+              ];
+            },
+          });
+        },
+      },
+      surface: {
+        component: ({ data, role }) => {
+          switch (role) {
+            case 'main':
+              return data.active instanceof KanbanType ? <KanbanMain kanban={data.active} /> : null;
+            default:
+              return null;
+          }
+        },
+      },
+      intent: {
+        resolver: (intent) => {
+          switch (intent.action) {
+            case KanbanAction.CREATE: {
+              return { data: create(KanbanType, { columns: [] }) };
+            }
+          }
+        },
+      },
+    },
+  };
+};

package/src/components/KanbanBoard.tsx

@@ -0,0 +1,195 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  DndContext,
+  type DragEndEvent,
+  type DragMoveEvent,
+  type DragOverEvent,
+  DragOverlay,
+  type DragStartEvent,
+  type Modifier,
+  MouseSensor,
+  useSensor,
+} from '@dnd-kit/core';
+import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+import React, { type FC, useEffect, useState } from 'react';
+
+import { createSubscription } from '@dxos/react-client/echo';
+import { arrayMove, nonNullable } from '@dxos/util';
+
+import { KanbanCardComponent } from './KanbanCard';
+import { type ItemsMapper, KanbanColumnComponent, KanbanColumnComponentPlaceholder } from './KanbanColumn';
+import { findLocation, useSubscription } from './util';
+import type { KanbanColumnType, KanbanItemType, Location, KanbanModel } from '../types';
+
+// TODO(burdon): Touch sensors.
+// TODO(burdon): Prevent browser nav back when swiping left/right.
+// TODO(burdon): Consistently use FC?
+export const KanbanBoard: FC<{ model: KanbanModel }> = ({ model }) => {
+  const kanban = model.root;
+  // TODO(wittjosiah): Remove?
+  useSubscription(kanban.columns);
+
+  // TODO(burdon): Remove since now uses ECHO.
+  const [_, setIter] = useState([]);
+
+  useEffect(() => {
+    const handle = createSubscription(() => setIter([]));
+    handle.update([kanban.columns]);
+    return () => handle.unsubscribe();
+  }, []);
+
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 8,
+    },
+  });
+
+  // Dragging column.
+  // TODO(burdon): Dragging column causes flickering when dragging left to first column.
+  const [draggingColumn, setDraggingColumn] = useState<KanbanColumnType | undefined>();
+
+  // Dragging item.
+  const [draggingItem, setDraggingItem] = useState<{ source: Location; target?: Location }>();
+  // While dragging, temporarily remap which items should be visible inside each column.
+  const itemMapper: ItemsMapper = (column: string, items: KanbanItemType[]) => {
+    const { source, target } = draggingItem ?? {};
+    if (source && target) {
+      if (source?.column.id !== target?.column.id && (column === source?.column.id || column === target?.column.id)) {
+        const modified = [...items];
+        if (column === source.column.id) {
+          // Temporarily remove from old column.
+          modified.splice(source.idx!, 1);
+        } else if (column === target.column.id) {
+          // Temporarily insert into new column.
+          // TODO(burdon): Use ref to track item being temporarily moved.
+          modified.splice(target.idx ?? modified.length, 0, source.item!);
+        }
+
+        return modified;
+      }
+    }
+
+    return items;
+  };
+
+  const handleDragStart = ({ active }: DragStartEvent) => {
+    kanban.columns.filter(nonNullable).forEach((column) => {
+      if (column.id === active.id) {
+        setDraggingColumn(column);
+      } else {
+        const idx = column.items.filter(nonNullable).findIndex((item) => item.id === active.id);
+        if (idx !== -1) {
+          setDraggingItem({ source: { column, item: column.items![idx], idx } });
+        }
+      }
+    });
+  };
+
+  const handleDragMove = (event: DragMoveEvent) => {};
+
+  const handleDragOver = ({ active, over }: DragOverEvent) => {
+    if (draggingItem) {
+      const { source } = draggingItem;
+      const target = findLocation(kanban.columns.filter(nonNullable), over?.id as string);
+      if (active.id !== over?.id) {
+        setDraggingItem({ source, target });
+      }
+    }
+  };
+
+  // TODO(burdon): Call model to update.
+  const handleDragEnd = (event: DragEndEvent) => {
+    if (draggingColumn) {
+      const { active, over } = event;
+      const oldIndex = kanban.columns.filter(nonNullable).findIndex((column) => column.id === active.id);
+      const newIndex = kanban.columns.filter(nonNullable).findIndex((column) => column.id === over?.id);
+      arrayMove(kanban.columns, oldIndex, newIndex);
+    } else if (draggingItem) {
+      const { source, target } = draggingItem;
+      if (source.column.id === target!.column.id) {
+        if (target!.idx !== undefined) {
+          arrayMove(source.column.items!, source.idx!, target!.idx);
+        }
+      } else {
+        source.column.items!.splice(source.idx!, 1);
+        // TODO(burdon): Incorrect position when moving to new column.
+        target!.column.items!.splice(target!.idx ?? target!.column.items!.length, 0, source.item!);
+      }
+    }
+
+    setDraggingColumn(undefined);
+    setDraggingItem(undefined);
+  };
+
+  const handleDragCancel = () => {
+    setDraggingColumn(undefined);
+    setDraggingItem(undefined);
+  };
+
+  const handleCreateColumn = () => {
+    const column = model.createColumn();
+    kanban.columns.splice(kanban.columns.length, 0, column);
+  };
+
+  // TODO(burdon): Move to model.
+  const handleDeleteColumn = (id: string) => {
+    const index = kanban.columns.filter(nonNullable).findIndex((column) => column.id === id);
+    if (index >= 0) {
+      kanban.columns.splice(index, 1);
+    }
+  };
+
+  const customModifier: Modifier = ({ transform }) => {
+    if (draggingColumn) {
+      return {
+        ...transform,
+        y: 0,
+      };
+    } else {
+      return transform;
+    }
+  };
+
+  return (
+    <div className='flex overflow-x-scroll'>
+      <div className='flex m-4 space-x-4 snap-x'>
+        <DndContext
+          sensors={[mouseSensor]}
+          modifiers={[customModifier]}
+          onDragStart={handleDragStart}
+          onDragMove={handleDragMove}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          onDragCancel={handleDragCancel}
+        >
+          <SortableContext
+            strategy={horizontalListSortingStrategy}
+            items={kanban.columns.filter(nonNullable).map(({ id }) => id!)}
+          >
+            {kanban.columns.filter(nonNullable).map((column) => (
+              <KanbanColumnComponent
+                key={column.id}
+                column={column}
+                itemMapper={itemMapper}
+                onCreate={(column: KanbanColumnType) => model.createItem(column)}
+                onDelete={() => handleDeleteColumn(column.id!)}
+              />
+            ))}
+          </SortableContext>
+
+          {/* Overlay required to drag across columns. */}
+          {draggingItem && (
+            <DragOverlay style={{ margin: 0 }}>
+              <KanbanCardComponent item={draggingItem.source.item!} onDelete={() => {}} />
+            </DragOverlay>
+          )}
+
+          {handleCreateColumn && <KanbanColumnComponentPlaceholder onAdd={handleCreateColumn} />}
+        </DndContext>
+      </div>
+    </div>
+  );
+};

package/src/components/KanbanCard.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DotsSixVertical, X } from '@phosphor-icons/react';
+import React, { type FC } from 'react';
+
+import { createDocAccessor } from '@dxos/react-client/echo';
+import { Button, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  createBasicExtensions,
+  createDataExtensions,
+  createThemeExtensions,
+  useTextEditor,
+} from '@dxos/react-ui-editor';
+import { getSize, mx, attentionSurface, focusRing } from '@dxos/react-ui-theme';
+
+import { KANBAN_PLUGIN } from '../meta';
+import { type KanbanColumnType, type KanbanItemType } from '../types';
+
+const DeleteItem = ({ onClick }: { onClick: () => void }) => {
+  const { t } = useTranslation(KANBAN_PLUGIN);
+  return (
+    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>
+      <span className='sr-only'>{t('delete item label')}</span>
+      <X className={getSize(4)} />
+    </Button>
+  );
+};
+
+export const KanbanCardComponent: FC<{
+  column?: KanbanColumnType;
+  item: KanbanItemType;
+  debug?: boolean;
+  onDelete?: () => void;
+}> = ({ column, item, debug = false, onDelete }) => {
+  const { themeMode } = useThemeContext();
+  const { t } = useTranslation(KANBAN_PLUGIN);
+  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable({
+    id: item.id,
+    data: { type: 'item', column },
+  });
+  const tx = transform ? Object.assign(transform, { scaleY: 1 }) : null;
+
+  const { parentRef, focusAttributes } = useTextEditor(
+    () => ({
+      initialValue: item.name,
+      extensions: [
+        createDataExtensions({ id: item.id, text: createDocAccessor(item, ['name']) }),
+        createBasicExtensions({ placeholder: t('item title placeholder') }),
+        createThemeExtensions({ themeMode }),
+      ],
+    }),
+    [item, themeMode],
+  );
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(tx), transition }}
+      className={mx('flex grow', isDragging && 'border border-neutral-400 dark:border-neutral-800')}
+    >
+      <div className={mx('flex items-start grow p-1', attentionSurface, isDragging && 'opacity-10')}>
+        {/* TODO(burdon): Standardize height (and below); e.g., via toolbar. */}
+        <button className='flex h-[40px] items-center' {...attributes} {...listeners}>
+          <DotsSixVertical className={getSize(5)} />
+        </button>
+        <div className='flex flex-col grow pt-1'>
+          <div {...focusAttributes} className={mx(focusRing, 'rounded-sm p-1')} ref={parentRef} />
+          {debug && <div className='text-xs text-red-800'>{item.id.slice(0, 9)}</div>}
+        </div>
+        {onDelete && (
+          <div className='flex h-[40px] items-center'>
+            <DeleteItem onClick={onDelete} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};