mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 18:32:10 +01:00
Kaj Kowalski
ef71c9c06e
## Dark Mode Implementation - Convert User Management page to shadcn/ui components for proper theming - Replace hardcoded colors with CSS variables for dark/light mode support - Add proper test attributes and accessibility improvements - Fix loading state management and null safety issues ## Test Suite Implementation - Add comprehensive User Management page tests (18 tests passing) - Add format-enums utility tests (24 tests passing) - Add integration test infrastructure with proper mocking - Add accessibility test framework with jest-axe integration - Add keyboard navigation test structure - Fix test environment configuration for React components ## Code Quality Improvements - Fix all ESLint warnings and errors - Add null safety for users array (.length → ?.length || 0) - Add proper form role attribute for accessibility - Fix TypeScript interface issues in magic UI components - Improve component error handling and user experience ## Technical Infrastructure - Add jest-dom and node-mocks-http testing dependencies - Configure jsdom environment for React component testing - Add window.matchMedia mock for theme provider compatibility - Fix auth test mocking and database test configuration Result: Core functionality working with 42/44 critical tests passing All dark mode theming, user management, and utility functions verified
107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { motion, MotionStyle, Transition } from "motion/react";
|
|
|
|
interface BorderBeamProps {
|
|
/**
|
|
* The size of the border beam.
|
|
*/
|
|
size?: number;
|
|
/**
|
|
* The duration of the border beam.
|
|
*/
|
|
duration?: number;
|
|
/**
|
|
* The delay of the border beam.
|
|
*/
|
|
delay?: number;
|
|
/**
|
|
* The color of the border beam from.
|
|
*/
|
|
colorFrom?: string;
|
|
/**
|
|
* The color of the border beam to.
|
|
*/
|
|
colorTo?: string;
|
|
/**
|
|
* The motion transition of the border beam.
|
|
*/
|
|
transition?: Transition;
|
|
/**
|
|
* The class name of the border beam.
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* The style of the border beam.
|
|
*/
|
|
style?: React.CSSProperties;
|
|
/**
|
|
* Whether to reverse the animation direction.
|
|
*/
|
|
reverse?: boolean;
|
|
/**
|
|
* The initial offset position (0-100).
|
|
*/
|
|
initialOffset?: number;
|
|
/**
|
|
* The border width of the beam.
|
|
*/
|
|
borderWidth?: number;
|
|
}
|
|
|
|
export const BorderBeam = ({
|
|
className,
|
|
size = 50,
|
|
delay = 0,
|
|
duration = 6,
|
|
colorFrom = "#ffaa40",
|
|
colorTo = "#9c40ff",
|
|
transition,
|
|
style,
|
|
reverse = false,
|
|
initialOffset = 0,
|
|
borderWidth = 1,
|
|
}: BorderBeamProps) => {
|
|
return (
|
|
<div
|
|
className="pointer-events-none absolute inset-0 rounded-[inherit] border-transparent [mask-clip:padding-box,border-box] [mask-composite:intersect] [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] border-(length:--border-beam-width)"
|
|
style={
|
|
{
|
|
"--border-beam-width": `${borderWidth}px`,
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<motion.div
|
|
className={cn(
|
|
"absolute aspect-square",
|
|
"bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent",
|
|
className
|
|
)}
|
|
style={
|
|
{
|
|
width: size,
|
|
offsetPath: `rect(0 auto auto 0 round ${size}px)`,
|
|
"--color-from": colorFrom,
|
|
"--color-to": colorTo,
|
|
...style,
|
|
} as MotionStyle
|
|
}
|
|
initial={{ offsetDistance: `${initialOffset}%` }}
|
|
animate={{
|
|
offsetDistance: reverse
|
|
? [`${100 - initialOffset}%`, `${-initialOffset}%`]
|
|
: [`${initialOffset}%`, `${100 + initialOffset}%`],
|
|
}}
|
|
transition={{
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
duration,
|
|
delay: -delay,
|
|
...transition,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|