@dxos/plugin-help 0.8.4-main.dedc0f3 → 0.8.4-main.e8ec1fe
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-F62C67SH.mjs → app-graph-builder-L6GUMAIH.mjs} +16 -15
- package/dist/lib/browser/app-graph-builder-L6GUMAIH.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-J2SJSGSX.mjs → chunk-I7FKM6VC.mjs} +3 -3
- package/dist/lib/browser/chunk-I7FKM6VC.mjs.map +7 -0
- package/dist/lib/browser/{chunk-4CVVSQQC.mjs → chunk-W4AUSEGO.mjs} +30 -29
- package/dist/lib/browser/chunk-W4AUSEGO.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +9 -11
- 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-2LE42L5M.mjs → react-root-QJH33RNI.mjs} +11 -10
- package/dist/lib/browser/react-root-QJH33RNI.mjs.map +7 -0
- package/dist/lib/browser/{react-surface-XKJRPX3R.mjs → react-surface-OTMERRAV.mjs} +9 -9
- package/dist/lib/browser/react-surface-OTMERRAV.mjs.map +7 -0
- package/dist/lib/browser/{state-IXBTB3WH.mjs → state-5PVJCYWJ.mjs} +7 -7
- package/dist/lib/browser/state-5PVJCYWJ.mjs.map +7 -0
- package/dist/lib/browser/types/index.mjs +2 -2
- 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.map +1 -1
- package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-root.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/ShortcutsHints.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/src/components/WelcomeTour/WelcomeTour.stories.d.ts +0 -1
- 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/schema.d.ts +1 -1
- package/dist/types/src/types/schema.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +31 -30
- package/src/HelpPlugin.tsx +43 -45
- package/src/capabilities/app-graph-builder.ts +10 -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 +2 -2
- package/src/components/Shortcuts/ShortcutsDialog.tsx +5 -8
- package/src/components/Shortcuts/ShortcutsHints.tsx +12 -5
- package/src/components/Shortcuts/ShortcutsList.tsx +2 -2
- package/src/components/Tooltip/Tooltip.tsx +0 -1
- package/src/components/WelcomeTour/WelcomeTour.stories.tsx +9 -8
- package/src/components/WelcomeTour/WelcomeTour.tsx +1 -1
- package/src/meta.ts +6 -4
- package/src/types/schema.ts +1 -1
- package/dist/lib/browser/app-graph-builder-F62C67SH.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-4CVVSQQC.mjs.map +0 -7
- package/dist/lib/browser/chunk-J2SJSGSX.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/react-root-2LE42L5M.mjs.map +0 -7
- package/dist/lib/browser/react-surface-XKJRPX3R.mjs.map +0 -7
- package/dist/lib/browser/state-IXBTB3WH.mjs.map +0 -7
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.e8ec1fe",
|
|
4
4
|
"description": "Help plugin.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -44,43 +44,44 @@
|
|
|
44
44
|
"@fluentui/react-tabster": "^9.24.2",
|
|
45
45
|
"@preact-signals/safe-react": "^0.9.0",
|
|
46
46
|
"react-joyride": "^2.7.2",
|
|
47
|
-
"@dxos/app-
|
|
48
|
-
"@dxos/
|
|
49
|
-
"@dxos/echo
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/plugin-
|
|
54
|
-
"@dxos/
|
|
55
|
-
"@dxos/plugin-
|
|
56
|
-
"@dxos/
|
|
57
|
-
"@dxos/react-client": "0.8.4-main.
|
|
58
|
-
"@dxos/
|
|
47
|
+
"@dxos/app-framework": "0.8.4-main.e8ec1fe",
|
|
48
|
+
"@dxos/app-graph": "0.8.4-main.e8ec1fe",
|
|
49
|
+
"@dxos/echo": "0.8.4-main.e8ec1fe",
|
|
50
|
+
"@dxos/debug": "0.8.4-main.e8ec1fe",
|
|
51
|
+
"@dxos/keyboard": "0.8.4-main.e8ec1fe",
|
|
52
|
+
"@dxos/live-object": "0.8.4-main.e8ec1fe",
|
|
53
|
+
"@dxos/plugin-graph": "0.8.4-main.e8ec1fe",
|
|
54
|
+
"@dxos/plugin-client": "0.8.4-main.e8ec1fe",
|
|
55
|
+
"@dxos/plugin-space": "0.8.4-main.e8ec1fe",
|
|
56
|
+
"@dxos/util": "0.8.4-main.e8ec1fe",
|
|
57
|
+
"@dxos/react-client": "0.8.4-main.e8ec1fe",
|
|
58
|
+
"@dxos/local-storage": "0.8.4-main.e8ec1fe"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
|
-
"@effect-
|
|
62
|
-
"@effect/platform": "0.
|
|
63
|
-
"@types/react": "~
|
|
64
|
-
"@types/react-dom": "~
|
|
65
|
-
"effect": "3.
|
|
66
|
-
"react": "~
|
|
67
|
-
"react-dom": "~
|
|
61
|
+
"@effect-atom/atom-react": "^0.3.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",
|
|
68
68
|
"react-floater": "0.7.9",
|
|
69
69
|
"type-fest": "4.10.1",
|
|
70
|
-
"vite": "7.1.
|
|
71
|
-
"@dxos/
|
|
72
|
-
"@dxos/
|
|
73
|
-
"@dxos/react-ui-theme": "0.8.4-main.
|
|
74
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
70
|
+
"vite": "7.1.9",
|
|
71
|
+
"@dxos/plugin-storybook-layout": "0.8.4-main.e8ec1fe",
|
|
72
|
+
"@dxos/random": "0.8.4-main.e8ec1fe",
|
|
73
|
+
"@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
|
|
74
|
+
"@dxos/react-ui": "0.8.4-main.e8ec1fe",
|
|
75
|
+
"@dxos/storybook-utils": "0.8.4-main.e8ec1fe"
|
|
75
76
|
},
|
|
76
77
|
"peerDependencies": {
|
|
77
|
-
"@effect-
|
|
78
|
+
"@effect-atom/atom-react": "^0.3.4",
|
|
78
79
|
"@effect/platform": "^0.80.12",
|
|
79
80
|
"effect": "^3.13.3",
|
|
80
|
-
"react": "
|
|
81
|
-
"react-dom": "
|
|
82
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
83
|
-
"@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.e8ec1fe",
|
|
84
|
+
"@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
|
|
84
85
|
},
|
|
85
86
|
"publishConfig": {
|
|
86
87
|
"access": "public"
|
package/src/HelpPlugin.tsx
CHANGED
|
@@ -4,54 +4,52 @@
|
|
|
4
4
|
|
|
5
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
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
|
+
]);
|
|
@@ -2,14 +2,15 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
5
|
+
import { Atom } from '@effect-atom/atom-react';
|
|
6
|
+
import * as Function from 'effect/Function';
|
|
7
|
+
import * as Option from 'effect/Option';
|
|
7
8
|
|
|
8
9
|
import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
|
|
9
10
|
import { createExtension } from '@dxos/app-graph';
|
|
10
11
|
|
|
11
12
|
import { SHORTCUTS_DIALOG } from '../components';
|
|
12
|
-
import {
|
|
13
|
+
import { meta } from '../meta';
|
|
13
14
|
import { HelpAction } from '../types';
|
|
14
15
|
|
|
15
16
|
import { HelpCapabilities } from './capabilities';
|
|
@@ -18,10 +19,10 @@ export default (context: PluginContext) =>
|
|
|
18
19
|
contributes(
|
|
19
20
|
Capabilities.AppGraphBuilder,
|
|
20
21
|
createExtension({
|
|
21
|
-
id:
|
|
22
|
+
id: meta.id,
|
|
22
23
|
actions: (node) =>
|
|
23
|
-
|
|
24
|
-
pipe(
|
|
24
|
+
Atom.make((get) =>
|
|
25
|
+
Function.pipe(
|
|
25
26
|
get(node),
|
|
26
27
|
Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),
|
|
27
28
|
Option.map(() => [
|
|
@@ -34,7 +35,7 @@ export default (context: PluginContext) =>
|
|
|
34
35
|
await dispatch(createIntent(HelpAction.Start));
|
|
35
36
|
},
|
|
36
37
|
properties: {
|
|
37
|
-
label: ['open help tour', { ns:
|
|
38
|
+
label: ['open help tour', { ns: meta.id }],
|
|
38
39
|
icon: 'ph--info--regular',
|
|
39
40
|
keyBinding: {
|
|
40
41
|
macos: 'shift+meta+/',
|
|
@@ -46,7 +47,7 @@ export default (context: PluginContext) =>
|
|
|
46
47
|
},
|
|
47
48
|
},
|
|
48
49
|
{
|
|
49
|
-
id:
|
|
50
|
+
id: `${meta.id}/open-shortcuts`,
|
|
50
51
|
data: async () => {
|
|
51
52
|
const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
|
|
52
53
|
const state = context.getCapability(HelpCapabilities.MutableState);
|
|
@@ -62,7 +63,7 @@ export default (context: PluginContext) =>
|
|
|
62
63
|
);
|
|
63
64
|
},
|
|
64
65
|
properties: {
|
|
65
|
-
label: ['open shortcuts label', { ns:
|
|
66
|
+
label: ['open shortcuts label', { ns: meta.id }],
|
|
66
67
|
icon: 'ph--keyboard--regular',
|
|
67
68
|
keyBinding: {
|
|
68
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
|
}
|
|
@@ -4,17 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
|
-
import { Capabilities, contributes
|
|
7
|
+
import { Capabilities, contributes } from '@dxos/app-framework';
|
|
8
|
+
import { useCapability } from '@dxos/app-framework/react';
|
|
8
9
|
|
|
9
10
|
import { WelcomeTour } from '../components';
|
|
10
|
-
import {
|
|
11
|
+
import { meta } from '../meta';
|
|
11
12
|
import { type Step } from '../types';
|
|
12
13
|
|
|
13
14
|
import { HelpCapabilities } from './capabilities';
|
|
14
15
|
|
|
15
16
|
export default (steps: Step[]) =>
|
|
16
17
|
contributes(Capabilities.ReactRoot, {
|
|
17
|
-
id:
|
|
18
|
+
id: meta.id,
|
|
18
19
|
root: () => {
|
|
19
20
|
const state = useCapability(HelpCapabilities.MutableState);
|
|
20
21
|
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,12 +5,12 @@
|
|
|
5
5
|
import { contributes } from '@dxos/app-framework';
|
|
6
6
|
import { LocalStorageStore } from '@dxos/local-storage';
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { meta } from '../meta';
|
|
9
9
|
|
|
10
10
|
import { HelpCapabilities } from './capabilities';
|
|
11
11
|
|
|
12
12
|
export default () => {
|
|
13
|
-
const state = new LocalStorageStore<HelpCapabilities.State>(
|
|
13
|
+
const state = new LocalStorageStore<HelpCapabilities.State>(meta.id, {
|
|
14
14
|
running: false,
|
|
15
15
|
showHints: true,
|
|
16
16
|
showWelcome: true,
|
|
@@ -4,26 +4,23 @@
|
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
|
-
import {
|
|
7
|
+
import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
|
|
8
8
|
|
|
9
|
-
import {
|
|
9
|
+
import { meta } from '../../meta';
|
|
10
10
|
|
|
11
11
|
import { ShortcutsList } from './ShortcutsList';
|
|
12
12
|
|
|
13
|
-
export const SHORTCUTS_DIALOG = `${
|
|
13
|
+
export const SHORTCUTS_DIALOG = `${meta.id}/ShortcutsDialog`;
|
|
14
14
|
|
|
15
15
|
export const ShortcutsDialogContent = () => {
|
|
16
|
-
const { t } = useTranslation(
|
|
16
|
+
const { t } = useTranslation(meta.id);
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
19
|
<Dialog.Content classNames='p-0 bs-content max-bs-full md:max-is-[25rem] overflow-hidden'>
|
|
20
20
|
<div role='none' className='flex justify-between mbe-1 pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
|
|
21
21
|
<Dialog.Title>{t('shortcuts dialog title')}</Dialog.Title>
|
|
22
|
-
|
|
23
22
|
<Dialog.Close asChild>
|
|
24
|
-
<
|
|
25
|
-
<Icon icon='ph--x--bold' size={3} />
|
|
26
|
-
</Button>
|
|
23
|
+
<IconButton icon='ph--x--bold' iconOnly size={3} label='Close' variant='ghost' autoFocus />
|
|
27
24
|
</Dialog.Close>
|
|
28
25
|
</div>
|
|
29
26
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
7
|
import { type KeyBinding, Keyboard } from '@dxos/keyboard';
|
|
8
|
-
import {
|
|
8
|
+
import { IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
|
|
9
9
|
|
|
10
10
|
import { Key } from './Key';
|
|
11
11
|
|
|
@@ -26,14 +26,21 @@ export const ShortcutsHints = ({ onClose }: { onClose?: () => void }) => {
|
|
|
26
26
|
const hints = bindings.filter((binding) => defaults.includes(binding.shortcut));
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
|
-
<div role='none' className='flex overflow-hidden
|
|
29
|
+
<div role='none' className='flex overflow-hidden pli-2 gap-4'>
|
|
30
30
|
{hints.map((binding) => (
|
|
31
31
|
<Shortcut key={binding.shortcut} binding={binding} />
|
|
32
32
|
))}
|
|
33
33
|
{onClose && (
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
<IconButton
|
|
35
|
+
icon='ph--x--regular'
|
|
36
|
+
size={4}
|
|
37
|
+
label='Close'
|
|
38
|
+
iconOnly
|
|
39
|
+
noTooltip
|
|
40
|
+
variant='ghost'
|
|
41
|
+
classNames='p-0 cursor-pointer'
|
|
42
|
+
onClick={onClose}
|
|
43
|
+
/>
|
|
37
44
|
)}
|
|
38
45
|
</div>
|
|
39
46
|
);
|
|
@@ -8,12 +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 {
|
|
11
|
+
import { meta } from '../../meta';
|
|
12
12
|
|
|
13
13
|
import { Key } from './Key';
|
|
14
14
|
|
|
15
15
|
export const ShortcutsList = () => {
|
|
16
|
-
const { t } = useTranslation(
|
|
16
|
+
const { t } = useTranslation(meta.id);
|
|
17
17
|
const bindings = Keyboard.singleton.getBindings();
|
|
18
18
|
|
|
19
19
|
// TODO(burdon): Get shortcuts from TextEditor.
|
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
5
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
6
|
import React, { useState } from 'react';
|
|
9
7
|
|
|
8
|
+
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
9
|
+
import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
|
|
10
10
|
import { faker } from '@dxos/random';
|
|
11
11
|
import { Button, Icon } from '@dxos/react-ui';
|
|
12
|
-
import { withTheme } from '@dxos/
|
|
12
|
+
import { withTheme } from '@dxos/react-ui/testing';
|
|
13
13
|
|
|
14
14
|
import { useHelp } from '../../hooks';
|
|
15
15
|
|
|
@@ -23,8 +23,8 @@ const App = () => {
|
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
return (
|
|
26
|
-
<div className='flex flex-col
|
|
27
|
-
<div className='flex items-center gap-2
|
|
26
|
+
<div className='flex flex-col bs-full p-4 space-y-8'>
|
|
27
|
+
<div className='flex items-center gap-2 plb-2'>
|
|
28
28
|
<Button data-joyride='basic/1' onClick={() => start()}>
|
|
29
29
|
Start
|
|
30
30
|
</Button>
|
|
@@ -41,13 +41,13 @@ const App = () => {
|
|
|
41
41
|
))}
|
|
42
42
|
</ul>
|
|
43
43
|
</div>
|
|
44
|
-
<div className='flex items-center gap-2
|
|
44
|
+
<div className='flex items-center gap-2 plb-2'>
|
|
45
45
|
<Button data-joyride='basic/3' onClick={handleAdd}>
|
|
46
46
|
Add
|
|
47
47
|
</Button>
|
|
48
48
|
</div>
|
|
49
49
|
<div className='flex grow' />
|
|
50
|
-
<div className='flex items-center
|
|
50
|
+
<div className='flex items-center plb-2'>
|
|
51
51
|
<div className='grow' />
|
|
52
52
|
<Icon icon='ph--circle--regular' data-joyride='basic/4' />
|
|
53
53
|
<Icon icon='ph--circle--regular' />
|
|
@@ -108,7 +108,8 @@ const meta = {
|
|
|
108
108
|
title: 'plugins/plugin-help/WelcomeTour',
|
|
109
109
|
component: WelcomeTour,
|
|
110
110
|
render: DefaultStory,
|
|
111
|
-
|
|
111
|
+
// TODO(wittjosiah): Try to write story which does not depend on plugin manager.
|
|
112
|
+
decorators: [withTheme, withPluginManager({ plugins: [StorybookLayoutPlugin({})] })],
|
|
112
113
|
} satisfies Meta<typeof WelcomeTour>;
|
|
113
114
|
|
|
114
115
|
export default meta;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import React, { useState } from 'react';
|
|
6
6
|
import Joyride, { ACTIONS, EVENTS } from 'react-joyride';
|
|
7
7
|
|
|
8
|
-
import { useLayout, usePluginManager } from '@dxos/app-framework';
|
|
8
|
+
import { useLayout, usePluginManager } from '@dxos/app-framework/react';
|
|
9
9
|
import { useAsyncEffect } from '@dxos/react-ui';
|
|
10
10
|
|
|
11
11
|
import { HelpContext, type Step } from '../../types';
|
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
|
};
|
package/src/types/schema.ts
CHANGED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/app-graph-builder.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport { Option, pipe } from 'effect';\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { createExtension } from '@dxos/app-graph';\n\nimport { SHORTCUTS_DIALOG } from '../components';\nimport { HELP_PLUGIN } from '../meta';\nimport { HelpAction } from '../types';\n\nimport { HelpCapabilities } from './capabilities';\n\nexport default (context: PluginContext) =>\n contributes(\n Capabilities.AppGraphBuilder,\n createExtension({\n id: HELP_PLUGIN,\n actions: (node) =>\n Rx.make((get) =>\n pipe(\n get(node),\n Option.flatMap((node) => (node.id === 'root' ? Option.some(node) : Option.none())),\n Option.map(() => [\n {\n id: HelpAction.Start._tag,\n data: async () => {\n const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n const state = context.getCapability(HelpCapabilities.MutableState);\n state.showHints = true;\n await dispatch(createIntent(HelpAction.Start));\n },\n properties: {\n label: ['open help tour', { ns: HELP_PLUGIN }],\n icon: 'ph--info--regular',\n keyBinding: {\n macos: 'shift+meta+/',\n // TODO(wittjosiah): Test on windows to see if it behaves the same as linux.\n windows: 'shift+ctrl+/',\n linux: 'shift+ctrl+?',\n },\n testId: 'helpPlugin.openHelp',\n },\n },\n {\n id: 'dxos.org/plugin/help/open-shortcuts',\n data: async () => {\n const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n const state = context.getCapability(HelpCapabilities.MutableState);\n state.showHints = true;\n await dispatch(\n createIntent(LayoutAction.UpdateDialog, {\n part: 'dialog',\n subject: SHORTCUTS_DIALOG,\n options: {\n blockAlign: 'center',\n },\n }),\n );\n },\n properties: {\n label: ['open shortcuts label', { ns: HELP_PLUGIN }],\n icon: 'ph--keyboard--regular',\n keyBinding: {\n macos: 'meta+ctrl+/',\n },\n },\n },\n ]),\n Option.getOrElse(() => []),\n ),\n ),\n }),\n );\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;AAIA,SAASA,UAAU;AACnB,SAASC,QAAQC,YAAY;AAE7B,SAASC,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,uBAAuB;AAQhC,IAAA,4BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC;EACJC,SAAS,CAACC,SACRC,GAAGC,KAAK,CAACC,QACPC,KACED,IAAIH,IAAAA,GACJK,OAAOC,QAAQ,CAACN,UAAUA,MAAKH,OAAO,SAASQ,OAAOE,KAAKP,KAAAA,IAAQK,OAAOG,KAAI,CAAA,GAC9EH,OAAOI,IAAI,MAAM;IACf;MACEZ,IAAIa,WAAWC,MAAMC;MACrBC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKvB,QAAQwB,cAActB,aAAauB,gBAAgB;AACzF,cAAMC,QAAQ1B,QAAQwB,cAAcG,iBAAiBC,YAAY;AACjEF,cAAMG,YAAY;AAClB,cAAMN,SAASO,aAAaZ,WAAWC,KAAK,CAAA;MAC9C;MACAY,YAAY;QACVC,OAAO;UAAC;UAAkB;YAAEC,IAAI3B;UAAY;;QAC5C4B,MAAM;QACNC,YAAY;UACVC,OAAO;;UAEPC,SAAS;UACTC,OAAO;QACT;QACAC,QAAQ;MACV;IACF;IACA;MACElC,IAAI;MACJgB,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKvB,QAAQwB,cAActB,aAAauB,gBAAgB;AACzF,cAAMC,QAAQ1B,QAAQwB,cAAcG,iBAAiBC,YAAY;AACjEF,cAAMG,YAAY;AAClB,cAAMN,SACJO,aAAaU,aAAaC,cAAc;UACtCC,MAAM;UACNC,SAASC;UACTC,SAAS;YACPC,YAAY;UACd;QACF,CAAA,CAAA;MAEJ;MACAf,YAAY;QACVC,OAAO;UAAC;UAAwB;YAAEC,IAAI3B;UAAY;;QAClD4B,MAAM;QACNC,YAAY;UACVC,OAAO;QACT;MACF;IACF;GACD,GACDvB,OAAOkC,UAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
|
|
6
|
-
"names": ["Rx", "Option", "pipe", "Capabilities", "LayoutAction", "contributes", "createIntent", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "HELP_PLUGIN", "actions", "node", "Rx", "make", "get", "pipe", "Option", "flatMap", "some", "none", "map", "HelpAction", "Start", "_tag", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "state", "HelpCapabilities", "MutableState", "showHints", "createIntent", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "linux", "testId", "LayoutAction", "UpdateDialog", "part", "subject", "SHORTCUTS_DIALOG", "options", "blockAlign", "getOrElse"]
|
|
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 const meta: PluginMeta = {\n id: HELP_PLUGIN,\n name: 'Help',\n icon: 'ph--info--regular',\n};\n"],
|
|
5
|
-
"mappings": ";AAOO,IAAMA,cAAc;AAEpB,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;EACNC,MAAM;AACR;",
|
|
6
|
-
"names": ["HELP_PLUGIN", "meta", "id", "name", "icon"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/Shortcuts/Key.tsx", "../../../src/components/Shortcuts/styles.ts", "../../../src/components/Shortcuts/ShortcutsList.tsx", "../../../src/components/Shortcuts/ShortcutsDialog.tsx", "../../../src/components/Shortcuts/ShortcutsHints.tsx", "../../../src/components/Shortcuts/ShortcutsSection.tsx", "../../../src/components/Tooltip/Tooltip.tsx", "../../../src/components/WelcomeTour/WelcomeTour.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { keySymbols } from '@dxos/keyboard';\n\nimport { shortcutKey } from './styles';\n\nexport const Key = ({ binding }: { binding: string }) => {\n return (\n <span role='term' className='inline-flex gap-1' aria-label={binding} id={binding}>\n {keySymbols(binding).map((c, i) => (\n <span key={i} className={shortcutKey}>\n {c}\n </span>\n ))}\n </span>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { mx } from '@dxos/react-ui-theme';\n\nexport const shortcutKey = mx(\n 'inline-flex min-is-[24px] bs-[24px] pli-0.5 justify-center items-center text-xs',\n 'rounded bg-neutral-100 dark:bg-neutral-900',\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { Fragment } from 'react';\n\nimport { Keyboard } from '@dxos/keyboard';\nimport { toLocalizedString, useTranslation } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { HELP_PLUGIN } from '../../meta';\n\nimport { Key } from './Key';\n\nexport const ShortcutsList = () => {\n const { t } = useTranslation(HELP_PLUGIN);\n const bindings = Keyboard.singleton.getBindings();\n\n // TODO(burdon): Get shortcuts from TextEditor.\n bindings.sort((a, b) => {\n return toLocalizedString(a.data, t)?.toLowerCase().localeCompare(toLocalizedString(b.data, t)?.toLowerCase());\n });\n\n return (\n <dl className={mx('is-fit grid grid-cols-[min-content_minmax(12rem,1fr)] gap-2 mlb-4 text-subdued select-none')}>\n {bindings.map((binding, i) => (\n <Fragment key={i}>\n <Key binding={binding.shortcut} />\n <span role='definition' className='mis-4' aria-labelledby={binding.shortcut}>\n {toLocalizedString(binding.data, t)}\n </span>\n </Fragment>\n ))}\n </dl>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';\n\nimport { HELP_PLUGIN } from '../../meta';\n\nimport { ShortcutsList } from './ShortcutsList';\n\nexport const SHORTCUTS_DIALOG = `${HELP_PLUGIN}/ShortcutsDialog`;\n\nexport const ShortcutsDialogContent = () => {\n const { t } = useTranslation(HELP_PLUGIN);\n\n return (\n <Dialog.Content classNames='p-0 bs-content max-bs-full md:max-is-[25rem] overflow-hidden'>\n <div role='none' className='flex justify-between mbe-1 pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>\n <Dialog.Title>{t('shortcuts dialog title')}</Dialog.Title>\n\n <Dialog.Close asChild>\n <Button density='fine' variant='ghost' autoFocus>\n <Icon icon='ph--x--bold' size={3} />\n </Button>\n </Dialog.Close>\n </div>\n\n <div className='flex items-center justify-center'>\n <ShortcutsList />\n </div>\n </Dialog.Content>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { type KeyBinding, Keyboard } from '@dxos/keyboard';\nimport { Button, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';\n\nimport { Key } from './Key';\n\nconst Shortcut = ({ binding }: { binding: KeyBinding }) => {\n const { t } = useTranslation('os');\n return (\n <div role='none' className='flex items-center gap-2 whitespace-nowrap'>\n <Key binding={binding.shortcut} />\n <span className='text-sm'>{toLocalizedString(binding.data, t)}</span>\n </div>\n );\n};\n\nexport const ShortcutsHints = ({ onClose }: { onClose?: () => void }) => {\n // TODO(burdon): Display by context/weight/cycle.\n const defaults = ['meta+k', 'meta+/', 'meta+,'];\n const bindings = Keyboard.singleton.getBindings();\n const hints = bindings.filter((binding) => defaults.includes(binding.shortcut));\n\n return (\n <div role='none' className='flex overflow-hidden px-2 gap-4'>\n {hints.map((binding) => (\n <Shortcut key={binding.shortcut} binding={binding} />\n ))}\n {onClose && (\n <Button variant='ghost' classNames='p-0 cursor-pointer' onClick={onClose}>\n <Icon icon='ph--x--regular' size={4} />\n </Button>\n )}\n </div>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { descriptionText } from '@dxos/react-ui-theme';\n\nimport { ShortcutsList } from './ShortcutsList';\n\nexport const ShortcutsSection = () => {\n return (\n <section className={descriptionText}>\n <ShortcutsList />\n </section>\n );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';\nimport React, { forwardRef } from 'react';\n// 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.\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport _floater from 'react-floater';\nimport { type Props, type TooltipRenderProps } from 'react-joyride';\n// 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.\n// eslint-disable-next-line unused-imports/no-unused-imports\nimport _typefest from 'type-fest';\n\nimport { Button, Icon, IconButton } from '@dxos/react-ui';\n\n// https://docs.react-joyride.com/styling\n// https://github.com/gilbarbara/react-floater\nexport const floaterProps: Props['floaterProps'] = {\n styles: {\n // Arrow color is set by joyride.\n arrow: {\n length: 8,\n spread: 16,\n },\n floater: {\n // TODO(burdon): Get tokens from theme.\n filter: 'drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.2))',\n },\n },\n};\n\n// TODO(burdon): Add info link to docs.\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipRenderProps>(\n ({ step: { title, content }, index, size, isLastStep, backProps, closeProps, primaryProps }, forwardedRef) => {\n const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'horizontal' });\n const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n\n return (\n <div\n className='flex flex-col is-[15rem] min-bs-[10rem] overflow-hidden rounded-md shadow-xl bg-accentSurface text-accentSurfaceText'\n role='tooltip'\n data-testid='helpPlugin.tooltip'\n data-step={index + 1}\n {...focusableGroupAttrs}\n ref={forwardedRef}\n >\n <div className='flex p-2'>\n <h2 className='grow pli-2 plb-1 text-lg font-medium text-accentSurfaceText'>{title}</h2>\n <IconButton\n density='fine'\n icon='ph--x--bold'\n iconOnly\n label={closeProps['aria-label']}\n onClick={closeProps.onClick}\n size={4}\n variant='primary'\n data-testid='helpPlugin.tooltip.close'\n />\n </div>\n <div className='flex grow pli-4 mlb-2'>{content}</div>\n <div className='flex p-2 items-center justify-between' {...arrowNavigationAttrs}>\n {\n <IconButton\n classNames={[!(index > 0 && backProps) && 'invisible']}\n icon='ph--caret-left--regular'\n iconOnly\n label={backProps['aria-label']}\n onClick={backProps.onClick}\n size={5}\n variant='primary'\n data-testid='helpPlugin.tooltip.back'\n />\n }\n <div className='flex grow gap-2 justify-center'>\n <div className='flex'>\n {Array.from({ length: size }).map((_, i) => (\n <Icon\n key={i}\n icon={index === i ? 'ph--circle--fill' : 'ph--circle--regular'}\n size={2}\n classNames='mli-1 cursor-pointer'\n />\n ))}\n </div>\n </div>\n {isLastStep ? (\n <Button\n variant='primary'\n onClick={closeProps.onClick}\n title={closeProps['aria-label']}\n autoFocus\n data-testid='helpPlugin.tooltip.finish'\n >\n Done\n </Button>\n ) : (\n <IconButton\n autoFocus\n icon='ph--caret-right--regular'\n iconOnly\n label={primaryProps['aria-label']}\n onClick={primaryProps.onClick}\n size={6}\n variant='primary'\n data-testid='helpPlugin.tooltip.next'\n />\n )}\n </div>\n </div>\n );\n },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useState } from 'react';\nimport Joyride, { ACTIONS, EVENTS } from 'react-joyride';\n\nimport { useLayout, usePluginManager } from '@dxos/app-framework';\nimport { useAsyncEffect } from '@dxos/react-ui';\n\nimport { HelpContext, type Step } from '../../types';\nimport { Tooltip, floaterProps } from '../Tooltip';\n\nconst addStepClass = (target: string | HTMLElement) => {\n const element = typeof target === 'string' ? document.querySelector(target) : target;\n if (element) {\n element.classList.add('joyride-target');\n }\n};\n\nconst removeTargetClass = (target: string | HTMLElement) => {\n const element = typeof target === 'string' ? document.querySelector(target) : target;\n if (element) {\n element.classList.remove('joyride-target');\n }\n};\n\nconst getTarget = (step: Step) => {\n return typeof step.target === 'string' ? document.querySelector(step.target) : step.target;\n};\n\n/**\n * Wait for the target element to be in the document.\n */\nconst waitForTarget = async (step: Step) => {\n if (typeof step.target === 'string') {\n const target = step.target;\n const element = document.querySelector(target);\n if (element) {\n return;\n }\n\n await new Promise<void>((resolve) => {\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.addedNodes.length > 0) {\n const element = document.querySelector(target);\n if (element) {\n observer.disconnect();\n resolve();\n }\n }\n });\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n });\n }\n};\n\nexport type WelcomeTourProps = {\n steps: Step[];\n running?: boolean;\n onRunningChanged?: (state: boolean) => any;\n};\n\nexport const WelcomeTour = ({ steps: initialSteps, running: runningProp, onRunningChanged }: WelcomeTourProps) => {\n const manager = usePluginManager();\n const layout = useLayout();\n const [running, setRunning] = useState(!!runningProp && !!getTarget(initialSteps[0]));\n const [stepIndex, _setStepIndex] = useState(0);\n const [steps, setSteps] = useState(initialSteps);\n\n const paused = layout.dialogOpen;\n\n const setStepIndex = (index: number) => {\n if (runningProp) {\n const step = steps[index];\n step?.before?.(manager.context);\n }\n _setStepIndex(index);\n };\n\n const setRunningChanged = (state: boolean) => {\n if (typeof runningProp !== 'undefined') {\n onRunningChanged?.(state);\n } else {\n if (state) {\n setStepIndex(0);\n setRunning(true);\n } else {\n setRunning(false);\n }\n }\n };\n\n useAsyncEffect(async () => {\n if (runningProp) {\n // This handles the case when the target is not yet in the document.\n // If the target is not in the document, when the joyride is turned on, it will not show the tooltip.\n await waitForTarget(steps[stepIndex]);\n setStepIndex(0);\n setRunning(true);\n } else if (typeof runningProp !== 'undefined') {\n setRunning(false);\n }\n }, [runningProp]);\n\n // https://docs.react-joyride.com/callback\n const callback: Joyride['callback'] = async (options) => {\n const { type, action, index, size } = options;\n switch (type) {\n case EVENTS.STEP_BEFORE:\n addStepClass(options.step.target);\n break;\n case EVENTS.TOUR_END:\n break;\n case EVENTS.STEP_AFTER:\n removeTargetClass(options.step.target);\n switch (action) {\n case ACTIONS.NEXT:\n if (index < size - 1) {\n setStepIndex(index + 1);\n }\n break;\n case ACTIONS.PREV:\n if (index > 0) {\n setStepIndex(index - 1);\n }\n break;\n case ACTIONS.CLOSE:\n setRunningChanged(false);\n setStepIndex(0);\n break;\n }\n break;\n }\n };\n\n return (\n <HelpContext.Provider\n value={{\n running: running && !paused,\n steps,\n setSteps,\n setIndex: setStepIndex,\n start: () => setRunningChanged(true),\n stop: () => setRunningChanged(false),\n }}\n >\n <style>\n {`.joyride-target {\n --controls-opacity: 1;\n }`}\n </style>\n <Joyride\n continuous={true}\n steps={steps}\n stepIndex={stepIndex}\n run={running && !paused}\n callback={callback}\n floaterProps={floaterProps}\n tooltipComponent={Tooltip}\n />\n </HelpContext.Provider>\n );\n};\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["React", "keySymbols", "mx", "shortcutKey", "mx", "Key", "binding", "span", "role", "className", "aria-label", "id", "keySymbols", "map", "c", "i", "key", "shortcutKey", "React", "Fragment", "Keyboard", "toLocalizedString", "useTranslation", "mx", "ShortcutsList", "t", "useTranslation", "HELP_PLUGIN", "bindings", "Keyboard", "singleton", "getBindings", "sort", "a", "b", "toLocalizedString", "data", "toLowerCase", "localeCompare", "React", "dl", "className", "mx", "map", "binding", "i", "Fragment", "key", "Key", "shortcut", "span", "role", "aria-labelledby", "React", "Button", "Dialog", "Icon", "useTranslation", "SHORTCUTS_DIALOG", "HELP_PLUGIN", "ShortcutsDialogContent", "t", "useTranslation", "React", "Dialog", "Content", "classNames", "div", "role", "className", "Title", "Close", "asChild", "Button", "density", "variant", "autoFocus", "Icon", "icon", "size", "ShortcutsList", "React", "Keyboard", "Button", "Icon", "toLocalizedString", "useTranslation", "Shortcut", "binding", "t", "useTranslation", "React", "div", "role", "className", "Key", "shortcut", "span", "toLocalizedString", "data", "ShortcutsHints", "onClose", "defaults", "bindings", "Keyboard", "singleton", "getBindings", "hints", "filter", "includes", "map", "key", "Button", "variant", "classNames", "onClick", "Icon", "icon", "size", "React", "descriptionText", "ShortcutsSection", "React", "section", "className", "descriptionText", "ShortcutsList", "useArrowNavigationGroup", "useFocusableGroup", "React", "forwardRef", "Button", "Icon", "IconButton", "floaterProps", "styles", "arrow", "length", "spread", "floater", "filter", "Tooltip", "forwardRef", "step", "title", "content", "index", "size", "isLastStep", "backProps", "closeProps", "primaryProps", "forwardedRef", "arrowNavigationAttrs", "useArrowNavigationGroup", "axis", "focusableGroupAttrs", "useFocusableGroup", "tabBehavior", "React", "div", "className", "role", "data-testid", "data-step", "ref", "h2", "IconButton", "density", "icon", "iconOnly", "label", "onClick", "variant", "classNames", "Array", "from", "map", "_", "i", "Icon", "key", "Button", "autoFocus", "React", "useState", "Joyride", "ACTIONS", "EVENTS", "useLayout", "usePluginManager", "useAsyncEffect", "addStepClass", "target", "element", "document", "querySelector", "classList", "add", "removeTargetClass", "remove", "getTarget", "step", "waitForTarget", "Promise", "resolve", "observer", "MutationObserver", "mutations", "forEach", "mutation", "addedNodes", "length", "disconnect", "observe", "body", "childList", "subtree", "WelcomeTour", "steps", "initialSteps", "running", "runningProp", "onRunningChanged", "manager", "usePluginManager", "layout", "useLayout", "setRunning", "useState", "stepIndex", "_setStepIndex", "setSteps", "paused", "dialogOpen", "setStepIndex", "index", "before", "context", "setRunningChanged", "state", "useAsyncEffect", "callback", "options", "type", "action", "size", "EVENTS", "STEP_BEFORE", "TOUR_END", "STEP_AFTER", "ACTIONS", "NEXT", "PREV", "CLOSE", "React", "HelpContext", "Provider", "value", "setIndex", "start", "stop", "style", "Joyride", "continuous", "run", "floaterProps", "tooltipComponent", "Tooltip"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types/schema.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Schema } from 'effect';\nimport { type Context, createContext } from 'react';\nimport { type Step as BaseStep } from 'react-joyride';\n\nimport { type PluginContext } from '@dxos/app-framework';\n\nimport { meta } from '../meta';\n\nexport type Step = BaseStep & {\n before?: (context: PluginContext) => 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 namespace HelpAction {\n export class Start extends Schema.TaggedClass<Start>()(`${meta.id}/action/start`, {\n input: Schema.Void,\n output: Schema.Void,\n }) {}\n}\n"],
|
|
5
|
-
"mappings": ";;;;;AAIA,SAASA,cAAc;AACvB,SAAuBC,qBAAqB;AAoBrC,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;UAEiBC,aAAAA;EACR,MAAMC,cAAcC,OAAOC,YAAW,EAAU,GAAGC,KAAKC,EAAE,iBAAiB;IAChFC,OAAOJ,OAAOK;IACdC,QAAQN,OAAOK;EACjB,CAAA,EAAA;EAAI;cAHSN,QAAAA;AAIf,GALiBD,eAAAA,aAAAA,CAAAA,EAAAA;;",
|
|
6
|
-
"names": ["Schema", "createContext", "HelpContext", "createContext", "running", "steps", "setSteps", "setIndex", "start", "stop", "HelpAction", "Start", "Schema", "TaggedClass", "meta", "id", "input", "Void", "output"]
|
|
7
|
-
}
|