UIL4B
UIL4B is a browser-based toolkit for building user-interface foundations:
colour palettes and tint scales, contrast checks, gradients, font pairing, type
scales, icons, image conversion and design-system export. It is a React
single-page application served from Vercel, with serverless functions in
api/ and Firebase for accounts and storage. The live site is
uil4b.com.
Requirements
- Node.js 22 and npm
- For the security-rules tests: the Firebase CLI (installed as a dev dependency)
and a Java runtime (JDK 21) for the emulator
Setup
npm install
cp .env.example .env.local # then fill in the values you need
The variable names the app and the functions read are listed in
.env.example. The client falls back to built-in public Firebase settings, so
the front end runs locally without any of them; server functions that call
third-party services need their keys.
Run
npm run dev # development server on http://localhost:5173
npm run build # production build to dist/, then prerendered route shells
npm run preview # serve the production build
npm run build runs vite build followed by scripts/prerender.mjs, and
prints prerender: wrote N route shells + a noindex 404 shell when it
finishes. Several unit tests read the prerendered shells, so use it rather than
a bare vite build.
Test
npm run lint # ESLint
npm run test:unit # unit tests (node --test, tests/unit/)
npm run test:rules # Firestore and Storage rules tests against the emulator (tests/rules/)
npm run test:users # Playwright acceptance suite (tests/user-sim/); builds in test mode first
Layout
api/ Vercel serverless functions
api/_lib/ shared server helpers
src/ application source (src/App.jsx holds the routes, src/main.jsx the entry point)
src/locales/ translation files
src/styles/ global stylesheet
public/ static assets, fonts and icon data
scripts/ build and maintenance scripts
tests/ unit, rules and acceptance tests
firestore.rules Firestore security rules
storage.rules Cloud Storage security rules
Key files: src/App.jsx, src/main.jsx, src/styles/global.css,
api/_lib/, scripts/prerender.mjs, tests/unit/, tests/rules/,
tests/user-sim/, public/fonts/, public/icons-data.js.
Licence
Proprietary, source-available. The code is published to be read; it is not open
source. See LICENSE for what is and is not permitted.
Third-party components keep their own licences and are not covered by that
notice, including the icon packs in public/icons-data.js, the fonts in
public/fonts/ and the dependencies in package.json.
Credits
The full list of third-party components, with each one's licence and author, is
published at uil4b.com/credits.
