Commit Graph

10 Commits

Author SHA1 Message Date
Ivan Vasilov 97a8df0a23 feat: Handle the classic-dark theme in www and docs apps (#45214)
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.

To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.

* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-05 16:18:46 +02:00
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 -->
2026-05-05 08:09:31 +02:00
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>
2026-04-30 10:53:24 +00:00
Gildas Garcia a5b36d91de chore: migrate <Toggle> to <Switch> (#45314)
## Screenshots

### Row editor
Before:
<img width="683" height="74" alt="image"
src="https://github.com/user-attachments/assets/0416859b-e471-4f11-be28-33e1e0e03415"
/>

After:
<img width="675" height="65" alt="image"
src="https://github.com/user-attachments/assets/57ff796e-a67d-42f5-9fe0-f7be831aabc6"
/>

### Studio lite
Before:
<img width="673" height="400" alt="image"
src="https://github.com/user-attachments/assets/51ff1cd3-3cc5-4aa2-befb-4f345a933186"
/>

After:
<img width="644" height="402" alt="image"
src="https://github.com/user-attachments/assets/4605ad0b-656f-4da2-86d7-8ec32dc54855"
/>

### Database function
Before:
<img width="745" height="949" alt="image"
src="https://github.com/user-attachments/assets/49fba21d-0d28-4037-beb7-9ecb13f12fe7"
/>

After:
<img width="746" height="949" alt="image"
src="https://github.com/user-attachments/assets/d6755b04-df97-4195-b473-98a0269923d9"
/>

### Privacy settings (`www`)
Before:
<img width="1122" height="808" alt="image"
src="https://github.com/user-attachments/assets/02f82691-f045-4d59-b5a4-1ce635e3d9af"
/>

After:
<img width="1110" height="768" alt="image"
src="https://github.com/user-attachments/assets/ef2ee049-4cbe-4209-851a-2f024ab0063b"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Replaced legacy toggle controls across the app with a unified Switch
component for consistent interaction.
* Improved labels, sizes, spacing and aria relationships for clearer UI,
better accessibility, and more predictable behavior (settings, filters,
editors, realtime controls, privacy modal).
* Removed the old Toggle implementation, styles, and top-level exports
from the UI package to standardize controls.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-04-29 16:32:36 +02:00
Ivan Vasilov 308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
2026-04-28 11:33:53 +02:00
Gildas Garcia 416210d666 chore: remove _Shadcn_ suffix for Checkbox and Radio components (#45263)
## Problem

With #45211 and #45218 merged, we don't need the `_Shadcn_` suffix
anymore

## Solution

- [x] Remove the `_Shadcn_` suffix 
- [x] Update exports and imports 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Standardized UI component exports by removing legacy naming
conventions and providing direct imports for checkbox and radio group
components throughout the design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-27 11:07:06 +02:00
Ivan Vasilov 9fbe5152d9 chore: Remove dead code and unused files from the packages/ui (#45169)
# Changes
## Removed unused themes

- Deleted `concept-two.css` (unused) and `dark-combined.css` which was
identical to `dark.css`
- Removed the alias `deep-dark` to `dark` theme since it was unused

## Removed Figma token transform scripts

- Deleted the entire `internals/transform/` directory (~700 lines of JS)
— these scripts transformed Figma tokens into Tailwind variables but are
no longer needed
- Deleted `internals/tokens/cleanse-css-for-tailwind.js` and
`extract-design-tokens.js`
- Removed related dependencies from `package.json`
## Removed other unused files

- Deleted `shadcn.css` (unused)
- Deleted `tailwind-theming.md` (outdated doc),
https://supabase.com/design-system/docs/color-usage is a better resource
## Refactoring

- Extracted the `motion-safe-transition` Tailwind plugin into its own
file (`packages/config/tailwind-plugins/motion-safe-transition.js`)
- Renamed the tailwind class generation script for clarity
- Added stub `tailwind.config.js` files in packages that were missing
them, so VSCode IntelliSense works in those workspaces
- Updated `packages/ui/README.md` to reflect current usage patterns
(imports, styling conventions) instead of outdated Figma tokens workflow

# Testing
- Check all apps whether they have the correct themes with the correct
colors

[Linear
task](https://linear.app/supabase/issue/FE-3059/clean-up-unused-ui-build-artifacts-themes-and-figma-token-scripts)
2026-04-24 10:30:35 +02:00
Alaister Young 1b1d05ff96 chore: upgrade vite to v8 and vitest to v4 (#44833)
Upgrade vite and vitest to their latest major versions across the
monorepo, along with related packages.

**Changed:**
- `vite` catalog: `^7.3.2` → `^8.0.8` (Rolldown replaces esbuild/Rollup)
- `vitest` catalog: `^3.2.0` → `^4.1.4`
- `@vitejs/plugin-react`: `^4.3.4` → `^6.0.1`
- `@vitest/coverage-v8`: `^3.2.0` → `^4.1.4`
- `@vitest/ui`: `^3.2.0` → `^4.1.4`
- `vite-tsconfig-paths`: `^4.3.2` / `^5.1.4` → `^6.1.1`

**Pinned to vite 7:**
- `apps/lite-studio` — `@react-router/dev` hasn't declared vite 8
support yet
- `blocks/vue` — Nuxt plugins (`vite-plugin-inspect`, `vite-dev-rpc`,
`vite-hot-client`, `vite-plugin-vue-tracer`) haven't declared vite 8
support yet

**Test fixes for vitest 4 breaking changes:**
- **`apps/studio/lib/api/snippets.utils.test.ts`** — Replaced
`vi.mock('fs/promises')` automock with an explicit factory. Vitest 4's
automocking doesn't create mock functions for getter-based exports on
Node built-ins, so `mockedFS.access.mockResolvedValue` etc. were
`undefined`.
- **`apps/studio/lib/api/self-hosted/functions/index.test.ts`** —
Changed `mockReturnValue` to `mockImplementation(function() { ... })`
for a constructor mock. Vitest 4 no longer allows `mockReturnValue` when
the mock is called with `new`.
- **`apps/studio/tests/pages/api/mcp/index.test.ts`** — Changed arrow
function to regular `function` in `mockImplementation` for
`StreamableHTTPServerTransport`. Arrow functions can't be constructors,
and vitest 4 now enforces this.
- **`packages/ui-patterns/vitest.setup.ts`** — Changed `ResizeObserver`
mock from arrow function to regular `function` for the same constructor
enforcement reason. This was crashing Radix popover rendering in jsdom.

## To test

- `pnpm test:studio` — all 226 test files should pass
- `pnpm --filter ui-patterns vitest run` — all 183 tests should pass
- `pnpm --filter www test -- --run` — all 19 tests should pass
- `pnpm --filter ui vitest run` — all tests should pass
- `pnpm --filter dev-tools vitest run` — all tests should pass
- `pnpm --filter ai-commands vitest run` — all tests should pass

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Standardized and updated development tooling versions and version
sources for consistent installs across the repo (Vite, Vitest,
vite-tsconfig-paths and related plugins/catalog entries).
* **Tests**
* Improved test mocks and typings (updated mock
factories/implementations and tightened spy/type assertions) to increase
test reliability and compatibility with updated tooling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-04-16 00:13:48 +09:00
Ivan Vasilov 30c16da0e1 chore: Split turbo configs for apps into their own files (#44085)
This pull request refactors the Turbo build configuration by moving each
app's build settings from the root `turbo.json` file into their own
dedicated `turbo.jsonc` files within each app's directory. The root
configuration is simplified to only include generic tasks, improving
maintainability and clarity.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
  * Updated Turbo to v2.9.3 to improve build performance and stability.
* Reorganized and added per-app build pipeline configurations to
streamline builds and caching across the workspace.
* Removed a Tailwind container-queries plugin from one app's styling
setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-02 15:51:16 +02:00
Ivan Vasilov 681f0db4f2 feat: Add an app lite studio (#44272)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **New Features**
* Introduced new Lite Studio application with project management
dashboard
  * Added project overview page with status monitoring and quick actions
  * Added database browser and project settings management interfaces

* **Chores**
  * Added Docker support for containerized deployment
  * Added comprehensive project documentation
  * Updated workspace configuration

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-02 09:51:59 +02:00