docs(examples): update react examples (#1260)

* docs(examples): update react examples - react instantsearch hooks -> react instantsearch (changed dependency, used react 18) - react 18 -> react - react -> react 17 * update ignore * fix urls
algolia · Jun 27, 2024 · 0bbaf6c · 0bbaf6c
1 parent d0b3b27
commit 0bbaf6c
Show file tree

Hide file tree

Showing 61 changed files with 133 additions and 698 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,6 +6,6 @@ dist
 node_modules
 examples/twitter-compose-with-typeahead
 examples/slack-with-emojis-and-commands
-examples/react-instantsearch-hooks
+examples/react-instantsearch
 examples/vue-instantsearch
-examples/react-18
+examples/react
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ dist/
 
 # Environment files
 .env
+
+!examples/*/.env
diff --git a/examples/react-18/.env.example → examples/react-17/.env b/examples/react-18/.env.example → examples/react-17/.env
diff --git a/examples/react-17/.env.example b/examples/react-17/.env.example
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/react-renderer/.eslintignore → examples/react-17/.eslintignore b/examples/react-renderer/.eslintignore → examples/react-17/.eslintignore
diff --git a/examples/react-18/.gitignore → examples/react-17/.gitignore b/examples/react-18/.gitignore → examples/react-17/.gitignore
diff --git a/examples/react-renderer/README.md → examples/react-17/README.md b/examples/react-renderer/README.md → examples/react-17/README.md
diff --git a/examples/react-renderer/package.json → examples/react-17/package.json b/examples/react-renderer/package.json → examples/react-17/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/autocomplete-example-react-renderer",
-  "description": "Autocomplete example with React Renderer",
+  "name": "@algolia/autocomplete-example-react-17",
+  "description": "Autocomplete example with React 17",
   "version": "1.17.2",
   "private": true,
   "dependencies": {

diff --git a/examples/react-18/public/favicon.png → examples/react-17/public/favicon.png b/examples/react-18/public/favicon.png → examples/react-17/public/favicon.png
diff --git a/examples/react-renderer/public/index.html → examples/react-17/public/index.html b/examples/react-renderer/public/index.html → examples/react-17/public/index.html
@@ -8,7 +8,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <title>React Renderer | Autocomplete</title>
+    <title>React 17 | Autocomplete</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/examples/react-renderer/public/manifest.json → examples/react-17/public/manifest.json b/examples/react-renderer/public/manifest.json → examples/react-17/public/manifest.json
diff --git a/examples/react-renderer/public/robots.txt → examples/react-17/public/robots.txt b/examples/react-renderer/public/robots.txt → examples/react-17/public/robots.txt
diff --git a/examples/react-renderer/react-app-env.d.ts → examples/react-17/react-app-env.d.ts b/examples/react-renderer/react-app-env.d.ts → examples/react-17/react-app-env.d.ts
diff --git a/examples/react-renderer/src/App.css → examples/react-17/src/App.css b/examples/react-renderer/src/App.css → examples/react-17/src/App.css
diff --git a/examples/react-renderer/src/App.tsx → examples/react-17/src/App.tsx b/examples/react-renderer/src/App.tsx → examples/react-17/src/App.tsx
diff --git a/examples/react-renderer/src/Autocomplete.tsx → examples/react-17/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx → examples/react-17/src/Autocomplete.tsx
diff --git a/examples/react-renderer/src/ClearIcon.tsx → examples/react-17/src/ClearIcon.tsx b/examples/react-renderer/src/ClearIcon.tsx → examples/react-17/src/ClearIcon.tsx
diff --git a/examples/react-renderer/src/Highlight.tsx → examples/react-17/src/Highlight.tsx b/examples/react-renderer/src/Highlight.tsx → examples/react-17/src/Highlight.tsx
diff --git a/examples/react-renderer/src/SearchIcon.tsx → examples/react-17/src/SearchIcon.tsx b/examples/react-renderer/src/SearchIcon.tsx → examples/react-17/src/SearchIcon.tsx
diff --git a/examples/react-renderer/src/index.css → examples/react-17/src/index.css b/examples/react-renderer/src/index.css → examples/react-17/src/index.css
diff --git a/examples/react-renderer/src/index.tsx → examples/react-17/src/index.tsx b/examples/react-renderer/src/index.tsx → examples/react-17/src/index.tsx
diff --git a/examples/react-18/src/react-app-env.d.ts → examples/react-17/src/react-app-env.d.ts b/examples/react-18/src/react-app-env.d.ts → examples/react-17/src/react-app-env.d.ts
diff --git a/examples/react-renderer/tsconfig.json → examples/react-17/tsconfig.json b/examples/react-renderer/tsconfig.json → examples/react-17/tsconfig.json
diff --git a/examples/react-instantsearch-hooks/README.md b/examples/react-instantsearch-hooks/README.md
diff --git a/examples/react-instantsearch-hooks/capture.png b/examples/react-instantsearch-hooks/capture.png
diff --git a/examples/react-instantsearch-hooks/index.html b/examples/react-instantsearch-hooks/index.html
diff --git a/examples/react-instantsearch-hooks/package.json b/examples/react-instantsearch-hooks/package.json
diff --git a/examples/react-instantsearch-hooks/src/App.css b/examples/react-instantsearch-hooks/src/App.css
diff --git a/examples/react-instantsearch-hooks/src/main.tsx b/examples/react-instantsearch-hooks/src/main.tsx
diff --git a/...ples/react-instantsearch-hooks/.gitignore → examples/react-instantsearch/.gitignore b/...ples/react-instantsearch-hooks/.gitignore → examples/react-instantsearch/.gitignore
diff --git a/examples/react-instantsearch/README.md b/examples/react-instantsearch/README.md
@@ -20,15 +20,15 @@ git clone [email protected]:algolia/autocomplete.git
 
 ```sh
 yarn
-yarn workspace @algolia/autocomplete-example-react-instantsearch start
+yarn workspace @algolia/autocomplete-example-react-instantsearch-hooks dev
 ```
 
 Alternatively, you may use npm:
 
 ```sh
-cd examples/react-instantsearch
+cd examples/react-instantsearch-hooks
 npm install
-npm start
+npm run dev
 ```
 
-Open <http://localhost:1234> to see your app.
+Open <http://localhost:3000> to see your app.
diff --git a/examples/react-instantsearch/index.html b/examples/react-instantsearch/index.html
@@ -1,27 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-
-    <link rel="shortcut icon" href="favicon.png" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/x-icon" href="/src/favicon.png" />
+    <title>React InstantSearch | Autocomplete</title>
+    <!--
+    Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+    https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+    -->
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
     />
-
-    <title>Autocomplete with React InstantSearch</title>
   </head>
-
   <body>
-    <noscript> You need to enable JavaScript to run this app. </noscript>
-
     <div id="root"></div>
-
-    <script type="module" src="./src/index.js"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/examples/react-instantsearch/package.json b/examples/react-instantsearch/package.json
@@ -5,22 +5,30 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build": "parcel build index.html",
-    "start": "parcel index.html"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@algolia/autocomplete-js": "1.17.2",
     "@algolia/autocomplete-plugin-query-suggestions": "1.17.2",
     "@algolia/autocomplete-plugin-recent-searches": "1.17.2",
     "@algolia/autocomplete-theme-classic": "1.17.2",
     "algoliasearch": "4.16.0",
-    "qs": "6.11.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-instantsearch-dom": "6.39.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-instantsearch": "7.11.3"
   },
   "devDependencies": {
-    "@babel/core": "7.21.4",
-    "parcel": "2.8.3"
-  }
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "1.0.7",
+    "typescript": "4.5.4",
+    "vite": "2.8.0"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "react"
+  ]
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ dist/

		# Environment files
		.env

		!examples/*/.env