@dxos/plugin-registry 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/capabilities/app-graph-builder.ts

@@ -1,126 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Capabilities, contributes, createIntent, SettingsAction, type PluginsContext } from '@dxos/app-framework';
-import { createExtension, type Node } from '@dxos/plugin-graph';
-
-import { REGISTRY_ID, REGISTRY_KEY, REGISTRY_PLUGIN } from '../meta';
-
-export default (context: PluginsContext) =>
-  contributes(Capabilities.AppGraphBuilder, [
-    createExtension({
-      id: REGISTRY_PLUGIN,
-      filter: (node): node is Node<null> => node.id === 'root',
-      actions: () => [
-        {
-          id: REGISTRY_PLUGIN,
-          data: async () => {
-            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-            await dispatch(createIntent(SettingsAction.OpenPluginRegistry));
-          },
-          properties: {
-            label: ['open plugin registry label', { ns: REGISTRY_PLUGIN }],
-            icon: 'ph--squares-four--regular',
-          },
-        },
-      ],
-    }),
-    createExtension({
-      id: REGISTRY_PLUGIN,
-      filter: (node): node is Node<null> => node.id === 'root',
-      connector: () => [
-        {
-          id: REGISTRY_ID,
-          type: REGISTRY_PLUGIN,
-          properties: {
-            label: ['plugin registry label', { ns: REGISTRY_PLUGIN }],
-            icon: 'ph--squares-four--regular',
-            disposition: 'pin-end',
-            testId: 'treeView.pluginRegistry',
-          },
-          nodes: [
-            {
-              id: `${REGISTRY_KEY}:all`,
-              type: 'category',
-              data: `${REGISTRY_KEY}:all`,
-              properties: {
-                label: ['all plugins label', { ns: REGISTRY_PLUGIN }],
-                icon: 'ph--squares-four--regular',
-                key: REGISTRY_KEY,
-                testId: 'pluginRegistry.all',
-              },
-            },
-            {
-              id: `${REGISTRY_KEY}:installed`,
-              type: 'category',
-              data: `${REGISTRY_KEY}:installed`,
-              properties: {
-                label: ['installed plugins label', { ns: REGISTRY_PLUGIN }],
-                icon: 'ph--check--regular',
-                key: REGISTRY_KEY,
-                testId: 'pluginRegistry.installed',
-              },
-            },
-            {
-              id: `${REGISTRY_KEY}:recommended`,
-              type: 'category',
-              data: `${REGISTRY_KEY}:recommended`,
-              properties: {
-                label: ['recommended plugins label', { ns: REGISTRY_PLUGIN }],
-                icon: 'ph--star--regular',
-                key: REGISTRY_KEY,
-                testId: 'pluginRegistry.recommended',
-              },
-            },
-            {
-              id: `${REGISTRY_KEY}:experimental`,
-              type: 'category',
-              data: `${REGISTRY_KEY}:experimental`,
-              properties: {
-                label: ['experimental plugins label', { ns: REGISTRY_PLUGIN }],
-                icon: 'ph--flask--regular',
-                key: REGISTRY_KEY,
-                testId: 'pluginRegistry.experimental',
-              },
-            },
-          ],
-        },
-      ],
-    }),
-    createExtension({
-      id: `${REGISTRY_PLUGIN}/actions`,
-      filter: (node): node is Node<null> => node.id === REGISTRY_ID,
-      actions: () => [
-        {
-          id: `${REGISTRY_PLUGIN}/load-by-url`,
-          data: async () => {},
-          properties: {
-            label: ['load by url label', { ns: REGISTRY_PLUGIN }],
-            icon: 'ph--cloud-arrow-down--regular',
-            disabled: true,
-          },
-        },
-      ],
-    }),
-    createExtension({
-      id: `${REGISTRY_PLUGIN}/plugins`,
-      resolver: ({ id }) => {
-        const manager = context.requestCapability(Capabilities.PluginManager);
-        const plugin = manager.plugins.find((plugin) => plugin.meta.id === id.replaceAll(':', '/'));
-        if (!plugin) {
-          return;
-        }
-
-        return {
-          id,
-          type: 'dxos.org/plugin',
-          data: plugin,
-          properties: {
-            label: plugin.meta.name ?? plugin.meta.id,
-            icon: plugin.meta.icon ?? 'ph--circle--regular',
-          },
-        };
-      },
-    }),
-  ]);

package/src/capabilities/intent-resolver.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import {
-  contributes,
-  SettingsAction,
-  createResolver,
-  LayoutAction,
-  Capabilities,
-  createIntent,
-} from '@dxos/app-framework';
-
-import { REGISTRY_ID } from '../meta';
-
-export default () =>
-  contributes(
-    Capabilities.IntentResolver,
-    createResolver({
-      intent: SettingsAction.OpenPluginRegistry,
-      resolve: () => {
-        return {
-          intents: [createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: REGISTRY_ID })],
-        };
-      },
-    }),
-  );

package/src/components/PluginDetail.stories.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
-
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { PluginDetail, type PluginDetailProps } from './PluginDetail';
-import translations from '../translations';
-
-const meta: Meta<PluginDetailProps> = {
-  title: 'plugins/plugin-registry/PluginDetail',
-  component: PluginDetail,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'justify-center' })],
-  parameters: {
-    translations,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<PluginDetailProps>;
-
-export const Default: Story = {
-  args: {
-    plugin: {
-      meta: {
-        id: 'example.com/plugin/test-plugin',
-        name: 'Test Plugin',
-        description: faker.lorem.paragraphs(2),
-        icon: 'ph--bug--regular',
-        homePage: 'https://example.com',
-        source: 'https://github.com/example/test-plugin',
-        screenshots: [
-          'https://media.gcflearnfree.org/content/55e073de7dd48174331f51b3_01_17_2014/getting_started_interactive2.png',
-        ],
-      },
-      modules: [],
-    },
-  },
-};

package/src/components/PluginDetail.tsx

@@ -1,63 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React from 'react';
-
-import { type Plugin } from '@dxos/app-framework';
-import { Icon, Input, Link, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer } from '@dxos/react-ui-form';
-
-import { REGISTRY_PLUGIN } from '../meta';
-
-export type PluginDetailProps = {
-  plugin: Plugin;
-  enabled?: boolean;
-  onEnable?: () => void;
-};
-
-export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, homePage, source, screenshots } = plugin.meta;
-
-  return (
-    <DeprecatedFormContainer classNames='gap-6'>
-      <div role='none' className='flex justify-between items-center'>
-        <p>{id}</p>
-        <Input.Root>
-          <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
-        </Input.Root>
-      </div>
-
-      {screenshots && (
-        <div role='none'>
-          <h1 className='text-lg mb-2'>Preview</h1>
-          <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
-        </div>
-      )}
-
-      <div role='none'>
-        <p>{description}</p>
-      </div>
-
-      <div role='none'>
-        <h1 className='text-lg mb-2'>Resources</h1>
-        <div className='flex gap-2'>
-          {homePage && (
-            <Link href={homePage} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
-              {t('home page label')}
-              <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-            </Link>
-          )}
-
-          {source && (
-            <Link href={source} target='_blank' rel='noreferrer' classNames='text-sm text-description'>
-              {t('source label')}
-              <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-            </Link>
-          )}
-        </div>
-      </div>
-    </DeprecatedFormContainer>
-  );
-};

package/src/components/PluginItem.tsx

@@ -1,100 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { useCallback } from 'react';
-
-import { type Plugin } from '@dxos/app-framework';
-import { Icon, Input, Link, ListItem, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-
-import { REGISTRY_PLUGIN } from '../meta';
-
-export type PluginItemProps = {
-  plugin: Plugin;
-  installed?: readonly string[];
-  enabled?: readonly string[];
-  onClick?: (id: string) => void;
-  onChange?: (id: string, enabled: boolean) => void;
-};
-
-export const PluginItem = ({ plugin, enabled = [], onClick, onChange }: PluginItemProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { id, name, description, homePage, source, icon = 'ph--circle--regular' } = plugin.meta;
-  const isEnabled = enabled.includes(id);
-  const inputId = `${id}-input`;
-  const labelId = `${id}-label`;
-  const descriptionId = `${id}-description`;
-  const handleClick = useCallback(() => onClick?.(id), [id, onClick]);
-  const handleChange = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-      onChange?.(id, !isEnabled);
-    },
-    [id, isEnabled, onChange],
-  );
-
-  return (
-    <ListItem.Root
-      key={id}
-      labelId={labelId}
-      data-testid={`pluginList.${id}`}
-      aria-describedby={descriptionId}
-      classNames='w-full h-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr] p-1 rounded-md border border-separator'
-      onClick={handleClick}
-    >
-      <Input.Root id={inputId}>
-        <div className='flex grow justify-center items-center'>
-          <Icon icon={icon} size={8} />
-        </div>
-        <div className='flex grow items-center'>
-          <Input.Label id={labelId} classNames='truncate w-full' style={{ fontSize: 'unset' }}>
-            {name ?? id}
-          </Input.Label>
-        </div>
-        <div className='flex grow justify-center items-center'>
-          <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-        </div>
-      </Input.Root>
-
-      <div />
-      {(description || homePage || source) && (
-        <div id={descriptionId} className='col-span-2 flex flex-col w-full gap-2 pb-3 overflow-y-scroll'>
-          <div className='grow'>
-            <p className={mx(descriptionText, 'line-clamp-3 min-w-0')}>{description}</p>
-          </div>
-
-          <div className='flex gap-2 items-center'>
-            {homePage && (
-              <Link
-                href={homePage}
-                target='_blank'
-                rel='noreferrer'
-                aria-describedby={descriptionId}
-                classNames='text-sm text-description'
-                onClick={(ev) => ev.stopPropagation()}
-              >
-                {t('home page label')}
-                <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-              </Link>
-            )}
-
-            {source && (
-              <Link
-                href={source}
-                target='_blank'
-                rel='noreferrer'
-                aria-describedby={descriptionId}
-                classNames='text-sm text-description'
-                onClick={(ev) => ev.stopPropagation()}
-              >
-                {t('source label')}
-                <Icon icon='ph--arrow-square-out--bold' size={3} classNames='inline-block leading-none mli-1' />
-              </Link>
-            )}
-          </div>
-        </div>
-      )}
-    </ListItem.Root>
-  );
-};

package/src/components/RegistryContainer.tsx

@@ -1,51 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useMemo } from 'react';
-
-import { createIntent, LayoutAction, type Plugin, useIntentDispatcher, usePluginManager } from '@dxos/app-framework';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { StackItem } from '@dxos/react-ui-stack';
-
-import { PluginList } from './PluginList';
-
-const sortByPluginMeta = ({ meta: { name: a = '' } }: Plugin, { meta: { name: b = '' } }: Plugin) => a.localeCompare(b);
-
-export const RegistryContainer = ({ id, plugins: _plugins }: { id: string; plugins: Plugin[] }) => {
-  const manager = usePluginManager();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const plugins = useMemo(() => _plugins.sort(sortByPluginMeta), [_plugins]);
-
-  // TODO(wittjosiah): Factor out to an intent?
-  const handleChange = async (id: string, enabled: boolean) => {
-    if (enabled) {
-      await manager.enable(id);
-    } else {
-      await manager.disable(id);
-    }
-
-    await dispatch(
-      createIntent(ObservabilityAction.SendEvent, {
-        name: 'plugins.toggle',
-        properties: { plugin: id, enabled },
-      }),
-    );
-  };
-
-  const handleClick = (pluginId: string) =>
-    dispatch(
-      createIntent(LayoutAction.Open, {
-        part: 'main',
-        // TODO(wittjosiah): `/` currently is not supported in ids.
-        subject: [pluginId.replaceAll('/', ':')],
-        options: { pivotId: id, positioning: 'end' },
-      }),
-    );
-
-  return (
-    <StackItem.Content toolbar={false} role='article' classNames='overflow-x-hidden overflow-y-auto'>
-      <PluginList plugins={plugins} enabled={manager.enabled} onClick={handleClick} onChange={handleChange} />
-    </StackItem.Content>
-  );
-};