mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
claude[bot]andClaude
f0e0865acc
<!-- ccr-slack-attribution --> _Requested by **Charis Lam** · [Slack thread](https://supabase.slack.com/archives/C0161K73J1J/p1790599888647059?thread_ts=1790599888.647059&cid=C0161K73J1J)_ ## Problem The Studio ESLint "ratchet" (`apps/studio/scripts/ratchet-eslint-rules.ts`, baseline in `apps/studio/.github/eslint-rule-baselines.json`, tracked rules in `apps/studio/scripts/ratchet-rules.json`) lets certain rules stay at `warn` severity while CI blocks the *count* of violations from increasing. Several of those tracked rules had already reached a baseline of 0 allowed violations, meaning there's nothing left to ratchet — they should be enforced directly instead of tracked indirectly. ## Solution **Before:** `no-restricted-imports`, `jsx-a11y/aria-props`, `jsx-a11y/aria-proptypes`, `jsx-a11y/role-supports-aria-props`, `jsx-a11y/anchor-has-content`, `jsx-a11y/aria-role`, `jsx-a11y/no-aria-hidden-on-focusable`, `jsx-a11y/tabindex-no-positive`, `jsx-a11y/no-distracting-elements`, and `react-hook-form/no-use-watch` were all tracked in the ratchet baseline with a count of 0, and (apart from `no-restricted-imports`, see below) configured as ESLint `warn` in `apps/studio/eslint.config.cjs`. **After:** each of those rules is removed from `apps/studio/.github/eslint-rule-baselines.json` (both the `rules` count and the now-empty `ruleFiles` entry) and from `apps/studio/scripts/ratchet-rules.json`. Their severity in `apps/studio/eslint.config.cjs` is bumped from `warn` to `error` so they're enforced directly by lint going forward instead of being tracked via the ratchet. `no-restricted-imports` was a special case: a later config block in `apps/studio/eslint.config.cjs` already overrides the shared `warn` default with `error` (confirmed via `eslint --print-config`), so only the ratchet bookkeeping needed removing for that rule — no severity change was needed. Promoting `jsx-a11y/role-supports-aria-props` to `error` surfaced one real violation that the ratchet's non-test-file filter had been hiding: a mock `<button>` in `LocalDropdown.test.tsx` set `aria-checked`, which that role doesn't support. Removed the unused `aria-checked` attribute from the mock (it wasn't asserted on by any test). Every other rule still tracked by the ratchet (e.g. `@typescript-eslint/no-explicit-any`, `react-hooks/exhaustive-deps`, `no-restricted-exports`, …) has a baseline above 0 and was left untouched. ### How verified - `pnpm --filter studio run lint:ratchet` → `Stable: No regressions for selected rules.` - `pnpm --filter studio run lint` → `0 errors, 2430 warnings` (no new errors from the severity bumps) - `npx vitest run components/interfaces/LocalDropdown.test.tsx` → 3/3 passing after the mock fix - `npx prettier --check` on all touched files → clean - `npx tsc --noEmit` shows one pre-existing, unrelated error in `packages/ui-patterns` (reproduced identically on `master` before this change) ## Review instructions 1. Confirm `apps/studio/.github/eslint-rule-baselines.json` and `apps/studio/scripts/ratchet-rules.json` no longer list the 10 rules named above. 2. Confirm those same rules (except `no-restricted-imports`, already `error`) are now `'error'` in `apps/studio/eslint.config.cjs`. 3. Run `pnpm --filter studio run lint:ratchet` and `pnpm --filter studio run lint` locally to confirm both pass. ## Checklist Check all before review: - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) - [ ] 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) 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01LZThbcWV5U1r5cvUDKPVQP --- _Generated by [Claude Code](https://claude.ai/code/session_01LZThbcWV5U1r5cvUDKPVQP)_ Co-authored-by: Claude <noreply@anthropic.com>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}