Commit Graph

14 Commits

Author SHA1 Message Date
Alaister Young
ca2b50a0a7 chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the
Admonition module into one.

`src/admonition.tsx` was a back-compat shim re-exporting
`src/Admonition/`. Two ways to resolve one module is exactly what
produced the macOS self-import bug fixed in #48344, and the local
typecheck errors that #48374 worked around. This removes the shim and
standardizes on the PascalCase subpath, matching every other export in
the package.

**Changed:**

- Codemodded all 246 `ui-patterns/admonition` imports to
`ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio,
docs, www, design-system, and lite-studio)
- Pointed the 5 internal `'../admonition'` imports back at the
`'../Admonition'` directory

**Removed:**

- `packages/ui-patterns/src/admonition.tsx`, and its `./admonition`
entry in the exports map (regenerated with `pnpm gen:exports`)

## To test

- `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits
- `pnpm test:case-hazards` → passes
- `pnpm typecheck` → all 15 tasks green
- `pnpm --filter studio run lint:ratchet` → passes
- `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass

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

## Summary by CodeRabbit

* **Bug Fixes**
* Standardized Admonition component imports across the application and
documentation.
* Improved compatibility with case-sensitive environments by using the
canonical component path.
  * Removed the legacy Admonition import entry point.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
2026-07-29 00:48:56 +08:00
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 -->
2026-07-06 15:29:16 +02:00
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>
2026-06-16 23:59:58 +02:00
Gildas Garcia
8c6d5036ea chore: remove <Label> _Shadcn_ suffix (#45986)
## Problem

The `_Shadcn_` suffix isn't needed anymore on label component

## Solution

Remove it. No other changes

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

* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 15:55:33 +02:00
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"
/>
2026-05-15 14:55:37 +02:00
Ivan Vasilov
afd690ada5 chore: Migrate all apps to use Tailwind CSS configs (#45530)
This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).

The shared JS config will be migrated to CSS in a followup PR.

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

* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.

* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-07 17:18:15 +02:00
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
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