@dxos/plugin-kanban 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/components/KanbanContainer.stories.tsx

@@ -1,192 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-import { type StoryObj, type Meta } from '@storybook/react';
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Type } from '@dxos/echo';
-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 { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { Filter, useSpaces, useQuery, useSchema } from '@dxos/react-client/echo';
-import { ViewEditor } from '@dxos/react-ui-form';
-import { Kanban, KanbanType, useKanbanModel } from '@dxos/react-ui-kanban';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType, ViewProjection } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
-
-import { initializeKanban } from '../testing';
-import translations from '../translations';
-
-faker.seed(0);
-
-//
-// Story components.
-//
-
-const rollOrg = () => ({
-  name: faker.commerce.productName(),
-  description: faker.lorem.paragraph(),
-  image: faker.image.url(),
-  website: faker.internet.url(),
-  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
-});
-
-const StorybookKanban = () => {
-  const client = useClient();
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
-  const kanbans = useQuery(space, Filter.type(KanbanType));
-  const [kanban, setKanban] = useState<KanbanType>();
-  const [projection, setProjection] = useState<ViewProjection>();
-  const schema = useSchema(client, space, kanban?.cardView?.target?.query.typename);
-
-  useEffect(() => {
-    if (kanbans.length && !kanban) {
-      const kanban = kanbans[0];
-      setKanban(kanban);
-    }
-  }, [kanbans]);
-
-  useEffect(() => {
-    if (kanban?.cardView?.target && schema) {
-      const jsonSchema = Type.toJsonSchema(schema);
-      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
-    }
-    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-    //  @dmaretskyi? Once resolved, update in multiple places (e.g., storybooks).
-  }, [kanban?.cardView?.target, schema, JSON.stringify(schema ? Type.toJsonSchema(schema) : {})]);
-
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const model = useKanbanModel({
-    kanban,
-    schema,
-    projection,
-    items: filteredObjects,
-  });
-
-  const handleAddCard = useCallback(
-    (columnValue: string | undefined) => {
-      const path = model?.columnFieldPath;
-      if (space && schema && path) {
-        const card = Obj.make(schema, {
-          ...rollOrg(),
-          [path]: columnValue,
-        });
-
-        space.db.add(card);
-        return card.id;
-      }
-    },
-    [space, schema, model],
-  );
-
-  const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
-
-  const handleTypenameChanged = useCallback(
-    (typename: string) => {
-      invariant(schema);
-      invariant(Type.isMutable(schema));
-      invariant(kanban?.cardView?.target);
-
-      schema.updateTypename(typename);
-      kanban.cardView.target.query.typename = typename;
-    },
-    [kanban?.cardView?.target, schema],
-  );
-
-  if (!schema || !kanban) {
-    return null;
-  }
-
-  return (
-    <div className='grow grid grid-cols-[1fr_350px]'>
-      {model ? <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
-      <div className='flex flex-col bs-full border-is border-separator overflow-y-auto'>
-        {kanban.cardView && (
-          <ViewEditor
-            registry={space?.db.schemaRegistry}
-            schema={schema}
-            view={kanban.cardView.target!}
-            onTypenameChanged={handleTypenameChanged}
-            onDelete={(fieldId: string) => {
-              console.log('[ViewEditor]', 'onDelete', fieldId);
-            }}
-          />
-        )}
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ cardView: kanban.cardView?.target, cardSchema: schema }, null, 2)}
-        </SyntaxHighlighter>
-      </div>
-    </div>
-  );
-};
-
-type StoryProps = {
-  rows?: number;
-};
-
-//
-// Story definitions.
-//
-
-const meta: Meta<StoryProps> = {
-  title: 'plugins/plugin-kanban/Kanban',
-  component: StorybookKanban,
-  render: () => <StorybookKanban />,
-  parameters: { translations },
-  decorators: [
-    withLayout({ fullscreen: true }),
-    withPluginManager({
-      plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        ClientPlugin({
-          types: [DataType.Organization, DataType.Person, KanbanType],
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-            const space = await client.spaces.create();
-            await space.waitUntilReady();
-            const { schema, kanban } = await initializeKanban({
-              space,
-              client,
-              typename: DataType.Organization.typename,
-              initialPivotColumn: 'status',
-            });
-            space.db.add(kanban);
-
-            if (schema) {
-              // TODO(burdon): Replace with sdk/schema/testing.
-              Array.from({ length: 80 }).map(() => {
-                return space.db.add(Obj.make(schema, rollOrg()));
-              });
-            }
-          },
-        }),
-        StorybookLayoutPlugin(),
-        PreviewPlugin(),
-        SpacePlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-      ],
-    }),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<StoryProps>;
-
-export const Default: Story = {};

package/src/components/KanbanContainer.tsx

@@ -1,95 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Filter, Obj, Type } from '@dxos/echo';
-import { EchoSchema, type TypedObject } from '@dxos/echo-schema';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
-import { useClient } from '@dxos/react-client';
-import { useQuery, getSpace } from '@dxos/react-client/echo';
-import { type KanbanType, useKanbanModel, Kanban } from '@dxos/react-ui-kanban';
-import { StackItem } from '@dxos/react-ui-stack';
-import { ViewProjection } from '@dxos/schema';
-
-import { KanbanAction } from '../types';
-
-export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }) => {
-  const client = useClient();
-  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ViewProjection>();
-  const space = getSpace(kanban);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const jsonSchema = useMemo(() => {
-    if (!cardSchema) {
-      return undefined;
-    }
-    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
-  }, [cardSchema]);
-
-  useEffect(() => {
-    const typename = kanban.cardView?.target?.query?.typename;
-    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
-    if (staticSchema) {
-      setCardSchema(() => staticSchema as TypedObject<any, any>);
-    }
-    if (!staticSchema && typename && space) {
-      const query = space.db.schemaRegistry.query({ typename });
-      const unsubscribe = query.subscribe(
-        () => {
-          const [schema] = query.results;
-          if (schema) {
-            setCardSchema(schema);
-          }
-        },
-        { fire: true },
-      );
-      return unsubscribe;
-    }
-  }, [kanban.cardView?.target?.query, space]);
-
-  useEffect(() => {
-    if (kanban.cardView?.target && jsonSchema) {
-      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
-    }
-    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-  }, [kanban.cardView?.target, JSON.stringify(jsonSchema)]);
-
-  const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const model = useKanbanModel({
-    kanban,
-    schema: cardSchema,
-    projection,
-    items: filteredObjects,
-  });
-
-  const handleAddCard = useCallback(
-    (columnValue: string | undefined) => {
-      const path = model?.columnFieldPath;
-      if (space && cardSchema && path) {
-        const card = Obj.make(cardSchema, { [path]: columnValue });
-        space.db.add(card);
-        return card.id;
-      }
-    },
-    [space, cardSchema, model],
-  );
-
-  const handleRemoveCard = useCallback(
-    (card: { id: string }) => {
-      void dispatch(createIntent(KanbanAction.DeleteCard, { card }));
-    },
-    [dispatch],
-  );
-
-  return (
-    <StackItem.Content>
-      {model && <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
-    </StackItem.Content>
-  );
-};

package/src/components/KanbanViewEditor.tsx

@@ -1,104 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
-import { EchoSchema, FormatEnum } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
-import { useClient } from '@dxos/react-client';
-import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
-import { ViewEditor, Form, SelectInput, type CustomInputMap } from '@dxos/react-ui-form';
-import { type KanbanType, KanbanSettingsSchema } from '@dxos/react-ui-kanban';
-import { ViewType, ViewProjection } from '@dxos/schema';
-
-import { KanbanAction } from '../types';
-
-type KanbanViewEditorProps = { kanban: KanbanType };
-
-export const KanbanViewEditor = ({ kanban }: KanbanViewEditorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const space = getSpace(kanban);
-  const currentTypename = useMemo(
-    () => kanban?.cardView?.target?.query?.typename,
-    [kanban?.cardView?.target?.query?.typename],
-  );
-  const schema = useSchema(client, space, currentTypename);
-  const views = useQuery(space, Filter.type(ViewType));
-
-  const handleUpdateTypename = useCallback(
-    (newTypename: string) => {
-      invariant(schema);
-      invariant(Type.isMutable(schema));
-
-      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
-      for (const view of matchingViews) {
-        view.query.typename = newTypename;
-      }
-
-      schema.updateTypename(newTypename);
-    },
-    [views, schema],
-  );
-
-  const handleDelete = useCallback(
-    (fieldId: string) => {
-      void dispatch?.(createIntent(KanbanAction.DeleteCardField, { kanban, fieldId }));
-    },
-    [dispatch, kanban],
-  );
-
-  const projection = useMemo(() => {
-    if (kanban?.cardView?.target && schema) {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : Type.toJsonSchema(schema);
-      return new ViewProjection(jsonSchema, kanban.cardView.target);
-    }
-  }, [kanban?.cardView?.target, JSON.stringify(schema)]);
-
-  const fieldProjections = projection?.getFieldProjections() || [];
-  const selectFields = fieldProjections
-    .filter((field) => field.props.format === FormatEnum.SingleSelect)
-    .map(({ field }) => ({ value: field.id, label: field.path }));
-
-  const handleSave = useCallback(
-    (values: Partial<{ columnFieldId: string }>) => {
-      kanban.columnFieldId = values.columnFieldId;
-    },
-    [kanban],
-  );
-
-  const initialValues = useMemo(() => ({ columnFieldId: kanban.columnFieldId }), [kanban.columnFieldId]);
-  const custom: CustomInputMap = useMemo(
-    () => ({ columnFieldId: (props) => <SelectInput {...props} options={selectFields} /> }),
-    [selectFields],
-  );
-
-  if (!space || !schema || !kanban.cardView?.target) {
-    return null;
-  }
-
-  return (
-    <>
-      <Form
-        Custom={custom}
-        schema={KanbanSettingsSchema}
-        values={initialValues}
-        onSave={handleSave}
-        autoSave
-        outerSpacing={false}
-        classNames='pbs-inputSpacingBlock'
-      />
-      <ViewEditor
-        registry={space.db.schemaRegistry}
-        schema={schema}
-        view={kanban.cardView.target}
-        onTypenameChanged={Type.isMutable(schema) ? handleUpdateTypename : undefined}
-        onDelete={Type.isMutable(schema) ? handleDelete : undefined}
-        outerSpacing={false}
-      />
-    </>
-  );
-};

package/src/testing/initialize-kanban.ts

@@ -1,128 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { Obj, Ref, Type } from '@dxos/echo';
-import { TypedObject, FormatEnum, TypeEnum, type JsonProp } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
-import { type Client, PublicKey } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
-import { KanbanType } from '@dxos/react-ui-kanban';
-import { createView, ViewProjection, createFieldId, getSchemaProperties } from '@dxos/schema';
-import { capitalize } from '@dxos/util';
-
-// TODO(wittjosiah): UI package shouldn't depend on client.
-
-type InitializeKanbanProps = {
-  client: Client;
-  space: Space;
-  name?: string;
-  typename?: string;
-  initialPivotColumn?: string;
-};
-
-const createDefaultTaskSchema = () => {
-  const stateOptions = [
-    { id: PublicKey.random().truncate(), title: 'Draft', color: 'indigo' },
-    { id: PublicKey.random().truncate(), title: 'Active', color: 'cyan' },
-    { id: PublicKey.random().truncate(), title: 'Completed', color: 'emerald' },
-  ];
-
-  const schema = TypedObject({
-    typename: `example.com/type/${PublicKey.random().truncate()}`,
-    version: '0.1.0',
-  })({
-    title: Schema.optional(Schema.String).annotations({ title: 'Title' }),
-    description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
-    state: Schema.optional(Schema.String),
-  });
-
-  return { schema, stateOptions };
-};
-
-export const initializeKanban = async ({
-  client,
-  space,
-  name,
-  typename,
-  initialPivotColumn,
-}: InitializeKanbanProps): Promise<{ kanban: KanbanType; schema?: Type.Schema }> => {
-  if (typename) {
-    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
-    const schema = await space.db.schemaRegistry.query({ typename }).firstOrUndefined();
-
-    const ast = staticSchema?.ast ?? schema?.ast;
-    const jsonSchema = staticSchema ? Type.toJsonSchema(staticSchema) : schema?.jsonSchema;
-    invariant(ast, `Schema not found: ${typename}`);
-    invariant(jsonSchema, `Schema not found: ${typename}`);
-
-    const fields = getSchemaProperties(ast)
-      .filter((prop) => prop.type !== 'object' || prop.format === FormatEnum.Ref)
-      .map((prop) => prop.name);
-
-    const view = createView({
-      name: "Kanban's card view",
-      typename,
-      jsonSchema,
-      fields,
-    });
-
-    const kanban = Obj.make(KanbanType, { cardView: Ref.make(view), columnFieldId: undefined, name });
-    if (initialPivotColumn) {
-      const viewProjection = new ViewProjection(jsonSchema, view);
-      const fieldId = viewProjection.getFieldId(initialPivotColumn);
-      if (fieldId) {
-        kanban.columnFieldId = fieldId;
-      }
-    }
-    return { kanban, schema };
-  } else {
-    const { schema: taskSchema, stateOptions } = createDefaultTaskSchema();
-    const [schema] = await space.db.schemaRegistry.register([taskSchema]);
-
-    const view = createView({
-      name: "Kanban's card view",
-      typename: schema.typename,
-      jsonSchema: schema.jsonSchema,
-      fields: ['title', 'description'],
-    });
-
-    const viewProjection = new ViewProjection(schema.jsonSchema, view);
-
-    // Set description field to Markdown format.
-    const descriptionFieldId = viewProjection.getFieldId('description');
-    if (descriptionFieldId) {
-      const fieldProjection = viewProjection.getFieldProjection(descriptionFieldId);
-      if (fieldProjection) {
-        viewProjection.setFieldProjection({
-          ...fieldProjection,
-          props: { ...fieldProjection.props, format: FormatEnum.Markdown },
-        });
-      }
-    }
-
-    const initialPivotField = 'state';
-    viewProjection.setFieldProjection({
-      field: {
-        id: createFieldId(),
-        path: initialPivotField as JsonProp,
-        size: 150,
-      },
-      props: {
-        property: initialPivotField as JsonProp,
-        type: TypeEnum.String,
-        format: FormatEnum.SingleSelect,
-        title: capitalize(initialPivotField),
-        options: stateOptions,
-      },
-    });
-
-    const fieldId = viewProjection.getFieldId(initialPivotField);
-    invariant(fieldId);
-
-    const kanban = Obj.make(KanbanType, { cardView: Ref.make(view), columnFieldId: fieldId });
-    return { kanban, schema };
-  }
-};

package/src/testing/kanban-manager.ts

@@ -1,13 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type { Locator, Page } from '@playwright/test';
-
-export class KanbanManager {
-  private readonly _page: Page;
-
-  constructor(readonly locator: Locator) {
-    this._page = locator.page();
-  }
-}

package/src/testing/playwright/playwright.config.cts

@@ -1,18 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { nxE2EPreset } from '@nx/playwright/preset';
-import { defineConfig } from '@playwright/test';
-
-import { e2ePreset } from '@dxos/test-utils/playwright';
-
-export default defineConfig({
-  ...nxE2EPreset(__filename, { testDir: __dirname }),
-  ...e2ePreset(__dirname),
-  webServer: {
-    command: 'pnpm -w nx storybook-e2e stories',
-    port: 9009,
-    reuseExistingServer: !process.env.CI,
-  },
-});

package/src/testing/playwright/smoke.spec.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2021 DXOS.org
-//
-
-import { test } from '@playwright/test';
-
-test.describe('Kanban', () => {});

package/src/types.ts

@@ -1,95 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Schema } from 'effect';
-
-import { SpaceSchema } from '@dxos/react-client/echo';
-import { KanbanType } from '@dxos/react-ui-kanban';
-import { FieldSchema, TypenameAnnotationId } from '@dxos/schema';
-
-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).
- */
-
-// TODO(wittjosiah): Factor out?
-export const PivotColumnAnnotationId = Symbol.for('@dxos/plugin-kanban/annotation/PivotColumn');
-
-export const CreateKanbanSchema = Schema.Struct({
-  name: Schema.optional(Schema.String),
-  typename: Schema.optional(
-    Schema.String.annotations({
-      [TypenameAnnotationId]: ['limited-static', 'dynamic'],
-      title: 'Select card schema (leave empty to start fresh)',
-    }),
-  ),
-  initialPivotColumn: Schema.optional(
-    Schema.String.annotations({
-      [PivotColumnAnnotationId]: true,
-      title: 'Pivot column',
-    }),
-  ),
-});
-
-export type CreateKanbanType = Schema.Schema.Type<typeof CreateKanbanSchema>;
-
-export namespace KanbanAction {
-  const KANBAN_ACTION = `${KANBAN_PLUGIN}/action`;
-
-  export class Create extends Schema.TaggedClass<Create>()(`${KANBAN_ACTION}/create`, {
-    input: Schema.extend(Schema.Struct({ space: SpaceSchema }), CreateKanbanSchema),
-    output: Schema.Struct({
-      object: KanbanType,
-    }),
-  }) {}
-
-  export class DeleteCardField extends Schema.TaggedClass<DeleteCardField>()(`${KANBAN_ACTION}/delete-card-field`, {
-    input: Schema.Struct({
-      kanban: KanbanType,
-      fieldId: Schema.String,
-      // TODO(wittjosiah): Separate fields for undo data?
-      deletionData: Schema.optional(
-        Schema.Struct({
-          field: FieldSchema,
-          // TODO(wittjosiah): This creates a type error.
-          // props: PropertySchema,
-          props: Schema.Any,
-          index: Schema.Number,
-        }),
-      ),
-    }),
-    output: Schema.Void,
-  }) {}
-
-  export class DeleteCard extends Schema.TaggedClass<DeleteCard>()(`${KANBAN_ACTION}/delete-card`, {
-    input: Schema.Struct({
-      card: Schema.Any, // The card object to delete
-    }),
-    output: Schema.Void,
-  }) {}
-}
-
-// 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;
-}
-
-export type Location = {
-  idx?: number;
-};
-
-export const isKanban = (object: unknown): object is KanbanType => object != null && object instanceof KanbanType;