Skip to content

chore: form patterns cursor rules#41225

Merged
fsansalvadore merged 9 commits into
masterfrom
chore/form-patterns-cursor-rules
Dec 11, 2025
Merged

chore: form patterns cursor rules#41225
fsansalvadore merged 9 commits into
masterfrom
chore/form-patterns-cursor-rules

Conversation

@fsansalvadore

@fsansalvadore fsansalvadore commented Dec 10, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor
  • Add cursor rules to instruct llms on how to build consistent forms in supabase.
  • Integrate flex-row-reverse column width styling into FormLayout
  • fix some forms with evident visual bugs due to the new FormLayout styling

Summary by CodeRabbit

  • Documentation

    • Reworked form guidance into a pattern-based reference covering core principles, page layouts, and side-panel forms with concrete examples and primitives
    • Expanded common field type examples, external form submission, and form state behaviors (dirty/cancel/disabled submit) plus mutation/feedback guidance

  • UI/Layout

    • Unified card/content wrapping and refined responsive spacing for more consistent presentation
    • Simplified separators and streamlined input/toggle markup and alignment across forms

✏️ Tip: You can customize this high-level summary in your review settings.

@vercel

vercel Bot commented Dec 10, 2025 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
studio-self-hosted Ready Ready Preview Comment Dec 11, 2025 5:11pm
studio-staging Ready Ready Preview Comment Dec 11, 2025 5:11pm
zone-www-dot-com Error Error Dec 11, 2025 5:11pm
5 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
studio Ignored Ignored Dec 11, 2025 5:11pm
cms Skipped Skipped Dec 11, 2025 5:11pm
design-system Skipped Skipped Dec 11, 2025 5:11pm
docs Skipped Skipped Dec 11, 2025 5:11pm
ui-library Skipped Skipped Dec 11, 2025 5:11pm

@supabase

supabase Bot commented Dec 10, 2025

Copy link
Copy Markdown

This pull request has been ignored for the connected project xguihxuzqibwxjnimxev because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@github-actions

github-actions Bot commented Dec 10, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

🎭 Playwright Test Results

passed  65 passed
skipped  4 skipped

Details

stats  69 tests across 11 suites
duration  9 minutes, 24 seconds
commit  c6e8fd3

Skipped tests

Features › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected
Features › sql-editor.spec.ts › SQL Editor › share with team works as expected
Features › sql-editor.spec.ts › SQL Editor › folders works as expected
Features › sql-editor.spec.ts › SQL Editor › other SQL snippets actions work as expected

@blacksmith-sh

This comment has been minimized.

Sign in to view
dnywh
dnywh approved these changes Dec 11, 2025
View reviewed changes

@dnywh dnywh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested design system and settings/api. Not sure how the composition still works with the removal of className="[&>div]:md:w-1/2" but it looks good!

@coderabbitai

coderabbitai Bot commented Dec 11, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

Walkthrough

Restructures form documentation into pattern-driven guidance (Core Principles, Layout Selection, Page Layout, Side Panel), updates examples to use CardContent and Sheet primitives, tightens responsive sizing in FormLayout for flex-row-reverse, and applies minor DOM/styling adjustments in several organization and example forms without changing runtime logic.

Changes

Cohort / File(s) Summary
Documentation & Rules
/.cursor/rules/studio-ui.mdc		 Replaced prior Form guidance with pattern-based docs: Core Principles, Layout Selection, Page Layout and Side Panel examples (including formId external submit), Common Form Field Types, Card/Sheet form structure, dirty-state cancel/disabled submit behavior, and revised React Query mutation wording.
Design System Example
apps/design-system/registry/default/example/form-patterns-pagelayout.tsx		 Removed separators and per-field half-width constraints, wrapped field groups in CardContent, simplified spacing, right-aligned action-area containers, and removed an outer space-y-4 on the form while preserving submission logic.
UI Pattern Layout
packages/ui-patterns/src/form/Layout/FormLayout.tsx		 Adjusted FlexContainer compoundVariant for layout: 'flex-row-reverse' to add responsive width and min-width classes (md:w-1/2, xl:w-2/5, md:min-w-100) and a child selector forcing md:w-full, changing sizing constraints.
Organization forms (styling/DOM tweaks)
apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx, apps/studio/components/interfaces/Organization/SecuritySettings.tsx		 Removed input width classNames and simplified DOM around a Switch (removed extra wrapper inside TooltipTrigger); behavior, props, and submission logic unchanged.
Auth forms (presentation tweaks)
apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx, apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx		 Removed a width utility from an input and changed one row’s alignment to right-justify action/badge elements; only visual/layout changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

  • Focus areas:
    • Cross-breakpoint visual/UX validation for FormLayout.tsx responsive sizing.
    • Verify form-patterns-pagelayout.tsx CardContent grouping, action alignment, and spacing render as intended.
    • Confirm studio-ui.mdc examples match actual component imports/props and that formId external submit flows are accurate.

Possibly related PRs

Suggested labels

documentation

Suggested reviewers

  • joshenlim
  • kemaldotearth
  • MildTomato

Poem

🐇 I hopped through docs and patterns bright,
Card and Sheet tucked in cozy light,
Fields aligned with gentle care,
A submit button waits right there,
Small paws tidy every line.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check ⚠️ Warning The PR description is incomplete and does not follow the required template structure with sections for current behavior, new behavior, and additional context. Please use the required template with sections: 'What kind of change', 'What is the current behavior', 'What is the new behavior', and 'Additional context' with relevant issue links and screenshots.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: adding cursor rules for form patterns and updating form layout styling.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore/form-patterns-cursor-rules

Comment @coderabbitai help to get the list of available commands and usage tips.

@fsansalvadore fsansalvadore requested a review from a team as a code owner December 11, 2025 16:14
coderabbitai[bot]
coderabbitai Bot reviewed Dec 11, 2025
View reviewed changes

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx (1)

313-313: LGTM! Right-alignment applied correctly.

The addition of justify-end properly aligns the Badge and Button to the right, consistent with the form's layout pattern.

Optional observation: This field displays read-only status (via Badge) and navigates elsewhere for configuration, rather than offering inline editing like the other form fields. While this is likely intentional (the setting is managed in the email provider settings), consider whether a distinct presentation pattern might make this clearer to users—e.g., an informational row outside the editable form sections.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a8004ad and c6e8fd3.

📒 Files selected for processing (2)
  • apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx (0 hunks)
  • apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx (1 hunks)
💤 Files with no reviewable changes (1)
  • apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings 
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use _Shadcn_ form primitives (Form_Shadcn_, FormField_Shadcn_, FormControl_Shadcn_) and prefer FormItemLayout with layout='flex-row-reverse' for form controls

Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Wrap forms in a Card component unless specified otherwise

Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use PageLayout component for new page structures with props: children, title, subtitle, icon, breadcrumbs, primaryActions, secondaryActions, navigationItems, className, size, isCompact

Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use CardContent for card sections, CardFooter for actions, and CardHeader/CardTitle only when card content is not described by surrounding content or when using multiple Cards to group related pieces
📚 Learning: 2025-12-11T02:40:11.135Z 
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use _Shadcn_ form primitives (Form_Shadcn_, FormField_Shadcn_, FormControl_Shadcn_) and prefer FormItemLayout with layout='flex-row-reverse' for form controls

Applied to files:

  • apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
📚 Learning: 2025-12-11T02:40:11.135Z 
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Place table-associated actions on the right-hand side above the table

Applied to files:

  • apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
📚 Learning: 2025-12-11T02:40:11.135Z 
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use related layout components (e.g., AuthLayout) when a page is within an existing section

Applied to files:

  • apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
📚 Learning: 2025-12-11T02:40:11.135Z 
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Wrap forms in a Card component unless specified otherwise

Applied to files:

  • apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
📚 Learning: 2025-12-11T02:40:11.135Z 
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use ScaffoldContainer for center-aligned container content

Applied to files:

  • apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: test
  • GitHub Check: typecheck
  • GitHub Check: test (1)

kemaldotearth
kemaldotearth approved these changes Dec 11, 2025
View reviewed changes

@kemaldotearth kemaldotearth left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@fsansalvadore fsansalvadore merged commit 754af51 into master Dec 11, 2025
27 of 28 checks passed
@fsansalvadore fsansalvadore deleted the chore/form-patterns-cursor-rules branch December 11, 2025 17:03
This was referenced Dec 11, 2025
Merged
Merged
Merged
Merged
Merged
Merged
Merged
@sagarsrc sagarsrc mentioned this pull request Jan 8, 2026
Merged
@coderabbitai coderabbitai Bot mentioned this pull request Feb 2, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments
@kemaldotearth kemaldotearth kemaldotearth approved these changes
@dnywh dnywh dnywh approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@fsansalvadore @kemaldotearth @dnywh