@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.
Files changed (149) hide show
  1. package/dist/lib/browser/{app-graph-builder-JNIES5L4.mjs → app-graph-builder-VTPUWIBC.mjs} +19 -19
  2. package/dist/lib/browser/app-graph-builder-VTPUWIBC.mjs.map +7 -0
  3. package/dist/lib/browser/{chunk-SV3MHIKI.mjs → chunk-PEZKWJ62.mjs} +37 -46
  4. package/dist/lib/browser/chunk-PEZKWJ62.mjs.map +7 -0
  5. package/dist/lib/browser/chunk-PFY3EQPI.mjs +18 -0
  6. package/dist/lib/browser/chunk-PFY3EQPI.mjs.map +7 -0
  7. package/dist/lib/browser/chunk-QB3D2P4J.mjs +10 -0
  8. package/dist/lib/browser/chunk-QB3D2P4J.mjs.map +7 -0
  9. package/dist/lib/browser/{chunk-RMHBOY3Y.mjs → chunk-V4KRRGSK.mjs} +2 -2
  10. package/dist/lib/browser/{chunk-RMHBOY3Y.mjs.map → chunk-V4KRRGSK.mjs.map} +2 -2
  11. package/dist/lib/browser/chunk-VTC4GIND.mjs +19 -0
  12. package/dist/lib/browser/chunk-VTC4GIND.mjs.map +7 -0
  13. package/dist/lib/browser/{client-SKVKXPLY.mjs → client-5PWEJ3U6.mjs} +14 -8
  14. package/dist/lib/browser/client-5PWEJ3U6.mjs.map +7 -0
  15. package/dist/lib/browser/index.mjs +23 -19
  16. package/dist/lib/browser/index.mjs.map +4 -4
  17. package/dist/lib/browser/{intent-resolver-LNPLD5CA.mjs → intent-resolver-KHLH34SU.mjs} +16 -16
  18. package/dist/lib/browser/intent-resolver-KHLH34SU.mjs.map +7 -0
  19. package/dist/lib/browser/meta.json +1 -1
  20. package/dist/lib/browser/{migrations-D76RCG72.mjs → migrations-MWQCO5KY.mjs} +5 -5
  21. package/dist/lib/{node-esm/migrations-YISDI7LF.mjs.map → browser/migrations-MWQCO5KY.mjs.map} +2 -2
  22. package/dist/lib/browser/{react-context-YWVPZUMU.mjs → react-context-S4SRYUVY.mjs} +7 -7
  23. package/dist/lib/browser/react-context-S4SRYUVY.mjs.map +7 -0
  24. package/dist/lib/browser/{react-surface-QFZTDNLS.mjs → react-surface-R4LOX36S.mjs} +7 -7
  25. package/dist/lib/browser/{react-surface-QFZTDNLS.mjs.map → react-surface-R4LOX36S.mjs.map} +3 -3
  26. package/dist/lib/browser/{schema-defs-HKW6VNZB.mjs → schema-defs-E3USCMH3.mjs} +5 -5
  27. package/dist/lib/{node-esm/schema-defs-5ZNI63RW.mjs.map → browser/schema-defs-E3USCMH3.mjs.map} +2 -2
  28. package/dist/lib/browser/types/index.mjs +2 -2
  29. package/dist/lib/node-esm/{app-graph-builder-SWFB4FID.mjs → app-graph-builder-AUWZ3ST2.mjs} +19 -19
  30. package/dist/lib/node-esm/app-graph-builder-AUWZ3ST2.mjs.map +7 -0
  31. package/dist/lib/node-esm/{chunk-FBYODKEL.mjs → chunk-4SRRA6RS.mjs} +37 -46
  32. package/dist/lib/node-esm/chunk-4SRRA6RS.mjs.map +7 -0
  33. package/dist/lib/node-esm/chunk-K5IFPSCL.mjs +20 -0
  34. package/dist/lib/node-esm/chunk-K5IFPSCL.mjs.map +7 -0
  35. package/dist/lib/node-esm/{chunk-SZLX4BVJ.mjs → chunk-QE4LPI2A.mjs} +2 -4
  36. package/dist/lib/node-esm/chunk-QE4LPI2A.mjs.map +7 -0
  37. package/dist/lib/node-esm/{chunk-5V3RCXZV.mjs → chunk-TCOCW5ON.mjs} +2 -2
  38. package/dist/lib/node-esm/{chunk-5V3RCXZV.mjs.map → chunk-TCOCW5ON.mjs.map} +2 -2
  39. package/dist/lib/node-esm/chunk-UYDFBGYA.mjs +19 -0
  40. package/dist/lib/node-esm/chunk-UYDFBGYA.mjs.map +7 -0
  41. package/dist/lib/node-esm/{client-SLL6GDC2.mjs → client-ODN7EBTY.mjs} +14 -8
  42. package/dist/lib/node-esm/client-ODN7EBTY.mjs.map +7 -0
  43. package/dist/lib/node-esm/index.mjs +23 -19
  44. package/dist/lib/node-esm/index.mjs.map +4 -4
  45. package/dist/lib/node-esm/{intent-resolver-L7C6YRWV.mjs → intent-resolver-BJONA2UZ.mjs} +16 -16
  46. package/dist/lib/node-esm/intent-resolver-BJONA2UZ.mjs.map +7 -0
  47. package/dist/lib/node-esm/meta.json +1 -1
  48. package/dist/lib/node-esm/{migrations-YISDI7LF.mjs → migrations-ARXHGBH5.mjs} +5 -5
  49. package/dist/lib/{browser/migrations-D76RCG72.mjs.map → node-esm/migrations-ARXHGBH5.mjs.map} +2 -2
  50. package/dist/lib/node-esm/{react-context-EEHS4S3L.mjs → react-context-4SZYNSIS.mjs} +7 -7
  51. package/dist/lib/node-esm/react-context-4SZYNSIS.mjs.map +7 -0
  52. package/dist/lib/node-esm/{react-surface-2K6W37R4.mjs → react-surface-VPJTF75H.mjs} +7 -7
  53. package/dist/lib/node-esm/{react-surface-2K6W37R4.mjs.map → react-surface-VPJTF75H.mjs.map} +3 -3
  54. package/dist/lib/node-esm/{schema-defs-5ZNI63RW.mjs → schema-defs-ATH5YBDR.mjs} +5 -5
  55. package/dist/lib/{browser/schema-defs-HKW6VNZB.mjs.map → node-esm/schema-defs-ATH5YBDR.mjs.map} +2 -2
  56. package/dist/lib/node-esm/types/index.mjs +2 -2
  57. package/dist/types/src/ClientPlugin.d.ts +1 -1
  58. package/dist/types/src/ClientPlugin.d.ts.map +1 -1
  59. package/dist/types/src/capabilities/app-graph-builder.d.ts +1 -1
  60. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  61. package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
  62. package/dist/types/src/capabilities/client.d.ts +1 -1
  63. package/dist/types/src/capabilities/client.d.ts.map +1 -1
  64. package/dist/types/src/capabilities/index.d.ts +10 -10
  65. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  66. package/dist/types/src/capabilities/intent-resolver.d.ts +1 -1
  67. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
  68. package/dist/types/src/capabilities/migrations.d.ts +1 -1
  69. package/dist/types/src/capabilities/migrations.d.ts.map +1 -1
  70. package/dist/types/src/capabilities/react-context.d.ts +2 -2
  71. package/dist/types/src/capabilities/react-context.d.ts.map +1 -1
  72. package/dist/types/src/capabilities/react-surface.d.ts +1 -1
  73. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  74. package/dist/types/src/capabilities/schema-defs.d.ts +1 -1
  75. package/dist/types/src/capabilities/schema-defs.d.ts.map +1 -1
  76. package/dist/types/src/components/DevicesContainer.d.ts.map +1 -1
  77. package/dist/types/src/components/DevicesContainer.stories.d.ts +224 -5
  78. package/dist/types/src/components/DevicesContainer.stories.d.ts.map +1 -1
  79. package/dist/types/src/components/JoinDialog.d.ts +1 -1
  80. package/dist/types/src/components/JoinDialog.d.ts.map +1 -1
  81. package/dist/types/src/components/ProfileContainer.d.ts.map +1 -1
  82. package/dist/types/src/components/ProfileContainer.stories.d.ts +57 -5
  83. package/dist/types/src/components/ProfileContainer.stories.d.ts.map +1 -1
  84. package/dist/types/src/components/RecoveryCodeDialog.d.ts +1 -1
  85. package/dist/types/src/components/RecoveryCodeDialog.d.ts.map +1 -1
  86. package/dist/types/src/components/RecoveryCodeDialog.stories.d.ts +59 -5
  87. package/dist/types/src/components/RecoveryCodeDialog.stories.d.ts.map +1 -1
  88. package/dist/types/src/components/RecoveryCredentialsContainer.d.ts +1 -1
  89. package/dist/types/src/components/RecoveryCredentialsContainer.d.ts.map +1 -1
  90. package/dist/types/src/components/RecoveryCredentialsContainer.stories.d.ts +57 -5
  91. package/dist/types/src/components/RecoveryCredentialsContainer.stories.d.ts.map +1 -1
  92. package/dist/types/src/components/ResetDialog.d.ts +1 -1
  93. package/dist/types/src/components/ResetDialog.d.ts.map +1 -1
  94. package/dist/types/src/components/ResetDialog.stories.d.ts +59 -4
  95. package/dist/types/src/components/ResetDialog.stories.d.ts.map +1 -1
  96. package/dist/types/src/events.d.ts.map +1 -1
  97. package/dist/types/src/index.d.ts +3 -2
  98. package/dist/types/src/index.d.ts.map +1 -1
  99. package/dist/types/src/meta.d.ts +0 -1
  100. package/dist/types/src/meta.d.ts.map +1 -1
  101. package/dist/types/src/types/schema.d.ts +9 -3
  102. package/dist/types/src/types/schema.d.ts.map +1 -1
  103. package/dist/types/tsconfig.tsbuildinfo +1 -1
  104. package/package.json +39 -39
  105. package/src/ClientPlugin.ts +57 -59
  106. package/src/capabilities/app-graph-builder.ts +16 -15
  107. package/src/capabilities/capabilities.ts +5 -5
  108. package/src/capabilities/client.ts +6 -4
  109. package/src/capabilities/intent-resolver.ts +5 -4
  110. package/src/capabilities/migrations.ts +1 -1
  111. package/src/capabilities/react-context.tsx +3 -2
  112. package/src/capabilities/react-surface.tsx +3 -3
  113. package/src/capabilities/schema-defs.ts +1 -1
  114. package/src/components/DevicesContainer.stories.tsx +9 -11
  115. package/src/components/DevicesContainer.tsx +54 -68
  116. package/src/components/JoinDialog.tsx +4 -4
  117. package/src/components/ProfileContainer.stories.tsx +8 -9
  118. package/src/components/ProfileContainer.tsx +21 -24
  119. package/src/components/RecoveryCodeDialog.stories.tsx +9 -10
  120. package/src/components/RecoveryCodeDialog.tsx +3 -3
  121. package/src/components/RecoveryCredentialsContainer.stories.tsx +9 -11
  122. package/src/components/RecoveryCredentialsContainer.tsx +47 -50
  123. package/src/components/ResetDialog.stories.tsx +10 -13
  124. package/src/components/ResetDialog.tsx +4 -4
  125. package/src/events.ts +6 -6
  126. package/src/index.ts +4 -3
  127. package/src/meta.ts +1 -3
  128. package/src/types/schema.ts +3 -3
  129. package/dist/lib/browser/app-graph-builder-JNIES5L4.mjs.map +0 -7
  130. package/dist/lib/browser/chunk-3F2Q2RKC.mjs +0 -18
  131. package/dist/lib/browser/chunk-3F2Q2RKC.mjs.map +0 -7
  132. package/dist/lib/browser/chunk-CAF2COXW.mjs +0 -19
  133. package/dist/lib/browser/chunk-CAF2COXW.mjs.map +0 -7
  134. package/dist/lib/browser/chunk-GS3LDHYD.mjs +0 -12
  135. package/dist/lib/browser/chunk-GS3LDHYD.mjs.map +0 -7
  136. package/dist/lib/browser/chunk-SV3MHIKI.mjs.map +0 -7
  137. package/dist/lib/browser/client-SKVKXPLY.mjs.map +0 -7
  138. package/dist/lib/browser/intent-resolver-LNPLD5CA.mjs.map +0 -7
  139. package/dist/lib/browser/react-context-YWVPZUMU.mjs.map +0 -7
  140. package/dist/lib/node-esm/app-graph-builder-SWFB4FID.mjs.map +0 -7
  141. package/dist/lib/node-esm/chunk-FBYODKEL.mjs.map +0 -7
  142. package/dist/lib/node-esm/chunk-IOGTQFLM.mjs +0 -19
  143. package/dist/lib/node-esm/chunk-IOGTQFLM.mjs.map +0 -7
  144. package/dist/lib/node-esm/chunk-SZLX4BVJ.mjs.map +0 -7
  145. package/dist/lib/node-esm/chunk-UMO3ETDV.mjs +0 -20
  146. package/dist/lib/node-esm/chunk-UMO3ETDV.mjs.map +0 -7
  147. package/dist/lib/node-esm/client-SLL6GDC2.mjs.map +0 -7
  148. package/dist/lib/node-esm/intent-resolver-L7C6YRWV.mjs.map +0 -7
  149. 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, Icon } from '@dxos/react-ui';
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 { CLIENT_PLUGIN } from '../meta';
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
- <StackItem.Content classNames='block overflow-y-auto'>
55
- <ControlPage>
56
- <ControlSection
57
- title={t('devices verbose label', { ns: CLIENT_PLUGIN })}
58
- description={t('devices description', { ns: CLIENT_PLUGIN })}
59
- >
60
- <ControlFrame>
61
- <ControlFrameItem title={t('devices label', { ns: CLIENT_PLUGIN })}>
62
- <List>
63
- {devices.map((device: Device) => {
64
- return (
65
- <DeviceListItem
66
- key={device.deviceKey.toHex()}
67
- device={device}
68
- connectionState={connectionState}
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
- {createInvitationUrl && (
75
- <ControlFrameItem title='Add device'>
76
- <DeviceInvitation createInvitationUrl={createInvitationUrl} />
77
- </ControlFrameItem>
78
- )}
79
- </ControlFrame>
80
- </ControlSection>
81
- <ControlSection
82
- title={t('danger zone title', { ns: CLIENT_PLUGIN })}
83
- description={t('danger zone description', { ns: CLIENT_PLUGIN })}
84
- >
85
- <ControlGroup>
86
- <ControlItem
87
- title={t('reset device label')}
88
- description={t('reset device description', { ns: CLIENT_PLUGIN })}
89
- >
90
- <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
91
- {t('reset device label')}
92
- </Button>
93
- </ControlItem>
94
- <ControlItem
95
- title={t('recover identity label')}
96
- description={t('recover identity description', { ns: CLIENT_PLUGIN })}
97
- >
98
- <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
99
- {t('recover identity label')}
100
- </Button>
101
- </ControlItem>
102
- <ControlItem
103
- title={t('join new identity label')}
104
- description={t('join new identity description', { ns: CLIENT_PLUGIN })}
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(CLIENT_PLUGIN);
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: CLIENT_PLUGIN })}</p>
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 { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
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 { CLIENT_PLUGIN } from '../meta';
13
+ import { meta } from '../meta';
14
14
  import { ClientAction } from '../types';
15
15
 
16
- export const JOIN_DIALOG = `${CLIENT_PLUGIN}/JoinDialog`;
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(CLIENT_PLUGIN);
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 '@dxos-theme';
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, withLayout } from '@dxos/storybook-utils';
8
+ import { withTheme } from '@dxos/react-ui/testing';
11
9
 
12
- import { ProfileContainer } from './ProfileContainer';
13
10
  import { translations } from '../translations';
14
11
 
15
- const meta: Meta = {
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 }), withTheme, withLayout()],
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 ProfileContainer>;
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 { StackItem } from '@dxos/react-ui-stack';
22
- import { hexToHue, hexToEmoji } from '@dxos/util';
21
+ import { hexToEmoji, hexToHue } from '@dxos/util';
23
22
 
24
- import { CLIENT_PLUGIN } from '../meta';
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(CLIENT_PLUGIN);
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
- <StackItem.Content classNames='block overflow-y-auto'>
147
- <ControlPage>
148
- <Clipboard.Provider>
149
- <ControlSection title={t('profile label')} description={t('profile description')}>
150
- <Form
151
- schema={ProfileSchema}
152
- values={values}
153
- autoSave
154
- onSave={handleSave}
155
- Custom={customElements}
156
- classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
157
- outerSpacing={false}
158
- />
159
- </ControlSection>
160
- </Clipboard.Provider>
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 '@dxos-theme';
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, withLayout } from '@dxos/storybook-utils';
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: Meta<RecoveryCodeDialogProps> = {
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 }), withTheme, withLayout()],
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<RecoveryCodeDialogProps>;
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 { CLIENT_PLUGIN } from '../meta';
9
+ import { meta } from '../meta';
10
10
 
11
- export const RECOVERY_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
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(CLIENT_PLUGIN);
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 '@dxos-theme';
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, withLayout } from '@dxos/storybook-utils';
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
- const meta: Meta = {
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 (_, client) => {
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 RecoveryCredentialsContainer>;
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, useTranslation, Message } from '@dxos/react-ui';
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 { CLIENT_PLUGIN } from '../meta';
12
+ import { meta } from '../meta';
14
13
  import { ClientAction } from '../types';
15
14
 
16
- export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
15
+ export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
17
16
 
18
17
  export const RecoveryCredentialsContainer = () => {
19
- const { t } = useTranslation(CLIENT_PLUGIN);
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
- <StackItem.Content classNames='block overflow-y-auto'>
28
- <ControlPage>
29
- <ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
30
- <ControlGroup>
31
- <ControlItem title={t('create passkey label')} description={t('create passkey description')}>
32
- <IconButton
33
- label={t('create passkey label')}
34
- icon='ph--key--duotone'
35
- variant='primary'
36
- size={5}
37
- onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
38
- />
39
- </ControlItem>
40
- <ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
41
- <IconButton
42
- label={t('create recovery code label')}
43
- icon='ph--receipt--duotone'
44
- variant='default'
45
- size={5}
46
- onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
47
- />
48
- </ControlItem>
49
- </ControlGroup>
50
- </ControlSection>
51
- <ControlSection title={t('credentials list label')}>
52
- {recoveryCredentials.length < 1 ? (
53
- <Message.Root valence='error' classNames='container-max-width'>
54
- <Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
55
- <Message.Content>{t('no credentials message')}</Message.Content>
56
- </Message.Root>
57
- ) : (
58
- <List classNames='container-max-width pli-2'>
59
- {recoveryCredentials.map((credential) => (
60
- <ListItem.Root key={credential.id?.toHex()}>
61
- <ListItem.Endcap>
62
- <Icon icon='ph--key--regular' size={5} />
63
- </ListItem.Endcap>
64
- <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
65
- </ListItem.Root>
66
- ))}
67
- </List>
68
- )}
69
- </ControlSection>
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 '@dxos-theme';
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, withLayout } from '@dxos/storybook-utils';
11
+ import { withTheme } from '@dxos/react-ui/testing';
14
12
 
15
- import { ResetDialog, type ResetDialogProps } from './ResetDialog';
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: Meta<ResetDialogProps> = {
28
+ const meta = {
29
29
  title: 'plugins/plugin-client/ResetDialog',
30
30
  component: ResetDialog,
31
31
  render: Render,
32
32
  decorators: [
33
- withPluginManager({
34
- plugins: [IntentPlugin()],
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<ResetDialogProps>;
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 { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
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 { CLIENT_PLUGIN } from '../meta';
12
+ import { meta } from '../meta';
13
13
  import { type ClientPluginOptions } from '../types';
14
14
 
15
- export const RESET_DIALOG = `${CLIENT_PLUGIN}/ResetDialog`;
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(CLIENT_PLUGIN);
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 { CLIENT_PLUGIN } from './meta';
7
+ import { meta } from './meta';
8
8
 
9
9
  export namespace ClientEvents {
10
- export const ClientReady = defineEvent(`${CLIENT_PLUGIN}/event/client-ready`);
11
- export const SetupSchema = defineEvent(`${CLIENT_PLUGIN}/event/setup-schema`);
12
- export const SetupMigration = defineEvent(`${CLIENT_PLUGIN}/event/setup-migration`);
13
- export const IdentityCreated = defineEvent(`${CLIENT_PLUGIN}/event/identity-created`);
14
- export const SpacesReady = defineEvent(`${CLIENT_PLUGIN}/event/spaces-ready`);
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
  }