@dxos/app-framework 0.3.10-main.a21ec31 → 0.3.10-main.dcfebef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-framework",
-  "version": "0.3.10-main.a21ec31",
+  "version": "0.3.10-main.dcfebef",
   "description": "A framework for building applications from composible plugins.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,19 +16,25 @@
     "@preact/signals-react": "^1.3.6",
     "deepsignal": "1.4.0-shallow.0",
     "zod": "^3.22.4",
-    "@dxos/async": "0.3.10-main.a21ec31",
-    "@dxos/app-graph": "0.3.10-main.a21ec31",
-    "@dxos/debug": "0.3.10-main.a21ec31",
-    "@dxos/invariant": "0.3.10-main.a21ec31",
-    "@dxos/local-storage": "0.3.10-main.a21ec31",
-    "@dxos/log": "0.3.10-main.a21ec31"
+    "@dxos/app-graph": "0.3.10-main.dcfebef",
+    "@dxos/debug": "0.3.10-main.dcfebef",
+    "@dxos/async": "0.3.10-main.dcfebef",
+    "@dxos/invariant": "0.3.10-main.dcfebef",
+    "@dxos/local-storage": "0.3.10-main.dcfebef",
+    "@dxos/log": "0.3.10-main.dcfebef",
+    "@dxos/keyboard": "0.3.10-main.dcfebef"
   },
   "devDependencies": {
     "@types/react": "^18.0.21",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@dxos/react-ui": "0.3.10-main.dcfebef",
+    "@dxos/react-ui-theme": "0.3.10-main.dcfebef",
+    "@dxos/storybook-utils": "0.3.10-main.dcfebef"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": "*",
+    "@dxos/react-ui": "0.3.10-main.dcfebef",
+    "@dxos/react-ui-theme": "0.3.10-main.dcfebef"
   },
   "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.'),
@@ -62,6 +64,8 @@ export enum LayoutAction {
   CLOSE_DIALOG = `${LAYOUT_ACTION}/close-dialog`,
   OPEN_POPOVER = `${LAYOUT_ACTION}/open-popover`,
   CLOSE_POPOVER = `${LAYOUT_ACTION}/close-popover`,
+  OPEN_SETTINGS = `${LAYOUT_ACTION}/open-settings`,
+  OPEN_SHORTCUTS = `${LAYOUT_ACTION}/open-shortcuts`,
   ACTIVATE = `${LAYOUT_ACTION}/activate`,
 }
 

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/SettingsDialog.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { Button, DensityProvider, 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): Vertical layout if mobile (pattern).
+  return (
+    <DensityProvider density='fine'>
+      <Dialog.Content classNames={['h-[90%] 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'>
+            {t('done label', { ns: 'os' })}
+          </Button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </DensityProvider>
+  );
+};
+
+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/ShortcutsDialog.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Label } from '@dxos/app-graph';
+import { Keyboard, keySymbols } from '@dxos/keyboard';
+import { Button, Dialog, DensityProvider, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export const ShortcutsDialogContent = () => {
+  const { t } = useTranslation('os');
+
+  const bindings = Keyboard.singleton.getBindings();
+
+  // TODO(burdon): Factor out.
+  // TODO(burdon): How to access all translations across plugins?
+  const getLabel = (label: Label) => (Array.isArray(label) ? t(...label) : label);
+
+  return (
+    <DensityProvider density='fine'>
+      <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden']}>
+        <Dialog.Title>{t('shortcuts dialog title', { ns: 'os' })}</Dialog.Title>
+
+        <table className='table-fixed border-collapse my-4'>
+          <tbody>
+            {bindings.map((binding, i) => (
+              <tr key={i}>
+                <td className='p-1 w-[120px]'>
+                  <div className='flex gap-1'>
+                    {keySymbols(binding.binding).map((c, i) => (
+                      <span
+                        key={i}
+                        className={mx(
+                          'inline-flex w-[24px] h-[24px] justify-center items-center text-xs',
+                          'rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-850',
+                        )}
+                      >
+                        {c}
+                      </span>
+                    ))}
+                  </div>
+                </td>
+                <td className='p-1'>
+                  <span className='grow truncate'>{getLabel(binding.data as Label)}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <Dialog.Close asChild>
+          <Button variant='primary' classNames='mbs-2'>
+            {t('close label', { ns: 'os' })}
+          </Button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </DensityProvider>
+  );
+};

package/src/plugins/components/index.ts

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

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,24 @@
     {
       "path": "../../common/invariant"
     },
+    {
+      "path": "../../common/keyboard"
+    },
     {
       "path": "../../common/local-storage"
     },
     {
       "path": "../../common/log"
     },
+    {
+      "path": "../../ui/react-ui"
+    },
+    {
+      "path": "../../ui/react-ui-theme"
+    },
+    {
+      "path": "../../ui/storybook-utils"
+    },
     {
       "path": "../app-graph"
     }