@dxos/plugin-space 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/components/AwaitingObject.tsx

@@ -1,114 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { useLayout } from '@dxos/app-toolkit/ui';
-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 { osTranslations } from '@dxos/ui-theme';
-
-import { meta } from '../meta';
-import { SpaceOperation } 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 { invokePromise } = useOperationInvoker();
-  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 () => invokePromise(SpaceOperation.WaitForObject, { id: undefined }),
-    [invokePromise],
-  );
-
-  const handleNavigate = useCallback(() => {
-    void invokePromise(LayoutOperation.Open, { subject: [id] });
-    void handleClose();
-  }, [id, handleClose, invokePromise]);
-
-  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: osTranslations })}</Button>
-            </Toast.Close>
-          </>
-        ) : (
-          <Toast.Close asChild>
-            <Button onClick={handleClose}>
-              {t(waiting ? 'close label' : 'confirm label', { ns: osTranslations })}
-            </Button>
-          </Toast.Close>
-        )}
-      </Toast.Actions>
-    </Toast.Root>
-  );
-};

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -1,223 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type * as Schema from 'effect/Schema';
-import React, { useCallback, useMemo } from 'react';
-
-import { type Database, Obj } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
-import { type AnyProperties } from '@dxos/echo/internal';
-import { type Space, type SpaceId } from '@dxos/react-client/echo';
-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 MaybePromise } from '@dxos/util';
-
-import { useInputSurfaceLookup } from '../../hooks';
-import { meta } from '../../meta';
-import { type CreateObject } from '../../types';
-import { getSpaceDisplayName } from '../../util';
-
-/** Display-ready option for the create object search list. */
-export type CreateObjectOption = {
-  id: string;
-  label: string;
-  icon?: string;
-};
-
-export type Metadata = {
-  createObject: CreateObject;
-  inputSchema?: Schema.Schema.AnyNoContext;
-  addToCollectionOnCreate?: boolean;
-  icon?: string;
-};
-
-export type CreateObjectPanelProps = {
-  options: CreateObjectOption[];
-  spaces: Space[];
-  typename?: string;
-  target?: Database.Database | Collection.Collection;
-  initialFormValues?: Partial<AnyProperties>;
-  defaultSpaceId?: SpaceId;
-  resolve?: (typename: string) => Metadata | undefined;
-  onTargetChange?: (target: Database.Database) => void;
-  onTypenameChange?: (typename: string) => void;
-  onCreateObject?: (params: { metadata: Metadata; data?: Record<string, any> }) => MaybePromise<void>;
-};
-
-export const CreateObjectPanel = ({
-  options,
-  spaces,
-  typename,
-  target,
-  initialFormValues: initialFormValuesProp,
-  defaultSpaceId,
-  resolve,
-  onTargetChange,
-  onTypenameChange,
-  onCreateObject,
-}: CreateObjectPanelProps) => {
-  const initialFormValues = useDefaultValue(initialFormValuesProp, () => ({}));
-  const metadata = typename && resolve?.(typename);
-
-  const sortedOptions = useMemo(() => [...options].sort((a, b) => a.label.localeCompare(b.label)), [options]);
-
-  const handleCreateObject = useCallback(
-    async (props: Record<string, any>) => {
-      if (!metadata) {
-        return;
-      }
-      await onCreateObject?.({ metadata, data: props });
-    },
-    [onCreateObject, metadata],
-  );
-
-  const handleSelectOption = useCallback(
-    async (id: string) => {
-      const metadata = resolve?.(id);
-      if (metadata && !metadata.inputSchema) {
-        await onCreateObject?.({ metadata });
-      } else {
-        onTypenameChange?.(id);
-      }
-    },
-    [resolve, onCreateObject],
-  );
-
-  const inputSurfaceLookup = useInputSurfaceLookup({ target });
-
-  // TODO(wittjosiah): These inputs should be rolled into a `Form` once it supports the necessary variants.
-  if (!metadata) {
-    return <SelectType options={sortedOptions} onChange={handleSelectOption} />;
-  }
-
-  if (!target) {
-    return <SelectSpace spaces={spaces} defaultSpaceId={defaultSpaceId} onChange={onTargetChange} />;
-  }
-
-  if (metadata.inputSchema) {
-    return (
-      <Form.Root
-        testId='create-object-form'
-        autoFocus
-        schema={omitId(metadata.inputSchema)}
-        defaultValues={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>
-    );
-  }
-
-  return null;
-};
-
-CreateObjectPanel.displayName = 'CreateObjectPanel';
-
-const SelectSpace = ({
-  spaces,
-  defaultSpaceId,
-  onChange,
-}: { 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 onSearch={handleSearch}>
-      <SearchList.Content>
-        <SearchList.Input
-          autoFocus
-          data-testid='create-object-form.space-input'
-          placeholder={t('space input placeholder')}
-        />
-        <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>
-    </SearchList.Root>
-  );
-};
-
-const SelectType = ({ options, onChange }: { options: CreateObjectOption[]; onChange: (id: string) => void }) => {
-  const { t } = useTranslation(meta.id);
-
-  const { results, handleSearch } = useSearchListResults({
-    items: options,
-    extract: (option) => option.label,
-  });
-
-  return (
-    <SearchList.Root onSearch={handleSearch}>
-      <SearchList.Content>
-        <SearchList.Input
-          autoFocus
-          data-testid='create-object-form.schema-input'
-          placeholder={t('schema input placeholder')}
-        />
-        <SearchList.Viewport>
-          {results.map((option) => (
-            <SearchList.Item
-              key={option.id}
-              value={option.id}
-              label={option.label}
-              icon={option.icon ?? 'ph--placeholder--regular'}
-              classNames='flex items-center gap-2'
-              onSelect={() => onChange(option.id)}
-            />
-          ))}
-        </SearchList.Viewport>
-      </SearchList.Content>
-    </SearchList.Root>
-  );
-};

package/src/components/ObjectDetails/BaseObjectSettings.stories.tsx

@@ -1,63 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { type Obj, Tag } from '@dxos/echo';
-import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
-import { Pipeline } from '@dxos/types';
-
-import { translations } from '../../translations';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-const DefaultStory = () => {
-  const { space } = useClientStory();
-  const [object, setObject] = useState<Obj.Unknown>();
-
-  useEffect(() => {
-    if (space && !object) {
-      const object = space.db.add(Pipeline.make());
-      setObject(object);
-    }
-  }, [space, object]);
-
-  if (!object) {
-    return null;
-  }
-
-  return <BaseObjectSettings object={object} classNames='w-[20rem]' />;
-};
-
-const meta = {
-  title: 'plugins/plugin-space/components/BaseObjectSettings',
-  component: BaseObjectSettings as any,
-  render: render(DefaultStory),
-  decorators: [
-    withTheme(),
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [Pipeline.Pipeline, Tag.Tag],
-      onCreateSpace: async ({ space }) => {
-        space.db.add(Tag.make({ label: 'Tag 1' }));
-        space.db.add(Tag.make({ label: 'Tag 2' }));
-        space.db.add(Tag.make({ label: 'Tag 3' }));
-      },
-    }),
-  ],
-  parameters: {
-    layout: 'centered',
-    translations,
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/ObjectDetails/BaseObjectSettings.tsx

@@ -1,122 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
-import * as Schema from 'effect/Schema';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
-
-import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
-import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { Form, omitId } from '@dxos/react-ui-form';
-import { isNonNullable } from '@dxos/util';
-
-import { meta as pluginMeta } from '../../meta';
-
-// TODO(wittjosiah): Would be nice to control order when extending so this isn't always first/last.
-const BaseSchema = Schema.Struct({
-  tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
-});
-
-export type BaseObjectSettingsProps = ThemedClassName<
-  PropsWithChildren<{
-    object: Obj.Unknown;
-  }>
->;
-
-// TODO(wittjosiah): Reconcile w/ ObjectForm.
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const db = Obj.getDatabase(object);
-
-  const formSchema = useMemo(() => {
-    return Function.pipe(
-      Obj.getSchema(object),
-      Option.fromNullable,
-      Option.map((schema) => BaseSchema.pipe(Schema.extend(schema))),
-      Option.getOrUndefined,
-    );
-  }, [object]);
-
-  const meta = Obj.getMeta(object);
-  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
-  const values = useMemo(
-    () => ({
-      tags,
-      ...object,
-    }),
-    [object, tags],
-  );
-
-  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
-    invariant(db);
-    invariant(Type.isObjectSchema(schema));
-    const newObject = db.add(Obj.make(schema, values));
-    if (Obj.instanceOf(Tag.Tag, newObject)) {
-      Obj.change(object, (obj) => {
-        Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).toString()];
-      });
-    }
-  }, []);
-
-  // TODO(wittjosiah): Use FormRootProps type.
-  const handleChange = useCallback(
-    (
-      { tags, ...values }: Schema.Schema.Type<typeof formSchema>,
-      { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> },
-    ) => {
-      if (!isValid) {
-        return;
-      }
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-
-      // Handle tags separately using Obj.change.
-      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
-      if (hasTagsChange) {
-        Obj.change(object, (obj) => {
-          Obj.getMeta(obj).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
-        });
-      }
-
-      // Handle other property changes.
-      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
-      if (nonTagPaths.length > 0) {
-        Obj.change(object, () => {
-          for (const path of nonTagPaths) {
-            const parts = splitJsonPath(path);
-            const value = Obj.getValue(values, parts);
-            Obj.setValue(object, parts, value);
-          }
-        });
-      }
-    },
-    [object],
-  );
-
-  if (!formSchema) {
-    return null;
-  }
-
-  return (
-    <Form.Root
-      schema={omitId(formSchema)}
-      defaultValues={values}
-      createOptionIcon='ph--plus--regular'
-      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
-      createInitialValuePath='label'
-      db={db}
-      onValuesChanged={handleChange}
-      onCreate={handleCreate}
-    >
-      <Form.Viewport>
-        <Form.Content classNames={classNames}>
-          <Form.FieldSet />
-          {children}
-        </Form.Content>
-      </Form.Viewport>
-    </Form.Root>
-  );
-};

package/src/components/ObjectDetails/ForeignKeys.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { type Key } from '@dxos/echo';
-import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../../meta';
-
-export type ForeignKeysProps = {
-  keys: Key.ForeignKey[];
-  onDelete?: (key: Key.ForeignKey) => void;
-};
-
-// TODO(wittjosiah): This is a clone of `TokenManager`. Consider a form variant for arrays of read-only objects.
-export const ForeignKeys = ({ keys, onDelete }: ForeignKeysProps) => {
-  return (
-    <List classNames='flex flex-col gap-2'>
-      {keys.map((key) => (
-        <KeyItem key={key.id} forignKey={key} onDelete={onDelete} />
-      ))}
-    </List>
-  );
-};
-
-type KeyItemProps = {
-  forignKey: Key.ForeignKey;
-  onDelete?: (key: Key.ForeignKey) => void;
-};
-
-const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
-  const { t } = useTranslation(meta.id);
-
-  const handleDelete = useCallback(() => {
-    onDelete?.(forignKey);
-  }, [forignKey, onDelete]);
-
-  return (
-    <ListItem.Root classNames='px-2'>
-      <ListItem.Heading classNames='flex flex-col grow truncate'>
-        <div>{forignKey.source}</div>
-        <div className='text-description text-sm truncate'>{forignKey.id}</div>
-      </ListItem.Heading>
-      <ListItem.Endcap>
-        <IconButton iconOnly icon='ph--x--regular' variant='ghost' label={t('delete key')} onClick={handleDelete} />
-      </ListItem.Endcap>
-    </ListItem.Root>
-  );
-};

package/src/components/ObjectDetails/index.ts

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

package/src/components/ObjectForm/ObjectForm.tsx

@@ -1,97 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { useCallback, useMemo } from 'react';
-
-import { DXN, Obj, Ref, Tag, Type } from '@dxos/echo';
-import { type JsonPath, splitJsonPath } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { Form, omitId } from '@dxos/react-ui-form';
-import { isNonNullable } from '@dxos/util';
-
-import { meta as pluginMeta } from '../../meta';
-
-export type ObjectFormProps = {
-  schema: Schema.Schema.AnyNoContext;
-  object: Obj.Unknown;
-};
-
-export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
-  const db = Obj.getDatabase(object);
-
-  const formSchema = useMemo(
-    () =>
-      Schema.Struct({
-        tags: Schema.Array(Ref.Ref(Tag.Tag)).pipe(Schema.optional),
-      }).pipe(Schema.extend(omitId(schema))),
-    [schema],
-  );
-
-  const meta = Obj.getMeta(object);
-  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN.parse(tag))).filter(isNonNullable);
-  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
-
-  const handleCreate = useCallback((schema: Type.AnyEntity, values: any) => {
-    invariant(db);
-    invariant(Type.isObjectSchema(schema));
-    const newObject = db.add(Obj.make(schema, values));
-    if (Obj.instanceOf(Tag.Tag, newObject)) {
-      Obj.change(object, (obj) => {
-        Obj.getMeta(obj).tags = [...(Obj.getMeta(obj).tags ?? []), Obj.getDXN(newObject).toString()];
-      });
-    }
-  }, []);
-
-  // TODO(wittjosiah): Use FormRootProps type.
-  const handleChange = useCallback(
-    ({ tags, ...values }: any, { isValid, changed }: { isValid: boolean; changed: Record<JsonPath, boolean> }) => {
-      if (!isValid) {
-        return;
-      }
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-
-      // Handle tags separately using Obj.change.
-      const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
-      if (hasTagsChange) {
-        Obj.change(object, (obj) => {
-          Obj.getMeta(obj).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
-        });
-      }
-
-      // Handle other property changes.
-      const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
-      if (nonTagPaths.length > 0) {
-        Obj.change(object, () => {
-          for (const path of nonTagPaths) {
-            const parts = splitJsonPath(path);
-            const value = Obj.getValue(values, parts);
-            Obj.setValue(object, parts, value);
-          }
-        });
-      }
-    },
-    [object],
-  );
-
-  return (
-    <Form.Root
-      schema={omitId(formSchema)}
-      defaultValues={values}
-      createOptionIcon='ph--plus--regular'
-      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
-      createInitialValuePath='label'
-      db={db}
-      onValuesChanged={handleChange}
-      onCreate={handleCreate}
-    >
-      <Form.Viewport>
-        <Form.Content>
-          <Form.FieldSet />
-        </Form.Content>
-      </Form.Viewport>
-    </Form.Root>
-  );
-};

package/src/components/ObjectForm/index.ts

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