@dxos/plugin-search 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/components/SearchDialog.tsx

@@ -1,136 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useState } from 'react';
-
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useAppGraph, useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
-import { type Node } from '@dxos/plugin-graph';
-import { useClient } from '@dxos/react-client';
-import { Filter, useQuery } from '@dxos/react-client/echo';
-import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { SearchList, type SearchListItemProps } from '@dxos/react-ui-searchlist';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
-
-import { useSearchResults } from '../hooks';
-import { meta } from '../meta';
-
-export const SEARCH_DIALOG = `${meta.id}/SearchDialog`;
-
-type SearchListResultProps = {
-  node: Node;
-} & Pick<SearchListItemProps, 'onSelect'>;
-
-const SearchListResult = forwardRef<HTMLDivElement, SearchListResultProps>(({ node, onSelect }, forwardedRef) => {
-  const { t } = useTranslation(meta.id);
-  const label = toLocalizedString(node?.properties.label ?? 'never', t);
-  return (
-    <SearchList.Item
-      value={label}
-      key={node!.id}
-      classNames='flex gap-2 items-center pli-2'
-      onSelect={() => onSelect?.(node!.id)}
-      ref={forwardedRef}
-    >
-      <Icon size={5} icon={node?.properties.icon} />
-      <span className='is-0 grow truncate'>{label}</span>
-    </SearchList.Item>
-  );
-});
-
-export type SearchDialogProps = {
-  pivotId: string;
-};
-
-export const SearchDialog = ({ pivotId }: SearchDialogProps) => {
-  const { t } = useTranslation(meta.id);
-  const { graph } = useAppGraph();
-  const layout = useLayout();
-  const closed = (Array.isArray(layout.inactive) ? layout.inactive : [layout.inactive])
-    .map((id) => graph?.getNode(id))
-    .filter(Boolean);
-  const [queryString, setQueryString] = useState('');
-  const client = useClient();
-  const dangerouslyLoadAllObjects = useQuery(client.spaces, Filter.everything());
-  const [pending, results] = useSearchResults(queryString, dangerouslyLoadAllObjects);
-  const resultObjects = Array.from(results.keys());
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-
-  const handleSelect = useCallback(
-    async (nodeId: string) => {
-      await dispatch(
-        createIntent(LayoutAction.UpdateDialog, {
-          part: 'dialog',
-          options: { state: false },
-        }),
-      );
-
-      // If node is already present in the active parts, scroll to it and close the dialog.
-      const index = layout.active.findIndex((id) => id === nodeId);
-      if (index !== -1) {
-        await dispatch(
-          createIntent(LayoutAction.ScrollIntoView, {
-            part: 'current',
-            subject: nodeId,
-          }),
-        );
-      } else {
-        await dispatch(
-          createIntent(LayoutAction.Open, {
-            part: 'main',
-            subject: [nodeId],
-            options: {
-              pivotId,
-              positioning: 'end',
-            },
-          }),
-        );
-      }
-    },
-    [pivotId, dispatch, layout],
-  );
-
-  return (
-    <Dialog.Content classNames={['md:max-is-[24rem] overflow-hidden mbs-12']}>
-      <Dialog.Title>{t('search dialog title')}</Dialog.Title>
-      <SearchList.Root label={t('search placeholder')} classNames='flex flex-col grow overflow-hidden my-2'>
-        <SearchList.Input
-          value={queryString}
-          onValueChange={(nextValue) => {
-            setQueryString(nextValue);
-          }}
-          placeholder={t('search placeholder')}
-          classNames='pli-1 my-2'
-        />
-        <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
-          {queryString.length > 0 ? (
-            resultObjects.length > 0 ? (
-              resultObjects
-                .map((object) => graph.getNode(Obj.getDXN(object).toString()))
-                .filter(Option.isSome)
-                .map((node) => <SearchListResult key={node.value.id} node={node.value} onSelect={handleSelect} />)
-            ) : (
-              <p className='pli-1'>{t(pending ? 'pending results message' : 'empty results message')}</p>
-            )
-          ) : (
-            <>
-              {closed.length > 0 && <h2 className={mx('mlb-1', descriptionText)}>{t('recently closed heading')}</h2>}
-              {closed.filter(Option.isSome).map((node) => (
-                <SearchListResult key={node.value.id} node={node.value} onSelect={handleSelect} />
-              ))}
-            </>
-          )}
-        </SearchList.Content>
-      </SearchList.Root>
-
-      <Dialog.Close asChild>
-        <Button variant='primary' classNames='mbs-2'>
-          {t('close label', { ns: 'os' })}
-        </Button>
-      </Dialog.Close>
-    </Dialog.Content>
-  );
-};

package/src/components/SearchMain.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { useState } from 'react';
-
-import { useClient } from '@dxos/react-client';
-import { Filter, type Space, useQuery } from '@dxos/react-client/echo';
-import { useTranslation } from '@dxos/react-ui';
-import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
-
-import { useGlobalSearch, useGlobalSearchResults, useWebSearch } from '../hooks';
-import { meta } from '../meta';
-
-import { Searchbar } from './Searchbar';
-import { SearchResults } from './SearchResults';
-
-export const SearchMain = ({ space }: { space?: Space }) => {
-  const { t } = useTranslation(meta.id);
-  const client = useClient();
-  const { setMatch } = useGlobalSearch();
-  const [query, setQuery] = useState<string>();
-  // TODO(burdon): Option to search across spaces.
-  const allSpaces = false;
-  const objects = useQuery(allSpaces ? client.spaces : space, Filter.everything());
-  const results = useGlobalSearchResults(objects);
-
-  const { runSearch, results: webResults } = useWebSearch({ query });
-
-  // TODO(burdon): Activate and/or filter current main (set context).
-  const [selected, setSelected] = useState<string>();
-  const handleSelect = (id: string) => {
-    setSelected((selected) => (selected === id ? undefined : id));
-  };
-
-  const allResults = [...results, ...webResults];
-
-  return (
-    <StackItem.Content toolbar>
-      <Searchbar
-        classNames='pli-2'
-        placeholder={t('search placeholder')}
-        delay={300}
-        onChange={(text) => {
-          setQuery(text);
-          setMatch?.(text);
-        }}
-        onSubmit={runSearch}
-      />
-
-      {allResults.length > 0 && (
-        <div className={mx('flex flex-col bs-full overflow-hidden')}>
-          <SearchResults items={allResults} selected={selected} onSelect={handleSelect} />
-        </div>
-      )}
-    </StackItem.Content>
-  );
-};

package/src/components/SearchResults/SearchResults.stories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { filterObjectsSync } from '../../hooks';
-
-import { SearchResults, type SearchResultsProps } from './SearchResults';
-
-faker.seed(1);
-
-const DefaultStory = (props: SearchResultsProps) => {
-  const [selected, setSelected] = useState<string>();
-
-  return (
-    <div className='flex grow justify-center overflow-hidden'>
-      <div className='flex is-[300px] m-4 overflow-hidden'>
-        <SearchResults {...props} selected={selected} onSelect={setSelected} />
-      </div>
-    </div>
-  );
-};
-
-const word = 'hello';
-
-const objects = Array.from({ length: 100 }).map((_, i) => ({
-  id: faker.string.uuid(),
-  name: faker.lorem.sentence(4),
-  content: faker.lorem.sentence() + ` ${word} ` + faker.lorem.sentence(),
-}));
-
-const match = new RegExp(word, 'i');
-
-const meta = {
-  title: 'plugins/plugin-search/SearchResults',
-  component: SearchResults,
-  render: DefaultStory,
-  decorators: [withTheme, withPluginManager({ plugins: [] })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof SearchResults>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    items: filterObjectsSync(objects, match),
-    match,
-  },
-};

package/src/components/SearchResults/SearchResults.tsx

@@ -1,83 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC, forwardRef } from 'react';
-
-import { Surface } from '@dxos/app-framework/react';
-import { Obj } from '@dxos/echo';
-import { Card } from '@dxos/react-ui-stack';
-import { ghostHover } from '@dxos/react-ui-theme';
-
-import { type SearchResult } from '../../types';
-
-export type SearchResultsProps = {
-  items: SearchResult[];
-  match?: RegExp;
-  selected?: string;
-  onSelect?: (id: string) => void;
-};
-
-// TODO(burdon): Key cursor up/down.
-// TODO(burdon): Use stack (should be virtualized).
-export const SearchResults = ({ items }: SearchResultsProps) => {
-  return (
-    <div className='overflow-y-auto'>
-      <div className='flex flex-col'>
-        {items
-          // TODO(burdon): Hack to reduce noise from system objects.
-          .filter((item) => Obj.getLabel(item.object))
-          .map((item) => (
-            <div key={item.id} role='none' className='pli-2 first:pbs-2 pbe-2'>
-              <Surface role='card' data={{ subject: item.object }} limit={1} />
-            </div>
-          ))}
-      </div>
-    </div>
-  );
-};
-
-export type SearchItemProps = SearchResult & { selected: boolean } & Pick<SearchResultsProps, 'onSelect'>;
-
-export const SearchItem = forwardRef<HTMLDivElement, SearchItemProps>((item, forwardRef) => {
-  const { id, objectType, label, snippet, match, selected, onSelect } = item;
-
-  return (
-    <Card.StaticRoot
-      ref={forwardRef}
-      classNames={['mx-2 mt-2 cursor-pointer', selected && '!bg-activeSurface', ghostHover]}
-      onClick={() => onSelect?.(id)}
-    >
-      {objectType && <div className='text-xs text-neutral-400 ml-4'>{objectType}</div>}
-      <Card.Heading>{label ?? 'Untitled'}</Card.Heading>
-      {snippet && <Snippet text={snippet} match={match} />}
-    </Card.StaticRoot>
-  );
-});
-
-export const Snippet: FC<{ text: string; match?: RegExp }> = ({ text, match }) => {
-  let content = <>{text}</>;
-  if (match) {
-    const result = text.match(match);
-    if (result?.index !== undefined) {
-      // Break near to match.
-      const maxOffset = 16;
-      let before = text.slice(0, result.index);
-      if (before.length > maxOffset) {
-        const idx = before.indexOf(' ', result.index - maxOffset);
-        before = '… ' + before.slice(idx);
-      }
-
-      const after = text.slice(result.index + result[0].length);
-      content = (
-        <>
-          {before}
-          <span className='text-blue-500'>{result[0]}</span>
-          {after}
-        </>
-      );
-    }
-  }
-
-  return <span className='text-xs mb-1 line-clamp-3 text-neutral-300'>{content}</span>;
-};

package/src/components/SearchResults/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './SearchResults';

package/src/components/Searchbar/Searchbar.stories.tsx

@@ -1,28 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { Searchbar } from './Searchbar';
-
-const meta = {
-  title: 'plugins/plugin-search/Searchbar',
-  component: Searchbar,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Searchbar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Search...',
-  },
-};

package/src/components/Searchbar/Searchbar.tsx

@@ -1,48 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type KeyboardEvent, useCallback, useRef } from 'react';
-
-import { Input, type TextInputProps, type ThemedClassName, Toolbar, useControlledState } from '@dxos/react-ui';
-
-export type SearchbarProps = ThemedClassName<
-  Pick<TextInputProps, 'variant' | 'placeholder'> & {
-    delay?: number;
-    value?: string;
-    onChange?: (text?: string) => void;
-    onSubmit?: (text?: string) => void;
-  }
->;
-
-export const Searchbar = ({ classNames, variant, placeholder, value, onChange, onSubmit }: SearchbarProps) => {
-  const [text, setText] = useControlledState(value, onChange);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      switch (event.key) {
-        case 'Enter':
-          onSubmit?.(text);
-          break;
-      }
-    },
-    [text, onSubmit],
-  );
-
-  return (
-    <Toolbar.Root classNames={classNames}>
-      <Input.Root>
-        <Input.TextInput
-          ref={inputRef}
-          placeholder={placeholder}
-          autoFocus
-          variant={variant}
-          value={text ?? ''}
-          onChange={({ target }) => setText(target.value)}
-          onKeyDown={handleKeyDown}
-        />
-      </Input.Root>
-    </Toolbar.Root>
-  );
-};

package/src/components/Searchbar/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Searchbar';

package/src/types/action.tsx

@@ -1,16 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import * as Schema from 'effect/Schema';
-
-import { meta } from '../meta';
-
-export namespace SearchAction {
-  const SEARCH_ACTION = `${meta.id}/action`;
-
-  export class OpenSearch extends Schema.TaggedClass<OpenSearch>()(`${SEARCH_ACTION}/open-search`, {
-    input: Schema.Void,
-    output: Schema.Void,
-  }) {}
-}