@dxos/plugin-masonry 0.8.4-main.ae835ea → 0.8.4-main.c85a9c8dae

package/src/capabilities/react-surface.tsx

@@ -1,25 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
-import { DataType } from '@dxos/schema';
-
-import { MasonryContainer } from '../components/MasonryContainer';
-import { meta } from '../meta';
-import { Masonry } from '../types';
-
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: meta.id,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: DataType.View } =>
-        Obj.instanceOf(DataType.View, data.subject) &&
-        Obj.instanceOf(Masonry.Masonry, data.subject.presentation?.target),
-      component: ({ data, role }) => <MasonryContainer view={data.subject} role={role} />,
-    }),
-  ]);

package/src/components/MasonryContainer.stories.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
-import { SpacePlugin } from '@dxos/plugin-space';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
-import { faker } from '@dxos/random';
-import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
-import { withTheme } from '@dxos/react-ui/testing';
-import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
-import { createObjectFactory } from '@dxos/schema/testing';
-
-import { Masonry } from '../types';
-
-import { MasonryContainer } from './MasonryContainer';
-
-faker.seed(0);
-
-const StorybookMasonry = () => {
-  const spaces = useSpaces();
-  const space = spaces[spaces.length - 1];
-  const views = useQuery(space, Filter.type(DataType.View));
-  const [view, setView] = useState<DataType.View>();
-  useEffect(() => {
-    if (views.length && !view) {
-      const view = views[0];
-      setView(view);
-    }
-  }, [views]);
-
-  return view ? <MasonryContainer view={view} role='story' /> : null;
-};
-
-const meta = {
-  title: 'plugins/plugin-masonry/Masonry',
-  component: StorybookMasonry,
-  render: () => <StorybookMasonry />,
-  decorators: [
-    withTheme,
-    withPluginManager({
-      plugins: [
-        ClientPlugin({
-          types: [DataType.Organization, DataType.View, Masonry.Masonry],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-            const space = await client.spaces.create();
-            await space.waitUntilReady();
-
-            const { view } = await Masonry.makeView({ space, client, typename: DataType.Organization.typename });
-            space.db.add(view);
-
-            const factory = createObjectFactory(space.db, faker as any);
-            await factory([{ type: DataType.Organization, count: 64 }]);
-          },
-        }),
-        SpacePlugin({}),
-        IntentPlugin(),
-        SettingsPlugin(),
-        ThemePlugin({ tx: defaultTx }),
-        PreviewPlugin(),
-        StorybookLayoutPlugin({}),
-      ],
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/components/MasonryContainer.tsx

@@ -1,69 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { Surface } from '@dxos/app-framework';
-import { Filter, Type } from '@dxos/echo';
-import { EchoSchema, type TypedObject } from '@dxos/echo/internal';
-import { useGlobalFilteredObjects } from '@dxos/plugin-search';
-import { useClient } from '@dxos/react-client';
-import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { Masonry } from '@dxos/react-ui-masonry';
-import { type DataType, ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
-
-const Item = ({ data }: { data: any }) => {
-  return <Surface role='card' limit={1} data={{ subject: data }} />;
-};
-
-export const MasonryContainer = ({ view, role }: { view: DataType.View; role: string }) => {
-  const client = useClient();
-  const space = getSpace(view);
-  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
-
-  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ProjectionModel>();
-
-  const jsonSchema = useMemo(() => {
-    if (!cardSchema) return undefined;
-    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
-  }, [cardSchema]);
-
-  useEffect(() => {
-    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
-    if (staticSchema) {
-      setCardSchema(() => staticSchema as TypedObject<any, any>);
-    }
-    if (!staticSchema && typename && space) {
-      const query = space.db.schemaRegistry.query({ typename });
-      const unsubscribe = query.subscribe(
-        () => {
-          const [schema] = query.results;
-          if (schema) {
-            setCardSchema(schema);
-          }
-        },
-        { fire: true },
-      );
-      return unsubscribe;
-    }
-  }, [typename, space]);
-
-  useEffect(() => {
-    if (jsonSchema) {
-      setProjection(new ProjectionModel(jsonSchema, view.projection));
-    }
-  }, [view.projection, JSON.stringify(jsonSchema)]);
-
-  const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  return (
-    <Masonry.Root
-      items={filteredObjects}
-      render={Item as any}
-      classNames='is-full max-is-full bs-full max-bs-full overflow-y-auto p-4'
-    />
-  );
-};