mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
562ab7abf7
Phase 0: Remove ~920 lines of dead code (ThemeBentoPicker, PromoDiscountBadge, AdminLayout, SettingsSidebar, MovingGradient, EmptyState, miniapp API, unused types/functions/transitions/skeleton helpers). Fix API barrel file (add 20 missing exports). Phase 1: Add ErrorBoundary (app/page/widget levels), centralize constants, add axios timeout, fix staleTime:0 in React Query. Phase 2: Consolidate hexToHsl, extract email validation, fix duplicate code. Phase 3: Fix auth race condition (await checkAdminStatus), memoize useCurrency, add WebSocket message validation. Phase 4: Extract useBranding, useFeatureFlags, useScrollRestoration from AppShell. Phase 5: Remove all eslint-disable react-hooks/exhaustive-deps (14 total), simplify logger, remove deprecated hooks (useBackButton, useTelegramDnd, useTelegramWebApp). Dependencies: React 19, react-router 7, zustand 5, i18next 25, react-i18next 16, eslint-plugin-react-refresh 0.5. Remove unused @lottiefiles/dotlottie-react. Convert vite manualChunks to function-based approach for react-router v7 compat. Lint: Fix logger.ts no-unused-expressions, fix react-refresh/only-export-components in 6 Radix primitive files (const re-exports → direct re-exports), fix WebSocketProvider exhaustive-deps. Result: 0 errors, 0 warnings. Add CLAUDE.md to .gitignore.
143 lines
3.1 KiB
TypeScript
143 lines
3.1 KiB
TypeScript
import type { Transition, Variants } from 'framer-motion';
|
|
|
|
// Spring transition for micro-interactions
|
|
export const springTransition: Transition = {
|
|
type: 'spring',
|
|
stiffness: 500,
|
|
damping: 30,
|
|
};
|
|
|
|
// Expo easing curve (Linear-style)
|
|
export const easeOutExpo = [0.16, 1, 0.3, 1] as const;
|
|
|
|
// Fade in animation
|
|
export const fadeIn: Variants = {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
};
|
|
|
|
export const fadeInTransition: Transition = {
|
|
duration: 0.2,
|
|
ease: easeOutExpo,
|
|
};
|
|
|
|
// Slide up animation (for page content, cards)
|
|
// Exit is instant to avoid visual glitches in Telegram Mini App
|
|
export const slideUp: Variants = {
|
|
initial: { opacity: 0, y: 8 },
|
|
animate: { opacity: 1, y: 0 },
|
|
exit: { opacity: 0, transition: { duration: 0 } },
|
|
};
|
|
|
|
export const slideUpTransition: Transition = {
|
|
duration: 0.2,
|
|
ease: easeOutExpo,
|
|
};
|
|
|
|
// Scale animation (for modals, dialogs)
|
|
export const scale: Variants = {
|
|
initial: { opacity: 0, scale: 0.95 },
|
|
animate: { opacity: 1, scale: 1 },
|
|
exit: { opacity: 0, scale: 0.95 },
|
|
};
|
|
|
|
export const scaleTransition: Transition = {
|
|
duration: 0.2,
|
|
ease: easeOutExpo,
|
|
};
|
|
|
|
// Stagger container for lists
|
|
export const staggerContainer: Variants = {
|
|
initial: {},
|
|
animate: {
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
delayChildren: 0.02,
|
|
},
|
|
},
|
|
exit: {
|
|
transition: {
|
|
staggerChildren: 0.02,
|
|
staggerDirection: -1,
|
|
},
|
|
},
|
|
};
|
|
|
|
// Stagger item (use with staggerContainer)
|
|
// Exit is instant to avoid visual glitches in Telegram Mini App
|
|
export const staggerItem: Variants = {
|
|
initial: { opacity: 0, y: 8 },
|
|
animate: { opacity: 1, y: 0 },
|
|
exit: { opacity: 0, transition: { duration: 0 } },
|
|
};
|
|
|
|
// Backdrop overlay
|
|
export const backdrop: Variants = {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
};
|
|
|
|
export const backdropTransition: Transition = {
|
|
duration: 0.15,
|
|
};
|
|
|
|
// Button press animation values
|
|
export const buttonTap = {
|
|
scale: 0.98,
|
|
};
|
|
|
|
export const buttonHover = {
|
|
scale: 1.02,
|
|
};
|
|
|
|
// Sheet/drawer slide up from bottom
|
|
export const sheetSlideUp: Variants = {
|
|
initial: { y: '100%' },
|
|
animate: { y: 0 },
|
|
exit: { y: '100%' },
|
|
};
|
|
|
|
export const sheetTransition: Transition = {
|
|
type: 'spring',
|
|
damping: 30,
|
|
stiffness: 400,
|
|
};
|
|
|
|
// Tooltip animation
|
|
export const tooltip: Variants = {
|
|
initial: { opacity: 0, scale: 0.96, y: 2 },
|
|
animate: { opacity: 1, scale: 1, y: 0 },
|
|
exit: { opacity: 0, scale: 0.96, y: 2 },
|
|
};
|
|
|
|
export const tooltipTransition: Transition = {
|
|
duration: 0.15,
|
|
ease: easeOutExpo,
|
|
};
|
|
|
|
// Dropdown menu animation
|
|
export const dropdown: Variants = {
|
|
initial: { opacity: 0, scale: 0.96, y: -4 },
|
|
animate: { opacity: 1, scale: 1, y: 0 },
|
|
exit: { opacity: 0, scale: 0.96, y: -4 },
|
|
};
|
|
|
|
export const dropdownTransition: Transition = {
|
|
duration: 0.15,
|
|
ease: easeOutExpo,
|
|
};
|
|
|
|
// Command palette animation
|
|
export const commandPalette: Variants = {
|
|
initial: { opacity: 0, scale: 0.98 },
|
|
animate: { opacity: 1, scale: 1 },
|
|
exit: { opacity: 0, scale: 0.98 },
|
|
};
|
|
|
|
export const commandPaletteTransition: Transition = {
|
|
duration: 0.15,
|
|
ease: easeOutExpo,
|
|
};
|