@dxos/plugin-kanban 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/src/components/KanbanContainer.stories.tsx

@@ -2,14 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback } from 'react';
 
 import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Type } from '@dxos/echo';
+import { Obj, type QueryAST, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
@@ -18,17 +16,17 @@ 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 { 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, KanbanView, useKanbanModel } from '@dxos/react-ui-kanban';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { Kanban as KanbanComponent, useKanbanModel, useProjectionModel } from '@dxos/react-ui-kanban';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType, ProjectionModel } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+import { View, getTypenameFromQuery } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
 
 import { translations } from '../translations';
-import { createKanban } from '../types';
 
 faker.seed(0);
 
@@ -41,40 +39,22 @@ const rollOrg = () => ({
   description: faker.lorem.paragraph(),
   image: faker.image.url(),
   website: faker.internet.url(),
-  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id as DataType.Organization['status'],
+  status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
 });
 
 const StorybookKanban = () => {
-  const client = useClient();
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
-  const views = useQuery(space, Filter.type(DataType.View));
-  const [view, setView] = useState<DataType.View>();
-  const [projection, setProjection] = useState<ProjectionModel>();
-  const schema = useSchema(client, space, view?.query.typename);
-
-  useEffect(() => {
-    if (views.length && !view) {
-      const view = views[0];
-      setView(view);
-    }
-  }, [views]);
-
-  useEffect(() => {
-    if (view?.projection && schema) {
-      const jsonSchema = Type.toJsonSchema(schema);
-      setProjection(new ProjectionModel(jsonSchema, view.projection));
-    }
-    // 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).
-  }, [view?.projection, schema, JSON.stringify(schema ? Type.toJsonSchema(schema) : {})]);
+  const [object] = useQuery(space, Filter.type(Kanban.Kanban));
+  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
+  const schema = useSchema(space, typename);
 
   const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(schema, object);
   const model = useKanbanModel({
-    view,
-    schema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -95,95 +75,94 @@ const StorybookKanban = () => {
     [space, schema, model],
   );
 
-  const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
+  const handleRemoveCard = useCallback((card: { id: string }) => Obj.isObject(card) && space?.db.remove(card), [space]);
 
-  const handleTypenameChanged = useCallback(
-    (typename: string) => {
+  const handleUpdateQuery = useCallback(
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      invariant(view);
+      invariant(object.view.target);
 
-      schema.updateTypename(typename);
-      view.query.typename = typename;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
+      object.view.target.query.ast = newQuery;
     },
-    [view, schema],
+    [object, schema],
   );
 
-  if (!schema || !view) {
+  if (!schema || !object.view.target) {
     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'>
+    <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'>
         <ViewEditor
           registry={space?.db.schemaRegistry}
           schema={schema}
-          view={view}
-          onTypenameChanged={handleTypenameChanged}
+          view={object.view.target}
+          onQueryChanged={handleUpdateQuery}
           onDelete={(fieldId: string) => {
             console.log('[ViewEditor]', 'onDelete', fieldId);
           }}
         />
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ view, schema }, null, 2)}
-        </SyntaxHighlighter>
+        <JsonFilter data={{ view: object.view.target, schema }} classNames='text-xs' />
       </div>
     </div>
   );
 };
 
-type StoryProps = {
-  rows?: number;
-};
-
 //
 // Story definitions.
 //
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'plugins/plugin-kanban/Kanban',
   component: StorybookKanban,
   render: () => <StorybookKanban />,
-  parameters: { translations },
   decorators: [
-    withLayout({ fullscreen: true }),
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
         ClientPlugin({
-          types: [DataType.Organization, DataType.Person, DataType.View, KanbanView],
-          onClientInitialized: async (_, client) => {
+          types: [Organization.Organization, Person.Person, View.View, Kanban.Kanban],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
             const space = await client.spaces.create();
             await space.waitUntilReady();
-            const { view } = await createKanban({
-              client,
+            const { view } = await View.makeFromSpace({
               space,
-              typename: DataType.Organization.typename,
-              initialPivotColumn: 'status',
+              typename: Organization.Organization.typename,
+              pivotFieldName: 'status',
             });
-            space.db.add(view);
+            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(DataType.Organization, rollOrg()));
+              return space.db.add(Obj.make(Organization.Organization, rollOrg()));
             });
           },
         }),
-        StorybookLayoutPlugin(),
-        PreviewPlugin(),
-        SpacePlugin(),
+        SpacePlugin({}),
         IntentPlugin(),
         SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
+        PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
     }),
   ],
-};
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof StorybookKanban>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/components/KanbanContainer.tsx

@@ -2,37 +2,31 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useCapabilities, useIntentDispatcher } from '@dxos/app-framework/react';
 import { Filter, Obj, Type } from '@dxos/echo';
-import { EchoSchema, type TypedObject } from '@dxos/echo-schema';
+import { type TypedObject } from '@dxos/echo/internal';
+import { ClientCapabilities } from '@dxos/plugin-client';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
-import { useClient } from '@dxos/react-client';
-import { useQuery, getSpace } from '@dxos/react-client/echo';
-import { useKanbanModel, Kanban } from '@dxos/react-ui-kanban';
+import { getSpace, 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 { StackItem } from '@dxos/react-ui-stack';
-import { ProjectionModel, type DataType } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 
 import { KanbanAction } from '../types';
 
-export const KanbanContainer = ({ view }: { view: DataType.View; role: string }) => {
-  const client = useClient();
+export const KanbanContainer = ({ object }: { object: Kanban.Kanban; role: string }) => {
+  const schemas = useCapabilities(ClientCapabilities.Schema);
   const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ProjectionModel>();
-  const space = getSpace(view);
+  const space = getSpace(object);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const jsonSchema = useMemo(() => {
-    if (!cardSchema) {
-      return undefined;
-    }
-    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
-  }, [cardSchema]);
+  const typename = object.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
 
   useEffect(() => {
-    const typename = view.query.typename;
-    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
+    const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
     if (staticSchema) {
       setCardSchema(() => staticSchema as TypedObject<any, any>);
     }
@@ -49,21 +43,14 @@ export const KanbanContainer = ({ view }: { view: DataType.View; role: string })
       );
       return unsubscribe;
     }
-  }, [view.query.typename, space]);
-
-  useEffect(() => {
-    if (jsonSchema) {
-      setProjection(new ProjectionModel(jsonSchema, view.projection));
-    }
-    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-  }, [view.projection, JSON.stringify(jsonSchema)]);
+  }, [schemas, space, typename]);
 
   const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(cardSchema, object);
   const model = useKanbanModel({
-    view,
-    schema: cardSchema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -89,7 +76,7 @@ export const KanbanContainer = ({ view }: { view: DataType.View; role: string })
 
   return (
     <StackItem.Content>
-      {model && <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
+      {model && <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
     </StackItem.Content>
   );
 };

package/src/components/KanbanViewEditor.tsx

@@ -4,57 +4,51 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { EchoSchema, FormatEnum } from '@dxos/echo-schema';
-import { useClient } from '@dxos/react-client';
+import { Format } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
 import { getSpace, useSchema } from '@dxos/react-client/echo';
-import { Form, SelectInput, type CustomInputMap } from '@dxos/react-ui-form';
-import { KanbanSettingsSchema, type KanbanView } from '@dxos/react-ui-kanban';
-import { type DataType, ProjectionModel } from '@dxos/schema';
-
-type KanbanViewEditorProps = { view: DataType.View };
-
-export const KanbanViewEditor = ({ view }: KanbanViewEditorProps) => {
-  const client = useClient();
-  const space = getSpace(view);
-  const kanban = view.presentation.target as KanbanView;
-  const currentTypename = useMemo(() => view.query.typename, [view.query.typename]);
-  const schema = useSchema(client, space, currentTypename);
-
-  const projection = useMemo(() => {
-    if (schema) {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : Type.toJsonSchema(schema);
-      return new ProjectionModel(jsonSchema, view.projection);
-    }
-  }, [view.projection, JSON.stringify(schema)]);
+import { Form, type FormFieldMap, SelectField } from '@dxos/react-ui-form';
+import { useProjectionModel } from '@dxos/react-ui-kanban';
+import { type Kanban } from '@dxos/react-ui-kanban/types';
+import { getTypenameFromQuery } from '@dxos/schema';
+
+import { SettingsSchema } from '../types';
+
+type KanbanViewEditorProps = { object: Kanban.Kanban };
+
+export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
+  const space = getSpace(object);
+  const view = object.view.target;
+  const currentTypename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(space, currentTypename);
+  const projection = useProjectionModel(schema, object);
 
   const fieldProjections = projection?.getFieldProjections() || [];
   const selectFields = fieldProjections
-    .filter((field) => field.props.format === FormatEnum.SingleSelect)
+    .filter((field) => field.props.format === Format.TypeFormat.SingleSelect)
     .map(({ field }) => ({ value: field.id, label: field.path }));
 
   const handleSave = useCallback(
     (values: Partial<{ columnFieldId: string }>) => {
-      kanban.columnFieldId = values.columnFieldId;
+      invariant(view);
+      view.projection.pivotFieldId = values.columnFieldId;
     },
-    [kanban],
+    [view],
+  );
+
+  const initialValues = useMemo(
+    () => ({ columnFieldId: view?.projection.pivotFieldId }),
+    [view?.projection.pivotFieldId],
   );
 
-  const initialValues = useMemo(() => ({ columnFieldId: kanban.columnFieldId }), [kanban.columnFieldId]);
-  const custom: CustomInputMap = useMemo(
-    () => ({ columnFieldId: (props) => <SelectInput {...props} options={selectFields} /> }),
+  const fieldMap: FormFieldMap = useMemo(
+    () => ({ columnFieldId: (props) => <SelectField {...props} options={selectFields} /> }),
     [selectFields],
   );
 
   return (
-    <Form
-      Custom={custom}
-      schema={KanbanSettingsSchema}
-      values={initialValues}
-      onSave={handleSave}
-      autoSave
-      outerSpacing={false}
-      classNames='pbs-inputSpacingBlock'
-    />
+    <Form.Root schema={SettingsSchema} values={initialValues} fieldMap={fieldMap} autoSave onSave={handleSave}>
+      <Form.FieldSet />
+    </Form.Root>
   );
 };

package/src/meta.ts

@@ -3,15 +3,17 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
-
-export const KANBAN_PLUGIN = 'dxos.org/plugin/kanban';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
-  id: KANBAN_PLUGIN,
+  id: 'dxos.org/plugin/kanban',
   name: 'Kanban',
-  description:
-    'Kanban allows you to explore Table data in sorted columns defined by your custom schema. You can use Kanbans to track progress or trigger custom automations when cards are moved from one state to another.',
+  description: trim`
+    Visual project management using customizable kanban boards to track workflow progress.
+    Organize table data into columns, drag and drop items between stages, and trigger automations based on status changes.
+  `,
   icon: 'ph--kanban--regular',
+  iconHue: 'green',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-kanban',
   screenshots: ['https://dxos.network/plugin-details-kanban-dark.png'],
 };

package/src/translations.ts

@@ -2,32 +2,32 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Type } from '@dxos/echo';
 import { type Resource } from '@dxos/react-ui';
-import { KanbanView } from '@dxos/react-ui-kanban';
+import { Kanban } from '@dxos/react-ui-kanban/types';
 
 import { meta } from './meta';
 
 export const translations = [
   {
     'en-US': {
-      [KanbanView.typename]: {
+      [Type.getTypename(Kanban.Kanban)]: {
         'typename label': 'Kanban',
         'typename label_zero': 'Kanbans',
         'typename label_one': 'Kanban',
         'typename label_other': 'Kanbans',
         'object name placeholder': 'New kanban',
+        'rename object label': 'Rename kanban',
+        'delete object label': 'Delete kanban',
+        'object deleted label': 'Kanban deleted',
       },
       [meta.id]: {
         'plugin name': 'Kanban',
         'kanban title label': 'Title',
         '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 card',
         'delete column label': 'Delete column',
-        'delete item label': 'Delete card',
         'card field deleted label': 'Card field deleted',
         'card deleted label': 'Card deleted',
       },

package/src/types/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './kanban';
 export * from './schema';
 export type * from './types';

package/src/types/schema.ts

@@ -2,12 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
 import { SpaceSchema } from '@dxos/react-client/echo';
-import { DataType, FieldSchema, TypenameAnnotationId } from '@dxos/schema';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { FieldSchema, View } from '@dxos/schema';
 
-import { KANBAN_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 /**
  * Kanban data model.
@@ -21,13 +23,23 @@ import { KANBAN_PLUGIN } from '../meta';
 // TODO(wittjosiah): Factor out?
 export const PivotColumnAnnotationId = Symbol.for('@dxos/plugin-kanban/annotation/PivotColumn');
 
+export const SettingsSchema = Schema.Struct({
+  columnFieldId: Schema.String.annotations({
+    title: 'Column field',
+  }),
+});
+
 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)',
+  // TODO(wittjosiah): This should be a query input instead.
+  typename: Schema.String.pipe(
+    Schema.annotations({ title: 'Select card type' }),
+    TypeInputOptionsAnnotation.set({
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered'],
     }),
+    Schema.optional,
   ),
   initialPivotColumn: Schema.optional(
     Schema.String.annotations({
@@ -38,18 +50,18 @@ export const CreateKanbanSchema = Schema.Struct({
 });
 
 export namespace KanbanAction {
-  const KANBAN_ACTION = `${KANBAN_PLUGIN}/action`;
+  const KANBAN_ACTION = `${meta.id}/action`;
 
   export class Create extends Schema.TaggedClass<Create>()(`${KANBAN_ACTION}/create`, {
     input: Schema.extend(Schema.Struct({ space: SpaceSchema }), CreateKanbanSchema),
     output: Schema.Struct({
-      object: DataType.View,
+      object: Kanban.Kanban,
     }),
   }) {}
 
   export class DeleteCardField extends Schema.TaggedClass<DeleteCardField>()(`${KANBAN_ACTION}/delete-card-field`, {
     input: Schema.Struct({
-      view: DataType.View,
+      view: View.View,
       fieldId: Schema.String,
       // TODO(wittjosiah): Separate fields for undo data?
       deletionData: Schema.optional(