@dxos/plugin-registry 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/components/PluginDetail.stories.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { translations } from '../translations';
-
-import { PluginDetail } from './PluginDetail';
-
-const meta = {
-  title: 'plugins/plugin-registry/PluginDetail',
-  component: PluginDetail,
-  decorators: [withTheme, withLayout({ container: 'column' })],
-  parameters: {
-    translations,
-  },
-} satisfies Meta<typeof PluginDetail>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-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',
-        iconHue: 'sky',
-        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,82 +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 { StackItem } from '@dxos/react-ui-stack';
-import { getStyles, mx } from '@dxos/react-ui-theme';
-
-import { meta } from '../meta';
-
-export type PluginDetailProps = {
-  plugin: Plugin;
-  enabled?: boolean;
-  onEnable?: () => void;
-};
-
-export const PluginDetail = ({ plugin, enabled, onEnable }: PluginDetailProps) => {
-  const { t } = useTranslation(meta.id);
-  const {
-    id,
-    name,
-    description,
-    homePage,
-    source,
-    screenshots,
-    icon = 'ph--circle--regular',
-    iconHue = 'neutral',
-  } = plugin.meta;
-  const styles = getStyles(iconHue);
-
-  return (
-    <StackItem.Content scrollable>
-      <div role='none' className='grid grid-cols-[min-content_1fr] gap-4 container-max-width p-4'>
-        <div role='none'>
-          <Icon classNames={mx('p-1 rounded', styles.bg, styles.icon)} icon={icon} size={14} />
-        </div>
-        <div role='none' className='flex flex-col gap-6'>
-          <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 is-full pbs-1'>
-            <h2 className='text-xl'>{name}</h2>
-            <Input.Root>
-              <Input.Switch classNames='self-center' checked={enabled} onClick={onEnable} />
-            </Input.Root>
-            <p className='pbs-0.5 text-sm text-description'>{id}</p>
-          </div>
-
-          <div role='none'>
-            <p className='text-description'>{description}</p>
-          </div>
-
-          {screenshots && screenshots.length > 0 && (
-            <div role='none' className='flex flex-col gap-2'>
-              <h2>Preview</h2>
-              <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
-            </div>
-          )}
-
-          <div role='none' className='flex flex-col gap-2'>
-            <h2>Resources</h2>
-            <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>
-        </div>
-      </div>
-    </StackItem.Content>
-  );
-};

package/src/components/PluginList.stories.tsx

@@ -1,80 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { type Plugin, definePlugin } from '@dxos/app-framework';
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { getHashHue } from '@dxos/react-ui-theme';
-
-import { translations } from '../translations';
-import { RegistryTagType } from '../types';
-
-import { PluginList } from './PluginList';
-
-faker.seed(1);
-
-const icons = [
-  'ph--bug--regular',
-  'ph--compass--regular',
-  'ph--kanban--regular',
-  'ph--table--regular',
-  'ph--gear--regular',
-  'ph--github-logo--regular',
-];
-
-const DefaultStory = () => {
-  const [plugins] = useState<Plugin[]>(
-    faker.helpers.multiple(
-      () =>
-        definePlugin(
-          {
-            id: `dxos.org/plugin/plugin-${faker.string.uuid()}`,
-            name: `${faker.commerce.productName()}`,
-            description: faker.lorem.sentences(Math.ceil(Math.random() * 3)),
-            tags: faker.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
-            icon: faker.helpers.arrayElement(icons),
-            iconHue: getHashHue(faker.string.uuid()),
-            homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
-            source: faker.internet.url(),
-          },
-          () => [],
-        )(),
-      { count: 32 },
-    ),
-  );
-  const [enabled, setEnabled] = useState<string[]>([]);
-
-  const handleChange = (id: string, enabled: boolean) => {
-    setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
-  };
-
-  return <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />;
-};
-
-const meta = {
-  title: 'plugins/plugin-registry/PluginList',
-  component: PluginList,
-  render: DefaultStory,
-  parameters: {
-    translations,
-  },
-} satisfies Meta<typeof PluginList>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  decorators: [withTheme, withLayout({ container: 'column', scroll: true })],
-};
-
-export const FullScreen: Story = {
-  decorators: [withTheme, withLayout({ scroll: true })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};

package/src/components/RegistryContainer.tsx

@@ -1,76 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import { Capabilities, LayoutAction, type Plugin, SettingsAction, createIntent } from '@dxos/app-framework';
-import { useCapability, useIntentDispatcher, usePluginManager } from '@dxos/app-framework/react';
-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]);
-  const settingsStore = useCapability(Capabilities.SettingsStore);
-
-  // TODO(wittjosiah): Factor out to an intent?
-  const handleChange = useCallback(
-    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,
-          },
-        }),
-      );
-    },
-    [dispatch, manager],
-  );
-
-  const handleClick = useCallback(
-    (pluginId: string) =>
-      dispatch(
-        createIntent(LayoutAction.Open, {
-          part: 'main',
-          // TODO(wittjosiah): `/` currently is not supported in ids.
-          subject: [pluginId.replaceAll('/', ':')],
-          options: { pivotId: id, positioning: 'end' },
-        }),
-      ),
-    [dispatch, id],
-  );
-
-  const hasSettings = useCallback((pluginId: string) => !!settingsStore.getStore(pluginId), [settingsStore]);
-
-  const handleSettings = useCallback(
-    (pluginId: string) => dispatch(createIntent(SettingsAction.Open, { plugin: pluginId })),
-    [dispatch],
-  );
-
-  return (
-    <StackItem.Content scrollable>
-      <PluginList
-        plugins={plugins}
-        enabled={manager.enabled}
-        onClick={handleClick}
-        onChange={handleChange}
-        hasSettings={hasSettings}
-        onSettings={handleSettings}
-      />
-    </StackItem.Content>
-  );
-};