@dxos/plugin-navtree 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

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.
Files changed (38) hide show
  1. package/dist/lib/browser/{chunk-MFAWMFJC.mjs → chunk-ZJPL4XJD.mjs} +83 -72
  2. package/dist/lib/browser/chunk-ZJPL4XJD.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +10 -4
  4. package/dist/lib/browser/index.mjs.map +3 -3
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/{react-surface-HGA3TAQU.mjs → react-surface-H3JRTVNU.mjs} +2 -2
  7. package/dist/lib/browser/{state-R2UMYAHN.mjs → state-J6AKZRB4.mjs} +7 -4
  8. package/dist/lib/browser/state-J6AKZRB4.mjs.map +7 -0
  9. package/dist/types/src/NavTreePlugin.d.ts.map +1 -1
  10. package/dist/types/src/capabilities/state.d.ts +1 -1
  11. package/dist/types/src/capabilities/state.d.ts.map +1 -1
  12. package/dist/types/src/components/CommandsDialog/CommandsDialog.d.ts.map +1 -1
  13. package/dist/types/src/components/NavTree/NavTree.stories.d.ts +1 -0
  14. package/dist/types/src/components/NavTree/NavTree.stories.d.ts.map +1 -1
  15. package/dist/types/src/components/NavTreeContainer.d.ts.map +1 -1
  16. package/dist/types/src/components/Sidebar/L0Menu.d.ts +1 -1
  17. package/dist/types/src/components/Sidebar/L0Menu.d.ts.map +1 -1
  18. package/dist/types/src/components/types.d.ts +5 -6
  19. package/dist/types/src/components/types.d.ts.map +1 -1
  20. package/dist/types/src/testing/app-graph-builder.d.ts +2 -1
  21. package/dist/types/src/testing/app-graph-builder.d.ts.map +1 -1
  22. package/dist/types/src/testing/generator.d.ts +1 -1
  23. package/dist/types/src/testing/generator.d.ts.map +1 -1
  24. package/dist/types/src/util.d.ts +1 -1
  25. package/package.json +36 -34
  26. package/src/NavTreePlugin.tsx +8 -2
  27. package/src/capabilities/state.ts +16 -15
  28. package/src/components/CommandsDialog/CommandsDialog.tsx +16 -10
  29. package/src/components/NavTree/NavTree.stories.tsx +43 -2
  30. package/src/components/NavTreeContainer.tsx +6 -17
  31. package/src/components/NavTreeItem/NavTreeItemColumns.tsx +1 -1
  32. package/src/components/Sidebar/L0Menu.tsx +58 -49
  33. package/src/components/types.ts +3 -7
  34. package/src/testing/app-graph-builder.ts +249 -203
  35. package/src/testing/generator.ts +6 -3
  36. package/dist/lib/browser/chunk-MFAWMFJC.mjs.map +0 -7
  37. package/dist/lib/browser/state-R2UMYAHN.mjs.map +0 -7
  38. /package/dist/lib/browser/{react-surface-HGA3TAQU.mjs.map → react-surface-H3JRTVNU.mjs.map} +0 -0
package/src/testing/app-graph-builder.ts CHANGED
@@ -5,220 +5,266 @@
5
5
  import { Rx } from '@effect-rx/rx-react';
6
6
  import { Option, pipe } from 'effect';
7
7
 
8
+ import { type PluginContext } from '@dxos/app-framework';
8
9
  import { log } from '@dxos/log';
9
10
  import { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
10
11
  import { faker } from '@dxos/random';
11
12
 
12
- export const storybookGraphBuilders: BuilderExtensions = [
13
- // Create app menu actions.
14
- createExtension({
15
- id: 'app-menu',
16
- actions: (node) =>
17
- Rx.make((get) =>
18
- pipe(
19
- get(node),
20
- Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
21
- Option.map((node) => {
22
- return [
23
- ...Array.from({ length: 5 }, (_, i) => ({
24
- id: `${node.id}/action-${i}`,
25
- data: () => {
26
- log.info('action', { id: node.id, index: i });
27
- },
28
- properties: {
29
- label: `Action ${i}`,
30
- icon: faker.properties.icon(),
31
- disposition: 'menu',
32
- },
33
- })),
34
- ];
35
- }),
36
- Option.getOrElse(() => []),
13
+ export const storybookGraphBuilders = (context: PluginContext): BuilderExtensions => {
14
+ const propertiesCache = new Map<string, Record<string, unknown>>();
15
+ const getProperties = (id: string, defaults: Record<string, unknown>) => {
16
+ const cached = propertiesCache.get(id);
17
+ if (cached) {
18
+ return cached;
19
+ }
20
+
21
+ propertiesCache.set(id, defaults);
22
+ return defaults;
23
+ };
24
+
25
+ return [
26
+ // Create app menu actions.
27
+ createExtension({
28
+ id: 'app-menu',
29
+ actions: (node) =>
30
+ Rx.make((get) =>
31
+ pipe(
32
+ get(node),
33
+ Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
34
+ Option.map((node) => {
35
+ return [
36
+ ...Array.from({ length: 5 }, (_, i) => ({
37
+ id: `${node.id}/action-${i}`,
38
+ data: () => {
39
+ log.info('action', { id: node.id, index: i });
40
+ },
41
+ properties: {
42
+ label: `Action ${i}`,
43
+ icon: faker.properties.icon(),
44
+ disposition: 'menu',
45
+ },
46
+ })),
47
+ ];
48
+ }),
49
+ Option.getOrElse(() => []),
50
+ ),
37
51
  ),
38
- ),
39
- }),
40
- // Create user account node.
41
- createExtension({
42
- id: 'user-account',
43
- connector: (node) =>
44
- Rx.make((get) =>
45
- pipe(
46
- get(node),
47
- Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
48
- Option.map(() => {
49
- return [
50
- {
51
- id: 'user-account',
52
- type: 'user-account',
53
- properties: {
54
- label: 'User Account',
55
- icon: 'ph--user--regular',
56
- disposition: 'user-account',
57
- userId: '1234567890ABCDEF',
58
- hue: faker.properties.hue(),
59
- emoji: faker.properties.emoji(),
60
- status: 'active',
61
- },
62
- nodes: [
63
- {
64
- id: 'profile',
65
- type: 'profile',
66
- properties: {
67
- label: 'Profile',
68
- icon: 'ph--user--regular',
69
- },
52
+ }),
53
+ // Create user account node.
54
+ createExtension({
55
+ id: 'user-account',
56
+ connector: (node) =>
57
+ Rx.make((get) =>
58
+ pipe(
59
+ get(node),
60
+ Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
61
+ Option.map(() => {
62
+ return [
63
+ {
64
+ id: 'user-account',
65
+ type: 'user-account',
66
+ properties: {
67
+ label: 'User Account',
68
+ icon: 'ph--user--regular',
69
+ disposition: 'user-account',
70
+ userId: '1234567890ABCDEF',
71
+ hue: faker.properties.hue(),
72
+ emoji: faker.properties.emoji(),
73
+ status: 'active',
70
74
  },
71
- {
72
- id: 'devices',
73
- type: 'devices',
74
- properties: {
75
- label: 'Devices',
76
- icon: 'ph--devices--regular',
75
+ nodes: [
76
+ {
77
+ id: 'profile',
78
+ type: 'profile',
79
+ properties: {
80
+ label: 'Profile',
81
+ icon: 'ph--user--regular',
82
+ },
77
83
  },
78
- },
79
- {
80
- id: 'security',
81
- type: 'security',
82
- properties: {
83
- label: 'Security',
84
- icon: 'ph--key--regular',
84
+ {
85
+ id: 'devices',
86
+ type: 'devices',
87
+ properties: {
88
+ label: 'Devices',
89
+ icon: 'ph--devices--regular',
90
+ },
85
91
  },
86
- },
87
- ],
88
- },
89
- ];
90
- }),
91
- Option.getOrElse(() => []),
92
- ),
93
- ),
94
- }),
95
- // TODO(wittjosiah): This group node probably is unnecessary now with the flat L0 structure.
96
- // Create spaces group node.
97
- createExtension({
98
- id: 'spaces-root',
99
- position: 'hoist',
100
- connector: (node) =>
101
- Rx.make((get) =>
102
- pipe(
103
- get(node),
104
- Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
105
- Option.map(() => {
106
- return [
107
- {
108
- id: 'spaces-root',
109
- type: 'spaces-root',
110
- properties: {
111
- label: 'Spaces',
112
- icon: 'ph--planet--regular',
113
- role: 'branch',
114
- disposition: 'collection',
115
- },
116
- },
117
- ];
118
- }),
119
- Option.getOrElse(() => []),
120
- ),
121
- ),
122
- }),
123
- // Create space nodes.
124
- createExtension({
125
- id: 'spaces',
126
- connector: (node) =>
127
- Rx.make((get) =>
128
- pipe(
129
- get(node),
130
- Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
131
- Option.map(() => {
132
- return [
133
- ...Array.from({ length: 5 }, (_, i) => ({
134
- id: `space-${i}`,
135
- type: 'space',
136
- properties: {
137
- label: `Space ${i}`,
138
- icon: faker.properties.icon(),
139
- hue: faker.properties.hue(),
92
+ {
93
+ id: 'security',
94
+ type: 'security',
95
+ properties: {
96
+ label: 'Security',
97
+ icon: 'ph--key--regular',
98
+ },
99
+ },
100
+ ],
140
101
  },
141
- })),
142
- ];
143
- }),
144
- Option.getOrElse(() => []),
102
+ ];
103
+ }),
104
+ Option.getOrElse(() => []),
105
+ ),
145
106
  ),
146
- ),
147
- }),
148
- // Create space actions.
149
- createExtension({
150
- id: 'space-actions',
151
- actions: (node) =>
152
- Rx.make((get) =>
153
- pipe(
154
- get(node),
155
- Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
156
- Option.map((node) => {
157
- return [
158
- ...Array.from({ length: 5 }, (_, i) => ({
159
- id: `${node.id}/action-${i}`,
160
- data: () => {
161
- log.info('action', { id: node.id, index: i });
162
- },
163
- properties: {
164
- label: `Action ${i}`,
165
- icon: faker.properties.icon(),
107
+ }),
108
+ // TODO(wittjosiah): This group node probably is unnecessary now with the flat L0 structure.
109
+ // Create spaces group node.
110
+ createExtension({
111
+ id: 'spaces-root',
112
+ position: 'hoist',
113
+ connector: (node) =>
114
+ Rx.make((get) =>
115
+ pipe(
116
+ get(node),
117
+ Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
118
+ Option.map(() => {
119
+ return [
120
+ {
121
+ id: 'spaces-root',
122
+ type: 'spaces-root',
123
+ properties: {
124
+ label: 'Spaces',
125
+ icon: 'ph--planet--regular',
126
+ role: 'branch',
127
+ disposition: 'collection',
128
+ },
166
129
  },
167
- })),
168
- ];
169
- }),
170
- Option.getOrElse(() => []),
130
+ ];
131
+ }),
132
+ Option.getOrElse(() => []),
133
+ ),
171
134
  ),
172
- ),
173
- }),
174
- // Create object nodes.
175
- createExtension({
176
- id: 'objects',
177
- connector: (node) =>
178
- Rx.make((get) =>
179
- pipe(
180
- get(node),
181
- Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
182
- Option.map(() => {
183
- return [
184
- ...Array.from({ length: 5 }, (_, i) => ({
185
- id: `object-${i}`,
186
- type: 'object',
187
- properties: {
188
- label: `Object ${i}`,
189
- icon: faker.properties.icon(),
190
- },
191
- })),
192
- ];
193
- }),
194
- Option.getOrElse(() => []),
135
+ }),
136
+ // Create space nodes.
137
+ createExtension({
138
+ id: 'spaces',
139
+ connector: (node) => {
140
+ const count = Rx.make((get) => {
141
+ let value = 3;
142
+ const interval = setInterval(() => {
143
+ if (value >= 10) {
144
+ clearInterval(interval);
145
+ return;
146
+ }
147
+
148
+ value++;
149
+ get.setSelf(value);
150
+ }, 5000);
151
+ get.addFinalizer(() => clearInterval(interval));
152
+ return value;
153
+ });
154
+
155
+ return Rx.make((get) =>
156
+ pipe(
157
+ get(node),
158
+ Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
159
+ Option.map(() => {
160
+ return [
161
+ ...Array.from({ length: get(count) }, (_, i) => ({
162
+ id: `space-${i}`,
163
+ type: 'space',
164
+ properties: getProperties(`space-${i}`, {
165
+ label: `Space ${i}`,
166
+ icon: faker.properties.icon(),
167
+ hue: faker.properties.hue(),
168
+ }),
169
+ })),
170
+ ];
171
+ }),
172
+ Option.getOrElse(() => []),
173
+ ),
174
+ );
175
+ },
176
+ }),
177
+ // Create space actions.
178
+ createExtension({
179
+ id: 'space-actions',
180
+ actions: (node) =>
181
+ Rx.make((get) =>
182
+ pipe(
183
+ get(node),
184
+ Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
185
+ Option.map((node) => {
186
+ return [
187
+ ...Array.from({ length: 5 }, (_, i) => ({
188
+ id: `${node.id}/action-${i}`,
189
+ data: () => {
190
+ log.info('action', { id: node.id, index: i });
191
+ },
192
+ properties: getProperties(`${node.id}/action-${i}`, {
193
+ label: `Action ${i}`,
194
+ icon: faker.properties.icon(),
195
+ }),
196
+ })),
197
+ ];
198
+ }),
199
+ Option.getOrElse(() => []),
200
+ ),
195
201
  ),
196
- ),
197
- }),
198
- // Create object actions.
199
- createExtension({
200
- id: 'object-actions',
201
- actions: (node) =>
202
- Rx.make((get) =>
203
- pipe(
204
- get(node),
205
- Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
206
- Option.map((node) => {
207
- return [
208
- ...Array.from({ length: 5 }, (_, i) => ({
209
- id: `${node.id}/action-${i}`,
210
- data: () => {
211
- log.info('action', { id: node.id, index: i });
212
- },
213
- properties: {
214
- label: `Action ${i}`,
215
- icon: faker.properties.icon(),
216
- },
217
- })),
218
- ];
219
- }),
220
- Option.getOrElse(() => []),
202
+ }),
203
+ // Create object nodes.
204
+ createExtension({
205
+ id: 'objects',
206
+ connector: (node) => {
207
+ const count = Rx.make((get) => {
208
+ let value = 3;
209
+ const interval = setInterval(() => {
210
+ if (value >= 20) {
211
+ clearInterval(interval);
212
+ return;
213
+ }
214
+
215
+ value++;
216
+ get.setSelf(value);
217
+ }, 5000);
218
+ get.addFinalizer(() => clearInterval(interval));
219
+ return value;
220
+ });
221
+
222
+ return Rx.make((get) =>
223
+ pipe(
224
+ get(node),
225
+ Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
226
+ Option.map((node) => {
227
+ return [
228
+ ...Array.from({ length: get(count) }, (_, i) => ({
229
+ id: `${node.id}/object-${i}`,
230
+ type: 'object',
231
+ properties: getProperties(`${node.id}/object-${i}`, {
232
+ label: `Object ${i}`,
233
+ icon: faker.properties.icon(),
234
+ }),
235
+ })),
236
+ ];
237
+ }),
238
+ Option.getOrElse(() => []),
239
+ ),
240
+ );
241
+ },
242
+ }),
243
+ // Create object actions.
244
+ createExtension({
245
+ id: 'object-actions',
246
+ actions: (node) =>
247
+ Rx.make((get) =>
248
+ pipe(
249
+ get(node),
250
+ Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
251
+ Option.map((node) => {
252
+ return [
253
+ ...Array.from({ length: 5 }, (_, i) => ({
254
+ id: `${node.id}/action-${i}`,
255
+ data: () => {
256
+ log.info('action', { id: node.id, index: i });
257
+ },
258
+ properties: getProperties(`${node.id}/action-${i}`, {
259
+ label: `Action ${i}`,
260
+ icon: faker.properties.icon(),
261
+ }),
262
+ })),
263
+ ];
264
+ }),
265
+ Option.getOrElse(() => []),
266
+ ),
221
267
  ),
222
- ),
223
- }),
224
- ];
268
+ }),
269
+ ];
270
+ };
package/src/testing/generator.ts CHANGED
@@ -5,8 +5,8 @@
5
5
  import { Schema } from 'effect';
6
6
 
7
7
  import { type NodeArg } from '@dxos/app-graph';
8
+ import { type Live, Obj, Type } from '@dxos/echo';
8
9
  import { TypedObject } from '@dxos/echo-schema';
9
- import { live, type Live } from '@dxos/live-object';
10
10
  import { faker } from '@dxos/random';
11
11
  import { range } from '@dxos/util';
12
12
 
@@ -32,7 +32,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
32
32
  const schema = createSchema?.();
33
33
  return {
34
34
  schema,
35
- createObject: () => (schema ? live(schema, createData()) : live(createData())),
35
+ createObject: () => (schema ? Obj.make(schema, createData()) : Obj.make(Type.Expando, createData())),
36
36
  };
37
37
  };
38
38
 
@@ -58,7 +58,10 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
58
58
 
59
59
  project: {
60
60
  createSchema: () =>
61
- class ProjectType extends TypedObject({ typename: 'example.com/type/Project', version: '0.1.0' })({
61
+ class ProjectType extends TypedObject({
62
+ typename: 'example.com/type/Project',
63
+ version: '0.1.0',
64
+ })({
62
65
  title: Schema.String,
63
66
  repo: Schema.String,
64
67
  status: Schema.String,