@dxos/plugin-client 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/components/DevicesContainer.tsx

@@ -0,0 +1,270 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Check, X } from '@phosphor-icons/react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { QR } from 'react-qr-rounded';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { log } from '@dxos/log';
+import { useClient, useMulticastObservable } from '@dxos/react-client';
+import { type Device, useDevices } from '@dxos/react-client/halo';
+import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
+import { useNetworkStatus } from '@dxos/react-client/mesh';
+import { Button, Clipboard, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
+import { ControlFrame, ControlFrameItem, ControlGroup, ControlItem, ControlSection } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { hexToEmoji } from '@dxos/util';
+
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const DevicesContainer = ({
+  createInvitationUrl,
+}: {
+  createInvitationUrl: (invitationCode: string) => string;
+}) => {
+  const { t } = useTranslation('os');
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const devices = useDevices();
+  const { swarm: connectionState } = useNetworkStatus();
+
+  const handleResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ResetStorage)), [dispatch]);
+
+  const handleRecover = useCallback(
+    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'recover' })),
+    [dispatch],
+  );
+
+  const handleJoinNewIdentity = useCallback(
+    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'join new identity' })),
+    [dispatch],
+  );
+
+  return (
+    <Clipboard.Provider>
+      <StackItem.Content classNames='p-2 block overflow-y-auto'>
+        <ControlSection
+          title={t('devices verbose label', { ns: CLIENT_PLUGIN })}
+          description={t('devices description', { ns: CLIENT_PLUGIN })}
+        >
+          <ControlFrame>
+            <ControlFrameItem title={t('devices label', { ns: CLIENT_PLUGIN })}>
+              <List>
+                {devices.map((device: Device) => {
+                  return (
+                    <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                  );
+                })}
+              </List>
+            </ControlFrameItem>
+            <ControlFrameItem title='Add device'>
+              <DeviceInvitation createInvitationUrl={createInvitationUrl} />
+            </ControlFrameItem>
+          </ControlFrame>
+        </ControlSection>
+        <ControlSection
+          title={t('danger zone title', { ns: CLIENT_PLUGIN })}
+          description={t('danger zone description', { ns: CLIENT_PLUGIN })}
+        >
+          <ControlGroup>
+            <ControlItem
+              title={t('reset device label')}
+              description={t('reset device description', { ns: CLIENT_PLUGIN })}
+            >
+              <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
+                {t('reset device label')}
+              </Button>
+            </ControlItem>
+            <ControlItem
+              title={t('recover identity label')}
+              description={t('recover identity description', { ns: CLIENT_PLUGIN })}
+            >
+              <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
+                {t('recover identity label')}
+              </Button>
+            </ControlItem>
+            <ControlItem
+              title={t('join new identity label')}
+              description={t('join new identity description', { ns: CLIENT_PLUGIN })}
+            >
+              <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
+                {t('join new identity label')}
+              </Button>
+            </ControlItem>
+          </ControlGroup>
+        </ControlSection>
+      </StackItem.Content>
+    </Clipboard.Provider>
+  );
+};
+
+type DeviceInvitationProps = {
+  invitation?: CancellableInvitationObservable;
+  createInvitationUrl: (invitationCode: string) => string;
+  onInvitationDone: () => void;
+  onInvitationCreate: () => void;
+};
+
+const DeviceInvitation = (props: Pick<DeviceInvitationProps, 'createInvitationUrl'>) => {
+  const client = useClient();
+  const [invitation, setInvitation] = useState<CancellableInvitationObservable>();
+
+  const onInvitationCreate = useCallback(() => {
+    const invitation = client.halo.share();
+    if (client.config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
+      const subscription = invitation.subscribe((invitation: Invitation) => {
+        const invitationCode = InvitationEncoder.encode(invitation);
+        if (invitation.state === Invitation.State.CONNECTING) {
+          log.info(JSON.stringify({ invitationCode, authCode: invitation.authCode }));
+          subscription.unsubscribe();
+        }
+      });
+    }
+    setInvitation(invitation);
+  }, [client]);
+
+  const onInvitationDone = useCallback(() => {
+    setInvitation(undefined);
+  }, []);
+
+  if (invitation) {
+    return <DeviceInvitationImpl {...props} {...{ invitation, onInvitationCreate, onInvitationDone }} />;
+  } else {
+    return <InvitationSection {...props} {...{ onInvitationCreate, onInvitationDone }} />;
+  }
+};
+
+const DeviceInvitationImpl = ({
+  invitation: invitationObservable,
+  createInvitationUrl,
+  onInvitationDone,
+  onInvitationCreate,
+}: DeviceInvitationProps) => {
+  const invitation = useMulticastObservable(invitationObservable!);
+  const url = createInvitationUrl(InvitationEncoder.encode(invitation));
+
+  useEffect(() => {
+    if (invitation.state >= Invitation.State.SUCCESS) {
+      onInvitationDone();
+    }
+  }, [invitation.state]);
+
+  return <InvitationSection {...invitation} {...{ url, onInvitationDone, onInvitationCreate }} />;
+};
+
+type InvitationComponentProps = Partial<
+  Pick<Invitation, 'authCode' | 'invitationId'> &
+    Pick<DeviceInvitationProps, 'onInvitationDone' | 'onInvitationCreate'> & {
+      state: number;
+      url: string;
+    }
+>;
+
+const InvitationSection = ({
+  state = -1,
+  authCode,
+  invitationId = 'never',
+  url = 'never',
+  onInvitationDone = () => {},
+  onInvitationCreate = () => {},
+}: InvitationComponentProps) => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const activeView =
+    state < 0
+      ? 'init'
+      : state >= Invitation.State.CANCELLED
+        ? 'complete'
+        : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
+          ? 'auth-code'
+          : 'qr-code';
+  return activeView === 'init' ? (
+    <>
+      <p className='text-description mbe-2'>{t('add device description')}</p>
+      <IconButton
+        icon='ph--plus--regular'
+        label={t('create device invitation label')}
+        disabled={state >= 0}
+        classNames='is-full'
+        data-testid='devicesContainer.createInvitation'
+        onClick={onInvitationCreate}
+      />
+    </>
+  ) : (
+    <Viewport.Root activeView={activeView}>
+      <Viewport.Views>
+        <Viewport.View id='init'>
+          {/* This view intentionally left blank while conditionally rendering the viewport. */}
+        </Viewport.View>
+        <Viewport.View id='complete'>
+          <InvitationComplete statusValue={state} />
+        </Viewport.View>
+        <Viewport.View id='auth-code'>
+          <InvitationAuthCode id={invitationId} code={authCode ?? 'never'} onCancel={onInvitationDone} />
+        </Viewport.View>
+        <Viewport.View id='qr-code'>
+          <InvitationQR id={invitationId} url={url} onCancel={onInvitationDone} />
+        </Viewport.View>
+      </Viewport.Views>
+    </Viewport.Root>
+  );
+};
+
+const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {
+  const { t } = useTranslation('os');
+  const qrLabel = useId('devices-container__qr-code');
+  const emoji = hexToEmoji(id);
+  return (
+    <>
+      <p className='text-description'>{t('qr code description', { ns: CLIENT_PLUGIN })}</p>
+      <div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
+        <div role='none' className='is-full aspect-square relative text-description'>
+          <QR
+            rounding={100}
+            backgroundColor='transparent'
+            color='currentColor'
+            aria-labelledby={qrLabel}
+            errorCorrectionLevel='Q'
+            cutout={true}
+          >
+            {url ?? 'never'}
+          </QR>
+          <Centered>
+            <Emoji text={emoji} />
+          </Centered>
+        </div>
+        <span id={qrLabel} className='sr-only'>
+          {t('qr label')}
+        </span>
+        <Clipboard.Button value={url ?? 'never'} />
+      </div>
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </>
+  );
+};
+
+const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {
+  const { t } = useTranslation('os');
+  const emoji = hexToEmoji(id);
+
+  return (
+    <>
+      <p className='text-description'>{t('auth other device emoji message')}</p>
+      {emoji && <Emoji text={emoji} className='mli-auto mlb-2 text-center' />}
+      <p className='text-description'>{t('auth code message')}</p>
+      <AuthCode code={code} large classNames='mli-auto mlb-2 text-center grow' />
+      <Button variant='ghost' onClick={onCancel}>
+        {t('cancel label')}
+      </Button>
+    </>
+  );
+};
+
+const InvitationComplete = ({ statusValue }: { statusValue: number }) => {
+  return statusValue > 0 ? <Check className={mx('m-1.5', getSize(6))} /> : <X className={mx('m-1.5', getSize(6))} />;
+};

package/src/components/ProfileContainer.stories.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ProfileContainer } from './ProfileContainer';
+import translations from '../translations';
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/ProfileContainer',
+  component: ProfileContainer,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ProfileContainer>;
+
+export const Default: Story = {};

package/src/components/ProfileContainer.tsx

@@ -0,0 +1,163 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema as S } from 'effect';
+import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+import { debounce } from '@dxos/async';
+import { useClient } from '@dxos/react-client';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';
+import { Form, type InputComponent, ControlItem, ControlItemInput, ControlSection } from '@dxos/react-ui-form';
+import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
+import { StackItem } from '@dxos/react-ui-stack';
+import { hexToHue, hexToEmoji } from '@dxos/util';
+
+import { CLIENT_PLUGIN } from '../meta';
+
+// TODO(thure): Factor out?
+const getDefaultHueValue = (identity: Identity | null) => hexToHue(identity?.identityKey.toHex() ?? '0');
+const getDefaultEmojiValue = (identity: Identity | null) => hexToEmoji(identity?.identityKey.toHex() ?? '0');
+const getHueValue = (identity: Identity | null) => identity?.profile?.data?.hue || getDefaultHueValue(identity);
+const getEmojiValue = (identity: Identity | null) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
+
+export const ProfileContainer = () => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const client = useClient();
+  const identity = useIdentity();
+  const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');
+  const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));
+  const [hue, setHueDirectly] = useState<string>(getHueValue(identity));
+
+  const updateProfile = useMemo(
+    () =>
+      debounce(
+        (profile: Partial<Profile>) =>
+          client.halo.updateProfile({
+            displayName: profile.displayName,
+            data: {
+              emoji: profile.emoji,
+              hue: profile.hue,
+            },
+          }),
+        2_000,
+      ),
+    [],
+  );
+
+  const handleSave = useCallback(
+    (profile: Profile) => {
+      setDisplayNameDirectly(profile.displayName);
+      setEmojiDirectly(profile.emoji);
+      setHueDirectly(profile.hue);
+      updateProfile(profile);
+    },
+    [identity],
+  );
+
+  const values = useMemo(
+    () => ({
+      displayName,
+      emoji,
+      hue,
+      did: identity?.did,
+    }),
+    [identity, displayName, emoji, hue],
+  );
+
+  // TODO(wittjosiah): Integrate descriptions with the form schema.
+  const customElements: Partial<Record<string, InputComponent>> = useMemo(
+    () => ({
+      displayName: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback(
+          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
+          [onValueChange, type],
+        );
+        return (
+          <ControlItemInput title={label} description={t('display name description')}>
+            <Input.TextInput
+              value={getValue()}
+              onChange={handleChange}
+              placeholder={t('display name input placeholder')}
+              classNames='min-is-64'
+            />
+          </ControlItemInput>
+        );
+      },
+      emoji: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
+        const handleEmojiReset = useCallback(
+          () => onValueChange(type, getDefaultEmojiValue(identity)),
+          [onValueChange, type],
+        );
+        return (
+          <ControlItem title={label} description={t('icon description')}>
+            <EmojiPickerBlock
+              triggerVariant='default'
+              emoji={getValue()}
+              onChangeEmoji={handleChange}
+              onClickClear={handleEmojiReset}
+              classNames='justify-self-end'
+            />
+          </ControlItem>
+        );
+      },
+      hue: ({ type, label, getValue, onValueChange }) => {
+        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
+        const handleHueReset = useCallback(
+          () => onValueChange(type, getDefaultHueValue(identity)),
+          [onValueChange, type],
+        );
+        return (
+          <ControlItem title={label} description={t('hue description')}>
+            <HuePicker
+              value={getValue()}
+              onChange={handleChange}
+              onReset={handleHueReset}
+              classNames='[--hue-preview-size:1.5rem] justify-self-end'
+            />
+          </ControlItem>
+        );
+      },
+      // TODO(wittjosiah): We need text input annotations for disabled and copyable.
+      did: ({ label, getValue }) => {
+        return (
+          <ControlItemInput title={label} description={t('did description')}>
+            <ButtonGroup>
+              <Input.TextInput value={getValue()} disabled classNames='min-is-64' />
+              <Clipboard.IconButton value={getValue() ?? ''} />
+            </ButtonGroup>
+          </ControlItemInput>
+        );
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <Clipboard.Provider>
+        <ControlSection title={t('profile label')} description={t('profile description')}>
+          <Form
+            schema={ProfileSchema}
+            values={values}
+            autoSave
+            onSave={handleSave}
+            Custom={customElements}
+            classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
+          />
+        </ControlSection>
+      </Clipboard.Provider>
+    </StackItem.Content>
+  );
+};
+
+// TODO(wittjosiah): Integrate annotations with translations.
+const ProfileSchema = S.Struct({
+  displayName: S.String.annotations({ title: 'Display name' }),
+  emoji: S.String.annotations({ title: 'Avatar' }),
+  hue: S.String.annotations({ title: 'Color' }),
+  did: S.String.annotations({ title: 'DID' }),
+});
+type Profile = S.Schema.Type<typeof ProfileSchema>;

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -15,7 +15,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 import { RecoveryCodeDialog, type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
 import translations from '../translations';
 
-const Render = () => {
+const DefaultStory = () => {
   const client = useClient();
   const [recoveryCode, setRecoveryCode] = useState<string>();
   useAsyncEffect(async () => {
@@ -35,7 +35,7 @@ const Render = () => {
 const meta: Meta<RecoveryCodeDialogProps> = {
   title: 'plugins/plugin-client/RecoveryCodeDialog',
   component: RecoveryCodeDialog,
-  render: Render,
+  render: DefaultStory,
   decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ tooltips: true })],
   parameters: {
     layout: 'fullscreen',

package/src/components/RecoveryCodeDialog.tsx

@@ -8,13 +8,12 @@ import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/rea
 
 import { CLIENT_PLUGIN } from '../meta';
 
-export const RECOVER_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
+export const RECOVERY_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
 
 export type RecoveryCodeDialogProps = {
   code: string;
 };
 
-// TODO(wittjosiah): Factor panel out to @dxos/shell.
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   const { t } = useTranslation(CLIENT_PLUGIN);
   const [confirmation, setConfirmation] = useState(false);

package/src/components/{ManageCredentialsDialog.stories.tsx → RecoveryCredentialsContainer.stories.tsx}

@@ -5,31 +5,18 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import React from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AlertDialog } from '@dxos/react-ui';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { ManageCredentialsDialog } from './ManageCredentialsDialog';
+import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
 import { ClientPlugin } from '../ClientPlugin';
 import translations from '../translations';
 
-const Render = () => {
-  return (
-    <AlertDialog.Root open>
-      <AlertDialog.Overlay>
-        <ManageCredentialsDialog />
-      </AlertDialog.Overlay>
-    </AlertDialog.Root>
-  );
-};
-
 const meta: Meta = {
-  title: 'plugins/plugin-client/ManageCredentialsDialog',
-  component: ManageCredentialsDialog,
-  render: Render,
+  title: 'plugins/plugin-client/RecoveryCredentialsContainer',
+  component: RecoveryCredentialsContainer,
   decorators: [
     withPluginManager({
       plugins: [
@@ -52,6 +39,6 @@ const meta: Meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof ManageCredentialsDialog>;
+type Story = StoryObj<typeof RecoveryCredentialsContainer>;
 
 export const Default: Story = {};

package/src/components/RecoveryCredentialsContainer.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useCredentials } from '@dxos/react-client/halo';
+import { Icon, IconButton, List, ListItem, useTranslation, Message } from '@dxos/react-ui';
+import { ControlGroup, ControlItem, ControlSection } from '@dxos/react-ui-form';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
+
+export const RecoveryCredentialsContainer = () => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const credentials = useCredentials();
+  const recoveryCredentials = credentials.filter(
+    (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
+  );
+
+  return (
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
+        <ControlGroup>
+          <ControlItem title={t('create passkey label')} description={t('create passkey description')}>
+            <IconButton
+              label={t('create passkey label')}
+              icon='ph--key--duotone'
+              variant='primary'
+              size={5}
+              onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
+            />
+          </ControlItem>
+          <ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
+            <IconButton
+              label={t('create recovery code label')}
+              icon='ph--receipt--duotone'
+              variant='default'
+              size={5}
+              onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
+            />
+          </ControlItem>
+        </ControlGroup>
+      </ControlSection>
+      <ControlSection title={t('credentials list label')}>
+        {recoveryCredentials.length < 1 ? (
+          <Message.Root valence='error' className='container-max-width'>
+            <Message.Title>
+              <Icon icon='ph--shield-warning--duotone' size={5} classNames='inline-block align-top mbs-px mie-1' />
+              {t('no credentials title')}
+            </Message.Title>
+            <Message.Body>{t('no credentials message')}</Message.Body>
+          </Message.Root>
+        ) : (
+          <List classNames='container-max-width pli-2'>
+            {recoveryCredentials.map((credential) => (
+              <ListItem.Root key={credential.id?.toHex()}>
+                <ListItem.Endcap>
+                  <Icon icon='ph--key--regular' size={5} />
+                </ListItem.Endcap>
+                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+              </ListItem.Root>
+            ))}
+          </List>
+        )}
+      </ControlSection>
+    </StackItem.Content>
+  );
+};

package/src/components/ResetDialog.stories.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Dialog } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ResetDialog, type ResetDialogProps } from './ResetDialog';
+import translations from '../translations';
+
+const Render = (props: ResetDialogProps) => {
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <ResetDialog onReset={() => console.log('reset')} {...props} />
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const meta: Meta<ResetDialogProps> = {
+  title: 'plugins/plugin-client/ResetDialog',
+  component: ResetDialog,
+  render: Render,
+  decorators: [withPluginManager({ plugins: [IntentPlugin()] }), withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ResetDialogProps>;
+
+export const Default: Story = { args: { mode: 'reset storage' } };
+
+export const JoinNewIdentity: Story = { args: { mode: 'join new identity' } };
+
+export const Recover: Story = { args: { mode: 'recover' } };