@dxos/plugin-preview 0.8.4-main.fd6878d → 0.9.0

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 (129) 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/neutral/chunk-QOM5APM7.mjs +23 -0
  13. package/dist/lib/neutral/chunk-QOM5APM7.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-FLMYMFCH.mjs +94 -0
  22. package/dist/lib/neutral/preview-popover-FLMYMFCH.mjs.map +7 -0
  23. package/dist/lib/neutral/react-surface-FE7E2JP7.mjs +418 -0
  24. package/dist/lib/neutral/react-surface-FE7E2JP7.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/ExpandoCard.d.ts +4 -0
  44. package/dist/types/src/cards/ExpandoCard.d.ts.map +1 -0
  45. package/dist/types/src/cards/FormCard.d.ts +17 -0
  46. package/dist/types/src/cards/FormCard.d.ts.map +1 -0
  47. package/dist/types/src/cards/JsonCard.d.ts +5 -0
  48. package/dist/types/src/cards/JsonCard.d.ts.map +1 -0
  49. package/dist/types/src/cards/OrganizationCard.d.ts +5 -0
  50. package/dist/types/src/cards/OrganizationCard.d.ts.map +1 -0
  51. package/dist/types/src/cards/PersonCard.d.ts +5 -0
  52. package/dist/types/src/cards/PersonCard.d.ts.map +1 -0
  53. package/dist/types/src/cards/ProjectCard.d.ts +5 -0
  54. package/dist/types/src/cards/ProjectCard.d.ts.map +1 -0
  55. package/dist/types/src/cards/TaskCard.d.ts +5 -0
  56. package/dist/types/src/cards/TaskCard.d.ts.map +1 -0
  57. package/dist/types/src/cards/index.d.ts +8 -0
  58. package/dist/types/src/cards/index.d.ts.map +1 -0
  59. package/dist/types/src/index.d.ts +0 -2
  60. package/dist/types/src/index.d.ts.map +1 -1
  61. package/dist/types/src/meta.d.ts +2 -3
  62. package/dist/types/src/meta.d.ts.map +1 -1
  63. package/dist/types/src/plugin.d.ts +3 -0
  64. package/dist/types/src/plugin.d.ts.map +1 -0
  65. package/dist/types/src/stories/Card.stories.d.ts +54 -46
  66. package/dist/types/src/stories/Card.stories.d.ts.map +1 -1
  67. package/dist/types/src/stories/testing.d.ts +53 -13
  68. package/dist/types/src/stories/testing.d.ts.map +1 -1
  69. package/dist/types/src/testing.d.ts +2 -0
  70. package/dist/types/src/testing.d.ts.map +1 -0
  71. package/dist/types/src/translations.d.ts +8 -3
  72. package/dist/types/src/translations.d.ts.map +1 -1
  73. package/dist/types/tsconfig.tsbuildinfo +1 -1
  74. package/package.json +80 -36
  75. package/src/PreviewPlugin.node.ts +16 -0
  76. package/src/PreviewPlugin.test.ts +25 -0
  77. package/src/PreviewPlugin.tsx +19 -29
  78. package/src/PreviewPlugin.workerd.ts +16 -0
  79. package/src/capabilities/index.ts +3 -3
  80. package/src/capabilities/preview-popover.ts +96 -49
  81. package/src/capabilities/react-surface.tsx +139 -150
  82. package/src/cards/ExpandoCard.tsx +76 -0
  83. package/src/cards/FormCard.tsx +125 -0
  84. package/src/cards/JsonCard.tsx +19 -0
  85. package/src/cards/OrganizationCard.tsx +29 -0
  86. package/src/cards/PersonCard.tsx +65 -0
  87. package/src/cards/ProjectCard.tsx +22 -0
  88. package/src/cards/TaskCard.tsx +45 -0
  89. package/src/cards/index.ts +11 -0
  90. package/src/index.ts +0 -3
  91. package/src/meta.ts +12 -6
  92. package/src/plugin.ts +9 -0
  93. package/src/stories/Card.stories.tsx +152 -28
  94. package/src/stories/testing.tsx +119 -69
  95. package/src/testing.ts +7 -0
  96. package/src/translations.ts +8 -2
  97. package/dist/lib/browser/chunk-Z73ENKLE.mjs +0 -14
  98. package/dist/lib/browser/chunk-Z73ENKLE.mjs.map +0 -7
  99. package/dist/lib/browser/index.mjs +0 -60
  100. package/dist/lib/browser/index.mjs.map +0 -7
  101. package/dist/lib/browser/meta.json +0 -1
  102. package/dist/lib/browser/preview-popover-MAIBTJKJ.mjs +0 -69
  103. package/dist/lib/browser/preview-popover-MAIBTJKJ.mjs.map +0 -7
  104. package/dist/lib/browser/react-surface-SC522FSX.mjs +0 -303
  105. package/dist/lib/browser/react-surface-SC522FSX.mjs.map +0 -7
  106. package/dist/lib/node-esm/chunk-2ORSL4GJ.mjs +0 -16
  107. package/dist/lib/node-esm/chunk-2ORSL4GJ.mjs.map +0 -7
  108. package/dist/lib/node-esm/index.mjs +0 -61
  109. package/dist/lib/node-esm/index.mjs.map +0 -7
  110. package/dist/lib/node-esm/meta.json +0 -1
  111. package/dist/lib/node-esm/preview-popover-LZGHYW23.mjs +0 -71
  112. package/dist/lib/node-esm/preview-popover-LZGHYW23.mjs.map +0 -7
  113. package/dist/lib/node-esm/react-surface-PDXF35OF.mjs +0 -304
  114. package/dist/lib/node-esm/react-surface-PDXF35OF.mjs.map +0 -7
  115. package/dist/types/src/components/ContactCard.d.ts +0 -7
  116. package/dist/types/src/components/ContactCard.d.ts.map +0 -1
  117. package/dist/types/src/components/OrganizationCard.d.ts +0 -5
  118. package/dist/types/src/components/OrganizationCard.d.ts.map +0 -1
  119. package/dist/types/src/components/ProjectCard.d.ts +0 -5
  120. package/dist/types/src/components/ProjectCard.d.ts.map +0 -1
  121. package/dist/types/src/components/index.d.ts +0 -4
  122. package/dist/types/src/components/index.d.ts.map +0 -1
  123. package/dist/types/src/types.d.ts +0 -7
  124. package/dist/types/src/types.d.ts.map +0 -1
  125. package/src/components/ContactCard.tsx +0 -72
  126. package/src/components/OrganizationCard.tsx +0 -41
  127. package/src/components/ProjectCard.tsx +0 -20
  128. package/src/components/index.ts +0 -7
  129. package/src/types.ts +0 -11
@@ -0,0 +1,45 @@
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 } from '@dxos/echo';
10
+ import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
11
+ import { Card } from '@dxos/react-ui';
12
+ import { Task } from '@dxos/types';
13
+
14
+ export const TaskCard = ({ subject }: AppSurface.ObjectCardProps<Task.Task>) => {
15
+ const { title, status } = subject;
16
+ const statusOption = getActiveStatusOption(status);
17
+
18
+ return (
19
+ <Card.Body>
20
+ <Card.Row>
21
+ {statusOption && (
22
+ <div>
23
+ <span className='dx-tag' data-hue={statusOption.color}>
24
+ {statusOption.title}
25
+ </span>
26
+ </div>
27
+ )}
28
+ </Card.Row>
29
+ </Card.Body>
30
+ );
31
+ };
32
+
33
+ // TODO(thure): Should this move upstream as a helper? Is there an easier way to get options?
34
+ const getActiveStatusOption = (status?: string) => {
35
+ const properties = SchemaAST.getPropertySignatures(Type.getSchema(Task.Task).ast);
36
+ const statusProperty = properties.find((p) => p.name === 'status');
37
+ // TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
38
+ const statusMeta = SchemaAST.getAnnotation<PropertyMetaAnnotation>(PropertyMetaAnnotationId)(
39
+ (statusProperty!.type as any).types[0],
40
+ );
41
+
42
+ // TODO(thure): Typescript asserts `statusMeta` doesn’t have `.value`, but in runtime it does.
43
+ const options = (statusMeta as any).value.singleSelect.options as { id: string; title: string; color: string }[];
44
+ return options.find(({ id }) => id === status);
45
+ };
@@ -0,0 +1,11 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ export * from './ExpandoCard';
6
+ export * from './FormCard';
7
+ export * from './JsonCard';
8
+ export * from './OrganizationCard';
9
+ export * from './PersonCard';
10
+ export * from './ProjectCard';
11
+ export * from './TaskCard';
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,13 +2,19 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { Plugin } from '@dxos/app-framework';
6
+ import { DXN } from '@dxos/keys';
7
+ import { trim } from '@dxos/util';
6
8
 
7
- export const PREVIEW_PLUGIN = 'dxos.org/plugin/preview';
8
-
9
- export const meta: PluginMeta = {
10
- id: PREVIEW_PLUGIN,
9
+ export const meta = Plugin.makeMeta({
10
+ key: DXN.make('org.dxos.plugin.preview'),
11
11
  name: 'Preview',
12
+ author: 'DXOS',
13
+ description: trim`
14
+ Rich preview panel for viewing object content without opening full editors.
15
+ Quick peek at documents, images, and data with inline rendering.
16
+ `,
12
17
  icon: 'ph--eye--regular',
13
18
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',
14
- };
19
+ tags: ['system'],
20
+ });
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'));
@@ -2,52 +2,176 @@
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';
7
+
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, 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';
8
15
 
9
- import { withLayout, withTheme } from '@dxos/storybook-utils';
16
+ import { translations } from '#translations';
10
17
 
11
- import { translations } from '../translations';
18
+ import { ExpandoCard, FormCard, JsonCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
19
+ import {
20
+ DefaultStory,
21
+ createExpando,
22
+ createOrganization,
23
+ createPerson,
24
+ createPersonEmpty,
25
+ createProject,
26
+ createTableEmpty,
27
+ createTask,
28
+ createUnknown,
29
+ } from './testing';
12
30
 
13
- import { Defaultstory, type DefaultstoryProps, createCards } from './testing';
31
+ random.seed(999);
14
32
 
15
- const meta: Meta<DefaultstoryProps> = {
16
- title: 'plugins/plugin-preview/Card',
17
- render: Defaultstory,
18
- decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'flex flex-col justify-center' })],
19
- parameters: { translations },
33
+ const meta = {
34
+ title: 'plugins/plugin-preview/cards/Card',
35
+ render: DefaultStory,
36
+ decorators: [
37
+ // `Card` and its descendants in `@dxos/react-ui` consume `ThemeContext`
38
+ // for tx-token resolution; without this the stories trip the surface's
39
+ // `ErrorBoundary` with "Missing ThemeContext" and the storybook test
40
+ // assert-no-error fails.
41
+ withTheme(),
42
+ withLayout({ layout: 'fullscreen' }),
43
+ // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
44
+ withPluginManager({ plugins: corePlugins() }),
45
+ ],
46
+ parameters: {
47
+ layout: 'fullscreen',
48
+ translations,
49
+ },
20
50
  tags: ['cards'],
21
- };
51
+ } satisfies Meta<typeof DefaultStory>;
22
52
 
23
53
  export default meta;
24
54
 
25
- type Story = StoryObj<DefaultstoryProps>;
55
+ export const _Form: StoryObj<typeof DefaultStory<Person.Person>> = {
56
+ args: {
57
+ Component: FormCard,
58
+ createObject: createPerson,
59
+ image: true,
60
+ },
61
+ };
62
+
63
+ export const _FormEditable: StoryObj<typeof DefaultStory<Person.Person>> = {
64
+ args: {
65
+ Component: FormCard,
66
+ createObject: createPerson,
67
+ image: true,
68
+ componentProps: { readonly: false, layout: 'full' },
69
+ },
70
+ };
71
+
72
+ /**
73
+ * Empty-state variant: the subject has no resolvable schema so `FormCard` renders
74
+ * `<Card.Body><Card.Row><Card.Text variant='description'>No preview</Card.Text></Card.Row></Card.Body>`.
75
+ * Use this story to verify the empty message lands in the card's center column.
76
+ */
77
+ export const _FormEmpty: StoryObj<typeof DefaultStory> = {
78
+ args: {
79
+ Component: FormCard,
80
+ createObject: createUnknown,
81
+ },
82
+ };
26
83
 
27
- export const Popover = {
84
+ /**
85
+ * No-values variant: the subject has a valid schema (Person) but no populated
86
+ * fields, so `FormCard` falls through to the same empty state instead of
87
+ * rendering an empty scrollarea.
88
+ */
89
+ export const _FormNoValues: StoryObj<typeof DefaultStory<Person.Person>> = {
28
90
  args: {
29
- role: 'card--popover',
30
- cards: createCards(),
91
+ Component: FormCard,
92
+ createObject: createPersonEmpty,
31
93
  },
32
- } satisfies Story;
94
+ };
33
95
 
34
- export const Intrinsic = {
96
+ /**
97
+ * Table-like variant: the subject has values only in form-hidden fields
98
+ * (`view`, `sizes` annotated `FormInputAnnotation.set(false)`). `FormCard`
99
+ * must consult the schema's form-input annotations — not just `Object.keys` —
100
+ * to recognize this case and fall through to the empty state.
101
+ */
102
+ export const _FormTableEmpty: StoryObj<typeof DefaultStory<any>> = {
35
103
  args: {
36
- role: 'card--intrinsic',
37
- cards: createCards(),
104
+ Component: FormCard,
105
+ createObject: createTableEmpty,
38
106
  },
39
- } satisfies Story;
107
+ };
40
108
 
41
- export const Extrinsic = {
109
+ export const _Person: StoryObj<typeof DefaultStory<Person.Person>> = {
42
110
  args: {
43
- role: 'card--extrinsic',
44
- cards: createCards(),
111
+ Component: PersonCard,
112
+ createObject: createPerson,
113
+ image: true,
45
114
  },
46
- } satisfies Story;
115
+ };
47
116
 
48
- export const ExtrinsicNoImage = {
117
+ export const _Organization: StoryObj<typeof DefaultStory<Organization.Organization>> = {
49
118
  args: {
50
- role: 'card--extrinsic',
51
- cards: createCards(false),
119
+ Component: OrganizationCard,
120
+ createObject: createOrganization,
121
+ image: true,
52
122
  },
53
- } satisfies Story;
123
+ };
124
+
125
+ export const _Project: StoryObj<typeof DefaultStory<Pipeline.Pipeline>> = {
126
+ args: {
127
+ Component: ProjectCard,
128
+ createObject: createProject,
129
+ image: true,
130
+ },
131
+ };
132
+
133
+ export const _Task: StoryObj<typeof DefaultStory<Task.Task>> = {
134
+ args: {
135
+ Component: TaskCard,
136
+ createObject: createTask,
137
+ image: true,
138
+ },
139
+ };
140
+
141
+ export const _Expando: StoryObj<typeof DefaultStory<Expando.Expando>> = {
142
+ args: {
143
+ Component: ExpandoCard,
144
+ createObject: createExpando,
145
+ },
146
+ };
147
+
148
+ export const _Json = {
149
+ render: () => {
150
+ const data = {
151
+ subject: {
152
+ id: random.string.uuid(),
153
+ name: random.person.fullName(),
154
+ email: random.internet.email(),
155
+ tags: [random.lorem.word(), random.lorem.word(), random.lorem.word()],
156
+ nested: {
157
+ count: random.number.int({ max: 100 }),
158
+ active: random.datatype.boolean(),
159
+ },
160
+ },
161
+ };
162
+
163
+ return (
164
+ <div className='flex justify-center p-16'>
165
+ <div className='dx-card-min-width dx-card-max-width'>
166
+ <Card.Root>
167
+ <Card.Header>
168
+ <Card.IconBlock />
169
+ <Card.Title>JSON</Card.Title>
170
+ </Card.Header>
171
+ <JsonCard data={data} />
172
+ </Card.Root>
173
+ </div>
174
+ </div>
175
+ );
176
+ },
177
+ };
@@ -2,39 +2,55 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import type { Meta } from '@storybook/react-vite';
6
- import React, { type FC } from 'react';
5
+ import * as Schema from 'effect/Schema';
6
+ import React, { type FC, useMemo } from 'react';
7
7
 
8
- import { Obj, Ref } from '@dxos/echo';
9
- import { faker } from '@dxos/random';
10
- import { CardContainer } from '@dxos/react-ui-stack/testing';
11
- import { DataType } from '@dxos/schema';
8
+ import { type AppSurface } from '@dxos/app-toolkit/ui';
9
+ import { DXN, Obj, Ref, Type } from '@dxos/echo';
10
+ import { Annotation } from '@dxos/echo';
11
+ import { random } from '@dxos/random';
12
+ import { Card } from '@dxos/react-ui';
13
+ import { CardContainer, type CardContainerProps } from '@dxos/react-ui-mosaic/testing';
14
+ import { Expando } from '@dxos/schema';
15
+ import { Organization, Person, Pipeline, Task } from '@dxos/types';
12
16
 
13
- import { ContactCard, OrganizationCard, ProjectCard } from '../components';
14
- import { type PreviewProps } from '../types';
15
-
16
- faker.seed(1234);
17
-
18
- type CardProps<T extends object> = {
19
- Component: FC<PreviewProps<T>>;
20
- subject: T;
21
- icon?: string;
17
+ export type DefaultStoryProps<T extends Obj.Any, P extends {} = {}> = {
18
+ Component: FC<AppSurface.ObjectCardProps<T> & P>;
19
+ createObject: () => T;
22
20
  image?: boolean;
21
+ componentProps?: P;
23
22
  };
24
23
 
25
- export type DefaultstoryProps = {
26
- role: 'card--popover' | 'card--intrinsic' | 'card--extrinsic' | 'card--transclusion';
27
- cards: CardProps<any>[];
28
- };
24
+ export const DefaultStory = <T extends Obj.Any, P extends {} = {}>({
25
+ Component,
26
+ createObject,
27
+ image,
28
+ componentProps,
29
+ }: DefaultStoryProps<T, P>) => {
30
+ const object = useMemo(() => createObject(), [createObject]);
31
+ const roles: CardContainerProps['role'][] = ['intrinsic', 'popover'];
29
32
 
30
- export const Defaultstory: Meta<DefaultstoryProps>['render'] = ({ role, cards }) => {
31
33
  return (
32
- <div className='grid grid-cols-3'>
33
- {cards.map(({ Component, icon, image, subject }, i) => (
34
- <div key={i} className='flex justify-center'>
35
- <CardContainer icon={icon} role={role}>
36
- <Component role={role} subject={image ? subject : omitImage(subject)} />
37
- </CardContainer>
34
+ <div className='h-full w-full grid grid-cols-2 py-16 gap-8'>
35
+ {roles.map((role, i) => (
36
+ <div key={i} className='flex h-full justify-center overflow-hidden'>
37
+ <div className='flex flex-col gap-4 w-full items-center'>
38
+ <span className='text-sm text-description'>{role}</span>
39
+ <CardContainer role={role}>
40
+ <Card.Root border={false}>
41
+ <Card.Header>
42
+ <Card.DragHandle />
43
+ <Card.Title>{Obj.getLabel(object)}</Card.Title>
44
+ <Card.Menu />
45
+ </Card.Header>
46
+ <Component
47
+ role={role ?? 'card--content'}
48
+ subject={image ? object : omitImage(object)}
49
+ {...(componentProps ?? ({} as P))}
50
+ />
51
+ </Card.Root>
52
+ </CardContainer>
53
+ </div>
38
54
  </div>
39
55
  ))}
40
56
  </div>
@@ -43,61 +59,95 @@ export const Defaultstory: Meta<DefaultstoryProps>['render'] = ({ role, cards })
43
59
 
44
60
  export const omitImage = ({ image: _, ...rest }: any) => rest;
45
61
 
46
- // TODO(burdon): Test data should exercise the standard data generators.
47
- export const createCards = (image = true): CardProps<any>[] => {
48
- const organization = Obj.make(DataType.Organization, {
49
- name: faker.company.name(),
62
+ /**
63
+ * Factory functions for creating test objects at render time.
64
+ */
65
+ export const createOrganization = (): Organization.Organization => {
66
+ return Obj.make(Organization.Organization, {
67
+ name: random.company.name(),
50
68
  image:
51
69
  '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(),
70
+ website: random.internet.url(),
71
+ description: random.lorem.paragraph(),
54
72
  });
73
+ };
55
74
 
56
- const contact = Obj.make(DataType.Person, {
57
- fullName: faker.person.fullName(),
75
+ export const createPerson = (): Person.Person => {
76
+ const organization = createOrganization();
77
+ return Obj.make(Person.Person, {
78
+ fullName: random.person.fullName(),
58
79
  image:
59
80
  '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
81
  organization: Ref.make(organization),
61
82
  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
- },
83
+ { label: 'Work', value: random.internet.email() },
84
+ { label: 'Work', value: random.internet.email() },
85
+ { label: 'Work', value: random.internet.email() },
74
86
  ],
75
87
  });
88
+ };
76
89
 
77
- const project = Obj.make(DataType.Project, {
78
- name: faker.person.fullName(),
90
+ export const createProject = (): Pipeline.Pipeline => {
91
+ return Obj.make(Pipeline.Pipeline, {
92
+ name: random.person.fullName(),
79
93
  image: 'https://dxos.network/dxos-logotype-blue.png',
80
- description: faker.lorem.paragraph(),
94
+ description: random.lorem.paragraph(),
95
+ columns: [],
96
+ });
97
+ };
98
+
99
+ export const createTask = (): Task.Task => {
100
+ return Obj.make(Task.Task, {
101
+ title: random.lorem.sentence(),
102
+ status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
81
103
  });
104
+ };
105
+
106
+ /**
107
+ * Plain object cast as `Obj.Any` — has no schema, typename, or database, so cards
108
+ * like `FormCard` fall through to their empty/unsupported state. Use to story-pin
109
+ * fallback rendering.
110
+ */
111
+ export const createUnknown = (): Obj.Any => ({}) as unknown as Obj.Any;
112
+
113
+ /**
114
+ * Typed object with no user-facing values (only `id`). All Person fields are
115
+ * optional, so `Obj.make(Person, {})` is valid and triggers the FormCard
116
+ * "no values" branch in readonly mode.
117
+ */
118
+ export const createPersonEmpty = (): Person.Person => Obj.make(Person.Person, {});
82
119
 
83
- return [
84
- {
85
- Component: OrganizationCard,
86
- subject: organization,
87
- icon: 'ph--building-office--regular',
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
- ];
120
+ /**
121
+ * Mock of the `Table` schema (org.dxos.type.table): an optional `name` plus
122
+ * `view` and `sizes` fields annotated with `FormInputAnnotation.set(false)`.
123
+ * When constructed without a `name`, no form-renderable field has a value so
124
+ * FormCard should fall through to its empty state — even though
125
+ * `Object.keys(subject)` includes `view`/`sizes`.
126
+ */
127
+ const TableLike = Schema.Struct({
128
+ name: Schema.String.pipe(Schema.optional),
129
+ view: Schema.String.pipe(Annotation.FormInputAnnotation.set(false)),
130
+ sizes: Schema.Record({ key: Schema.String, value: Schema.Number }).pipe(
131
+ Schema.mutable,
132
+ Annotation.FormInputAnnotation.set(false),
133
+ ),
134
+ }).pipe(Type.makeObject(DXN.make('org.dxos.test.tableLike', '0.1.0')));
135
+ type TableLike = Type.InstanceType<typeof TableLike>;
136
+
137
+ /**
138
+ * Table-like object with values only in form-hidden fields (`view`, `sizes`).
139
+ * `Object.keys` includes them, but a naive `hasValues` check would
140
+ * misclassify this as having data. FormCard must consult the schema's
141
+ * form-input annotations to correctly fall through to the empty state.
142
+ */
143
+ export const createTableEmpty = (): TableLike =>
144
+ Obj.make(TableLike, { view: 'view-dxn:placeholder', sizes: {} } as Obj.MakeProps<typeof TableLike>);
145
+
146
+ export const createExpando = (): Expando.Expando => {
147
+ return Expando.make({
148
+ name: random.person.fullName(),
149
+ email: random.internet.email(),
150
+ age: random.number.int({ min: 18, max: 80 }),
151
+ active: random.datatype.boolean(),
152
+ });
103
153
  };
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,13 +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',
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,60 +0,0 @@
1
- import {
2
- PREVIEW_PLUGIN,
3
- meta
4
- } from "./chunk-Z73ENKLE.mjs";
5
-
6
- // src/PreviewPlugin.tsx
7
- import { Capabilities, Events, contributes, defineModule, definePlugin } from "@dxos/app-framework";
8
- import { ClientCapabilities, ClientEvents } from "@dxos/plugin-client";
9
- import { DataType } from "@dxos/schema";
10
-
11
- // src/capabilities/index.ts
12
- import { lazy } from "@dxos/app-framework";
13
- var PreviewPopover = lazy(() => import("./preview-popover-MAIBTJKJ.mjs"));
14
- var ReactSurface = lazy(() => import("./react-surface-SC522FSX.mjs"));
15
-
16
- // src/translations.ts
17
- var translations = [
18
- {
19
- "en-US": {
20
- [meta.id]: {
21
- "unable to create preview message": "No preview"
22
- }
23
- }
24
- }
25
- ];
26
-
27
- // src/PreviewPlugin.tsx
28
- var PreviewPlugin = () => definePlugin(meta, [
29
- defineModule({
30
- id: `${meta.id}/module/translations`,
31
- activatesOn: Events.SetupTranslations,
32
- activate: () => contributes(Capabilities.Translations, translations)
33
- }),
34
- defineModule({
35
- id: `${meta.id}/module/schema`,
36
- activatesOn: ClientEvents.SetupSchema,
37
- activate: () => [
38
- contributes(ClientCapabilities.Schema, [
39
- DataType.Person,
40
- DataType.Organization
41
- ])
42
- ]
43
- }),
44
- defineModule({
45
- id: `${meta.id}/module/preview-popover`,
46
- activatesOn: Events.Startup,
47
- activate: PreviewPopover
48
- }),
49
- defineModule({
50
- id: `${meta.id}/module/react-surface`,
51
- activatesOn: Events.SetupReactSurface,
52
- activate: ReactSurface
53
- })
54
- ]);
55
- export {
56
- PREVIEW_PLUGIN,
57
- PreviewPlugin,
58
- meta
59
- };
60
- //# 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 { DataType } from '@dxos/schema';\n\nimport { PreviewPopover, ReactSurface } from './capabilities';\nimport { meta } from './meta';\nimport { translations } from './translations';\n\nexport const PreviewPlugin = () =>\n 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, [DataType.Person, DataType.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 },\n },\n },\n] as const satisfies Resource[];\n"],
5
- "mappings": ";;;;;;AAIA,SAASA,cAAcC,QAAQC,aAAaC,cAAcC,oBAAoB;AAC9E,SAASC,oBAAoBC,oBAAoB;AACjD,SAASC,gBAAgB;;;ACFzB,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;MACtC;IACF;EACF;;;;AFHK,IAAMC,gBAAgB,MAC3BC,aAAaC,MAAM;EACjBC,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,SAASC;QAAQD,SAASE;OAAa;;EAClG,CAAA;EACAhB,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOc;IACpBZ,UAAUa;EACZ,CAAA;EACAlB,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOgB;IACpBd,UAAUe;EACZ,CAAA;CACD;",
6
- "names": ["Capabilities", "Events", "contributes", "defineModule", "definePlugin", "ClientCapabilities", "ClientEvents", "DataType", "lazy", "PreviewPopover", "lazy", "ReactSurface", "translations", "meta", "id", "PreviewPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "SetupTranslations", "activate", "contributes", "Capabilities", "Translations", "translations", "ClientEvents", "SetupSchema", "ClientCapabilities", "Schema", "DataType", "Person", "Organization", "Startup", "PreviewPopover", "SetupReactSurface", "ReactSurface"]
7
- }