docs(components): add docs for every components

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing
+
+TODO :)

README.md

@@ -9,8 +9,24 @@ A modern Google Maps integration for ReactJS
 - Highly extensible
 - Interpolation animations for everything (markers, polygons, etc.)
 
+## Documentation
+
+[See our documentation](/docs/index.md)
+
+## Why yet another Google Maps integration for ReactJS?
+
+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.
+
+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, ables users to easly access GMaps fonctionallities programmaticaly and create GoogleMaps related libraries for others to use (such as Animated components for example).
+
 ## TODOs
 
+Wanna help? See our [`contributing.md`](/CONTRIBUTING.md).
+
 - [x] Marker component (displays ReactJS components)
 - [ ] LegacyMarker component (displays images only)
 - [x] Polyline component

docs/components/gmaps-animated-marker.md

@@ -0,0 +1,89 @@
+# `<GMapsAnimatedMarker />`
+
+<p align="center">TODO: screen capture</p>
+
+Creates a new marker with animated interpolation when updating the `lat`/`lnt`. This components extends [`<GMapsMarker />`](/docs/components/gmaps-marker.md).
+
+```jsx
+<GMapsAnimatedMarker location={{ lat: 40.73061, lng: -73.935242 }} duration={1000}>
+  <p style={{ backgroundColor: "red" }}>Hello World</p>
+</GMapsMarker>
+```
+
+<details>
+<summary>Full example</summary>
+
+```jsx
+
+function MyMap() {
+    const [location, setLocation] = useState({ lat: 40.73061, lng: -73.935242 });
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <GMaps center={location} zoom={12}>
+        <GMapsAnimatedMarker location={{ lat: 40.73061, lng: -73.935242 }} duration={1000}>
+          <p style={{ backgroundColor: "red" }}>Hello World</p>
+        </GMapsMarker>
+      </GMaps>
+    </div>
+  );
+}
+```
+
+</details>
+
+<details>
+<summary>Animating the marker programmatically</summary>
+
+```typescript
+const location = { lat: 40.73061, lng: -73.935242 };
+
+function App() {
+  const marker = useGMapsAnimatedMarker();
+
+  const updateMarkerLocation = () => {
+    // random new lat/lng near the base `location`
+    const newLocation = {
+      lat: location.lat + Math.random() * 0.08,
+      lng: location.lng + Math.random() * 0.08,
+    };
+
+    marker.current?.animate({
+      location: newLocation,
+      duration: 1000,
+    });
+  };
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <button type="button" onClick={updateMarkerLocation}>
+        update marker location
+      </button>
+
+      <GMaps center={location} zoom={12}>
+        <GMapsMarker ref={marker} location={location}>
+          <p style={{ backgroundColor: "red" }}>Hello World</p>
+        </GMapsMarker>
+      </GMaps>
+    </div>
+  );
+}
+```
+
+</details>
+
+## Props
+
+| Name     | Type                    | Description                                                           |
+| -------- | ----------------------- | --------------------------------------------------------------------- |
+| duration | `number`                | The duration in milliseconds of the interpolation animation.          |
+| easing   | `(n: number) => number` | The easing function to use for the animation. See [`Easing`](#TODO).  |
+| ...rest  | `GMapsMarker.Props`     | See [`<GMapsMarker />` Props](/docs/components/gmaps-marker.md#props) |
+
+## Related Hooks
+
+- [`useGMapsAnimatedMarker`](/docs/hooks/use-gmaps-animated-marker.md)
+
+## Related Components
+
+- [`<GMapsMarker />`](/docs/components/gmaps-marker.md)

docs/components/gmaps-animated-polygon.md

@@ -0,0 +1,97 @@
+# `<GMapsAnimatedPolygon />`
+
+<p align="center">TODO: screen capture</p>
+
+Creates a new polygon with animated interpolation when updating the path. This components extends [`<GMapsPolygon />`](/docs/components/gmaps-polygon.md).
+
+```jsx
+<GMapsAnimatedPolygon
+  path={[
+    { lat: 37.772, lng: -122.214 },
+    { lat: 21.291, lng: -157.821 },
+    { lat: -18.142, lng: 178.431 },
+    { lat: -27.467, lng: 153.027 },
+  ]}
+  duration={1000}
+/>
+```
+
+<details>
+<summary>Full example</summary>
+
+```jsx
+function MyMap() {
+  const [path, setPath] = useState([
+    { lat: 37.772, lng: -122.214 },
+    { lat: 21.291, lng: -157.821 },
+    { lat: -18.142, lng: 178.431 },
+    { lat: -27.467, lng: 153.027 },
+  ]);
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <GMaps center={{ lat: 0, lng: -180 }} zoom={3}>
+        <GMapsAnimatedPolygon path={path} duration={1000} />
+      </GMaps>
+    </div>
+  );
+}
+```
+
+</details>
+
+<details>
+<summary>Animating the polygon programmatically</summary>
+
+```jsx
+const path = [
+  { lat: 37.772, lng: -122.214 },
+  { lat: 21.291, lng: -157.821 },
+  { lat: -18.142, lng: 178.431 },
+  { lat: -27.467, lng: 153.027 },
+];
+
+function App() {
+  const polygon = useGMapsAnimatedPolygon();
+
+  const updatePolygonPath = () => {
+    // random new lat/lng near the base `path` for each point
+    const newPath = path.map((point) => ({
+      lat: point.lat + Math.random() * 0.08,
+      lng: point.lng + Math.random() * 0.08,
+    }));
+
+    polygon.current?.animate({ path: newPath, duration: 1000 });
+  };
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <button type="button" onClick={updatePolygonPath}>
+        update polygon path
+      </button>
+
+      <GMaps center={{ lat: 0, lng: -180 }} zoom={3}>
+        <GMapsAnimatedPolygon ref={polygon} path={path} />
+      </GMaps>
+    </div>
+  );
+}
+```
+
+</details>
+
+## Props
+
+| Name     | Type                    | Description                                                             |
+| -------- | ----------------------- | ----------------------------------------------------------------------- |
+| duration | `number`                | The duration in milliseconds of the interpolation animation.            |
+| easing   | `(n: number) => number` | The easing function to use for the animation. See [`Easing`](#TODO).    |
+| ...rest  | `GMapsPolygon.Props`    | See [`<GMapsPolygon />` Props](/docs/components/gmaps-polygon.md#props) |
+
+## Related Hooks
+
+- [`useGMapsAnimatedPolygon`](/docs/hooks/use-gmaps-animated-polygon.md)
+
+## Related Components
+
+- [`<GMapsPolygon />`](/docs/components/gmaps-polygon.md)

docs/components/gmaps-animated-polyline.md

@@ -0,0 +1,97 @@
+# `<GMapsAnimatedPolyline />`
+
+<p align="center">TODO: screen capture</p>
+
+Creates a new polyline with animated interpolation when updating the path. This components extends [`<GMapsPolyline />`](/docs/components/gmaps-polyline.md).
+
+```jsx
+<GMapsAnimatedPolyline
+  path={[
+    { lat: 37.772, lng: -122.214 },
+    { lat: 21.291, lng: -157.821 },
+    { lat: -18.142, lng: 178.431 },
+    { lat: -27.467, lng: 153.027 },
+  ]}
+  duration={1000}
+/>
+```
+
+<details>
+<summary>Full example</summary>
+
+```jsx
+function MyMap() {
+  const [path, setPath] = useState([
+    { lat: 37.772, lng: -122.214 },
+    { lat: 21.291, lng: -157.821 },
+    { lat: -18.142, lng: 178.431 },
+    { lat: -27.467, lng: 153.027 },
+  ]);
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <GMaps center={{ lat: 0, lng: -180 }} zoom={3}>
+        <GMapsAnimatedPolyline path={path} duration={1000} />
+      </GMaps>
+    </div>
+  );
+}
+```
+
+</details>
+
+<details>
+<summary>Animating the polyline programmatically</summary>
+
+```jsx
+const path = [
+  { lat: 37.772, lng: -122.214 },
+  { lat: 21.291, lng: -157.821 },
+  { lat: -18.142, lng: 178.431 },
+  { lat: -27.467, lng: 153.027 },
+];
+
+function App() {
+  const polyline = useGMapsAnimatedPolyline();
+
+  const updatePolylinePath = () => {
+    // random new lat/lng near the base `path` for each point
+    const newPath = path.map((point) => ({
+      lat: point.lat + Math.random() * 0.08,
+      lng: point.lng + Math.random() * 0.08,
+    }));
+
+    polyline.current?.animate({ path: newPath, duration: 1000 });
+  };
+
+  return (
+    <div style={{ height: "100vh" }}>
+      <button type="button" onClick={updatePolylinePath}>
+        update polyline path
+      </button>
+
+      <GMaps center={{ lat: 0, lng: -180 }} zoom={3}>
+        <GMapsAnimatedPolyline ref={polyline} path={path} />
+      </GMaps>
+    </div>
+  );
+}
+```
+
+</details>
+
+## Props
+
+| Name     | Type                    | Description                                                               |
+| -------- | ----------------------- | ------------------------------------------------------------------------- |
+| duration | `number`                | The duration in milliseconds of the interpolation animation.              |
+| easing   | `(n: number) => number` | The easing function to use for the animation. See [`Easing`](#TODO).      |
+| ...rest  | `GMapsPolyline.Props`   | See [`<GMapsPolyline />` Props](/docs/components/gmaps-polyline.md#props) |
+
+## Related Hooks
+
+- [`useGMapsAnimatedPolyline`](/docs/hooks/use-gmaps-animated-polyline.md)
+
+## Related Components
+
+- [`<GMapsPolyline />`](/docs/components/gmaps-polyline.md)