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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.9735255",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -50,31 +50,31 @@
   "dependencies": {
     "@effect-atom/atom-react": "^0.4.6",
     "effect": "3.19.11",
-    "@dxos/ai": "0.8.4-main.937b3ca",
-    "@dxos/app-framework": "0.8.4-main.937b3ca",
-    "@dxos/assistant": "0.8.4-main.937b3ca",
-    "@dxos/blueprints": "0.8.4-main.937b3ca",
-    "@dxos/echo": "0.8.4-main.937b3ca",
-    "@dxos/effect": "0.8.4-main.937b3ca",
-    "@dxos/functions": "0.8.4-main.937b3ca",
-    "@dxos/async": "0.8.4-main.937b3ca",
-    "@dxos/invariant": "0.8.4-main.937b3ca",
-    "@dxos/log": "0.8.4-main.937b3ca",
-    "@dxos/operation": "0.8.4-main.937b3ca",
-    "@dxos/plugin-client": "0.8.4-main.937b3ca",
-    "@dxos/plugin-search": "0.8.4-main.937b3ca",
-    "@dxos/plugin-space": "0.8.4-main.937b3ca",
-    "@dxos/plugin-graph": "0.8.4-main.937b3ca",
-    "@dxos/random": "0.8.4-main.937b3ca",
-    "@dxos/react-client": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-form": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-kanban": "0.8.4-main.937b3ca",
-    "@dxos/schema": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-mosaic": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-stack": "0.8.4-main.937b3ca",
-    "@dxos/types": "0.8.4-main.937b3ca"
+    "@dxos/ai": "0.8.4-main.9735255",
+    "@dxos/app-framework": "0.8.4-main.9735255",
+    "@dxos/assistant": "0.8.4-main.9735255",
+    "@dxos/blueprints": "0.8.4-main.9735255",
+    "@dxos/echo": "0.8.4-main.9735255",
+    "@dxos/async": "0.8.4-main.9735255",
+    "@dxos/effect": "0.8.4-main.9735255",
+    "@dxos/invariant": "0.8.4-main.9735255",
+    "@dxos/functions": "0.8.4-main.9735255",
+    "@dxos/log": "0.8.4-main.9735255",
+    "@dxos/operation": "0.8.4-main.9735255",
+    "@dxos/plugin-client": "0.8.4-main.9735255",
+    "@dxos/plugin-search": "0.8.4-main.9735255",
+    "@dxos/plugin-graph": "0.8.4-main.9735255",
+    "@dxos/plugin-space": "0.8.4-main.9735255",
+    "@dxos/react-client": "0.8.4-main.9735255",
+    "@dxos/random": "0.8.4-main.9735255",
+    "@dxos/react-ui-mosaic": "0.8.4-main.9735255",
+    "@dxos/react-ui": "0.8.4-main.9735255",
+    "@dxos/react-ui-form": "0.8.4-main.9735255",
+    "@dxos/react-ui-stack": "0.8.4-main.9735255",
+    "@dxos/types": "0.8.4-main.9735255",
+    "@dxos/schema": "0.8.4-main.9735255",
+    "@dxos/util": "0.8.4-main.9735255",
+    "@dxos/react-ui-kanban": "0.8.4-main.9735255"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -82,20 +82,20 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/plugin-preview": "0.8.4-main.937b3ca",
-    "@dxos/plugin-testing": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.937b3ca",
-    "@dxos/plugin-theme": "0.8.4-main.937b3ca",
-    "@dxos/storybook-utils": "0.8.4-main.937b3ca",
-    "@dxos/test-utils": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/plugin-testing": "0.8.4-main.9735255",
+    "@dxos/plugin-preview": "0.8.4-main.9735255",
+    "@dxos/plugin-theme": "0.8.4-main.9735255",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9735255",
+    "@dxos/storybook-utils": "0.8.4-main.9735255",
+    "@dxos/test-utils": "0.8.4-main.9735255",
+    "@dxos/ui-theme": "0.8.4-main.9735255"
   },
   "peerDependencies": {
     "effect": "3.19.11",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/react-ui": "0.8.4-main.9735255",
+    "@dxos/ui-theme": "0.8.4-main.9735255"
   },
   "publishConfig": {
     "access": "public"

package/src/components/KanbanContainer.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 import { RegistryContext } from '@effect-atom/atom-react';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { type Decorator, 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';
@@ -18,7 +18,7 @@ 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 { Filter, type Space, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
 import { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import {
@@ -44,6 +44,38 @@ const createOrg = () => ({
   status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
 });
 
+//
+// Story setup helpers.
+//
+
+type ClientSetupOptions = {
+  types?: Type.Entity.Any[];
+  onSpaceCreated?: (space: Space) => Promise<void>;
+};
+
+/**
+ * Creates the standard plugin manager decorator with client configuration.
+ */
+const withKanbanPlugins = ({ types = [], onSpaceCreated }: ClientSetupOptions): Decorator =>
+  withPluginManager({
+    plugins: [
+      ...corePlugins(),
+      ClientPlugin({
+        types: [...types, 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());
+            yield* Effect.promise(() => onSpaceCreated?.(space) ?? Promise.resolve());
+          }),
+      }),
+      PreviewPlugin(),
+      SpacePlugin({}),
+      StorybookPlugin({}),
+    ],
+  });
+
 //
 // Story components.
 //
@@ -98,6 +130,15 @@ const DefaultComponent = () => {
     [object, schema],
   );
 
+  const handleDeleteField = useCallback(
+    (fieldId: string) => {
+      if (schema && Type.isMutable(schema) && projection) {
+        projection.deleteFieldProjection(fieldId);
+      }
+    },
+    [schema, projection],
+  );
+
   if (!schema || !object.view.target) {
     return null;
   }
@@ -112,9 +153,7 @@ const DefaultComponent = () => {
           schema={schema}
           view={object.view.target}
           onQueryChanged={handleUpdateQuery}
-          onDelete={(fieldId: string) => {
-            console.log('[ViewEditor]', 'onDelete', fieldId);
-          }}
+          onDelete={Type.isMutable(schema) ? handleDeleteField : undefined}
         />
         <JsonFilter data={{ view: object.view.target, schema }} classNames='text-xs' />
       </div>
@@ -130,41 +169,7 @@ 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({}),
-      ],
-    }),
-  ],
+  decorators: [withTheme],
   parameters: {
     layout: 'fullscreen',
     translations: [...translations, ...kanbanTranslations],
@@ -175,7 +180,30 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default story using static runtime schema (immutable).
+ * Schema mutations are not allowed.
+ */
 export const Default: Story = {
+  decorators: [
+    withKanbanPlugins({
+      types: [Organization.Organization, Person.Person],
+      onSpaceCreated: async (space) => {
+        const { view } = await 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()));
+        });
+      },
+    }),
+  ],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -224,3 +252,35 @@ export const Default: Story = {
     //   See packages/apps/composer-app/src/playwright/stack.spec.ts for reference.
   },
 };
+
+/**
+ * Story variant that uses a mutable database schema (EchoSchema).
+ * This allows testing schema mutations like adding/removing fields.
+ */
+// TODO(wittjosiah): Card previews (e.g., OrganizationCard) are type-specific and hard-coded.
+//   They don't use the projection to determine which fields to display, so deleting a field
+//   from the schema won't remove it from the card preview. To fix this, the type-specific
+//   cards in PreviewPlugin would need to accept and respect the projection prop.
+export const MutableSchema: Story = {
+  decorators: [
+    withKanbanPlugins({
+      onSpaceCreated: async (space) => {
+        // Register schema in the database to make it mutable (EchoSchema).
+        const [schema] = await space.db.schemaRegistry.register([Organization.Organization]);
+
+        const { view } = await View.makeFromDatabase({
+          db: space.db,
+          typename: schema.typename,
+          pivotFieldName: 'status',
+        });
+        const kanban = Kanban.make({ view });
+        space.db.add(kanban);
+
+        // Create test data using the registered schema.
+        Array.from({ length: 80 }).map(() => {
+          return space.db.add(Obj.make(schema, createOrg()));
+        });
+      },
+    }),
+  ],
+};

package/src/components/KanbanContainer.tsx

@@ -30,7 +30,8 @@ export const KanbanContainer = ({ role, subject: object }: KanbanContainerProps)
   useEffect(() => {
     const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
     if (staticSchema) {
-      setCardSchema(staticSchema);
+      // NOTE: Use functional update to prevent React from calling the schema as a function.
+      setCardSchema(() => staticSchema);
     }
     if (!staticSchema && typename && db) {
       const query = db.schemaRegistry.query({ typename });
@@ -38,7 +39,8 @@ export const KanbanContainer = ({ role, subject: object }: KanbanContainerProps)
         () => {
           const [schema] = query.results;
           if (schema) {
-            setCardSchema(schema);
+            // NOTE: Use functional update to prevent React from calling the schema as a function.
+            setCardSchema(() => schema);
           }
         },
         { fire: true },