@dxos/plugin-stack 0.8.4-main.70d3990 → 0.8.4-main.7996785055
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/StackContainer-YNTG5L56.mjs +289 -0
- package/dist/lib/browser/StackContainer-YNTG5L56.mjs.map +7 -0
- package/dist/lib/browser/{chunk-UIKFKRFJ.mjs → chunk-G4CLPE5A.mjs} +3 -3
- package/dist/lib/browser/chunk-G4CLPE5A.mjs.map +7 -0
- package/dist/lib/browser/{chunk-NHMDZYOB.mjs → chunk-YPQYUBQP.mjs} +9 -10
- package/dist/lib/browser/chunk-YPQYUBQP.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +35 -50
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/react-surface-ABL3K6Z6.mjs +33 -0
- package/dist/lib/browser/react-surface-ABL3K6Z6.mjs.map +7 -0
- package/dist/lib/browser/types/index.mjs +1 -1
- package/dist/lib/node-esm/StackContainer-DBMMOHAH.mjs +290 -0
- package/dist/lib/node-esm/StackContainer-DBMMOHAH.mjs.map +7 -0
- package/dist/lib/node-esm/{chunk-ZZFA7HIV.mjs → chunk-LELGTQAL.mjs} +9 -10
- package/dist/lib/node-esm/chunk-LELGTQAL.mjs.map +7 -0
- package/dist/lib/node-esm/{chunk-BGVQYUYP.mjs → chunk-LOZ6GH5A.mjs} +3 -3
- package/dist/lib/node-esm/chunk-LOZ6GH5A.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +35 -50
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/react-surface-DB42KXY3.mjs +34 -0
- package/dist/lib/node-esm/react-surface-DB42KXY3.mjs.map +7 -0
- package/dist/lib/node-esm/types/index.mjs +1 -1
- package/dist/types/src/StackPlugin.d.ts +2 -1
- package/dist/types/src/StackPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +1 -1
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface/index.d.ts +3 -0
- package/dist/types/src/capabilities/react-surface/index.d.ts.map +1 -0
- package/dist/types/src/capabilities/react-surface/react-surface.d.ts +5 -0
- package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +1 -0
- package/dist/types/src/components/{StackContext.d.ts → StackContext/StackContext.d.ts} +2 -1
- package/dist/types/src/components/StackContext/StackContext.d.ts.map +1 -0
- package/dist/types/src/components/StackContext/index.d.ts +2 -0
- package/dist/types/src/components/StackContext/index.d.ts.map +1 -0
- package/dist/types/src/components/StackSection/CaretDownUp.d.ts.map +1 -0
- package/dist/types/src/components/{StackSection.d.ts → StackSection/StackSection.d.ts} +1 -1
- package/dist/types/src/components/StackSection/StackSection.d.ts.map +1 -0
- package/dist/types/src/components/StackSection/index.d.ts +2 -0
- package/dist/types/src/components/StackSection/index.d.ts.map +1 -0
- package/dist/types/src/components/{StackSettings.d.ts → StackSettings/StackSettings.d.ts} +1 -1
- package/dist/types/src/components/StackSettings/StackSettings.d.ts.map +1 -0
- package/dist/types/src/components/StackSettings/index.d.ts +2 -0
- package/dist/types/src/components/StackSettings/index.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +2 -7
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/containers/StackContainer/StackContainer.d.ts +7 -0
- package/dist/types/src/containers/StackContainer/StackContainer.d.ts.map +1 -0
- package/dist/types/src/containers/StackContainer/index.d.ts +3 -0
- package/dist/types/src/containers/StackContainer/index.d.ts.map +1 -0
- package/dist/types/src/containers/index.d.ts +3 -0
- package/dist/types/src/containers/index.d.ts.map +1 -0
- package/dist/types/src/meta.d.ts +3 -3
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +1 -1
- package/dist/types/src/types/stack.d.ts +12 -13
- package/dist/types/src/types/stack.d.ts.map +1 -1
- package/dist/types/src/types/types.d.ts +2 -2
- package/dist/types/src/types/types.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +42 -36
- package/src/StackPlugin.ts +23 -38
- package/src/capabilities/index.ts +1 -3
- package/src/capabilities/react-surface/index.ts +7 -0
- package/src/capabilities/react-surface/react-surface.tsx +31 -0
- package/src/components/{StackContext.tsx → StackContext/StackContext.tsx} +3 -1
- package/src/components/StackContext/index.ts +5 -0
- package/src/components/{StackSection.tsx → StackSection/StackSection.tsx} +24 -22
- package/src/components/StackSection/index.ts +5 -0
- package/src/components/StackSettings/StackSettings.tsx +30 -0
- package/src/components/StackSettings/index.ts +5 -0
- package/src/components/index.ts +2 -4
- package/src/containers/StackContainer/StackContainer.tsx +171 -0
- package/src/containers/StackContainer/index.ts +7 -0
- package/src/containers/index.ts +7 -0
- package/src/meta.ts +4 -4
- package/src/types/stack.ts +11 -7
- package/src/types/types.ts +2 -2
- package/dist/lib/browser/StackContainer-DD3ZD5OE.mjs +0 -299
- package/dist/lib/browser/StackContainer-DD3ZD5OE.mjs.map +0 -7
- package/dist/lib/browser/chunk-NHMDZYOB.mjs.map +0 -7
- package/dist/lib/browser/chunk-UIKFKRFJ.mjs.map +0 -7
- package/dist/lib/browser/react-surface-HVPK7YZQ.mjs +0 -39
- package/dist/lib/browser/react-surface-HVPK7YZQ.mjs.map +0 -7
- package/dist/lib/node-esm/StackContainer-JGWPXSUF.mjs +0 -300
- package/dist/lib/node-esm/StackContainer-JGWPXSUF.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-BGVQYUYP.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-ZZFA7HIV.mjs.map +0 -7
- package/dist/lib/node-esm/react-surface-HYSD7AC2.mjs +0 -40
- package/dist/lib/node-esm/react-surface-HYSD7AC2.mjs.map +0 -7
- package/dist/types/src/capabilities/react-surface.d.ts +0 -4
- package/dist/types/src/capabilities/react-surface.d.ts.map +0 -1
- package/dist/types/src/components/CaretDownUp.d.ts.map +0 -1
- package/dist/types/src/components/StackContainer.d.ts +0 -9
- package/dist/types/src/components/StackContainer.d.ts.map +0 -1
- package/dist/types/src/components/StackContext.d.ts.map +0 -1
- package/dist/types/src/components/StackSection.d.ts.map +0 -1
- package/dist/types/src/components/StackSettings.d.ts.map +0 -1
- package/src/capabilities/react-surface.tsx +0 -29
- package/src/components/StackContainer.tsx +0 -172
- package/src/components/StackSettings.tsx +0 -30
- /package/dist/types/src/components/{CaretDownUp.d.ts → StackSection/CaretDownUp.d.ts} +0 -0
- /package/src/components/{CaretDownUp.tsx → StackSection/CaretDownUp.tsx} +0 -0
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-stack",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.7996785055",
|
|
4
4
|
"description": "DXOS Surface plugin for Stack entities",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/dxos/dxos"
|
|
10
|
+
},
|
|
7
11
|
"license": "MIT",
|
|
8
12
|
"author": "DXOS.org",
|
|
9
13
|
"sideEffects": true,
|
|
@@ -35,49 +39,51 @@
|
|
|
35
39
|
"src"
|
|
36
40
|
],
|
|
37
41
|
"dependencies": {
|
|
38
|
-
"@
|
|
39
|
-
"@
|
|
40
|
-
"@preact/signals-core": "^1.12.1",
|
|
42
|
+
"@effect-atom/atom-react": "^0.5.0",
|
|
43
|
+
"@fluentui/react-tabster": "9.26.11",
|
|
41
44
|
"@radix-ui/react-collapsible": "1.1.3",
|
|
42
|
-
"effect": "3.
|
|
45
|
+
"effect": "3.20.0",
|
|
43
46
|
"node-fetch": "^2.6.0",
|
|
44
47
|
"react-is": "~19.2.0",
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/client": "0.8.4-main.
|
|
48
|
-
"@dxos/echo": "0.8.4-main.
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/plugin-
|
|
54
|
-
"@dxos/plugin-
|
|
55
|
-
"@dxos/
|
|
56
|
-
"@dxos/
|
|
57
|
-
"@dxos/react-ui-
|
|
58
|
-
"@dxos/react-
|
|
59
|
-
"@dxos/
|
|
60
|
-
"@dxos/
|
|
61
|
-
"@dxos/
|
|
62
|
-
"@dxos/react-ui-
|
|
48
|
+
"@dxos/app-framework": "0.8.4-main.7996785055",
|
|
49
|
+
"@dxos/async": "0.8.4-main.7996785055",
|
|
50
|
+
"@dxos/client": "0.8.4-main.7996785055",
|
|
51
|
+
"@dxos/echo": "0.8.4-main.7996785055",
|
|
52
|
+
"@dxos/app-toolkit": "0.8.4-main.7996785055",
|
|
53
|
+
"@dxos/invariant": "0.8.4-main.7996785055",
|
|
54
|
+
"@dxos/operation": "0.8.4-main.7996785055",
|
|
55
|
+
"@dxos/echo-atom": "0.8.4-main.7996785055",
|
|
56
|
+
"@dxos/plugin-deck": "0.8.4-main.7996785055",
|
|
57
|
+
"@dxos/plugin-graph": "0.8.4-main.7996785055",
|
|
58
|
+
"@dxos/plugin-client": "0.8.4-main.7996785055",
|
|
59
|
+
"@dxos/plugin-space": "0.8.4-main.7996785055",
|
|
60
|
+
"@dxos/react-ui-attention": "0.8.4-main.7996785055",
|
|
61
|
+
"@dxos/react-client": "0.8.4-main.7996785055",
|
|
62
|
+
"@dxos/react-ui-form": "0.8.4-main.7996785055",
|
|
63
|
+
"@dxos/react-ui-search": "0.8.4-main.7996785055",
|
|
64
|
+
"@dxos/schema": "0.8.4-main.7996785055",
|
|
65
|
+
"@dxos/react-ui-stack": "0.8.4-main.7996785055",
|
|
66
|
+
"@dxos/util": "0.8.4-main.7996785055",
|
|
67
|
+
"@dxos/types": "0.8.4-main.7996785055"
|
|
63
68
|
},
|
|
64
69
|
"devDependencies": {
|
|
65
70
|
"@babel/core": "^7.18.13",
|
|
66
|
-
"@types/react": "~19.2.
|
|
67
|
-
"@types/react-dom": "~19.2.
|
|
68
|
-
"react": "~19.2.
|
|
69
|
-
"react-dom": "~19.2.
|
|
70
|
-
"vite": "7.1.
|
|
71
|
-
"@dxos/react-ui": "0.8.4-main.
|
|
72
|
-
"@dxos/
|
|
73
|
-
"@dxos/
|
|
71
|
+
"@types/react": "~19.2.7",
|
|
72
|
+
"@types/react-dom": "~19.2.3",
|
|
73
|
+
"react": "~19.2.3",
|
|
74
|
+
"react-dom": "~19.2.3",
|
|
75
|
+
"vite": "^7.1.11",
|
|
76
|
+
"@dxos/react-ui": "0.8.4-main.7996785055",
|
|
77
|
+
"@dxos/storybook-utils": "0.8.4-main.7996785055",
|
|
78
|
+
"@dxos/ui-theme": "0.8.4-main.7996785055"
|
|
74
79
|
},
|
|
75
80
|
"peerDependencies": {
|
|
76
|
-
"effect": "^
|
|
77
|
-
"
|
|
78
|
-
"react
|
|
79
|
-
"
|
|
80
|
-
"@dxos/react-ui
|
|
81
|
+
"@effect-atom/atom-react": "^0.5.0",
|
|
82
|
+
"effect": "3.20.0",
|
|
83
|
+
"react": "~19.2.3",
|
|
84
|
+
"react-dom": "~19.2.3",
|
|
85
|
+
"@dxos/react-ui": "0.8.4-main.7996785055",
|
|
86
|
+
"@dxos/ui-theme": "0.8.4-main.7996785055"
|
|
81
87
|
},
|
|
82
88
|
"publishConfig": {
|
|
83
89
|
"access": "public"
|
package/src/StackPlugin.ts
CHANGED
|
@@ -2,50 +2,35 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { Plugin } from '@dxos/app-framework';
|
|
6
|
+
import { AppPlugin } from '@dxos/app-toolkit';
|
|
6
7
|
import { type Obj } from '@dxos/echo';
|
|
7
|
-
import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
|
|
8
8
|
|
|
9
9
|
import { ReactSurface } from './capabilities';
|
|
10
10
|
import { SECTION_IDENTIFIER, meta } from './meta';
|
|
11
11
|
import { translations } from './translations';
|
|
12
12
|
import { StackViewType } from './types';
|
|
13
13
|
|
|
14
|
-
export const StackPlugin =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
switch (type) {
|
|
29
|
-
case 'node':
|
|
30
|
-
return { id: section.object.id, label: (section.object as any).title, data: section.object };
|
|
31
|
-
case 'object':
|
|
32
|
-
return section.object;
|
|
33
|
-
case 'view-object':
|
|
34
|
-
return section;
|
|
35
|
-
}
|
|
36
|
-
},
|
|
14
|
+
export const StackPlugin = Plugin.define(meta).pipe(
|
|
15
|
+
AppPlugin.addMetadataModule({
|
|
16
|
+
metadata: {
|
|
17
|
+
id: SECTION_IDENTIFIER,
|
|
18
|
+
metadata: {
|
|
19
|
+
parse: (section: { object: Obj.Unknown }, type: string) => {
|
|
20
|
+
switch (type) {
|
|
21
|
+
case 'node':
|
|
22
|
+
return { id: section.object.id, label: (section.object as any).title, data: section.object };
|
|
23
|
+
case 'object':
|
|
24
|
+
return section.object;
|
|
25
|
+
case 'view-object':
|
|
26
|
+
return section;
|
|
27
|
+
}
|
|
37
28
|
},
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
}),
|
|
41
|
-
defineModule({
|
|
42
|
-
id: `${meta.id}/module/schema`,
|
|
43
|
-
activatesOn: ClientEvents.SetupSchema,
|
|
44
|
-
activate: () => contributes(ClientCapabilities.Schema, [StackViewType]),
|
|
45
|
-
}),
|
|
46
|
-
defineModule({
|
|
47
|
-
id: `${meta.id}/module/react-surface`,
|
|
48
|
-
activatesOn: Events.SetupReactSurface,
|
|
49
|
-
activate: ReactSurface,
|
|
29
|
+
},
|
|
30
|
+
},
|
|
50
31
|
}),
|
|
51
|
-
])
|
|
32
|
+
AppPlugin.addSchemaModule({ schema: [StackViewType] }),
|
|
33
|
+
AppPlugin.addSurfaceModule({ activate: ReactSurface }),
|
|
34
|
+
AppPlugin.addTranslationsModule({ translations }),
|
|
35
|
+
Plugin.make,
|
|
36
|
+
);
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as Effect from 'effect/Effect';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
|
|
8
|
+
import { Capabilities, Capability } from '@dxos/app-framework';
|
|
9
|
+
import { Surface } from '@dxos/app-framework/ui';
|
|
10
|
+
import { Obj } from '@dxos/echo';
|
|
11
|
+
import { Collection } from '@dxos/echo';
|
|
12
|
+
|
|
13
|
+
import { StackContainer } from '../../containers';
|
|
14
|
+
import { meta } from '../../meta';
|
|
15
|
+
|
|
16
|
+
export default Capability.makeModule(() =>
|
|
17
|
+
Effect.succeed(
|
|
18
|
+
Capability.contributes(
|
|
19
|
+
Capabilities.ReactSurface,
|
|
20
|
+
Surface.create({
|
|
21
|
+
id: `${meta.id}.article`,
|
|
22
|
+
role: 'article',
|
|
23
|
+
filter: (data): data is { attendableId: string; subject: Collection.Collection } =>
|
|
24
|
+
typeof data.attendableId === 'string' && Obj.instanceOf(Collection.Collection, data.subject),
|
|
25
|
+
component: ({ role, data }) => {
|
|
26
|
+
return <StackContainer attendableId={data.attendableId} role={role} subject={data.subject} />;
|
|
27
|
+
},
|
|
28
|
+
}),
|
|
29
|
+
),
|
|
30
|
+
),
|
|
31
|
+
);
|
|
@@ -4,9 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
import { createContext, useContext } from 'react';
|
|
6
6
|
|
|
7
|
-
import { type AddSectionPosition } from '
|
|
7
|
+
import { type AddSectionPosition } from '../../types';
|
|
8
8
|
|
|
9
9
|
export type StackContextValue = {
|
|
10
|
+
attendableId: string;
|
|
10
11
|
onCollapse: (id: string, collapsed: boolean) => void;
|
|
11
12
|
onNavigate: (id: string) => Promise<void>;
|
|
12
13
|
onDelete: (id: string) => Promise<void>;
|
|
@@ -14,6 +15,7 @@ export type StackContextValue = {
|
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
export const StackContext = createContext<StackContextValue>({
|
|
18
|
+
attendableId: '',
|
|
17
19
|
onCollapse: () => {},
|
|
18
20
|
onNavigate: async () => {},
|
|
19
21
|
onDelete: async () => {},
|
|
@@ -5,19 +5,19 @@
|
|
|
5
5
|
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
6
6
|
import React, { useMemo, useState } from 'react';
|
|
7
7
|
|
|
8
|
-
import { Surface } from '@dxos/app-framework/
|
|
8
|
+
import { Surface } from '@dxos/app-framework/ui';
|
|
9
9
|
import { DropdownMenu, Icon, IconButton, useTranslation } from '@dxos/react-ui';
|
|
10
10
|
import { useAttentionAttributes } from '@dxos/react-ui-attention';
|
|
11
11
|
import { StackItem } from '@dxos/react-ui-stack';
|
|
12
|
-
import { getSize, mx
|
|
12
|
+
import { getSize, mx } from '@dxos/ui-theme';
|
|
13
13
|
|
|
14
|
-
import { meta } from '
|
|
15
|
-
import { type StackSectionItem } from '
|
|
14
|
+
import { meta } from '../../meta';
|
|
15
|
+
import { type StackSectionItem } from '../../types';
|
|
16
|
+
import { useStack } from '../StackContext';
|
|
16
17
|
|
|
17
18
|
import { CaretDownUp } from './CaretDownUp';
|
|
18
|
-
import { useStack } from './StackContext';
|
|
19
19
|
|
|
20
|
-
const sectionActionDimensions = 'p-1
|
|
20
|
+
const sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';
|
|
21
21
|
|
|
22
22
|
export type StackSectionProps = StackSectionItem;
|
|
23
23
|
|
|
@@ -28,15 +28,17 @@ export const StackSection = ({
|
|
|
28
28
|
metadata: { icon = 'ph--placeholder--regular' },
|
|
29
29
|
}: StackSectionProps) => {
|
|
30
30
|
const { t } = useTranslation(meta.id);
|
|
31
|
-
const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
|
|
31
|
+
const { attendableId: parentAttendableId, onNavigate, onAdd, onCollapse, onDelete } = useStack();
|
|
32
32
|
const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
|
|
33
|
-
const
|
|
33
|
+
const attendableId = `${parentAttendableId}/${object.id}`;
|
|
34
|
+
const attentionAttrs = useAttentionAttributes(attendableId);
|
|
34
35
|
const stackItem = useMemo(() => ({ id }), [id]);
|
|
36
|
+
const data = useMemo(() => ({ attendableId, subject: object }), [object, attendableId]);
|
|
35
37
|
|
|
36
38
|
return (
|
|
37
39
|
<CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>
|
|
38
40
|
<StackItem.Root item={stackItem} role='section' {...attentionAttrs}>
|
|
39
|
-
<StackItem.Heading classNames='attention-surface'>
|
|
41
|
+
<StackItem.Heading classNames='dx-attention-surface'>
|
|
40
42
|
<span className='sr-only'>{view.title}</span>
|
|
41
43
|
<StackItem.HeadingStickyContent>
|
|
42
44
|
<DropdownMenu.Root
|
|
@@ -47,7 +49,7 @@ export const StackSection = ({
|
|
|
47
49
|
>
|
|
48
50
|
<DropdownMenu.Trigger asChild>
|
|
49
51
|
<StackItem.SigilButton>
|
|
50
|
-
<Icon icon={icon}
|
|
52
|
+
<Icon icon={icon} classNames='transition-opacity' />
|
|
51
53
|
</StackItem.SigilButton>
|
|
52
54
|
</DropdownMenu.Trigger>
|
|
53
55
|
<DropdownMenu.Portal>
|
|
@@ -55,28 +57,28 @@ export const StackSection = ({
|
|
|
55
57
|
<DropdownMenu.Viewport>
|
|
56
58
|
{view.collapsed ? (
|
|
57
59
|
<DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
|
|
58
|
-
<Icon icon='ph--arrow-right--regular'
|
|
59
|
-
<span className='
|
|
60
|
+
<Icon icon='ph--arrow-right--regular' />
|
|
61
|
+
<span className='ms-2 grow'>{t('navigate to section label')}</span>
|
|
60
62
|
</DropdownMenu.Item>
|
|
61
63
|
) : (
|
|
62
64
|
<CollapsiblePrimitive.Trigger asChild>
|
|
63
65
|
<DropdownMenu.Item>
|
|
64
66
|
<CaretDownUp className={getSize(5)} />
|
|
65
|
-
<span className='
|
|
67
|
+
<span className='ms-2 grow'>{t('collapse label')}</span>
|
|
66
68
|
</DropdownMenu.Item>
|
|
67
69
|
</CollapsiblePrimitive.Trigger>
|
|
68
70
|
)}
|
|
69
71
|
<DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>
|
|
70
|
-
<Icon icon='ph--arrow-line-up--regular'
|
|
71
|
-
<span className='
|
|
72
|
+
<Icon icon='ph--arrow-line-up--regular' />
|
|
73
|
+
<span className='ms-2 grow'>{t('add section before label')}</span>
|
|
72
74
|
</DropdownMenu.Item>
|
|
73
75
|
<DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>
|
|
74
|
-
<Icon icon='ph--arrow-line-down--regular'
|
|
75
|
-
<span className='
|
|
76
|
+
<Icon icon='ph--arrow-line-down--regular' />
|
|
77
|
+
<span className='ms-2 grow'>{t('add section after label')}</span>
|
|
76
78
|
</DropdownMenu.Item>
|
|
77
79
|
<DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>
|
|
78
|
-
<Icon icon='ph--trash--regular'
|
|
79
|
-
<span className='
|
|
80
|
+
<Icon icon='ph--trash--regular' />
|
|
81
|
+
<span className='ms-2 grow'>{t('remove section label')}</span>
|
|
80
82
|
</DropdownMenu.Item>
|
|
81
83
|
</DropdownMenu.Viewport>
|
|
82
84
|
<DropdownMenu.Arrow />
|
|
@@ -107,11 +109,11 @@ export const StackSection = ({
|
|
|
107
109
|
</StackItem.HeadingStickyContent>
|
|
108
110
|
</StackItem.Heading>
|
|
109
111
|
<CollapsiblePrimitive.Content>
|
|
110
|
-
<Surface role='section' data={
|
|
112
|
+
<Surface.Surface role='section' data={data} limit={1} placeholder={<></>} />
|
|
111
113
|
</CollapsiblePrimitive.Content>
|
|
112
114
|
{view.collapsed && (
|
|
113
|
-
<StackItem.Content classNames='attention-surface'>
|
|
114
|
-
<h2 className={mx('flex items-center p-4 font-medium'
|
|
115
|
+
<StackItem.Content classNames='dx-attention-surface'>
|
|
116
|
+
<h2 className={mx('flex items-center p-4 font-medium')}>{view.title}</h2>
|
|
115
117
|
</StackItem.Content>
|
|
116
118
|
)}
|
|
117
119
|
</StackItem.Root>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
import { Input, useTranslation } from '@dxos/react-ui';
|
|
8
|
+
import { Settings } from '@dxos/react-ui-form';
|
|
9
|
+
|
|
10
|
+
import { meta } from '../../meta';
|
|
11
|
+
import { type StackSettingsProps } from '../../types';
|
|
12
|
+
|
|
13
|
+
export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
|
|
14
|
+
const { t } = useTranslation(meta.id);
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<Settings.Root>
|
|
18
|
+
<Settings.Section title={t('settings title', { ns: meta.id })}>
|
|
19
|
+
<Settings.Group>
|
|
20
|
+
<Settings.ItemInput title={t('settings separation label')}>
|
|
21
|
+
<Input.Switch
|
|
22
|
+
checked={settings.separation}
|
|
23
|
+
onCheckedChange={(checked) => (settings.separation = !!checked)}
|
|
24
|
+
/>
|
|
25
|
+
</Settings.ItemInput>
|
|
26
|
+
</Settings.Group>
|
|
27
|
+
</Settings.Section>
|
|
28
|
+
</Settings.Root>
|
|
29
|
+
);
|
|
30
|
+
};
|
package/src/components/index.ts
CHANGED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2023 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { Atom, useAtomValue } from '@effect-atom/atom-react';
|
|
6
|
+
import * as Option from 'effect/Option';
|
|
7
|
+
import React, { useCallback, useState } from 'react';
|
|
8
|
+
|
|
9
|
+
import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
|
|
10
|
+
import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
|
|
11
|
+
import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
|
|
12
|
+
import { useAppGraph } from '@dxos/app-toolkit/ui';
|
|
13
|
+
import { Obj, type Ref } from '@dxos/echo';
|
|
14
|
+
import { type Collection } from '@dxos/echo';
|
|
15
|
+
import { AtomObj } from '@dxos/echo-atom';
|
|
16
|
+
import { Graph } from '@dxos/plugin-graph';
|
|
17
|
+
import { SpaceOperation } from '@dxos/plugin-space/operations';
|
|
18
|
+
import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
|
|
19
|
+
import { Stack, StackItem } from '@dxos/react-ui-stack';
|
|
20
|
+
import { isNonNullable } from '@dxos/util';
|
|
21
|
+
|
|
22
|
+
import { StackContext, StackSection } from '../../components';
|
|
23
|
+
import { meta } from '../../meta';
|
|
24
|
+
import {
|
|
25
|
+
type AddSectionPosition,
|
|
26
|
+
type CollapsedSections,
|
|
27
|
+
type StackSectionItem,
|
|
28
|
+
type StackSectionMetadata,
|
|
29
|
+
type StackSectionView,
|
|
30
|
+
} from '../../types';
|
|
31
|
+
|
|
32
|
+
const collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>
|
|
33
|
+
Atom.make((get) => {
|
|
34
|
+
const snapshot = get(AtomObj.make(collection));
|
|
35
|
+
return (
|
|
36
|
+
snapshot.objects
|
|
37
|
+
// TODO(wittjosiah): Why isn't this type inferred correctly?
|
|
38
|
+
.map((ref: Ref.Ref<Obj.Unknown>) => get(AtomObj.makeWithReactive(ref)))
|
|
39
|
+
.filter(isNonNullable)
|
|
40
|
+
);
|
|
41
|
+
}),
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
type StackContainerProps = SurfaceComponentProps<Collection.Collection>;
|
|
45
|
+
|
|
46
|
+
export const StackContainer = ({ attendableId, subject: collection }: StackContainerProps) => {
|
|
47
|
+
const { invokePromise } = useOperationInvoker();
|
|
48
|
+
const { graph } = useAppGraph();
|
|
49
|
+
const { t } = useTranslation(meta.id);
|
|
50
|
+
const allMetadata = useCapabilities(AppCapabilities.Metadata);
|
|
51
|
+
const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
|
|
52
|
+
|
|
53
|
+
// TODO(wittjosiah): Re-implement stack views with relations.
|
|
54
|
+
// const defaultStack = useMemo(() => Obj.make(StackViewType, { sections: {} }), [collection]);
|
|
55
|
+
// const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;
|
|
56
|
+
// useEffect(() => {
|
|
57
|
+
// if (!collection.views[StackViewType.typename]) {
|
|
58
|
+
// collection.views[StackViewType.typename] = Ref.make(stack);
|
|
59
|
+
// }
|
|
60
|
+
// }, [collection, stack]);
|
|
61
|
+
|
|
62
|
+
const collectionObjects = useAtomValue(collectionObjectsFamily(collection));
|
|
63
|
+
const items = collectionObjects.map((object: Obj.Unknown) => {
|
|
64
|
+
const metadata = allMetadata.find((m) => m.id === (Obj.getTypename(object) ?? 'never'))
|
|
65
|
+
?.metadata as StackSectionMetadata;
|
|
66
|
+
const view = {
|
|
67
|
+
// ...stack.sections[object.id],
|
|
68
|
+
collapsed: collapsedSections[Obj.getDXN(object).toString()],
|
|
69
|
+
title:
|
|
70
|
+
(object as any)?.title ??
|
|
71
|
+
// TODO(wittjosiah): `getNode` is not reactive.
|
|
72
|
+
toLocalizedString(
|
|
73
|
+
Graph.getNode(graph, Obj.getDXN(object).toString()).pipe(Option.getOrNull)?.properties.label,
|
|
74
|
+
t,
|
|
75
|
+
),
|
|
76
|
+
} as StackSectionView;
|
|
77
|
+
return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
const handleDelete = useCallback(
|
|
81
|
+
async (id: string) => {
|
|
82
|
+
const index = collection.objects
|
|
83
|
+
.map((object) => object.target)
|
|
84
|
+
.filter(isNonNullable)
|
|
85
|
+
.findIndex((section) => Obj.getDXN(section).toString() === id);
|
|
86
|
+
const object = collection.objects[index].target;
|
|
87
|
+
if (Obj.isObject(object)) {
|
|
88
|
+
await invokePromise(SpaceOperation.RemoveObjects, {
|
|
89
|
+
objects: [object],
|
|
90
|
+
target: collection,
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
|
|
94
|
+
// delete stack.sections[Path.last(path)];
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
[collection, invokePromise],
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
const handleAdd = useCallback(
|
|
101
|
+
async (id: string, position: AddSectionPosition) => {
|
|
102
|
+
// TODO(wittjosiah): Use object creation dialog.
|
|
103
|
+
await invokePromise(LayoutOperation.UpdateDialog, {
|
|
104
|
+
subject: `${meta.id}.AddSectionDialog`,
|
|
105
|
+
blockAlign: 'start',
|
|
106
|
+
props: {
|
|
107
|
+
path: id,
|
|
108
|
+
position,
|
|
109
|
+
collection,
|
|
110
|
+
},
|
|
111
|
+
});
|
|
112
|
+
},
|
|
113
|
+
[collection, invokePromise],
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
const handleNavigate = useCallback(
|
|
117
|
+
async (id: string) => {
|
|
118
|
+
await invokePromise(LayoutOperation.Open, { subject: [id] });
|
|
119
|
+
},
|
|
120
|
+
[invokePromise],
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
const handleCollapse = useCallback(
|
|
124
|
+
(id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
|
|
125
|
+
[],
|
|
126
|
+
);
|
|
127
|
+
|
|
128
|
+
const handleAddSection = useCallback(
|
|
129
|
+
() =>
|
|
130
|
+
invokePromise(SpaceOperation.OpenCreateObject, {
|
|
131
|
+
target: collection,
|
|
132
|
+
navigable: false,
|
|
133
|
+
}),
|
|
134
|
+
[collection, invokePromise],
|
|
135
|
+
);
|
|
136
|
+
|
|
137
|
+
return (
|
|
138
|
+
<StackItem.Content toolbar classNames='dx-document'>
|
|
139
|
+
<Toolbar.Root>
|
|
140
|
+
<Toolbar.IconButton
|
|
141
|
+
icon='ph--plus--regular'
|
|
142
|
+
iconOnly
|
|
143
|
+
label='Add section'
|
|
144
|
+
data-testid='stack.addSection'
|
|
145
|
+
onClick={handleAddSection}
|
|
146
|
+
/>
|
|
147
|
+
</Toolbar.Root>
|
|
148
|
+
<StackContext.Provider
|
|
149
|
+
value={{
|
|
150
|
+
attendableId: attendableId!,
|
|
151
|
+
onCollapse: handleCollapse,
|
|
152
|
+
onNavigate: handleNavigate,
|
|
153
|
+
onDelete: handleDelete,
|
|
154
|
+
onAdd: handleAdd,
|
|
155
|
+
}}
|
|
156
|
+
>
|
|
157
|
+
<Stack
|
|
158
|
+
orientation='vertical'
|
|
159
|
+
size='intrinsic'
|
|
160
|
+
id={Obj.getDXN(collection).toString()}
|
|
161
|
+
data-testid='main.stack'
|
|
162
|
+
classNames='overflow-y-auto'
|
|
163
|
+
>
|
|
164
|
+
{items.map((item) => (
|
|
165
|
+
<StackSection key={item.id} {...item} />
|
|
166
|
+
))}
|
|
167
|
+
</Stack>
|
|
168
|
+
</StackContext.Provider>
|
|
169
|
+
</StackItem.Content>
|
|
170
|
+
);
|
|
171
|
+
};
|
package/src/meta.ts
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { type
|
|
5
|
+
import { type Plugin } from '@dxos/app-framework';
|
|
6
6
|
import { trim } from '@dxos/util';
|
|
7
7
|
|
|
8
|
-
export const SECTION_IDENTIFIER = 'dxos.
|
|
8
|
+
export const SECTION_IDENTIFIER = 'org.dxos.type.stack-section';
|
|
9
9
|
|
|
10
|
-
export const meta:
|
|
11
|
-
id: 'dxos.
|
|
10
|
+
export const meta: Plugin.Meta = {
|
|
11
|
+
id: 'org.dxos.plugin.stack',
|
|
12
12
|
// TODO(wittjosiah): Prevents "stacks" language from being exposed to users in settings panel.
|
|
13
13
|
// Conside renaming this to the collection plugin and trying to factor more collections logic from the space plugin.
|
|
14
14
|
name: 'Collections',
|