From fff0b89baab5c8c8ad6e54c5289579c9af158cf1 Mon Sep 17 00:00:00 2001 From: khalilcodes Date: Wed, 1 Mar 2023 01:25:35 +0300 Subject: [PATCH] [pkg/core,#419][s]: refactor search components --- packages/core/src/ui/Nav/Nav.tsx | 6 ++-- packages/core/src/ui/Search/Algolia.tsx | 29 +++++++++---------- packages/core/src/ui/Search/AlgoliaModal.ts | 3 -- packages/core/src/ui/Search/KBarPortal.tsx | 13 +++++++-- .../core/src/ui/Search/SearchProvider.tsx | 10 ++++--- 5 files changed, 32 insertions(+), 29 deletions(-) delete mode 100644 packages/core/src/ui/Search/AlgoliaModal.ts diff --git a/packages/core/src/ui/Nav/Nav.tsx b/packages/core/src/ui/Nav/Nav.tsx index fdc3205c6..22a7f8156 100644 --- a/packages/core/src/ui/Nav/Nav.tsx +++ b/packages/core/src/ui/Nav/Nav.tsx @@ -24,11 +24,9 @@ export const Nav: React.FC = ({ const [modifierKey, setModifierKey] = useState(); const [Search, setSearch] = useState(); // TODO types - // TODO refactor this, navigator.platform is deprecated useEffect(() => { - setModifierKey( - /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl " - ); + const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent); + setModifierKey(isMac ? "⌘" : "Ctrl "); }, []); useEffect(() => { diff --git a/packages/core/src/ui/Search/Algolia.tsx b/packages/core/src/ui/Search/Algolia.tsx index cf7c8d5fa..16d4c2737 100644 --- a/packages/core/src/ui/Search/Algolia.tsx +++ b/packages/core/src/ui/Search/Algolia.tsx @@ -10,11 +10,7 @@ const { useDocSearchKeyboardEvents } = docsearch; let DocSearchModal: any = null; function Hit({ hit, children }) { - return ( - - {children} - - ); + return {children}; } export const AlgoliaSearchContext = createContext({}); @@ -24,18 +20,15 @@ export function AlgoliaSearchProvider({ children, config }) { const [isOpen, setIsOpen] = useState(false); const [initialQuery, setInitialQuery] = useState(undefined); - const importDocSearchModalIfNeeded = useCallback(() => { + const importDocSearchModalIfNeeded = useCallback(async () => { if (DocSearchModal) { return Promise.resolve(); } - return Promise.all([import("./AlgoliaModal")]).then( - ([{ DocSearchModal: Modal }]) => { - // eslint-disable-next-line - DocSearchModal = Modal; - } - ); - }, []); + const [{ DocSearchModal: Modal }] = await Promise.all([docsearch]); + // eslint-disable-next-line + DocSearchModal = Modal; + }, [DocSearchModal]); const onOpen = useCallback(() => { importDocSearchModalIfNeeded().then(() => { @@ -57,6 +50,8 @@ export function AlgoliaSearchProvider({ children, config }) { [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery] ); + // web accessibility + // https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/keyboard-navigation/ const navigator = useRef({ navigate({ itemUrl }) { // Algolia results could contain URL's from other domains which cannot @@ -71,7 +66,8 @@ export function AlgoliaSearchProvider({ children, config }) { }, }).current; - const transformItems = useRef((items) => + // https://docsearch.algolia.com/docs/api#transformitems + const transformItems = (items) => items.map((item) => { // If Algolia contains a external domain, we should navigate without // relative URL @@ -88,8 +84,8 @@ export function AlgoliaSearchProvider({ children, config }) { // url: withBaseUrl(`${url.pathname}${url.hash}`), url: `${url.pathname}${url.hash}`, }; - }) - ).current; + }); + // ).current; useDocSearchKeyboardEvents({ isOpen, @@ -126,6 +122,7 @@ export function AlgoliaSearchProvider({ children, config }) { navigator={navigator} transformItems={transformItems} hitComponent={Hit} + placeholder={config.placeholder ?? "Search"} {...config} />, document.body diff --git a/packages/core/src/ui/Search/AlgoliaModal.ts b/packages/core/src/ui/Search/AlgoliaModal.ts deleted file mode 100644 index 31107e62a..000000000 --- a/packages/core/src/ui/Search/AlgoliaModal.ts +++ /dev/null @@ -1,3 +0,0 @@ -// Re-export as default to help the bundler resolve the packages -// For some reason tsup is not able to detect when using named export -export { DocSearchModal } from "@docsearch/react"; diff --git a/packages/core/src/ui/Search/KBarPortal.tsx b/packages/core/src/ui/Search/KBarPortal.tsx index 375ceb622..c2867ffe8 100644 --- a/packages/core/src/ui/Search/KBarPortal.tsx +++ b/packages/core/src/ui/Search/KBarPortal.tsx @@ -52,7 +52,10 @@ export const Portal: React.FC = ({ searchDocumentsPath }) => { /> - + ESC @@ -68,7 +71,13 @@ export const Portal: React.FC = ({ searchDocumentsPath }) => { function RenderItem(props) { const { item, active } = props; return ( -
+
{typeof item === "string" ? (
diff --git a/packages/core/src/ui/Search/SearchProvider.tsx b/packages/core/src/ui/Search/SearchProvider.tsx index 5affc71ad..e6ec7e3e8 100644 --- a/packages/core/src/ui/Search/SearchProvider.tsx +++ b/packages/core/src/ui/Search/SearchProvider.tsx @@ -6,28 +6,30 @@ import { const AlgoliaSearchProvider = dynamic( async () => { - return import("./Algolia").then((mod) => mod.AlgoliaSearchProvider); + return await import("./Algolia").then((mod) => mod.AlgoliaSearchProvider); }, { ssr: false } ); const AlgoliaSearchContext = dynamic( async () => { - return import("./Algolia").then((mod) => mod.AlgoliaSearchContext.Consumer); + return await import("./Algolia").then( + (mod) => mod.AlgoliaSearchContext.Consumer + ); }, { ssr: false } ); const KBarProvider = dynamic( async () => { - return import("./KBar").then((mod) => mod.KBarSearchProvider); + return await import("./KBar").then((mod) => mod.KBarSearchProvider); }, { ssr: false } ); const KBarSearchContext = dynamic( async () => { - return import("kbar").then((mod) => mod.KBarContext.Consumer); + return await import("kbar").then((mod) => mod.KBarContext.Consumer); }, { ssr: false } );