From 959c6e3d57d896d4f76640e01b3ad0a33dea3fae Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Tue, 7 Nov 2023 17:33:47 +0100 Subject: [PATCH] feat: standalone examples (CodeSandbox) (#48) * add codesandbox links to all examples, update template and example readme * control panel style fixes * add examples.css to published package * add exports to package.json --- examples/README.md | 4 +- examples/_template/README.md | 30 +- examples/_template/index.html | 3 +- examples/_template/package.json | 1 + examples/_template/src/control-panel.tsx | 9 +- examples/_template/vite.config.js | 8 +- examples/basic-map/README.md | 30 +- examples/basic-map/index.html | 5 +- examples/basic-map/package.json | 1 + examples/basic-map/src/control-panel.tsx | 8 +- examples/basic-map/vite.config.js | 8 +- examples/change-map-id/README.md | 32 +- examples/change-map-id/index.html | 2 +- examples/change-map-id/package.json | 1 + examples/change-map-id/src/app.tsx | 4 +- examples/change-map-id/src/control-panel.tsx | 8 +- examples/change-map-id/vite.config.js | 8 +- examples/deckgl-overlay/README.md | 30 +- examples/deckgl-overlay/index.html | 3 +- examples/deckgl-overlay/package.json | 1 + examples/deckgl-overlay/src/app.tsx | 2 + examples/deckgl-overlay/src/control-panel.tsx | 8 +- examples/deckgl-overlay/vite.config.js | 8 +- examples/examples.css | 37 ++ examples/markers-and-infowindows/README.md | 30 +- examples/markers-and-infowindows/index.html | 3 +- examples/markers-and-infowindows/package.json | 1 + .../src/control-panel.tsx | 8 +- .../markers-and-infowindows/vite.config.js | 8 +- examples/vite.config.local.js | 20 + package-lock.json | 463 +++++++++++++++++- package.json | 13 +- website/docusaurus.config.js | 5 +- website/src/styles.css | 116 +---- 34 files changed, 696 insertions(+), 222 deletions(-) create mode 100644 examples/examples.css create mode 100644 examples/vite.config.local.js diff --git a/examples/README.md b/examples/README.md index 1785f565..a7481771 100644 --- a/examples/README.md +++ b/examples/README.md @@ -19,8 +19,8 @@ additional scripts to start the example in the context of the library, using the library itself and its dependencies instead of those locally installed in the example folder. -> In the future, we want to add codesandbox-links for all examples that -> allow you to instantly start playing around with them. +All examples should contain a link to a CodeSandbox environment where the +example can be played with right away. ## Writing examples diff --git a/examples/_template/README.md b/examples/_template/README.md index 40a3e640..8cee5537 100644 --- a/examples/_template/README.md +++ b/examples/_template/README.md @@ -5,7 +5,21 @@ This is an example to show how to setup a simple Google Maps Map with the `` component of the Google Maps React library. -## Instructions +## Google Maps API key + +This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform. +See [the official documentation][get-api-key] on how to create and configure your own key. + +The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a +file named `.env` in the example directory with the following content: + +```shell title=".env" +GOOGLE_MAPS_API_KEY="" +``` + +If you are on the CodeSandbox playground you can also choose to [provide the API key like this](https://codesandbox.io/docs/learn/environment/secrets) + +## Development Go into the example-directory and run @@ -13,20 +27,12 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` -Running the examples locally requires a valid API key for the Google Maps Platform. -See [the official documentation][get-api-key] on how to create and configure your own key. - -The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a -file named `.env` in the example directory with the following content: - -```shell title=".env" -GOOGLE_MAPS_API_KEY="" -``` +The regular `npm start` task is only used for the standalone versions of the example (CodeSandbox for example) [get-api-key]: https://developers.google.com/maps/documentation/javascript/get-api-key diff --git a/examples/_template/index.html b/examples/_template/index.html index 1faa0d24..840d9806 100644 --- a/examples/_template/index.html +++ b/examples/_template/index.html @@ -21,8 +21,9 @@
diff --git a/examples/_template/package.json b/examples/_template/package.json index e3493f56..b1de7319 100644 --- a/examples/_template/package.json +++ b/examples/_template/package.json @@ -7,6 +7,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/_template/src/control-panel.tsx b/examples/_template/src/control-panel.tsx index 6319573f..734fd9cd 100644 --- a/examples/_template/src/control-panel.tsx +++ b/examples/_template/src/control-panel.tsx @@ -7,7 +7,14 @@ function ControlPanel() {

Add a brief description of the example here and update the link below

-
+ +
+ + Try on CodeSandbox ↗ + + diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js index 17260d55..187e629c 100644 --- a/examples/_template/vite.config.js +++ b/examples/_template/vite.config.js @@ -1,17 +1,11 @@ import {defineConfig, loadEnv} from 'vite'; -import {resolve} from 'node:path'; export default defineConfig(({mode}) => { - const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), ''); + const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), ''); return { define: { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) - }, - resolve: { - alias: { - '@vis.gl/react-google-maps': resolve('../../src/index.ts') - } } }; }); diff --git a/examples/basic-map/README.md b/examples/basic-map/README.md index 40a3e640..8cee5537 100644 --- a/examples/basic-map/README.md +++ b/examples/basic-map/README.md @@ -5,7 +5,21 @@ This is an example to show how to setup a simple Google Maps Map with the `` component of the Google Maps React library. -## Instructions +## Google Maps API key + +This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform. +See [the official documentation][get-api-key] on how to create and configure your own key. + +The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a +file named `.env` in the example directory with the following content: + +```shell title=".env" +GOOGLE_MAPS_API_KEY="" +``` + +If you are on the CodeSandbox playground you can also choose to [provide the API key like this](https://codesandbox.io/docs/learn/environment/secrets) + +## Development Go into the example-directory and run @@ -13,20 +27,12 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` -Running the examples locally requires a valid API key for the Google Maps Platform. -See [the official documentation][get-api-key] on how to create and configure your own key. - -The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a -file named `.env` in the example directory with the following content: - -```shell title=".env" -GOOGLE_MAPS_API_KEY="" -``` +The regular `npm start` task is only used for the standalone versions of the example (CodeSandbox for example) [get-api-key]: https://developers.google.com/maps/documentation/javascript/get-api-key diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html index cdb709ce..8edcfc78 100644 --- a/examples/basic-map/index.html +++ b/examples/basic-map/index.html @@ -21,10 +21,11 @@ -
+
diff --git a/examples/basic-map/package.json b/examples/basic-map/package.json index e3493f56..b1de7319 100644 --- a/examples/basic-map/package.json +++ b/examples/basic-map/package.json @@ -7,6 +7,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/basic-map/src/control-panel.tsx b/examples/basic-map/src/control-panel.tsx index d623b6d1..28777373 100644 --- a/examples/basic-map/src/control-panel.tsx +++ b/examples/basic-map/src/control-panel.tsx @@ -8,7 +8,13 @@ function ControlPanel() { The simplest example possible, just rendering a google map with some settings adjusted.

-
+
+ + Try on CodeSandbox ↗ + + diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js index 17260d55..187e629c 100644 --- a/examples/basic-map/vite.config.js +++ b/examples/basic-map/vite.config.js @@ -1,17 +1,11 @@ import {defineConfig, loadEnv} from 'vite'; -import {resolve} from 'node:path'; export default defineConfig(({mode}) => { - const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), ''); + const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), ''); return { define: { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) - }, - resolve: { - alias: { - '@vis.gl/react-google-maps': resolve('../../src/index.ts') - } } }; }); diff --git a/examples/change-map-id/README.md b/examples/change-map-id/README.md index 40a3e640..26bf98e6 100644 --- a/examples/change-map-id/README.md +++ b/examples/change-map-id/README.md @@ -2,10 +2,24 @@ ![image](https://user-images.githubusercontent.com/39244966/208682692-d5b23518-9e51-4a87-8121-29f71e41c777.png) -This is an example to show how to setup a simple Google Maps Map with the `` component of the Google Maps React +This is an example to show how to change the map id of a simple Google Maps Map with the `` component of the Google Maps React library. -## Instructions +## Google Maps API key + +This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform. +See [the official documentation][get-api-key] on how to create and configure your own key. + +The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a +file named `.env` in the example directory with the following content: + +```shell title=".env" +GOOGLE_MAPS_API_KEY="" +``` + +If you are on the CodeSandbox playground you can also choose to [provide the API key like this](https://codesandbox.io/docs/learn/environment/secrets) + +## Development Go into the example-directory and run @@ -13,20 +27,12 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` -Running the examples locally requires a valid API key for the Google Maps Platform. -See [the official documentation][get-api-key] on how to create and configure your own key. - -The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a -file named `.env` in the example directory with the following content: - -```shell title=".env" -GOOGLE_MAPS_API_KEY="" -``` +The regular `npm start` task is only used for the standalone versions of the example (CodeSandbox for example) [get-api-key]: https://developers.google.com/maps/documentation/javascript/get-api-key diff --git a/examples/change-map-id/index.html b/examples/change-map-id/index.html index d7aee192..1c543dfc 100644 --- a/examples/change-map-id/index.html +++ b/examples/change-map-id/index.html @@ -21,7 +21,7 @@
diff --git a/examples/deckgl-overlay/package.json b/examples/deckgl-overlay/package.json index 80229c05..d4a36f29 100644 --- a/examples/deckgl-overlay/package.json +++ b/examples/deckgl-overlay/package.json @@ -9,6 +9,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/deckgl-overlay/src/app.tsx b/examples/deckgl-overlay/src/app.tsx index 00800e59..12bcfc01 100644 --- a/examples/deckgl-overlay/src/app.tsx +++ b/examples/deckgl-overlay/src/app.tsx @@ -10,6 +10,7 @@ const DATA_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json'; import type {Feature, GeoJSON} from 'geojson'; +import ControlPanel from './control-panel'; const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; @@ -32,6 +33,7 @@ const App = () => { disableDefaultUI={true}> + ); }; diff --git a/examples/deckgl-overlay/src/control-panel.tsx b/examples/deckgl-overlay/src/control-panel.tsx index 92aeef8f..0244747c 100644 --- a/examples/deckgl-overlay/src/control-panel.tsx +++ b/examples/deckgl-overlay/src/control-panel.tsx @@ -13,7 +13,13 @@ function ControlPanel() { ).

-
+
+ + Try on CodeSandbox ↗ + + diff --git a/examples/deckgl-overlay/vite.config.js b/examples/deckgl-overlay/vite.config.js index 17260d55..187e629c 100644 --- a/examples/deckgl-overlay/vite.config.js +++ b/examples/deckgl-overlay/vite.config.js @@ -1,17 +1,11 @@ import {defineConfig, loadEnv} from 'vite'; -import {resolve} from 'node:path'; export default defineConfig(({mode}) => { - const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), ''); + const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), ''); return { define: { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) - }, - resolve: { - alias: { - '@vis.gl/react-google-maps': resolve('../../src/index.ts') - } } }; }); diff --git a/examples/examples.css b/examples/examples.css new file mode 100644 index 00000000..6cff2f60 --- /dev/null +++ b/examples/examples.css @@ -0,0 +1,37 @@ +.control-panel { + font-size: 14px; + line-height: 18px; + width: 284px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + margin: 24px; + padding: 12px 24px; + position: absolute; + top: 0; + right: 0; + outline: none; + cursor: auto; + box-sizing: border-box; +} + +.control-panel h3 { + font-size: 1.2em; + font-weight: 500; + margin: 8px 0; +} + +.control-panel p { + margin-bottom: 16px; +} + +.control-panel .links { + margin-top: 8px; + display: flex; + justify-content: space-between; +} + +.control-panel .links a { + font-weight: bold; + color: #486865; + font-size: 11px; +} diff --git a/examples/markers-and-infowindows/README.md b/examples/markers-and-infowindows/README.md index 93077a1b..f8e61c26 100644 --- a/examples/markers-and-infowindows/README.md +++ b/examples/markers-and-infowindows/README.md @@ -3,7 +3,21 @@ Shows the different ways to use the ``, `` and `` components. -## Instructions +## Google Maps API key + +This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform. +See [the official documentation][get-api-key] on how to create and configure your own key. + +The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a +file named `.env` in the example directory with the following content: + +```shell title=".env" +GOOGLE_MAPS_API_KEY="" +``` + +If you are on the CodeSandbox playground you can also choose to [provide the API key like this](https://codesandbox.io/docs/learn/environment/secrets) + +## Development Go into the example-directory and run @@ -11,20 +25,12 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` -Running the examples locally requires a valid API key for the Google Maps Platform. -See [the official documentation][get-api-key] on how to create and configure your own key. - -The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a -file named `.env` in the example directory with the following content: - -```shell title=".env" -GOOGLE_MAPS_API_KEY="" -``` +The regular `npm start` task is only used for the standalone versions of the example (CodeSandbox for example) [get-api-key]: https://developers.google.com/maps/documentation/javascript/get-api-key diff --git a/examples/markers-and-infowindows/index.html b/examples/markers-and-infowindows/index.html index 1faa0d24..840d9806 100644 --- a/examples/markers-and-infowindows/index.html +++ b/examples/markers-and-infowindows/index.html @@ -21,8 +21,9 @@
diff --git a/examples/markers-and-infowindows/package.json b/examples/markers-and-infowindows/package.json index e3493f56..b1de7319 100644 --- a/examples/markers-and-infowindows/package.json +++ b/examples/markers-and-infowindows/package.json @@ -7,6 +7,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/markers-and-infowindows/src/control-panel.tsx b/examples/markers-and-infowindows/src/control-panel.tsx index 24ac3805..a4d900fa 100644 --- a/examples/markers-and-infowindows/src/control-panel.tsx +++ b/examples/markers-and-infowindows/src/control-panel.tsx @@ -8,7 +8,13 @@ function ControlPanel() { This example shows the different ways to add markers and infowindows to the map.

-
+
+ + Try on CodeSandbox ↗ + + diff --git a/examples/markers-and-infowindows/vite.config.js b/examples/markers-and-infowindows/vite.config.js index 17260d55..187e629c 100644 --- a/examples/markers-and-infowindows/vite.config.js +++ b/examples/markers-and-infowindows/vite.config.js @@ -1,17 +1,11 @@ import {defineConfig, loadEnv} from 'vite'; -import {resolve} from 'node:path'; export default defineConfig(({mode}) => { - const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), ''); + const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), ''); return { define: { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY) - }, - resolve: { - alias: { - '@vis.gl/react-google-maps': resolve('../../src/index.ts') - } } }; }); diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js new file mode 100644 index 00000000..97bdf340 --- /dev/null +++ b/examples/vite.config.local.js @@ -0,0 +1,20 @@ +import {defineConfig, loadEnv} from 'vite'; +import {resolve} from 'node:path'; + +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) + }, + resolve: { + alias: { + '@vis.gl/react-google-maps/examples.css': resolve( + '../../examples/examples.css' + ), + '@vis.gl/react-google-maps': resolve('../../src/index.ts') + } + } + }; +}); diff --git a/package-lock.json b/package-lock.json index 14c164aa..d3d0da6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,8 @@ "react": ">=16.8.0", "react-dom": ">=16.8.0", "ts-jest": "^29.0.5", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "vite": "^4.5.0" }, "peerDependencies": { "react": ">=16.8.0", @@ -2103,6 +2104,358 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -5029,6 +5382,43 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -11507,6 +11897,77 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/vite": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", + "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "dev": true, + "dependencies": { + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/package.json b/package.json index 1865f1bf..261745a0 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,13 @@ "source": "src/index.ts", "main": "dist/index.umd.js", "module": "dist/index.modern.mjs", + "exports": { + ".": { + "import": "./dist/index.modern.mjs", + "require": "./dist/index.umd.js" + }, + "./examples.css": "./dist/examples.css" + }, "types": "dist/index.d.ts", "repository": { "type": "git", @@ -16,9 +23,10 @@ "homepage": "https://github.com/visgl/react-google-maps#readme", "license": "MIT", "scripts": { - "clean": "rm -rf ./dist", + "clean": "rm -rf ./dist && mkdir ./dist", "build": "npm-run-all clean -p build:*", "start": "run-p start:*", + "build:examples": "cp ./examples/examples.css dist", "build:microbundle": "microbundle -o dist/index.js -f modern,umd --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --no-compress --tsconfig tsconfig.build.json", "start:microbundle": "microbundle watch -o dist/index.js -f modern,umd --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --no-compress --tsconfig tsconfig.build.json", "test:linter": "eslint 'src/**/*.{ts,tsx}'", @@ -66,6 +74,7 @@ "react": ">=16.8.0", "react-dom": ">=16.8.0", "ts-jest": "^29.0.5", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "vite": "^4.5.0" } } diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index f58127ad..80a64cf8 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -38,7 +38,10 @@ const config = { 'https://github.com/visgl/react-google-maps/tree/main/website' }, theme: { - customCss: [resolve('./src/styles.css')] + customCss: [ + resolve('./src/styles.css'), + resolve('../examples/examples.css') + ] } }) ] diff --git a/website/src/styles.css b/website/src/styles.css index 6c63d33f..9abdd488 100644 --- a/website/src/styles.css +++ b/website/src/styles.css @@ -13,16 +13,16 @@ --ifm-color-primary-light: #00befd; --ifm-color-primary-lighter: #0ac2ff; --ifm-color-primary-lightest: #2ccbff; - --ifm-color-white: #FFFFFF; - --ifm-color-gray-200: #F7FAFC; - --ifm-color-gray-300: #ECF2F7; - --ifm-color-gray-400: #E1E8F0; - --ifm-color-gray-500: #CAD5E0; - --ifm-color-gray-600: #9EAEC0; - --ifm-color-gray-700: #6F8196; + --ifm-color-white: #ffffff; + --ifm-color-gray-200: #f7fafc; + --ifm-color-gray-300: #ecf2f7; + --ifm-color-gray-400: #e1e8f0; + --ifm-color-gray-500: #cad5e0; + --ifm-color-gray-600: #9eaec0; + --ifm-color-gray-700: #6f8196; --ifm-color-gray-800: #485668; - --ifm-color-gray-900: #2B3848; - --ifm-color-black: #19202C; + --ifm-color-gray-900: #2b3848; + --ifm-color-black: #19202c; --code-font-size: 95%; } main .container { @@ -50,7 +50,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } - .tooltip { position: absolute; padding: 4px; @@ -62,100 +61,3 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { z-index: 9; pointer-events: none; } - -.control-panel { - font-size: 14px; - line-height: 18px; - width: 284px; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 24px; - position: absolute; - top: 0; - right: 0; - outline: none; - cursor: auto; -} - -.control-panel h3 { - font-size: 1.2em; - font-weight: 500; - margin: 8px 0; -} - -.control-panel a { - display: inline; -} - -.control-panel p { - margin-bottom: 16px; -} - -.control-panel .legend { - display: inline-block; - width: 12px; - height: 12px; -} -.control-panel hr { - margin: 12px -24px; -} -.control-panel .source-link { - text-align: right; - margin-top: 8px; -} -.control-panel .source-link a { - font-weight: bold; - color: #486865; - font-size: 11px; -} -.control-panel .input { - position: relative; - display: flex; - width: 100%; -} - -.control-panel .input>* { - vertical-align: middle; - white-space: nowrap; -} -.control-panel .input label { - text-transform: uppercase; - width: 50%; - margin-right: 10%; - color: #486865; - margin-bottom: 4px; -} -.control-panel .input input, .control-panel .input a { - font-size: 0.9em; - display: inline-block; - padding: 0 4px; - width: 40%; - height: 20px; - line-height: 1.833; -} -.control-panel .input input[type="checkbox"], -.control-panel .input input[type="radio"], -.control-panel .input input[type="color"] { - width: 20%; -} -.control-panel .input input { - border: solid 1px #ccc; -} -.control-panel .input input:disabled { - background: #fff; -} -.control-panel .input input[type="checkbox"] { - height: auto; -} - -.control-panel .input .tooltip { - left: 50%; - top: 24px; - opacity: 0; - pointer-events: none; - transition: opacity 200ms; -} -.control-panel .input:hover .tooltip { - opacity: 1; -}