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

package/src/components/ObjectDetailsPanel/ObjectForm.tsx

@@ -1,72 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-import React, { useCallback, useMemo } from 'react';
-
-import { DXN, Obj, type Ref, Tag, Type } from '@dxos/echo';
-import { type JsonPath, setValue } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-import { isNonNullable } from '@dxos/util';
-
-import { meta as pluginMeta } from '../../meta';
-
-const TagSchema = Tag.Tag.pipe(Schema.omit('id'));
-
-type ObjectFormProps = { object: Obj.Any; schema: Schema.Schema.AnyNoContext };
-
-export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
-  const space = getSpace(object);
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const formSchema = useMemo(
-    () => Schema.Struct({ tags: Schema.Array(Type.Ref(Tag.Tag)).pipe(Schema.optional) }).pipe(Schema.extend(schema)),
-    [schema],
-  );
-
-  const meta = Obj.getMeta(object);
-  const tags = (meta.tags ?? []).map((tag) => space?.db.ref(DXN.parse(tag))).filter(isNonNullable);
-  const values = useMemo(() => ({ tags, ...object }), [object, tags]);
-
-  const handleCreateTag = useCallback((values: Schema.Schema.Type<typeof TagSchema>) => {
-    invariant(space);
-    const tag = space.db.add(Tag.make(values));
-    const meta = Obj.getMeta(object);
-    meta.tags = [...(meta.tags ?? []), Obj.getDXN(tag).toString()];
-  }, []);
-
-  const handleSave = useCallback(
-    ({ tags, ...values }: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      for (const path of changedPaths) {
-        if (path === 'tags') {
-          const meta = Obj.getMeta(object);
-          meta.tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
-          continue;
-        }
-
-        const value = values[path];
-        setValue(object, path, value);
-      }
-    },
-    [object],
-  );
-
-  return (
-    <Form
-      autoSave
-      schema={formSchema}
-      values={values}
-      createSchema={TagSchema}
-      createOptionIcon='ph--plus--regular'
-      createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
-      createInitialValuePath='label'
-      onCreate={handleCreateTag}
-      onSave={handleSave}
-      onQueryRefOptions={handleRefQueryLookup}
-    />
-  );
-};

package/src/components/ObjectDetailsPanel/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { ObjectDetailsPanel } from './ObjectDetailsPanel';
-
-export default ObjectDetailsPanel;

package/src/components/ObjectRenamePopover/ObjectRenamePopover.tsx

@@ -1,56 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useRef, useState } from 'react';
-
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { Button, Input, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../../meta';
-
-export const OBJECT_RENAME_POPOVER = `${meta.id}/ObjectRenamePopover`;
-
-export const ObjectRenamePopover = ({ object }: { object: Obj.Any }) => {
-  const { t } = useTranslation(meta.id);
-  const doneButton = useRef<HTMLButtonElement>(null);
-  const [name, setName] = useState(Obj.getLabel(object));
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const handleDone = useCallback(() => {
-    try {
-      name && Obj.setLabel(object, name);
-    } catch (err) {
-      log.error('Failed to rename object', { err });
-    }
-    void dispatch(
-      createIntent(LayoutAction.UpdatePopover, {
-        part: 'popover',
-        options: { variant: 'react', anchorId: '', state: false },
-      }),
-    );
-  }, [object, name]);
-
-  return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
-        <Input.Root>
-          <Input.Label srOnly>{t('object name label')}</Input.Label>
-          <Input.TextInput
-            placeholder={t('object placeholder')}
-            value={name}
-            data-testid='spacePlugin.renameObject.input'
-            onChange={({ target: { value } }) => setName(value)}
-            onKeyDown={({ key }) => key === 'Enter' && doneButton.current?.click()}
-          />
-        </Input.Root>
-      </div>
-      <Button ref={doneButton} classNames='self-stretch' onClick={handleDone}>
-        {t('done label', { ns: 'os' })}
-      </Button>
-    </div>
-  );
-};

package/src/components/ObjectRenamePopover/index.ts

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

package/src/components/ObjectSettings/AdvancedObjectSettings.tsx

@@ -1,81 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
-import { ForeignKey } from '@dxos/echo/internal';
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { Form } from '@dxos/react-ui-form';
-
-import { meta } from '../../meta';
-
-import { ForeignKeys } from './ForeignKeys';
-
-const initialValues = {
-  source: '',
-  id: '',
-};
-
-export type AdvancedObjectSettingsProps = {
-  object: Obj.Any;
-};
-
-export const AdvancedObjectSettings = ({ object }: AdvancedObjectSettingsProps) => {
-  const { t } = useTranslation(meta.id);
-  const [adding, setAdding] = useState(false);
-  const { keys } = Obj.getMeta(object);
-
-  const handleNew = useCallback(() => setAdding(true), []);
-  const handleCancel = useCallback(() => setAdding(false), []);
-  const handleSave = useCallback(
-    (key: ForeignKey) => {
-      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-      if (index === -1) {
-        keys.push(key);
-      }
-      setAdding(false);
-    },
-    [keys],
-  );
-  const handleDelete = useCallback(
-    (key: ForeignKey) => {
-      const index = keys.findIndex(({ source, id }) => source === key.source && id === key.id);
-      if (index !== -1) {
-        keys.splice(index, 1);
-      }
-    },
-    [keys],
-  );
-
-  // TODO(wittjosiah): This should be wrapped in an "Advanced" accordion.
-  return (
-    <>
-      <div className='p-2 flex flex-col gap-4'>
-        <h2>{t('advanced settings label')}</h2>
-        <div className='flex items-center'>
-          <h3 className='text-sm font-semibold'>{t('foreign keys')}</h3>
-          <div className='grow' />
-          <IconButton
-            classNames={adding && 'invisible'}
-            icon='ph--plus--regular'
-            label={t('add key')}
-            onClick={handleNew}
-          />
-        </div>
-        {!adding && <ForeignKeys keys={keys} onDelete={handleDelete} />}
-      </div>
-
-      {adding && (
-        <Form
-          outerSpacing={false}
-          schema={ForeignKey}
-          values={initialValues}
-          onSave={handleSave}
-          onCancel={handleCancel}
-        />
-      )}
-    </>
-  );
-};

package/src/components/ObjectSettings/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 { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
-import { Project } from '@dxos/types';
-
-import { translations } from '../../translations';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-const DefaultStory = () => {
-  const { space } = useClientProvider();
-  const [object, setObject] = useState<Obj.Any>();
-
-  useEffect(() => {
-    if (space && !object) {
-      const object = space.db.add(Project.make());
-      setObject(object as Obj.Any);
-    }
-  }, [space, object]);
-
-  if (!object) {
-    return null;
-  }
-
-  return <BaseObjectSettings object={object} classNames='is-[20rem]' />;
-};
-
-const meta = {
-  title: 'plugins/plugin-space/BaseObjectSettings',
-  component: BaseObjectSettings as any,
-  render: render(DefaultStory),
-  decorators: [
-    withTheme,
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [Project.Project, 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/ObjectSettings/BaseObjectSettings.tsx

@@ -1,111 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { batch } from '@preact/signals-core';
-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, type Ref, Tag, Type } from '@dxos/echo';
-import { type JsonPath, setValue } from '@dxos/echo/internal';
-import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { Form, useRefQueryLookupHandler } 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(Type.Ref(Tag.Tag)).pipe(Schema.optional),
-});
-
-// TODO(wittjosiah): Better way to support validation of object schemas?
-const TagSchema = Tag.Tag.pipe(Schema.omit('id'));
-
-export type BaseObjectSettingsProps = ThemedClassName<
-  PropsWithChildren<{
-    object: Obj.Any;
-  }>
->;
-
-// TODO(wittjosiah): Reconcile w/ ObjectDetailsPanel.
-export const BaseObjectSettings = ({ classNames, children, object }: BaseObjectSettingsProps) => {
-  const space = getSpace(object);
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  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) => space?.db.ref(DXN.parse(tag))).filter(isNonNullable);
-  const values = useMemo(
-    () => ({
-      tags,
-      ...object,
-    }),
-    [object, tags],
-  );
-
-  const handleCreateTag = useCallback((values: Schema.Schema.Type<typeof TagSchema>) => {
-    invariant(space);
-    const tag = space.db.add(Tag.make(values));
-    const meta = Obj.getMeta(object);
-    meta.tags = [...(meta.tags ?? []), Obj.getDXN(tag).toString()];
-  }, []);
-
-  const handleSave = useCallback(
-    (
-      { tags, ...values }: Schema.Schema.Type<typeof formSchema>,
-      { changed }: { changed: Record<JsonPath, boolean> },
-    ) => {
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      batch(() => {
-        for (const path of changedPaths) {
-          if (path === 'tags') {
-            const meta = Obj.getMeta(object);
-            meta.tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
-            continue;
-          }
-
-          const value = values[path];
-          setValue(object, path, value);
-        }
-      });
-    },
-    [object],
-  );
-
-  if (!formSchema) {
-    return null;
-  }
-
-  return (
-    <>
-      <Form
-        classNames={classNames}
-        outerSpacing={false}
-        autoSave
-        schema={formSchema}
-        values={values}
-        createSchema={TagSchema}
-        createOptionIcon='ph--plus--regular'
-        createOptionLabel={['add tag label', { ns: pluginMeta.id }]}
-        createInitialValuePath='label'
-        onCreate={handleCreateTag}
-        onSave={handleSave}
-        onQueryRefOptions={handleRefQueryLookup}
-      />
-      {children}
-    </>
-  );
-};

package/src/components/ObjectSettings/ForeignKeys.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { type ForeignKey } from '@dxos/echo/internal';
-import { IconButton, List, ListItem, useTranslation } from '@dxos/react-ui';
-
-import { meta } from '../../meta';
-
-export type ForeignKeysProps = {
-  keys: ForeignKey[];
-  onDelete?: (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: ForeignKey;
-  onDelete?: (key: ForeignKey) => void;
-};
-
-const KeyItem = ({ forignKey, onDelete }: KeyItemProps) => {
-  const { t } = useTranslation(meta.id);
-
-  const handleDelete = useCallback(() => {
-    onDelete?.(forignKey);
-  }, [forignKey, onDelete]);
-
-  return (
-    <ListItem.Root classNames='pli-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/ObjectSettings/ObjectSettingsContainer.tsx

@@ -1,37 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework/react';
-import { type Obj } from '@dxos/echo';
-import { Clipboard, Toolbar } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-export type ObjectSettingsContainerProps = {
-  object: Obj.Any;
-  role: string;
-};
-
-export const ObjectSettingsContainer = ({ object, role }: ObjectSettingsContainerProps) => {
-  const data = useMemo(() => ({ subject: object }), [object]);
-
-  return (
-    <Clipboard.Provider>
-      <StackItem.Content toolbar>
-        <Toolbar.Root></Toolbar.Root>
-        <div role='none' className='overflow-y-auto pli-cardSpacingInline plb-cardSpacingBlock'>
-          <BaseObjectSettings object={object}>
-            <Surface role='base-object-settings' data={data} />
-          </BaseObjectSettings>
-          <Surface role='object-settings' data={data} />
-          {/* TODO(wittjosiah): Remove? */}
-          {/* <AdvancedObjectSettings object={object} /> */}
-        </div>
-      </StackItem.Content>
-    </Clipboard.Provider>
-  );
-};

package/src/components/ObjectSettings/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { ObjectSettingsContainer } from './ObjectSettingsContainer';
-
-export default ObjectSettingsContainer;

package/src/components/RecordArticle.stories.tsx

@@ -1,115 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Filter, Obj, Ref, Relation, type Type } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Card } from '@dxos/react-ui-stack';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
-import { translations as shellTranslations } from '@dxos/shell/react';
-import { render } from '@dxos/storybook-utils';
-import { HasSubject, Organization, Person, Task } from '@dxos/types';
-
-import { translations } from '../translations';
-
-import { RecordArticle } from './RecordArticle';
-
-faker.seed(1);
-const generator: ValueGenerator = faker as any;
-
-const DefaultStory = () => {
-  const { space } = useClientProvider();
-  const [object] = useQuery(space, Filter.type(Organization.Organization));
-  if (!object) {
-    return null;
-  }
-
-  return <RecordArticle subject={object} />;
-};
-
-const meta = {
-  title: 'plugins/plugin-space/RecordArticle',
-  component: RecordArticle as any,
-  render: render(DefaultStory),
-  decorators: [
-    withTheme,
-    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({
-      capabilities: [
-        contributes(Capabilities.ReactSurface, [
-          createSurface({
-            id: 'section',
-            role: 'section',
-            component: ({ data }) => (
-              <Card.SurfaceRoot>
-                <Json classNames='text-sm' data={data} />
-              </Card.SurfaceRoot>
-            ),
-          }),
-          createSurface({
-            id: 'card',
-            role: 'card',
-            component: ({ data }) => (
-              <Card.SurfaceRoot>
-                <Json classNames='text-sm' data={data} />
-              </Card.SurfaceRoot>
-            ),
-          }),
-        ]),
-      ],
-    }),
-    // TODO(burdon): Use plugin.
-    withClientProvider({
-      createIdentity: true,
-      createSpace: true,
-      types: [Organization.Organization, Person.Person, Task.Task, HasSubject.HasSubject],
-      onCreateSpace: async ({ space }) => {
-        const org = space.db.add(
-          Obj.make(Organization.Organization, {
-            name: 'DXOS',
-          }),
-        );
-        const task = space.db.add(
-          Obj.make(Task.Task, {
-            title: 'Task',
-          }),
-        );
-        space.db.add(
-          Relation.make(HasSubject.HasSubject, {
-            [Relation.Source]: task,
-            [Relation.Target]: org,
-            completedAt: new Date().toISOString(),
-          }),
-        );
-        const objectGenerator = createAsyncGenerator(generator, Person.Person as Type.Obj.Any, {
-          db: space?.db,
-          force: true,
-        });
-        await objectGenerator.createObjects(3).then((objects) => {
-          objects.forEach((object) => {
-            object.organization = Ref.make(org);
-          });
-        });
-      },
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    translations: [...translations, ...shellTranslations],
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};