@dxos/plugin-pipeline 0.8.4-main.2244d791bb → 0.8.4-main.3fbcb4aa9b

package/src/components/{PipelineComponent.stories.tsx → PipelineComponent/PipelineComponent.stories.tsx}

@@ -4,31 +4,35 @@
 
 import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 
 import { Filter, Ref } from '@dxos/client/echo';
-import { Obj, Query, Type } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { JsonSchema, Obj, Query } from '@dxos/echo';
+import { Collection, View } from '@dxos/echo';
+import { random } from '@dxos/random';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Form, omitId } from '@dxos/react-ui-form';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
-import { Collection, View } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { Person, Pipeline } from '@dxos/types';
 
-import { translations } from '../translations';
+import { usePipelineBoardModel } from '#hooks';
+import { translations } from '#translations';
 
-import { type ItemProps, PipelineComponent, usePipelineBoardModel } from './PipelineComponent';
+import { type ItemProps, PipelineComponent } from './PipelineComponent';
 
 const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
+  const personSchema = useMemo(() => omitId(Person.Person), []);
+
   if (Obj.instanceOf(Person.Person, item)) {
-    const contact = item as Obj.Obj<Person.Person>;
+    const contact = item as Obj.OfShape<Person.Person>;
 
     return (
-      <Form.Root schema={omitId(Person.Person)} projection={projectionModel} values={contact} autoSave>
+      <Form.Root schema={personSchema} projection={projectionModel} values={contact} autoSave>
         <Form.Viewport>
           <Form.Content>
             <Form.FieldSet />
@@ -54,16 +58,16 @@ const DefaultStory = () => {
     }
 
     // Create a new view for contacts similar to the initialization.
-    const view = View.make({
+    const view = ViewModel.make({
       query: Query.select(Filter.type(Person.Person)),
-      jsonSchema: Type.toJsonSchema(Person.Person),
+      jsonSchema: JsonSchema.toJsonSchema(Person.Person),
       fields: ['fullName'],
     });
 
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
+    Obj.update(pipeline, (pipeline) => {
+      pipeline.columns.push({
         name: 'New Contacts',
-        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        view: Ref.make(view) as (typeof pipeline.columns)[number]['view'],
         order: [],
       });
     });
@@ -76,8 +80,10 @@ const DefaultStory = () => {
   }
 
   return (
-    <PipelineComponent.Root Item={StorybookProjectItem} model={model} onAddColumn={handleAddColumn}>
-      <PipelineComponent.Content pipeline={pipeline} />
+    <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
+      <PipelineComponent.Content model={model}>
+        <PipelineComponent.Columns pipeline={pipeline} />
+      </PipelineComponent.Content>
     </PipelineComponent.Root>
   );
 };
@@ -96,16 +102,16 @@ const MutationsStory = () => {
     }
 
     // Create a new view for contacts similar to the initialization.
-    const view = View.make({
+    const view = ViewModel.make({
       query: Query.select(Filter.type(Person.Person)),
-      jsonSchema: Type.toJsonSchema(Person.Person),
+      jsonSchema: JsonSchema.toJsonSchema(Person.Person),
       fields: ['fullName'],
     });
 
-    Obj.change(pipeline, (p) => {
-      p.columns.push({
+    Obj.update(pipeline, (pipeline) => {
+      pipeline.columns.push({
         name: 'New Contacts',
-        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        view: Ref.make(view) as (typeof pipeline.columns)[number]['view'],
         order: [],
       });
     });
@@ -119,19 +125,19 @@ const MutationsStory = () => {
     }
 
     const interval = setInterval(() => {
-      const factory = createObjectFactory(space.db, faker as any);
+      const factory = createObjectFactory(space.db, random as any);
       const p = Math.random();
 
       if (p < 0.4) {
         // Append to the name
-        const contactToAdjust = faker.helpers.arrayElement(contacts);
-        Obj.change(contactToAdjust, (c) => {
-          c.fullName = (c.fullName ?? '') + ' X';
+        const contactToAdjust = random.helpers.arrayElement(contacts);
+        Obj.update(contactToAdjust, (contactToAdjust) => {
+          contactToAdjust.fullName = (contactToAdjust.fullName ?? '') + ' X';
         });
         return;
       } else if (p < 0.7 && contacts.length > 1) {
         // Remove a contact (30% chance, but only if we have more than 1)
-        const contactToRemove = faker.helpers.arrayElement(contacts);
+        const contactToRemove = random.helpers.arrayElement(contacts);
         space.db.remove(contactToRemove);
       } else {
         // Add a new contact (30% chance)
@@ -147,14 +153,16 @@ const MutationsStory = () => {
   }
 
   return (
-    <PipelineComponent.Root Item={StorybookProjectItem} model={model} onAddColumn={handleAddColumn}>
-      <PipelineComponent.Content pipeline={pipeline} />
+    <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
+      <PipelineComponent.Content model={model}>
+        <PipelineComponent.Columns pipeline={pipeline} />
+      </PipelineComponent.Content>
     </PipelineComponent.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-pipeline/PipelineComponent',
+  title: 'plugins/plugin-pipeline/components/PipelineComponent',
   decorators: [
     withTheme(),
     withLayout({ layout: 'column' }),
@@ -166,10 +174,10 @@ const meta = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         // Create a view for contacts.
-        const view = View.make({
+        const view = ViewModel.make({
           name: 'Contacts',
           query: Query.select(Filter.type(Person.Person)),
-          jsonSchema: Type.toJsonSchema(Person.Person),
+          jsonSchema: JsonSchema.toJsonSchema(Person.Person),
           fields: ['fullName'],
         });
 
@@ -187,7 +195,7 @@ const meta = {
         );
 
         // Generate random contacts.
-        const factory = createObjectFactory(space.db, faker as any);
+        const factory = createObjectFactory(space.db, random as any);
         await factory([{ type: Person.Person, count: 12 }]);
       },
     }),

package/src/components/PipelineComponent/PipelineComponent.tsx

@@ -0,0 +1,140 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type FC, type PropsWithChildren } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
+import { Board, type BoardModel, useBoard, useEventHandlerAdapter } from '@dxos/react-ui-mosaic';
+import { type ProjectionModel } from '@dxos/schema';
+import { type Pipeline } from '@dxos/types';
+import { composable, composableProps, slottable } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+import { PipelineColumn } from './PipelineColumn';
+
+type ItemProps = {
+  item: Obj.Unknown;
+  projectionModel?: ProjectionModel;
+};
+
+const itemNoOp = ({ item }: ItemProps) => <span>{item.id}</span>;
+
+//
+// Root
+//
+
+type PipelineContextValue = {
+  Item: FC<ItemProps>;
+  // TODO(wittjosiah): Support adding items.
+  //  If the created item doesn't match the current query, it will not be visible.
+  // TODO(wittjosiah): onAddItem?: (schema: Schema.Schema.AnyNoContext) => void;
+  onAddColumn?: () => void;
+};
+
+type PipelineRootProps = PropsWithChildren<PipelineContextValue>;
+
+const PIPELINE_ROOT = 'Pipeline.Root';
+
+const [PipelineRootContext, usePipeline] = createContext<PipelineContextValue>(PIPELINE_ROOT, {
+  Item: itemNoOp,
+});
+
+const PipelineRoot = ({ children, ...contextValue }: PipelineRootProps) => (
+  <PipelineRootContext {...contextValue}>{children}</PipelineRootContext>
+);
+
+PipelineRoot.displayName = PIPELINE_ROOT;
+
+//
+// Content
+//
+
+const PIPELINE_CONTENT_NAME = 'Pipeline.Content';
+
+type PipelineContentProps = PropsWithChildren<{
+  model: BoardModel<Pipeline.Column, Obj.Unknown>;
+}>;
+
+const PipelineContent = slottable<HTMLDivElement, PipelineContentProps>(
+  ({ asChild, model, children, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : 'div';
+    return (
+      <Board.Root model={model}>
+        <Comp {...composableProps(props)} ref={forwardedRef}>
+          {children}
+        </Comp>
+      </Board.Root>
+    );
+  },
+);
+
+PipelineContent.displayName = PIPELINE_CONTENT_NAME;
+
+//
+// Columns
+//
+
+const PIPELINE_COLUMNS_NAME = 'Pipeline.Columns';
+
+type PipelineColumnsProps = {
+  pipeline: Pipeline.Pipeline;
+};
+
+const PipelineColumns = composable<HTMLDivElement, PipelineColumnsProps>(({ pipeline, ...props }) => {
+  const { model } = useBoard(PIPELINE_COLUMNS_NAME);
+  const columns = useAtomValue(model.columns);
+  const eventHandler = useEventHandlerAdapter<Pipeline.Column, Obj.Unknown>({
+    id: pipeline.id,
+    // TODO(wittjosiah): Cast because columns array is readonly.
+    items: columns as any,
+    getId: model.getColumnId,
+    get: (data) => data as unknown as Obj.Unknown,
+    make: (object) => object as unknown as Pipeline.Column,
+    canDrop: ({ source }) => model.isColumn(source.data),
+    onChange: (mutate) => Obj.update(pipeline, (pipeline) => mutate(pipeline.columns)),
+  });
+
+  return <Board.Content {...props} id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
+});
+
+PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
+
+//
+// Toolbar
+//
+
+const PIPELINE_TOOLBAR_NAME = 'Pipeline.Toolbar';
+
+export const PipelineToolbar = composable<HTMLDivElement, ToolbarRootProps>(({ children, ...props }, forwardedRef) => {
+  const { t } = useTranslation(meta.id);
+  const { onAddColumn } = usePipeline(PIPELINE_TOOLBAR_NAME);
+
+  return (
+    <Toolbar.Root {...composableProps(props)} ref={forwardedRef}>
+      <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('add-column.label')} onClick={onAddColumn} />
+    </Toolbar.Root>
+  );
+});
+
+PipelineToolbar.displayName = PIPELINE_TOOLBAR_NAME;
+
+//
+// Project
+//
+
+export const PipelineComponent = {
+  Root: PipelineRoot,
+  Content: PipelineContent,
+  Columns: PipelineColumns,
+  Toolbar: PipelineToolbar,
+};
+
+export { usePipeline };
+
+export type { ItemProps, PipelineContextValue, PipelineRootProps, PipelineContentProps, PipelineColumnsProps };

package/src/components/PipelineComponent/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './PipelineColumn';
+export * from './PipelineComponent';

package/src/components/index.ts

@@ -2,10 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export type { PipelineContainerProps } from './PipelineContainer';
-export type { PipelineObjectSettingsProps } from './PipelineSettings';
-
-export const PipelineContainer = lazy(() => import('./PipelineContainer'));
-export const PipelineObjectSettings = lazy(() => import('./PipelineSettings'));
+export * from './PipelineComponent';

package/src/containers/PipelineContainer/PipelineContainer.stories.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Filter, Ref } from '@dxos/client/echo';
+import { Database, Feed, JsonSchema, Obj, Query, Tag } from '@dxos/echo';
+import { Collection, View } from '@dxos/echo';
+import { createFeedServiceLayer } from '@dxos/echo-db';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { InboxPlugin } from '@dxos/plugin-inbox/plugin';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
+import { withLayout } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Message, Organization, Person, Pipeline, Task } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import PipelineProperties from '../PipelineProperties';
+import { PipelineContainer } from './PipelineContainer';
+
+random.seed(0);
+
+const DefaultStory = () => {
+  const db = useDatabase();
+  const pipelines = useQuery(db, Filter.type(Pipeline.Pipeline));
+  const pipeline = pipelines[0];
+
+  if (!pipeline) {
+    return <p>Loading…</p>;
+  }
+
+  return (
+    <div className='grow grid grid-cols-[1fr_350px] overflow-hidden h-full w-full'>
+      <PipelineContainer role='article' subject={pipeline} attendableId='test' />
+      <PipelineProperties pipeline={pipeline} classNames='border-s border-separator' />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-pipeline/containers/PipelineContainer',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [
+            Tag.Tag,
+            Feed.Feed,
+            Pipeline.Pipeline,
+            View.View,
+            Collection.Collection,
+            Organization.Organization,
+            Task.Task,
+            Person.Person,
+            Message.Message,
+          ],
+          onClientInitialized: Effect.fnUntraced(function* ({ client }) {
+            const { personalSpace } = yield* initializeIdentity(client);
+
+            yield* Effect.gen(function* () {
+              const tag = yield* Database.add(Tag.make({ label: 'important', hue: 'green' }));
+              const tagDxn = Obj.getDXN(tag).toString();
+
+              // Create a view for Contacts.
+              const personView = ViewModel.make({
+                query: Query.select(Filter.type(Person.Person)),
+                jsonSchema: JsonSchema.toJsonSchema(Person.Person),
+              });
+
+              // Create a view for Organizations.
+              const organizationView = ViewModel.make({
+                query: Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagDxn)),
+                jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
+              });
+
+              // Create a view for Tasks.
+              const taskView = ViewModel.make({
+                query: Query.select(Filter.type(Task.Task)).select(Filter.tag(tagDxn)),
+                jsonSchema: JsonSchema.toJsonSchema(Task.Task),
+              });
+
+              // Create a view for Project-Projects.
+              const projectView = ViewModel.make({
+                query: Query.select(Filter.type(Pipeline.Pipeline)),
+                jsonSchema: JsonSchema.toJsonSchema(Pipeline.Pipeline),
+              });
+
+              // Create a feed for Messages.
+              const messageFeed = yield* Database.add(Feed.make({ name: 'Messages' }));
+              const messages = Array.from({ length: 20 }).map(() =>
+                Obj.make(Message.Message, {
+                  created: random.date.recent().toISOString(),
+                  sender: { role: 'user' },
+                  blocks: [{ _tag: 'text' as const, text: random.lorem.sentences(2) }],
+                }),
+              );
+              yield* Feed.append(messageFeed, messages);
+
+              const messageQueueDxn = Feed.getQueueDxn(messageFeed)!.toString();
+              const messageView = ViewModel.make({
+                query: Query.select(Filter.type(Message.Message)).from({
+                  queues: [messageQueueDxn],
+                }),
+                jsonSchema: JsonSchema.toJsonSchema(Message.Message),
+              });
+
+              // Create a feed for Tasks (for testing feed switching in settings).
+              const taskFeed = yield* Database.add(Feed.make({ name: 'Tasks' }));
+              const feedTasks = Array.from({ length: 10 }).map(() =>
+                Obj.make(Task.Task, {
+                  title: random.lorem.sentence(),
+                  status: random.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
+                  priority: random.helpers.arrayElement(['low', 'medium', 'high']) as any,
+                }),
+              );
+              yield* Feed.append(taskFeed, feedTasks);
+
+              // Create pipeline with columns.
+              const pipeline = Pipeline.make({
+                columns: [
+                  {
+                    name: 'Contacts',
+                    view: Ref.make(personView),
+                    order: [],
+                  },
+                  {
+                    name: 'Organizations',
+                    view: Ref.make(organizationView),
+                    order: [],
+                  },
+                  {
+                    name: 'Tasks',
+                    view: Ref.make(taskView),
+                    order: [],
+                  },
+                  {
+                    name: 'Projects',
+                    view: Ref.make(projectView),
+                    order: [],
+                  },
+                  {
+                    name: 'Messages',
+                    view: Ref.make(messageView),
+                    order: [],
+                  },
+                ],
+              });
+              yield* Database.add(pipeline);
+
+              // Generate sample Organizations.
+              for (const _ of Array.from({ length: 20 })) {
+                yield* Database.add(
+                  Obj.make(Organization.Organization, {
+                    [Obj.Meta]: {
+                      tags: random.datatype.boolean() ? [tagDxn] : [],
+                    },
+                    name: random.company.name(),
+                    website: random.internet.url(),
+                    description: random.lorem.paragraph(),
+                    image: random.image.url(),
+                  }),
+                );
+              }
+
+              // Generate sample Tasks.
+              for (const _ of Array.from({ length: 20 })) {
+                yield* Database.add(
+                  Obj.make(Task.Task, {
+                    [Obj.Meta]: {
+                      tags: random.datatype.boolean() ? [tagDxn] : [],
+                    },
+                    title: random.lorem.sentence(),
+                    status: random.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
+                    priority: random.helpers.arrayElement(['low', 'medium', 'high']) as any,
+                  }),
+                );
+              }
+
+              // Generate sample Contacts.
+              const factory = createObjectFactory(personalSpace.db, random as any);
+              yield* Effect.promise(() => factory([{ type: Person.Person, count: 12 }]));
+
+              // Generate sample Projects.
+              for (const _ of Array.from({ length: 20 })) {
+                yield* Database.add(
+                  Pipeline.make({
+                    name: random.commerce.productName(),
+                    description: random.lorem.sentence(),
+                  }),
+                );
+              }
+            }).pipe(
+              Effect.provide(
+                Layer.merge(Database.layer(personalSpace.db), createFeedServiceLayer(personalSpace.queues)),
+              ),
+            );
+          }),
+        }),
+        InboxPlugin(),
+        PreviewPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...stackTranslations],
+  },
+} satisfies Meta<typeof PipelineContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/PipelineContainer/PipelineContainer.tsx

@@ -0,0 +1,84 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect } from 'react';
+
+import { Capabilities } from '@dxos/app-framework';
+import { Surface, useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import {
+  AppSurface,
+  OBJECT_ACTIONS_CONTRIBUTION_ID,
+  OBJECT_ACTIONS_CONTRIBUTION_PRIORITY,
+  useObjectMenuItems,
+} from '@dxos/app-toolkit/ui';
+import { Panel } from '@dxos/react-ui';
+import { linkedSegment } from '@dxos/react-ui-attention';
+import { useAttention } from '@dxos/react-ui-attention';
+import { useMenu } from '@dxos/react-ui-menu';
+import { type Pipeline } from '@dxos/types';
+
+import { type ItemProps, PipelineComponent } from '#components';
+import { usePipelineBoardModel } from '#hooks';
+
+const PIPELINE_ITEM = 'PipelineItem';
+
+export type PipelineContainerProps = AppSurface.ObjectArticleProps<Pipeline.Pipeline>;
+
+export const PipelineContainer = ({ role, subject: pipeline, attendableId }: PipelineContainerProps) => {
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const model = usePipelineBoardModel(pipeline, registry);
+  const { invokePromise } = useOperationInvoker();
+  const { hasAttention } = useAttention(attendableId);
+
+  const handleColumnAdd = useCallback(
+    () =>
+      invokePromise(LayoutOperation.UpdateCompanion, {
+        subject: linkedSegment('settings'),
+      }),
+    [invokePromise],
+  );
+
+  return (
+    <PipelineComponent.Root Item={PipelineItem} onAddColumn={handleColumnAdd}>
+      <Panel.Root role={role}>
+        <Panel.Toolbar asChild>
+          <PipelineComponent.Toolbar disabled={!hasAttention} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <PipelineComponent.Content asChild model={model}>
+            <PipelineComponent.Columns pipeline={pipeline} />
+          </PipelineComponent.Content>
+        </Panel.Content>
+      </Panel.Root>
+    </PipelineComponent.Root>
+  );
+};
+
+const PipelineItem = ({ item, projectionModel }: ItemProps) => {
+  const menu = useMenu(PIPELINE_ITEM);
+  const items = useObjectMenuItems(item);
+
+  useEffect(() => {
+    menu.addMenuItems({
+      id: OBJECT_ACTIONS_CONTRIBUTION_ID,
+      mode: 'additive',
+      priority: OBJECT_ACTIONS_CONTRIBUTION_PRIORITY,
+      items,
+    });
+
+    return () => menu.removeMenuItems(OBJECT_ACTIONS_CONTRIBUTION_ID);
+  }, [menu, items]);
+
+  return (
+    <Surface.Surface
+      type={AppSurface.Card}
+      data={{
+        subject: item,
+        projection: projectionModel,
+      }}
+      limit={1}
+    />
+  );
+};

package/src/containers/PipelineContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { PipelineContainer as default } from './PipelineContainer';