@dxos/plugin-space 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -2,40 +2,47 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
-import React, { useCallback } from 'react';
+import * as Option from 'effect/Option';
+import type * as Schema from 'effect/Schema';
+import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { type BaseObject, type TypeAnnotation, ViewAnnotation, getTypeAnnotation } from '@dxos/echo-schema';
+import { type Database, Obj } from '@dxos/echo';
+import { type AnyProperties, type TypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
 import { type Space, type SpaceId } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import { cardDialogOverflow, cardDialogPaddedOverflow, cardDialogSearchListRoot } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { toLocalizedString, useDefaultValue, useTranslation } from '@dxos/react-ui';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { type Collection, ViewAnnotation } from '@dxos/schema';
 import { type MaybePromise, isNonNullable } from '@dxos/util';
 
 import { useInputSurfaceLookup } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
-import { type ObjectForm } from '../../types';
+import { meta } from '../../meta';
+import { type CreateObject } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
+export type Metadata = {
+  createObject: CreateObject;
+  inputSchema?: Schema.Schema.AnyNoContext;
+  addToCollectionOnCreate?: boolean;
+  icon?: string;
+};
+
 export type CreateObjectPanelProps = {
-  forms: ObjectForm[];
+  schemas: Schema.Schema.AnyNoContext[];
   spaces: Space[];
   typename?: string;
-  target?: Space | DataType.Collection;
+  target?: Database.Database | Collection.Collection;
   views?: boolean;
-  initialFormValues?: Partial<BaseObject>;
+  initialFormValues?: Partial<AnyProperties>;
   defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Record<string, any>;
-  onTargetChange?: (target: Space) => void;
+  resolve?: (typename: string) => Metadata | undefined;
+  onTargetChange?: (target: Database.Database) => void;
   onTypenameChange?: (typename: string) => void;
-  onCreateObject?: (params: { form: ObjectForm; data?: Record<string, any> }) => MaybePromise<void>;
+  onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
 };
 
 export const CreateObjectPanel = ({
-  forms,
+  schemas,
   spaces,
   typename,
   target,
@@ -47,66 +54,77 @@ export const CreateObjectPanel = ({
   onTypenameChange,
   onCreateObject,
 }: CreateObjectPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const initialFormValues = useDefaultValue(_initialFormValues, () => ({}));
-  const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
-  const options: TypeAnnotation[] = forms
-    .filter((form) => {
+  const metadata = typename && resolve?.(typename);
+  const options: TypeAnnotation[] = schemas
+    .filter((schema) => {
       if (views == null) {
         return true;
       } else {
-        return views === ViewAnnotation.get(form.objectSchema).pipe(Option.getOrElse(() => false));
+        return views === ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false));
       }
     })
-    .map((form) => getTypeAnnotation(form.objectSchema))
+    .map((schema) => getTypeAnnotation(schema))
     .filter(isNonNullable)
     .sort((a, b) => {
-      const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
-      const nameB = t('typename label', { ns: b.typename, defaultValue: b.typename });
+      const nameA = t('typename label', {
+        ns: a.typename,
+        defaultValue: a.typename,
+      });
+      const nameB = t('typename label', {
+        ns: b.typename,
+        defaultValue: b.typename,
+      });
       return nameA.localeCompare(nameB);
     });
 
   const handleCreateObject = useCallback(
     async (props: Record<string, any>) => {
-      if (!form) {
+      if (!metadata) {
         return;
       }
-      await onCreateObject?.({ form, data: props });
+      await onCreateObject?.({ metadata, data: props });
     },
-    [onCreateObject, form],
+    [onCreateObject, metadata],
   );
 
   const handleSetTypename = useCallback(
     async (typename: string) => {
-      const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
-      if (form && !form.formSchema) {
-        await onCreateObject?.({ form });
+      const metadata = resolve?.(typename);
+      if (metadata && !metadata.inputSchema) {
+        await onCreateObject?.({ metadata });
       } else {
         onTypenameChange?.(typename);
       }
     },
-    [forms, onCreateObject],
+    [resolve, onCreateObject],
   );
 
   const inputSurfaceLookup = useInputSurfaceLookup({ target });
 
   // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return !form ? (
+  return !metadata ? (
     <SelectSchema options={options} resolve={resolve} onChange={handleSetTypename} />
   ) : !target ? (
     <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />
-  ) : form.formSchema ? (
-    <div role='none' className={cardDialogOverflow}>
-      <Form
-        autoFocus
-        values={initialFormValues}
-        schema={form.formSchema}
-        testId='create-object-form'
-        onSave={handleCreateObject}
-        lookupComponent={inputSurfaceLookup}
-        outerSpacing='blockStart-0'
-      />
-    </div>
+  ) : metadata.inputSchema ? (
+    <Form.Root
+      testId='create-object-form'
+      autoFocus
+      schema={omitId(metadata.inputSchema)}
+      values={initialFormValues}
+      db={Obj.isObject(target) ? Obj.getDatabase(target) : target}
+      fieldProvider={inputSurfaceLookup}
+      onSave={handleCreateObject}
+    >
+      <Form.Viewport>
+        <Form.Content>
+          <Form.FieldSet />
+          <Form.Submit />
+        </Form.Content>
+      </Form.Viewport>
+    </Form.Root>
   ) : null;
 };
 
@@ -114,36 +132,67 @@ const SelectSpace = ({
   spaces,
   defaultSpaceId,
   onChange,
-}: { onChange?: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+}: { onChange?: (db: Database.Database) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
+  const { t } = useTranslation(meta.id);
+
+  const sortedSpaces = useMemo(
+    () =>
+      [...spaces].sort((a, b) => {
+        const labelA = toLocalizedString(
+          getSpaceDisplayName(a, {
+            personal: a.id === defaultSpaceId,
+          }),
+          t,
+        );
+        const labelB = toLocalizedString(
+          getSpaceDisplayName(b, {
+            personal: b.id === defaultSpaceId,
+          }),
+          t,
+        );
+        return labelA.localeCompare(labelB);
+      }),
+    [spaces, defaultSpaceId, t],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedSpaces,
+    extract: (space) =>
+      toLocalizedString(
+        getSpaceDisplayName(space, {
+          personal: space.id === defaultSpaceId,
+        }),
+        t,
+      ),
+  });
 
   return (
-    <SearchList.Root label={t('space input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.space-input'
-        placeholder={t('space input placeholder')}
-      />
-      <SearchList.Content classNames={[cardDialogOverflow, 'plb-cardSpacingBlock']}>
-        {spaces
-          .sort((a, b) => {
-            const aName = toLocalizedString(getSpaceDisplayName(a, { personal: a.id === defaultSpaceId }), t);
-            const bName = toLocalizedString(getSpaceDisplayName(b, { personal: b.id === defaultSpaceId }), t);
-            return aName.localeCompare(bName);
-          })
-          .map((space) => (
-            <SearchList.Item
-              key={space.id}
-              value={toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              onSelect={() => onChange?.(space)}
-              classNames='flex items-center gap-2'
-            >
-              <span className='grow truncate'>
-                {toLocalizedString(getSpaceDisplayName(space, { personal: space.id === defaultSpaceId }), t)}
-              </span>
-            </SearchList.Item>
-          ))}
-      </SearchList.Content>
+    <SearchList.Root onSearch={handleSearch}>
+      <div aria-label={t('space input label')} role='combobox' aria-expanded='true'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.space-input'
+          placeholder={t('space input placeholder')}
+        />
+        <SearchList.Content>
+          <SearchList.Viewport>
+            {results.map((space) => (
+              <SearchList.Item
+                key={space.id}
+                value={space.id}
+                label={toLocalizedString(
+                  getSpaceDisplayName(space, {
+                    personal: space.id === defaultSpaceId,
+                  }),
+                  t,
+                )}
+                onSelect={() => onChange?.(space.db)}
+                classNames='flex items-center gap-2'
+              />
+            ))}
+          </SearchList.Viewport>
+        </SearchList.Content>
+      </div>
     </SearchList.Root>
   );
 };
@@ -156,30 +205,43 @@ const SelectSchema = ({
   options: TypeAnnotation[];
   onChange: (type: string) => void;
 } & Pick<CreateObjectPanelProps, 'resolve'>) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
+
+  const { results, handleSearch } = useSearchListResults({
+    items: options,
+    extract: (option) =>
+      t('typename label', {
+        ns: option.typename,
+        defaultValue: option.typename,
+      }),
+  });
 
   return (
-    <SearchList.Root label={t('schema input label')} classNames={cardDialogSearchListRoot}>
-      <SearchList.Input
-        autoFocus
-        data-testid='create-object-form.schema-input'
-        placeholder={t('schema input placeholder')}
-      />
-      <SearchList.Content classNames={cardDialogPaddedOverflow}>
-        {options.map((option) => (
-          <SearchList.Item
-            key={option.typename}
-            value={t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            onSelect={() => onChange(option.typename)}
-            classNames='flex items-center gap-2'
-          >
-            <span className='flex gap-2 items-center grow truncate'>
-              <Icon icon={resolve?.(option.typename).icon ?? 'ph--placeholder--regular'} size={5} />
-              {t('typename label', { ns: option.typename, defaultValue: option.typename })}
-            </span>
-          </SearchList.Item>
-        ))}
-      </SearchList.Content>
+    <SearchList.Root onSearch={handleSearch}>
+      <div aria-label={t('schema input label')} role='combobox' aria-expanded='true'>
+        <SearchList.Input
+          autoFocus
+          data-testid='create-object-form.schema-input'
+          placeholder={t('schema input placeholder')}
+        />
+        <SearchList.Content>
+          <SearchList.Viewport>
+            {results.map((option) => (
+              <SearchList.Item
+                key={option.typename}
+                value={option.typename}
+                label={t('typename label', {
+                  ns: option.typename,
+                  defaultValue: option.typename,
+                })}
+                icon={resolve?.(option.typename)?.icon ?? 'ph--placeholder--regular'}
+                onSelect={() => onChange(option.typename)}
+                classNames='flex items-center gap-2'
+              />
+            ))}
+          </SearchList.Viewport>
+        </SearchList.Content>
+      </div>
     </SearchList.Root>
   );
 };

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -2,65 +2,71 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, type Schema } from 'effect';
+import * as Effect from 'effect/Effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+import { Common } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/react';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Dialog, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
 
 import { useInputSurfaceLookup } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
+import { meta } from '../../meta';
+import { SpaceForm, SpaceOperation } from '../../types';
 
-export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
+export const CREATE_SPACE_DIALOG = `${meta.id}/CreateSpaceDialog`;
 
 type FormValues = Schema.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
 
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
 
   const inputSurfaceLookup = useInputSurfaceLookup();
 
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
       const program = Effect.gen(function* () {
-        const { space } = yield* dispatch(createIntent(SpaceAction.Create, data));
-        yield* dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
-        yield* dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
+        const { data: result } = yield* Effect.promise(() => invokePromise(SpaceOperation.Create, data));
+        if (result?.space) {
+          yield* Effect.promise(() =>
+            invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: result.space.id }),
+          );
+          yield* Effect.promise(() => invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }));
+        }
       });
-      await Effect.runPromise(program);
+      await runAndForwardErrors(program);
     },
-    [dispatch],
+    [invokePromise],
   );
 
   return (
-    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
-    //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames={cardDialogContent}>
-      <div role='none' className={cardDialogHeader}>
+    <Dialog.Content>
+      <Dialog.Header>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
-          <Button ref={closeRef} density='fine' variant='ghost' autoFocus>
-            <Icon icon='ph--x--regular' size={4} />
-          </Button>
+          <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
-      </div>
-      <div role='none' className='contents'>
-        <Form
-          testId='create-space-form'
-          autoFocus
-          values={initialValues}
-          schema={SpaceForm}
-          lookupComponent={inputSurfaceLookup}
-          onSave={handleCreateSpace}
-          outerSpacing='scroll-fields'
-        />
-      </div>
+      </Dialog.Header>
+      <Form.Root
+        testId='create-space-form'
+        autoFocus
+        schema={SpaceForm}
+        values={initialValues}
+        fieldProvider={inputSurfaceLookup}
+        onSave={handleCreateSpace}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+            <Form.Submit />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
     </Dialog.Content>
   );
 };

package/src/components/{JoinDialog.tsx → JoinDialog/JoinDialog.tsx}

@@ -4,28 +4,31 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
 import { Trigger } from '@dxos/async';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { Graph } from '@dxos/plugin-graph';
+import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 
-import { SPACE_PLUGIN } from '../meta';
+import { meta } from '../../meta';
 
-export const JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
 
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const { graph } = useAppGraph();
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
@@ -35,25 +38,13 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       }
 
       await Promise.all([
-        dispatch(
-          createIntent(LayoutAction.AddToast, {
-            part: 'toast',
-            subject: {
-              id: `${SPACE_PLUGIN}/join-success`,
-              duration: 5_000,
-              title: ['join success label', { ns: SPACE_PLUGIN }],
-              closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
-            },
-          }),
-        ),
-        dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            options: {
-              state: false,
-            },
-          }),
-        ),
+        invokePromise(Common.LayoutOperation.AddToast, {
+          id: `${meta.id}/join-success`,
+          duration: 5_000,
+          title: ['join success label', { ns: meta.id }],
+          closeLabel: ['dismiss label', { ns: meta.id }],
+        }),
+        invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }),
       ]);
 
       let space = client.spaces.get(spaceKey);
@@ -69,7 +60,7 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         space = await trigger.wait();
       }
 
-      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
+      await invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: space.id });
 
       // TODO(wittjosiah): If navigableCollections is false and there's no target,
       //   should try to navigate to the first object of the space replicates.
@@ -78,32 +69,30 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
       if (target) {
         // Wait before navigating to the target node.
         // If the target has not yet replicated, this will trigger a loading toast.
-        await graph.waitForPath({ target }).catch(() => {});
+        await Graph.waitForPath(graph, { target }).catch(() => {});
         await Promise.all([
-          dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [target] })),
-          dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: target })),
+          invokePromise(Common.LayoutOperation.Open, { subject: [target] }),
+          invokePromise(Common.LayoutOperation.Expose, { subject: target }),
         ]);
       }
 
       await onDone?.(result);
 
       if (space) {
-        await dispatch(
-          createIntent(ObservabilityAction.SendEvent, {
-            name: 'space.join',
-            properties: {
-              spaceId: space.id,
-            },
-          }),
-        );
+        await invokePromise(ObservabilityOperation.SendEvent, {
+          name: 'space.join',
+          properties: {
+            spaceId: space.id,
+          },
+        });
       }
     },
-    [dispatch, client, graph],
+    [invokePromise, client, graph, navigableCollections, onDone],
   );
 
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: 'os' })}</Dialog.Title>
+      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
       <JoinPanel
         {...props}
         exitActionParent={<Dialog.Close asChild />}

package/src/components/JoinDialog/index.ts

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

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

@@ -2,17 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { OperationPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
 import { MembersContainer } from './MembersContainer';
 
@@ -35,12 +36,12 @@ const meta = {
   component: MembersContainer as any,
   render: render(DefaultStory),
   decorators: [
+    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({ plugins: [OperationPlugin()] }),
     withClientProvider({
       createIdentity: true,
       createSpace: true,
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'fullscreen',