mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 05:39:11 +03:00
Alaister YoungandAlaister Young
c31230a90e
Remove `@headlessui/react` as a direct dependency from both `apps/studio` and `packages/ui`. It's incompatible with React 19 (at the pinned v1 version) and overlaps with our existing Radix/shadcn primitives. The only usage was the `<Transition>` component in 3 files + a dead `Overlay` component in `packages/ui`. **Removed:** - `@headlessui/react` from `apps/studio/package.json` and `packages/ui/package.json` - Dead `packages/ui/src/lib/Overlay/` directory (not exported or imported anywhere) **Changed:** - `ChooseFunctionForm.tsx` — replaced `Transition` with a shadcn `Accordion` for the "View definition" toggle - `FileExplorerColumn.tsx` — replaced `Transition` with `framer-motion` `AnimatePresence` for drag-over overlay - `PreviewPane.tsx` — removed `Transition` wrapper entirely (wasn't visually animating on prod), replaced with simple conditional render Note: `@headlessui/react` will remain in `pnpm-lock.yaml` as a transitive dependency of `@graphiql/react` and `@graphiql/plugin-doc-explorer` — that's expected and not something we control. ## To test - **Triggers page** (`/dashboard/project/_/database/triggers`): Create or edit a trigger, click "Choose a function" to open the side panel. Click "View definition" on a function row — the SQL definition should expand/collapse with a smooth height animation. Clicking the row itself should still select the function. - **Storage explorer** (`/dashboard/project/_/storage/buckets/<bucket>`): Navigate into a folder, drag a file over the column — the drag overlay should fade in/out smoothly. - **Storage file preview** (`/dashboard/project/_/storage/buckets/<bucket>`): Click on a file — the preview pane should appear on the right (no animation, same as current prod behaviour). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced several transition wrappers with new animation/mounting behavior for overlays, preview panes, and drag-over UI to improve consistency and responsiveness. * Swapped the function-definition toggle for an Accordion and updated click handling to prevent accidental row selection. * Removed the legacy overlay component, its context, and associated overlay styling. * **Chores** * Removed HeadlessUI dependency from project packages. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Supabase UI Package
Figma-tokens setup
Tokens setup is based partly on blogpost on the Mirahi Digital Garden.
Transforms tokens stored on Figma Tokens using token-transformer and Style Dictionary to css-variables with references, and use them in your TailwindCSS environment with multiple themes.
Build all the styles files (css-variables and tailwind config)
npm run build-styles
This creates a directory called styles with the tokens and also CSS required.
Other examples
You can find other examples here by Jan Six
Adding new themes/sets
Add new sets by extending the scripts in package.json. Currently theme sets derive from exported/[set name] but can come from anywhere.
Adding a new set can be done with the following:
// package.json
//..
"build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json global,exported/light,theme global",
// add a new line like this:
"build-transform-new": "npx token-transformer tokens.json styles/tokens/02_themes/new.json global,new,theme global",
//..
// append the new theme/set command to end of the build-transform command
"build-transform": "npm run build-transform-global && npm run build-transform-typography && npm run build-transform-dark && npm run build-transform-light && npm run build-transform-new",