@dxos/app-framework 0.3.10-main.4cae50a → 0.3.10-main.4f6becb

package/dist/types/src/plugins/components/SettingsValue.d.ts

@@ -1,8 +0,0 @@
-import { type PropsWithChildren } from 'react';
-type SettingValueProps = {
-    label: string;
-    description?: JSX.Element;
-};
-export declare const SettingsValue: ({ label, description, children }: PropsWithChildren<SettingValueProps>) => JSX.Element;
-export {};
-//# sourceMappingURL=SettingsValue.d.ts.map

package/dist/types/src/plugins/components/SettingsValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsValue.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/components/SettingsValue.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAItD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,aAAa,qCAAsC,kBAAkB,iBAAiB,CAAC,gBAsBnG,CAAC"}

package/dist/types/src/plugins/components/index.d.ts

@@ -1,4 +0,0 @@
-export * from './CommandsDialog';
-export * from './SettingsDialog';
-export * from './SettingsValue';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/plugins/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

package/src/plugins/components/CommandsDialog.tsx

@@ -1,100 +0,0 @@
-//
-// 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

@@ -1,98 +0,0 @@
-//
-// 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

@@ -1,36 +0,0 @@
-//
-// 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

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