Use pre-commit to enforce code style practices

.github/actions/get-node-version/src/main.ts

@@ -1,6 +1,6 @@
 import { setOutput, setFailed, getInput } from "@actions/core";
 import semver from "semver";
-import {readFileSync} from "fs";
+import { readFileSync } from "fs";
 
 (() => {
   const inputPath = getInput("package-json");

.github/actions/get-node-version/tsconfig.json

@@ -40,7 +40,7 @@
 
     "composite": true,
 
-    "skipLibCheck": false,
+    "skipLibCheck": false
   },
-  "include": ["./src/**/*.ts"],
+  "include": ["./src/**/*.ts"]
 }

.github/workflows/test.yml

@@ -25,6 +25,19 @@ jobs:
         id: get-node-version
         uses: ./.github/actions/get-node-version
 
+  pre-commit:
+    name: Code style check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v2
+        with:
+          python-version: '3.8'
+      - name: Install pre-commit
+        run: curl https://pre-commit.com/install-local.py | python -
+      - name: Run pre-commit
+        run: ~/bin/pre-commit run --show-diff-on-failure --color=always --all-files
+
   test:
     name: Test
     runs-on: ubuntu-latest

.pre-commit-config.yaml

@@ -4,10 +4,12 @@ repos:
     hooks:
       - id: trailing-whitespace
       - id: end-of-file-fixer
+        exclude_types: [svg]
       - id: check-yaml
       - id: mixed-line-ending
         args: [--fix=lf]
   - repo: https://github.com/pre-commit/mirrors-prettier
     rev: "v2.3.1"
     hooks:
       - id: prettier
+        exclude_types: [markdown, yaml]

README.md

@@ -97,3 +97,16 @@ files.
 
 To upgrade Storybook when it informs you about new version being available, run
 the given `npx sb@latest upgrade` command in `apps/storybook` directory.
+
+## pre-commit
+
+[Pre-commit](https://pre-commit.com/) enforces code style practices in this
+project. Choose your preferred
+[installation method](https://pre-commit.com/#install) and then run `pre-commit
+install` to enable Git hook scripts. Pre-commit will now automatically cancel
+your commits if any problems are detected, and autofix them. Stage the changed
+files to your commit and re-run the commit command.
+
+Pre-commit can be disabled for a single commit with `--no-verify` option, but
+note that CI also runs pre-commit and will fail if any problems are encountered
+at this stage.

apps/storybook/.babelrc.json

@@ -58,4 +58,4 @@
       }
     ]
   ]
-}
+}

apps/storybook/.storybook/main.js

@@ -1,17 +1,17 @@
 module.exports = {
-  "stories": [
+  stories: [
     "../stories/**/*.stories.mdx",
     {
-      "directory": "../stories/components",
-      "files": "*.stories.*",
-      "titlePrefix": "@thunderstore/components"
+      directory: "../stories/components",
+      files: "*.stories.*",
+      titlePrefix: "@thunderstore/components",
     },
   ],
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@snek-at/storybook-addon-chakra-ui",  // Must come after @storybook addons
+    "@snek-at/storybook-addon-chakra-ui", // Must come after @storybook addons
   ],
-  "framework": "@storybook/react",
+  framework: "@storybook/react",
 };

apps/storybook/.storybook/preview.js

@@ -14,4 +14,4 @@ export const parameters = {
       { name: "dark", value: "#333" },
     ],
   },
-}
+};

apps/storybook/stories/Introduction.stories.mdx

@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
 
 <Meta title="Example/Introduction" />
 
@@ -180,14 +180,22 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
     <img src={Direction} alt="direction" />
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
     <img src={Code} alt="code" />
     <span>
       <strong>GitHub project</strong>
@@ -204,6 +212,6 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>src/stories/Introduction.stories.mdx</code>
 </div>

apps/storybook/stories/components/Markdown.stories.tsx

@@ -19,8 +19,6 @@ ${"```"}js
 console.log("Hello, World!");
 ${"```"}
 
-
-
 ${"```"}python
 print('Hello, World!')
 ${"```"}
@@ -33,16 +31,12 @@ const listContent = `
     * Subitem
 * Yet another item
 
-
-
 1. First item
 2. Second item
     1. Subitem
     2. Subitem
 3. Last item
 
-
-
 - [x] Read ticket thoroughly
 - [ ] Design implementation
 - [ ] Write code and tests