refactor(trunk): refactor the entire project idk

13 files changed, 312 insertions, 0 deletions

diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
new file mode 100644
index 0000000..f80eaa9
--- /dev/null
+++ b/packages/ui/.eslintrc.js
@@ -0,0 +1,8 @@
+/** @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
new file mode 100644
index 0000000..e79d4c0
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,51 @@
+{
+	"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",
+		"./postcss": "./style/postcss.config.js",
+		"./tailwind": "./style/tailwind.js",
+		"./style": "./style/index.js",
+		"./style/style.scss": "./style/style.scss",
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"lint": "eslint src --cache",
+		"typecheck": "tsc -b"
+	},
+	"dependencies": {
+		"@headlessui/react": "^1.7.17",
+		"@headlessui/tailwindcss": "^0.1.1",
+		"@react-spring/web": "^9.7.3",
+		"@polyfrost/assets": "workspace:*",
+		"@tailwindcss/forms": "^0.5.6",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.16.0",
+		"sonner": "^1.0.3",
+		"tailwindcss-radix": "^2.8.0",
+		"ts-pattern": "^5.0.5",
+		"use-debounce": "^9.0.4",
+		"zod": "^3.22.4"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.23.2",
+		"@polyfrost/config": "workspace:*",
+		"@storybook/types": "^7.4.6",
+		"@tailwindcss/typography": "^0.5.10",
+		"@types/node": "~18.17.19",
+		"@types/react": "^18.2.28",
+		"@types/react-dom": "^18.2.13",
+		"autoprefixer": "^10.4.16",
+		"postcss": "^8.4.31",
+		"sass": "^1.69.3",
+		"tailwindcss": "^3.3.3",
+		"tailwindcss-animate": "^1.0.7",
+		"typescript": "^5.2.2"
+	}
+}
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
new file mode 100644
index 0000000..708cbaf
--- /dev/null
+++ b/packages/ui/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+	plugins: [require('tailwindcss'), require('autoprefixer')]
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..904db93
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1 @@
+export { cva, cx } from 'class-variance-authority';
diff --git a/packages/ui/src/keys.ts b/packages/ui/src/keys.ts
new file mode 100644
index 0000000..55940f9
--- /dev/null
+++ b/packages/ui/src/keys.ts
@@ -0,0 +1,56 @@
+export enum ModifierKeys {
+	Alt = 'Alt',
+	Shift = 'Shift',
+	AltGraph = 'AltGraph',
+	CapsLock = 'CapsLock',
+	Control = 'Control',
+	Fn = 'Fn',
+	FnLock = 'FnLock',
+	Meta = 'Meta',
+	NumLock = 'NumLock',
+	ScrollLock = 'ScrollLock',
+	Symbol = 'Symbol',
+	SymbolLock = 'SymbolLock'
+}
+
+export type OSforKeys = 'macOS' | 'Windows' | 'Other';
+
+export const modifierSymbols: Record<
+	ModifierKeys,
+	{ macOS?: string; Windows?: string; Other: string }
+> = {
+	Alt: { macOS: '⌥', Other: 'Alt' },
+	AltGraph: { macOS: '⌥', Other: 'Alt' },
+	CapsLock: { Other: '⇪' },
+	Control: { macOS: '⌃', Other: 'Ctrl' },
+	Fn: { macOS: 'fn', Other: 'Fn' },
+	FnLock: { macOS: 'fn', Other: 'Fn' },
+	Meta: { macOS: '⌘', Windows: '⊞ Win', Other: 'Meta' },
+	NumLock: { macOS: '⇭', Other: 'Num' },
+	ScrollLock: { macOS: '⤓', Other: 'ScrLk' },
+	Shift: { Other: 'Shift', macOS: '⇧' },
+	Symbol: { macOS: '⎄', Other: 'Sym' },
+	SymbolLock: { macOS: '⎄', Other: 'Sym' }
+};
+
+export const keySymbols: Record<string, { macOS?: string; Windows?: string; Other: string }> = {
+	' ': { Other: '␣' },
+	'Tab': { macOS: '⇥', Other: '⭾' },
+	'Enter': { macOS: '↩', Other: '↵' },
+	'Escape': { macOS: '⎋', Other: 'Esc' },
+	'Backspace': { macOS: '⌫', Other: '⟵' },
+	'ArrowUp': { Other: '↑' },
+	'ArrowDown': { Other: '↓' },
+	'ArrowLeft': { Other: '←' },
+	'ArrowRight': { Other: '→' },
+	'Insert': { Other: 'Ins' },
+	'Delete': { macOS: '⌦', Other: 'Del' },
+	'Home': { macOS: '↖', Other: 'Home' },
+	'End': { macOS: '↘', Other: 'End' },
+	'PageUp': { macOS: '⇞', Other: 'PgUp' },
+	'PageDown': { macOS: '⇟', Other: 'PgDn' },
+	'Shift': { macOS: '⇧', Other: 'Shift' },
+	'PrintScreen': { Other: 'PrtSc' },
+	'ScrollLock': { macOS: '⤓', Other: 'ScrLk' },
+	'Pause': { macOS: '⎉', Other: 'Pause' }
+};
diff --git a/packages/ui/src/utils.tsx b/packages/ui/src/utils.tsx
new file mode 100644
index 0000000..5ccb488
--- /dev/null
+++ b/packages/ui/src/utils.tsx
@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import React from 'react';
+
+const twFactory =
+	(element: any) =>
+	([newClassNames, ..._]: TemplateStringsArray) =>
+		React.forwardRef(({ className, ...props }: any, ref) =>
+			React.createElement(element, {
+				...props,
+				className: clsx(newClassNames, className),
+				ref
+			})
+		);
+
+type ClassnameFactory<T> = (s: TemplateStringsArray) => T;
+
+type TailwindFactory = {
+	[K in keyof JSX.IntrinsicElements]: ClassnameFactory<
+		React.ForwardRefExoticComponent<JSX.IntrinsicElements[K]>
+	>;
+} & {
+	<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)
+});
diff --git a/packages/ui/style/index.js b/packages/ui/style/index.js
new file mode 100644
index 0000000..423b033
--- /dev/null
+++ b/packages/ui/style/index.js
@@ -0,0 +1 @@
+import './style.scss';
diff --git a/packages/ui/style/postcss.config.js b/packages/ui/style/postcss.config.js
new file mode 100644
index 0000000..0b6eba2
--- /dev/null
+++ b/packages/ui/style/postcss.config.js
@@ -0,0 +1 @@
+module.exports = require('../postcss.config');
diff --git a/packages/ui/style/style.scss b/packages/ui/style/style.scss
new file mode 100644
index 0000000..bf5a2e7
--- /dev/null
+++ b/packages/ui/style/style.scss
@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+* {
+	font-family: 'Poppins', sans-serif;
+}
+
+@layer base {
+	:focus-visible {
+		@apply outline-none ring ring-blue-500;
+	}
+}
+
+@layer utilities {
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+}
+
+// tauri button patch
+[type='button'] {
+	-webkit-appearance: none;
+}
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
new file mode 100644
index 0000000..fc05bd9
--- /dev/null
+++ b/packages/ui/style/tailwind.js
@@ -0,0 +1,119 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @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}`;
+
+/**
+ * @param {string} app
+ * @param {import('tailwindcss').Config} options
+ * @returns {import('tailwindcss').Config}
+ */
+module.exports = (app, options) => {
+	/** @type {import('tailwindcss').Config} */
+	let config = {
+		content: [
+			`../../apps/${app}/src/**/*.${contentExts}`,
+			`../../packages/*/src/**/*.${contentExts}`,
+			`../../interface/**/*.${contentExts}`
+		],
+		darkMode: 'class',
+		theme: {
+			screens: {
+				xs: '475px',
+				sm: '650px',
+				md: '868px',
+				lg: '1024px',
+				xl: '1280px',
+				...defaultTheme.screens
+			},
+			fontSize: {
+				'xs': '12px',
+				'sm': '14px',
+				'md': '16px',
+				'lg': '18px',
+				'header-sm': '24px',
+				'header': '28px',
+				'header-lg': '32px',
+				'body-sm': '15px',
+				'body': '16px',
+				'body-lg': '17px'
+			},
+			borderRadius: {
+				none: '0',
+				sm: '3px',
+				md: '5px',
+				lg: '8px',
+				xl: '12px',
+				full: '100vw'
+			},
+			extend: {
+				colors: {
+					blue: {
+						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)'
+					},
+					white: {
+						DEFAULT: 'rgba(255, 255, 255, 1)',
+						secondary: 'rgba(238, 241, 254, 1)',
+						hover: 'rgba(231, 235, 252, 1)'
+					},
+					black: {
+						DEFAULT: 'rgba(0, 0, 0, 1)'
+					},
+					text: {
+						DEFAULT: 'rgba(2, 3, 7, 1)',
+						primary: 'rgba(2, 3, 7, 1)'
+					}
+				},
+				extend: {
+					transitionTimingFunction: {
+						'css': 'ease',
+						'css-in': 'ease-in',
+						'css-out': 'ease-out',
+						'css-in-out': 'ease-in-out',
+						'in-sine': 'cubic-bezier(0.12, 0, 0.39, 0)',
+						'out-sine': 'cubic-bezier(0.61, 1, 0.88, 1)',
+						'in-out-sine': 'cubic-bezier(0.37, 0, 0.63, 1)',
+						'in-quad': 'cubic-bezier(0.11, 0, 0.5, 0)',
+						'out-quad': 'cubic-bezier(0.5, 1, 0.89, 1)',
+						'in-out-quad': 'cubic-bezier(0.45, 0, 0.55, 1)',
+						'in-cubic': 'cubic-bezier(0.32, 0, 0.67, 0)',
+						'out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',
+						'in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)',
+						'in-quart': 'cubic-bezier(0.5, 0, 0.75, 0)',
+						'out-quart': 'cubic-bezier(0.25, 1, 0.5, 1)',
+						'in-out-quart': 'cubic-bezier(0.76, 0, 0.24, 1)',
+						'in-quint': 'cubic-bezier(0.64, 0, 0.78, 0)',
+						'out-quint': 'cubic-bezier(0.22, 1, 0.36, 1)',
+						'in-out-quint': 'cubic-bezier(0.83, 0, 0.17, 1)',
+						'in-expo': 'cubic-bezier(0.7, 0, 0.84, 0)',
+						'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
+						'in-out-expo': 'cubic-bezier(0.87, 0, 0.13, 1)',
+						'in-circ': 'cubic-bezier(0.55, 0, 1, 0.45)',
+						'out-circ': 'cubic-bezier(0, 0.55, 0.45, 1)',
+						'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)'
+					}
+				}
+			}
+		},
+		plugins: [
+			require('@tailwindcss/forms'),
+			require('tailwindcss-animate'),
+			require('@headlessui/tailwindcss'),
+			require('tailwindcss-radix')()
+		]
+	};
+
+	if (app === 'website') config.plugins.push(require('@tailwindcss/typography'));
+
+	return config;
+};
diff --git a/packages/ui/style/tailwind.pcss b/packages/ui/style/tailwind.pcss
new file mode 100644
index 0000000..510ff1d
--- /dev/null
+++ b/packages/ui/style/tailwind.pcss
@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
new file mode 100644
index 0000000..8c53793
--- /dev/null
+++ b/packages/ui/tailwind.config.js
@@ -0,0 +1,2 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = require('./style/tailwind')('web');
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..8e080d5
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"extends": "../config/base.tsconfig.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "dist"
+	},
+	"include": ["src"]
+}