@dxos/plugin-preview 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

package/dist/types/src/Preview.stories.d.ts

@@ -0,0 +1,203 @@
+import '@dxos-theme';
+import { type Meta } from '@storybook/react';
+import React, { type FC } from 'react';
+import { DataType } from '@dxos/schema';
+type StoryProps = {
+    Component: FC<{
+        subject: any;
+    }>;
+    icon: string;
+    subject: any;
+};
+declare const meta: Meta<StoryProps>;
+export default meta;
+export declare const ContactWithImage: {
+    args: {
+        Component: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<DataType.Person> & {
+            onOrgClick?: (org: DataType.Organization) => void;
+        }) => React.JSX.Element;
+        icon: string;
+        subject: Omit<{
+            readonly id: string;
+            fullName?: string | undefined;
+            preferredName?: string | undefined;
+            nickname?: string | undefined;
+            image?: string | undefined;
+            organization?: import("@dxos/echo-schema").Ref<{
+                readonly id: string;
+                description?: string | undefined;
+                name?: string | undefined;
+                status?: "prospect" | "qualified" | "active" | "commit" | "reject" | undefined;
+                image?: string | undefined;
+                website?: string | undefined;
+            }> | undefined;
+            jobTitle?: string | undefined;
+            department?: string | undefined;
+            notes?: string | undefined;
+            emails?: {
+                readonly label?: string | undefined;
+                readonly value: string;
+            }[] | undefined;
+            identities?: {
+                readonly label?: string | undefined;
+                readonly value: string;
+            }[] | undefined;
+            phoneNumbers?: {
+                readonly label?: string | undefined;
+                readonly value: string;
+            }[] | undefined;
+            addresses?: {
+                readonly label?: string | undefined;
+                readonly value: {
+                    readonly street?: string | undefined;
+                    readonly extended?: string | undefined;
+                    readonly locality?: string | undefined;
+                    readonly region?: string | undefined;
+                    readonly postalCode?: string | undefined;
+                    readonly postOfficeBoxNumber?: string | undefined;
+                    readonly country?: string | undefined;
+                };
+            }[] | undefined;
+            urls?: {
+                readonly label?: string | undefined;
+                readonly value: string;
+            }[] | undefined;
+            birthday?: {
+                toString: () => string;
+                toDateString: () => string;
+                toTimeString: () => string;
+                toLocaleString: {
+                    (): string;
+                    (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                    (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+                };
+                toLocaleDateString: {
+                    (): string;
+                    (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                    (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+                };
+                toLocaleTimeString: {
+                    (): string;
+                    (locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
+                    (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions): string;
+                };
+                valueOf: () => number;
+                getTime: () => number;
+                getFullYear: () => number;
+                getUTCFullYear: () => number;
+                getMonth: () => number;
+                getUTCMonth: () => number;
+                getDate: () => number;
+                getUTCDate: () => number;
+                getDay: () => number;
+                getUTCDay: () => number;
+                getHours: () => number;
+                getUTCHours: () => number;
+                getMinutes: () => number;
+                getUTCMinutes: () => number;
+                getSeconds: () => number;
+                getUTCSeconds: () => number;
+                getMilliseconds: () => number;
+                getUTCMilliseconds: () => number;
+                getTimezoneOffset: () => number;
+                setTime: (time: number) => number;
+                setMilliseconds: (ms: number) => number;
+                setUTCMilliseconds: (ms: number) => number;
+                setSeconds: (sec: number, ms?: number) => number;
+                setUTCSeconds: (sec: number, ms?: number) => number;
+                setMinutes: (min: number, sec?: number, ms?: number) => number;
+                setUTCMinutes: (min: number, sec?: number, ms?: number) => number;
+                setHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+                setUTCHours: (hours: number, min?: number, sec?: number, ms?: number) => number;
+                setDate: (date: number) => number;
+                setUTCDate: (date: number) => number;
+                setMonth: (month: number, date?: number) => number;
+                setUTCMonth: (month: number, date?: number) => number;
+                setFullYear: (year: number, month?: number, date?: number) => number;
+                setUTCFullYear: (year: number, month?: number, date?: number) => number;
+                toUTCString: () => string;
+                toISOString: () => string;
+                toJSON: (key?: any) => string;
+                [Symbol.toPrimitive]: {
+                    (hint: "default"): string;
+                    (hint: "string"): string;
+                    (hint: "number"): number;
+                    (hint: string): string | number;
+                };
+            } | undefined;
+            fields?: {
+                readonly label: string;
+                readonly value: string;
+                readonly category?: string | undefined;
+            }[] | undefined;
+        }, "id"> & {
+            id?: string;
+        } & {
+            id: string;
+        };
+        role: string;
+    };
+};
+export declare const ContactNoImage: {
+    args: {
+        Component: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<DataType.Person> & {
+            onOrgClick?: (org: DataType.Organization) => void;
+        }) => React.JSX.Element;
+        icon: string;
+        subject: any;
+        role: string;
+    };
+};
+export declare const OrganizationWithImage: {
+    args: {
+        Component: ({ children, classNames, subject: { name, image, description, website }, role, }: import("./types").PreviewProps<DataType.Organization>) => React.JSX.Element;
+        icon: string;
+        subject: Omit<{
+            readonly id: string;
+            image?: string | undefined;
+            status?: "prospect" | "qualified" | "active" | "commit" | "reject" | undefined;
+            name?: string | undefined;
+            description?: string | undefined;
+            website?: string | undefined;
+        }, "id"> & {
+            id?: string;
+        } & {
+            id: string;
+        };
+        role: string;
+    };
+};
+export declare const OrganizationNoImage: {
+    args: {
+        Component: ({ children, classNames, subject: { name, image, description, website }, role, }: import("./types").PreviewProps<DataType.Organization>) => React.JSX.Element;
+        icon: string;
+        subject: any;
+        role: string;
+    };
+};
+export declare const ProjectWithImage: {
+    args: {
+        Component: ({ classNames, role, subject: { name, image, description }, }: import("./types").PreviewProps<DataType.Project>) => React.JSX.Element;
+        icon: string;
+        subject: Omit<{
+            readonly id: string;
+            image?: string | undefined;
+            name: string;
+            description?: string | undefined;
+        }, "id"> & {
+            id?: string;
+        } & {
+            id: string;
+        };
+        role: string;
+    };
+};
+export declare const ProjectNoImage: {
+    args: {
+        Component: ({ classNames, role, subject: { name, image, description }, }: import("./types").PreviewProps<DataType.Project>) => React.JSX.Element;
+        icon: string;
+        subject: any;
+        role: string;
+    };
+};
+//# sourceMappingURL=Preview.stories.d.ts.map

package/dist/types/src/Preview.stories.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/PreviewPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa,4CA6CtB,CAAC"}
+{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"AA+DA,eAAO,MAAM,aAAa,4CAsJtB,CAAC"}

package/dist/types/src/components/ContactCard.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type DataType } from '@dxos/schema';
+import { type PreviewProps } from '../types';
+export declare const ContactCard: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: PreviewProps<DataType.Person> & {
+    onOrgClick?: (org: DataType.Organization) => void;
+}) => React.JSX.Element;
+//# sourceMappingURL=ContactCard.d.ts.map

package/dist/types/src/components/ContactCard.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/components/OrganizationCard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type DataType } from '@dxos/schema';
+import { type PreviewProps } from '../types';
+export declare const OrganizationCard: ({ children, classNames, subject: { name, image, description, website }, role, }: PreviewProps<DataType.Organization>) => React.JSX.Element;
+//# sourceMappingURL=OrganizationCard.d.ts.map

package/dist/types/src/components/OrganizationCard.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/components/ProjectCard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type DataType } from '@dxos/schema';
+import { type PreviewProps } from '../types';
+export declare const ProjectCard: ({ classNames, role, subject: { name, image, description }, }: PreviewProps<DataType.Project>) => React.JSX.Element;
+//# sourceMappingURL=ProjectCard.d.ts.map

package/dist/types/src/components/ProjectCard.d.ts.map

@@ -0,0 +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"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ContactCard';
+export * from './OrganizationCard';
+export * from './ProjectCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from './meta';
+export * from './types';
 export * from './PreviewPlugin';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,iBAAiB,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    'en-US': {
+        "dxos.org/plugin/preview": {
+            'unable to create preview message': string;
+        };
+    };
+}[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;AAMA,wBAQE"}

package/dist/types/src/types.d.ts

@@ -0,0 +1,25 @@
+import { type PropsWithChildren } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type PreviewProps<T extends object> = PropsWithChildren<ThemedClassName<{
+    subject: T;
+    role: string;
+}>>;
+/**
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>
+ *     <Card.Action>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <Card.Image>
+ *     <Form />
+ *   </Card.Body>
+ * </Card.Root>
+ */
+export declare const popoverCard = "popover-consistent-width rounded-lg overflow-hidden";
+export declare const defaultCard = "";
+export declare const kanbanCardWithoutPoster = "pbs-[--rail-action]";
+export declare const previewTitle = "text-lg font-medium line-clamp-2";
+export declare const previewProse = "pli-3 mlb-3";
+export declare const previewChrome = "pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full";
+//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -0,0 +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"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-preview",
-  "version": "0.8.2-main.12df754",
+  "version": "0.8.2-main.30e4dbb",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,21 +23,33 @@
     "src"
   ],
   "dependencies": {
-    "@dxos/app-framework": "0.8.2-main.12df754",
-    "@dxos/client": "0.8.2-main.12df754",
-    "@dxos/async": "0.8.2-main.12df754",
-    "@dxos/keys": "0.8.2-main.12df754",
-    "@dxos/lit-ui": "0.8.2-main.12df754",
-    "@dxos/log": "0.8.2-main.12df754",
-    "@dxos/react-ui-editor": "0.8.2-main.12df754",
-    "@dxos/plugin-client": "0.8.2-main.12df754"
+    "effect": "3.14.21",
+    "@dxos/client": "0.8.2-main.30e4dbb",
+    "@dxos/app-framework": "0.8.2-main.30e4dbb",
+    "@dxos/echo-schema": "0.8.2-main.30e4dbb",
+    "@dxos/keys": "0.8.2-main.30e4dbb",
+    "@dxos/log": "0.8.2-main.30e4dbb",
+    "@dxos/lit-ui": "0.8.2-main.30e4dbb",
+    "@dxos/plugin-client": "0.8.2-main.30e4dbb",
+    "@dxos/react-client": "0.8.2-main.30e4dbb",
+    "@dxos/async": "0.8.2-main.30e4dbb",
+    "@dxos/react-ui": "0.8.2-main.30e4dbb",
+    "@dxos/react-ui-editor": "0.8.2-main.30e4dbb",
+    "@dxos/react-ui-form": "0.8.2-main.30e4dbb",
+    "@dxos/react-ui-table": "0.8.2-main.30e4dbb",
+    "@dxos/react-ui-theme": "0.8.2-main.30e4dbb",
+    "@dxos/schema": "0.8.2-main.30e4dbb",
+    "@dxos/util": "0.8.2-main.30e4dbb"
   },
   "devDependencies": {
+    "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7"
+    "vite": "5.4.7",
+    "@dxos/random": "0.8.2-main.30e4dbb"
   },
   "peerDependencies": {
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },

package/src/Preview.stories.tsx

@@ -0,0 +1,145 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { type FC } from 'react';
+
+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 { DataType } from '@dxos/schema';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ContactCard, OrganizationCard, ProjectCard } from './components';
+import translations from './translations';
+
+faker.seed(1234);
+
+type StoryProps = {
+  Component: FC<{ subject: any }>;
+  icon: string;
+  subject: any;
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'plugins/plugin-preview/Preview',
+  render: ({ Component, icon, ...args }) => {
+    return (
+      <Popover.Root open>
+        <Popover.Content>
+          <Component {...args} />
+          <Popover.Arrow />
+        </Popover.Content>
+        <Popover.Trigger>
+          <Icon icon={icon} size={5} />
+        </Popover.Trigger>
+      </Popover.Root>
+    );
+  },
+  decorators: [withTheme, withLayout()],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+const omitImage = ({ image, ...rest }: any) => rest;
+
+const data = (() => {
+  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',
+    website: faker.internet.url(),
+    description: faker.lorem.paragraph(),
+  });
+
+  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',
+    organization: makeRef(organization),
+    emails: [
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+    ],
+  });
+
+  const project = create(DataType.Project, {
+    name: faker.person.fullName(),
+    image: 'https://dxos.network/dxos-logotype-blue.png',
+    description: faker.lorem.paragraph(),
+  });
+
+  return { organization, contact, project };
+})();
+
+export const ContactWithImage = {
+  args: {
+    Component: ContactCard,
+    icon: 'ph--user--regular',
+    subject: data.contact,
+    role: 'popover',
+  },
+};
+
+export const ContactNoImage = {
+  args: {
+    Component: ContactCard,
+    icon: 'ph--user--regular',
+    subject: omitImage(data.contact),
+    role: 'popover',
+  },
+};
+
+export const OrganizationWithImage = {
+  args: {
+    Component: OrganizationCard,
+    icon: 'ph--building-office--regular',
+    subject: data.organization,
+    role: 'popover',
+  },
+};
+
+export const OrganizationNoImage = {
+  args: {
+    Component: OrganizationCard,
+    icon: 'ph--building-office--regular',
+    subject: omitImage(data.organization),
+    role: 'popover',
+  },
+};
+
+export const ProjectWithImage = {
+  args: {
+    Component: ProjectCard,
+    icon: 'ph--building--regular',
+    subject: data.project,
+    role: 'popover',
+  },
+};
+
+export const ProjectNoImage = {
+  args: {
+    Component: ProjectCard,
+    icon: 'ph--building--regular',
+    subject: omitImage(data.project),
+    role: 'popover',
+  },
+};