@dxos/app-framework 0.3.10-main.3645708 → 0.3.10-main.396fa89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-framework",
-  "version": "0.3.10-main.3645708",
+  "version": "0.3.10-main.396fa89",
   "description": "A framework for building applications from composible plugins.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,19 +16,26 @@
     "@preact/signals-react": "^1.3.6",
     "deepsignal": "1.4.0-shallow.0",
     "zod": "^3.22.4",
-    "@dxos/app-graph": "0.3.10-main.3645708",
-    "@dxos/debug": "0.3.10-main.3645708",
-    "@dxos/async": "0.3.10-main.3645708",
-    "@dxos/invariant": "0.3.10-main.3645708",
-    "@dxos/local-storage": "0.3.10-main.3645708",
-    "@dxos/log": "0.3.10-main.3645708"
+    "@dxos/app-graph": "0.3.10-main.396fa89",
+    "@dxos/async": "0.3.10-main.396fa89",
+    "@dxos/debug": "0.3.10-main.396fa89",
+    "@dxos/invariant": "0.3.10-main.396fa89",
+    "@dxos/keyboard": "0.3.10-main.396fa89",
+    "@dxos/log": "0.3.10-main.396fa89",
+    "@dxos/react-ui-searchlist": "0.3.10-main.396fa89",
+    "@dxos/local-storage": "0.3.10-main.396fa89"
   },
   "devDependencies": {
     "@types/react": "^18.0.21",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@dxos/react-ui": "0.3.10-main.396fa89",
+    "@dxos/storybook-utils": "0.3.10-main.396fa89",
+    "@dxos/react-ui-theme": "0.3.10-main.396fa89"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "@dxos/react-ui": "0.3.10-main.396fa89",
+    "@dxos/react-ui-theme": "0.3.10-main.396fa89"
   },
   "publishConfig": {
     "access": "public"

package/src/plugins/PluginHost/PluginContext.tsx

@@ -30,17 +30,9 @@ export type PluginContext = {
 
   /**
    * Mark plugin as enabled.
-   *
    * Requires reload to take effect.
    */
-  enablePlugin: (id: string) => void;
-
-  /**
-   * Mark plugin as disabled.
-   *
-   * Requires reload to take effect.
-   */
-  disablePlugin: (id: string) => void;
+  setPlugin: (id: string, enabled: boolean) => void;
 };
 
 const PluginContext: Context<PluginContext> = createContext<PluginContext>({
@@ -48,8 +40,7 @@ const PluginContext: Context<PluginContext> = createContext<PluginContext>({
   enabled: [],
   plugins: [],
   available: [],
-  enablePlugin: () => {},
-  disablePlugin: () => {},
+  setPlugin: () => {},
 });
 
 /**

package/src/plugins/PluginHost/PluginHost.tsx

@@ -43,11 +43,12 @@ export const PluginHost = ({
     enabled: [...defaults],
     plugins: [],
     available: order.filter(({ id }) => !core.includes(id)),
-    enablePlugin: (id: string) => {
-      state.values.enabled = [...state.values.enabled, id];
-    },
-    disablePlugin: (id: string) => {
-      state.values.enabled = state.values.enabled.filter((enabled) => enabled !== id);
+    setPlugin: (id: string, enabled: boolean) => {
+      if (enabled) {
+        state.values.enabled = [...state.values.enabled, id];
+      } else {
+        state.values.enabled = state.values.enabled.filter((enabled) => enabled !== id);
+      }
     },
   });
 

package/src/plugins/PluginHost/plugin.ts

@@ -54,6 +54,11 @@ export type Plugin<TProvides = {}> = {
      */
     description?: string;
 
+    /**
+     * URL of home page.
+     */
+    homePage?: string;
+
     /**
      * Tags to help categorize the plugin.
      */

package/src/plugins/common/index.ts

@@ -5,4 +5,5 @@
 export * from './graph';
 export * from './layout';
 export * from './metadata';
+export * from './settings';
 export * from './translations';

package/src/plugins/common/layout.ts

@@ -13,17 +13,19 @@ import type { Plugin } from '../PluginHost';
 /**
  * Basic state provided by a layout plugin.
  */
+// TODO(burdon): Josiah: why do we use zod here?
 export const Layout = z.object({
   fullscreen: z.boolean(),
   sidebarOpen: z.boolean(),
   complementarySidebarOpen: z.boolean(),
 
-  dialogContent: z.any().optional().describe('Data to be passed to the dialog Surface.'),
+  // TODO(burdon): Why do we have a single root?
   dialogOpen: z.boolean(),
+  dialogContent: z.any().optional().describe('Data to be passed to the dialog Surface.'),
 
-  popoverAnchorId: z.string().optional(),
-  popoverContent: z.any().optional().describe('Data to be passed to the popover Surface.'),
   popoverOpen: z.boolean(),
+  popoverContent: z.any().optional().describe('Data to be passed to the popover Surface.'),
+  popoverAnchorId: z.string().optional(),
 
   // TODO(wittjosiah): Array?
   active: z.string().optional().describe('Id of the currently active item.'),
@@ -63,6 +65,11 @@ export enum LayoutAction {
   OPEN_POPOVER = `${LAYOUT_ACTION}/open-popover`,
   CLOSE_POPOVER = `${LAYOUT_ACTION}/close-popover`,
   ACTIVATE = `${LAYOUT_ACTION}/activate`,
+
+  // TODO(burdon): Move to new plugin.
+  OPEN_COMMANDS = `${LAYOUT_ACTION}/open-commands`,
+  OPEN_SETTINGS = `${LAYOUT_ACTION}/open-settings`,
+  OPEN_SHORTCUTS = `${LAYOUT_ACTION}/open-shortcuts`,
 }
 
 /**

package/src/plugins/common/settings.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Plugin } from '../PluginHost';
+
+// TODO(burdon): Plugins should export ts-effect object (see local-storage).
+// TODO(burdon): Auto generate form.
+// TODO(burdon): Set surface's data.type to plugin id (allow custom settings surface).
+
+export type SettingsProvides<T> = {
+  settings: {
+    meta: Plugin['meta'];
+    values: T; // TODO(burdon): Read-only?
+  };
+};

package/src/plugins/components/CommandsDialog.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotOutline } from '@phosphor-icons/react';
+import React, { useMemo, useRef } from 'react';
+
+import { type Action, type Graph, type Label } from '@dxos/app-graph';
+import { Keyboard, keySymbols } from '@dxos/keyboard';
+import { Button, Dialog, useTranslation } from '@dxos/react-ui';
+import { SearchList } from '@dxos/react-ui-searchlist';
+import { descriptionText, getSize, mx } from '@dxos/react-ui-theme';
+
+export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
+  const { t } = useTranslation('os');
+
+  // TODO(burdon): Factor out.
+  // TODO(burdon): How to access all translations across plugins?
+  const toString = (label: Label) => (Array.isArray(label) ? t(...label) : label);
+
+  // Traverse graph.
+  // TODO(burdon): Factor out commonality with shortcut dialog.
+  const actions = useMemo(() => {
+    // TODO(burdon): Get from navtree (not keyboard).
+    const current = Keyboard.singleton.getCurrentContext();
+    const actionMap = new Set<string>();
+    const actions: Action[] = [];
+    graph?.traverse({
+      visitor: (node, path) => {
+        if (current.startsWith(path.join('/'))) {
+          node.actions.forEach((action) => {
+            if (!actionMap.has(action.id)) {
+              actionMap.add(action.id);
+              actions.push(action);
+            }
+          });
+        }
+      },
+    });
+
+    actions.sort(({ label: a }, { label: b }) => {
+      return toString(a)?.toLowerCase().localeCompare(toString(b)?.toLowerCase());
+    });
+
+    // console.log(JSON.stringify(actions, undefined, 2));
+    return actions;
+  }, [graph]);
+
+  // TODO(burdon): Remove.
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden']}>
+      <Dialog.Title>{t('commands dialog title', { ns: 'os' })}</Dialog.Title>
+
+      {/* TODO(burdon): BUG: Overscrolls container. */}
+      <SearchList.Root label={t('commandlist input placeholder')} classNames='flex flex-col grow overflow-hidden my-2'>
+        <SearchList.Input placeholder={t('commandlist input placeholder')} classNames={mx('px-1 my-2')} />
+        <SearchList.Content classNames={['max-bs-[30rem] overflow-auto']}>
+          {actions?.map((action) => {
+            const label = toString(action.label);
+            const Icon = action.icon ?? DotOutline;
+            return (
+              <SearchList.Item
+                value={label}
+                key={action.id}
+                onSelect={() => {
+                  if (action.properties.disabled) {
+                    return;
+                  }
+
+                  // TODO(burdon): Remove hack to close dialog (via hook?)
+                  buttonRef.current?.click();
+                  setTimeout(() => {
+                    void action.invoke();
+                  });
+                }}
+                classNames='flex items-center gap-2'
+                disabled={action.properties.disabled}
+                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
+              >
+                <Icon className={mx(getSize(4), 'shrink-0', !action.icon && 'invisible')} />
+                <span className='grow truncate'>{label}</span>
+                {action.keyBinding && (
+                  <span className={mx('shrink-0', descriptionText)}>{keySymbols(action.keyBinding).join('')}</span>
+                )}
+              </SearchList.Item>
+            );
+          })}
+        </SearchList.Content>
+      </SearchList.Root>
+
+      <Dialog.Close asChild>
+        <Button ref={buttonRef} variant='primary' classNames='mbs-2'>
+          {t('close label', { ns: 'os' })}
+        </Button>
+      </Dialog.Close>
+    </Dialog.Content>
+  );
+};

package/src/plugins/components/SettingsDialog.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { Button, Dialog, List, ListItem, useTranslation } from '@dxos/react-ui';
+import { ghostHover, ghostSelected, groupBorder, mx } from '@dxos/react-ui-theme';
+
+import { type Plugin, usePlugins } from '../PluginHost';
+import { Surface } from '../SurfacePlugin';
+
+// TODO(burdon): Move into separate plugin.
+export const SettingsDialogContent = () => {
+  const { t } = useTranslation('os');
+
+  // TODO(burdon): Store preview tab.
+  const [plugin, setPlugin] = useState<string>('dxos.org/plugin/registry');
+  const { plugins, enabled } = usePlugins();
+
+  const core = [
+    'dxos.org/plugin/layout',
+    'dxos.org/plugin/client',
+    'dxos.org/plugin/space',
+    'dxos.org/plugin/registry',
+  ];
+
+  const filteredPlugins = enabled
+    .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);
+
+  // TODO(burdon): Common treatment for dialogs (e.g., shrink height to fit, mobile, etc.)
+  return (
+    <Dialog.Content classNames={['h-full md:max-is-[40rem] overflow-hidden']}>
+      <Dialog.Title>{t('settings dialog title', { ns: 'os' })}</Dialog.Title>
+
+      <div className='flex grow mlb-4 overflow-hidden'>
+        <div className={mx('flex flex-col w-[200px] space-y-4 pr-4 border-r overflow-y-auto', groupBorder)}>
+          <PluginList
+            title='Options'
+            plugins={core.map((id) => plugins.find((p) => p.meta.id === id)!.meta)}
+            selected={plugin}
+            onSelect={(plugin) => setPlugin(plugin)}
+          />
+
+          <PluginList
+            title='Plugins'
+            plugins={filteredPlugins}
+            selected={plugin}
+            onSelect={(plugin) => setPlugin(plugin)}
+          />
+        </div>
+
+        <div className={mx('flex flex-col w-full md:px-4 divide-y overflow-y-auto', groupBorder)}>
+          <Surface role='settings' data={{ plugin }} />
+        </div>
+      </div>
+
+      <Dialog.Close asChild>
+        <Button variant='primary' classNames='mbs-2' autoFocus>
+          {t('done label', { ns: 'os' })}
+        </Button>
+      </Dialog.Close>
+    </Dialog.Content>
+  );
+};
+
+const PluginList = ({
+  title,
+  plugins,
+  selected,
+  onSelect,
+}: {
+  title: string;
+  plugins: Plugin['meta'][];
+  selected?: string;
+  onSelect: (plugin: string) => void;
+}) => {
+  return (
+    <div role='none'>
+      <h2 className='my-1 px-2 text-sm text-neutral-500'>{title}</h2>
+      <List selectable>
+        {plugins.map((plugin) => (
+          <ListItem.Root
+            key={plugin.id}
+            onClick={() => onSelect(plugin.id)}
+            selected={plugin.id === selected}
+            classNames={['px-2 rounded', plugin.id === selected && ghostSelected, ghostHover]}
+          >
+            <ListItem.Heading classNames={['flex w-full items-center cursor-pointer']}>{plugin.name}</ListItem.Heading>
+          </ListItem.Root>
+        ))}
+      </List>
+    </div>
+  );
+};

package/src/plugins/components/SettingsValue.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Input } from '@dxos/react-ui';
+
+type SettingValueProps = {
+  label: string;
+  description?: JSX.Element;
+};
+
+export const SettingsValue = ({ label, description, children }: PropsWithChildren<SettingValueProps>) => {
+  return (
+    <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>
+  );
+};

package/src/plugins/components/index.ts

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

package/src/plugins/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './common';
+export * from './components';
 export * from './helpers';
 
 export * from './IntentPlugin';

package/tsconfig.json

@@ -26,12 +26,27 @@
     {
       "path": "../../common/invariant"
     },
+    {
+      "path": "../../common/keyboard"
+    },
     {
       "path": "../../common/local-storage"
     },
     {
       "path": "../../common/log"
     },
+    {
+      "path": "../../ui/react-ui"
+    },
+    {
+      "path": "../../ui/react-ui-searchlist"
+    },
+    {
+      "path": "../../ui/react-ui-theme"
+    },
+    {
+      "path": "../../ui/storybook-utils"
+    },
     {
       "path": "../app-graph"
     }