Merge pull request #4 from Polyfrost/website/icon-fix

14 files changed, 111 insertions, 83 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..3d63e4d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,51 +1,57 @@
 {
 	"name": "@polyfrost/ui",
 	"version": "0.0.0",
-	"main": "src/index.ts",
-	"types": "src/index.ts",
+	"sideEffects": false,
 	"exports": {
 		".": "./src/index.ts",
 		"./src/forms": "./src/forms/index.ts",
-		"./postcss": "./style/postcss.config.js",
-		"./tailwind": "./style/tailwind.js",
-		"./style": "./style/index.js",
+		"./postcss": "./style/postcss",
+		"./tailwind": "./style/tailwind",
+		"./style": "./style",
 		"./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"
+		"typecheck": "tsc -b",
+		"test": "vitest"
+	},
+	"peerDependencies": {
+		"tailwindcss": ">=3",
+		"typescript": ">=5"
 	},
 	"dependencies": {
-		"@headlessui/react": "^1.7.17",
+		"@headlessui/react": "^1.7.18",
 		"@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",
+		"clsx": "^2.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.17.0",
-		"sonner": "^1.0.3",
+		"react-router-dom": "^6.21.1",
+		"sonner": "^1.3.1",
 		"tailwindcss-radix": "^2.8.0",
-		"ts-pattern": "^5.0.5",
-		"use-debounce": "^9.0.4",
+		"ts-pattern": "^5.0.6",
+		"use-debounce": "^10.0.0",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.23.2",
+		"@babel/core": "^7.23.7",
 		"@polyfrost/config": "workspace:*",
-		"@storybook/types": "^7.5.1",
+		"@storybook/types": "^7.6.7",
 		"@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.8",
+		"@types/react": "^18.2.47",
+		"@types/react-dom": "^18.2.18",
 		"autoprefixer": "^10.4.16",
-		"postcss": "^8.4.31",
-		"sass": "^1.69.4",
-		"tailwindcss": "^3.3.3",
+		"postcss": "^8.4.33",
+		"sass": "^1.69.7",
+		"tailwindcss": "^3.4.1",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.2.2"
+		"typescript": "^5.3.3",
+		"vitest": "^1.1.3"
 	}
 }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
deleted file mode 100644
index 708cbaf..0000000
--- a/packages/ui/postcss.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-	plugins: [require('tailwindcss'), require('autoprefixer')]
-};
diff --git a/packages/ui/postcss.config.ts b/packages/ui/postcss.config.ts
new file mode 100644
index 0000000..2eb70ea
--- /dev/null
+++ b/packages/ui/postcss.config.ts
@@ -0,0 +1,8 @@
+import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
+
+const config = {
+	plugins: [autoprefixer(), tailwindcss()],
+};
+
+export default config;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 904db93..98af4eb 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1 +1,2 @@
 export { cva, cx } from 'class-variance-authority';
+export * from './utils';
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/index.js b/packages/ui/style/index.ts
index 423b033..423b033 100644
--- a/packages/ui/style/index.js
+++ b/packages/ui/style/index.ts
diff --git a/packages/ui/style/postcss.config.js b/packages/ui/style/postcss.config.js
deleted file mode 100644
index 0b6eba2..0000000
--- a/packages/ui/style/postcss.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../postcss.config');
diff --git a/packages/ui/style/postcss.ts b/packages/ui/style/postcss.ts
new file mode 100644
index 0000000..60d0ac7
--- /dev/null
+++ b/packages/ui/style/postcss.ts
@@ -0,0 +1 @@
+export { default } from '../postcss.config';
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.ts
index fc05bd9..73c8fc7 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.ts
@@ -1,21 +1,20 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import type { Config } from 'tailwindcss';
 
-/** @type {(varName: string) => string} */
-const alpha = (varName) => `hsla(var(${varName}), <alpha-value>)`;
-const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
+import headlessui from '@headlessui/tailwindcss';
+import animate from 'tailwindcss-animate';
+import radix from 'tailwindcss-radix';
 
-/**
- * @param {string} app
- * @param {import('tailwindcss').Config} options
- * @returns {import('tailwindcss').Config}
- */
-module.exports = (app, options) => {
-	/** @type {import('tailwindcss').Config} */
-	let config = {
+export const alpha = (varName: string) => `hsla(var(${varName}), <alpha-value>)`;
+export const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
+
+export default async (app: string, options?: Config): Promise<Config> => {
+	const config: Config = {
 		content: [
 			`../../apps/${app}/src/**/*.${contentExts}`,
 			`../../packages/*/src/**/*.${contentExts}`,
-			`../../interface/**/*.${contentExts}`
+			`../../interface/**/*.${contentExts}`,
 		],
 		darkMode: 'class',
 		theme: {
@@ -25,7 +24,6 @@ module.exports = (app, options) => {
 				md: '868px',
 				lg: '1024px',
 				xl: '1280px',
-				...defaultTheme.screens
 			},
 			fontSize: {
 				'xs': '12px',
@@ -37,7 +35,7 @@ module.exports = (app, options) => {
 				'header-lg': '32px',
 				'body-sm': '15px',
 				'body': '16px',
-				'body-lg': '17px'
+				'body-lg': '17px',
 			},
 			borderRadius: {
 				none: '0',
@@ -45,31 +43,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 +98,18 @@ 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')()
-		]
+		plugins: [forms, animate, headlessui, radix],
+
+		...options,
 	};
 
-	if (app === 'website') config.plugins.push(require('@tailwindcss/typography'));
+	if (app === 'website')
+		config.plugins!.push(typography);
 
 	return config;
 };
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
deleted file mode 100644
index 8c53793..0000000
--- a/packages/ui/tailwind.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = require('./style/tailwind')('web');
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
new file mode 100644
index 0000000..0c30ba3
--- /dev/null
+++ b/packages/ui/tailwind.config.ts
@@ -0,0 +1,3 @@
+import tailwindConfig from './style/tailwind';
+
+export default await tailwindConfig('web');
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
new file mode 100644
index 0000000..3160c1a
--- /dev/null
+++ b/packages/ui/vitest.config.ts
@@ -0,0 +1,3 @@
+import vitestShared from '@polyfrost/config/vitest.shared';
+
+export default vitestShared;