@dxos/plugin-stack 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

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 (120) hide show
  1. package/LICENSE +102 -5
  2. package/README.md +1 -1
  3. package/dist/lib/neutral/StackArticle-3FE52PUH.mjs +126 -0
  4. package/dist/lib/neutral/StackArticle-3FE52PUH.mjs.map +7 -0
  5. package/dist/lib/neutral/StackPlugin.mjs +22 -0
  6. package/dist/lib/neutral/StackPlugin.mjs.map +7 -0
  7. package/dist/lib/neutral/capabilities/index.mjs +7 -0
  8. package/dist/lib/neutral/capabilities/index.mjs.map +7 -0
  9. package/dist/lib/{browser/chunk-UIKFKRFJ.mjs → neutral/chunk-3ISQZKGO.mjs} +3 -3
  10. package/dist/lib/neutral/chunk-3ISQZKGO.mjs.map +7 -0
  11. package/dist/lib/{browser/chunk-NHMDZYOB.mjs → neutral/chunk-IPU3C6TT.mjs} +9 -10
  12. package/dist/lib/neutral/chunk-IPU3C6TT.mjs.map +7 -0
  13. package/dist/lib/neutral/components/index.mjs +182 -0
  14. package/dist/lib/neutral/components/index.mjs.map +7 -0
  15. package/dist/lib/neutral/containers/index.mjs +7 -0
  16. package/dist/lib/neutral/containers/index.mjs.map +7 -0
  17. package/dist/lib/neutral/index.mjs +15 -0
  18. package/dist/lib/neutral/meta.json +1 -0
  19. package/dist/lib/neutral/meta.mjs +9 -0
  20. package/dist/lib/neutral/plugin.mjs +11 -0
  21. package/dist/lib/neutral/plugin.mjs.map +7 -0
  22. package/dist/lib/neutral/react-surface-MD3CVY2N.mjs +23 -0
  23. package/dist/lib/neutral/react-surface-MD3CVY2N.mjs.map +7 -0
  24. package/dist/lib/neutral/translations.mjs +37 -0
  25. package/dist/lib/neutral/translations.mjs.map +7 -0
  26. package/dist/lib/{browser → neutral}/types/index.mjs +1 -1
  27. package/dist/lib/neutral/types/index.mjs.map +7 -0
  28. package/dist/types/src/StackPlugin.d.ts +3 -1
  29. package/dist/types/src/StackPlugin.d.ts.map +1 -1
  30. package/dist/types/src/capabilities/index.d.ts +2 -1
  31. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  32. package/dist/types/src/capabilities/react-surface.d.ts +3 -2
  33. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  34. package/dist/types/src/components/{StackContext.d.ts → StackContext/StackContext.d.ts} +2 -1
  35. package/dist/types/src/components/StackContext/StackContext.d.ts.map +1 -0
  36. package/dist/types/src/components/StackContext/index.d.ts +2 -0
  37. package/dist/types/src/components/StackContext/index.d.ts.map +1 -0
  38. package/dist/types/src/components/{CaretDownUp.d.ts → StackSection/CaretDownUp.d.ts} +1 -1
  39. package/dist/types/src/components/StackSection/CaretDownUp.d.ts.map +1 -0
  40. package/dist/types/src/components/{StackSection.d.ts → StackSection/StackSection.d.ts} +1 -1
  41. package/dist/types/src/components/StackSection/StackSection.d.ts.map +1 -0
  42. package/dist/types/src/components/StackSection/index.d.ts +2 -0
  43. package/dist/types/src/components/StackSection/index.d.ts.map +1 -0
  44. package/dist/types/src/components/{StackSettings.d.ts → StackSettings/StackSettings.d.ts} +1 -1
  45. package/dist/types/src/components/StackSettings/StackSettings.d.ts.map +1 -0
  46. package/dist/types/src/components/StackSettings/index.d.ts +2 -0
  47. package/dist/types/src/components/StackSettings/index.d.ts.map +1 -0
  48. package/dist/types/src/components/index.d.ts +2 -7
  49. package/dist/types/src/components/index.d.ts.map +1 -1
  50. package/dist/types/src/containers/StackArticle/StackArticle.d.ts +7 -0
  51. package/dist/types/src/containers/StackArticle/StackArticle.d.ts.map +1 -0
  52. package/dist/types/src/containers/StackArticle/index.d.ts +2 -0
  53. package/dist/types/src/containers/StackArticle/index.d.ts.map +1 -0
  54. package/dist/types/src/containers/index.d.ts +3 -0
  55. package/dist/types/src/containers/index.d.ts.map +1 -0
  56. package/dist/types/src/index.d.ts +1 -1
  57. package/dist/types/src/index.d.ts.map +1 -1
  58. package/dist/types/src/meta.d.ts +3 -3
  59. package/dist/types/src/meta.d.ts.map +1 -1
  60. package/dist/types/src/plugin.d.ts +3 -0
  61. package/dist/types/src/plugin.d.ts.map +1 -0
  62. package/dist/types/src/translations.d.ts +31 -31
  63. package/dist/types/src/translations.d.ts.map +1 -1
  64. package/dist/types/src/types/stack.d.ts +12 -13
  65. package/dist/types/src/types/stack.d.ts.map +1 -1
  66. package/dist/types/src/types/types.d.ts +3 -4
  67. package/dist/types/src/types/types.d.ts.map +1 -1
  68. package/dist/types/tsconfig.tsbuildinfo +1 -1
  69. package/package.json +91 -50
  70. package/src/StackPlugin.ts +14 -45
  71. package/src/capabilities/index.ts +2 -2
  72. package/src/capabilities/react-surface.tsx +20 -22
  73. package/src/components/{StackContext.tsx → StackContext/StackContext.tsx} +3 -1
  74. package/src/components/StackContext/index.ts +5 -0
  75. package/src/components/{StackSection.tsx → StackSection/StackSection.tsx} +27 -24
  76. package/src/components/StackSection/index.ts +5 -0
  77. package/src/components/StackSettings/StackSettings.tsx +28 -0
  78. package/src/components/StackSettings/index.ts +5 -0
  79. package/src/components/index.ts +2 -4
  80. package/src/containers/StackArticle/StackArticle.tsx +169 -0
  81. package/src/containers/StackArticle/index.ts +5 -0
  82. package/src/containers/index.ts +7 -0
  83. package/src/index.ts +1 -1
  84. package/src/meta.ts +4 -4
  85. package/src/plugin.ts +9 -0
  86. package/src/translations.ts +23 -22
  87. package/src/types/stack.ts +11 -7
  88. package/src/types/types.ts +3 -4
  89. package/dist/lib/browser/StackContainer-HXD7C5GX.mjs +0 -298
  90. package/dist/lib/browser/StackContainer-HXD7C5GX.mjs.map +0 -7
  91. package/dist/lib/browser/chunk-NHMDZYOB.mjs.map +0 -7
  92. package/dist/lib/browser/chunk-UIKFKRFJ.mjs.map +0 -7
  93. package/dist/lib/browser/index.mjs +0 -99
  94. package/dist/lib/browser/index.mjs.map +0 -7
  95. package/dist/lib/browser/meta.json +0 -1
  96. package/dist/lib/browser/react-surface-IV2S35VD.mjs +0 -40
  97. package/dist/lib/browser/react-surface-IV2S35VD.mjs.map +0 -7
  98. package/dist/lib/node-esm/StackContainer-OTSCVZKK.mjs +0 -299
  99. package/dist/lib/node-esm/StackContainer-OTSCVZKK.mjs.map +0 -7
  100. package/dist/lib/node-esm/chunk-BGVQYUYP.mjs +0 -23
  101. package/dist/lib/node-esm/chunk-BGVQYUYP.mjs.map +0 -7
  102. package/dist/lib/node-esm/chunk-ZZFA7HIV.mjs +0 -30
  103. package/dist/lib/node-esm/chunk-ZZFA7HIV.mjs.map +0 -7
  104. package/dist/lib/node-esm/index.mjs +0 -100
  105. package/dist/lib/node-esm/index.mjs.map +0 -7
  106. package/dist/lib/node-esm/meta.json +0 -1
  107. package/dist/lib/node-esm/react-surface-3W7REXUX.mjs +0 -41
  108. package/dist/lib/node-esm/react-surface-3W7REXUX.mjs.map +0 -7
  109. package/dist/lib/node-esm/types/index.mjs +0 -10
  110. package/dist/types/src/components/CaretDownUp.d.ts.map +0 -1
  111. package/dist/types/src/components/StackContainer.d.ts +0 -9
  112. package/dist/types/src/components/StackContainer.d.ts.map +0 -1
  113. package/dist/types/src/components/StackContext.d.ts.map +0 -1
  114. package/dist/types/src/components/StackSection.d.ts.map +0 -1
  115. package/dist/types/src/components/StackSettings.d.ts.map +0 -1
  116. package/src/components/StackContainer.tsx +0 -167
  117. package/src/components/StackSettings.tsx +0 -30
  118. /package/dist/lib/{browser/types → neutral}/index.mjs.map +0 -0
  119. /package/dist/lib/{node-esm/types/index.mjs.map → neutral/meta.mjs.map} +0 -0
  120. /package/src/components/{CaretDownUp.tsx → StackSection/CaretDownUp.tsx} +0 -0
@@ -0,0 +1,169 @@
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 { useOperationInvoker } from '@dxos/app-framework/ui';
10
+ import { LayoutOperation } from '@dxos/app-toolkit';
11
+ import { useAppGraph, type AppSurface } from '@dxos/app-toolkit/ui';
12
+ import { Annotation, type Collection, Obj, type Ref } from '@dxos/echo';
13
+ import { AtomObj } from '@dxos/echo-atom';
14
+ import { Graph } from '@dxos/plugin-graph';
15
+ import { SpaceOperation } from '@dxos/plugin-space';
16
+ import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
17
+ import { Stack, StackItem } from '@dxos/react-ui-stack';
18
+ import { isNonNullable } from '@dxos/util';
19
+
20
+ import { StackContext, StackSection } from '#components';
21
+ import { meta } from '#meta';
22
+ import {
23
+ type AddSectionPosition,
24
+ type CollapsedSections,
25
+ type StackSectionItem,
26
+ type StackSectionMetadata,
27
+ type StackSectionView,
28
+ } from '#types';
29
+
30
+ const collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>
31
+ Atom.make((get) => {
32
+ const snapshot = get(AtomObj.make(collection));
33
+ return (
34
+ snapshot.objects
35
+ // TODO(wittjosiah): Why isn't this type inferred correctly?
36
+ .map((ref: Ref.Ref<Obj.Unknown>) => get(AtomObj.makeWithReactive(ref)))
37
+ .filter(isNonNullable)
38
+ );
39
+ }),
40
+ );
41
+
42
+ type StackArticleProps = AppSurface.ObjectArticleProps<Collection.Collection>;
43
+
44
+ export const StackArticle = ({ attendableId, subject: collection }: StackArticleProps) => {
45
+ const { invokePromise } = useOperationInvoker();
46
+ const { graph } = useAppGraph();
47
+ const { t } = useTranslation(meta.id);
48
+ const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
49
+
50
+ // TODO(wittjosiah): Re-implement stack views with relations.
51
+ // const defaultStack = useMemo(() => Obj.make(StackViewType, { sections: {} }), [collection]);
52
+ // const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;
53
+ // useEffect(() => {
54
+ // if (!collection.views[StackViewType.typename]) {
55
+ // collection.views[StackViewType.typename] = Ref.make(stack);
56
+ // }
57
+ // }, [collection, stack]);
58
+
59
+ const collectionObjects = useAtomValue(collectionObjectsFamily(collection));
60
+ const items = collectionObjects.map((object: Obj.Unknown) => {
61
+ const schema = Obj.getSchema(object);
62
+ const iconAnnotation = schema ? Option.getOrUndefined(Annotation.IconAnnotation.get(schema)) : undefined;
63
+ const metadata: StackSectionMetadata = { icon: iconAnnotation?.icon };
64
+ const view = {
65
+ // ...stack.sections[object.id],
66
+ collapsed: collapsedSections[Obj.getDXN(object).toString()],
67
+ title:
68
+ (object as any)?.title ??
69
+ // TODO(wittjosiah): `getNode` is not reactive.
70
+ toLocalizedString(
71
+ Graph.getNode(graph, Obj.getDXN(object).toString()).pipe(Option.getOrNull)?.properties.label,
72
+ t,
73
+ ),
74
+ } as StackSectionView;
75
+ return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
76
+ });
77
+
78
+ const handleDelete = useCallback(
79
+ async (id: string) => {
80
+ const index = collection.objects
81
+ .map((object) => object.target)
82
+ .filter(isNonNullable)
83
+ .findIndex((section) => Obj.getDXN(section).toString() === id);
84
+ const object = collection.objects[index].target;
85
+ if (Obj.isObject(object)) {
86
+ await invokePromise(SpaceOperation.RemoveObjects, {
87
+ objects: [object],
88
+ target: collection,
89
+ });
90
+
91
+ // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
92
+ // delete stack.sections[Path.last(path)];
93
+ }
94
+ },
95
+ [collection, invokePromise],
96
+ );
97
+
98
+ const handleAdd = useCallback(
99
+ async (id: string, position: AddSectionPosition) => {
100
+ // TODO(wittjosiah): Use object creation dialog.
101
+ await invokePromise(LayoutOperation.UpdateDialog, {
102
+ subject: `${meta.id}.AddSectionDialog`,
103
+ blockAlign: 'start',
104
+ props: {
105
+ path: id,
106
+ position,
107
+ collection,
108
+ },
109
+ });
110
+ },
111
+ [collection, invokePromise],
112
+ );
113
+
114
+ const handleNavigate = useCallback(
115
+ async (id: string) => {
116
+ await invokePromise(LayoutOperation.Open, { subject: [id] });
117
+ },
118
+ [invokePromise],
119
+ );
120
+
121
+ const handleCollapse = useCallback(
122
+ (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
123
+ [],
124
+ );
125
+
126
+ const handleAddSection = useCallback(
127
+ () =>
128
+ invokePromise(SpaceOperation.OpenCreateObject, {
129
+ target: collection,
130
+ navigable: false,
131
+ }),
132
+ [collection, invokePromise],
133
+ );
134
+
135
+ return (
136
+ <StackItem.Content toolbar classNames='dx-document'>
137
+ <Toolbar.Root>
138
+ <Toolbar.IconButton
139
+ icon='ph--plus--regular'
140
+ iconOnly
141
+ label='Add section'
142
+ data-testid='stack.addSection'
143
+ onClick={handleAddSection}
144
+ />
145
+ </Toolbar.Root>
146
+ <StackContext.Provider
147
+ value={{
148
+ attendableId,
149
+ onCollapse: handleCollapse,
150
+ onNavigate: handleNavigate,
151
+ onDelete: handleDelete,
152
+ onAdd: handleAdd,
153
+ }}
154
+ >
155
+ <Stack
156
+ orientation='vertical'
157
+ size='intrinsic'
158
+ id={Obj.getDXN(collection).toString()}
159
+ data-testid='main.stack'
160
+ classNames='overflow-y-auto'
161
+ >
162
+ {items.map((item) => (
163
+ <StackSection key={item.id} {...item} />
164
+ ))}
165
+ </Stack>
166
+ </StackContext.Provider>
167
+ </StackItem.Content>
168
+ );
169
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ export { StackArticle as default } from './StackArticle';
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { type ComponentType, lazy } from 'react';
6
+
7
+ export const StackArticle: ComponentType<any> = lazy(() => import('./StackArticle'));
package/src/index.ts CHANGED
@@ -3,4 +3,4 @@
3
3
  //
4
4
 
5
5
  export * from './meta';
6
- export * from './StackPlugin';
6
+ export * from './types';
package/src/meta.ts CHANGED
@@ -2,13 +2,13 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { type Plugin } from '@dxos/app-framework';
6
6
  import { trim } from '@dxos/util';
7
7
 
8
- export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
8
+ export const SECTION_IDENTIFIER = 'org.dxos.type.stackSection';
9
9
 
10
- export const meta: PluginMeta = {
11
- id: 'dxos.org/plugin/stack',
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',
package/src/plugin.ts ADDED
@@ -0,0 +1,9 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { Plugin } from '@dxos/app-framework';
6
+
7
+ import { meta } from './meta';
8
+
9
+ export const StackPlugin = Plugin.lazy(meta, () => import('#plugin'));
@@ -3,34 +3,35 @@
3
3
  //
4
4
 
5
5
  import { type Resource } from '@dxos/react-ui';
6
- import { translations as stackTranslations } from '@dxos/react-ui-stack';
6
+ import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
7
7
 
8
- import { meta } from './meta';
8
+ import { meta } from '#meta';
9
9
 
10
10
  export const translations = [
11
11
  {
12
12
  'en-US': {
13
13
  [meta.id]: {
14
- 'plugin name': 'Stacks',
15
- 'settings title': 'Stack plugin settings',
16
- 'settings separation label': 'Separate sections',
17
- 'add section beforeAll dialog title': 'Add a section to the start',
18
- 'add section afterAll dialog title': 'Add a section to the end',
19
- 'add section before dialog title': 'Add a section',
20
- 'add section after dialog title': 'Add a section',
21
- 'add section input placeholder': 'Find the type of section to add',
22
- 'upload file label': 'Add file',
23
- 'add section label': 'Add section',
24
- 'empty stack message': 'Drag items into the stack.',
25
- 'remove section label': 'Delete',
26
- 'navigate to section label': 'Navigate to item',
27
- 'untitled section title': 'Untitled section',
28
- 'add section before label': 'Add before',
29
- 'add section after label': 'Add after',
30
- 'expand label': 'Expand',
31
- 'collapse label': 'Collapse',
32
- 'open chat thread label': 'Open chat thread',
33
- 'drag handle label': 'Press space or enter to begin dragging this item.',
14
+ 'plugin.name': 'Stacks',
15
+ 'settings.title': 'Stack settings',
16
+ 'settings.separation.label': 'Separate sections',
17
+ 'settings.separation.description': 'Add visual dividers between sections in stacks.',
18
+ 'add-section-beforeAll-dialog.title': 'Add a section to the start',
19
+ 'add-section-afterAll-dialog.title': 'Add a section to the end',
20
+ 'add-section-before-dialog.title': 'Add a section',
21
+ 'add-section-after-dialog.title': 'Add a section',
22
+ 'add-section-input.placeholder': 'Find the type of section to add',
23
+ 'upload-file.label': 'Add file',
24
+ 'add-section.label': 'Add section',
25
+ 'empty-stack.message': 'Drag objects into the stack.',
26
+ 'remove-section.label': 'Delete',
27
+ 'navigate-to-section.label': 'Navigate to object',
28
+ 'untitled-section.title': 'Untitled section',
29
+ 'add-section-before.label': 'Add before',
30
+ 'add-section-after.label': 'Add after',
31
+ 'expand.label': 'Expand',
32
+ 'collapse.label': 'Collapse',
33
+ 'open-chat-thread.label': 'Open chat thread',
34
+ 'drag-handle.label': 'Press space or enter to begin dragging this object.',
34
35
  },
35
36
  },
36
37
  },
@@ -4,7 +4,7 @@
4
4
 
5
5
  import * as Schema from 'effect/Schema';
6
6
 
7
- import { TypedObject } from '@dxos/echo/internal';
7
+ import { Type } from '@dxos/echo';
8
8
 
9
9
  // All section metadata needs to be optional/have defaults.
10
10
  // Any objects added to the collection will start with the section defaults.
@@ -19,9 +19,13 @@ export const SectionSchema = Schema.Struct({
19
19
  });
20
20
 
21
21
  // TODO(wittjosiah): This needs a relation to be connected to a stack.
22
- export class StackViewType extends TypedObject({
23
- typename: 'dxos.org/type/StackView',
24
- version: '0.1.0',
25
- })({
26
- sections: Schema.mutable(Schema.Record({ key: Schema.String, value: SectionSchema })),
27
- }) {}
22
+ export const StackViewType = Schema.Struct({
23
+ sections: Schema.Record({ key: Schema.String, value: SectionSchema }),
24
+ }).pipe(
25
+ Type.object({
26
+ typename: 'org.dxos.type.stackView',
27
+ version: '0.1.0',
28
+ }),
29
+ );
30
+
31
+ export interface StackViewType extends Schema.Schema.Type<typeof StackViewType> {}
@@ -4,16 +4,15 @@
4
4
 
5
5
  import { type FC } from 'react';
6
6
 
7
- import { type Obj } from '@dxos/echo';
7
+ import { type Collection, type Obj } from '@dxos/echo';
8
8
  import { type Label } from '@dxos/react-ui';
9
9
  import { type StackItemSize } from '@dxos/react-ui-stack';
10
- import { type DataType } from '@dxos/schema';
11
10
 
12
11
  export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
13
12
 
14
13
  export type CollapsedSections = Record<string, boolean>;
15
14
 
16
- export type CollectionItem = DataType.Collection['objects'][number];
15
+ export type CollectionItem = Collection.Collection['objects'][number];
17
16
 
18
17
  export type StackSectionView = {
19
18
  title?: string;
@@ -39,7 +38,7 @@ export type StackSectionMetadata = {
39
38
 
40
39
  export type StackSectionItem = {
41
40
  id: string;
42
- object: Obj.Any;
41
+ object: Obj.Unknown;
43
42
  view: StackSectionView;
44
43
  metadata: StackSectionMetadata;
45
44
  };
@@ -1,298 +0,0 @@
1
- import {
2
- meta
3
- } from "./chunk-UIKFKRFJ.mjs";
4
-
5
- // src/components/StackContainer.tsx
6
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
7
- import * as Option from "effect/Option";
8
- import React3, { useCallback, useState as useState2 } from "react";
9
- import { Capabilities, LayoutAction, createIntent, useAppGraph, useCapabilities, useIntentDispatcher } from "@dxos/app-framework";
10
- import { fullyQualifiedId, isLiveObject } from "@dxos/client/echo";
11
- import { Obj } from "@dxos/echo";
12
- import { SpaceAction } from "@dxos/plugin-space/types";
13
- import { Toolbar, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
14
- import { AttentionProvider } from "@dxos/react-ui-attention";
15
- import { Stack, StackItem as StackItem2 } from "@dxos/react-ui-stack";
16
- import { isNonNullable } from "@dxos/util";
17
-
18
- // src/components/StackContext.tsx
19
- import { createContext, useContext } from "react";
20
- var StackContext = /* @__PURE__ */ createContext({
21
- onCollapse: () => {
22
- },
23
- onNavigate: async () => {
24
- },
25
- onDelete: async () => {
26
- },
27
- onAdd: () => {
28
- }
29
- });
30
- var useStack = () => useContext(StackContext);
31
-
32
- // src/components/StackSection.tsx
33
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
34
- import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
35
- import React2, { useMemo, useState } from "react";
36
- import { Surface } from "@dxos/app-framework";
37
- import { DropdownMenu, Icon, IconButton, useTranslation } from "@dxos/react-ui";
38
- import { useAttentionAttributes } from "@dxos/react-ui-attention";
39
- import { StackItem } from "@dxos/react-ui-stack";
40
- import { getSize, mx, textBlockWidth } from "@dxos/react-ui-theme";
41
-
42
- // src/components/CaretDownUp.tsx
43
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
44
- import React from "react";
45
- var CaretDownUp = ({ children, ...props }) => {
46
- var _effect = _useSignals();
47
- try {
48
- return /* @__PURE__ */ React.createElement("svg", {
49
- xmlns: "http://www.w3.org/2000/svg",
50
- viewBox: "0 0 256 256",
51
- ...props
52
- }, /* @__PURE__ */ React.createElement("rect", {
53
- width: "256",
54
- height: "256",
55
- fill: "none"
56
- }), /* @__PURE__ */ React.createElement("polyline", {
57
- points: "80 224 128 176 176 224",
58
- fill: "none",
59
- stroke: "currentColor",
60
- strokeLinecap: "round",
61
- strokeLinejoin: "round",
62
- strokeWidth: "16"
63
- }), /* @__PURE__ */ React.createElement("polyline", {
64
- points: "80 32 128 80 176 32",
65
- fill: "none",
66
- stroke: "currentColor",
67
- strokeLinecap: "round",
68
- strokeLinejoin: "round",
69
- strokeWidth: "16"
70
- }), children);
71
- } finally {
72
- _effect.f();
73
- }
74
- };
75
-
76
- // src/components/StackSection.tsx
77
- var sectionActionDimensions = "p-1 mlb-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
78
- var StackSection = ({ id, view, object, metadata: { icon = "ph--placeholder--regular" } }) => {
79
- var _effect = _useSignals2();
80
- try {
81
- const { t } = useTranslation(meta.id);
82
- const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
83
- const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
84
- const attentionAttrs = useAttentionAttributes(id);
85
- const stackItem = useMemo(() => ({
86
- id
87
- }), [
88
- id
89
- ]);
90
- return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
91
- asChild: true,
92
- open: !view.collapsed,
93
- onOpenChange: (nextOpen) => onCollapse?.(id, !nextOpen)
94
- }, /* @__PURE__ */ React2.createElement(StackItem.Root, {
95
- item: stackItem,
96
- role: "section",
97
- ...attentionAttrs
98
- }, /* @__PURE__ */ React2.createElement(StackItem.Heading, {
99
- classNames: "attention-surface"
100
- }, /* @__PURE__ */ React2.createElement("span", {
101
- className: "sr-only"
102
- }, view.title), /* @__PURE__ */ React2.createElement(StackItem.HeadingStickyContent, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
103
- open: optionsMenuOpen,
104
- onOpenChange: setOptionsMenuOpen
105
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
106
- asChild: true
107
- }, /* @__PURE__ */ React2.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React2.createElement(Icon, {
108
- icon,
109
- size: 5,
110
- classNames: "transition-opacity"
111
- }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, view.collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
112
- onClick: () => onNavigate(id),
113
- "data-testid": "section.navigate-to"
114
- }, /* @__PURE__ */ React2.createElement(Icon, {
115
- icon: "ph--arrow-right--regular",
116
- size: 5
117
- }), /* @__PURE__ */ React2.createElement("span", {
118
- className: "mis-2 grow"
119
- }, t("navigate to section label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
120
- asChild: true
121
- }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
122
- className: getSize(5)
123
- }), /* @__PURE__ */ React2.createElement("span", {
124
- className: "mis-2 grow"
125
- }, t("collapse label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
126
- onClick: () => onAdd(id, "before"),
127
- "data-testid": "section.add-before"
128
- }, /* @__PURE__ */ React2.createElement(Icon, {
129
- icon: "ph--arrow-line-up--regular",
130
- size: 5
131
- }), /* @__PURE__ */ React2.createElement("span", {
132
- className: "mis-2 grow"
133
- }, t("add section before label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
134
- onClick: () => onAdd(id, "after"),
135
- "data-testid": "section.add-after"
136
- }, /* @__PURE__ */ React2.createElement(Icon, {
137
- icon: "ph--arrow-line-down--regular",
138
- size: 5
139
- }), /* @__PURE__ */ React2.createElement("span", {
140
- className: "mis-2 grow"
141
- }, t("add section after label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
142
- onClick: () => onDelete(id),
143
- "data-testid": "section.remove"
144
- }, /* @__PURE__ */ React2.createElement(Icon, {
145
- icon: "ph--trash--regular",
146
- size: 5
147
- }), /* @__PURE__ */ React2.createElement("span", {
148
- className: "mis-2 grow"
149
- }, t("remove section label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), view.collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
150
- asChild: true
151
- }, /* @__PURE__ */ React2.createElement(IconButton, {
152
- iconOnly: true,
153
- variant: "ghost",
154
- label: t("expand label"),
155
- icon: "ph--caret-up-down--regular",
156
- classNames: sectionActionDimensions
157
- })) : /* @__PURE__ */ React2.createElement(IconButton, {
158
- iconOnly: true,
159
- variant: "ghost",
160
- onClick: () => onNavigate(id),
161
- label: t("navigate to section label"),
162
- icon: "ph--arrow-right--regular",
163
- "data-testid": "section.navigate-to",
164
- classNames: sectionActionDimensions
165
- }))), /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, null, /* @__PURE__ */ React2.createElement(Surface, {
166
- role: "section",
167
- data: {
168
- subject: object
169
- },
170
- limit: 1,
171
- placeholder: /* @__PURE__ */ React2.createElement(React2.Fragment, null)
172
- })), view.collapsed && /* @__PURE__ */ React2.createElement(StackItem.Content, {
173
- classNames: "attention-surface"
174
- }, /* @__PURE__ */ React2.createElement("h2", {
175
- className: mx("flex items-center p-4 font-medium", textBlockWidth)
176
- }, view.title))));
177
- } finally {
178
- _effect.f();
179
- }
180
- };
181
-
182
- // src/components/StackContainer.tsx
183
- var StackContainer = ({ id, collection }) => {
184
- var _effect = _useSignals3();
185
- try {
186
- const { dispatchPromise: dispatch } = useIntentDispatcher();
187
- const { graph } = useAppGraph();
188
- const { t } = useTranslation2(meta.id);
189
- const allMetadata = useCapabilities(Capabilities.Metadata);
190
- const [collapsedSections, setCollapsedSections] = useState2({});
191
- const items = collection.objects.map((object) => object.target).filter(isNonNullable).map((object) => {
192
- const metadata = allMetadata.find((m) => m.id === (Obj.getTypename(object) ?? "never"))?.metadata;
193
- const view = {
194
- // ...stack.sections[object.id],
195
- collapsed: collapsedSections[fullyQualifiedId(object)],
196
- title: object?.title ?? // TODO(wittjosiah): `getNode` is not reactive.
197
- toLocalizedString(graph.getNode(fullyQualifiedId(object)).pipe(Option.getOrNull)?.properties.label, t)
198
- };
199
- return {
200
- id: fullyQualifiedId(object),
201
- object,
202
- metadata,
203
- view
204
- };
205
- }) ?? [];
206
- const handleDelete = useCallback(async (id2) => {
207
- const index = collection.objects.map((object2) => object2.target).filter(isNonNullable).findIndex((section) => fullyQualifiedId(section) === id2);
208
- const object = collection.objects[index].target;
209
- if (isLiveObject(object)) {
210
- await dispatch(createIntent(SpaceAction.RemoveObjects, {
211
- objects: [
212
- object
213
- ],
214
- target: collection
215
- }));
216
- }
217
- }, [
218
- collection,
219
- dispatch
220
- ]);
221
- const handleAdd = useCallback(async (id2, position) => {
222
- await dispatch?.(
223
- // TODO(wittjosiah): Use object creation dialog.
224
- createIntent(LayoutAction.UpdateDialog, {
225
- part: "dialog",
226
- subject: `${meta.id}/AddSectionDialog`,
227
- options: {
228
- blockAlign: "start",
229
- props: {
230
- path: id2,
231
- position,
232
- collection
233
- }
234
- }
235
- })
236
- );
237
- }, [
238
- collection,
239
- dispatch
240
- ]);
241
- const handleNavigate = useCallback(async (id2) => {
242
- await dispatch(createIntent(LayoutAction.Open, {
243
- part: "main",
244
- subject: [
245
- id2
246
- ]
247
- }));
248
- }, [
249
- dispatch
250
- ]);
251
- const handleCollapse = useCallback((id2, collapsed) => setCollapsedSections((prev) => ({
252
- ...prev,
253
- [id2]: collapsed
254
- })), []);
255
- const handleAddSection = useCallback(() => dispatch?.(createIntent(SpaceAction.OpenCreateObject, {
256
- target: collection,
257
- navigable: false
258
- })), [
259
- collection,
260
- dispatch
261
- ]);
262
- return /* @__PURE__ */ React3.createElement(StackItem2.Content, {
263
- toolbar: true,
264
- classNames: "container-max-width overflow-hidden border-l border-r border-subduedSeparator"
265
- }, /* @__PURE__ */ React3.createElement(Toolbar.Root, null, /* @__PURE__ */ React3.createElement(Toolbar.IconButton, {
266
- icon: "ph--plus--regular",
267
- iconOnly: true,
268
- label: "Add section",
269
- "data-testid": "stack.addSection",
270
- onClick: handleAddSection
271
- })), /* @__PURE__ */ React3.createElement(AttentionProvider, {
272
- id
273
- }, /* @__PURE__ */ React3.createElement(StackContext.Provider, {
274
- value: {
275
- onCollapse: handleCollapse,
276
- onNavigate: handleNavigate,
277
- onDelete: handleDelete,
278
- onAdd: handleAdd
279
- }
280
- }, /* @__PURE__ */ React3.createElement(Stack, {
281
- orientation: "vertical",
282
- size: "intrinsic",
283
- id,
284
- "data-testid": "main.stack",
285
- classNames: "overflow-y-auto"
286
- }, items.map((item) => /* @__PURE__ */ React3.createElement(StackSection, {
287
- key: item.id,
288
- ...item
289
- }))))));
290
- } finally {
291
- _effect.f();
292
- }
293
- };
294
- var StackContainer_default = StackContainer;
295
- export {
296
- StackContainer_default as default
297
- };
298
- //# sourceMappingURL=StackContainer-HXD7C5GX.mjs.map