@dxos/plugin-space 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/capabilities/schema-defs.ts

@@ -1,31 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
-import { ClientCapabilities } from '@dxos/plugin-client';
-
-import { type ObjectForm } from '../types';
-
-import { SpaceCapabilities } from './capabilities';
-
-export default (context: PluginContext) => {
-  const registry = context.getCapability(Capabilities.AtomRegistry);
-  const client = context.getCapability(ClientCapabilities.Client);
-
-  // TODO(wittjosiah): Unregister schemas when they are disabled.
-  let previous: ObjectForm[] = [];
-  const cancel = registry.subscribe(
-    context.capabilities(SpaceCapabilities.ObjectForm),
-    (_forms) => {
-      const forms = Array.from(new Set(_forms));
-      // TODO(wittjosiah): Filter out schemas which the client has already registered.
-      const newSchemas = forms.filter((form) => !previous.includes(form)).map((form) => form.objectSchema);
-      previous = forms;
-      client.addTypes(newSchemas);
-    },
-    { immediate: true },
-  );
-
-  return contributes(Capabilities.Null, null, () => cancel());
-};

package/src/components/AwaitingObject.tsx

@@ -1,110 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
-import { useClient } from '@dxos/react-client';
-import { Filter, useQuery } from '@dxos/react-client/echo';
-import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../meta';
-import { SpaceAction } from '../types';
-
-const WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1_000;
-const TOAST_TIMEOUT = 4 * 60 * 1_000;
-
-export const AwaitingObject = ({ id }: { id: string }) => {
-  const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const [open, setOpen] = useState(true);
-  const [waiting, setWaiting] = useState(true);
-  const [found, setFound] = useState(false);
-  const layout = useLayout();
-
-  const client = useClient();
-  const objects = useQuery(client.spaces, Filter.everything());
-
-  useEffect(() => {
-    if (!id) {
-      return;
-    }
-
-    const timeout = setTimeout(() => setWaiting(false), WAIT_FOR_OBJECT_TIMEOUT);
-    return () => clearTimeout(timeout);
-  }, [id]);
-
-  useEffect(() => {
-    if (objects.findIndex((object) => Obj.getDXN(object).toString() === id) > -1) {
-      setFound(true);
-      if (layout.active.includes(id)) {
-        setOpen(false);
-      }
-    }
-  }, [id, objects, layout]);
-
-  const handleClose = useCallback(
-    async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),
-    [dispatch],
-  );
-
-  const handleNavigate = useCallback(() => {
-    void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
-    void handleClose();
-  }, [id, handleClose, dispatch]);
-
-  return (
-    <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
-      <Toast.Body>
-        <Toast.Title classNames='flex items-center gap-2'>
-          {found ? (
-            <>
-              <Icon icon='ph--check-circle--regular' size={5} />
-              <span>{t('found object label')}</span>
-            </>
-          ) : waiting ? (
-            <>
-              <Icon icon='ph--circle-notch--regular' size={5} classNames='animate-spin' />
-              <span>{t('waiting for object label')}</span>
-            </>
-          ) : (
-            <>
-              <Icon icon='ph--circle-dashed--regular' size={5} />
-              <span>{t('object not found label')}</span>
-            </>
-          )}
-        </Toast.Title>
-        <Toast.Description>
-          {t(
-            found
-              ? 'found object description'
-              : waiting
-                ? 'waiting for object description'
-                : 'object not found description',
-          )}
-        </Toast.Description>
-      </Toast.Body>
-      <Toast.Actions>
-        {found ? (
-          <>
-            <Toast.Action altText={t('go to object alt')} asChild>
-              <Button variant='primary' onClick={handleNavigate}>
-                {t('go to object label')}
-              </Button>
-            </Toast.Action>
-            <Toast.Close asChild>
-              <Button onClick={handleClose}>{t('close label', { ns: 'appkit' })}</Button>
-            </Toast.Close>
-          </>
-        ) : (
-          <Toast.Close asChild>
-            <Button onClick={handleClose}>{t(waiting ? 'close label' : 'confirm label', { ns: 'appkit' })}</Button>
-          </Toast.Close>
-        )}
-      </Toast.Actions>
-    </Toast.Root>
-  );
-};

package/src/components/CollectionArticle.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { useTranslation } from '@dxos/react-ui';
-import { baseSurface, descriptionMessage, mx } from '@dxos/react-ui-theme';
-import { type Collection } from '@dxos/schema';
-
-import { meta } from '../meta';
-
-export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection>) => {
-  const { t } = useTranslation(meta.id);
-
-  return (
-    <div
-      role='none'
-      className={mx(baseSurface, 'min-bs-screen is-full flex items-center justify-center p-8')}
-      data-testid='composer.firstRunMessage'
-    >
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'rounded-md p-8 font-normal text-lg max-is-[24rem] break-words')}
-      >
-        {subject.name ?? t('unnamed collection label')}
-      </p>
-    </div>
-  );
-};
-
-export default CollectionArticle;

package/src/components/CollectionSection.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { useTranslation } from '@dxos/react-ui';
-import { type Collection } from '@dxos/schema';
-
-import { meta } from '../meta';
-
-export const CollectionSection = ({ role, subject }: SurfaceComponentProps<Collection.Collection>) => {
-  const { t } = useTranslation(meta.id);
-
-  // TODO(wittjosiah): Better placeholder.
-  return (
-    <div role={role} className='min-bs-[3.5rem] grid grid-rows-subgrid grid-cols-subgrid items-center'>
-      <span className='truncate'>{subject.name ?? t('unnamed collection label')}</span>
-    </div>
-  );
-};

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -1,85 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect } from 'react';
-
-import { IntentPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Filter, Obj } from '@dxos/echo';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { Dialog } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Collection } from '@dxos/schema';
-import { translations as shellTranslations } from '@dxos/shell/react';
-
-import { translations } from '../../translations';
-
-import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
-
-const Story = (props: CreateObjectDialogProps) => {
-  return (
-    <Dialog.Root open>
-      <Dialog.Overlay blockAlign='start'>
-        <CreateObjectDialog {...props} />
-      </Dialog.Overlay>
-    </Dialog.Root>
-  );
-};
-
-// TODO(wittjosiah): Story should be for CreateObjectPanel.
-const meta = {
-  title: 'plugins/plugin-space/CreateObjectDialog',
-  component: CreateObjectDialog,
-  render: Story,
-  decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withClientProvider({ createIdentity: true, createSpace: true, types: [Collection.Collection] }),
-  ],
-  parameters: {
-    translations: [...translations, ...shellTranslations],
-  },
-  args: {},
-} satisfies Meta<typeof CreateObjectDialog>;
-
-export default meta;
-
-export const Default: StoryObj<typeof CreateObjectDialog> = {};
-
-export const Typename: StoryObj<typeof CreateObjectDialog> = {
-  args: { typename: Collection.Collection.typename },
-};
-
-export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
-  render: (args) => {
-    const space = useSpace();
-
-    if (!space) {
-      return <></>;
-    }
-
-    return <Story {...args} target={space} />;
-  },
-};
-
-export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
-  render: (args) => {
-    const space = useSpace();
-    const [collection] = useQuery(space, Filter.type(Collection.Collection));
-
-    useEffect(() => {
-      if (space) {
-        space.db.add(Obj.make(Collection.Collection, { name: 'My Collection', objects: [] }));
-      }
-    }, [space]);
-
-    if (!collection) {
-      return <></>;
-    }
-
-    return <Story {...args} target={collection} />;
-  },
-};

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -1,142 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import * as Function from 'effect/Function';
-import React, { useCallback, useRef, useState } from 'react';
-
-import { Capabilities, LayoutAction, chain, createIntent } from '@dxos/app-framework';
-import { useCapabilities, useIntentDispatcher, usePluginManager } from '@dxos/app-framework/react';
-import { Obj, Query, Type } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
-import { useClient } from '@dxos/react-client';
-import { type Space, getSpace, isLiveObject, isSpace, useQuery, useSpaces } from '@dxos/react-client/echo';
-import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
-import { Collection, StoredSchema, getTypenameFromQuery } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
-
-import { SpaceCapabilities } from '../../capabilities';
-import { meta } from '../../meta';
-import { SpaceAction } from '../../types';
-
-import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
-
-export const CREATE_OBJECT_DIALOG = `${meta.id}/CreateObjectDialog`;
-
-export type CreateObjectDialogProps = Pick<
-  CreateObjectPanelProps,
-  'target' | 'views' | 'typename' | 'initialFormValues'
-> & {
-  onCreateObject?: (object: Obj.Any) => void;
-  shouldNavigate?: (object: Obj.Any) => boolean;
-};
-
-export const CreateObjectDialog = ({
-  target: initialTarget,
-  typename: initialTypename,
-  views,
-  initialFormValues,
-  onCreateObject,
-  shouldNavigate: _shouldNavigate,
-}: CreateObjectDialogProps) => {
-  const manager = usePluginManager();
-  const { t } = useTranslation(meta.id);
-  const { dispatch } = useIntentDispatcher();
-  const forms = useCapabilities(SpaceCapabilities.ObjectForm);
-  const [target, setTarget] = useState<Space | Collection.Collection | undefined>(initialTarget);
-  const [typename, setTypename] = useState<string | undefined>(initialTypename);
-  const client = useClient();
-  const spaces = useSpaces();
-  const space = isSpace(target) ? target : getSpace(target);
-  const queryCollections = useQuery(space, Query.type(Collection.QueryCollection));
-  const hiddenTypenames = queryCollections
-    .map((collection) => getTypenameFromQuery(collection.query))
-    .filter(isNonNullable);
-  const closeRef = useRef<HTMLButtonElement | null>(null);
-
-  const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (typename) =>
-      manager.context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {},
-    [manager],
-  );
-
-  const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
-    ({ form, data = {} }) =>
-      Effect.gen(function* () {
-        if (!target) {
-          // TODO(wittjosiah): UI feedback.
-          return;
-        }
-
-        // NOTE: Must close before navigating or attention won't follow object.
-        closeRef.current?.click();
-
-        const space = isSpace(target) ? target : getSpace(target);
-        invariant(space, 'Missing space');
-        const { object } = yield* dispatch(form.getIntent(data, { space }));
-        if (isLiveObject(object) && !Obj.instanceOf(StoredSchema, object)) {
-          // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
-          const hidden = form.hidden || hiddenTypenames.includes(Type.getTypename(form.objectSchema));
-          const addObjectIntent = createIntent(SpaceAction.AddObject, {
-            target,
-            object,
-            hidden,
-          });
-          const shouldNavigate = _shouldNavigate ?? (() => true);
-          if (shouldNavigate(object)) {
-            yield* dispatch(Function.pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
-          } else {
-            yield* dispatch(addObjectIntent);
-          }
-
-          onCreateObject?.(object);
-        }
-      }).pipe(Effect.runPromise),
-    [dispatch, target, resolve, hiddenTypenames, _shouldNavigate],
-  );
-
-  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.Title>
-          {t('create object dialog title', {
-            object: t('typename label', {
-              ns: typename,
-              defaultValue: views ? 'View' : 'Item',
-            }),
-          })}
-        </Dialog.Title>
-        <Dialog.Close asChild>
-          <IconButton
-            ref={closeRef}
-            icon='ph--x--regular'
-            size={4}
-            label='Close'
-            iconOnly
-            density='fine'
-            variant='ghost'
-            autoFocus
-          />
-        </Dialog.Close>
-      </div>
-
-      <CreateObjectPanel
-        forms={forms}
-        spaces={spaces}
-        target={target}
-        views={views}
-        typename={typename}
-        initialFormValues={initialFormValues}
-        defaultSpaceId={client.spaces.default.id}
-        resolve={resolve}
-        onTargetChange={setTarget}
-        onTypenameChange={setTypename}
-        onCreateObject={handleCreateObject}
-      />
-    </Dialog.Content>
-  );
-};

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -1,185 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import React, { useCallback } from 'react';
-
-import { Type } from '@dxos/echo';
-import { type BaseObject, type TypeAnnotation, ViewAnnotation, 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 Collection } from '@dxos/schema';
-import { type MaybePromise, isNonNullable } from '@dxos/util';
-
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { type ObjectForm } from '../../types';
-import { getSpaceDisplayName } from '../../util';
-
-export type CreateObjectPanelProps = {
-  forms: ObjectForm[];
-  spaces: Space[];
-  typename?: string;
-  target?: Space | Collection.Collection;
-  views?: boolean;
-  initialFormValues?: Partial<BaseObject>;
-  defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Record<string, any>;
-  onTargetChange?: (target: Space) => void;
-  onTypenameChange?: (typename: string) => void;
-  onCreateObject?: (params: { form: ObjectForm; data?: Record<string, any> }) => MaybePromise<void>;
-};
-
-export const CreateObjectPanel = ({
-  forms,
-  spaces,
-  typename,
-  target,
-  views,
-  initialFormValues: _initialFormValues,
-  defaultSpaceId,
-  resolve,
-  onTargetChange,
-  onTypenameChange,
-  onCreateObject,
-}: CreateObjectPanelProps) => {
-  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) => {
-      if (views == null) {
-        return true;
-      } else {
-        return views === ViewAnnotation.get(form.objectSchema).pipe(Option.getOrElse(() => false));
-      }
-    })
-    .map((form) => getTypeAnnotation(form.objectSchema))
-    .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 });
-      return nameA.localeCompare(nameB);
-    });
-
-  const handleCreateObject = useCallback(
-    async (props: Record<string, any>) => {
-      if (!form) {
-        return;
-      }
-      await onCreateObject?.({ form, data: props });
-    },
-    [onCreateObject, form],
-  );
-
-  const handleSetTypename = useCallback(
-    async (typename: string) => {
-      const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
-      if (form && !form.formSchema) {
-        await onCreateObject?.({ form });
-      } else {
-        onTypenameChange?.(typename);
-      }
-    },
-    [forms, onCreateObject],
-  );
-
-  const inputSurfaceLookup = useInputSurfaceLookup({ target });
-
-  // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  return !form ? (
-    <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>
-  ) : null;
-};
-
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { onChange?: (space: Space) => void } & Pick<CreateObjectPanelProps, 'spaces' | 'defaultSpaceId'>) => {
-  const { t } = useTranslation(meta.id);
-
-  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>
-  );
-};
-
-const SelectSchema = ({
-  options,
-  resolve,
-  onChange,
-}: {
-  options: TypeAnnotation[];
-  onChange: (type: string) => void;
-} & Pick<CreateObjectPanelProps, 'resolve'>) => {
-  const { t } = useTranslation(meta.id);
-
-  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>
-  );
-};