@dxos/plugin-pipeline 0.8.3-main.ef1bc66f44

package/src/components/PipelineComponent.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type FC } from 'react';
+
+import { type Obj } from '@dxos/echo';
+import { useObject } from '@dxos/react-client/echo';
+import { Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
+import { Stack } from '@dxos/react-ui-stack';
+import { type ProjectionModel } from '@dxos/schema';
+import { type Pipeline as PipelineType } from '@dxos/types';
+
+import { meta } from '../meta';
+
+import { PipelineColumn } from './PipelineColumn';
+
+type ItemProps = {
+  item: Obj.Unknown;
+  projectionModel?: ProjectionModel;
+};
+
+const itemNoOp = ({ item }: ItemProps) => <span>{item.id}</span>;
+
+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.
+  // onAddItem?: (schema: Schema.Schema.AnyNoContext) => void;
+  onAddColumn?: () => void;
+};
+
+//
+// Root
+//
+
+type PipelineRootProps = PipelineContextValue;
+
+const PIPELINE_ROOT = 'Pipeline.Root';
+
+const [PipelineRoot, usePipeline] = createContext<PipelineContextValue>(PIPELINE_ROOT, {
+  Item: itemNoOp,
+});
+
+PipelineRoot.displayName = PIPELINE_ROOT;
+
+//
+// Content
+//
+
+const PIPELINE_CONTENT_NAME = 'Pipeline.Content';
+
+type PipelineContentProps = {
+  pipeline: PipelineType.Pipeline;
+};
+
+const PipelineContent = ({ pipeline }: PipelineContentProps) => {
+  const [columns] = useObject(pipeline, 'columns');
+
+  return (
+    <Stack orientation='horizontal' size='contain' rail={false}>
+      {columns.map((column) => {
+        return <PipelineColumn key={column.view.dxn.toString()} column={column} />;
+      })}
+    </Stack>
+  );
+};
+
+PipelineContent.displayName = PIPELINE_CONTENT_NAME;
+
+//
+// Toolbar
+//
+
+const PIPELINE_TOOLBAR_NAME = 'Pipeline.Toolbar';
+
+export const PipelineToolbar = (props: ToolbarRootProps) => {
+  const { t } = useTranslation(meta.id);
+  const { onAddColumn } = usePipeline(PIPELINE_TOOLBAR_NAME);
+
+  return (
+    <Toolbar.Root {...props}>
+      <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,
+  Toolbar: PipelineToolbar,
+};
+
+export { usePipeline };
+
+export type { ItemProps, PipelineContextValue, PipelineRootProps };

package/src/components/PipelineContainer.stories.tsx

@@ -0,0 +1,226 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Filter, Ref } from '@dxos/client/echo';
+import { Obj, Query, Tag, Type } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { InboxPlugin } from '@dxos/plugin-inbox';
+import { PreviewPlugin } from '@dxos/plugin-preview';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { faker } from '@dxos/random';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { withTheme } from '@dxos/react-ui/testing';
+import { translations as stackTranslations } from '@dxos/react-ui-stack';
+import { Stack } from '@dxos/react-ui-stack';
+import { Collection, View } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Message, Organization, Person, Pipeline, Task } from '@dxos/types';
+
+import { translations } from '../translations';
+
+import { PipelineContainer } from './PipelineContainer';
+import { PipelineObjectSettings } from './PipelineSettings';
+
+faker.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 (
+    <Stack orientation='horizontal' size='split' rail={false} classNames='pli-0'>
+      <PipelineContainer role='article' subject={pipeline} />
+      <PipelineObjectSettings pipeline={pipeline} classNames='border-is border-separator' />
+    </Stack>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-pipeline/PipelineContainer',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [
+            Tag.Tag,
+            Pipeline.Pipeline,
+            View.View,
+            Collection.Collection,
+            Organization.Organization,
+            Task.Task,
+            Person.Person,
+            Message.Message,
+          ],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* Effect.promise(() => client.spaces.waitUntilReady());
+              const space = client.spaces.default;
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              const tag = space.db.add(Tag.make({ label: 'important', hue: 'green' }));
+              const tagDxn = Obj.getDXN(tag).toString();
+
+              // Create a view for Contacts.
+              const personView = View.make({
+                query: Query.select(Filter.type(Person.Person)),
+                jsonSchema: Type.toJsonSchema(Person.Person),
+              });
+
+              // Create a view for Organizations.
+              const organizationView = View.make({
+                query: Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagDxn)),
+                jsonSchema: Type.toJsonSchema(Organization.Organization),
+              });
+
+              // Create a view for Tasks.
+              const taskView = View.make({
+                query: Query.select(Filter.type(Task.Task)).select(Filter.tag(tagDxn)),
+                jsonSchema: Type.toJsonSchema(Task.Task),
+              });
+
+              // Create a view for Project-Projects.
+              const projectView = View.make({
+                query: Query.select(Filter.type(Pipeline.Pipeline)),
+                jsonSchema: Type.toJsonSchema(Pipeline.Pipeline),
+              });
+
+              // Create a view for Messages.
+              const messageQueue = space.queues.create();
+              const messageView = View.make({
+                query: Query.select(Filter.type(Message.Message)).options({
+                  queues: [messageQueue.dxn.toString()],
+                }),
+                jsonSchema: Type.toJsonSchema(Message.Message),
+              });
+
+              // Create pipline 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: [],
+                  },
+                ],
+              });
+
+              // Add pipeline to space.
+              space.db.add(pipeline);
+
+              // Generate sample Organizations
+              Array.from({ length: 5 }).forEach(() => {
+                const org = Obj.make(
+                  Organization.Organization,
+                  {
+                    name: faker.company.name(),
+                    website: faker.internet.url(),
+                    description: faker.lorem.paragraph(),
+                    image: faker.image.url(),
+                  },
+                  {
+                    tags: faker.datatype.boolean() ? [Obj.getDXN(tag).toString()] : [],
+                  },
+                );
+                space.db.add(org);
+              });
+
+              // Generate sample Tasks
+              Array.from({ length: 8 }).forEach(() => {
+                const task = Obj.make(
+                  Task.Task,
+                  {
+                    title: faker.lorem.sentence(),
+                    status: faker.helpers.arrayElement(['todo', 'in-progress', 'done']) as any,
+                    priority: faker.helpers.arrayElement(['low', 'medium', 'high']) as any,
+                  },
+                  {
+                    tags: faker.datatype.boolean() ? [Obj.getDXN(tag).toString()] : [],
+                  },
+                );
+                space.db.add(task);
+              });
+
+              // Generate sample Contacts
+              const factory = createObjectFactory(space.db, faker as any);
+              yield* Effect.promise(() => factory([{ type: Person.Person, count: 12 }]));
+
+              // Generate sample Projects
+              Array.from({ length: 3 }).forEach(() => {
+                const nestedProject = Pipeline.make({
+                  name: faker.commerce.productName(),
+                  description: faker.lorem.sentence(),
+                });
+                space.db.add(nestedProject);
+              });
+
+              // Generate sample Messages
+              const messages = Array.from({ length: 6 }).map(() => {
+                const message = Obj.make(Message.Message, {
+                  created: faker.date.recent().toISOString(),
+                  sender: { role: 'user' },
+                  blocks: [
+                    {
+                      _tag: 'text' as const,
+                      text: faker.lorem.sentences(2),
+                    },
+                  ],
+                });
+                return message;
+              });
+
+              yield* Effect.promise(() => messageQueue.append(messages));
+            }),
+        }),
+
+        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/components/PipelineContainer.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { Surface } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
+import { Layout } from '@dxos/react-ui';
+import { useAttention } from '@dxos/react-ui-attention';
+import { type Pipeline as PipelineType } from '@dxos/types';
+
+import { type ItemProps, PipelineComponent } from './PipelineComponent';
+
+export type PipelineContainerProps = SurfaceComponentProps<PipelineType.Pipeline>;
+
+export const PipelineContainer = ({ role, subject: pipeline }: PipelineContainerProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const attendableId = Obj.getDXN(pipeline).toString();
+  const { hasAttention } = useAttention(attendableId);
+
+  const handleColumnAdd = useCallback(
+    () =>
+      invokePromise(DeckOperation.ChangeCompanion, {
+        primary: attendableId,
+        companion: `${attendableId}${ATTENDABLE_PATH_SEPARATOR}settings`,
+      }),
+    [invokePromise, attendableId],
+  );
+
+  return (
+    <Layout.Main role={role} toolbar>
+      <PipelineComponent.Root Item={PipelineItem} onAddColumn={handleColumnAdd}>
+        <PipelineComponent.Toolbar disabled={!hasAttention} />
+        <PipelineComponent.Content pipeline={pipeline} />
+      </PipelineComponent.Root>
+    </Layout.Main>
+  );
+};
+
+const PipelineItem = ({ item, projectionModel }: ItemProps) => {
+  return (
+    <Surface.Surface
+      role='card--content'
+      data={{
+        subject: item,
+        projection: projectionModel,
+      }}
+      limit={1}
+    />
+  );
+};
+
+export default PipelineContainer;

package/src/components/PipelineSettings.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import { DXN, Filter, Obj, Query, type QueryAST, Ref, Tag, Type } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
+import { useTypeOptions } from '@dxos/plugin-space';
+import { resolveSchemaWithRegistry } from '@dxos/plugin-space';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { IconButton, type ThemedClassName, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Form, ViewEditor } from '@dxos/react-ui-form';
+import { List } from '@dxos/react-ui-list';
+import { type ProjectionModel, View } from '@dxos/schema';
+import { Pipeline, Task } from '@dxos/types';
+import { inputTextLabel, mx, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { arrayMove } from '@dxos/util';
+
+import { meta } from '../meta';
+
+const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
+const listItemGrid = 'grid grid-cols-subgrid col-span-5';
+
+const ColumnFormSchema = Pipeline.Column.pipe(Schema.mutable, Schema.pick('name'));
+
+// TODO(burdon): Standardize Object/Plugin settings.
+export type PipelineObjectSettingsProps = ThemedClassName<{
+  pipeline: Pipeline.Pipeline;
+}>;
+
+/**
+ * Supports editing the pipeline view.
+ */
+export const PipelineObjectSettings = ({ classNames, pipeline }: PipelineObjectSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const space = getSpace(pipeline);
+  const [expandedId, setExpandedId] = useState<string>();
+  const column = useMemo(
+    () => pipeline.columns.find((column) => column.view.dxn.toString() === expandedId),
+    [pipeline.columns, expandedId],
+  );
+  const view = column?.view.target;
+  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
+  const projectionRef = useRef<ProjectionModel>(null);
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered', 'unregistered'],
+    },
+  });
+
+  useAsyncEffect(async () => {
+    if (!view?.query || !space) {
+      return;
+    }
+
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
+    if (foundSchema && foundSchema !== schema) {
+      setSchema(() => foundSchema);
+    }
+  }, [space, view, schema]);
+
+  const handleMove = useCallback(
+    (fromIndex: number, toIndex: number) =>
+      Obj.change(pipeline, (p) => {
+        arrayMove(p.columns, fromIndex, toIndex);
+      }),
+    [pipeline],
+  );
+
+  const handleQueryChanged = useCallback(
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!view || !space) {
+        return;
+      }
+
+      const queue = target && DXN.tryParse(target) ? target : undefined;
+      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
+      Obj.change(view, (v) => {
+        v.query.ast = query.ast as Mutable<typeof query.ast>;
+      });
+      const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
+      if (!newSchema) {
+        return;
+      }
+
+      const newView = View.make({
+        query,
+        jsonSchema: Type.toJsonSchema(newSchema),
+      });
+      Obj.change(view, (v) => {
+        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+      });
+
+      setSchema(() => newSchema);
+    },
+    [view, schema],
+  );
+
+  const handleToggleField = useCallback((column: Pipeline.Column) => {
+    setExpandedId((prevExpandedId) =>
+      prevExpandedId === column.view.dxn.toString() ? undefined : column.view.dxn.toString(),
+    );
+  }, []);
+
+  const handleDelete = useCallback(
+    async (column: Pipeline.Column) => {
+      if (column.view.dxn.toString() === expandedId) {
+        setExpandedId(undefined);
+      }
+
+      const index = pipeline.columns.findIndex((l) => l === column);
+      const viewToRemove = await column.view.load();
+      Obj.change(pipeline, (p) => {
+        p.columns.splice(index, 1);
+      });
+      space?.db.remove(viewToRemove);
+    },
+    [expandedId, pipeline.columns, space],
+  );
+
+  const handleAdd = useCallback(() => {
+    const newView = View.make({
+      query: Query.select(Filter.type(Task.Task)),
+      jsonSchema: Type.toJsonSchema(Task.Task),
+    });
+    Obj.change(pipeline, (p) => {
+      p.columns.push({
+        name: 'Tasks',
+        // Type assertion needed due to QueryAST type variance.
+        view: Ref.make(newView) as (typeof p.columns)[number]['view'],
+        order: [],
+      });
+    });
+    setExpandedId(newView.id);
+  }, [pipeline]);
+
+  const handleColumnSave = useCallback(
+    (values: Schema.Schema.Type<typeof ColumnFormSchema>) => {
+      if (column) {
+        const columnIndex = pipeline.columns.findIndex((c) => c === column);
+        Obj.change(pipeline, (p) => {
+          p.columns[columnIndex].name = values.name;
+        });
+      }
+    },
+    [column, pipeline],
+  );
+
+  return (
+    <div role='none' className={mx('plb-cardSpacingBlock overflow-y-auto', classNames)}>
+      <h2 className={mx(inputTextLabel)}>{t('views label')}</h2>
+
+      <List.Root<Pipeline.Column>
+        items={pipeline.columns}
+        isItem={Schema.is(Pipeline.Column)}
+        getId={(column) => column.view.dxn.toString()}
+        onMove={handleMove}
+      >
+        {({ items: columns }) => (
+          <>
+            <div role='list' className={mx(listGrid)}>
+              {columns.map((column) => (
+                <List.Item<Pipeline.Column>
+                  key={column.view.dxn.toString()}
+                  item={column}
+                  classNames={listItemGrid}
+                  aria-expanded={expandedId === column.view.dxn.toString()}
+                >
+                  <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                    <List.ItemDragHandle />
+                    <List.ItemTitle onClick={() => handleToggleField(column)}>{column.name}</List.ItemTitle>
+                    <List.ItemDeleteButton
+                      label={t('delete view label')}
+                      autoHide={false}
+                      onClick={() => handleDelete(column)}
+                      data-testid='view.delete'
+                    />
+                    <IconButton
+                      iconOnly
+                      variant='ghost'
+                      label={t('toggle expand label', { ns: osTranslations })}
+                      icon={
+                        expandedId === column.view.dxn.toString()
+                          ? 'ph--caret-down--regular'
+                          : 'ph--caret-right--regular'
+                      }
+                      onClick={() => handleToggleField(column)}
+                    />
+                  </div>
+                  {expandedId === column.view.dxn.toString() && view && (
+                    <div role='none' className='col-span-5 mlb-2 border border-separator rounded-md'>
+                      <Form.Root schema={ColumnFormSchema} values={column} autoSave onSave={handleColumnSave}>
+                        <Form.Content>
+                          <Form.FieldSet />
+                        </Form.Content>
+                      </Form.Root>
+                      <ViewEditor
+                        ref={projectionRef}
+                        mode='tag'
+                        readonly
+                        schema={schema}
+                        view={view}
+                        registry={space?.db.schemaRegistry}
+                        tags={tags}
+                        types={types}
+                        onQueryChanged={handleQueryChanged}
+                      />
+                    </div>
+                  )}
+                </List.Item>
+              ))}
+            </div>
+          </>
+        )}
+      </List.Root>
+
+      <div role='none' className='mlb-cardSpacingBlock'>
+        <IconButton icon='ph--plus--regular' label={t('add view label')} onClick={handleAdd} classNames='is-full' />
+      </div>
+    </div>
+  );
+};
+
+export default PipelineObjectSettings;

package/src/components/index.ts

@@ -0,0 +1,11 @@
+//
+// 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'));

package/src/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './meta';
+export * from './PipelinePlugin';

package/src/meta.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
+
+export const meta: Plugin.Meta = {
+  id: 'dxos.org/plugin/pipeline',
+  name: 'Pipelines',
+  description: trim`
+    Pipelines for organizing tasks, milestones, and deliverables.
+    Track progress across multiple pipelines and coordinate team activities in a structured environment.
+  `,
+  icon: 'ph--path--regular',
+  iconHue: 'purple',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-pipeline',
+  tags: ['labs'],
+};

package/src/templates/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './templates';