@dxos/plugin-preview 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5
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 +41 -42
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +42 -42
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/PreviewPlugin.d.ts +2 -1
- package/dist/types/src/PreviewPlugin.d.ts.map +1 -1
- 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 +3 -2
- package/dist/types/src/capabilities/preview-popover.d.ts.map +1 -1
- package/dist/types/src/capabilities/react-surface.d.ts +3 -2
- package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
- package/dist/types/src/cards/FormCard.d.ts +7 -0
- package/dist/types/src/cards/FormCard.d.ts.map +1 -0
- 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 +5 -0
- package/dist/types/src/cards/OrganizationCard.d.ts.map +1 -0
- package/dist/types/src/cards/PersonCard.d.ts +5 -0
- package/dist/types/src/cards/PersonCard.d.ts.map +1 -0
- package/dist/types/src/cards/ProjectCard.d.ts +5 -0
- package/dist/types/src/cards/ProjectCard.d.ts.map +1 -0
- package/dist/types/src/cards/TaskCard.d.ts +5 -0
- package/dist/types/src/cards/TaskCard.d.ts.map +1 -0
- package/dist/types/src/cards/index.d.ts +7 -0
- package/dist/types/src/cards/index.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +2 -3
- package/dist/types/src/meta.d.ts.map +1 -1
- package/dist/types/src/stories/Card.stories.d.ts +32 -46
- package/dist/types/src/stories/Card.stories.d.ts.map +1 -1
- package/dist/types/src/stories/testing.d.ts +15 -14
- package/dist/types/src/stories/testing.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +8 -2
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +49 -34
- package/src/PreviewPlugin.tsx +17 -28
- package/src/capabilities/index.ts +3 -3
- package/src/capabilities/preview-popover.ts +69 -50
- package/src/capabilities/react-surface.tsx +99 -151
- package/src/cards/FormCard.tsx +48 -0
- package/src/cards/JsonCard.tsx +16 -0
- package/src/cards/OrganizationCard.tsx +29 -0
- package/src/cards/PersonCard.tsx +65 -0
- package/src/cards/ProjectCard.tsx +22 -0
- package/src/cards/TaskCard.tsx +44 -0
- package/src/cards/index.ts +10 -0
- package/src/index.ts +0 -1
- package/src/meta.ts +8 -5
- package/src/stories/Card.stories.tsx +81 -27
- package/src/stories/testing.tsx +56 -68
- package/src/translations.ts +8 -2
- package/dist/lib/browser/chunk-Z73ENKLE.mjs +0 -14
- package/dist/lib/browser/chunk-Z73ENKLE.mjs.map +0 -7
- package/dist/lib/browser/preview-popover-MAIBTJKJ.mjs +0 -69
- package/dist/lib/browser/preview-popover-MAIBTJKJ.mjs.map +0 -7
- package/dist/lib/browser/react-surface-H4RYYXVQ.mjs +0 -379
- package/dist/lib/browser/react-surface-H4RYYXVQ.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-2ORSL4GJ.mjs +0 -16
- package/dist/lib/node-esm/chunk-2ORSL4GJ.mjs.map +0 -7
- package/dist/lib/node-esm/preview-popover-LZGHYW23.mjs +0 -71
- package/dist/lib/node-esm/preview-popover-LZGHYW23.mjs.map +0 -7
- package/dist/lib/node-esm/react-surface-4C44XCLH.mjs +0 -380
- package/dist/lib/node-esm/react-surface-4C44XCLH.mjs.map +0 -7
- package/dist/types/src/components/CardSubjectMenu.d.ts +0 -10
- package/dist/types/src/components/CardSubjectMenu.d.ts.map +0 -1
- package/dist/types/src/components/ContactCard.d.ts +0 -7
- package/dist/types/src/components/ContactCard.d.ts.map +0 -1
- package/dist/types/src/components/OrganizationCard.d.ts +0 -5
- package/dist/types/src/components/OrganizationCard.d.ts.map +0 -1
- package/dist/types/src/components/ProjectCard.d.ts +0 -5
- package/dist/types/src/components/ProjectCard.d.ts.map +0 -1
- package/dist/types/src/components/index.d.ts +0 -4
- package/dist/types/src/components/index.d.ts.map +0 -1
- package/dist/types/src/types.d.ts +0 -7
- package/dist/types/src/types.d.ts.map +0 -1
- package/src/components/CardSubjectMenu.tsx +0 -56
- package/src/components/ContactCard.tsx +0 -76
- package/src/components/OrganizationCard.tsx +0 -44
- package/src/components/ProjectCard.tsx +0 -27
- package/src/components/index.ts +0 -7
- package/src/types.ts +0 -11
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
8
|
+
import { Card } from '@dxos/react-ui';
|
|
9
|
+
import { type Organization } from '@dxos/types';
|
|
10
|
+
|
|
11
|
+
export const OrganizationCard = ({ subject }: AppSurface.ObjectCardProps<Organization.Organization>) => {
|
|
12
|
+
const { name, image, description, website } = subject;
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<Card.Content>
|
|
16
|
+
<Card.Poster
|
|
17
|
+
alt={name ?? ''}
|
|
18
|
+
{...(image ? { image } : { icon: 'ph--building-office--regular' })}
|
|
19
|
+
classNames={!image && 'opacity-50'}
|
|
20
|
+
/>
|
|
21
|
+
{description && (
|
|
22
|
+
<Card.Row>
|
|
23
|
+
<Card.Text variant='description'>{description}</Card.Text>
|
|
24
|
+
</Card.Row>
|
|
25
|
+
)}
|
|
26
|
+
{website && <Card.Link label={website} href={website} />}
|
|
27
|
+
</Card.Content>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as Effect from 'effect/Effect';
|
|
6
|
+
import React, { useCallback } from 'react';
|
|
7
|
+
|
|
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';
|
|
13
|
+
import { Avatar } from '@dxos/react-ui';
|
|
14
|
+
import { Card } from '@dxos/react-ui';
|
|
15
|
+
import { type Person } from '@dxos/types';
|
|
16
|
+
|
|
17
|
+
export const PersonCard = ({ subject }: AppSurface.ObjectCardProps<Person.Person>) => {
|
|
18
|
+
const { invoke } = useOperationInvoker();
|
|
19
|
+
const { image, organization: { target: organization } = {}, emails = [] } = subject;
|
|
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
|
+
|
|
37
|
+
return (
|
|
38
|
+
<Card.Content>
|
|
39
|
+
<Avatar.Root>
|
|
40
|
+
{image && (
|
|
41
|
+
<Card.Row className='py-1'>
|
|
42
|
+
<Avatar.Content
|
|
43
|
+
imgSrc={image}
|
|
44
|
+
icon='ph--user--regular'
|
|
45
|
+
size={20}
|
|
46
|
+
classNames={!image && 'opacity-50'}
|
|
47
|
+
hue='neutral'
|
|
48
|
+
variant='square'
|
|
49
|
+
/>
|
|
50
|
+
</Card.Row>
|
|
51
|
+
)}
|
|
52
|
+
{organization?.name && (
|
|
53
|
+
<Card.Action icon='ph--buildings--regular' label={organization.name} onClick={handleOrganizationClick} />
|
|
54
|
+
)}
|
|
55
|
+
{emails.map(({ value }) => (
|
|
56
|
+
<Card.Row key={value} icon='ph--at--regular'>
|
|
57
|
+
<Card.Text truncate className='text-primary-text'>
|
|
58
|
+
{value}
|
|
59
|
+
</Card.Text>
|
|
60
|
+
</Card.Row>
|
|
61
|
+
))}
|
|
62
|
+
</Avatar.Root>
|
|
63
|
+
</Card.Content>
|
|
64
|
+
);
|
|
65
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
|
|
7
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
8
|
+
import { Obj } from '@dxos/echo';
|
|
9
|
+
import { Card } from '@dxos/react-ui';
|
|
10
|
+
import { type Pipeline } from '@dxos/types';
|
|
11
|
+
|
|
12
|
+
export const ProjectCard = ({ subject }: AppSurface.ObjectCardProps<Pipeline.Pipeline>) => {
|
|
13
|
+
const { image, description } = subject;
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<Card.Content>
|
|
17
|
+
{image && <Card.Poster image={image} alt={Obj.getLabel(subject) ?? ''} aspect='auto' />}
|
|
18
|
+
{/* <CardHeader label={name} subject={subject} db={db} /> */}
|
|
19
|
+
{description && <Card.Text variant='description'>{description}</Card.Text>}
|
|
20
|
+
</Card.Content>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2025 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import * as SchemaAST from 'effect/SchemaAST';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
|
|
8
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
9
|
+
import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
|
|
10
|
+
import { Card } from '@dxos/react-ui';
|
|
11
|
+
import { Task } from '@dxos/types';
|
|
12
|
+
|
|
13
|
+
export const TaskCard = ({ subject }: AppSurface.ObjectCardProps<Task.Task>) => {
|
|
14
|
+
const { title, status } = subject;
|
|
15
|
+
const statusOption = getActiveStatusOption(status);
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<Card.Content>
|
|
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>
|
|
28
|
+
</Card.Content>
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// TODO(thure): Should this move upstream as a helper? Is there an easier way to get options?
|
|
33
|
+
const getActiveStatusOption = (status?: string) => {
|
|
34
|
+
const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
|
|
35
|
+
const statusProperty = properties.find((p) => p.name === 'status');
|
|
36
|
+
// TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
|
|
37
|
+
const statusMeta = SchemaAST.getAnnotation<PropertyMetaAnnotation>(PropertyMetaAnnotationId)(
|
|
38
|
+
(statusProperty!.type as any).types[0],
|
|
39
|
+
);
|
|
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 }[];
|
|
43
|
+
return options.find(({ id }) => id === status);
|
|
44
|
+
};
|
package/src/index.ts
CHANGED
package/src/meta.ts
CHANGED
|
@@ -2,13 +2,16 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { type
|
|
5
|
+
import { type Plugin } from '@dxos/app-framework';
|
|
6
|
+
import { trim } from '@dxos/util';
|
|
6
7
|
|
|
7
|
-
export const
|
|
8
|
-
|
|
9
|
-
export const meta: PluginMeta = {
|
|
10
|
-
id: PREVIEW_PLUGIN,
|
|
8
|
+
export const meta: Plugin.Meta = {
|
|
9
|
+
id: 'org.dxos.plugin.preview',
|
|
11
10
|
name: 'Preview',
|
|
11
|
+
description: trim`
|
|
12
|
+
Rich preview panel for viewing object content without opening full editors.
|
|
13
|
+
Quick peek at documents, images, and data with inline rendering.
|
|
14
|
+
`,
|
|
12
15
|
icon: 'ph--eye--regular',
|
|
13
16
|
source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',
|
|
14
17
|
};
|
|
@@ -2,52 +2,106 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
5
|
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
6
|
+
import React from 'react';
|
|
8
7
|
|
|
9
|
-
import {
|
|
8
|
+
import { withPluginManager } from '@dxos/app-framework/testing';
|
|
9
|
+
import { corePlugins } from '@dxos/plugin-testing';
|
|
10
|
+
import { random } from '@dxos/random';
|
|
11
|
+
import { Card } from '@dxos/react-ui';
|
|
12
|
+
import { withLayout } from '@dxos/react-ui/testing';
|
|
13
|
+
import { type Organization, type Person, type Pipeline, type Task } from '@dxos/types';
|
|
10
14
|
|
|
15
|
+
import { FormCard, JsonCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
|
|
11
16
|
import { translations } from '../translations';
|
|
17
|
+
import { DefaultStory, createOrganization, createPerson, createProject, createTask } from './testing';
|
|
12
18
|
|
|
13
|
-
|
|
19
|
+
random.seed(999);
|
|
14
20
|
|
|
15
|
-
const meta
|
|
16
|
-
title: 'plugins/plugin-preview/Card',
|
|
17
|
-
render:
|
|
18
|
-
decorators: [
|
|
19
|
-
|
|
21
|
+
const meta = {
|
|
22
|
+
title: 'plugins/plugin-preview/cards/Card',
|
|
23
|
+
render: DefaultStory,
|
|
24
|
+
decorators: [
|
|
25
|
+
withLayout({ layout: 'fullscreen' }),
|
|
26
|
+
// TODO(wittjosiah): Try to write story which does not depend on plugin manager.
|
|
27
|
+
withPluginManager({ plugins: corePlugins() }),
|
|
28
|
+
],
|
|
29
|
+
parameters: {
|
|
30
|
+
layout: 'fullscreen',
|
|
31
|
+
translations,
|
|
32
|
+
},
|
|
20
33
|
tags: ['cards'],
|
|
21
|
-
}
|
|
34
|
+
} satisfies Meta<typeof DefaultStory>;
|
|
22
35
|
|
|
23
36
|
export default meta;
|
|
24
37
|
|
|
25
|
-
|
|
38
|
+
export const _Form: StoryObj<typeof DefaultStory<Person.Person>> = {
|
|
39
|
+
args: {
|
|
40
|
+
Component: FormCard,
|
|
41
|
+
createObject: createPerson,
|
|
42
|
+
image: true,
|
|
43
|
+
},
|
|
44
|
+
};
|
|
26
45
|
|
|
27
|
-
export const
|
|
46
|
+
export const _Person: StoryObj<typeof DefaultStory<Person.Person>> = {
|
|
28
47
|
args: {
|
|
29
|
-
|
|
30
|
-
|
|
48
|
+
Component: PersonCard,
|
|
49
|
+
createObject: createPerson,
|
|
50
|
+
image: true,
|
|
31
51
|
},
|
|
32
|
-
}
|
|
52
|
+
};
|
|
33
53
|
|
|
34
|
-
export const
|
|
54
|
+
export const _Organization: StoryObj<typeof DefaultStory<Organization.Organization>> = {
|
|
35
55
|
args: {
|
|
36
|
-
|
|
37
|
-
|
|
56
|
+
Component: OrganizationCard,
|
|
57
|
+
createObject: createOrganization,
|
|
58
|
+
image: true,
|
|
38
59
|
},
|
|
39
|
-
}
|
|
60
|
+
};
|
|
40
61
|
|
|
41
|
-
export const
|
|
62
|
+
export const _Project: StoryObj<typeof DefaultStory<Pipeline.Pipeline>> = {
|
|
42
63
|
args: {
|
|
43
|
-
|
|
44
|
-
|
|
64
|
+
Component: ProjectCard,
|
|
65
|
+
createObject: createProject,
|
|
66
|
+
image: true,
|
|
45
67
|
},
|
|
46
|
-
}
|
|
68
|
+
};
|
|
47
69
|
|
|
48
|
-
export const
|
|
70
|
+
export const _Task: StoryObj<typeof DefaultStory<Task.Task>> = {
|
|
49
71
|
args: {
|
|
50
|
-
|
|
51
|
-
|
|
72
|
+
Component: TaskCard,
|
|
73
|
+
createObject: createTask,
|
|
74
|
+
image: true,
|
|
52
75
|
},
|
|
53
|
-
}
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export const _Json = {
|
|
79
|
+
render: () => {
|
|
80
|
+
const data = {
|
|
81
|
+
subject: {
|
|
82
|
+
id: random.string.uuid(),
|
|
83
|
+
name: random.person.fullName(),
|
|
84
|
+
email: random.internet.email(),
|
|
85
|
+
tags: [random.lorem.word(), random.lorem.word(), random.lorem.word()],
|
|
86
|
+
nested: {
|
|
87
|
+
count: random.number.int({ max: 100 }),
|
|
88
|
+
active: random.datatype.boolean(),
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<div className='flex justify-center p-16'>
|
|
95
|
+
<div className='dx-card-min-width dx-card-max-width'>
|
|
96
|
+
<Card.Root>
|
|
97
|
+
<Card.Toolbar>
|
|
98
|
+
<Card.IconBlock />
|
|
99
|
+
<Card.Title>JSON</Card.Title>
|
|
100
|
+
</Card.Toolbar>
|
|
101
|
+
<JsonCard data={data} />
|
|
102
|
+
</Card.Root>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
},
|
|
107
|
+
};
|
package/src/stories/testing.tsx
CHANGED
|
@@ -2,39 +2,42 @@
|
|
|
2
2
|
// Copyright 2025 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import
|
|
6
|
-
import React, { type FC } from 'react';
|
|
5
|
+
import React, { type FC, useMemo } from 'react';
|
|
7
6
|
|
|
7
|
+
import { type AppSurface } from '@dxos/app-toolkit/ui';
|
|
8
8
|
import { Obj, Ref } from '@dxos/echo';
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
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 { Organization, Person, Pipeline, Task } from '@dxos/types';
|
|
12
13
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
faker.seed(1234);
|
|
17
|
-
|
|
18
|
-
type CardProps<T extends object> = {
|
|
19
|
-
Component: FC<PreviewProps<T>>;
|
|
20
|
-
subject: T;
|
|
21
|
-
icon?: string;
|
|
14
|
+
export type DefaultStoryProps<T extends Obj.Any> = {
|
|
15
|
+
Component: FC<AppSurface.ObjectCardProps<T>>;
|
|
16
|
+
createObject: () => T;
|
|
22
17
|
image?: boolean;
|
|
23
18
|
};
|
|
24
19
|
|
|
25
|
-
export
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
};
|
|
20
|
+
export const DefaultStory = <T extends Obj.Any>({ Component, createObject, image }: DefaultStoryProps<T>) => {
|
|
21
|
+
const object = useMemo(() => createObject(), [createObject]);
|
|
22
|
+
const roles: CardContainerProps['role'][] = ['intrinsic', 'popover'];
|
|
29
23
|
|
|
30
|
-
export const Defaultstory: Meta<DefaultstoryProps>['render'] = ({ role, cards }) => {
|
|
31
24
|
return (
|
|
32
|
-
<div className='grid grid-cols-
|
|
33
|
-
{
|
|
34
|
-
<div key={i} className='flex justify-center'>
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
25
|
+
<div className='h-full w-full grid grid-cols-2 py-16 gap-8'>
|
|
26
|
+
{roles.map((role, i) => (
|
|
27
|
+
<div key={i} className='flex h-full justify-center overflow-hidden'>
|
|
28
|
+
<div className='flex flex-col gap-4 w-full items-center'>
|
|
29
|
+
<span className='text-sm text-description'>{role}</span>
|
|
30
|
+
<CardContainer role={role}>
|
|
31
|
+
<Card.Root border={false}>
|
|
32
|
+
<Card.Toolbar>
|
|
33
|
+
<Card.DragHandle />
|
|
34
|
+
<Card.Title>{Obj.getLabel(object)}</Card.Title>
|
|
35
|
+
<Card.Menu />
|
|
36
|
+
</Card.Toolbar>
|
|
37
|
+
<Component role={role ?? 'card--content'} subject={image ? object : omitImage(object)} />
|
|
38
|
+
</Card.Root>
|
|
39
|
+
</CardContainer>
|
|
40
|
+
</div>
|
|
38
41
|
</div>
|
|
39
42
|
))}
|
|
40
43
|
</div>
|
|
@@ -43,61 +46,46 @@ export const Defaultstory: Meta<DefaultstoryProps>['render'] = ({ role, cards })
|
|
|
43
46
|
|
|
44
47
|
export const omitImage = ({ image: _, ...rest }: any) => rest;
|
|
45
48
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
/**
|
|
50
|
+
* Factory functions for creating test objects at render time.
|
|
51
|
+
*/
|
|
52
|
+
export const createOrganization = (): Organization.Organization => {
|
|
53
|
+
return Obj.make(Organization.Organization, {
|
|
54
|
+
name: random.company.name(),
|
|
50
55
|
image:
|
|
51
56
|
'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',
|
|
52
|
-
website:
|
|
53
|
-
description:
|
|
57
|
+
website: random.internet.url(),
|
|
58
|
+
description: random.lorem.paragraph(),
|
|
54
59
|
});
|
|
60
|
+
};
|
|
55
61
|
|
|
56
|
-
|
|
57
|
-
|
|
62
|
+
export const createPerson = (): Person.Person => {
|
|
63
|
+
const organization = createOrganization();
|
|
64
|
+
return Obj.make(Person.Person, {
|
|
65
|
+
fullName: random.person.fullName(),
|
|
58
66
|
image:
|
|
59
67
|
'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',
|
|
60
68
|
organization: Ref.make(organization),
|
|
61
69
|
emails: [
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
label: 'Work',
|
|
68
|
-
value: faker.internet.email(),
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
label: 'Work',
|
|
72
|
-
value: faker.internet.email(),
|
|
73
|
-
},
|
|
70
|
+
{ label: 'Work', value: random.internet.email() },
|
|
71
|
+
{ label: 'Work', value: random.internet.email() },
|
|
72
|
+
{ label: 'Work', value: random.internet.email() },
|
|
74
73
|
],
|
|
75
74
|
});
|
|
75
|
+
};
|
|
76
76
|
|
|
77
|
-
|
|
78
|
-
|
|
77
|
+
export const createProject = (): Pipeline.Pipeline => {
|
|
78
|
+
return Obj.make(Pipeline.Pipeline, {
|
|
79
|
+
name: random.person.fullName(),
|
|
79
80
|
image: 'https://dxos.network/dxos-logotype-blue.png',
|
|
80
|
-
description:
|
|
81
|
+
description: random.lorem.paragraph(),
|
|
82
|
+
columns: [],
|
|
81
83
|
});
|
|
84
|
+
};
|
|
82
85
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
image,
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
Component: ContactCard,
|
|
92
|
-
subject: contact,
|
|
93
|
-
icon: 'ph--user--regular',
|
|
94
|
-
image,
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
Component: ProjectCard,
|
|
98
|
-
subject: project,
|
|
99
|
-
icon: 'ph--building--regular',
|
|
100
|
-
image,
|
|
101
|
-
},
|
|
102
|
-
];
|
|
86
|
+
export const createTask = (): Task.Task => {
|
|
87
|
+
return Obj.make(Task.Task, {
|
|
88
|
+
title: random.lorem.sentence(),
|
|
89
|
+
status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
|
|
90
|
+
});
|
|
103
91
|
};
|
package/src/translations.ts
CHANGED
|
@@ -4,13 +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
|
|
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',
|
|
14
20
|
},
|
|
15
21
|
},
|
|
16
22
|
},
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
// src/meta.ts
|
|
2
|
-
var PREVIEW_PLUGIN = "dxos.org/plugin/preview";
|
|
3
|
-
var meta = {
|
|
4
|
-
id: PREVIEW_PLUGIN,
|
|
5
|
-
name: "Preview",
|
|
6
|
-
icon: "ph--eye--regular",
|
|
7
|
-
source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview"
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export {
|
|
11
|
-
PREVIEW_PLUGIN,
|
|
12
|
-
meta
|
|
13
|
-
};
|
|
14
|
-
//# sourceMappingURL=chunk-Z73ENKLE.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 PluginMeta } from '@dxos/app-framework';\n\nexport const PREVIEW_PLUGIN = 'dxos.org/plugin/preview';\n\nexport const meta: PluginMeta = {\n id: PREVIEW_PLUGIN,\n name: 'Preview',\n icon: 'ph--eye--regular',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',\n};\n"],
|
|
5
|
-
"mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,OAAmB;EAC9BC,IAAIF;EACJG,MAAM;EACNC,MAAM;EACNC,QAAQ;AACV;",
|
|
6
|
-
"names": ["PREVIEW_PLUGIN", "meta", "id", "name", "icon", "source"]
|
|
7
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
// src/capabilities/preview-popover.ts
|
|
2
|
-
import { Capabilities, LayoutAction, contributes, createIntent } from "@dxos/app-framework";
|
|
3
|
-
import { addEventListener } from "@dxos/async";
|
|
4
|
-
import { resolveRef } from "@dxos/client";
|
|
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
|
-
var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-preview/src/capabilities/preview-popover.ts";
|
|
10
|
-
var customEventOptions = {
|
|
11
|
-
capture: true,
|
|
12
|
-
passive: false
|
|
13
|
-
};
|
|
14
|
-
var handlePreviewLookup = async (client, defaultSpace, { ref, label }) => {
|
|
15
|
-
try {
|
|
16
|
-
const dxn = DXN.parse(ref);
|
|
17
|
-
if (!dxn) {
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
const object = await resolveRef(client, dxn, defaultSpace);
|
|
21
|
-
return {
|
|
22
|
-
label,
|
|
23
|
-
object
|
|
24
|
-
};
|
|
25
|
-
} catch (err) {
|
|
26
|
-
return null;
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
var preview_popover_default = (context) => {
|
|
30
|
-
const handleDxRefTagActivate = async ({ refId, label, trigger }) => {
|
|
31
|
-
const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
|
|
32
|
-
const client = context.getCapability(ClientCapabilities.Client);
|
|
33
|
-
const [layout] = context.getCapabilities(Capabilities.Layout);
|
|
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 dispatch(createIntent(LayoutAction.UpdatePopover, {
|
|
44
|
-
part: "popover",
|
|
45
|
-
subject: result.object,
|
|
46
|
-
options: {
|
|
47
|
-
state: true,
|
|
48
|
-
variant: "virtual",
|
|
49
|
-
anchor: trigger
|
|
50
|
-
}
|
|
51
|
-
}));
|
|
52
|
-
};
|
|
53
|
-
let cleanup;
|
|
54
|
-
if (document.defaultView) {
|
|
55
|
-
cleanup = addEventListener(document.defaultView, "dx-ref-tag-activate", handleDxRefTagActivate, customEventOptions);
|
|
56
|
-
} else {
|
|
57
|
-
log.warn("No default view found", void 0, {
|
|
58
|
-
F: __dxlog_file,
|
|
59
|
-
L: 70,
|
|
60
|
-
S: void 0,
|
|
61
|
-
C: (f, a) => f(...a)
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
return contributes(Capabilities.Null, null, () => cleanup());
|
|
65
|
-
};
|
|
66
|
-
export {
|
|
67
|
-
preview_popover_default as default
|
|
68
|
-
};
|
|
69
|
-
//# sourceMappingURL=preview-popover-MAIBTJKJ.mjs.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/capabilities/preview-popover.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { addEventListener } from '@dxos/async';\nimport { type Client, resolveRef } from '@dxos/client';\nimport { type Space, parseId } from '@dxos/client/echo';\nimport { DXN } from '@dxos/keys';\nimport { type DxRefTagActivate } from '@dxos/lit-ui';\nimport { log } from '@dxos/log';\nimport { ClientCapabilities } from '@dxos/plugin-client';\nimport { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/react-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 dxn = DXN.parse(ref);\n if (!dxn) {\n return null;\n }\n\n const object = await resolveRef(client, dxn, defaultSpace);\n return { label, object };\n } catch (err) {\n return null;\n }\n};\n\nexport default (context: PluginContext) => {\n // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.\n const handleDxRefTagActivate = async ({ refId, label, trigger }: DxRefTagActivate) => {\n const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n const client = context.getCapability(ClientCapabilities.Client);\n const [layout] = context.getCapabilities(Capabilities.Layout);\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 dispatch(\n createIntent(LayoutAction.UpdatePopover, {\n part: 'popover',\n subject: result.object,\n options: {\n state: true,\n variant: 'virtual',\n anchor: trigger,\n },\n }),\n );\n };\n\n let cleanup: () => void;\n if (document.defaultView) {\n cleanup = addEventListener(\n document.defaultView,\n 'dx-ref-tag-activate' as any,\n handleDxRefTagActivate,\n customEventOptions,\n );\n } else {\n log.warn('No default view found');\n }\n\n return contributes(Capabilities.Null, null, () => cleanup());\n};\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,wBAAwB;AACjC,SAAsBC,kBAAkB;AACxC,SAAqBC,eAAe;AACpC,SAASC,WAAW;AAEpB,SAASC,WAAW;AACpB,SAASC,0BAA0B;;AAGnC,IAAMC,qBAAqB;EAAEC,SAAS;EAAMC,SAAS;AAAM;AAE3D,IAAMC,sBAAsB,OAC1BC,QACAC,cACA,EAAEC,KAAKC,MAAK,MAAkB;AAE9B,MAAI;AACF,UAAMC,MAAMX,IAAIY,MAAMH,GAAAA;AACtB,QAAI,CAACE,KAAK;AACR,aAAO;IACT;AAEA,UAAME,SAAS,MAAMf,WAAWS,QAAQI,KAAKH,YAAAA;AAC7C,WAAO;MAAEE;MAAOG;IAAO;EACzB,SAASC,KAAK;AACZ,WAAO;EACT;AACF;AAEA,IAAA,0BAAe,CAACC,YAAAA;AAEd,QAAMC,yBAAyB,OAAO,EAAEC,OAAOP,OAAOQ,QAAO,MAAoB;AAC/E,UAAM,EAAEC,iBAAiBC,SAAQ,IAAKL,QAAQM,cAAc5B,aAAa6B,gBAAgB;AACzF,UAAMf,SAASQ,QAAQM,cAAcnB,mBAAmBqB,MAAM;AAC9D,UAAM,CAACC,MAAAA,IAAUT,QAAQU,gBAAgBhC,aAAaiC,MAAM;AAC5D,UAAM,EAAEC,QAAO,IAAK5B,QAAQyB,OAAOI,SAAS;AAC5C,UAAMC,SAASF,WAAWpB,OAAOuB,OAAOC,IAAIJ,OAAAA,MAAapB,OAAOuB,OAAOE;AACvE,UAAMC,SAAS,MAAM3B,oBAAoBC,QAAQsB,OAAO;MAAEpB,KAAKQ;MAAOP;IAAM,CAAA;AAC5E,QAAI,CAACuB,QAAQ;AACX;IACF;AAEA,UAAMb,SACJxB,aAAaF,aAAawC,eAAe;MACvCC,MAAM;MACNC,SAASH,OAAOpB;MAChBwB,SAAS;QACPC,OAAO;QACPC,SAAS;QACTC,QAAQtB;MACV;IACF,CAAA,CAAA;EAEJ;AAEA,MAAIuB;AACJ,MAAIC,SAASC,aAAa;AACxBF,cAAU5C,iBACR6C,SAASC,aACT,uBACA3B,wBACAb,kBAAAA;EAEJ,OAAO;AACLF,QAAI2C,KAAK,yBAAA,QAAA;;;;;;EACX;AAEA,SAAOjD,YAAYF,aAAaoD,MAAM,MAAM,MAAMJ,QAAAA,CAAAA;AACpD;",
|
|
6
|
-
"names": ["Capabilities", "LayoutAction", "contributes", "createIntent", "addEventListener", "resolveRef", "parseId", "DXN", "log", "ClientCapabilities", "customEventOptions", "capture", "passive", "handlePreviewLookup", "client", "defaultSpace", "ref", "label", "dxn", "parse", "object", "err", "context", "handleDxRefTagActivate", "refId", "trigger", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "Client", "layout", "getCapabilities", "Layout", "spaceId", "workspace", "space", "spaces", "get", "default", "result", "UpdatePopover", "part", "subject", "options", "state", "variant", "anchor", "cleanup", "document", "defaultView", "warn", "Null"]
|
|
7
|
-
}
|