@dxos/plugin-stack 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

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 (84) hide show
  1. package/dist/lib/browser/StackContainer-BIFUBD3Y.mjs +289 -0
  2. package/dist/lib/browser/StackContainer-BIFUBD3Y.mjs.map +7 -0
  3. package/dist/lib/browser/{chunk-FVB7LGW7.mjs → chunk-4X7CK6FM.mjs} +7 -5
  4. package/dist/lib/browser/chunk-4X7CK6FM.mjs.map +7 -0
  5. package/dist/lib/browser/{chunk-IRTROCUQ.mjs → chunk-CD32XYEB.mjs} +10 -11
  6. package/dist/lib/browser/chunk-CD32XYEB.mjs.map +7 -0
  7. package/dist/lib/browser/index.mjs +39 -55
  8. package/dist/lib/browser/index.mjs.map +4 -4
  9. package/dist/lib/browser/meta.json +1 -1
  10. package/dist/lib/browser/react-surface-PVND4UCN.mjs +34 -0
  11. package/dist/lib/browser/react-surface-PVND4UCN.mjs.map +7 -0
  12. package/dist/lib/browser/types/index.mjs +1 -1
  13. package/dist/lib/node-esm/StackContainer-7XVJHW4D.mjs +290 -0
  14. package/dist/lib/node-esm/StackContainer-7XVJHW4D.mjs.map +7 -0
  15. package/dist/lib/node-esm/{chunk-LRAZXJ65.mjs → chunk-26XWE7UY.mjs} +10 -11
  16. package/dist/lib/node-esm/chunk-26XWE7UY.mjs.map +7 -0
  17. package/dist/lib/node-esm/{chunk-UN5PA7TK.mjs → chunk-HEEGXPSW.mjs} +7 -5
  18. package/dist/lib/node-esm/chunk-HEEGXPSW.mjs.map +7 -0
  19. package/dist/lib/node-esm/index.mjs +39 -55
  20. package/dist/lib/node-esm/index.mjs.map +4 -4
  21. package/dist/lib/node-esm/meta.json +1 -1
  22. package/dist/lib/node-esm/react-surface-SZETVRAZ.mjs +35 -0
  23. package/dist/lib/node-esm/react-surface-SZETVRAZ.mjs.map +7 -0
  24. package/dist/lib/node-esm/types/index.mjs +1 -1
  25. package/dist/types/src/StackPlugin.d.ts +2 -1
  26. package/dist/types/src/StackPlugin.d.ts.map +1 -1
  27. package/dist/types/src/capabilities/index.d.ts +1 -1
  28. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  29. package/dist/types/src/capabilities/react-surface/index.d.ts +3 -0
  30. package/dist/types/src/capabilities/react-surface/index.d.ts.map +1 -0
  31. package/dist/types/src/capabilities/react-surface/react-surface.d.ts +5 -0
  32. package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +1 -0
  33. package/dist/types/src/components/StackSection.d.ts.map +1 -1
  34. package/dist/types/src/components/StackSettings.d.ts.map +1 -1
  35. package/dist/types/src/components/index.d.ts +2 -4
  36. package/dist/types/src/components/index.d.ts.map +1 -1
  37. package/dist/types/src/containers/StackContainer/StackContainer.d.ts +9 -0
  38. package/dist/types/src/containers/StackContainer/StackContainer.d.ts.map +1 -0
  39. package/dist/types/src/containers/StackContainer/index.d.ts +3 -0
  40. package/dist/types/src/containers/StackContainer/index.d.ts.map +1 -0
  41. package/dist/types/src/containers/index.d.ts +3 -0
  42. package/dist/types/src/containers/index.d.ts.map +1 -0
  43. package/dist/types/src/meta.d.ts +2 -3
  44. package/dist/types/src/meta.d.ts.map +1 -1
  45. package/dist/types/src/translations.d.ts +5 -4
  46. package/dist/types/src/translations.d.ts.map +1 -1
  47. package/dist/types/src/types/stack.d.ts +13 -14
  48. package/dist/types/src/types/stack.d.ts.map +1 -1
  49. package/dist/types/src/types/types.d.ts +3 -3
  50. package/dist/types/src/types/types.d.ts.map +1 -1
  51. package/dist/types/tsconfig.tsbuildinfo +1 -1
  52. package/package.json +45 -37
  53. package/src/StackPlugin.ts +26 -42
  54. package/src/capabilities/index.ts +1 -3
  55. package/src/capabilities/react-surface/index.ts +7 -0
  56. package/src/capabilities/react-surface/react-surface.tsx +34 -0
  57. package/src/components/StackSection.tsx +16 -15
  58. package/src/components/StackSettings.tsx +15 -8
  59. package/src/components/index.ts +2 -4
  60. package/src/containers/StackContainer/StackContainer.tsx +169 -0
  61. package/src/containers/StackContainer/index.ts +7 -0
  62. package/src/containers/index.ts +7 -0
  63. package/src/meta.ts +8 -5
  64. package/src/translations.ts +4 -3
  65. package/src/types/stack.ts +12 -8
  66. package/src/types/types.ts +3 -3
  67. package/dist/lib/browser/StackMain-ET24BQFZ.mjs +0 -299
  68. package/dist/lib/browser/StackMain-ET24BQFZ.mjs.map +0 -7
  69. package/dist/lib/browser/chunk-FVB7LGW7.mjs.map +0 -7
  70. package/dist/lib/browser/chunk-IRTROCUQ.mjs.map +0 -7
  71. package/dist/lib/browser/react-surface-KODSQDIY.mjs +0 -46
  72. package/dist/lib/browser/react-surface-KODSQDIY.mjs.map +0 -7
  73. package/dist/lib/node-esm/StackMain-LCMLZ4MS.mjs +0 -300
  74. package/dist/lib/node-esm/StackMain-LCMLZ4MS.mjs.map +0 -7
  75. package/dist/lib/node-esm/chunk-LRAZXJ65.mjs.map +0 -7
  76. package/dist/lib/node-esm/chunk-UN5PA7TK.mjs.map +0 -7
  77. package/dist/lib/node-esm/react-surface-SWMUVIYU.mjs +0 -47
  78. package/dist/lib/node-esm/react-surface-SWMUVIYU.mjs.map +0 -7
  79. package/dist/types/src/capabilities/react-surface.d.ts +0 -4
  80. package/dist/types/src/capabilities/react-surface.d.ts.map +0 -1
  81. package/dist/types/src/components/StackMain.d.ts +0 -9
  82. package/dist/types/src/components/StackMain.d.ts.map +0 -1
  83. package/src/capabilities/react-surface.tsx +0 -34
  84. package/src/components/StackMain.tsx +0 -159
package/package.json CHANGED
@@ -1,20 +1,26 @@
1
1
  {
2
2
  "name": "@dxos/plugin-stack",
3
- "version": "0.8.4-main.c1de068",
3
+ "version": "0.8.4-main.c85a9c8dae",
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,
10
14
  "type": "module",
11
15
  "exports": {
12
16
  ".": {
17
+ "source": "./src/index.ts",
13
18
  "types": "./dist/types/src/index.d.ts",
14
19
  "browser": "./dist/lib/browser/index.mjs",
15
20
  "node": "./dist/lib/node-esm/index.mjs"
16
21
  },
17
22
  "./types": {
23
+ "source": "./src/types/index.ts",
18
24
  "types": "./dist/types/src/types/index.d.ts",
19
25
  "browser": "./dist/lib/browser/types/index.mjs",
20
26
  "node": "./dist/lib/node-esm/types/index.mjs"
@@ -33,49 +39,51 @@
33
39
  "src"
34
40
  ],
35
41
  "dependencies": {
36
- "@fluentui/react-tabster": "^9.24.2",
37
- "@preact-signals/safe-react": "^0.9.0",
38
- "@preact/signals-core": "^1.9.0",
42
+ "@effect-atom/atom-react": "^0.5.0",
43
+ "@fluentui/react-tabster": "9.26.11",
39
44
  "@radix-ui/react-collapsible": "1.1.3",
40
- "effect": "3.17.0",
45
+ "effect": "3.19.16",
41
46
  "node-fetch": "^2.6.0",
42
- "react-is": "~18.2.0",
43
- "@dxos/app-framework": "0.8.4-main.c1de068",
44
- "@dxos/async": "0.8.4-main.c1de068",
45
- "@dxos/client": "0.8.4-main.c1de068",
46
- "@dxos/echo": "0.8.4-main.c1de068",
47
- "@dxos/echo-schema": "0.8.4-main.c1de068",
48
- "@dxos/invariant": "0.8.4-main.c1de068",
49
- "@dxos/local-storage": "0.8.4-main.c1de068",
50
- "@dxos/plugin-client": "0.8.4-main.c1de068",
51
- "@dxos/plugin-deck": "0.8.4-main.c1de068",
52
- "@dxos/plugin-graph": "0.8.4-main.c1de068",
53
- "@dxos/react-client": "0.8.4-main.c1de068",
54
- "@dxos/plugin-space": "0.8.4-main.c1de068",
55
- "@dxos/react-ui-form": "0.8.4-main.c1de068",
56
- "@dxos/react-ui-attention": "0.8.4-main.c1de068",
57
- "@dxos/schema": "0.8.4-main.c1de068",
58
- "@dxos/react-ui-searchlist": "0.8.4-main.c1de068",
59
- "@dxos/util": "0.8.4-main.c1de068",
60
- "@dxos/react-ui-stack": "0.8.4-main.c1de068"
47
+ "react-is": "~19.2.0",
48
+ "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
49
+ "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
50
+ "@dxos/async": "0.8.4-main.c85a9c8dae",
51
+ "@dxos/echo-atom": "0.8.4-main.c85a9c8dae",
52
+ "@dxos/client": "0.8.4-main.c85a9c8dae",
53
+ "@dxos/echo": "0.8.4-main.c85a9c8dae",
54
+ "@dxos/invariant": "0.8.4-main.c85a9c8dae",
55
+ "@dxos/plugin-client": "0.8.4-main.c85a9c8dae",
56
+ "@dxos/operation": "0.8.4-main.c85a9c8dae",
57
+ "@dxos/plugin-deck": "0.8.4-main.c85a9c8dae",
58
+ "@dxos/plugin-graph": "0.8.4-main.c85a9c8dae",
59
+ "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
60
+ "@dxos/react-ui-form": "0.8.4-main.c85a9c8dae",
61
+ "@dxos/react-client": "0.8.4-main.c85a9c8dae",
62
+ "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
63
+ "@dxos/types": "0.8.4-main.c85a9c8dae",
64
+ "@dxos/react-ui-searchlist": "0.8.4-main.c85a9c8dae",
65
+ "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
66
+ "@dxos/util": "0.8.4-main.c85a9c8dae",
67
+ "@dxos/schema": "0.8.4-main.c85a9c8dae"
61
68
  },
62
69
  "devDependencies": {
63
70
  "@babel/core": "^7.18.13",
64
- "@types/react": "~18.2.0",
65
- "@types/react-dom": "~18.2.0",
66
- "react": "~18.2.0",
67
- "react-dom": "~18.2.0",
68
- "vite": "5.4.7",
69
- "@dxos/react-ui": "0.8.4-main.c1de068",
70
- "@dxos/react-ui-theme": "0.8.4-main.c1de068",
71
- "@dxos/storybook-utils": "0.8.4-main.c1de068"
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.c85a9c8dae",
77
+ "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
78
+ "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
72
79
  },
73
80
  "peerDependencies": {
74
- "effect": "^3.13.3",
75
- "react": "~18.2.0",
76
- "react-dom": "~18.2.0",
77
- "@dxos/react-ui": "0.8.4-main.c1de068",
78
- "@dxos/react-ui-theme": "0.8.4-main.c1de068"
81
+ "@effect-atom/atom-react": "^0.5.0",
82
+ "effect": "3.19.16",
83
+ "react": "~19.2.3",
84
+ "react-dom": "~19.2.3",
85
+ "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
86
+ "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
79
87
  },
80
88
  "publishConfig": {
81
89
  "access": "public"
@@ -2,51 +2,35 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
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
- import { meta, SECTION_IDENTIFIER } from './meta';
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
- definePlugin(meta, [
16
- defineModule({
17
- id: `${meta.id}/module/translations`,
18
- activatesOn: Events.SetupTranslations,
19
- activate: () => contributes(Capabilities.Translations, translations),
20
- }),
21
- defineModule({
22
- id: `${meta.id}/module/metadata`,
23
- activatesOn: Events.SetupMetadata,
24
- activate: () => [
25
- contributes(Capabilities.Metadata, {
26
- id: SECTION_IDENTIFIER,
27
- metadata: {
28
- parse: (section: { object: Obj.Any }, type: string) => {
29
- switch (type) {
30
- case 'node':
31
- return { id: section.object.id, label: (section.object as any).title, data: section.object };
32
- case 'object':
33
- return section.object;
34
- case 'view-object':
35
- return section;
36
- }
37
- },
38
- },
39
- }),
40
- ],
41
- }),
42
- defineModule({
43
- id: `${meta.id}/module/schema`,
44
- activatesOn: ClientEvents.SetupSchema,
45
- activate: () => contributes(ClientCapabilities.Schema, [StackViewType]),
46
- }),
47
- defineModule({
48
- id: `${meta.id}/module/react-surface`,
49
- activatesOn: Events.SetupReactSurface,
50
- activate: ReactSurface,
51
- }),
52
- ]);
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
+ }
28
+ },
29
+ },
30
+ },
31
+ }),
32
+ AppPlugin.addSchemaModule({ schema: [StackViewType] }),
33
+ AppPlugin.addSurfaceModule({ activate: ReactSurface }),
34
+ AppPlugin.addTranslationsModule({ translations }),
35
+ Plugin.make,
36
+ );
@@ -2,6 +2,4 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { lazy } from '@dxos/app-framework';
6
-
7
- export const ReactSurface = lazy(() => import('./react-surface'));
5
+ export * from './react-surface';
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { Capability } from '@dxos/app-framework';
6
+
7
+ export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
@@ -0,0 +1,34 @@
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 { id?: string; subject: Collection.Collection } =>
24
+ Obj.instanceOf(Collection.Collection, data.subject),
25
+ component: ({ role, data }) => {
26
+ // This allows the id to be overridden by the surface for situations where the id of the collection
27
+ // is not the same as the id of what is being represented (e.g., a space with a root collection).
28
+ const id = typeof data.id === 'string' ? data.id : undefined;
29
+ return <StackContainer id={id ?? Obj.getDXN(data.subject).toString()} role={role} subject={data.subject} />;
30
+ },
31
+ }),
32
+ ),
33
+ ),
34
+ );
@@ -5,18 +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';
9
- import { DropdownMenu, Icon, useTranslation, IconButton } from '@dxos/react-ui';
8
+ import { Surface } from '@dxos/app-framework/ui';
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 { mx, getSize, textBlockWidth } from '@dxos/react-ui-theme';
12
+ import { getSize, mx, textBlockWidth } from '@dxos/ui-theme';
13
+
14
+ import { meta } from '../meta';
15
+ import { type StackSectionItem } from '../types';
13
16
 
14
17
  import { CaretDownUp } from './CaretDownUp';
15
18
  import { useStack } from './StackContext';
16
- import { STACK_PLUGIN } from '../meta';
17
- import { type StackSectionItem } from '../types';
18
19
 
19
- const sectionActionDimensions = 'p-1 mlb-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';
20
+ const sectionActionDimensions = 'p-1 my-1 shrink-0 min-h-0 w-(--dx-rail-action) h-min';
20
21
 
21
22
  export type StackSectionProps = StackSectionItem;
22
23
 
@@ -26,7 +27,7 @@ export const StackSection = ({
26
27
  object,
27
28
  metadata: { icon = 'ph--placeholder--regular' },
28
29
  }: StackSectionProps) => {
29
- const { t } = useTranslation(STACK_PLUGIN);
30
+ const { t } = useTranslation(meta.id);
30
31
  const { onNavigate, onAdd, onCollapse, onDelete } = useStack();
31
32
  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
32
33
  const attentionAttrs = useAttentionAttributes(id);
@@ -35,7 +36,7 @@ export const StackSection = ({
35
36
  return (
36
37
  <CollapsiblePrimitive.Root asChild open={!view.collapsed} onOpenChange={(nextOpen) => onCollapse?.(id, !nextOpen)}>
37
38
  <StackItem.Root item={stackItem} role='section' {...attentionAttrs}>
38
- <StackItem.Heading classNames='attention-surface'>
39
+ <StackItem.Heading classNames='dx-attention-surface'>
39
40
  <span className='sr-only'>{view.title}</span>
40
41
  <StackItem.HeadingStickyContent>
41
42
  <DropdownMenu.Root
@@ -55,27 +56,27 @@ export const StackSection = ({
55
56
  {view.collapsed ? (
56
57
  <DropdownMenu.Item onClick={() => onNavigate(id)} data-testid='section.navigate-to'>
57
58
  <Icon icon='ph--arrow-right--regular' size={5} />
58
- <span className='mis-2 grow'>{t('navigate to section label')}</span>
59
+ <span className='ms-2 grow'>{t('navigate to section label')}</span>
59
60
  </DropdownMenu.Item>
60
61
  ) : (
61
62
  <CollapsiblePrimitive.Trigger asChild>
62
63
  <DropdownMenu.Item>
63
64
  <CaretDownUp className={getSize(5)} />
64
- <span className='mis-2 grow'>{t('collapse label')}</span>
65
+ <span className='ms-2 grow'>{t('collapse label')}</span>
65
66
  </DropdownMenu.Item>
66
67
  </CollapsiblePrimitive.Trigger>
67
68
  )}
68
69
  <DropdownMenu.Item onClick={() => onAdd(id, 'before')} data-testid='section.add-before'>
69
70
  <Icon icon='ph--arrow-line-up--regular' size={5} />
70
- <span className='mis-2 grow'>{t('add section before label')}</span>
71
+ <span className='ms-2 grow'>{t('add section before label')}</span>
71
72
  </DropdownMenu.Item>
72
73
  <DropdownMenu.Item onClick={() => onAdd(id, 'after')} data-testid='section.add-after'>
73
74
  <Icon icon='ph--arrow-line-down--regular' size={5} />
74
- <span className='mis-2 grow'>{t('add section after label')}</span>
75
+ <span className='ms-2 grow'>{t('add section after label')}</span>
75
76
  </DropdownMenu.Item>
76
77
  <DropdownMenu.Item onClick={() => onDelete(id)} data-testid='section.remove'>
77
78
  <Icon icon='ph--trash--regular' size={5} />
78
- <span className='mis-2 grow'>{t('remove section label')}</span>
79
+ <span className='ms-2 grow'>{t('remove section label')}</span>
79
80
  </DropdownMenu.Item>
80
81
  </DropdownMenu.Viewport>
81
82
  <DropdownMenu.Arrow />
@@ -106,10 +107,10 @@ export const StackSection = ({
106
107
  </StackItem.HeadingStickyContent>
107
108
  </StackItem.Heading>
108
109
  <CollapsiblePrimitive.Content>
109
- <Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
110
+ <Surface.Surface role='section' data={{ subject: object }} limit={1} placeholder={<></>} />
110
111
  </CollapsiblePrimitive.Content>
111
112
  {view.collapsed && (
112
- <StackItem.Content classNames='attention-surface'>
113
+ <StackItem.Content classNames='dx-attention-surface'>
113
114
  <h2 className={mx('flex items-center p-4 font-medium', textBlockWidth)}>{view.title}</h2>
114
115
  </StackItem.Content>
115
116
  )}
@@ -5,19 +5,26 @@
5
5
  import React from 'react';
6
6
 
7
7
  import { Input, useTranslation } from '@dxos/react-ui';
8
- import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
8
+ import { Settings } from '@dxos/react-ui-form';
9
9
 
10
- import { STACK_PLUGIN } from '../meta';
10
+ import { meta } from '../meta';
11
11
  import { type StackSettingsProps } from '../types';
12
12
 
13
13
  export const StackSettings = ({ settings }: { settings: StackSettingsProps }) => {
14
- const { t } = useTranslation(STACK_PLUGIN);
14
+ const { t } = useTranslation(meta.id);
15
15
 
16
16
  return (
17
- <DeprecatedFormContainer>
18
- <DeprecatedFormInput label={t('settings separation label')}>
19
- <Input.Switch checked={settings.separation} onCheckedChange={(checked) => (settings.separation = !!checked)} />
20
- </DeprecatedFormInput>
21
- </DeprecatedFormContainer>
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>
22
29
  );
23
30
  };
@@ -2,8 +2,6 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { lazy } from 'react';
6
-
7
- export const StackMain = lazy(() => import('./StackMain'));
8
-
5
+ export * from './StackContext';
6
+ export * from './StackSection';
9
7
  export * from './StackSettings';
@@ -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 { 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/types';
18
+ import { Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
19
+ import { AttentionProvider } from '@dxos/react-ui-attention';
20
+ import { Stack, StackItem } from '@dxos/react-ui-stack';
21
+ import { isNonNullable } from '@dxos/util';
22
+
23
+ import { StackContext, StackSection } from '../../components';
24
+ import { meta } from '../../meta';
25
+ import {
26
+ type AddSectionPosition,
27
+ type CollapsedSections,
28
+ type StackSectionItem,
29
+ type StackSectionMetadata,
30
+ type StackSectionView,
31
+ } from '../../types';
32
+
33
+ const collectionObjectsFamily = Atom.family((collection: Collection.Collection) =>
34
+ Atom.make((get) => {
35
+ const snapshot = get(AtomObj.make(collection));
36
+ return (
37
+ snapshot.objects
38
+ // TODO(wittjosiah): Why isn't this type inferred correctly?
39
+ .map((ref: Ref.Ref<Obj.Unknown>) => get(AtomObj.makeWithReactive(ref)))
40
+ .filter(isNonNullable)
41
+ );
42
+ }),
43
+ );
44
+
45
+ type StackContainerProps = SurfaceComponentProps<Collection.Collection> & {
46
+ id: string;
47
+ };
48
+
49
+ export const StackContainer = ({ id, subject: collection }: StackContainerProps) => {
50
+ const { invokePromise } = useOperationInvoker();
51
+ const { graph } = useAppGraph();
52
+ const { t } = useTranslation(meta.id);
53
+ const allMetadata = useCapabilities(AppCapabilities.Metadata);
54
+ const [collapsedSections, setCollapsedSections] = useState<CollapsedSections>({});
55
+
56
+ // TODO(wittjosiah): Re-implement stack views with relations.
57
+ // const defaultStack = useMemo(() => Obj.make(StackViewType, { sections: {} }), [collection]);
58
+ // const stack = (collection.views[StackViewType.typename]?.target as StackViewType | undefined) ?? defaultStack;
59
+ // useEffect(() => {
60
+ // if (!collection.views[StackViewType.typename]) {
61
+ // collection.views[StackViewType.typename] = Ref.make(stack);
62
+ // }
63
+ // }, [collection, stack]);
64
+
65
+ const collectionObjects = useAtomValue(collectionObjectsFamily(collection));
66
+ const items = collectionObjects.map((object: Obj.Unknown) => {
67
+ const metadata = allMetadata.find((m) => m.id === (Obj.getTypename(object) ?? 'never'))
68
+ ?.metadata as StackSectionMetadata;
69
+ const view = {
70
+ // ...stack.sections[object.id],
71
+ collapsed: collapsedSections[Obj.getDXN(object).toString()],
72
+ title:
73
+ (object as any)?.title ??
74
+ // TODO(wittjosiah): `getNode` is not reactive.
75
+ toLocalizedString(
76
+ Graph.getNode(graph, Obj.getDXN(object).toString()).pipe(Option.getOrNull)?.properties.label,
77
+ t,
78
+ ),
79
+ } as StackSectionView;
80
+ return { id: Obj.getDXN(object).toString(), object, metadata, view } satisfies StackSectionItem;
81
+ });
82
+
83
+ const handleDelete = useCallback(
84
+ async (id: string) => {
85
+ const index = collection.objects
86
+ .map((object) => object.target)
87
+ .filter(isNonNullable)
88
+ .findIndex((section) => Obj.getDXN(section).toString() === id);
89
+ const object = collection.objects[index].target;
90
+ if (Obj.isObject(object)) {
91
+ await invokePromise(SpaceOperation.RemoveObjects, {
92
+ objects: [object],
93
+ target: collection,
94
+ });
95
+
96
+ // TODO(wittjosiah): The section should also be removed, but needs to be restored if the action is undone.
97
+ // delete stack.sections[Path.last(path)];
98
+ }
99
+ },
100
+ [collection, invokePromise],
101
+ );
102
+
103
+ const handleAdd = useCallback(
104
+ async (id: string, position: AddSectionPosition) => {
105
+ // TODO(wittjosiah): Use object creation dialog.
106
+ await invokePromise(LayoutOperation.UpdateDialog, {
107
+ subject: `${meta.id}/AddSectionDialog`,
108
+ blockAlign: 'start',
109
+ props: {
110
+ path: id,
111
+ position,
112
+ collection,
113
+ },
114
+ });
115
+ },
116
+ [collection, invokePromise],
117
+ );
118
+
119
+ const handleNavigate = useCallback(
120
+ async (id: string) => {
121
+ await invokePromise(LayoutOperation.Open, { subject: [id] });
122
+ },
123
+ [invokePromise],
124
+ );
125
+
126
+ const handleCollapse = useCallback(
127
+ (id: string, collapsed: boolean) => setCollapsedSections((prev) => ({ ...prev, [id]: collapsed })),
128
+ [],
129
+ );
130
+
131
+ const handleAddSection = useCallback(
132
+ () =>
133
+ invokePromise(SpaceOperation.OpenCreateObject, {
134
+ target: collection,
135
+ navigable: false,
136
+ }),
137
+ [collection, invokePromise],
138
+ );
139
+
140
+ return (
141
+ <StackItem.Content toolbar classNames='dx-article overflow-hidden border-l border-r border-subdued-separator'>
142
+ <Toolbar.Root>
143
+ <Toolbar.IconButton
144
+ icon='ph--plus--regular'
145
+ iconOnly
146
+ label='Add section'
147
+ data-testid='stack.addSection'
148
+ onClick={handleAddSection}
149
+ />
150
+ </Toolbar.Root>
151
+ <AttentionProvider id={id}>
152
+ <StackContext.Provider
153
+ value={{
154
+ onCollapse: handleCollapse,
155
+ onNavigate: handleNavigate,
156
+ onDelete: handleDelete,
157
+ onAdd: handleAdd,
158
+ }}
159
+ >
160
+ <Stack orientation='vertical' size='intrinsic' id={id} data-testid='main.stack' classNames='overflow-y-auto'>
161
+ {items.map((item) => (
162
+ <StackSection key={item.id} {...item} />
163
+ ))}
164
+ </Stack>
165
+ </StackContext.Provider>
166
+ </AttentionProvider>
167
+ </StackItem.Content>
168
+ );
169
+ };
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { StackContainer } from './StackContainer';
6
+
7
+ export default StackContainer;
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { type ComponentType, lazy } from 'react';
6
+
7
+ export const StackContainer: ComponentType<any> = lazy(() => import('./StackContainer'));
package/src/meta.ts CHANGED
@@ -2,17 +2,20 @@
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
+ import { trim } from '@dxos/util';
6
7
 
7
- export const STACK_PLUGIN = 'dxos.org/plugin/stack';
8
8
  export const SECTION_IDENTIFIER = 'dxos.org/type/StackSection';
9
9
 
10
- export const meta: PluginMeta = {
11
- id: STACK_PLUGIN,
10
+ export const meta: Plugin.Meta = {
11
+ id: 'dxos.org/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',
15
- description: 'View collections of objects within the deck.',
15
+ description: trim`
16
+ Organize and view curated collections of workspace objects in customizable layouts.
17
+ Group related items together and manage collections with sections and filtering.
18
+ `,
16
19
  icon: 'ph--stack-simple--regular',
17
20
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-stack',
18
21
  };
@@ -12,6 +12,7 @@ export const translations = [
12
12
  'en-US': {
13
13
  [meta.id]: {
14
14
  'plugin name': 'Stacks',
15
+ 'settings title': 'Stack plugin settings',
15
16
  'settings separation label': 'Separate sections',
16
17
  'add section beforeAll dialog title': 'Add a section to the start',
17
18
  'add section afterAll dialog title': 'Add a section to the end',
@@ -20,16 +21,16 @@ export const translations = [
20
21
  'add section input placeholder': 'Find the type of section to add',
21
22
  'upload file label': 'Add file',
22
23
  'add section label': 'Add section',
23
- 'empty stack message': 'Drag items into the stack.',
24
+ 'empty stack message': 'Drag objects into the stack.',
24
25
  'remove section label': 'Delete',
25
- 'navigate to section label': 'Navigate to item',
26
+ 'navigate to section label': 'Navigate to object',
26
27
  'untitled section title': 'Untitled section',
27
28
  'add section before label': 'Add before',
28
29
  'add section after label': 'Add after',
29
30
  'expand label': 'Expand',
30
31
  'collapse label': 'Collapse',
31
32
  'open chat thread label': 'Open chat thread',
32
- 'drag handle label': 'Press space or enter to begin dragging this item.',
33
+ 'drag handle label': 'Press space or enter to begin dragging this object.',
33
34
  },
34
35
  },
35
36
  },