@dxos/plugin-space 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/SyncStatus/Space.tsx

@@ -1,133 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type HTMLAttributes, useEffect, useState } from 'react';
-
-import { useClient } from '@dxos/react-client';
-import { type SpaceId, useSpace } from '@dxos/react-client/echo';
-import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type Progress, type PeerSyncState } from './sync-state';
-import { SPACE_PLUGIN } from '../../meta';
-import { getSpaceDisplayName } from '../../util';
-
-export const SYNC_STALLED_TIMEOUT = 5_000;
-
-// TODO(wittjosiah): Define sematic color tokens.
-const styles = {
-  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
-  barFg: 'bg-neutral-100 bg-green-500',
-  barHover: 'dark:hover:bg-green-500',
-};
-
-const useActive = (count: number) => {
-  const [current, setCurrent] = useState(count);
-  const [active, setActive] = useState(false);
-  useEffect(() => {
-    let t: NodeJS.Timeout | undefined;
-    if (count !== current) {
-      setActive(true);
-      setCurrent(count);
-      t && clearTimeout(t);
-      t = setTimeout(() => {
-        setActive(false);
-      }, SYNC_STALLED_TIMEOUT);
-    }
-
-    return () => {
-      setActive(false);
-      clearTimeout(t);
-    };
-  }, [count, current]);
-  return active;
-};
-
-export type SpaceRowContainerProps = Omit<SpaceRowProps, 'spaceName'>;
-
-export const SpaceRowContainer = ({ spaceId, state }: SpaceRowContainerProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const client = useClient();
-  const space = useSpace(spaceId);
-  if (!space) {
-    return null;
-  }
-
-  const spaceName = toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t);
-
-  return <SpaceRow spaceId={spaceId} spaceName={spaceName} state={state} />;
-};
-
-export type SpaceRowProps = {
-  spaceId: SpaceId;
-  spaceName: string;
-  state: PeerSyncState;
-};
-
-export const SpaceRow = ({
-  spaceId,
-  spaceName,
-  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
-}: SpaceRowProps) => {
-  const downActive = useActive(localDocumentCount);
-  const upActive = useActive(remoteDocumentCount);
-
-  return (
-    <div
-      className='flex items-center mx-0.5 gap-0.5 cursor-pointer'
-      title={spaceId}
-      onClick={() => {
-        void navigator.clipboard.writeText(spaceId);
-      }}
-    >
-      <span className='is-1/2 truncate'>{spaceName}</span>
-      <Icon
-        icon='ph--arrow-fat-line-left--regular'
-        size={3}
-        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
-      />
-      <Candle
-        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
-        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
-        title={spaceId}
-      />
-      <Icon
-        icon='ph--arrow-fat-line-right--regular'
-        size={3}
-        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
-      />
-    </div>
-  );
-};
-
-type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
-
-const Candle = ({ classNames, up, down }: CandleProps) => {
-  return (
-    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
-      <Bar classNames='justify-end' {...up} />
-      <div className='relative'>
-        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
-      </div>
-      <Bar {...down} />
-    </div>
-  );
-};
-
-const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
-  let p = (count / total) * 100;
-  if (count < total) {
-    p = Math.min(p, 95);
-  }
-
-  return (
-    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
-      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
-      {count !== total && (
-        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
-      )}
-    </div>
-  );
-};

package/src/components/SyncStatus/SyncStatusDetail.stories.tsx

@@ -1,89 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-
-import { type Client } from '@dxos/client';
-import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { useAsyncEffect } from '@dxos/react-ui';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
-
-import { SyncStatusDetail } from './SyncStatus';
-import { getSyncSummary, type SpaceSyncStateMap } from './sync-state';
-import translations from '../../translations';
-
-const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
-
-const createSpaceSyncStateMap = async (client: Client): Promise<SpaceSyncStateMap> => {
-  const spaces = await Promise.all(
-    Array.from({ length: 10 }).map(() => client.spaces.create({ name: faker.company.name() })),
-  );
-
-  return spaces.reduce<SpaceSyncStateMap>((map, space, i) => {
-    if (i > 4) {
-      const total = random({ min: 10, max: 500 });
-      map[space.id] = {
-        localDocumentCount: total,
-        remoteDocumentCount: total,
-        missingOnLocal: 0,
-        missingOnRemote: 0,
-        differentDocuments: 0,
-      };
-      return map;
-    }
-
-    const total = random({ min: 10, max: 500 });
-    const haveLocal = random({ min: 0, max: total });
-    const haveRemote = random({ min: 0, max: total });
-    map[space.id] = {
-      localDocumentCount: haveLocal,
-      remoteDocumentCount: haveRemote,
-      missingOnLocal: total - haveLocal,
-      missingOnRemote: total - haveRemote,
-      differentDocuments: 0,
-    };
-
-    return map;
-  }, {});
-};
-
-const meta: Meta<typeof SyncStatusDetail> = {
-  title: 'plugins/plugin-space/SyncStatusDetail',
-  component: SyncStatusDetail,
-  decorators: [withTheme, withLayout(), withClientProvider({ createIdentity: true })],
-  parameters: {
-    translations,
-    layout: 'centered',
-  },
-  args: {
-    classNames: 'm-2 border border-separator rounded-md',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof SyncStatusDetail>;
-
-export const Default: Story = {
-  render: (args) => {
-    return <SyncStatusDetail {...args} state={{}} />;
-  },
-};
-
-export const Sync: Story = {
-  render: (args) => {
-    const client = useClient();
-    const [state, setState] = useState<SpaceSyncStateMap>({});
-    useAsyncEffect(async () => {
-      setState(await createSpaceSyncStateMap(client));
-    });
-
-    return <SyncStatusDetail {...args} state={state} summary={getSyncSummary(state)} />;
-  },
-};

package/src/components/SyncStatus/sync-state.ts

@@ -1,101 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useEffect, useState } from 'react';
-
-import { type Space, type SpaceId, type SpaceSyncState } from '@dxos/client/echo';
-import { Context } from '@dxos/context';
-import { EdgeService } from '@dxos/protocols';
-import { useClient } from '@dxos/react-client';
-
-export type Progress = { count: number; total: number };
-
-export type PeerSyncState = Omit<SpaceSyncState.PeerState, 'peerId'>;
-
-export type SpaceSyncStateMap = Record<SpaceId, PeerSyncState>;
-
-export const createEmptyEdgeSyncState = (): PeerSyncState => ({
-  missingOnLocal: 0,
-  missingOnRemote: 0,
-  localDocumentCount: 0,
-  remoteDocumentCount: 0,
-  differentDocuments: 0,
-});
-
-export const getSyncSummary = (syncMap: SpaceSyncStateMap): PeerSyncState => {
-  return Object.entries(syncMap).reduce<PeerSyncState>((summary, [_spaceId, peerState]) => {
-    summary.missingOnLocal += peerState.missingOnLocal;
-    summary.missingOnRemote += peerState.missingOnRemote;
-    summary.localDocumentCount += peerState.localDocumentCount;
-    summary.remoteDocumentCount += peerState.remoteDocumentCount;
-    summary.differentDocuments += peerState.differentDocuments;
-    return summary;
-  }, createEmptyEdgeSyncState());
-};
-
-const isEdgePeerId = (peerId: string, spaceId: SpaceId) =>
-  peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
-
-/**
- * Hook Subscribes to sync state for each space.
- */
-export const useSyncState = (): SpaceSyncStateMap => {
-  const client = useClient();
-  const [spaceState, setSpaceState] = useState<SpaceSyncStateMap>({});
-
-  useEffect(() => {
-    const ctx = new Context();
-    const createSubscriptions = (spaces: Space[]) => {
-      for (const space of spaces) {
-        if (spaceState[space.id]) {
-          continue;
-        }
-
-        ctx.onDispose(
-          space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
-            const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
-            if (syncState) {
-              setSpaceState((spaceState) => ({ ...spaceState, [space.id]: syncState }));
-            }
-          }),
-        );
-      }
-    };
-
-    createSubscriptions(client.spaces.get());
-    client.spaces.subscribe((spaces) => {
-      createSubscriptions(spaces);
-    });
-
-    return () => {
-      void ctx.dispose();
-    };
-  }, [client]);
-
-  return spaceState;
-};
-
-/**
- * Hook Subscribes to sync state for a single space.
- */
-// TODO(wittjosiah): Reconcile w/ useSyncState.
-export const useSpaceSyncState = (space: Space): PeerSyncState | undefined => {
-  const [spaceState, setSpaceState] = useState<PeerSyncState>();
-
-  useEffect(() => {
-    const ctx = new Context();
-    space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
-      const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
-      if (syncState) {
-        setSpaceState(syncState);
-      }
-    });
-
-    return () => {
-      void ctx.dispose();
-    };
-  }, [space]);
-
-  return spaceState;
-};

package/src/types/thread.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Expando, Ref, S, TypedObject } from '@dxos/echo-schema';
-import { MessageType } from '@dxos/schema';
-
-// TODO(wittjosiah): These types were placed here rather than in @dxos/plugin-thread
-//   in order to avoid a circular dependency between threads and other objects that use threads.
-
-export const ThreadStatus = S.Union(S.Literal('staged'), S.Literal('active'), S.Literal('resolved'));
-
-export class ThreadType extends TypedObject({ typename: 'dxos.org/type/Thread', version: '0.1.0' })({
-  name: S.optional(S.String),
-  /** AM cursor-range: 'from:to'. */
-  anchor: S.optional(S.String),
-  status: S.optional(ThreadStatus),
-  messages: S.mutable(S.Array(Ref(MessageType))),
-}) {}
-
-export class ChannelType extends TypedObject({ typename: 'dxos.org/type/Channel', version: '0.1.0' })({
-  name: S.optional(S.String),
-  queue: Ref(Expando),
-}) {}