@dxos/plugin-help 0.8.4-main.84f28bd → 0.8.4-main.ae835ea
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-IXCF4ZDE.mjs → app-graph-builder-V35EXVG5.mjs} +16 -15
- package/dist/lib/browser/app-graph-builder-V35EXVG5.mjs.map +7 -0
- package/dist/lib/browser/chunk-AZJJLAG7.mjs +16 -0
- package/dist/lib/browser/chunk-AZJJLAG7.mjs.map +7 -0
- package/dist/lib/browser/chunk-BCYK4LXW.mjs +16 -0
- package/dist/lib/browser/chunk-BCYK4LXW.mjs.map +7 -0
- package/dist/lib/browser/{chunk-WAN2NFYE.mjs → chunk-I7FKM6VC.mjs} +6 -8
- package/dist/lib/browser/chunk-I7FKM6VC.mjs.map +7 -0
- package/dist/lib/browser/{chunk-27RZVOIE.mjs → chunk-RGVUINGG.mjs} +46 -47
- package/dist/lib/browser/chunk-RGVUINGG.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +10 -14
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/meta.mjs +1 -3
- package/dist/lib/browser/{react-root-A32LXEU4.mjs → react-root-7LMCJR73.mjs} +9 -9
- package/dist/lib/browser/react-root-7LMCJR73.mjs.map +7 -0
- package/dist/lib/browser/{react-surface-DIIOUUMT.mjs → react-surface-K3QAYZIQ.mjs} +9 -9
- package/dist/lib/browser/react-surface-K3QAYZIQ.mjs.map +7 -0
- package/dist/lib/browser/{state-FWUZG6NL.mjs → state-5PVJCYWJ.mjs} +7 -7
- package/dist/lib/browser/state-5PVJCYWJ.mjs.map +7 -0
- package/dist/lib/browser/types/index.mjs +10 -0
- package/dist/types/src/HelpPlugin.d.ts +1 -1
- package/dist/types/src/HelpPlugin.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/index.d.ts +5 -5
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-root.d.ts +2 -2
- package/dist/types/src/capabilities/react-root.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +1 -1
- package/dist/types/src/capabilities/state.d.ts +1 -1
- package/dist/types/src/capabilities/state.d.ts.map +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsDialog.d.ts +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsDialog.d.ts.map +1 -1
- package/dist/types/src/components/Shortcuts/ShortcutsList.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/src/components/WelcomeTour/WelcomeTour.d.ts.map +1 -1
- package/dist/types/src/components/WelcomeTour/WelcomeTour.stories.d.ts +9 -4
- package/dist/types/src/components/WelcomeTour/WelcomeTour.stories.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/index.d.ts +2 -0
- package/dist/types/src/types/index.d.ts.map +1 -0
- package/dist/types/src/{types.d.ts → types/schema.d.ts} +4 -5
- package/dist/types/src/types/schema.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +36 -34
- package/src/HelpPlugin.tsx +45 -47
- package/src/capabilities/app-graph-builder.ts +11 -9
- package/src/capabilities/capabilities.ts +3 -3
- package/src/capabilities/react-root.tsx +4 -3
- package/src/capabilities/react-surface.tsx +3 -3
- package/src/capabilities/state.ts +3 -2
- package/src/components/Shortcuts/ShortcutsDialog.tsx +4 -3
- package/src/components/Shortcuts/ShortcutsList.tsx +3 -2
- package/src/components/Tooltip/Tooltip.tsx +29 -27
- package/src/components/WelcomeTour/WelcomeTour.stories.tsx +14 -13
- package/src/components/WelcomeTour/WelcomeTour.tsx +15 -18
- package/src/meta.ts +6 -4
- package/src/types/index.ts +5 -0
- package/src/{types.ts → types/schema.ts} +3 -4
- package/dist/lib/browser/app-graph-builder-IXCF4ZDE.mjs.map +0 -7
- package/dist/lib/browser/chunk-27RZVOIE.mjs.map +0 -7
- package/dist/lib/browser/chunk-3Y4CMOZP.mjs +0 -13
- package/dist/lib/browser/chunk-3Y4CMOZP.mjs.map +0 -7
- package/dist/lib/browser/chunk-LDRUZNSN.mjs +0 -16
- package/dist/lib/browser/chunk-LDRUZNSN.mjs.map +0 -7
- package/dist/lib/browser/chunk-WAN2NFYE.mjs.map +0 -7
- package/dist/lib/browser/react-root-A32LXEU4.mjs.map +0 -7
- package/dist/lib/browser/react-surface-DIIOUUMT.mjs.map +0 -7
- package/dist/lib/browser/state-FWUZG6NL.mjs.map +0 -7
- package/dist/lib/browser/types.mjs +0 -12
- package/dist/lib/node-esm/app-graph-builder-5QQRWRWG.mjs +0 -80
- package/dist/lib/node-esm/app-graph-builder-5QQRWRWG.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-6JMO5FFN.mjs +0 -37
- package/dist/lib/node-esm/chunk-6JMO5FFN.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-CXQ5LKQI.mjs +0 -17
- package/dist/lib/node-esm/chunk-CXQ5LKQI.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-PU7X4MJO.mjs +0 -409
- package/dist/lib/node-esm/chunk-PU7X4MJO.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-T523OGIV.mjs +0 -15
- package/dist/lib/node-esm/chunk-T523OGIV.mjs.map +0 -7
- package/dist/lib/node-esm/index.mjs +0 -115
- package/dist/lib/node-esm/index.mjs.map +0 -7
- package/dist/lib/node-esm/meta.json +0 -1
- package/dist/lib/node-esm/meta.mjs +0 -10
- package/dist/lib/node-esm/meta.mjs.map +0 -7
- package/dist/lib/node-esm/react-root-Q6PGYYYP.mjs +0 -35
- package/dist/lib/node-esm/react-root-Q6PGYYYP.mjs.map +0 -7
- package/dist/lib/node-esm/react-surface-QEIKNNW3.mjs +0 -37
- package/dist/lib/node-esm/react-surface-QEIKNNW3.mjs.map +0 -7
- package/dist/lib/node-esm/state-Y476FGII.mjs +0 -30
- package/dist/lib/node-esm/state-Y476FGII.mjs.map +0 -7
- package/dist/lib/node-esm/types.mjs +0 -13
- package/dist/lib/node-esm/types.mjs.map +0 -7
- package/dist/types/src/types.d.ts.map +0 -1
- /package/dist/lib/browser/{types.mjs.map → types/index.mjs.map} +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-help",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.ae835ea",
|
|
4
4
|
"description": "Help plugin.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -10,16 +10,19 @@
|
|
|
10
10
|
"type": "module",
|
|
11
11
|
"exports": {
|
|
12
12
|
".": {
|
|
13
|
+
"source": "./src/index.ts",
|
|
13
14
|
"types": "./dist/types/src/index.d.ts",
|
|
14
15
|
"browser": "./dist/lib/browser/index.mjs"
|
|
15
16
|
},
|
|
16
17
|
"./meta": {
|
|
18
|
+
"source": "./src/meta.ts",
|
|
17
19
|
"types": "./dist/types/src/meta.d.ts",
|
|
18
20
|
"browser": "./dist/lib/browser/meta.mjs"
|
|
19
21
|
},
|
|
20
22
|
"./types": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
+
"source": "./src/types/index.ts",
|
|
24
|
+
"types": "./dist/types/src/types/index.d.ts",
|
|
25
|
+
"browser": "./dist/lib/browser/types/index.mjs"
|
|
23
26
|
}
|
|
24
27
|
},
|
|
25
28
|
"types": "dist/types/src/index.d.ts",
|
|
@@ -29,7 +32,7 @@
|
|
|
29
32
|
"dist/types/src/meta.d.ts"
|
|
30
33
|
],
|
|
31
34
|
"types": [
|
|
32
|
-
"dist/types/src/types.d.ts"
|
|
35
|
+
"dist/types/src/types/index.d.ts"
|
|
33
36
|
]
|
|
34
37
|
}
|
|
35
38
|
},
|
|
@@ -41,45 +44,44 @@
|
|
|
41
44
|
"@fluentui/react-tabster": "^9.24.2",
|
|
42
45
|
"@preact-signals/safe-react": "^0.9.0",
|
|
43
46
|
"react-joyride": "^2.7.2",
|
|
44
|
-
"@dxos/app-framework": "0.8.4-main.
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/echo": "0.8.4-main.
|
|
48
|
-
"@dxos/
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/plugin-
|
|
54
|
-
"@dxos/
|
|
55
|
-
"@dxos/
|
|
47
|
+
"@dxos/app-framework": "0.8.4-main.ae835ea",
|
|
48
|
+
"@dxos/debug": "0.8.4-main.ae835ea",
|
|
49
|
+
"@dxos/app-graph": "0.8.4-main.ae835ea",
|
|
50
|
+
"@dxos/echo": "0.8.4-main.ae835ea",
|
|
51
|
+
"@dxos/live-object": "0.8.4-main.ae835ea",
|
|
52
|
+
"@dxos/local-storage": "0.8.4-main.ae835ea",
|
|
53
|
+
"@dxos/plugin-client": "0.8.4-main.ae835ea",
|
|
54
|
+
"@dxos/plugin-graph": "0.8.4-main.ae835ea",
|
|
55
|
+
"@dxos/keyboard": "0.8.4-main.ae835ea",
|
|
56
|
+
"@dxos/plugin-space": "0.8.4-main.ae835ea",
|
|
57
|
+
"@dxos/react-client": "0.8.4-main.ae835ea",
|
|
58
|
+
"@dxos/util": "0.8.4-main.ae835ea"
|
|
56
59
|
},
|
|
57
60
|
"devDependencies": {
|
|
58
|
-
"@effect-rx/rx-react": "0.
|
|
59
|
-
"@effect/platform": "0.
|
|
60
|
-
"@
|
|
61
|
-
"@types/react": "~
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"react": "~
|
|
65
|
-
"react-dom": "~18.2.0",
|
|
61
|
+
"@effect-rx/rx-react": "0.42.4",
|
|
62
|
+
"@effect/platform": "0.92.1",
|
|
63
|
+
"@types/react": "~19.2.2",
|
|
64
|
+
"@types/react-dom": "~19.2.2",
|
|
65
|
+
"effect": "3.18.3",
|
|
66
|
+
"react": "~19.2.0",
|
|
67
|
+
"react-dom": "~19.2.0",
|
|
66
68
|
"react-floater": "0.7.9",
|
|
67
69
|
"type-fest": "4.10.1",
|
|
68
|
-
"vite": "
|
|
69
|
-
"@dxos/
|
|
70
|
-
"@dxos/
|
|
71
|
-
"@dxos/react-ui
|
|
72
|
-
"@dxos/
|
|
70
|
+
"vite": "7.1.9",
|
|
71
|
+
"@dxos/plugin-storybook-layout": "0.8.4-main.ae835ea",
|
|
72
|
+
"@dxos/random": "0.8.4-main.ae835ea",
|
|
73
|
+
"@dxos/react-ui": "0.8.4-main.ae835ea",
|
|
74
|
+
"@dxos/react-ui-theme": "0.8.4-main.ae835ea",
|
|
75
|
+
"@dxos/storybook-utils": "0.8.4-main.ae835ea"
|
|
73
76
|
},
|
|
74
77
|
"peerDependencies": {
|
|
75
78
|
"@effect-rx/rx-react": "^0.34.1",
|
|
76
79
|
"@effect/platform": "^0.80.12",
|
|
77
|
-
"@phosphor-icons/react": "^2.1.5",
|
|
78
80
|
"effect": "^3.13.3",
|
|
79
|
-
"react": "
|
|
80
|
-
"react-dom": "
|
|
81
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
82
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
81
|
+
"react": "^19.0.0",
|
|
82
|
+
"react-dom": "^19.0.0",
|
|
83
|
+
"@dxos/react-ui": "0.8.4-main.ae835ea",
|
|
84
|
+
"@dxos/react-ui-theme": "0.8.4-main.ae835ea"
|
|
83
85
|
},
|
|
84
86
|
"publishConfig": {
|
|
85
87
|
"access": "public"
|
package/src/HelpPlugin.tsx
CHANGED
|
@@ -2,56 +2,54 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { Capabilities, Events, contributes, createResolver, defineModule, definePlugin } from '@dxos/app-framework';
|
|
6
6
|
|
|
7
|
-
import { AppGraphBuilder, HelpState, ReactRoot, ReactSurface } from './capabilities';
|
|
8
|
-
import { HelpCapabilities } from './capabilities/capabilities';
|
|
7
|
+
import { AppGraphBuilder, HelpCapabilities, HelpState, ReactRoot, ReactSurface } from './capabilities';
|
|
9
8
|
import { meta } from './meta';
|
|
10
9
|
import { translations } from './translations';
|
|
11
|
-
import { type Step
|
|
10
|
+
import { HelpAction, type Step } from './types';
|
|
12
11
|
|
|
13
12
|
export type HelpPluginOptions = { steps?: Step[] };
|
|
14
13
|
|
|
15
|
-
export const HelpPlugin = ({ steps = [] }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
]);
|
|
14
|
+
export const HelpPlugin = definePlugin<HelpPluginOptions>(meta, ({ steps = [] }) => [
|
|
15
|
+
defineModule({
|
|
16
|
+
id: `${meta.id}/module/state`,
|
|
17
|
+
activatesOn: Events.Startup,
|
|
18
|
+
activate: HelpState,
|
|
19
|
+
}),
|
|
20
|
+
defineModule({
|
|
21
|
+
id: `${meta.id}/module/translations`,
|
|
22
|
+
activatesOn: Events.SetupTranslations,
|
|
23
|
+
activate: () => contributes(Capabilities.Translations, translations),
|
|
24
|
+
}),
|
|
25
|
+
defineModule({
|
|
26
|
+
id: `${meta.id}/module/react-root`,
|
|
27
|
+
activatesOn: Events.Startup,
|
|
28
|
+
activate: () => ReactRoot(steps),
|
|
29
|
+
}),
|
|
30
|
+
defineModule({
|
|
31
|
+
id: `${meta.id}/module/react-surface`,
|
|
32
|
+
activatesOn: Events.SetupReactSurface,
|
|
33
|
+
activate: ReactSurface,
|
|
34
|
+
}),
|
|
35
|
+
defineModule({
|
|
36
|
+
id: `${meta.id}/module/intent-resolver`,
|
|
37
|
+
activatesOn: Events.SetupIntentResolver,
|
|
38
|
+
activate: (context) =>
|
|
39
|
+
contributes(
|
|
40
|
+
Capabilities.IntentResolver,
|
|
41
|
+
createResolver({
|
|
42
|
+
intent: HelpAction.Start,
|
|
43
|
+
resolve: () => {
|
|
44
|
+
const state = context.getCapability(HelpCapabilities.MutableState);
|
|
45
|
+
state.running = true;
|
|
46
|
+
},
|
|
47
|
+
}),
|
|
48
|
+
),
|
|
49
|
+
}),
|
|
50
|
+
defineModule({
|
|
51
|
+
id: `${meta.id}/module/app-graph-builder`,
|
|
52
|
+
activatesOn: Events.SetupAppGraph,
|
|
53
|
+
activate: AppGraphBuilder,
|
|
54
|
+
}),
|
|
55
|
+
]);
|
|
@@ -3,24 +3,26 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { Rx } from '@effect-rx/rx-react';
|
|
6
|
-
import
|
|
6
|
+
import * as Function from 'effect/Function';
|
|
7
|
+
import * as Option from 'effect/Option';
|
|
7
8
|
|
|
8
|
-
import { Capabilities,
|
|
9
|
+
import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
|
|
9
10
|
import { createExtension } from '@dxos/app-graph';
|
|
10
11
|
|
|
11
|
-
import { HelpCapabilities } from './capabilities';
|
|
12
12
|
import { SHORTCUTS_DIALOG } from '../components';
|
|
13
|
-
import {
|
|
13
|
+
import { meta } from '../meta';
|
|
14
14
|
import { HelpAction } from '../types';
|
|
15
15
|
|
|
16
|
+
import { HelpCapabilities } from './capabilities';
|
|
17
|
+
|
|
16
18
|
export default (context: PluginContext) =>
|
|
17
19
|
contributes(
|
|
18
20
|
Capabilities.AppGraphBuilder,
|
|
19
21
|
createExtension({
|
|
20
|
-
id:
|
|
22
|
+
id: meta.id,
|
|
21
23
|
actions: (node) =>
|
|
22
24
|
Rx.make((get) =>
|
|
23
|
-
pipe(
|
|
25
|
+
Function.pipe(
|
|
24
26
|
get(node),
|
|
25
27
|
Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
|
|
26
28
|
Option.map(() => [
|
|
@@ -33,7 +35,7 @@ export default (context: PluginContext) =>
|
|
|
33
35
|
await dispatch(createIntent(HelpAction.Start));
|
|
34
36
|
},
|
|
35
37
|
properties: {
|
|
36
|
-
label: ['open help tour', { ns:
|
|
38
|
+
label: ['open help tour', { ns: meta.id }],
|
|
37
39
|
icon: 'ph--info--regular',
|
|
38
40
|
keyBinding: {
|
|
39
41
|
macos: 'shift+meta+/',
|
|
@@ -45,7 +47,7 @@ export default (context: PluginContext) =>
|
|
|
45
47
|
},
|
|
46
48
|
},
|
|
47
49
|
{
|
|
48
|
-
id:
|
|
50
|
+
id: `${meta.id}/open-shortcuts`,
|
|
49
51
|
data: async () => {
|
|
50
52
|
const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
|
|
51
53
|
const state = context.getCapability(HelpCapabilities.MutableState);
|
|
@@ -61,7 +63,7 @@ export default (context: PluginContext) =>
|
|
|
61
63
|
);
|
|
62
64
|
},
|
|
63
65
|
properties: {
|
|
64
|
-
label: ['open shortcuts label', { ns:
|
|
66
|
+
label: ['open shortcuts label', { ns: meta.id }],
|
|
65
67
|
icon: 'ph--keyboard--regular',
|
|
66
68
|
keyBinding: {
|
|
67
69
|
macos: 'meta+ctrl+/',
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
import { defineCapability } from '@dxos/app-framework';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { meta } from '../meta';
|
|
8
8
|
|
|
9
9
|
export namespace HelpCapabilities {
|
|
10
10
|
export type State = { running: boolean; showHints: boolean; showWelcome: boolean };
|
|
11
|
-
export const State = defineCapability<Readonly<State>>(`${
|
|
12
|
-
export const MutableState = defineCapability<State>(`${
|
|
11
|
+
export const State = defineCapability<Readonly<State>>(`${meta.id}/capability/state`);
|
|
12
|
+
export const MutableState = defineCapability<State>(`${meta.id}/capability/state`);
|
|
13
13
|
}
|
|
@@ -6,14 +6,15 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { Capabilities, contributes, useCapability } from '@dxos/app-framework';
|
|
8
8
|
|
|
9
|
-
import { HelpCapabilities } from './capabilities';
|
|
10
9
|
import { WelcomeTour } from '../components';
|
|
11
|
-
import {
|
|
10
|
+
import { meta } from '../meta';
|
|
12
11
|
import { type Step } from '../types';
|
|
13
12
|
|
|
13
|
+
import { HelpCapabilities } from './capabilities';
|
|
14
|
+
|
|
14
15
|
export default (steps: Step[]) =>
|
|
15
16
|
contributes(Capabilities.ReactRoot, {
|
|
16
|
-
id:
|
|
17
|
+
id: meta.id,
|
|
17
18
|
root: () => {
|
|
18
19
|
const state = useCapability(HelpCapabilities.MutableState);
|
|
19
20
|
return (
|
|
@@ -7,17 +7,17 @@ import React from 'react';
|
|
|
7
7
|
import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
|
|
8
8
|
|
|
9
9
|
import { SHORTCUTS_DIALOG, ShortcutsDialogContent, ShortcutsHints, ShortcutsList } from '../components';
|
|
10
|
-
import {
|
|
10
|
+
import { meta } from '../meta';
|
|
11
11
|
|
|
12
12
|
export default () =>
|
|
13
13
|
contributes(Capabilities.ReactSurface, [
|
|
14
14
|
createSurface({
|
|
15
|
-
id: `${
|
|
15
|
+
id: `${meta.id}/hints`,
|
|
16
16
|
role: 'hints',
|
|
17
17
|
component: () => <ShortcutsHints />,
|
|
18
18
|
}),
|
|
19
19
|
createSurface({
|
|
20
|
-
id: `${
|
|
20
|
+
id: `${meta.id}/keyshortcuts`,
|
|
21
21
|
role: 'keyshortcuts',
|
|
22
22
|
component: () => <ShortcutsList />,
|
|
23
23
|
}),
|
|
@@ -5,11 +5,12 @@
|
|
|
5
5
|
import { contributes } from '@dxos/app-framework';
|
|
6
6
|
import { LocalStorageStore } from '@dxos/local-storage';
|
|
7
7
|
|
|
8
|
+
import { meta } from '../meta';
|
|
9
|
+
|
|
8
10
|
import { HelpCapabilities } from './capabilities';
|
|
9
|
-
import { HELP_PLUGIN } from '../meta';
|
|
10
11
|
|
|
11
12
|
export default () => {
|
|
12
|
-
const state = new LocalStorageStore<HelpCapabilities.State>(
|
|
13
|
+
const state = new LocalStorageStore<HelpCapabilities.State>(meta.id, {
|
|
13
14
|
running: false,
|
|
14
15
|
showHints: true,
|
|
15
16
|
showWelcome: true,
|
|
@@ -6,13 +6,14 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
|
|
8
8
|
|
|
9
|
+
import { meta } from '../../meta';
|
|
10
|
+
|
|
9
11
|
import { ShortcutsList } from './ShortcutsList';
|
|
10
|
-
import { HELP_PLUGIN } from '../../meta';
|
|
11
12
|
|
|
12
|
-
export const SHORTCUTS_DIALOG = `${
|
|
13
|
+
export const SHORTCUTS_DIALOG = `${meta.id}/ShortcutsDialog`;
|
|
13
14
|
|
|
14
15
|
export const ShortcutsDialogContent = () => {
|
|
15
|
-
const { t } = useTranslation(
|
|
16
|
+
const { t } = useTranslation(meta.id);
|
|
16
17
|
|
|
17
18
|
return (
|
|
18
19
|
<Dialog.Content classNames='p-0 bs-content max-bs-full md:max-is-[25rem] overflow-hidden'>
|
|
@@ -8,11 +8,12 @@ import { Keyboard } from '@dxos/keyboard';
|
|
|
8
8
|
import { toLocalizedString, useTranslation } from '@dxos/react-ui';
|
|
9
9
|
import { mx } from '@dxos/react-ui-theme';
|
|
10
10
|
|
|
11
|
+
import { meta } from '../../meta';
|
|
12
|
+
|
|
11
13
|
import { Key } from './Key';
|
|
12
|
-
import { HELP_PLUGIN } from '../../meta';
|
|
13
14
|
|
|
14
15
|
export const ShortcutsList = () => {
|
|
15
|
-
const { t } = useTranslation(
|
|
16
|
+
const { t } = useTranslation(meta.id);
|
|
16
17
|
const bindings = Keyboard.singleton.getBindings();
|
|
17
18
|
|
|
18
19
|
// TODO(burdon): Get shortcuts from TextEditor.
|
|
@@ -3,18 +3,16 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
|
|
6
|
-
import { CaretLeft, CaretRight, Circle, X } from '@phosphor-icons/react';
|
|
7
6
|
import React, { forwardRef } from 'react';
|
|
8
7
|
// TODO(thure): This needed to be imported in the package.json specifically to pacify TS2742. See if this is resolved with typescript@5.5.x.
|
|
9
8
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
10
9
|
import _floater from 'react-floater';
|
|
11
|
-
import { type
|
|
10
|
+
import { type Props, type TooltipRenderProps } from 'react-joyride';
|
|
12
11
|
// TODO(thure): This needed to be imported in the package.json specifically to pacify TS2742. See if this is resolved with typescript@5.5.x.
|
|
13
12
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
14
13
|
import _typefest from 'type-fest';
|
|
15
14
|
|
|
16
|
-
import { Button } from '@dxos/react-ui';
|
|
17
|
-
import { getSize, mx } from '@dxos/react-ui-theme';
|
|
15
|
+
import { Button, Icon, IconButton } from '@dxos/react-ui';
|
|
18
16
|
|
|
19
17
|
// https://docs.react-joyride.com/styling
|
|
20
18
|
// https://github.com/gilbarbara/react-floater
|
|
@@ -49,36 +47,39 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipRenderProps>(
|
|
|
49
47
|
>
|
|
50
48
|
<div className='flex p-2'>
|
|
51
49
|
<h2 className='grow pli-2 plb-1 text-lg font-medium text-accentSurfaceText'>{title}</h2>
|
|
52
|
-
<
|
|
50
|
+
<IconButton
|
|
53
51
|
density='fine'
|
|
54
|
-
|
|
52
|
+
icon='ph--x--bold'
|
|
53
|
+
iconOnly
|
|
54
|
+
label={closeProps['aria-label']}
|
|
55
55
|
onClick={closeProps.onClick}
|
|
56
|
-
|
|
56
|
+
size={4}
|
|
57
|
+
variant='primary'
|
|
57
58
|
data-testid='helpPlugin.tooltip.close'
|
|
58
|
-
|
|
59
|
-
<X weight='bold' className={getSize(4)} />
|
|
60
|
-
</Button>
|
|
59
|
+
/>
|
|
61
60
|
</div>
|
|
62
61
|
<div className='flex grow pli-4 mlb-2'>{content}</div>
|
|
63
62
|
<div className='flex p-2 items-center justify-between' {...arrowNavigationAttrs}>
|
|
64
63
|
{
|
|
65
|
-
<
|
|
66
|
-
variant='primary'
|
|
67
|
-
onClick={backProps.onClick}
|
|
68
|
-
title={backProps['aria-label']}
|
|
64
|
+
<IconButton
|
|
69
65
|
classNames={[!(index > 0 && backProps) && 'invisible']}
|
|
66
|
+
icon='ph--caret-left--regular'
|
|
67
|
+
iconOnly
|
|
68
|
+
label={backProps['aria-label']}
|
|
69
|
+
onClick={backProps.onClick}
|
|
70
|
+
size={5}
|
|
71
|
+
variant='primary'
|
|
70
72
|
data-testid='helpPlugin.tooltip.back'
|
|
71
|
-
|
|
72
|
-
<CaretLeft className={getSize(5)} />
|
|
73
|
-
</Button>
|
|
73
|
+
/>
|
|
74
74
|
}
|
|
75
75
|
<div className='flex grow gap-2 justify-center'>
|
|
76
76
|
<div className='flex'>
|
|
77
77
|
{Array.from({ length: size }).map((_, i) => (
|
|
78
|
-
<
|
|
78
|
+
<Icon
|
|
79
79
|
key={i}
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
icon={index === i ? 'ph--circle--fill' : 'ph--circle--regular'}
|
|
81
|
+
size={2}
|
|
82
|
+
classNames='mli-1 cursor-pointer'
|
|
82
83
|
/>
|
|
83
84
|
))}
|
|
84
85
|
</div>
|
|
@@ -94,15 +95,16 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipRenderProps>(
|
|
|
94
95
|
Done
|
|
95
96
|
</Button>
|
|
96
97
|
) : (
|
|
97
|
-
<
|
|
98
|
-
variant='primary'
|
|
99
|
-
onClick={primaryProps.onClick}
|
|
100
|
-
title={primaryProps['aria-label']}
|
|
98
|
+
<IconButton
|
|
101
99
|
autoFocus
|
|
100
|
+
icon='ph--caret-right--regular'
|
|
101
|
+
iconOnly
|
|
102
|
+
label={primaryProps['aria-label']}
|
|
103
|
+
onClick={primaryProps.onClick}
|
|
104
|
+
size={6}
|
|
105
|
+
variant='primary'
|
|
102
106
|
data-testid='helpPlugin.tooltip.next'
|
|
103
|
-
|
|
104
|
-
<CaretRight className={getSize(6)} />
|
|
105
|
-
</Button>
|
|
107
|
+
/>
|
|
106
108
|
)}
|
|
107
109
|
</div>
|
|
108
110
|
</div>
|
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import { Circle } from '@phosphor-icons/react';
|
|
8
5
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
9
6
|
import React, { useState } from 'react';
|
|
10
7
|
|
|
8
|
+
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
9
|
+
import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
|
|
11
10
|
import { faker } from '@dxos/random';
|
|
12
|
-
import { Button } from '@dxos/react-ui';
|
|
13
|
-
import { withTheme } from '@dxos/
|
|
11
|
+
import { Button, Icon } from '@dxos/react-ui';
|
|
12
|
+
import { withTheme } from '@dxos/react-ui/testing';
|
|
14
13
|
|
|
15
|
-
import { WelcomeTour, type WelcomeTourProps } from './WelcomeTour';
|
|
16
14
|
import { useHelp } from '../../hooks';
|
|
17
15
|
|
|
16
|
+
import { WelcomeTour, type WelcomeTourProps } from './WelcomeTour';
|
|
17
|
+
|
|
18
18
|
const App = () => {
|
|
19
19
|
const { running, start } = useHelp();
|
|
20
20
|
const [items, setItems] = useState(() => Array.from({ length: 5 }).map(() => faker.lorem.sentence()));
|
|
@@ -35,7 +35,7 @@ const App = () => {
|
|
|
35
35
|
<ul className='p-2 border border-blue-500 rounded-md' data-joyride='basic/2'>
|
|
36
36
|
{items.map((item, i) => (
|
|
37
37
|
<li key={i} className='flex items-center gap-2'>
|
|
38
|
-
<
|
|
38
|
+
<Icon icon='ph--circle--regular' />
|
|
39
39
|
<span>{item}</span>
|
|
40
40
|
</li>
|
|
41
41
|
))}
|
|
@@ -49,9 +49,9 @@ const App = () => {
|
|
|
49
49
|
<div className='flex grow' />
|
|
50
50
|
<div className='flex items-center py-2'>
|
|
51
51
|
<div className='grow' />
|
|
52
|
-
<
|
|
53
|
-
<
|
|
54
|
-
<
|
|
52
|
+
<Icon icon='ph--circle--regular' data-joyride='basic/4' />
|
|
53
|
+
<Icon icon='ph--circle--regular' />
|
|
54
|
+
<Icon icon='ph--circle--regular' />
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
57
57
|
);
|
|
@@ -104,11 +104,12 @@ export const Default: StoryObj<typeof WelcomeTour> = {
|
|
|
104
104
|
/**
|
|
105
105
|
* IMPORTANT: Run in separate tab.
|
|
106
106
|
*/
|
|
107
|
-
const meta
|
|
107
|
+
const meta = {
|
|
108
108
|
title: 'plugins/plugin-help/WelcomeTour',
|
|
109
109
|
component: WelcomeTour,
|
|
110
110
|
render: DefaultStory,
|
|
111
|
-
|
|
112
|
-
}
|
|
111
|
+
// TODO(wittjosiah): Try to write story which does not depend on plugin manager.
|
|
112
|
+
decorators: [withTheme, withPluginManager({ plugins: [StorybookLayoutPlugin({})] })],
|
|
113
|
+
} satisfies Meta<typeof WelcomeTour>;
|
|
113
114
|
|
|
114
115
|
export default meta;
|
|
@@ -2,13 +2,14 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, { useState
|
|
5
|
+
import React, { useState } from 'react';
|
|
6
6
|
import Joyride, { ACTIONS, EVENTS } from 'react-joyride';
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { useLayout, usePluginManager } from '@dxos/app-framework';
|
|
9
|
+
import { useAsyncEffect } from '@dxos/react-ui';
|
|
9
10
|
|
|
10
|
-
import { type Step
|
|
11
|
-
import {
|
|
11
|
+
import { HelpContext, type Step } from '../../types';
|
|
12
|
+
import { Tooltip, floaterProps } from '../Tooltip';
|
|
12
13
|
|
|
13
14
|
const addStepClass = (target: string | HTMLElement) => {
|
|
14
15
|
const element = typeof target === 'string' ? document.querySelector(target) : target;
|
|
@@ -93,20 +94,16 @@ export const WelcomeTour = ({ steps: initialSteps, running: runningProp, onRunni
|
|
|
93
94
|
}
|
|
94
95
|
};
|
|
95
96
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
return () => clearTimeout(timeout);
|
|
97
|
+
useAsyncEffect(async () => {
|
|
98
|
+
if (runningProp) {
|
|
99
|
+
// This handles the case when the target is not yet in the document.
|
|
100
|
+
// If the target is not in the document, when the joyride is turned on, it will not show the tooltip.
|
|
101
|
+
await waitForTarget(steps[stepIndex]);
|
|
102
|
+
setStepIndex(0);
|
|
103
|
+
setRunning(true);
|
|
104
|
+
} else if (typeof runningProp !== 'undefined') {
|
|
105
|
+
setRunning(false);
|
|
106
|
+
}
|
|
110
107
|
}, [runningProp]);
|
|
111
108
|
|
|
112
109
|
// https://docs.react-joyride.com/callback
|
package/src/meta.ts
CHANGED
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type PluginMeta } from '@dxos/app-framework';
|
|
6
|
-
|
|
7
|
-
// TODO(burdon): Rename Guide? Help?
|
|
8
|
-
export const HELP_PLUGIN = 'dxos.org/plugin/help';
|
|
6
|
+
import { trim } from '@dxos/util';
|
|
9
7
|
|
|
10
8
|
export const meta: PluginMeta = {
|
|
11
|
-
id:
|
|
9
|
+
id: 'dxos.org/plugin/help',
|
|
12
10
|
name: 'Help',
|
|
11
|
+
description: trim`
|
|
12
|
+
Built-in help system with documentation, tutorials, and contextual assistance.
|
|
13
|
+
Access keyboard shortcuts, feature guides, and support resources.
|
|
14
|
+
`,
|
|
13
15
|
icon: 'ph--info--regular',
|
|
14
16
|
};
|