@dxos/plugin-preview 0.8.2-main.36232bc → 0.8.2-main.5ca3450
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 +53 -31
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +55 -31
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +53 -31
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/Preview.stories.d.ts +17 -11
- package/dist/types/src/Preview.stories.d.ts.map +1 -1
- package/dist/types/src/PreviewPlugin.d.ts.map +1 -1
- package/dist/types/src/components/ContactCard.d.ts +3 -3
- package/dist/types/src/components/ContactCard.d.ts.map +1 -1
- package/dist/types/src/components/OrganizationCard.d.ts +2 -2
- package/dist/types/src/components/OrganizationCard.d.ts.map +1 -1
- package/dist/types/src/components/ProjectCard.d.ts +2 -2
- package/dist/types/src/components/ProjectCard.d.ts.map +1 -1
- package/dist/types/src/types.d.ts +4 -1
- package/dist/types/src/types.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +21 -20
- package/src/Preview.stories.tsx +10 -4
- package/src/PreviewPlugin.tsx +31 -22
- package/src/components/ContactCard.tsx +5 -4
- package/src/components/OrganizationCard.tsx +6 -5
- package/src/components/ProjectCard.tsx +8 -4
- package/src/types.ts +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-preview/src/meta.ts":{"bytes":1296,"imports":[],"format":"esm"},"packages/plugins/plugin-preview/src/types.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-preview/src/meta.ts":{"bytes":1296,"imports":[],"format":"esm"},"packages/plugins/plugin-preview/src/types.ts":{"bytes":3670,"imports":[],"format":"esm"},"packages/plugins/plugin-preview/src/components/ContactCard.tsx":{"bytes":9429,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-preview/src/types.ts","kind":"import-statement","original":"../types"}],"format":"esm"},"packages/plugins/plugin-preview/src/components/OrganizationCard.tsx":{"bytes":5727,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-preview/src/types.ts","kind":"import-statement","original":"../types"}],"format":"esm"},"packages/plugins/plugin-preview/src/components/ProjectCard.tsx":{"bytes":2969,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-preview/src/types.ts","kind":"import-statement","original":"../types"}],"format":"esm"},"packages/plugins/plugin-preview/src/components/index.ts":{"bytes":732,"imports":[{"path":"packages/plugins/plugin-preview/src/components/ContactCard.tsx","kind":"import-statement","original":"./ContactCard"},{"path":"packages/plugins/plugin-preview/src/components/OrganizationCard.tsx","kind":"import-statement","original":"./OrganizationCard"},{"path":"packages/plugins/plugin-preview/src/components/ProjectCard.tsx","kind":"import-statement","original":"./ProjectCard"}],"format":"esm"},"packages/plugins/plugin-preview/src/translations.ts":{"bytes":1091,"imports":[{"path":"packages/plugins/plugin-preview/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-preview/src/PreviewPlugin.tsx":{"bytes":29109,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/client","kind":"import-statement","external":true},{"path":"@dxos/client/echo","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/keys","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/plugin-client","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-form","kind":"import-statement","external":true},{"path":"@dxos/react-ui-table","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/schema","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-preview/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/plugins/plugin-preview/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-preview/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/plugins/plugin-preview/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"},"packages/plugins/plugin-preview/src/index.ts":{"bytes":681,"imports":[{"path":"packages/plugins/plugin-preview/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-preview/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/plugins/plugin-preview/src/PreviewPlugin.tsx","kind":"import-statement","original":"./PreviewPlugin"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-preview/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":25359},"packages/plugins/plugin-preview/dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/async","kind":"import-statement","external":true},{"path":"@dxos/client","kind":"import-statement","external":true},{"path":"@dxos/client/echo","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/keys","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"@dxos/plugin-client","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-form","kind":"import-statement","external":true},{"path":"@dxos/react-ui-table","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/schema","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["PREVIEW_PLUGIN","PreviewPlugin","defaultCard","kanbanCardWithoutPoster","meta","popoverCard","previewChrome","previewProse","previewTitle"],"entryPoint":"packages/plugins/plugin-preview/src/index.ts","inputs":{"packages/plugins/plugin-preview/src/meta.ts":{"bytesInOutput":216},"packages/plugins/plugin-preview/src/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-preview/src/types.ts":{"bytesInOutput":348},"packages/plugins/plugin-preview/src/PreviewPlugin.tsx":{"bytesInOutput":7176},"packages/plugins/plugin-preview/src/components/ContactCard.tsx":{"bytesInOutput":2709},"packages/plugins/plugin-preview/src/components/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-preview/src/components/OrganizationCard.tsx":{"bytesInOutput":1618},"packages/plugins/plugin-preview/src/components/ProjectCard.tsx":{"bytesInOutput":674},"packages/plugins/plugin-preview/src/translations.ts":{"bytesInOutput":152}},"bytes":13655}}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '@dxos-theme';
|
|
2
2
|
import { type Meta } from '@storybook/react';
|
|
3
3
|
import React, { type FC } from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { DataType } from '@dxos/schema';
|
|
5
5
|
type StoryProps = {
|
|
6
6
|
Component: FC<{
|
|
7
7
|
subject: any;
|
|
@@ -13,8 +13,8 @@ declare const meta: Meta<StoryProps>;
|
|
|
13
13
|
export default meta;
|
|
14
14
|
export declare const ContactWithImage: {
|
|
15
15
|
args: {
|
|
16
|
-
Component: ({ children, classNames, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<
|
|
17
|
-
onOrgClick?: (org: Organization) => void;
|
|
16
|
+
Component: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<DataType.Person> & {
|
|
17
|
+
onOrgClick?: (org: DataType.Organization) => void;
|
|
18
18
|
}) => React.JSX.Element;
|
|
19
19
|
icon: string;
|
|
20
20
|
subject: Omit<{
|
|
@@ -27,7 +27,7 @@ export declare const ContactWithImage: {
|
|
|
27
27
|
readonly id: string;
|
|
28
28
|
description?: string | undefined;
|
|
29
29
|
name?: string | undefined;
|
|
30
|
-
status?: "
|
|
30
|
+
status?: "prospect" | "qualified" | "active" | "commit" | "reject" | undefined;
|
|
31
31
|
image?: string | undefined;
|
|
32
32
|
website?: string | undefined;
|
|
33
33
|
}> | undefined;
|
|
@@ -135,45 +135,49 @@ export declare const ContactWithImage: {
|
|
|
135
135
|
} & {
|
|
136
136
|
id: string;
|
|
137
137
|
};
|
|
138
|
+
role: string;
|
|
138
139
|
};
|
|
139
140
|
};
|
|
140
141
|
export declare const ContactNoImage: {
|
|
141
142
|
args: {
|
|
142
|
-
Component: ({ children, classNames, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<
|
|
143
|
-
onOrgClick?: (org: Organization) => void;
|
|
143
|
+
Component: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<DataType.Person> & {
|
|
144
|
+
onOrgClick?: (org: DataType.Organization) => void;
|
|
144
145
|
}) => React.JSX.Element;
|
|
145
146
|
icon: string;
|
|
146
147
|
subject: any;
|
|
148
|
+
role: string;
|
|
147
149
|
};
|
|
148
150
|
};
|
|
149
151
|
export declare const OrganizationWithImage: {
|
|
150
152
|
args: {
|
|
151
|
-
Component: ({ children, classNames, subject: { name, image, description, website }, }: import("./types").PreviewProps<Organization>) => React.JSX.Element;
|
|
153
|
+
Component: ({ children, classNames, subject: { name, image, description, website }, role, }: import("./types").PreviewProps<DataType.Organization>) => React.JSX.Element;
|
|
152
154
|
icon: string;
|
|
153
155
|
subject: Omit<{
|
|
154
156
|
readonly id: string;
|
|
155
157
|
image?: string | undefined;
|
|
158
|
+
status?: "prospect" | "qualified" | "active" | "commit" | "reject" | undefined;
|
|
156
159
|
name?: string | undefined;
|
|
157
160
|
description?: string | undefined;
|
|
158
|
-
status?: "first" | "second" | "third" | "fourth" | undefined;
|
|
159
161
|
website?: string | undefined;
|
|
160
162
|
}, "id"> & {
|
|
161
163
|
id?: string;
|
|
162
164
|
} & {
|
|
163
165
|
id: string;
|
|
164
166
|
};
|
|
167
|
+
role: string;
|
|
165
168
|
};
|
|
166
169
|
};
|
|
167
170
|
export declare const OrganizationNoImage: {
|
|
168
171
|
args: {
|
|
169
|
-
Component: ({ children, classNames, subject: { name, image, description, website }, }: import("./types").PreviewProps<Organization>) => React.JSX.Element;
|
|
172
|
+
Component: ({ children, classNames, subject: { name, image, description, website }, role, }: import("./types").PreviewProps<DataType.Organization>) => React.JSX.Element;
|
|
170
173
|
icon: string;
|
|
171
174
|
subject: any;
|
|
175
|
+
role: string;
|
|
172
176
|
};
|
|
173
177
|
};
|
|
174
178
|
export declare const ProjectWithImage: {
|
|
175
179
|
args: {
|
|
176
|
-
Component: ({ classNames, subject: { name, image, description } }: import("./types").PreviewProps<Project>) => React.JSX.Element;
|
|
180
|
+
Component: ({ classNames, role, subject: { name, image, description }, }: import("./types").PreviewProps<DataType.Project>) => React.JSX.Element;
|
|
177
181
|
icon: string;
|
|
178
182
|
subject: Omit<{
|
|
179
183
|
readonly id: string;
|
|
@@ -185,13 +189,15 @@ export declare const ProjectWithImage: {
|
|
|
185
189
|
} & {
|
|
186
190
|
id: string;
|
|
187
191
|
};
|
|
192
|
+
role: string;
|
|
188
193
|
};
|
|
189
194
|
};
|
|
190
195
|
export declare const ProjectNoImage: {
|
|
191
196
|
args: {
|
|
192
|
-
Component: ({ classNames, subject: { name, image, description } }: import("./types").PreviewProps<Project>) => React.JSX.Element;
|
|
197
|
+
Component: ({ classNames, role, subject: { name, image, description }, }: import("./types").PreviewProps<DataType.Project>) => React.JSX.Element;
|
|
193
198
|
icon: string;
|
|
194
199
|
subject: any;
|
|
200
|
+
role: string;
|
|
195
201
|
};
|
|
196
202
|
};
|
|
197
203
|
//# sourceMappingURL=Preview.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Preview.stories.d.ts","sourceRoot":"","sources":["../../../src/Preview.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Preview.stories.d.ts","sourceRoot":"","sources":["../../../src/Preview.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAQxC,KAAK,UAAU,GAAG;IAChB,SAAS,EAAE,EAAE,CAAC;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,CAAC;CACd,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAoB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AA2CpB,eAAO,MAAM,gBAAgB;;;sBA3ElB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFX,CAAC;AAEF,eAAO,MAAM,cAAc;;;sBApFhB,CAAC;;;;;;CA2FX,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;CAOjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;CAO/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAO5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"AA+DA,eAAO,MAAM,aAAa,4CAsJtB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type DataType } from '@dxos/schema';
|
|
3
3
|
import { type PreviewProps } from '../types';
|
|
4
|
-
export declare const ContactCard: ({ children, classNames, subject: { fullName, image, organization, emails }, onOrgClick, }: PreviewProps<
|
|
5
|
-
onOrgClick?: (org: Organization) => void;
|
|
4
|
+
export declare const ContactCard: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: PreviewProps<DataType.Person> & {
|
|
5
|
+
onOrgClick?: (org: DataType.Organization) => void;
|
|
6
6
|
}) => React.JSX.Element;
|
|
7
7
|
//# sourceMappingURL=ContactCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ContactCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ContactCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ContactCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAAuE,MAAM,UAAU,CAAC;AAElH,eAAO,MAAM,WAAW,GAAI,iGAMzB,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,YAAY,KAAK,IAAI,CAAA;CAAE,sBAmDvF,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type DataType } from '@dxos/schema';
|
|
3
3
|
import { type PreviewProps } from '../types';
|
|
4
|
-
export declare const OrganizationCard: ({ children, classNames, subject: { name, image, description, website }, }: PreviewProps<Organization>) => React.JSX.Element;
|
|
4
|
+
export declare const OrganizationCard: ({ children, classNames, subject: { name, image, description, website }, role, }: PreviewProps<DataType.Organization>) => React.JSX.Element;
|
|
5
5
|
//# sourceMappingURL=OrganizationCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OrganizationCard.d.ts","sourceRoot":"","sources":["../../../../src/components/OrganizationCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"OrganizationCard.d.ts","sourceRoot":"","sources":["../../../../src/components/OrganizationCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAAuE,MAAM,UAAU,CAAC;AAElH,eAAO,MAAM,gBAAgB,GAAI,iFAK9B,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,sBAwBrC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type DataType } from '@dxos/schema';
|
|
3
3
|
import { type PreviewProps } from '../types';
|
|
4
|
-
export declare const ProjectCard: ({ classNames, subject: { name, image, description } }: PreviewProps<Project>) => React.JSX.Element;
|
|
4
|
+
export declare const ProjectCard: ({ classNames, role, subject: { name, image, description }, }: PreviewProps<DataType.Project>) => React.JSX.Element;
|
|
5
5
|
//# sourceMappingURL=ProjectCard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ProjectCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ProjectCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,KAAK,YAAY,EAA0C,MAAM,UAAU,CAAC;AAErF,eAAO,MAAM,WAAW,GAAI,8DAIzB,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,sBAQhC,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { type PropsWithChildren } from 'react';
|
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
3
|
export type PreviewProps<T extends object> = PropsWithChildren<ThemedClassName<{
|
|
4
4
|
subject: T;
|
|
5
|
+
role: string;
|
|
5
6
|
}>>;
|
|
6
7
|
/**
|
|
7
8
|
* <Card.Root>
|
|
@@ -15,7 +16,9 @@ export type PreviewProps<T extends object> = PropsWithChildren<ThemedClassName<{
|
|
|
15
16
|
* </Card.Body>
|
|
16
17
|
* </Card.Root>
|
|
17
18
|
*/
|
|
18
|
-
export declare const
|
|
19
|
+
export declare const popoverCard = "popover-consistent-width rounded-lg overflow-hidden";
|
|
20
|
+
export declare const defaultCard = "";
|
|
21
|
+
export declare const kanbanCardWithoutPoster = "pbs-[--rail-action]";
|
|
19
22
|
export declare const previewTitle = "text-lg font-medium line-clamp-2";
|
|
20
23
|
export declare const previewProse = "pli-3 mlb-3";
|
|
21
24
|
export declare const previewChrome = "pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,iBAAiB,CAC5D,eAAe,CAAC;IACd,OAAO,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,iBAAiB,CAC5D,eAAe,CAAC;IACd,OAAO,EAAE,CAAC,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,CACH,CAAC;AAQF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,wDAAwD,CAAC;AACjF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,uBAAuB,wBAAwB,CAAC;AAC7D,eAAO,MAAM,YAAY,qCAAqC,CAAC;AAC/D,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,aAAa,4FAA4F,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-preview",
|
|
3
|
-
"version": "0.8.2-main.
|
|
3
|
+
"version": "0.8.2-main.5ca3450",
|
|
4
4
|
"description": "Preview plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -23,32 +23,33 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"
|
|
27
|
-
"@dxos/
|
|
28
|
-
"@dxos/client": "0.8.2-main.
|
|
29
|
-
"@dxos/echo-schema": "0.8.2-main.
|
|
30
|
-
"@dxos/keys": "0.8.2-main.
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/
|
|
33
|
-
"@dxos/log": "0.8.2-main.
|
|
34
|
-
"@dxos/react-client": "0.8.2-main.
|
|
35
|
-
"@dxos/react-ui": "0.8.2-main.
|
|
36
|
-
"@dxos/react-ui-form": "0.8.2-main.
|
|
37
|
-
"@dxos/
|
|
38
|
-
"@dxos/react-ui-
|
|
39
|
-
"@dxos/
|
|
40
|
-
"@dxos/react-ui-
|
|
41
|
-
"@dxos/
|
|
26
|
+
"effect": "3.14.21",
|
|
27
|
+
"@dxos/app-framework": "0.8.2-main.5ca3450",
|
|
28
|
+
"@dxos/client": "0.8.2-main.5ca3450",
|
|
29
|
+
"@dxos/echo-schema": "0.8.2-main.5ca3450",
|
|
30
|
+
"@dxos/keys": "0.8.2-main.5ca3450",
|
|
31
|
+
"@dxos/async": "0.8.2-main.5ca3450",
|
|
32
|
+
"@dxos/lit-ui": "0.8.2-main.5ca3450",
|
|
33
|
+
"@dxos/log": "0.8.2-main.5ca3450",
|
|
34
|
+
"@dxos/react-client": "0.8.2-main.5ca3450",
|
|
35
|
+
"@dxos/react-ui": "0.8.2-main.5ca3450",
|
|
36
|
+
"@dxos/react-ui-form": "0.8.2-main.5ca3450",
|
|
37
|
+
"@dxos/plugin-client": "0.8.2-main.5ca3450",
|
|
38
|
+
"@dxos/react-ui-table": "0.8.2-main.5ca3450",
|
|
39
|
+
"@dxos/schema": "0.8.2-main.5ca3450",
|
|
40
|
+
"@dxos/react-ui-editor": "0.8.2-main.5ca3450",
|
|
41
|
+
"@dxos/react-ui-theme": "0.8.2-main.5ca3450",
|
|
42
|
+
"@dxos/util": "0.8.2-main.5ca3450"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
|
-
"effect": "3.
|
|
45
|
+
"effect": "3.14.21",
|
|
45
46
|
"react": "~18.2.0",
|
|
46
47
|
"react-dom": "~18.2.0",
|
|
47
48
|
"vite": "5.4.7",
|
|
48
|
-
"@dxos/random": "0.8.2-main.
|
|
49
|
+
"@dxos/random": "0.8.2-main.5ca3450"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
51
|
-
"effect": "3.13.3",
|
|
52
|
+
"effect": "^3.13.3",
|
|
52
53
|
"react": "~18.2.0",
|
|
53
54
|
"react-dom": "~18.2.0"
|
|
54
55
|
},
|
package/src/Preview.stories.tsx
CHANGED
|
@@ -11,7 +11,7 @@ import { create } from '@dxos/echo-schema';
|
|
|
11
11
|
import { faker } from '@dxos/random';
|
|
12
12
|
import { makeRef } from '@dxos/react-client/echo';
|
|
13
13
|
import { Icon, Popover } from '@dxos/react-ui';
|
|
14
|
-
import {
|
|
14
|
+
import { DataType } from '@dxos/schema';
|
|
15
15
|
import { withTheme, withLayout } from '@dxos/storybook-utils';
|
|
16
16
|
|
|
17
17
|
import { ContactCard, OrganizationCard, ProjectCard } from './components';
|
|
@@ -52,7 +52,7 @@ export default meta;
|
|
|
52
52
|
const omitImage = ({ image, ...rest }: any) => rest;
|
|
53
53
|
|
|
54
54
|
const data = (() => {
|
|
55
|
-
const organization = create(Organization, {
|
|
55
|
+
const organization = create(DataType.Organization, {
|
|
56
56
|
name: faker.company.name(),
|
|
57
57
|
image:
|
|
58
58
|
'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',
|
|
@@ -60,7 +60,7 @@ const data = (() => {
|
|
|
60
60
|
description: faker.lorem.paragraph(),
|
|
61
61
|
});
|
|
62
62
|
|
|
63
|
-
const contact = create(
|
|
63
|
+
const contact = create(DataType.Person, {
|
|
64
64
|
fullName: faker.person.fullName(),
|
|
65
65
|
image:
|
|
66
66
|
'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',
|
|
@@ -81,7 +81,7 @@ const data = (() => {
|
|
|
81
81
|
],
|
|
82
82
|
});
|
|
83
83
|
|
|
84
|
-
const project = create(Project, {
|
|
84
|
+
const project = create(DataType.Project, {
|
|
85
85
|
name: faker.person.fullName(),
|
|
86
86
|
image: 'https://dxos.network/dxos-logotype-blue.png',
|
|
87
87
|
description: faker.lorem.paragraph(),
|
|
@@ -95,6 +95,7 @@ export const ContactWithImage = {
|
|
|
95
95
|
Component: ContactCard,
|
|
96
96
|
icon: 'ph--user--regular',
|
|
97
97
|
subject: data.contact,
|
|
98
|
+
role: 'popover',
|
|
98
99
|
},
|
|
99
100
|
};
|
|
100
101
|
|
|
@@ -103,6 +104,7 @@ export const ContactNoImage = {
|
|
|
103
104
|
Component: ContactCard,
|
|
104
105
|
icon: 'ph--user--regular',
|
|
105
106
|
subject: omitImage(data.contact),
|
|
107
|
+
role: 'popover',
|
|
106
108
|
},
|
|
107
109
|
};
|
|
108
110
|
|
|
@@ -111,6 +113,7 @@ export const OrganizationWithImage = {
|
|
|
111
113
|
Component: OrganizationCard,
|
|
112
114
|
icon: 'ph--building-office--regular',
|
|
113
115
|
subject: data.organization,
|
|
116
|
+
role: 'popover',
|
|
114
117
|
},
|
|
115
118
|
};
|
|
116
119
|
|
|
@@ -119,6 +122,7 @@ export const OrganizationNoImage = {
|
|
|
119
122
|
Component: OrganizationCard,
|
|
120
123
|
icon: 'ph--building-office--regular',
|
|
121
124
|
subject: omitImage(data.organization),
|
|
125
|
+
role: 'popover',
|
|
122
126
|
},
|
|
123
127
|
};
|
|
124
128
|
|
|
@@ -127,6 +131,7 @@ export const ProjectWithImage = {
|
|
|
127
131
|
Component: ProjectCard,
|
|
128
132
|
icon: 'ph--building--regular',
|
|
129
133
|
subject: data.project,
|
|
134
|
+
role: 'popover',
|
|
130
135
|
},
|
|
131
136
|
};
|
|
132
137
|
|
|
@@ -135,5 +140,6 @@ export const ProjectNoImage = {
|
|
|
135
140
|
Component: ProjectCard,
|
|
136
141
|
icon: 'ph--building--regular',
|
|
137
142
|
subject: omitImage(data.project),
|
|
143
|
+
role: 'popover',
|
|
138
144
|
},
|
|
139
145
|
};
|
package/src/PreviewPlugin.tsx
CHANGED
|
@@ -25,7 +25,7 @@ import {
|
|
|
25
25
|
getSpace,
|
|
26
26
|
isEchoObject,
|
|
27
27
|
parseId,
|
|
28
|
-
type
|
|
28
|
+
type AnyLiveObject,
|
|
29
29
|
type Space,
|
|
30
30
|
} from '@dxos/client/echo';
|
|
31
31
|
import { isInstanceOf } from '@dxos/echo-schema';
|
|
@@ -38,11 +38,12 @@ import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/react-ui-edit
|
|
|
38
38
|
import { Form } from '@dxos/react-ui-form';
|
|
39
39
|
import { TableType } from '@dxos/react-ui-table';
|
|
40
40
|
import { descriptionMessage } from '@dxos/react-ui-theme';
|
|
41
|
-
import {
|
|
41
|
+
import { DataType } from '@dxos/schema';
|
|
42
42
|
|
|
43
43
|
import { ContactCard, OrganizationCard, ProjectCard } from './components';
|
|
44
44
|
import { meta, PREVIEW_PLUGIN } from './meta';
|
|
45
45
|
import translations from './translations';
|
|
46
|
+
import { kanbanCardWithoutPoster } from './types';
|
|
46
47
|
|
|
47
48
|
const customEventOptions = { capture: true, passive: false };
|
|
48
49
|
|
|
@@ -70,7 +71,7 @@ export const PreviewPlugin = () =>
|
|
|
70
71
|
defineModule({
|
|
71
72
|
id: `${meta.id}/module/schema`,
|
|
72
73
|
activatesOn: ClientEvents.SetupSchema,
|
|
73
|
-
activate: () => [contributes(ClientCapabilities.Schema, [
|
|
74
|
+
activate: () => [contributes(ClientCapabilities.Schema, [DataType.Person, DataType.Organization])],
|
|
74
75
|
}),
|
|
75
76
|
defineModule({
|
|
76
77
|
id: `${meta.id}/module/preview-popover`,
|
|
@@ -126,16 +127,16 @@ export const PreviewPlugin = () =>
|
|
|
126
127
|
//
|
|
127
128
|
createSurface({
|
|
128
129
|
id: `${PREVIEW_PLUGIN}/schema-popover`,
|
|
129
|
-
role: 'popover',
|
|
130
|
-
filter: (data): data is { subject:
|
|
131
|
-
component: ({ data }) => {
|
|
130
|
+
role: ['popover', 'card--kanban'],
|
|
131
|
+
filter: (data): data is { subject: DataType.Person } => isInstanceOf(DataType.Person, data.subject),
|
|
132
|
+
component: ({ data, role }) => {
|
|
132
133
|
const { dispatchPromise: dispatch } = useIntentDispatcher();
|
|
133
134
|
const handleOrgClick = useCallback(
|
|
134
|
-
async (org: Organization) => {
|
|
135
|
+
async (org: DataType.Organization) => {
|
|
135
136
|
const space = getSpace(org);
|
|
136
137
|
const tablesQuery = await space?.db.query(Filter.schema(TableType)).run();
|
|
137
138
|
const currentSpaceOrgTable = tablesQuery?.objects.find((table) => {
|
|
138
|
-
return table.view?.target?.query?.typename === Organization.typename;
|
|
139
|
+
return table.view?.target?.query?.typename === DataType.Organization.typename;
|
|
139
140
|
});
|
|
140
141
|
await dispatch(
|
|
141
142
|
createIntent(LayoutAction.UpdatePopover, {
|
|
@@ -159,27 +160,28 @@ export const PreviewPlugin = () =>
|
|
|
159
160
|
[dispatch],
|
|
160
161
|
);
|
|
161
162
|
return (
|
|
162
|
-
<ContactCard subject={data.subject} onOrgClick={handleOrgClick}>
|
|
163
|
-
<Surface role='related' data={data} />
|
|
163
|
+
<ContactCard subject={data.subject} onOrgClick={handleOrgClick} role={role}>
|
|
164
|
+
{role === 'popover' && <Surface role='related' data={data} />}
|
|
164
165
|
</ContactCard>
|
|
165
166
|
);
|
|
166
167
|
},
|
|
167
168
|
}),
|
|
168
169
|
createSurface({
|
|
169
170
|
id: `${PREVIEW_PLUGIN}/schema-popover`,
|
|
170
|
-
role: 'popover',
|
|
171
|
-
filter: (data): data is { subject: Organization } =>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
171
|
+
role: ['popover', 'card--kanban'],
|
|
172
|
+
filter: (data): data is { subject: DataType.Organization } =>
|
|
173
|
+
isInstanceOf(DataType.Organization, data.subject),
|
|
174
|
+
component: ({ data, role }) => (
|
|
175
|
+
<OrganizationCard subject={data.subject} role={role}>
|
|
176
|
+
{role === 'popover' && <Surface role='related' data={data} />}
|
|
175
177
|
</OrganizationCard>
|
|
176
178
|
),
|
|
177
179
|
}),
|
|
178
180
|
createSurface({
|
|
179
181
|
id: `${PREVIEW_PLUGIN}/schema-popover`,
|
|
180
|
-
role: 'popover',
|
|
181
|
-
filter: (data): data is { subject: Project } => isInstanceOf(Project, data.subject),
|
|
182
|
-
component: ({ data }) => <ProjectCard subject={data.subject} />,
|
|
182
|
+
role: ['popover', 'card--kanban'],
|
|
183
|
+
filter: (data): data is { subject: DataType.Project } => isInstanceOf(DataType.Project, data.subject),
|
|
184
|
+
component: ({ data, role }) => <ProjectCard subject={data.subject} role={role} />,
|
|
183
185
|
}),
|
|
184
186
|
|
|
185
187
|
//
|
|
@@ -187,17 +189,24 @@ export const PreviewPlugin = () =>
|
|
|
187
189
|
//
|
|
188
190
|
createSurface({
|
|
189
191
|
id: `${PREVIEW_PLUGIN}/fallback-popover`,
|
|
190
|
-
role: 'popover',
|
|
192
|
+
role: ['popover', 'card--kanban'],
|
|
191
193
|
position: 'fallback',
|
|
192
|
-
filter: (data): data is { subject:
|
|
193
|
-
component: ({ data }) => {
|
|
194
|
+
filter: (data): data is { subject: AnyLiveObject<any> } => isEchoObject(data.subject),
|
|
195
|
+
component: ({ data, role }) => {
|
|
194
196
|
const schema = getSchema(data.subject);
|
|
195
197
|
const { t } = useTranslation(PREVIEW_PLUGIN);
|
|
196
198
|
if (!schema) {
|
|
197
199
|
return <p className={descriptionMessage}>{t('unable to create preview message')}</p>;
|
|
198
200
|
}
|
|
199
201
|
|
|
200
|
-
return
|
|
202
|
+
return (
|
|
203
|
+
<Form
|
|
204
|
+
schema={schema}
|
|
205
|
+
values={data.subject}
|
|
206
|
+
readonly
|
|
207
|
+
{...(role === 'card--kanban' && { classNames: kanbanCardWithoutPoster })}
|
|
208
|
+
/>
|
|
209
|
+
);
|
|
201
210
|
},
|
|
202
211
|
}),
|
|
203
212
|
]),
|
|
@@ -6,19 +6,20 @@ import React, { Fragment } from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { Icon, Avatar, Button } from '@dxos/react-ui';
|
|
8
8
|
import { mx } from '@dxos/react-ui-theme';
|
|
9
|
-
import { type
|
|
9
|
+
import { type DataType } from '@dxos/schema';
|
|
10
10
|
|
|
11
|
-
import { type PreviewProps,
|
|
11
|
+
import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
|
|
12
12
|
|
|
13
13
|
export const ContactCard = ({
|
|
14
14
|
children,
|
|
15
15
|
classNames,
|
|
16
|
+
role,
|
|
16
17
|
subject: { fullName, image, organization, emails },
|
|
17
18
|
onOrgClick,
|
|
18
|
-
}: PreviewProps<
|
|
19
|
+
}: PreviewProps<DataType.Person> & { onOrgClick?: (org: DataType.Organization) => void }) => {
|
|
19
20
|
const organizationName = organization && typeof organization === 'object' ? organization.target?.name : organization;
|
|
20
21
|
return (
|
|
21
|
-
<div role='none' className={mx(
|
|
22
|
+
<div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
|
|
22
23
|
<Avatar.Root>
|
|
23
24
|
<div role='group' className={mx(previewProse, 'grid gap-3 grid-cols-[min-content_1fr]')}>
|
|
24
25
|
<Avatar.Content imgSrc={image} icon='ph--user--regular' size={16} hue='neutral' />
|
|
@@ -6,21 +6,22 @@ import React from 'react';
|
|
|
6
6
|
|
|
7
7
|
import { Icon } from '@dxos/react-ui';
|
|
8
8
|
import { mx } from '@dxos/react-ui-theme';
|
|
9
|
-
import { type
|
|
9
|
+
import { type DataType } from '@dxos/schema';
|
|
10
10
|
|
|
11
|
-
import { type PreviewProps,
|
|
11
|
+
import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
|
|
12
12
|
|
|
13
13
|
export const OrganizationCard = ({
|
|
14
14
|
children,
|
|
15
15
|
classNames,
|
|
16
16
|
subject: { name, image, description, website },
|
|
17
|
-
|
|
17
|
+
role,
|
|
18
|
+
}: PreviewProps<DataType.Organization>) => {
|
|
18
19
|
return (
|
|
19
|
-
<div role='none' className={mx(
|
|
20
|
+
<div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
|
|
20
21
|
{image ? (
|
|
21
22
|
<img className='aspect-video object-cover is-full bs-auto' src={image} alt={name} />
|
|
22
23
|
) : (
|
|
23
|
-
<div role='image' className='grid aspect-video place-items-center bg-
|
|
24
|
+
<div role='image' className='grid aspect-video place-items-center bg-input text-subdued'>
|
|
24
25
|
<Icon icon='ph--building-office--regular' size={10} />
|
|
25
26
|
</div>
|
|
26
27
|
)}
|
|
@@ -5,13 +5,17 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
|
|
7
7
|
import { mx } from '@dxos/react-ui-theme';
|
|
8
|
-
import { type
|
|
8
|
+
import { type DataType } from '@dxos/schema';
|
|
9
9
|
|
|
10
|
-
import { type PreviewProps,
|
|
10
|
+
import { type PreviewProps, popoverCard, previewTitle, defaultCard } from '../types';
|
|
11
11
|
|
|
12
|
-
export const ProjectCard = ({
|
|
12
|
+
export const ProjectCard = ({
|
|
13
|
+
classNames,
|
|
14
|
+
role,
|
|
15
|
+
subject: { name, image, description },
|
|
16
|
+
}: PreviewProps<DataType.Project>) => {
|
|
13
17
|
return (
|
|
14
|
-
<div role='none' className={mx(
|
|
18
|
+
<div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
|
|
15
19
|
{image && <img className='is-full bs-auto' src={image} alt={name} />}
|
|
16
20
|
<h2 className={mx(previewTitle, 'pli-3 mlb-3')}>{name}</h2>
|
|
17
21
|
{description && <p className='pli-3 line-clamp-2 mlb-3'>{description}</p>}
|
package/src/types.ts
CHANGED
|
@@ -10,6 +10,7 @@ import { type ThemedClassName } from '@dxos/react-ui';
|
|
|
10
10
|
export type PreviewProps<T extends object> = PropsWithChildren<
|
|
11
11
|
ThemedClassName<{
|
|
12
12
|
subject: T;
|
|
13
|
+
role: string;
|
|
13
14
|
}>
|
|
14
15
|
>;
|
|
15
16
|
|
|
@@ -31,7 +32,9 @@ export type PreviewProps<T extends object> = PropsWithChildren<
|
|
|
31
32
|
* </Card.Body>
|
|
32
33
|
* </Card.Root>
|
|
33
34
|
*/
|
|
34
|
-
export const
|
|
35
|
+
export const popoverCard = 'popover-consistent-width rounded-lg overflow-hidden';
|
|
36
|
+
export const defaultCard = '';
|
|
37
|
+
export const kanbanCardWithoutPoster = 'pbs-[--rail-action]';
|
|
35
38
|
export const previewTitle = 'text-lg font-medium line-clamp-2';
|
|
36
39
|
export const previewProse = 'pli-3 mlb-3';
|
|
37
40
|
export const previewChrome = 'pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full';
|