@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.5b114d4

package/src/layouts/index.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './PanelPopover';
-export * from './PanelSidebar';
-export * from './PanelAlertDialog';
-export * from './PanelDialog';

package/src/panels/DevicesPanel/DevicesPanel.tsx

@@ -1,113 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { UserPlus, X } from '@phosphor-icons/react';
-import React, { cloneElement, useReducer } from 'react';
-
-import { useClient, useDevices, useHaloInvitations, useIdentity } from '@dxos/react-client';
-import {
-  Button,
-  DensityProvider,
-  getSize,
-  mx,
-  TooltipContent,
-  TooltipRoot,
-  TooltipTrigger,
-  useTranslation
-} from '@dxos/react-components';
-
-import { DeviceList, InvitationList, PanelSeparator } from '../../components';
-import { defaultSurface, subduedSurface } from '../../styles';
-
-export type DevicesPanelProps = {
-  titleId?: string;
-  createInvitationUrl: (invitationCode: string) => string;
-  doneActionParent?: Parameters<typeof cloneElement>[0];
-  onDone?: () => void;
-};
-
-export type DevicesView = 'device list';
-
-const DeviceListView = ({ createInvitationUrl, titleId, onDone, doneActionParent }: DevicesPanelProps) => {
-  const { t } = useTranslation('os');
-  const client = useClient();
-  const identity = useIdentity();
-  const devices = useDevices();
-  const invitations = useHaloInvitations();
-  const displayName = identity?.profile?.displayName;
-
-  if (!identity) {
-    return null;
-  }
-
-  const doneButton = (
-    <Button variant='ghost' onClick={() => onDone?.()} data-testid='show-all-spaces'>
-      <X className={getSize(4)} weight='bold' />
-    </Button>
-  );
-
-  return (
-    <div role='none' className='flex flex-col'>
-      <div role='none' className={mx(subduedSurface, 'rounded-bs-md flex items-center p-2 gap-2')}>
-        {/* TODO(wittjosiah): Label this as the identity panel. */}
-        <h2 id={titleId} className={mx('grow font-system-medium', !displayName && 'font-mono')}>
-          {displayName ?? identity.identityKey.truncate()}
-        </h2>
-        <TooltipRoot>
-          <TooltipContent className='z-50'>{t('close label')}</TooltipContent>
-          <TooltipTrigger asChild>
-            {doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton}
-          </TooltipTrigger>
-        </TooltipRoot>
-      </div>
-      <div role='region' className={mx(defaultSurface, 'rounded-be-md p-2')}>
-        <InvitationList
-          invitations={invitations}
-          onClickRemove={(invitation) => invitation.cancel()}
-          createInvitationUrl={createInvitationUrl}
-        />
-        <Button
-          className='is-full flex gap-2 mbs-2'
-          onClick={() => client.halo.createInvitation()}
-          data-testid='devices-panel.create-invitation'
-        >
-          <span>{t('create device invitation label')}</span>
-          <UserPlus className={getSize(4)} weight='bold' />
-        </Button>
-        <PanelSeparator />
-        <DeviceList devices={devices} />
-      </div>
-    </div>
-  );
-};
-
-type DevicesPanelState = {
-  activeView: DevicesView;
-};
-
-type DevicesPanelAction = {
-  type: null;
-};
-
-// TODO(wittjosiah): Rename identity panel and include other views?
-export const DevicesPanel = (props: DevicesPanelProps) => {
-  const reducer = (state: DevicesPanelState, action: DevicesPanelAction) => {
-    const nextState = { ...state };
-    switch (action.type) {
-      case null:
-    }
-    return nextState;
-  };
-
-  const [panelState] = useReducer(reducer, {
-    activeView: 'device list'
-  });
-
-  // TODO(wittjosiah): Use ViewState or similar.
-  return (
-    <DensityProvider density='fine'>
-      {panelState.activeView === 'device list' ? <DeviceListView {...props} /> : null}
-    </DensityProvider>
-  );
-};

package/src/panels/DevicesPanel/index.ts

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

package/src/panels/IdentityPanel/IdentityPanel.tsx

@@ -1,43 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-import React from 'react';
-
-import type { Identity } from '@dxos/client';
-import { useClient } from '@dxos/react-client';
-import { Avatar, Button, DensityProvider, ThemeContext, useThemeContext, useTranslation } from '@dxos/react-components';
-
-export const IdentityPanel = ({
-  identity,
-  onClickManageProfile
-}: {
-  identity: Identity;
-  onClickManageProfile?: () => void;
-}) => {
-  const { t } = useTranslation('os');
-  const client = useClient();
-  const themeContextValue = useThemeContext();
-
-  const defaultManageProfile = () => {
-    const remoteSource = new URL(client?.config.get('runtime.client.remoteSource') || 'https://halo.dxos.org');
-    const tab = window.open(remoteSource.origin, '_blank');
-    tab?.focus();
-  };
-  return (
-    <ThemeContext.Provider value={{ ...themeContextValue, themeVariant: 'os' }}>
-      <DensityProvider density='fine'>
-        <div className='flex flex-col gap-2 justify-center items-center'>
-          <Avatar
-            size={16}
-            variant='circle'
-            fallbackValue={identity.identityKey.toHex()}
-            label={identity.profile?.displayName ?? ''}
-          />
-          <Button onClick={onClickManageProfile ?? defaultManageProfile} className='is-full'>
-            {t('manage profile label')}
-          </Button>
-        </div>
-      </DensityProvider>
-    </ThemeContext.Provider>
-  );
-};

package/src/panels/IdentityPanel/index.ts

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

package/src/panels/JoinPanel/JoinHeading.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-import { X } from '@phosphor-icons/react';
-import React, { cloneElement, ForwardedRef, forwardRef } from 'react';
-
-import { useSpace } from '@dxos/react-client';
-import { Button, defaultDescription, getSize, Heading, mx, useId, useTranslation } from '@dxos/react-components';
-
-import { InvitationEmoji } from '../../components';
-import { defaultSurface } from '../../styles';
-import { JoinPanelMode } from './JoinPanelProps';
-import { JoinState } from './joinMachine';
-
-export interface JoinSpaceHeadingProps {
-  mode?: JoinPanelMode;
-  titleId: string;
-  joinState?: JoinState;
-  onExit?: () => void;
-  exitActionParent?: Parameters<typeof cloneElement>[0];
-  preventExit?: boolean;
-}
-
-// TODO(wittjosiah): Accesses the space properties directly which will trigger ECHO warnings without observer.
-export const JoinHeading = forwardRef(
-  (
-    { mode, titleId, joinState, onExit, exitActionParent, preventExit }: JoinSpaceHeadingProps,
-    ref: ForwardedRef<HTMLDivElement>
-  ) => {
-    const { t } = useTranslation('os');
-
-    const space = useSpace(joinState?.context.space.invitation?.spaceKey);
-    const name = space?.properties.name;
-    const nameId = useId(mode === 'halo-only' ? 'identityDisplayName' : 'spaceDisplayName');
-
-    const invitationId = joinState?.context[mode === 'halo-only' ? 'halo' : 'space'].invitation?.invitationId;
-
-    const exitButton = (
-      <Button
-        variant='ghost'
-        {...(onExit && { onClick: onExit })}
-        className={mx(defaultDescription, 'plb-0 pli-2 absolute block-start-1.5 inline-end-2 z-[1]')}
-        data-testid='join-exit'
-      >
-        <X weight='bold' className={getSize(4)} />
-        <span className='sr-only'>{t('exit label')}</span>
-      </Button>
-    );
-
-    return (
-      <div role='none' className={mx(defaultSurface, 'pbs-3 pbe-1 rounded-bs-md relative')} ref={ref}>
-        {!preventExit &&
-          mode !== 'halo-only' &&
-          (exitActionParent ? cloneElement(exitActionParent, {}, exitButton) : exitButton)}
-        <Heading
-          level={1}
-          className={mx(
-            defaultDescription,
-            'font-body font-system-normal text-center text-sm grow pbe-2',
-            mode === 'halo-only' && (preventExit ? 'sr-only' : 'opacity-0')
-          )}
-          id={titleId}
-        >
-          {t(mode === 'halo-only' ? 'selecting identity heading' : 'joining space heading')}
-        </Heading>
-        <div role='group' className='flex items-center justify-center gap-2'>
-          <InvitationEmoji {...{ invitationId }} />
-          {name && <p id={nameId}>{name}</p>}
-        </div>
-      </div>
-    );
-  }
-);

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -1,247 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-import React, { useEffect } from 'react';
-
-import { log } from '@dxos/log';
-import { useClient, useIdentity } from '@dxos/react-client';
-import { DensityProvider, useId, useThemeContext } from '@dxos/react-components';
-
-import { JoinHeading } from './JoinHeading';
-import { JoinPanelProps } from './JoinPanelProps';
-import { useJoinMachine } from './joinMachine';
-import {
-  AdditionMethodSelector,
-  IdentityInput,
-  IdentityAdded,
-  InvitationAuthenticator,
-  InvitationRescuer,
-  InvitationInput,
-  InvitationAccepted
-} from './view-states';
-
-export const JoinPanel = ({
-  mode = 'default',
-  initialInvitationCode,
-  exitActionParent,
-  onExit,
-  doneActionParent,
-  onDone,
-  preventExit
-}: JoinPanelProps) => {
-  const client = useClient();
-  const identity = useIdentity();
-  const titleId = useId('joinPanel__title');
-  const { hasIosKeyboard } = useThemeContext();
-
-  const [joinState, joinSend, joinService] = useJoinMachine(client, {
-    context: {
-      mode,
-      identity,
-      ...(initialInvitationCode && {
-        [mode === 'halo-only' ? 'halo' : 'space']: { unredeemedCode: initialInvitationCode }
-      })
-    }
-  });
-
-  useEffect(() => {
-    const subscription = joinService.subscribe((state) => {
-      log('[state]', state);
-    });
-
-    return subscription.unsubscribe;
-  }, [joinService]);
-
-  useEffect(() => {
-    // TODO(thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
-    const stateStack = joinState.configuration[0].id.split('.');
-    const innermostState = stateStack[stateStack.length - 1];
-    const autoFocusValue = innermostState === 'finishingJoining' ? 'successSpaceInvitation' : innermostState;
-    const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
-    if ($nextAutofocus && !(hasIosKeyboard && $nextAutofocus.hasAttribute('data-prevent-ios-autofocus'))) {
-      $nextAutofocus.focus();
-    }
-  }, [joinState.value, hasIosKeyboard]);
-
-  return (
-    <DensityProvider density='fine'>
-      <JoinHeading {...{ mode, titleId, joinState, onExit, exitActionParent, preventExit }} />
-      <div role='none' className='is-full overflow-hidden'>
-        <div role='none' className='flex is-[1200%]' aria-live='polite'>
-          <AdditionMethodSelector
-            {...{
-              joinState,
-              joinSend,
-              active: joinState.matches({ choosingIdentity: 'choosingAuthMethod' })
-            }}
-          />
-          <IdentityInput
-            {...{
-              joinState,
-              joinSend,
-              active: joinState.matches({ choosingIdentity: 'creatingIdentity' }),
-              method: 'create identity'
-            }}
-          />
-          <IdentityInput
-            {...{
-              joinState,
-              joinSend,
-              active: joinState.matches({ choosingIdentity: 'recoveringIdentity' }),
-              method: 'recover identity'
-            }}
-          />
-          <InvitationInput
-            {...{
-              joinState,
-              joinSend,
-              active: joinState.matches({
-                choosingIdentity: { acceptingHaloInvitation: 'inputtingHaloInvitationCode' }
-              }),
-              Kind: 'Halo'
-            }}
-          />
-          <InvitationRescuer
-            {...{
-              joinState,
-              joinSend,
-              active: [
-                {
-                  choosingIdentity: {
-                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'connectingHaloInvitation' }
-                  }
-                },
-                {
-                  choosingIdentity: {
-                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'failingHaloInvitation' }
-                  }
-                }
-              ].some(joinState.matches),
-              Kind: 'Halo'
-            }}
-          />
-          <InvitationAuthenticator
-            {...{
-              joinState,
-              joinSend,
-              active: [
-                {
-                  choosingIdentity: {
-                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'inputtingHaloVerificationCode' }
-                  }
-                },
-                {
-                  choosingIdentity: {
-                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'authenticatingHaloVerificationCode' }
-                  }
-                },
-                {
-                  choosingIdentity: {
-                    acceptingHaloInvitation: {
-                      acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode'
-                    }
-                  }
-                }
-              ].some(joinState.matches),
-              Kind: 'Halo',
-              ...(joinState.matches({
-                acceptingHaloInvitation: {
-                  acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode'
-                }
-              }) && { failed: true })
-            }}
-          />
-          <InvitationAccepted
-            {...{
-              joinState,
-              joinSend,
-              active: [
-                {
-                  choosingIdentity: {
-                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'successHaloInvitation' }
-                  }
-                },
-                'finishingJoiningHalo'
-              ].some(joinState.matches),
-              Kind: 'Halo',
-              doneActionParent,
-              onDone
-            }}
-          />
-          <IdentityAdded
-            {...{
-              joinState,
-              joinSend,
-              mode,
-              active: joinState.matches({
-                choosingIdentity: 'confirmingAddedIdentity'
-              }),
-              doneActionParent,
-              onDone
-            }}
-          />
-          <InvitationInput
-            {...{
-              joinState,
-              joinSend,
-              active: joinState.matches({
-                acceptingSpaceInvitation: 'inputtingSpaceInvitationCode'
-              }),
-              Kind: 'Space'
-            }}
-          />
-          <InvitationRescuer
-            {...{
-              joinState,
-              joinSend,
-              active: [
-                {
-                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'connectingSpaceInvitation' }
-                },
-                {
-                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'failingSpaceInvitation' }
-                }
-              ].some(joinState.matches),
-              Kind: 'Space'
-            }}
-          />
-          <InvitationAuthenticator
-            {...{
-              joinState,
-              joinSend,
-              active: [
-                {
-                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'inputtingSpaceVerificationCode' }
-                },
-                {
-                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'authenticatingSpaceVerificationCode' }
-                },
-                {
-                  acceptingSpaceInvitation: {
-                    acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode'
-                  }
-                }
-              ].some(joinState.matches),
-              Kind: 'Space',
-              ...(joinState.matches({
-                acceptingSpaceInvitation: {
-                  acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode'
-                }
-              }) && { failed: true })
-            }}
-          />
-          <InvitationAccepted
-            {...{
-              joinState,
-              joinSend,
-              active: joinState.matches('finishingJoiningSpace'),
-              Kind: 'Space',
-              doneActionParent,
-              onDone
-            }}
-          />
-        </div>
-      </div>
-    </DensityProvider>
-  );
-};

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -1,90 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { cloneElement, Dispatch } from 'react';
-
-import type { AuthenticatingInvitationObservable, Identity } from '@dxos/client';
-import { InvitationResult } from '@dxos/react-client';
-
-export type JoinPanelMode = 'default' | 'halo-only';
-
-export interface JoinPanelProps {
-  mode?: JoinPanelMode;
-  initialInvitationCode?: string;
-  titleId?: string;
-  exitActionParent?: Parameters<typeof cloneElement>[0];
-  onExit?: () => void;
-  preventExit?: boolean;
-  doneActionParent?: Parameters<typeof cloneElement>[0];
-  onDone?: (result: InvitationResult | null) => void;
-  parseInvitationCodeInput?: (invitationCodeInput: string) => string;
-}
-
-export interface IdentityAction {
-  type: 'select identity' | 'added identity';
-  identity: Identity;
-}
-
-export interface EmptyJoinAction {
-  type: 'deselect identity' | 'cancel addition' | 'add identity';
-}
-
-export interface EmptyInvitationAction {
-  type:
-    | 'authenticating invitation'
-    | 'authenticate invitation'
-    | 'cancel invitation'
-    | 'cancelled invitation'
-    | 'connect invitation'
-    | 'fail invitation'
-    | 'accepted invitation'
-    | 'timeout invitation'
-    | 'reset invitation';
-  from: 'space' | 'halo';
-}
-
-export interface InvitationCodeAction {
-  type: 'connecting invitation';
-  from: 'space' | 'halo';
-  invitation: AuthenticatingInvitationObservable;
-}
-
-export type InvitationAction = EmptyInvitationAction | InvitationCodeAction;
-
-export interface AdditionMethodAction {
-  type: 'select addition method';
-  method: 'recover identity' | 'accept device invitation' | 'create identity';
-}
-
-export type JoinAction = IdentityAction | EmptyJoinAction | AdditionMethodAction | InvitationAction;
-
-export type JoinSend = Dispatch<JoinAction>;
-
-export type InvitationView =
-  | 'invitation input'
-  | 'invitation rescuer'
-  | 'invitation authenticator'
-  | 'invitation accepted';
-
-export type JoinView =
-  | 'identity selector'
-  | 'addition method selector'
-  | 'identity input'
-  | 'identity added'
-  | 'space invitation acceptor'
-  | 'halo invitation acceptor';
-
-export interface JoinState {
-  activeView: JoinView;
-  unredeemedSpaceInvitationCode?: string;
-  spaceInvitation?: AuthenticatingInvitationObservable;
-  spaceViewState: InvitationView;
-  spaceInvitationAnnotation?: 'authenticating' | 'authentication failed';
-  unredeemedHaloInvitationCode?: string;
-  haloInvitation?: AuthenticatingInvitationObservable;
-  haloViewState: InvitationView;
-  haloInvitationAnnotation?: 'authenticating' | 'authentication failed';
-  selectedIdentity?: Identity;
-  additionMethod?: AdditionMethodAction['method'];
-}

package/src/panels/JoinPanel/index.ts

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