Commit Graph
5 Commits
Author SHA1 Message Date
Anthony Lio b13d6c2878 feat(chore): add a lint ratchet for shadcn rules (#51014)
## Problem

shadcn lint rules has been soft landed in #50676 and are now on as
warnings in every app, but nothing stops a PR from adding new violations

linear: FE-4473

## Solution

- moved the ratchet script and its tests from `apps/studio/scripts` to
`packages/eslint-config-supabase` so every app runs one copy
- added a shared rule list,
`packages/eslint-config-supabase/ratchet-rules.json` with the shadcn
rules
- www, docs, design-system, ui-library and learn get `lint-ratchet.yml`
with one job per changed app (triggered by the app, `packages/**` or the
lockfile) + a weekly `lint-ratchet-decrease.yml` (as for studio ratchet)
- package tests run in `eslint-config-supabase-tests.yml`

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. run `pnpm --filter ./apps/www run lint:ratchet`
2. add `p-[13px]` to a `className` in any www component and run it
again. it fails with `shadcn/no-arbitrary-values` and the file name with
`(+1)`
3. revert change
4. run `pnpm --filter eslint-config-supabase test` and see 6 tests pass
5. in ci, check `Ratchet studio lint checks` and the `ratchet (<app>)`
jobs for the apps this pr touches

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Developer Improvements**
* Expanded automated lint checks to cover additional apps and shared
package changes.
* Added checks for arbitrary Tailwind values, unknown classes, and raw
colors across supported apps.
* Added automated baseline updates that can open or update a pull
request when lint counts change.
* Added tests for the lint configuration and support for combining
multiple rule files.
* Updated Studio lint notifications to exclude Shadcn rules with
zero-baseline counts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-10-02 14:13:59 +03:00
Alaister YoungandAlaister Young 3bac7165bd chore(studio): move the TanStack Start deploy onto Nitro (#50030)
Moves the Studio TanStack Start build off the hand-rolled Vercel setup
(an `api/server.js` function shim, rewrites in `vercel.ts`, a custom
`?dpl=` skew-protection Vite plugin, and `scripts/serve.js` for
self-hosted) and onto Nitro, which TanStack Start documents as its
deployment path. Documents are served from the static SPA shell on the
CDN; only `/api/*` and `/_serverFn/*` invoke the function.

**Removed:**
- `api/server.js`, `scripts/serve.js`, `scripts/smoke-server.mjs`
- The `skewProtectionDpl` Vite plugin, `renderBuiltUrl`, and the
`vite:preloadError` reload backstop in `router.tsx` (TanStack Router
already reloads once on a failed lazy import)
- Rewrites, `functions`, `outputDirectory`, and `cleanUrls` from
`vercel.ts` (redirects and headers stay)
- `magic-string` and `@jridgewell/remapping` devDependencies, the
`preview` script

**Added:**
- `nitro` plugin in `vite.config.ts`. Preset is auto-detected:
`.vercel/output` on Vercel, a self-contained node server in `.output`
everywhere else. `vercel.immutableStaticFiles` puts hashed chunks under
`/_vercel/immutable/` so tabs opened before a redeploy keep loading
their chunks; `functions.maxDuration: 300` carries over the old function
timeout
- `scripts/vercel-spa-routes.ts`: Nitro module that rewrites the
generated Build Output routes (documents -> `_shell.html`, allow-list ->
`__server`, missing chunk -> 404, base-path prefixes), with a unit test
- `server.ts`: TanStack Start server entry that initializes Sentry
before the route tree loads and wraps the handler with
`wrapFetchWithSentry`

**Changed:**
- `start:tanstack` runs `.output/server/index.mjs` directly with Node's
`--env-file-if-exists` for the `.env` cascade. Node doesn't expand
`$VAR` references, so `scripts/generateLocalEnv.js` now writes literal
values into `.env.test`
- Dockerfile's TanStack stage copies `.output` instead of running `pnpm
deploy`; the `server.js` shim loads `.env` and imports the Nitro server
- `NEXT_PUBLIC_BASE_PATH` (the platform's `/dashboard`) only sets the
router basepath; Vite's `base` stays at the root so chunks can use the
immutable store. The routes module emits prefixed rules for
`/dashboard/api/*` and `/dashboard/_serverFn/*` and rewrites `public/`
files requested under the prefix back to the root
- Self-hosted security headers come from a Nitro `routeRules` entry; on
Vercel they stay in `vercel.ts`
- `tslib` is inlined for the build only: Nitro's dev runner has no
interop for its CJS wrapper
- Monaco's worker chunks follow the client assets dir so they land in
the immutable store too

Verified on the `studio-staging` preview (`STUDIO_FRAMEWORK=tanstack` is
scoped to this branch there): documents come back as the static shell,
`/dashboard/api/*` hits the function, `public/` files resolve under the
prefix, a missing immutable chunk 404s. Across two deployments of this
branch, the older deployment's chunks still load from the immutable
store and requests carrying its `__vdpl` cookie are answered by that
deployment. Self-hosted path covered by the TanStack E2E job and the
Docker build job.

## To test

- On the `studio-staging` preview: `/dashboard/project/<ref>` should
show `content-disposition: inline; filename="_shell.html"` and a
single-region `x-vercel-id`; `/dashboard/api/get-utc-time` a two-region
id
- Sign in and click through a few pages, including one that opens Monaco
(SQL editor) so the worker chunks load
- After the next deploy, a tab left open on the previous one should
still navigate (lazy chunks) and call the API without errors
- Self-hosted: `STUDIO_FRAMEWORK=tanstack pnpm --filter studio build &&
pnpm --filter studio start`, then check `/api/platform/profile` and that
responses carry the security headers


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Production TanStack deployments now run on Nitro’s self-contained
server output.
* Vercel routing serves static pages first while directing API and
server-function requests appropriately.
* Server-function requests can include deployment identification for
consistent handling.
* Local environment generation now writes resolved configuration values.

* **Bug Fixes**
  * Improved handling of missing static assets and SPA fallback routing.
* Server-side error monitoring now captures request errors in the new
runtime.

* **Refactor**
* Replaced the legacy production server and smoke-test workflow with
Nitro-based startup.
  * Removed automatic reload handling for stale client assets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-09-15 21:46:45 +10:00
Ali Waseem 61078d2617 chore(studio): add jsx-a11y ESLint ratchet rules for statically-detectable a11y issues (#47582)
## Summary
- Follow-up to the axe-core accessibility audit (FE-3781), which found
1,733 failing elements across 126 Studio surfaces deduplicating to 12
root-cause families. A subset of those (missing accessible names/labels,
invalid/redundant ARIA, empty headings/anchors) is statically detectable
— this adds ESLint coverage for it instead of relying solely on the
runtime axe-core CI gate.
- Adds 13 `jsx-a11y` rules to `apps/studio/eslint.config.cjs` at
`'warn'`: `aria-props`, `aria-proptypes`, `role-supports-aria-props`,
`anchor-has-content`, `control-has-associated-label`
(`controlComponents: ['Button', 'Switch']`),
`label-has-associated-control` (`labelComponents: ['Label']`,
`controlComponents: ['Input', 'Switch']`), `aria-role`,
`no-redundant-roles`, `no-aria-hidden-on-focusable`,
`tabindex-no-positive`, `anchor-is-valid`, `heading-has-content`,
`no-distracting-elements`.
- Wires all 13 into the existing `lint:ratchet` script and initializes
their baselines in `apps/studio/.github/eslint-rule-baselines.json`, so
any *new* violation fails `studio-lint-ratchet.yml` while the
pre-existing ones (mostly `control-has-associated-label`: 274,
`label-has-associated-control`: 37) are tracked and shrink over time via
the weekly baseline-decrease cron.

Resolves
[FE-3795](https://linear.app/supabase/issue/FE-3795/add-jsx-a11y-eslint-ratchet-rules-for-statically-detectable-a11y).

## Test plan
- [x] `pnpm --filter studio run lint:ratchet` passes (exit 0, no
regressions)
- [x] Spot-checked several flagged instances against source to confirm
true positives (e.g. an unlabeled save/cancel icon-button pair in
`AIAssistantChatSelector.tsx`, an empty `<h3>` in `PITRForm.tsx`)
- [x] CI (`studio-lint-ratchet.yml`, typecheck.yml lint step) green on
this PR

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Expanded Studio’s accessibility linting to cover additional ARIA prop
validation, label/control relationships, anchor/heading validity,
role/ARIA correctness, and focus/tab behavior (including distracting
markup).
* Updated accessibility lint baselines so tracked violations remain
accurate as rules expand.
* **New Features**
* Enhanced the Studio lint “ratchet” workflow to load ratchet rule IDs
from an external `rules-file` instead of a long inline command.
* **Tests**
* Added an integration test to verify rule IDs are read from the
`rules-file`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-03 20:33:12 +00:00
Charis 205cbe7d26 chore(studio}: enforce import order, remove bare import specifiers (#44585) 2026-04-07 20:34:10 -04:00
Charis 319c8897f9 ci(ratchet): include filename in error message (#40387)
Record per-file error counts so error message can include regressed
filenames. Useful for tracking down regression in large PRs.
2025-11-12 10:52:09 -05:00