From cb0c6381099ea071560466d996ad2cf703f74fac Mon Sep 17 00:00:00 2001 From: noclat Date: Sun, 10 Dec 2023 10:24:48 +0100 Subject: [PATCH] style: prettier --- .eslintrc.yml | 16 + .github/workflows/ci.yml | 2 +- .prettierignore | 7 + .prettierrc.yml | 2 + README.md | 21 +- list-examples.js => build-index.js | 10 +- examples.yml => examples-index.yml | 7 - .../autocomplete-js-address-form/README.md | 6 +- .../src/index.html | 103 ++-- .../autocomplete-js-address-form/src/main.js | 2 +- examples/autocomplete-js-basic/README.md | 6 +- examples/autocomplete-js-basic/src/index.html | 38 +- examples/autocomplete-js-cdn/README.md | 6 +- examples/autocomplete-js-cdn/src/index.html | 77 +-- examples/autocomplete-js-cities/README.md | 6 +- .../autocomplete-js-cities/src/index.html | 53 +- examples/autocomplete-js-cities/src/main.js | 2 +- .../README.md | 6 +- .../src/index.html | 68 +-- .../src/main.js | 2 +- examples/autocomplete-js-countries/README.md | 6 +- .../autocomplete-js-countries/src/index.html | 53 +- .../autocomplete-js-countries/src/main.js | 2 +- .../README.md | 19 - .../package.json | 18 - .../src/index.html | 41 -- .../src/main.js | 32 -- .../vite.config.js | 8 - .../autocomplete-js-geolocation/README.md | 6 +- .../src/index.html | 73 ++- .../autocomplete-js-geolocation/src/main.js | 2 +- examples/autocomplete-js-leaflet/README.md | 6 +- .../autocomplete-js-leaflet/src/index.html | 84 +-- examples/autocomplete-js-leaflet/src/main.js | 15 +- examples/autocomplete-js-svelte/README.md | 6 +- examples/autocomplete-js-svelte/package.json | 38 +- examples/autocomplete-js-svelte/src/app.html | 18 +- .../autocomplete-js-svelte/svelte.config.js | 8 +- .../autocomplete-js-svelte/vite.config.js | 2 +- examples/autocomplete-js-typescript/README.md | 6 +- .../autocomplete-js-typescript/package.json | 6 +- .../autocomplete-js-typescript/src/index.html | 73 ++- .../autocomplete-js-typescript/src/main.ts | 2 +- examples/autocomplete-js-vue/README.md | 6 +- examples/autocomplete-js-vue/package.json | 8 +- examples/autocomplete-js-vue/src/App.vue | 17 +- examples/autocomplete-js-vue/src/index.html | 4 +- examples/autocomplete-js-vue/vite.config.js | 2 +- .../autocomplete-react-address-form/README.md | 4 +- .../src/AddressForm.jsx | 55 +- .../src/FormField.jsx | 13 +- .../src/index.html | 2 +- .../src/main.jsx | 2 +- examples/autocomplete-react-basic/README.md | 4 +- examples/autocomplete-react-basic/src/App.jsx | 7 +- .../autocomplete-react-basic/src/index.html | 2 +- .../autocomplete-react-basic/src/main.jsx | 2 +- examples/autocomplete-react-cities/README.md | 4 +- .../autocomplete-react-cities/src/App.jsx | 2 +- .../autocomplete-react-cities/src/index.html | 2 +- .../autocomplete-react-cities/src/main.jsx | 2 +- .../README.md | 4 +- .../src/App.jsx | 2 +- .../src/index.html | 2 +- .../src/main.jsx | 2 +- .../autocomplete-react-countries/README.md | 4 +- .../autocomplete-react-countries/src/App.jsx | 30 +- .../src/index.html | 2 +- .../autocomplete-react-countries/src/main.jsx | 2 +- examples/autocomplete-react-leaflet/README.md | 4 +- .../autocomplete-react-leaflet/src/App.jsx | 47 +- .../autocomplete-react-leaflet/src/index.html | 9 +- .../autocomplete-react-leaflet/src/main.jsx | 4 +- .../README.md | 4 +- .../src/AddressForm.jsx | 37 +- .../src/FormField.jsx | 13 +- .../src/index.html | 2 +- .../src/main.jsx | 2 +- .../autocomplete-react-typescript/README.md | 4 +- .../package.json | 8 +- .../src/AddressForm.tsx | 55 +- .../src/FormField.tsx | 45 +- .../src/index.html | 2 +- .../src/main.tsx | 2 +- .../client-js-algolia-autocomplete/README.md | 4 +- .../src/index.html | 26 +- .../src/main.js | 8 +- examples/client-js-headlessui-react/README.md | 4 +- .../client-js-headlessui-react/src/App.jsx | 100 ++-- .../client-js-headlessui-react/src/index.html | 2 +- .../client-js-headlessui-react/src/main.jsx | 2 +- examples/client-js-headlessui-vue/README.md | 4 +- examples/client-js-headlessui-vue/src/App.vue | 64 +-- .../client-js-headlessui-vue/src/index.html | 2 +- examples/client-js-node-esm/README.md | 4 +- examples/client-js-node-esm/index.js | 4 +- examples/client-js-node-express/README.md | 4 +- examples/client-js-node-express/index.js | 4 +- examples/client-js-node-typescript/README.md | 4 +- examples/client-js-node-typescript/index.ts | 4 +- .../client-js-node-typescript/tsconfig.json | 2 +- examples/client-js-node/.eslintrc.yml | 2 + examples/client-js-node/README.md | 4 +- examples/client-js-node/index.js | 2 +- package-lock.json | 522 ++++++++++++++++++ package.json | 7 +- shared/global.css | 2 +- shared/package.json | 2 +- shared/placekit-logo.svg | 9 - shared/tailwind.config.js | 6 +- shared/vite.config.js | 8 +- 111 files changed, 1246 insertions(+), 948 deletions(-) create mode 100644 .eslintrc.yml create mode 100644 .prettierignore create mode 100644 .prettierrc.yml rename list-examples.js => build-index.js (79%) rename examples.yml => examples-index.yml (95%) delete mode 100644 examples/autocomplete-js-geolocation-dark/README.md delete mode 100644 examples/autocomplete-js-geolocation-dark/package.json delete mode 100644 examples/autocomplete-js-geolocation-dark/src/index.html delete mode 100644 examples/autocomplete-js-geolocation-dark/src/main.js delete mode 100644 examples/autocomplete-js-geolocation-dark/vite.config.js create mode 100644 examples/client-js-node/.eslintrc.yml delete mode 100644 shared/placekit-logo.svg diff --git a/.eslintrc.yml b/.eslintrc.yml new file mode 100644 index 0000000..0928203 --- /dev/null +++ b/.eslintrc.yml @@ -0,0 +1,16 @@ +root: true +extends: + - prettier +plugins: + - prettier +settings: + react: + version: detect +parserOptions: + ecmaVersion: latest + ecmaFeatures: + jsx: true + sourceType: module +rules: + prettier/prettier: error + no-unused-vars: off diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5ab2b15..1b636cc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,4 +18,4 @@ jobs: cache: 'npm' cache-dependency-path: '**/package-lock.json' - run: npm ci --ignore-scripts - - run: npm run lint \ No newline at end of file + - run: npm run lint diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..a24d7f6 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,7 @@ +.github +node_modules +dist +build +.svelte-kit +.vercel +.output \ No newline at end of file diff --git a/.prettierrc.yml b/.prettierrc.yml new file mode 100644 index 0000000..47a1183 --- /dev/null +++ b/.prettierrc.yml @@ -0,0 +1,2 @@ +singleQuote: true +printWidth: 100 diff --git a/README.md b/README.md index 07c08c1..91cf429 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,14 @@ -# PlaceKit examples +

+ PlaceKit implementation examples +

-We're only using [TailwindCSS](https://tailwindcss.com) as a convenience for the basic styling of the examples. +
+ +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples) + +
+ +--- ## Installing and running examples @@ -23,7 +31,12 @@ Reminder: **never commit an API key.** Then run: ```sh -npm run dev -w=examples/ +npm run dev -w= ``` -replacing `` with the directory name of the example you want to try. \ No newline at end of file +replacing `` with the directory name of the example you want to try. + +## Notes + +- We're only using [TailwindCSS](https://tailwindcss.com) as a convenience for the basic styling of the examples. +- To turn on dark mode on autocomplete, add `.dark` class or `data-theme="dark"` to `` in any autocomplete example. diff --git a/list-examples.js b/build-index.js similarity index 79% rename from list-examples.js rename to build-index.js index a728c20..4b665fb 100644 --- a/list-examples.js +++ b/build-index.js @@ -1,8 +1,8 @@ import fs from 'node:fs'; import path from 'node:path'; import { stringify } from 'yaml'; -import rootPackage from './package.json' assert {type: 'json'}; +const rootPackage = JSON.parse(fs.readFileSync('./package.json')); const repoURL = new URL(rootPackage.homepage); repoURL.hash = ''; @@ -18,7 +18,9 @@ const baseURL = path.join(repoURL.href, 'tree/main', examplesPath); for (const exampleDir of fs.readdirSync(examplesPath, { withFileTypes: true })) { if (exampleDir.isDirectory()) { - for (const exampleFile of fs.readdirSync(path.join(exampleDir.path, exampleDir.name), { withFileTypes: true })) { + for (const exampleFile of fs.readdirSync(path.join(exampleDir.path, exampleDir.name), { + withFileTypes: true, + })) { if (exampleFile.name === 'package.json') { const packagePath = path.join(exampleFile.path, exampleFile.name); const packageRaw = fs.readFileSync(packagePath); @@ -34,4 +36,6 @@ for (const exampleDir of fs.readdirSync(examplesPath, { withFileTypes: true })) } } -fs.writeFileSync('examples.yml', stringify(output)); \ No newline at end of file +const outputFile = 'examples-index.yml'; +fs.writeFileSync(outputFile, stringify(output)); +console.log(`✅ ${outputFile} is up to date!`); diff --git a/examples.yml b/examples-index.yml similarity index 95% rename from examples.yml rename to examples-index.yml index 7986ec8..8328a03 100644 --- a/examples.yml +++ b/examples-index.yml @@ -52,13 +52,6 @@ examples: - vanilla-js - front-end - autocomplete-js - - slug: autocomplete-js-geolocation-dark - url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation-dark - description: Address autocomplete in dark mode with user's geolocation - keywords: - - vanilla-js - - front-end - - autocomplete-js - slug: autocomplete-js-leaflet url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-leaflet description: Address search on map with Leaflet diff --git a/examples/autocomplete-js-address-form/README.md b/examples/autocomplete-js-address-form/README.md index ace9dbc..99d0d51 100644 --- a/examples/autocomplete-js-address-form/README.md +++ b/examples/autocomplete-js-address-form/README.md @@ -1,6 +1,6 @@ # Auto-fill form with address autocomplete with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-address-form) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-address-form) Automatically fill address form fields with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js), speeding up e-commerce user's checkout funnel and increasing conversions. @@ -9,7 +9,7 @@ Automatically fill address form fields with [PlaceKit Autocomplete JS](https://g See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-address-form +npm run dev -w=autocomplete-js-address-form ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-address-form/src/index.html b/examples/autocomplete-js-address-form/src/index.html index 2b4ac3d..00d3ff3 100644 --- a/examples/autocomplete-js-address-form/src/index.html +++ b/examples/autocomplete-js-address-form/src/index.html @@ -1,56 +1,51 @@ - + - - - - Auto-fill form with address autocomplete with PlaceKit Autocomplete JS - - -
-
- - -
-
- - -
-
- - -
-
- - -
-
+ + + + Auto-fill form with address autocomplete with PlaceKit Autocomplete JS + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-address-form/src/main.js b/examples/autocomplete-js-address-form/src/main.js index 48c7cff..6749ec1 100644 --- a/examples/autocomplete-js-address-form/src/main.js +++ b/examples/autocomplete-js-address-form/src/main.js @@ -14,4 +14,4 @@ pka.on('pick', (value, item) => { for (const name of ['city', 'zipcode', 'country']) { form.querySelector(`input[name="${name}"]`).value = [].concat(item[name]).join(','); } -}); \ No newline at end of file +}); diff --git a/examples/autocomplete-js-basic/README.md b/examples/autocomplete-js-basic/README.md index 4bd10b4..a0991c2 100644 --- a/examples/autocomplete-js-basic/README.md +++ b/examples/autocomplete-js-basic/README.md @@ -1,6 +1,6 @@ # Basic address autocomplete with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-basic) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-basic) Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js). @@ -9,7 +9,7 @@ Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/pl See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-basic +npm run dev -w=autocomplete-js-basic ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-basic/src/index.html b/examples/autocomplete-js-basic/src/index.html index 0acbbca..6f646ac 100644 --- a/examples/autocomplete-js-basic/src/index.html +++ b/examples/autocomplete-js-basic/src/index.html @@ -1,21 +1,21 @@ - + - - - - Basic address autocomplete with PlaceKit Autocomplete JS - - -
- -
+ + + + Basic address autocomplete with PlaceKit Autocomplete JS + + +
+ +
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-cdn/README.md b/examples/autocomplete-js-cdn/README.md index 78a0edd..a3d8a3a 100644 --- a/examples/autocomplete-js-cdn/README.md +++ b/examples/autocomplete-js-cdn/README.md @@ -1,6 +1,6 @@ # Basic address autocomplete with PlaceKit Autocomplete JS from CDN -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-cdn) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-cdn) Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js) loaded from the [JSDeliver CDN](https://www.jsdelivr.com/package/npm/@placekit/autocomplete-js). Any other Autocomplete JS example would work with PlaceKit Autocomplete JS loaded from CDN. @@ -11,7 +11,7 @@ Basic address autocomplete with [PlaceKit Autocomplete JS](https://github.com/pl See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-cdn +npm run dev -w=autocomplete-js-cdn ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-cdn/src/index.html b/examples/autocomplete-js-cdn/src/index.html index d456169..6592620 100644 --- a/examples/autocomplete-js-cdn/src/index.html +++ b/examples/autocomplete-js-cdn/src/index.html @@ -1,39 +1,44 @@ - + - - - - Basic address autocomplete with PlaceKit Autocomplete JS from CDN - - - - -
- + + + Basic address autocomplete with PlaceKit Autocomplete JS from CDN + -
+ + + +
+ +
- - - - \ No newline at end of file + + + + diff --git a/examples/autocomplete-js-cities/README.md b/examples/autocomplete-js-cities/README.md index c9efb1f..dbf7f63 100644 --- a/examples/autocomplete-js-cities/README.md +++ b/examples/autocomplete-js-cities/README.md @@ -1,6 +1,6 @@ # Global city search with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-cities) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-cities) Global city search field with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js). Change `types: ['city']` to `types: ['city', 'country']` to show both world cities and countries. @@ -9,7 +9,7 @@ Global city search field with [PlaceKit Autocomplete JS](https://github.com/plac See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-cities +npm run dev -w=autocomplete-js-cities ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-cities/src/index.html b/examples/autocomplete-js-cities/src/index.html index 1dd964e..37315cd 100644 --- a/examples/autocomplete-js-cities/src/index.html +++ b/examples/autocomplete-js-cities/src/index.html @@ -1,31 +1,26 @@ - + - - - - Global city search with PlaceKit Autocomplete JS - - -
-
- - -
-
+ + + + Global city search with PlaceKit Autocomplete JS + + +
+
+ + +
+
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-cities/src/main.js b/examples/autocomplete-js-cities/src/main.js index fd4a15d..82ae7cc 100644 --- a/examples/autocomplete-js-cities/src/main.js +++ b/examples/autocomplete-js-cities/src/main.js @@ -18,4 +18,4 @@ clearButton.addEventListener('click', pka.clear); // hide clear button when input is empty pka.on('empty', (empty) => { clearButton.setAttribute('aria-hidden', empty); -}); \ No newline at end of file +}); diff --git a/examples/autocomplete-js-countries-whitelist/README.md b/examples/autocomplete-js-countries-whitelist/README.md index 2214a21..987738c 100644 --- a/examples/autocomplete-js-countries-whitelist/README.md +++ b/examples/autocomplete-js-countries-whitelist/README.md @@ -1,6 +1,6 @@ # Address autocomplete with countries whitelist with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-countries-whitelist) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-countries-whitelist) Address autocomplete with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js) and a custom country selector to constrain the list of available countries. @@ -13,7 +13,7 @@ In some use-cases, you may want control over the list of allowed countries. Our See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-countries-whitelist +npm run dev -w=autocomplete-js-countries-whitelist ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-countries-whitelist/src/index.html b/examples/autocomplete-js-countries-whitelist/src/index.html index 5ba07b7..7b0ef6d 100644 --- a/examples/autocomplete-js-countries-whitelist/src/index.html +++ b/examples/autocomplete-js-countries-whitelist/src/index.html @@ -1,40 +1,32 @@ - + - - - - PlaceKit Autocomplete JS country field - - -
- -
- - -
-
+ + + + PlaceKit Autocomplete JS country field + + +
+ +
+ + +
+
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-countries-whitelist/src/main.js b/examples/autocomplete-js-countries-whitelist/src/main.js index 2aeca1b..fd2aa4a 100644 --- a/examples/autocomplete-js-countries-whitelist/src/main.js +++ b/examples/autocomplete-js-countries-whitelist/src/main.js @@ -39,4 +39,4 @@ countrySelect.addEventListener('change', (e) => { } else { pka.input.setAttribute('disabled', true); } -}); \ No newline at end of file +}); diff --git a/examples/autocomplete-js-countries/README.md b/examples/autocomplete-js-countries/README.md index a90182c..55ff832 100644 --- a/examples/autocomplete-js-countries/README.md +++ b/examples/autocomplete-js-countries/README.md @@ -1,6 +1,6 @@ # Country search with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-countries) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-countries) Country selector field with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js), and automatically fill the current user's country (based on IP). @@ -9,7 +9,7 @@ Country selector field with [PlaceKit Autocomplete JS](https://github.com/placek See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-countries +npm run dev -w=autocomplete-js-countries ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-countries/src/index.html b/examples/autocomplete-js-countries/src/index.html index a3889f8..8704975 100644 --- a/examples/autocomplete-js-countries/src/index.html +++ b/examples/autocomplete-js-countries/src/index.html @@ -1,31 +1,26 @@ - + - - - - PlaceKit Autocomplete JS country field - - -
-
- - -
-
+ + + + PlaceKit Autocomplete JS country field + + +
+
+ + +
+
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-countries/src/main.js b/examples/autocomplete-js-countries/src/main.js index 3bed444..0e5960f 100644 --- a/examples/autocomplete-js-countries/src/main.js +++ b/examples/autocomplete-js-countries/src/main.js @@ -17,4 +17,4 @@ clearButton.addEventListener('click', pka.clear); // hide clear button when input is empty pka.on('empty', (empty) => { clearButton.setAttribute('aria-hidden', empty); -}); \ No newline at end of file +}); diff --git a/examples/autocomplete-js-geolocation-dark/README.md b/examples/autocomplete-js-geolocation-dark/README.md deleted file mode 100644 index d0791e1..0000000 --- a/examples/autocomplete-js-geolocation-dark/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# Address autocomplete in dark mode with user's geolocation with PlaceKit Autocomplete JS - -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation) - -Full address autocomplete component implementation, enabling device's geolocation and clear buttons with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js) in dark mode. - -Users providing their geolocation will get more accurate results and consume less API requests on average because of the improved relevance. When their device's geolocation sharing is turned off, our API uses their IP instead. - -Dark mode is supported by default and turns on automatically when `body` has a `.dark` class. - -## Run - -See [../../README.md](root README) for installation process. - -```sh -npm run dev -w=examples/autocomplete-js-geolocation -``` - -And your project will be served at http://localhost:5173. \ No newline at end of file diff --git a/examples/autocomplete-js-geolocation-dark/package.json b/examples/autocomplete-js-geolocation-dark/package.json deleted file mode 100644 index 74b8123..0000000 --- a/examples/autocomplete-js-geolocation-dark/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "private": true, - "description": "Address autocomplete in dark mode with user's geolocation", - "keywords": [ - "vanilla-js", - "front-end", - "autocomplete-js" - ], - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview" - }, - "dependencies": { - "@placekit/autocomplete-js": "^2.1.6" - } -} diff --git a/examples/autocomplete-js-geolocation-dark/src/index.html b/examples/autocomplete-js-geolocation-dark/src/index.html deleted file mode 100644 index 88512cd..0000000 --- a/examples/autocomplete-js-geolocation-dark/src/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - PlaceKit Autocomplete JS geolocation dark mode - - -
-
- - - -
-
- - - - \ No newline at end of file diff --git a/examples/autocomplete-js-geolocation-dark/src/main.js b/examples/autocomplete-js-geolocation-dark/src/main.js deleted file mode 100644 index d90e45e..0000000 --- a/examples/autocomplete-js-geolocation-dark/src/main.js +++ /dev/null @@ -1,32 +0,0 @@ -import placekitAutocomplete from '@placekit/autocomplete-js'; - -import 'shared/global.css'; // load tailwindcss -import '@placekit/autocomplete-js/dist/placekit-autocomplete.css'; - -// instantiate PlaceKit Autocomplete JS -const pka = placekitAutocomplete(import.meta.env.VITE_PLACEKIT_API_KEY, { - target: '#placekit-input', -}); - -// request geolocation on click -const geolocationButton = document.querySelector('#placekit-geolocation'); -pka.on('geolocation', (bool) => { - geolocationButton.setAttribute('aria-checked', bool); - geolocationButton.classList.toggle('pka-enabled', bool); -}); -geolocationButton.addEventListener('click', () => { - if (pka.state.geolocation) { - pka.clearGeolocation(); - } else { - pka.requestGeolocation(); - } -}); - -// clear input on click -const clearButton = document.querySelector('#placekit-clear'); -clearButton.addEventListener('click', pka.clear); - -// hide clear button when input is empty -pka.on('empty', (empty) => { - clearButton.setAttribute('aria-hidden', empty); -}); \ No newline at end of file diff --git a/examples/autocomplete-js-geolocation-dark/vite.config.js b/examples/autocomplete-js-geolocation-dark/vite.config.js deleted file mode 100644 index ce6f1dc..0000000 --- a/examples/autocomplete-js-geolocation-dark/vite.config.js +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from 'vite'; -import viteConfig from 'shared/vite.config.js'; - -// https://vitejs.dev/config/ -export default defineConfig({ - ...viteConfig, - root: './src', -}); diff --git a/examples/autocomplete-js-geolocation/README.md b/examples/autocomplete-js-geolocation/README.md index c73820c..da63e6f 100644 --- a/examples/autocomplete-js-geolocation/README.md +++ b/examples/autocomplete-js-geolocation/README.md @@ -1,6 +1,6 @@ # Address autocomplete with user's geolocation with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation) Full address autocomplete component implementation, enabling device's geolocation and clear buttons with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js). @@ -11,7 +11,7 @@ Users providing their geolocation will get more accurate results and consume les See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-geolocation +npm run dev -w=autocomplete-js-geolocation ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-geolocation/src/index.html b/examples/autocomplete-js-geolocation/src/index.html index c697245..480c61c 100644 --- a/examples/autocomplete-js-geolocation/src/index.html +++ b/examples/autocomplete-js-geolocation/src/index.html @@ -1,41 +1,36 @@ - + - - - - PlaceKit Autocomplete JS geolocation - - -
-
- - - -
-
+ + + + PlaceKit Autocomplete JS geolocation + + +
+
+ + + +
+
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-geolocation/src/main.js b/examples/autocomplete-js-geolocation/src/main.js index d90e45e..87d1249 100644 --- a/examples/autocomplete-js-geolocation/src/main.js +++ b/examples/autocomplete-js-geolocation/src/main.js @@ -29,4 +29,4 @@ clearButton.addEventListener('click', pka.clear); // hide clear button when input is empty pka.on('empty', (empty) => { clearButton.setAttribute('aria-hidden', empty); -}); \ No newline at end of file +}); diff --git a/examples/autocomplete-js-leaflet/README.md b/examples/autocomplete-js-leaflet/README.md index a4c9077..84ca228 100644 --- a/examples/autocomplete-js-leaflet/README.md +++ b/examples/autocomplete-js-leaflet/README.md @@ -1,6 +1,6 @@ # Address search on map with Leaflet and PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-leaflet) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-leaflet) Address search on map with [LeafletJS](https://leafletjs.com), an open-source JavaScript library for interactive maps, and [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js). @@ -9,7 +9,7 @@ Address search on map with [LeafletJS](https://leafletjs.com), an open-source Ja See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-leaflet +npm run dev -w=autocomplete-js-leaflet ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-leaflet/src/index.html b/examples/autocomplete-js-leaflet/src/index.html index 69579bb..4e08aa8 100644 --- a/examples/autocomplete-js-leaflet/src/index.html +++ b/examples/autocomplete-js-leaflet/src/index.html @@ -1,45 +1,45 @@ - + - - - - PlaceKit Autocomplete JS x Leaflet - - - -
-
-
- - - + + + + PlaceKit Autocomplete JS x Leaflet + + + +
+
+
+ + + +
-
-
-
+
+ - - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-leaflet/src/main.js b/examples/autocomplete-js-leaflet/src/main.js index eef8777..0cd9b84 100644 --- a/examples/autocomplete-js-leaflet/src/main.js +++ b/examples/autocomplete-js-leaflet/src/main.js @@ -7,14 +7,17 @@ import '@placekit/autocomplete-js/dist/placekit-autocomplete.css'; // instantiate Leaflet map const map = L.map('map', { zoomControl: false, -}).setView([48.870820, 2.304442], 12); +}).setView([48.87082, 2.304442], 12); L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { maxZoom: 19, - attribution: '© OpenStreetMap contributors © CARTO' -}).addTo(map); -L.control.zoom({ - position: 'topright', + attribution: + '© OpenStreetMap contributors © CARTO', }).addTo(map); +L.control + .zoom({ + position: 'topright', + }) + .addTo(map); // set unique marker let marker; @@ -62,4 +65,4 @@ pka.on('pick', (_, item) => { }); pka.on('geolocation', (_, pos) => { updateMarker(pos.coords.latitude, pos.coords.longitude); -}); \ No newline at end of file +}); diff --git a/examples/autocomplete-js-svelte/README.md b/examples/autocomplete-js-svelte/README.md index e327625..5a41be1 100644 --- a/examples/autocomplete-js-svelte/README.md +++ b/examples/autocomplete-js-svelte/README.md @@ -1,6 +1,6 @@ # Svelte autocomplete component with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-svelte) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-svelte) [Svelte](https://svelte.dev) complete address autocomplete component wrapper from [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js).Svelte, as opposed to React, has no virtual DOM, making it easy to bind third-party libraries. @@ -9,7 +9,7 @@ See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-svelte +npm run dev -w=autocomplete-js-svelte ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-svelte/package.json b/examples/autocomplete-js-svelte/package.json index e517198..93aefce 100644 --- a/examples/autocomplete-js-svelte/package.json +++ b/examples/autocomplete-js-svelte/package.json @@ -1,23 +1,23 @@ { - "name": "autocomplete-js-svelte", - "description": "Svelte autocomplete component", - "keywords": [ - "svelte", + "name": "autocomplete-js-svelte", + "description": "Svelte autocomplete component", + "keywords": [ + "svelte", "front-end", "autocomplete-js" - ], - "type": "module", - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview" - }, - "devDependencies": { - "@sveltejs/adapter-auto": "^2.1.1", - "@sveltejs/kit": "^1.27.7", - "svelte": "^4.2.8" - }, - "dependencies": { - "@placekit/autocomplete-js": "^2.1.6" - } + ], + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^2.1.1", + "@sveltejs/kit": "^1.27.7", + "svelte": "^4.2.8" + }, + "dependencies": { + "@placekit/autocomplete-js": "^2.1.6" + } } diff --git a/examples/autocomplete-js-svelte/src/app.html b/examples/autocomplete-js-svelte/src/app.html index 12f2e47..00c7f43 100644 --- a/examples/autocomplete-js-svelte/src/app.html +++ b/examples/autocomplete-js-svelte/src/app.html @@ -1,11 +1,11 @@ - + - - - - %sveltekit.head% - - -
%sveltekit.body%
- + + + + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/examples/autocomplete-js-svelte/svelte.config.js b/examples/autocomplete-js-svelte/svelte.config.js index 88a0d8a..eccba7b 100644 --- a/examples/autocomplete-js-svelte/svelte.config.js +++ b/examples/autocomplete-js-svelte/svelte.config.js @@ -3,10 +3,10 @@ import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ const config = { - kit: { - adapter: adapter(), - }, - preprocess: vitePreprocess(), + kit: { + adapter: adapter(), + }, + preprocess: vitePreprocess(), }; export default config; diff --git a/examples/autocomplete-js-svelte/vite.config.js b/examples/autocomplete-js-svelte/vite.config.js index 2a7d2a8..5e75367 100644 --- a/examples/autocomplete-js-svelte/vite.config.js +++ b/examples/autocomplete-js-svelte/vite.config.js @@ -5,5 +5,5 @@ import viteConfig from 'shared/vite.config.js'; // https://vitejs.dev/config/ export default defineConfig({ ...viteConfig, - plugins: [sveltekit()], + plugins: [sveltekit()], }); diff --git a/examples/autocomplete-js-typescript/README.md b/examples/autocomplete-js-typescript/README.md index 293896d..337341f 100644 --- a/examples/autocomplete-js-typescript/README.md +++ b/examples/autocomplete-js-typescript/README.md @@ -1,6 +1,6 @@ # Address autocomplete with user's geolocation in TypeScript with PlaceKit Autocomplete JS -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-typescript) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-typescript) Full address autocomplete component implementation, enabling device's geolocation and clear buttons with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js) and TypeScript. @@ -11,7 +11,7 @@ Users providing their geolocation will get more accurate results and consume les See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-typescript +npm run dev -w=autocomplete-js-typescript ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-typescript/package.json b/examples/autocomplete-js-typescript/package.json index aa7ea5d..2251524 100644 --- a/examples/autocomplete-js-typescript/package.json +++ b/examples/autocomplete-js-typescript/package.json @@ -1,11 +1,11 @@ { "private": true, "description": "Address autocomplete with user's geolocation", - "keywords": [ - "typescript", + "keywords": [ + "typescript", "front-end", "autocomplete-js" - ], + ], "type": "module", "scripts": { "dev": "vite", diff --git a/examples/autocomplete-js-typescript/src/index.html b/examples/autocomplete-js-typescript/src/index.html index d177056..8131f02 100644 --- a/examples/autocomplete-js-typescript/src/index.html +++ b/examples/autocomplete-js-typescript/src/index.html @@ -1,41 +1,36 @@ - + - - - - PlaceKit Autocomplete JS geolocation - - -
-
- - - -
-
+ + + + PlaceKit Autocomplete JS geolocation + + +
+
+ + + +
+
- - - \ No newline at end of file + + + diff --git a/examples/autocomplete-js-typescript/src/main.ts b/examples/autocomplete-js-typescript/src/main.ts index f5ec450..36de3f9 100644 --- a/examples/autocomplete-js-typescript/src/main.ts +++ b/examples/autocomplete-js-typescript/src/main.ts @@ -33,4 +33,4 @@ if (clearButton) { pka.on('empty', (empty) => { clearButton.setAttribute('aria-hidden', empty.toString()); }); -} \ No newline at end of file +} diff --git a/examples/autocomplete-js-vue/README.md b/examples/autocomplete-js-vue/README.md index 855496a..b6eaeda 100644 --- a/examples/autocomplete-js-vue/README.md +++ b/examples/autocomplete-js-vue/README.md @@ -1,6 +1,6 @@ # Vue integration example -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox\.com/placekit/examples/tree/main/examples/autocomplete-js-vue) +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox)](https://githubbox.com/placekit/examples/tree/main/examples/autocomplete-js-vue) Full address autocomplete field in [Vue.js](https://vuejs.org) with [PlaceKit Autocomplete JS](https://github.com/placekit/autocomplete-js). Vue, as opposed to React, has a quite straightforward integration due to its component lifecycle and state management. @@ -9,7 +9,7 @@ Full address autocomplete field in [Vue.js](https://vuejs.org) with [PlaceKit Au See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-js-vue +npm run dev -w=autocomplete-js-vue ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-js-vue/package.json b/examples/autocomplete-js-vue/package.json index 4fd1bec..0fb436a 100644 --- a/examples/autocomplete-js-vue/package.json +++ b/examples/autocomplete-js-vue/package.json @@ -1,11 +1,11 @@ { "private": true, - "description": "Vue autocomplete component", - "keywords": [ - "vue", + "description": "Vue autocomplete component", + "keywords": [ + "vue", "front-end", "autocomplete-js" - ], + ], "type": "module", "scripts": { "dev": "vite", diff --git a/examples/autocomplete-js-vue/src/App.vue b/examples/autocomplete-js-vue/src/App.vue index a95b192..53a939e 100644 --- a/examples/autocomplete-js-vue/src/App.vue +++ b/examples/autocomplete-js-vue/src/App.vue @@ -20,11 +20,7 @@ > Clear value - + @@ -40,7 +36,7 @@ export default { }; }, methods: { - toggleGeolocation: function() { + toggleGeolocation: function () { if (this.client) { if (this.state.geolocation) { this.client.clearGeolocation(); @@ -53,10 +49,9 @@ export default { mounted() { this.client = placekitAutocomplete(import.meta.env.VITE_PLACEKIT_API_KEY, { target: this.$refs.input, - }) - .on('state', (state) => { - this.state = { ...state }; // spread to force update state with new value - }) + }).on('state', (state) => { + this.state = { ...state }; // spread to force update state with new value + }); // inject initial state from client this.state = { ...this.client.state }; // spread to force update state with new value @@ -67,4 +62,4 @@ export default { } }, }; - \ No newline at end of file + diff --git a/examples/autocomplete-js-vue/src/index.html b/examples/autocomplete-js-vue/src/index.html index 0ba64ba..0910bf1 100644 --- a/examples/autocomplete-js-vue/src/index.html +++ b/examples/autocomplete-js-vue/src/index.html @@ -1,4 +1,4 @@ - + @@ -9,4 +9,4 @@
- \ No newline at end of file + diff --git a/examples/autocomplete-js-vue/vite.config.js b/examples/autocomplete-js-vue/vite.config.js index 848ae50..778f000 100644 --- a/examples/autocomplete-js-vue/vite.config.js +++ b/examples/autocomplete-js-vue/vite.config.js @@ -6,5 +6,5 @@ import viteConfig from 'shared/vite.config.js'; export default defineConfig({ ...viteConfig, root: './src', - plugins: [vue()], + plugins: [vue()], }); diff --git a/examples/autocomplete-react-address-form/README.md b/examples/autocomplete-react-address-form/README.md index 1120b38..8f9babd 100644 --- a/examples/autocomplete-react-address-form/README.md +++ b/examples/autocomplete-react-address-form/README.md @@ -11,7 +11,7 @@ Have a look at our [`react-hook-form` example](../autocomplete-react-react-hook- See [../../README.md](root README) for installation process. ```sh -npm run dev -w=examples/autocomplete-react-address-form +npm run dev -w=autocomplete-react-address-form ``` -And your project will be served at http://localhost:5173. \ No newline at end of file +And your project will be served at http://localhost:5173. diff --git a/examples/autocomplete-react-address-form/src/AddressForm.jsx b/examples/autocomplete-react-address-form/src/AddressForm.jsx index 33a6887..8327967 100644 --- a/examples/autocomplete-react-address-form/src/AddressForm.jsx +++ b/examples/autocomplete-react-address-form/src/AddressForm.jsx @@ -11,35 +11,29 @@ const AddressForm = () => { country: '', }); - const updateValue = useCallback( - (e) => { - setValues((prev) => ({ - ...prev, - [e.target.name]: e.target.value, - })); - }, - [] - ); + const updateValue = useCallback((e) => { + setValues((prev) => ({ + ...prev, + [e.target.name]: e.target.value, + })); + }, []); const handleSubmit = useCallback( (e) => { e.preventDefault(); alert(JSON.stringify(values, null, 2)); }, - [values] + [values], ); - const handlePick = useCallback( - (value, item) => { - setValues({ - address: value, - city: item.city, - zipcode: item.zipcode[0], - country: item.country, - }); - }, - [] - ); + const handlePick = useCallback((value, item) => { + setValues({ + address: value, + city: item.city, + zipcode: item.zipcode[0], + country: item.country, + }); + }, []); return (
{

Shipping address

-