chore(packages): add ESLint, vscode extensions, and github workflows

.github/workflows/lint.yml

@@ -0,0 +1,27 @@
+name: Lint Web Embeds
+
+on:
+  push:
+    paths:
+      - 'web-embeds/**'
+  pull_request:
+    paths:
+      - 'web-embeds/**'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '16'
+
+      - name: Install Dependencies
+        run: cd web-embeds && yarn install
+
+      - name: Run Lint
+        run: cd web-embeds && yarn lint

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "github.vscode-pull-request-github",
+    "eamodio.gitlens",
+    "esbenp.prettier-vscode",
+    "meganrogge.template-string-converter"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/app"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "prettier.trailingComma": "es5",
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.tabSize": 2,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.prettier": "explicit"
+  },
+  "prettier.requireConfig": true
+}

package.json

@@ -9,6 +9,6 @@
     "packages": [
       "packages/*"
     ],
-    "nohoist": []
+    "nohoist": [ ]
   }
 }

web-embeds/.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+build/
+
+widget/

web-embeds/.eslintrc.js

@@ -0,0 +1,49 @@
+module.exports = {
+  extends: ["react-app", "plugin:prettier/recommended"],
+  plugins: ["simple-import-sort", "import"],
+  rules: {
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "import/order": [
+      "error",
+      {
+        groups: [
+          ["external", "builtin"],
+          "internal",
+          ["sibling", "parent"],
+          "index",
+        ],
+        pathGroups: [
+          {
+            pattern: "@(react|react-native)",
+            group: "external",
+            position: "before",
+          },
+          {
+            pattern: "@src/**",
+            group: "internal",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["internal", "react"],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+    "lines-around-comment": [
+      "error",
+      {
+        allowArrayStart: true,
+        allowBlockStart: true,
+        allowClassStart: true,
+        allowObjectStart: true,
+        beforeBlockComment: true,
+        beforeLineComment: true,
+      },
+    ],
+    "spaced-comment": ["error", "always"],
+  },
+};

web-embeds/.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+
+/build
+.env
+
+widget

web-embeds/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5"
+}

web-embeds/README.md

@@ -13,7 +13,6 @@ Follow the steps below to deploy your apollos-embeds:
 
 `https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.js, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.css, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds`
 
-
 ## Manual
 
 1. Update the package version in the `package.json` file.

web-embeds/craco.config.js

@@ -3,15 +3,15 @@ module.exports = {
   webpack: {
     configure: (webpackConfig, { env, paths }) => {
       // Override JavaScript file names
-      webpackConfig.output.filename = 'static/js/index.js';
-      webpackConfig.output.chunkFilename = 'static/js/[name].chunk.js';
+      webpackConfig.output.filename = "static/js/index.js";
+      webpackConfig.output.chunkFilename = "static/js/[name].chunk.js";
 
       // Override CSS file names in production
-      if (env === 'production') {
+      if (env === "production") {
         webpackConfig.plugins.forEach((plugin) => {
-          if (plugin.constructor.name === 'MiniCssExtractPlugin') {
-            plugin.options.filename = 'static/css/index.css';
-            plugin.options.chunkFilename = 'static/css/[name].chunk.css';
+          if (plugin.constructor.name === "MiniCssExtractPlugin") {
+            plugin.options.filename = "static/css/index.css";
+            plugin.options.chunkFilename = "static/css/[name].chunk.css";
           }
         });
       }
@@ -21,10 +21,10 @@ module.exports = {
   },
   style: {
     postcss: {
-      plugins: [require('autoprefixer')],
+      plugins: [require("autoprefixer")],
     },
   },
   babel: {
-    presets: ['@babel/preset-react'],
+    presets: ["@babel/preset-react"],
   },
 };

web-embeds/jsconfig.json

@@ -1,5 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
-  }
+    "baseUrl": ".",
+  },
 }

web-embeds/package.json

@@ -3,6 +3,10 @@
   "description": "Apollos React embed widgets",
   "version": "0.1.24",
   "license": "MIT",
+  "eslintIgnore": [
+    "/node_modules",
+    "/build"
+  ],
   "dependencies": {
     "@algolia/autocomplete-js": "^1.9.2",
     "@algolia/autocomplete-plugin-query-suggestions": "^1.9.2",
@@ -28,6 +32,7 @@
     "color": "^4.2.3",
     "date-fns": "^2.29.3",
     "dompurify": "^2.4.3",
+    "eslint-plugin-prettier": "^5.1.3",
     "graphql": "^16.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
@@ -55,7 +60,9 @@
     "dev": "craco start",
     "build": "node scripts/build.js",
     "test": "craco test",
-    "bump": "npm version patch && yarn build && git add . && git commit -m 'version bump' && git push && git push --tags && npm publish"
+    "bump": "npm version patch && yarn build && git add . && git commit -m 'version bump' && git push && git push --tags && npm publish",
+    "format": "prettier --write .",
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint ."
   },
   "eslintConfig": {
     "extends": [
@@ -80,7 +87,12 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/runtime": "^7.22.5",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-styled-components": "^2.1.4"
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "prettier": "^3.0.0"
   },
   "targets": {
     "global": {

web-embeds/public/index.html

@@ -1,19 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web embed created using The Apollos Project" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web embed created using The Apollos Project"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -22,20 +24,30 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Apollos Web Embeds</title>
-  <style>
-    body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI,
-        Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
-        Helvetica Neue, sans-serif;
-    }
-  </style>
-</head>
+    <title>Apollos Web Embeds</title>
+    <style>
+      body {
+        font-family:
+          "Inter",
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Oxygen,
+          Ubuntu,
+          Cantarell,
+          Fira Sans,
+          Droid Sans,
+          Helvetica Neue,
+          sans-serif;
+      }
+    </style>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <!-- This is an example of how to use the apollos widgets -->
-  <!-- <div
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- This is an example of how to use the apollos widgets -->
+    <!-- <div
       data-church="cedar_creek"
       data-type="FeatureFeed"
       data-feature-feed="FeatureFeed:5aae43e6-3526-4cd2-8dfe-771d2ce8a333"
@@ -45,15 +57,15 @@
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
 
-  <!-- <div
+    <!-- <div
       data-type="FeatureFeed"
       data-church="liquid_church"
       data-feature-feed="FeatureFeed:d292fd8c-5b9f-4cd7-a2fe-9d7d0914c34f"
       data-placeholder="Life Is Hard. How Can We Help?"
       data-modal="true"
       class="apollos-widget"
     ></div> -->
-  <!-- 
+    <!-- 
     <div
       data-church="cedar_creek"
       data-type="Search"
@@ -62,9 +74,14 @@
       class="apollos-widget"
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
-  <div data-church="bayside" data-type="Auth" data-modal="true" class="apollos-widget"
-    style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"></div>
-  <!--
+    <div
+      data-church="bayside"
+      data-type="Auth"
+      data-modal="true"
+      class="apollos-widget"
+      style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
+    ></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -74,6 +91,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>