removed old Search component

packages/core/helper-plugin/lib/src/components/Search/Search.stories.mdx

@@ -1,54 +0,0 @@
-<!--- Search.stories.mdx --->
-
-import { ArgsTable, Meta } from '@storybook/addon-docs';
-import Search from './index';
-
-<Meta title="components/Search" />
-
-# Search
-
-This component provides and input to search an array
-
-## Imports
-
-```js
-import { Search } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
-```
-
-## Usage
-
-```jsx
-import { Search, useQueryParams } from '@strapi/helper-plugin';
-import matchSorter from 'match-sorter';
-
-const HomePage = () => {
-  const [{ query }] = useQueryParams()
-  const { formatMessage } = useIntl();
-  const _q = query?._q || ''
-  const items = [{name: 'Paul', instrument: 'bass'}, {name: 'George', instrument: 'guitar'}]
-  
-  const sortedList = matchSorter(items, _q, {keys: ['name', 'instrument']})
-  const itemsList = sortedList?.length ? sortedList : items
-
-  return (
-    <Search
-      label={formatMessage({
-        id: 'app.component.search.label',
-        defaultMessage: 'Search for {target}' },
-        { target: 'users' }
-      )}
-      // Use this props to send an event
-      trackedEvent="didSearch"
-    />
-    {itemsList.map(item => (
-      <div>
-        <h1>{item.name}</h1>
-        <p>{item.instrument}</p>
-      </div>
-    ))}
-  )
-};
-```
-
-<ArgsTable of={Search} />

packages/core/helper-plugin/lib/src/components/Search/index.js

@@ -1,104 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import SearchIcon from '@strapi/icons/Search';
-import { Searchbar } from '@strapi/design-system/Searchbar';
-import { IconButton } from '@strapi/design-system/IconButton';
-import useQueryParams from '../../hooks/useQueryParams';
-import useTracking from '../../hooks/useTracking';
-
-const Search = ({ label, trackedEvent }) => {
-  const wrapperRef = useRef(null);
-  const iconButtonRef = useRef(null);
-  const isMountedRef = useRef(false);
-  const [didSearch, setDidSearch] = useState(false);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [{ query }, setQuery] = useQueryParams();
-  const [value, setValue] = useState(query?._q || '');
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-
-  const handleToggle = () => setIsOpen(prev => !prev);
-
-  useEffect(() => {
-    if (isMountedRef.current) {
-      if (isOpen) {
-        wrapperRef.current.querySelector('input').focus();
-      } else {
-        iconButtonRef.current.focus();
-      }
-    }
-
-    isMountedRef.current = true;
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (didSearch && trackedEvent) {
-      trackUsage(trackedEvent);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [didSearch, trackedEvent]);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      if (!didSearch) {
-        return;
-      }
-
-      if (value) {
-        setQuery({ _q: value, page: 1 });
-      } else {
-        setDidSearch(false);
-        setQuery({ _q: '' }, 'remove');
-      }
-    }, 300);
-
-    return () => clearTimeout(handler);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
-
-  useEffect(() => {
-    if (value && !isOpen) {
-      setIsOpen(true);
-    }
-  }, [value, isOpen]);
-
-  if (isOpen) {
-    return (
-      <div ref={wrapperRef}>
-        <Searchbar
-          name="search"
-          onChange={({ target: { value } }) => {
-            setDidSearch(true);
-            setValue(value);
-          }}
-          value={value}
-          clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
-          onClear={() => {
-            setValue('');
-            setIsOpen(false);
-            setDidSearch(false);
-          }}
-        >
-          {label}
-        </Searchbar>
-      </div>
-    );
-  }
-
-  return (
-    <IconButton ref={iconButtonRef} icon={<SearchIcon />} label="Search" onClick={handleToggle} />
-  );
-};
-
-Search.defaultProps = {
-  trackedEvent: null,
-};
-
-Search.propTypes = {
-  label: PropTypes.string.isRequired,
-  trackedEvent: PropTypes.string,
-};
-
-export default Search;