@dxos/plugin-preview 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef
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/index.mjs +16 -47
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/translations.mjs +21 -0
- package/dist/lib/browser/translations.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +16 -46
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/translations.mjs +23 -0
- package/dist/lib/node-esm/translations.mjs.map +7 -0
- package/dist/types/src/PreviewPlugin.d.ts +1 -0
- package/dist/types/src/PreviewPlugin.d.ts.map +1 -1
- package/dist/types/src/PreviewPlugin.node.d.ts +4 -0
- package/dist/types/src/PreviewPlugin.node.d.ts.map +1 -0
- package/dist/types/src/PreviewPlugin.test.d.ts +2 -0
- package/dist/types/src/PreviewPlugin.test.d.ts.map +1 -0
- package/dist/types/src/capabilities/index.d.ts +3 -2
- package/dist/types/src/capabilities/index.d.ts.map +1 -1
- package/dist/types/src/capabilities/preview-popover.d.ts +5 -0
- package/dist/types/src/capabilities/preview-popover.d.ts.map +1 -0
- 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/cards/ExpandoCard.d.ts +4 -0
- package/dist/types/src/cards/ExpandoCard.d.ts.map +1 -0
- package/dist/types/src/cards/FormCard.d.ts +2 -2
- package/dist/types/src/cards/FormCard.d.ts.map +1 -1
- package/dist/types/src/cards/JsonCard.d.ts +5 -0
- package/dist/types/src/cards/JsonCard.d.ts.map +1 -0
- package/dist/types/src/cards/OrganizationCard.d.ts +2 -2
- package/dist/types/src/cards/OrganizationCard.d.ts.map +1 -1
- package/dist/types/src/cards/PersonCard.d.ts +2 -2
- package/dist/types/src/cards/PersonCard.d.ts.map +1 -1
- package/dist/types/src/cards/ProjectCard.d.ts +3 -3
- package/dist/types/src/cards/ProjectCard.d.ts.map +1 -1
- package/dist/types/src/cards/TaskCard.d.ts +2 -2
- package/dist/types/src/cards/TaskCard.d.ts.map +1 -1
- package/dist/types/src/cards/index.d.ts +2 -0
- package/dist/types/src/cards/index.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +2 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/stories/Card.stories.d.ts +19 -12
- package/dist/types/src/stories/Card.stories.d.ts.map +1 -1
- package/dist/types/src/stories/testing.d.ts +6 -4
- package/dist/types/src/stories/testing.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +8 -9
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +53 -39
- package/src/PreviewPlugin.node.ts +16 -0
- package/src/PreviewPlugin.test.ts +25 -0
- package/src/PreviewPlugin.tsx +11 -8
- package/src/capabilities/index.ts +4 -2
- package/src/capabilities/{preview-popover/preview-popover.ts → preview-popover.ts} +35 -16
- package/src/capabilities/react-surface.tsx +118 -0
- package/src/cards/ExpandoCard.tsx +76 -0
- package/src/cards/FormCard.tsx +14 -29
- package/src/cards/JsonCard.tsx +19 -0
- package/src/cards/OrganizationCard.tsx +4 -4
- package/src/cards/PersonCard.tsx +34 -16
- package/src/cards/ProjectCard.tsx +5 -5
- package/src/cards/TaskCard.tsx +16 -12
- package/src/cards/index.ts +2 -0
- package/src/index.ts +6 -2
- package/src/meta.ts +1 -1
- package/src/stories/Card.stories.tsx +64 -11
- package/src/stories/testing.tsx +48 -31
- package/src/translations.ts +8 -8
- package/dist/lib/browser/chunk-XLN6KTHK.mjs +0 -17
- package/dist/lib/browser/chunk-XLN6KTHK.mjs.map +0 -7
- package/dist/lib/browser/preview-popover-Y67LE6TV.mjs +0 -78
- package/dist/lib/browser/preview-popover-Y67LE6TV.mjs.map +0 -7
- package/dist/lib/browser/react-surface-YCDD5VZC.mjs +0 -263
- package/dist/lib/browser/react-surface-YCDD5VZC.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-2G4FUGDA.mjs +0 -19
- package/dist/lib/node-esm/chunk-2G4FUGDA.mjs.map +0 -7
- package/dist/lib/node-esm/preview-popover-BGV2P6UX.mjs +0 -80
- package/dist/lib/node-esm/preview-popover-BGV2P6UX.mjs.map +0 -7
- package/dist/lib/node-esm/react-surface-MYZZR7AQ.mjs +0 -264
- package/dist/lib/node-esm/react-surface-MYZZR7AQ.mjs.map +0 -7
- package/dist/types/src/capabilities/preview-popover/index.d.ts +0 -3
- package/dist/types/src/capabilities/preview-popover/index.d.ts.map +0 -1
- package/dist/types/src/capabilities/preview-popover/preview-popover.d.ts +0 -5
- package/dist/types/src/capabilities/preview-popover/preview-popover.d.ts.map +0 -1
- 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/src/capabilities/preview-popover/index.ts +0 -7
- package/src/capabilities/react-surface/index.ts +0 -7
- package/src/capabilities/react-surface/react-surface.tsx +0 -97
package/src/cards/PersonCard.tsx
CHANGED
|
@@ -2,25 +2,47 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
5
|
+
import * as Effect from 'effect/Effect';
|
|
6
|
+
import React, { useCallback } from 'react';
|
|
6
7
|
|
|
7
|
-
import {
|
|
8
|
+
import { useOperationInvoker } from '@dxos/app-framework/ui';
|
|
9
|
+
import { LayoutOperation, getObjectPathFromObject, getSpacePath } from '@dxos/app-toolkit';
|
|
10
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
11
|
+
import { Obj } from '@dxos/echo';
|
|
12
|
+
import { runAndForwardErrors } from '@dxos/effect';
|
|
8
13
|
import { Avatar } from '@dxos/react-ui';
|
|
9
|
-
import { Card } from '@dxos/react-ui
|
|
14
|
+
import { Card } from '@dxos/react-ui';
|
|
10
15
|
import { type Person } from '@dxos/types';
|
|
11
16
|
|
|
12
|
-
export const PersonCard = ({ subject }:
|
|
17
|
+
export const PersonCard = ({ subject }: AppSurface.ObjectCardProps<Person.Person>) => {
|
|
18
|
+
const { invoke } = useOperationInvoker();
|
|
13
19
|
const { image, organization: { target: organization } = {}, emails = [] } = subject;
|
|
14
20
|
|
|
21
|
+
const handleOrganizationClick = useCallback(() => {
|
|
22
|
+
if (!organization) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return Effect.gen(function* () {
|
|
27
|
+
const organizationPath = getObjectPathFromObject(organization);
|
|
28
|
+
const db = Obj.getDatabase(organization);
|
|
29
|
+
yield* invoke(LayoutOperation.UpdatePopover, { state: false, anchorId: '' });
|
|
30
|
+
yield* invoke(LayoutOperation.Open, {
|
|
31
|
+
subject: [organizationPath],
|
|
32
|
+
workspace: db ? getSpacePath(db.spaceId) : undefined,
|
|
33
|
+
});
|
|
34
|
+
}).pipe(runAndForwardErrors);
|
|
35
|
+
}, [invoke, organization]);
|
|
36
|
+
|
|
15
37
|
return (
|
|
16
|
-
<
|
|
17
|
-
<
|
|
38
|
+
<Card.Content>
|
|
39
|
+
<Avatar.Root>
|
|
18
40
|
{image && (
|
|
19
|
-
<Card.Row className='
|
|
41
|
+
<Card.Row className='py-1'>
|
|
20
42
|
<Avatar.Content
|
|
21
43
|
imgSrc={image}
|
|
22
44
|
icon='ph--user--regular'
|
|
23
|
-
size={
|
|
45
|
+
size={20}
|
|
24
46
|
classNames={!image && 'opacity-50'}
|
|
25
47
|
hue='neutral'
|
|
26
48
|
variant='square'
|
|
@@ -28,20 +50,16 @@ export const PersonCard = ({ subject }: SurfaceComponentProps<Person.Person>) =>
|
|
|
28
50
|
</Card.Row>
|
|
29
51
|
)}
|
|
30
52
|
{organization?.name && (
|
|
31
|
-
<Card.Action
|
|
32
|
-
icon='ph--buildings--regular'
|
|
33
|
-
label={organization.name}
|
|
34
|
-
// onClick={onSelect ? () => onSelect(organization) : undefined}
|
|
35
|
-
/>
|
|
53
|
+
<Card.Action icon='ph--buildings--regular' label={organization.name} onClick={handleOrganizationClick} />
|
|
36
54
|
)}
|
|
37
55
|
{emails.map(({ value }) => (
|
|
38
56
|
<Card.Row key={value} icon='ph--at--regular'>
|
|
39
|
-
<Card.Text truncate className='text-
|
|
57
|
+
<Card.Text truncate className='text-primary-text'>
|
|
40
58
|
{value}
|
|
41
59
|
</Card.Text>
|
|
42
60
|
</Card.Row>
|
|
43
61
|
))}
|
|
44
|
-
</
|
|
45
|
-
</
|
|
62
|
+
</Avatar.Root>
|
|
63
|
+
</Card.Content>
|
|
46
64
|
);
|
|
47
65
|
};
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
|
-
import { type
|
|
7
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
8
8
|
import { Obj } from '@dxos/echo';
|
|
9
|
-
import { Card } from '@dxos/react-ui
|
|
10
|
-
import { type
|
|
9
|
+
import { Card } from '@dxos/react-ui';
|
|
10
|
+
import { type Pipeline } from '@dxos/types';
|
|
11
11
|
|
|
12
|
-
export const ProjectCard = ({ subject }:
|
|
13
|
-
const {
|
|
12
|
+
export const ProjectCard = ({ subject }: AppSurface.ObjectCardProps<Pipeline.Pipeline>) => {
|
|
13
|
+
const { image, description } = subject;
|
|
14
14
|
|
|
15
15
|
return (
|
|
16
16
|
<Card.Content>
|
package/src/cards/TaskCard.tsx
CHANGED
|
@@ -5,23 +5,26 @@
|
|
|
5
5
|
import * as SchemaAST from 'effect/SchemaAST';
|
|
6
6
|
import React from 'react';
|
|
7
7
|
|
|
8
|
-
import { type
|
|
8
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
9
9
|
import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
|
|
10
|
-
import { Card } from '@dxos/react-ui
|
|
10
|
+
import { Card } from '@dxos/react-ui';
|
|
11
11
|
import { Task } from '@dxos/types';
|
|
12
12
|
|
|
13
|
-
export const TaskCard = ({ subject }:
|
|
13
|
+
export const TaskCard = ({ subject }: AppSurface.ObjectCardProps<Task.Task>) => {
|
|
14
14
|
const { title, status } = subject;
|
|
15
15
|
const statusOption = getActiveStatusOption(status);
|
|
16
16
|
|
|
17
17
|
return (
|
|
18
18
|
<Card.Content>
|
|
19
|
-
<Card.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
<Card.Row>
|
|
20
|
+
{statusOption && (
|
|
21
|
+
<div>
|
|
22
|
+
<span className='dx-tag' data-hue={statusOption.color}>
|
|
23
|
+
{statusOption.title}
|
|
24
|
+
</span>
|
|
25
|
+
</div>
|
|
26
|
+
)}
|
|
27
|
+
</Card.Row>
|
|
25
28
|
</Card.Content>
|
|
26
29
|
);
|
|
27
30
|
};
|
|
@@ -30,11 +33,12 @@ export const TaskCard = ({ subject }: SurfaceComponentProps<Task.Task>) => {
|
|
|
30
33
|
const getActiveStatusOption = (status?: string) => {
|
|
31
34
|
const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
|
|
32
35
|
const statusProperty = properties.find((p) => p.name === 'status');
|
|
36
|
+
// TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
|
|
33
37
|
const statusMeta = SchemaAST.getAnnotation<PropertyMetaAnnotation>(PropertyMetaAnnotationId)(
|
|
34
|
-
// TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
|
|
35
38
|
(statusProperty!.type as any).types[0],
|
|
36
39
|
);
|
|
37
|
-
|
|
38
|
-
|
|
40
|
+
|
|
41
|
+
// TODO(thure): Typescript asserts `statusMeta` doesn’t have `.value`, but in runtime it does.
|
|
42
|
+
const options = (statusMeta as any).value.singleSelect.options as { id: string; title: string; color: string }[];
|
|
39
43
|
return options.find(({ id }) => id === status);
|
|
40
44
|
};
|
package/src/cards/index.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
import { Plugin } from '@dxos/app-framework';
|
|
6
|
+
|
|
7
|
+
import { meta } from './meta';
|
|
6
8
|
|
|
7
|
-
export
|
|
9
|
+
export const PreviewPlugin = Plugin.lazy(meta, () => import('#plugin'));
|
|
10
|
+
|
|
11
|
+
export * from './meta';
|
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.preview',
|
|
10
10
|
name: 'Preview',
|
|
11
11
|
description: trim`
|
|
12
12
|
Rich preview panel for viewing object content without opening full editors.
|
|
@@ -3,38 +3,53 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
6
|
+
import React from 'react';
|
|
6
7
|
|
|
7
8
|
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
8
9
|
import { corePlugins } from '@dxos/plugin-testing';
|
|
9
|
-
import {
|
|
10
|
+
import { random } from '@dxos/random';
|
|
11
|
+
import { Card } from '@dxos/react-ui';
|
|
10
12
|
import { withLayout, withTheme } from '@dxos/react-ui/testing';
|
|
11
|
-
import { type
|
|
13
|
+
import { type Expando } from '@dxos/schema';
|
|
14
|
+
import { type Organization, type Person, type Pipeline, type Task } from '@dxos/types';
|
|
12
15
|
|
|
13
|
-
import {
|
|
14
|
-
import { translations } from '../translations';
|
|
16
|
+
import { translations } from '#translations';
|
|
15
17
|
|
|
16
|
-
import {
|
|
18
|
+
import { ExpandoCard, FormCard, JsonCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
|
|
19
|
+
import { DefaultStory, createExpando, createOrganization, createPerson, createProject, createTask } from './testing';
|
|
17
20
|
|
|
18
|
-
|
|
21
|
+
random.seed(999);
|
|
19
22
|
|
|
20
23
|
const meta = {
|
|
21
|
-
title: 'plugins/plugin-preview/Card',
|
|
24
|
+
title: 'plugins/plugin-preview/cards/Card',
|
|
22
25
|
render: DefaultStory,
|
|
23
26
|
decorators: [
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
// `Card` and its descendants in `@dxos/react-ui` consume `ThemeContext`
|
|
28
|
+
// for tx-token resolution; without this the stories trip the surface's
|
|
29
|
+
// `ErrorBoundary` with "Missing ThemeContext" and the storybook test
|
|
30
|
+
// assert-no-error fails.
|
|
31
|
+
withTheme(),
|
|
32
|
+
withLayout({ layout: 'fullscreen' }),
|
|
26
33
|
// TODO(wittjosiah): Try to write story which does not depend on plugin manager.
|
|
27
34
|
withPluginManager({ plugins: corePlugins() }),
|
|
28
35
|
],
|
|
29
36
|
parameters: {
|
|
30
|
-
translations,
|
|
31
37
|
layout: 'fullscreen',
|
|
38
|
+
translations,
|
|
32
39
|
},
|
|
33
40
|
tags: ['cards'],
|
|
34
41
|
} satisfies Meta<typeof DefaultStory>;
|
|
35
42
|
|
|
36
43
|
export default meta;
|
|
37
44
|
|
|
45
|
+
export const _Form: StoryObj<typeof DefaultStory<Person.Person>> = {
|
|
46
|
+
args: {
|
|
47
|
+
Component: FormCard,
|
|
48
|
+
createObject: createPerson,
|
|
49
|
+
image: true,
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
|
|
38
53
|
export const _Person: StoryObj<typeof DefaultStory<Person.Person>> = {
|
|
39
54
|
args: {
|
|
40
55
|
Component: PersonCard,
|
|
@@ -51,7 +66,7 @@ export const _Organization: StoryObj<typeof DefaultStory<Organization.Organizati
|
|
|
51
66
|
},
|
|
52
67
|
};
|
|
53
68
|
|
|
54
|
-
export const _Project: StoryObj<typeof DefaultStory<
|
|
69
|
+
export const _Project: StoryObj<typeof DefaultStory<Pipeline.Pipeline>> = {
|
|
55
70
|
args: {
|
|
56
71
|
Component: ProjectCard,
|
|
57
72
|
createObject: createProject,
|
|
@@ -66,3 +81,41 @@ export const _Task: StoryObj<typeof DefaultStory<Task.Task>> = {
|
|
|
66
81
|
image: true,
|
|
67
82
|
},
|
|
68
83
|
};
|
|
84
|
+
|
|
85
|
+
export const _Expando: StoryObj<typeof DefaultStory<Expando.Expando>> = {
|
|
86
|
+
args: {
|
|
87
|
+
Component: ExpandoCard,
|
|
88
|
+
createObject: createExpando,
|
|
89
|
+
},
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export const _Json = {
|
|
93
|
+
render: () => {
|
|
94
|
+
const data = {
|
|
95
|
+
subject: {
|
|
96
|
+
id: random.string.uuid(),
|
|
97
|
+
name: random.person.fullName(),
|
|
98
|
+
email: random.internet.email(),
|
|
99
|
+
tags: [random.lorem.word(), random.lorem.word(), random.lorem.word()],
|
|
100
|
+
nested: {
|
|
101
|
+
count: random.number.int({ max: 100 }),
|
|
102
|
+
active: random.datatype.boolean(),
|
|
103
|
+
},
|
|
104
|
+
},
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
return (
|
|
108
|
+
<div className='flex justify-center p-16'>
|
|
109
|
+
<div className='dx-card-min-width dx-card-max-width'>
|
|
110
|
+
<Card.Root>
|
|
111
|
+
<Card.Toolbar>
|
|
112
|
+
<Card.IconBlock />
|
|
113
|
+
<Card.Title>JSON</Card.Title>
|
|
114
|
+
</Card.Toolbar>
|
|
115
|
+
<JsonCard data={data} />
|
|
116
|
+
</Card.Root>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
120
|
+
},
|
|
121
|
+
};
|
package/src/stories/testing.tsx
CHANGED
|
@@ -4,33 +4,38 @@
|
|
|
4
4
|
|
|
5
5
|
import React, { type FC, useMemo } from 'react';
|
|
6
6
|
|
|
7
|
-
import { type
|
|
7
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
8
8
|
import { Obj, Ref } from '@dxos/echo';
|
|
9
|
-
import {
|
|
10
|
-
import { Card } from '@dxos/react-ui
|
|
11
|
-
import { CardContainer } from '@dxos/react-ui-mosaic/testing';
|
|
12
|
-
import {
|
|
9
|
+
import { random } from '@dxos/random';
|
|
10
|
+
import { Card } from '@dxos/react-ui';
|
|
11
|
+
import { CardContainer, type CardContainerProps } from '@dxos/react-ui-mosaic/testing';
|
|
12
|
+
import { Expando } from '@dxos/schema';
|
|
13
|
+
import { Organization, Person, Pipeline, Task } from '@dxos/types';
|
|
13
14
|
|
|
14
15
|
export type DefaultStoryProps<T extends Obj.Any> = {
|
|
15
|
-
Component: FC<
|
|
16
|
+
Component: FC<AppSurface.ObjectCardProps<T>>;
|
|
16
17
|
createObject: () => T;
|
|
17
18
|
image?: boolean;
|
|
18
19
|
};
|
|
19
20
|
|
|
20
21
|
export const DefaultStory = <T extends Obj.Any>({ Component, createObject, image }: DefaultStoryProps<T>) => {
|
|
21
|
-
// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
|
|
22
22
|
const object = useMemo(() => createObject(), [createObject]);
|
|
23
|
-
const roles:
|
|
23
|
+
const roles: CardContainerProps['role'][] = ['intrinsic', 'popover'];
|
|
24
24
|
|
|
25
25
|
return (
|
|
26
|
-
<div className='grid grid-
|
|
26
|
+
<div className='h-full w-full grid grid-cols-2 py-16 gap-8'>
|
|
27
27
|
{roles.map((role, i) => (
|
|
28
|
-
<div key={i} className='flex justify-center'>
|
|
29
|
-
<div className='flex flex-col gap-4
|
|
30
|
-
<
|
|
28
|
+
<div key={i} className='flex h-full justify-center overflow-hidden'>
|
|
29
|
+
<div className='flex flex-col gap-4 w-full items-center'>
|
|
30
|
+
<span className='text-sm text-description'>{role}</span>
|
|
31
31
|
<CardContainer role={role}>
|
|
32
|
-
<Card.Root>
|
|
33
|
-
<
|
|
32
|
+
<Card.Root border={false}>
|
|
33
|
+
<Card.Toolbar>
|
|
34
|
+
<Card.DragHandle />
|
|
35
|
+
<Card.Title>{Obj.getLabel(object)}</Card.Title>
|
|
36
|
+
<Card.Menu />
|
|
37
|
+
</Card.Toolbar>
|
|
38
|
+
<Component role={role ?? 'card--content'} subject={image ? object : omitImage(object)} />
|
|
34
39
|
</Card.Root>
|
|
35
40
|
</CardContainer>
|
|
36
41
|
</div>
|
|
@@ -45,40 +50,52 @@ export const omitImage = ({ image: _, ...rest }: any) => rest;
|
|
|
45
50
|
/**
|
|
46
51
|
* Factory functions for creating test objects at render time.
|
|
47
52
|
*/
|
|
48
|
-
export const createOrganization = (): Organization.Organization =>
|
|
49
|
-
Obj.make(Organization.Organization, {
|
|
50
|
-
name:
|
|
53
|
+
export const createOrganization = (): Organization.Organization => {
|
|
54
|
+
return Obj.make(Organization.Organization, {
|
|
55
|
+
name: random.company.name(),
|
|
51
56
|
image:
|
|
52
57
|
'https://plus.unsplash.com/premium_photo-1672116452571-896980a801c8?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
53
|
-
website:
|
|
54
|
-
description:
|
|
58
|
+
website: random.internet.url(),
|
|
59
|
+
description: random.lorem.paragraph(),
|
|
55
60
|
});
|
|
61
|
+
};
|
|
56
62
|
|
|
57
63
|
export const createPerson = (): Person.Person => {
|
|
58
64
|
const organization = createOrganization();
|
|
59
65
|
return Obj.make(Person.Person, {
|
|
60
|
-
fullName:
|
|
66
|
+
fullName: random.person.fullName(),
|
|
61
67
|
image:
|
|
62
68
|
'https://plus.unsplash.com/premium_photo-1664536392779-049ba8fde933?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
|
63
69
|
organization: Ref.make(organization),
|
|
64
70
|
emails: [
|
|
65
|
-
{ label: 'Work', value:
|
|
66
|
-
{ label: 'Work', value:
|
|
67
|
-
{ label: 'Work', value:
|
|
71
|
+
{ label: 'Work', value: random.internet.email() },
|
|
72
|
+
{ label: 'Work', value: random.internet.email() },
|
|
73
|
+
{ label: 'Work', value: random.internet.email() },
|
|
68
74
|
],
|
|
69
75
|
});
|
|
70
76
|
};
|
|
71
77
|
|
|
72
|
-
export const createProject = ():
|
|
73
|
-
Obj.make(
|
|
74
|
-
name:
|
|
78
|
+
export const createProject = (): Pipeline.Pipeline => {
|
|
79
|
+
return Obj.make(Pipeline.Pipeline, {
|
|
80
|
+
name: random.person.fullName(),
|
|
75
81
|
image: 'https://dxos.network/dxos-logotype-blue.png',
|
|
76
|
-
description:
|
|
82
|
+
description: random.lorem.paragraph(),
|
|
77
83
|
columns: [],
|
|
78
84
|
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export const createTask = (): Task.Task => {
|
|
88
|
+
return Obj.make(Task.Task, {
|
|
89
|
+
title: random.lorem.sentence(),
|
|
90
|
+
status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
|
|
91
|
+
});
|
|
92
|
+
};
|
|
79
93
|
|
|
80
|
-
export const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
94
|
+
export const createExpando = (): Expando.Expando => {
|
|
95
|
+
return Expando.make({
|
|
96
|
+
name: random.person.fullName(),
|
|
97
|
+
email: random.internet.email(),
|
|
98
|
+
age: random.number.int({ min: 18, max: 80 }),
|
|
99
|
+
active: random.datatype.boolean(),
|
|
84
100
|
});
|
|
101
|
+
};
|
package/src/translations.ts
CHANGED
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
import { type Resource } from '@dxos/react-ui';
|
|
6
6
|
|
|
7
|
-
import { meta } from '
|
|
7
|
+
import { meta } from '#meta';
|
|
8
8
|
|
|
9
9
|
export const translations = [
|
|
10
10
|
{
|
|
11
11
|
'en-US': {
|
|
12
12
|
[meta.id]: {
|
|
13
|
-
'unable
|
|
14
|
-
'todo
|
|
15
|
-
'in-progress
|
|
16
|
-
'done
|
|
17
|
-
'open
|
|
18
|
-
'add
|
|
19
|
-
'more
|
|
13
|
+
'unable-to-create-preview.message': 'No preview',
|
|
14
|
+
'todo.label': 'To do',
|
|
15
|
+
'in-progress.label': 'In progress',
|
|
16
|
+
'done.label': 'Done',
|
|
17
|
+
'open-object.label': 'Open',
|
|
18
|
+
'add-object-to-space.label': 'Add to space',
|
|
19
|
+
'more-options.label': 'More options',
|
|
20
20
|
},
|
|
21
21
|
},
|
|
22
22
|
},
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
// src/meta.ts
|
|
2
|
-
import { trim } from "@dxos/util";
|
|
3
|
-
var meta = {
|
|
4
|
-
id: "dxos.org/plugin/preview",
|
|
5
|
-
name: "Preview",
|
|
6
|
-
description: trim`
|
|
7
|
-
Rich preview panel for viewing object content without opening full editors.
|
|
8
|
-
Quick peek at documents, images, and data with inline rendering.
|
|
9
|
-
`,
|
|
10
|
-
icon: "ph--eye--regular",
|
|
11
|
-
source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview"
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export {
|
|
15
|
-
meta
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=chunk-XLN6KTHK.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 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/preview',\n name: 'Preview',\n description: trim`\n Rich preview panel for viewing object content without opening full editors.\n Quick peek at documents, images, and data with inline rendering.\n `,\n icon: 'ph--eye--regular',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',\n};\n"],
|
|
5
|
-
"mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;EACNC,QAAQ;AACV;",
|
|
6
|
-
"names": ["trim", "meta", "id", "name", "description", "trim", "icon", "source"]
|
|
7
|
-
}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
// src/capabilities/preview-popover/preview-popover.ts
|
|
2
|
-
import * as Effect from "effect/Effect";
|
|
3
|
-
import { Capability, Common } from "@dxos/app-framework";
|
|
4
|
-
import { addEventListener } from "@dxos/async";
|
|
5
|
-
import { parseId } from "@dxos/client/echo";
|
|
6
|
-
import { DXN } from "@dxos/keys";
|
|
7
|
-
import { log } from "@dxos/log";
|
|
8
|
-
import { ClientCapabilities } from "@dxos/plugin-client";
|
|
9
|
-
import { DX_ANCHOR_ACTIVATE } from "@dxos/react-ui";
|
|
10
|
-
var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-preview/src/capabilities/preview-popover/preview-popover.ts";
|
|
11
|
-
var customEventOptions = {
|
|
12
|
-
capture: true,
|
|
13
|
-
passive: false
|
|
14
|
-
};
|
|
15
|
-
var handlePreviewLookup = async (client, defaultSpace, { ref, label }) => {
|
|
16
|
-
try {
|
|
17
|
-
const object = await defaultSpace.db.makeRef(DXN.parse(ref)).load();
|
|
18
|
-
return {
|
|
19
|
-
label,
|
|
20
|
-
object
|
|
21
|
-
};
|
|
22
|
-
} catch {
|
|
23
|
-
return null;
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
var preview_popover_default = Capability.makeModule(Effect.fnUntraced(function* () {
|
|
27
|
-
const capabilities = yield* Capability.Service;
|
|
28
|
-
const handleAnchorActivate = async ({ refId, label, trigger, kind, title, side, props }) => {
|
|
29
|
-
const { invokePromise } = capabilities.get(Common.Capability.OperationInvoker);
|
|
30
|
-
const client = capabilities.get(ClientCapabilities.Client);
|
|
31
|
-
const registry = capabilities.get(Common.Capability.AtomRegistry);
|
|
32
|
-
const [layoutAtom] = capabilities.getAll(Common.Capability.Layout);
|
|
33
|
-
const layout = registry.get(layoutAtom);
|
|
34
|
-
const { spaceId } = parseId(layout.workspace);
|
|
35
|
-
const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
|
|
36
|
-
const result = await handlePreviewLookup(client, space, {
|
|
37
|
-
ref: refId,
|
|
38
|
-
label
|
|
39
|
-
});
|
|
40
|
-
if (!result) {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
await invokePromise(Common.LayoutOperation.UpdatePopover, {
|
|
44
|
-
subject: result.object,
|
|
45
|
-
state: true,
|
|
46
|
-
variant: "virtual",
|
|
47
|
-
anchor: trigger,
|
|
48
|
-
...kind && {
|
|
49
|
-
kind
|
|
50
|
-
},
|
|
51
|
-
...title && {
|
|
52
|
-
title
|
|
53
|
-
},
|
|
54
|
-
...side && {
|
|
55
|
-
side
|
|
56
|
-
},
|
|
57
|
-
...props && {
|
|
58
|
-
props
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
let cleanup;
|
|
63
|
-
if (document.defaultView) {
|
|
64
|
-
cleanup = addEventListener(document.defaultView, DX_ANCHOR_ACTIVATE, handleAnchorActivate, customEventOptions);
|
|
65
|
-
} else {
|
|
66
|
-
log.warn("No default view found", void 0, {
|
|
67
|
-
F: __dxlog_file,
|
|
68
|
-
L: 72,
|
|
69
|
-
S: this,
|
|
70
|
-
C: (f, a) => f(...a)
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
return Capability.contributes(Common.Capability.Null, null, () => Effect.sync(() => cleanup?.()));
|
|
74
|
-
}));
|
|
75
|
-
export {
|
|
76
|
-
preview_popover_default as default
|
|
77
|
-
};
|
|
78
|
-
//# sourceMappingURL=preview-popover-Y67LE6TV.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/preview-popover/preview-popover.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability, Common } from '@dxos/app-framework';\nimport { addEventListener } from '@dxos/async';\nimport { type Client } from '@dxos/client';\nimport { type Space, parseId } from '@dxos/client/echo';\nimport { DXN } from '@dxos/keys';\nimport { log } from '@dxos/log';\nimport { ClientCapabilities } from '@dxos/plugin-client';\nimport { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/react-ui';\nimport { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-editor';\n\nconst customEventOptions = { capture: true, passive: false };\n\nconst handlePreviewLookup = async (\n client: Client,\n defaultSpace: Space,\n { ref, label }: PreviewLinkRef,\n): Promise<PreviewLinkTarget | null> => {\n try {\n const object = await defaultSpace.db.makeRef(DXN.parse(ref)).load();\n return { label, object };\n } catch {\n return null;\n }\n};\n\nexport default Capability.makeModule(\n Effect.fnUntraced(function* () {\n // Get context for lazy capability access in callbacks.\n const capabilities = yield* Capability.Service;\n\n // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.\n const handleAnchorActivate = async ({ refId, label, trigger, kind, title, side, props }: DxAnchorActivate) => {\n const { invokePromise } = capabilities.get(Common.Capability.OperationInvoker);\n const client = capabilities.get(ClientCapabilities.Client);\n const registry = capabilities.get(Common.Capability.AtomRegistry);\n const [layoutAtom] = capabilities.getAll(Common.Capability.Layout);\n const layout = registry.get(layoutAtom);\n const { spaceId } = parseId(layout.workspace);\n const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;\n const result = await handlePreviewLookup(client, space, { ref: refId, label });\n if (!result) {\n return;\n }\n\n await invokePromise(Common.LayoutOperation.UpdatePopover, {\n subject: result.object,\n state: true,\n variant: 'virtual',\n anchor: trigger,\n ...(kind && { kind }),\n ...(title && { title }),\n ...(side && { side }),\n ...(props && { props }),\n });\n };\n\n let cleanup: () => void;\n if (document.defaultView) {\n cleanup = addEventListener(\n document.defaultView,\n DX_ANCHOR_ACTIVATE as any,\n handleAnchorActivate,\n customEventOptions,\n );\n } else {\n log.warn('No default view found');\n }\n\n return Capability.contributes(Common.Capability.Null, null, () => Effect.sync(() => cleanup?.()));\n }),\n);\n"],
|
|
5
|
-
"mappings": ";AAIA,YAAYA,YAAY;AAExB,SAASC,YAAYC,cAAc;AACnC,SAASC,wBAAwB;AAEjC,SAAqBC,eAAe;AACpC,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,0BAA0B;AACnC,SAASC,0BAAiD;;AAG1D,IAAMC,qBAAqB;EAAEC,SAAS;EAAMC,SAAS;AAAM;AAE3D,IAAMC,sBAAsB,OAC1BC,QACAC,cACA,EAAEC,KAAKC,MAAK,MAAkB;AAE9B,MAAI;AACF,UAAMC,SAAS,MAAMH,aAAaI,GAAGC,QAAQd,IAAIe,MAAML,GAAAA,CAAAA,EAAMM,KAAI;AACjE,WAAO;MAAEL;MAAOC;IAAO;EACzB,QAAQ;AACN,WAAO;EACT;AACF;AAEA,IAAA,0BAAehB,WAAWqB,WACjBC,kBAAW,aAAA;AAEhB,QAAMC,eAAe,OAAOvB,WAAWwB;AAGvC,QAAMC,uBAAuB,OAAO,EAAEC,OAAOX,OAAOY,SAASC,MAAMC,OAAOC,MAAMC,MAAK,MAAoB;AACvG,UAAM,EAAEC,cAAa,IAAKT,aAAaU,IAAIhC,OAAOD,WAAWkC,gBAAgB;AAC7E,UAAMtB,SAASW,aAAaU,IAAI3B,mBAAmB6B,MAAM;AACzD,UAAMC,WAAWb,aAAaU,IAAIhC,OAAOD,WAAWqC,YAAY;AAChE,UAAM,CAACC,UAAAA,IAAcf,aAAagB,OAAOtC,OAAOD,WAAWwC,MAAM;AACjE,UAAMC,SAASL,SAASH,IAAIK,UAAAA;AAC5B,UAAM,EAAEI,QAAO,IAAKvC,QAAQsC,OAAOE,SAAS;AAC5C,UAAMC,SAASF,WAAW9B,OAAOiC,OAAOZ,IAAIS,OAAAA,MAAa9B,OAAOiC,OAAOC;AACvE,UAAMC,SAAS,MAAMpC,oBAAoBC,QAAQgC,OAAO;MAAE9B,KAAKY;MAAOX;IAAM,CAAA;AAC5E,QAAI,CAACgC,QAAQ;AACX;IACF;AAEA,UAAMf,cAAc/B,OAAO+C,gBAAgBC,eAAe;MACxDC,SAASH,OAAO/B;MAChBmC,OAAO;MACPC,SAAS;MACTC,QAAQ1B;MACR,GAAIC,QAAQ;QAAEA;MAAK;MACnB,GAAIC,SAAS;QAAEA;MAAM;MACrB,GAAIC,QAAQ;QAAEA;MAAK;MACnB,GAAIC,SAAS;QAAEA;MAAM;IACvB,CAAA;EACF;AAEA,MAAIuB;AACJ,MAAIC,SAASC,aAAa;AACxBF,cAAUpD,iBACRqD,SAASC,aACTjD,oBACAkB,sBACAjB,kBAAAA;EAEJ,OAAO;AACLH,QAAIoD,KAAK,yBAAA,QAAA;;;;;;EACX;AAEA,SAAOzD,WAAW0D,YAAYzD,OAAOD,WAAW2D,MAAM,MAAM,MAAaC,YAAK,MAAMN,UAAAA,CAAAA,CAAAA;AACtF,CAAA,CAAA;",
|
|
6
|
-
"names": ["Effect", "Capability", "Common", "addEventListener", "parseId", "DXN", "log", "ClientCapabilities", "DX_ANCHOR_ACTIVATE", "customEventOptions", "capture", "passive", "handlePreviewLookup", "client", "defaultSpace", "ref", "label", "object", "db", "makeRef", "parse", "load", "makeModule", "fnUntraced", "capabilities", "Service", "handleAnchorActivate", "refId", "trigger", "kind", "title", "side", "props", "invokePromise", "get", "OperationInvoker", "Client", "registry", "AtomRegistry", "layoutAtom", "getAll", "Layout", "layout", "spaceId", "workspace", "space", "spaces", "default", "result", "LayoutOperation", "UpdatePopover", "subject", "state", "variant", "anchor", "cleanup", "document", "defaultView", "warn", "contributes", "Null", "sync"]
|
|
7
|
-
}
|