fix: improve docs example (#4355)

* fix: improve docs example

* final touches

* chore: prettier

* lockfile

* ci?

* downgrade types node

* fresh lockfile

* lockfile and npmrc

* remove debug log

* Merge branch 'main' into docs-template-ts

* merging lockfiles suck

* update lockfile

* satisfy linter

1 files changed, 16 insertions, 16 deletions

diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx
index b8a4292da..19ff9fa78 100644
--- a/examples/docs/src/components/Header/Search.tsx
+++ b/examples/docs/src/components/Header/Search.tsx
@@ -1,23 +1,23 @@
-/* jsxImportSource: react */
+/** @jsxImportSource react */
 import { useState, useCallback, useRef } from 'react';
-import * as CONFIG from '../../config';
-import '@docsearch/css/dist/style.css';
+import { ALGOLIA } from '../../config';
+import '@docsearch/css';
 import './Search.css';
 
-// @ts-ignore
-import * as docSearchReact from '@docsearch/react';
-// @ts-ignore
 import { createPortal } from 'react-dom';
+import * as docSearchReact from '@docsearch/react';
 
-export default function Search() {
-	const DocSearchModal = docSearchReact.DocSearchModal || docSearchReact.default.DocSearchModal;
-
-	const useDocSearchKeyboardEvents =
-		docSearchReact.useDocSearchKeyboardEvents || docSearchReact.default.useDocSearchKeyboardEvents;
+/** FIXME: This is still kinda nasty, but DocSearch is not ESM ready. */
+const DocSearchModal =
+	docSearchReact.DocSearchModal || (docSearchReact as any).default.DocSearchModal;
+const useDocSearchKeyboardEvents =
+	docSearchReact.useDocSearchKeyboardEvents ||
+	(docSearchReact as any).default.useDocSearchKeyboardEvents;
 
+export default function Search() {
 	const [isOpen, setIsOpen] = useState(false);
-	const searchButtonRef = useRef();
-	const [initialQuery, setInitialQuery] = useState(null);
+	const searchButtonRef = useRef<HTMLButtonElement>(null);
+	const [initialQuery, setInitialQuery] = useState('');
 
 	const onOpen = useCallback(() => {
 		setIsOpen(true);
@@ -73,9 +73,9 @@ export default function Search() {
 						initialQuery={initialQuery}
 						initialScrollY={window.scrollY}
 						onClose={onClose}
-						indexName={(CONFIG as any).ALGOLIA.indexName}
-						appId={(CONFIG as any).ALGOLIA.appId}
-						apiKey={(CONFIG as any).ALGOLIA.apiKey}
+						indexName={ALGOLIA.indexName}
+						appId={ALGOLIA.appId}
+						apiKey={ALGOLIA.apiKey}
 						transformItems={(items) => {
 							return items.map((item) => {
 								// We transform the absolute URL into a relative URL to