refactor(ui): extract shared kinetic copy - #302
Conversation
The account panel owned a reusable line transition inside the feature. Move the existing renderer and styles into shared UI and keep account timing intact. Other product surfaces can now consume the same line-level motion boundary.
The extracted transition needs direct coverage outside the account panel. Assert both lines, phase classes, accessibility state, and timing indexes. The shared animation contract can now change without silent markup drift.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![fennoai[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
There was a problem hiding this comment.
Found one behavior issue that prevents the extracted component from working reliably as shared UI outside the account panel. git diff --check passed; local Vitest/typecheck/lint execution was unavailable because the mounted node_modules/.bin commands are not executable.
| opacity: 0; | ||
| letter-spacing: 0.075em; | ||
| transform: translate3d(0, 120%, 0); | ||
| animation: auth-copy-line-enter 620ms var(--auth-ease-enter) forwards; |
There was a problem hiding this comment.
The extracted shared component still depends on --auth-ease-enter, but that custom property is defined only on .auth-screen in account-panel.css. For any other consumer (including the planned Quick Start reuse), the unresolved var() invalidates the entire animation declaration, leaving the entering lines at opacity: 0 and translateY(120%) until the caller changes phase. Please define a fallback here (for example var(--auth-ease-enter, cubic-bezier(...))) or move the easing token into shared scope so KineticCopy works independently of the account-panel ancestor.
1 participant
将登录与注册首步的整句字幕动画从账号面板抽到
shared/ui，账号面板改为复用公共实现，现有文案、时序和视觉行为保持不变。Why
原实现把可复用的整句字幕渲染与 CSS 留在 feature 内，其他入口无法在不复制代码的前提下使用同一动效。
Changes
KineticCopy、phase 类型与对应 CSS 到共享 UI。Implementation
auth-copy-*class、动画时长、缓动和索引变量，账号面板自身继续管理轮播计时。Verification
npm test --prefix frontend -- src/shared/ui/kinetic-copy.test.tsx src/features/account-panel/index.test.tsx --configLoader runner：2 files / 24 tests passednpm run typecheck --prefix frontend：passedgit diff --check：passedScope
Related Issues
Closes #301