@dxos/plugin-registry 0.8.4-main.ead640a → 0.8.4-main.effb148878

package/src/components/Icon.stories.tsx

@@ -1,110 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactElement, type SVGProps, forwardRef } from 'react';
-
-import { Icon } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { getSize, mx } from '@dxos/react-ui-theme';
-
-/**
- * Serializable icon props.
- */
-type StoryIconProps = {
-  name: string;
-  weights: Record<string, SVGProps<SVGPathElement>[]>;
-};
-
-/**
- * Create icon from serializable data.
- * https://github.com/phosphor-icons/react#custom-icons
- * https://github.com/phosphor-icons/core/tree/main/assets
- */
-const createIcon = ({ name, weights }: StoryIconProps) => {
-  const CustomIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
-    <IconBase
-      ref={ref}
-      {...props}
-      weights={
-        new Map<IconWeight, ReactElement>(
-          Object.entries(weights).map(
-            ([key, paths]) =>
-              [
-                key,
-                <>
-                  {paths.map((props, i) => (
-                    <path key={`${key}-${i}`} {...props} />
-                  ))}
-                </>,
-              ] as [IconWeight, ReactElement],
-          ),
-        )
-      }
-    />
-  ));
-  CustomIcon.displayName = name;
-  return CustomIcon;
-};
-
-const DefaultStory = () => {
-  const CustomIcon = createIcon({
-    name: 'GithubLogo',
-    weights: {
-      // https://github.com/phosphor-icons/core/tree/main/assets
-      // <path d="M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-      // <path d="M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-      // <path d="M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
-      regular: [
-        {
-          d: 'M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z',
-          fill: 'none',
-          stroke: 'currentColor',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '16',
-        },
-        {
-          d: 'M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40',
-          fill: 'none',
-          stroke: 'currentColor',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '16',
-        },
-        {
-          d: 'M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144',
-          fill: 'none',
-          stroke: 'currentColor',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '16',
-        },
-      ],
-    },
-  });
-
-  return (
-    <div className='flex gap-4 p-8 ring'>
-      <CustomIcon weight={'regular'} className={mx(getSize(8))} />
-      <Icon icon='ph--github-logo--regular' classNames={mx(getSize(8))} />
-    </div>
-  );
-};
-
-export const Default: Story = {};
-
-const meta = {
-  title: 'plugins/plugin-registry/Icon',
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof IconBase>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;

package/src/components/PluginDetail.stories.tsx

@@ -1,44 +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',
-        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,65 +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 { 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 } = plugin.meta;
-
-  return (
-    <StackItem.Content scrollable>
-      <div role='none' className='container-max-width p-4'>
-        <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 && screenshots.length > 0 && (
-          <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>
-      </div>
-    </StackItem.Content>
-  );
-};

package/src/components/PluginItem.tsx

@@ -1,119 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type MouseEvent, useCallback } from 'react';
-
-import { type Plugin } from '@dxos/app-framework';
-import { Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-
-import { meta } from '../meta';
-
-export type PluginItemProps = {
-  plugin: Plugin;
-  installed?: readonly string[];
-  enabled?: readonly string[];
-  onClick?: (id: string) => void;
-  onChange?: (id: string, enabled: boolean) => void;
-  hasSettings?: (id: string) => boolean;
-  onSettings?: (id: string) => void;
-};
-
-export const PluginItem = ({
-  plugin,
-  enabled = [],
-  onClick,
-  onChange,
-  hasSettings: _hasSettings,
-  onSettings,
-}: PluginItemProps) => {
-  const { t } = useTranslation(meta.id);
-  const { id, name, description, tags, 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: MouseEvent) => {
-      event.stopPropagation();
-      onChange?.(id, !isEnabled);
-    },
-    [id, isEnabled, onChange],
-  );
-
-  const hasSettings = _hasSettings?.(id) ?? false;
-  const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
-
-  return (
-    <ListItem.Root
-      key={id}
-      labelId={labelId}
-      data-testid={`pluginList.${id}`}
-      aria-describedby={descriptionId}
-      // TODO(burdon): Use Rail vars.
-      classNames='is-full bs-full grid grid-cols-[48px_1fr_48px] grid-rows-[40px_1fr_32px] p-1 border border-separator rounded-md'
-    >
-      {/* Header. */}
-      <div className='flex flex-col grow justify-center items-center'>
-        <Icon icon={icon} size={6} onClick={handleClick} classNames='text-subdued cursor-pointer' />
-      </div>
-      <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
-        <span className='truncate'>{name ?? id}</span>
-      </div>
-      <div className='flex justify-center items-center'>
-        <Input.Root id={inputId}>
-          <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-        </Input.Root>
-      </div>
-
-      {/* Body. */}
-      <div />
-      {(description || tags) && (
-        <div id={descriptionId} className='col-span-2 flex flex-col w-full justify-between gap-2 pb-2'>
-          <div className='grow'>
-            <p className={mx(descriptionText, 'line-clamp-3 min-w-0 pie-2')}>{description}</p>
-          </div>
-          {tags && tags.length > 0 && (
-            <div>
-              {tags.map((tag) => (
-                <Tag key={tag} palette={'indigo'} classNames='text-xs capitalize'>
-                  {tag}
-                </Tag>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Footer. */}
-      <div />
-      <div className='flex gap-2 items-center pie-1'>
-        <Link
-          aria-describedby={descriptionId}
-          classNames='text-sm text-description cursor-pointer'
-          onClick={handleClick}
-        >
-          {t('details label')}
-        </Link>
-
-        <div className='flex-1' />
-      </div>
-      <div className='flex justify-center items-center'>
-        {hasSettings && (
-          <IconButton
-            aria-describedby={descriptionId}
-            classNames='text-sm text-description cursor-pointer'
-            icon='ph--gear--regular'
-            label={t('settings label')}
-            iconOnly
-            size={4}
-            onClick={handleSettings}
-          />
-        )}
-      </div>
-    </ListItem.Root>
-  );
-};

package/src/components/PluginList.stories.tsx

@@ -1,82 +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 { type ThemedClassName } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { mx } from '@dxos/react-ui-theme';
-
-import { translations } from '../translations';
-
-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 = ({ classNames }: ThemedClassName<{}>) => {
-  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.datatype.boolean({ probability: 0.6 })
-            ? [faker.helpers.arrayElement(['labs', 'beta', 'alpha', 'stable', 'new', '新発売'])]
-            : undefined,
-          icon: faker.helpers.arrayElement(icons),
-          homePage: faker.datatype.boolean({ probability: 0.5 }) ? faker.internet.url() : undefined,
-          source: faker.internet.url(),
-        },
-        () => [],
-      ),
-      { count: 16 },
-    ),
-  );
-  const [enabled, setEnabled] = useState<string[]>([]);
-
-  const handleChange = (id: string, enabled: boolean) => {
-    setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
-  };
-
-  return (
-    <div className={mx('flex overflow-hidden', classNames)}>
-      <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
-    </div>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-registry/PluginList',
-  component: PluginList,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ container: 'column' })],
-  parameters: {
-    translations,
-  },
-} satisfies Meta<typeof PluginList>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Column: Story = {
-  args: {
-    classNames: 'w-[30rem]',
-  },
-};

package/src/components/PluginList.tsx

@@ -1,26 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type Plugin } from '@dxos/app-framework';
-import { List } from '@dxos/react-ui';
-
-import { PluginItem, type PluginItemProps } from './PluginItem';
-
-export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
-  plugins?: readonly Plugin[];
-};
-
-export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
-  return (
-    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] auto-rows-[12rem] gap-3 p-3'>
-      {plugins.map((plugin) => (
-        <div key={plugin.meta.id} className='flex'>
-          <PluginItem plugin={plugin} {...props} />
-        </div>
-      ))}
-    </List>
-  );
-};

package/src/components/RegistryContainer.tsx

@@ -1,84 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useCallback, useMemo } from 'react';
-
-import {
-  Capabilities,
-  LayoutAction,
-  type Plugin,
-  SettingsAction,
-  createIntent,
-  useCapability,
-  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]);
-  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>
-  );
-};