@dxos/plugin-settings 0.6.8-main.046e6cf

package/src/SettingsPlugin.tsx

@@ -0,0 +1,124 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Gear, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import {
+  type IntentResolverProvides,
+  type PluginDefinition,
+  type SurfaceProvides,
+  parseIntentPlugin,
+  resolvePlugin,
+  LayoutAction,
+  SettingsAction,
+  type GraphBuilderProvides,
+  type TranslationsProvides,
+} from '@dxos/app-framework';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { createExtension, type Node } from '@dxos/plugin-graph';
+
+import { SettingsDialog } from './components';
+import meta, { SETTINGS_PLUGIN } from './meta';
+import translations from './translations';
+
+const DEFAULT_PLUGIN = 'dxos.org/plugin/registry';
+
+export type SettingsPluginProvides = SurfaceProvides &
+  IntentResolverProvides &
+  GraphBuilderProvides &
+  TranslationsProvides;
+
+type SettingsSettingsProps = {
+  selected: string;
+};
+
+/**
+ * Plugin for aggregating and rendering plugin settings.
+ */
+export const SettingsPlugin = (): PluginDefinition<SettingsPluginProvides> => {
+  const settings = new LocalStorageStore<SettingsSettingsProps>(SETTINGS_PLUGIN, { selected: DEFAULT_PLUGIN });
+
+  return {
+    meta,
+    ready: async () => {
+      settings.prop({ key: 'selected', type: LocalStorageStore.string() });
+    },
+    provides: {
+      surface: {
+        component: ({ data }) => {
+          switch (data.component) {
+            case `${SETTINGS_PLUGIN}/Settings`:
+              return (
+                <SettingsDialog
+                  selected={settings.values.selected}
+                  onSelected={(selected) => (settings.values.selected = selected)}
+                />
+              );
+
+            default:
+              return null;
+          }
+        },
+      },
+      intent: {
+        resolver: (intent) => {
+          switch (intent.action) {
+            case SettingsAction.OPEN: {
+              if (intent.data?.plugin) {
+                settings.values.selected = intent.data?.plugin;
+              }
+
+              return {
+                intents: [
+                  [
+                    {
+                      action: LayoutAction.SET_LAYOUT,
+                      data: {
+                        element: 'dialog',
+                        component: `${SETTINGS_PLUGIN}/Settings`,
+                        dialogBlockAlign: 'start',
+                      },
+                    },
+                  ],
+                ],
+              };
+            }
+          }
+        },
+      },
+      graph: {
+        builder: (plugins) => {
+          const intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+
+          return createExtension({
+            id: SETTINGS_PLUGIN,
+            filter: (node): node is Node<null> => node.id === 'root',
+            actions: () => [
+              {
+                id: SETTINGS_PLUGIN,
+                data: async () => {
+                  await intentPlugin?.provides.intent.dispatch({
+                    plugin: SETTINGS_PLUGIN,
+                    action: SettingsAction.OPEN,
+                  });
+                },
+                properties: {
+                  label: ['open settings label', { ns: SETTINGS_PLUGIN }],
+                  icon: (props: IconProps) => <Gear {...props} />,
+                  iconSymbol: 'ph--gear--regular',
+                  keyBinding: {
+                    macos: 'meta+,',
+                    windows: 'alt+,',
+                  },
+                },
+              },
+            ],
+          });
+        },
+      },
+      translations,
+    },
+  };
+};

package/src/components/SettingsDialog.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { type Plugin, Surface, usePlugins } from '@dxos/app-framework';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+import { Tabs, type TabsActivePart } from '@dxos/react-ui-tabs';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { nonNullable } from '@dxos/util';
+
+import { SETTINGS_PLUGIN } from '../meta';
+
+export const SettingsDialog = ({
+  selected,
+  onSelected,
+}: {
+  selected: string;
+  onSelected: (plugin: string) => void;
+}) => {
+  const { t } = useTranslation(SETTINGS_PLUGIN);
+  const { plugins, enabled } = usePlugins();
+
+  // TODO(burdon): Factor out common defs?
+  const core = [
+    'dxos.org/plugin/layout',
+    'dxos.org/plugin/deck',
+    'dxos.org/plugin/files',
+    'dxos.org/plugin/space',
+    'dxos.org/plugin/stack',
+    'dxos.org/plugin/observability',
+    'dxos.org/plugin/registry',
+  ];
+
+  const corePlugins = core.map((id) => plugins.find((plugin) => plugin.meta.id === id)?.meta).filter(nonNullable);
+
+  const filteredPlugins = enabled
+    .filter((id) => !core.includes(id))
+    .map((id) => plugins.find((plugin) => plugin.meta.id === id))
+    .filter((plugin) => (plugin?.provides as any)?.settings)
+    .map((plugin) => plugin!.meta)
+    .sort(({ name: a }, { name: b }) => a?.localeCompare(b ?? '') ?? 0);
+
+  const [tabsActivePart, setTabsActivePart] = useState<TabsActivePart>('list');
+
+  return (
+    <Dialog.Content classNames='p-0 bs-content max-bs-full md:max-is-[40rem] overflow-hidden'>
+      <div role='none' className='flex justify-between mbe-1 pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+        <Dialog.Title
+          onClick={() => setTabsActivePart('list')}
+          aria-description={t('click to return to tablist description')}
+          classNames='flex cursor-pointer items-center group/title'
+        >
+          <svg className={mx('@md:hidden', getSize(4), tabsActivePart === 'list' && 'invisible')}>
+            <use href='/icons.svg#ph--caret-left--regular' />
+          </svg>
+          <span
+            className={
+              tabsActivePart !== 'list'
+                ? 'group-hover/title:underline @md:group-hover/title:no-underline underline-offset-4 decoration-1'
+                : ''
+            }
+          >
+            {t('settings dialog title')}
+          </span>
+        </Dialog.Title>
+        <Dialog.Close asChild>
+          <Button density='fine' variant='ghost' autoFocus>
+            <svg className={mx(getSize(3))}>
+              <use href={'/icons.svg#ph--x--regular'} />
+            </svg>
+          </Button>
+        </Dialog.Close>
+      </div>
+
+      <Tabs.Root
+        orientation='vertical'
+        value={selected}
+        onValueChange={(nextSelected) => onSelected(nextSelected)}
+        activePart={tabsActivePart}
+        onActivePartChange={setTabsActivePart}
+        classNames='flex flex-col flex-1 mbs-2'
+      >
+        <Tabs.Viewport classNames='flex-1 min-bs-0'>
+          <div role='none' className='overflow-y-auto pli-3 @md:pis-2 @md:pie-0 mbe-4 border-r separator-separator'>
+            <Tabs.Tablist classNames='max-bs-none overflow-y-visible'>
+              <PluginList title='Options' plugins={corePlugins} />
+              {filteredPlugins.length > 0 && <PluginList title='Plugins' plugins={filteredPlugins} gap />}
+            </Tabs.Tablist>
+          </div>
+
+          {corePlugins.map((plugin) => (
+            <Tabs.Tabpanel key={plugin.id} value={plugin.id} classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
+              <Surface role='settings' data={{ plugin: plugin.id }} />
+            </Tabs.Tabpanel>
+          ))}
+          {filteredPlugins.map((plugin) => (
+            <Tabs.Tabpanel key={plugin.id} value={plugin.id} classNames='pli-3 @md:pli-5 max-bs-dvh overflow-y-auto'>
+              <Surface role='settings' data={{ plugin: plugin.id }} />
+            </Tabs.Tabpanel>
+          ))}
+        </Tabs.Viewport>
+      </Tabs.Root>
+    </Dialog.Content>
+  );
+};
+
+const PluginList = ({ title, plugins, gap }: { title: string; plugins: Plugin['meta'][]; gap?: boolean }) => {
+  return (
+    <>
+      <Tabs.TabGroupHeading classNames={gap ? 'mbs-4' : 'mbs-4 @md:mbs-2'}>{title}</Tabs.TabGroupHeading>
+      {plugins.map((plugin) => (
+        <Tabs.Tab key={plugin.id} value={plugin.id}>
+          {plugin.name}
+        </Tabs.Tab>
+      ))}
+    </>
+  );
+};

package/src/components/SettingsValue.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type JSX, type PropsWithChildren } from 'react';
+
+import { Input } from '@dxos/react-ui';
+
+type SettingValueProps = {
+  label: string;
+  description?: JSX.Element;
+  secondary?: JSX.Element;
+};
+
+export const SettingsValue = ({ label, description, secondary, children }: PropsWithChildren<SettingValueProps>) => {
+  const primary = (
+    <div role='none' className='flex w-full gap-4 py-1'>
+      <Input.Root>
+        <div role='none' className='flex flex-col w-full'>
+          {/* TODO(burdon): Consistent height for controls (e.g., Select, Textbox, and Checkbox are all different). */}
+          <Input.Label classNames='flex min-h-[40px] items-center'>{label}</Input.Label>
+          {description && (
+            <Input.DescriptionAndValidation classNames='mbs-0.5'>
+              <Input.Description>{description}</Input.Description>
+            </Input.DescriptionAndValidation>
+          )}
+        </div>
+
+        <div role='none'>
+          <div role='none' className='flex min-h-[40px] items-center'>
+            {children}
+          </div>
+        </div>
+      </Input.Root>
+    </div>
+  );
+
+  if (secondary) {
+    // console.log(secondary);
+    return (
+      <div role='none' className='flex flex-col w-full'>
+        {primary}
+        {secondary}
+      </div>
+    );
+  }
+
+  return primary;
+};

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SettingsDialog';
+export * from './SettingsValue';

package/src/index.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { SettingsPlugin } from './SettingsPlugin';
+
+export default SettingsPlugin;
+
+export * from './SettingsPlugin';
+
+// TODO(wittjosiah): Remove.
+//  Settings should be exposed from plugins as state and intents rather than components.
+export * from './components';

package/src/meta.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const SETTINGS_PLUGIN = 'dxos.org/plugin/settings';
+
+export default {
+  id: SETTINGS_PLUGIN,
+};

package/src/translations.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { SETTINGS_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [SETTINGS_PLUGIN]: {
+        'open settings label': 'Show settings',
+        'settings dialog title': 'Settings',
+        'back label': 'Back',
+        'click to return to tablist description': 'Click the title to return to the settings menu',
+      },
+    },
+  },
+];