@dxos/react-ui 0.1.41-next.d517c89 → 0.3.3-main.3ce60d4

package/src/stories/Invitations.stories.tsx

@@ -1,187 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxosTheme';
-import { faker } from '@faker-js/faker';
-import { Intersect, Laptop, Planet, Plus, PlusCircle, QrCode, WifiHigh, WifiSlash } from '@phosphor-icons/react';
-import React, { useMemo, useState } from 'react';
-
-import { ConnectionState, SpaceMember } from '@dxos/protocols/proto/dxos/client/services';
-import { Space, SpaceProxy, useClient, useIdentity, useNetworkStatus, useSpaces } from '@dxos/react-client';
-import { ClientDecorator } from '@dxos/react-client/testing';
-import { Button, ButtonGroup, getSize, Group } from '@dxos/react-components';
-
-import { IdentityListItem, SpaceListItem } from '../components';
-import { DevicesPanel, JoinPanel, SpacePanel } from '../panels';
-
-export default {
-  title: 'Invitations'
-};
-
-export type PanelType = Space | 'identity' | 'devices' | 'join';
-
-const createInvitationUrl = (invitation: string) => invitation;
-
-const Panel = ({ id, panel, setPanel }: { id: number; panel?: PanelType; setPanel: (panel?: PanelType) => void }) => {
-  const client = useClient();
-  const spaces = useSpaces();
-
-  useMemo(() => {
-    if (panel instanceof SpaceProxy) {
-      (window as any)[`peer${id}space`] = panel;
-    }
-  }, [panel]);
-
-  if (panel instanceof SpaceProxy) {
-    return <SpacePanel space={panel} createInvitationUrl={createInvitationUrl} />;
-  }
-
-  switch (panel) {
-    case 'identity': {
-      return <JoinPanel mode='halo-only' onDone={() => setPanel(undefined)} onExit={() => setPanel(undefined)} />;
-    }
-
-    case 'devices': {
-      return <DevicesPanel createInvitationUrl={createInvitationUrl} onDone={() => setPanel(undefined)} />;
-    }
-
-    case 'join': {
-      return <JoinPanel onDone={() => setPanel(undefined)} onExit={() => setPanel(undefined)} />;
-    }
-
-    default: {
-      // TODO(wittjosiah): Tooltips make playwright (webkit) flakier.
-      const controls = (
-        <ButtonGroup className='mbe-4'>
-          {/* <Tooltip content='Create Space'> */}
-          <Button
-            onClick={() => client.createSpace({ name: faker.animal.bird() })}
-            data-testid='invitations.create-space'
-          >
-            <PlusCircle className={getSize(6)} />
-          </Button>
-          {/* </Tooltip>
-          <Tooltip content='Join Space'> */}
-          <Button onClick={() => setPanel('join')} data-testid='invitations.open-join-space'>
-            <Intersect weight='fill' className={getSize(6)} />
-          </Button>
-          {/* </Tooltip> */}
-        </ButtonGroup>
-      );
-
-      const header = (
-        <div className='flex'>
-          Spaces
-          <span className='grow' />
-          {controls}
-        </div>
-      );
-
-      return (
-        <Group label={{ children: header }}>
-          <ul>
-            {spaces.length > 0 ? (
-              spaces.map((space) => (
-                <SpaceListItem key={space.key.toHex()} space={space} onClick={() => setPanel(space)} />
-              ))
-            ) : (
-              <div className='text-center'>No spaces</div>
-            )}
-          </ul>
-        </Group>
-      );
-    }
-  }
-};
-
-const render = ({ id }: { id: number }) => {
-  const client = useClient();
-  const networkStatus = useNetworkStatus().state;
-  const identity = useIdentity();
-  const [panel, setPanel] = useState<PanelType>();
-
-  useMemo(() => {
-    (window as any)[`peer${id}client`] = client;
-  }, [client]);
-
-  // TODO(wittjosiah): Tooltips make playwright (webkit) flakier.
-  const controls = (
-    <ButtonGroup className='mbe-4'>
-      {/* <Tooltip content='Create Identity'> */}
-      <Button
-        onClick={() => client.halo.createIdentity({ displayName: faker.name.firstName() })}
-        disabled={Boolean(identity)}
-        data-testid='invitations.create-identity'
-      >
-        <Plus className={getSize(6)} />
-      </Button>
-      {/* </Tooltip>
-      <Tooltip content='Join Existing Identity'> */}
-      <Button
-        onClick={() => setPanel('identity')}
-        disabled={Boolean(identity) || panel === 'identity'}
-        data-testid='invitations.open-join-identity'
-      >
-        <QrCode weight='fill' className={getSize(6)} />
-      </Button>
-      {/* </Tooltip>
-      <Tooltip content='Devices'> */}
-      <Button
-        onClick={() => setPanel('devices')}
-        disabled={!identity || panel === 'devices'}
-        data-testid='invitations.open-devices'
-      >
-        <Laptop weight='fill' className={getSize(6)} />
-      </Button>
-      {/* </Tooltip>
-      <Tooltip content='List Spaces'> */}
-      <Button onClick={() => setPanel(undefined)} disabled={!panel} data-testid='invitations.list-spaces'>
-        <Planet weight='fill' className={getSize(6)} />
-      </Button>
-      {/* </Tooltip> */}
-      {/* <ToolTip content='Toggle Network'> */}
-      <Button
-        onClick={() =>
-          client.mesh.setConnectionState(
-            networkStatus === ConnectionState.ONLINE ? ConnectionState.OFFLINE : ConnectionState.ONLINE
-          )
-        }
-        data-testid='invitations.toggle-network'
-      >
-        {networkStatus === ConnectionState.ONLINE ? (
-          <WifiHigh weight='fill' className={getSize(6)} />
-        ) : (
-          <WifiSlash weight='fill' className={getSize(6)} />
-        )}
-      </Button>
-      {/* </ToolTip> */}
-    </ButtonGroup>
-  );
-
-  const header = (
-    <div className='flex' data-testid='invitations.identity-header'>
-      Identity
-      <span className='grow' />
-      {controls}
-    </div>
-  );
-
-  return (
-    <div className='flex flex-col p-4 flex-1 min-w-0' data-testid={`peer-${id}`}>
-      <Group label={{ children: header }} className='mbe-2'>
-        {identity ? (
-          <IdentityListItem identity={identity} presence={networkStatus as unknown as SpaceMember.PresenceState} />
-        ) : (
-          <div className='text-center'>No identity</div>
-        )}
-      </Group>
-      {identity || panel ? <Panel id={id} panel={panel} setPanel={setPanel} /> : null}
-    </div>
-  );
-};
-
-export const Default = {
-  render,
-  decorators: [ClientDecorator({ count: 3 })]
-};

package/src/styles/dialogStyles.ts

@@ -1,8 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const defaultOverlay =
-  'fixed inset-0 backdrop-blur z-50 overflow-auto grid place-items-center p-2 md:p-4 lg:p-8';
-
-export const defaultDialogContent = 'is-full min-is-[260px] max-is-[320px] rounded-md shadow-md backdrop-blur-md';

package/src/styles/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './dialogStyles';
-export * from './panelStyles';
-export * from './invitationStatusStyles';

package/src/styles/invitationStatusStyles.ts

@@ -1,42 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Invitation } from '@dxos/client';
-
-export const inactiveBgColor = 'bg-neutral-100 dark:bg-neutral-600';
-export const activeBgColor = 'bg-primary-500 dark:bg-primary-400';
-export const successBgColor = 'bg-success-500 dark:bg-success-400';
-export const errorBgColor = 'bg-error-500 dark:bg-error-400';
-export const cancelledBgColor = 'bg-warning-500 dark:bg-warning-400';
-
-export const inactiveTextColor = 'text-neutral-100 dark:text-neutral-600';
-export const activeTextColor = 'text-primary-400 dark:text-primary-500';
-export const successTextColor = 'text-success-400 dark:text-success-500';
-export const errorTextColor = 'text-error-400 dark:text-error-500';
-export const cancelledTextColor = 'text-warning-400 dark:text-warning-500';
-
-export const inactiveStrokeColor = 'stroke-neutral-100 dark:stroke-neutral-700';
-export const activeStrokeColor = 'stroke-primary-500 dark:stroke-primary-150';
-export const successStrokeColor = 'stroke-success-400 dark:stroke-primary-400';
-export const errorStrokeColor = 'stroke-error-400 dark:stroke-error-500';
-export const cancelledStrokeColor = 'stroke-warning-400 dark:stroke-warning-500';
-
-export const resolvedStrokeColor = (status: Invitation.State) =>
-  status === Invitation.State.ERROR
-    ? errorStrokeColor
-    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
-    ? cancelledStrokeColor
-    : successStrokeColor;
-export const resolvedBgColor = (status: Invitation.State) =>
-  status === Invitation.State.ERROR
-    ? errorBgColor
-    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
-    ? cancelledBgColor
-    : successBgColor;
-export const resolvedTextColor = (status: Invitation.State) =>
-  status === Invitation.State.ERROR
-    ? errorTextColor
-    : status === Invitation.State.CANCELLED || status === Invitation.State.TIMEOUT
-    ? cancelledTextColor
-    : successTextColor;

package/src/styles/panelStyles.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export const defaultSurface = 'bg-neutral-50/[.72] dark:bg-neutral-950/[.72]';
-export const subduedSurface = 'bg-neutral-100/[.66] dark:bg-neutral-900/[.66]';
-export const defaultArrow = 'text-neutral-50/[.66] dark:text-neutral-950/[.66]';

package/src/testing/index.ts

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

package/src/testing/shell-manager.ts

@@ -1,79 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type { Locator, Page, FrameLocator } from 'playwright';
-
-type Scope = Locator | FrameLocator | Page;
-
-export class ShellManager {
-  page!: Page;
-
-  authenticatorIsVisible(type: 'device' | 'space', scope?: Scope) {
-    return (scope || this.page).getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).isVisible();
-  }
-
-  async invitationFailed(scope?: Scope, timeout = 3000) {
-    const peer = scope || this.page;
-    try {
-      await peer.locator('[data-testid=invitation-rescuer-reset]:not([disabled])').waitFor({ timeout });
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  async inputInvitation(type: 'device' | 'space', invitation: string, scope?: Scope) {
-    await (scope || this.page).getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input`).type(invitation);
-    await this.page.keyboard.press('Enter');
-  }
-
-  async invitationInputContinue(type: 'device' | 'space', scope?: Scope) {
-    await (scope || this.page).getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-input-continue`).click();
-  }
-
-  async cancelInvitation(type: 'device' | 'space', kind: 'host' | 'guest', scope?: Scope) {
-    if (kind === 'guest') {
-      await (scope || this.page)
-        .getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-authenticator-cancel`)
-        .click();
-    } else {
-      await (scope || this.page).getByTestId('cancel-invitation').nth(0).click();
-    }
-  }
-
-  async readyToAuthenticate(type: 'device' | 'space', scope?: Scope, timeout = 3000) {
-    const peer = scope || this.page;
-    try {
-      await peer
-        .locator(`[data-testid=${type === 'device' ? 'halo' : 'space'}-auth-code-input]:not([disabled])`)
-        .waitFor({ timeout });
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  async authenticateInvitation(type: 'device' | 'space', authCode: string, scope?: Scope) {
-    const peer = scope || this.page;
-    // TODO(wittjosiah): Update ids.
-    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).type(authCode);
-    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-invitation-authenticator-next`).click();
-  }
-
-  async clearAuthCode(type: 'device' | 'space', scope?: Scope) {
-    const peer = scope || this.page;
-    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).fill('');
-    await peer.getByTestId(`${type === 'device' ? 'halo' : 'space'}-auth-code-input`).focus();
-  }
-
-  async resetInvitation(scope?: Scope) {
-    await (scope || this.page).getByTestId('invitation-rescuer-reset').click();
-  }
-
-  async doneInvitation(type: 'device' | 'space', scope?: Scope) {
-    await (scope || this.page)
-      .getByTestId(type === 'device' ? 'halo-invitation-accepted-done' : 'space-invitation-accepted-done')
-      .click();
-  }
-}

package/src/translations/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as enUS from './locales/en-US';
-
-export const osTranslations = { 'en-US': enUS };

package/src/translations/locales/en-US.ts

@@ -1,69 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export const os = {
-  'manage profile label': 'Manage identity',
-  'identity offline description': 'Offline',
-  'sidebar label': 'DXOS sidebar',
-  'copy invitation code label': 'Copy',
-  'copy invitation code success label': 'Copied',
-  'open share panel label': 'Share',
-  'joining space heading': 'Joining space',
-  'join space heading': 'Join a space',
-  'halo heading': 'Initialize device identity',
-  'exit label': 'Exit',
-  'identity selector title': 'Join as',
-  'identity radio group title': 'Select an identity you’ve associated with this device already',
-  'add identity label': 'Add',
-  'continue label': 'Continue',
-  'back label': 'Back',
-  'next label': 'Next',
-  'close label': 'Close',
-  'auth choices label': 'Choose an identity',
-  'create identity label': 'Create an identity',
-  'create identity description': 'Create a new identity.',
-  'recover identity label': 'Use a seed phrase',
-  'recover identity description': 'Enter your seed phrase to log in manually.',
-  'join identity label': 'Use an authed device',
-  'join identity description': 'Add this device to an identity you’re already logged into on another device.',
-  'deselect identity label': 'Back to identities',
-  'addition method selector title': 'An identity is required to continue',
-  'new identity input label': 'Add a display name',
-  'recover identity input label': 'Type or paste your seed phrase',
-  'failed to create identity message': 'Failed to create an identity.',
-  'failed to recover identity message': 'Failed to recover an identity from the provided seed phrase.',
-  'failed to authenticate message': 'Incorrect PIN.',
-  'identity added label': 'Created identity & added to this device:',
-  'join space as identity heading': '<part>as </part><part><icon/><label>{{labelValue}}</label></part>',
-  'error status label': 'Failed',
-  'timeout status label': 'Timed out',
-  'cancelled status label': 'Cancelled',
-  'init status label': 'Ready to connect',
-  'connecting status label': 'Connecting…',
-  'connected status label': 'Enter confirmation PIN',
-  'authenticating status label': 'Enter confirmation PIN',
-  'success status label': 'Success',
-  'connect label': 'Connect',
-  'reconnect label': 'Reconnect',
-  'cancel label': 'Cancel',
-  'done label': 'Done',
-  'reset label': 'Start over',
-  'auth code input label': 'Enter the verification code',
-  'invitation input label': 'Paste an invitation code or URL',
-  'create device invitation label': 'Invite',
-  'create space invitation label': 'Invite',
-  'qr label': 'Scan to accept invitation',
-  'empty invitations message': 'No pending invitations',
-  'show all spaces label': 'All spaces',
-  'all spaces label': 'All spaces',
-  'create space label': 'Create a new space',
-  'join space label': 'Join a space',
-  'show current space label': 'Current space',
-  'view space invitations label': 'View space invitations',
-  'toggle sidebar label': 'Open/close sidebar',
-  'open sidebar label': 'Open sidebar',
-  'close sidebar label': 'Close sidebar',
-  'welcome message': 'Welcome',
-  'selecting identity heading': 'Selecting identity'
-};

package/src/util/invitationStatusValue.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Invitation } from '@dxos/client';
-
-/**
- * This map assigns a numeric value to invitation states to facilitate
- * more terse code which uses combinations of `>`, `<`, and `=` instead of
- * longer sequences of `===` and `||` predicates.
- */
-export const invitationStatusValue = new Map<Invitation.State, number>([
-  [Invitation.State.ERROR, -3],
-  [Invitation.State.TIMEOUT, -2],
-  [Invitation.State.CANCELLED, -1],
-  [Invitation.State.INIT, 0],
-  [Invitation.State.CONNECTING, 1],
-  [Invitation.State.CONNECTED, 2],
-  [Invitation.State.READY_FOR_AUTHENTICATION, 3],
-  [Invitation.State.AUTHENTICATING, 4],
-  [Invitation.State.SUCCESS, 5]
-]);

package/src/util/toEmoji.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import toArray from 'lodash.toarray';
-
-const emoji = toArray(
-  // When changing this set, please check the result in a console or e.g. RunKit (https://runkit.com/thure/642214441dd6ae000855a8de)
-  // Emoji sometimes use a combination of code points, and some code points aren't visible on their own, so by adding or deleting you may unintentionally create non-visible items.
-  // This set was chosen from the characters in Unicode Emoji v15.0 based on the following criteria:
-  // – not people or isolated anthropomorphic faces
-  // – not flags
-  // – more concrete than abstract
-  // – less culturally specific
-  // – less easily confused with another emoji in the set
-  // – requires less special knowledge to identify
-  // – less likely to evoke negative feelings (no meat, no drugs, no weapons, etc)
-  // – less common as a signifier in UX
-  '👹👻👽🤖🎃🦾🦿🦷👣👁️🧶👑🐒🦆🦉🐴🦄🐝🦋🐞🪲🐢🦎🦕🦑🦀🐠🐬🐋🦭🐅🐆🦓🦍🦧🐘🐫🦒🦘🦬🐖🐏🦌🐕🐈🐓🦚🦜🦢🦩🦦🐁🐿️🌵🌲🌳🪵🌱🍁🪺🍄🐚🪸🪨🌾🌷🌻☀️🌙🪐⭐️⚡️☄️🔥🌈☁️💧⛱️🌊🍎🍋🍉🍇🫐🍈🍒🍑🥭🍍🥥🥝🥑🌶️🌽🥕🍬🥜🫖☕️🍵🧊🧂🏔️⚓️🛟🏝️🛶🚀🛰️⛲️🏰🚲⛺️🎙️🧲⚙️🔩🔮🔭🔬🧬🌡️🧺🛎️🔑🪑🧸🎈🎀🎊♻️🎵'
-);
-
-export const toEmoji = (keyAsHex: string) => emoji[parseInt(keyAsHex, 16) % emoji.length];

package/theme-extensions.js

@@ -1,11 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-module.exports = {
-  osThemeExtension: {
-    spacing: {
-      sidebar: '272px'
-    }
-  }
-};