@dxos/plugin-pipeline 0.8.3-main.ef1bc66f44 → 0.8.4-main.03d5cd7b56

package/src/components/PipelineColumn.tsx

@@ -1,145 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import type * as Schema from 'effect/Schema';
-import React, { forwardRef, useMemo, useRef, useState } from 'react';
-
-import { Obj, Query, Type } from '@dxos/echo';
-import { getQueryTarget, resolveSchemaWithRegistry } from '@dxos/plugin-space';
-import { Filter, getSpace, isSpace, useObject, useQuery } from '@dxos/react-client/echo';
-import { ScrollArea, useAsyncEffect, useTranslation } from '@dxos/react-ui';
-import { Card, Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
-import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
-import { type Pipeline } from '@dxos/types';
-
-import { meta } from '../meta';
-
-import { type ItemProps, usePipeline } from './PipelineComponent';
-
-//
-// PipelineColumn
-//
-
-const PIPELINE_COLUMN_NAME = 'PipelineColumn';
-
-export type PipelineColumnProps = {
-  column: Pipeline.Column;
-};
-
-// TODO(thure): Duplicates a lot of the same boilerplate as Kanban columns; is there an opportunity to DRY these out?
-// TODO(wittjosiah): Support column DnD reordering.
-// TODO(wittjosiah): Support item DnD reordering (ordering needs to be stored on the view presentation collection).
-export const PipelineColumn = ({ column }: PipelineColumnProps) => {
-  const { t } = useTranslation(meta.id);
-  // Subscribe to the view target for reactivity.
-  const [viewSnapshot] = useObject(column.view);
-  const view = column.view.target;
-  const space = getSpace(view);
-  const { Item } = usePipeline(PIPELINE_COLUMN_NAME);
-  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>();
-  const query = useMemo(() => {
-    if (!view) {
-      return Query.select(Filter.nothing());
-    } else {
-      // NOTE: Snapshot is required to prevent signal read in prohibited scope.
-      // TODO(wittjosiah): Without stringify, filter.filters remains a proxied array.
-      return Query.fromAst(JSON.parse(JSON.stringify(viewSnapshot?.query.ast)));
-    }
-  }, [JSON.stringify(viewSnapshot?.query.ast)]);
-
-  useAsyncEffect(async () => {
-    if (!query || !space) {
-      return;
-    }
-
-    const schema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
-    setSchema(() => schema);
-  }, [space, query]);
-
-  const queryTarget = getQueryTarget(query.ast, space);
-  const items = useQuery(queryTarget, query);
-  const sortedItems = useMemo(() => {
-    // TODO(burdon): Hack to reverse queue.
-    return isSpace(queryTarget) ? items : [...items.reverse()];
-  }, [queryTarget, items]);
-  const projectionModel = useMemo(() => {
-    if (!schema || !view) {
-      return undefined;
-    }
-
-    // For mutable schemas (EchoSchema), use the live jsonSchema reference for reactivity.
-    const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : Type.toJsonSchema(schema);
-    const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
-    return new ProjectionModel({ view, baseSchema: jsonSchema, change });
-  }, [schema, view]);
-
-  const Tile = useMemo(() => {
-    return forwardRef<HTMLDivElement, Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'>>(
-      (props, ref) => <ItemTile {...props} ref={ref} itemProps={{ item: props.data, projectionModel }} />,
-    );
-  }, [Item, projectionModel]);
-
-  if (!view) {
-    return null;
-  }
-
-  return (
-    <Focus.Group asChild>
-      <div className='grid bs-full card-default-width overflow-hidden grid-rows-[min-content_1fr] density-fine border border-separator rounded-md bg-deckSurface'>
-        <Card.Toolbar>
-          <Card.DragHandle />
-          <Card.Title>{column.name ?? t('untitled view title')}</Card.Title>
-          <Card.Menu />
-        </Card.Toolbar>
-        <Mosaic.Container asChild orientation='vertical' withFocus>
-          <ScrollArea.Root orientation='vertical'>
-            <ScrollArea.Viewport classNames='p-2'>
-              <Mosaic.Stack orientation='vertical' items={sortedItems} getId={(item) => item.id} Tile={Tile} />
-            </ScrollArea.Viewport>
-          </ScrollArea.Root>
-        </Mosaic.Container>
-      </div>
-    </Focus.Group>
-  );
-};
-
-PipelineColumn.displayName = PIPELINE_COLUMN_NAME;
-
-//
-// ItemTile
-//
-
-const ITEM_TILE_NAME = 'ItemTile';
-
-type ItemTileProps = Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'> & {
-  itemProps: ItemProps;
-};
-
-const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
-  ({ classNames, data, location, debug, itemProps }, forwardedRef) => {
-    const rootRef = useRef<HTMLDivElement>(null);
-    const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
-    const { Item } = usePipeline(ITEM_TILE_NAME);
-
-    return (
-      <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
-        <Focus.Group asChild>
-          <Card.Root classNames={classNames} ref={composedRef}>
-            <Card.Toolbar>
-              <Card.DragHandle />
-              <Card.Title>{Obj.getLabel(data)}</Card.Title>
-              <Card.Menu />
-            </Card.Toolbar>
-            <Card.Content>
-              <Item {...itemProps} />
-            </Card.Content>
-          </Card.Root>
-        </Focus.Group>
-      </Mosaic.Tile>
-    );
-  },
-);
-
-ItemTile.displayName = ITEM_TILE_NAME;

package/src/components/PipelineComponent.tsx

@@ -1,103 +0,0 @@
-//
-// 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

@@ -1,226 +0,0 @@
-//
-// 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

@@ -1,57 +0,0 @@
-//
-// 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/types/PipelineAction.ts

@@ -1,29 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { Capability } from '@dxos/app-framework';
-import { Operation } from '@dxos/operation';
-import { SpaceSchema } from '@dxos/react-client/echo';
-import { Collection } from '@dxos/schema';
-
-import { meta } from '../meta';
-
-const PIPELINE_OPERATION = `${meta.id}/operation`;
-
-export namespace PipelineOperation {
-  export const OnCreateSpace = Operation.make({
-    meta: { key: `${PIPELINE_OPERATION}/on-create-space`, name: 'On Create Space' },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.Struct({
-        space: SpaceSchema,
-        rootCollection: Collection.Collection,
-        isDefault: Schema.optional(Schema.Boolean),
-      }),
-      output: Schema.Void,
-    },
-  });
-}