@dxos/react-ui 0.1.31-next.ea8f0bc → 0.1.32-next.77d513e

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

@@ -8,7 +8,7 @@ export const os = {
   'sidebar label': 'DXOS sidebar',
   'copy invitation code label': 'Copy',
   'open share panel label': 'Share',
-  'joining heading': '<small>Joining</small><large>{{name}}</large>',
+  'joining space heading': 'Joining space',
   'join space heading': 'Join a space',
   'halo heading': 'Initialize device identity',
   'exit label': 'Exit',
@@ -27,7 +27,7 @@ export const os = {
   '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': 'Add an identity to this device',
+  '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.',
@@ -48,7 +48,7 @@ export const os = {
   'cancel label': 'Cancel',
   'done label': 'Done',
   'reset label': 'Start over',
-  'auth code input label': 'Auth code provided by the invitation sender',
+  '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',
@@ -62,5 +62,7 @@ export const os = {
   'view space invitations label': 'View space invitations',
   'toggle sidebar label': 'Open/close sidebar',
   'open sidebar label': 'Open sidebar',
-  'close sidebar label': 'Close sidebar'
+  'close sidebar label': 'Close sidebar',
+  'welcome message': 'Welcome',
+  'selecting identity heading': 'Selecting identity'
 };

package/src/util/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './invitationStatusValue';
+export * from './toEmoji';

package/src/util/toEmoji.ts

@@ -0,0 +1,22 @@
+//
+// 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/dist/types/src/panels/JoinPanel/view-states/IdentitySelector.d.ts

@@ -1,7 +0,0 @@
-import type { Identity } from '@dxos/client';
-import { ViewStateProps } from './ViewState';
-export interface IdentitySelectorProps extends ViewStateProps {
-    availableIdentities: Identity[];
-}
-export declare const IdentitySelector: ({ availableIdentities, ...viewStateProps }: IdentitySelectorProps) => JSX.Element;
-//# sourceMappingURL=IdentitySelector.d.ts.map

package/dist/types/src/panels/JoinPanel/view-states/IdentitySelector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IdentitySelector.d.ts","sourceRoot":"","sources":["../../../../../../src/panels/JoinPanel/view-states/IdentitySelector.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAA+B,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,mBAAmB,EAAE,QAAQ,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,+CAAgD,qBAAqB,gBAkFjG,CAAC"}

package/src/panels/JoinPanel/view-states/IdentitySelector.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as RadioGroup from '@radix-ui/react-radio-group';
-import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
-import React, { useCallback, useState } from 'react';
-
-import type { Identity } from '@dxos/client';
-import { Avatar, Button, themeVariantFocus, getSize, mx, useTranslation } from '@dxos/react-components';
-
-import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
-
-export interface IdentitySelectorProps extends ViewStateProps {
-  availableIdentities: Identity[];
-}
-
-export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: IdentitySelectorProps) => {
-  const { dispatch } = viewStateProps;
-  const disabled = !viewStateProps.active;
-
-  const { t } = useTranslation('os');
-  const [activeIdentity, setActiveIdentity] = useState(availableIdentities[0]);
-  const onValueChange = useCallback(
-    (nextHex: string) =>
-      setActiveIdentity(
-        availableIdentities.find((identity) => identity.identityKey.toHex() === nextHex) || activeIdentity
-      ),
-    [availableIdentities]
-  );
-
-  return (
-    <ViewState {...viewStateProps}>
-      <ViewStateHeading>{t('identity selector title')}</ViewStateHeading>
-      <RadioGroup.Root
-        disabled={disabled}
-        value={activeIdentity?.identityKey.toHex()}
-        onValueChange={onValueChange}
-        className='overflow-y-auto grow shrink min-bs-10 pli-1 -mli-1'
-        aria-label={t('identity radio group title')}
-        data-autofocus='identity selector'
-      >
-        {availableIdentities.map(({ profile, identityKey }) => {
-          const hex = identityKey.toHex();
-          const inputId = `identitySelector__item--${hex}`;
-          const labelId = `identitySelector__itemLabel--${hex}`;
-          return (
-            <label htmlFor={inputId} key={hex} className='flex items-center mbe-2 gap-2 cursor-pointer'>
-              <RadioGroup.Item
-                id={inputId}
-                aria-labelledby={labelId}
-                value={hex}
-                className={mx(
-                  'peer relative w-4 h-4 rounded-full',
-                  'border border-transparent text-white',
-                  'radix-state-checked:bg-primary-600',
-                  'radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900',
-                  themeVariantFocus('os')
-                )}
-                data-testid='identity-selector-item'
-              >
-                <RadioGroup.Indicator className='absolute inset-0 flex items-center justify-center leading-0'>
-                  <div className='w-1.5 h-1.5 rounded-full bg-white' />
-                </RadioGroup.Indicator>
-              </RadioGroup.Item>
-              <Avatar fallbackValue={hex} labelId={labelId} variant='circle' />
-              <span id={labelId} className={mx(!profile?.displayName && 'font-mono')}>
-                {profile?.displayName ?? identityKey.truncate() ?? ''}
-              </span>
-            </label>
-          );
-        })}
-      </RadioGroup.Root>
-      <Button
-        disabled={disabled}
-        onClick={() => dispatch({ type: 'add identity' })}
-        className='flex items-center gap-2 pli-2'
-        data-testid='add-identity'
-      >
-        <span>{t('add identity label')}</span>
-        <UserPlus weight='bold' className={getSize(3.5)} />
-      </Button>
-      <Button
-        disabled={disabled || !activeIdentity}
-        className='flex items-center gap-2 pli-2'
-        onClick={() =>
-          dispatch({
-            type: 'select identity',
-            identity: activeIdentity
-          })
-        }
-        data-testid='select-identity'
-      >
-        <CaretLeft weight='bold' className={mx(getSize(4), 'invisible')} />
-        <span className='grow'>{t('continue label')}</span>
-        <CaretRight weight='bold' className={getSize(4)} />
-      </Button>
-    </ViewState>
-  );
-};