From 7f77b521acb40601a2b6a0796d0cdcb843b5f7ab Mon Sep 17 00:00:00 2001 From: joshwanf <17016446+joshwanf@users.noreply.github.com> Date: Mon, 9 Feb 2026 13:43:12 -0500 Subject: [PATCH 01/10] Removed Boostrap and configured Tailwind --- builder-frontend/index.html | 6 - builder-frontend/package-lock.json | 645 +++++++++++++++--- builder-frontend/package.json | 2 +- .../src/components/shared/Button.module.css | 48 ++ .../src/components/shared/Button.tsx | 28 + builder-frontend/src/index.css | 19 +- builder-frontend/vite.config.js | 31 +- 7 files changed, 673 insertions(+), 106 deletions(-) create mode 100644 builder-frontend/src/components/shared/Button.module.css create mode 100644 builder-frontend/src/components/shared/Button.tsx diff --git a/builder-frontend/index.html b/builder-frontend/index.html index ae8453f2..431f0a60 100644 --- a/builder-frontend/index.html +++ b/builder-frontend/index.html @@ -4,12 +4,6 @@ - Benefit Decision Toolkit diff --git a/builder-frontend/package-lock.json b/builder-frontend/package-lock.json index e78fdaa2..f478cb20 100644 --- a/builder-frontend/package-lock.json +++ b/builder-frontend/package-lock.json @@ -22,7 +22,6 @@ "firebase": "^11.9.1", "lodash.debounce": "^4.0.8", "lucide-solid": "^1.7.0", - "solid-bootstrap": "^1.0.21", "solid-js": "^1.9.5", "solid-toast": "^0.5.0", "vanilla-jsoneditor": "^3.10.0" @@ -30,6 +29,7 @@ "devDependencies": { "@tailwindcss/forms": "^0.5.10", "@tailwindcss/postcss": "^4.1.8", + "@tailwindcss/vite": "^4.1.18", "@types/json-schema": "^7.0.15", "autoprefixer": "^10.4.21", "postcss": "^8.5.4", @@ -261,14 +261,6 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/@babel/runtime": { - "version": "7.27.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz", - "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==", - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@babel/template": { "version": "7.27.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", @@ -1819,9 +1811,10 @@ } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", - "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==" + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", @@ -2110,15 +2103,6 @@ "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.7.tgz", "integrity": "sha512-h+ducOLDMSxcuec3+YY3x+stM5ZUSnrl/lC/eVmjypil2El08NuE2MNEPMQWdhrod6VRRZFMNqZw/m82iv6U1A==" }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -2824,6 +2808,525 @@ "tailwindcss": "4.1.8" } }, + "node_modules/@tailwindcss/vite": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz", + "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@tailwindcss/node": "4.1.18", + "@tailwindcss/oxide": "4.1.18", + "tailwindcss": "4.1.18" + }, + "peerDependencies": { + "vite": "^5.2.0 || ^6 || ^7" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/node": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz", + "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.4", + "enhanced-resolve": "^5.18.3", + "jiti": "^2.6.1", + "lightningcss": "1.30.2", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.1.18" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz", + "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.1.18", + "@tailwindcss/oxide-darwin-arm64": "4.1.18", + "@tailwindcss/oxide-darwin-x64": "4.1.18", + "@tailwindcss/oxide-freebsd-x64": "4.1.18", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18", + "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18", + "@tailwindcss/oxide-linux-arm64-musl": "4.1.18", + "@tailwindcss/oxide-linux-x64-gnu": "4.1.18", + "@tailwindcss/oxide-linux-x64-musl": "4.1.18", + "@tailwindcss/oxide-wasm32-wasi": "4.1.18", + "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18", + "@tailwindcss/oxide-win32-x64-msvc": "4.1.18" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz", + "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz", + "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz", + "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz", + "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz", + "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz", + "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz", + "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz", + "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz", + "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz", + "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1", + "@emnapi/wasi-threads": "^1.1.0", + "@napi-rs/wasm-runtime": "^1.1.0", + "@tybys/wasm-util": "^0.10.1", + "tslib": "^2.4.0" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz", + "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz", + "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz", + "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.30.2", + "lightningcss-darwin-arm64": "1.30.2", + "lightningcss-darwin-x64": "1.30.2", + "lightningcss-freebsd-x64": "1.30.2", + "lightningcss-linux-arm-gnueabihf": "1.30.2", + "lightningcss-linux-arm64-gnu": "1.30.2", + "lightningcss-linux-arm64-musl": "1.30.2", + "lightningcss-linux-x64-gnu": "1.30.2", + "lightningcss-linux-x64-musl": "1.30.2", + "lightningcss-win32-arm64-msvc": "1.30.2", + "lightningcss-win32-x64-msvc": "1.30.2" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-darwin-arm64": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz", + "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-darwin-x64": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz", + "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-freebsd-x64": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz", + "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz", + "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz", + "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-linux-arm64-musl": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz", + "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-linux-x64-gnu": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz", + "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-linux-x64-musl": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz", + "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz", + "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/lightningcss-win32-x64-msvc": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz", + "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@tailwindcss/vite/node_modules/tailwindcss": { + "version": "4.1.18", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", + "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -3528,15 +4031,6 @@ "resolved": "https://registry.npmjs.org/min-dash/-/min-dash-3.8.1.tgz", "integrity": "sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==" }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } - }, "node_modules/dom-iterator": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.2.tgz", @@ -3592,13 +4086,14 @@ "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" }, "node_modules/enhanced-resolve": { - "version": "5.18.1", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz", - "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==", + "version": "5.19.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz", + "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==", "dev": true, + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", - "tapable": "^2.2.0" + "tapable": "^2.3.0" }, "engines": { "node": ">=10.13.0" @@ -4219,10 +4714,11 @@ } }, "node_modules/jiti": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz", - "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz", + "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", "dev": true, + "license": "MIT", "bin": { "jiti": "lib/jiti-cli.mjs" } @@ -4373,6 +4869,27 @@ "lightningcss-win32-x64-msvc": "1.30.1" } }, + "node_modules/lightningcss-android-arm64": { + "version": "1.30.2", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz", + "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/lightningcss-darwin-arm64": { "version": "1.30.1", "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz", @@ -4650,11 +5167,12 @@ } }, "node_modules/magic-string": { - "version": "0.30.17", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", - "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==", + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "license": "MIT", "dependencies": { - "@jridgewell/sourcemap-codec": "^1.5.0" + "@jridgewell/sourcemap-codec": "^1.5.5" } }, "node_modules/marked": { @@ -5606,32 +6124,6 @@ "url": "https://opencollective.com/sinon" } }, - "node_modules/solid-bootstrap": { - "version": "1.0.21", - "resolved": "https://registry.npmjs.org/solid-bootstrap/-/solid-bootstrap-1.0.21.tgz", - "integrity": "sha512-B1+1qsdqrdQhl4xgmgrFRafxOM3xrnafxrC1scbOTYYJI2ido1XfoxtYyJ72W1eSHxYjm8eRGXdGTGdBJsGPpg==", - "dependencies": { - "dom-helpers": "^5.2.0", - "solid-bootstrap-core": "^2.0.0", - "solid-react-transition": "^1.0.11" - }, - "peerDependencies": { - "solid-js": ">=1.6.0" - } - }, - "node_modules/solid-bootstrap-core": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/solid-bootstrap-core/-/solid-bootstrap-core-2.0.0.tgz", - "integrity": "sha512-tw1me1iEvI+UzYRL2Gs53MP51WVwx785CU+6KQVGhaLESw3OoayeFLhe1CvUYb7kuskjtNGyAorZMdMwBJQIBA==", - "dependencies": { - "@popperjs/core": "^2.10.1", - "dom-helpers": "^5.2.0", - "solid-react-transition": "^1.0.8" - }, - "peerDependencies": { - "solid-js": ">=1.6.0" - } - }, "node_modules/solid-dismissible": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/solid-dismissible/-/solid-dismissible-0.1.1.tgz", @@ -5690,14 +6182,6 @@ "solid-js": "^1.8" } }, - "node_modules/solid-react-transition": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/solid-react-transition/-/solid-react-transition-1.0.11.tgz", - "integrity": "sha512-YMT7z6sOupCicDtX19156vbVOm3vCIgjVhPTybR9gLKiIPrDB2NDVqnQk4kpNCDZTOwSjLTOyUQw0xJnXgDg2A==", - "peerDependencies": { - "solid-js": ">=1.6.0" - } - }, "node_modules/solid-refresh": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/solid-refresh/-/solid-refresh-0.6.3.tgz", @@ -5890,12 +6374,17 @@ "dev": true }, "node_modules/tapable": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz", - "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", + "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", "dev": true, + "license": "MIT", "engines": { "node": ">=6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" } }, "node_modules/tar": { diff --git a/builder-frontend/package.json b/builder-frontend/package.json index 0c257b86..b10649b7 100644 --- a/builder-frontend/package.json +++ b/builder-frontend/package.json @@ -23,7 +23,6 @@ "firebase": "^11.9.1", "lodash.debounce": "^4.0.8", "lucide-solid": "^1.7.0", - "solid-bootstrap": "^1.0.21", "solid-js": "^1.9.5", "solid-toast": "^0.5.0", "vanilla-jsoneditor": "^3.10.0" @@ -31,6 +30,7 @@ "devDependencies": { "@tailwindcss/forms": "^0.5.10", "@tailwindcss/postcss": "^4.1.8", + "@tailwindcss/vite": "^4.1.18", "@types/json-schema": "^7.0.15", "autoprefixer": "^10.4.21", "postcss": "^8.5.4", diff --git a/builder-frontend/src/components/shared/Button.module.css b/builder-frontend/src/components/shared/Button.module.css new file mode 100644 index 00000000..bbc4bc6e --- /dev/null +++ b/builder-frontend/src/components/shared/Button.module.css @@ -0,0 +1,48 @@ +@reference "tailwindcss"; + +.button { + @apply inline-flex py-1.5 px-4 rounded border-2 disabled:opacity-50; +} +.button:hover { + @apply cursor-pointer; +} + +.primary { + @apply border-(--brand) bg-(--brand) text-white; +} +.primary:not([disabled]):hover { + @apply brightness-110; +} +.outline-primary { + @apply border-(--brand) bg-white text-(--brand); +} +.outline-primary:not([disabled]):hover { + @apply border-(--brand)/70 bg-(--brand)/30; +} + +.secondary { + @apply border-(--text-strong) bg-(--text-strong) text-white; +} +.secondary:not([disabled]):hover { + @apply brightness-130; +} +.outline-secondary { + @apply border-(--text-strong) bg-white text-(--text-strong); +} +.outline-secondary:not([disabled]):hover { + @apply border-(--text-strong)/70 bg-(--text-strong)/30; +} + +.tertiary { + @apply border-(--text-strong) bg-(--text-strong) text-white; +} + +.danger { + @apply border-red-400 bg-red-400 text-white; +} +.outline-danger { + @apply border-red-400 bg-white text-red-400; +} +.outline-danger:not([disabled]):hover { + @apply bg-red-100; +} diff --git a/builder-frontend/src/components/shared/Button.tsx b/builder-frontend/src/components/shared/Button.tsx new file mode 100644 index 00000000..654f1a87 --- /dev/null +++ b/builder-frontend/src/components/shared/Button.tsx @@ -0,0 +1,28 @@ +import { Component, JSX, ParentProps } from "solid-js"; + +import styles from "./Button.module.css"; + +interface Props extends JSX.ButtonHTMLAttributes { + variant?: + | "primary" + | "secondary" + | "tertiary" + | "danger" + | "outline-primary" + | "outline-secondary" + | "outline-tertiary" + | "outline-danger"; +} + +export const Button: Component> = (props) => { + const { type, variant, children, ...rest } = props; + return ( + + ); +}; diff --git a/builder-frontend/src/index.css b/builder-frontend/src/index.css index 677d6e36..582fd48f 100644 --- a/builder-frontend/src/index.css +++ b/builder-frontend/src/index.css @@ -3,15 +3,22 @@ strategy: "class"; /* only generate form-* classes */ } +:root { + --brand: #0daf00; + --text-strong: #2d2d2d; + --text-weak: #6d6d6d; + --bg-green: #f5fef6; + --bg-yellow: #fff1c2; + --bg-red: #fff6f5; +} + body { - @apply - text-gray-800 + @apply text-gray-800; } @layer components { .btn-default { - @apply - inline-block px-5 py-1 - cursor-pointer select-none !rounded-md text-sm font-semibold + @apply inline-block px-5 py-1 + cursor-pointer select-none !rounded-md text-sm font-semibold; } .btn-default.btn-gray { @apply border-gray-300 border-2 bg-white hover:bg-gray-200 text-gray-800; @@ -24,7 +31,7 @@ body { @apply bg-yellow-700 hover:bg-yellow-800 text-white; } .btn-default.btn-blue { - @apply bg-sky-600 hover:bg-sky-700 text-white + @apply bg-sky-600 hover:bg-sky-700 text-white; } .eligibility-check-table-header { diff --git a/builder-frontend/vite.config.js b/builder-frontend/vite.config.js index 1abff710..726e585c 100644 --- a/builder-frontend/vite.config.js +++ b/builder-frontend/vite.config.js @@ -1,34 +1,35 @@ import { defineConfig } from "vite"; import solid from "vite-plugin-solid"; -import tsconfigPaths from 'vite-tsconfig-paths' +import tsconfigPaths from "vite-tsconfig-paths"; +import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ - plugins: [solid(), tsconfigPaths()], + plugins: [tailwindcss(), solid(), tsconfigPaths()], server: { port: process.env.DEV_SERVER_PORT || 5173, proxy: { - '/identitytoolkit.googleapis.com': { - target: 'http://localhost:9099', + "/identitytoolkit.googleapis.com": { + target: "http://localhost:9099", }, - '/securetoken.googleapis.com': { - target: 'http://localhost:9099', + "/securetoken.googleapis.com": { + target: "http://localhost:9099", }, - '/emulator': { - target: 'http://localhost:9099', + "/emulator": { + target: "http://localhost:9099", }, - '/__/auth': { - target: 'http://localhost:9099', + "/__/auth": { + target: "http://localhost:9099", }, - '/api': { - target: 'http://localhost:8081', + "/api": { + target: "http://localhost:8081", }, }, }, optimizeDeps: { // Ensure Preact is not pre-bundled separately, avoiding duplicate instances - include: ['preact', 'preact/hooks', 'preact/compat'] + include: ["preact", "preact/hooks", "preact/compat"], }, resolve: { - dedupe: ['preact', 'preact/hooks', 'preact/compat'] - } + dedupe: ["preact", "preact/hooks", "preact/compat"], + }, }); From d98c1d9ec76d9da9bcce5e9a802251d1ed8dbfc3 Mon Sep 17 00:00:00 2001 From: joshwanf <17016446+joshwanf@users.noreply.github.com> Date: Mon, 9 Feb 2026 16:16:30 -0500 Subject: [PATCH 02/10] Added basic components used in UI --- builder-frontend/src/App.tsx | 31 ++++-- .../src/components/shared/Button.tsx | 4 +- .../components/shared/ComponentLibrary.css | 12 +++ .../components/shared/ComponentLibrary.tsx | 101 ++++++++++++++++++ .../src/components/shared/Form.module.css | 41 +++++++ .../src/components/shared/Form.tsx | 98 +++++++++++++++++ .../src/components/shared/Modal.module.css | 28 +++++ .../src/components/shared/Modal.tsx | 36 +++++++ 8 files changed, 340 insertions(+), 11 deletions(-) create mode 100644 builder-frontend/src/components/shared/ComponentLibrary.css create mode 100644 builder-frontend/src/components/shared/ComponentLibrary.tsx create mode 100644 builder-frontend/src/components/shared/Form.module.css create mode 100644 builder-frontend/src/components/shared/Form.tsx create mode 100644 builder-frontend/src/components/shared/Modal.module.css create mode 100644 builder-frontend/src/components/shared/Modal.tsx diff --git a/builder-frontend/src/App.tsx b/builder-frontend/src/App.tsx index 0e06f32a..7def23b2 100644 --- a/builder-frontend/src/App.tsx +++ b/builder-frontend/src/App.tsx @@ -8,15 +8,15 @@ import EligibilityCheckDetail from "./components/homeScreen/eligibilityCheckList import Screener from "./components/screener/Screener"; import Loading from "./components/Loading"; import { Match, Switch } from "solid-js"; - +import { ComponentLibrary } from "@/components/shared/ComponentLibrary"; const ProtectedRoute = (props) => { const { user, isAuthLoading } = useAuth(); - + const userThing = () => { - console.log(user()) + console.log(user()); return user(); - } + }; // If user is logged in, render the requested component, otherwise redirect to login return ( @@ -37,13 +37,26 @@ const ProtectedRoute = (props) => { function App() { return ( <> + - } /> - } /> - } /> - -
404 - Page Not Found
} /> + } + /> + } + /> + } + /> + +
404 - Page Not Found
} + /> ); } diff --git a/builder-frontend/src/components/shared/Button.tsx b/builder-frontend/src/components/shared/Button.tsx index 654f1a87..e7324c44 100644 --- a/builder-frontend/src/components/shared/Button.tsx +++ b/builder-frontend/src/components/shared/Button.tsx @@ -15,11 +15,11 @@ interface Props extends JSX.ButtonHTMLAttributes { } export const Button: Component> = (props) => { - const { type, variant, children, ...rest } = props; + const { type, children, ...rest } = props; return ( + +
+ + + + +
+
+ + + + +
+
+

+ Form with placeholder text that moves above text input when focused or + has value. +

+
+ + + + + + + + + + +
+
+
+ +
+ + ); +}; + +const ModalForm = () => { + const [showModal, setShowModal] = createSignal(false); + const handleSubmitForm: JSX.EventHandler = ( + e, + ) => { + e.preventDefault(); + alert("Submitted the form from the modal!"); + setShowModal(false); + }; + return ( + <> + + setShowModal(false)}> +

Enter the required information in the form

+
+ + + + + +
+ + + ); +}; diff --git a/builder-frontend/src/components/shared/Form.module.css b/builder-frontend/src/components/shared/Form.module.css new file mode 100644 index 00000000..3041a889 --- /dev/null +++ b/builder-frontend/src/components/shared/Form.module.css @@ -0,0 +1,41 @@ +@reference "tailwindcss"; + +.textfield { + @apply relative; +} +.textfield .textfield-input, +.textfield-above .textfield-input { + @apply border-2 border-slate-400 rounded-sm; +} +.textfield:hover .textfield-input, +.textfield-above:hover .textfield-input { + @apply border-slate-500; +} +.textfield-above .textfield-input:disabled { + @apply bg-slate-200 border-slate-300; +} +.textfield-above:has(.textfield-input:disabled) > .textfield-label { + @apply text-slate-400; +} +.textfield-above { + @apply relative; + flex-direction: column; + margin-bottom: 1rem; +} +.textfield-label { + @apply py-2; +} +.textfield-above > .textfield-label { + @apply absolute top-0 left-0 p-4 text-slate-500 pointer-events-none; +} +.textfield-above:has(.textfield-input:focus) { + @apply border-slate-800; +} +.textfield-above > .textfield-input:focus ~ .textfield-label, +.textfield-above > .textfield-input:not(:placeholder-shown) ~ .textfield-label { + transform: scale(0.8) translateY(-1.5rem); + transform-origin: 1rem; +} +.textfield-input { + @apply w-full p-4 focus:outline-0 text-(--text-strong); +} diff --git a/builder-frontend/src/components/shared/Form.tsx b/builder-frontend/src/components/shared/Form.tsx new file mode 100644 index 00000000..30e542ed --- /dev/null +++ b/builder-frontend/src/components/shared/Form.tsx @@ -0,0 +1,98 @@ +import { + Component, + createContext, + createSignal, + JSX, + splitProps, + useContext, +} from "solid-js"; + +import styles from "./Form.module.css"; + +interface FormProps extends JSX.FormHTMLAttributes {} +interface FormWrapperProps extends JSX.HTMLAttributes { + htmlFor: string; +} +interface LabelWrapperProps extends JSX.HTMLAttributes { + htmlFor: string; + placeholder: string; +} +interface TextInputProps extends JSX.InputHTMLAttributes { + value?: string; + placeholder?: string; +} +interface LabelProps extends JSX.LabelHTMLAttributes {} + +const mergeClasses = (...classes: (string | undefined)[]): string => { + return classes.filter((c) => c !== undefined && c.length > 0).join(" "); +}; +const FormContext = createContext<{ htmlFor?: string }>({}); + +const TextInput = (props: TextInputProps) => { + const [value, setValue] = createSignal(props.value || ""); + const [local, rest] = splitProps(props, ["class", "placeholder"]); + const ctx = useContext(FormContext); + const showPlaceholder = + value().length < 1 && (local.placeholder || "").length > 0; + + return ( + setValue(e.target.value)} + placeholder={showPlaceholder ? local.placeholder : ""} + {...rest} + /> + ); +}; +const Label = (props: LabelProps) => { + const [local, rest] = splitProps(props, ["class"]); + const ctx = useContext(FormContext); + + return ( +