feat: Convert the autosuggest code sample to typescript

examples/autosuggest/README.md

@@ -1,6 +1,6 @@
 # Bloomreach - Autosuggest example
 
-This example demonstrates how to setup Bloomreach's autosuggest feature. See `config.js` file to configure it to run for your account and catalog
+This example demonstrates how to setup Bloomreach's autosuggest feature. See `config.ts` file to configure it to run for your account and catalog
 
 ## How to use
 

examples/autosuggest/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

examples/autosuggest/package.json

@@ -9,6 +9,9 @@
     "@bloomreach/discovery-web-sdk": "1.2.0",
     "@bloomreach/limitless-ui-react": "0.0.2",
     "@bloomreach/react-banana-ui": "1.25.0",
+    "@types/lodash": "4.17.7",
+    "@types/node": "22.5.0",
+    "@types/react-highlight-words": "0.20.0",
     "@uiw/react-json-view": "2.0.0-alpha.20",
     "lodash": "4.17.21",
     "react": "18.3.1",

examples/autosuggest/src/App.jsx → examples/autosuggest/src/App.tsx

@@ -13,6 +13,13 @@ import {
   TabList,
 } from "@bloomreach/react-banana-ui";
 import "@bloomreach/react-banana-ui/style.css";
+import {
+  SuggestResponse,
+  SuggestResponseSuggestionGroups,
+  SuggestResponseQuerySuggestions,
+  SuggestResponseSearchSuggestions,
+  SuggestResponseAttributeSuggestions,
+} from "@bloomreach/discovery-web-sdk";
 
 import { getSuggestions } from "./api";
 import { Footer } from "./Footer";
@@ -21,19 +28,19 @@ import BrLogo from "./assets/br-logo-primary.svg";
 
 import "./app.css";
 
-const formatPrice = (price) => {
+const formatPrice = (price: string) => {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
-  }).format(price);
+  }).format(Number(price));
 };
 
 export default function App() {
-  const [showJson, setShowJson] = useState(false);
-  const [query, setQuery] = useState("cha");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [data, setData] = useState({});
+  const [showJson, setShowJson] = useState<boolean>(false);
+  const [query, setQuery] = useState<string>("cha");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<unknown>(null);
+  const [data, setData] = useState<SuggestResponse>({});
 
   const debouncedSearch = useMemo(() => _.debounce(searchSuggestions, 300), []);
 
@@ -48,16 +55,16 @@ export default function App() {
     };
   }, [query, debouncedSearch]);
 
-  function searchSuggestions(query) {
+  function searchSuggestions(query: string) {
     setLoading(true);
     setError(null);
 
     getSuggestions(query)
-      .then((response) => {
+      .then((response: SuggestResponse) => {
         setLoading(false);
         setData(response);
       })
-      .catch((error) => {
+      .catch((error: unknown) => {
         setLoading(false);
         setError(error);
         setData({});
@@ -102,20 +109,20 @@ export default function App() {
             helperText="Search for chair, sofa, bed, pillow..."
             onChange={(e) => setQuery(e.target.value)}
           />
-          {error && (
+          {error ? (
             <div>
               <h1 className="text-lg">Error: </h1>
               <JsonView value={error} />
             </div>
-          )}
+          ) : null}
 
           {showJson ? (
             <>{data ? <JsonView value={data} collapsed={3} /> : null}</>
           ) : (
             <Tabs defaultValue={0}>
               {results.length > 1 ? (
                 <TabList variant="primary">
-                  {results.map((result, index) => (
+                  {results.map((result: SuggestResponseSuggestionGroups, index: number) => (
                     <Tab key={`${result.catalogName}_${result.view}`} value={index}>
                       <span className="uppercase text-xs">
                         {result.catalogName} ({result.view})
@@ -124,15 +131,15 @@ export default function App() {
                   ))}
                 </TabList>
               ) : null}
-              {results.map((result, index) => (
+              {results.map((result: SuggestResponseSuggestionGroups, index: number) => (
                 <TabPanel keepMounted key={`${result.catalogName}_${result.view}`} value={index}>
-                  <div className="flex gap-8 mt-4">
+                  <div className="flex flex-col gap-2 mt-4 md:flex-row md:gap-8">
                     <div className="w-full">
                       <div className="text-sm my-2 uppercase font-semibold">Query Suggestions</div>
                       {result.querySuggestions?.length ? (
                         <ul>
-                          {result.querySuggestions.map((suggestion, index) => (
-                            <li className="list-none py-2 border-b border-slate-200" key={index}>
+                          {result.querySuggestions.map((suggestion: SuggestResponseQuerySuggestions) => (
+                            <li className="list-none py-2 border-b border-slate-200" key={suggestion.displayText}>
                               <Highlighter
                                 highlightClassName="bg-yellow-300 rounded"
                                 className="w-full text-sm"
@@ -153,10 +160,10 @@ export default function App() {
                       </div>
                       {result.searchSuggestions?.length ? (
                         <ul>
-                          {result.searchSuggestions.map((suggestion, index) => (
+                          {result.searchSuggestions.map((suggestion: SuggestResponseSearchSuggestions) => (
                             <li
                               className="list-none my-4 rounded overflow-hidden shadow-sm border border-slate-200"
-                              key={index}
+                              key={suggestion.pid}
                             >
                               <div className="flex gap-2">
                                 <div className="w-24">
@@ -190,8 +197,8 @@ export default function App() {
                       </div>
                       {result.attributeSuggestions?.length ? (
                         <ul>
-                          {result.attributeSuggestions.map((suggestion, index) => (
-                            <li className="list-none py-2 border-b border-slate-200" key={index}>
+                          {result.attributeSuggestions.map((suggestion: SuggestResponseAttributeSuggestions) => (
+                            <li className="list-none py-2 border-b border-slate-200" key={suggestion.name}>
                               <p className="opacity-50 text-xs uppercase">
                                 {suggestion.attributeType}
                               </p>

examples/autosuggest/src/api.js → examples/autosuggest/src/api.ts

@@ -1,22 +1,22 @@
 import { account_id, auth_key, catalog_views, domain_key } from "./config";
-import { autoSuggest } from "@bloomreach/discovery-web-sdk";
+import { AutosuggestOptions, autoSuggest, Configuration } from "@bloomreach/discovery-web-sdk";
 
-const config = {
+const config: Configuration = {
   account_id: account_id,
   auth_key: auth_key,
   domain_key: domain_key,
 };
 
-export const getSuggestions = (query) => {
+export const getSuggestions = (query: string) => {
   const uid = encodeURIComponent(`uid=12345:v=11.8:ts=${Date.now()}:hc=3`);
   // See https://documentation.bloomreach.com/discovery/reference/get-product-suggestions
   // for descriptions about the parameters used below
-  const searchOptions = {
+  const searchOptions: AutosuggestOptions = {
     _br_uid_2: uid,
     catalog_views: catalog_views,
     url: "https://example.com",
     ref_url: "https://example.com",
-    request_id: "12345",
+    request_id: 12345,
     q: query,
   };
 

examples/autosuggest/src/config.js → examples/autosuggest/src/config.ts

@@ -1,4 +1,4 @@
-export const account_id = "7634";
+export const account_id = 7634;
 export const auth_key = "zjlc0tsp2xu7l7ro";
 export const domain_key = "showcase_pacifichome";
 export const catalog_views = "showcase_pacifichome";

examples/autosuggest/src/index.js → examples/autosuggest/src/index.tsx

@@ -3,7 +3,7 @@ import { createRoot } from "react-dom/client";
 
 import App from "./App";
 
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById("root") as HTMLElement;
 const root = createRoot(rootElement);
 
 root.render(

examples/autosuggest/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "custom.d.ts"]
+}