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

package/src/components/KanbanColumn.tsx

@@ -0,0 +1,143 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DotsSixVertical, X, Plus } from '@phosphor-icons/react';
+import React, { type FC } from 'react';
+
+import { Button, Input, useTranslation } from '@dxos/react-ui';
+import { modalSurface, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
+import { nonNullable } from '@dxos/util';
+
+import { KanbanCardComponent } from './KanbanCard';
+import { useSubscription } from './util';
+import { KANBAN_PLUGIN } from '../meta';
+import { type KanbanColumnType, type KanbanItemType } from '../types';
+
+export type ItemsMapper = (column: string, items: KanbanItemType[]) => KanbanItemType[];
+
+const DeleteColumn = ({ 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 column label')}</span>
+      <X className={getSize(4)} />
+    </Button>
+  );
+};
+
+const AddItem = ({ 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('add item label')}</span>
+      <Plus className={getSize(4)} />
+    </Button>
+  );
+};
+
+// TODO(burdon): Factor out container.
+export const KanbanColumnComponentPlaceholder: FC<{ onAdd: () => void }> = ({ onAdd }) => {
+  const { t } = useTranslation(KANBAN_PLUGIN);
+  return (
+    <div className={mx('flex flex-col justify-center shadow rounded w-[300px] h-[300px]', groupSurface)}>
+      <Button variant='ghost' onClick={onAdd} classNames='plb-0 pli-0.5 -mlb-1'>
+        <span className='sr-only'>{t('add column label')}</span>
+        <Plus className={getSize(6)} />
+      </Button>
+    </div>
+  );
+};
+
+export const KanbanColumnComponent: FC<{
+  column: KanbanColumnType;
+  itemMapper?: ItemsMapper;
+  debug?: boolean; // TODO(burdon): Context.
+  onCreate?: (column: KanbanColumnType) => KanbanItemType;
+  onDelete?: () => void;
+}> = ({ column, itemMapper, debug = false, onCreate, onDelete }) => {
+  const { t } = useTranslation(KANBAN_PLUGIN);
+
+  // TODO(wittjosiah): Remove?
+  useSubscription([column.items]);
+  const items = itemMapper?.(column.id!, column.items.filter(nonNullable)) ?? column.items!;
+
+  const { setNodeRef: setDroppableNodeRef } = useDroppable({ id: column.id! });
+  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable({
+    id: column.id!,
+    data: { type: 'column' },
+  });
+  const tx = transform ? Object.assign(transform, { scaleY: 1 }) : null;
+
+  const handleAddItem = onCreate
+    ? () => {
+        const item = onCreate(column);
+        column.items!.splice(column.items!.length, 0, item);
+      }
+    : undefined;
+
+  const handleDeleteItem = (id: string) => {
+    const index = column.items.filter(nonNullable).findIndex((column) => column.id === id);
+    if (index >= 0) {
+      column.items!.splice(index, 1);
+    }
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(tx), transition }}
+      className={mx('flex flex-col snap-center overflow-y-hidden', isDragging && 'relative z-10')}
+    >
+      {/* TODO(burdon): Width approx mobile phone width. */}
+      <div
+        className={mx(
+          'flex flex-col py-2 overflow-hidden shadow rounded w-[300px] min-h-[300px]',
+          isDragging ? modalSurface : groupSurface,
+        )}
+      >
+        <div className='flex items-center mb-2 px-2'>
+          <button {...attributes} {...listeners}>
+            <DotsSixVertical className={getSize(5)} />
+          </button>
+
+          <Input.Root>
+            <Input.Label srOnly>{t('column title label')}</Input.Label>
+            <Input.TextInput
+              variant='subdued'
+              classNames='px-2'
+              placeholder={t('column title placeholder')}
+              defaultValue={column.name}
+              onChange={({ target: { value } }) => (column.name = value)}
+            />
+          </Input.Root>
+
+          {/* TODO(burdon): Menu. */}
+          {onDelete && <DeleteColumn onClick={onDelete} />}
+        </div>
+
+        {/* TODO(burdon): Scrolling (radix; see kai/mosaic). */}
+        <SortableContext strategy={verticalListSortingStrategy} items={items.filter(nonNullable).map(({ id }) => id)}>
+          <div ref={setDroppableNodeRef} className='flex flex-col grow overflow-y-scroll space-y-2 pr-4'>
+            {items.filter(nonNullable).map((item) => (
+              <div key={item.id} id={item.id} className='flex pl-2'>
+                <KanbanCardComponent column={column} item={item} onDelete={() => handleDeleteItem(item.id)} />
+              </div>
+            ))}
+          </div>
+        </SortableContext>
+
+        {handleAddItem && (
+          <div className='flex justify-center mt-2'>
+            <AddItem onClick={handleAddItem} />
+          </div>
+        )}
+
+        {debug && <div className='px-2 text-xs text-red-800'>{column.id!.slice(0, 9)}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/KanbanMain.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC } from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { getSpace } from '@dxos/react-client/echo';
+import { Main } from '@dxos/react-ui';
+import { topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from '@dxos/react-ui-theme';
+
+import { KanbanBoard } from './KanbanBoard';
+import { type KanbanType, KanbanColumnType, KanbanItemType, type KanbanModel } from '../types';
+
+const KanbanMain: FC<{ kanban: KanbanType }> = ({ kanban }) => {
+  // const { t } = useTranslation(KANBAN_PLUGIN);
+  const space = getSpace(kanban);
+  if (!space) {
+    return null;
+  }
+
+  // TODO(burdon): Should plugin create and pass in model?
+  const model: KanbanModel = {
+    root: kanban, // TODO(burdon): How to keep pure?
+    createColumn: () => space.db.add(create(KanbanColumnType, { items: [] })),
+    // TODO(burdon): Add metadata from column in the case of projections.
+    createItem: (column) => space.db.add(create(KanbanItemType, { name: '' })),
+  };
+
+  return (
+    <Main.Content classNames={[fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
+      <KanbanBoard model={model} />
+    </Main.Content>
+  );
+};
+
+export default KanbanMain;

package/src/components/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+// Lazily load components for content surfaces.
+export const KanbanMain = React.lazy(() => import('./KanbanMain'));

package/src/components/util.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { createSubscription } from '@dxos/react-client/echo';
+import { nonNullable } from '@dxos/util';
+
+import { type KanbanColumnType, type Location } from '../types';
+
+// TODO(burdon): Factor out.
+export const useSubscription = (data: any) => {
+  const [_, setIter] = useState([]);
+  useEffect(() => {
+    const handle = createSubscription(() => setIter([]));
+    handle.update(data);
+    return () => handle.unsubscribe();
+  }, []);
+};
+
+/**
+ * Find the column or item within the model.
+ */
+// TODO(burdon): Move to model.
+export const findLocation = (columns: KanbanColumnType[], id: string): Location | undefined => {
+  for (const column of columns) {
+    // TODO(burdon): Need transient ID for UX.
+    if (column.id === id) {
+      return { column };
+    } else {
+      const idx = column.items.filter(nonNullable).findIndex((item) => item.id === id);
+      if (idx !== -1) {
+        return { column, item: column.items![idx], idx };
+      }
+    }
+  }
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { KanbanPlugin } from './KanbanPlugin';
+
+export default KanbanPlugin;
+
+export * from './KanbanPlugin';

package/src/meta.tsx

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Kanban, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const KANBAN_PLUGIN = 'dxos.org/plugin/kanban';
+
+export default pluginMeta({
+  id: KANBAN_PLUGIN,
+  name: 'Kanban',
+  description: 'Kanban board for managing tasks.',
+  tags: ['experimental'],
+  iconComponent: (props: IconProps) => <Kanban {...props} />,
+  iconSymbol: 'ph--kanban--regular',
+});

package/src/sanity.test.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+describe('console', () => {
+  test('sanity', () => {
+    expect(true).to.be.true;
+  });
+});

package/src/stories/testing.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { create } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+
+import { KanbanColumnType, KanbanItemType, KanbanType } from '../types';
+
+// TODO(burdon): Types.
+export const createKanban = () => {
+  return create(KanbanType, {
+    name: faker.lorem.words(3),
+    columns: faker.helpers.multiple(
+      () =>
+        create(KanbanColumnType, {
+          name: faker.lorem.words(3),
+          items: faker.helpers.multiple(
+            () =>
+              create(KanbanItemType, {
+                name: faker.lorem.words(faker.number.int({ min: 3, max: 24 })) + '.',
+              }),
+            { count: faker.number.int(8) },
+          ),
+        }),
+      { count: { min: 2, max: 8 } },
+    ),
+  });
+};

package/src/translations.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { KANBAN_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [KANBAN_PLUGIN]: {
+        'plugin name': 'Kanban',
+        'kanban title label': 'Title',
+        'kanban title placeholder': 'New kanban',
+        'column title label': 'Column title',
+        'column title placeholder': 'New column',
+        'item title label': 'Item title',
+        'item title placeholder': 'New item',
+        'add column label': 'Add column',
+        'add item label': 'Add item',
+        'delete column label': 'Delete column',
+        'delete item label': 'Delete item',
+        'create kanban label': 'Create kanban',
+      },
+    },
+  },
+];

package/src/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './kanban';
+export * from './types';

package/src/types/kanban.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Expando, ref, S, TypedObject } from '@dxos/echo-schema';
+
+export class KanbanItemType extends TypedObject({ typename: 'dxos.org/type/KanbanItem', version: '0.1.0' })({
+  object: S.optional(ref(Expando)),
+  name: S.optional(S.String),
+  index: S.optional(S.String),
+}) {}
+
+export class KanbanColumnType extends TypedObject({ typename: 'dxos.org/type/KanbanColumn', version: '0.1.0' })({
+  name: S.optional(S.String),
+  index: S.optional(S.String),
+  items: S.mutable(S.Array(ref(KanbanItemType))),
+}) {}
+
+export class KanbanType extends TypedObject({ typename: 'dxos.org/type/Kanban', version: '0.1.0' })({
+  name: S.optional(S.String),
+  columns: S.mutable(S.Array(ref(KanbanColumnType))),
+}) {}

package/src/types/types.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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';
+import { KANBAN_PLUGIN } from '../meta';
+
+/**
+ * Kanban data model.
+ * A Kanban board is a collection of columns, each of which contains a collection of items.
+ * The layout of columns and items is controlled by models.
+ * The underlying data model may be represented by direct object relationships
+ * (e.g., a column object containing an array of ordered items) or projections constructed
+ * by the model (e.g., a query of items based on metadata within a column object).
+ */
+
+const KANBAN_ACTION = `${KANBAN_PLUGIN}/action`;
+
+export enum KanbanAction {
+  CREATE = `${KANBAN_ACTION}/create`,
+}
+
+export type KanbanPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  MetadataRecordsProvides &
+  TranslationsProvides &
+  SchemaProvides;
+
+// TODO(burdon): Undo?
+// TODO(burdon): Typescript types (replace proto with annotations?)
+// TODO(burdon): Should pure components depend on ECHO? Relationship between ECHO object/array and Observable.
+// TODO(burdon): Can the plugin configure the object based on the data? E.g., how are the models constructed?
+// TODO(burdon): Create models. Simple first based on actual data.
+//  Model is always a projection since the dragging state is tentative.
+
+// TODO(burdon): Extend model for moving items (in and across columns).
+export interface KanbanModel {
+  root: KanbanType;
+  createColumn(): KanbanColumnType;
+  createItem(column: KanbanColumnType): KanbanItemType;
+}
+
+export type Location = {
+  column: KanbanColumnType;
+  item?: KanbanItemType;
+  idx?: number;
+};