@dxos/plugin-board 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

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 (81) hide show
  1. package/dist/lib/browser/chunk-J5LGTIGS.mjs +10 -0
  2. package/dist/lib/browser/chunk-J5LGTIGS.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +55 -82
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/translations.mjs +29 -0
  7. package/dist/lib/browser/translations.mjs.map +7 -0
  8. package/dist/lib/browser/types/index.mjs +31 -2
  9. package/dist/lib/browser/types/index.mjs.map +4 -4
  10. package/dist/lib/node-esm/chunk-HSLMI22Q.mjs +11 -0
  11. package/dist/lib/node-esm/chunk-HSLMI22Q.mjs.map +7 -0
  12. package/dist/lib/node-esm/index.mjs +55 -82
  13. package/dist/lib/node-esm/index.mjs.map +4 -4
  14. package/dist/lib/node-esm/meta.json +1 -1
  15. package/dist/lib/node-esm/translations.mjs +30 -0
  16. package/dist/lib/node-esm/translations.mjs.map +7 -0
  17. package/dist/lib/node-esm/types/index.mjs +31 -2
  18. package/dist/lib/node-esm/types/index.mjs.map +4 -4
  19. package/dist/types/src/BoardPlugin.d.ts +2 -1
  20. package/dist/types/src/BoardPlugin.d.ts.map +1 -1
  21. package/dist/types/src/capabilities/index.d.ts +2 -2
  22. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  23. package/dist/types/src/capabilities/react-surface.d.ts +3 -2
  24. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  25. package/dist/types/src/components/index.d.ts +0 -1
  26. package/dist/types/src/components/index.d.ts.map +1 -1
  27. package/dist/types/src/containers/BoardContainer/BoardContainer.d.ts +6 -0
  28. package/dist/types/src/containers/BoardContainer/BoardContainer.d.ts.map +1 -0
  29. package/dist/types/src/containers/BoardContainer/BoardContainer.stories.d.ts +54 -0
  30. package/dist/types/src/containers/BoardContainer/BoardContainer.stories.d.ts.map +1 -0
  31. package/dist/types/src/containers/BoardContainer/index.d.ts +2 -0
  32. package/dist/types/src/containers/BoardContainer/index.d.ts.map +1 -0
  33. package/dist/types/src/containers/index.d.ts +3 -0
  34. package/dist/types/src/containers/index.d.ts.map +1 -0
  35. package/dist/types/src/index.d.ts +0 -2
  36. package/dist/types/src/index.d.ts.map +1 -1
  37. package/dist/types/src/meta.d.ts +2 -2
  38. package/dist/types/src/meta.d.ts.map +1 -1
  39. package/dist/types/src/translations.d.ts +22 -13
  40. package/dist/types/src/translations.d.ts.map +1 -1
  41. package/dist/types/src/types/Board.d.ts +26 -68
  42. package/dist/types/src/types/Board.d.ts.map +1 -1
  43. package/dist/types/tsconfig.tsbuildinfo +1 -1
  44. package/package.json +72 -55
  45. package/src/BoardPlugin.tsx +39 -52
  46. package/src/capabilities/index.ts +2 -3
  47. package/src/capabilities/react-surface.tsx +23 -14
  48. package/src/components/index.ts +0 -2
  49. package/src/containers/BoardContainer/BoardContainer.stories.tsx +122 -0
  50. package/src/containers/BoardContainer/BoardContainer.tsx +183 -0
  51. package/src/containers/BoardContainer/index.ts +5 -0
  52. package/src/containers/index.ts +7 -0
  53. package/src/index.ts +0 -2
  54. package/src/meta.ts +9 -5
  55. package/src/translations.ts +12 -10
  56. package/src/types/Board.ts +12 -22
  57. package/dist/lib/browser/chunk-2AR36W5A.mjs +0 -119
  58. package/dist/lib/browser/chunk-2AR36W5A.mjs.map +0 -7
  59. package/dist/lib/browser/chunk-V67SBM4U.mjs +0 -59
  60. package/dist/lib/browser/chunk-V67SBM4U.mjs.map +0 -7
  61. package/dist/lib/browser/intent-resolver-6NM32ZSV.mjs +0 -33
  62. package/dist/lib/browser/intent-resolver-6NM32ZSV.mjs.map +0 -7
  63. package/dist/lib/browser/react-surface-S7H45RGL.mjs +0 -30
  64. package/dist/lib/browser/react-surface-S7H45RGL.mjs.map +0 -7
  65. package/dist/lib/node-esm/chunk-AWGKINO6.mjs +0 -121
  66. package/dist/lib/node-esm/chunk-AWGKINO6.mjs.map +0 -7
  67. package/dist/lib/node-esm/chunk-XCGDC6OV.mjs +0 -60
  68. package/dist/lib/node-esm/chunk-XCGDC6OV.mjs.map +0 -7
  69. package/dist/lib/node-esm/intent-resolver-5DQ5PPTT.mjs +0 -34
  70. package/dist/lib/node-esm/intent-resolver-5DQ5PPTT.mjs.map +0 -7
  71. package/dist/lib/node-esm/react-surface-UGBLNFXL.mjs +0 -31
  72. package/dist/lib/node-esm/react-surface-UGBLNFXL.mjs.map +0 -7
  73. package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
  74. package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
  75. package/dist/types/src/components/BoardContainer.d.ts +0 -8
  76. package/dist/types/src/components/BoardContainer.d.ts.map +0 -1
  77. package/dist/types/src/components/BoardContainer.stories.d.ts +0 -8
  78. package/dist/types/src/components/BoardContainer.stories.d.ts.map +0 -1
  79. package/src/capabilities/intent-resolver.ts +0 -34
  80. package/src/components/BoardContainer.stories.tsx +0 -143
  81. package/src/components/BoardContainer.tsx +0 -104
package/package.json CHANGED
@@ -1,87 +1,104 @@
1
1
  {
2
2
  "name": "@dxos/plugin-board",
3
- "version": "0.8.4-main.f5c0578",
3
+ "version": "0.8.4-main.fcc0d83b33",
4
4
  "description": "Surface plugin for card baords",
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",
15
+ "imports": {
16
+ "#capabilities": "./src/capabilities/index.ts",
17
+ "#components": "./src/components/index.ts",
18
+ "#containers": "./src/containers/index.ts",
19
+ "#meta": "./src/meta.ts",
20
+ "#translations": "./src/translations.ts",
21
+ "#types": "./src/types/index.ts"
22
+ },
11
23
  "exports": {
12
24
  ".": {
13
25
  "source": "./src/index.ts",
14
- "types": "./dist/types/src/index.d.ts",
15
26
  "browser": "./dist/lib/browser/index.mjs",
16
- "node": "./dist/lib/node-esm/index.mjs"
27
+ "node": "./dist/lib/node-esm/index.mjs",
28
+ "types": "./dist/types/src/index.d.ts"
29
+ },
30
+ "./translations": {
31
+ "source": "./src/translations.ts",
32
+ "types": "./dist/types/src/translations.d.ts",
33
+ "browser": "./dist/lib/browser/translations.mjs",
34
+ "node": "./dist/lib/node-esm/translations.mjs"
17
35
  },
18
36
  "./types": {
19
37
  "source": "./src/types/index.ts",
20
- "types": "./dist/types/src/types/index.d.ts",
21
38
  "browser": "./dist/lib/browser/types/index.mjs",
22
- "node": "./dist/lib/node-esm/types/index.mjs"
39
+ "node": "./dist/lib/node-esm/types/index.mjs",
40
+ "types": "./dist/types/src/types/index.d.ts"
23
41
  }
24
42
  },
25
43
  "types": "dist/types/src/index.d.ts",
26
- "typesVersions": {
27
- "*": {
28
- "types": [
29
- "dist/types/src/types/index.d.ts"
30
- ]
31
- }
32
- },
33
44
  "files": [
34
45
  "dist",
35
46
  "src"
36
47
  ],
37
48
  "dependencies": {
38
- "@preact-signals/safe-react": "^0.9.0",
39
- "@preact/signals-core": "^1.9.0",
40
- "@preact/signals-react": "^3.2.0",
41
- "effect": "3.17.7",
42
- "@dxos/ai": "0.8.4-main.f5c0578",
43
- "@dxos/app-framework": "0.8.4-main.f5c0578",
44
- "@dxos/assistant": "0.8.4-main.f5c0578",
45
- "@dxos/async": "0.8.4-main.f5c0578",
46
- "@dxos/blueprints": "0.8.4-main.f5c0578",
47
- "@dxos/client": "0.8.4-main.f5c0578",
48
- "@dxos/echo": "0.8.4-main.f5c0578",
49
- "@dxos/echo-schema": "0.8.4-main.f5c0578",
50
- "@dxos/invariant": "0.8.4-main.f5c0578",
51
- "@dxos/plugin-client": "0.8.4-main.f5c0578",
52
- "@dxos/log": "0.8.4-main.f5c0578",
53
- "@dxos/plugin-graph": "0.8.4-main.f5c0578",
54
- "@dxos/plugin-search": "0.8.4-main.f5c0578",
55
- "@dxos/effect": "0.8.4-main.f5c0578",
56
- "@dxos/plugin-space": "0.8.4-main.f5c0578",
57
- "@dxos/random": "0.8.4-main.f5c0578",
58
- "@dxos/react-ui": "0.8.4-main.f5c0578",
59
- "@dxos/react-ui-board": "0.8.4-main.f5c0578",
60
- "@dxos/react-ui-form": "0.8.4-main.f5c0578",
61
- "@dxos/react-ui-stack": "0.8.4-main.f5c0578",
62
- "@dxos/util": "0.8.4-main.f5c0578",
63
- "@dxos/react-client": "0.8.4-main.f5c0578",
64
- "@dxos/schema": "0.8.4-main.f5c0578"
49
+ "@effect-atom/atom": "^0.5.1",
50
+ "@effect-atom/atom-react": "^0.5.0",
51
+ "effect": "3.20.0",
52
+ "@dxos/ai": "0.8.4-main.fcc0d83b33",
53
+ "@dxos/app-framework": "0.8.4-main.fcc0d83b33",
54
+ "@dxos/app-toolkit": "0.8.4-main.fcc0d83b33",
55
+ "@dxos/assistant": "0.8.4-main.fcc0d83b33",
56
+ "@dxos/async": "0.8.4-main.fcc0d83b33",
57
+ "@dxos/compute": "0.8.4-main.fcc0d83b33",
58
+ "@dxos/echo": "0.8.4-main.fcc0d83b33",
59
+ "@dxos/client": "0.8.4-main.fcc0d83b33",
60
+ "@dxos/echo-react": "0.8.4-main.fcc0d83b33",
61
+ "@dxos/echo-atom": "0.8.4-main.fcc0d83b33",
62
+ "@dxos/effect": "0.8.4-main.fcc0d83b33",
63
+ "@dxos/invariant": "0.8.4-main.fcc0d83b33",
64
+ "@dxos/plugin-client": "0.8.4-main.fcc0d83b33",
65
+ "@dxos/log": "0.8.4-main.fcc0d83b33",
66
+ "@dxos/plugin-markdown": "0.8.4-main.fcc0d83b33",
67
+ "@dxos/plugin-search": "0.8.4-main.fcc0d83b33",
68
+ "@dxos/plugin-graph": "0.8.4-main.fcc0d83b33",
69
+ "@dxos/random": "0.8.4-main.fcc0d83b33",
70
+ "@dxos/react-client": "0.8.4-main.fcc0d83b33",
71
+ "@dxos/plugin-space": "0.8.4-main.fcc0d83b33",
72
+ "@dxos/react-ui": "0.8.4-main.fcc0d83b33",
73
+ "@dxos/react-ui-board": "0.8.4-main.fcc0d83b33",
74
+ "@dxos/react-ui-attention": "0.8.4-main.fcc0d83b33",
75
+ "@dxos/react-ui-mosaic": "0.8.4-main.fcc0d83b33",
76
+ "@dxos/schema": "0.8.4-main.fcc0d83b33",
77
+ "@dxos/react-ui-stack": "0.8.4-main.fcc0d83b33",
78
+ "@dxos/util": "0.8.4-main.fcc0d83b33",
79
+ "@dxos/types": "0.8.4-main.fcc0d83b33",
80
+ "@dxos/react-ui-form": "0.8.4-main.fcc0d83b33"
65
81
  },
66
82
  "devDependencies": {
67
- "@types/react": "~18.2.0",
68
- "@types/react-dom": "~18.2.0",
69
- "react": "~18.2.0",
70
- "react-dom": "~18.2.0",
71
- "vite": "5.4.7",
72
- "@dxos/plugin-preview": "0.8.4-main.f5c0578",
73
- "@dxos/plugin-theme": "0.8.4-main.f5c0578",
74
- "@dxos/react-ui-theme": "0.8.4-main.f5c0578",
75
- "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f5c0578",
76
- "@dxos/storybook-utils": "0.8.4-main.f5c0578",
77
- "@dxos/test-utils": "0.8.4-main.f5c0578"
83
+ "@types/react": "~19.2.7",
84
+ "@types/react-dom": "~19.2.3",
85
+ "react": "~19.2.3",
86
+ "react-dom": "~19.2.3",
87
+ "vite": "^8.0.10",
88
+ "@dxos/plugin-testing": "0.8.4-main.fcc0d83b33",
89
+ "@dxos/plugin-preview": "0.8.4-main.fcc0d83b33",
90
+ "@dxos/plugin-theme": "0.8.4-main.fcc0d83b33",
91
+ "@dxos/storybook-utils": "0.8.4-main.fcc0d83b33",
92
+ "@dxos/test-utils": "0.8.4-main.fcc0d83b33",
93
+ "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fcc0d83b33",
94
+ "@dxos/ui-theme": "0.8.4-main.fcc0d83b33"
78
95
  },
79
96
  "peerDependencies": {
80
- "effect": "^3.13.3",
81
- "react": "~18.2.0",
82
- "react-dom": "~18.2.0",
83
- "@dxos/react-ui": "0.8.4-main.f5c0578",
84
- "@dxos/react-ui-theme": "0.8.4-main.f5c0578"
97
+ "effect": "3.20.0",
98
+ "react": "~19.2.3",
99
+ "react-dom": "~19.2.3",
100
+ "@dxos/ui-theme": "0.8.4-main.fcc0d83b33",
101
+ "@dxos/react-ui": "0.8.4-main.fcc0d83b33"
85
102
  },
86
103
  "publishConfig": {
87
104
  "access": "public"
@@ -2,57 +2,44 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
6
- import { ClientEvents } from '@dxos/plugin-client';
7
- import { SpaceCapabilities } from '@dxos/plugin-space';
8
- import { defineObjectForm } from '@dxos/plugin-space/types';
9
- import { translations as boardTranslations } from '@dxos/react-ui-board';
5
+ import * as Effect from 'effect/Effect';
6
+ import * as Option from 'effect/Option';
10
7
 
11
- import { IntentResolver, ReactSurface } from './capabilities';
12
- import { meta } from './meta';
13
- import { translations } from './translations';
14
- import { Board } from './types';
8
+ import { Plugin } from '@dxos/app-framework';
9
+ import { AppPlugin } from '@dxos/app-toolkit';
10
+ import { Operation } from '@dxos/compute';
11
+ import { Annotation } from '@dxos/echo';
12
+ import { SpaceOperation } from '@dxos/plugin-space/operations';
13
+ import { type CreateObject } from '@dxos/plugin-space/types';
14
+ import { translations as boardTranslations } from '@dxos/react-ui-board/translations';
15
15
 
16
- export const BoardPlugin = () => {
17
- return definePlugin(meta, [
18
- defineModule({
19
- id: `${meta.id}/module/translations`,
20
- activatesOn: Events.SetupTranslations,
21
- activate: () => contributes(Capabilities.Translations, [...translations, ...boardTranslations]),
22
- }),
23
- defineModule({
24
- id: `${meta.id}/module/metadata`,
25
- activatesOn: Events.SetupMetadata,
26
- activate: () =>
27
- // TODO(burdon): "Metadata" here seems non-descriptive; is this specifically for the type? ObjectMetadata?
28
- contributes(Capabilities.Metadata, {
29
- id: Board.Board.typename,
30
- metadata: {
31
- icon: 'ph--squares-four--regular',
32
- },
33
- }),
34
- }),
35
- defineModule({
36
- id: `${meta.id}/module/object-form`,
37
- activatesOn: ClientEvents.SetupSchema,
38
- activate: () =>
39
- contributes(
40
- SpaceCapabilities.ObjectForm,
41
- defineObjectForm({
42
- objectSchema: Board.Board,
43
- getIntent: () => createIntent(Board.Create),
44
- }),
45
- ),
46
- }),
47
- defineModule({
48
- id: `${meta.id}/module/react-surface`,
49
- activatesOn: Events.SetupReactSurface,
50
- activate: ReactSurface,
51
- }),
52
- defineModule({
53
- id: `${meta.id}/module/intent-resolver`,
54
- activatesOn: Events.SetupIntentResolver,
55
- activate: IntentResolver,
56
- }),
57
- ]);
58
- };
16
+ import { ReactSurface } from '#capabilities';
17
+ import { meta } from '#meta';
18
+ import { translations } from '#translations';
19
+ import { Board } from '#types';
20
+
21
+ export const BoardPlugin = Plugin.define(meta).pipe(
22
+ AppPlugin.addMetadataModule({
23
+ metadata: {
24
+ id: Board.Board.typename,
25
+ metadata: {
26
+ icon: Annotation.IconAnnotation.get(Board.Board).pipe(Option.getOrThrow).icon,
27
+ iconHue: Annotation.IconAnnotation.get(Board.Board).pipe(Option.getOrThrow).hue ?? 'white',
28
+ createObject: ((props, options) =>
29
+ Effect.gen(function* () {
30
+ const object = Board.makeBoard(props);
31
+ return yield* Operation.invoke(SpaceOperation.AddObject, {
32
+ object,
33
+ target: options.target,
34
+ hidden: true,
35
+ targetNodeId: options.targetNodeId,
36
+ });
37
+ })) satisfies CreateObject,
38
+ },
39
+ },
40
+ }),
41
+ AppPlugin.addSchemaModule({ schema: [Board.Board] }),
42
+ AppPlugin.addSurfaceModule({ activate: ReactSurface }),
43
+ AppPlugin.addTranslationsModule({ translations: [...translations, ...boardTranslations] }),
44
+ Plugin.make,
45
+ );
@@ -2,7 +2,6 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { lazy } from '@dxos/app-framework';
5
+ import { Capability } from '@dxos/app-framework';
6
6
 
7
- export const IntentResolver = lazy(() => import('./intent-resolver'));
8
- export const ReactSurface = lazy(() => import('./react-surface'));
7
+ export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
@@ -2,21 +2,30 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ import * as Effect from 'effect/Effect';
5
6
  import React from 'react';
6
7
 
7
- import { Capabilities, type PluginContext, contributes, createSurface } from '@dxos/app-framework';
8
- import { Obj } from '@dxos/echo';
8
+ import { Capabilities, Capability } from '@dxos/app-framework';
9
+ import { Surface } from '@dxos/app-framework/ui';
10
+ import { AppSurface } from '@dxos/app-toolkit/ui';
9
11
 
10
- import { BoardContainer } from '../components';
11
- import { meta } from '../meta';
12
- import { Board } from '../types';
12
+ import { BoardContainer } from '#containers';
13
+ import { Board } from '#types';
13
14
 
14
- export default (context: PluginContext) =>
15
- contributes(Capabilities.ReactSurface, [
16
- createSurface({
17
- id: meta.id,
18
- role: ['article', 'section'],
19
- filter: (data): data is { subject: Board.Board } => Obj.instanceOf(Board.Board, data.subject),
20
- component: ({ data, role }) => <BoardContainer board={data.subject} role={role} />,
21
- }),
22
- ]);
15
+ export default Capability.makeModule(() =>
16
+ Effect.succeed(
17
+ Capability.contributes(Capabilities.ReactSurface, [
18
+ Surface.create({
19
+ id: 'root',
20
+ // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
21
+ filter: AppSurface.oneOf(
22
+ AppSurface.object(AppSurface.Article, Board.Board),
23
+ AppSurface.object(AppSurface.Section, Board.Board),
24
+ ),
25
+ component: ({ role, data }) => (
26
+ <BoardContainer role={role} subject={data.subject} attendableId={data.attendableId} />
27
+ ),
28
+ }),
29
+ ]),
30
+ ),
31
+ );
@@ -1,5 +1,3 @@
1
1
  //
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
-
5
- export * from './BoardContainer';
@@ -0,0 +1,122 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import { type StoryObj } from '@storybook/react-vite';
6
+ import * as Effect from 'effect/Effect';
7
+ import React, { useEffect, useState } from 'react';
8
+
9
+ import { withPluginManager } from '@dxos/app-framework/testing';
10
+ import { Obj } from '@dxos/echo';
11
+ import { ClientPlugin } from '@dxos/plugin-client';
12
+ import { initializeIdentity } from '@dxos/plugin-client/testing';
13
+ import { PreviewPlugin } from '@dxos/plugin-preview';
14
+ import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
15
+ import { random } from '@dxos/random';
16
+ import { Filter, Ref, useQuery, useSpaces } from '@dxos/react-client/echo';
17
+ import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
18
+ import { withLayout } from '@dxos/react-ui/testing';
19
+ import { Organization, Person } from '@dxos/types';
20
+
21
+ import { translations } from '#translations';
22
+ import { Board } from '#types';
23
+
24
+ import { BoardContainer } from './BoardContainer';
25
+
26
+ random.seed(0);
27
+
28
+ const createBoard = () =>
29
+ Obj.make(Board.Board, {
30
+ name: 'Test Board',
31
+ items: [],
32
+ layout: {
33
+ size: { width: 7, height: 5 },
34
+ cells: {},
35
+ },
36
+ });
37
+
38
+ const createOrg = () =>
39
+ Obj.make(Organization.Organization, {
40
+ name: random.commerce.productName(),
41
+ description: random.lorem.paragraph(),
42
+ image: random.image.url(),
43
+ website: random.internet.url(),
44
+ // TODO(burdon): Fix.
45
+ // status: random.helpers.arrayElement(Organization.StatusOptions).id,
46
+ });
47
+
48
+ const DefaultStory = () => {
49
+ const spaces = useSpaces();
50
+ const space = spaces[spaces.length - 1];
51
+ const boards = useQuery(space?.db, Filter.type(Board.Board));
52
+ const [board, setBoard] = useState<Board.Board>();
53
+
54
+ useEffect(() => {
55
+ if (boards.length && !board) {
56
+ const board = boards[0];
57
+ setBoard(board);
58
+ }
59
+ }, [boards]);
60
+
61
+ if (!board) {
62
+ return null;
63
+ }
64
+
65
+ return <BoardContainer role='board' subject={board} attendableId='test' />;
66
+ };
67
+
68
+ //
69
+ // Story definitions
70
+ //
71
+
72
+ const meta = {
73
+ title: 'plugins/plugin-board/containers/BoardContainer',
74
+ render: DefaultStory,
75
+ decorators: [
76
+ withLayout({ layout: 'fullscreen' }),
77
+ withPluginManager({
78
+ plugins: [
79
+ ...corePlugins(),
80
+ ClientPlugin({
81
+ types: [Organization.Organization, Person.Person, Board.Board],
82
+ onClientInitialized: ({ client }) =>
83
+ Effect.gen(function* () {
84
+ yield* initializeIdentity(client);
85
+ const space = yield* Effect.promise(() => client.spaces.create());
86
+ yield* Effect.promise(() => space.waitUntilReady());
87
+ const board = space.db.add(createBoard());
88
+
89
+ Obj.update(board, (board) => {
90
+ // Add some sample items
91
+ Array.from({ length: 10 }).map(() => {
92
+ const org = createOrg();
93
+ space.db.add(org);
94
+ board.items.push(Ref.make(org));
95
+ board.layout.cells[org.id] = {
96
+ x: Math.floor(Math.random() * 5) - 2,
97
+ y: Math.floor(Math.random() * 5) - 2,
98
+ width: 1,
99
+ height: 1,
100
+ };
101
+ return org;
102
+ });
103
+ });
104
+ }),
105
+ }),
106
+
107
+ StorybookPlugin({}),
108
+ PreviewPlugin(),
109
+ ],
110
+ }),
111
+ ],
112
+ parameters: {
113
+ layout: 'fullscreen',
114
+ translations: [...translations, ...stackTranslations],
115
+ },
116
+ };
117
+
118
+ export default meta;
119
+
120
+ type Story = StoryObj<typeof meta>;
121
+
122
+ export const Default: Story = {};
@@ -0,0 +1,183 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { useAtomValue } from '@effect-atom/atom-react';
6
+ import * as Atom from '@effect-atom/atom/Atom';
7
+ import React, { useCallback, useMemo, useRef, useState } from 'react';
8
+
9
+ import { Surface } from '@dxos/app-framework/ui';
10
+ import { AppSurface } from '@dxos/app-toolkit/ui';
11
+ import { Filter, Obj, Ref } from '@dxos/echo';
12
+ import { AtomObj } from '@dxos/echo-atom';
13
+ import { useObject } from '@dxos/echo-react';
14
+ import { invariant } from '@dxos/invariant';
15
+ import { Markdown } from '@dxos/plugin-markdown/types';
16
+ import { useQuery } from '@dxos/react-client/echo';
17
+ import { Panel } from '@dxos/react-ui';
18
+ import { useAttention } from '@dxos/react-ui-attention';
19
+ import { Board, type BoardController, type BoardRootProps, type Position } from '@dxos/react-ui-board';
20
+ import { ObjectPicker, type ObjectPickerContentProps } from '@dxos/react-ui-form';
21
+ import { isNonNullable } from '@dxos/util';
22
+
23
+ import { type Board as BoardType } from '#types';
24
+
25
+ const DEFAULT_POSITION = { x: 0, y: 0 } satisfies Position;
26
+
27
+ type PickerState = {
28
+ position: Position;
29
+ };
30
+
31
+ export type BoardContainerProps = AppSurface.ObjectArticleProps<BoardType.Board>;
32
+
33
+ export const BoardContainer = ({ role, subject: board, attendableId }: BoardContainerProps) => {
34
+ const { hasAttention } = useAttention(attendableId);
35
+ const db = Obj.getDatabase(board);
36
+ const [boardItems] = useObject(board, 'items');
37
+ const itemsAtom = useMemo(
38
+ () =>
39
+ Atom.make((get) => {
40
+ const result: Obj.Unknown[] = [];
41
+ for (const ref of boardItems ?? []) {
42
+ const obj = get(AtomObj.makeWithReactive(ref));
43
+ if (obj) {
44
+ result.push(obj);
45
+ }
46
+ }
47
+ return result;
48
+ }),
49
+ [boardItems],
50
+ );
51
+ const items = useAtomValue(itemsAtom);
52
+
53
+ const controller = useRef<BoardController>(null);
54
+ const addTriggerRef = useRef<HTMLButtonElement | null>(null);
55
+ const [pickerState, setPickerState] = useState<PickerState | null>(null);
56
+
57
+ // TODO(burdon): Use search.
58
+ const objects = useQuery(db, Filter.everything());
59
+ const options = useMemo<ObjectPickerContentProps['options']>(
60
+ () =>
61
+ objects
62
+ .filter((obj) => obj.id !== board.id)
63
+ .map((obj) => {
64
+ const label = Obj.getLabel(obj);
65
+ if (label) {
66
+ return {
67
+ id: obj.id,
68
+ label,
69
+ hue: 'neutral' as const,
70
+ };
71
+ }
72
+ })
73
+ .filter(isNonNullable)
74
+ .sort(({ label: a }, { label: b }) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase())),
75
+ [objects],
76
+ );
77
+
78
+ const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(
79
+ async (anchor, position) => {
80
+ const db = Obj.getDatabase(board);
81
+ invariant(db);
82
+ // Grid backdrop "+" supplies a position → create a new Markdown document directly.
83
+ // Toolbar "+" omits position → fall back to the picker over existing objects.
84
+ if (position) {
85
+ const doc = db.add(Markdown.make());
86
+ Obj.update(board, (board) => {
87
+ board.items.push(Ref.make(doc));
88
+ board.layout.cells[doc.id.toString()] = position;
89
+ });
90
+ return;
91
+ }
92
+
93
+ addTriggerRef.current = anchor;
94
+ setPickerState({ position: DEFAULT_POSITION });
95
+ },
96
+ [board],
97
+ );
98
+
99
+ // TODO(burdon): Use intents so can be undone.
100
+ const handleDelete = useCallback<NonNullable<BoardRootProps['onDelete']>>(
101
+ (id) => {
102
+ // TODO(burdon): Impl. DXN.equals and pass in DXN from `id`.
103
+ const idx = board.items.findIndex((ref) => ref.dxn.asEchoDXN()?.echoId === id);
104
+ Obj.update(board, (board) => {
105
+ if (idx !== -1) {
106
+ board.items.splice(idx, 1);
107
+ }
108
+ delete board.layout.cells[id];
109
+ });
110
+ },
111
+ [board],
112
+ );
113
+
114
+ const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(
115
+ (id, position) => {
116
+ const layout = board.layout.cells[id];
117
+ Obj.update(board, (board) => {
118
+ board.layout.cells[id] = { ...layout, ...position };
119
+ });
120
+ },
121
+ [board],
122
+ );
123
+
124
+ const handleSelect = useCallback<NonNullable<ObjectPickerContentProps['onSelect']>>(
125
+ (id) => {
126
+ if (!pickerState) {
127
+ return;
128
+ }
129
+
130
+ // Find the selected object by id from the space.
131
+ const selectedObject = objects.find((obj) => obj.id === id);
132
+ if (!Obj.isObject(selectedObject)) {
133
+ return;
134
+ }
135
+
136
+ // Create a reference to the selected object and add it to the board.
137
+ Obj.update(board, (board) => {
138
+ board.items.push(Ref.make(selectedObject));
139
+
140
+ // Set the layout position for the new item.
141
+ board.layout.cells[selectedObject.id.toString()] = pickerState.position;
142
+ });
143
+
144
+ // Close the picker.
145
+ setPickerState(null);
146
+ },
147
+ [pickerState, objects, board],
148
+ );
149
+
150
+ return (
151
+ <Board.Root ref={controller} layout={board.layout} onAdd={handleAdd} onDelete={handleDelete} onMove={handleMove}>
152
+ <ObjectPicker.Root
153
+ open={!!pickerState}
154
+ onOpenChange={(nextOpen: boolean) => {
155
+ setPickerState(nextOpen ? { position: DEFAULT_POSITION } : null);
156
+ }}
157
+ >
158
+ <Panel.Root role={role}>
159
+ <Panel.Toolbar asChild>
160
+ <Board.Toolbar disabled={!hasAttention} />
161
+ </Panel.Toolbar>
162
+ <Panel.Content asChild>
163
+ <Board.Container>
164
+ <Board.Viewport classNames='border-none'>
165
+ <Board.Backdrop />
166
+ <Board.Content>
167
+ {items?.map((item, index) => (
168
+ <Board.Cell item={item} key={index} layout={board.layout?.cells[item.id] ?? { x: 0, y: 0 }}>
169
+ {/* `editable` opts the cell into the in-place editor variant — surfaces that don't recognize the flag fall back to the read-only card. */}
170
+ <Surface.Surface type={AppSurface.Card} data={{ subject: item, editable: true }} limit={1} />
171
+ </Board.Cell>
172
+ ))}
173
+ </Board.Content>
174
+ </Board.Viewport>
175
+ </Board.Container>
176
+ </Panel.Content>
177
+ </Panel.Root>
178
+ <ObjectPicker.Content options={options} onSelect={handleSelect} classNames='dx-card-popover-width' />
179
+ <ObjectPicker.VirtualTrigger virtualRef={addTriggerRef} />
180
+ </ObjectPicker.Root>
181
+ </Board.Root>
182
+ );
183
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ export { BoardContainer as default } from './BoardContainer';
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { type ComponentType, lazy } from 'react';
6
+
7
+ export const BoardContainer: ComponentType<any> = lazy(() => import('./BoardContainer'));
package/src/index.ts CHANGED
@@ -2,8 +2,6 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- export * from './components';
6
5
  export * from './meta';
7
- export * from './types';
8
6
 
9
7
  export * from './BoardPlugin';