refactor(ComponentSearch): remove choc-ui and replace it with select

packages/editor-sdk/src/index.ts

@@ -4,3 +4,4 @@ export * from './constants/';
 export * from './models';
 export * from './types';
 export * from './utils';
+export * from './components/Select';

packages/editor/package.json

@@ -34,7 +34,6 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.0.15",
     "@chakra-ui/react": "^1.7.1",
-    "@choc-ui/chakra-autocomplete": "^4.22.0",
     "@emotion/css": "^11.7.1",
     "@optum/json-schema-editor": "^2.1.0",
     "@sinclair/typebox": "^0.21.2",

packages/editor/src/components/StructureTree/ComponentSearch.tsx

@@ -1,62 +1,52 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { EditorServices } from '../../types';
-import {
-  AutoComplete,
-  AutoCompleteInput,
-  AutoCompleteItem,
-  AutoCompleteList,
-  type Item,
-} from '@choc-ui/chakra-autocomplete';
 import { css } from '@emotion/css';
 import { observer } from 'mobx-react-lite';
 import { ComponentSchema } from '@sunmao-ui/core';
+import { Select } from '@sunmao-ui/editor-sdk';
 type Props = {
   components: ComponentSchema[];
   onChange: (id: string) => void;
   services: EditorServices;
 };
 
-const AutoCompleteStyle = css`
+const SelectStyle = css`
-  margin-top: 0;
+  height: 40px;
-  margin-bottom: 0.5rem;
+  &&& .sunmao-select-selector,
+  &&& .sunmao-select-selector input {
+    height: 100%;
+  }
+  &&& .sunmao-select-selector {
+    border-radius: 0.375rem;
+  }
+  &&& .sunmao-select-selector .sunmao-select-selection-placeholder,
+  &&& .sunmao-select-selector .sunmao-select-selection-search,
+  &&& .sunmao-select-selector .sunmao-select-selection-item {
+    line-height: 40px;
+    font-size: 1rem;
+  }
 `;
 
 export const ComponentSearch: React.FC<Props> = observer(props => {
   const { components, onChange } = props;
 
-  const onSelectOption = useCallback(
-    ({ item }: { item: Item }) => {
-      onChange(item.value);
-    },
-    [onChange]
-  );
-
   const options = useMemo(() => {
-    return components.map(c => {
+    return components.map(c => ({
-      return (
+      label: c.id,
-        <AutoCompleteItem key={c.id} value={c.id}>
+      value: c.id,
-          {c.id}
+    }));
-        </AutoCompleteItem>
-      );
-    });
   }, [components]);
 
   return (
-    <AutoComplete
+    <Select
-      openOnFocus
+      bordered={false}
-      lazy
+      className={SelectStyle}
-      onSelectOption={onSelectOption}
+      placeholder="Search component"
-      className={AutoCompleteStyle}
+      onChange={onChange}
-      maxSuggestions={20}
+      showArrow={false}
-    >
+      showSearch
-      <AutoCompleteInput
+      style={{ width: '100%' }}
-        placeholder="Search component"
+      options={options}
-        autoComplete="off"
+    />
-        size="md"
-        variant="filled"
-        marginTop={0}
-      />
-      <AutoCompleteList>{options}</AutoCompleteList>
-    </AutoComplete>
   );
 });

yarn.lock

@@ -2446,13 +2446,6 @@
   dependencies:
     "@chakra-ui/utils" "1.9.1"
 
-"@choc-ui/chakra-autocomplete@^4.22.0":
-  version "4.22.0"
-  resolved "https://registry.yarnpkg.com/@choc-ui/chakra-autocomplete/-/chakra-autocomplete-4.22.0.tgz#540b9f561309cc7a64e9fbd4f44ff30336189aa7"
-  integrity sha512-jP1IBM8Xtm7iNs4mB1ky/HRFpJQeNUDbVwA2CQ/UZyPHsoMGbo6dH2iHofaE1H4KuGPJV1gWvjmQ6o/uMYeT0g==
-  dependencies:
-    react-nanny "^2.9.0"
-
 "@commitlint/cli@^16.0.0":
   version "16.3.0"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-16.3.0.tgz#5689f5c2abbb7880d5ff13329251e5648a784b16"
@@ -10853,11 +10846,6 @@ react-json-tree@^0.16.1:
     prop-types "^15.8.1"
     react-base16-styling "^0.9.1"
 
-react-nanny@^2.9.0:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/react-nanny/-/react-nanny-2.14.0.tgz#c53afa8cd9612ca0eee57a35e0d38b65f76445a4"
-  integrity sha512-lX+SNWlpbIhN4h3zJQAtRqr7AXwldmgKxJ8e+eChFvMQISsZmHaR2SJujb3u1S6fpC5pUnYKsdbtwZXUG/4Qjw==
-
 react-refresh@^0.10.0:
   version "0.10.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.10.0.tgz"