@dxos/plugin-client 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/{app-graph-builder-JNIES5L4.mjs → app-graph-builder-VTPUWIBC.mjs} +19 -19
- package/dist/lib/browser/app-graph-builder-VTPUWIBC.mjs.map +7 -0
- package/dist/lib/browser/{chunk-SV3MHIKI.mjs → chunk-PEZKWJ62.mjs} +37 -46
- package/dist/lib/browser/chunk-PEZKWJ62.mjs.map +7 -0
- package/dist/lib/browser/chunk-PFY3EQPI.mjs +18 -0
- package/dist/lib/browser/chunk-PFY3EQPI.mjs.map +7 -0
- package/dist/lib/browser/chunk-QB3D2P4J.mjs +10 -0
- package/dist/lib/browser/chunk-QB3D2P4J.mjs.map +7 -0
- package/dist/lib/browser/{chunk-RMHBOY3Y.mjs → chunk-V4KRRGSK.mjs} +2 -2
- package/dist/lib/browser/{chunk-RMHBOY3Y.mjs.map → chunk-V4KRRGSK.mjs.map} +2 -2
- package/dist/lib/browser/chunk-VTC4GIND.mjs +19 -0
- package/dist/lib/browser/chunk-VTC4GIND.mjs.map +7 -0
- package/dist/lib/browser/{client-SKVKXPLY.mjs → client-5PWEJ3U6.mjs} +14 -8
- package/dist/lib/browser/client-5PWEJ3U6.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +23 -19
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/{intent-resolver-LNPLD5CA.mjs → intent-resolver-KHLH34SU.mjs} +16 -16
- package/dist/lib/browser/intent-resolver-KHLH34SU.mjs.map +7 -0
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{migrations-D76RCG72.mjs → migrations-MWQCO5KY.mjs} +5 -5
- package/dist/lib/{node-esm/migrations-YISDI7LF.mjs.map → browser/migrations-MWQCO5KY.mjs.map} +2 -2
- package/dist/lib/browser/{react-context-YWVPZUMU.mjs → react-context-S4SRYUVY.mjs} +7 -7
- package/dist/lib/browser/react-context-S4SRYUVY.mjs.map +7 -0
- package/dist/lib/browser/{react-surface-QFZTDNLS.mjs → react-surface-R4LOX36S.mjs} +7 -7
- package/dist/lib/browser/{react-surface-QFZTDNLS.mjs.map → react-surface-R4LOX36S.mjs.map} +3 -3
- package/dist/lib/browser/{schema-defs-HKW6VNZB.mjs → schema-defs-E3USCMH3.mjs} +5 -5
- package/dist/lib/{node-esm/schema-defs-5ZNI63RW.mjs.map → browser/schema-defs-E3USCMH3.mjs.map} +2 -2
- package/dist/lib/browser/types/index.mjs +2 -2
- package/dist/lib/node-esm/{app-graph-builder-SWFB4FID.mjs → app-graph-builder-AUWZ3ST2.mjs} +19 -19
- package/dist/lib/node-esm/app-graph-builder-AUWZ3ST2.mjs.map +7 -0
- package/dist/lib/node-esm/{chunk-FBYODKEL.mjs → chunk-4SRRA6RS.mjs} +37 -46
- package/dist/lib/node-esm/chunk-4SRRA6RS.mjs.map +7 -0
- package/dist/lib/node-esm/chunk-K5IFPSCL.mjs +20 -0
- package/dist/lib/node-esm/chunk-K5IFPSCL.mjs.map +7 -0
- package/dist/lib/node-esm/{chunk-SZLX4BVJ.mjs → chunk-QE4LPI2A.mjs} +2 -4
- package/dist/lib/node-esm/chunk-QE4LPI2A.mjs.map +7 -0
- package/dist/lib/node-esm/{chunk-5V3RCXZV.mjs → chunk-TCOCW5ON.mjs} +2 -2
- package/dist/lib/node-esm/{chunk-5V3RCXZV.mjs.map → chunk-TCOCW5ON.mjs.map} +2 -2
- package/dist/lib/node-esm/chunk-UYDFBGYA.mjs +19 -0
- package/dist/lib/node-esm/chunk-UYDFBGYA.mjs.map +7 -0
- package/dist/lib/node-esm/{client-SLL6GDC2.mjs → client-ODN7EBTY.mjs} +14 -8
- package/dist/lib/node-esm/client-ODN7EBTY.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +23 -19
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/{intent-resolver-L7C6YRWV.mjs → intent-resolver-BJONA2UZ.mjs} +16 -16
- package/dist/lib/node-esm/intent-resolver-BJONA2UZ.mjs.map +7 -0
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/{migrations-YISDI7LF.mjs → migrations-ARXHGBH5.mjs} +5 -5
- package/dist/lib/{browser/migrations-D76RCG72.mjs.map → node-esm/migrations-ARXHGBH5.mjs.map} +2 -2
- package/dist/lib/node-esm/{react-context-EEHS4S3L.mjs → react-context-4SZYNSIS.mjs} +7 -7
- package/dist/lib/node-esm/react-context-4SZYNSIS.mjs.map +7 -0
- package/dist/lib/node-esm/{react-surface-2K6W37R4.mjs → react-surface-VPJTF75H.mjs} +7 -7
- package/dist/lib/node-esm/{react-surface-2K6W37R4.mjs.map → react-surface-VPJTF75H.mjs.map} +3 -3
- package/dist/lib/node-esm/{schema-defs-5ZNI63RW.mjs → schema-defs-ATH5YBDR.mjs} +5 -5
- package/dist/lib/{browser/schema-defs-HKW6VNZB.mjs.map → node-esm/schema-defs-ATH5YBDR.mjs.map} +2 -2
- package/dist/lib/node-esm/types/index.mjs +2 -2
- package/dist/types/src/ClientPlugin.d.ts +1 -1
- package/dist/types/src/ClientPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/app-graph-builder.d.ts +1 -1
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
- package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
- package/dist/types/src/capabilities/client.d.ts +1 -1
- package/dist/types/src/capabilities/client.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +10 -10
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts +1 -1
- package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
- package/dist/types/src/capabilities/migrations.d.ts +1 -1
- package/dist/types/src/capabilities/migrations.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-context.d.ts +2 -2
- package/dist/types/src/capabilities/react-context.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/capabilities/schema-defs.d.ts +1 -1
- package/dist/types/src/capabilities/schema-defs.d.ts.map +1 -1
- package/dist/types/src/components/DevicesContainer.d.ts.map +1 -1
- package/dist/types/src/components/DevicesContainer.stories.d.ts +224 -5
- package/dist/types/src/components/DevicesContainer.stories.d.ts.map +1 -1
- package/dist/types/src/components/JoinDialog.d.ts +1 -1
- package/dist/types/src/components/JoinDialog.d.ts.map +1 -1
- package/dist/types/src/components/ProfileContainer.d.ts.map +1 -1
- package/dist/types/src/components/ProfileContainer.stories.d.ts +57 -5
- package/dist/types/src/components/ProfileContainer.stories.d.ts.map +1 -1
- package/dist/types/src/components/RecoveryCodeDialog.d.ts +1 -1
- package/dist/types/src/components/RecoveryCodeDialog.d.ts.map +1 -1
- package/dist/types/src/components/RecoveryCodeDialog.stories.d.ts +59 -5
- package/dist/types/src/components/RecoveryCodeDialog.stories.d.ts.map +1 -1
- package/dist/types/src/components/RecoveryCredentialsContainer.d.ts +1 -1
- package/dist/types/src/components/RecoveryCredentialsContainer.d.ts.map +1 -1
- package/dist/types/src/components/RecoveryCredentialsContainer.stories.d.ts +57 -5
- package/dist/types/src/components/RecoveryCredentialsContainer.stories.d.ts.map +1 -1
- package/dist/types/src/components/ResetDialog.d.ts +1 -1
- package/dist/types/src/components/ResetDialog.d.ts.map +1 -1
- package/dist/types/src/components/ResetDialog.stories.d.ts +59 -4
- package/dist/types/src/components/ResetDialog.stories.d.ts.map +1 -1
- package/dist/types/src/events.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +3 -2
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +0 -1
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/types/schema.d.ts +9 -3
- package/dist/types/src/types/schema.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +39 -39
- package/src/ClientPlugin.ts +57 -59
- package/src/capabilities/app-graph-builder.ts +16 -15
- package/src/capabilities/capabilities.ts +5 -5
- package/src/capabilities/client.ts +6 -4
- package/src/capabilities/intent-resolver.ts +5 -4
- package/src/capabilities/migrations.ts +1 -1
- package/src/capabilities/react-context.tsx +3 -2
- package/src/capabilities/react-surface.tsx +3 -3
- package/src/capabilities/schema-defs.ts +1 -1
- package/src/components/DevicesContainer.stories.tsx +9 -11
- package/src/components/DevicesContainer.tsx +54 -68
- package/src/components/JoinDialog.tsx +4 -4
- package/src/components/ProfileContainer.stories.tsx +8 -9
- package/src/components/ProfileContainer.tsx +21 -24
- package/src/components/RecoveryCodeDialog.stories.tsx +9 -10
- package/src/components/RecoveryCodeDialog.tsx +3 -3
- package/src/components/RecoveryCredentialsContainer.stories.tsx +9 -11
- package/src/components/RecoveryCredentialsContainer.tsx +47 -50
- package/src/components/ResetDialog.stories.tsx +10 -13
- package/src/components/ResetDialog.tsx +4 -4
- package/src/events.ts +6 -6
- package/src/index.ts +4 -3
- package/src/meta.ts +1 -3
- package/src/types/schema.ts +3 -3
- package/dist/lib/browser/app-graph-builder-JNIES5L4.mjs.map +0 -7
- package/dist/lib/browser/chunk-3F2Q2RKC.mjs +0 -18
- package/dist/lib/browser/chunk-3F2Q2RKC.mjs.map +0 -7
- package/dist/lib/browser/chunk-CAF2COXW.mjs +0 -19
- package/dist/lib/browser/chunk-CAF2COXW.mjs.map +0 -7
- package/dist/lib/browser/chunk-GS3LDHYD.mjs +0 -12
- package/dist/lib/browser/chunk-GS3LDHYD.mjs.map +0 -7
- package/dist/lib/browser/chunk-SV3MHIKI.mjs.map +0 -7
- package/dist/lib/browser/client-SKVKXPLY.mjs.map +0 -7
- package/dist/lib/browser/intent-resolver-LNPLD5CA.mjs.map +0 -7
- package/dist/lib/browser/react-context-YWVPZUMU.mjs.map +0 -7
- package/dist/lib/node-esm/app-graph-builder-SWFB4FID.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-FBYODKEL.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-IOGTQFLM.mjs +0 -19
- package/dist/lib/node-esm/chunk-IOGTQFLM.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-SZLX4BVJ.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-UMO3ETDV.mjs +0 -20
- package/dist/lib/node-esm/chunk-UMO3ETDV.mjs.map +0 -7
- package/dist/lib/node-esm/client-SLL6GDC2.mjs.map +0 -7
- package/dist/lib/node-esm/intent-resolver-L7C6YRWV.mjs.map +0 -7
- package/dist/lib/node-esm/react-context-EEHS4S3L.mjs.map +0 -7
|
@@ -11,7 +11,7 @@ import { useClient, useMulticastObservable } from '@dxos/react-client';
|
|
|
11
11
|
import { type Device, useDevices } from '@dxos/react-client/halo';
|
|
12
12
|
import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
|
|
13
13
|
import { useNetworkStatus } from '@dxos/react-client/mesh';
|
|
14
|
-
import { Button, Clipboard, IconButton, List, useId, useTranslation
|
|
14
|
+
import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
|
|
15
15
|
import {
|
|
16
16
|
ControlFrame,
|
|
17
17
|
ControlFrameItem,
|
|
@@ -20,11 +20,10 @@ import {
|
|
|
20
20
|
ControlPage,
|
|
21
21
|
ControlSection,
|
|
22
22
|
} from '@dxos/react-ui-form';
|
|
23
|
-
import { StackItem } from '@dxos/react-ui-stack';
|
|
24
23
|
import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
|
|
25
24
|
import { hexToEmoji } from '@dxos/util';
|
|
26
25
|
|
|
27
|
-
import {
|
|
26
|
+
import { meta } from '../meta';
|
|
28
27
|
import { ClientAction } from '../types';
|
|
29
28
|
|
|
30
29
|
export type DevicesContainerProps = {
|
|
@@ -51,70 +50,57 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
|
|
|
51
50
|
|
|
52
51
|
return (
|
|
53
52
|
<Clipboard.Provider>
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
>
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</List>
|
|
53
|
+
<ControlPage>
|
|
54
|
+
<ControlSection
|
|
55
|
+
title={t('devices verbose label', { ns: meta.id })}
|
|
56
|
+
description={t('devices description', { ns: meta.id })}
|
|
57
|
+
>
|
|
58
|
+
<ControlFrame>
|
|
59
|
+
<ControlFrameItem title={t('devices label', { ns: meta.id })}>
|
|
60
|
+
<List>
|
|
61
|
+
{devices.map((device: Device) => {
|
|
62
|
+
return (
|
|
63
|
+
<DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
|
|
64
|
+
);
|
|
65
|
+
})}
|
|
66
|
+
</List>
|
|
67
|
+
</ControlFrameItem>
|
|
68
|
+
{createInvitationUrl && (
|
|
69
|
+
<ControlFrameItem title='Add device'>
|
|
70
|
+
<DeviceInvitation createInvitationUrl={createInvitationUrl} />
|
|
73
71
|
</ControlFrameItem>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
title={t('
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
</
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<Button
|
|
107
|
-
variant='destructive'
|
|
108
|
-
onClick={handleJoinNewIdentity}
|
|
109
|
-
data-testid='devicesContainer.joinExisting'
|
|
110
|
-
>
|
|
111
|
-
{t('join new identity label')}
|
|
112
|
-
</Button>
|
|
113
|
-
</ControlItem>
|
|
114
|
-
</ControlGroup>
|
|
115
|
-
</ControlSection>
|
|
116
|
-
</ControlPage>
|
|
117
|
-
</StackItem.Content>
|
|
72
|
+
)}
|
|
73
|
+
</ControlFrame>
|
|
74
|
+
</ControlSection>
|
|
75
|
+
<ControlSection
|
|
76
|
+
title={t('danger zone title', { ns: meta.id })}
|
|
77
|
+
description={t('danger zone description', { ns: meta.id })}
|
|
78
|
+
>
|
|
79
|
+
<ControlGroup>
|
|
80
|
+
<ControlItem title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
|
|
81
|
+
<Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
|
|
82
|
+
{t('reset device label')}
|
|
83
|
+
</Button>
|
|
84
|
+
</ControlItem>
|
|
85
|
+
<ControlItem
|
|
86
|
+
title={t('recover identity label')}
|
|
87
|
+
description={t('recover identity description', { ns: meta.id })}
|
|
88
|
+
>
|
|
89
|
+
<Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
|
|
90
|
+
{t('recover identity label')}
|
|
91
|
+
</Button>
|
|
92
|
+
</ControlItem>
|
|
93
|
+
<ControlItem
|
|
94
|
+
title={t('join new identity label')}
|
|
95
|
+
description={t('join new identity description', { ns: meta.id })}
|
|
96
|
+
>
|
|
97
|
+
<Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
|
|
98
|
+
{t('join new identity label')}
|
|
99
|
+
</Button>
|
|
100
|
+
</ControlItem>
|
|
101
|
+
</ControlGroup>
|
|
102
|
+
</ControlSection>
|
|
103
|
+
</ControlPage>
|
|
118
104
|
</Clipboard.Provider>
|
|
119
105
|
);
|
|
120
106
|
};
|
|
@@ -189,7 +175,7 @@ const InvitationSection = ({
|
|
|
189
175
|
onInvitationDone = () => {},
|
|
190
176
|
onInvitationCreate = () => {},
|
|
191
177
|
}: InvitationComponentProps) => {
|
|
192
|
-
const { t } = useTranslation(
|
|
178
|
+
const { t } = useTranslation(meta.id);
|
|
193
179
|
const activeView =
|
|
194
180
|
state < 0
|
|
195
181
|
? 'init'
|
|
@@ -236,7 +222,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
|
|
|
236
222
|
const emoji = hexToEmoji(id);
|
|
237
223
|
return (
|
|
238
224
|
<>
|
|
239
|
-
<p className='text-description'>{t('qr code description', { ns:
|
|
225
|
+
<p className='text-description'>{t('qr code description', { ns: meta.id })}</p>
|
|
240
226
|
<div role='group' className='grid grid-cols-[1fr_min-content] mlb-2 gap-2'>
|
|
241
227
|
<div role='none' className='is-full aspect-square relative text-description'>
|
|
242
228
|
<QR
|
|
@@ -4,20 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
import React, { useCallback } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
|
|
8
8
|
import { ObservabilityAction } from '@dxos/plugin-observability/types';
|
|
9
9
|
import { type InvitationResult } from '@dxos/react-client/invitations';
|
|
10
10
|
import { Dialog, useTranslation } from '@dxos/react-ui';
|
|
11
11
|
import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
|
|
12
12
|
|
|
13
|
-
import {
|
|
13
|
+
import { meta } from '../meta';
|
|
14
14
|
import { ClientAction } from '../types';
|
|
15
15
|
|
|
16
|
-
export const JOIN_DIALOG = `${
|
|
16
|
+
export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
|
|
17
17
|
|
|
18
18
|
export const JoinDialog = (props: JoinPanelProps) => {
|
|
19
19
|
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
20
|
-
const { t } = useTranslation(
|
|
20
|
+
const { t } = useTranslation(meta.id);
|
|
21
21
|
|
|
22
22
|
const handleCancelResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ShareIdentity)), [dispatch]);
|
|
23
23
|
|
|
@@ -2,28 +2,27 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@
|
|
6
|
-
|
|
7
|
-
import { type StoryObj, type Meta } from '@storybook/react-vite';
|
|
5
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
6
|
|
|
9
7
|
import { withClientProvider } from '@dxos/react-client/testing';
|
|
10
|
-
import { withTheme
|
|
8
|
+
import { withTheme } from '@dxos/react-ui/testing';
|
|
11
9
|
|
|
12
|
-
import { ProfileContainer } from './ProfileContainer';
|
|
13
10
|
import { translations } from '../translations';
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
import { ProfileContainer } from './ProfileContainer';
|
|
13
|
+
|
|
14
|
+
const meta = {
|
|
16
15
|
title: 'plugins/plugin-client/ProfileContainer',
|
|
17
16
|
component: ProfileContainer,
|
|
18
|
-
decorators: [withClientProvider({ createIdentity: true })
|
|
17
|
+
decorators: [withTheme, withClientProvider({ createIdentity: true })],
|
|
19
18
|
parameters: {
|
|
20
19
|
layout: 'fullscreen',
|
|
21
20
|
translations,
|
|
22
21
|
},
|
|
23
|
-
}
|
|
22
|
+
} satisfies Meta<typeof ProfileContainer>;
|
|
24
23
|
|
|
25
24
|
export default meta;
|
|
26
25
|
|
|
27
|
-
type Story = StoryObj<typeof
|
|
26
|
+
type Story = StoryObj<typeof meta>;
|
|
28
27
|
|
|
29
28
|
export const Default: Story = {};
|
|
@@ -10,18 +10,17 @@ import { useClient } from '@dxos/react-client';
|
|
|
10
10
|
import { type Identity, useIdentity } from '@dxos/react-client/halo';
|
|
11
11
|
import { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';
|
|
12
12
|
import {
|
|
13
|
-
Form,
|
|
14
|
-
type InputComponent,
|
|
15
13
|
ControlItem,
|
|
16
14
|
ControlItemInput,
|
|
17
|
-
ControlSection,
|
|
18
15
|
ControlPage,
|
|
16
|
+
ControlSection,
|
|
17
|
+
Form,
|
|
18
|
+
type InputComponent,
|
|
19
19
|
} from '@dxos/react-ui-form';
|
|
20
20
|
import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
|
|
21
|
-
import {
|
|
22
|
-
import { hexToHue, hexToEmoji } from '@dxos/util';
|
|
21
|
+
import { hexToEmoji, hexToHue } from '@dxos/util';
|
|
23
22
|
|
|
24
|
-
import {
|
|
23
|
+
import { meta } from '../meta';
|
|
25
24
|
|
|
26
25
|
// TODO(thure): Factor out?
|
|
27
26
|
const getDefaultHueValue = (identity: Identity | null) => hexToHue(identity?.identityKey.toHex() ?? '0');
|
|
@@ -30,7 +29,7 @@ const getHueValue = (identity: Identity | null) => identity?.profile?.data?.hue
|
|
|
30
29
|
const getEmojiValue = (identity: Identity | null) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
|
|
31
30
|
|
|
32
31
|
export const ProfileContainer = () => {
|
|
33
|
-
const { t } = useTranslation(
|
|
32
|
+
const { t } = useTranslation(meta.id);
|
|
34
33
|
const client = useClient();
|
|
35
34
|
const identity = useIdentity();
|
|
36
35
|
const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');
|
|
@@ -143,23 +142,21 @@ export const ProfileContainer = () => {
|
|
|
143
142
|
);
|
|
144
143
|
|
|
145
144
|
return (
|
|
146
|
-
<
|
|
147
|
-
<
|
|
148
|
-
<
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
</ControlPage>
|
|
162
|
-
</StackItem.Content>
|
|
145
|
+
<ControlPage>
|
|
146
|
+
<Clipboard.Provider>
|
|
147
|
+
<ControlSection title={t('profile label')} description={t('profile description')}>
|
|
148
|
+
<Form
|
|
149
|
+
schema={ProfileSchema}
|
|
150
|
+
values={values}
|
|
151
|
+
autoSave
|
|
152
|
+
onSave={handleSave}
|
|
153
|
+
Custom={customElements}
|
|
154
|
+
classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]'
|
|
155
|
+
outerSpacing={false}
|
|
156
|
+
/>
|
|
157
|
+
</ControlSection>
|
|
158
|
+
</Clipboard.Provider>
|
|
159
|
+
</ControlPage>
|
|
163
160
|
);
|
|
164
161
|
};
|
|
165
162
|
|
|
@@ -2,19 +2,18 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@
|
|
6
|
-
|
|
7
|
-
import { type StoryObj, type Meta } from '@storybook/react-vite';
|
|
5
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
6
|
import React, { useState } from 'react';
|
|
9
7
|
|
|
10
8
|
import { useClient } from '@dxos/react-client';
|
|
11
9
|
import { withClientProvider } from '@dxos/react-client/testing';
|
|
12
10
|
import { AlertDialog, useAsyncEffect } from '@dxos/react-ui';
|
|
13
|
-
import { withTheme
|
|
11
|
+
import { withTheme } from '@dxos/react-ui/testing';
|
|
14
12
|
|
|
15
|
-
import { RecoveryCodeDialog, type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
|
|
16
13
|
import { translations } from '../translations';
|
|
17
14
|
|
|
15
|
+
import { RecoveryCodeDialog } from './RecoveryCodeDialog';
|
|
16
|
+
|
|
18
17
|
const DefaultStory = () => {
|
|
19
18
|
const client = useClient();
|
|
20
19
|
const [recoveryCode, setRecoveryCode] = useState<string>();
|
|
@@ -32,19 +31,19 @@ const DefaultStory = () => {
|
|
|
32
31
|
);
|
|
33
32
|
};
|
|
34
33
|
|
|
35
|
-
const meta
|
|
34
|
+
const meta = {
|
|
36
35
|
title: 'plugins/plugin-client/RecoveryCodeDialog',
|
|
37
|
-
component: RecoveryCodeDialog,
|
|
36
|
+
component: RecoveryCodeDialog as any,
|
|
38
37
|
render: DefaultStory,
|
|
39
|
-
decorators: [withClientProvider({ createIdentity: true })
|
|
38
|
+
decorators: [withTheme, withClientProvider({ createIdentity: true })],
|
|
40
39
|
parameters: {
|
|
41
40
|
layout: 'fullscreen',
|
|
42
41
|
translations,
|
|
43
42
|
},
|
|
44
|
-
}
|
|
43
|
+
} satisfies Meta<typeof DefaultStory>;
|
|
45
44
|
|
|
46
45
|
export default meta;
|
|
47
46
|
|
|
48
|
-
type Story = StoryObj<
|
|
47
|
+
type Story = StoryObj<typeof meta>;
|
|
49
48
|
|
|
50
49
|
export const Default: Story = {};
|
|
@@ -6,16 +6,16 @@ import React, { useCallback, useState } from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { meta } from '../meta';
|
|
10
10
|
|
|
11
|
-
export const RECOVERY_CODE_DIALOG = `${
|
|
11
|
+
export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
|
|
12
12
|
|
|
13
13
|
export type RecoveryCodeDialogProps = {
|
|
14
14
|
code: string;
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
|
|
18
|
-
const { t } = useTranslation(
|
|
18
|
+
const { t } = useTranslation(meta.id);
|
|
19
19
|
const [confirmation, setConfirmation] = useState(false);
|
|
20
20
|
|
|
21
21
|
const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);
|
|
@@ -2,43 +2,41 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@
|
|
6
|
-
|
|
7
|
-
import { type StoryObj, type Meta } from '@storybook/react-vite';
|
|
5
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
6
|
|
|
9
7
|
import { IntentPlugin } from '@dxos/app-framework';
|
|
10
8
|
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
11
|
-
import { withTheme
|
|
9
|
+
import { withTheme } from '@dxos/react-ui/testing';
|
|
12
10
|
|
|
13
|
-
import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
|
|
14
11
|
import { ClientPlugin } from '../ClientPlugin';
|
|
15
12
|
import { translations } from '../translations';
|
|
16
13
|
|
|
17
|
-
|
|
14
|
+
import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
|
|
15
|
+
|
|
16
|
+
const meta = {
|
|
18
17
|
title: 'plugins/plugin-client/RecoveryCredentialsContainer',
|
|
19
18
|
component: RecoveryCredentialsContainer,
|
|
20
19
|
decorators: [
|
|
20
|
+
withTheme,
|
|
21
21
|
withPluginManager({
|
|
22
22
|
plugins: [
|
|
23
23
|
ClientPlugin({
|
|
24
|
-
onClientInitialized: async (
|
|
24
|
+
onClientInitialized: async ({ client }) => {
|
|
25
25
|
await client.halo.createIdentity();
|
|
26
26
|
},
|
|
27
27
|
}),
|
|
28
28
|
IntentPlugin(),
|
|
29
29
|
],
|
|
30
30
|
}),
|
|
31
|
-
withTheme,
|
|
32
|
-
withLayout(),
|
|
33
31
|
],
|
|
34
32
|
parameters: {
|
|
35
33
|
layout: 'fullscreen',
|
|
36
34
|
translations,
|
|
37
35
|
},
|
|
38
|
-
}
|
|
36
|
+
} satisfies Meta<typeof RecoveryCredentialsContainer>;
|
|
39
37
|
|
|
40
38
|
export default meta;
|
|
41
39
|
|
|
42
|
-
type Story = StoryObj<typeof
|
|
40
|
+
type Story = StoryObj<typeof meta>;
|
|
43
41
|
|
|
44
42
|
export const Default: Story = {};
|
|
@@ -6,17 +6,16 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
|
|
8
8
|
import { useCredentials } from '@dxos/react-client/halo';
|
|
9
|
-
import { Icon, IconButton, List, ListItem,
|
|
9
|
+
import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
|
|
10
10
|
import { ControlGroup, ControlItem, ControlPage, ControlSection } from '@dxos/react-ui-form';
|
|
11
|
-
import { StackItem } from '@dxos/react-ui-stack';
|
|
12
11
|
|
|
13
|
-
import {
|
|
12
|
+
import { meta } from '../meta';
|
|
14
13
|
import { ClientAction } from '../types';
|
|
15
14
|
|
|
16
|
-
export const MANAGE_CREDENTIALS_DIALOG = `${
|
|
15
|
+
export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
|
|
17
16
|
|
|
18
17
|
export const RecoveryCredentialsContainer = () => {
|
|
19
|
-
const { t } = useTranslation(
|
|
18
|
+
const { t } = useTranslation(meta.id);
|
|
20
19
|
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
21
20
|
const credentials = useCredentials();
|
|
22
21
|
const recoveryCredentials = credentials.filter(
|
|
@@ -24,50 +23,48 @@ export const RecoveryCredentialsContainer = () => {
|
|
|
24
23
|
);
|
|
25
24
|
|
|
26
25
|
return (
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
<
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
<Message.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
{
|
|
60
|
-
<ListItem.
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
</ControlPage>
|
|
71
|
-
</StackItem.Content>
|
|
26
|
+
<ControlPage>
|
|
27
|
+
<ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
|
|
28
|
+
<ControlGroup>
|
|
29
|
+
<ControlItem title={t('create passkey label')} description={t('create passkey description')}>
|
|
30
|
+
<IconButton
|
|
31
|
+
label={t('create passkey label')}
|
|
32
|
+
icon='ph--key--duotone'
|
|
33
|
+
variant='primary'
|
|
34
|
+
size={5}
|
|
35
|
+
onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
|
|
36
|
+
/>
|
|
37
|
+
</ControlItem>
|
|
38
|
+
<ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
|
|
39
|
+
<IconButton
|
|
40
|
+
label={t('create recovery code label')}
|
|
41
|
+
icon='ph--receipt--duotone'
|
|
42
|
+
variant='default'
|
|
43
|
+
size={5}
|
|
44
|
+
onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
|
|
45
|
+
/>
|
|
46
|
+
</ControlItem>
|
|
47
|
+
</ControlGroup>
|
|
48
|
+
</ControlSection>
|
|
49
|
+
<ControlSection title={t('credentials list label')}>
|
|
50
|
+
{recoveryCredentials.length < 1 ? (
|
|
51
|
+
<Message.Root valence='error' classNames='container-max-width'>
|
|
52
|
+
<Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
|
|
53
|
+
<Message.Content>{t('no credentials message')}</Message.Content>
|
|
54
|
+
</Message.Root>
|
|
55
|
+
) : (
|
|
56
|
+
<List classNames='container-max-width pli-2'>
|
|
57
|
+
{recoveryCredentials.map((credential) => (
|
|
58
|
+
<ListItem.Root key={credential.id?.toHex()}>
|
|
59
|
+
<ListItem.Endcap>
|
|
60
|
+
<Icon icon='ph--key--regular' size={5} />
|
|
61
|
+
</ListItem.Endcap>
|
|
62
|
+
<ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
|
|
63
|
+
</ListItem.Root>
|
|
64
|
+
))}
|
|
65
|
+
</List>
|
|
66
|
+
)}
|
|
67
|
+
</ControlSection>
|
|
68
|
+
</ControlPage>
|
|
72
69
|
);
|
|
73
70
|
};
|
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@
|
|
6
|
-
|
|
7
|
-
import { type StoryObj, type Meta } from '@storybook/react-vite';
|
|
5
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
6
|
import React from 'react';
|
|
9
7
|
|
|
10
8
|
import { IntentPlugin } from '@dxos/app-framework';
|
|
11
9
|
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
12
10
|
import { Dialog } from '@dxos/react-ui';
|
|
13
|
-
import { withTheme
|
|
11
|
+
import { withTheme } from '@dxos/react-ui/testing';
|
|
14
12
|
|
|
15
|
-
import {
|
|
13
|
+
import { ClientPlugin } from '../ClientPlugin';
|
|
16
14
|
import { translations } from '../translations';
|
|
17
15
|
|
|
16
|
+
import { ResetDialog, type ResetDialogProps } from './ResetDialog';
|
|
17
|
+
|
|
18
18
|
const Render = (props: ResetDialogProps) => {
|
|
19
19
|
return (
|
|
20
20
|
<Dialog.Root open>
|
|
@@ -25,26 +25,23 @@ const Render = (props: ResetDialogProps) => {
|
|
|
25
25
|
);
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const meta
|
|
28
|
+
const meta = {
|
|
29
29
|
title: 'plugins/plugin-client/ResetDialog',
|
|
30
30
|
component: ResetDialog,
|
|
31
31
|
render: Render,
|
|
32
32
|
decorators: [
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}),
|
|
36
|
-
withTheme,
|
|
37
|
-
withLayout(),
|
|
33
|
+
withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
|
|
34
|
+
withPluginManager({ plugins: [IntentPlugin(), ClientPlugin({})] }),
|
|
38
35
|
],
|
|
39
36
|
parameters: {
|
|
40
37
|
layout: 'fullscreen',
|
|
41
38
|
translations,
|
|
42
39
|
},
|
|
43
|
-
}
|
|
40
|
+
} satisfies Meta<typeof ResetDialog>;
|
|
44
41
|
|
|
45
42
|
export default meta;
|
|
46
43
|
|
|
47
|
-
type Story = StoryObj<
|
|
44
|
+
type Story = StoryObj<typeof meta>;
|
|
48
45
|
|
|
49
46
|
export const Default: Story = { args: { mode: 'reset storage' } };
|
|
50
47
|
|
|
@@ -4,20 +4,20 @@
|
|
|
4
4
|
|
|
5
5
|
import React, { useCallback } from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
|
|
8
8
|
import { useClient } from '@dxos/react-client';
|
|
9
9
|
import { Dialog, useTranslation } from '@dxos/react-ui';
|
|
10
10
|
import { ConfirmReset, type ConfirmResetProps } from '@dxos/shell/react';
|
|
11
11
|
|
|
12
|
-
import {
|
|
12
|
+
import { meta } from '../meta';
|
|
13
13
|
import { type ClientPluginOptions } from '../types';
|
|
14
14
|
|
|
15
|
-
export const RESET_DIALOG = `${
|
|
15
|
+
export const RESET_DIALOG = `${meta.id}/ResetDialog`;
|
|
16
16
|
|
|
17
17
|
export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> & Pick<ClientPluginOptions, 'onReset'>;
|
|
18
18
|
|
|
19
19
|
export const ResetDialog = ({ mode, onReset }: ResetDialogProps) => {
|
|
20
|
-
const { t } = useTranslation(
|
|
20
|
+
const { t } = useTranslation(meta.id);
|
|
21
21
|
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
22
22
|
const client = useClient();
|
|
23
23
|
|
package/src/events.ts
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
import { defineEvent } from '@dxos/app-framework';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { meta } from './meta';
|
|
8
8
|
|
|
9
9
|
export namespace ClientEvents {
|
|
10
|
-
export const ClientReady = defineEvent(`${
|
|
11
|
-
export const SetupSchema = defineEvent(`${
|
|
12
|
-
export const SetupMigration = defineEvent(`${
|
|
13
|
-
export const IdentityCreated = defineEvent(`${
|
|
14
|
-
export const SpacesReady = defineEvent(`${
|
|
10
|
+
export const ClientReady = defineEvent(`${meta.id}/event/client-ready`);
|
|
11
|
+
export const SetupSchema = defineEvent(`${meta.id}/event/setup-schema`);
|
|
12
|
+
export const SetupMigration = defineEvent(`${meta.id}/event/setup-migration`);
|
|
13
|
+
export const IdentityCreated = defineEvent(`${meta.id}/event/identity-created`);
|
|
14
|
+
export const SpacesReady = defineEvent(`${meta.id}/event/spaces-ready`);
|
|
15
15
|
}
|