@dxos/plugin-preview 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

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 (82) hide show
  1. package/dist/lib/browser/{chunk-Z73ENKLE.mjs → chunk-XKCIQK3C.mjs} +2 -4
  2. package/dist/lib/browser/chunk-XKCIQK3C.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +8 -7
  4. package/dist/lib/browser/index.mjs.map +2 -2
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/{preview-popover-HC6LHWXZ.mjs → preview-popover-RKHENTFP.mjs} +6 -5
  7. package/dist/lib/browser/preview-popover-RKHENTFP.mjs.map +7 -0
  8. package/dist/lib/browser/react-surface-CPGRW3OV.mjs +493 -0
  9. package/dist/lib/browser/react-surface-CPGRW3OV.mjs.map +7 -0
  10. package/dist/lib/node-esm/{chunk-2ORSL4GJ.mjs → chunk-L3IZVX56.mjs} +2 -4
  11. package/dist/lib/node-esm/chunk-L3IZVX56.mjs.map +7 -0
  12. package/dist/lib/node-esm/index.mjs +8 -7
  13. package/dist/lib/node-esm/index.mjs.map +2 -2
  14. package/dist/lib/node-esm/meta.json +1 -1
  15. package/dist/lib/node-esm/{preview-popover-ROGTBCTT.mjs → preview-popover-TZKX67EY.mjs} +6 -5
  16. package/dist/lib/node-esm/preview-popover-TZKX67EY.mjs.map +7 -0
  17. package/dist/lib/node-esm/react-surface-XJKNWCPR.mjs +494 -0
  18. package/dist/lib/node-esm/react-surface-XJKNWCPR.mjs.map +7 -0
  19. package/dist/types/src/PreviewPlugin.d.ts +1 -1
  20. package/dist/types/src/PreviewPlugin.d.ts.map +1 -1
  21. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  22. package/dist/types/src/cards/ContactCard.d.ts +5 -0
  23. package/dist/types/src/cards/ContactCard.d.ts.map +1 -0
  24. package/dist/types/src/{components → cards}/OrganizationCard.d.ts +1 -1
  25. package/dist/types/src/cards/OrganizationCard.d.ts.map +1 -0
  26. package/dist/types/src/cards/ProjectCard.d.ts +5 -0
  27. package/dist/types/src/cards/ProjectCard.d.ts.map +1 -0
  28. package/dist/types/src/cards/TaskCard.d.ts +5 -0
  29. package/dist/types/src/cards/TaskCard.d.ts.map +1 -0
  30. package/dist/types/src/cards/index.d.ts +5 -0
  31. package/dist/types/src/cards/index.d.ts.map +1 -0
  32. package/dist/types/src/components/CardComponents.d.ts +16 -0
  33. package/dist/types/src/components/CardComponents.d.ts.map +1 -0
  34. package/dist/types/src/components/CardSubjectMenu.d.ts +3 -5
  35. package/dist/types/src/components/CardSubjectMenu.d.ts.map +1 -1
  36. package/dist/types/src/components/index.d.ts +2 -3
  37. package/dist/types/src/components/index.d.ts.map +1 -1
  38. package/dist/types/src/meta.d.ts +0 -1
  39. package/dist/types/src/meta.d.ts.map +1 -1
  40. package/dist/types/src/stories/Card.stories.d.ts +4 -1
  41. package/dist/types/src/stories/Card.stories.d.ts.map +1 -1
  42. package/dist/types/src/stories/testing.d.ts +2 -1
  43. package/dist/types/src/stories/testing.d.ts.map +1 -1
  44. package/dist/types/src/translations.d.ts +3 -0
  45. package/dist/types/src/translations.d.ts.map +1 -1
  46. package/dist/types/src/types.d.ts +5 -2
  47. package/dist/types/src/types.d.ts.map +1 -1
  48. package/dist/types/tsconfig.tsbuildinfo +1 -1
  49. package/package.json +32 -32
  50. package/src/PreviewPlugin.tsx +22 -23
  51. package/src/capabilities/preview-popover.ts +3 -3
  52. package/src/capabilities/react-surface.tsx +46 -77
  53. package/src/cards/ContactCard.tsx +58 -0
  54. package/src/cards/OrganizationCard.tsx +25 -0
  55. package/src/{components → cards}/ProjectCard.tsx +5 -9
  56. package/src/{components → cards}/TaskCard.tsx +6 -6
  57. package/src/cards/index.ts +8 -0
  58. package/src/components/CardComponents.tsx +67 -0
  59. package/src/components/CardSubjectMenu.tsx +60 -25
  60. package/src/components/index.ts +2 -3
  61. package/src/meta.ts +1 -3
  62. package/src/stories/Card.stories.tsx +12 -9
  63. package/src/stories/testing.tsx +12 -13
  64. package/src/translations.ts +3 -0
  65. package/src/types.ts +6 -2
  66. package/dist/lib/browser/chunk-Z73ENKLE.mjs.map +0 -7
  67. package/dist/lib/browser/preview-popover-HC6LHWXZ.mjs.map +0 -7
  68. package/dist/lib/browser/react-surface-JGO43GLE.mjs +0 -381
  69. package/dist/lib/browser/react-surface-JGO43GLE.mjs.map +0 -7
  70. package/dist/lib/node-esm/chunk-2ORSL4GJ.mjs.map +0 -7
  71. package/dist/lib/node-esm/preview-popover-ROGTBCTT.mjs.map +0 -7
  72. package/dist/lib/node-esm/react-surface-Q7F36L3Z.mjs +0 -382
  73. package/dist/lib/node-esm/react-surface-Q7F36L3Z.mjs.map +0 -7
  74. package/dist/types/src/components/ContactCard.d.ts +0 -7
  75. package/dist/types/src/components/ContactCard.d.ts.map +0 -1
  76. package/dist/types/src/components/OrganizationCard.d.ts.map +0 -1
  77. package/dist/types/src/components/ProjectCard.d.ts +0 -5
  78. package/dist/types/src/components/ProjectCard.d.ts.map +0 -1
  79. package/dist/types/src/components/TaskCard.d.ts +0 -5
  80. package/dist/types/src/components/TaskCard.d.ts.map +0 -1
  81. package/src/components/ContactCard.tsx +0 -76
  82. package/src/components/OrganizationCard.tsx +0 -44
@@ -5,48 +5,49 @@
5
5
  import { Rx } from '@effect-rx/rx-react';
6
6
  import React from 'react';
7
7
 
8
- // import { useIntentDispatcher } from '@dxos/app-framework';
8
+ import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
9
9
  import { ACTION_TYPE } from '@dxos/app-graph';
10
- import { type AnyEchoObject } from '@dxos/echo-schema';
10
+ import { Obj } from '@dxos/echo';
11
+ import { SpaceAction } from '@dxos/plugin-space/types';
12
+ import { fullyQualifiedId } from '@dxos/react-client/echo';
11
13
  import { IconButton, type IconButtonProps, useTranslation } from '@dxos/react-ui';
12
- import { type ActionGraphProps, DropdownMenu, MenuProvider, useMenuActions } from '@dxos/react-ui-menu';
14
+ import {
15
+ type ActionGraphProps,
16
+ DropdownMenu,
17
+ type MenuActions,
18
+ MenuProvider,
19
+ useMenuActions,
20
+ } from '@dxos/react-ui-menu';
13
21
 
14
- const useSubjectMenuGroupItems = (subject: AnyEchoObject) => {
15
- // const { dispatchPromise: dispatch } = useIntentDispatcher();
16
- const result: ActionGraphProps = { edges: [], nodes: [] };
17
- result.nodes.push({
18
- type: ACTION_TYPE,
19
- id: `${subject.id}/add-to-space`,
20
- data: () => console.log('[TO DO]', 'add object to space', subject),
21
- properties: {
22
- label: ['add object to space label', { ns: 'os' }],
23
- icon: 'ph--file-plus--regular',
24
- },
25
- });
26
- result.nodes.forEach(({ id: target }) => {
27
- result.edges.push({ source: 'root', target });
28
- });
29
- return useMenuActions(Rx.make(result));
30
- };
22
+ import { meta } from '../meta';
23
+ import { type PreviewProps } from '../types';
31
24
 
32
25
  /**
33
- * This is a generic menu for objects that tries to infer common actions.
26
+ * Generic menu for objects; builds menu with common actions.
34
27
  */
28
+ // TODO(burdon): Reconcile title and menu with main Card header.
35
29
  export const CardSubjectMenu = ({
36
30
  subject,
31
+ activeSpace,
37
32
  ...props
38
- }: Omit<IconButtonProps, 'icon' | 'label'> & { subject: AnyEchoObject }) => {
39
- const { t } = useTranslation('os');
40
- const menuProps = useSubjectMenuGroupItems(subject);
33
+ }: PreviewProps & Omit<IconButtonProps, 'icon' | 'label'>) => {
34
+ const { t } = useTranslation(meta.id);
35
+ const menuProps = useSubjectMenuGroupItems({ subject, activeSpace });
36
+
37
+ if (!activeSpace) {
38
+ return null;
39
+ }
40
+
41
41
  return (
42
42
  <MenuProvider {...menuProps}>
43
43
  <DropdownMenu.Root>
44
44
  <DropdownMenu.Trigger asChild>
45
45
  <IconButton
46
- iconOnly
47
46
  variant='ghost'
48
47
  icon='ph--dots-three-vertical--bold'
48
+ iconOnly
49
49
  label={t('more options label')}
50
+ size={5}
50
51
  {...props}
51
52
  />
52
53
  </DropdownMenu.Trigger>
@@ -54,3 +55,37 @@ export const CardSubjectMenu = ({
54
55
  </MenuProvider>
55
56
  );
56
57
  };
58
+
59
+ const useSubjectMenuGroupItems = ({ subject, activeSpace }: PreviewProps): MenuActions => {
60
+ const { dispatchPromise: dispatch } = useIntentDispatcher();
61
+ const result: ActionGraphProps = { edges: [], nodes: [] };
62
+
63
+ result.nodes.push({
64
+ type: ACTION_TYPE,
65
+ id: `${subject.id}/open`,
66
+ data: () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] })),
67
+ properties: {
68
+ label: ['open object label', { ns: meta.id }],
69
+ icon: 'ph--arrow-right--regular',
70
+ },
71
+ });
72
+
73
+ if (activeSpace && Obj.getDXN(subject).asQueueDXN()) {
74
+ result.nodes.push({
75
+ type: ACTION_TYPE,
76
+ id: `${subject.id}/add-to-space`,
77
+ // TODO(wittjosiah): Update reference to point to db object when adding?
78
+ data: () => dispatch(createIntent(SpaceAction.AddObject, { object: subject, target: activeSpace, hidden: true })),
79
+ properties: {
80
+ label: ['add object to space label', { ns: meta.id }],
81
+ icon: 'ph--file-plus--regular',
82
+ },
83
+ });
84
+ }
85
+
86
+ result.nodes.forEach(({ id: target }) => {
87
+ result.edges.push({ source: 'root', target });
88
+ });
89
+
90
+ return useMenuActions(Rx.make(result));
91
+ };
@@ -2,6 +2,5 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- export * from './ContactCard';
6
- export * from './OrganizationCard';
7
- export * from './ProjectCard';
5
+ export * from './CardComponents';
6
+ export * from './CardSubjectMenu';
package/src/meta.ts CHANGED
@@ -4,10 +4,8 @@
4
4
 
5
5
  import { type PluginMeta } from '@dxos/app-framework';
6
6
 
7
- export const PREVIEW_PLUGIN = 'dxos.org/plugin/preview';
8
-
9
7
  export const meta: PluginMeta = {
10
- id: PREVIEW_PLUGIN,
8
+ id: 'dxos.org/plugin/preview',
11
9
  name: 'Preview',
12
10
  icon: 'ph--eye--regular',
13
11
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',
@@ -2,27 +2,30 @@
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';
8
6
 
9
- import { withLayout, withTheme } from '@dxos/storybook-utils';
7
+ import { IntentPlugin } from '@dxos/app-framework';
8
+ import { withPluginManager } from '@dxos/app-framework/testing';
9
+ import { faker } from '@dxos/random';
10
+ import { withTheme } from '@dxos/react-ui/testing';
10
11
 
11
12
  import { translations } from '../translations';
12
13
 
13
14
  import { Defaultstory, createCards } from './testing';
14
15
 
16
+ faker.seed(999);
17
+
15
18
  const meta = {
16
19
  title: 'plugins/plugin-preview/Card',
17
20
  render: Defaultstory,
18
21
  decorators: [
19
- withTheme,
20
- withLayout({
21
- fullscreen: true,
22
- classNames: 'flex flex-col justify-center',
23
- }),
22
+ withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
23
+ withPluginManager({ plugins: [IntentPlugin()] }),
24
24
  ],
25
- parameters: { translations },
25
+ parameters: {
26
+ layout: 'fullscreen',
27
+ translations,
28
+ },
26
29
  tags: ['cards'],
27
30
  } satisfies Meta<typeof Defaultstory>;
28
31
 
@@ -9,13 +9,10 @@ import { faker } from '@dxos/random';
9
9
  import { CardContainer } from '@dxos/react-ui-stack/testing';
10
10
  import { DataType } from '@dxos/schema';
11
11
 
12
- import { ContactCard, OrganizationCard, ProjectCard } from '../components';
13
- import { TaskCard } from '../components/TaskCard';
12
+ import { ContactCard, OrganizationCard, ProjectCard, TaskCard } from '../cards';
14
13
  import { type PreviewProps } from '../types';
15
14
 
16
- faker.seed(1234);
17
-
18
- type CardProps<T extends object> = {
15
+ type CardProps<T extends Obj.Any> = {
19
16
  Component: FC<PreviewProps<T>>;
20
17
  subject: T;
21
18
  icon?: string;
@@ -29,14 +26,16 @@ export type DefaultstoryProps = {
29
26
 
30
27
  export const Defaultstory = ({ role, cards }: DefaultstoryProps) => {
31
28
  return (
32
- <div className='grid grid-cols-4'>
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>
38
- </div>
39
- ))}
29
+ <div className='flex bs-full'>
30
+ <div className='flex shrink-0 gap-8 overflow-x-auto pbe-4'>
31
+ {cards.map(({ Component, icon, image, subject }, i) => (
32
+ <div key={i} className='flex is-[24rem] justify-center'>
33
+ <CardContainer icon={icon} role={role}>
34
+ <Component role={role} subject={image ? subject : omitImage(subject)} />
35
+ </CardContainer>
36
+ </div>
37
+ ))}
38
+ </div>
40
39
  </div>
41
40
  );
42
41
  };
@@ -14,6 +14,9 @@ export const translations = [
14
14
  'todo label': 'To do',
15
15
  'in-progress label': 'In progress',
16
16
  'done label': 'Done',
17
+ 'open object label': 'Open',
18
+ 'add object to space label': 'Add to space',
19
+ 'more options label': 'More options',
17
20
  },
18
21
  },
19
22
  },
package/src/types.ts CHANGED
@@ -2,10 +2,14 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { type Schema } from 'effect';
6
5
  import { type PropsWithChildren } from 'react';
7
6
 
8
- export type PreviewProps<T extends Schema.Schema.Type<any>> = PropsWithChildren<{
7
+ import { type Obj } from '@dxos/echo';
8
+ import { type Space } from '@dxos/react-client/echo';
9
+
10
+ export type PreviewProps<T extends Obj.Any = Obj.Any> = PropsWithChildren<{
9
11
  subject: T;
10
12
  role?: string;
13
+ activeSpace?: Space;
14
+ onSelect?: (obj: Obj.Any) => void;
11
15
  }>;
@@ -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,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/capabilities/preview-popover.ts"],
4
- "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { addEventListener } from '@dxos/async';\nimport { type Client } from '@dxos/client';\nimport { type Space, parseId } from '@dxos/client/echo';\nimport { DXN } from '@dxos/keys';\nimport { type DxAnchorActivate } from '@dxos/lit-ui';\nimport { log } from '@dxos/log';\nimport { ClientCapabilities } from '@dxos/plugin-client';\nimport { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/react-ui-editor';\n\nconst customEventOptions = { capture: true, passive: false };\n\nconst handlePreviewLookup = async (\n client: Client,\n defaultSpace: Space,\n { ref, label }: PreviewLinkRef,\n): Promise<PreviewLinkTarget | null> => {\n try {\n const object = await defaultSpace.db.ref(DXN.parse(ref)).load();\n return { label, object };\n } catch (err) {\n return null;\n }\n};\n\nexport default (context: PluginContext) => {\n // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.\n const handleDxAnchorActivate = async ({ refId, label, trigger }: DxAnchorActivate) => {\n const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n const client = context.getCapability(ClientCapabilities.Client);\n const [layout] = context.getCapabilities(Capabilities.Layout);\n const { spaceId } = parseId(layout.workspace);\n const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;\n const result = await handlePreviewLookup(client, space, { ref: refId, label });\n if (!result) {\n return;\n }\n\n await dispatch(\n createIntent(LayoutAction.UpdatePopover, {\n part: 'popover',\n subject: result.object,\n options: {\n state: true,\n variant: 'virtual',\n anchor: trigger,\n },\n }),\n );\n };\n\n let cleanup: () => void;\n if (document.defaultView) {\n cleanup = addEventListener(\n document.defaultView,\n 'dx-anchor-activate' as any,\n handleDxAnchorActivate,\n customEventOptions,\n );\n } else {\n log.warn('No default view found');\n }\n\n return contributes(Capabilities.Null, null, () => cleanup());\n};\n"],
5
- "mappings": ";AAIA,SAASA,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,wBAAwB;AAEjC,SAAqBC,eAAe;AACpC,SAASC,WAAW;AAEpB,SAASC,WAAW;AACpB,SAASC,0BAA0B;;AAGnC,IAAMC,qBAAqB;EAAEC,SAAS;EAAMC,SAAS;AAAM;AAE3D,IAAMC,sBAAsB,OAC1BC,QACAC,cACA,EAAEC,KAAKC,MAAK,MAAkB;AAE9B,MAAI;AACF,UAAMC,SAAS,MAAMH,aAAaI,GAAGH,IAAIT,IAAIa,MAAMJ,GAAAA,CAAAA,EAAMK,KAAI;AAC7D,WAAO;MAAEJ;MAAOC;IAAO;EACzB,SAASI,KAAK;AACZ,WAAO;EACT;AACF;AAEA,IAAA,0BAAe,CAACC,YAAAA;AAEd,QAAMC,yBAAyB,OAAO,EAAEC,OAAOR,OAAOS,QAAO,MAAoB;AAC/E,UAAM,EAAEC,iBAAiBC,SAAQ,IAAKL,QAAQM,cAAc5B,aAAa6B,gBAAgB;AACzF,UAAMhB,SAASS,QAAQM,cAAcpB,mBAAmBsB,MAAM;AAC9D,UAAM,CAACC,MAAAA,IAAUT,QAAQU,gBAAgBhC,aAAaiC,MAAM;AAC5D,UAAM,EAAEC,QAAO,IAAK7B,QAAQ0B,OAAOI,SAAS;AAC5C,UAAMC,SAASF,WAAWrB,OAAOwB,OAAOC,IAAIJ,OAAAA,MAAarB,OAAOwB,OAAOE;AACvE,UAAMC,SAAS,MAAM5B,oBAAoBC,QAAQuB,OAAO;MAAErB,KAAKS;MAAOR;IAAM,CAAA;AAC5E,QAAI,CAACwB,QAAQ;AACX;IACF;AAEA,UAAMb,SACJxB,aAAaF,aAAawC,eAAe;MACvCC,MAAM;MACNC,SAASH,OAAOvB;MAChB2B,SAAS;QACPC,OAAO;QACPC,SAAS;QACTC,QAAQtB;MACV;IACF,CAAA,CAAA;EAEJ;AAEA,MAAIuB;AACJ,MAAIC,SAASC,aAAa;AACxBF,cAAU5C,iBACR6C,SAASC,aACT,sBACA3B,wBACAd,kBAAAA;EAEJ,OAAO;AACLF,QAAI4C,KAAK,yBAAA,QAAA;;;;;;EACX;AAEA,SAAOjD,YAAYF,aAAaoD,MAAM,MAAM,MAAMJ,QAAAA,CAAAA;AACpD;",
6
- "names": ["Capabilities", "LayoutAction", "contributes", "createIntent", "addEventListener", "parseId", "DXN", "log", "ClientCapabilities", "customEventOptions", "capture", "passive", "handlePreviewLookup", "client", "defaultSpace", "ref", "label", "object", "db", "parse", "load", "err", "context", "handleDxAnchorActivate", "refId", "trigger", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "Client", "layout", "getCapabilities", "Layout", "spaceId", "workspace", "space", "spaces", "get", "default", "result", "UpdatePopover", "part", "subject", "options", "state", "variant", "anchor", "cleanup", "document", "defaultView", "warn", "Null"]
7
- }
@@ -1,381 +0,0 @@
1
- import {
2
- PREVIEW_PLUGIN
3
- } from "./chunk-Z73ENKLE.mjs";
4
-
5
- // src/capabilities/react-surface.tsx
6
- import { Effect } from "effect";
7
- import React5, { useCallback } from "react";
8
- import { Capabilities, LayoutAction, Surface, contributes, createIntent, createSurface, useIntentDispatcher } from "@dxos/app-framework";
9
- import { fullyQualifiedId, getSchema, getSpace } from "@dxos/client/echo";
10
- import { Filter, Obj as Obj2 } from "@dxos/echo";
11
- import { setValue } from "@dxos/echo-schema";
12
- import { AttentionAction } from "@dxos/plugin-attention/types";
13
- import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from "@dxos/plugin-deck/types";
14
- import { useQuery, useSpace } from "@dxos/react-client/echo";
15
- import { useTranslation as useTranslation2 } from "@dxos/react-ui";
16
- import { Form } from "@dxos/react-ui-form";
17
- import { Card as Card4 } from "@dxos/react-ui-stack";
18
- import { Table } from "@dxos/react-ui-table/types";
19
- import { descriptionMessage, mx as mx4 } from "@dxos/react-ui-theme";
20
- import { DataType, typenameFromQuery } from "@dxos/schema";
21
-
22
- // src/components/ContactCard.tsx
23
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
24
- import React2, { Fragment } from "react";
25
- import { Avatar, Button, Icon } from "@dxos/react-ui";
26
- import { Card, cardHeading, cardText } from "@dxos/react-ui-stack";
27
- import { mx } from "@dxos/react-ui-theme";
28
-
29
- // src/components/CardSubjectMenu.tsx
30
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
31
- import { Rx } from "@effect-rx/rx-react";
32
- import React from "react";
33
- import { ACTION_TYPE } from "@dxos/app-graph";
34
- import { IconButton, useTranslation } from "@dxos/react-ui";
35
- import { DropdownMenu, MenuProvider, useMenuActions } from "@dxos/react-ui-menu";
36
- var useSubjectMenuGroupItems = (subject) => {
37
- const result = {
38
- edges: [],
39
- nodes: []
40
- };
41
- result.nodes.push({
42
- type: ACTION_TYPE,
43
- id: `${subject.id}/add-to-space`,
44
- data: () => console.log("[TO DO]", "add object to space", subject),
45
- properties: {
46
- label: [
47
- "add object to space label",
48
- {
49
- ns: "os"
50
- }
51
- ],
52
- icon: "ph--file-plus--regular"
53
- }
54
- });
55
- result.nodes.forEach(({ id: target }) => {
56
- result.edges.push({
57
- source: "root",
58
- target
59
- });
60
- });
61
- return useMenuActions(Rx.make(result));
62
- };
63
- var CardSubjectMenu = ({ subject, ...props }) => {
64
- var _effect = _useSignals();
65
- try {
66
- const { t } = useTranslation("os");
67
- const menuProps = useSubjectMenuGroupItems(subject);
68
- return /* @__PURE__ */ React.createElement(MenuProvider, menuProps, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
69
- asChild: true
70
- }, /* @__PURE__ */ React.createElement(IconButton, {
71
- iconOnly: true,
72
- variant: "ghost",
73
- icon: "ph--dots-three-vertical--bold",
74
- label: t("more options label"),
75
- ...props
76
- }))));
77
- } finally {
78
- _effect.f();
79
- }
80
- };
81
-
82
- // src/components/ContactCard.tsx
83
- var ContactCard = ({ children, subject, onOrgClick, role }) => {
84
- var _effect = _useSignals2();
85
- try {
86
- const { fullName, image, organization, emails } = subject;
87
- const organizationName = organization && typeof organization === "object" ? organization.target?.name : organization;
88
- return /* @__PURE__ */ React2.createElement(Card.SurfaceRoot, {
89
- role
90
- }, /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement(Card.Text, {
91
- role: "group",
92
- classNames: "grid gap-3 grid-cols-[min-content_1fr]"
93
- }, /* @__PURE__ */ React2.createElement(Avatar.Content, {
94
- imgSrc: image,
95
- icon: "ph--user--regular",
96
- size: 16,
97
- hue: "neutral"
98
- }), /* @__PURE__ */ React2.createElement("div", {
99
- role: "none",
100
- className: "bs-min self-center flex items-center"
101
- }, /* @__PURE__ */ React2.createElement(Avatar.Label, {
102
- asChild: true
103
- }, /* @__PURE__ */ React2.createElement("h2", {
104
- className: mx(cardHeading, "grow")
105
- }, fullName)), /* @__PURE__ */ React2.createElement(CardSubjectMenu, {
106
- subject
107
- })))), organizationName && /* @__PURE__ */ React2.createElement(Card.Chrome, null, typeof organization === "object" && onOrgClick ? /* @__PURE__ */ React2.createElement(Button, {
108
- variant: "ghost",
109
- classNames: "gap-2 text-start",
110
- onClick: () => onOrgClick(organization.target)
111
- }, /* @__PURE__ */ React2.createElement(Icon, {
112
- icon: "ph--buildings--regular",
113
- size: 5,
114
- classNames: "text-subdued"
115
- }), /* @__PURE__ */ React2.createElement("span", {
116
- className: "min-is-0 flex-1 truncate"
117
- }, organizationName), /* @__PURE__ */ React2.createElement(Icon, {
118
- icon: "ph--arrow-right--regular"
119
- })) : /* @__PURE__ */ React2.createElement("p", {
120
- className: "dx-button gap-2",
121
- "data-variant": "ghost"
122
- }, /* @__PURE__ */ React2.createElement(Icon, {
123
- icon: "ph--buildings--regular",
124
- size: 5,
125
- classNames: "text-subdued"
126
- }), /* @__PURE__ */ React2.createElement("span", {
127
- className: "min-is-0 flex-1 truncate"
128
- }, organizationName))), emails?.length && /* @__PURE__ */ React2.createElement("dl", {
129
- className: mx(cardText, "grid gap-2 grid-cols-[min-content_1fr] [&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0")
130
- }, emails?.length && emails.map(({ label, value }) => /* @__PURE__ */ React2.createElement(Fragment, {
131
- key: value
132
- }, /* @__PURE__ */ React2.createElement("dt", null, /* @__PURE__ */ React2.createElement(Icon, {
133
- icon: "ph--at--regular",
134
- size: 5
135
- })), /* @__PURE__ */ React2.createElement("dd", {
136
- key: value,
137
- className: "break-words"
138
- }, value)))), children);
139
- } finally {
140
- _effect.f();
141
- }
142
- };
143
-
144
- // src/components/OrganizationCard.tsx
145
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
146
- import React3 from "react";
147
- import { Icon as Icon2 } from "@dxos/react-ui";
148
- import { Card as Card2, cardNoSpacing, cardSpacing } from "@dxos/react-ui-stack";
149
- import { mx as mx2 } from "@dxos/react-ui-theme";
150
- var OrganizationCard = ({ children, subject, role }) => {
151
- var _effect = _useSignals3();
152
- try {
153
- const { name, image, description, website } = subject;
154
- return /* @__PURE__ */ React3.createElement(Card2.SurfaceRoot, {
155
- role
156
- }, /* @__PURE__ */ React3.createElement(Card2.Poster, {
157
- alt: name,
158
- ...image ? {
159
- image
160
- } : {
161
- icon: "ph--building-office--regular"
162
- }
163
- }), /* @__PURE__ */ React3.createElement("div", {
164
- role: "none",
165
- className: mx2("flex items-center gap-2", cardSpacing)
166
- }, /* @__PURE__ */ React3.createElement(Card2.Heading, {
167
- classNames: cardNoSpacing
168
- }, name), /* @__PURE__ */ React3.createElement(CardSubjectMenu, {
169
- subject
170
- })), description && /* @__PURE__ */ React3.createElement(Card2.Text, {
171
- classNames: "line-clamp-2"
172
- }, description), website && /* @__PURE__ */ React3.createElement(Card2.Chrome, null, /* @__PURE__ */ React3.createElement("a", {
173
- className: "dx-button dx-focus-ring gap-2",
174
- "data-variant": "ghost",
175
- href: website,
176
- target: "_blank",
177
- rel: "noreferrer"
178
- }, /* @__PURE__ */ React3.createElement(Icon2, {
179
- icon: "ph--link--regular",
180
- size: 5,
181
- classNames: "text-subdued"
182
- }), /* @__PURE__ */ React3.createElement("span", {
183
- className: "grow"
184
- }, website), /* @__PURE__ */ React3.createElement(Icon2, {
185
- icon: "ph--arrow-square-out--regular"
186
- }))), children);
187
- } finally {
188
- _effect.f();
189
- }
190
- };
191
-
192
- // src/components/ProjectCard.tsx
193
- import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
194
- import React4 from "react";
195
- import { Obj } from "@dxos/echo";
196
- import { Card as Card3, cardNoSpacing as cardNoSpacing2, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
197
- import { mx as mx3 } from "@dxos/react-ui-theme";
198
- var ProjectCard = ({ subject, role }) => {
199
- var _effect = _useSignals4();
200
- try {
201
- const { name, image, description } = subject;
202
- return /* @__PURE__ */ React4.createElement(Card3.SurfaceRoot, {
203
- role
204
- }, image && /* @__PURE__ */ React4.createElement(Card3.Poster, {
205
- image,
206
- alt: Obj.getLabel(subject) ?? "",
207
- aspect: "auto"
208
- }), /* @__PURE__ */ React4.createElement("div", {
209
- role: "none",
210
- className: mx3("flex items-center gap-2", cardSpacing2)
211
- }, /* @__PURE__ */ React4.createElement(Card3.Heading, {
212
- classNames: cardNoSpacing2
213
- }, name), /* @__PURE__ */ React4.createElement(CardSubjectMenu, {
214
- subject
215
- })), description && /* @__PURE__ */ React4.createElement(Card3.Text, {
216
- classNames: "line-clamp-2"
217
- }, description));
218
- } finally {
219
- _effect.f();
220
- }
221
- };
222
-
223
- // src/capabilities/react-surface.tsx
224
- var react_surface_default = () => contributes(Capabilities.ReactSurface, [
225
- //
226
- // Specific schema types.
227
- //
228
- createSurface({
229
- id: `${PREVIEW_PLUGIN}/schema-popover--contact`,
230
- role: [
231
- "card--popover",
232
- "card--intrinsic",
233
- "card--transclusion",
234
- "card--extrinsic",
235
- "card"
236
- ],
237
- filter: (data) => Obj2.instanceOf(DataType.Person, data.subject),
238
- component: ({ data, role }) => {
239
- const { dispatch } = useIntentDispatcher();
240
- const space = getSpace(data.subject);
241
- const defaultSpace = useSpace();
242
- const currentSpaceOrgs = useQuery(space, Filter.type(DataType.Organization));
243
- const currentSpaceViews = useQuery(space, Filter.type(DataType.View));
244
- const defaultSpaceViews = useQuery(defaultSpace, Filter.type(DataType.View));
245
- const currentSpaceOrgTable = currentSpaceViews.find((view) => typenameFromQuery(view.query) === DataType.Organization.typename && Obj2.instanceOf(Table.Table, view.presentation.target));
246
- const defaultSpaceOrgTable = defaultSpaceViews.find((view) => typenameFromQuery(view.query) === DataType.Organization.typename && Obj2.instanceOf(Table.Table, view.presentation.target));
247
- const handleOrgClick = useCallback((org) => Effect.gen(function* () {
248
- const view = currentSpaceOrgs.includes(org) ? currentSpaceOrgTable : defaultSpaceOrgTable;
249
- yield* dispatch(createIntent(LayoutAction.UpdatePopover, {
250
- part: "popover",
251
- options: {
252
- state: false,
253
- anchorId: ""
254
- }
255
- }));
256
- if (view) {
257
- const id = fullyQualifiedId(view);
258
- yield* dispatch(createIntent(LayoutAction.Open, {
259
- part: "main",
260
- subject: [
261
- id
262
- ],
263
- options: {
264
- workspace: space?.id
265
- }
266
- }));
267
- yield* dispatch(createIntent(DeckAction.ChangeCompanion, {
268
- primary: id,
269
- companion: [
270
- id,
271
- "selected-objects"
272
- ].join(ATTENDABLE_PATH_SEPARATOR)
273
- }));
274
- yield* dispatch(createIntent(AttentionAction.Select, {
275
- contextId: id,
276
- selection: {
277
- mode: "multi",
278
- ids: [
279
- org.id
280
- ]
281
- }
282
- }));
283
- }
284
- }).pipe(Effect.runPromise), [
285
- dispatch,
286
- currentSpaceOrgs,
287
- currentSpaceOrgTable,
288
- defaultSpaceOrgTable
289
- ]);
290
- return /* @__PURE__ */ React5.createElement(ContactCard, {
291
- role,
292
- subject: data.subject,
293
- onOrgClick: handleOrgClick
294
- }, role === "card--popover" && /* @__PURE__ */ React5.createElement(Surface, {
295
- role: "related",
296
- data
297
- }));
298
- }
299
- }),
300
- createSurface({
301
- id: `${PREVIEW_PLUGIN}/schema-popover--organization`,
302
- role: [
303
- "card--popover",
304
- "card--intrinsic",
305
- "card--transclusion",
306
- "card--extrinsic",
307
- "card"
308
- ],
309
- filter: (data) => Obj2.instanceOf(DataType.Organization, data.subject),
310
- component: ({ data, role }) => /* @__PURE__ */ React5.createElement(OrganizationCard, {
311
- role,
312
- subject: data.subject
313
- }, role === "card--popover" && /* @__PURE__ */ React5.createElement(Surface, {
314
- role: "related",
315
- data
316
- }))
317
- }),
318
- createSurface({
319
- id: `${PREVIEW_PLUGIN}/schema-popover--project`,
320
- role: [
321
- "card--popover",
322
- "card--intrinsic",
323
- "card--transclusion",
324
- "card--extrinsic",
325
- "card"
326
- ],
327
- filter: (data) => Obj2.instanceOf(DataType.Project, data.subject),
328
- component: ({ data, role }) => /* @__PURE__ */ React5.createElement(ProjectCard, {
329
- subject: data.subject,
330
- role
331
- })
332
- }),
333
- //
334
- // Fallback for any object.
335
- //
336
- createSurface({
337
- id: `${PREVIEW_PLUGIN}/fallback-popover`,
338
- role: [
339
- "card--popover",
340
- "card--intrinsic",
341
- "card--transclusion",
342
- "card--extrinsic",
343
- "card"
344
- ],
345
- position: "fallback",
346
- filter: (data) => Obj2.isObject(data.subject),
347
- component: ({ data, role }) => {
348
- const schema = getSchema(data.subject);
349
- const { t } = useTranslation2(PREVIEW_PLUGIN);
350
- if (!schema) {
351
- return /* @__PURE__ */ React5.createElement("p", {
352
- className: mx4(descriptionMessage)
353
- }, t("unable to create preview message"));
354
- }
355
- const handleSave = useCallback((values, { changed }) => {
356
- const changedPaths = Object.keys(changed).filter((path) => changed[path]);
357
- for (const path of changedPaths) {
358
- const value = values[path];
359
- setValue(data.subject, path, value);
360
- }
361
- }, []);
362
- return /* @__PURE__ */ React5.createElement(Card4.SurfaceRoot, {
363
- role
364
- }, /* @__PURE__ */ React5.createElement(Form, {
365
- schema,
366
- projection: data.projection,
367
- values: data.subject,
368
- readonly: role === "card--popover" ? "static" : false,
369
- onSave: handleSave,
370
- autoSave: true,
371
- ...role === "card--intrinsic" && {
372
- outerSpacing: "blockStart-0"
373
- }
374
- }));
375
- }
376
- })
377
- ]);
378
- export {
379
- react_surface_default as default
380
- };
381
- //# sourceMappingURL=react-surface-JGO43GLE.mjs.map