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

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -1,174 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { Type } from '@dxos/echo';
-import { type TypeAnnotation, getTypeAnnotation } from '@dxos/echo-schema';
-import { type Space, type SpaceId } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, 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 { type MaybePromise, isNonNullable } from '@dxos/util';
-
-import { useInputSurfaceLookup } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
-import { type ObjectForm } from '../../types';
-import { getSpaceDisplayName } from '../../util';
-
-export type CreateObjectPanelProps = {
-  forms: ObjectForm[];
-  spaces: Space[];
-  typename?: string;
-  target?: Space | DataType.Collection;
-  name?: string;
-  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,
-  name: initialName,
-  defaultSpaceId,
-  resolve,
-  onTargetChange,
-  onTypenameChange,
-  onCreateObject,
-}: CreateObjectPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const form = forms.find((form) => Type.getTypename(form.objectSchema) === typename);
-  const options: TypeAnnotation[] = forms
-    .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={{ name: initialName }}
-        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(SPACE_PLUGIN);
-
-  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(SPACE_PLUGIN);
-
-  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>
-  );
-};

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -1,66 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Effect, type Schema } from 'effect';
-import React, { useCallback, useRef } from 'react';
-
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, Dialog, Icon, 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';
-
-export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/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 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 } }));
-      });
-      await Effect.runPromise(program);
-    },
-    [dispatch],
-  );
-
-  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 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.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.Content>
-  );
-};

package/src/components/CreateDialog/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './CreateObjectDialog';
-export * from './CreateSpaceDialog';

package/src/components/MembersContainer.stories.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withClientProvider } from '@dxos/react-client/testing';
-import { translations as shellTranslations } from '@dxos/shell/react';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { translations } from '../translations';
-
-import { MembersContainer } from './MembersContainer';
-
-const meta: Meta = {
-  title: 'plugins/plugin-space/MembersContainer',
-  component: MembersContainer,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
-  parameters: {
-    layout: 'fullscreen',
-    translations: [...translations, ...shellTranslations],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof MembersContainer>;
-
-export const Default: Story = {};

package/src/components/MembersContainer.tsx

@@ -1,286 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from 'react';
-import { QR } from 'react-qr-rounded';
-
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { log } from '@dxos/log';
-import { useConfig } from '@dxos/react-client';
-import { type Space, fullyQualifiedId, useSpaceInvitations } from '@dxos/react-client/echo';
-import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
-import { Button, Clipboard, Icon, Input, useId, useTranslation } from '@dxos/react-ui';
-import { ControlFrame, ControlFrameItem, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
-import { StackItem } from '@dxos/react-ui-stack';
-import { DataType } from '@dxos/schema';
-import {
-  type ActionMenuItem,
-  AuthCode,
-  BifurcatedAction,
-  Centered,
-  Emoji,
-  InvitationList,
-  SpaceMemberList,
-  Viewport,
-} from '@dxos/shell/react';
-import { hexToEmoji } from '@dxos/util';
-
-import { SPACE_PLUGIN } from '../meta';
-import { SpaceAction } from '../types';
-import { COMPOSER_SPACE_LOCK } from '../util';
-
-// TODO(wittjosiah): Copied from Shell.
-const activeActionKey = 'dxos:react-shell/space-manager/active-action';
-
-const handleInvitationEvent = (invitation: Invitation, subscription: ZenObservable.Subscription) => {
-  const invitationCode = InvitationEncoder.encode(invitation);
-  if (invitation.state === Invitation.State.CONNECTING) {
-    log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
-    subscription.unsubscribe();
-  }
-};
-
-export const MembersContainer = ({
-  space,
-  createInvitationUrl,
-}: {
-  space: Space;
-  createInvitationUrl: (invitationCode: string) => string;
-}) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const config = useConfig();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const invitations = useSpaceInvitations(space.key);
-  const visibleInvitations = invitations?.filter(
-    (invitation) => ![Invitation.State.CANCELLED].includes(invitation.get().state),
-  );
-
-  const [activeAction, setInternalActiveAction] = useState(localStorage.getItem(activeActionKey) ?? 'inviteMany');
-
-  const setActiveAction = (nextAction: string) => {
-    setInternalActiveAction(nextAction);
-    localStorage.setItem(activeActionKey, nextAction);
-  };
-
-  // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[DataType.Collection.typename]?.target?.objects[0]?.target;
-
-  const locked = space.properties[COMPOSER_SPACE_LOCK];
-  const handleChangeLocked = useCallback(() => {
-    space.properties[COMPOSER_SPACE_LOCK] = !locked;
-  }, [locked, space]);
-
-  const inviteActions = useMemo(
-    (): Record<string, ActionMenuItem> => ({
-      inviteOne: {
-        label: t('invite one label', { ns: 'os' }),
-        description: t('invite one description', { ns: 'os' }),
-        icon: () => <Icon icon='ph--user-plus--regular' size={5} />,
-        testId: 'membersContainer.inviteOne',
-        onClick: async () => {
-          const { data: invitation } = await dispatch(
-            createIntent(SpaceAction.Share, {
-              space,
-              type: Invitation.Type.INTERACTIVE,
-              authMethod: Invitation.AuthMethod.SHARED_SECRET,
-              multiUse: false,
-              target: target && fullyQualifiedId(target),
-            }),
-          );
-          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
-            const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
-              handleInvitationEvent(invitation, subscription),
-            );
-          }
-        },
-      },
-      inviteMany: {
-        label: t('invite many label', { ns: 'os' }),
-        description: t('invite many description', { ns: 'os' }),
-        icon: () => <Icon icon='ph--users-three--regular' size={5} />,
-        testId: 'membersContainer.inviteMany',
-        onClick: async () => {
-          const { data: invitation } = await dispatch(
-            createIntent(SpaceAction.Share, {
-              space,
-              type: Invitation.Type.DELEGATED,
-              authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
-              multiUse: true,
-              target: target && fullyQualifiedId(target),
-            }),
-          );
-          if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
-            const subscription: ZenObservable.Subscription = invitation.subscribe((invitation) =>
-              handleInvitationEvent(invitation, subscription),
-            );
-          }
-        },
-      },
-    }),
-    [t, space, target],
-  );
-
-  const [selectedInvitation, setSelectedInvitation] = useState<CancellableInvitationObservable | null>(null);
-  const handleSend = (event: { type: 'selectInvitation'; invitation: CancellableInvitationObservable }) => {
-    setSelectedInvitation(event.invitation);
-  };
-  const handleBack = () => {
-    setSelectedInvitation(null);
-  };
-
-  return (
-    <Clipboard.Provider>
-      <StackItem.Content classNames='block overflow-y-auto'>
-        <ControlPage>
-          <ControlSection title={t('members verbose label')} description={t('members description')}>
-            <ControlFrame>
-              <ControlFrameItem title={t('members label')}>
-                <SpaceMemberList spaceKey={space.key} includeSelf />
-              </ControlFrameItem>
-              {locked && (
-                <ControlFrameItem title={t('invitations label')}>
-                  <p className='text-description mbe-2'>{t('locked space description')}</p>
-                </ControlFrameItem>
-              )}
-              {!locked && (
-                <ControlFrameItem title={t('invitations label')}>
-                  {selectedInvitation && <InvitationSection {...selectedInvitation} onBack={handleBack} />}
-                  {!selectedInvitation && (
-                    <>
-                      <p className='text-description mbe-2'>{t('space invitation description')}</p>
-                      <InvitationList
-                        className='mb-2'
-                        send={handleSend}
-                        invitations={visibleInvitations ?? []}
-                        onClickRemove={(invitation) => invitation.cancel()}
-                        createInvitationUrl={createInvitationUrl}
-                      />
-                      <BifurcatedAction
-                        actions={inviteActions}
-                        activeAction={activeAction}
-                        onChangeActiveAction={setActiveAction as Dispatch<SetStateAction<string>>}
-                        data-testid='membersContainer.createInvitation'
-                      />
-                    </>
-                  )}
-                </ControlFrameItem>
-              )}
-            </ControlFrame>
-            {/* TODO(wittjosiah): Make ControlItemInput & ControlFrame compatible. */}
-            <div className='justify-center gap-4 p-0 mbs-4 container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'>
-              <ControlItemInput title={t('space locked label')} description={t('space locked description')}>
-                <Input.Switch checked={locked} onCheckedChange={handleChangeLocked} classNames='justify-self-end' />
-              </ControlItemInput>
-            </div>
-          </ControlSection>
-        </ControlPage>
-      </StackItem.Content>
-    </Clipboard.Provider>
-  );
-};
-
-// TODO(wittjosiah): Reconcile the below components with DevicesContainer in @dxos/plugin-client.
-
-type InvitationComponentProps = Partial<
-  Pick<Invitation, 'authCode' | 'invitationId'> & {
-    state: Invitation.State;
-    url: string;
-    onBack: () => void;
-  }
->;
-
-const InvitationSection = ({
-  state = Invitation.State.INIT,
-  authCode,
-  invitationId = 'never',
-  url = 'never',
-  onBack,
-}: InvitationComponentProps) => {
-  const activeView =
-    state < 0
-      ? 'init'
-      : state >= Invitation.State.CANCELLED
-        ? 'complete'
-        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
-          ? 'auth-code'
-          : 'qr-code';
-  return (
-    <Viewport.Root activeView={activeView}>
-      <Viewport.Views>
-        <Viewport.View id='init'>
-          {/* This view intentionally left blank while conditionally rendering the viewport. */}
-        </Viewport.View>
-        <Viewport.View id='complete'>
-          <InvitationComplete statusValue={state} />
-        </Viewport.View>
-        <Viewport.View id='auth-code'>
-          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onBack} />
-        </Viewport.View>
-        <Viewport.View id='qr-code'>
-          <InvitationQR id={invitationId} url={url} onCancel={onBack} />
-        </Viewport.View>
-      </Viewport.Views>
-    </Viewport.Root>
-  );
-};
-
-const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel?: () => void }) => {
-  const { t } = useTranslation('os');
-  const qrLabel = useId('members-container__qr-code');
-  const emoji = hexToEmoji(id);
-  return (
-    <>
-      <p className='text-description'>{t('qr code description', { ns: SPACE_PLUGIN })}</p>
-      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
-        <div role='none' className='is-full aspect-square relative text-description'>
-          <QR
-            rounding={100}
-            backgroundColor='transparent'
-            color='currentColor'
-            aria-labelledby={qrLabel}
-            errorCorrectionLevel='Q'
-            cutout={true}
-          >
-            {url ?? 'never'}
-          </QR>
-          <Centered>
-            <Emoji text={emoji} />
-          </Centered>
-        </div>
-        <span id={qrLabel} className='sr-only'>
-          {t('qr label')}
-        </span>
-        <Clipboard.Button value={url ?? 'never'} />
-      </div>
-      <Button variant='ghost' onClick={onCancel}>
-        {t('cancel label')}
-      </Button>
-    </>
-  );
-};
-
-const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel?: () => void }) => {
-  const { t } = useTranslation('os');
-  const emoji = hexToEmoji(id);
-
-  return (
-    <>
-      <p className='text-description'>{t('auth other device emoji message')}</p>
-      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
-      <p className='text-description'>{t('auth code message')}</p>
-      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
-      <Button variant='ghost' onClick={onCancel}>
-        {t('cancel label')}
-      </Button>
-    </>
-  );
-};
-
-const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
-  return statusValue > 0 ? (
-    <Icon icon='ph--check--regular' size={6} classNames='m-1.5' />
-  ) : (
-    <Icon icon='ph--x--regular' size={6} classNames='m-1.5' />
-  );
-};

package/src/components/ObjectDetailsPanel.tsx

@@ -1,77 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { type JsonPath, setValue } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
-import { useClient } from '@dxos/react-client';
-import { Filter, getSpace, useQuery, useSchema } from '@dxos/react-client/echo';
-import { Callout, useTranslation } from '@dxos/react-ui';
-import { useSelected } from '@dxos/react-ui-attention';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
-import { type DataType } from '@dxos/schema';
-import { isNonNullable } from '@dxos/util';
-
-import { SPACE_PLUGIN } from '../meta';
-
-type RowDetailsPanelProps = { objectId: string; view: DataType.View };
-
-const ObjectDetailsPanel = ({ objectId, view }: RowDetailsPanelProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const client = useClient();
-  const space = getSpace(view);
-  const schema = useSchema(client, space, view.query?.typename);
-
-  const queriedObjects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
-  const selectedRows = useSelected(objectId, 'multi');
-  const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
-
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const handleSave = useCallback(
-    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
-      const id = values.id;
-      invariant(typeof id === 'string');
-      const object = queriedObjects.find((obj) => obj.id === id);
-      invariant(object);
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      for (const path of changedPaths) {
-        const value = values[path];
-        setValue(object, path, value);
-      }
-    },
-    [queriedObjects],
-  );
-
-  if (selectedObjects.length === 0) {
-    return (
-      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
-        <Callout.Root classNames='is-full'>
-          <Callout.Title>{t('row details no selection label')}</Callout.Title>
-        </Callout.Root>
-      </div>
-    );
-  }
-
-  return (
-    <div role='none' className='bs-full is-full flex flex-col p-2 gap-1 overflow-y-auto'>
-      {schema &&
-        selectedObjects.map((object) => (
-          <div key={object.id} className='border border-separator rounded'>
-            <Form
-              autoSave
-              schema={schema}
-              values={object}
-              onSave={handleSave}
-              onQueryRefOptions={handleRefQueryLookup}
-            />
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default ObjectDetailsPanel;