@dxos/shell 0.3.11-main.1caa3af

package/src/panels/SpacePanel/SpacePanel.stories.tsx

@@ -0,0 +1,328 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { PublicKey } from '@dxos/keys';
+import { SpaceMember } from '@dxos/react-client/echo';
+import { Invitation } from '@dxos/react-client/invitations';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { SpacePanelImpl } from './SpacePanel';
+import { type SpacePanelImplProps } from './SpacePanelProps';
+import { SpaceManagerImpl } from './steps';
+import { InvitationListItemImpl, SpaceMemberListImpl, InvitationList } from '../../components';
+import { StorybookDialog } from '../../components/StorybookDialog';
+import { InvitationManager, type InvitationManagerProps } from '../../steps';
+import { inviteWithState } from '../../testing';
+
+const noOpProps: SpacePanelImplProps = {
+  titleId: 'storybookSpacePanel__title',
+  send: () => {},
+  createInvitationUrl: (code: string) => code,
+  activeView: 'space manager',
+  space: { key: PublicKey.random(), properties: { name: 'Example space' } },
+};
+
+export default {
+  title: 'react-shell/SpacePanel',
+  component: SpacePanelImpl,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const SpaceManager = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[]}
+              SpaceMemberList={(props) => <SpaceMemberListImpl {...props} members={[]} />}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceManagerWithInvites = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[inviteWithState(Invitation.State.INIT)]}
+              SpaceMemberList={(props) => <SpaceMemberListImpl {...props} members={[]} />}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceManagerWithMoreInvites = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[
+                inviteWithState(Invitation.State.INIT),
+                inviteWithState(Invitation.State.CONNECTING),
+                inviteWithState(Invitation.State.CONNECTED),
+              ]}
+              SpaceMemberList={(props) => <SpaceMemberListImpl {...props} members={[]} />}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceManagerWithEvenMoreInvites = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[
+                inviteWithState(Invitation.State.INIT),
+                inviteWithState(Invitation.State.READY_FOR_AUTHENTICATION),
+                inviteWithState(Invitation.State.AUTHENTICATING),
+                inviteWithState(Invitation.State.SUCCESS),
+                inviteWithState(Invitation.State.ERROR),
+                inviteWithState(Invitation.State.TIMEOUT),
+                inviteWithState(Invitation.State.CANCELLED),
+              ]}
+              InvitationList={(props) => (
+                <InvitationList
+                  {...props}
+                  InvitationListItem={(props) => {
+                    const invitation = props.invitation.get();
+                    const {
+                      authMethod,
+                      invitationId: id,
+                      state,
+                      identityKey = PublicKey.random(),
+                      swarmKey,
+                      spaceKey = PublicKey.random(),
+                    } = invitation;
+                    return (
+                      <InvitationListItemImpl
+                        {...props}
+                        createInvitationUrl={(code) => code}
+                        invitationStatus={{
+                          status: state,
+                          authMethod,
+                          invitationCode: id,
+                          authCode: state === Invitation.State.READY_FOR_AUTHENTICATION ? '123414' : undefined,
+                          id,
+                          result: { identityKey, swarmKey, spaceKey },
+                          cancel: () => {},
+                          authenticate: async (authCode: string) => {},
+                          connect: () => {},
+                        }}
+                      />
+                    );
+                  }}
+                />
+              )}
+              SpaceMemberList={(props) => <SpaceMemberListImpl {...props} members={[]} />}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceManagerWithMember = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[]}
+              SpaceMemberList={(props) => (
+                <SpaceMemberListImpl
+                  {...props}
+                  members={[
+                    {
+                      presence: SpaceMember.PresenceState.ONLINE,
+                      identity: {
+                        identityKey: PublicKey.random(),
+                      },
+                    },
+                  ]}
+                />
+              )}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceManagerWithMembers = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[]}
+              SpaceMemberList={(props) => (
+                <SpaceMemberListImpl
+                  {...props}
+                  members={[
+                    {
+                      presence: SpaceMember.PresenceState.ONLINE,
+                      identity: {
+                        identityKey: PublicKey.random(),
+                        profile: {
+                          displayName: 'John Doe',
+                        },
+                      },
+                    },
+                  ]}
+                />
+              )}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceManagerWithMoreMembers = () => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[
+                inviteWithState(Invitation.State.SUCCESS),
+                inviteWithState(Invitation.State.READY_FOR_AUTHENTICATION),
+                inviteWithState(Invitation.State.AUTHENTICATING),
+              ]}
+              SpaceMemberList={(props) => (
+                <SpaceMemberListImpl
+                  {...props}
+                  members={[
+                    {
+                      presence: SpaceMember.PresenceState.ONLINE,
+                      identity: {
+                        identityKey: PublicKey.random(),
+                        profile: {
+                          displayName: 'John Doe',
+                        },
+                      },
+                    },
+                    {
+                      presence: SpaceMember.PresenceState.OFFLINE,
+                      identity: {
+                        identityKey: PublicKey.random(),
+                        profile: {
+                          displayName: 'Alice Wong',
+                        },
+                      },
+                    },
+                    {
+                      presence: SpaceMember.PresenceState.OFFLINE,
+                      identity: {
+                        identityKey: PublicKey.random(),
+                        profile: {
+                          displayName: 'Steel Nickels',
+                        },
+                      },
+                    },
+                  ]}
+                />
+              )}
+            />
+          );
+        }}
+      />
+    </StorybookDialog>
+  );
+};
+
+const SpaceInvitationManagerState = (extraprops?: Partial<InvitationManagerProps>) => {
+  return (
+    <StorybookDialog inOverlayLayout>
+      <SpacePanelImpl
+        {...noOpProps}
+        activeView='space invitation manager'
+        SpaceManager={(props) => {
+          return (
+            <SpaceManagerImpl
+              {...props}
+              invitations={[]}
+              SpaceMemberList={(props) => <SpaceMemberListImpl {...props} members={[]} />}
+            />
+          );
+        }}
+        InvitationManager={(props) => <InvitationManager {...props} {...extraprops} />}
+      />
+    </StorybookDialog>
+  );
+};
+
+export const SpaceInvitationManagerInit = () => SpaceInvitationManagerState({ status: Invitation.State.INIT, id: '0' });
+
+export const SpaceInvitationManagerConnecting = () =>
+  SpaceInvitationManagerState({ status: Invitation.State.CONNECTING, id: '1' });
+
+export const SpaceInvitationManagerConnected = () =>
+  SpaceInvitationManagerState({ status: Invitation.State.CONNECTED, id: '2' });
+
+export const SpaceInvitationManagerReadyForAuthentication = () =>
+  SpaceInvitationManagerState({ status: Invitation.State.READY_FOR_AUTHENTICATION, authCode: '123451', id: '3' });
+
+export const SpaceInvitationManagerAuthenticating = () =>
+  SpaceInvitationManagerState({ status: Invitation.State.AUTHENTICATING, id: '4' });
+
+export const SpaceInvitationManagerSuccess = () => SpaceInvitationManagerState({ status: Invitation.State.SUCCESS });
+
+export const SpaceInvitationManagerError = () => SpaceInvitationManagerState({ status: Invitation.State.ERROR });
+
+export const SpaceInvitationManagerTimeout = () => SpaceInvitationManagerState({ status: Invitation.State.TIMEOUT });
+
+export const SpaceInvitationManagerCancelled = () =>
+  SpaceInvitationManagerState({ status: Invitation.State.CANCELLED });

package/src/panels/SpacePanel/SpacePanel.tsx

@@ -0,0 +1,122 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Planet } from '@phosphor-icons/react';
+import React, { useEffect, useMemo } from 'react';
+
+import { log } from '@dxos/log';
+import { useInvitationStatus } from '@dxos/react-client/invitations';
+import type { CancellableInvitationObservable } from '@dxos/react-client/invitations';
+import { DensityProvider, useId, useTranslation } from '@dxos/react-ui';
+
+import { type SpacePanelHeadingProps, type SpacePanelImplProps, type SpacePanelProps } from './SpacePanelProps';
+import { useSpaceMachine } from './spaceMachine';
+import { SpaceManager } from './steps';
+import { Heading, CloseButton, Viewport } from '../../components';
+import { InvitationManager } from '../../steps';
+import { stepStyles } from '../../styles';
+
+const SpacePanelHeading = ({ titleId, space, onDone }: SpacePanelHeadingProps) => {
+  const { t } = useTranslation('os');
+  const name = space.properties.name;
+  return (
+    <Heading
+      titleId={titleId}
+      title={t('space panel heading')}
+      corner={<CloseButton data-testid='identity-panel-done' onDone={onDone} />}
+    >
+      <div role='none' className='flex gap-4 items-center justify-center mlb-4'>
+        <Planet size={32} />
+        <div className='block text-start font-light text-xl'>{name ?? space.key.truncate()}</div>
+      </div>
+    </Heading>
+  );
+};
+
+export const SpacePanelImpl = (props: SpacePanelImplProps) => {
+  const {
+    titleId,
+    activeView,
+    space,
+    SpaceManager: SpaceManagerComponent = SpaceManager,
+    InvitationManager: InvitationManagerComponent = InvitationManager,
+    ...rest
+  } = props;
+  return (
+    <DensityProvider density='fine'>
+      <SpacePanelHeading {...rest} {...{ titleId, space }} />
+      <Viewport.Root activeView={activeView}>
+        <Viewport.Views>
+          <Viewport.View id='space manager' classNames={stepStyles}>
+            <SpaceManagerComponent active={activeView === 'space manager'} space={space} {...rest} />
+          </Viewport.View>
+          <Viewport.View id='space invitation manager' classNames={stepStyles}>
+            <InvitationManagerComponent
+              active={activeView === 'space invitation manager'}
+              {...rest}
+              invitationUrl={props.invitationUrl}
+            />
+          </Viewport.View>
+        </Viewport.Views>
+      </Viewport.Root>
+    </DensityProvider>
+  );
+};
+
+const SpacePanelWithInvitationImpl = ({
+  invitation,
+  ...props
+}: SpacePanelImplProps & { invitation: CancellableInvitationObservable }) => {
+  const invitationStatus = useInvitationStatus(invitation);
+  return (
+    <SpacePanelImpl
+      {...props}
+      {...invitationStatus}
+      invitationUrl={props.createInvitationUrl(invitationStatus.invitationCode!)}
+    />
+  );
+};
+
+export const SpacePanel = ({
+  titleId: propsTitleId,
+  createInvitationUrl = (code) => code,
+  ...props
+}: SpacePanelProps) => {
+  const titleId = useId('spacePanel__heading', propsTitleId);
+
+  const [spaceState, spaceSend, spaceService] = useSpaceMachine({ context: { space: props.space } });
+
+  useEffect(() => {
+    const subscription = spaceService.subscribe((state) => {
+      log('[state]', state);
+    });
+
+    return subscription.unsubscribe;
+  }, [spaceService]);
+
+  const activeView = useMemo(() => {
+    switch (true) {
+      case spaceState.matches('managingSpace'):
+        return 'space manager';
+      case spaceState.matches('managingSpaceInvitation'):
+        return 'space invitation manager';
+      default:
+        return 'never';
+    }
+  }, [spaceState]);
+
+  const implProps = {
+    ...props,
+    activeView,
+    send: spaceSend,
+    titleId,
+    createInvitationUrl,
+  };
+
+  return spaceState.context.invitation ? (
+    <SpacePanelWithInvitationImpl {...implProps} invitation={spaceState.context.invitation} />
+  ) : (
+    <SpacePanelImpl {...implProps} />
+  );
+};

package/src/panels/SpacePanel/SpacePanelProps.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type cloneElement } from 'react';
+import { type SingleOrArray, type Event } from 'xstate';
+
+import { type Space } from '@dxos/react-client/echo';
+
+import { type SpaceManagerProps } from './steps';
+import { type InvitationManagerProps } from '../../steps';
+
+export type ErsatzSpace = Pick<Space, 'key'> & Partial<Pick<Space, 'share'>> & { properties: { name?: string } };
+
+export type SpacePanelImplProps = {
+  titleId: string;
+  activeView: string;
+  send: (event: SingleOrArray<Event<any>>) => void;
+  createInvitationUrl: (invitationCode: string) => string;
+  space: ErsatzSpace | Space;
+  invitationUrl?: string;
+  authCode?: string;
+  onDone?: () => void;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  DoneAction?: React.FC;
+  SpaceManager?: React.FC<SpaceManagerProps>;
+  InvitationManager?: React.FC<InvitationManagerProps>;
+};
+
+export type SpacePanelProps = Pick<SpacePanelImplProps, 'space'> &
+  Partial<Omit<SpacePanelImplProps, 'send' | 'activeView' | 'space'>>;
+
+export type SpacePanelHeadingProps = Pick<SpacePanelImplProps, 'titleId' | 'space' | 'onDone' | 'doneActionParent'>;
+
+export type SpacePanelStepProps = Pick<
+  SpacePanelImplProps,
+  'space' | 'createInvitationUrl' | 'send' | 'onDone' | 'doneActionParent' | 'DoneAction'
+> & {
+  active?: boolean;
+};

package/src/panels/SpacePanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SpacePanel';
+export * from './SpacePanelProps';

package/src/panels/SpacePanel/spaceMachine.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMachine } from '@xstate/react';
+import { assign, createMachine, type InterpreterFrom, type StateFrom } from 'xstate';
+
+import { log } from '@dxos/log';
+import { type Space } from '@dxos/react-client/echo';
+import { type CancellableInvitationObservable } from '@dxos/react-client/invitations';
+
+import { type ErsatzSpace } from './SpacePanelProps';
+import { type StepEvent } from '../../steps';
+
+type SpaceMachineContext = {
+  invitation?: CancellableInvitationObservable;
+  space: ErsatzSpace | Space | null;
+};
+
+type SpaceSelectInvitationEvent = {
+  type: 'selectInvitation';
+  invitation: CancellableInvitationObservable;
+};
+
+type SpaceEvent = SpaceSelectInvitationEvent | StepEvent;
+
+const spaceMachine = createMachine<SpaceMachineContext, SpaceEvent>(
+  {
+    id: 'space',
+    predictableActionArguments: true,
+    context: {
+      space: null,
+    },
+    initial: 'managingSpace',
+    states: {
+      managingSpace: {},
+      managingSpaceInvitation: {},
+    },
+    on: {
+      deselectInvitation: { target: '.managingSpace', actions: ['unsetInvitation', 'log'] },
+      selectInvitation: { target: '.managingSpaceInvitation', actions: ['setInvitation', 'log'] },
+    },
+  },
+  {
+    actions: {
+      setInvitation: assign<SpaceMachineContext, SpaceEvent>({
+        invitation: (context, event) => (event as SpaceSelectInvitationEvent)?.invitation ?? null,
+      }),
+      unsetInvitation: assign<SpaceMachineContext, SpaceEvent>({
+        invitation: () => undefined,
+      }),
+      log: (context, event) => {
+        log('[transition]', {
+          event,
+          context,
+        });
+      },
+    },
+  },
+);
+
+type SpaceMachine = typeof spaceMachine;
+
+type SpaceState = StateFrom<SpaceMachine>;
+type SpaceSend = InterpreterFrom<SpaceMachine>['send'];
+
+const useSpaceMachine = (options?: Parameters<typeof useMachine<SpaceMachine>>[1]) => {
+  return useMachine(spaceMachine, { ...options, context: { ...options?.context } });
+};
+
+export type { SpaceMachine, SpaceEvent, SpaceMachineContext, SpaceState, SpaceSend };
+export { spaceMachine, useSpaceMachine };