@dxos/shell 0.7.3-staging.cc8dd3e → 0.7.3

package/src/panels/JoinPanel/steps/IdentityInput.tsx

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { useTranslation } from '@dxos/react-ui';
+import { type MaybePromise } from '@dxos/util';
 
 import { Action, Actions, StepHeading, Input } from '../../../components';
 import { type JoinStepProps } from '../JoinPanelProps';
@@ -18,7 +19,7 @@ export interface IdentityCreatorProps extends JoinStepProps {
 export type IdentityInputProps = IdentityCreatorProps;
 
 export type IdentityInputImplProps = IdentityCreatorProps & {
-  onDisplayNameConfirm?: (displayName: string) => void;
+  onConfirm?: (value: string) => MaybePromise<void>;
   validationMessage?: string;
 };
 
@@ -28,9 +29,9 @@ export const IdentityInput = (props: IdentityInputProps) => {
   const client = useClient();
   const { t } = useTranslation('os');
   const [validationMessage, setValidationMessage] = useState('');
-  const createIdentity = (value: string) => {
+  const handleConfirm = async (value: string) => {
     if (isRecover) {
-      void client.halo.recoverIdentity({ seedphrase: value }).then(
+      await client.halo.recoverIdentity({ seedphrase: value }).then(
         (identity) => {
           send?.({ type: 'selectIdentity' as const, identity });
         },
@@ -40,7 +41,7 @@ export const IdentityInput = (props: IdentityInputProps) => {
         },
       );
     } else {
-      void client.halo.createIdentity({ displayName: value }).then(
+      await client.halo.createIdentity({ displayName: value }).then(
         (identity) => {
           send?.({ type: 'selectIdentity' as const, identity });
         },
@@ -51,16 +52,24 @@ export const IdentityInput = (props: IdentityInputProps) => {
       );
     }
   };
-  return <IdentityInputImpl {...props} onDisplayNameConfirm={createIdentity} validationMessage={validationMessage} />;
+  return <IdentityInputImpl {...props} onConfirm={handleConfirm} validationMessage={validationMessage} />;
 };
 
 // TODO(zhenyasav): impl shouldn't need send()
 export const IdentityInputImpl = (props: IdentityInputImplProps) => {
-  const { method, send, active, onDisplayNameConfirm, validationMessage } = props;
-  const disabled = !active;
+  const { method, active, onConfirm, validationMessage } = props;
   const { t } = useTranslation('os');
   const [inputValue, setInputValue] = useState('');
+  const [pending, setPending] = useState(false);
+  const disabled = !active || pending;
   const isRecover = method === 'recover identity';
+
+  const handleConfirm = useCallback(async () => {
+    setPending(true);
+    await onConfirm?.(inputValue);
+    setPending(false);
+  }, [onConfirm, inputValue]);
+
   return (
     <>
       <div role='none' className='grow flex flex-col justify-center'>
@@ -71,11 +80,12 @@ export const IdentityInputImpl = (props: IdentityInputImplProps) => {
           }
           disabled={disabled}
           data-testid='identity-input'
-          placeholder={isRecover ? 'Type your recovery phrase' : 'Type a display name'}
+          placeholder={isRecover ? t('recovery code placeholder') : t('display name placeholder')}
           onChange={({ target: { value } }) => setInputValue(value)}
         />
       </div>
       <Actions>
+        {/* TODO(wittjosiah): This disables returning to deprecated identity creation flow.
         <Action
           variant='ghost'
           disabled={disabled}
@@ -83,14 +93,14 @@ export const IdentityInputImpl = (props: IdentityInputImplProps) => {
           data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-back`}
         >
           {t('back label')}
-        </Action>
+        </Action> */}
         <Action
           variant='primary'
-          disabled={disabled}
-          onClick={() => onDisplayNameConfirm?.(inputValue)}
+          disabled={disabled || inputValue.trim().length === 0}
+          onClick={handleConfirm}
           data-testid={`${method === 'recover identity' ? 'recover' : 'create'}-identity-input-continue`}
         >
-          {t('continue label')}
+          {pending ? t('pending label') : t('continue label')}
         </Action>
       </Actions>
     </>

package/src/panels/JoinPanel/steps/InvitationInput.tsx

@@ -67,8 +67,7 @@ export const InvitationInput = (props: InvitationInputProps) => {
       <div role='none' className='grow flex flex-col justify-center'>
         <Input
           label={<StepHeading>{t('invitation input label')}</StepHeading>}
-          // TODO(burdon): Translation.
-          placeholder='Type an invitation code'
+          placeholder={t('invitation input placeholder')}
           disabled={disabled}
           value={inputValue}
           onChange={({ target: { value } }) => setInputValue(value)}

package/src/steps/InvitationManager.tsx

@@ -7,22 +7,12 @@ import React, { useMemo } from 'react';
 import { QR } from 'react-qr-rounded';
 
 import { type InvitationStatus } from '@dxos/react-client/invitations';
-import { useId, useTranslation } from '@dxos/react-ui';
+import { Clipboard, useId, useTranslation } from '@dxos/react-ui';
 import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
 import { type StepProps } from './StepProps';
-import {
-  Actions,
-  Action,
-  AuthCode,
-  Emoji,
-  Label,
-  Viewport,
-  type ViewportViewProps,
-  CopyButton,
-  Centered,
-} from '../components';
+import { Actions, Action, AuthCode, Emoji, Label, Viewport, type ViewportViewProps, Centered } from '../components';
 import { invitationStatusValue } from '../util';
 
 export type InvitationManagerProps = StepProps &
@@ -93,7 +83,7 @@ export const InvitationManager = ({
             <span id={qrLabel} className='sr-only'>
               {t('qr label')}
             </span>
-            <CopyButton variant='ghost' value={invitationUrl ?? 'never'} />
+            <Clipboard.Button variant='ghost' value={invitationUrl ?? 'never'} />
           </InvitationManagerView>
           <InvitationManagerView id='showing auth code'>
             <Label>{t('auth code message')}</Label>

package/src/stories/Invitations.e2e-stories.tsx

@@ -15,11 +15,11 @@ import { useIdentity } from '@dxos/react-client/halo';
 import { Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { ConnectionState, useNetworkStatus } from '@dxos/react-client/mesh';
 import { useMultiClient, withMultiClientProvider } from '@dxos/react-client/testing';
-import { Button, ButtonGroup, List } from '@dxos/react-ui';
+import { Button, ButtonGroup, Clipboard, List } from '@dxos/react-ui';
 import { getSize, groupSurface } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ClipboardProvider, IdentityListItem, SpaceListItem } from '../components';
+import { IdentityListItem, SpaceListItem } from '../components';
 import { IdentityPanel, JoinPanel, SpacePanel } from '../panels';
 import { osTranslations } from '../translations';
 
@@ -222,10 +222,10 @@ const Invitations = () => {
 export const Default = {
   render: () => {
     return (
-      // TODO(wittjosiah): Factor out ClipboardProvider to react-ui and include in layout decorator.
-      <ClipboardProvider>
+      // TODO(wittjosiah): Include Clipboard.Provider in layout decorator.
+      <Clipboard.Provider>
         <Invitations />
-      </ClipboardProvider>
+      </Clipboard.Provider>
     );
   },
   decorators: [

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

@@ -18,22 +18,26 @@ export const os = {
   'identity radio group title': 'Select an identity you’ve associated with this device already',
   'add identity label': 'Add',
   'continue label': 'Continue',
+  'pending label': 'Pending',
   '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.',
+  'recover identity label': 'Use a recovery code',
+  'recover identity description': 'Enter your recovery code to log in manually.',
+  'invitation input placeholder': 'Invitation code',
+  'recovery code placeholder': 'Recovery code',
+  'display name placeholder': 'Display name',
   'join identity label': 'Use another 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 chooser title': 'An identity is required to continue',
   'new identity input label': 'Set display name',
-  'recover identity input label': 'Type or paste your seed phrase',
+  'recover identity input label': 'Type or paste your recovery code',
   '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 recover identity message': 'Failed to recover an identity from the provided recovery code.',
   'failed to authenticate message': 'Incorrect code.',
   'identity added label': 'Created identity & added to this device:',
   'join space as identity heading': '<part>as </part><part><icon/><label>{{labelValue}}</label></part>',

package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts

@@ -1,9 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export type ClipboardContextValue = {
-    textValue: string;
-    setTextValue: (nextValue: string) => Promise<void>;
-};
-export declare const ClipboardContext: React.Context<ClipboardContextValue>;
-export declare const useClipboardContext: () => ClipboardContextValue;
-export declare const ClipboardProvider: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-//# sourceMappingURL=ClipboardProvider.d.ts.map

package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClipboardProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Clipboard/ClipboardProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAiB,KAAK,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAExG,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,sCAG3B,CAAC;AAEH,eAAO,MAAM,mBAAmB,6BAAqC,CAAC;AAEtE,eAAO,MAAM,iBAAiB,iBAAkB,iBAAiB,CAAC,EAAE,CAAC,sBAOpE,CAAC"}

package/dist/types/src/components/Clipboard/ClipboardProvider.js

@@ -1,46 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClipboardProvider = exports.useClipboardContext = exports.ClipboardContext = void 0;
-const react_1 = __importStar(require("react"));
-exports.ClipboardContext = (0, react_1.createContext)({
-    textValue: '',
-    setTextValue: async (_) => { },
-});
-const useClipboardContext = () => (0, react_1.useContext)(exports.ClipboardContext);
-exports.useClipboardContext = useClipboardContext;
-const ClipboardProvider = ({ children }) => {
-    const [textValue, setInternalTextValue] = (0, react_1.useState)('');
-    const setTextValue = (0, react_1.useCallback)(async (nextValue) => {
-        await navigator.clipboard.writeText(nextValue);
-        return setInternalTextValue(nextValue);
-    }, []);
-    return react_1.default.createElement(exports.ClipboardContext.Provider, { value: { textValue, setTextValue } }, children);
-};
-exports.ClipboardProvider = ClipboardProvider;
-//# sourceMappingURL=ClipboardProvider.js.map

package/dist/types/src/components/Clipboard/ClipboardProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ClipboardProvider.js","sourceRoot":"","sources":["../../../../../src/components/Clipboard/ClipboardProvider.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,+CAAwG;AAO3F,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAAwB;IACnE,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,GAAE,CAAC;CAC9B,CAAC,CAAC;AAEI,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,IAAA,kBAAU,EAAC,wBAAgB,CAAC,CAAC;AAAzD,QAAA,mBAAmB,uBAAsC;AAE/D,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAyB,EAAE,EAAE;IACvE,MAAM,CAAC,SAAS,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,KAAK,EAAE,SAAiB,EAAE,EAAE;QAC3D,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/C,OAAO,oBAAoB,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,8BAAC,wBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,IAAG,QAAQ,CAA6B,CAAC;AAC/G,CAAC,CAAC;AAPW,QAAA,iBAAiB,qBAO5B"}

package/dist/types/src/components/Clipboard/CopyButton.d.ts

@@ -1,10 +0,0 @@
-import { type IconProps } from '@phosphor-icons/react';
-import React from 'react';
-import { type ButtonProps } from '@dxos/react-ui';
-export type CopyButtonProps = ButtonProps & {
-    value: string;
-    iconProps?: IconProps;
-};
-export declare const CopyButton: ({ value, classNames, iconProps, ...props }: CopyButtonProps) => React.JSX.Element;
-export declare const CopyButtonIconOnly: ({ value, classNames, iconProps, variant, ...props }: CopyButtonProps) => React.JSX.Element;
-//# sourceMappingURL=CopyButton.d.ts.map

package/dist/types/src/components/Clipboard/CopyButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Clipboard/CopyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,KAAK,WAAW,EAA2B,MAAM,gBAAgB,CAAC;AAKnF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAIF,eAAO,MAAM,UAAU,+CAAgD,eAAe,sBAqBrF,CAAC;AAEF,eAAO,MAAM,kBAAkB,wDAAyD,eAAe,sBA2BtG,CAAC"}

package/dist/types/src/components/Clipboard/CopyButton.js

@@ -1,65 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CopyButtonIconOnly = exports.CopyButton = void 0;
-const react_1 = require("@phosphor-icons/react");
-const react_2 = __importStar(require("react"));
-const react_ui_1 = require("@dxos/react-ui");
-const react_ui_theme_1 = require("@dxos/react-ui-theme");
-const ClipboardProvider_1 = require("./ClipboardProvider");
-const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
-const CopyButton = ({ value, classNames, iconProps, ...props }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const { textValue, setTextValue } = (0, ClipboardProvider_1.useClipboardContext)();
-    const isCopied = textValue === value;
-    return (react_2.default.createElement(react_ui_1.Button, { ...props, classNames: ['inline-flex flex-col justify-center', classNames], onClick: () => setTextValue(value), "data-testid": 'copy-invitation' },
-        react_2.default.createElement("div", { role: 'none', className: (0, react_ui_theme_1.mx)('flex gap-1 items-center', isCopied && inactiveLabelStyles) },
-            react_2.default.createElement("span", { className: 'pli-1' }, t('copy invitation code label')),
-            react_2.default.createElement(react_1.Copy, { className: (0, react_ui_theme_1.getSize)(5), ...iconProps })),
-        react_2.default.createElement("div", { role: 'none', className: (0, react_ui_theme_1.mx)('flex gap-1 items-center', !isCopied && inactiveLabelStyles) },
-            react_2.default.createElement("span", { className: 'pli-1' }, t('copy success label')),
-            react_2.default.createElement(react_1.Check, { className: (0, react_ui_theme_1.getSize)(5), ...iconProps }))));
-};
-exports.CopyButton = CopyButton;
-const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) => {
-    const { t } = (0, react_ui_1.useTranslation)('os');
-    const { textValue, setTextValue } = (0, ClipboardProvider_1.useClipboardContext)();
-    const isCopied = textValue === value;
-    const label = isCopied ? t('copy success label') : t('copy invitation code label');
-    const [open, setOpen] = (0, react_2.useState)(false);
-    return (react_2.default.createElement(react_ui_1.Tooltip.Root, { delayDuration: 1500, open: open, onOpenChange: setOpen },
-        react_2.default.createElement(react_ui_1.Tooltip.Portal, null,
-            react_2.default.createElement(react_ui_1.Tooltip.Content, { side: 'bottom', sideOffset: 12, classNames: 'z-30' },
-                react_2.default.createElement("span", null, label),
-                react_2.default.createElement(react_ui_1.Tooltip.Arrow, null))),
-        react_2.default.createElement(react_ui_1.Tooltip.Trigger, { "aria-label": label, ...props, onClick: () => setTextValue(value).then(() => setOpen(true)), "data-testid": 'copy-invitation', asChild: true },
-            react_2.default.createElement(react_ui_1.Button, { variant: variant, classNames: ['inline-flex flex-col justify-center', classNames] },
-                react_2.default.createElement(react_1.Copy, { className: (0, react_ui_theme_1.getSize)(5), ...iconProps })))));
-};
-exports.CopyButtonIconOnly = CopyButtonIconOnly;
-//# sourceMappingURL=CopyButton.js.map

package/dist/types/src/components/Clipboard/CopyButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../../../../src/components/Clipboard/CopyButton.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Clipboard/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CopyButton';
-export * from './ClipboardProvider';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Clipboard/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/dist/types/src/components/Clipboard/index.js

@@ -1,22 +0,0 @@
-"use strict";
-//
-// Copyright 2023 DXOS.org
-//
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./CopyButton"), exports);
-__exportStar(require("./ClipboardProvider"), exports);
-//# sourceMappingURL=index.js.map

package/dist/types/src/components/Clipboard/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Clipboard/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,+CAA6B;AAC7B,sDAAoC"}

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -1,26 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { createContext, type PropsWithChildren, useCallback, useContext, useState } from 'react';
-
-export type ClipboardContextValue = {
-  textValue: string;
-  setTextValue: (nextValue: string) => Promise<void>;
-};
-
-export const ClipboardContext = createContext<ClipboardContextValue>({
-  textValue: '',
-  setTextValue: async (_) => {},
-});
-
-export const useClipboardContext = () => useContext(ClipboardContext);
-
-export const ClipboardProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [textValue, setInternalTextValue] = useState('');
-  const setTextValue = useCallback(async (nextValue: string) => {
-    await navigator.clipboard.writeText(nextValue);
-    return setInternalTextValue(nextValue);
-  }, []);
-  return <ClipboardContext.Provider value={{ textValue, setTextValue }}>{children}</ClipboardContext.Provider>;
-};

package/src/components/Clipboard/CopyButton.tsx

@@ -1,70 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Check, Copy, type IconProps } from '@phosphor-icons/react';
-import React, { useState } from 'react';
-
-import { Button, type ButtonProps, Tooltip, useTranslation } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
-
-import { useClipboardContext } from './ClipboardProvider';
-
-export type CopyButtonProps = ButtonProps & {
-  value: string;
-  iconProps?: IconProps;
-};
-
-const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
-
-export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButtonProps) => {
-  const { t } = useTranslation('os');
-  const { textValue, setTextValue } = useClipboardContext();
-  const isCopied = textValue === value;
-  return (
-    <Button
-      {...props}
-      classNames={['inline-flex flex-col justify-center', classNames]}
-      onClick={() => setTextValue(value)}
-      data-testid='copy-invitation'
-    >
-      <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy invitation code label')}</span>
-        <Copy className={getSize(5)} {...iconProps} />
-      </div>
-      <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy success label')}</span>
-        <Check className={getSize(5)} {...iconProps} />
-      </div>
-    </Button>
-  );
-};
-
-export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonProps) => {
-  const { t } = useTranslation('os');
-  const { textValue, setTextValue } = useClipboardContext();
-  const isCopied = textValue === value;
-  const label = isCopied ? t('copy success label') : t('copy invitation code label');
-  const [open, setOpen] = useState(false);
-  return (
-    <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' sideOffset={12} classNames='z-30'>
-          <span>{label}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-      <Tooltip.Trigger
-        aria-label={label}
-        {...props}
-        onClick={() => setTextValue(value).then(() => setOpen(true))}
-        data-testid='copy-invitation'
-        asChild
-      >
-        <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
-          <Copy className={getSize(5)} {...iconProps} />
-        </Button>
-      </Tooltip.Trigger>
-    </Tooltip.Root>
-  );
-};

package/src/components/Clipboard/index.ts

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