mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
master
19 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Danny White
|
a31ca2bad0 |
fix(ui): make brand text readable across themes (#49871)
## What kind of change does this PR introduce? Bug fix and design-system update. Resolves DEPR-316. Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR (https://github.com/supabase/supabase/pull/50564) stacked on this one. ## What is the current behavior? `text-brand` resolves to the canonical bright brand green in places that need readable text, which fails WCAG AA on light surfaces. A separate `text-brand-display` token adds another green for large type. ## What is the new behavior? - `text-brand` maps to accessible `--primary` (light mode darkened to meet ~4.5:1 AA) - `--hue` / `--primary-hue` aligned to 157.5 - `text-brand-display` removed; former display callsites use `text-brand` - Bright fills/borders stay on `brand-default` - Design-system colour and typography docs updated | Before | After | | --- | --- | | <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13 09@2x" src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7" /> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42 05@2x" src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114" /> | | <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13 53@2x" src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e" /> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41 37@2x" src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc" /> | | <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16 30@2x" src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc" /> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42 52@2x" src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c" /> | | <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18 53@2x" src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427" /> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43 19@2x" src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b" /> | | <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32 04@2x" src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d" /> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44 13@2x" src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8" /> | | <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34 44@2x" src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79" /> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44 56@2x" src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1" /> | ## To test Test each callsite **in light mode** (dark mode is largely unchanged). ### WWW - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): “Scale to millions” uses readable brand text (display token is gone) - [Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers): small “Careers” eyebrow readable; green dividers stay bright `brand-default` - [Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us): email / policy links use readable brand text - [Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions): “Ask about early access to BYOC” readable ### Docs - [Docs homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs): “DOCS” wordmark and resource links readable - [Database overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview): nav / footer brand links readable - [JavaScript reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction): active sidebar treatment readable ### Design system - [Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography): documents `text-brand` only (no display) - [Colour usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage): `text-brand` vs `bg-brand-default` - [Design-system homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): brand text examples across themes ### Studio - [Auth providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright - [Database policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true): template hover text more legible - [Database connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections): “Live” status readable; animated dot stays bright green --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
476d4a5851 |
refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral |
||
|
Alaister Young
|
1966209483 |
chore(deps): upgrade vitest to v5 (#49994)
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the handful of things v5 turned into hard errors, and drops the `vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes redundant. **Changed:** - `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog) - `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies moved to module scope (v5 throws on nested calls). Affects the Studio and docs setup files and four Studio tests. - `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()` instead of assigning `global.navigator`, which now reaches jsdom's getter-only property. - `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used to leak a throwing mock for the rest of the file, which v5's coverage provider now trips over. A later test in the same file had been asserting the leak's side effect (valid JSON reported as invalid) and now asserts the correct behavior. - `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation resolves through a peer now, so it lands on each package's own `vitest` instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type errors in dev-tools after the reshuffle. - `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range. - `vite: catalog:` added to dev-tools, www, and common. Without it they resolved a newer vite than the catalog pin, which forked a second vitest instance in the lockfile. There's now one. - ai-commands custom matcher types use v5's `Matchers<R, T>` form. - 110 test files: `vi.clearAllMocks()` removed from `beforeEach`/`afterEach` hooks, along with hooks that only did that and the imports they left unused. Calls that also reset/restore mocks are untouched. Second commit, mechanical. **Added:** - `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter output there) **Removed:** - `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves tsconfig paths itself. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while 5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. **Perf** (local, medians of 3 runs, same machine): | Suite | v4.1.4 | v5.0.0 | |---|---|---| | studio | 144.1s | 141.7s (-2%) | | studio `--coverage` | 156.9s | 146.4s (-7%) | | ui-patterns | 6.27s | 5.07s (-19%) | | ui `--coverage` | 3.35s | 2.14s (-36%) | | www | 0.89s | 0.47s (-47%) | Studio is dominated by jsdom environment setup per file, which v5 doesn't change. `vitest doctor` recommends keeping the current pool config: the vm pools and `isolate: false` all break tests. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for vitest. - CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint should all be green. The lint ratchet was checked locally: warning counts on touched Studio files are identical to master. - `pnpm test:studio` locally passes with coverage (588 files, 6240 tests). - Open a Studio test that uses `toBeInTheDocument` in your editor and confirm no type errors on jest-dom matchers, in Studio and in `packages/dev-tools`. - Known pre-existing failures unrelated to this PR: one dev-tools test (`getEventCountBadge` capped pill) fails on master too. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Tests - Improved test coverage for JSON validation and mobile navigation behavior. - Updated test setup, cleanup, environment configuration, and matcher support across application and shared package suites. - Removed obsolete coverage for alternate MCP transport selection. ## Chores - Streamlined TypeScript path resolution and Vitest reporter output handling. - Updated testing libraries and Vitest tooling across documentation, Studio, website, and shared packages. - Added Vitest reporter output to ignored files. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Danny White
|
fb4c3ec6d4 |
feat(studio): add dev toolbar launcher to account settings menu (#49285)
## What kind of change does this PR introduce? Feature ## What is the current behavior? The dev toolbar is only discoverable via `window.devToolbar()` in the browser console, or by having your email on the `devToolbarDefaultOn` ConfigCat flag. Once enabled, Studio shows a floating trigger button. ## What is the new behavior? In local and staging Studio, the account/settings dropdown (avatar menu) includes a **Local tools** section above **Theme** with a **Dev toolbar** checkbox toggle. - **On**: shows the floating orb (persists via localStorage, same as `window.devToolbar()`) - **Off**: hides the orb and dismisses the toolbar Open the panel itself via the orb once it is visible. Production builds are unchanged (`isAvailable` is false and the menu item is hidden). | After | | --- | | <img width="226" height="204" alt="CleanShot 2026-08-20 at 12 46 38@2x" src="https://github.com/user-attachments/assets/c846b119-626d-48f5-9a02-aef4d006326c" /> | | <img width="558" height="1024" alt="CleanShot 2026-08-20 at 12 47 04@2x" src="https://github.com/user-attachments/assets/4b3dd22b-537b-4874-821d-c202033c4ad7" /> | ## Manual testing Run `pnpm dev:studio` and open http://localhost:8082. 1. **Find the entry point:** top-right avatar/settings menu → **Local tools** → **Dev toolbar** (above **Theme**). Should not appear in production builds. 2. **Turn it on:** check **Dev toolbar**. A green floating orb should appear (default bottom-right). 3. **Open the panel:** click the orb. The **Dev Toolbar** sheet should open with Events and Flags tabs. 4. **Event count:** navigate around Studio (e.g. open a project, switch pages). The orb badge should increment and stay readable in light and dark mode. 5. **Turn it off:** reopen the avatar menu and uncheck **Dev toolbar**. The orb and panel should disappear. 6. **Close vs hide:** with the toolbar on, open the sheet and use **Close** (X). The orb should remain; only the sheet closes. Optional: confirm `window.devToolbar()` in the browser console still enables the orb. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a Local tools option to enable the development toolbar when available. * Toolbar activation and dismissal preferences now persist between sessions. * Added clearer event-count badges with responsive sizing for larger counts. * **Improvements** * Simplified toolbar controls by removing the separate hide option. * Improved toolbar availability handling across local and production environments. * **Tests** * Expanded coverage for activation, persistence, visibility, and event-count badges. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Danny White <dnywh@users.noreply.github.com> Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com> |
||
|
Ivan Vasilov
|
2428bddcb5 |
chore: Bump vulnerable deps (#48178)
Fixes the following vulnerabilities: - https://github.com/supabase/supabase/security/dependabot/3963 - https://github.com/supabase/supabase/security/dependabot/3963 - https://github.com/supabase/supabase/security/dependabot/3964 - https://github.com/supabase/supabase/security/dependabot/3965 - https://github.com/supabase/supabase/security/dependabot/3966 - https://github.com/supabase/supabase/security/dependabot/3927 - https://github.com/supabase/supabase/security/dependabot/3955 - https://github.com/supabase/supabase/security/dependabot/3913 - https://github.com/supabase/supabase/security/dependabot/3972 - https://github.com/supabase/supabase/security/dependabot/3959 - https://github.com/supabase/supabase/security/dependabot/3960 - https://github.com/supabase/supabase/security/dependabot/3916 - https://github.com/supabase/supabase/security/dependabot/3918 - https://github.com/supabase/supabase/security/dependabot/3947 - https://github.com/supabase/supabase/security/dependabot/3948 - https://github.com/supabase/supabase/security/dependabot/3956 - https://github.com/supabase/supabase/security/dependabot/3957 - https://github.com/supabase/supabase/security/dependabot/3958 - https://github.com/supabase/supabase/security/dependabot/3917 - https://github.com/supabase/supabase/security/dependabot/3919 - https://github.com/supabase/supabase/security/dependabot/3970 - https://github.com/supabase/supabase/security/dependabot/3928 - https://github.com/supabase/supabase/security/dependabot/3949 - https://github.com/supabase/supabase/security/dependabot/3950 - https://github.com/supabase/supabase/security/dependabot/3973 - https://github.com/supabase/supabase/security/dependabot/3920 - https://github.com/supabase/supabase/security/dependabot/3951 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Updated the bundled `tar` dependency to a newer patch version for consistency and security across the workspace. * Added/adjusted overrides to pin a few transitive dependencies to specific versions. * Normalized workspace configuration formatting and made minor development configuration cleanup (no functional change). <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
76f44bfa71 |
Update Dev toolbar to support filtering feature flags (#48137)
## Context Only applies for local development - adds a way to filter feature flags in the dev toolbar <img width="1385" height="223" alt="image" src="https://github.com/user-attachments/assets/323d29f6-209e-4fc3-a7d0-4160b62b5707" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added search and filtering for feature flags from PostHog and ConfigCat. * Added a clear button for quickly resetting searches. * Added an informative empty state when no feature flags match the search. * Search terms reset automatically when switching between flag providers. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
24ce0ba5f8 |
chore: migrate repo to pnpm v11 (#48033)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Chore / dependency tooling update. ## What is the current behavior? The repo is pinned to pnpm 10.24.0. Closes https://linear.app/supabase/issue/FE-3673/migrate-the-repo-to-use-pnpm-v11. ## What is the new behavior? The repo is pinned to pnpm 11.13.1, pnpm v11 workspace settings are migrated to `allowBuilds`, and the Studio Dockerfile installs pnpm 11.13.1. ## Additional context Validated with `CI=true mise exec node@22 -- pnpm install --frozen-lockfile`, `mise exec node@22 -- pnpm run typecheck`, and `mise exec node@22 -- pnpm run lint`; full Prettier check still fails on existing generated docs/router files outside this migration. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Updated tooling requirements (pnpm **11.13.1**, Node **>=22.13**) and aligned container build tooling accordingly. * Adjusted package manager behavior (scoped registry override, update notifications disabled) and workspace build/engine validation settings. * **Maintenance** * Updated `clean` scripts across apps/packages to remove only build/cache artifacts (no longer delete installed dependencies). * Reduced Turbo `clean` task output to **errors-only** for cleaner logs. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Alaister Young
|
a3f2c4ffc1 |
chore(deps): upgrade to TypeScript 7 (native compiler) (#47757)
Upgrades the monorepo to TypeScript 7.0.2, released 2026-07-08. `tsc` is now the native Go compiler ([announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/)) — full turbo typecheck drops from ~56s to ~19s locally. TS 7.0 ships **without a programmatic API** (it lands in 7.1), so this uses Microsoft's recommended side-by-side setup: the `typescript` name resolves to `@typescript/typescript6` (the 6.0 API republished) for API consumers — typescript-eslint and Next.js build typechecking — while `@typescript/native` (the real `typescript@7.0.2`) owns the `tsc` bin that typecheck scripts run. Exactly one version of each is in the lockfile; nothing imports the native package as a library. When 7.1 + tool support lands we can collapse back to a single `typescript` dep in the catalog. **Changed:** - `pnpm-workspace.yaml`: catalog aliases for `typescript` / `@typescript/native` - 17 package.json files: `@typescript/native` added beside each `typescript` dep so every package's `tsc` is the native binary - `apps/studio/tsconfig.json`: exclude `dist/` (gitignored build output) from typechecking **Fixed** (real type errors TS 6 under-reported): - `packages/ui-patterns` CodeBlock: `borderLeft: null` → `undefined` (`CSSProperties` doesn't accept null) - `apps/www` CodeBlock: removed a JSX `@ts-ignore` comment that tsgo doesn't honor and fixed what it masked (untyped `.js` theme objects, possibly-undefined highlighter children) ⚠️ **Merge timing:** the new packages are inside pnpm's 3-day `minimumReleaseAge` window until ~July 11. Installs from the committed lockfile are unaffected (resolution is skipped), but anything that forces a re-resolution before then will fail — hold off merging until the window passes. Note for editors: the compat package has no `lib/tsserver.js`, so VS Code's "Use Workspace Version" won't work — use the bundled TS or the TypeScript Native Preview extension. ## To test - `pnpm install && pnpm typecheck` — all 15 tasks green, and `./node_modules/.bin/tsc --version` prints 7.0.2 - `pnpm lint --filter=studio` — typescript-eslint still parses (resolves the 6.0 API) - `pnpm build --filter=design-system` (or any Next app) — Next's tsconfig validation and build typecheck still work - CodeBlock rendering on www (syntax highlighting, line highlights with/without border) — the two fixes are behavior-neutral but worth an eyeball <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements / New Features** * Enhanced TypeScript tooling support across the workspace for smoother development builds and checks. * **Bug Fixes** * Code blocks render more reliably when content is empty or missing. * Highlighted code line styling applies more consistently. * **Maintenance** * Studio TypeScript builds now avoid including generated output (such as `dist`) during compilation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Gildas Garcia
|
cabe14e5ca |
chore: remove _Shadcn_ suffix from ui tabs components (#47628)
## Problem Now that we migrated all usages of the deprecated `Tabs` component, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR does, no visual nor functional changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized tab components across the app so pages and dialogs now use the same consistent tab UI. * Improved tab-based views in design, docs, studio, learn, and website experiences for a more uniform interface. * **Chores** * Updated shared UI exports to expose tab components directly, simplifying future usage across the product. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Jordi Enric
|
af324d4189 |
feat(dev-tools): rename devTelemetry() to devToolbar() and add devToolbarDefaultOn flag (#47494)
## What - Renames the `window.devTelemetry()` helper to `window.devToolbar()`. - Adds a `devToolbarDefaultOn` ConfigCat flag. When enabled, the dev toolbar shows automatically without the user having to run `window.devToolbar()` in the console. - The toolbar remains gated to `local` and `staging` environments only — the flag has no effect in production. ## Notes - The `localStorage` key (`dev-telemetry-toolbar-enabled`) is intentionally left unchanged so anyone who already enabled the toolbar keeps their setting. - Updated unit tests: renamed all references and added coverage for the `devToolbarDefaultOn` flag across local, staging, and prod. 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a new default-on option for the dev toolbar in local or staging environments when the feature flag is enabled. * The toolbar can now be opened from a new global trigger when available. * **Bug Fixes** * Improved toolbar enablement behavior across environments, including production, to avoid showing the trigger when it shouldn’t appear. * Updated cleanup behavior so the toolbar trigger is removed correctly after unmounting. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> |
||
|
Gildas Garcia
|
96d43099bb |
chore: refactor Button API so that it can be used a standard button (#46880)
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Gildas Garcia
|
0713a1efc1 |
chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem Now that we migrated old components to their new shadcn alternatives, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove it <img width="659" height="609" alt="image" src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f" /> |
||
|
Ivan Vasilov
|
0abe792889 |
chore: Migrate the main Tailwind JS config to CSS (#45686)
This PR migrates the JS config for Tailwind into a CSS config. As such, all variables have been defined as CSS variables and they're using the specialized Tailwind syntax for generating utility classes. Beside the migration, these changes were also added: - Added `tailwind.config.css` to few packages to make the Tailwind Intellisense work. - Migrated away from Radix style color classes to our defined classes, the values will remain the same. - Most of the CSS is generated by scripts, they'll be removed in next PRs. * Removed redundant `border-light` classes from several components since it was undefined. * Removed redundant `text-strong` classes from several components since it was undefined. How to test: - Open all apps, compare the UI (mainly colors) to builds from #45417 and try to find a difference. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Harmonized color variable usages and updated UI color references (affects palettes, charts, gradients, hero illustrations, and scrollbars). * Tweaked border, tab, and selection visuals across components. * **New Features** * Added a suite of theme animations and refined typography presets used by site prose and docs. * **Refactor** * Overhauled Tailwind/theme configuration and color token generation for more consistent theming. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
b554f58106 |
chore: migrate Input usages to Shadcn components (#45429)
## Problem We want to reduce the code we ship and maintain. ## Solution - Migrate old `Input` usage to the new Shadcn `input` This PR focuses on: - DevToolbar - design-system examples - `www` usages - `docs` usages ## Screenshots ### Docs: OAuth Apple Before: <img width="613" height="508" alt="image" src="https://github.com/user-attachments/assets/1d2d7726-cc5e-471f-a2c2-995b9d7f70ee" /> After: <img width="606" height="530" alt="image" src="https://github.com/user-attachments/assets/ca4f522f-de9c-4edf-966b-70cad5015d0c" /> NOTE: Also used the `DataInput` for the secret once the inputs are filled. ### Docs: Extensions Before: <img width="596" height="161" alt="image" src="https://github.com/user-attachments/assets/16d2f548-90dc-4987-9954-7c47ac58e76e" /> After: <img width="604" height="227" alt="image" src="https://github.com/user-attachments/assets/62c74102-98c6-47a6-b19b-cbf67dfad68f" /> ### WWW: Blog search Before: <img width="971" height="417" alt="image" src="https://github.com/user-attachments/assets/efb0307e-60b5-4d8f-9823-c8b8996cdf32" /> After: <img width="964" height="403" alt="image" src="https://github.com/user-attachments/assets/2dc0decd-b773-4bc6-9a72-c43f352f8cbf" /> ### WWW: Blog author search Before: <img width="953" height="337" alt="image" src="https://github.com/user-attachments/assets/1f629704-ab7d-4e4b-878e-1838ab16037f" /> After: <img width="1028" height="341" alt="image" src="https://github.com/user-attachments/assets/d8d54dcb-3c00-46ea-b97f-55c16cda917f" /> ### WWW: Assistant demo Before: <img width="421" height="715" alt="image" src="https://github.com/user-attachments/assets/bcc4a591-d53c-4202-acf8-2b3d6cfd52d2" /> After: <img width="435" height="731" alt="image" src="https://github.com/user-attachments/assets/8a57c5da-5c9e-474d-a89e-2835d3498aef" /> ### WWW: Integrations Before: <img width="740" height="599" alt="image" src="https://github.com/user-attachments/assets/cf3d3d8a-b247-4e20-b47d-11976ca49c57" /> After: <img width="911" height="492" alt="image" src="https://github.com/user-attachments/assets/dcb5b6e8-f4e2-4801-b390-352390a0b486" /> ### WWW: features Before: <img width="1098" height="491" alt="image" src="https://github.com/user-attachments/assets/ea3645c5-df03-4eb9-b28c-41018e01c41e" /> After: <img width="976" height="479" alt="image" src="https://github.com/user-attachments/assets/4439a38e-6342-42cd-a859-1e599a8cf0f4" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Adjusted input widths and spacing for more consistent search and form layouts. * **Refactor** * Standardized input components across apps and docs, and reimplemented search controls as composed input groups with dedicated icon/action areas. * **Chores** * Removed a deprecated legacy input variant along with its legacy styles and tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
56de26fe22 |
chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com> |
||
|
Jordi Enric
|
1545df1fe6 |
feat(dev-tools): add resource warnings tab to dev toolbar (#44857)
## Problem There was no way to trigger resource warning banners in the dev toolbar, making it hard to test different warning states (warn/critical, read-only mode) without manually mocking API responses or waiting for real exhaustion events. ## Fix - Adds an ExtraTab extension point to DevToolbar so Studio can inject custom tabs without coupling the package to app-specific hooks - Adds a ResourceWarningsTab in Studio with per-type off/warn/crit toggles for disk IO, CPU, memory, disk space, and auth rate limit warnings, plus a read-only mode toggle - Auth rate limit only exposes warn (no crit) since critical is not a valid API return value - The tab component is dynamically imported so it stays out of production bundles, controlled by the same NEXT_PUBLIC_ENVIRONMENT guard used by the toolbar ## How to test 1. Run Studio locally or open a Vercel preview deployment 2. Open the browser console and run window.devTelemetry() to enable the toolbar 3. Click the toolbar trigger to open the panel 4. Switch to the "Warnings" tab 5. Toggle any warning type to "Warn" or "Crit" and confirm the banner appears at the top of the page 6. Toggle read-only mode on and confirm the read-only banner appears 7. Click "Reset to real data" and confirm banners return to their actual state 8. Confirm the Auth Rate Limit row only has Off and Warn buttons (no Crit) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * New "Warnings" tab in the developer toolbar (enabled in local and staging) for managing resource warning banners. * Per-resource severity overrides (Off / Warning / Critical) with immediate preview in the toolbar. * Local "read-only" toggle to simulate read-only mode. * "Reset to real data" clears overrides, disables the local toggle, and refreshes server state. * Tab loads lazily and shows a disabled/loading state if org/project context is unavailable. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> |
||
|
kemal.earth
|
12989ba7fe |
feat(studio): prototype for telemetry entry point (#44720)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Some small styling brush ups and experimental for internal telemetry tools. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Developer toolbar redesigned with compact event/flag lists, “Copy JSON” per event, and a fixed draggable trigger that snaps and remembers its position. Toolbar is now available in staging and local environments. * **Bug Fixes** * ConfigCat readiness wait ensures flags load correctly. * Feature flag loading made resilient so one provider’s failure won’t block the other. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Sean Oliver <882952+seanoliver@users.noreply.github.com> |
||
|
Ivan Vasilov
|
bed5a96349 | chore: Bump Typescript to v6 (#44204) | ||
|
Sean Oliver
|
6bbe2c3297 |
feat(telemetry): add dev telemetry toolbar (#42259)
## Problem We need a local-only UI to inspect client and server telemetry events and override flags during development without touching non-local env behavior. This work is intended to be shared across Studio, Docs, and WWW. ## Changes - Introduced a shared `dev-tools` package with the Dev Telemetry Toolbar UI, trigger, and provider. - Wired the toolbar into Studio, Docs, and WWW app shells (local-only gating). - Added a local-only `devTelemetry()` opt-in with storage gating and SSE subscription. - Wired client PostHog events into a local listener and re-exported types. - Added local flag override cookie support in the UI and CODEOWNERS for the new package. - Added unit tests covering local/non-local behavior and flag utilities. ## Testing Manual (local only): - Start each app locally: `pnpm dev:studio`, `pnpm dev:docs`, `pnpm dev:www` - Open the app, run `devTelemetry()` in the browser console - Click around and confirm both client and server events appear (client will be page views only) - Verify feature flag overrides (PostHog + ConfigCat) persist and restore correctly - Confirm dismissing the toolbar clears local storage and hides the trigger Unblocked by https://github.com/supabase/platform/pull/29172 Resolves GROWTH-591 Demo: [github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b](https://github.com/user-attachments/assets/60b376db-7440-4ada-82f5-d1bd4af4db3b) Screenshots: <img width="1368" height="972" alt="1" src="https://github.com/user-attachments/assets/d2f20a0c-191f-4118-bb5e-15b25f5a54a9" /> <img width="1423" height="790" alt="2" src="https://github.com/user-attachments/assets/115598e2-7287-49bf-9ed7-71ecc679dee3" /> <img width="1433" height="882" alt="3" src="https://github.com/user-attachments/assets/51f666f2-9efc-410f-baec-378bdee9dbfe" /> <img width="608" height="483" alt="4" src="https://github.com/user-attachments/assets/584d6cf5-1b2f-4cee-9e6a-d55ce2e3bae5" /> <img width="628" height="305" alt="5" src="https://github.com/user-attachments/assets/991a9b39-578a-4565-b110-537a02040a53" /> <img width="659" height="447" alt="6" src="https://github.com/user-attachments/assets/95ef405c-fffa-44af-bf6a-f974b780e3fc" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Developer Toolbar (local only): view client/server telemetry, inspect events, and manage/override feature flags with persistent overrides, filtering, and clear/reload. * Client-side telemetry hooks: surface structured events to dev tooling for realtime inspection. * **Bug Fixes** * Fixed end-of-file newline in shared code. * **Chores** * Added dev-tools package, integrated provider and trigger across Studio, Docs, and marketing sites, and added CODEOWNERS entry. * **Tests** * Added comprehensive tests and test setup for the DevToolbar. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> |