@dxos/plugin-masonry 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/chunk-J5LGTIGS.mjs +10 -0
- package/dist/lib/browser/chunk-J5LGTIGS.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +66 -43
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/types/index.mjs +60 -3
- package/dist/lib/browser/types/index.mjs.map +4 -4
- package/dist/lib/node-esm/chunk-HSLMI22Q.mjs +11 -0
- package/dist/lib/node-esm/chunk-HSLMI22Q.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +66 -43
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/types/index.mjs +60 -3
- package/dist/lib/node-esm/types/index.mjs.map +4 -4
- package/dist/types/src/MasonryPlugin.d.ts.map +1 -1
- package/dist/types/src/capabilities/index.d.ts +2 -1
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +5 -0
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -0
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -0
- package/dist/types/src/{components → containers/MasonryContainer}/MasonryContainer.d.ts +2 -2
- package/dist/types/src/containers/MasonryContainer/MasonryContainer.d.ts.map +1 -0
- package/dist/types/src/containers/MasonryContainer/MasonryContainer.stories.d.ts.map +1 -0
- package/dist/types/src/containers/MasonryContainer/index.d.ts +2 -0
- package/dist/types/src/containers/MasonryContainer/index.d.ts.map +1 -0
- package/dist/types/src/containers/index.d.ts +3 -0
- package/dist/types/src/containers/index.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +20 -18
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/types/Masonry.d.ts +4 -10
- package/dist/types/src/types/Masonry.d.ts.map +1 -1
- package/dist/types/src/types/MasonryAction.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +38 -28
- package/src/MasonryPlugin.tsx +29 -16
- package/src/capabilities/index.ts +3 -1
- package/src/capabilities/react-surface.tsx +32 -0
- package/src/components/index.ts +3 -0
- package/src/{components → containers/MasonryContainer}/MasonryContainer.stories.tsx +10 -10
- package/src/containers/MasonryContainer/MasonryContainer.tsx +124 -0
- package/src/containers/MasonryContainer/index.ts +5 -0
- package/src/containers/index.ts +7 -0
- package/src/meta.ts +1 -1
- package/src/translations.ts +12 -11
- package/src/types/Masonry.ts +12 -25
- package/src/types/MasonryAction.ts +0 -1
- package/dist/lib/browser/chunk-2QCFP5QL.mjs +0 -78
- package/dist/lib/browser/chunk-2QCFP5QL.mjs.map +0 -7
- package/dist/lib/browser/chunk-U46AGJ2D.mjs +0 -19
- package/dist/lib/browser/chunk-U46AGJ2D.mjs.map +0 -7
- package/dist/lib/browser/react-surface-BNMIVM2K.mjs +0 -94
- package/dist/lib/browser/react-surface-BNMIVM2K.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-6SGZVU7G.mjs +0 -79
- package/dist/lib/node-esm/chunk-6SGZVU7G.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-P6EZJITS.mjs +0 -21
- package/dist/lib/node-esm/chunk-P6EZJITS.mjs.map +0 -7
- package/dist/lib/node-esm/react-surface-OK33CG7H.mjs +0 -95
- package/dist/lib/node-esm/react-surface-OK33CG7H.mjs.map +0 -7
- package/dist/types/src/capabilities/react-surface/index.d.ts +0 -3
- package/dist/types/src/capabilities/react-surface/index.d.ts.map +0 -1
- package/dist/types/src/capabilities/react-surface/react-surface.d.ts +0 -5
- package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +0 -1
- package/dist/types/src/components/MasonryContainer.d.ts.map +0 -1
- package/dist/types/src/components/MasonryContainer.stories.d.ts.map +0 -1
- package/src/capabilities/react-surface/index.ts +0 -7
- package/src/capabilities/react-surface/react-surface.tsx +0 -31
- package/src/components/MasonryContainer.tsx +0 -79
- /package/dist/types/src/{components → containers/MasonryContainer}/MasonryContainer.stories.d.ts +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-masonry",
|
|
3
|
-
"version": "0.8.4-main.
|
|
3
|
+
"version": "0.8.4-main.9be5663bfe",
|
|
4
4
|
"description": "Masonry DXOS Surface plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -12,6 +12,13 @@
|
|
|
12
12
|
"author": "DXOS.org",
|
|
13
13
|
"sideEffects": true,
|
|
14
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
|
+
"#types": "./src/types/index.ts"
|
|
21
|
+
},
|
|
15
22
|
"exports": {
|
|
16
23
|
".": {
|
|
17
24
|
"source": "./src/index.ts",
|
|
@@ -39,43 +46,46 @@
|
|
|
39
46
|
"src"
|
|
40
47
|
],
|
|
41
48
|
"dependencies": {
|
|
42
|
-
"@dxos/app-framework": "0.8.4-main.
|
|
43
|
-
"@dxos/
|
|
44
|
-
"@dxos/
|
|
45
|
-
"@dxos/
|
|
46
|
-
"@dxos/plugin-client": "0.8.4-main.
|
|
47
|
-
"@dxos/
|
|
48
|
-
"@dxos/
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/react-ui
|
|
51
|
-
"@dxos/react-
|
|
52
|
-
"@dxos/react-ui-
|
|
53
|
-
"@dxos/react-ui-
|
|
54
|
-
"@dxos/react-ui-
|
|
55
|
-
"@dxos/
|
|
56
|
-
"@dxos/
|
|
57
|
-
"@dxos/
|
|
49
|
+
"@dxos/app-framework": "0.8.4-main.9be5663bfe",
|
|
50
|
+
"@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
|
|
51
|
+
"@dxos/echo": "0.8.4-main.9be5663bfe",
|
|
52
|
+
"@dxos/operation": "0.8.4-main.9be5663bfe",
|
|
53
|
+
"@dxos/plugin-client": "0.8.4-main.9be5663bfe",
|
|
54
|
+
"@dxos/effect": "0.8.4-main.9be5663bfe",
|
|
55
|
+
"@dxos/plugin-search": "0.8.4-main.9be5663bfe",
|
|
56
|
+
"@dxos/plugin-space": "0.8.4-main.9be5663bfe",
|
|
57
|
+
"@dxos/react-ui": "0.8.4-main.9be5663bfe",
|
|
58
|
+
"@dxos/react-client": "0.8.4-main.9be5663bfe",
|
|
59
|
+
"@dxos/react-ui-form": "0.8.4-main.9be5663bfe",
|
|
60
|
+
"@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
|
|
61
|
+
"@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
|
|
62
|
+
"@dxos/react-ui-search": "0.8.4-main.9be5663bfe",
|
|
63
|
+
"@dxos/react-ui-masonry": "0.8.4-main.9be5663bfe",
|
|
64
|
+
"@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
|
|
65
|
+
"@dxos/schema": "0.8.4-main.9be5663bfe",
|
|
66
|
+
"@dxos/types": "0.8.4-main.9be5663bfe",
|
|
67
|
+
"@dxos/util": "0.8.4-main.9be5663bfe"
|
|
58
68
|
},
|
|
59
69
|
"devDependencies": {
|
|
60
70
|
"@types/react": "~19.2.7",
|
|
61
71
|
"@types/react-dom": "~19.2.3",
|
|
62
|
-
"effect": "3.
|
|
72
|
+
"effect": "3.20.0",
|
|
63
73
|
"react": "~19.2.3",
|
|
64
74
|
"react-dom": "~19.2.3",
|
|
65
|
-
"vite": "7.1.
|
|
66
|
-
"@dxos/plugin-
|
|
67
|
-
"@dxos/
|
|
68
|
-
"@dxos/plugin-
|
|
69
|
-
"@dxos/storybook-utils": "0.8.4-main.
|
|
70
|
-
"@dxos/
|
|
71
|
-
"@dxos/ui-theme": "0.8.4-main.
|
|
75
|
+
"vite": "^7.1.11",
|
|
76
|
+
"@dxos/plugin-preview": "0.8.4-main.9be5663bfe",
|
|
77
|
+
"@dxos/plugin-testing": "0.8.4-main.9be5663bfe",
|
|
78
|
+
"@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
|
|
79
|
+
"@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
|
|
80
|
+
"@dxos/random": "0.8.4-main.9be5663bfe",
|
|
81
|
+
"@dxos/ui-theme": "0.8.4-main.9be5663bfe"
|
|
72
82
|
},
|
|
73
83
|
"peerDependencies": {
|
|
74
|
-
"effect": "3.
|
|
84
|
+
"effect": "3.20.0",
|
|
75
85
|
"react": "~19.2.3",
|
|
76
86
|
"react-dom": "~19.2.3",
|
|
77
|
-
"@dxos/ui
|
|
78
|
-
"@dxos/
|
|
87
|
+
"@dxos/react-ui": "0.8.4-main.9be5663bfe",
|
|
88
|
+
"@dxos/ui-theme": "0.8.4-main.9be5663bfe"
|
|
79
89
|
},
|
|
80
90
|
"publishConfig": {
|
|
81
91
|
"access": "public"
|
package/src/MasonryPlugin.tsx
CHANGED
|
@@ -3,35 +3,48 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import * as Effect from 'effect/Effect';
|
|
6
|
+
import * as Option from 'effect/Option';
|
|
6
7
|
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
8
|
+
import { Plugin } from '@dxos/app-framework';
|
|
9
|
+
import { AppPlugin } from '@dxos/app-toolkit';
|
|
10
|
+
import { Annotation, Type } from '@dxos/echo';
|
|
11
|
+
import { Operation } from '@dxos/operation';
|
|
12
|
+
import { SpaceOperation } from '@dxos/plugin-space/operations';
|
|
9
13
|
import { type CreateObject } from '@dxos/plugin-space/types';
|
|
10
|
-
import {
|
|
14
|
+
import { ViewModel } from '@dxos/schema';
|
|
15
|
+
|
|
16
|
+
import { ReactSurface } from '#capabilities';
|
|
17
|
+
import { meta } from '#meta';
|
|
18
|
+
import { Masonry, MasonryAction } from '#types';
|
|
11
19
|
|
|
12
|
-
import { ReactSurface } from './capabilities';
|
|
13
|
-
import { meta } from './meta';
|
|
14
20
|
import { translations } from './translations';
|
|
15
|
-
import { Masonry, MasonryAction } from './types';
|
|
16
21
|
|
|
17
22
|
export const MasonryPlugin = Plugin.define(meta).pipe(
|
|
18
|
-
|
|
19
|
-
Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
|
|
20
|
-
Common.Plugin.addMetadataModule({
|
|
23
|
+
AppPlugin.addMetadataModule({
|
|
21
24
|
metadata: {
|
|
22
25
|
id: Type.getTypename(Masonry.Masonry),
|
|
23
26
|
metadata: {
|
|
24
|
-
icon:
|
|
25
|
-
iconHue: '
|
|
27
|
+
icon: Annotation.IconAnnotation.get(Masonry.Masonry).pipe(Option.getOrThrow).icon,
|
|
28
|
+
iconHue: Annotation.IconAnnotation.get(Masonry.Masonry).pipe(Option.getOrThrow).hue ?? 'white',
|
|
26
29
|
inputSchema: MasonryAction.MasonryProps,
|
|
27
|
-
createObject: ((props,
|
|
28
|
-
Effect.
|
|
29
|
-
const
|
|
30
|
-
|
|
30
|
+
createObject: ((props, options) =>
|
|
31
|
+
Effect.gen(function* () {
|
|
32
|
+
const object = yield* Effect.promise(async () => {
|
|
33
|
+
const { view } = await ViewModel.makeFromDatabase({ db: options.db, typename: props.typename });
|
|
34
|
+
return Masonry.make({ name: props.name, view });
|
|
35
|
+
});
|
|
36
|
+
return yield* Operation.invoke(SpaceOperation.AddObject, {
|
|
37
|
+
object,
|
|
38
|
+
target: options.target,
|
|
39
|
+
hidden: true,
|
|
40
|
+
targetNodeId: options.targetNodeId,
|
|
41
|
+
});
|
|
31
42
|
})) satisfies CreateObject,
|
|
32
43
|
},
|
|
33
44
|
},
|
|
34
45
|
}),
|
|
35
|
-
|
|
46
|
+
AppPlugin.addSchemaModule({ schema: [Masonry.Masonry] }),
|
|
47
|
+
AppPlugin.addSurfaceModule({ activate: ReactSurface }),
|
|
48
|
+
AppPlugin.addTranslationsModule({ translations }),
|
|
36
49
|
Plugin.make,
|
|
37
50
|
);
|
|
@@ -0,0 +1,32 @@
|
|
|
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 { AppSurface } from '@dxos/app-toolkit/ui';
|
|
11
|
+
import { Obj } from '@dxos/echo';
|
|
12
|
+
import { View } from '@dxos/echo';
|
|
13
|
+
|
|
14
|
+
import { MasonryContainer } from '#containers';
|
|
15
|
+
import { Masonry } from '#types';
|
|
16
|
+
|
|
17
|
+
export default Capability.makeModule(() =>
|
|
18
|
+
Effect.succeed(
|
|
19
|
+
Capability.contributes(Capabilities.ReactSurface, [
|
|
20
|
+
Surface.create({
|
|
21
|
+
id: 'root',
|
|
22
|
+
// TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
|
|
23
|
+
role: ['article', 'section'],
|
|
24
|
+
filter: AppSurface.objectArticle([Masonry.Masonry, View.View]),
|
|
25
|
+
component: ({ data, role }) => {
|
|
26
|
+
const view = Obj.instanceOf(View.View, data.subject) ? data.subject : data.subject.view;
|
|
27
|
+
return <MasonryContainer view={view} role={role} />;
|
|
28
|
+
},
|
|
29
|
+
}),
|
|
30
|
+
]),
|
|
31
|
+
),
|
|
32
|
+
);
|
|
@@ -7,21 +7,22 @@ import * as Effect from 'effect/Effect';
|
|
|
7
7
|
import React from 'react';
|
|
8
8
|
|
|
9
9
|
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
10
|
+
import { View } from '@dxos/echo';
|
|
10
11
|
import { ClientPlugin } from '@dxos/plugin-client';
|
|
12
|
+
import { initializeIdentity } from '@dxos/plugin-client/testing';
|
|
11
13
|
import { PreviewPlugin } from '@dxos/plugin-preview';
|
|
12
14
|
import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
|
|
13
|
-
import {
|
|
15
|
+
import { random } from '@dxos/random';
|
|
14
16
|
import { Filter, useObject, useQuery, useSpaces } from '@dxos/react-client/echo';
|
|
15
|
-
import {
|
|
16
|
-
import { View } from '@dxos/schema';
|
|
17
|
+
import { ViewModel } from '@dxos/schema';
|
|
17
18
|
import { createObjectFactory } from '@dxos/schema/testing';
|
|
18
19
|
import { Organization } from '@dxos/types';
|
|
19
20
|
|
|
20
|
-
import { Masonry } from '
|
|
21
|
+
import { Masonry } from '#types';
|
|
21
22
|
|
|
22
23
|
import { MasonryContainer } from './MasonryContainer';
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
random.seed(0);
|
|
25
26
|
|
|
26
27
|
const StorybookMasonry = () => {
|
|
27
28
|
const spaces = useSpaces();
|
|
@@ -33,11 +34,10 @@ const StorybookMasonry = () => {
|
|
|
33
34
|
};
|
|
34
35
|
|
|
35
36
|
const meta = {
|
|
36
|
-
title: 'plugins/plugin-masonry/Masonry',
|
|
37
|
+
title: 'plugins/plugin-masonry/containers/Masonry',
|
|
37
38
|
component: StorybookMasonry,
|
|
38
39
|
render: () => <StorybookMasonry />,
|
|
39
40
|
decorators: [
|
|
40
|
-
withTheme,
|
|
41
41
|
withPluginManager({
|
|
42
42
|
plugins: [
|
|
43
43
|
...corePlugins(),
|
|
@@ -46,18 +46,18 @@ const meta = {
|
|
|
46
46
|
types: [Organization.Organization, View.View, Masonry.Masonry],
|
|
47
47
|
onClientInitialized: ({ client }) =>
|
|
48
48
|
Effect.gen(function* () {
|
|
49
|
-
yield*
|
|
49
|
+
yield* initializeIdentity(client);
|
|
50
50
|
const space = yield* Effect.promise(() => client.spaces.create());
|
|
51
51
|
yield* Effect.promise(() => space.waitUntilReady());
|
|
52
52
|
const { view } = yield* Effect.promise(() =>
|
|
53
|
-
|
|
53
|
+
ViewModel.makeFromDatabase({
|
|
54
54
|
db: space.db,
|
|
55
55
|
typename: Organization.Organization.typename,
|
|
56
56
|
}),
|
|
57
57
|
);
|
|
58
58
|
const masonry = Masonry.make({ view });
|
|
59
59
|
space.db.add(masonry);
|
|
60
|
-
const factory = createObjectFactory(space.db,
|
|
60
|
+
const factory = createObjectFactory(space.db, random as any);
|
|
61
61
|
yield* Effect.promise(() => factory([{ type: Organization.Organization, count: 64 }]));
|
|
62
62
|
}),
|
|
63
63
|
}),
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as Function from 'effect/Function';
|
|
6
|
+
import * as Option from 'effect/Option';
|
|
7
|
+
import type * as Schema from 'effect/Schema';
|
|
8
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
9
|
+
|
|
10
|
+
import { Surface, useCapabilities } from '@dxos/app-framework/ui';
|
|
11
|
+
import { AppCapabilities } from '@dxos/app-toolkit';
|
|
12
|
+
import { type AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
|
|
13
|
+
import { Annotation, Filter, Obj, Query, type Ref, Type } from '@dxos/echo';
|
|
14
|
+
import { type View } from '@dxos/echo';
|
|
15
|
+
import { useObject, useQuery } from '@dxos/react-client/echo';
|
|
16
|
+
import { Card, Panel, Toolbar } from '@dxos/react-ui';
|
|
17
|
+
import { Masonry as MasonryComponent } from '@dxos/react-ui-masonry';
|
|
18
|
+
import { Menu } from '@dxos/react-ui-menu';
|
|
19
|
+
import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
|
|
20
|
+
import { getTagFromQuery, getTypenameFromQuery } from '@dxos/schema';
|
|
21
|
+
import { isNonNullable } from '@dxos/util';
|
|
22
|
+
|
|
23
|
+
export type MasonryContainerProps = {
|
|
24
|
+
view: View.View;
|
|
25
|
+
role?: string;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export const MasonryContainer = ({
|
|
29
|
+
view: viewOrRef,
|
|
30
|
+
role: _role,
|
|
31
|
+
}: {
|
|
32
|
+
view: View.View | Ref.Ref<View.View>;
|
|
33
|
+
role?: string;
|
|
34
|
+
}) => {
|
|
35
|
+
const [view] = useObject(viewOrRef);
|
|
36
|
+
const schemas = useCapabilities(AppCapabilities.Schema);
|
|
37
|
+
const db = view && Obj.getDatabase(view);
|
|
38
|
+
const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
|
|
39
|
+
const tag = view?.query ? getTagFromQuery(view.query.ast) : undefined;
|
|
40
|
+
|
|
41
|
+
const [cardSchema, setCardSchema] = useState<Schema.Schema.AnyNoContext>();
|
|
42
|
+
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
|
|
45
|
+
if (staticSchema) {
|
|
46
|
+
setCardSchema(() => staticSchema);
|
|
47
|
+
}
|
|
48
|
+
if (!staticSchema && typename && db) {
|
|
49
|
+
const query = db.schemaRegistry.query({ typename });
|
|
50
|
+
const unsubscribe = query.subscribe(
|
|
51
|
+
() => {
|
|
52
|
+
const [schema] = query.results;
|
|
53
|
+
if (schema) {
|
|
54
|
+
setCardSchema(schema);
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{ fire: true },
|
|
58
|
+
);
|
|
59
|
+
return unsubscribe;
|
|
60
|
+
}
|
|
61
|
+
}, [schemas, typename, db]);
|
|
62
|
+
|
|
63
|
+
const query = useMemo(() => {
|
|
64
|
+
const baseFilter = cardSchema ? Filter.type(cardSchema) : Filter.nothing();
|
|
65
|
+
return tag ? Query.select(baseFilter).select(Filter.tag(tag)) : Query.select(baseFilter);
|
|
66
|
+
}, [cardSchema, tag]);
|
|
67
|
+
const objects = useQuery(db, query);
|
|
68
|
+
|
|
69
|
+
const sortedObjects = useMemo(
|
|
70
|
+
() =>
|
|
71
|
+
objects.filter(isNonNullable).toSorted((a, b) => (Obj.getLabel(a) ?? '').localeCompare(Obj.getLabel(b) ?? '')),
|
|
72
|
+
[objects],
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
const { results, handleSearch } = useSearchListResults({
|
|
76
|
+
items: sortedObjects,
|
|
77
|
+
extract: (obj) => Obj.getLabel(obj) ?? '',
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<MasonryComponent.Root Tile={Item}>
|
|
82
|
+
<SearchList.Root onSearch={handleSearch}>
|
|
83
|
+
<Panel.Root>
|
|
84
|
+
<Panel.Toolbar asChild>
|
|
85
|
+
<Toolbar.Root>
|
|
86
|
+
<SearchList.Input placeholder='Search...' />
|
|
87
|
+
</Toolbar.Root>
|
|
88
|
+
</Panel.Toolbar>
|
|
89
|
+
<Panel.Content>
|
|
90
|
+
<MasonryComponent.Content items={results} getId={(data: any) => data?.id} />
|
|
91
|
+
</Panel.Content>
|
|
92
|
+
</Panel.Root>
|
|
93
|
+
</SearchList.Root>
|
|
94
|
+
</MasonryComponent.Root>
|
|
95
|
+
);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const Item = ({ data }: { data: any }) => {
|
|
99
|
+
const objectMenuItems = useObjectMenuItems(data);
|
|
100
|
+
const icon = Function.pipe(
|
|
101
|
+
Obj.getSchema(data),
|
|
102
|
+
Option.fromNullable,
|
|
103
|
+
Option.flatMap(Annotation.IconAnnotation.get),
|
|
104
|
+
Option.map(({ icon }) => icon),
|
|
105
|
+
Option.getOrElse(() => 'ph--placeholder--regular'),
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
return (
|
|
109
|
+
<Menu.Root>
|
|
110
|
+
<Card.Root>
|
|
111
|
+
<Card.Toolbar>
|
|
112
|
+
<Card.Icon icon={icon} />
|
|
113
|
+
<Card.Title>{Obj.getLabel(data)}</Card.Title>
|
|
114
|
+
{/* TODO(wittjosiah): Reconcile with Card.Menu. */}
|
|
115
|
+
<Menu.Trigger asChild disabled={!objectMenuItems?.length}>
|
|
116
|
+
<Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
|
|
117
|
+
</Menu.Trigger>
|
|
118
|
+
<Menu.Content items={objectMenuItems} />
|
|
119
|
+
</Card.Toolbar>
|
|
120
|
+
<Surface.Surface role='card--content' limit={1} data={{ subject: data } satisfies AppSurface.ObjectCardData} />
|
|
121
|
+
</Card.Root>
|
|
122
|
+
</Menu.Root>
|
|
123
|
+
);
|
|
124
|
+
};
|
package/src/meta.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
|
|
|
6
6
|
import { trim } from '@dxos/util';
|
|
7
7
|
|
|
8
8
|
export const meta: Plugin.Meta = {
|
|
9
|
-
id: 'dxos.
|
|
9
|
+
id: 'org.dxos.plugin.masonry',
|
|
10
10
|
name: 'Masonry',
|
|
11
11
|
description: trim`
|
|
12
12
|
Responsive grid layout that displays query results in an adaptive masonry pattern.
|
package/src/translations.ts
CHANGED
|
@@ -5,24 +5,25 @@
|
|
|
5
5
|
import { Type } from '@dxos/echo';
|
|
6
6
|
import { type Resource } from '@dxos/react-ui';
|
|
7
7
|
|
|
8
|
-
import { meta } from '
|
|
9
|
-
import { Masonry } from '
|
|
8
|
+
import { meta } from '#meta';
|
|
9
|
+
import { Masonry } from '#types';
|
|
10
10
|
|
|
11
11
|
export const translations = [
|
|
12
12
|
{
|
|
13
13
|
'en-US': {
|
|
14
14
|
[Type.getTypename(Masonry.Masonry)]: {
|
|
15
|
-
'typename
|
|
16
|
-
'typename
|
|
17
|
-
'typename
|
|
18
|
-
'typename
|
|
19
|
-
'object
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
'object
|
|
15
|
+
'typename.label': 'Masonry',
|
|
16
|
+
'typename.label_zero': 'Masonries',
|
|
17
|
+
'typename.label_one': 'Masonry',
|
|
18
|
+
'typename.label_other': 'Masonries',
|
|
19
|
+
'object-name.placeholder': 'New masonry',
|
|
20
|
+
'add-object.label': 'Add masonry',
|
|
21
|
+
'rename-object.label': 'Rename masonry',
|
|
22
|
+
'delete-object.label': 'Delete masonry',
|
|
23
|
+
'object-deleted.label': 'Masonry deleted',
|
|
23
24
|
},
|
|
24
25
|
[meta.id]: {
|
|
25
|
-
'plugin
|
|
26
|
+
'plugin.name': 'Masonry',
|
|
26
27
|
},
|
|
27
28
|
},
|
|
28
29
|
},
|
package/src/types/Masonry.ts
CHANGED
|
@@ -4,29 +4,34 @@
|
|
|
4
4
|
|
|
5
5
|
import * as Schema from 'effect/Schema';
|
|
6
6
|
|
|
7
|
-
import { Obj, Ref, Type } from '@dxos/echo';
|
|
7
|
+
import { Annotation, Obj, Ref, Type } from '@dxos/echo';
|
|
8
|
+
import { View } from '@dxos/echo';
|
|
8
9
|
import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
|
|
9
|
-
import {
|
|
10
|
+
import { ViewAnnotation } from '@dxos/schema';
|
|
10
11
|
|
|
11
12
|
export const Masonry = Schema.Struct({
|
|
12
13
|
name: Schema.String.pipe(Schema.optional),
|
|
13
14
|
|
|
14
|
-
view:
|
|
15
|
+
view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
|
|
15
16
|
|
|
16
17
|
arrangement: Schema.Array(
|
|
17
18
|
Schema.Struct({
|
|
18
19
|
ids: Schema.Array(Obj.ID),
|
|
19
20
|
hidden: Schema.optional(Schema.Boolean),
|
|
20
|
-
})
|
|
21
|
-
).pipe(
|
|
21
|
+
}),
|
|
22
|
+
).pipe(FormInputAnnotation.set(false), Schema.optional),
|
|
22
23
|
// TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.
|
|
23
24
|
}).pipe(
|
|
24
25
|
Type.object({
|
|
25
|
-
typename: 'dxos.
|
|
26
|
-
version: '0.
|
|
26
|
+
typename: 'org.dxos.type.masonry',
|
|
27
|
+
version: '0.1.0',
|
|
27
28
|
}),
|
|
28
29
|
LabelAnnotation.set(['name']),
|
|
29
30
|
ViewAnnotation.set(true),
|
|
31
|
+
Annotation.IconAnnotation.set({
|
|
32
|
+
icon: 'ph--wall--regular',
|
|
33
|
+
hue: 'green',
|
|
34
|
+
}),
|
|
30
35
|
);
|
|
31
36
|
|
|
32
37
|
export interface Masonry extends Schema.Schema.Type<typeof Masonry> {}
|
|
@@ -41,21 +46,3 @@ type MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {
|
|
|
41
46
|
export const make = ({ name, arrangement = [], view }: MakeProps): Masonry => {
|
|
42
47
|
return Obj.make(Masonry, { name, view: Ref.make(view), arrangement });
|
|
43
48
|
};
|
|
44
|
-
|
|
45
|
-
//
|
|
46
|
-
// V1
|
|
47
|
-
//
|
|
48
|
-
|
|
49
|
-
export const MasonryV1 = Schema.Struct({
|
|
50
|
-
arrangement: Schema.Array(
|
|
51
|
-
Schema.Struct({
|
|
52
|
-
ids: Schema.Array(Obj.ID),
|
|
53
|
-
hidden: Schema.optional(Schema.Boolean),
|
|
54
|
-
}).pipe(Schema.mutable),
|
|
55
|
-
).pipe(Schema.mutable, Schema.optional),
|
|
56
|
-
}).pipe(
|
|
57
|
-
Type.object({
|
|
58
|
-
typename: 'dxos.org/type/Masonry',
|
|
59
|
-
version: '0.1.0',
|
|
60
|
-
}),
|
|
61
|
-
);
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __export = (target, all) => {
|
|
3
|
-
for (var name in all)
|
|
4
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
// src/types/Masonry.ts
|
|
8
|
-
var Masonry_exports = {};
|
|
9
|
-
__export(Masonry_exports, {
|
|
10
|
-
Masonry: () => Masonry,
|
|
11
|
-
MasonryV1: () => MasonryV1,
|
|
12
|
-
make: () => make
|
|
13
|
-
});
|
|
14
|
-
import * as Schema from "effect/Schema";
|
|
15
|
-
import { Obj, Ref, Type } from "@dxos/echo";
|
|
16
|
-
import { FormInputAnnotation, LabelAnnotation } from "@dxos/echo/internal";
|
|
17
|
-
import { View, ViewAnnotation } from "@dxos/schema";
|
|
18
|
-
var Masonry = Schema.Struct({
|
|
19
|
-
name: Schema.String.pipe(Schema.optional),
|
|
20
|
-
view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
|
|
21
|
-
arrangement: Schema.Array(Schema.Struct({
|
|
22
|
-
ids: Schema.Array(Obj.ID),
|
|
23
|
-
hidden: Schema.optional(Schema.Boolean)
|
|
24
|
-
}).pipe(Schema.mutable)).pipe(Schema.mutable, FormInputAnnotation.set(false), Schema.optional)
|
|
25
|
-
}).pipe(Type.object({
|
|
26
|
-
typename: "dxos.org/type/Masonry",
|
|
27
|
-
version: "0.2.0"
|
|
28
|
-
}), LabelAnnotation.set([
|
|
29
|
-
"name"
|
|
30
|
-
]), ViewAnnotation.set(true));
|
|
31
|
-
var make = ({ name, arrangement = [], view }) => {
|
|
32
|
-
return Obj.make(Masonry, {
|
|
33
|
-
name,
|
|
34
|
-
view: Ref.make(view),
|
|
35
|
-
arrangement
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
var MasonryV1 = Schema.Struct({
|
|
39
|
-
arrangement: Schema.Array(Schema.Struct({
|
|
40
|
-
ids: Schema.Array(Obj.ID),
|
|
41
|
-
hidden: Schema.optional(Schema.Boolean)
|
|
42
|
-
}).pipe(Schema.mutable)).pipe(Schema.mutable, Schema.optional)
|
|
43
|
-
}).pipe(Type.object({
|
|
44
|
-
typename: "dxos.org/type/Masonry",
|
|
45
|
-
version: "0.1.0"
|
|
46
|
-
}));
|
|
47
|
-
|
|
48
|
-
// src/types/MasonryAction.ts
|
|
49
|
-
var MasonryAction_exports = {};
|
|
50
|
-
__export(MasonryAction_exports, {
|
|
51
|
-
MasonryProps: () => MasonryProps
|
|
52
|
-
});
|
|
53
|
-
import * as Schema2 from "effect/Schema";
|
|
54
|
-
import { TypeInputOptionsAnnotation } from "@dxos/plugin-space/types";
|
|
55
|
-
var MasonryProps = Schema2.Struct({
|
|
56
|
-
name: Schema2.optional(Schema2.String),
|
|
57
|
-
// TODO(wittjosiah): This should be a query input instead.
|
|
58
|
-
typename: Schema2.String.pipe(Schema2.annotations({
|
|
59
|
-
title: "Select card type"
|
|
60
|
-
}), TypeInputOptionsAnnotation.set({
|
|
61
|
-
location: [
|
|
62
|
-
"database",
|
|
63
|
-
"runtime"
|
|
64
|
-
],
|
|
65
|
-
kind: [
|
|
66
|
-
"user"
|
|
67
|
-
],
|
|
68
|
-
registered: [
|
|
69
|
-
"registered"
|
|
70
|
-
]
|
|
71
|
-
}), Schema2.optional)
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
export {
|
|
75
|
-
Masonry_exports,
|
|
76
|
-
MasonryAction_exports
|
|
77
|
-
};
|
|
78
|
-
//# sourceMappingURL=chunk-2QCFP5QL.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/types/Masonry.ts", "../../../src/types/MasonryAction.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Obj, Ref, Type } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';\nimport { View, ViewAnnotation } from '@dxos/schema';\n\nexport const Masonry = Schema.Struct({\n name: Schema.String.pipe(Schema.optional),\n\n view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n arrangement: Schema.Array(\n Schema.Struct({\n ids: Schema.Array(Obj.ID),\n hidden: Schema.optional(Schema.Boolean),\n }).pipe(Schema.mutable),\n ).pipe(Schema.mutable, FormInputAnnotation.set(false), Schema.optional),\n // TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.\n}).pipe(\n Type.object({\n typename: 'dxos.org/type/Masonry',\n version: '0.2.0',\n }),\n LabelAnnotation.set(['name']),\n ViewAnnotation.set(true),\n);\n\nexport interface Masonry extends Schema.Schema.Type<typeof Masonry> {}\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {\n view: View.View;\n};\n\n/**\n * Make a masonry as a view of a data set.\n */\nexport const make = ({ name, arrangement = [], view }: MakeProps): Masonry => {\n return Obj.make(Masonry, { name, view: Ref.make(view), arrangement });\n};\n\n//\n// V1\n//\n\nexport const MasonryV1 = Schema.Struct({\n arrangement: Schema.Array(\n Schema.Struct({\n ids: Schema.Array(Obj.ID),\n hidden: Schema.optional(Schema.Boolean),\n }).pipe(Schema.mutable),\n ).pipe(Schema.mutable, Schema.optional),\n}).pipe(\n Type.object({\n typename: 'dxos.org/type/Masonry',\n version: '0.1.0',\n }),\n);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';\n\nexport const MasonryProps = Schema.Struct({\n name: Schema.optional(Schema.String),\n // TODO(wittjosiah): This should be a query input instead.\n typename: Schema.String.pipe(\n Schema.annotations({ title: 'Select card type' }),\n TypeInputOptionsAnnotation.set({\n location: ['database', 'runtime'],\n kind: ['user'],\n registered: ['registered'],\n }),\n Schema.optional,\n ),\n});\n"],
|
|
5
|
-
"mappings": ";;;;;;;AAAA;;;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,KAAKC,KAAKC,YAAY;AAC/B,SAASC,qBAAqBC,uBAAuB;AACrD,SAASC,MAAMC,sBAAsB;AAE9B,IAAMC,UAAiBC,cAAO;EACnCC,MAAaC,cAAOC,KAAYC,eAAQ;EAExCC,MAAMC,KAAKC,IAAIC,KAAKA,IAAI,EAAEL,KAAKM,oBAAoBC,IAAI,KAAA,CAAA;EAEvDC,aAAoBC,aACXZ,cAAO;IACZa,KAAYD,aAAME,IAAIC,EAAE;IACxBC,QAAeZ,gBAAgBa,cAAO;EACxC,CAAA,EAAGd,KAAYe,cAAO,CAAA,EACtBf,KAAYe,gBAAST,oBAAoBC,IAAI,KAAA,GAAeN,eAAQ;AAExE,CAAA,EAAGD,KACDG,KAAKa,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBZ,IAAI;EAAC;CAAO,GAC5Ba,eAAeb,IAAI,IAAA,CAAA;AAYd,IAAMc,OAAO,CAAC,EAAEvB,MAAMU,cAAc,CAAA,GAAIN,KAAI,MAAa;AAC9D,SAAOS,IAAIU,KAAKzB,SAAS;IAAEE;IAAMI,MAAME,IAAIiB,KAAKnB,IAAAA;IAAOM;EAAY,CAAA;AACrE;AAMO,IAAMc,YAAmBzB,cAAO;EACrCW,aAAoBC,aACXZ,cAAO;IACZa,KAAYD,aAAME,IAAIC,EAAE;IACxBC,QAAeZ,gBAAgBa,cAAO;EACxC,CAAA,EAAGd,KAAYe,cAAO,CAAA,EACtBf,KAAYe,gBAAgBd,eAAQ;AACxC,CAAA,EAAGD,KACDG,KAAKa,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;;;AC3DF;;;;AAIA,YAAYK,aAAY;AAExB,SAASC,kCAAkC;AAEpC,IAAMC,eAAsBC,eAAO;EACxCC,MAAaC,iBAAgBC,cAAM;;EAEnCC,UAAiBD,eAAOE,KACfC,oBAAY;IAAEC,OAAO;EAAmB,CAAA,GAC/CC,2BAA2BC,IAAI;IAC7BC,UAAU;MAAC;MAAY;;IACvBC,MAAM;MAAC;;IACPC,YAAY;MAAC;;EACf,CAAA,GACOV,gBAAQ;AAEnB,CAAA;",
|
|
6
|
-
"names": ["Schema", "Obj", "Ref", "Type", "FormInputAnnotation", "LabelAnnotation", "View", "ViewAnnotation", "Masonry", "Struct", "name", "String", "pipe", "optional", "view", "Type", "Ref", "View", "FormInputAnnotation", "set", "arrangement", "Array", "ids", "Obj", "ID", "hidden", "Boolean", "mutable", "object", "typename", "version", "LabelAnnotation", "ViewAnnotation", "make", "MasonryV1", "Schema", "TypeInputOptionsAnnotation", "MasonryProps", "Struct", "name", "optional", "String", "typename", "pipe", "annotations", "title", "TypeInputOptionsAnnotation", "set", "location", "kind", "registered"]
|
|
7
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// src/meta.ts
|
|
2
|
-
import { trim } from "@dxos/util";
|
|
3
|
-
var meta = {
|
|
4
|
-
id: "dxos.org/plugin/masonry",
|
|
5
|
-
name: "Masonry",
|
|
6
|
-
description: trim`
|
|
7
|
-
Responsive grid layout that displays query results in an adaptive masonry pattern.
|
|
8
|
-
Visualize collections of cards, images, or mixed content that automatically adjusts to available screen space.
|
|
9
|
-
`,
|
|
10
|
-
icon: "ph--wall--regular",
|
|
11
|
-
iconHue: "green",
|
|
12
|
-
source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry",
|
|
13
|
-
screenshots: []
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export {
|
|
17
|
-
meta
|
|
18
|
-
};
|
|
19
|
-
//# sourceMappingURL=chunk-U46AGJ2D.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n id: 'dxos.org/plugin/masonry',\n name: 'Masonry',\n description: trim`\n Responsive grid layout that displays query results in an adaptive masonry pattern.\n Visualize collections of cards, images, or mixed content that automatically adjusts to available screen space.\n `,\n icon: 'ph--wall--regular',\n iconHue: 'green',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry',\n screenshots: [],\n};\n"],
|
|
5
|
-
"mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,aAAa,CAAA;AACf;",
|
|
6
|
-
"names": ["trim", "meta", "id", "name", "description", "trim", "icon", "iconHue", "source", "screenshots"]
|
|
7
|
-
}
|