@dxos/plugin-search 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/src/components/SearchMain.tsx

@@ -1,67 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC, useState } from 'react';
-
-import { log } from '@dxos/log';
-import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, type Space } from '@dxos/react-client/echo';
-import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { activeSurface, mx } from '@dxos/react-ui-theme';
-
-import { SearchResults } from './SearchResults';
-import { Searchbar } from './Searchbar';
-import { useGlobalSearch, useGlobalSearchResults } from '../hooks';
-import { useWebSearch } from '../hooks/useWebSearch';
-import { SEARCH_PLUGIN } from '../meta';
-
-export const SearchMain: FC<ThemedClassName<{ space: Space }>> = ({ classNames, space }) => {
-  const { t } = useTranslation(SEARCH_PLUGIN);
-  const client = useClient();
-  const { setMatch } = useGlobalSearch();
-  const [query, setQuery] = useState<string>();
-  // TODO(burdon): UX to select all spaces.
-  const allSpaces = false;
-
-  // TODO(burdon): Returns ALL objects (e.g., incl. Text objects that are fields of parent objects).
-  const objects = useQuery(allSpaces ? client.spaces : space, Filter.everything());
-  const results = useGlobalSearchResults(objects);
-
-  const {
-    runSearch,
-    results: webResults,
-    isLoading,
-  } = useWebSearch({
-    query,
-  });
-
-  const [selected, setSelected] = useState<string>();
-
-  // TODO(burdon): Activate and/or filter current main (set context).
-  const handleSelect = (id: string) => {
-    setSelected((selected) => (selected === id ? undefined : id));
-  };
-
-  const allResults = [...results, ...webResults];
-  log.info('results', { results, webResults });
-
-  return (
-    <div className={mx('flex flex-col grow h-full overflow-hidden', classNames)}>
-      <Searchbar
-        placeholder={t('search placeholder')}
-        onChange={(text) => {
-          setQuery(text);
-          setMatch?.(text);
-        }}
-        onSubmit={runSearch}
-      />
-      {isLoading && <div className={mx('flex flex-col grow overflow-hidden', activeSurface)}>Loading...</div>}
-      {allResults.length > 0 && (
-        <div className={mx('flex flex-col grow overflow-hidden', activeSurface)}>
-          <SearchResults items={allResults} selected={selected} onSelect={handleSelect} />
-        </div>
-      )}
-    </div>
-  );
-};

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

@@ -1,57 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-import React, { useState } from 'react';
-
-import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { SearchResults, type SearchResultsProps } from './SearchResults';
-import { filterObjectsSync } from '../../hooks';
-
-faker.seed(1);
-
-const DefaultStory = (args: SearchResultsProps) => {
-  const [selected, setSelected] = useState<string>();
-
-  return (
-    <div className='flex grow justify-center overflow-hidden'>
-      <div className='flex w-[300px] m-4 overflow-hidden'>
-        <SearchResults {...args} 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');
-
-export const Default = {
-  args: {
-    items: filterObjectsSync(objects, match),
-    match,
-  },
-};
-
-const meta: Meta<typeof SearchResults> = {
-  title: 'plugins/plugin-search/SearchResults',
-  component: SearchResults,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;

package/src/components/SearchResults/SearchResults.tsx

@@ -1,86 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC, forwardRef } from 'react';
-
-import { Card } from '@dxos/react-ui-stack';
-import { ghostHover } from '@dxos/react-ui-theme';
-
-import { SEARCH_RESULT } from '../../meta';
-import { type SearchResult } from '../../types';
-
-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>;
-};
-
-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 type SearchResultsProps = {
-  match?: RegExp;
-  items: SearchResult[];
-  selected?: string;
-  onSelect?: (id: string) => void;
-};
-
-// TODO(burdon): Key cursor up/down.
-export const SearchResults = ({ items, selected, onSelect }: SearchResultsProps) => {
-  return (
-    <div className='flex flex-col grow overflow-y-auto'>
-      <div className='flex flex-col'>
-        {items.map((item) => (
-          <SearchItem
-            key={item.id}
-            type={SEARCH_RESULT}
-            {...item}
-            onSelect={onSelect}
-            selected={selected === item.id}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};

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 '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
-
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Searchbar, type SearchbarProps } from './Searchbar';
-
-const meta: Meta<SearchbarProps> = {
-  title: 'plugins/plugin-search/Searchbar',
-  component: Searchbar,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export const Default = {
-  args: {
-    placeholder: 'Search...',
-  },
-};

package/src/components/Searchbar/Searchbar.tsx

@@ -1,67 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type KeyboardEvent, useEffect, useRef, useState } from 'react';
-
-import { Input, type TextInputProps, Icon } from '@dxos/react-ui';
-
-export type SearchbarProps = Pick<TextInputProps, 'variant' | 'placeholder'> & {
-  classes?: {
-    root?: string;
-    input?: string;
-  };
-  value?: string;
-  onChange?: (text?: string) => void;
-  onSubmit?: (text?: string) => void;
-  delay?: number;
-};
-
-export const Searchbar = ({ classes, variant, placeholder, value, onChange, onSubmit }: SearchbarProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [text, setText] = useState(value);
-  useEffect(() => {
-    setText(value);
-  }, [value]);
-  const handleChange = (text?: string) => {
-    setText(text);
-    onChange?.(text);
-  };
-
-  const handleReset = () => {
-    handleChange(undefined);
-    inputRef.current?.focus();
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    switch (event.key) {
-      case 'Enter':
-        onSubmit?.(text);
-        break;
-      case 'Escape':
-        handleReset();
-        break;
-    }
-  };
-
-  return (
-    <div className='flex shrink-0w-full items-center pli-1 pbs-1'>
-      <Input.Root>
-        <Input.TextInput
-          ref={inputRef}
-          placeholder={placeholder}
-          variant={variant}
-          value={text ?? ''}
-          classNames={['pl-3 pr-10', classes?.input]}
-          onChange={({ target }) => handleChange(target.value)}
-          onKeyDown={handleKeyDown}
-        />
-
-        {/* TODO(burdon): Margin should be density specific. */}
-        <div role='button' className='-ml-7 p-0 cursor-pointer' onClick={handleReset}>
-          <Icon icon='ph--magnifying-glass--regular' size={5} />
-        </div>
-      </Input.Root>
-    </div>
-  );
-};

package/src/components/Searchbar/index.ts

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