feat: init project

.eslintrc.json

@@ -0,0 +1,28 @@
+{
+  "env": {
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "eqeqeq": ["error"],
+    "quotes": ["error", "double", { "avoidEscape": true }],
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @huextrat

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -0,0 +1,51 @@
+name: "🐛 Bug Report"
+description: Create a new ticket for a bug
+title: "🐛 [BUG] - <title>"
+labels: [
+  "bug"
+]
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: "Description"
+      description: Please enter an explicit description of your issue
+      placeholder: Short and explicit description of your incident...
+    validations:
+      required: true
+  - type: input
+    id: reprod-url
+    attributes:
+      label: "Reproduction URL"
+      description: Please enter your GitHub URL to provide a reproduction of the issue
+      placeholder: ex. https://github.com/USERNAME/REPO-NAME
+    validations:
+      required: false
+  - type: textarea
+    id: reprod
+    attributes:
+      label: "Reproduction steps"
+      description: Please enter an explicit description of your issue
+      render: bash
+    validations:
+      required: false
+  - type: textarea
+    id: logs
+    attributes:
+      label: "Logs"
+      description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
+      render: bash
+    validations:
+      required: false
+  - type: dropdown
+    id: os
+    attributes:
+      label: "OS"
+      description: What is the impacted environment ?
+      multiple: true
+      options:
+        - Windows
+        - Linux
+        - Mac
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml

@@ -0,0 +1,39 @@
+name: "💡 Feature Request"
+description: Create a new ticket for a feature request
+title: "💡 [REQUEST] - <title>"
+labels: [
+  "improvements"
+]
+body:
+  - type: textarea
+    id: reference_issues
+    attributes:
+      label: "Reference Issues"
+      description: Common issues
+      placeholder: "#Issues IDs"
+    validations:
+      required: false
+  - type: textarea
+    id: summary
+    attributes:
+      label: "Summary"
+      description: Provide a brief explanation of the feature
+      placeholder: Describe in a few lines your feature request
+    validations:
+      required: true
+  - type: textarea
+    id: basic_example
+    attributes:
+      label: "Basic Example"
+      description: Indicate here some basic examples of your feature.
+      placeholder: A few specific words about your feature request.
+    validations:
+      required: true
+  - type: textarea
+    id: unresolved_question
+    attributes:
+      label: "Questions"
+      description: What questions still remain unresolved ?
+      placeholder: Identify any unresolved issues.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/workflows/code_quality.yml

@@ -0,0 +1,27 @@
+name: Code Quality
+
+on:
+  pull_request:
+
+jobs:
+  lint:
+    name: Lint & Prettier ✏️
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/hydrogen'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --freeze-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Prettier
+        run: yarn format:check

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+concurrency:
+  group: release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Release 🚀
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/hydrogen'
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --freeze-lockfile
+
+      - name: Release
+        run: yarn release

.gitignore

@@ -0,0 +1,6 @@
+# IntelliJ IDEA
+.idea
+
+# node.js
+node_modules/
+dist/

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint
+yarn format:check

.releaserc.json

@@ -0,0 +1,22 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogTitle": "# Changelog"
+      }
+    ],
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}

README.md

@@ -1 +1 @@
-# react-native-maps-routes
+# react-native-maps-routes

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ["@commitlint/config-conventional"]};

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "react-native-maps-routes",
+  "version": "0.0.1",
+  "description": "Route Component for react-native-maps",
+  "author": {
+    "name": "Hugo EXTRAT",
+    "email": "extrat.h@gmail.com",
+    "url": "https://www.github.com/huextrat"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/huextrat/react-native-maps-routes"
+  },
+  "bugs": {
+    "url": "https://github.com/huextrat/react-native-maps-routes/issues"
+  },
+  "keywords": [
+    "react-native",
+    "react-native-maps",
+    "ios",
+    "android"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "lint": "eslint ./src",
+    "lint:fix": "eslint --fix ./src",
+    "format": "prettier --write ./src",
+    "format:check": "prettier --check --cache ./src",
+    "prepare": "husky install",
+    "build": "tsc",
+    "release": "semantic-release"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-maps": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "17.6.5",
+    "@commitlint/config-conventional": "17.6.5",
+    "@semantic-release/changelog": "6.0.3",
+    "@semantic-release/git": "10.0.1",
+    "@types/jest": "29.5.2",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.9",
+    "@typescript-eslint/eslint-plugin": "5.59.9",
+    "@typescript-eslint/parser": "5.59.9",
+    "eslint": "8.42.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-react": "7.32.2",
+    "husky": "8.0.3",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-native-maps": "1.7.1",
+    "semantic-release": "21.0.3",
+    "typescript": "5.0.4"
+  }
+}

src/components/MapViewRoute.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+
+import { LineCapType, LineJoinType, Polyline } from "react-native-maps";
+import type { GooglePolylineRoute } from "../types/GoogleApi";
+import { decodeRoutesPolyline } from "../utils/decoder";
+
+type Props = {
+  origin: {
+    latitude: number;
+    longitude: number;
+  };
+  destination: {
+    latitude: number;
+    longitude: number;
+  };
+  apiKey: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+  onStart?: (route: { origin: string; destination: string }) => void;
+  onReady?: (coordinates: { latitude: number; longitude: number }[]) => void;
+  onError?: (error: any) => void;
+  mode?: "DRIVE" | "BICYCLE" | "TWO_WHEELER" | "WALK";
+  lineJoin?: LineJoinType;
+  lineCap?: LineCapType;
+};
+
+export const MapViewRoute: React.FC<Props> = (props) => {
+  const [coordinates, setCoordinates] = useState<
+    { latitude: number; longitude: number }[]
+  >([]);
+
+  useEffect(() => {
+    fetchRoute();
+  }, [props.origin, props.destination]);
+
+  useEffect(() => {
+    if (coordinates.length) {
+      props.onReady?.(coordinates);
+    }
+  }, [coordinates]);
+
+  const fetchRoute = () => {
+    fetch("https://routes.googleapis.com/directions/v2:computeRoutes", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Goog-Api-Key": props.apiKey,
+        "X-Goog-FieldMask": "routes.polyline.encodedPolyline",
+      },
+      body: JSON.stringify({
+        origin: {
+          location: {
+            latLng: {
+              latitude: props.origin.latitude,
+              longitude: props.origin.longitude,
+            },
+          },
+        },
+        destination: {
+          location: {
+            latLng: {
+              latitude: props.destination.latitude,
+              longitude: props.destination.longitude,
+            },
+          },
+        },
+        travelMode: props.mode || "WALK",
+      }),
+    })
+      .then((response: any) => response.json())
+      .then((json: any) => {
+        if (json.error) {
+          throw json.error;
+        }
+        const route = json.routes[0] as GooglePolylineRoute;
+        setCoordinates(decodeRoutesPolyline(route));
+      })
+      .catch((error: any) => {
+        props.onError?.(error);
+      });
+  };
+
+  return (
+    <Polyline
+      coordinates={coordinates}
+      strokeColor={props.strokeColor ?? "#000"}
+      strokeWidth={props.strokeWidth ?? 6}
+      lineJoin={props.lineJoin ?? "round"}
+      lineCap={props.lineCap ?? "round"}
+    />
+  );
+};

src/index.tsx

@@ -0,0 +1 @@
+export { MapViewRoute } from "./components/MapViewRoute";

src/types/GoogleApi.ts

@@ -0,0 +1,5 @@
+export type GooglePolylineRoute = {
+  polyline: {
+    encodedPolyline: string;
+  };
+};