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/.agents/skills/pm-the-docs/reference/write-the-docs-checklist.md b/.agents/skills/pm-the-docs/reference/write-the-docs-checklist.md index afe39dc5a9d..27aef67c5aa 100644 --- a/.agents/skills/pm-the-docs/reference/write-the-docs-checklist.md +++ b/.agents/skills/pm-the-docs/reference/write-the-docs-checklist.md @@ -17,7 +17,7 @@ _Self-serve first ([agent skills](../../../../apps/docs/CONTRIBUTING.md#ai-agent - The **why** is explicit: a reader learns what problem this solves and when to reach for it, not only the steps. - The content **type is deliberate** and consistent within the page. - **Audience and prerequisites** are stated up front. -- **Examples are runnable and have been tested** (commands, code, expected result) — verify with `/test-the-docs` against a Docker-isolated local stack, not production. +- **Examples are runnable and have been tested** (commands, code, expected result) - **Correct stage** like GA is stated; limitations are named honestly. - The page **lives in the right place** in the IA and links to and from related pages. - Terminology and formatting match existing docs (and style guide once it lands). @@ -48,8 +48,6 @@ _Skill:_ `/write-the-docs` to draft net-new content grounded in Linear and the c - [ ] E: Contribute technical depth and verify accuracy (APIs, limits, edge cases) - [ ] P: Call out the current stage inline and any known limitations -When the work is improving an existing page (restructure, reorder, connective text, brevity) rather than authoring net-new content, use `/edit-the-docs` instead of `/write-the-docs`. - ### 4. Self-review against the bar _Skills:_ `/review-the-docs` for [local self-review](../../review-the-docs/SKILL.md#local-self-review-no-open-pr) before opening the PR; `/test-the-docs` to run snippets and produce a verification report. @@ -81,4 +79,4 @@ _Skill:_ `/review-the-docs` to triage, classify, verify the build, and report. ## Resources -Skills for this checklist: [AI agent skills for docs authoring](../../../../apps/docs/CONTRIBUTING.md#ai-agent-skills-for-docs-authoring) (`/pm-the-docs`, `/ask-the-docs`, `/write-the-docs`, `/edit-the-docs`, `/test-the-docs`, `/review-the-docs`). +Skills for this checklist: [AI agent skills for docs authoring](../../../../apps/docs/CONTRIBUTING.md#ai-agent-skills-for-docs-authoring) (`/pm-the-docs`, `/ask-the-docs`, `/write-the-docs`, `/test-the-docs`, `/review-the-docs`). diff --git a/.coderabbit.yaml b/.coderabbit.yaml index 53ac941840b..3d201281eb4 100644 --- a/.coderabbit.yaml +++ b/.coderabbit.yaml @@ -69,6 +69,14 @@ reviews: for both runtimes until the final cleanup pass (tracked in FE-3106). Keep this a reminder to verify, not a hard blocker: if no mirror is required, say so briefly rather than forcing a change. + - path: 'apps/docs/content/**/*.mdx' + instructions: | + Flag style, terminology, and structure issues as usual. When a page has two or + more of them, add one comment pointing the author at the `/write-the-docs` skill + for new content or `/edit-the-docs` for an existing page (canonical files in + `.agents/skills/`); both apply apps/docs/CONTRIBUTING.md and + apps/docs/WORD_LIST.md. Skip that pointer on a single issue, so it stays a + signal that the author isn't using the skills rather than boilerplate. - path: '{apps,packages}/**/*.{tsx,jsx,css,mdx}' instructions: | When reviewing UI changes, flag these accessibility gaps. Comments are @@ -117,6 +125,10 @@ reviews: "read more", or "learn more" when it does not describe the destination. Skip if aria-label or wrapping context already names where the link goes. + - Color contrast: flag non-large informative text below 4.5:1 and large informative + text (at least 24px regular or 18.5px bold) below 3:1. Skip logotypes and + decorative text. Treat expressive text at 40px or larger as advisory rather + than blocking. # Applies our internal engineering skills (.agents/skills/) as CodeRabbit review # guidelines. The skills are the single source of truth — they are consumed diff --git a/.github/dependabot.yml b/.github/dependabot.yml index edf2b0976ec..ec6ffff5911 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -6,3 +6,22 @@ updates: interval: 'weekly' cooldown: default-days: 7 + # `pnpm-workspace.yaml`'s `minimumReleaseAge: 4320` (3 days) rejects any + # dependency version younger than 3 days old during `pnpm install`. Without + # a cooldown, Dependabot proposes the newest release the moment it's + # published, so its PRs are structurally guaranteed to fail CI/Vercel until + # the proposed version happens to age past the pnpm gate on its own. This + # cooldown holds Dependabot's proposals back until they've already cleared + # (with a one-day margin for scheduling/CI latency) pnpm's minimum release + # age, so the version pnpm sees is always old enough to be accepted. + - package-ecosystem: 'npm' + directories: + - '/' + - '/apps/*' + - '/packages/*' + - '/blocks/*' + - '/e2e/*' + schedule: + interval: 'weekly' + cooldown: + default-days: 4 diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c0d20008ea8..7cce99d31de 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,19 +1,47 @@ -## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. +## Problem -YES/NO +Describe what went wrong or what need emerged to justify this bug fix, feature, or change. +Link any relevant issues here. -## What kind of change does this PR introduce? - -Bug fix, feature, docs update, ... - -## What is the current behavior? - -Please link any relevant issues here. - -## What is the new behavior? +## Solution +Provide a brief description of the change and the key choices you made when architecting the solution. Feel free to include screenshots if it includes visual changes. -## Additional context + + + + +## Review instructions + +Provide a clear numbered procedure that the PR reviewer can walk through. + +1. For example, `Open the live and preview links side-by-side.` +2. For example, `See the issue is fixed.` + + +## Checklist + +Check all before review: + +- [ ] 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 references [WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md) and the docs [CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md) guide 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/library-tests.yml b/.github/workflows/library-tests.yml new file mode 100644 index 00000000000..9eca55ab6e4 --- /dev/null +++ b/.github/workflows/library-tests.yml @@ -0,0 +1,60 @@ +name: Library checks + +on: + # No branch filter: a stacked pull request targets the branch below it, and + # skipping its checks until the stack reaches master defeats the point. + pull_request: + paths: + - 'apps/ui-library/**' + - 'blocks/vue/**' + - 'packages/ui/**' + - 'packages/ui-patterns/**' + - 'packages/common/**' + - 'packages/icons/**' + - 'packages/shared-data/**' + - 'packages/api-types/**' + - 'packages/config/**' + - 'packages/tsconfig/**' + - 'packages/eslint-config-supabase/**' + - 'patches/**' + - 'pnpm-lock.yaml' + - 'pnpm-workspace.yaml' + - 'package.json' + - '.github/workflows/library-tests.yml' + +concurrency: + group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true + +permissions: + contents: read + +jobs: + test: + runs-on: blacksmith-4vcpu-ubuntu-2404 + steps: + - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0 + with: + persist-credentials: false + + - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9 + with: + run_install: false + + - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 + with: + node-version-file: '.nvmrc' + cache: 'pnpm' + + - run: pnpm install --frozen-lockfile + - run: pnpm --filter library test + - run: pnpm --filter library build:registry + - name: Check generated registry + run: | + registry_changes="$(git status --porcelain --untracked-files=all -- apps/ui-library/public/r)" + if [ -n "$registry_changes" ]; then + printf '%s\n' "$registry_changes" + echo 'Run pnpm --filter library build:registry and commit the generated registry files.' + exit 1 + fi + - run: pnpm --filter library build diff --git a/.github/workflows/studio-unit-tests.yml b/.github/workflows/studio-unit-tests.yml index 597cf609386..db87050763f 100644 --- a/.github/workflows/studio-unit-tests.yml +++ b/.github/workflows/studio-unit-tests.yml @@ -8,6 +8,8 @@ on: branches: [master, studio] paths: - 'apps/studio/**' + - 'packages/common/sentry.ts' + - 'packages/common/sentry.test.ts' - 'packages/ui/**' - 'packages/ui-patterns/**' - 'pnpm-lock.yaml' @@ -53,6 +55,8 @@ jobs: - 'packages/ui/**' - 'packages/ui-patterns/**' - 'apps/studio/**' + - 'packages/common/sentry.ts' + - 'packages/common/sentry.test.ts' - 'pnpm-lock.yaml' - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9 if: steps.filter.outputs.relevant == 'true' 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..321df0844af 100644 --- a/.github/workflows/www-tests.yml +++ b/.github/workflows/www-tests.yml @@ -5,12 +5,22 @@ on: branches: ['master'] paths: - 'apps/www/**/*.ts*' + - 'packages/common/sentry.ts' + - 'packages/common/sentry.test.ts' - '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 +43,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/.misspell-fixer.ignore b/.misspell-fixer.ignore index 1b26bc40f97..a09557b4b1e 100644 --- a/.misspell-fixer.ignore +++ b/.misspell-fixer.ignore @@ -1,3 +1,4 @@ ^./i18n ^./packages/api-types -^./apps/www/lib/redirects.js \ No newline at end of file +^./apps/www/lib/redirects.js +^./apps/studio/public/* \ No newline at end of file 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/CONTRIBUTING.md b/CONTRIBUTING.md index d8eba6749be..309727c5157 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -27,5 +27,9 @@ Prior to submitting your PR, please conduct the following pre-flight checks: - Run `npm run build` locally to ensure that your code builds successfully without having to wait on us to approve Vercel Preview deploys. - Ensure that the Prettier tests run successfully on your PR. +- If your PR changes docs content, use the docs authoring [agent skills](https://github.com/supabase/supabase/tree/master/.agents/skills). They apply the [docs style guide](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md) for you. + - `/write-the-docs` to draft a new page, or `/edit-the-docs` to revise an existing page. + - `/test-the-docs` to run any snippets you added. + - `/review-the-docs` to self-review before you open the PR. Running these before you create the PR will help reduce back and forth with the team. 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/(app)/page.tsx b/apps/design-system/app/(app)/page.tsx index c8a6e7d3d78..515bdceef09 100644 --- a/apps/design-system/app/(app)/page.tsx +++ b/apps/design-system/app/(app)/page.tsx @@ -30,7 +30,7 @@ export default function Home() {
-
+
@@ -44,7 +44,7 @@ export default function Home() {
-
+
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/command-menu.tsx b/apps/design-system/components/command-menu.tsx index e4731f2a055..1c1c0adebdf 100644 --- a/apps/design-system/components/command-menu.tsx +++ b/apps/design-system/components/command-menu.tsx @@ -108,10 +108,6 @@ export function CommandMenu({ ...props }: DialogProps) { Dark - runCommand(() => setTheme('classic-dark'))}> - - Classic dark - runCommand(() => setTheme('system'))}> 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/color-usage.mdx b/apps/design-system/content/docs/color-usage.mdx index b62441323eb..51e5b530f87 100644 --- a/apps/design-system/content/docs/color-usage.mdx +++ b/apps/design-system/content/docs/color-usage.mdx @@ -9,10 +9,18 @@ The shorthand utility classes below simplify our full color palette by providing Use accent text colors (e.g. text-destructive, text-warning) sparingly to avoid visual overload. +Use `text-primary` for readable branded text such as links, labels, and statuses. On light-theme +surfaces it meets the 4.5:1 WCAG AA requirement for normal text. Use `bg-brand-default` / +`border-brand-default` when you need the canonical bright Supabase green as a fill or border. + ## Background +Use `bg-brand-default` when the canonical Supabase green is required as a fill. The same +`brand-default` suffix applies to borders and other non-text utilities, such as +`border-brand-default`. + ### App backgrounds 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/components/chart.mdx b/apps/design-system/content/docs/components/chart.mdx index 671491da8e8..68e336bdcf2 100644 --- a/apps/design-system/content/docs/components/chart.mdx +++ b/apps/design-system/content/docs/components/chart.mdx @@ -49,27 +49,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When -Add the following colors to your CSS file in your app. - -```css -@layer base { - :root { - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; - } - - .dark { - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - } -} -``` +Chart colors are already defined for every app in `packages/config/css/charts.css`, which ships through the shared Tailwind config. It provides eight categorical slots, `--chart-1` through `--chart-8`, each with a matching `-fill` token, resolved per theme. See the [Charts](/docs/ui-patterns/charts) pattern page for the palette and the rules for assigning slots. ## Your First Chart @@ -327,25 +307,19 @@ Charts has built-in support for theming. You can use css variables (recommended) -Define your colors in your css file +Pick a slot from the shared palette -```css {6-7,14-15} title="globals.css" -@layer base { - :root { - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - // ... - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - } +```css title="packages/config/css/charts.css" +:root { + --chart-1: var(--color-brand-800); + --chart-2: var(--color-blue-900); + /* ... */ +} - .dark: { - --background: 240 10% 3.9%; - --foreground: 0 0% 100%; - // ... - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - } +[data-theme*='dark'] { + --chart-1: var(--color-brand-900); + --chart-2: var(--color-blue-1100); + /* ... */ } ``` @@ -355,28 +329,18 @@ Charts has built-in support for theming. You can use css variables (recommended) const chartConfig = { desktop: { label: 'Desktop', - color: 'hsl(var(--chart-1))', + color: 'var(--chart-1)', }, mobile: { label: 'Mobile', - color: 'hsl(var(--chart-2))', + color: 'var(--chart-2)', }, } satisfies ChartConfig ``` -We're wrapping the value in `hsl()` here because we define the colors without color space function. - -This is not required. You can use full color values, such as hex, hsl or oklch. - -```css ---chart-1: oklch(70% 0.227 154.59); -``` - -```tsx -color: "var(--chart-1)", -``` +The slots are full color values, so pass them as `var(--chart-1)`. Do not wrap them in `hsl()`; that form is for bare HSL triplets and produces an invalid color here. @@ -472,11 +436,11 @@ const chartConfig = { }, chrome: { label: 'Chrome', - color: 'hsl(var(--chart-1))', + color: 'var(--chart-1)', }, safari: { label: 'Safari', - color: 'hsl(var(--chart-2))', + color: 'var(--chart-2)', }, } satisfies ChartConfig ``` @@ -516,11 +480,11 @@ const chartData = [ const chartConfig = { chrome: { label: 'Chrome', - color: 'hsl(var(--chart-1))', + color: 'var(--chart-1)', }, safari: { label: 'Safari', - color: 'hsl(var(--chart-2))', + color: 'var(--chart-2)', }, } satisfies ChartConfig ``` diff --git a/apps/design-system/content/docs/components/combobox.mdx b/apps/design-system/content/docs/components/combobox.mdx index 21d55d94ae8..3ad33b0124e 100644 --- a/apps/design-system/content/docs/components/combobox.mdx +++ b/apps/design-system/content/docs/components/combobox.mdx @@ -19,18 +19,21 @@ See installation instructions for the [Popover](/docs/components/popover#install ```tsx 'use client' -import { Check, ChevronsUpDown } from 'lucide-react' +import { Check } from 'lucide-react' import * as React from 'react' - -import { Button } from '@/components/ui/button' import { + ComboboxTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, -} from '@/components/ui/command' -import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' + CommandList, + Popover, + PopoverContent, + PopoverTrigger, +} from 'ui' + import { cn } from '@/lib/utils' const frameworks = [ @@ -63,17 +66,15 @@ export function ComboboxDemo() { return ( - + diff --git a/apps/design-system/content/docs/fragments/multi-select.mdx b/apps/design-system/content/docs/fragments/multi-select.mdx index 1dcb568f23e..e20164f4593 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. @@ -54,16 +60,16 @@ creatable: `boolean` -### Badge Limit +### Badge limit badgeLimit: `number` | `"wrap"`. `badgeLimit` prop on the `MultiSelectorTrigger` component can be used to limit the number of badges displayed. -### Badge Limit="wrap" +### Wrapped badge limit -`badgeLimit` prop can also be "wrap" to wrap the badges to the next line. +Combine `badgeLimit` with `wrapBadges` to limit the number of badges and allow them to wrap onto additional lines. Use `badgeLimit="wrap"` to show and wrap every selected badge. diff --git a/apps/design-system/content/docs/theming.mdx b/apps/design-system/content/docs/theming.mdx index 91b144803c9..f5472815a76 100644 --- a/apps/design-system/content/docs/theming.mdx +++ b/apps/design-system/content/docs/theming.mdx @@ -5,11 +5,10 @@ description: Themes used in Supabase Design System currently takes into account varying themes. -Themes currently in development: +Available themes: - Light -- Dark (Classic dark) -- Deep dark +- Dark We also support a system theme, which will automatically switch between light and dark themes based on the user's system settings. diff --git a/apps/design-system/content/docs/typography.mdx b/apps/design-system/content/docs/typography.mdx index d6c36ca61c3..ec6302c945b 100644 --- a/apps/design-system/content/docs/typography.mdx +++ b/apps/design-system/content/docs/typography.mdx @@ -9,7 +9,9 @@ The shorthands below are composed of core [Tailwind utility classes](../docs/tai ## Shorthands -| Value | Usage | -| ------------------ | ---------------------------------------------------------------------------- | -| `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content | -| `text-brand-link` | Supabase green text that meets contrast requirements in light and dark modes | +| Value | Usage | +| ------------------ | -------------------------------------------------------------------------- | +| `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content | +| `text-primary` | Accessible Supabase green for readable branded text | + +`text-primary` is independent from `bg-brand-default`, `border-brand-default`, and other non-text brand utilities. Its light-mode value has at least 4.5:1 contrast against the light surfaces used by the apps, meeting WCAG AA for normal text. diff --git a/apps/design-system/content/docs/ui-patterns/charts.mdx b/apps/design-system/content/docs/ui-patterns/charts.mdx index ef2b6cf8ad9..db889d46815 100644 --- a/apps/design-system/content/docs/ui-patterns/charts.mdx +++ b/apps/design-system/content/docs/ui-patterns/charts.mdx @@ -23,6 +23,29 @@ Our charts use a combination of our own presentational components and [Recharts] 3. **Keep it simple**: Try to avoid abstracting the chart content too much. These components should cover most of your presentational needs. +## Color + +Series colors come from eight categorical slots, `--chart-1` through `--chart-8`, defined in +`packages/config/css/charts.css`. Assign them in order and never cycle: a ninth series folds +into "Other" or becomes small multiples. Each slot has a matching `-fill` token. Slots resolve +per theme, so pass `var(--chart-n)` and never branch on light/dark in code. Adjacent slots +alternate hue families and clear colorblind separation in both themes. + +Reference lines use `--chart-reference`. Headroom, idle and unused capacity use `--chart-muted`. +Directional pairs use `--chart-in` / `--chart-out` so read and write keep the same hue across +charts. + +Status colors (`--chart-status-success`, `-warning`, `-destructive`, each with a `-muted` tier) +are reserved for state and always ship with an icon or label. Never use one as a series color: +amber on a neutral metric reads as a problem. Warm hues are otherwise limited to tomato, slot 5, +because no amber or yellow step is legible on the dark surface. + + + +Every slot stacked together, to check adjacent segments stay separable in both themes. + + + ## Examples ### Basic Chart Types 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/charts.ts b/apps/design-system/registry/charts.ts index 9a42e5095a0..a272b16eede 100644 --- a/apps/design-system/registry/charts.ts +++ b/apps/design-system/registry/charts.ts @@ -57,4 +57,20 @@ export const charts: Registry = [ category: 'Charts', subcategory: 'Composed', }, + { + name: 'chart-palette', + type: 'components:block', + registryDependencies: ['chart'], + files: ['block/chart-palette.tsx'], + category: 'Charts', + subcategory: 'Palette', + }, + { + name: 'chart-palette-stress', + type: 'components:block', + registryDependencies: ['chart'], + files: ['block/chart-palette-stress.tsx'], + category: 'Charts', + subcategory: 'Palette', + }, ] diff --git a/apps/design-system/registry/default/block/chart-bar-interactive.tsx b/apps/design-system/registry/default/block/chart-bar-interactive.tsx index 128664bb431..c235862f1a0 100644 --- a/apps/design-system/registry/default/block/chart-bar-interactive.tsx +++ b/apps/design-system/registry/default/block/chart-bar-interactive.tsx @@ -116,11 +116,11 @@ const chartConfig = { }, desktop: { label: 'Desktop', - color: 'hsl(var(--chart-1))', + color: 'var(--chart-1)', }, mobile: { label: 'Mobile', - color: 'hsl(var(--chart-2))', + color: 'var(--chart-2)', }, } satisfies ChartConfig diff --git a/apps/design-system/registry/default/block/chart-composed-basic.tsx b/apps/design-system/registry/default/block/chart-composed-basic.tsx index 99be1076b08..d185c5e79bb 100644 --- a/apps/design-system/registry/default/block/chart-composed-basic.tsx +++ b/apps/design-system/registry/default/block/chart-composed-basic.tsx @@ -52,11 +52,11 @@ export default function ComposedChartBasic() { }, performance: { label: 'Performance', - color: 'hsl(var(--chart-2))', + color: 'var(--chart-2)', }, efficiency: { label: 'Efficiency', - color: 'hsl(var(--chart-5))', + color: 'var(--chart-5)', }, } diff --git a/apps/design-system/registry/default/block/chart-palette-stress.tsx b/apps/design-system/registry/default/block/chart-palette-stress.tsx new file mode 100644 index 00000000000..740e5c882e6 --- /dev/null +++ b/apps/design-system/registry/default/block/chart-palette-stress.tsx @@ -0,0 +1,72 @@ +'use client' + +import { + Chart, + ChartBar, + ChartCard, + ChartContent, + ChartHeader, + ChartTitle, + type ChartBarTick, + type ChartConfig, +} from 'ui-patterns/Chart' + +const SERIES = [ + { key: 'postgres', label: 'Postgres' }, + { key: 'postgrest', label: 'PostgREST' }, + { key: 'reserved', label: 'Reserved' }, + { key: 'auth', label: 'Auth' }, + { key: 'storage', label: 'Storage' }, + { key: 'realtime', label: 'Realtime' }, + { key: 'cron', label: 'Cron' }, + { key: 'other', label: 'Other roles' }, +] + +const config: ChartConfig = Object.fromEntries( + SERIES.map((s, i) => [s.key, { label: s.label, color: `var(--chart-${i + 1})` }]) +) + +export default function ChartPaletteStress() { + const data: ChartBarTick[] = Array.from({ length: 40 }, (_, i) => { + const date = new Date() + date.setMinutes(date.getMinutes() - (40 - i) * 3) + const row: ChartBarTick = { timestamp: date.toISOString() } + + const trend = Math.sin((i / 40) * Math.PI * 2) + SERIES.forEach((s, idx) => { + const phase = Math.sin(i / 3.5 + idx * 1.7) + const jitter = Math.sin(i * 2.3 + idx * 0.9) * 1.5 + row[s.key] = Math.max(1, Math.round(5 + idx * 1.8 + phase * 3 + trend * 2 + jitter)) + }) + return row + }) + + return ( +
+ + + + + Client connections by role + + + +
+ s.key)} + config={config} + isStacked + isFullHeight + showGrid + showYAxis + YAxisProps={{ width: 36 }} + /> +
+ + + +
+ ) +} diff --git a/apps/design-system/registry/default/block/chart-palette.tsx b/apps/design-system/registry/default/block/chart-palette.tsx new file mode 100644 index 00000000000..8d44644e59d --- /dev/null +++ b/apps/design-system/registry/default/block/chart-palette.tsx @@ -0,0 +1,135 @@ +import { ReactNode } from 'react' + +const SLOTS = [1, 2, 3, 4, 5, 6, 7, 8] + +const STATUS = [ + { name: '--chart-status-success', muted: '--chart-status-success-muted', note: 'Healthy, ok' }, + { + name: '--chart-status-warning', + muted: '--chart-status-warning-muted', + note: 'Threshold breach', + }, + { + name: '--chart-status-destructive', + muted: '--chart-status-destructive-muted', + note: 'Error, failure', + }, +] + +const DEFAULTS = [ + { name: '--chart-in', note: 'Pinned: network in, disk read' }, + { name: '--chart-out', note: 'Pinned: network out, disk write' }, + { name: '--chart-reference', note: 'Reference lines, max values' }, + { name: '--chart-muted', note: 'Headroom, idle, unused capacity' }, +] + +function Swatch({ token, label }: { token: string; label: string }) { + return ( +
+
+ {label} +
+ ) +} + +function TokenCard({ + title, + token, + note, + children, +}: { + title: ReactNode + token: string + note?: string + children: ReactNode +}) { + return ( +
+
+
{title}
+ {token} +
+
{children}
+ {note &&

{note}

} +
+ ) +} + +function Section({ + title, + description, + children, + className, +}: { + title: string + description: string + children: ReactNode + className: string +}) { + return ( +
+
+

{title}

+

{description}

+
+
{children}
+
+ ) +} + +export default function ChartPalette() { + return ( +
+
+ {SLOTS.map((n) => ( + + + + + ))} +
+ +
+ {STATUS.map((d) => ( + + + + + ))} +
+ +
+ {DEFAULTS.map((d) => ( + + + + ))} +
+
+ ) +} 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/chart-tooltip-demo.tsx b/apps/design-system/registry/default/example/chart-tooltip-demo.tsx index 5fffac2424a..af4c7735696 100644 --- a/apps/design-system/registry/default/example/chart-tooltip-demo.tsx +++ b/apps/design-system/registry/default/example/chart-tooltip-demo.tsx @@ -32,8 +32,8 @@ export default function Component() { @@ -64,8 +64,8 @@ export default function Component() { label="Browser" hideLabel payload={[ - { name: 'Chrome', value: 1286, fill: 'hsl(var(--chart-3))' }, - { name: 'Firefox', value: 1000, fill: 'hsl(var(--chart-4))' }, + { name: 'Chrome', value: 1286, fill: 'var(--chart-3)' }, + { name: 'Firefox', value: 1000, fill: 'var(--chart-4)' }, ]} indicator="dashed" className="w-32" @@ -74,7 +74,7 @@ export default function Component() {
@@ -84,7 +84,7 @@ export default function Component() { 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-demo.tsx b/apps/design-system/registry/default/example/combobox-demo.tsx index 5216f8b4ada..280d9b772b5 100644 --- a/apps/design-system/registry/default/example/combobox-demo.tsx +++ b/apps/design-system/registry/default/example/combobox-demo.tsx @@ -1,9 +1,9 @@ 'use client' -import { Check, ChevronsUpDown } from 'lucide-react' +import { Check } from 'lucide-react' import * as React from 'react' import { - Button, + ComboboxTrigger, Command, CommandEmpty, CommandGroup, @@ -47,18 +47,15 @@ export default function ComboboxDemo() { return ( - + diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx index a0a71ccd955..44545f313a2 100644 --- a/apps/design-system/registry/default/example/combobox-form.tsx +++ b/apps/design-system/registry/default/example/combobox-form.tsx @@ -1,11 +1,13 @@ 'use client' import { zodResolver } from '@hookform/resolvers/zod' -import { Check, ChevronsUpDown } from 'lucide-react' +import { Check } from 'lucide-react' +import { useState } from 'react' import { useForm } from 'react-hook-form' import { toast } from 'sonner' import { Button, + ComboboxTrigger, Command, CommandEmpty, CommandGroup, @@ -46,6 +48,7 @@ const FormSchema = z.object({ }) export default function ComboboxForm() { + const [open, setOpen] = useState(false) const form = useForm>({ resolver: zodResolver(FormSchema), }) @@ -69,28 +72,18 @@ export default function ComboboxForm() { render={({ field }) => ( Language - + - + @@ -105,6 +98,7 @@ export default function ComboboxForm() { key={language.value} onSelect={() => { form.setValue('language', language.value) + setOpen(false) }} > + 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 52aa14fc345..422c302aafa 100644 --- a/apps/design-system/registry/default/example/date-picker-form.tsx +++ b/apps/design-system/registry/default/example/date-picker-form.tsx @@ -8,6 +8,7 @@ import { Button, Calendar, Form, + FormControl, FormDescription, FormField, FormItem, @@ -53,11 +54,13 @@ export default function DatePickerForm() { Date of birth - - - {field.value ? format(field.value, 'PPP') : 'Pick a date'} - - + + + + {field.value ? format(field.value, 'PPP') : 'Pick a date'} + + + )} /> - + ) 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 c3e734a6d7e..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 && ( - +
@@ -786,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..fae3733b2ec 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 @@ -1,4 +1,6 @@ +import { Minus, Plus } from 'lucide-react' import { useState } from 'react' +import { Button } from 'ui' import { MultiSelector, MultiSelectorContent, @@ -15,31 +17,42 @@ export default function MultiSelectDemo() { 'Date', 'Elderberrie', ]) + const [limit, setLimit] = useState(3) return ( - - - - - Apple - Banana - Cherry - Date - Elderberrie - Fig - Grape - Kiwi - Mango - Strawberry - - - +
+
+ + Limit: {limit} + +
+ + + + + Apple + Banana + Cherry + Date + Elderberrie + Fig + Grape + Kiwi + Mango + Strawberry + + + +
) } 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..431de74c788 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 - @@ -437,7 +435,7 @@ function OverviewPage() {