feat(lint): switch to eslint config and formatting (use vscode for autoformat)

6 files changed, 78 insertions, 57 deletions

diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
deleted file mode 100644
index f80eaa9..0000000
--- a/packages/ui/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	extends: [require.resolve('@polyfrost/config/eslint/web.js')],
-	parserOptions: {
-		tsconfigRootDir: __dirname,
-		project: './tsconfig.json'
-	}
-};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d843ba8..c2c95a0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,8 +1,6 @@
 {
 	"name": "@polyfrost/ui",
 	"version": "0.0.0",
-	"main": "src/index.ts",
-	"types": "src/index.ts",
 	"exports": {
 		".": "./src/index.ts",
 		"./src/forms": "./src/forms/index.ts",
@@ -12,8 +10,9 @@
 		"./style/style.scss": "./style/style.scss",
 		"./package.json": "./package.json"
 	},
+	"main": "src/index.ts",
+	"types": "src/index.ts",
 	"scripts": {
-		"lint": "eslint src --cache",
 		"typecheck": "tsc -b"
 	},
 	"dependencies": {
@@ -21,31 +20,31 @@
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@polyfrost/assets": "workspace:*",
 		"@react-spring/web": "^9.7.3",
-		"@tailwindcss/forms": "^0.5.6",
+		"@tailwindcss/forms": "^0.5.7",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.17.0",
-		"sonner": "^1.0.3",
+		"react-router-dom": "^6.20.0",
+		"sonner": "^1.2.3",
 		"tailwindcss-radix": "^2.8.0",
 		"ts-pattern": "^5.0.5",
-		"use-debounce": "^9.0.4",
+		"use-debounce": "^10.0.0",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.23.2",
+		"@babel/core": "^7.23.3",
 		"@polyfrost/config": "workspace:*",
-		"@storybook/types": "^7.5.1",
+		"@storybook/types": "^7.5.3",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/node": "~18.17.19",
-		"@types/react": "^18.2.31",
-		"@types/react-dom": "^18.2.14",
+		"@types/node": "~20.10.0",
+		"@types/react": "^18.2.38",
+		"@types/react-dom": "^18.2.17",
 		"autoprefixer": "^10.4.16",
 		"postcss": "^8.4.31",
-		"sass": "^1.69.4",
-		"tailwindcss": "^3.3.3",
+		"sass": "^1.69.5",
+		"tailwindcss": "^3.3.5",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.2.2"
+		"typescript": "^5.3.2"
 	}
 }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 708cbaf..cc95735 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-	plugins: [require('tailwindcss'), require('autoprefixer')]
+	plugins: [require('tailwindcss'), require('autoprefixer')],
 };
diff --git a/packages/ui/src/keys.ts b/packages/ui/src/keys.ts
index 55940f9..bb8eaa4 100644
--- a/packages/ui/src/keys.ts
+++ b/packages/ui/src/keys.ts
@@ -1,3 +1,4 @@
+// https://www.w3.org/TR/uievents-key/#keys-modifier
 export enum ModifierKeys {
 	Alt = 'Alt',
 	Shift = 'Shift',
@@ -10,14 +11,30 @@ export enum ModifierKeys {
 	NumLock = 'NumLock',
 	ScrollLock = 'ScrollLock',
 	Symbol = 'Symbol',
-	SymbolLock = 'SymbolLock'
+	SymbolLock = 'SymbolLock',
+}
+
+export enum EditingKeys {
+	Backspace = 'Backspace',
+	Delete = 'Delete',
+}
+
+export enum UIKeys {
+	Escape = 'Escape',
+}
+
+export enum NavigationKeys {
+	ArrowUp = 'ArrowUp',
+	ArrowDown = 'ArrowDown',
+	ArrowLeft = 'ArrowLeft',
+	ArrowRight = 'ArrowRight',
 }
 
 export type OSforKeys = 'macOS' | 'Windows' | 'Other';
 
 export const modifierSymbols: Record<
-	ModifierKeys,
-	{ macOS?: string; Windows?: string; Other: string }
+	ModifierKeys | EditingKeys | UIKeys | NavigationKeys,
+	{ macOS?: string, Windows?: string, Other: string }
 > = {
 	Alt: { macOS: '⌥', Other: 'Alt' },
 	AltGraph: { macOS: '⌥', Other: 'Alt' },
@@ -30,10 +47,17 @@ export const modifierSymbols: Record<
 	ScrollLock: { macOS: '⤓', Other: 'ScrLk' },
 	Shift: { Other: 'Shift', macOS: '⇧' },
 	Symbol: { macOS: '⎄', Other: 'Sym' },
-	SymbolLock: { macOS: '⎄', Other: 'Sym' }
+	SymbolLock: { macOS: '⎄', Other: 'Sym' },
+	Escape: { macOS: '⎋', Other: 'Esc' },
+	Delete: { macOS: '⌦', Other: 'Del' },
+	Backspace: { macOS: '⌫', Other: '⟵' },
+	ArrowUp: { Other: '↑' },
+	ArrowDown: { Other: '↓' },
+	ArrowLeft: { Other: '←' },
+	ArrowRight: { Other: '→' },
 };
 
-export const keySymbols: Record<string, { macOS?: string; Windows?: string; Other: string }> = {
+export const keySymbols: Record<string, { macOS?: string, Windows?: string, Other: string }> = {
 	' ': { Other: '␣' },
 	'Tab': { macOS: '⇥', Other: '⭾' },
 	'Enter': { macOS: '↩', Other: '↵' },
@@ -52,5 +76,5 @@ export const keySymbols: Record<string, { macOS?: string; Windows?: string; Othe
 	'Shift': { macOS: '⇧', Other: 'Shift' },
 	'PrintScreen': { Other: 'PrtSc' },
 	'ScrollLock': { macOS: '⤓', Other: 'ScrLk' },
-	'Pause': { macOS: '⎉', Other: 'Pause' }
+	'Pause': { macOS: '⎉', Other: 'Pause' },
 };
diff --git a/packages/ui/src/utils.tsx b/packages/ui/src/utils.tsx
index 5ccb488..67782bb 100644
--- a/packages/ui/src/utils.tsx
+++ b/packages/ui/src/utils.tsx
@@ -1,16 +1,16 @@
 import clsx from 'clsx';
 import React from 'react';
 
-const twFactory =
-	(element: any) =>
-	([newClassNames, ..._]: TemplateStringsArray) =>
+function twFactory(element: any) {
+	return ([newClassNames, ..._]: TemplateStringsArray) =>
 		React.forwardRef(({ className, ...props }: any, ref) =>
 			React.createElement(element, {
 				...props,
 				className: clsx(newClassNames, className),
-				ref
-			})
+				ref,
+			}),
 		);
+}
 
 type ClassnameFactory<T> = (s: TemplateStringsArray) => T;
 
@@ -19,10 +19,10 @@ type TailwindFactory = {
 		React.ForwardRefExoticComponent<JSX.IntrinsicElements[K]>
 	>;
 } & {
-	<T>(c: T): ClassnameFactory<T>;
+	<T>(c: T): ClassnameFactory<T>
 };
 
 export const tw = new Proxy((() => {}) as unknown as TailwindFactory, {
 	get: (_, property: string) => twFactory(property),
-	apply: (_, __, [el]: [React.ReactElement]) => twFactory(el)
+	apply: (_, __, [el]: [React.ReactElement]) => twFactory(el),
 });
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index fc05bd9..8ebf041 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.js
@@ -1,21 +1,24 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 /** @type {(varName: string) => string} */
-const alpha = (varName) => `hsla(var(${varName}), <alpha-value>)`;
+// eslint-disable-next-line unused-imports/no-unused-vars
+const alpha = varName => `hsla(var(${varName}), <alpha-value>)`;
 const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
 
+// TODO: make this not CJS
+
 /**
  * @param {string} app
  * @param {import('tailwindcss').Config} options
- * @returns {import('tailwindcss').Config}
+ * @returns {import('tailwindcss').Config} the tailwind config
  */
 module.exports = (app, options) => {
 	/** @type {import('tailwindcss').Config} */
-	let config = {
+	const config = {
 		content: [
 			`../../apps/${app}/src/**/*.${contentExts}`,
 			`../../packages/*/src/**/*.${contentExts}`,
-			`../../interface/**/*.${contentExts}`
+			`../../interface/**/*.${contentExts}`,
 		],
 		darkMode: 'class',
 		theme: {
@@ -25,7 +28,7 @@ module.exports = (app, options) => {
 				md: '868px',
 				lg: '1024px',
 				xl: '1280px',
-				...defaultTheme.screens
+				...defaultTheme.screens,
 			},
 			fontSize: {
 				'xs': '12px',
@@ -37,7 +40,7 @@ module.exports = (app, options) => {
 				'header-lg': '32px',
 				'body-sm': '15px',
 				'body': '16px',
-				'body-lg': '17px'
+				'body-lg': '17px',
 			},
 			borderRadius: {
 				none: '0',
@@ -45,31 +48,31 @@ module.exports = (app, options) => {
 				md: '5px',
 				lg: '8px',
 				xl: '12px',
-				full: '100vw'
+				full: '100vw',
 			},
 			extend: {
 				colors: {
 					blue: {
-						500: 'rgba(31, 101, 214, 1)'
+						500: 'rgba(31, 101, 214, 1)',
 					},
 					gray: {
 						50: 'rgba(240, 242, 244, 1)',
 						400: 'rgba(138, 150, 168, 1)',
 						700: 'rgba(65, 74, 88, 1)',
-						800: 'rgba(42, 47, 55, 1)'
+						800: 'rgba(42, 47, 55, 1)',
 					},
 					white: {
 						DEFAULT: 'rgba(255, 255, 255, 1)',
 						secondary: 'rgba(238, 241, 254, 1)',
-						hover: 'rgba(231, 235, 252, 1)'
+						hover: 'rgba(231, 235, 252, 1)',
 					},
 					black: {
-						DEFAULT: 'rgba(0, 0, 0, 1)'
+						DEFAULT: 'rgba(0, 0, 0, 1)',
 					},
 					text: {
 						DEFAULT: 'rgba(2, 3, 7, 1)',
-						primary: 'rgba(2, 3, 7, 1)'
-					}
+						primary: 'rgba(2, 3, 7, 1)',
+					},
 				},
 				extend: {
 					transitionTimingFunction: {
@@ -100,20 +103,23 @@ module.exports = (app, options) => {
 						'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)',
 						'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
 						'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-						'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'
-					}
-				}
-			}
+						'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',
+					},
+				},
+			},
 		},
 		plugins: [
 			require('@tailwindcss/forms'),
 			require('tailwindcss-animate'),
 			require('@headlessui/tailwindcss'),
-			require('tailwindcss-radix')()
-		]
+			require('tailwindcss-radix')(),
+		],
+
+		...options,
 	};
 
-	if (app === 'website') config.plugins.push(require('@tailwindcss/typography'));
+	if (app === 'website')
+		config.plugins.push(require('@tailwindcss/typography'));
 
 	return config;
 };