@dxos/plugin-kanban 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/src/capabilities/artifact-definition/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ArtifactDefinition = Capability.lazy('ArtifactDefinition', () => import('./artifact-definition'));

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -1,23 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common } from '@dxos/app-framework';
-
-import { KanbanBlueprint } from '../../blueprints';
-
-export type BlueprintCapabilities = [
-  Capability.Capability<typeof Common.Capability.Functions>,
-  Capability.Capability<typeof Common.Capability.BlueprintDefinition>,
-];
-
-const blueprintDefinition = Capability.makeModule<[], BlueprintCapabilities>(() =>
-  Effect.succeed([
-    Capability.contributes(Common.Capability.Functions, KanbanBlueprint.functions),
-    Capability.contributes(Common.Capability.BlueprintDefinition, KanbanBlueprint.make()),
-  ]),
-);
-
-export default blueprintDefinition;

package/src/capabilities/blueprint-definition/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));

package/src/capabilities/operation-resolver/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const OperationResolver = Capability.lazy('OperationResolver', () => import('./operation-resolver'));

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -1,133 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability, Common, UndoMapping } from '@dxos/app-framework';
-import { JsonSchema, Obj } from '@dxos/echo';
-import { type EchoSchema } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { OperationResolver } from '@dxos/operation';
-import { ProjectionModel, createEchoChangeCallback, getTypenameFromQuery } from '@dxos/schema';
-
-import { meta } from '../../meta';
-import { KanbanOperation } from '../../types';
-
-export default Capability.makeModule(() =>
-  Effect.succeed([
-    Capability.contributes(Common.Capability.UndoMapping, [
-      UndoMapping.make({
-        operation: KanbanOperation.DeleteCardField,
-        inverse: KanbanOperation.RestoreCardField,
-        deriveContext: (input, output) => ({
-          view: input.view,
-          field: output.field,
-          props: output.props,
-          index: output.index,
-        }),
-        message: ['card field deleted label', { ns: meta.id }],
-      }),
-      UndoMapping.make({
-        operation: KanbanOperation.DeleteCard,
-        inverse: KanbanOperation.RestoreCard,
-        deriveContext: (_input, output) => ({
-          card: output.card,
-        }),
-        message: ['card deleted label', { ns: meta.id }],
-      }),
-    ]),
-    Capability.contributes(Common.Capability.OperationResolver, [
-      OperationResolver.make({
-        operation: KanbanOperation.DeleteCardField,
-        handler: Effect.fnUntraced(function* ({ view, fieldId }) {
-          const registry = yield* Capability.get(Common.Capability.AtomRegistry);
-          const db = Obj.getDatabase(view);
-          invariant(db, 'Database not found');
-          const schema = yield* Effect.promise(() =>
-            db.schemaRegistry
-              .query({
-                typename: getTypenameFromQuery(view.query.ast)!,
-                location: ['database', 'runtime'],
-              })
-              .first(),
-          );
-
-          // Create projection with change callbacks that wrap in Obj.change().
-          // Schema from registry is an EchoSchema at runtime.
-          const projection = new ProjectionModel({
-            registry,
-            view,
-            baseSchema: JsonSchema.toJsonSchema(schema),
-            change: createEchoChangeCallback(view, schema as EchoSchema),
-          });
-
-          const result = projection.deleteFieldProjection(fieldId);
-
-          // Return data needed for undo.
-          return {
-            field: result.deleted.field,
-            props: result.deleted.props,
-            index: result.index,
-          };
-        }),
-      }),
-      OperationResolver.make({
-        operation: KanbanOperation.DeleteCard,
-        handler: ({ card }) =>
-          Effect.sync(() => {
-            const db = Obj.getDatabase(card);
-            invariant(db);
-            db.remove(card);
-
-            // Return data needed for undo.
-            return { card };
-          }),
-      }),
-
-      //
-      // RestoreCardField (inverse of DeleteCardField)
-      //
-      OperationResolver.make({
-        operation: KanbanOperation.RestoreCardField,
-        handler: Effect.fnUntraced(function* ({ view, field, props, index }) {
-          const registry = yield* Capability.get(Common.Capability.AtomRegistry);
-          const db = Obj.getDatabase(view);
-          invariant(db, 'Database not found');
-          const schema = yield* Effect.promise(() =>
-            db.schemaRegistry
-              .query({
-                typename: getTypenameFromQuery(view.query.ast)!,
-                location: ['database', 'runtime'],
-              })
-              .first(),
-          );
-
-          // Create projection with change callbacks that wrap in Obj.change().
-          // Schema from registry is an EchoSchema at runtime.
-          const projection = new ProjectionModel({
-            registry,
-            view,
-            baseSchema: JsonSchema.toJsonSchema(schema),
-            change: createEchoChangeCallback(view, schema as EchoSchema),
-          });
-
-          projection.setFieldProjection({ field, props }, index);
-        }),
-      }),
-
-      //
-      // RestoreCard (inverse of DeleteCard)
-      //
-      OperationResolver.make({
-        operation: KanbanOperation.RestoreCard,
-        handler: ({ card }) =>
-          Effect.sync(() => {
-            const db = Obj.getDatabase(card);
-            invariant(db);
-            db.add(card);
-          }),
-      }),
-    ]),
-  ]),
-);

package/src/capabilities/react-surface/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capability } from '@dxos/app-framework';
-
-export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/components/KanbanContainer.stories.tsx

@@ -1,226 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { RegistryContext } from '@effect-atom/atom-react';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Effect from 'effect/Effect';
-import React, { useCallback, useContext } from 'react';
-import { expect, waitFor, within } from 'storybook/test';
-
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, type QueryAST, Type } from '@dxos/echo';
-import { type Mutable } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
-import { Filter, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
-import { withTheme } from '@dxos/react-ui/testing';
-import { ViewEditor } from '@dxos/react-ui-form';
-import {
-  Kanban as KanbanComponent,
-  translations as kanbanTranslations,
-  useKanbanModel,
-  useProjectionModel,
-} from '@dxos/react-ui-kanban';
-import { Kanban } from '@dxos/react-ui-kanban/types';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { View, getTypenameFromQuery } from '@dxos/schema';
-import { Organization, Person } from '@dxos/types';
-
-import { translations } from '../translations';
-
-faker.seed(0);
-
-const createOrg = () => ({
-  name: faker.commerce.productName(),
-  description: faker.lorem.paragraph(),
-  image: faker.image.url(),
-  website: faker.internet.url(),
-  status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
-});
-
-//
-// Story components.
-//
-
-const DefaultComponent = () => {
-  const registry = useContext(RegistryContext);
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
-  const [object] = useQuery(space?.db, Filter.type(Kanban.Kanban));
-  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
-  const schema = useSchema(space?.db, typename);
-
-  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const projection = useProjectionModel(schema, object, registry);
-  const model = useKanbanModel({
-    object,
-    projection,
-    items: filteredObjects,
-  });
-
-  const handleAddCard = useCallback(
-    (columnValue: string | undefined) => {
-      const path = model?.columnFieldPath;
-      if (space && schema && Type.isObjectSchema(schema) && path) {
-        const card = Obj.make(schema, {
-          ...createOrg(),
-          [path]: columnValue,
-        });
-
-        space.db.add(card);
-        return card.id;
-      }
-    },
-    [space, schema, model],
-  );
-
-  const handleRemoveCard = useCallback((card: { id: string }) => Obj.isObject(card) && space?.db.remove(card), [space]);
-
-  const handleUpdateQuery = useCallback(
-    (newQuery: QueryAST.Query) => {
-      invariant(schema);
-      invariant(Type.isMutable(schema));
-      invariant(object.view.target);
-
-      schema.updateTypename(getTypenameFromQuery(newQuery));
-      Obj.change(object.view.target, (v) => {
-        v.query.ast = newQuery as Mutable<typeof newQuery>;
-      });
-    },
-    [object, schema],
-  );
-
-  if (!schema || !object.view.target) {
-    return null;
-  }
-
-  return (
-    <div className='grow grid grid-cols-[1fr_350px] overflow-hidden'>
-      {model ? <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
-      <div className='flex flex-col bs-full overflow-hidden border-l border-separator'>
-        <ViewEditor
-          classNames='p-2'
-          registry={space?.db.schemaRegistry}
-          schema={schema}
-          view={object.view.target}
-          onQueryChanged={handleUpdateQuery}
-          onDelete={(fieldId: string) => {
-            console.log('[ViewEditor]', 'onDelete', fieldId);
-          }}
-        />
-        <JsonFilter data={{ view: object.view.target, schema }} classNames='text-xs' />
-      </div>
-    </div>
-  );
-};
-
-//
-// Story definitions.
-//
-
-const meta = {
-  title: 'plugins/plugin-kanban/Kanban',
-  component: DefaultComponent,
-  render: () => <DefaultComponent />,
-  decorators: [
-    withTheme,
-    withPluginManager({
-      plugins: [
-        ...corePlugins(),
-        ClientPlugin({
-          types: [Organization.Organization, Person.Person, View.View, Kanban.Kanban],
-          onClientInitialized: ({ client }) =>
-            Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
-              const space = yield* Effect.promise(() => client.spaces.create());
-              yield* Effect.promise(() => space.waitUntilReady());
-
-              const { view } = yield* Effect.promise(() =>
-                View.makeFromDatabase({
-                  db: space.db,
-                  typename: Organization.Organization.typename,
-                  pivotFieldName: 'status',
-                }),
-              );
-              const kanban = Kanban.make({ view });
-              space.db.add(kanban);
-
-              // TODO(burdon): Replace with sdk/schema/testing.
-              Array.from({ length: 80 }).map(() => {
-                return space.db.add(Obj.make(Organization.Organization, createOrg()));
-              });
-            }),
-        }),
-        PreviewPlugin(),
-        SpacePlugin({}),
-        StorybookPlugin({}),
-      ],
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations: [...translations, ...kanbanTranslations],
-  },
-} satisfies Meta<typeof DefaultComponent>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for the kanban columns to render by finding the status tags.
-    // Organization.StatusOptions: prospect, qualified, active, commit, reject.
-    const activeTag = await canvas.findByText('Active', undefined, { timeout: 30_000 });
-    const prospectTag = await canvas.findByText('Prospect', undefined, { timeout: 10_000 });
-    const commitTag = await canvas.findByText('Commit', undefined, { timeout: 10_000 });
-
-    // Verify all expected columns are rendered.
-    await expect(activeTag).toBeTruthy();
-    await expect(prospectTag).toBeTruthy();
-    await expect(commitTag).toBeTruthy();
-
-    // Find the column containers.
-    const activeColumn = activeTag.closest('[data-dx-stack-item]') as HTMLElement;
-    const prospectColumn = prospectTag.closest('[data-dx-stack-item]') as HTMLElement;
-    await expect(activeColumn).toBeTruthy();
-    await expect(prospectColumn).toBeTruthy();
-
-    // Wait for cards to render in the columns.
-    // Cards have data-dx-item-id attribute from StackItem.Root.
-    const getColumnCards = (column: HTMLElement) =>
-      Array.from(column.querySelectorAll('[data-dx-item-id]')) as HTMLElement[];
-
-    await waitFor(() => expect(getColumnCards(activeColumn).length).toBeGreaterThan(0));
-
-    // Verify cards are distributed across columns.
-    const activeCards = getColumnCards(activeColumn);
-    const prospectCards = getColumnCards(prospectColumn);
-    await expect(activeCards.length).toBeGreaterThan(0);
-    await expect(prospectCards.length).toBeGreaterThan(0);
-
-    // Verify cards have drag handles (first button in toolbar).
-    const firstActiveCard = activeCards[0];
-    const buttons = firstActiveCard.querySelectorAll('button');
-    await expect(buttons.length).toBeGreaterThan(0);
-
-    // Verify the drop zone exists in each column.
-    const activeDropZone = activeColumn.querySelector('.kanban-drop');
-    const prospectDropZone = prospectColumn.querySelector('.kanban-drop');
-    await expect(activeDropZone).toBeTruthy();
-    await expect(prospectDropZone).toBeTruthy();
-
-    // TODO(wittjosiah): Get drag & drop tests working.
-    //   See packages/apps/composer-app/src/playwright/stack.spec.ts for reference.
-  },
-};

package/src/components/KanbanContainer.tsx

@@ -1,84 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { RegistryContext } from '@effect-atom/atom-react';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
-
-import { Common } from '@dxos/app-framework';
-import { type SurfaceComponentProps, useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
-import { useQuery } from '@dxos/react-client/echo';
-import { Kanban as KanbanComponent, useKanbanModel, useProjectionModel } from '@dxos/react-ui-kanban';
-import { type Kanban } from '@dxos/react-ui-kanban/types';
-import { Layout } from '@dxos/react-ui-mosaic';
-import { getTypenameFromQuery } from '@dxos/schema';
-
-import { KanbanOperation } from '../types';
-
-export type KanbanContainerProps = SurfaceComponentProps<Kanban.Kanban>;
-
-export const KanbanContainer = ({ role, subject: object }: KanbanContainerProps) => {
-  const registry = useContext(RegistryContext);
-  const schemas = useCapabilities(Common.Capability.Schema);
-  const [cardSchema, setCardSchema] = useState<Type.Obj.Any>();
-  const db = Obj.getDatabase(object);
-  const { invokePromise } = useOperationInvoker();
-  const typename = object.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
-
-  useEffect(() => {
-    const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
-    if (staticSchema) {
-      setCardSchema(staticSchema);
-    }
-    if (!staticSchema && typename && db) {
-      const query = db.schemaRegistry.query({ typename });
-      const unsubscribe = query.subscribe(
-        () => {
-          const [schema] = query.results;
-          if (schema) {
-            setCardSchema(schema);
-          }
-        },
-        { fire: true },
-      );
-      return unsubscribe;
-    }
-  }, [schemas, db, typename]);
-
-  const objects = useQuery(db, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const projection = useProjectionModel(cardSchema, object, registry);
-  const model = useKanbanModel({
-    object,
-    projection,
-    items: filteredObjects,
-  });
-
-  const handleAddCard = useCallback(
-    (columnValue: string | undefined) => {
-      const path = model?.columnFieldPath;
-      if (db && cardSchema && path) {
-        const card = Obj.make(cardSchema, { [path]: columnValue });
-        db.add(card);
-        return card.id;
-      }
-    },
-    [db, cardSchema, model],
-  );
-
-  const handleRemoveCard = useCallback(
-    (card: { id: string }) => {
-      void invokePromise(KanbanOperation.DeleteCard, { card });
-    },
-    [invokePromise],
-  );
-
-  return (
-    <Layout.Main role={role}>
-      {model && <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
-    </Layout.Main>
-  );
-};