@dxos/plugin-preview 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/src/Preview.stories.tsx

@@ -11,7 +11,7 @@ import { create } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { makeRef } from '@dxos/react-client/echo';
 import { Icon, Popover } from '@dxos/react-ui';
-import { Contact, Organization, Project } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ContactCard, OrganizationCard, ProjectCard } from './components';
@@ -40,7 +40,7 @@ const meta: Meta<StoryProps> = {
       </Popover.Root>
     );
   },
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: {
     layout: 'centered',
     translations,
@@ -52,7 +52,7 @@ export default meta;
 const omitImage = ({ image, ...rest }: any) => rest;
 
 const data = (() => {
-  const organization = create(Organization, {
+  const organization = create(DataType.Organization, {
     name: faker.company.name(),
     image:
       '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 = (() => {
     description: faker.lorem.paragraph(),
   });
 
-  const contact = create(Contact, {
+  const contact = create(DataType.Person, {
     fullName: faker.person.fullName(),
     image:
       '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 = (() => {
     ],
   });
 
-  const project = create(Project, {
+  const project = create(DataType.Project, {
     name: faker.person.fullName(),
     image: 'https://dxos.network/dxos-logotype-blue.png',
     description: faker.lorem.paragraph(),
@@ -95,6 +95,7 @@ export const ContactWithImage = {
     Component: ContactCard,
     icon: 'ph--user--regular',
     subject: data.contact,
+    role: 'popover',
   },
 };
 
@@ -103,6 +104,7 @@ export const ContactNoImage = {
     Component: ContactCard,
     icon: 'ph--user--regular',
     subject: omitImage(data.contact),
+    role: 'popover',
   },
 };
 
@@ -111,6 +113,7 @@ export const OrganizationWithImage = {
     Component: OrganizationCard,
     icon: 'ph--building-office--regular',
     subject: data.organization,
+    role: 'popover',
   },
 };
 
@@ -119,6 +122,7 @@ export const OrganizationNoImage = {
     Component: OrganizationCard,
     icon: 'ph--building-office--regular',
     subject: omitImage(data.organization),
+    role: 'popover',
   },
 };
 
@@ -127,6 +131,7 @@ export const ProjectWithImage = {
     Component: ProjectCard,
     icon: 'ph--building--regular',
     subject: data.project,
+    role: 'popover',
   },
 };
 
@@ -135,5 +140,6 @@ export const ProjectNoImage = {
     Component: ProjectCard,
     icon: 'ph--building--regular',
     subject: omitImage(data.project),
+    role: 'popover',
   },
 };

package/src/PreviewPlugin.tsx

@@ -25,7 +25,7 @@ import {
   getSpace,
   isEchoObject,
   parseId,
-  type ReactiveEchoObject,
+  type AnyLiveObject,
   type Space,
 } from '@dxos/client/echo';
 import { isInstanceOf } from '@dxos/echo-schema';
@@ -38,7 +38,7 @@ import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/react-ui-edit
 import { Form } from '@dxos/react-ui-form';
 import { TableType } from '@dxos/react-ui-table';
 import { descriptionMessage } from '@dxos/react-ui-theme';
-import { Contact, Organization, Project } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { ContactCard, OrganizationCard, ProjectCard } from './components';
 import { meta, PREVIEW_PLUGIN } from './meta';
@@ -71,7 +71,7 @@ export const PreviewPlugin = () =>
     defineModule({
       id: `${meta.id}/module/schema`,
       activatesOn: ClientEvents.SetupSchema,
-      activate: () => [contributes(ClientCapabilities.Schema, [Contact, Organization])],
+      activate: () => [contributes(ClientCapabilities.Schema, [DataType.Person, DataType.Organization])],
     }),
     defineModule({
       id: `${meta.id}/module/preview-popover`,
@@ -79,9 +79,9 @@ export const PreviewPlugin = () =>
       activate: (context) => {
         // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.
         const handleDxRefTagActivate = async ({ ref, label, trigger }: DxRefTagActivate) => {
-          const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-          const client = context.requestCapability(ClientCapabilities.Client);
-          const [layout] = context.requestCapabilities(Capabilities.Layout);
+          const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+          const client = context.getCapability(ClientCapabilities.Client);
+          const [layout] = context.getCapabilities(Capabilities.Layout);
           const { spaceId } = parseId(layout.workspace);
           const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
           const result = await handlePreviewLookup(client, space, { ref, label });
@@ -128,15 +128,15 @@ export const PreviewPlugin = () =>
           createSurface({
             id: `${PREVIEW_PLUGIN}/schema-popover`,
             role: ['popover', 'card--kanban'],
-            filter: (data): data is { subject: Contact } => isInstanceOf(Contact, data.subject),
+            filter: (data): data is { subject: DataType.Person } => isInstanceOf(DataType.Person, data.subject),
             component: ({ data, role }) => {
               const { dispatchPromise: dispatch } = useIntentDispatcher();
               const handleOrgClick = useCallback(
-                async (org: Organization) => {
+                async (org: DataType.Organization) => {
                   const space = getSpace(org);
-                  const tablesQuery = await space?.db.query(Filter.schema(TableType)).run();
+                  const tablesQuery = await space?.db.query(Filter.type(TableType)).run();
                   const currentSpaceOrgTable = tablesQuery?.objects.find((table) => {
-                    return table.view?.target?.query?.typename === Organization.typename;
+                    return table.view?.target?.query?.typename === DataType.Organization.typename;
                   });
                   await dispatch(
                     createIntent(LayoutAction.UpdatePopover, {
@@ -169,7 +169,8 @@ export const PreviewPlugin = () =>
           createSurface({
             id: `${PREVIEW_PLUGIN}/schema-popover`,
             role: ['popover', 'card--kanban'],
-            filter: (data): data is { subject: Organization } => isInstanceOf(Organization, data.subject),
+            filter: (data): data is { subject: DataType.Organization } =>
+              isInstanceOf(DataType.Organization, data.subject),
             component: ({ data, role }) => (
               <OrganizationCard subject={data.subject} role={role}>
                 {role === 'popover' && <Surface role='related' data={data} />}
@@ -179,7 +180,7 @@ export const PreviewPlugin = () =>
           createSurface({
             id: `${PREVIEW_PLUGIN}/schema-popover`,
             role: ['popover', 'card--kanban'],
-            filter: (data): data is { subject: Project } => isInstanceOf(Project, data.subject),
+            filter: (data): data is { subject: DataType.Project } => isInstanceOf(DataType.Project, data.subject),
             component: ({ data, role }) => <ProjectCard subject={data.subject} role={role} />,
           }),
 
@@ -190,7 +191,7 @@ export const PreviewPlugin = () =>
             id: `${PREVIEW_PLUGIN}/fallback-popover`,
             role: ['popover', 'card--kanban'],
             position: 'fallback',
-            filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+            filter: (data): data is { subject: AnyLiveObject<any> } => isEchoObject(data.subject),
             component: ({ data, role }) => {
               const schema = getSchema(data.subject);
               const { t } = useTranslation(PREVIEW_PLUGIN);
@@ -202,7 +203,7 @@ export const PreviewPlugin = () =>
                 <Form
                   schema={schema}
                   values={data.subject}
-                  readonly
+                  readonly={role === 'popover'}
                   {...(role === 'card--kanban' && { classNames: kanbanCardWithoutPoster })}
                 />
               );

package/src/components/ContactCard.tsx

@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 
 import { Icon, Avatar, Button } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { type Contact, type Organization } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
 
@@ -16,7 +16,7 @@ export const ContactCard = ({
   role,
   subject: { fullName, image, organization, emails },
   onOrgClick,
-}: PreviewProps<Contact> & { onOrgClick?: (org: Organization) => void }) => {
+}: PreviewProps<DataType.Person> & { onOrgClick?: (org: DataType.Organization) => void }) => {
   const organizationName = organization && typeof organization === 'object' ? organization.target?.name : organization;
   return (
     <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>

package/src/components/OrganizationCard.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { Icon } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { type Organization } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
 
@@ -15,7 +15,7 @@ export const OrganizationCard = ({
   classNames,
   subject: { name, image, description, website },
   role,
-}: PreviewProps<Organization>) => {
+}: PreviewProps<DataType.Organization>) => {
   return (
     <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
       {image ? (

package/src/components/ProjectCard.tsx

@@ -5,11 +5,15 @@
 import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
-import { type Project } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { type PreviewProps, popoverCard, previewTitle, defaultCard } from '../types';
 
-export const ProjectCard = ({ classNames, role, subject: { name, image, description } }: PreviewProps<Project>) => {
+export const ProjectCard = ({
+  classNames,
+  role,
+  subject: { name, image, description },
+}: PreviewProps<DataType.Project>) => {
   return (
     <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
       {image && <img className='is-full bs-auto' src={image} alt={name} />}