Feature: monorepo eslint upgrade to flat config

.github/workflows/lint.yml

@@ -24,10 +24,4 @@ jobs:
         run: pnpm install
 
       - name: Lint scripts 🏗
-        run: pnpm --filter @explorer-1/html lint:js
-
-      - name: Lint styles 💅
-        run: pnpm --filter @explorer-1/html lint:style
-
-      - name: Check Prettier ✨
-        run: pnpm --filter @explorer-1/html lint:format
+        run: pnpm run lint

.gitignore

@@ -43,6 +43,9 @@ out/
 !.vscode/extensions.json
 !.vscode/*.code-snippets
 
+# Local History extension for VSCode
+.history
+
 # Testing
 reports
 coverage

.npmrc

@@ -1 +1,2 @@
-shamefully-hoist=true
+shamefully-hoist=true
+package-manager-strict=false

Makefile

@@ -37,12 +37,26 @@ endif
 nvm:
 	make check-nvm && $(CMD)
 
-## install dependencies
+## Install: node_modules dependencies with pnpm
 install: check-nvm
 	pnpm install
 
 i: install
 
+## Clean: remove node_modules
+clean:
+	pnpm run clean
+
+## Refresh: remove node_modules and install
+refresh:
+	pnpm run refresh
+
+fresh: refresh
+
+## Nuke: clean and reinstall node_modules
+nuke:
+	pnpm run nuke
+
 ## HTML: run Storybook
 html-storybook:
 	pnpm --filter @explorer-1/html-storybook dev
@@ -83,6 +97,14 @@ nuxt-dev:
 nuxt-build:
 	pnpm --filter @explorer-1/nuxt build
 
+## Lint: run ESLint
+lint:
+	pnpm run lint
+
+## Lint fix: run ESLint
+lint-fix:
+	pnpm run lint:fix
+
 # TODO: Below helper commands not running as expected change dir first, then pnpm dlx...
 # ## HTML: update Storybook
 # html-storybook-update:

apps/html-storybook/package.json

@@ -18,6 +18,8 @@
     "prepare:clean": "rimraf ./public/dist",
     "prepare:public": "cp -R ./node_modules/@explorer-1/html/dist/ ./public/dist",
     "storybook": "pnpm run prepare && storybook dev -c .storybook -p 6006 --ci",
+    "lint": "eslint .storybook",
+    "lint:fix": "eslint .storybook --fix",
     "build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled",
     "percy": "percy storybook http://localhost:6006",
     "percy:dry-run": "percy storybook http://localhost:6006 --dry-run"
@@ -48,8 +50,6 @@
     "@storybook/theming": "^8.1.2",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-storybook": "^0.8.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",

apps/vue-storybook/.gitignore

@@ -0,0 +1 @@
+node_modules

apps/vue-storybook/package.json

@@ -9,8 +9,8 @@
     "build": "storybook build -c .storybook -o storybook_compiled",
     "percy": "percy storybook http://localhost:6006",
     "percy:dry-run": "percy storybook http://localhost:6006 --dry-run",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
-    "format": "prettier --write src/",
+    "lint": "eslint stories",
+    "lint:fix": "eslint stories --fix",
     "init-msw": "msw init public/"
   },
   "dependencies": {
@@ -33,9 +33,6 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.34.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vue": "^9.9.0",
     "msw": "^1.2.1",
     "msw-storybook-addon": "^2.0.2",
     "postcss": "^8.4.38",

eslint.config.js

@@ -0,0 +1,7 @@
+/* eslint-disable prettier/prettier */
+// eslint.config.js
+import config from '@explorer-1/eslint-config'
+
+export default [
+  ...config,
+]

package.json

@@ -1,20 +1,37 @@
 {
   "name": "explorer-1",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
+  "type": "module",
+  "description": "Monorepo for JPL's design system, Explorer 1",
+  "keywords": [
+    "vue",
+    "design system",
+    "storybook",
+    "html",
+    "css",
+    "scss",
+    "tailwindcss"
+  ],
   "author": "",
   "license": "ISC",
+  "scripts": {
+    "clean": "rimraf \"**/node_modules\"",
+    "refresh": "pnpm clean && pnpm i",
+    "nuke": "rimraf pnpm-lock.yaml && pnpm refresh",
+    "preinstall": "npx --yes only-allow pnpm",
+    "preupdate": "npx --yes only-allow pnpm",
+    "lint": "pnpm run -r --if-present lint",
+    "lint:fix": "pnpm run -r --if-present lint:fix"
+  },
   "engines": {
     "node": "^20.13.1",
-    "npm": "^10.5.2"
+    "pnpm": ">=9.1.1",
+    "npm": "please-use-pnpm",
+    "yarn": "please-use-pnpm"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1",
+    "@explorer-1/eslint-config": "workspace:^",
     "@explorer-1/html": "workspace:^",
     "@explorer-1/html-storybook": "workspace:^",
     "@explorer-1/vue": "workspace:^",

packages/common-storybook/package.json

@@ -2,6 +2,10 @@
   "name": "@explorer-1/common-storybook",
   "version": "0.0.0",
   "private": true,
+  "scripts": {
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
+  },
   "prettier": "@explorer-1/prettier-config",
   "devDependencies": {
     "@explorer-1/common": "workspace:*",

packages/common-storybook/src/config/customTheme.ts

@@ -13,5 +13,5 @@ export default create({
   // White Labeling
   brandTitle: 'JPL Design System',
   // brandUrl: 'https://example.com',
-  brandImage: 'brand-jpl-logo.svg',
+  brandImage: 'brand-jpl-logo.svg'
 })

packages/common-storybook/src/config/withGlobals.ts

@@ -1,87 +1,84 @@
-import { useEffect, useGlobals } from '@storybook/preview-api';
+import { useEffect, useGlobals } from '@storybook/preview-api'
 
 const getThemes = (themesConfig) => {
   // default values
-  let defaultMethod: string = 'css';
-  let options: string[] | undefined = undefined;
-  let method: string | undefined = undefined;
+  let defaultMethod: string = 'css'
+  let options: string[] | undefined = undefined
+  let method: string | undefined = undefined
 
   if (typeof themesConfig === 'object') {
     // handle theme
     if ('themeSwitcher' in themesConfig) {
-      if (
-        Array.isArray(themesConfig.defaultValue) &&
-        themesConfig.defaultValue.length > 0
-      ) {
-        options = themesConfig.defaultValue;
+      if (Array.isArray(themesConfig.defaultValue) && themesConfig.defaultValue.length > 0) {
+        options = themesConfig.defaultValue
       } else {
-        options = undefined;
+        options = undefined
       }
     }
 
     // handle method
     if ('method' in themesConfig) {
       // case insensitive comparisons
       if (themesConfig.method.toUpperCase() === 'data-theme'.toUpperCase()) {
-        method = 'data-theme';
+        method = 'data-theme'
       } else if (themesConfig.method.toUpperCase() === 'css'.toUpperCase()) {
-        method = 'css';
+        method = 'css'
       } else {
         // use "css" method if not specified
-        method = defaultMethod;
+        method = defaultMethod
       }
     } else {
-      method = defaultMethod;
+      method = defaultMethod
     }
   }
 
   // otherwise undefined
   else {
-    options = undefined;
-    method = undefined;
+    options = undefined
+    method = undefined
   }
 
-  return { options, method };
-};
+  return { options, method }
+}
 
 export const withGlobals = (StoryFn, context) => {
-  const { themesConfig } = context.globals;
-  const { options, method } = getThemes(themesConfig);
-  const [{ theme }, updateGlobals] = useGlobals();
-  const isInDocs = context.viewMode === 'docs';
+  const { themesConfig } = context.globals
+  const { options, method } = getThemes(themesConfig)
+  const [{ theme }, updateGlobals] = useGlobals()
+  const isInDocs = context.viewMode === 'docs'
 
   // disable usage of updateGlobals in docs
   if (!isInDocs) {
     // check for value in local storage
     useEffect(() => {
-      const savedTheme = window.localStorage.getItem('data-theme');
+      const savedTheme = window.localStorage.getItem('data-theme')
       if (savedTheme) {
         // update theme attribute and save it to local storage
-        updateGlobals({ theme: savedTheme });
+        updateGlobals({ theme: savedTheme })
       } else {
         // set it to the first theme
         if (options && options.length > 0) {
-          updateGlobals({ theme: options[0] });
+          updateGlobals({ theme: options[0] })
         }
       }
-    }, []);
+    }, [])
   }
 
   if (method === 'css') {
     useEffect(() => {
       if (theme) {
-        document.documentElement.setAttribute('class', theme);
-        window.localStorage.setItem('data-theme', theme);
+        document.documentElement.setAttribute('class', theme)
+        window.localStorage.setItem('data-theme', theme)
       }
-    }, [theme]);
+    }, [theme])
   } else if (method === 'data-theme') {
     useEffect(() => {
       if (theme) {
-        document.documentElement.setAttribute('data-theme', theme);
-        window.localStorage.setItem('data-theme', theme);
+        document.documentElement.setAttribute('data-theme', theme)
+        window.localStorage.setItem('data-theme', theme)
       }
-    }, [theme]);
+    }, [theme])
   }
 
-  return StoryFn();
-};
+  return StoryFn()
+}

packages/common/package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "description": "shared assets for all flavors of explorer-1",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   },
   "author": "",
   "prettier": "@explorer-1/prettier-config",