@dxos/plugin-registry 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/components/PluginList.tsx

@@ -2,102 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { type PluginMeta } from '@dxos/app-framework';
-import { Button, Icon, Input, Link, List, ListItem, useTranslation } from '@dxos/react-ui';
-import { descriptionText, fineBlockSize, mx } from '@dxos/react-ui-theme';
+import { type Plugin } from '@dxos/app-framework';
+import { List } from '@dxos/react-ui';
 
-import { REGISTRY_PLUGIN } from '../meta';
+import { PluginItem, type PluginItemProps } from './PluginItem';
 
-export type PluginListProps = {
-  plugins?: PluginMeta[];
-  loaded?: string[];
-  enabled?: string[];
-  onChange?: (id: string, enabled: boolean) => void;
-  onReload?: () => void;
+export type PluginListProps = Omit<PluginItemProps, 'plugin'> & {
+  plugins?: readonly Plugin[];
 };
 
-export const PluginList = ({ plugins = [], loaded = [], enabled = [], onChange, onReload }: PluginListProps) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-
+export const PluginList = ({ plugins = [], ...props }: PluginListProps) => {
   return (
-    <List classNames='mb-4 select-none'>
-      {plugins.map(({ id, name, description, homePage, source, icon = 'ph--circle--regular' }) => {
-        const isEnabled = enabled.includes(id);
-        const isLoaded = loaded.includes(id);
-        const reloadRequired = isEnabled !== isLoaded;
-        const inputId = `${id}-input`;
-        const labelId = `${id}-label`;
-        const descriptionId = `${id}-description`;
-        const handleChange = useCallback(() => onChange?.(id, !isEnabled), [id, isEnabled, onChange]);
-
-        return (
-          <Input.Root key={id} id={inputId}>
-            <ListItem.Root
-              labelId={labelId}
-              data-testid={`pluginList.${id}`}
-              aria-describedby={descriptionId}
-              classNames='flex gap-2 plb-2 pli-2 -mli-2 rounded'
-            >
-              <Icon icon={icon} size={6} classNames='shrink-0 mbs-1' />
-              <div role='none' className={mx(fineBlockSize, 'grow pbs-1 pl-1')}>
-                <label htmlFor={inputId} id={labelId} className='truncate'>
-                  {name ?? id}
-                </label>
-                {(description || reloadRequired || homePage || source) && (
-                  <>
-                    <div id={descriptionId} className='space-b-1 pbs-1 pbe-1'>
-                      <p className={descriptionText}>{description}</p>
-                      {homePage && (
-                        <Link
-                          href={homePage}
-                          target='_blank'
-                          rel='noreferrer'
-                          aria-describedby={descriptionId}
-                          classNames='text-xs 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'
-                          aria-describedby={descriptionId}
-                          classNames='text-xs text-description'
-                        >
-                          {t('source label')}
-                          <Icon
-                            icon='ph--arrow-square-out--bold'
-                            size={3}
-                            classNames='inline-block leading-none mli-1'
-                          />
-                        </Link>
-                      )}
-                    </div>
-                    {reloadRequired && (
-                      <Button variant='ghost' classNames='p-0 gap-2' onClick={onReload}>
-                        <Icon size={4} icon='ph--arrow-clockwise--regular' />
-                        <p className='text-sm font-medium'>{t('reload required message')}</p>
-                      </Button>
-                    )}
-                  </>
-                )}
-              </div>
-              <div className='pbs-1'>
-                <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
-              </div>
-            </ListItem.Root>
-          </Input.Root>
-        );
-      })}
+    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] auto-rows-[10rem] gap-3 p-3 overflow-y-auto scrollbar-thin'>
+      {plugins.map((plugin) => (
+        <div key={plugin.meta.id} className='flex'>
+          <PluginItem plugin={plugin} {...props} />
+        </div>
+      ))}
     </List>
   );
 };

package/src/components/RegistryContainer.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import {
+  Capabilities,
+  createIntent,
+  LayoutAction,
+  type Plugin,
+  SettingsAction,
+  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 toolbar={false} role='article' classNames='overflow-x-hidden overflow-y-auto'>
+      <PluginList
+        plugins={plugins}
+        enabled={manager.enabled}
+        onClick={handleClick}
+        onChange={handleChange}
+        hasSettings={hasSettings}
+        onSettings={handleSettings}
+      />
+    </StackItem.Content>
+  );
+};

package/src/components/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './PluginDetail';
 export * from './PluginList';
-export * from './PluginSettings';
+export * from './RegistryContainer';

package/src/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { RegistryPlugin } from './RegistryPlugin';
-
-export default RegistryPlugin;
-
+export * from './meta';
 export * from './RegistryPlugin';

package/src/meta.ts

@@ -6,7 +6,11 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const REGISTRY_PLUGIN = 'dxos.org/plugin/registry';
 
-export default {
+// TODO(wittjosiah): Deck does not currently support `/` in ids.
+export const REGISTRY_ID = '!dxos:plugin-registry';
+export const REGISTRY_KEY = 'plugin-registry';
+
+export const meta = {
   id: REGISTRY_PLUGIN,
   name: 'Plugins',
 } satisfies PluginMeta;

package/src/translations.ts

@@ -11,11 +11,22 @@ export default [
         'plugin name': 'Registry',
         'reload required message': 'Reload required.',
         'settings show experimental label': 'Show experimental plugins',
-        'settings section installed label': 'Installed',
+        'settings section installed label': 'Enabled',
         'settings section recommended label': 'Recommended',
         'settings section experimental label': 'Experimental',
-        'home page label': 'Home page',
+        'details label': 'Details',
+        'home page label': 'Website',
         'source label': 'Source',
+        'plugin registry label': 'Plugin Registry',
+        'all plugins label': 'All',
+        'installed plugins label': 'Enabled',
+        'recommended plugins label': 'Recommended',
+        'experimental plugins label': 'Experimental',
+        'community plugins label': 'Community',
+        'load by url label': 'Load by URL (soon)',
+        'coming soon label': 'Coming soon!',
+        'open plugin registry label': 'Open plugin registry',
+        'settings label': 'Settings',
       },
     },
   },

package/src/types.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { S } from '@dxos/echo-schema';
+
+export const RegistrySettingsSchema = S.mutable(
+  S.Struct({
+    experimental: S.optional(S.Boolean),
+  }),
+);
+
+export type RegistrySettings = S.Schema.Type<typeof RegistrySettingsSchema>;

package/dist/lib/browser/chunk-NEMFDAOB.mjs

@@ -1,12 +0,0 @@
-// packages/plugins/plugin-registry/src/meta.ts
-var REGISTRY_PLUGIN = "dxos.org/plugin/registry";
-var meta_default = {
-  id: REGISTRY_PLUGIN,
-  name: "Plugins"
-};
-
-export {
-  REGISTRY_PLUGIN,
-  meta_default
-};
-//# sourceMappingURL=chunk-NEMFDAOB.mjs.map

package/dist/lib/browser/chunk-NEMFDAOB.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const REGISTRY_PLUGIN = 'dxos.org/plugin/registry';\n\nexport default {\n  id: REGISTRY_PLUGIN,\n  name: 'Plugins',\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,kBAAkB;AAE/B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;AACR;",
-  "names": ["REGISTRY_PLUGIN", "id", "name"]
-}

package/dist/lib/browser/meta.mjs

@@ -1,9 +0,0 @@
-import {
-  REGISTRY_PLUGIN,
-  meta_default
-} from "./chunk-NEMFDAOB.mjs";
-export {
-  REGISTRY_PLUGIN,
-  meta_default as default
-};
-//# sourceMappingURL=meta.mjs.map

package/dist/lib/browser/meta.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/types/src/components/PluginSettings.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { type RegistrySettingsProps } from '../RegistryPlugin';
-export declare const PluginSettings: ({ settings }: {
-    settings: RegistrySettingsProps;
-}) => React.JSX.Element;
-//# sourceMappingURL=PluginSettings.d.ts.map

package/dist/types/src/components/PluginSettings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PluginSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/PluginSettings.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK/D,eAAO,MAAM,cAAc,iBAAkB;IAAE,QAAQ,EAAE,qBAAqB,CAAA;CAAE,sBAiF/E,CAAC"}

package/src/components/PluginSettings.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useMemo, type PropsWithChildren } from 'react';
-
-import { createIntent, type PluginMeta, useIntentDispatcher, usePlugins } from '@dxos/app-framework';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { Input, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormInput } from '@dxos/react-ui-form';
-
-import { PluginList } from './PluginList';
-import { type RegistrySettingsProps } from '../RegistryPlugin';
-import { REGISTRY_PLUGIN } from '../meta';
-
-const sortPluginMeta = ({ name: a = '' }: PluginMeta, { name: b = '' }: PluginMeta) => a.localeCompare(b);
-
-export const PluginSettings = ({ settings }: { settings: RegistrySettingsProps }) => {
-  const { t } = useTranslation(REGISTRY_PLUGIN);
-  const { plugins, enabled, core, setPlugin, ...pluginContext } = usePlugins();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  // Memoize to prevent plugins from disappearing when toggling enabled.
-  const installed = useMemo(
-    () =>
-      plugins
-        .filter(({ meta }) => !core.includes(meta.id))
-        .filter(({ meta }) => enabled.includes(meta.id))
-        .map(({ meta }) => meta)
-        .sort(sortPluginMeta),
-    [],
-  );
-
-  const pluginIds = plugins.map(({ meta }) => meta.id);
-  const available = useMemo(
-    () => pluginContext.available.filter(({ id }) => !enabled.includes(id)).sort(sortPluginMeta),
-    [],
-  );
-  const recommended = available.filter((meta) => !meta.tags?.includes('experimental'));
-  const experimental = available.filter((meta) => meta.tags?.includes('experimental'));
-
-  const handleChange = (id: string, enabled: boolean) => {
-    setPlugin(id, enabled);
-    void dispatch(
-      createIntent(ObservabilityAction.SendEvent, {
-        name: 'plugins.toggle',
-        properties: { plugin: id, enabled },
-      }),
-    );
-  };
-
-  const handleReload = () => {
-    window.location.reload();
-  };
-
-  return (
-    <>
-      <DeprecatedFormInput label={t('settings show experimental label')}>
-        <Input.Switch
-          data-testid='pluginSettings.experimental'
-          checked={settings.experimental}
-          onCheckedChange={(checked) => (settings.experimental = !!checked)}
-        />
-      </DeprecatedFormInput>
-
-      <Section label={t('settings section installed label')}>
-        <PluginList
-          plugins={installed}
-          loaded={pluginIds}
-          enabled={enabled}
-          onChange={handleChange}
-          onReload={handleReload}
-        />
-      </Section>
-
-      <Section label={t('settings section recommended label')}>
-        <PluginList
-          plugins={recommended}
-          loaded={pluginIds}
-          enabled={enabled}
-          onChange={handleChange}
-          onReload={handleReload}
-        />
-      </Section>
-
-      {settings.experimental && (
-        <Section label={t('settings section experimental label')}>
-          <PluginList
-            plugins={experimental}
-            loaded={pluginIds}
-            enabled={enabled}
-            onChange={handleChange}
-            onReload={handleReload}
-          />
-        </Section>
-      )}
-    </>
-  );
-};
-
-const Section = ({ label, children }: PropsWithChildren<{ label: string }>) => {
-  return (
-    <div>
-      <h2 className='py-2 text-sm text-subdued'>{label}</h2>
-      {children}
-    </div>
-  );
-};