@dxos/plugin-help 0.7.5-main.499c70c → 0.7.5-main.5ae2ba8
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-X4XWALX3.mjs +78 -0
- package/dist/lib/browser/app-graph-builder-X4XWALX3.mjs.map +7 -0
- package/dist/lib/browser/{chunk-RHSC3EWO.mjs → chunk-24E4WRKH.mjs} +2 -2
- package/dist/lib/browser/chunk-24E4WRKH.mjs.map +7 -0
- package/dist/lib/browser/{chunk-STC3ORFI.mjs → chunk-76XWX6N3.mjs} +3 -3
- package/dist/lib/browser/chunk-76XWX6N3.mjs.map +7 -0
- package/dist/lib/browser/chunk-C7PCVS5K.mjs +361 -0
- package/dist/lib/browser/chunk-C7PCVS5K.mjs.map +7 -0
- package/dist/lib/browser/chunk-GJTAQWB6.mjs +16 -0
- package/dist/lib/browser/chunk-GJTAQWB6.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +70 -484
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/meta.mjs +3 -3
- package/dist/lib/browser/react-root-4AV22UGT.mjs +34 -0
- package/dist/lib/browser/react-root-4AV22UGT.mjs.map +7 -0
- package/dist/lib/browser/react-surface-7S3NUVZH.mjs +36 -0
- package/dist/lib/browser/react-surface-7S3NUVZH.mjs.map +7 -0
- package/dist/lib/browser/state-SLKOTRHH.mjs +29 -0
- package/dist/lib/browser/state-SLKOTRHH.mjs.map +7 -0
- package/dist/lib/browser/types.mjs +2 -2
- package/dist/types/src/HelpPlugin.d.ts +2 -7
- package/dist/types/src/HelpPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/app-graph-builder.d.ts +181 -0
- package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -0
- package/dist/types/src/capabilities/capabilities.d.ts +10 -0
- package/dist/types/src/capabilities/capabilities.d.ts.map +1 -0
- package/dist/types/src/capabilities/index.d.ts +185 -0
- package/dist/types/src/capabilities/index.d.ts.map +1 -0
- package/dist/types/src/capabilities/react-root.d.ts +8 -0
- package/dist/types/src/capabilities/react-root.d.ts.map +1 -0
- package/dist/types/src/capabilities/react-surface.d.ts +4 -0
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -0
- package/dist/types/src/capabilities/state.d.ts +4 -0
- package/dist/types/src/capabilities/state.d.ts.map +1 -0
- package/dist/types/src/components/Shortcuts/Key.d.ts +1 -2
- package/dist/types/src/components/Shortcuts/Key.d.ts.map +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsDialog.d.ts +1 -2
- package/dist/types/src/components/Shortcuts/ShortcutsDialog.d.ts.map +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsHints.d.ts +1 -2
- package/dist/types/src/components/Shortcuts/ShortcutsHints.d.ts.map +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsList.d.ts +1 -2
- package/dist/types/src/components/Shortcuts/ShortcutsList.d.ts.map +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsSection.d.ts +1 -2
- package/dist/types/src/components/Shortcuts/ShortcutsSection.d.ts.map +1 -1
- package/dist/types/src/components/WelcomeTour/WelcomeTour.d.ts +8 -0
- package/dist/types/src/components/WelcomeTour/WelcomeTour.d.ts.map +1 -0
- package/dist/types/src/components/WelcomeTour/WelcomeTour.stories.d.ts +10 -0
- package/dist/types/src/components/WelcomeTour/WelcomeTour.stories.d.ts.map +1 -0
- package/dist/types/src/components/WelcomeTour/index.d.ts +2 -0
- package/dist/types/src/components/WelcomeTour/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useHelp.d.ts +1 -1
- package/dist/types/src/hooks/useHelp.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +4 -5
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +1 -2
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +2 -6
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +20 -26
- package/src/HelpPlugin.tsx +47 -127
- package/src/capabilities/app-graph-builder.ts +66 -0
- package/src/capabilities/capabilities.ts +13 -0
- package/src/capabilities/index.ts +12 -0
- package/src/capabilities/react-root.tsx +32 -0
- package/src/capabilities/react-surface.tsx +30 -0
- package/src/capabilities/state.ts +23 -0
- package/src/components/{HelpContextProvider/HelpContextProvider.stories.tsx → WelcomeTour/WelcomeTour.stories.tsx} +9 -8
- package/src/components/{HelpContextProvider/HelpContextProvider.tsx → WelcomeTour/WelcomeTour.tsx} +10 -16
- package/src/components/WelcomeTour/index.ts +5 -0
- package/src/components/index.ts +1 -1
- package/src/index.ts +4 -9
- package/src/meta.ts +1 -1
- package/src/types.ts +2 -10
- package/dist/lib/browser/chunk-RHSC3EWO.mjs.map +0 -7
- package/dist/lib/browser/chunk-STC3ORFI.mjs.map +0 -7
- package/dist/types/src/components/HelpContextProvider/HelpContextProvider.d.ts +0 -9
- package/dist/types/src/components/HelpContextProvider/HelpContextProvider.d.ts.map +0 -1
- package/dist/types/src/components/HelpContextProvider/HelpContextProvider.stories.d.ts +0 -10
- package/dist/types/src/components/HelpContextProvider/HelpContextProvider.stories.d.ts.map +0 -1
- package/dist/types/src/components/HelpContextProvider/index.d.ts +0 -2
- package/dist/types/src/components/HelpContextProvider/index.d.ts.map +0 -1
- package/src/components/HelpContextProvider/index.ts +0 -5
package/package.json
CHANGED
|
@@ -1,21 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-help",
|
|
3
|
-
"version": "0.7.5-main.
|
|
3
|
+
"version": "0.7.5-main.5ae2ba8",
|
|
4
4
|
"description": "Help plugin.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"author": "DXOS.org",
|
|
9
9
|
"sideEffects": true,
|
|
10
|
+
"type": "module",
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
12
13
|
"types": "./dist/types/src/index.d.ts",
|
|
13
14
|
"browser": "./dist/lib/browser/index.mjs"
|
|
14
15
|
},
|
|
15
|
-
"./meta": {
|
|
16
|
-
"types": "./dist/types/src/meta.d.ts",
|
|
17
|
-
"browser": "./dist/lib/browser/meta.mjs"
|
|
18
|
-
},
|
|
19
16
|
"./types": {
|
|
20
17
|
"types": "./dist/types/src/types.d.ts",
|
|
21
18
|
"browser": "./dist/lib/browser/types.mjs"
|
|
@@ -24,9 +21,6 @@
|
|
|
24
21
|
"types": "dist/types/src/index.d.ts",
|
|
25
22
|
"typesVersions": {
|
|
26
23
|
"*": {
|
|
27
|
-
"meta": [
|
|
28
|
-
"dist/types/src/meta.d.ts"
|
|
29
|
-
],
|
|
30
24
|
"types": [
|
|
31
25
|
"dist/types/src/types.d.ts"
|
|
32
26
|
]
|
|
@@ -37,20 +31,20 @@
|
|
|
37
31
|
"src"
|
|
38
32
|
],
|
|
39
33
|
"dependencies": {
|
|
40
|
-
"@fluentui/react-tabster": "
|
|
34
|
+
"@fluentui/react-tabster": "9.23.3",
|
|
41
35
|
"lodash.get": "^4.4.2",
|
|
42
36
|
"react-joyride": "^2.7.2",
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/live-object": "0.7.5-main.
|
|
48
|
-
"@dxos/keyboard": "0.7.5-main.
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/plugin-graph": "0.7.5-main.
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/
|
|
37
|
+
"@dxos/debug": "0.7.5-main.5ae2ba8",
|
|
38
|
+
"@dxos/app-framework": "0.7.5-main.5ae2ba8",
|
|
39
|
+
"@dxos/app-graph": "0.7.5-main.5ae2ba8",
|
|
40
|
+
"@dxos/echo-schema": "0.7.5-main.5ae2ba8",
|
|
41
|
+
"@dxos/live-object": "0.7.5-main.5ae2ba8",
|
|
42
|
+
"@dxos/keyboard": "0.7.5-main.5ae2ba8",
|
|
43
|
+
"@dxos/plugin-client": "0.7.5-main.5ae2ba8",
|
|
44
|
+
"@dxos/local-storage": "0.7.5-main.5ae2ba8",
|
|
45
|
+
"@dxos/plugin-graph": "0.7.5-main.5ae2ba8",
|
|
46
|
+
"@dxos/plugin-space": "0.7.5-main.5ae2ba8",
|
|
47
|
+
"@dxos/react-client": "0.7.5-main.5ae2ba8"
|
|
54
48
|
},
|
|
55
49
|
"devDependencies": {
|
|
56
50
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -62,17 +56,17 @@
|
|
|
62
56
|
"react-floater": "0.7.9",
|
|
63
57
|
"type-fest": "4.10.1",
|
|
64
58
|
"vite": "5.4.7",
|
|
65
|
-
"@dxos/random": "0.7.5-main.
|
|
66
|
-
"@dxos/react-ui": "0.7.5-main.
|
|
67
|
-
"@dxos/react-ui-theme": "0.7.5-main.
|
|
68
|
-
"@dxos/storybook-utils": "0.7.5-main.
|
|
59
|
+
"@dxos/random": "0.7.5-main.5ae2ba8",
|
|
60
|
+
"@dxos/react-ui": "0.7.5-main.5ae2ba8",
|
|
61
|
+
"@dxos/react-ui-theme": "0.7.5-main.5ae2ba8",
|
|
62
|
+
"@dxos/storybook-utils": "0.7.5-main.5ae2ba8"
|
|
69
63
|
},
|
|
70
64
|
"peerDependencies": {
|
|
71
65
|
"@phosphor-icons/react": "^2.1.5",
|
|
72
66
|
"react": "~18.2.0",
|
|
73
67
|
"react-dom": "~18.2.0",
|
|
74
|
-
"@dxos/react-ui-theme": "0.7.5-main.
|
|
75
|
-
"@dxos/react-ui": "0.7.5-main.
|
|
68
|
+
"@dxos/react-ui-theme": "0.7.5-main.5ae2ba8",
|
|
69
|
+
"@dxos/react-ui": "0.7.5-main.5ae2ba8"
|
|
76
70
|
},
|
|
77
71
|
"publishConfig": {
|
|
78
72
|
"access": "public"
|
package/src/HelpPlugin.tsx
CHANGED
|
@@ -2,136 +2,56 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import { createResolver, defineModule, definePlugin, Events, contributes, Capabilities } from '@dxos/app-framework';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
parseIntentPlugin,
|
|
11
|
-
LayoutAction,
|
|
12
|
-
createSurface,
|
|
13
|
-
createResolver,
|
|
14
|
-
createIntent,
|
|
15
|
-
} from '@dxos/app-framework';
|
|
16
|
-
import { createExtension, type Node } from '@dxos/app-graph';
|
|
17
|
-
import { create } from '@dxos/live-object';
|
|
18
|
-
import { LocalStorageStore } from '@dxos/local-storage';
|
|
19
|
-
|
|
20
|
-
import {
|
|
21
|
-
HelpContextProvider,
|
|
22
|
-
SHORTCUTS_DIALOG,
|
|
23
|
-
ShortcutsDialogContent,
|
|
24
|
-
ShortcutsHints,
|
|
25
|
-
ShortcutsList,
|
|
26
|
-
} from './components';
|
|
27
|
-
import meta, { HELP_PLUGIN } from './meta';
|
|
7
|
+
import { AppGraphBuilder, HelpState, ReactRoot, ReactSurface } from './capabilities';
|
|
8
|
+
import { HelpCapabilities } from './capabilities/capabilities';
|
|
9
|
+
import { meta } from './meta';
|
|
28
10
|
import translations from './translations';
|
|
29
|
-
import { type Step,
|
|
30
|
-
|
|
31
|
-
export type HelpSettingsProps = { showHints?: boolean; showWelcome?: boolean };
|
|
11
|
+
import { type Step, HelpAction } from './types';
|
|
32
12
|
|
|
33
13
|
export type HelpPluginOptions = { steps?: Step[] };
|
|
34
14
|
|
|
35
|
-
export const HelpPlugin = ({ steps = [] }: HelpPluginOptions)
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
filter: (node): node is Node<null> => node.id === 'root',
|
|
70
|
-
actions: () => [
|
|
71
|
-
{
|
|
72
|
-
id: HelpAction.Start._tag,
|
|
73
|
-
data: async () => {
|
|
74
|
-
settings.values.showHints = true;
|
|
75
|
-
await dispatch?.(createIntent(HelpAction.Start));
|
|
76
|
-
},
|
|
77
|
-
properties: {
|
|
78
|
-
label: ['open help tour', { ns: HELP_PLUGIN }],
|
|
79
|
-
icon: 'ph--info--regular',
|
|
80
|
-
keyBinding: {
|
|
81
|
-
macos: 'shift+meta+/',
|
|
82
|
-
// TODO(wittjosiah): Test on windows to see if it behaves the same as linux.
|
|
83
|
-
windows: 'shift+ctrl+/',
|
|
84
|
-
linux: 'shift+ctrl+?',
|
|
85
|
-
},
|
|
86
|
-
testId: 'helpPlugin.openHelp',
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
id: 'dxos.org/plugin/help/open-shortcuts',
|
|
91
|
-
data: async () => {
|
|
92
|
-
settings.values.showHints = true;
|
|
93
|
-
await dispatch?.(
|
|
94
|
-
createIntent(LayoutAction.SetLayout, { element: 'dialog', component: SHORTCUTS_DIALOG }),
|
|
95
|
-
);
|
|
96
|
-
},
|
|
97
|
-
properties: {
|
|
98
|
-
label: ['open shortcuts label', { ns: HELP_PLUGIN }],
|
|
99
|
-
icon: 'ph--keyboard--regular',
|
|
100
|
-
keyBinding: {
|
|
101
|
-
macos: 'meta+ctrl+/',
|
|
102
|
-
},
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
],
|
|
106
|
-
});
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
|
-
surface: {
|
|
110
|
-
definitions: () => [
|
|
111
|
-
createSurface({
|
|
112
|
-
id: `${HELP_PLUGIN}/hints`,
|
|
113
|
-
role: 'hints',
|
|
114
|
-
component: () => <ShortcutsHints />,
|
|
115
|
-
}),
|
|
116
|
-
createSurface({
|
|
117
|
-
id: `${HELP_PLUGIN}/keyshortcuts`,
|
|
118
|
-
role: 'keyshortcuts',
|
|
119
|
-
component: () => <ShortcutsList />,
|
|
120
|
-
}),
|
|
121
|
-
createSurface({
|
|
122
|
-
id: SHORTCUTS_DIALOG,
|
|
123
|
-
role: 'dialog',
|
|
124
|
-
filter: (data): data is any => data.component === SHORTCUTS_DIALOG,
|
|
125
|
-
component: () => <ShortcutsDialogContent />,
|
|
126
|
-
}),
|
|
127
|
-
],
|
|
128
|
-
},
|
|
129
|
-
intent: {
|
|
130
|
-
resolvers: () =>
|
|
131
|
-
createResolver(HelpAction.Start, () => {
|
|
132
|
-
state.running = true;
|
|
15
|
+
export const HelpPlugin = ({ steps = [] }: HelpPluginOptions) =>
|
|
16
|
+
definePlugin(meta, [
|
|
17
|
+
defineModule({
|
|
18
|
+
id: `${meta.id}/module/state`,
|
|
19
|
+
activatesOn: Events.Startup,
|
|
20
|
+
activate: HelpState,
|
|
21
|
+
}),
|
|
22
|
+
defineModule({
|
|
23
|
+
id: `${meta.id}/module/translations`,
|
|
24
|
+
activatesOn: Events.SetupTranslations,
|
|
25
|
+
activate: () => contributes(Capabilities.Translations, translations),
|
|
26
|
+
}),
|
|
27
|
+
defineModule({
|
|
28
|
+
id: `${meta.id}/module/react-root`,
|
|
29
|
+
activatesOn: Events.Startup,
|
|
30
|
+
activate: () => ReactRoot(steps),
|
|
31
|
+
}),
|
|
32
|
+
defineModule({
|
|
33
|
+
id: `${meta.id}/module/react-surface`,
|
|
34
|
+
activatesOn: Events.SetupReactSurface,
|
|
35
|
+
activate: ReactSurface,
|
|
36
|
+
}),
|
|
37
|
+
defineModule({
|
|
38
|
+
id: `${meta.id}/module/intent-resolver`,
|
|
39
|
+
activatesOn: Events.SetupIntentResolver,
|
|
40
|
+
activate: (context) =>
|
|
41
|
+
contributes(
|
|
42
|
+
Capabilities.IntentResolver,
|
|
43
|
+
createResolver({
|
|
44
|
+
intent: HelpAction.Start,
|
|
45
|
+
resolve: () => {
|
|
46
|
+
const state = context.requestCapability(HelpCapabilities.MutableState);
|
|
47
|
+
state.running = true;
|
|
48
|
+
},
|
|
133
49
|
}),
|
|
134
|
-
|
|
135
|
-
},
|
|
136
|
-
|
|
137
|
-
}
|
|
50
|
+
),
|
|
51
|
+
}),
|
|
52
|
+
defineModule({
|
|
53
|
+
id: `${meta.id}/module/app-graph-builder`,
|
|
54
|
+
activatesOn: Events.SetupAppGraph,
|
|
55
|
+
activate: AppGraphBuilder,
|
|
56
|
+
}),
|
|
57
|
+
]);
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
|
|
6
|
+
import { createExtension, type Node } from '@dxos/app-graph';
|
|
7
|
+
|
|
8
|
+
import { HelpCapabilities } from './capabilities';
|
|
9
|
+
import { SHORTCUTS_DIALOG } from '../components';
|
|
10
|
+
import { HELP_PLUGIN } from '../meta';
|
|
11
|
+
import { HelpAction } from '../types';
|
|
12
|
+
|
|
13
|
+
export default (context: PluginsContext) =>
|
|
14
|
+
contributes(
|
|
15
|
+
Capabilities.AppGraphBuilder,
|
|
16
|
+
createExtension({
|
|
17
|
+
id: HELP_PLUGIN,
|
|
18
|
+
filter: (node): node is Node<null> => node.id === 'root',
|
|
19
|
+
actions: () => [
|
|
20
|
+
{
|
|
21
|
+
id: HelpAction.Start._tag,
|
|
22
|
+
data: async () => {
|
|
23
|
+
const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
|
|
24
|
+
const state = context.requestCapability(HelpCapabilities.MutableState);
|
|
25
|
+
state.showHints = true;
|
|
26
|
+
await dispatch(createIntent(HelpAction.Start));
|
|
27
|
+
},
|
|
28
|
+
properties: {
|
|
29
|
+
label: ['open help tour', { ns: HELP_PLUGIN }],
|
|
30
|
+
icon: 'ph--info--regular',
|
|
31
|
+
keyBinding: {
|
|
32
|
+
macos: 'shift+meta+/',
|
|
33
|
+
// TODO(wittjosiah): Test on windows to see if it behaves the same as linux.
|
|
34
|
+
windows: 'shift+ctrl+/',
|
|
35
|
+
linux: 'shift+ctrl+?',
|
|
36
|
+
},
|
|
37
|
+
testId: 'helpPlugin.openHelp',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
id: 'dxos.org/plugin/help/open-shortcuts',
|
|
42
|
+
data: async () => {
|
|
43
|
+
const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
|
|
44
|
+
const state = context.requestCapability(HelpCapabilities.MutableState);
|
|
45
|
+
state.showHints = true;
|
|
46
|
+
await dispatch(
|
|
47
|
+
createIntent(LayoutAction.UpdateDialog, {
|
|
48
|
+
part: 'dialog',
|
|
49
|
+
subject: SHORTCUTS_DIALOG,
|
|
50
|
+
options: {
|
|
51
|
+
blockAlign: 'center',
|
|
52
|
+
},
|
|
53
|
+
}),
|
|
54
|
+
);
|
|
55
|
+
},
|
|
56
|
+
properties: {
|
|
57
|
+
label: ['open shortcuts label', { ns: HELP_PLUGIN }],
|
|
58
|
+
icon: 'ph--keyboard--regular',
|
|
59
|
+
keyBinding: {
|
|
60
|
+
macos: 'meta+ctrl+/',
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}),
|
|
66
|
+
);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { defineCapability } from '@dxos/app-framework';
|
|
6
|
+
|
|
7
|
+
import { HELP_PLUGIN } from '../meta';
|
|
8
|
+
|
|
9
|
+
export namespace HelpCapabilities {
|
|
10
|
+
export type State = { running: boolean; showHints: boolean; showWelcome: boolean };
|
|
11
|
+
export const State = defineCapability<Readonly<State>>(`${HELP_PLUGIN}/capability/state`);
|
|
12
|
+
export const MutableState = defineCapability<State>(`${HELP_PLUGIN}/capability/state`);
|
|
13
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { lazy } from '@dxos/app-framework';
|
|
6
|
+
|
|
7
|
+
export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
|
|
8
|
+
export const ReactRoot = lazy(() => import('./react-root'));
|
|
9
|
+
export const ReactSurface = lazy(() => import('./react-surface'));
|
|
10
|
+
export const HelpState = lazy(() => import('./state'));
|
|
11
|
+
|
|
12
|
+
export * from './capabilities';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
import { Capabilities, contributes, useCapability } from '@dxos/app-framework';
|
|
8
|
+
|
|
9
|
+
import { HelpCapabilities } from './capabilities';
|
|
10
|
+
import { WelcomeTour } from '../components';
|
|
11
|
+
import { HELP_PLUGIN } from '../meta';
|
|
12
|
+
import { type Step } from '../types';
|
|
13
|
+
|
|
14
|
+
export default (steps: Step[]) =>
|
|
15
|
+
contributes(Capabilities.ReactRoot, {
|
|
16
|
+
id: HELP_PLUGIN,
|
|
17
|
+
root: () => {
|
|
18
|
+
const state = useCapability(HelpCapabilities.MutableState);
|
|
19
|
+
return (
|
|
20
|
+
<WelcomeTour
|
|
21
|
+
steps={steps}
|
|
22
|
+
running={state.running}
|
|
23
|
+
onRunningChanged={(newState) => {
|
|
24
|
+
state.running = newState;
|
|
25
|
+
if (!newState) {
|
|
26
|
+
state.showHints = false;
|
|
27
|
+
}
|
|
28
|
+
}}
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
},
|
|
32
|
+
});
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
|
|
8
|
+
|
|
9
|
+
import { SHORTCUTS_DIALOG, ShortcutsDialogContent, ShortcutsHints, ShortcutsList } from '../components';
|
|
10
|
+
import { HELP_PLUGIN } from '../meta';
|
|
11
|
+
|
|
12
|
+
export default () =>
|
|
13
|
+
contributes(Capabilities.ReactSurface, [
|
|
14
|
+
createSurface({
|
|
15
|
+
id: `${HELP_PLUGIN}/hints`,
|
|
16
|
+
role: 'hints',
|
|
17
|
+
component: () => <ShortcutsHints />,
|
|
18
|
+
}),
|
|
19
|
+
createSurface({
|
|
20
|
+
id: `${HELP_PLUGIN}/keyshortcuts`,
|
|
21
|
+
role: 'keyshortcuts',
|
|
22
|
+
component: () => <ShortcutsList />,
|
|
23
|
+
}),
|
|
24
|
+
createSurface({
|
|
25
|
+
id: SHORTCUTS_DIALOG,
|
|
26
|
+
role: 'dialog',
|
|
27
|
+
filter: (data): data is any => data.component === SHORTCUTS_DIALOG,
|
|
28
|
+
component: () => <ShortcutsDialogContent />,
|
|
29
|
+
}),
|
|
30
|
+
]);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { contributes } from '@dxos/app-framework';
|
|
6
|
+
import { LocalStorageStore } from '@dxos/local-storage';
|
|
7
|
+
|
|
8
|
+
import { HelpCapabilities } from './capabilities';
|
|
9
|
+
import { HELP_PLUGIN } from '../meta';
|
|
10
|
+
|
|
11
|
+
export default () => {
|
|
12
|
+
const state = new LocalStorageStore<HelpCapabilities.State>(HELP_PLUGIN, {
|
|
13
|
+
running: false,
|
|
14
|
+
showHints: true,
|
|
15
|
+
showWelcome: true,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
state
|
|
19
|
+
.prop({ key: 'showHints', type: LocalStorageStore.bool() })
|
|
20
|
+
.prop({ key: 'showWelcome', type: LocalStorageStore.bool() });
|
|
21
|
+
|
|
22
|
+
return contributes(HelpCapabilities.State, state.values);
|
|
23
|
+
};
|
|
@@ -12,7 +12,7 @@ import { faker } from '@dxos/random';
|
|
|
12
12
|
import { Button } from '@dxos/react-ui';
|
|
13
13
|
import { withTheme } from '@dxos/storybook-utils';
|
|
14
14
|
|
|
15
|
-
import {
|
|
15
|
+
import { WelcomeTour, type WelcomeTourProps } from './WelcomeTour';
|
|
16
16
|
import { useHelp } from '../../hooks';
|
|
17
17
|
|
|
18
18
|
const App = () => {
|
|
@@ -57,18 +57,19 @@ const App = () => {
|
|
|
57
57
|
);
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
const DefaultStory = ({ steps = [] }:
|
|
61
|
-
|
|
60
|
+
const DefaultStory = ({ steps = [] }: WelcomeTourProps) => (
|
|
61
|
+
<>
|
|
62
|
+
<WelcomeTour steps={steps} />
|
|
62
63
|
<div className='fixed inset-0 overflow-hidden'>
|
|
63
64
|
<App />
|
|
64
65
|
</div>
|
|
65
|
-
|
|
66
|
+
</>
|
|
66
67
|
);
|
|
67
68
|
|
|
68
69
|
// TODO(burdon): Tour should prompt user to create a Stack -- and respond to it being created.
|
|
69
70
|
// Use beacon to simulate click.
|
|
70
71
|
|
|
71
|
-
export const Default: StoryObj<typeof
|
|
72
|
+
export const Default: StoryObj<typeof WelcomeTour> = {
|
|
72
73
|
args: {
|
|
73
74
|
// https://docs.react-joyride.com/step#options
|
|
74
75
|
steps: [
|
|
@@ -103,9 +104,9 @@ export const Default: StoryObj<typeof HelpContextProvider> = {
|
|
|
103
104
|
/**
|
|
104
105
|
* IMPORTANT: Run in separate tab.
|
|
105
106
|
*/
|
|
106
|
-
const meta: Meta<typeof
|
|
107
|
-
title: 'plugins/plugin-help/
|
|
108
|
-
component:
|
|
107
|
+
const meta: Meta<typeof WelcomeTour> = {
|
|
108
|
+
title: 'plugins/plugin-help/WelcomeTour',
|
|
109
|
+
component: WelcomeTour,
|
|
109
110
|
render: DefaultStory,
|
|
110
111
|
decorators: [withTheme],
|
|
111
112
|
};
|
package/src/components/{HelpContextProvider/HelpContextProvider.tsx → WelcomeTour/WelcomeTour.tsx}
RENAMED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, {
|
|
5
|
+
import React, { useState, useEffect } from 'react';
|
|
6
6
|
import Joyride, { ACTIONS, EVENTS } from 'react-joyride';
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { usePluginManager, useLayout } from '@dxos/app-framework';
|
|
9
9
|
|
|
10
10
|
import { type Step, HelpContext } from '../../types';
|
|
11
11
|
import { floaterProps, Tooltip } from '../Tooltip';
|
|
@@ -57,30 +57,25 @@ const waitForTarget = async (step: Step) => {
|
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
export type
|
|
60
|
+
export type WelcomeTourProps = {
|
|
61
61
|
steps: Step[];
|
|
62
62
|
running?: boolean;
|
|
63
63
|
onRunningChanged?: (state: boolean) => any;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
running: runningProp,
|
|
70
|
-
onRunningChanged,
|
|
71
|
-
}: HelpContextProviderProps) => {
|
|
72
|
-
const { plugins } = usePlugins();
|
|
73
|
-
const layoutPlugin = resolvePlugin(plugins, parseLayoutPlugin);
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export const WelcomeTour = ({ steps: initialSteps, running: runningProp, onRunningChanged }: WelcomeTourProps) => {
|
|
67
|
+
const manager = usePluginManager();
|
|
68
|
+
const layout = useLayout();
|
|
74
69
|
const [running, setRunning] = useState(!!runningProp && !!getTarget(initialSteps[0]));
|
|
75
70
|
const [stepIndex, _setStepIndex] = useState(0);
|
|
76
71
|
const [steps, setSteps] = useState(initialSteps);
|
|
77
72
|
|
|
78
|
-
const paused =
|
|
73
|
+
const paused = layout.dialogOpen;
|
|
79
74
|
|
|
80
75
|
const setStepIndex = (index: number) => {
|
|
81
76
|
if (runningProp) {
|
|
82
77
|
const step = steps[index];
|
|
83
|
-
step?.before?.(
|
|
78
|
+
step?.before?.(manager.context);
|
|
84
79
|
}
|
|
85
80
|
_setStepIndex(index);
|
|
86
81
|
};
|
|
@@ -170,7 +165,6 @@ export const HelpContextProvider = ({
|
|
|
170
165
|
floaterProps={floaterProps}
|
|
171
166
|
tooltipComponent={Tooltip}
|
|
172
167
|
/>
|
|
173
|
-
{children}
|
|
174
168
|
</HelpContext.Provider>
|
|
175
169
|
);
|
|
176
170
|
};
|
package/src/components/index.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -2,14 +2,9 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
import { type Step } from './types';
|
|
7
|
-
|
|
8
|
-
export type { Step };
|
|
9
|
-
|
|
5
|
+
export { HelpCapabilities } from './capabilities';
|
|
10
6
|
export * from './components';
|
|
11
|
-
export * from './
|
|
12
|
-
|
|
7
|
+
export * from './meta';
|
|
13
8
|
export * from './HelpPlugin';
|
|
14
|
-
|
|
15
|
-
export
|
|
9
|
+
export * from './hooks';
|
|
10
|
+
export * from './types';
|
package/src/meta.ts
CHANGED
package/src/types.ts
CHANGED
|
@@ -5,19 +5,13 @@
|
|
|
5
5
|
import { type Context, createContext } from 'react';
|
|
6
6
|
import { type Step as BaseStep } from 'react-joyride';
|
|
7
7
|
|
|
8
|
-
import {
|
|
9
|
-
type Plugin,
|
|
10
|
-
type GraphBuilderProvides,
|
|
11
|
-
type IntentResolverProvides,
|
|
12
|
-
type SurfaceProvides,
|
|
13
|
-
type TranslationsProvides,
|
|
14
|
-
} from '@dxos/app-framework';
|
|
8
|
+
import { type PluginsContext } from '@dxos/app-framework';
|
|
15
9
|
import { S } from '@dxos/echo-schema';
|
|
16
10
|
|
|
17
11
|
import { HELP_PLUGIN } from './meta';
|
|
18
12
|
|
|
19
13
|
export type Step = BaseStep & {
|
|
20
|
-
before?: (context:
|
|
14
|
+
before?: (context: PluginsContext) => void;
|
|
21
15
|
};
|
|
22
16
|
|
|
23
17
|
export type HelpContextType = {
|
|
@@ -38,8 +32,6 @@ export const HelpContext: Context<HelpContextType> = createContext<HelpContextTy
|
|
|
38
32
|
stop: () => {},
|
|
39
33
|
});
|
|
40
34
|
|
|
41
|
-
export type HelpPluginProvides = GraphBuilderProvides & IntentResolverProvides & SurfaceProvides & TranslationsProvides;
|
|
42
|
-
|
|
43
35
|
export const HELP_ACTION = `${HELP_PLUGIN}/action`;
|
|
44
36
|
export namespace HelpAction {
|
|
45
37
|
export class Start extends S.TaggedClass<Start>()(`${HELP_ACTION}/start`, {
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Context, createContext } from 'react';\nimport { type Step as BaseStep } from 'react-joyride';\n\nimport {\n type Plugin,\n type GraphBuilderProvides,\n type IntentResolverProvides,\n type SurfaceProvides,\n type TranslationsProvides,\n} from '@dxos/app-framework';\nimport { S } from '@dxos/echo-schema';\n\nimport { HELP_PLUGIN } from './meta';\n\nexport type Step = BaseStep & {\n before?: (context: { plugins: Plugin[]; step: Step }) => void;\n};\n\nexport type HelpContextType = {\n running: boolean;\n steps: Step[];\n setSteps: (steps: Step[]) => void;\n setIndex: (index: number) => void;\n start: () => void;\n stop: () => void;\n};\n\nexport const HelpContext: Context<HelpContextType> = createContext<HelpContextType>({\n running: false,\n steps: [],\n setSteps: () => {},\n setIndex: () => {},\n start: () => {},\n stop: () => {},\n});\n\nexport type HelpPluginProvides = GraphBuilderProvides & IntentResolverProvides & SurfaceProvides & TranslationsProvides;\n\nexport const HELP_ACTION = `${HELP_PLUGIN}/action`;\nexport namespace HelpAction {\n export class Start extends S.TaggedClass<Start>()(`${HELP_ACTION}/start`, {\n input: S.Void,\n output: S.Void,\n }) {}\n}\n"],
|
|
5
|
-
"mappings": ";;;;;AAIA,SAAuBA,qBAAqB;AAU5C,SAASC,SAAS;AAiBX,IAAMC,cAAwCC,cAA+B;EAClFC,SAAS;EACTC,OAAO,CAAA;EACPC,UAAU,MAAA;EAAO;EACjBC,UAAU,MAAA;EAAO;EACjBC,OAAO,MAAA;EAAO;EACdC,MAAM,MAAA;EAAO;AACf,CAAA;AAIO,IAAMC,cAAc,GAAGC,WAAAA;;UACbC,aAAAA;EACR,MAAMC,cAAcC,EAAEC,YAAW,EAAU,GAAGL,WAAAA,UAAqB;IACxEM,OAAOF,EAAEG;IACTC,QAAQJ,EAAEG;EACZ,CAAA,EAAA;EAAI;cAHSJ,QAAAA;AAIf,GALiBD,eAAAA,aAAAA,CAAAA,EAAAA;",
|
|
6
|
-
"names": ["createContext", "S", "HelpContext", "createContext", "running", "steps", "setSteps", "setIndex", "start", "stop", "HELP_ACTION", "HELP_PLUGIN", "HelpAction", "Start", "S", "TaggedClass", "input", "Void", "output"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\n// TODO(burdon): Rename Guide? Help?\nexport const HELP_PLUGIN = 'dxos.org/plugin/help';\n\nexport default {\n id: HELP_PLUGIN,\n name: 'Help',\n icon: 'ph--info--regular',\n} satisfies PluginMeta;\n"],
|
|
5
|
-
"mappings": ";AAOO,IAAMA,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;EACNC,MAAM;AACR;",
|
|
6
|
-
"names": ["HELP_PLUGIN", "id", "name", "icon"]
|
|
7
|
-
}
|