@dxos/plugin-space 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

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='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/ObjectDetails/ObjectDetails.tsx

@@ -1,33 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { forwardRef, useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework/ui';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { type Obj } from '@dxos/echo';
-import { Toolbar } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui';
-
-import { BaseObjectSettings } from './BaseObjectSettings';
-
-export type ObjectDetailsProps = SurfaceComponentProps<Obj.Unknown>;
-
-export const ObjectDetails = forwardRef<HTMLDivElement, ObjectDetailsProps>(
-  ({ role, subject: object }, forwardedRef) => {
-    const data = useMemo(() => ({ subject: object }), [object]);
-
-    return (
-      <Layout.Main toolbar role={role} ref={forwardedRef}>
-        <Toolbar.Root />
-        <BaseObjectSettings object={object}>
-          <Surface.Surface role='base-object-settings' data={data} />
-          <Surface.Surface role='object-settings' data={data} />
-          {/* TODO(wittjosiah): Remove (or add as surface)? */}
-          {/* <AdvancedObjectSettings object={object} /> */}
-        </BaseObjectSettings>
-      </Layout.Main>
-    );
-  },
-);

package/src/components/ObjectDetails/index.ts

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

package/src/components/ObjectRenamePopover/ObjectRenamePopover.tsx

@@ -1,52 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useRef, useState } from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { Obj } from '@dxos/echo';
-import { log } from '@dxos/log';
-import { Button, Input, useTranslation } from '@dxos/react-ui';
-import { osTranslations } from '@dxos/ui-theme';
-
-import { meta } from '../../meta';
-
-export const OBJECT_RENAME_POPOVER = `${meta.id}/ObjectRenamePopover`;
-
-export const ObjectRenamePopover = ({ object }: { object: Obj.Unknown }) => {
-  const { t } = useTranslation(meta.id);
-  const doneButton = useRef<HTMLButtonElement>(null);
-  const [name, setName] = useState(Obj.getLabel(object));
-  const { invokePromise } = useOperationInvoker();
-
-  const handleDone = useCallback(() => {
-    try {
-      name && Obj.change(object, () => Obj.setLabel(object, name));
-    } catch (err) {
-      log.error('Failed to rename object', { err });
-    }
-    void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
-  }, [object, name, invokePromise]);
-
-  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: osTranslations })}
-      </Button>
-    </div>
-  );
-};

package/src/components/ObjectRenamePopover/index.ts

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

package/src/components/RecordArticle.stories.tsx

@@ -1,116 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { Surface } from '@dxos/app-framework/ui';
-import { Filter, Obj, Ref, Relation, type Type } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { useQuery } from '@dxos/react-client/echo';
-import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
-import { Card } from '@dxos/react-ui-mosaic';
-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 } = useClientStory();
-  const [object] = useQuery(space?.db, 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: [
-        Capability.contributes(Capabilities.ReactSurface, [
-          Surface.create({
-            id: 'section',
-            role: 'section',
-            component: ({ data }) => (
-              <Card.Root>
-                <Json classNames='text-sm' data={data} />
-              </Card.Root>
-            ),
-          }),
-          Surface.create({
-            id: 'card',
-            role: 'card',
-            component: ({ data }) => (
-              <Card.Root>
-                <Json classNames='text-sm' data={data} />
-              </Card.Root>
-            ),
-          }),
-        ]),
-      ],
-    }),
-    // 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 = {};

package/src/components/RecordArticle.tsx

@@ -1,124 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { Surface } from '@dxos/app-framework/ui';
-import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
-import { type Database, Entity, Filter, Obj, Ref, Relation } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
-import { Layout, ScrollArea, useTranslation } from '@dxos/react-ui';
-import { Masonry } from '@dxos/react-ui-masonry';
-import { Card as MosaicCard } from '@dxos/react-ui-mosaic';
-import { mx } from '@dxos/ui-theme';
-import { isNonNullable } from '@dxos/util';
-
-import { meta } from '../meta';
-
-export const RecordArticle = ({ role, subject }: SurfaceComponentProps) => {
-  const { t } = useTranslation(meta.id);
-  const db = Obj.getDatabase(subject);
-  const data = useMemo(() => ({ subject }), [subject]);
-  const related = useRelatedObjects(db, subject, {
-    references: true,
-    relations: true,
-  });
-  const singleColumn = related.length === 1;
-
-  return (
-    <Layout.Main role={role}>
-      <ScrollArea.Root orientation='vertical'>
-        <ScrollArea.Viewport classNames={mx('p-4 gap-4')}>
-          <div role='none' className={mx('flex is-full card-max-width')}>
-            <Surface.Surface role='section' data={data} limit={1} />
-          </div>
-
-          {related.length > 0 && (
-            <div role='none' className={mx('flex flex-col gap-1', singleColumn ? 'card-max-width' : 'is-full')}>
-              <label className='mbs-2 text-sm text-description'>{t('related objects label')}</label>
-              <Masonry.Root<Entity.Unknown>
-                items={related}
-                render={Card}
-                columnCount={singleColumn ? 1 : undefined}
-                intrinsicHeight
-              />
-            </div>
-          )}
-        </ScrollArea.Viewport>
-      </ScrollArea.Root>
-    </Layout.Main>
-  );
-};
-
-const Card = ({ data: subject }: { data: Entity.Unknown }) => {
-  const data = useMemo(() => ({ subject }), [subject]);
-  return (
-    <MosaicCard.Root>
-      <MosaicCard.Toolbar>
-        <span />
-        <MosaicCard.Title>{Entity.getLabel(subject)}</MosaicCard.Title>
-      </MosaicCard.Toolbar>
-      <Surface.Surface role='card--content' data={data} limit={1} />
-    </MosaicCard.Root>
-  );
-};
-
-// TODO(wittjosiah): This is a hack. ECHO needs to have a back reference index to easily query for related objects.
-const useRelatedObjects = (
-  db?: Database.Database,
-  record?: Obj.Unknown,
-  options: { references?: boolean; relations?: boolean } = {},
-) => {
-  const objects = useQuery(db, Filter.everything());
-  return useMemo(() => {
-    if (!record) {
-      return [];
-    }
-
-    const related: Entity.Unknown[] = [];
-
-    // TODO(burdon): Change Person => Organization to relations.
-    if (options.references) {
-      const getReferences = (obj: Entity.Unknown): Ref.Unknown[] => {
-        return Object.getOwnPropertyNames(obj)
-          .map((name) => obj[name as keyof Obj.Unknown])
-          .filter((value) => Ref.isRef(value)) as Ref.Unknown[];
-      };
-
-      const references = getReferences(record);
-      const referenceTargets = references.map((ref) => ref.target).filter(isNonNullable);
-      const referenceSources = objects.filter((obj) => {
-        const refs = getReferences(obj);
-        return refs.some((ref) => ref.target === record);
-      });
-
-      related.push(...referenceTargets, ...referenceSources);
-    }
-
-    if (options.relations) {
-      // TODO(dmaretskyi): Workaround until https://github.com/dxos/dxos/pull/10100 lands.
-      const isValidRelation = (obj: Relation.Unknown) => {
-        try {
-          return Relation.isRelation(obj) && Relation.getSource(obj) && Relation.getTarget(obj);
-        } catch {
-          return false;
-        }
-      };
-
-      const relations = objects.filter(Relation.isRelation).filter((obj) => isValidRelation(obj));
-      const targetObjects = relations
-        .filter((relation) => Relation.getTarget(relation) === record)
-        .map((relation) => Relation.getSource(relation));
-      const sourceObjects = relations
-        .filter((relation) => Relation.getSource(relation) === record)
-        .map((relation) => Relation.getTarget(relation));
-
-      related.push(...targetObjects, ...sourceObjects);
-    }
-
-    return related;
-  }, [record, objects]);
-};
-
-export default RecordArticle;

package/src/components/SchemaContainer.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useState } from 'react';
-
-import { type Type } from '@dxos/echo';
-import { type Space } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
-import { mx } from '@dxos/ui-theme';
-
-import { meta } from '../meta';
-
-type SchemaPanelProps = { space: Space };
-
-const itemClasses = mx([
-  'container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center',
-  '*:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
-  'border border-separator rounded-md',
-]);
-
-export const SchemaContainer = ({ space }: SchemaPanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const schemas = useQuerySpaceSchemas(space);
-
-  return (
-    <Settings.Root>
-      <Settings.Section title={t('schema verbose label')} description={t('schema description')}>
-        <div role='none' className={itemClasses}>
-          {schemas.length === 0 && <div className='text-center plb-4'>{t('no schemas found message')}</div>}
-          {schemas.map((schema) => (
-            <div role='none' key={schema.id}>
-              {schema.typename}
-            </div>
-          ))}
-        </div>
-      </Settings.Section>
-    </Settings.Root>
-  );
-};
-
-/**
- * Subscribe to and retrieve all schemas from a space's schema registry.
- */
-export const useQuerySpaceSchemas = (space: Space): Type.RuntimeType[] => {
-  const [schemas, setSchemas] = useState<Type.RuntimeType[]>([]);
-
-  useEffect(() => {
-    const query = space.db.schemaRegistry.query();
-    const initialResults = query.runSync();
-    setSchemas(initialResults);
-
-    const unsubscribe = query.subscribe(() => setSchemas(query.results));
-    return () => unsubscribe();
-  }, [space]);
-
-  return schemas;
-};

package/src/components/SpacePluginSettings.tsx

@@ -1,65 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { useClient } from '@dxos/react-client';
-import { useSpaces } from '@dxos/react-client/echo';
-import { IconButton, Input, List, ListItem, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Settings } from '@dxos/react-ui-form';
-
-import { meta } from '../meta';
-import { SpaceOperation, type SpaceSettingsProps } from '../types';
-import { getSpaceDisplayName } from '../util';
-
-export type SpacePluginSettingsComponentProps = {
-  settings: SpaceSettingsProps;
-  onSettingsChange: (fn: (current: SpaceSettingsProps) => SpaceSettingsProps) => void;
-};
-
-export const SpacePluginSettings = ({ settings, onSettingsChange }: SpacePluginSettingsComponentProps) => {
-  const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const spaces = useSpaces({ all: settings.showHidden });
-  const { invokePromise } = useOperationInvoker();
-
-  return (
-    <Settings.Root>
-      <Settings.Section title={t('space settings label')} description={t('space settings description')}>
-        <Settings.Group>
-          <Settings.ItemInput title={t('show hidden spaces label')}>
-            <Input.Switch
-              checked={settings.showHidden}
-              onCheckedChange={(checked) => onSettingsChange((state) => ({ ...state, showHidden: !!checked }))}
-            />
-          </Settings.ItemInput>
-        </Settings.Group>
-
-        <Settings.Container>
-          <List classNames='flex flex-col gap-trimSm'>
-            {spaces.map((space) => (
-              <ListItem.Root key={space.id} classNames='is-full items-center'>
-                {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
-                <ListItem.Heading classNames='grow truncate !min-bs-0'>
-                  {toLocalizedString(
-                    getSpaceDisplayName(space, {
-                      personal: space === client.spaces.default,
-                    }),
-                    t,
-                  )}
-                </ListItem.Heading>
-                <IconButton
-                  icon='ph--faders--regular'
-                  onClick={() => invokePromise(SpaceOperation.OpenSettings, { space })}
-                  label={t('open space settings label')}
-                />
-              </ListItem.Root>
-            ))}
-          </List>
-        </Settings.Container>
-      </Settings.Section>
-    </Settings.Root>
-  );
-};

package/src/components/SpacePresence/SpacePresence.stories.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta } from '@storybook/react-vite';
-import React from 'react';
-
-import { IdentityDid, PublicKey } from '@dxos/keys';
-import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../../translations';
-
-import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } from './SpacePresence';
-
-const viewers = (n: number, currentlyAttended = true): Member[] =>
-  Array.from({ length: n }, () => ({
-    role: HaloSpaceMember.Role.ADMIN,
-    identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
-    presence: SpaceMember.PresenceState.ONLINE,
-    lastSeen: Date.now(),
-    currentlyAttended,
-  }));
-
-const meta = {
-  title: 'plugins/plugin-space/SpacePresence',
-  decorators: [withTheme()],
-  parameters: {
-    translations,
-  },
-} satisfies Meta<typeof IdentityDid>;
-
-export default meta;
-
-export const Full = (props: MemberPresenceProps) => {
-  const p: MemberPresenceProps = {
-    ...props,
-  };
-
-  return (
-    <div className='p-4'>
-      <div className='p-3'>
-        <FullPresence members={viewers(1)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(2)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(3)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(3, false)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(4)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(5)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(5, false)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(10)} {...p} />
-      </div>
-      <div className='p-3'>
-        <FullPresence members={viewers(100)} {...p} />
-      </div>
-    </div>
-  );
-};
-
-export const Small = () => {
-  return (
-    <div className='p-4'>
-      <div className='flex gap-3 p-3'>
-        <SmallPresence count={0} />
-        <SmallPresence count={0} attended />
-        <SmallPresence count={0} containsAttended />
-      </div>
-      <div className='flex gap-3 p-3'>
-        <SmallPresence count={1} />
-        <SmallPresence count={1} attended />
-        <SmallPresence count={1} containsAttended />
-      </div>
-      <div className='flex gap-3 p-3'>
-        <SmallPresence count={2} />
-        <SmallPresence count={2} attended />
-        <SmallPresence count={2} containsAttended />
-      </div>
-      <div className='flex gap-3 p-3'>
-        <SmallPresence count={3} />
-        <SmallPresence count={3} attended />
-        <SmallPresence count={3} containsAttended />
-      </div>
-      <div className='flex gap-3 p-3'>
-        <SmallPresence count={4} />
-        <SmallPresence count={4} attended />
-        <SmallPresence count={4} containsAttended />
-      </div>
-      <div className='flex gap-3 p-3'>
-        <SmallPresence count={5} />
-        <SmallPresence count={5} attended />
-        <SmallPresence count={5} containsAttended />
-      </div>
-    </div>
-  );
-};