diff --git a/.agents/skills/api-types/SKILL.md b/.agents/skills/api-types/SKILL.md new file mode 100644 index 00000000000..3d206497a2c --- /dev/null +++ b/.agents/skills/api-types/SKILL.md @@ -0,0 +1,27 @@ +--- +name: api-types +description: Maintain Supabase API types. Use when changing generated API type declarations, OpenAPI schemas, or investigating API type deployment drift. +--- + +# API types + +The generated API contract has three specs: API v1, API v2, and Platform. Their committed outputs are `packages/api-types/types/api-v1.d.ts`, `packages/api-types/types/api-v2.d.ts`, and `packages/api-types/types/platform.d.ts`. + +## Update types + +1. Make the API/schema change and ensure it is deployed to production before relying on a type PR. Production is the merge-gate source of truth. +2. Run `pnpm api:codegen` against a running local API environment. It fetches all three local OpenAPI specs and updates the committed files. +3. Inspect and commit only the intended generated type changes. +4. Run `pnpm api:verify-types`. It fetches the three production OpenAPI specs, regenerates types with the repository tooling, and compares them with the committed files. + +Complete the update only when `pnpm api:verify-types` passes after the production deployment is available. + +## Interpret verification + +- A pass means the committed generated declarations match all three production specs at the time of the check. +- A mismatch means production and the committed files differ. If the API is not deployed, deploy it and rerun the check. If production is correct, regenerate and review the changed files. +- A fetch failure means the production schema endpoint could not be read; fix or retry the endpoint before treating the result as a type mismatch. + +## Pull requests + +The `Verify production API types` CI job runs when `packages/api-types/types/**` changes and performs the same production comparison. It is currently observational, not a required merge check. The `api-deploy-required` label is informational only. Still run the local verifier before requesting review and treat a failed CI verification as production drift that must be resolved. diff --git a/.agents/skills/edit-the-docs/SKILL.md b/.agents/skills/edit-the-docs/SKILL.md index 24f33ca07c4..0eb6f0109ee 100644 --- a/.agents/skills/edit-the-docs/SKILL.md +++ b/.agents/skills/edit-the-docs/SKILL.md @@ -2,73 +2,220 @@ name: edit-the-docs description: >- Restructure, reorder, and improve existing Supabase docs pages under - apps/docs — clarity, connective text, section grouping, and brevity. - Use when asked to edit, reorganize, restructure, tighten prose, or add - glue between sections on a page that already exists. Not for net-new - feature drafts (use write-the-docs) or PR triage/verification (use - review-the-docs). + apps/docs: clarity, connective text, section grouping, and brevity. + Use when asked to edit, reorganize, restructure, tighten prose, add glue + between sections, or split a page edit into stacked PRs. Not for net-new + feature drafts, which belong to write-the-docs, and not for PR triage or + verification, which belong to review-the-docs. --- # Edit the docs -Improves **existing** Supabase docs pages: structure, order, connective text, -and clarity. Distinct from [`write-the-docs`](../write-the-docs/SKILL.md) -(draft net-new or product-grounded rewrites from intent + code) and -[`review-the-docs`](../review-the-docs/SKILL.md) (lint, build, PR triage). +Improves **existing** Supabase docs pages: structure, order, connective text, and clarity. + +**Not this skill:** [`write-the-docs`](../write-the-docs/SKILL.md) drafts net-new content or product-grounded rewrites from intent and code. [`review-the-docs`](../review-the-docs/SKILL.md) covers lint, build, and PR triage. + +**Output is one pull request, with one change type per commit.** A reviewer reads the style diff apart from the structure diff without holding several PRs in their head. Split into a stack of PRs only when the requester asks for one, or approves the split you offer because the diff turned out large. Phase 0 covers when to raise it, and [reference/stacked-prs.md](reference/stacked-prs.md) covers the mechanics. ## Core rules -1. **Read before you rewrite.** Open the target page and nearby pages of the same type. Name the reader's goal and the page type (explainer, guide, tutorial, troubleshooting) before moving sections. -2. **Improve structure and clarity; don't invent product truth.** Preserve behavior claims, UI labels, and positioning unless you verify a change against code or product intent. Accuracy gaps or missing net-new content belong with [`write-the-docs`](../write-the-docs/SKILL.md) / [`pm-the-docs`](../pm-the-docs/SKILL.md), not silent invention here. +1. **Read before you rewrite.** Open the target page and nearby pages of the same type. Name the reader's goal and the page type before moving sections. +2. **Don't invent product truth. Verify it, in its own PR.** Style and structure work preserves behavior claims, UI labels, and positioning as written. Correcting a claim is PR 3 work, and adding one belongs to the additions branches above it. Those PRs follow [`write-the-docs`](../write-the-docs/SKILL.md) grounding rules: read the code, separate shipped behavior from product intent, and flag what you inferred. 3. **Follow CONTRIBUTING.md and WORD_LIST.md** for voice, terminology, and formatting. See [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md) and [`apps/docs/WORD_LIST.md`](../../../apps/docs/WORD_LIST.md). -4. **Prefer brevity.** Prefer broad strokes when mechanical detail doesn't help the reader's task. Cut redundancy; don't over-explain. -5. **Reuse sibling skills.** IA/architecture via [`ask-the-docs`](../ask-the-docs/SKILL.md); validation and self-review via [`review-the-docs`](../review-the-docs/SKILL.md). Shared pitfalls live in [`write-the-docs/reference/common-pitfalls.md`](../write-the-docs/reference/common-pitfalls.md) — apply them, don't duplicate them. +4. **Prefer brevity.** Use broad strokes when mechanical detail doesn't help the reader's task. Cut redundancy. Don't over-explain. +5. **Reuse sibling skills.** Get IA and architecture from [`ask-the-docs`](../ask-the-docs/SKILL.md). Get validation and self-review from [`review-the-docs`](../review-the-docs/SKILL.md). Apply the shared pitfalls in [`write-the-docs/reference/common-pitfalls.md`](../write-the-docs/reference/common-pitfalls.md) rather than duplicating them here. +6. **One change type per diff.** A diff that mixes reworded prose with moved sections is unreviewable, because the reader can't tell a move from a rewrite. Separate them by commit in a single PR, or by branch in a stack. -## Phase 1 — Diagnose +## Phase 0: Size and split -1. Identify the document type per CONTRIBUTING.md (explainer, tutorial, guide, reference, or troubleshooting). +1. Identify the document type per CONTRIBUTING.md. The types are explainer, tutorial, guide, reference, and troubleshooting. 2. State the reader's goal and prerequisites in one or two lines. 3. Note structural problems: mixed information types interrupting a procedure, missing intro navigation on a long page, weak transitions, redundancy, or over-explained mechanics. -4. Summarize the diagnosis to the requester before large moves when the restructure would change how the page is read. +4. Sort the diagnosis into the buckets below. **Drop any bucket that comes back empty, and say so.** Style, structure, and technical revision take one commit or branch each. Additions take as many as the content needs, so the edit has no fixed size. A style edit plus a structural edit is the common shape, because most pages that need restructuring are already correct. Two buckets is a complete result, not a truncated one. +5. Know where the edit ends. **The edit is only the buckets that have content.** Any bucket you drop is beyond the edit, and a later request for that change type is a new request. That includes one you raise yourself. Name it, keep the work in progress clean, and ask whether it belongs in this edit, in a separate ticket, or nowhere. Absorbing it into a bucket that's already open is what turns an edit into a rewrite. +6. Size the edit. **When it comes out large, offer a stack. Don't choose one.** One PR with each bucket as its own commit is the output unless the requester approves a split. Raise the question when both hold: + - The edit rewrites prose and moves sections, or it corrects a technical claim. + - It runs over roughly 150 changed lines. -## Phase 2 — Restructure + Say how large the diff is and propose the branches. Name the trade in the ask: a stack gives a reviewer clean per-change-type diffs, and it also means no PR page shows the whole edit, so reading it end to end costs them an extra command. Their reviewers pay that cost, so it's their call. **No answer means one PR.** -Apply the **Mixed information types**, **Navigation**, and **Cross-references and glue** guidance in [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md) (Guides section), summarized here: +7. Summarize the diagnosis and the proposed split to the requester, and **wait for confirmation before creating any branch.** Name which buckets are empty and why. When nobody is available to confirm, record the diagnosis in the PR body and ship one PR. -1. Classify substantial sections as contextual, procedural, or reference content. In a mixed page, group sections by information type so that context doesn't interrupt the procedural path. -2. For a long or mixed page, add a short introduction that links to its major section groups and tells readers when to use each one. Skip this navigation when a short page is already easy to scan. -3. Connect contextual sections to their corresponding procedures when useful. Add introductions to section groups, transitions between information types, and outcomes after procedures. Don't link every adjacent section. -4. Move and regroup first; preserve meaning. Don't silently rewrite facts while restructuring. +**When the diff outgrows the estimate mid-edit, stop and offer the split then.** A size call made at diagnosis can be wrong by the time the style pass lands. Say how large it got and ask. Splitting unasked is the failure here, and so is carrying on quietly because you already have an answer. -## Phase 3 — Edit for clarity +**The sections below are named for the stacked case.** In a single PR they're commits, in the same order and under the same rules. + +## PR 1: Style + +Inline changes only. Nothing in this PR moves a line from one place to another. + +**Rewrite:** - Use second person, present tense, short paragraphs, and ordered steps for sequential actions. -- Cut restated points and mechanical over-explanation. -- Apply [`write-the-docs/reference/common-pitfalls.md`](../write-the-docs/reference/common-pitfalls.md): timelessness, no internal planning context in shipped MDX, redundancy, single-item lists, admonition restatement. -- Search [`apps/docs/WORD_LIST.md`](../../../apps/docs/WORD_LIST.md) when introducing or revising technical terms and UI actions. -- Keep code samples executable in their stated context; mark intentionally omitted code. Prefer partials under `apps/docs/content/_partials/` over copied blocks. +- Put procedures in procedure format, per the Procedures section of CONTRIBUTING.md. Start each step with an imperative verb, keep one action or a closely related set per step, present 7 ± 2 steps per chunk, and group anything longer into named phases or smaller procedures. +- Apply the inline rules in CONTRIBUTING.md for admonitions, emphasis, links, lists, and the "Styling, formatting, and grammar" section. +- Keep code samples executable in their stated context, and mark intentionally omitted code. Prefer partials under `apps/docs/content/_partials/` over copied blocks. +- **Check the alt text on every image, and open the image to do it.** Alt text on an existing page usually names the topic rather than describing the picture, and a topic name is what the nearby heading already says. Describe what a reader who can't see it would need: the labeled parts, the relationships between them, and any values the diagram carries. This is a rewrite of existing text, so it belongs in this PR. -## Phase 4 — Validate +**Cut:** -Before handoff: +- Restated points and mechanical over-explanation. +- The shared pitfalls in [`common-pitfalls.md`](../write-the-docs/reference/common-pitfalls.md): timelessness, internal planning context in shipped MDX, redundancy, single-item lists, and admonition restatement. +- Terminology that doesn't match [`apps/docs/WORD_LIST.md`](../../../apps/docs/WORD_LIST.md). Crawl the list for terms already on the page, not only the ones you introduce. An existing page is where nonconforming terminology accumulates. -- [ ] Section groups follow information type; procedures aren't interrupted by long context -- [ ] Intro navigation present only when the page needs it; links resolve +## PR 2: Structure + +Apply the **Mixed information types**, **Navigation**, and **Cross-references and glue** guidance in the Guides section of [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md). + +**Work in this order, and settle the outline before you move a line.** A restructure invalidates every branch above it in the stack, so each revision costs a full restack, and a restack is where content gets dropped in conflict resolution. Reworking the shape twice costs far more than getting it right once. + +### 1. Lock the headings other code links to + +Grep the whole repo for `#` against every heading on the page, not just `apps/docs/content`. Studio renders Docs buttons that deep-link into guide anchors, and `apps/www` links into them too. Those are the matches that break a button in the product rather than a link between two pages. + +Write the matched heading texts down. For the rest of this PR they are immutable. **Moving a section preserves its slug, and so does changing its level. Only renaming breaks it.** That is what makes an aggressive regroup safe. + +### 2. Classify every substantial section + +Each one is **procedural** (the reader performs actions), **contextual** (the reader needs to understand something before acting), or **reference** (the reader looks something up). + +**Classify by what the reader is doing, not by what the section is about.** Subject matter is the trap: on a page about tables every section is "about tables", so grouping by topic produces one task-named bucket that quietly collects the background as well. A reader opens a section on schemas to understand something, not to do something, so it is context no matter how much it is about tables. + +**A section serving two classes gets split, not filed under the larger half.** Give the new half a heading, keep the heading text of the half that stays, and cross-reference the two. One cross-reference costs less than a reader hunting for the half they need. + +### 3. Write the target outline before touching the file + +Produce the whole heading tree, with levels, and check it against the locked list from step 1. Put it in front of the requester along with the Phase 0 diagnosis. The outline is the artifact that gets revised, not the page. + +Order the groups: a short conceptual opener when the page serves newcomers, then procedures, then context, then reference. The action path runs uninterrupted and the background sits after it. + +A guide about database tables settled here: + +``` +## What is a table? <- short conceptual opener +## Creating and managing tables <- procedures +### Creating tables +### Securing your tables +### Loading data +### Joining tables with foreign keys +## How tables are organized <- context +### Primary keys +### Relationships between tables +### Schemas +## Reference +### Data types +``` + +"Joining tables with foreign keys" held both classes. The steps kept the heading and stayed in the procedures group; the idea of a relational database moved to "Relationships between tables" in the context group. + +### 4. Move, then add the glue the new shape needs + +Move and regroup, and preserve meaning. Don't silently rewrite facts while restructuring. A pure set of moves is what makes this PR reviewable, so call out in the PR body any deletion that isn't a move. + +Then: + +- Add a short introduction linking each major group and saying when to use it. Skip it when a short page is already easy to scan. +- Add a group introduction, a transition where the information type changes, and an outcome after a procedure. Don't link every adjacent section. +- Put sections covering the same topic under a shared heading. + +### 5. When the page itself should split + +When a topic outgrows the page, give it its own page rather than its own group. Navigation that overflows the sidebar is one signal. A section carrying its own subsections several levels deep, sharing nothing with the rest of the page but a single word, is another. + +Update every navigation entry, repoint every inbound anchor, and cross-reference the new page. Confirm the nav-registration mechanism through [`ask-the-docs`](../ask-the-docs/SKILL.md) rather than assuming it. + +### 6. Before you submit + +Re-run the step 1 grep. Every locked heading text is still present, at whatever level it ended up. + +**A move that only reads correctly once new content exists isn't a PR 2 move.** It belongs to the branch that adds the content. Leave the section where it is, and say in the PR body which move you deferred and what it is waiting on. Otherwise PR 2 stops standing on its own, and a stack merged partway leaves the page reading worse than before. + +If nothing needs to move, PR 2 doesn't exist. A page can be well organized and still need a style pass. Drop the branch and say the structure held up. + +## PR 3: Technical revision + +Validate the truth of the content and correct what's wrong. + +**Change a claim only when leaving it would produce a wrong outcome.** A reader following the page would hit an error, get a different result than the page promises, or decide on a fact that isn't true. That's the test. + +**Leave it alone otherwise.** Don't open PR 3 for imprecise but harmless phrasing, a claim you'd have worded differently, an accurate detail that isn't the newest way to do it, or a stale-looking value you can't verify against code. The last one is a note to the author, not an edit. + +**An external rule isn't a wrong outcome by itself.** A best-practices rule that a reader would never hit as a failure doesn't clear the gate, however high the rule's stated impact. Weigh what the reader experiences against the page, not how the rule is ranked. + +**PR 3 corrects what's on the page. A missing safeguard is an absence, and absences are additions.** When the fix is to add something the page never had, it belongs above this branch, not in it. This is the line that keeps a verification pass from quietly becoming a rewrite. + +When a claim does fail the test, verify before you change it, per Phase 1 of [`write-the-docs`](../write-the-docs/SKILL.md): + +- Read the implementation. Prefer the diff of a linked `supabase/supabase` PR over a general codebase read. +- Where code and product intent disagree, code wins for behavior claims. Flag the mismatch. +- Flag anything you inferred in the PR description, not in the MDX. + +**Run the snippets when the page has them.** Offer [`test-the-docs`](../test-the-docs/SKILL.md) before you start, and don't run it unasked. A snippet that fails in the sandbox is the most direct evidence a claim fails the wrong-outcome test, because the reader hits the same error. Attach the verification report to the PR body. If the author declines, record the artifacts as deferred and carry on with the code read. If the sandbox fails for an environmental reason, that's a deferral rather than a result — retry it before the branch merges. + +**Run every fence in document order, not only one path.** The reader pastes top to bottom, so that order is the claim. Snippets that each work alone can still fail as a sequence, by re-creating an object an earlier one made or by depending on one no fence ever creates. Nothing in a code read surfaces that, and it's the failure a reader hits first. + +Testing covers procedural content only. Claims that nothing executes, such as limits, defaults, and positioning, still need the code read above. + +**A branch above can change the answer.** The test is applied to the page as it stands, so a claim that passes inspection here can become wrong once an additions branch contradicts it. That correction belongs to the branch that creates the conflict, not back down here. Say so when you leave the claim, so the later change reads as intended rather than as a missed finding. + +**If every finding fails the test, PR 3 is empty.** Say what you checked and what you're deliberately leaving, then drop the branch. An empty PR 3 means verified and fine, not skipped. A technical concern raised later in the stack is then a new request, per the boundary rule in Phase 0. + +## PR 4+: Additions, on request only + +**Additions sit on top of the stack, so they stay out of the edit.** New content is a different job from editing what's already there. Keeping it on its own branches is what stops an edit from turning into a rewrite halfway through. + +**Additions take as many branches as the content needs.** Split them by diff size so each branch stays reviewable, and name each branch for what it adds rather than for its position in the stack. One branch is right when the additions are one topic and a small diff. + +**Don't scope these branches from the diagnosis.** Additions are empty by default. Don't propose them because the page looks thin. + +**A tracked request is the request.** An assigned ticket or issue that asks for new content has already made the ask, so treat it as scoped and get on with it. The rule forbids inventing additions yourself. It doesn't ask you to wait for someone to repeat a request that's already written down. + +**Route mid-edit requests up here instead.** When the author asks for new content while you're on an earlier branch, or when you spot a gap yourself, say it's additions material and keep the current branch clean. Then ask whether they want it in this stack, in a separate ticket, or not at all. Naming it is how you keep the conversation from reopening PR 1. + +Once it's scoped: + +- Crawl reader feedback for candidate gaps. Linear is an internal Supabase tool, preferred when available and not required for open-source contributors. +- Ground additions the same way as PR 3. Read the code before making a behavior claim, and flag what you inferred. +- **Run every new runnable snippet through [`test-the-docs`](../test-the-docs/SKILL.md) before it ships.** New content is where an untested snippet is likeliest to be wrong, because nothing has ever executed it. +- Strip internal business context before the draft ships: PRD intent, roadmap speculation, and ticket discussion. It belongs in the PR description, not in the MDX. + +## Validate each PR + +Run this per change type, before you submit the commit or branch that carries it, not once at the end: + +- [ ] The diff contains only this change type +- [ ] Section groups follow information type, and procedures aren't interrupted by long context +- [ ] Intro navigation is present only when the page needs it, and links resolve - [ ] Connective text is selective, not link spam -- [ ] Voice matches CONTRIBUTING.md / WORD_LIST.md +- [ ] Voice matches CONTRIBUTING.md and WORD_LIST.md +- [ ] Every image has alt text that describes the image, checked against the image itself - [ ] No invented behavior or positioning - [ ] Shared pitfalls checklist considered -Mechanics (anchors, lint, format): follow [`write-the-docs/reference/drafting-mechanics.md`](../write-the-docs/reference/drafting-mechanics.md). Before renaming or rewording headings, grep for `#` under `apps/docs/content` and update matches. +**Anchors.** PR 2 step 1 builds the locked-heading list and step 6 re-checks it. Any branch that renames or rewords a heading clears the same gate. -Then run [`review-the-docs`](../review-the-docs/SKILL.md) local self-review (`pnpm lint:mdx`, and `pnpm build:guides-markdown` when guides/explainers/tutorials changed). +**Frontmatter `title`.** It follows the same sentence-case rule as a heading. Renaming it moves a navigation label and a search entry, not just a line of prose, so it clears this same gate and lands in PR 2 rather than PR 1. + +**Lint and format.** Follow [`write-the-docs/reference/drafting-mechanics.md`](../write-the-docs/reference/drafting-mechanics.md). Then run the [`review-the-docs`](../review-the-docs/SKILL.md) local self-review: `pnpm lint:mdx`, plus `pnpm build:guides-markdown` when a guide, explainer, or tutorial changed. + +`build:guides-markdown` writes `apps/docs/public/markdown/manifest.json`, which the repo tracks and commits as `[]`. Discard that file before committing. It's a build artifact, not part of the edit. ## Additional resources -- Structure SoT: [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md) (mixed types, navigation, glue) -- Structure ops: [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md) — Guides: Mixed information types, Navigation, Cross-references and glue -- Pitfalls: [`write-the-docs/reference/common-pitfalls.md`](../write-the-docs/reference/common-pitfalls.md) -- Mechanics: [`write-the-docs/reference/drafting-mechanics.md`](../write-the-docs/reference/drafting-mechanics.md) -- Architecture/IA: [`ask-the-docs`](../ask-the-docs/SKILL.md) +**Stacking:** + +- Mechanics and `gh stack` commands: [reference/stacked-prs.md](reference/stacked-prs.md) +- Bottom-up stack review: [`review-the-docs`](../review-the-docs/SKILL.md) + +**Style and structure:** + +- Mixed information types, navigation, and glue: the Guides section of [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md) +- Procedure format: the Procedures section of [`apps/docs/CONTRIBUTING.md`](../../../apps/docs/CONTRIBUTING.md) +- Terminology: [`apps/docs/WORD_LIST.md`](../../../apps/docs/WORD_LIST.md) + +**Sibling skills:** + +- Pitfalls and drafting mechanics: [`common-pitfalls.md`](../write-the-docs/reference/common-pitfalls.md), [`drafting-mechanics.md`](../write-the-docs/reference/drafting-mechanics.md) +- Runnable verification: [`test-the-docs`](../test-the-docs/SKILL.md) +- Architecture and IA: [`ask-the-docs`](../ask-the-docs/SKILL.md) - Net-new drafts: [`write-the-docs`](../write-the-docs/SKILL.md) -- Review: [`review-the-docs`](../review-the-docs/SKILL.md) diff --git a/.agents/skills/edit-the-docs/reference/stacked-prs.md b/.agents/skills/edit-the-docs/reference/stacked-prs.md new file mode 100644 index 00000000000..82c6aeaf8c8 --- /dev/null +++ b/.agents/skills/edit-the-docs/reference/stacked-prs.md @@ -0,0 +1,74 @@ +# Stacked PRs for a page edit + +Mechanics for shipping the [`edit-the-docs`](../SKILL.md) buckets as a stack. **A stack is the exception, and the requester approves it.** Phase 0 covers when to offer one. This file covers how to build and submit it once they agree. + +## Branch names + +One branch per change type, bottom to top: + +| PR | Branch | +| --- | ---------------------------- | +| 1 | `docs/-style` | +| 2 | `docs/-structure` | +| 3 | `docs/-technical` | +| 4+ | `docs/-` | + +The first three names are fixed, because there's one of each. **Additions get one branch per topic, named for the content it adds:** `docs/tables-rls` and `docs/tables-datatypes`, not `docs/tables-additions-1` and `-2`. Use `docs/-additions` when a single branch carries all of them. + +**Create only the branches whose buckets have content.** Two branches is the common shape once an edit clears the gate. `gh stack init` takes however many you pass it. + +**Use a category prefix and a short second segment.** Don't prefix a branch with an author name, even when a tracker suggests that format. + +**Get every name right before you submit.** Renaming a branch that already has an open PR closes the PR rather than retargeting it, and a closed PR whose head ref is gone can't be reopened. Recovering costs the PR number and its CI history. + +## Build the stack with gh stack + +Never chain `gh pr create --base `. That produces correct base branches but no GitHub stack. There's no stack number and no stack UI, so reviewers see several unrelated-looking PRs instead of one series. + +1. `gh stack init ` adopts existing branches, bottom to top. This is local only and makes no remote change. +2. `gh stack view` confirms the structure and shows the mapped PR for each branch. +3. `gh stack submit --auto` pushes and registers the stack on GitHub. Use `--auto` in a non-interactive session, where the editor can't open. New PRs are created as drafts unless you pass `--open`. + +**Check the titles after submitting.** `submit` can title a PR from its branch name rather than its commit subject. Fix any that came out wrong with `gh pr edit --title`. + +**Safe to re-run on PRs that already exist.** `submit` reports each one "up to date" and reuses it, so PR numbers, descriptions, and creation timestamps survive. + +**Draft state doesn't reliably survive.** `--open` marks existing PRs ready for review, not just new ones, and a resubmit has been observed taking drafts out of draft without it. Check the draft state of every PR after submitting, and set it back with `gh pr ready --undo` if it moved. + +**Other commands.** `gh stack link ` registers the GitHub stack without local tracking. `gh stack unstack` removes a stack. The extension is `github/gh-stack`. + +## Reading the stack as a whole + +No PR page shows the whole edit, so a reviewer who wants it in one view needs the command: + +```bash +git diff master... -- +``` + +`gh stack view` lists the branches in order, so it gives you the top one. Put the command in the bottom PR's body. Without it the reviewer reconstructs the edit branch by branch, and that cost is why Phase 0 defaults to a single PR. + +## Restacking after a change low in the stack + +`gh stack rebase` replays every branch above the one you changed. Where a lower branch moved content that an upper branch also edited, git raises a conflict whose two sides are "the new structure" and "the old content being re-added". Resolving toward the new structure is usually right, and it silently drops the upper branch's edit along with the stale copy. + +**Assume that happened. Audit rather than read the diff.** Before pushing, grep each branch for a marker of every change it is supposed to carry: + +```bash +git show : | grep -c '' +``` + +One marker per change, checked against the count you expect. A restructure large enough to conflict is large enough that reading the diff will not catch a missing paragraph. + +Restore anything missing as a new commit on the branch that owns it, then rebase again. Don't fold it into a neighboring branch to avoid a second rebase; that breaks the one-change-type-per-PR rule the stack exists for. + +## Merge order + +Merge bottom-up: `master`, then PR 1, then PR 2, then PR 3, then each additions branch in stack order. This is the model [`review-the-docs`](../../review-the-docs/SKILL.md) uses to review a stack, so the authoring and review sides share one vocabulary. + +## PR bodies + +Each body states which change type the PR carries and what it leaves to the PRs above it. That tells a reviewer the diff is narrow on purpose. Reworded prose isn't missing from the structure PR, it already landed below. + +Carry forward anything you flagged while working: inferred claims from PR 3, gaps you named but didn't fill, and stale values you couldn't verify. Those belong in the description, not in the MDX. + +For general PR-body mechanics, see [`create-pull-request`](https://github.com/supabase/docs-agent-skills/blob/main/.claude/skills/create-pull-request/SKILL.md). diff --git a/.github/workflows/docs-e2e.yml b/.github/workflows/docs-e2e.yml index c608a8418af..289bb4aebeb 100644 --- a/.github/workflows/docs-e2e.yml +++ b/.github/workflows/docs-e2e.yml @@ -129,6 +129,10 @@ jobs: # Vercel skips the docs preview when a PR only changes the harness # (e2e/docs, workflow), so wait for a preview only when apps/docs changed. + # When apps/docs changed earlier in the PR but not in the head commit, + # Vercel skips the head build as not affected and its URL serves a + # placeholder page; the script then uses the newest READY preview from + # an earlier commit of the PR, which serves the same docs content. # # Vercel's GitHub App stopped writing GitHub Deployment objects on # 2026-02-17 (broken app auth), so vercel/wait-for-deployment-action @@ -146,6 +150,7 @@ jobs: env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} HEAD_SHA: ${{ github.event.pull_request.head.sha }} + PR_NUMBER: ${{ github.event.pull_request.number }} VERCEL_STATUS_CONTEXT: 'Vercel – docs' VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_TEAM_ID: ${{ secrets.VERCEL_TEAM_ID }} diff --git a/.github/workflows/label_prs.yml b/.github/workflows/label_prs.yml index 9e9ac01756e..50af84c9457 100644 --- a/.github/workflows/label_prs.yml +++ b/.github/workflows/label_prs.yml @@ -22,5 +22,5 @@ jobs: owner: context.repo.owner, repo: context.repo.repo, issue_number: context.issue.number, - body: 'The `api-deploy-required` label was auto-applied to this PR because it updates the API types. Ensure that the new or updated API, if any, is deployed on production before **removing the label** and merging this PR.', + body: 'The `api-deploy-required` label was auto-applied to this PR because it updates the API types. The `Verify production API types` check reports whether the committed types match production; it is currently observational and does not block merging.', }) diff --git a/.github/workflows/validate-pr.yml b/.github/workflows/validate-pr.yml index 2ee49d84c8e..1b10f526421 100644 --- a/.github/workflows/validate-pr.yml +++ b/.github/workflows/validate-pr.yml @@ -17,12 +17,6 @@ jobs: echo "PR blocked: [tag: do not merge]" exit 1 - - name: Tagged with 'api-deploy-required' - if: contains( github.event.pull_request.labels.*.name, 'api-deploy-required') - run: | - echo "PR blocked: [tag: api-deploy-required] — confirm the API is deployed in production, then remove the label." - exit 1 - - name: All good if: ${{ success() }} run: | diff --git a/.github/workflows/verify-production-api-types.yml b/.github/workflows/verify-production-api-types.yml new file mode 100644 index 00000000000..bc99921ca89 --- /dev/null +++ b/.github/workflows/verify-production-api-types.yml @@ -0,0 +1,50 @@ +name: Verify production API types + +on: + pull_request: + types: [opened, reopened, synchronize] + +permissions: + contents: read + pull-requests: read + +jobs: + verify-production-api-types: + runs-on: ubuntu-latest + steps: + - id: changes + env: + GH_TOKEN: ${{ github.token }} + run: | + if gh api "repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/files" --paginate --jq '.[].filename' | grep -q '^packages/api-types/types/'; then + echo "api_types_changed=true" >> "$GITHUB_OUTPUT" + else + echo "api_types_changed=false" >> "$GITHUB_OUTPUT" + fi + + - name: Check out pull request + if: steps.changes.outputs.api_types_changed == 'true' + uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 + with: + persist-credentials: false + + - name: Install pnpm + if: steps.changes.outputs.api_types_changed == 'true' + uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 + with: + run_install: false + + - name: Set up Node.js + if: steps.changes.outputs.api_types_changed == 'true' + uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 + with: + node-version-file: '.nvmrc' + cache: pnpm + + - name: Install API types dependencies + if: steps.changes.outputs.api_types_changed == 'true' + run: pnpm install --frozen-lockfile --filter=api-types... + + - name: Verify production API types + if: steps.changes.outputs.api_types_changed == 'true' + run: pnpm --filter=api-types run verify-production-types diff --git a/.github/workflows/www-e2e.yml b/.github/workflows/www-e2e.yml index 7859ca0033c..2d52534798d 100644 --- a/.github/workflows/www-e2e.yml +++ b/.github/workflows/www-e2e.yml @@ -120,7 +120,10 @@ jobs: cache: 'pnpm' # Vercel skips the preview when only the harness changed, so wait for one - # only when apps/www changed. See scripts/waitForVercelPreview.js. + # only when apps/www changed. A head commit that leaves apps/www untouched + # gets a skipped build whose URL serves a placeholder page, so the script + # falls back to the newest READY preview from an earlier commit of the PR. + # See scripts/waitForVercelPreview.js. - name: Wait for Vercel www preview if: steps.scope.outputs.skip == 'false' && github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository && steps.changes.outputs.www_app == 'true' id: deployment @@ -129,6 +132,7 @@ jobs: env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} HEAD_SHA: ${{ github.event.pull_request.head.sha }} + PR_NUMBER: ${{ github.event.pull_request.number }} VERCEL_STATUS_CONTEXT: 'Vercel – zone-www-dot-com' VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_TEAM_ID: ${{ secrets.VERCEL_TEAM_ID }} diff --git a/.github/workflows/www-tests.yml b/.github/workflows/www-tests.yml index 96f2737cccf..281a6a30127 100644 --- a/.github/workflows/www-tests.yml +++ b/.github/workflows/www-tests.yml @@ -8,9 +8,17 @@ on: - 'apps/www/next.config.mjs' - 'apps/www/next.config.js' - 'apps/www/lib/**/*.js' + - 'apps/www/lib/**/*.mjs' - 'apps/www/content/md/**' - 'apps/www/scripts/**/*.mjs' + - 'apps/www/internals/**/*.mjs' + - 'apps/www/_blog/**' + - 'apps/www/_alternatives/**' + - 'apps/www/_customers/**' - 'apps/www/public/.well-known/**' + # www catalog tests check that linked docs guides exist, so guide changes + # must trigger these tests and their sources must be included in checkout. + - 'apps/docs/content/guides/**' # Cancel old builds on new commit for same workflow + branch/PR concurrency: @@ -33,6 +41,7 @@ jobs: persist-credentials: false sparse-checkout: | apps/www + apps/docs/content/guides packages supabase patches diff --git a/.gitignore b/.gitignore index 2d930f8f779..7c354e17573 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,8 @@ tmp *.swp coverage +# vitest reporter output (json/junit/html/attachments) +.vitest allure-results allure-report .nyc_output @@ -166,3 +168,6 @@ keys.json examples/**/package-lock.json examples/**/yarn.lock examples/**/pnpm-lock.yaml + +# local-only lockfile for the mcp-server registry block +apps/ui-library/registry/default/blocks/mcp-server/supabase/functions/mcp-server/deno.lock diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 41583e36ca8..00000000000 --- a/.npmrc +++ /dev/null @@ -1 +0,0 @@ -@jsr:registry=https://npm.jsr.io diff --git a/.prettierignore b/.prettierignore index 1f07211dd8f..41a171fe018 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,6 +7,7 @@ apps/**/out .context/** # prettier-plugin-sql-cst only supports sqlite syntax **/supabase/migrations/*.sql +**/supabase/schemas/**/*.sql apps/www/schema.sql apps/www/public/images/* # Generated by apps/www/scripts/generateStaticContent.mjs (GitHub discussion bodies) diff --git a/README.md b/README.md index 0b5a5e6f455..cb933a7ef60 100644 --- a/README.md +++ b/README.md @@ -105,11 +105,11 @@ Our approach for client libraries is modular. Each sub-library is a standalone i Flutter supabase-flutter - postgrest-dart - gotrue-dart - realtime-dart - storage-dart - functions-dart + postgrest + supabase_auth + supabase_realtime + supabase_storage + supabase_functions Swift diff --git a/apps/design-system/README.md b/apps/design-system/README.md index a726c230985..45cd3d78a54 100644 --- a/apps/design-system/README.md +++ b/apps/design-system/README.md @@ -4,40 +4,60 @@ Design resources for building consistent user experiences at Supabase. ## Getting started -First, make a copy of _.env.local.example_ and name it _env.local_. Then install any required packages and start the development server: +From the repo root: ```bash +# Copy local env vars (sets NEXT_PUBLIC_BASE_PATH for asset URLs) +cp apps/design-system/.env.local.example apps/design-system/.env.local +# Move into the design-system app cd apps/design-system +# Install dependencies pnpm i +# Build the registry and Velite content, then start the dev servers pnpm dev ``` -The `dev` command generates `__registry__`, then runs the Next.js development server and Contentlayer together. That is the recommended workflow. +Or from `apps/design-system`: + +```bash +# Copy local env vars (sets NEXT_PUBLIC_BASE_PATH for asset URLs) +cp .env.local.example .env.local +# Install dependencies +pnpm i +# Build the registry and Velite content, then start the dev servers +pnpm dev +``` + +The `dev` command builds the registry and Velite content, then runs the Next.js dev server and Velite watcher in parallel. + +Open [http://localhost:3003/design-system](http://localhost:3003/design-system) in your browser to see the result. + +Doc pages load compiled MDX from `.velite/codes/*.json` per document. Metadata lives in the smaller `allDocs.json` index (~367KB instead of ~27MB), so content edits only reload the changed doc's code. ### Alternative commands -You can also run the development server and content watcher separately. Generate the registry first, because `dev:next` and `dev:content` do not: +You can also run the development server and content watcher separately. Build the registry and content first, because `dev:next` and `dev:content` do not: ```bash -pnpm generate:registry +pnpm build:registry +pnpm build:content # Run only the Next.js development server pnpm dev:next -# Run only the content watcher (in a separate terminal shell) +# Run only the Velite content watcher (in a separate terminal shell) pnpm dev:content ``` -From the repo root, `pnpm dev:design-system` runs the same `dev` script, so it also generates `__registry__`. If you split the watchers from the root, generate first: +From the repo root, `pnpm dev:design-system` runs the same `dev` script. If you split the watchers from the root, build first: ```bash -pnpm --filter=design-system generate:registry +pnpm --filter=design-system build:registry +pnpm --filter=design-system build:content pnpm --filter=design-system dev:next pnpm --filter=design-system dev:content ``` -Open [http://localhost:3003](http://localhost:3003) in your browser to see the result. - ### Watching for MDX changes The `dev` command watches MDX files and hot-reloads them. If you are running `pnpm dev:next` on its own, also run `pnpm dev:content` in another terminal. @@ -64,5 +84,5 @@ Do not edit `__registry__`. `pnpm dev`, `pnpm typecheck`, and `pnpm build` gener ```bash cd apps/design-system -pnpm generate:registry +pnpm build:registry ``` diff --git a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx index 3f3aa0f3c3d..0e59e898eb7 100644 --- a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx +++ b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx @@ -3,8 +3,10 @@ import { DocsPager, getBreadcrumbSegments } from '@/components/pager' import { SourcePanel } from '@/components/source-panel' import { DashboardTableOfContents } from '@/components/toc' import { siteConfig } from '@/config/site' +import { getAllDocs, getDocBySlug, getDocMetaBySlug } from '@/lib/docs' import { getTableOfContents } from '@/lib/toc' import { absoluteUrl } from '@/lib/utils' +/* eslint-disable turbo/no-undeclared-env-vars */ import '@/styles/code-block-variables.css' import '@/styles/mdx.css' @@ -16,8 +18,6 @@ import { notFound } from 'next/navigation' import Balancer from 'react-wrap-balancer' import { ScrollArea, Separator } from 'ui' -import { allDocs } from '@/.velite' - interface DocPageProps { params: Promise<{ slug: string[] @@ -26,13 +26,7 @@ interface DocPageProps { async function getDocFromParams({ params }: { params: { slug: string[] } }) { const slug = params.slug?.join('/') || '' - const doc = allDocs.find((doc) => doc.slugAsParams === slug) - - if (!doc) { - return null - } - - return doc + return getDocMetaBySlug(slug) } export async function generateMetadata(props: DocPageProps): Promise { @@ -71,14 +65,20 @@ export async function generateMetadata(props: DocPageProps): Promise { } export async function generateStaticParams(): Promise<{ slug: string[] }[]> { + if (process.env.NODE_ENV === 'development') { + return [] + } + + const allDocs = await getAllDocs() return allDocs.map((doc) => ({ - slug: doc.slugAsParams.split('/'), + slug: doc.slugAsParams ? doc.slugAsParams.split('/') : [], })) } export default async function DocPage(props: DocPageProps) { const params = await props.params - const doc = await getDocFromParams({ params }) + const slug = params.slug?.join('/') || '' + const doc = await getDocBySlug(slug) if (!doc) { notFound() diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx index de7f2407868..31c70dfced9 100644 --- a/apps/design-system/app/layout.tsx +++ b/apps/design-system/app/layout.tsx @@ -1,18 +1,16 @@ import 'react-data-grid/lib/styles.css' import '@/styles/globals.css' -import type { Metadata, Viewport } from 'next' - import { genFaviconData } from 'common/MetaFavicons/app-router' +import type { Metadata, Viewport } from 'next' import { Providers } from './Providers' import { Toaster } from './toaster' +import { BASE_PATH } from '@/lib/constants' import { inter, manrope, sourceCodePro } from '@/lib/fonts' const className = `${inter.variable} ${manrope.variable} ${sourceCodePro.variable}` -const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system' - export const metadata: Metadata = { applicationName: 'Supabase Design System', title: 'Supabase Design System', diff --git a/apps/design-system/components/component-preview.tsx b/apps/design-system/components/component-preview.tsx index 04a5fc30ee1..4e4913d29bc 100644 --- a/apps/design-system/components/component-preview.tsx +++ b/apps/design-system/components/component-preview.tsx @@ -125,7 +125,6 @@ export function ComponentPreview({ + + {unavailable && {reason}} + +``` + +In Studio, `ButtonTooltip` adds `focusableWhenDisabled` to disabled buttons with tooltip text automatically. + +### Page-level context + +Tooltips alone are not enough for significant restrictions. Pair focusable disabled controls with visible page context (for example: an [Admonition](fragments/admonition), empty state, or inline copy) so the reason is available even without hover or focus. + + + ## Screen readers Textual elements are supported out-of-the-box by screen readers. diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx index fc7c1575839..3af2a64e17f 100644 --- a/apps/design-system/content/docs/components/button.mdx +++ b/apps/design-system/content/docs/components/button.mdx @@ -5,7 +5,7 @@ featured: true component: true --- - + ## Usage @@ -47,23 +47,18 @@ Use the `size` prop to determine the size of the button. ### Variants -These are all the different `variant` variations. +#### Default + +Used when no `variant` is specified. Prefer this unless another variant fits better, as below. + + #### Primary -Used for data insertion actions, confirming purchases, strong positive actions. +Use sparingly for data insertion, confirming purchases, and other strong positive actions. Because it is so prominent, aim for at most one primary button in a viewport. -#### Default - -Used for opening dialogs, navigating to pages, and other non CRUD actions. - -This `variant` will probably be the most used button variant. -It will probably be changed to be the default variant in future. - - - #### Secondary Can be used for signaling a data or config change, but not as serious as a primary button. @@ -143,8 +138,22 @@ Inside [Admonition](../fragments/admonition#split-button-with-dropdown) actions [Keyboard focus](../accessibility#focus-management) is automatically handled: - Enabled buttons default to `tabIndex={0}` (keyboard accessible) -- Disabled buttons default to `tabIndex={-1}` (removed from tab order) +- Buttons with native `disabled` default to `tabIndex={-1}` (removed from tab order) - You can still override with an explicit `tabIndex` prop when needed - Keyboard focus uses the shared `focus-ring` utility; variants do not change ring colour -You therefore don't need to manually set `tabIndex`, as Button handles it automatically based on its `disabled` state. +You therefore don't need to manually set `tabIndex` for buttons using native `disabled`. + +When a disabled action has a non-obvious reason and needs a tooltip, add `focusableWhenDisabled` so keyboard users can still focus the control. See [Disabled controls](../accessibility#disabled-controls). + +### Focusable when disabled + +Use `focusableWhenDisabled` with `disabled` when the action is blocked for a non-obvious reason and you need a tooltip or other explanation. The control stays in the tab order and uses `aria-disabled` instead of native `disabled`. + +```tsx + +``` + +In Studio, `ButtonTooltip` adds `focusableWhenDisabled` to disabled buttons with tooltip text automatically. diff --git a/apps/design-system/content/docs/fragments/multi-select.mdx b/apps/design-system/content/docs/fragments/multi-select.mdx index 1dcb568f23e..73e09df3899 100644 --- a/apps/design-system/content/docs/fragments/multi-select.mdx +++ b/apps/design-system/content/docs/fragments/multi-select.mdx @@ -41,6 +41,12 @@ import { +### Without trigger icon + +Set `showIcon={false}` to hide the trigger icon. + + + ### Badge Combo Box Use `MultiSelectorInput`to add a search input. diff --git a/apps/design-system/lib/constants.ts b/apps/design-system/lib/constants.ts new file mode 100644 index 00000000000..abbdb2aade6 --- /dev/null +++ b/apps/design-system/lib/constants.ts @@ -0,0 +1,3 @@ +const rawBasePath = process.env.NEXT_PUBLIC_BASE_PATH || 'design-system' + +export const BASE_PATH = rawBasePath.startsWith('/') ? rawBasePath : `/${rawBasePath}` diff --git a/apps/design-system/lib/docs.ts b/apps/design-system/lib/docs.ts new file mode 100644 index 00000000000..da1d8f69ed3 --- /dev/null +++ b/apps/design-system/lib/docs.ts @@ -0,0 +1,44 @@ +import 'server-only' + +/* eslint-disable turbo/no-undeclared-env-vars */ +import { readFile } from 'node:fs/promises' +import path from 'node:path' +import { connection } from 'next/server' + +import type { Doc as DocMeta } from '@/.velite' + +export type { DocMeta } + +export type Doc = DocMeta & { code: string } + +const CODE_DIR = path.join(process.cwd(), '.velite/codes') + +async function loadDocCode(codeId: string): Promise { + const raw = await readFile(path.join(CODE_DIR, `${codeId}.json`), 'utf8') + return JSON.parse(raw) as string +} + +export async function getAllDocs(): Promise { + if (process.env.NODE_ENV === 'development') { + await connection() + } + + const { allDocs } = await import('@/.velite') + return allDocs +} + +export async function getDocMetaBySlug(slug: string): Promise { + const allDocs = await getAllDocs() + return allDocs.find((doc) => doc.slugAsParams === slug) ?? null +} + +export async function getDocBySlug(slug: string): Promise { + const doc = await getDocMetaBySlug(slug) + + if (!doc) { + return null + } + + const code = await loadDocCode(doc.codeId) + return { ...doc, code } +} diff --git a/apps/design-system/registry/default/example/admonition-button-split.tsx b/apps/design-system/registry/default/example/admonition-button-split.tsx index 0300ac430f7..3083ae3f8d3 100644 --- a/apps/design-system/registry/default/example/admonition-button-split.tsx +++ b/apps/design-system/registry/default/example/admonition-button-split.tsx @@ -19,7 +19,6 @@ export default function AdmonitionButtonSplitDemo() {
} + actions={} /> OAuth Server Settings} + actions={} /> ) } diff --git a/apps/design-system/registry/default/example/admonition-responsive.tsx b/apps/design-system/registry/default/example/admonition-responsive.tsx index 32d796acdb9..2e488553f54 100644 --- a/apps/design-system/registry/default/example/admonition-responsive.tsx +++ b/apps/design-system/registry/default/example/admonition-responsive.tsx @@ -8,7 +8,7 @@ export default function AdmonitionDemo() { layout="responsive" title="Disk management has moved" description="Disk management is now handled alongside Project Compute on the Compute and Disk page." - actions={} + actions={} /> ) } diff --git a/apps/design-system/registry/default/example/button-as-child.tsx b/apps/design-system/registry/default/example/button-as-child.tsx index 8d8909cdb50..8504d95f394 100644 --- a/apps/design-system/registry/default/example/button-as-child.tsx +++ b/apps/design-system/registry/default/example/button-as-child.tsx @@ -3,7 +3,7 @@ import { Button } from 'ui' export default function ButtonAsChild() { return ( - ) diff --git a/apps/design-system/registry/default/example/button-loading.tsx b/apps/design-system/registry/default/example/button-loading.tsx index 9320b8f0fd7..db102ca9b06 100644 --- a/apps/design-system/registry/default/example/button-loading.tsx +++ b/apps/design-system/registry/default/example/button-loading.tsx @@ -2,7 +2,7 @@ import { Button } from 'ui' export default function ButtonLoading() { return ( - ) diff --git a/apps/design-system/registry/default/example/button-split-dropdown.tsx b/apps/design-system/registry/default/example/button-split-dropdown.tsx index 54a1c621c72..3bb12f03265 100644 --- a/apps/design-system/registry/default/example/button-split-dropdown.tsx +++ b/apps/design-system/registry/default/example/button-split-dropdown.tsx @@ -13,7 +13,6 @@ export default function ButtonSplitDropdownDemo() {
+ return ( + + ) } diff --git a/apps/design-system/registry/default/example/calendar-form.tsx b/apps/design-system/registry/default/example/calendar-form.tsx index 99846d6f4b8..2c8e37c9d38 100644 --- a/apps/design-system/registry/default/example/calendar-form.tsx +++ b/apps/design-system/registry/default/example/calendar-form.tsx @@ -57,7 +57,6 @@ export default function CalendarForm() { + ) diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx index 7cc4683d4ed..a9abdddb7ba 100644 --- a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx +++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx @@ -83,7 +83,9 @@ export default function CalendarForm() { )} /> - + ) diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx index 006ad6bad2a..4b3df7eafed 100644 --- a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx +++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx @@ -112,7 +112,9 @@ export default function CheckboxReactHookFormMultiple() { )} /> - + ) diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx index f18d4a172ef..8fed391e74e 100644 --- a/apps/design-system/registry/default/example/checkbox-form-single.tsx +++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx @@ -59,7 +59,9 @@ export default function CheckboxReactHookFormSingle() { )} /> - + ) diff --git a/apps/design-system/registry/default/example/combobox-popover.tsx b/apps/design-system/registry/default/example/combobox-popover.tsx index 3ddb32386cc..fde35b836c8 100644 --- a/apps/design-system/registry/default/example/combobox-popover.tsx +++ b/apps/design-system/registry/default/example/combobox-popover.tsx @@ -69,7 +69,6 @@ export default function ComboboxPopover() { + Acme diff --git a/apps/design-system/registry/default/example/connect-interstitial-shared.tsx b/apps/design-system/registry/default/example/connect-interstitial-shared.tsx index 49c53778e80..c24bdb6c343 100644 --- a/apps/design-system/registry/default/example/connect-interstitial-shared.tsx +++ b/apps/design-system/registry/default/example/connect-interstitial-shared.tsx @@ -133,5 +133,5 @@ export function InterstitialActionError({ error }: { error?: React.ReactNode }) } export function SignOutButton() { - return
- + @@ -40,9 +38,7 @@ export default function CopyConfirmations() {
- + diff --git a/apps/design-system/registry/default/example/data-table-demo.tsx b/apps/design-system/registry/default/example/data-table-demo.tsx index a2eaa1b817d..5a63833a529 100644 --- a/apps/design-system/registry/default/example/data-table-demo.tsx +++ b/apps/design-system/registry/default/example/data-table-demo.tsx @@ -139,7 +139,7 @@ export const columns: ColumnDef[] = [ return ( - @@ -303,19 +303,13 @@ export default function DataTableDemo() {
-
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx index 129fc91412f..422c302aafa 100644 --- a/apps/design-system/registry/default/example/date-picker-form.tsx +++ b/apps/design-system/registry/default/example/date-picker-form.tsx @@ -76,7 +76,9 @@ export default function DatePickerForm() { )} /> - + ) diff --git a/apps/design-system/registry/default/example/dialog-centered-off.tsx b/apps/design-system/registry/default/example/dialog-centered-off.tsx index ea35e2dd951..791841651a8 100644 --- a/apps/design-system/registry/default/example/dialog-centered-off.tsx +++ b/apps/design-system/registry/default/example/dialog-centered-off.tsx @@ -17,7 +17,7 @@ export default function DialogDemo() { return ( - + @@ -40,7 +40,9 @@ export default function DialogDemo() { - + diff --git a/apps/design-system/registry/default/example/dialog-close-button.tsx b/apps/design-system/registry/default/example/dialog-close-button.tsx index da8b2ab7e78..b61cdafab48 100644 --- a/apps/design-system/registry/default/example/dialog-close-button.tsx +++ b/apps/design-system/registry/default/example/dialog-close-button.tsx @@ -19,7 +19,7 @@ export default function DialogCloseButton() { return ( - + @@ -43,9 +43,7 @@ export default function DialogCloseButton() { - + diff --git a/apps/design-system/registry/default/example/dialog-demo.tsx b/apps/design-system/registry/default/example/dialog-demo.tsx index 9d6972d7b63..eddf38c08b7 100644 --- a/apps/design-system/registry/default/example/dialog-demo.tsx +++ b/apps/design-system/registry/default/example/dialog-demo.tsx @@ -17,7 +17,7 @@ export default function DialogDemo() { return ( - + @@ -36,7 +36,7 @@ export default function DialogDemo() { - + diff --git a/apps/design-system/registry/default/example/disabled-focusable.tsx b/apps/design-system/registry/default/example/disabled-focusable.tsx new file mode 100644 index 00000000000..6e6cad44994 --- /dev/null +++ b/apps/design-system/registry/default/example/disabled-focusable.tsx @@ -0,0 +1,26 @@ +'use client' + +import { CirclePause } from 'lucide-react' +import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui' + +const UNAVAILABLE_REASON = 'Pausing is unavailable on High Availability projects' + +export default function DisabledFocusable() { + const unavailable = true + + return ( + + + + + {UNAVAILABLE_REASON} + + ) +} diff --git a/apps/design-system/registry/default/example/disabled-unavailable-with-notice.tsx b/apps/design-system/registry/default/example/disabled-unavailable-with-notice.tsx new file mode 100644 index 00000000000..f549173738d --- /dev/null +++ b/apps/design-system/registry/default/example/disabled-unavailable-with-notice.tsx @@ -0,0 +1,50 @@ +'use client' + +import { CirclePause } from 'lucide-react' +import { + Button, + Card, + CardContent, + CardHeader, + CardTitle, + Tooltip, + TooltipContent, + TooltipTrigger, +} from 'ui' +import { Admonition } from 'ui-patterns/Admonition' + +const UNAVAILABLE_REASON = 'Pausing is unavailable on High Availability projects' + +export default function DisabledUnavailableWithNotice() { + const unavailable = true + + return ( + + + Pause project + + + + + + + + {UNAVAILABLE_REASON} + + + + ) +} diff --git a/apps/design-system/registry/default/example/drawer-demo.tsx b/apps/design-system/registry/default/example/drawer-demo.tsx index 1208680a3d0..f68c58951d4 100644 --- a/apps/design-system/registry/default/example/drawer-demo.tsx +++ b/apps/design-system/registry/default/example/drawer-demo.tsx @@ -67,9 +67,7 @@ export default function DrawerDemo() { return ( - +
@@ -121,7 +119,7 @@ export default function DrawerDemo() {
- + diff --git a/apps/design-system/registry/default/example/drawer-dialog.tsx b/apps/design-system/registry/default/example/drawer-dialog.tsx index b34a0df1ca9..b9473a1cba9 100644 --- a/apps/design-system/registry/default/example/drawer-dialog.tsx +++ b/apps/design-system/registry/default/example/drawer-dialog.tsx @@ -81,7 +81,9 @@ function ProfileForm({ className }: React.ComponentProps<'form'>) { - + ) } diff --git a/apps/design-system/registry/default/example/empty-state-missing-route.tsx b/apps/design-system/registry/default/example/empty-state-missing-route.tsx index 179294876f9..78e030c09b0 100644 --- a/apps/design-system/registry/default/example/empty-state-missing-route.tsx +++ b/apps/design-system/registry/default/example/empty-state-missing-route.tsx @@ -13,7 +13,7 @@ export default function EmptyStateMissingRoute() { title="Unable to find bucket" description={`${bucketId ? `The bucket “${bucketId}”` : 'This bucket'} doesn’t seem to exist.`} > - diff --git a/apps/design-system/registry/default/example/field-demo.tsx b/apps/design-system/registry/default/example/field-demo.tsx index 45cad3c1f18..37aefcd23db 100644 --- a/apps/design-system/registry/default/example/field-demo.tsx +++ b/apps/design-system/registry/default/example/field-demo.tsx @@ -113,10 +113,10 @@ export default function FieldDemo() { - - + diff --git a/apps/design-system/registry/default/example/field-responsive.tsx b/apps/design-system/registry/default/example/field-responsive.tsx index c59bbbeb254..4b4b3c2a439 100644 --- a/apps/design-system/registry/default/example/field-responsive.tsx +++ b/apps/design-system/registry/default/example/field-responsive.tsx @@ -45,10 +45,10 @@ export default function FieldResponsive() { - - + diff --git a/apps/design-system/registry/default/example/filter-bar-demo.tsx b/apps/design-system/registry/default/example/filter-bar-demo.tsx index 4bc48b1bfec..456f71a7945 100644 --- a/apps/design-system/registry/default/example/filter-bar-demo.tsx +++ b/apps/design-system/registry/default/example/filter-bar-demo.tsx @@ -25,9 +25,7 @@ function CustomDatePicker({ onChange, onCancel, search }: CustomOptionProps) { className="w-full" />
- +
{logoUrl && ( - +
- {form.formState.isDirty && ( - - )} + {form.formState.isDirty && } diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx index 090dce8da98..bcdd5452b22 100644 --- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx +++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx @@ -338,7 +338,6 @@ export default function FormPatternsSidePanel() { {logoUrl && ( - +
@@ -788,7 +783,6 @@ export default function FormPatternsSidePanel() { - } + actions={} /> @@ -61,11 +57,7 @@ export default function InnerSideMenuEmpty() { /> } - actions={ - - } + actions={} /> diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx index 41c6cb342b8..8e30f133cff 100644 --- a/apps/design-system/registry/default/example/input-otp-form.tsx +++ b/apps/design-system/registry/default/example/input-otp-form.tsx @@ -71,7 +71,9 @@ export default function InputOTPForm() { )} /> - + ) diff --git a/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx b/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx index 022667bee56..27b6763968d 100644 --- a/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx +++ b/apps/design-system/registry/default/example/keyboard-shortcut-demo.tsx @@ -11,10 +11,7 @@ export default function KeyboardShortcutDemo() {
-
diff --git a/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx b/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx index 22713eafc1e..e105df21cda 100644 --- a/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx +++ b/apps/design-system/registry/default/example/keyboard-shortcut-inline.tsx @@ -5,10 +5,7 @@ export default function KeyboardShortcutInline() {
-
diff --git a/apps/design-system/registry/default/example/multi-select-badge-limit-wrap.tsx b/apps/design-system/registry/default/example/multi-select-badge-limit-wrap.tsx index a16ac5b47d4..7b1b8b283ad 100644 --- a/apps/design-system/registry/default/example/multi-select-badge-limit-wrap.tsx +++ b/apps/design-system/registry/default/example/multi-select-badge-limit-wrap.tsx @@ -23,7 +23,6 @@ export default function MultiSelectDemo() { label="Select fruits" persistLabel badgeLimit="wrap" - showIcon={false} deletableBadge={false} /> diff --git a/apps/design-system/registry/default/example/multi-select-badge-limit.tsx b/apps/design-system/registry/default/example/multi-select-badge-limit.tsx index 9ae4e0d6070..41110e14a05 100644 --- a/apps/design-system/registry/default/example/multi-select-badge-limit.tsx +++ b/apps/design-system/registry/default/example/multi-select-badge-limit.tsx @@ -16,18 +16,13 @@ export default function MultiSelectDemo() { return (
- Limit: {limit} -
diff --git a/apps/design-system/registry/default/example/multi-select-deletable-badge.tsx b/apps/design-system/registry/default/example/multi-select-deletable-badge.tsx index daf693d3edf..21950f05e61 100644 --- a/apps/design-system/registry/default/example/multi-select-deletable-badge.tsx +++ b/apps/design-system/registry/default/example/multi-select-deletable-badge.tsx @@ -17,7 +17,6 @@ export default function MultiSelectDemo() { label="Select fruits" deletableBadge badgeLimit="wrap" - showIcon={false} /> diff --git a/apps/design-system/registry/default/example/multi-select-demo.tsx b/apps/design-system/registry/default/example/multi-select-demo.tsx index fafed2a1c4c..65668b5e314 100644 --- a/apps/design-system/registry/default/example/multi-select-demo.tsx +++ b/apps/design-system/registry/default/example/multi-select-demo.tsx @@ -25,12 +25,7 @@ export default function MultiSelectDemo() { return ( - + {fruits.map(({ value, isDisabled }) => ( diff --git a/apps/design-system/registry/default/example/multi-select-in-dialog.tsx b/apps/design-system/registry/default/example/multi-select-in-dialog.tsx index a5975fa3aa1..9e742d41b24 100644 --- a/apps/design-system/registry/default/example/multi-select-in-dialog.tsx +++ b/apps/design-system/registry/default/example/multi-select-in-dialog.tsx @@ -49,7 +49,7 @@ export default function MultiSelectDemo() {
- + {fruits.map(({ value, isDisabled }) => ( @@ -63,7 +63,7 @@ export default function MultiSelectDemo() {
- +
diff --git a/apps/design-system/registry/default/example/multi-select-inline-search-input.tsx b/apps/design-system/registry/default/example/multi-select-inline-search-input.tsx index 775762a39f5..08efdb9d7f0 100644 --- a/apps/design-system/registry/default/example/multi-select-inline-search-input.tsx +++ b/apps/design-system/registry/default/example/multi-select-inline-search-input.tsx @@ -18,7 +18,6 @@ export default function MultiSelectDemo() { label="Select fruits" deletableBadge badgeLimit="wrap" - showIcon={false} /> diff --git a/apps/design-system/registry/default/example/multi-select-without-icon.tsx b/apps/design-system/registry/default/example/multi-select-without-icon.tsx new file mode 100644 index 00000000000..64ff5fd4180 --- /dev/null +++ b/apps/design-system/registry/default/example/multi-select-without-icon.tsx @@ -0,0 +1,25 @@ +import { useState } from 'react' +import { + MultiSelector, + MultiSelectorContent, + MultiSelectorItem, + MultiSelectorList, + MultiSelectorTrigger, +} from 'ui-patterns/multi-select' + +export default function MultiSelectWithoutIcon() { + const [selectedValues, setSelectedValues] = useState([]) + + return ( + + + + + Apple + Banana + Cherry + + + + ) +} diff --git a/apps/design-system/registry/default/example/page-header-demo.tsx b/apps/design-system/registry/default/example/page-header-demo.tsx index 87fc94bcbb8..ccbd20a1d51 100644 --- a/apps/design-system/registry/default/example/page-header-demo.tsx +++ b/apps/design-system/registry/default/example/page-header-demo.tsx @@ -27,9 +27,7 @@ export default function PageHeaderDemo() { - + diff --git a/apps/design-system/registry/default/example/page-layout-auth-emails.tsx b/apps/design-system/registry/default/example/page-layout-auth-emails.tsx index 85109da874d..80edcdca5ba 100644 --- a/apps/design-system/registry/default/example/page-layout-auth-emails.tsx +++ b/apps/design-system/registry/default/example/page-layout-auth-emails.tsx @@ -197,7 +197,7 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) { layout="horizontal" className="mb-4" actions={ - } @@ -283,9 +283,7 @@ function TemplatesPage({ onNavigateToSmtp }: { onNavigateToSmtp: () => void }) { })} {notificationsForm.formState.isDirty && ( - + )} - )} + {form.formState.isDirty && } diff --git a/apps/design-system/registry/default/example/page-layout-detail.tsx b/apps/design-system/registry/default/example/page-layout-detail.tsx index da13e6047dc..3042126a162 100644 --- a/apps/design-system/registry/default/example/page-layout-detail.tsx +++ b/apps/design-system/registry/default/example/page-layout-detail.tsx @@ -82,9 +82,7 @@ export default function PageLayoutDetail() {

March 15, 2024

- +
@@ -114,9 +112,7 @@ export default function PageLayoutDetail() {

$234.50

- +
@@ -146,9 +142,7 @@ export default function PageLayoutDetail() {

12/2025

- +
diff --git a/apps/design-system/registry/default/example/page-layout-edge-function.tsx b/apps/design-system/registry/default/example/page-layout-edge-function.tsx index a3b250d71e0..8531092c35e 100644 --- a/apps/design-system/registry/default/example/page-layout-edge-function.tsx +++ b/apps/design-system/registry/default/example/page-layout-edge-function.tsx @@ -234,9 +234,7 @@ export default function PageLayoutEdgeFunction() { - + @@ -426,7 +424,7 @@ function OverviewPage() { Errors since last deploy - @@ -704,7 +702,7 @@ function CodePage() {

Files

- diff --git a/apps/design-system/registry/default/example/page-layout-full-width.tsx b/apps/design-system/registry/default/example/page-layout-full-width.tsx index bc917a05cea..5ef64401c62 100644 --- a/apps/design-system/registry/default/example/page-layout-full-width.tsx +++ b/apps/design-system/registry/default/example/page-layout-full-width.tsx @@ -20,9 +20,7 @@ export default function PageLayoutFullWidth() { - + } > diff --git a/apps/design-system/registry/default/example/page-layout-logs-content.tsx b/apps/design-system/registry/default/example/page-layout-logs-content.tsx index 8879095879c..d842f6ef8fe 100644 --- a/apps/design-system/registry/default/example/page-layout-logs-content.tsx +++ b/apps/design-system/registry/default/example/page-layout-logs-content.tsx @@ -118,12 +118,8 @@ export function PageLayoutLogsContent() { />
- - + +
diff --git a/apps/design-system/registry/default/example/page-layout-settings.tsx b/apps/design-system/registry/default/example/page-layout-settings.tsx index 85fb5a8d518..fe44d53ea7c 100644 --- a/apps/design-system/registry/default/example/page-layout-settings.tsx +++ b/apps/design-system/registry/default/example/page-layout-settings.tsx @@ -161,9 +161,7 @@ export default function PageLayoutSettings() { {refreshTokenForm.formState.isDirty && ( - + )} + )} + diff --git a/apps/design-system/registry/default/example/page-section-with-aside.tsx b/apps/design-system/registry/default/example/page-section-with-aside.tsx index bd6ae3f60e7..e0d91236bb4 100644 --- a/apps/design-system/registry/default/example/page-section-with-aside.tsx +++ b/apps/design-system/registry/default/example/page-section-with-aside.tsx @@ -21,9 +21,7 @@ export default function PageSectionWithAside() { - + diff --git a/apps/design-system/registry/default/example/radio-group-card-with-children.tsx b/apps/design-system/registry/default/example/radio-group-card-with-children.tsx index e4f1be820b1..74a9b98ed9a 100644 --- a/apps/design-system/registry/default/example/radio-group-card-with-children.tsx +++ b/apps/design-system/registry/default/example/radio-group-card-with-children.tsx @@ -1,6 +1,8 @@ import SVG from 'react-inlinesvg' import { RadioGroupCard, RadioGroupCardItem } from 'ui' +import { BASE_PATH } from '@/lib/constants' + export default function RadioGroupDemo() { const singleThemes = [ { name: 'Dark', value: 'dark' }, // Classic Supabase dark @@ -13,7 +15,7 @@ export default function RadioGroupDemo() { {singleThemes.map((theme) => ( - + ))} diff --git a/apps/design-system/registry/default/example/radio-group-form.tsx b/apps/design-system/registry/default/example/radio-group-form.tsx index 8893a529bdb..76beb6a4d15 100644 --- a/apps/design-system/registry/default/example/radio-group-form.tsx +++ b/apps/design-system/registry/default/example/radio-group-form.tsx @@ -76,7 +76,9 @@ export default function RadioGroupForm() { )} /> - + ) diff --git a/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx b/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx index d7a4aa06e3c..63d5a00a564 100644 --- a/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx +++ b/apps/design-system/registry/default/example/sheet-confirm-on-close-demo.tsx @@ -168,9 +168,7 @@ export default function SheetConfirmOnCloseDemo() { return ( <> - + @@ -210,10 +208,8 @@ export default function SheetConfirmOnCloseDemo() { - - + diff --git a/apps/design-system/registry/default/example/sonner-demo.tsx b/apps/design-system/registry/default/example/sonner-demo.tsx index 60df9fe7902..80fb5316663 100644 --- a/apps/design-system/registry/default/example/sonner-demo.tsx +++ b/apps/design-system/registry/default/example/sonner-demo.tsx @@ -4,7 +4,6 @@ import { Button } from 'ui' export default function SonnerDemo() { return ( + - - + - + + ) } diff --git a/apps/design-system/registry/default/example/sonner-upload.tsx b/apps/design-system/registry/default/example/sonner-upload.tsx index 6ccffee9a3b..8999fb811d2 100644 --- a/apps/design-system/registry/default/example/sonner-upload.tsx +++ b/apps/design-system/registry/default/example/sonner-upload.tsx @@ -60,7 +60,6 @@ export default function SonnerUpload() { return (
- + @@ -63,7 +63,7 @@ export default function TabsDemo() { - + diff --git a/apps/design-system/registry/default/example/textarea-with-button.tsx b/apps/design-system/registry/default/example/textarea-with-button.tsx index 05f3200e6c2..3ba8c27f845 100644 --- a/apps/design-system/registry/default/example/textarea-with-button.tsx +++ b/apps/design-system/registry/default/example/textarea-with-button.tsx @@ -4,7 +4,7 @@ export default function TextareaWithButton() { return (