init

.env

@@ -0,0 +1 @@
+VITE_PLACEKIT_API_KEY=<your-public-api-key>

.github/workflows/ci.yml

@@ -0,0 +1,21 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  run:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+      - run: npm ci --ignore-scripts
+      - run: npm run lint

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# misc
+.DS_Store
+/demos
+/NOTES.md
+
+# local env files
+.env*.local
+
+# dependencies
+node_modules
+
+# log files
+*.log*
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# cache & build
+dist
+build
+.svelte-kit
+.vercel
+.output

README.md

@@ -0,0 +1,29 @@
+# PlaceKit examples
+
+We're only using [TailwindCSS](https://tailwindcss.com) as a convenience for the basic styling of the examples.
+
+## Installing and running examples
+
+```sh
+# clone project and access this example
+git clone [email protected]:placekit/examples.git placekit-examples
+cd placekit-examples
+
+# install dependencies
+npm install
+
+# create .env file
+cp .env .env.local
+```
+
+Open the `.env.local` file and replace `<your-api-key>` with a PlaceKit API key.
+
+Reminder: **never commit an API key.**
+
+Then run:
+
+```sh
+npm run dev -w=examples/<exampleDir>
+```
+
+replacing `<exampleDir>` with the directory name of the example you want to try.

examples.yml

@@ -0,0 +1,201 @@
+name: PlaceKit implementation examples
+url: https://github.com/placekit/examples
+author: PlaceKit <[email protected]>
+examples:
+  - slug: autocomplete-js-address-form
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-address-form
+    description: Auto-fill form with address autocomplete
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-basic
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-basic
+    description: Basic address autocomplete
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-cdn
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-cdn
+    description: Basic address autocomplete
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+      - cdn
+  - slug: autocomplete-js-cities
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-cities
+    description: Global city search
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-countries
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-countries
+    description: Countries search
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-countries-whitelist
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-countries-whitelist
+    description: Address autocomplete with countries whitelist
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-geolocation
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-geolocation
+    description: Address autocomplete with user's geolocation
+    keywords:
+      - 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
+    keywords:
+      - vanilla-js
+      - front-end
+      - autocomplete-js
+      - leaflet
+  - slug: autocomplete-js-svelte
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-svelte
+    description: Svelte autocomplete component
+    keywords:
+      - svelte
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-typescript
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-typescript
+    description: Address autocomplete with user's geolocation
+    keywords:
+      - typescript
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-js-vue
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-vue
+    description: Vue autocomplete component
+    keywords:
+      - vue
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-address-form
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-address-form
+    description: Auto-fill form with address autocomplete
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-basic
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-basic
+    description: Basic address autocomplete
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-cities
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-cities
+    description: Global city search
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-countries
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-countries
+    description: Countries search
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-countries-whitelist
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-countries-whitelist
+    description: Address autocomplete with countries whitelist
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-leaflet
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-leaflet
+    description: Address search on map with Leaflet
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+      - leaflet
+  - slug: autocomplete-react-react-hook-form
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-react-hook-form
+    description: Auto-fill form with address autocomplete in React Hook Form
+    keywords:
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: autocomplete-react-typescript
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-typescript
+    description: Auto-fill form with address autocomplete
+    keywords:
+      - typescript
+      - react
+      - front-end
+      - autocomplete-js
+  - slug: client-js-algolia-autocomplete
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-algolia-autocomplete
+    description: Custom address autocomplete with Algolia Autocomplete
+    keywords:
+      - vanilla-js
+      - front-end
+      - client-js
+  - slug: client-js-headlessui-react
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-headlessui-react
+    description: Custom address autocomplete with HeadlessUI React
+    keywords:
+      - react
+      - front-end
+      - client-js
+  - slug: client-js-headlessui-vue
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-headlessui-vue
+    description: Custom address autocomplete with HeadlessUI Vue
+    keywords:
+      - vue
+      - front-end
+      - client-js
+  - slug: client-js-node
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-node
+    description: Simple address search request
+    keywords:
+      - vanilla-js
+      - node-js
+      - back-end
+      - client-js
+  - slug: client-js-node-esm
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-node-esm
+    description: Simple address search request with ESM
+    keywords:
+      - vanilla-js
+      - node-js
+      - back-end
+      - client-js
+  - slug: client-js-node-express
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-node-express
+    description: Address search Express API route
+    keywords:
+      - express
+      - node-js
+      - back-end
+      - client-js
+  - slug: client-js-node-typescript
+    url: https:/github.com/placekit/examples/tree/main/examples/client-js-node-typescript
+    description: Simple address search request
+    keywords:
+      - typescript
+      - node-js
+      - back-end
+      - client-js

examples/autocomplete-js-address-form/README.md

@@ -0,0 +1,15 @@
+# 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)
+
+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.
+
+## Run
+
+See [../../README.md](root README) for installation process.
+
+```sh
+npm run dev -w=examples/autocomplete-js-address-form
+```
+
+And your project will be served at http://localhost:5173.

examples/autocomplete-js-address-form/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "description": "Auto-fill form with address autocomplete",
+  "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"
+  }
+}

examples/autocomplete-js-address-form/src/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Auto-fill form with address autocomplete with PlaceKit Autocomplete JS</title>
+</head>
+<body class="bg-gray-50 px-4 py-8 lg:p-16">
+  <form id="form" class="max-w-xl mx-auto grid sm:grid-cols-3 gap-6 p-6 rounded-lg bg-white shadow-lg">
+    <div class="space-y-1 col-span-full">
+      <label for="address" class="block text-sm font-medium text-gray-700">
+        Address
+      </label>
+      <input
+        type="search"
+        name="address"
+        placeholder="Search place..."
+        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+        id="placekit-input"
+      />
+    </div>
+    <div class="space-y-1">
+      <label for="city" class="block text-sm font-medium text-gray-700">
+        City
+      </label>
+      <input
+        type="text"
+        name="city"
+        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+      />
+    </div>
+    <div class="space-y-1">
+      <label for="zipcode" class="block text-sm font-medium text-gray-700">
+        ZIP Code
+      </label>
+      <input
+        type="text"
+        name="zipcode"
+        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+      />
+    </div>
+    <div class="space-y-1">
+      <label for="country" class="block text-sm font-medium text-gray-700">
+        Country
+      </label>
+      <input
+        type="text"
+        name="country"
+        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+      />
+    </div>
+  </form>
+
+  <script type="module" src="main.js"></script>
+</body>
+</html>

examples/autocomplete-js-address-form/src/main.js

@@ -0,0 +1,17 @@
+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',
+});
+
+// inject values when user picks an address
+const form = document.querySelector('#form');
+pka.on('pick', (value, item) => {
+  for (const name of ['city', 'zipcode', 'country']) {
+    form.querySelector(`input[name="${name}"]`).value = [].concat(item[name]).join(',');
+  }
+});