@dxos/plugin-preview 0.8.4-main.7ace549 → 0.8.4-main.8baae0fced

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/LICENSE +102 -5
  2. package/dist/lib/neutral/PreviewPlugin.mjs +9 -0
  3. package/dist/lib/neutral/PreviewPlugin.mjs.map +7 -0
  4. package/dist/lib/neutral/PreviewPlugin.node.mjs +17 -0
  5. package/dist/lib/neutral/PreviewPlugin.node.mjs.map +7 -0
  6. package/dist/lib/neutral/PreviewPlugin.workerd.mjs +17 -0
  7. package/dist/lib/neutral/PreviewPlugin.workerd.mjs.map +7 -0
  8. package/dist/lib/neutral/capabilities/index.mjs +9 -0
  9. package/dist/lib/neutral/capabilities/index.mjs.map +7 -0
  10. package/dist/lib/neutral/chunk-3SWUVHXJ.mjs +28 -0
  11. package/dist/lib/neutral/chunk-3SWUVHXJ.mjs.map +7 -0
  12. package/dist/lib/{browser/chunk-CEWM5LJG.mjs → neutral/chunk-XD3EYTHF.mjs} +7 -3
  13. package/dist/lib/neutral/chunk-XD3EYTHF.mjs.map +7 -0
  14. package/dist/lib/neutral/index.mjs +7 -0
  15. package/dist/lib/neutral/index.mjs.map +7 -0
  16. package/dist/lib/neutral/meta.json +1 -0
  17. package/dist/lib/neutral/meta.mjs +7 -0
  18. package/dist/lib/neutral/meta.mjs.map +7 -0
  19. package/dist/lib/neutral/plugin.mjs +11 -0
  20. package/dist/lib/neutral/plugin.mjs.map +7 -0
  21. package/dist/lib/neutral/preview-popover-MPPEMUIA.mjs +78 -0
  22. package/dist/lib/neutral/preview-popover-MPPEMUIA.mjs.map +7 -0
  23. package/dist/lib/neutral/react-surface-IPTX6ZBX.mjs +418 -0
  24. package/dist/lib/neutral/react-surface-IPTX6ZBX.mjs.map +7 -0
  25. package/dist/lib/neutral/testing.mjs +7 -0
  26. package/dist/lib/neutral/testing.mjs.map +7 -0
  27. package/dist/lib/neutral/translations.mjs +21 -0
  28. package/dist/lib/neutral/translations.mjs.map +7 -0
  29. package/dist/types/src/PreviewPlugin.d.ts +3 -1
  30. package/dist/types/src/PreviewPlugin.d.ts.map +1 -1
  31. package/dist/types/src/PreviewPlugin.node.d.ts +4 -0
  32. package/dist/types/src/PreviewPlugin.node.d.ts.map +1 -0
  33. package/dist/types/src/PreviewPlugin.test.d.ts +2 -0
  34. package/dist/types/src/PreviewPlugin.test.d.ts.map +1 -0
  35. package/dist/types/src/PreviewPlugin.workerd.d.ts +4 -0
  36. package/dist/types/src/PreviewPlugin.workerd.d.ts.map +1 -0
  37. package/dist/types/src/capabilities/index.d.ts +3 -2
  38. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  39. package/dist/types/src/capabilities/preview-popover.d.ts +3 -2
  40. package/dist/types/src/capabilities/preview-popover.d.ts.map +1 -1
  41. package/dist/types/src/capabilities/react-surface.d.ts +3 -2
  42. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  43. package/dist/types/src/cards/DynamicTypeCard.d.ts +4 -0
  44. package/dist/types/src/cards/DynamicTypeCard.d.ts.map +1 -0
  45. package/dist/types/src/cards/ExpandoCard.d.ts +4 -0
  46. package/dist/types/src/cards/ExpandoCard.d.ts.map +1 -0
  47. package/dist/types/src/cards/FormCard.d.ts +7 -0
  48. package/dist/types/src/cards/FormCard.d.ts.map +1 -0
  49. package/dist/types/src/cards/JsonCard.d.ts +5 -0
  50. package/dist/types/src/cards/JsonCard.d.ts.map +1 -0
  51. package/dist/types/src/cards/OrganizationCard.d.ts +2 -2
  52. package/dist/types/src/cards/OrganizationCard.d.ts.map +1 -1
  53. package/dist/types/src/cards/PersonCard.d.ts +2 -2
  54. package/dist/types/src/cards/PersonCard.d.ts.map +1 -1
  55. package/dist/types/src/cards/ProjectCard.d.ts +3 -3
  56. package/dist/types/src/cards/ProjectCard.d.ts.map +1 -1
  57. package/dist/types/src/cards/TaskCard.d.ts +2 -2
  58. package/dist/types/src/cards/TaskCard.d.ts.map +1 -1
  59. package/dist/types/src/cards/index.d.ts +4 -0
  60. package/dist/types/src/cards/index.d.ts.map +1 -1
  61. package/dist/types/src/index.d.ts +0 -2
  62. package/dist/types/src/index.d.ts.map +1 -1
  63. package/dist/types/src/meta.d.ts +2 -2
  64. package/dist/types/src/meta.d.ts.map +1 -1
  65. package/dist/types/src/plugin.d.ts +3 -0
  66. package/dist/types/src/plugin.d.ts.map +1 -0
  67. package/dist/types/src/stories/Card.stories.d.ts +23 -14
  68. package/dist/types/src/stories/Card.stories.d.ts.map +1 -1
  69. package/dist/types/src/stories/testing.d.ts +15 -12
  70. package/dist/types/src/stories/testing.d.ts.map +1 -1
  71. package/dist/types/src/testing.d.ts +2 -0
  72. package/dist/types/src/testing.d.ts.map +1 -0
  73. package/dist/types/src/translations.d.ts +8 -9
  74. package/dist/types/src/translations.d.ts.map +1 -1
  75. package/dist/types/tsconfig.tsbuildinfo +1 -1
  76. package/package.json +92 -40
  77. package/src/PreviewPlugin.node.ts +16 -0
  78. package/src/PreviewPlugin.test.ts +25 -0
  79. package/src/PreviewPlugin.tsx +16 -25
  80. package/src/PreviewPlugin.workerd.ts +16 -0
  81. package/src/capabilities/index.ts +3 -3
  82. package/src/capabilities/preview-popover.ts +68 -41
  83. package/src/capabilities/react-surface.tsx +138 -143
  84. package/src/cards/DynamicTypeCard.tsx +53 -0
  85. package/src/cards/ExpandoCard.tsx +76 -0
  86. package/src/cards/FormCard.tsx +48 -0
  87. package/src/cards/JsonCard.tsx +19 -0
  88. package/src/cards/OrganizationCard.tsx +11 -16
  89. package/src/cards/PersonCard.tsx +51 -49
  90. package/src/cards/ProjectCard.tsx +9 -11
  91. package/src/cards/TaskCard.tsx +24 -26
  92. package/src/cards/index.ts +4 -0
  93. package/src/index.ts +0 -3
  94. package/src/meta.ts +5 -3
  95. package/src/plugin.ts +9 -0
  96. package/src/stories/Card.stories.tsx +83 -24
  97. package/src/stories/testing.tsx +64 -77
  98. package/src/testing.ts +7 -0
  99. package/src/translations.ts +8 -8
  100. package/dist/lib/browser/chunk-CEWM5LJG.mjs.map +0 -7
  101. package/dist/lib/browser/index.mjs +0 -64
  102. package/dist/lib/browser/index.mjs.map +0 -7
  103. package/dist/lib/browser/meta.json +0 -1
  104. package/dist/lib/browser/preview-popover-4QZ2WDE6.mjs +0 -65
  105. package/dist/lib/browser/preview-popover-4QZ2WDE6.mjs.map +0 -7
  106. package/dist/lib/browser/react-surface-X4KEMECS.mjs +0 -498
  107. package/dist/lib/browser/react-surface-X4KEMECS.mjs.map +0 -7
  108. package/dist/lib/node-esm/chunk-Q5MUNELK.mjs +0 -19
  109. package/dist/lib/node-esm/chunk-Q5MUNELK.mjs.map +0 -7
  110. package/dist/lib/node-esm/index.mjs +0 -65
  111. package/dist/lib/node-esm/index.mjs.map +0 -7
  112. package/dist/lib/node-esm/meta.json +0 -1
  113. package/dist/lib/node-esm/preview-popover-FJ2ARIGS.mjs +0 -67
  114. package/dist/lib/node-esm/preview-popover-FJ2ARIGS.mjs.map +0 -7
  115. package/dist/lib/node-esm/react-surface-DR3UAH6F.mjs +0 -499
  116. package/dist/lib/node-esm/react-surface-DR3UAH6F.mjs.map +0 -7
  117. package/dist/types/src/components/CardComponents.d.ts +0 -16
  118. package/dist/types/src/components/CardComponents.d.ts.map +0 -1
  119. package/dist/types/src/components/CardSubjectMenu.d.ts +0 -8
  120. package/dist/types/src/components/CardSubjectMenu.d.ts.map +0 -1
  121. package/dist/types/src/components/index.d.ts +0 -3
  122. package/dist/types/src/components/index.d.ts.map +0 -1
  123. package/dist/types/src/types.d.ts +0 -12
  124. package/dist/types/src/types.d.ts.map +0 -1
  125. package/src/components/CardComponents.tsx +0 -67
  126. package/src/components/CardSubjectMenu.tsx +0 -103
  127. package/src/components/index.ts +0 -6
  128. package/src/types.ts +0 -25
@@ -4,21 +4,19 @@
4
4
 
5
5
  import React from 'react';
6
6
 
7
+ import { type AppSurface } from '@dxos/app-toolkit/ui';
7
8
  import { Obj } from '@dxos/echo';
8
- import { Card } from '@dxos/react-ui-stack';
9
- import { type Project } from '@dxos/types';
9
+ import { Card } from '@dxos/react-ui';
10
+ import { type Pipeline } from '@dxos/types';
10
11
 
11
- import { CardHeader } from '../components';
12
- import { type CardPreviewProps } from '../types';
13
-
14
- export const ProjectCard = ({ subject, role, activeSpace }: CardPreviewProps<Project.Project>) => {
15
- const { name, image, description } = subject;
12
+ export const ProjectCard = ({ subject }: AppSurface.ObjectCardProps<Pipeline.Pipeline>) => {
13
+ const { image, description } = subject;
16
14
 
17
15
  return (
18
- <Card.SurfaceRoot id={subject.id} role={role}>
16
+ <Card.Content>
19
17
  {image && <Card.Poster image={image} alt={Obj.getLabel(subject) ?? ''} aspect='auto' />}
20
- <CardHeader label={name} subject={subject} activeSpace={activeSpace} />
21
- {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
22
- </Card.SurfaceRoot>
18
+ {/* <CardHeader label={name} subject={subject} db={db} /> */}
19
+ {description && <Card.Text variant='description'>{description}</Card.Text>}
20
+ </Card.Content>
23
21
  );
24
22
  };
@@ -5,42 +5,40 @@
5
5
  import * as SchemaAST from 'effect/SchemaAST';
6
6
  import React from 'react';
7
7
 
8
+ import { type AppSurface } from '@dxos/app-toolkit/ui';
8
9
  import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
9
- import { Card, cardNoSpacing, cardSpacing } from '@dxos/react-ui-stack';
10
- import { mx } from '@dxos/react-ui-theme';
10
+ import { Card } from '@dxos/react-ui';
11
11
  import { Task } from '@dxos/types';
12
12
 
13
- import { CardSubjectMenu } from '../components';
14
- import { type CardPreviewProps } from '../types';
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
+ };
15
31
 
16
32
  // TODO(thure): Should this move upstream as a helper? Is there an easier way to get options?
17
33
  const getActiveStatusOption = (status?: string) => {
18
34
  const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
19
35
  const statusProperty = properties.find((p) => p.name === 'status');
36
+ // TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
20
37
  const statusMeta = SchemaAST.getAnnotation<PropertyMetaAnnotation>(PropertyMetaAnnotationId)(
21
- // TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
22
38
  (statusProperty!.type as any).types[0],
23
39
  );
24
- const options = // TODO(thure): Typescript asserts `statusMeta` doesn’t have `.value`, but in runtime it does.
25
- (statusMeta as any).value.singleSelect.options as { id: string; title: string; color: string }[];
26
- return options.find(({ id }) => id === status);
27
- };
28
40
 
29
- export const TaskCard = ({ subject, role, activeSpace }: CardPreviewProps<Task.Task>) => {
30
- const { title, status } = subject;
31
- const statusOption = getActiveStatusOption(status);
32
-
33
- return (
34
- <Card.SurfaceRoot id={subject.id} role={role}>
35
- <div role='none' className={mx('flex items-center gap-2', cardSpacing)}>
36
- <Card.Heading classNames={[cardNoSpacing, 'min-is-0 flex-1 truncate']}>{title}</Card.Heading>
37
- {statusOption && (
38
- <span className='dx-tag' data-hue={statusOption.color}>
39
- {statusOption.title}
40
- </span>
41
- )}
42
- <CardSubjectMenu subject={subject} activeSpace={activeSpace} />
43
- </div>
44
- </Card.SurfaceRoot>
45
- );
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);
46
44
  };
@@ -2,6 +2,10 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ export * from './DynamicTypeCard';
6
+ export * from './ExpandoCard';
7
+ export * from './FormCard';
8
+ export * from './JsonCard';
5
9
  export * from './OrganizationCard';
6
10
  export * from './PersonCard';
7
11
  export * from './ProjectCard';
package/src/index.ts CHANGED
@@ -3,6 +3,3 @@
3
3
  //
4
4
 
5
5
  export * from './meta';
6
- export type * from './types';
7
-
8
- export * from './PreviewPlugin';
package/src/meta.ts CHANGED
@@ -2,16 +2,18 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { type Plugin } from '@dxos/app-framework';
6
6
  import { trim } from '@dxos/util';
7
7
 
8
- export const meta: PluginMeta = {
9
- id: 'dxos.org/plugin/preview',
8
+ export const meta: Plugin.Meta = {
9
+ id: 'org.dxos.plugin.preview',
10
10
  name: 'Preview',
11
+ author: 'DXOS',
11
12
  description: trim`
12
13
  Rich preview panel for viewing object content without opening full editors.
13
14
  Quick peek at documents, images, and data with inline rendering.
14
15
  `,
15
16
  icon: 'ph--eye--regular',
16
17
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',
18
+ tags: ['system'],
17
19
  };
package/src/plugin.ts ADDED
@@ -0,0 +1,9 @@
1
+ //
2
+ // Copyright 2023 DXOS.org
3
+ //
4
+
5
+ import { Plugin } from '@dxos/app-framework';
6
+
7
+ import { meta } from './meta';
8
+
9
+ export const PreviewPlugin = Plugin.lazy(meta, () => import('#plugin'));
@@ -3,60 +3,119 @@
3
3
  //
4
4
 
5
5
  import { type Meta, type StoryObj } from '@storybook/react-vite';
6
+ import React from 'react';
6
7
 
7
- import { IntentPlugin } from '@dxos/app-framework';
8
8
  import { withPluginManager } from '@dxos/app-framework/testing';
9
- import { faker } from '@dxos/random';
10
- import { withTheme } from '@dxos/react-ui/testing';
9
+ import { corePlugins } from '@dxos/plugin-testing';
10
+ import { random } from '@dxos/random';
11
+ import { Card } from '@dxos/react-ui';
12
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
13
+ import { type Expando } from '@dxos/schema';
14
+ import { type Organization, type Person, type Pipeline, type Task } from '@dxos/types';
11
15
 
12
- import { translations } from '../translations';
16
+ import { translations } from '#translations';
13
17
 
14
- import { Defaultstory, createCards } from './testing';
18
+ import { ExpandoCard, FormCard, JsonCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
19
+ import { DefaultStory, createExpando, createOrganization, createPerson, createProject, createTask } from './testing';
15
20
 
16
- faker.seed(999);
21
+ random.seed(999);
17
22
 
18
23
  const meta = {
19
- title: 'plugins/plugin-preview/Card',
20
- render: Defaultstory,
24
+ title: 'plugins/plugin-preview/cards/Card',
25
+ render: DefaultStory,
21
26
  decorators: [
22
- withTheme,
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' }),
23
33
  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
24
- withPluginManager({ plugins: [IntentPlugin()] }),
34
+ withPluginManager({ plugins: corePlugins() }),
25
35
  ],
26
36
  parameters: {
37
+ layout: 'fullscreen',
27
38
  translations,
28
39
  },
29
40
  tags: ['cards'],
30
- } satisfies Meta<typeof Defaultstory>;
41
+ } satisfies Meta<typeof DefaultStory>;
31
42
 
32
43
  export default meta;
33
44
 
34
- type Story = StoryObj<typeof meta>;
45
+ export const _Form: StoryObj<typeof DefaultStory<Person.Person>> = {
46
+ args: {
47
+ Component: FormCard,
48
+ createObject: createPerson,
49
+ image: true,
50
+ },
51
+ };
35
52
 
36
- export const Popover: Story = {
53
+ export const _Person: StoryObj<typeof DefaultStory<Person.Person>> = {
37
54
  args: {
38
- role: 'card--popover',
39
- cards: createCards(),
55
+ Component: PersonCard,
56
+ createObject: createPerson,
57
+ image: true,
40
58
  },
41
59
  };
42
60
 
43
- export const Intrinsic: Story = {
61
+ export const _Organization: StoryObj<typeof DefaultStory<Organization.Organization>> = {
44
62
  args: {
45
- role: 'card--intrinsic',
46
- cards: createCards(),
63
+ Component: OrganizationCard,
64
+ createObject: createOrganization,
65
+ image: true,
47
66
  },
48
67
  };
49
68
 
50
- export const Extrinsic: Story = {
69
+ export const _Project: StoryObj<typeof DefaultStory<Pipeline.Pipeline>> = {
51
70
  args: {
52
- role: 'card--extrinsic',
53
- cards: createCards(),
71
+ Component: ProjectCard,
72
+ createObject: createProject,
73
+ image: true,
54
74
  },
55
75
  };
56
76
 
57
- export const ExtrinsicNoImage: Story = {
77
+ export const _Task: StoryObj<typeof DefaultStory<Task.Task>> = {
58
78
  args: {
59
- role: 'card--extrinsic',
60
- cards: createCards(false),
79
+ Component: TaskCard,
80
+ createObject: createTask,
81
+ image: true,
82
+ },
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
+ );
61
120
  },
62
121
  };
@@ -2,113 +2,100 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import React, { type FC } from 'react';
5
+ import React, { type FC, useMemo } from 'react';
6
6
 
7
+ import { type AppSurface } from '@dxos/app-toolkit/ui';
7
8
  import { Obj, Ref } from '@dxos/echo';
8
- import { faker } from '@dxos/random';
9
- import { CardContainer } from '@dxos/react-ui-stack/testing';
10
- import { Organization, Person, Task } from '@dxos/types';
11
- import { Project } from '@dxos/types';
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';
12
14
 
13
- import { OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
14
- import { type CardPreviewProps } from '../types';
15
-
16
- type CardProps<T extends Obj.Any> = {
17
- Component: FC<CardPreviewProps<T>>;
18
- subject: T;
19
- icon?: string;
15
+ export type DefaultStoryProps<T extends Obj.Any> = {
16
+ Component: FC<AppSurface.ObjectCardProps<T>>;
17
+ createObject: () => T;
20
18
  image?: boolean;
21
19
  };
22
20
 
23
- export type DefaultstoryProps = {
24
- role: 'card--popover' | 'card--intrinsic' | 'card--extrinsic' | 'card--transclusion';
25
- cards: CardProps<any>[];
26
- };
21
+ export const DefaultStory = <T extends Obj.Any>({ Component, createObject, image }: DefaultStoryProps<T>) => {
22
+ const object = useMemo(() => createObject(), [createObject]);
23
+ const roles: CardContainerProps['role'][] = ['intrinsic', 'popover'];
27
24
 
28
- export const Defaultstory = ({ role, cards }: DefaultstoryProps) => {
29
25
  return (
30
- <div className='flex bs-full'>
31
- <div className='flex shrink-0 gap-8 overflow-x-auto pbe-4'>
32
- {cards.map(({ Component, icon, image, subject }, i) => (
33
- <div key={i} className='flex is-[24rem] justify-center'>
34
- <CardContainer icon={icon} role={role}>
35
- <Component role={role} subject={image ? subject : omitImage(subject)} />
26
+ <div className='h-full w-full grid grid-cols-2 py-16 gap-8'>
27
+ {roles.map((role, i) => (
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
+ <CardContainer role={role}>
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)} />
39
+ </Card.Root>
36
40
  </CardContainer>
37
41
  </div>
38
- ))}
39
- </div>
42
+ </div>
43
+ ))}
40
44
  </div>
41
45
  );
42
46
  };
43
47
 
44
48
  export const omitImage = ({ image: _, ...rest }: any) => rest;
45
49
 
46
- // TODO(burdon): Test data should exercise the standard data generators.
47
- export const createCards = (image = true): CardProps<any>[] => {
48
- const organization = Obj.make(Organization.Organization, {
49
- name: faker.company.name(),
50
+ /**
51
+ * Factory functions for creating test objects at render time.
52
+ */
53
+ export const createOrganization = (): Organization.Organization => {
54
+ return Obj.make(Organization.Organization, {
55
+ name: random.company.name(),
50
56
  image:
51
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',
52
- website: faker.internet.url(),
53
- description: faker.lorem.paragraph(),
58
+ website: random.internet.url(),
59
+ description: random.lorem.paragraph(),
54
60
  });
61
+ };
55
62
 
56
- const contact = Obj.make(Person.Person, {
57
- fullName: faker.person.fullName(),
63
+ export const createPerson = (): Person.Person => {
64
+ const organization = createOrganization();
65
+ return Obj.make(Person.Person, {
66
+ fullName: random.person.fullName(),
58
67
  image:
59
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',
60
69
  organization: Ref.make(organization),
61
70
  emails: [
62
- {
63
- label: 'Work',
64
- value: faker.internet.email(),
65
- },
66
- {
67
- label: 'Work',
68
- value: faker.internet.email(),
69
- },
70
- {
71
- label: 'Work',
72
- value: faker.internet.email(),
73
- },
71
+ { label: 'Work', value: random.internet.email() },
72
+ { label: 'Work', value: random.internet.email() },
73
+ { label: 'Work', value: random.internet.email() },
74
74
  ],
75
75
  });
76
+ };
76
77
 
77
- const project = Project.make({
78
- name: faker.person.fullName(),
78
+ export const createProject = (): Pipeline.Pipeline => {
79
+ return Obj.make(Pipeline.Pipeline, {
80
+ name: random.person.fullName(),
79
81
  image: 'https://dxos.network/dxos-logotype-blue.png',
80
- description: faker.lorem.paragraph(),
82
+ description: random.lorem.paragraph(),
83
+ columns: [],
81
84
  });
85
+ };
82
86
 
83
- const task = Obj.make(Task.Task, {
84
- title: faker.lorem.sentence(),
85
- status: faker.helpers.arrayElement(['todo', 'in-progress', 'done']),
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),
86
91
  });
92
+ };
87
93
 
88
- return [
89
- {
90
- Component: OrganizationCard,
91
- subject: organization,
92
- icon: 'ph--building-office--regular',
93
- image,
94
- },
95
- {
96
- Component: PersonCard,
97
- subject: contact,
98
- icon: 'ph--user--regular',
99
- image,
100
- },
101
- {
102
- Component: ProjectCard,
103
- subject: project,
104
- icon: 'ph--building--regular',
105
- image,
106
- },
107
- {
108
- Component: TaskCard,
109
- subject: task,
110
- icon: 'ph--list-checks--regular',
111
- image,
112
- },
113
- ];
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(),
100
+ });
114
101
  };
package/src/testing.ts ADDED
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ // Eager re-export of `PreviewPlugin`. See `@dxos/plugin-testing/src/core.ts`
6
+ // for the rationale.
7
+ export * from './PreviewPlugin';
@@ -4,19 +4,19 @@
4
4
 
5
5
  import { type Resource } from '@dxos/react-ui';
6
6
 
7
- import { meta } from './meta';
7
+ import { meta } from '#meta';
8
8
 
9
9
  export const translations = [
10
10
  {
11
11
  'en-US': {
12
12
  [meta.id]: {
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',
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,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';\nimport { trim } from '@dxos/util';\n\nexport const meta: PluginMeta = {\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,OAAmB;EAC9BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;EACNC,QAAQ;AACV;",
6
- "names": ["trim", "meta", "id", "name", "description", "trim", "icon", "source"]
7
- }
@@ -1,64 +0,0 @@
1
- import {
2
- meta
3
- } from "./chunk-CEWM5LJG.mjs";
4
-
5
- // src/PreviewPlugin.tsx
6
- import { Capabilities, Events, contributes, defineModule, definePlugin } from "@dxos/app-framework";
7
- import { ClientCapabilities, ClientEvents } from "@dxos/plugin-client";
8
- import { Organization, Person } from "@dxos/types";
9
-
10
- // src/capabilities/index.ts
11
- import { lazy } from "@dxos/app-framework";
12
- var PreviewPopover = lazy(() => import("./preview-popover-4QZ2WDE6.mjs"));
13
- var ReactSurface = lazy(() => import("./react-surface-X4KEMECS.mjs"));
14
-
15
- // src/translations.ts
16
- var translations = [
17
- {
18
- "en-US": {
19
- [meta.id]: {
20
- "unable to create preview message": "No preview",
21
- "todo label": "To do",
22
- "in-progress label": "In progress",
23
- "done label": "Done",
24
- "open object label": "Open",
25
- "add object to space label": "Add to space",
26
- "more options label": "More options"
27
- }
28
- }
29
- }
30
- ];
31
-
32
- // src/PreviewPlugin.tsx
33
- var PreviewPlugin = definePlugin(meta, () => [
34
- defineModule({
35
- id: `${meta.id}/module/translations`,
36
- activatesOn: Events.SetupTranslations,
37
- activate: () => contributes(Capabilities.Translations, translations)
38
- }),
39
- defineModule({
40
- id: `${meta.id}/module/schema`,
41
- activatesOn: ClientEvents.SetupSchema,
42
- activate: () => [
43
- contributes(ClientCapabilities.Schema, [
44
- Person.Person,
45
- Organization.Organization
46
- ])
47
- ]
48
- }),
49
- defineModule({
50
- id: `${meta.id}/module/preview-popover`,
51
- activatesOn: Events.Startup,
52
- activate: PreviewPopover
53
- }),
54
- defineModule({
55
- id: `${meta.id}/module/react-surface`,
56
- activatesOn: Events.SetupReactSurface,
57
- activate: ReactSurface
58
- })
59
- ]);
60
- export {
61
- PreviewPlugin,
62
- meta
63
- };
64
- //# sourceMappingURL=index.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/PreviewPlugin.tsx", "../../../src/capabilities/index.ts", "../../../src/translations.ts"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';\nimport { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';\nimport { Organization, Person } from '@dxos/types';\n\nimport { PreviewPopover, ReactSurface } from './capabilities';\nimport { meta } from './meta';\nimport { translations } from './translations';\n\nexport const PreviewPlugin = definePlugin(meta, () => [\n defineModule({\n id: `${meta.id}/module/translations`,\n activatesOn: Events.SetupTranslations,\n activate: () => contributes(Capabilities.Translations, translations),\n }),\n defineModule({\n id: `${meta.id}/module/schema`,\n activatesOn: ClientEvents.SetupSchema,\n activate: () => [contributes(ClientCapabilities.Schema, [Person.Person, Organization.Organization])],\n }),\n defineModule({\n id: `${meta.id}/module/preview-popover`,\n activatesOn: Events.Startup,\n activate: PreviewPopover,\n }),\n defineModule({\n id: `${meta.id}/module/react-surface`,\n activatesOn: Events.SetupReactSurface,\n activate: ReactSurface,\n }),\n]);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { lazy } from '@dxos/app-framework';\n\nexport const PreviewPopover = lazy(() => import('./preview-popover'));\nexport const ReactSurface = lazy(() => import('./react-surface'));\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nimport { meta } from './meta';\n\nexport const translations = [\n {\n 'en-US': {\n [meta.id]: {\n 'unable to create preview message': 'No preview',\n 'todo label': 'To do',\n 'in-progress label': 'In progress',\n 'done label': 'Done',\n 'open object label': 'Open',\n 'add object to space label': 'Add to space',\n 'more options label': 'More options',\n },\n },\n },\n] as const satisfies Resource[];\n"],
5
- "mappings": ";;;;;AAIA,SAASA,cAAcC,QAAQC,aAAaC,cAAcC,oBAAoB;AAC9E,SAASC,oBAAoBC,oBAAoB;AACjD,SAASC,cAAcC,cAAc;;;ACFrC,SAASC,YAAY;AAEd,IAAMC,iBAAiBC,KAAK,MAAM,OAAO,gCAAA,CAAA;AACzC,IAAMC,eAAeD,KAAK,MAAM,OAAO,8BAAA,CAAA;;;ACCvC,IAAME,eAAe;EAC1B;IACE,SAAS;MACP,CAACC,KAAKC,EAAE,GAAG;QACT,oCAAoC;QACpC,cAAc;QACd,qBAAqB;QACrB,cAAc;QACd,qBAAqB;QACrB,6BAA6B;QAC7B,sBAAsB;MACxB;IACF;EACF;;;;AFTK,IAAMC,gBAAgBC,aAAaC,MAAM,MAAM;EACpDC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,UAAU,MAAMC,YAAYC,aAAaC,cAAcC,YAAAA;EACzD,CAAA;EACAT,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaQ,aAAaC;IAC1BN,UAAU,MAAM;MAACC,YAAYM,mBAAmBC,QAAQ;QAACC,OAAOA;QAAQC,aAAaA;OAAa;;EACpG,CAAA;EACAf,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOa;IACpBX,UAAUY;EACZ,CAAA;EACAjB,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOe;IACpBb,UAAUc;EACZ,CAAA;CACD;",
6
- "names": ["Capabilities", "Events", "contributes", "defineModule", "definePlugin", "ClientCapabilities", "ClientEvents", "Organization", "Person", "lazy", "PreviewPopover", "lazy", "ReactSurface", "translations", "meta", "id", "PreviewPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "SetupTranslations", "activate", "contributes", "Capabilities", "Translations", "translations", "ClientEvents", "SetupSchema", "ClientCapabilities", "Schema", "Person", "Organization", "Startup", "PreviewPopover", "SetupReactSurface", "ReactSurface"]
7
- }