From 3dddedf39377b6a90c6b7f58a66e035da862926c Mon Sep 17 00:00:00 2001 From: William French Date: Mon, 29 Sep 2025 11:30:34 -0700 Subject: [PATCH 1/4] feat: Adds support for React projects. Change-Id: I35cf5f483892ee84c11c8f79bf1524ff9849cc97 --- samples/docs.sh | 4 ++- samples/react-docs.sh | 33 +++++++++++++++++++ .../package.json | 7 ++-- .../src/app.tsx | 4 +-- .../package.json | 10 +++--- .../src/app.tsx | 4 +-- .../package.json | 10 +++--- .../src/app.tsx | 4 +-- .../react-ui-kit-place-details/package.json | 7 ++-- .../react-ui-kit-place-details/src/app.tsx | 4 +-- .../react-ui-kit-place-details/tsconfig.json | 3 +- .../react-ui-kit-place-details/vite.config.js | 11 ------- .../react-ui-kit-search-nearby/package.json | 7 ++-- .../react-ui-kit-search-nearby/src/app.tsx | 9 +++-- samples/react-ui-kit-search-text/package.json | 7 ++-- samples/react-ui-kit-search-text/src/app.tsx | 4 +-- 16 files changed, 83 insertions(+), 45 deletions(-) create mode 100755 samples/react-docs.sh delete mode 100644 samples/react-ui-kit-place-details/vite.config.js diff --git a/samples/docs.sh b/samples/docs.sh index 9eb9a675..cd242688 100644 --- a/samples/docs.sh +++ b/samples/docs.sh @@ -28,4 +28,6 @@ cp "${SCRIPT_DIR}/${NAME}/index.html" "${DOCS_DIR}/index.html" cp "${SCRIPT_DIR}/${NAME}/style.css" "${DOCS_DIR}/style.css" # Copy the data folder if one is found. -# [ -d "public" ] && cp -r public/* "${DOCS_DIR}/" \ No newline at end of file +if [ -d "public" ] && [ "$(ls -A public)" ]; then + cp -r public/* "${DOCS_DIR}/" +fi \ No newline at end of file diff --git a/samples/react-docs.sh b/samples/react-docs.sh new file mode 100755 index 00000000..8bdb87c4 --- /dev/null +++ b/samples/react-docs.sh @@ -0,0 +1,33 @@ +#!/bin/bash + +# Copy/generate files for doc snippets. + +echo ">>>Running react-docs.sh" + +# Copy static documentation files as part of the build process. +NAME=$1 # The name of the folder, taken from package.json "build" line. + +# /Users/[USERNAME]/git/js-api-samples/samples + +SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )" # Script directory (/samples) +PROJECT_ROOT=$(dirname "$SCRIPT_DIR") # Get the parent directory (js-api-samples) +DIST_DIR="${PROJECT_ROOT}/dist" +SAMPLE_DIR="${PROJECT_ROOT}/dist/samples/${NAME}" + +echo "PROJECT_ROOT: ${PROJECT_ROOT}" + +DOCS_DIR="${PROJECT_ROOT}/dist/samples/${NAME}/docs" + +# Create two new folders. +mkdir -p ${DOCS_DIR}/src + +# Copy files +cp "${SCRIPT_DIR}/${NAME}/src/app.js" "${DOCS_DIR}/src/app.js" +cp "${SCRIPT_DIR}/${NAME}/src/app.tsx" "${DOCS_DIR}/src/app.tsx" +cp "${SCRIPT_DIR}/${NAME}/src/styles.css" "${DOCS_DIR}/src/styles.css" +cp "${SCRIPT_DIR}/${NAME}/index.html" "${DOCS_DIR}/index.html" + +# Copy the data folder if one is found. +if [ -d "public" ] && [ "$(ls -A public)" ]; then + cp -r public/* "${DOCS_DIR}/" +fi \ No newline at end of file diff --git a/samples/react-ui-kit-place-details-compact/package.json b/samples/react-ui-kit-place-details-compact/package.json index 5718b7b6..433bf964 100644 --- a/samples/react-ui-kit-place-details-compact/package.json +++ b/samples/react-ui-kit-place-details-compact/package.json @@ -3,9 +3,10 @@ "version": "1.0.0", "type": "module", "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "tsc", + "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details-compact && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details-compact", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", "preview": "vite preview" }, "dependencies": { diff --git a/samples/react-ui-kit-place-details-compact/src/app.tsx b/samples/react-ui-kit-place-details-compact/src/app.tsx index 284f5446..1ddcfca8 100644 --- a/samples/react-ui-kit-place-details-compact/src/app.tsx +++ b/samples/react-ui-kit-place-details-compact/src/app.tsx @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -// [START maps_react_ui_kit_place_details_compact] +{/* [START maps_react_ui_kit_place_details_compact] */} import React, {useEffect, useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps'; @@ -84,5 +84,5 @@ export function renderToDom(container: HTMLElement) { ); } -// [END maps_react_ui_kit_place_details_compact] +{/* [END maps_react_ui_kit_place_details_compact] */} diff --git a/samples/react-ui-kit-place-details-latlng-compact/package.json b/samples/react-ui-kit-place-details-latlng-compact/package.json index c4278bb4..48b2e49b 100644 --- a/samples/react-ui-kit-place-details-latlng-compact/package.json +++ b/samples/react-ui-kit-place-details-latlng-compact/package.json @@ -1,11 +1,13 @@ { - "name": "@js-api-samples/react-ui-kit-place-details-by-latlng-compact", + "name": "@js-api-samples/react-ui-kit-place-details-latlng-compact", "version": "1.0.0", "type": "module", + "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "tsc", + "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details-latlng-compact && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details-latlng-compact", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", "preview": "vite preview" }, "dependencies": { diff --git a/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx b/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx index 4055410c..384e8c9b 100644 --- a/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx +++ b/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -// [START maps_react_ui_kit_place_details_by_latlng_compact] +{/* [START maps_react_ui_kit_place_details_by_latlng_compact] */} import React, {useEffect, useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps'; @@ -85,4 +85,4 @@ export function renderToDom(container: HTMLElement) { ); } -// [END maps_react_ui_kit_place_details_by_latlng_compact] +{/* [END maps_react_ui_kit_place_details_by_latlng_compact] */} diff --git a/samples/react-ui-kit-place-details-latlng/package.json b/samples/react-ui-kit-place-details-latlng/package.json index 5eff3a3e..5ffe98b5 100644 --- a/samples/react-ui-kit-place-details-latlng/package.json +++ b/samples/react-ui-kit-place-details-latlng/package.json @@ -1,11 +1,13 @@ { - "name": "@js-api-samples/react-ui-kit-place-details-by-latlng", + "name": "@js-api-samples/react-ui-kit-place-details-latlng", "version": "1.0.0", "type": "module", + "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "tsc", + "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details-latlng && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details-latlng", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", "preview": "vite preview" }, "dependencies": { diff --git a/samples/react-ui-kit-place-details-latlng/src/app.tsx b/samples/react-ui-kit-place-details-latlng/src/app.tsx index 993a15b0..60c4b225 100644 --- a/samples/react-ui-kit-place-details-latlng/src/app.tsx +++ b/samples/react-ui-kit-place-details-latlng/src/app.tsx @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -// [START maps_react_ui_kit_place_details_by_latlng] +{/* [START maps_react_ui_kit_place_details_by_latlng] */} import React from 'react'; import {createRoot} from 'react-dom/client'; import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps'; @@ -91,4 +91,4 @@ export function renderToDom(container: HTMLElement) { ); } -// [END maps_react_ui_kit_place_details_by_latlng] +{/* [END maps_react_ui_kit_place_details_by_latlng] */} diff --git a/samples/react-ui-kit-place-details/package.json b/samples/react-ui-kit-place-details/package.json index 9367297d..b2133b7c 100644 --- a/samples/react-ui-kit-place-details/package.json +++ b/samples/react-ui-kit-place-details/package.json @@ -3,9 +3,10 @@ "version": "1.0.0", "type": "module", "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "tsc", + "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", "preview": "vite preview" }, "dependencies": { diff --git a/samples/react-ui-kit-place-details/src/app.tsx b/samples/react-ui-kit-place-details/src/app.tsx index 77edff56..ea739454 100644 --- a/samples/react-ui-kit-place-details/src/app.tsx +++ b/samples/react-ui-kit-place-details/src/app.tsx @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -// [START maps_react_ui_kit_place_details] +{/* [START maps_react_ui_kit_place_details] */} import React from 'react'; import {createRoot} from 'react-dom/client'; import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps'; @@ -90,5 +90,5 @@ export function renderToDom(container: HTMLElement) { ); } -// [END maps_react_ui_kit_place_details] +{/* [END maps_react_ui_kit_place_details] */} \ No newline at end of file diff --git a/samples/react-ui-kit-place-details/tsconfig.json b/samples/react-ui-kit-place-details/tsconfig.json index 70fa7b26..5b6ad9d9 100644 --- a/samples/react-ui-kit-place-details/tsconfig.json +++ b/samples/react-ui-kit-place-details/tsconfig.json @@ -17,6 +17,7 @@ "types": [ "vite/client", "node" - ] + ], + "removeComments": false, } } \ No newline at end of file diff --git a/samples/react-ui-kit-place-details/vite.config.js b/samples/react-ui-kit-place-details/vite.config.js deleted file mode 100644 index bc3f7449..00000000 --- a/samples/react-ui-kit-place-details/vite.config.js +++ /dev/null @@ -1,11 +0,0 @@ -import {defineConfig, loadEnv} from 'vite'; - -export default defineConfig(({mode}) => { - const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), ''); - - return { - define: { - 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) - }, - }; -}); diff --git a/samples/react-ui-kit-search-nearby/package.json b/samples/react-ui-kit-search-nearby/package.json index bbf09823..03d5de93 100644 --- a/samples/react-ui-kit-search-nearby/package.json +++ b/samples/react-ui-kit-search-nearby/package.json @@ -3,9 +3,10 @@ "version": "1.0.0", "type": "module", "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "tsc", + "build": "tsc && bash ../react-docs.sh react-ui-kit-search-nearby && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-search-nearby", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", "preview": "vite preview" }, "dependencies": { diff --git a/samples/react-ui-kit-search-nearby/src/app.tsx b/samples/react-ui-kit-search-nearby/src/app.tsx index e2a44e67..deb99290 100644 --- a/samples/react-ui-kit-search-nearby/src/app.tsx +++ b/samples/react-ui-kit-search-nearby/src/app.tsx @@ -1,4 +1,9 @@ -// [START maps_react_places_ui_kit_search_nearby] +/* + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +{/* [START maps_react_places_ui_kit_search_nearby] */} import React, {useState, useEffect, useRef, type RefObject} from 'react'; import {createRoot} from 'react-dom/client'; import { @@ -204,4 +209,4 @@ root.render( ); -// [END maps_react_places_ui_kit_search_nearby] \ No newline at end of file +{/* [END maps_react_places_ui_kit_search_nearby] */} \ No newline at end of file diff --git a/samples/react-ui-kit-search-text/package.json b/samples/react-ui-kit-search-text/package.json index 561e1153..14c9b273 100644 --- a/samples/react-ui-kit-search-text/package.json +++ b/samples/react-ui-kit-search-text/package.json @@ -3,9 +3,10 @@ "version": "1.0.0", "type": "module", "scripts": { - "start": "vite", - "build": "tsc && vite build", - "test": "tsc", + "build": "tsc && bash ../react-docs.sh react-ui-kit-search-text && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-search-text", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", "preview": "vite preview" }, "dependencies": { diff --git a/samples/react-ui-kit-search-text/src/app.tsx b/samples/react-ui-kit-search-text/src/app.tsx index 2619aa0d..6537df99 100644 --- a/samples/react-ui-kit-search-text/src/app.tsx +++ b/samples/react-ui-kit-search-text/src/app.tsx @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -// [START maps_react_places_ui_kit_search_text] +{/* [START maps_react_places_ui_kit_search_text] */} import React, {useState, useEffect, useRef, type RefObject} from 'react'; import {createRoot} from 'react-dom/client'; import { @@ -211,4 +211,4 @@ root.render( ); -// [END maps_react_places_ui_kit_search_text] \ No newline at end of file +{/* [END maps_react_places_ui_kit_search_text] */} \ No newline at end of file From f9f0e3e66dfa2867a0dd951628b7d65ce3b3d538 Mon Sep 17 00:00:00 2001 From: William French Date: Mon, 29 Sep 2025 13:38:51 -0700 Subject: [PATCH 2/4] Update comment tags for place details example --- samples/react-ui-kit-place-details-latlng-compact/src/app.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx b/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx index 384e8c9b..ad7f4173 100644 --- a/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx +++ b/samples/react-ui-kit-place-details-latlng-compact/src/app.tsx @@ -3,7 +3,7 @@ * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ -{/* [START maps_react_ui_kit_place_details_by_latlng_compact] */} +{/* [START maps_react_ui_kit_place_details_latlng_compact] */} import React, {useEffect, useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps'; @@ -85,4 +85,4 @@ export function renderToDom(container: HTMLElement) { ); } -{/* [END maps_react_ui_kit_place_details_by_latlng_compact] */} +{/* [END maps_react_ui_kit_place_details_latlng_compact] */} From 083e523614bed388433a13506941b10992225d6a Mon Sep 17 00:00:00 2001 From: William French Date: Mon, 29 Sep 2025 13:51:40 -0700 Subject: [PATCH 3/4] Update placeSearchRef type to allow null values --- samples/react-ui-kit-search-nearby/src/app.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/react-ui-kit-search-nearby/src/app.tsx b/samples/react-ui-kit-search-nearby/src/app.tsx index deb99290..38d3ffcd 100644 --- a/samples/react-ui-kit-search-nearby/src/app.tsx +++ b/samples/react-ui-kit-search-nearby/src/app.tsx @@ -76,7 +76,7 @@ const PlacesSearchLayout = () => { }; interface PlaceSearchControllerProps { - placeSearchRef: RefObject; + placeSearchRef: RefObject; selectedType: string; setPlaces: (places: any[]) => void; setSelectedPlace: (place: any | null) => void; @@ -209,4 +209,4 @@ root.render( ); -{/* [END maps_react_places_ui_kit_search_nearby] */} \ No newline at end of file +{/* [END maps_react_places_ui_kit_search_nearby] */} From 4a439bf15544f0d36535a425ceea33be97b9b30f Mon Sep 17 00:00:00 2001 From: William French Date: Mon, 29 Sep 2025 13:57:20 -0700 Subject: [PATCH 4/4] Update placeSearchRef type to allow null It now passes checks, but looks like I might've broken your UI (zoom does not behave normally upon selecting a result, it stays zoomed all the way out). --- samples/react-ui-kit-search-text/src/app.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/react-ui-kit-search-text/src/app.tsx b/samples/react-ui-kit-search-text/src/app.tsx index 6537df99..8da1d210 100644 --- a/samples/react-ui-kit-search-text/src/app.tsx +++ b/samples/react-ui-kit-search-text/src/app.tsx @@ -82,7 +82,7 @@ const PlacesSearchLayout = () => { }; interface PlaceSearchControllerProps { - placeSearchRef: RefObject; + placeSearchRef: RefObject; query: string; setPlaces: (places: any[]) => void; setSelectedPlace: (place: any | null) => void; @@ -211,4 +211,4 @@ root.render( ); -{/* [END maps_react_places_ui_kit_search_text] */} \ No newline at end of file +{/* [END maps_react_places_ui_kit_search_text] */}