v2.0 🎉 🎉 🎉

.env.dist

@@ -0,0 +1,4 @@
+# Fill in these values and rename this file to .env
+# Then you can run any example in the `examples/` folder with `cd examples/<name> && pnpm dev`
+API_KEY=
+MAP_ID=

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+examples/
+dist/

.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: { browser: true, node: true },
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "prettier",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  plugins: ["@typescript-eslint", "prettier"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "prettier/prettier": "error",
+    "no-duplicate-imports": "error",
+    "@typescript-eslint/ban-ts-comment": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+  },
+};

.github/workflows/ci.yml

@@ -0,0 +1,54 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  Build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 8
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+
+  Lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 8
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+      - run: pnpm lint
+      - run: pnpm check
+
+  Test:
+    runs-on: ubuntu-latest
+    steps:
+      - run: git config --global core.autocrlf false
+      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.0.1
+        with:
+          version: 8
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+      - run: pnpm test

.gitignore

@@ -1,2 +1,17 @@
-demo/build.js
-node_modules/
+# MacOS
+.DS_Store
+
+# NodeJS
+node_modules
+.pnpm-store
+
+# IDEs
+.idea
+.vscode
+.fleet
+
+# Build output
+dist
+
+# Env vars
+.env

.npmignore

@@ -1,5 +1,22 @@
-demo/
-src/
-.babelrc
-Procfile
-server.js
+# MacOS
+.DS_Store
+
+# NodeJS
+node_modules
+.pnpm-store
+
+# IDEs
+.idea
+.vscode
+.fleet
+
+# config files
+/*.js
+/*.mjs
+/*.cjs
+/*.ts
+/tsconfig.json
+
+# source
+/src/
+

.prettierrc.mjs

@@ -0,0 +1,8 @@
+export default {
+  arrowParens: "avoid",
+  trailingComma: "all",
+  bracketSpacing: true,
+  singleQuote: false,
+  semi: true,
+  tabWidth: 2,
+};

CONTRIBUTING.md

@@ -0,0 +1,50 @@
+# Contributing
+
+## Working on React GMaps
+
+### Install
+
+Requirements:
+
+- node
+- pnpm
+
+You can install the dependencies with the following:
+
+```bash
+pnpm install
+```
+
+Then you can start the build toolchain with:
+
+```bash
+pnpm dev
+```
+
+### Live preview
+
+The easiest way to see a live preview of the changes you make, is to link your local version of react-gmaps to an example.
+
+```bash
+# cd in an appropriate example
+cd examples/<folder>
+# install the example dependencies
+pnpm install
+# link your local version of react-gmaps to the example
+pnpm link ../..
+# start the example
+pnpm dev
+```
+
+Now any change you make in the React GMaps codebase will be reflected in the example project you started.
+
+## Opening a new Pull Request
+
+Once your ready to get your changes reviewed and merged, you can create a [Pull Request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
+
+Before asking for a review, make sure to:
+
+- Write a description of what you've changed and why.
+- Link any related issue.
+- Include a test that fails without your changes.
+- Make sure the CI does not fail.

README.md

@@ -1,101 +1,65 @@
-[![Build Status](https://travis-ci.org/MicheleBertoli/react-gmaps.svg?branch=master)](https://travis-ci.org/MicheleBertoli/react-gmaps)
+<h1 align="center">React GMaps</h1>
+
+<h4 align="center">A modern Google Maps integration for ReactJS.</h4>
+
+---
+
+| Marker                                | Polyline                                | Polygon                                |
+| ------------------------------------- | --------------------------------------- | -------------------------------------- |
+| ![](/docs/assets/marker-animated.gif) | ![](/docs/assets/polyline-animated.gif) | ![](/docs/assets/polygon-animated.gif) |
+
+```jsx
+const location = { lat: 40.73061, lng: -73.935242 };
+
+function MyMarker() {
+  return (
+    <GMapsMarker location={location}>
+      <p style={{ backgroundColor: "red" }}>Hello World</p>
+    </GMapsMarker>
+  );
+}
+
+function MyMap() {
+  return (
+    <div style={{ height: "100vh" }}>
+      <GMaps center={location} zoom={12}>
+        <MyMarker />
+      </GMaps>
+    </div>
+  );
+}
+```
 
-React Gmaps
-===========
+## Features
 
-A [Google Maps](https://developers.google.com/maps/documentation/javascript/) component for [React.js](http://facebook.github.io/react/)
+- Marker, Polyline, Polygon components and more
+- Hook based
+- Highly extensible
+- Interpolation animations for everything (markers, polygons, etc.)
 
-Features
---------
+## Documentation
 
-- Lazy Google Maps loading
-- Easy to use
+[See our documentation](/docs/index.md)
 
-Installation
-------------
+## Why yet another Google Maps integration for ReactJS?
 
-```sh
-$ npm install react-gmaps --save
-```
+Why choose React GMaps when there's already [react-google-maps-api](https://github.com/JustFly1984/react-google-maps-api), [google-maps-react](https://github.com/fullstackreact/google-maps-react), [google-map-react](https://github.com/google-map-react/google-map-react), etc. ?
+The current landscape doesn't really provide a smooth integration for GoogleMaps in a ReactJS application with hooks and modern patterns.
+Existing implementations tends to be old/unmaintained, outdated, lacking features, and/or a bit wobbly.
 
-Demo
-------------
-
-[http://react-gmaps.herokuapp.com/](http://react-gmaps.herokuapp.com/)
-
-Usage
------
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Gmaps, Marker, InfoWindow, Circle} from 'react-gmaps';
-
-const coords = {
-  lat: 51.5258541,
-  lng: -0.08040660000006028
-};
-
-const params = {v: '3.exp', key: 'YOUR_API_KEY'};
-
-class App extends React.Component {
-
-  onMapCreated(map) {
-    map.setOptions({
-      disableDefaultUI: true
-    });
-  }
-
-  onDragEnd(e) {
-    console.log('onDragEnd', e);
-  }
-
-  onCloseClick() {
-    console.log('onCloseClick');
-  }
-
-  onClick(e) {
-    console.log('onClick', e);
-  }
-
-  render() {
-    return (
-      <Gmaps
-        width={'800px'}
-        height={'600px'}
-        lat={coords.lat}
-        lng={coords.lng}
-        zoom={12}
-        loadingMessage={'Be happy'}
-        params={params}
-        onMapCreated={this.onMapCreated}>
-        <Marker
-          lat={coords.lat}
-          lng={coords.lng}
-          draggable={true}
-          onDragEnd={this.onDragEnd} />
-        <InfoWindow
-          lat={coords.lat}
-          lng={coords.lng}
-          content={'Hello, React :)'}
-          onCloseClick={this.onCloseClick} />
-        <Circle
-          lat={coords.lat}
-          lng={coords.lng}
-          radius={500}
-          onClick={this.onClick} />
-      </Gmaps>
-    );
-  }
-
-};
-
-ReactDOM.render(<App />, document.getElementById('gmaps'));
-```
+React GMaps aims to be more flexible, extensible, and composable by exposing simple primitives that can be used in various ways.
+It utilizes modern GoogleMaps features such as [AdvancedMarkers](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers) to avoid wacky hacks and unstable integrations.
+Plus its context base architecture, enables users to easly access GMaps functionalities programmaticaly and create GoogleMaps related libraries for others to use (similarly to the built-in [Animated components](/docs/components/gmaps-animated-marker.md)).
 
-Test
-----
+## TODOs
 
-```sh
-$ npm test
-```
+Wanna help? See our [`contributing.md`](/CONTRIBUTING.md).
+
+- [x] Marker component (displays ReactJS components)
+- [ ] LegacyMarker component (displays images only)
+- [x] Polyline component
+- [x] Polygon component
+- [ ] Circle component
+- [ ] Rectangle component
+- [ ] Overlays
+- [ ] Hooks to access the `google` sdk and `google.maps.Map` instance using a `ref` to `<GMaps />`