eslint + prettier + stylelint setup

.eslintignore

@@ -9,3 +9,5 @@ tailwind.config.js
 app/javascript/gql/generated.ts
 app/javascript/shared/i18n.ts
 config/**/*.js
+vite.config.ts
+node_modules

.eslintrc.js

@@ -1,12 +1,5 @@
 module.exports = {
-  globals: {
-    I18n: 'readonly',
-    google: 'readonly',
-    global: 'readonly',
-    YT: 'readonly',
-    betterplaceOverlayConfig: 'readonly',
-    dataLayer: 'readonly',
-  },
+  globals: {},
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
@@ -25,6 +18,7 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
+    'plugin:mdx/recommended',
   ],
   settings: {
     react: {

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.storybook/main.js

@@ -1,17 +1,15 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-jest',
+    '@storybook/addon-a11y', // TODO: vite fix https://github.com/storybookjs/storybook/pull/17997
+    'storybook-addon-designs',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y", // TODO: vite fix https://github.com/storybookjs/storybook/pull/17997
-    "storybook-addon-designs"
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-vite"
-  }
-}
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+}

.stylelintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'stylelint-config-standard',
+  rules: {
+    'alpha-value-notation': 'number',
+    'selector-class-pattern': null,
+  },
+}

package.json

@@ -20,7 +20,8 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prepare": "husky install"
   },
   "dependencies": {
     "react": "^17.0.2",
@@ -36,6 +37,7 @@
     "@storybook/addon-actions": "^6.4.21",
     "@storybook/addon-essentials": "^6.4.21",
     "@storybook/addon-interactions": "^6.4.21",
+    "@storybook/addon-jest": "^6.4.22",
     "@storybook/addon-links": "^6.4.21",
     "@storybook/builder-vite": "^0.1.28",
     "@storybook/react": "^6.4.21",
@@ -46,10 +48,27 @@
     "@typescript-eslint/parser": "^5.20.0",
     "@vitejs/plugin-react": "^1.0.7",
     "babel-loader": "^8.2.4",
-    "storybook-addon-designs": "^6.2.1",
     "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.5",
+    "eslint-plugin-mdx": "^1.17.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": ">=6",
+    "lint-staged": ">=10",
+    "storybook-addon-designs": "^6.2.1",
+    "stylelint": "^14.8.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-prettier": "^2.0.0",
     "typescript": "^4.5.4",
     "vite": "^2.9.0",
-    "vite-plugin-dts": "^1.0.5"
+    "vite-plugin-dts": "^1.0.5",
+    "vite-plugin-eslint": "^1.6.0"
+  },
+  "lint-staged": {
+    "*.{ts, tsx, mdx}": "eslint --cache --fix",
+    "*.{css, scss}": "stylelint --fix"
   }
 }

vite.config.ts

@@ -1,11 +1,13 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-import dts from "vite-plugin-dts";
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import dts from 'vite-plugin-dts'
+import eslint from 'vite-plugin-eslint'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
+    eslint(),
     react(),
     dts({
       insertTypesEntry: true,