init

.env

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

.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

.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

.prettierignore

@@ -0,0 +1,7 @@
+.github
+node_modules
+dist
+build
+.svelte-kit
+.vercel
+.output

.prettierrc.yml

@@ -0,0 +1,2 @@
+singleQuote: true
+printWidth: 100

README.md

@@ -0,0 +1,70 @@
+<h1 align="center">
+  PlaceKit implementation examples
+</h1>
+
+<p align="center">
+  <b>Implementation examples for most common stacks and use-cases.</b>
+</p>
+
+## 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=<example-dir-name>
+```
+
+replacing `<example-dir-name>` with the directory name of the example you want to try.
+
+## Examples index
+
+<!-- prettier-ignore -->
+| Description | Environment |
+| :---         | :---      |
+| [Auto-fill form with address autocomplete](./examples/autocomplete-js-address-form) | front-end, vanilla-js |
+| [Basic address autocomplete](./examples/autocomplete-js-basic) | front-end, vanilla-js |
+| [Basic address autocomplete](./examples/autocomplete-js-cdn) | cdn, front-end, vanilla-js |
+| [Global city search](./examples/autocomplete-js-cities) | front-end, vanilla-js |
+| [Countries search](./examples/autocomplete-js-countries) | front-end, vanilla-js |
+| [Address autocomplete with countries whitelist](./examples/autocomplete-js-countries-whitelist) | front-end, vanilla-js |
+| [Address autocomplete with user's geolocation](./examples/autocomplete-js-geolocation) | front-end, vanilla-js |
+| [Address search on map with Leaflet](./examples/autocomplete-js-leaflet) | front-end, leaflet, vanilla-js |
+| [Svelte autocomplete component](./examples/autocomplete-js-svelte) | front-end, svelte |
+| [Address autocomplete with user's geolocation](./examples/autocomplete-js-typescript) | front-end, typescript |
+| [Vue autocomplete component](./examples/autocomplete-js-vue) | front-end, vue |
+| [Auto-fill form with address autocomplete](./examples/autocomplete-react-address-form) | front-end, react |
+| [Basic address autocomplete](./examples/autocomplete-react-basic) | front-end, react |
+| [Global city search](./examples/autocomplete-react-cities) | front-end, react |
+| [Countries search](./examples/autocomplete-react-countries) | front-end, react |
+| [Address autocomplete with countries whitelist](./examples/autocomplete-react-countries-whitelist) | front-end, react |
+| [Address search on map with Leaflet](./examples/autocomplete-react-leaflet) | front-end, leaflet, react |
+| [Auto-fill form with address autocomplete in React Hook Form](./examples/autocomplete-react-react-hook-form) | front-end, react |
+| [Auto-fill form with address autocomplete](./examples/autocomplete-react-typescript) | front-end, react, typescript |
+| [Custom address autocomplete with Algolia Autocomplete](./examples/client-js-algolia-autocomplete) | front-end, vanilla-js |
+| [Custom address autocomplete with HeadlessUI React](./examples/client-js-headlessui-react) | front-end, react |
+| [Custom address autocomplete with HeadlessUI Vue](./examples/client-js-headlessui-vue) | front-end, vue |
+| [Simple address search request](./examples/client-js-node) | back-end, node-js, vanilla-js |
+| [Simple address search request with ESM](./examples/client-js-node-esm) | back-end, node-js, vanilla-js |
+| [Address search Express API route](./examples/client-js-node-express) | back-end, express, node-js |
+| [Simple address search request](./examples/client-js-node-typescript) | back-end, node-js, typescript |
+
+## 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 `<body>` in any autocomplete example.

build-index.js

@@ -0,0 +1,62 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { stringify } from 'yaml';
+
+const rootPackage = JSON.parse(fs.readFileSync('./package.json'));
+const repoURL = new URL(rootPackage.homepage);
+repoURL.hash = '';
+
+const output = {
+  name: 'PlaceKit implementation examples',
+  url: repoURL.href,
+  author: rootPackage.author,
+  examples: [],
+};
+
+const examplesPath = 'examples';
+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,
+    })) {
+      if (exampleFile.name === 'package.json') {
+        const packagePath = path.join(exampleFile.path, exampleFile.name);
+        const packageRaw = fs.readFileSync(packagePath, { encoding: 'utf8' });
+        const packageJSON = JSON.parse(packageRaw);
+        output.examples.push({
+          slug: exampleDir.name,
+          url: path.join(baseURL, exampleDir.name),
+          description: packageJSON.description,
+          keywords: packageJSON.keywords,
+        });
+      }
+    }
+  }
+}
+
+const outputFile = 'examples-index.yml';
+fs.writeFileSync(outputFile, stringify(output));
+console.log(`✅ ${outputFile} updated!`);
+
+const readmeFile = 'README.md';
+let readmeText = fs.readFileSync(readmeFile, { encoding: 'utf8' });
+readmeText = readmeText.replace(/(\#{2,}\s*examples index)[^#]+/im, (...m) => {
+  return `${m[1]}
+
+<!-- prettier-ignore -->
+| Description | Environment |
+| :---         | :---      |
+| ${output.examples
+    .map((example) =>
+      [
+        `[${example.description}](./examples/${example.slug})`,
+        example.keywords.sort().join(', '),
+      ].join(' | '),
+    )
+    .join(` |\n| `)} |
+\n`;
+});
+fs.writeFileSync(readmeFile, readmeText);
+console.log(`✅ ${readmeFile} updated!`);

examples-index.yml

@@ -0,0 +1,168 @@
+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
+  - 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
+  - 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
+      - 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
+  - slug: autocomplete-js-countries
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-countries
+    description: Countries search
+    keywords:
+      - vanilla-js
+      - front-end
+  - 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
+  - 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
+  - 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
+      - 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
+  - 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
+  - slug: autocomplete-js-vue
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-js-vue
+    description: Vue autocomplete component
+    keywords:
+      - vue
+      - front-end
+  - 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
+  - slug: autocomplete-react-basic
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-basic
+    description: Basic address autocomplete
+    keywords:
+      - react
+      - front-end
+  - slug: autocomplete-react-cities
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-cities
+    description: Global city search
+    keywords:
+      - react
+      - front-end
+  - slug: autocomplete-react-countries
+    url: https:/github.com/placekit/examples/tree/main/examples/autocomplete-react-countries
+    description: Countries search
+    keywords:
+      - react
+      - front-end
+  - 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
+  - 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
+      - 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
+  - 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
+  - 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
+  - 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
+  - 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
+  - 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
+  - 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
+  - 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
+  - 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

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

@@ -0,0 +1,13 @@
+# Auto-fill form with address autocomplete with PlaceKit Autocomplete JS
+
+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=autocomplete-js-address-form
+```
+
+And your project will be served at http://localhost:5173.