mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 21:59:16 +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>
94 lines
3.3 KiB
JSON
94 lines
3.3 KiB
JSON
{
|
|
"name": "ui",
|
|
"version": "0.0.0",
|
|
"main": "./index.tsx",
|
|
"types": "./index.tsx",
|
|
"license": "MIT",
|
|
"sideEffects": false,
|
|
"scripts": {
|
|
"preinstall": "npx only-allow pnpm",
|
|
"typecheck": "tsc --noEmit",
|
|
"generate-demo-tailwind-classes": "node internals/tokens/generate-demo-tailwind-classes.js",
|
|
"cleanse-css-for-tailwind": "node internals/tokens/cleanse-css-for-tailwind.js",
|
|
"transform-tokens": "node ./transformTokens.js",
|
|
"extract-design-tokens": "node internals/tokens/extract-design-tokens.js",
|
|
"generate-styles": "pnpm run extract-design-tokens && pnpm run transform-tokens && pnpm run cleanse-css-for-tailwind && pnpm run generate-demo-tailwind-classes",
|
|
"clean": "rimraf node_modules .turbo tsconfig.tsbuildinfo",
|
|
"test": "vitest",
|
|
"test:ci": "vitest --run --coverage",
|
|
"test:report": "open coverage/lcov-report/index.html"
|
|
},
|
|
"dependencies": {
|
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
"@radix-ui/react-aspect-ratio": "^1.0.3",
|
|
"@radix-ui/react-avatar": "^1.0.4",
|
|
"@radix-ui/react-checkbox": "^1.0.4",
|
|
"@radix-ui/react-collapsible": "^1.0.3",
|
|
"@radix-ui/react-context": "^1.0.1",
|
|
"@radix-ui/react-context-menu": "^2.1.5",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
"@radix-ui/react-hover-card": "^1.1.15",
|
|
"@radix-ui/react-label": "^2.0.2",
|
|
"@radix-ui/react-menubar": "^1.1.16",
|
|
"@radix-ui/react-navigation-menu": "^1.2.14",
|
|
"@radix-ui/react-popover": "^1.1.15",
|
|
"@radix-ui/react-progress": "^1.0.3",
|
|
"@radix-ui/react-radio-group": "^1.3.8",
|
|
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
"@radix-ui/react-select": "^2.2.6",
|
|
"@radix-ui/react-separator": "^1.1.2",
|
|
"@radix-ui/react-slider": "^1.3.6",
|
|
"@radix-ui/react-slot": "^1.2.3",
|
|
"@radix-ui/react-switch": "^1.0.3",
|
|
"@radix-ui/react-tabs": "^1.1.0",
|
|
"@radix-ui/react-toggle": "^1.1.10",
|
|
"@radix-ui/react-toggle-group": "^1.1.11",
|
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
"@tailwindcss/forms": "^0.5.0",
|
|
"@tailwindcss/typography": "^0.5.9",
|
|
"class-variance-authority": "^0.6.1",
|
|
"clsx": "^1.2.1",
|
|
"cmdk": "^1.1.1",
|
|
"color": "^4.2.3",
|
|
"date-fns": "^2.30.0",
|
|
"framer-motion": "^11.0.3",
|
|
"input-otp": "^1.2.3",
|
|
"lodash": "catalog:",
|
|
"lucide-react": "^0.436.0",
|
|
"prop-types": "^15.7.2",
|
|
"react": "catalog:",
|
|
"react-accessible-treeview": "^2.11.2",
|
|
"react-copy-to-clipboard": "^5.1.0",
|
|
"react-day-picker": "^9.11.1",
|
|
"react-dom": "catalog:",
|
|
"react-hook-form": "^7.45.0",
|
|
"react-intersection-observer": "^9.8.2",
|
|
"react-resizable-panels": "^4.6.5",
|
|
"recharts": "catalog:",
|
|
"sonner": "^1.5.0",
|
|
"tailwind-merge": "^1.13.2",
|
|
"tailwindcss": "catalog:",
|
|
"vaul": "^0.9.9"
|
|
},
|
|
"devDependencies": {
|
|
"@ctrl/tinycolor": "^3.4.0",
|
|
"@testing-library/jest-dom": "^6.6.0",
|
|
"@testing-library/react": "^16.0.0",
|
|
"@types/lodash": "4.17.5",
|
|
"@types/node": "catalog:",
|
|
"@types/react": "catalog:",
|
|
"@types/react-copy-to-clipboard": "^5.0.4",
|
|
"@types/react-dom": "catalog:",
|
|
"@vitest/coverage-v8": "^3.2.0",
|
|
"config": "workspace:*",
|
|
"glob": "^8.1.0",
|
|
"style-dictionary": "^3.7.1",
|
|
"tsconfig": "workspace:*",
|
|
"typescript": "catalog:",
|
|
"vite": "catalog:",
|
|
"vitest": "catalog:"
|
|
}
|
|
}
|