fix: Prettier check in lefthook

2021-07-20 17:13:36 -05:00 · 2021-07-20 17:13:36 -05:00 · e7e8e6b84b
commit e7e8e6b84b
parent 3c094c60db
12 changed files with 228 additions and 157 deletions
--- a/apps/app/assets/.babelrc
+++ b/apps/app/assets/.babelrc
@ -1,5 +1,3 @@
 {
-    "presets": [
-        "@babel/preset-env"
-    ]
+  "presets": ["@babel/preset-env"]
 }
--- a/apps/app/assets/js/app.js
+++ b/apps/app/assets/js/app.js
@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.css"
+import "../css/app.css";

 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@ -12,48 +12,46 @@ import "../css/app.css"
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
-import "phoenix_html"
-import "alpinejs"
-import "./live"
-import { ready } from "./utils"
+import "phoenix_html";
+import "alpinejs";
+import "./live";
+import { ready } from "./utils";

-function togglePasswordFieldVisibility()
-{
-  const passwordFields = document.querySelectorAll('[name="user[password]"]')
+var bloop;
+
+function togglePasswordFieldVisibility() {
+  const passwordFields = document.querySelectorAll('[name="user[password]"]');
  passwordFields.forEach((el) => {
-    if (el.type == 'password')
-    {
-      el.type = 'text'
+    if (el.type == "password") {
+      el.type = "text";
+    } else {
+      el.type = "password";
    }
-    else
-    {
-      el.type = 'password'
-    }
-  })
+  });
 }

 const toggleSidebar = (event) => {
-  document.querySelectorAll('.sidebar').forEach((el) => {
-    el.classList.toggle('visible')
-  })
-}
+  document.querySelectorAll(".sidebar").forEach((el) => {
+    el.classList.toggle("visible");
+  });
+};

 ready(() => {
-  (document.getElementById('nav-toggle') ||{}).onclick = function(){
+  (document.getElementById("nav-toggle") || {}).onclick = function () {
    document.getElementById("nav-content").classList.toggle("hidden");
-  }
+  };

-  document.querySelectorAll('.js-passwordRevealer').forEach((el) => {
-    el.addEventListener('click', togglePasswordFieldVisibility)
-  })
+  document.querySelectorAll(".js-passwordRevealer").forEach((el) => {
+    el.addEventListener("click", togglePasswordFieldVisibility);
+  });

-  document.querySelectorAll('.js-SidebarOpener').forEach((el) => {
-    el.addEventListener('click', toggleSidebar)
-  })
+  document.querySelectorAll(".js-SidebarOpener").forEach((el) => {
+    el.addEventListener("click", toggleSidebar);
+  });

-  document.querySelectorAll('.js-flash-closer').forEach((el) => {
-    el.addEventListener('click', () => {
-      el.closest('.js-flash').remove()
-    })
-  })
-})
+  document.querySelectorAll(".js-flash-closer").forEach((el) => {
+    el.addEventListener("click", () => {
+      el.closest(".js-flash").remove();
+    });
+  });
+});
--- a/apps/app/assets/js/content-editor.js
+++ b/apps/app/assets/js/content-editor.js
@ -1,34 +1,33 @@
-import { ready } from "./utils"
-import SimpleMDE from "simplemde"
-import "simplemde/dist/simplemde.min.css"
-import "../css/content-editor-overrides.css"
-
+import { ready } from "./utils";
+import SimpleMDE from "simplemde";
+import "simplemde/dist/simplemde.min.css";
+import "../css/content-editor-overrides.css";

 const requestPreview = (plainText, previewContainer) => {
-  let request = new XMLHttpRequest()
-  const postForm = previewContainer.closest('form')
-  let formData = new FormData(postForm)
+  let request = new XMLHttpRequest();
+  const postForm = previewContainer.closest("form");
+  let formData = new FormData(postForm);

-  formData.set('post[content]', plainText)
+  formData.set("post[content]", plainText);

-  request.addEventListener('load', function(event) {
-    previewContainer.innerHTML = event.target.responseText
-  })
+  request.addEventListener("load", function (event) {
+    previewContainer.innerHTML = event.target.responseText;
+  });

-  request.open('POST', '/pages/posts/preview', true)
+  request.open("POST", "/pages/posts/preview", true);

-  request.send(formData)
-}
+  request.send(formData);
+};

 ready(() => {
-  document.querySelectorAll('[data-simplemde]').forEach(el => {
+  document.querySelectorAll("[data-simplemde]").forEach((el) => {
    new SimpleMDE({
      element: el,
      previewRender: (plainText, previewContainer) => {
-        requestPreview(plainText, previewContainer)
+        requestPreview(plainText, previewContainer);

-        return previewContainer.innerHTML
+        return previewContainer.innerHTML;
      },
-    })
-  })
-})
+    });
+  });
+});
--- a/apps/app/assets/js/live.js
+++ b/apps/app/assets/js/live.js
@ -1,18 +1,25 @@
-import {Socket} from "phoenix"
-import LiveSocket from "phoenix_live_view"
-import topbar from "topbar"
+import { Socket } from "phoenix";
+import LiveSocket from "phoenix_live_view";
+import topbar from "topbar";

-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");

-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+});

 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#3B82F6"}, shadowColor: "rgba(0, 0, 0, .3)"})
-window.addEventListener("phx:page-loading-start", info => topbar.show())
-window.addEventListener("phx:page-loading-stop", info => topbar.hide())
+topbar.config({
+  barColors: { 0: "#3B82F6" },
+  shadowColor: "rgba(0, 0, 0, .3)",
+});
+window.addEventListener("phx:page-loading-start", (info) => topbar.show());
+window.addEventListener("phx:page-loading-stop", (info) => topbar.hide());

 // Connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();

 // Expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
@ -20,4 +27,4 @@ liveSocket.connect()
 // The latency simulator is enabled for the duration of the browser session.
 // Call disableLatencySim() to disable:
 // >> liveSocket.disableLatencySim()
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;
--- a/apps/app/assets/js/socket.js
+++ b/apps/app/assets/js/socket.js
@ -6,9 +6,9 @@
 //
 // Pass the token on params as below. Or remove it
 // from the params if you are not using authentication.
-import {Socket} from "phoenix"
+import { Socket } from "phoenix";

-let socket = new Socket("/socket", {params: {token: window.userToken}})
+let socket = new Socket("/socket", { params: { token: window.userToken } });

 // When you connect, you'll often need to authenticate the client.
 // For example, imagine you have an authentication plug, `MyAuth`,
@ -52,12 +52,17 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
 //     end
 //
 // Finally, connect to the socket:
-socket.connect()
+socket.connect();

 // Now that you are connected, you can join channels with a topic:
-let channel = socket.channel("topic:subtopic", {})
-channel.join()
-  .receive("ok", resp => { console.log("Joined successfully", resp) })
-  .receive("error", resp => { console.log("Unable to join", resp) })
+let channel = socket.channel("topic:subtopic", {});
+channel
+  .join()
+  .receive("ok", (resp) => {
+    console.log("Joined successfully", resp);
+  })
+  .receive("error", (resp) => {
+    console.log("Unable to join", resp);
+  });

-export default socket
+export default socket;
--- a/apps/app/assets/js/utils.js
+++ b/apps/app/assets/js/utils.js
@ -1,10 +1,9 @@
-
 const ready = (fn) => {
-  if (document.readyState != 'loading') {
-    fn()
+  if (document.readyState != "loading") {
+    fn();
  } else {
-    document.addEventListener('DOMContentLoaded', fn)
+    document.addEventListener("DOMContentLoaded", fn);
  }
-}
+};

-export { ready }
+export { ready };
--- a/apps/app/assets/package-lock.json
+++ b/apps/app/assets/package-lock.json
@ -34,6 +34,7 @@
        "postcss-css-variables": "^0.17.0",
        "postcss-import": "^12.0.1",
        "postcss-loader": "^6.1.0",
+        "prettier": "2.3.2",
        "sass": "^1.35.1",
        "sass-loader": "^8.0.2",
        "style-loader": "^1.2.1",
@ -9749,6 +9750,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/prettier": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/pretty-hrtime": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@ -20384,6 +20397,12 @@
      "dev": true,
      "optional": true
    },
+    "prettier": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+      "dev": true
+    },
    "pretty-hrtime": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
--- a/apps/app/assets/package.json
+++ b/apps/app/assets/package.json
@ -36,6 +36,7 @@
    "postcss-css-variables": "^0.17.0",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^6.1.0",
+    "prettier": "2.3.2",
    "sass": "^1.35.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
--- a/apps/app/assets/postcss.config.js
+++ b/apps/app/assets/postcss.config.js
@ -1,13 +1,11 @@
 module.exports = {
  plugins: [
-    require('postcss-import')({
-      plugins: [
-        require('stylelint')(),
-      ]
+    require("postcss-import")({
+      plugins: [require("stylelint")()],
    }),
-    require('tailwindcss'),
-    require('autoprefixer'),
-    require('csswring')(),
-    require('postcss-color-function')()
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("csswring")(),
+    require("postcss-color-function")(),
  ],
-}
+};
--- a/apps/app/assets/tailwind.config.js
+++ b/apps/app/assets/tailwind.config.js
@ -1,7 +1,7 @@
-const yargsParser = require('yargs-parser');
+const yargsParser = require("yargs-parser");
 const cliArgs = yargsParser(process.argv);

-const mode = process.env.NODE_ENV || cliArgs.mode || 'development';
+const mode = process.env.NODE_ENV || cliArgs.mode || "development";

 module.exports = {
  future: {
@ -9,21 +9,21 @@ module.exports = {
    purgeLayersByDefault: true,
  },
  purge: {
-    enabled: mode == 'production',
-    layers: ['base', 'components', 'utilities'],
+    enabled: mode == "production",
+    layers: ["base", "components", "utilities"],
    content: [
-      '../../../**/views/*.ex',
-      '../../../**/*.html.eex',
-      '../../../**/*.html.leex',
-      '../../../**/*.html.heex',
-      './js/**/*.js'
-    ]
+      "../../../**/views/*.ex",
+      "../../../**/*.html.eex",
+      "../../../**/*.html.leex",
+      "../../../**/*.html.heex",
+      "./js/**/*.js",
+    ],
  },
  theme: {
    extend: {},
  },
  variants: {
-    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
+    backgroundColor: ["responsive", "hover", "focus", "checked"],
  },
  plugins: [],
-}
+};
--- a/apps/app/assets/webpack.config.js
+++ b/apps/app/assets/webpack.config.js
@ -1,31 +1,31 @@
-const path = require('path');
-const glob = require('glob');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const path = require("path");
+const glob = require("glob");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");

-const nodeModulesPath = path.resolve(__dirname, 'node_modules')
+const nodeModulesPath = path.resolve(__dirname, "node_modules");

 module.exports = (env, options) => {
-  const devMode = options.mode !== 'production';
+  const devMode = options.mode !== "production";

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
        new CssMinimizerPlugin(),
-      ]
+      ],
    },
    mode: options.mode,
-    devtool: devMode ? 'source-map' : undefined,
+    devtool: devMode ? "source-map" : undefined,
    entry: {
-      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']),
-      'content-editor': ['./js/content-editor.js'],
+      app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
+      "content-editor": ["./js/content-editor.js"],
    },
    output: {
-      filename: 'js/[name].js',
-      path: path.resolve(__dirname, '../priv/static/')
+      filename: "js/[name].js",
+      path: path.resolve(__dirname, "../priv/static/"),
    },
    module: {
      rules: [
@ -33,9 +33,9 @@ module.exports = (env, options) => {
        {
          test: /\.(jpg|jpeg|gif|png)$/,
          use: [
-            'file-loader',
+            "file-loader",
            {
-              loader: 'image-webpack-loader',
+              loader: "image-webpack-loader",
              options: {
                disable: devMode,
              },
@ -44,61 +44,108 @@ module.exports = (env, options) => {
        },
        {
          test: /\.(woff2?|ttf|eot|svg)(\?[a-z0-9\=\.]+)?$/,
-          loader: 'file-loader',
+          loader: "file-loader",
          options: {
-            publicPath: '/fonts',
+            publicPath: "/fonts",
            outputPath: (url, resourcePath, context) => {
              return `/fonts/${url}`;
            },
-          }
+          },
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
-            loader: 'babel-loader'
-          }
+            loader: "babel-loader",
+          },
        },
        {
          test: /\.css$/,
          use: [
-            {loader: MiniCssExtractPlugin.loader},
-            {loader: 'css-loader', options: {sourceMap: true}},
-            {loader: 'postcss-loader', options: {sourceMap: true}},
+            { loader: MiniCssExtractPlugin.loader },
+            { loader: "css-loader", options: { sourceMap: true } },
+            { loader: "postcss-loader", options: { sourceMap: true } },
          ],
        },
-      ]
+      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
-        filename: 'css/[name].css',
-        chunkFilename: '[id].css',
+        filename: "css/[name].css",
+        chunkFilename: "[id].css",
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.resolve(__dirname, "static"),
+            to: path.resolve(__dirname, "../priv/static"),
+          },
+        ],
      }),
-      new CopyWebpackPlugin({patterns: [
-        {
-          from: path.resolve(__dirname, 'static'),
-          to: path.resolve(__dirname, '../priv/static'),
-        },
-      ]}),
    ],
    resolve: {
      alias: {
-        "../webfonts/fa-brands-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot"),
-        "../webfonts/fa-brands-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2"),
-        "../webfonts/fa-brands-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff"),
-        "../webfonts/fa-brands-400.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf"),
-        "../webfonts/fa-brands-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg"),
-        "../webfonts/fa-regular-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot"),
-        "../webfonts/fa-regular-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2"),
-        "../webfonts/fa-regular-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff"),
-        "../webfonts/fa-regular-400.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf"),
-        "../webfonts/fa-regular-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg"),
-        "../webfonts/fa-solid-900.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot"),
-        "../webfonts/fa-solid-900.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"),
-        "../webfonts/fa-solid-900.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff"),
-        "../webfonts/fa-solid-900.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf"),
-        "../webfonts/fa-solid-900.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg"),
-      }
+        "../webfonts/fa-brands-400.eot": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot"
+        ),
+        "../webfonts/fa-brands-400.woff2": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2"
+        ),
+        "../webfonts/fa-brands-400.woff": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff"
+        ),
+        "../webfonts/fa-brands-400.ttf": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf"
+        ),
+        "../webfonts/fa-brands-400.svg": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg"
+        ),
+        "../webfonts/fa-regular-400.eot": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot"
+        ),
+        "../webfonts/fa-regular-400.woff2": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2"
+        ),
+        "../webfonts/fa-regular-400.woff": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff"
+        ),
+        "../webfonts/fa-regular-400.ttf": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf"
+        ),
+        "../webfonts/fa-regular-400.svg": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg"
+        ),
+        "../webfonts/fa-solid-900.eot": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot"
+        ),
+        "../webfonts/fa-solid-900.woff2": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"
+        ),
+        "../webfonts/fa-solid-900.woff": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff"
+        ),
+        "../webfonts/fa-solid-900.ttf": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf"
+        ),
+        "../webfonts/fa-solid-900.svg": path.resolve(
+          __dirname,
+          "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg"
+        ),
+      },
    },
-  }
+  };
 };
--- a/lefthook.yml
+++ b/lefthook.yml
@ -2,9 +2,9 @@ pre-commit:
  parallel: true
  commands:
    credo:
-      glob: "*.{ex,exs,eex,leex,heex}"
-      runner: mix credo diff master {files}
+      runner: mix credo diff master
    stylelint:
-      root: "apps/app/assets/"
      glob: "*.{css}"
-      runner: npx stylelint {files}
+      runner: (cd apps/app/assets/; npx stylelint {staged_files})
+    prettier:
+      runner: (cd apps/app/assets/; npx prettier --check **/*.js)