@dxos/plugin-testing 0.8.4-main.9735255 → 0.8.4-main.bcb3aa67d6
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/index.mjs +30 -172
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +30 -171
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/StorybookPlugin.d.ts +1 -1
- package/dist/types/src/StorybookPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +15 -2
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/operation-handler.d.ts +6 -0
- package/dist/types/src/capabilities/operation-handler.d.ts.map +1 -0
- package/dist/types/src/capabilities/{state/state.d.ts → state.d.ts} +2 -2
- package/dist/types/src/capabilities/state.d.ts.map +1 -0
- package/dist/types/src/components/{Layout.d.ts → Layout/Layout.d.ts} +1 -1
- package/dist/types/src/components/Layout/Layout.d.ts.map +1 -0
- package/dist/types/src/components/Layout/index.d.ts +2 -0
- package/dist/types/src/components/Layout/index.d.ts.map +1 -0
- package/dist/types/src/core.d.ts +1 -6
- package/dist/types/src/core.d.ts.map +1 -1
- package/dist/types/src/operations/add-toast.d.ts +5 -0
- package/dist/types/src/operations/add-toast.d.ts.map +1 -0
- package/dist/types/src/operations/close.d.ts +5 -0
- package/dist/types/src/operations/close.d.ts.map +1 -0
- package/dist/types/src/operations/index.d.ts +3 -0
- package/dist/types/src/operations/index.d.ts.map +1 -0
- package/dist/types/src/operations/open.d.ts +5 -0
- package/dist/types/src/operations/open.d.ts.map +1 -0
- package/dist/types/src/operations/scroll-into-view.d.ts +5 -0
- package/dist/types/src/operations/scroll-into-view.d.ts.map +1 -0
- package/dist/types/src/operations/set-layout-mode.d.ts +5 -0
- package/dist/types/src/operations/set-layout-mode.d.ts.map +1 -0
- package/dist/types/src/operations/switch-workspace.d.ts +5 -0
- package/dist/types/src/operations/switch-workspace.d.ts.map +1 -0
- package/dist/types/src/operations/update-complementary.d.ts +5 -0
- package/dist/types/src/operations/update-complementary.d.ts.map +1 -0
- package/dist/types/src/operations/update-dialog.d.ts +5 -0
- package/dist/types/src/operations/update-dialog.d.ts.map +1 -0
- package/dist/types/src/operations/update-popover.d.ts +5 -0
- package/dist/types/src/operations/update-popover.d.ts.map +1 -0
- package/dist/types/src/operations/update-sidebar.d.ts +5 -0
- package/dist/types/src/operations/update-sidebar.d.ts.map +1 -0
- package/dist/types/src/operations/update-state.d.ts +5 -0
- package/dist/types/src/operations/update-state.d.ts.map +1 -0
- package/dist/types/src/types/capabilities.d.ts +2 -0
- package/dist/types/src/types/capabilities.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +26 -18
- package/src/StorybookPlugin.ts +18 -16
- package/src/capabilities/index.ts +8 -2
- package/src/capabilities/operation-handler.ts +16 -0
- package/src/capabilities/{state/state.tsx → state.tsx} +6 -7
- package/src/components/Layout/Layout.tsx +230 -0
- package/src/components/Layout/index.ts +5 -0
- package/src/core.ts +2 -6
- package/src/meta.ts +1 -1
- package/src/operations/add-toast.ts +22 -0
- package/src/operations/close.ts +14 -0
- package/src/operations/index.ts +18 -0
- package/src/operations/open.ts +18 -0
- package/src/operations/scroll-into-view.ts +14 -0
- package/src/operations/set-layout-mode.ts +14 -0
- package/src/operations/switch-workspace.ts +20 -0
- package/src/operations/update-complementary.ts +27 -0
- package/src/operations/update-dialog.ts +27 -0
- package/src/operations/update-popover.ts +37 -0
- package/src/operations/update-sidebar.ts +26 -0
- package/src/operations/update-state.ts +17 -0
- package/src/types/capabilities.ts +5 -2
- package/dist/lib/browser/chunk-YHPXIILW.mjs +0 -21
- package/dist/lib/browser/chunk-YHPXIILW.mjs.map +0 -7
- package/dist/lib/browser/operation-resolver-B2DOYB7C.mjs +0 -111
- package/dist/lib/browser/operation-resolver-B2DOYB7C.mjs.map +0 -7
- package/dist/lib/browser/state-2M3RMJYA.mjs +0 -42
- package/dist/lib/browser/state-2M3RMJYA.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-OWK6XE6C.mjs +0 -23
- package/dist/lib/node-esm/chunk-OWK6XE6C.mjs.map +0 -7
- package/dist/lib/node-esm/operation-resolver-DJI7OPBP.mjs +0 -112
- package/dist/lib/node-esm/operation-resolver-DJI7OPBP.mjs.map +0 -7
- package/dist/lib/node-esm/state-UF2MWBFU.mjs +0 -43
- package/dist/lib/node-esm/state-UF2MWBFU.mjs.map +0 -7
- package/dist/types/src/capabilities/operation-resolver/index.d.ts +0 -3
- package/dist/types/src/capabilities/operation-resolver/index.d.ts.map +0 -1
- package/dist/types/src/capabilities/operation-resolver/operation-resolver.d.ts +0 -5
- package/dist/types/src/capabilities/operation-resolver/operation-resolver.d.ts.map +0 -1
- package/dist/types/src/capabilities/state/index.d.ts +0 -14
- package/dist/types/src/capabilities/state/index.d.ts.map +0 -1
- package/dist/types/src/capabilities/state/state.d.ts.map +0 -1
- package/dist/types/src/components/Layout.d.ts.map +0 -1
- package/src/capabilities/operation-resolver/index.ts +0 -7
- package/src/capabilities/operation-resolver/operation-resolver.ts +0 -98
- package/src/capabilities/state/index.ts +0 -7
- package/src/components/Layout.tsx +0 -172
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import * as Effect from 'effect/Effect';
|
|
6
|
-
|
|
7
|
-
import { Capability, Common } from '@dxos/app-framework';
|
|
8
|
-
import { OperationResolver } from '@dxos/operation';
|
|
9
|
-
|
|
10
|
-
import { LayoutState, type LayoutStateProps } from '../../types';
|
|
11
|
-
|
|
12
|
-
export default Capability.makeModule(
|
|
13
|
-
Effect.fnUntraced(function* () {
|
|
14
|
-
const registry = yield* Capability.get(Common.Capability.AtomRegistry);
|
|
15
|
-
const stateAtom = yield* Capability.get(LayoutState);
|
|
16
|
-
|
|
17
|
-
const updateState = (fn: (state: LayoutStateProps) => Partial<LayoutStateProps>) => {
|
|
18
|
-
const current = registry.get(stateAtom);
|
|
19
|
-
registry.set(stateAtom, { ...current, ...fn(current) });
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
return Capability.contributes(Common.Capability.OperationResolver, [
|
|
23
|
-
OperationResolver.make({
|
|
24
|
-
operation: Common.LayoutOperation.UpdateSidebar,
|
|
25
|
-
handler: Effect.fnUntraced(function* ({ state }) {
|
|
26
|
-
updateState((layout) => {
|
|
27
|
-
const next = state ?? layout.sidebarState;
|
|
28
|
-
if (next !== layout.sidebarState) {
|
|
29
|
-
return { sidebarState: next };
|
|
30
|
-
}
|
|
31
|
-
return {};
|
|
32
|
-
});
|
|
33
|
-
}),
|
|
34
|
-
}),
|
|
35
|
-
OperationResolver.make({
|
|
36
|
-
operation: Common.LayoutOperation.UpdateComplementary,
|
|
37
|
-
handler: Effect.fnUntraced(function* ({ state }) {
|
|
38
|
-
updateState((layout) => {
|
|
39
|
-
const next = state ?? layout.complementarySidebarState;
|
|
40
|
-
if (next !== layout.complementarySidebarState) {
|
|
41
|
-
return { complementarySidebarState: next };
|
|
42
|
-
}
|
|
43
|
-
return {};
|
|
44
|
-
});
|
|
45
|
-
}),
|
|
46
|
-
}),
|
|
47
|
-
OperationResolver.make({
|
|
48
|
-
operation: Common.LayoutOperation.UpdateDialog,
|
|
49
|
-
handler: Effect.fnUntraced(function* ({
|
|
50
|
-
subject,
|
|
51
|
-
state,
|
|
52
|
-
type,
|
|
53
|
-
blockAlign,
|
|
54
|
-
overlayClasses,
|
|
55
|
-
overlayStyle,
|
|
56
|
-
props,
|
|
57
|
-
}) {
|
|
58
|
-
updateState(() => ({
|
|
59
|
-
dialogOpen: state ?? Boolean(subject),
|
|
60
|
-
dialogType: type ?? 'default',
|
|
61
|
-
dialogBlockAlign: blockAlign ?? 'center',
|
|
62
|
-
dialogOverlayClasses: overlayClasses,
|
|
63
|
-
dialogOverlayStyle: overlayStyle,
|
|
64
|
-
dialogContent: subject ? { component: subject, props } : null,
|
|
65
|
-
}));
|
|
66
|
-
}),
|
|
67
|
-
}),
|
|
68
|
-
OperationResolver.make({
|
|
69
|
-
operation: Common.LayoutOperation.UpdatePopover,
|
|
70
|
-
handler: Effect.fnUntraced(function* (input) {
|
|
71
|
-
const { subject, state, side, kind, props } = input;
|
|
72
|
-
updateState(() => {
|
|
73
|
-
const base: Partial<LayoutStateProps> = {
|
|
74
|
-
popoverKind: kind ?? 'base',
|
|
75
|
-
popoverTitle: kind === 'card' ? input.title : undefined,
|
|
76
|
-
popoverContent:
|
|
77
|
-
typeof subject === 'string' ? { component: subject, props } : subject ? { subject } : undefined,
|
|
78
|
-
popoverOpen: state ?? Boolean(subject),
|
|
79
|
-
popoverSide: side,
|
|
80
|
-
};
|
|
81
|
-
if ('variant' in input && input.variant === 'virtual') {
|
|
82
|
-
return { ...base, popoverVariant: 'virtual', popoverAnchor: input.anchor };
|
|
83
|
-
} else if ('anchorId' in input) {
|
|
84
|
-
return { ...base, popoverVariant: 'react', popoverAnchorId: input.anchorId };
|
|
85
|
-
}
|
|
86
|
-
return base;
|
|
87
|
-
});
|
|
88
|
-
}),
|
|
89
|
-
}),
|
|
90
|
-
OperationResolver.make({
|
|
91
|
-
operation: Common.LayoutOperation.SwitchWorkspace,
|
|
92
|
-
handler: Effect.fnUntraced(function* ({ subject }) {
|
|
93
|
-
updateState(() => ({ workspace: subject }));
|
|
94
|
-
}),
|
|
95
|
-
}),
|
|
96
|
-
]);
|
|
97
|
-
}),
|
|
98
|
-
);
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2023 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
|
|
6
|
-
import React, { type PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
7
|
-
|
|
8
|
-
import { Surface, useCapability } from '@dxos/app-framework/react';
|
|
9
|
-
import {
|
|
10
|
-
AlertDialog,
|
|
11
|
-
Dialog,
|
|
12
|
-
Main,
|
|
13
|
-
Popover,
|
|
14
|
-
type PopoverContentInteractOutsideEvent,
|
|
15
|
-
toLocalizedString,
|
|
16
|
-
useTranslation,
|
|
17
|
-
} from '@dxos/react-ui';
|
|
18
|
-
import { Card, Mosaic } from '@dxos/react-ui-mosaic';
|
|
19
|
-
import { descriptionMessage, mx } from '@dxos/ui-theme';
|
|
20
|
-
|
|
21
|
-
import { meta } from '../meta';
|
|
22
|
-
import { LayoutState, type LayoutStateProps } from '../types';
|
|
23
|
-
|
|
24
|
-
const debounce_delay = 100;
|
|
25
|
-
|
|
26
|
-
// TODO(wittjosiah): Support dialogs, tooltips, maybe toast.
|
|
27
|
-
export const Layout = ({ children }: PropsWithChildren<{}>) => {
|
|
28
|
-
const { t } = useTranslation(meta.id);
|
|
29
|
-
const trigger = useRef<HTMLButtonElement | null>(null);
|
|
30
|
-
const registry = useContext(RegistryContext);
|
|
31
|
-
const stateAtom = useCapability(LayoutState);
|
|
32
|
-
const layout = useAtomValue(stateAtom);
|
|
33
|
-
const [iter, setIter] = useState(0);
|
|
34
|
-
const [open, setOpen] = useState(false);
|
|
35
|
-
const debounceRef = useRef<NodeJS.Timeout | null>(null);
|
|
36
|
-
|
|
37
|
-
const updateState = useCallback(
|
|
38
|
-
(updates: Partial<LayoutStateProps>) => {
|
|
39
|
-
const current = registry.get(stateAtom);
|
|
40
|
-
registry.set(stateAtom, { ...current, ...updates });
|
|
41
|
-
},
|
|
42
|
-
[registry, stateAtom],
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
useEffect(() => {
|
|
46
|
-
setOpen(false);
|
|
47
|
-
if (debounceRef.current) {
|
|
48
|
-
clearTimeout(debounceRef.current);
|
|
49
|
-
debounceRef.current = null;
|
|
50
|
-
}
|
|
51
|
-
trigger.current = layout.popoverAnchor ?? null;
|
|
52
|
-
setIter((iter) => iter + 1);
|
|
53
|
-
if (layout.popoverOpen) {
|
|
54
|
-
debounceRef.current = setTimeout(() => setOpen(true), debounce_delay);
|
|
55
|
-
}
|
|
56
|
-
}, [layout.popoverAnchor, layout.popoverContent, layout.popoverOpen]);
|
|
57
|
-
|
|
58
|
-
const handleClose = useCallback(() => {
|
|
59
|
-
setOpen(false);
|
|
60
|
-
updateState({
|
|
61
|
-
popoverOpen: false,
|
|
62
|
-
popoverAnchor: undefined,
|
|
63
|
-
popoverAnchorId: undefined,
|
|
64
|
-
popoverSide: undefined,
|
|
65
|
-
});
|
|
66
|
-
}, [updateState]);
|
|
67
|
-
|
|
68
|
-
const handleInteractOutside = useCallback(
|
|
69
|
-
(event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
|
|
70
|
-
if (
|
|
71
|
-
// TODO(thure): CodeMirror should not focus itself when it updates.
|
|
72
|
-
event.type === 'dismissableLayer.focusOutside' &&
|
|
73
|
-
(event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
|
|
74
|
-
) {
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
} else {
|
|
77
|
-
handleClose();
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
[handleClose],
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
const DialogRoot = layout.dialogType === 'alert' ? AlertDialog.Root : Dialog.Root;
|
|
84
|
-
const DialogOverlay = layout.dialogType === 'alert' ? AlertDialog.Overlay : Dialog.Overlay;
|
|
85
|
-
|
|
86
|
-
return (
|
|
87
|
-
<div role='none' className='fixed inset-0 flex overflow-hidden'>
|
|
88
|
-
<Mosaic.Root>
|
|
89
|
-
<Popover.Root open={open}>
|
|
90
|
-
<Main.Root
|
|
91
|
-
navigationSidebarState={layout.sidebarState}
|
|
92
|
-
complementarySidebarState={layout.complementarySidebarState}
|
|
93
|
-
onNavigationSidebarStateChange={(next) => updateState({ sidebarState: next })}
|
|
94
|
-
onComplementarySidebarStateChange={(next) => updateState({ complementarySidebarState: next })}
|
|
95
|
-
>
|
|
96
|
-
{children}
|
|
97
|
-
</Main.Root>
|
|
98
|
-
|
|
99
|
-
<DialogRoot
|
|
100
|
-
modal={layout.dialogBlockAlign !== 'end'}
|
|
101
|
-
open={layout.dialogOpen}
|
|
102
|
-
onOpenChange={(nextOpen) => updateState({ dialogOpen: nextOpen })}
|
|
103
|
-
>
|
|
104
|
-
{layout.dialogBlockAlign === 'end' ? (
|
|
105
|
-
<Surface
|
|
106
|
-
role='dialog'
|
|
107
|
-
data={layout.dialogContent}
|
|
108
|
-
limit={1}
|
|
109
|
-
fallback={ContentError}
|
|
110
|
-
placeholder={<div />}
|
|
111
|
-
/>
|
|
112
|
-
) : (
|
|
113
|
-
<DialogOverlay
|
|
114
|
-
blockAlign={layout.dialogBlockAlign}
|
|
115
|
-
classNames={layout.dialogOverlayClasses}
|
|
116
|
-
style={layout.dialogOverlayStyle}
|
|
117
|
-
>
|
|
118
|
-
<Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} />
|
|
119
|
-
</DialogOverlay>
|
|
120
|
-
)}
|
|
121
|
-
</DialogRoot>
|
|
122
|
-
|
|
123
|
-
<Popover.VirtualTrigger key={iter} virtualRef={trigger} />
|
|
124
|
-
<Popover.Portal>
|
|
125
|
-
<Popover.Content
|
|
126
|
-
side={layout.popoverSide}
|
|
127
|
-
onInteractOutside={handleInteractOutside}
|
|
128
|
-
onEscapeKeyDown={handleInteractOutside}
|
|
129
|
-
sticky='always'
|
|
130
|
-
hideWhenDetached
|
|
131
|
-
>
|
|
132
|
-
<Popover.Viewport>
|
|
133
|
-
{layout.popoverKind === 'card' && (
|
|
134
|
-
<Card.Root>
|
|
135
|
-
<Card.Toolbar>
|
|
136
|
-
{/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
|
|
137
|
-
<span />
|
|
138
|
-
{layout.popoverTitle ? (
|
|
139
|
-
<Card.Title>{toLocalizedString(layout.popoverTitle, t)}</Card.Title>
|
|
140
|
-
) : (
|
|
141
|
-
<span />
|
|
142
|
-
)}
|
|
143
|
-
<Card.Close onClick={handleClose} />
|
|
144
|
-
</Card.Toolbar>
|
|
145
|
-
<Surface role='card--content' data={layout.popoverContent} limit={1} />
|
|
146
|
-
</Card.Root>
|
|
147
|
-
)}
|
|
148
|
-
{layout.popoverKind === 'base' && <Surface role='popover' data={layout.popoverContent} limit={1} />}
|
|
149
|
-
</Popover.Viewport>
|
|
150
|
-
<Popover.Arrow />
|
|
151
|
-
</Popover.Content>
|
|
152
|
-
</Popover.Portal>
|
|
153
|
-
</Popover.Root>
|
|
154
|
-
</Mosaic.Root>
|
|
155
|
-
</div>
|
|
156
|
-
);
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
export const ContentError = ({ error }: { error?: Error }) => {
|
|
160
|
-
const { t } = useTranslation(meta.id);
|
|
161
|
-
const errorString = error?.toString() ?? '';
|
|
162
|
-
return (
|
|
163
|
-
<div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
|
|
164
|
-
<p
|
|
165
|
-
role='alert'
|
|
166
|
-
className={mx(descriptionMessage, 'break-words rounded-md p-8', errorString.length < 256 && 'text-lg')}
|
|
167
|
-
>
|
|
168
|
-
{error ? errorString : t('error fallback message')}
|
|
169
|
-
</p>
|
|
170
|
-
</div>
|
|
171
|
-
);
|
|
172
|
-
};
|