mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 06:39:09 +03:00
Brian-AnandDanny White
f1082e28c7
## Problem Closes #31221. The applications and shared UI packages still import the former `framer-motion` package instead of Motion's React entry point. ## Solution Replace runtime imports, type imports, and three test mocks with `motion/react` across the consuming workspaces. Replace the seven direct dependency declarations with `motion: ^11.18.2`. Preserve the existing animation engine version and all other dependency resolutions, including the asynchronous `domMax` feature loader. Historical blog examples remain as published; `framer-motion` remains a transitive implementation dependency of Motion. ## Review instructions 1. Run `pnpm install --frozen-lockfile` and check the seven dependency replacements in the lockfile. 2. Open the WWW Auth page and Docs homepage at desktop and mobile widths, with normal and reduced motion preferences. 3. Open the mobile navigation, expand Product on WWW, and close the menu using Escape and the close button. 4. Check the existing animation components, shared form validation, and Studio tests for unchanged behavior. Validation: - Studio: 731 test files, 8,334 passing tests and one expected failure, with `--maxWorkers=4`. - Shared UI, UI patterns, WWW, and UI library: 615 passing tests. - `pnpm run typecheck --concurrency=1`: all 16 repository tasks pass. - All six application source lint scripts and lint ratchets pass; generated Docs example copies are excluded from local lint. - Repository Prettier source check, lockfile formatting, and case hazard check pass. - WWW: 10 existing end-to-end checks across nine pages. - Docs: 5 existing guide link and accessibility checks across Database and Auth. - WWW and Docs mobile navigation pass at desktop/mobile sizes with normal/reduced motion; SQL-to-REST translation tabs exercise the asynchronous feature loader without browser errors. - Frozen-lockfile installation passes; all existing package and snapshot resolutions are unchanged. - Learn and UI library command palettes open, filter results, and close with Escape without browser errors. - Independent code review finds no actionable defects. - `npm run build -- --filter=www --filter=docs --filter=studio --filter=learn --filter=library --concurrency=1 --continue=always`: all five affected applications build successfully (9 tasks including prerequisites); asset uploads disabled for local validation. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) - [x] If I wrote a new docs topic or edited an existing topic, I used the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs [style guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide) (no docs topics changed) --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
packages/ui
Supabase's shared React component library. Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS, and used across all Supabase apps.
Usage
Import from the 'ui' package alias:
import { Badge, Button, Input } from 'ui'
Some of the components have the _Shadcn_ suffix. These components should be preferred, they're in a process of replacing the other ones.
Utilities
// deep object merge (used for themes)
import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)
// copy-to-clipboard helper
Styling conventions
- Tailwind only — no inline styles or CSS modules.
- Prefer shadcn semantic pairs (
bg-card text-card-foreground,bg-muted text-muted-foreground,bg-tertiary text-tertiary-foreground) over hardcoded colors. Legacy utilities such astext-foreground-lightandborder-defaultare compatibility aliases only. - Control surface roles (
bg-field,bg-control-raised,border-control-hover; CSS--controlaliases raised) live inbuild/css/source/semantic.css. Prefer those over inventing fills. Legacybg-controlis still the accent wash alias. - Themes set the core
--hue(or the split--surface-hue/--primary-hue),--chroma,--surface,--foreground-lightness, and--contrastinputs, plus their--muted-foreground-leveland--tertiary-foreground-levelhierarchy. Semantic colors are derived from them in OKLCH;--contrast: 1is the baseline and the supported adjustment range is0.75to1.25. - The workspace root owns the actual
tailwind.config.js. The file in this package is a stub for IntelliSense only.