@12-apps/ui 1.4.0 → 1.5.0

package/src/components/typography/Text/Text.test.stories.tsx

@@ -42,8 +42,8 @@ export const BasicInteraction: Story = {
     await userEvent.click(textElement);
 
     // Test text element maintains focus capabilities
-    textElement.focus();
-    expect(textElement).toHaveFocus();
+    await userEvent.click(textElement);
+    await waitFor(() => expect(textElement).toHaveFocus());
 
     // Test element can be selected
     await userEvent.tripleClick(textElement);
@@ -154,31 +154,31 @@ export const KeyboardNavigation: Story = {
     ];
 
     // Test initial focus
-    focusableTexts[0].focus();
-    expect(focusableTexts[0]).toHaveFocus();
+    await userEvent.click(focusableTexts[0]);
+    await waitFor(() => expect(focusableTexts[0]).toHaveFocus());
 
     // Test Tab navigation between elements
     await userEvent.tab();
-    expect(focusableTexts[1]).toHaveFocus();
+    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
 
     await userEvent.tab();
-    expect(focusableTexts[2]).toHaveFocus();
+    await waitFor(() => expect(focusableTexts[2]).toHaveFocus());
 
     // Test Shift+Tab backward navigation
     await userEvent.tab({ shift: true });
-    expect(focusableTexts[1]).toHaveFocus();
+    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
 
     // Test keyboard interaction doesn't lose focus
     await userEvent.keyboard('{Enter}');
-    expect(focusableTexts[1]).toHaveFocus();
+    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
 
     // Test Space key interaction
     await userEvent.keyboard(' ');
-    expect(focusableTexts[1]).toHaveFocus();
+    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
 
     // Test Escape key interaction
     await userEvent.keyboard('{Escape}');
-    expect(focusableTexts[1]).toHaveFocus();
+    await waitFor(() => expect(focusableTexts[1]).toHaveFocus());
   },
   render: () => (
     <Stack spacing={2}>
@@ -259,31 +259,30 @@ export const FocusManagement: Story = {
     const triggerButton = canvas.getByTestId('focus-trigger');
 
     // Test initial focus state
-    expect(focusableText).not.toHaveFocus();
+    await waitFor(() => expect(focusableText).not.toHaveFocus());
 
     // Test programmatic focus
     await userEvent.click(triggerButton);
     await waitFor(() => {
-      expect(focusableText).toHaveFocus();
+      await waitFor(() => expect(focusableText).toHaveFocus());
     });
 
-    // Test focus containment within container
-    focusableText.focus();
-    expect(document.activeElement).toBe(focusableText);
-
-    // Test focus visibility
-    expect(focusableText).toHaveFocus();
+    // Test focus containment within container. The activeElement read that used
+    // to sit here asserted exactly what the waitFor below does, one line earlier
+    // and without retrying.
+    await userEvent.click(focusableText);
+    await waitFor(() => expect(focusableText).toHaveFocus());
 
     // Test blur handling
     focusableText.blur();
-    expect(focusableText).not.toHaveFocus();
+    await waitFor(() => expect(focusableText).not.toHaveFocus());
   },
   render: function FocusManagementRender() {
     const [focusTarget, setFocusTarget] = React.useState<HTMLElement | null>(null);
 
     const handleFocus = () => {
       if (focusTarget) {
-        focusTarget.focus();
+        await userEvent.click(focusTarget);
       }
     };
 
@@ -325,9 +324,12 @@ export const ResponsiveDesign: Story = {
     expect(parseFloat(computedStyle.lineHeight)).toBeGreaterThan(1);
 
     // Test text wrapping behavior
+    // Wrapping is about the text surviving a narrow container, not about any
+    // particular pixel width: the whole string must still be rendered. The old
+    // `scrollWidth > 0` held for any element that exists at all.
     const longText = canvas.getByTestId('long-text');
     expect(longText).toBeInTheDocument();
-    expect(longText.scrollWidth).toBeGreaterThan(0);
+    expect(longText.textContent?.trim().length).toBeGreaterThan(0);
   },
   render: () => (
     <Box sx={{ width: '100%', maxWidth: '320px' }}>
@@ -504,18 +506,13 @@ export const Performance: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const startTime = globalThis.performance?.now() || Date.now();
-
-    // Test rendering many text elements
+    // All fifty render — the assertion the wall-clock budget that used to
+    // bracket this query was standing in for. The query ran against elements
+    // that were already on the page, so the number it produced measured the
+    // machine rather than the component.
     const textElements = canvas.getAllByText(/Performance text/);
     expect(textElements).toHaveLength(50);
 
-    const endTime = globalThis.performance?.now() || Date.now();
-    const renderTime = endTime - startTime;
-
-    // Performance should be reasonable (less than 100ms for 50 elements)
-    expect(renderTime).toBeLessThan(100);
-
     // Test large text content rendering
     const largeTextElement = canvas.getByTestId('large-content');
     expect(largeTextElement).toBeInTheDocument();

package/src/components/utility/AnimatedIcon/AnimatedIcon.animations.ts

@@ -0,0 +1,274 @@
+import { keyframes } from '@mui/material';
+
+export const rotateAnimation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+export const pulseAnimation = keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+
+export const translateAnimation = keyframes`
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+`;
+
+export const glowPulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+  50% {
+    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
+  }
+  100% {
+    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+`;
+
+// New animation keyframes
+export const bounceAnimation = keyframes`
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-20px);
+  }
+  60% {
+    transform: translateY(-10px);
+  }
+`;
+
+export const shakeAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+`;
+
+export const flipAnimation = keyframes`
+  0% {
+    transform: perspective(400px) rotateY(0);
+  }
+  100% {
+    transform: perspective(400px) rotateY(360deg);
+  }
+`;
+
+export const spinAnimation = keyframes`
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+`;
+
+export const fadeInOutAnimation = keyframes`
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+`;
+
+export const heartbeatAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+  }
+  5% {
+    transform: scale(1.25);
+  }
+  10% {
+    transform: scale(1);
+  }
+  15% {
+    transform: scale(1.25);
+  }
+  20% {
+    transform: scale(1);
+  }
+`;
+
+export const wobbleAnimation = keyframes`
+  0%, 100% {
+    transform: translateX(0) rotate(0deg);
+  }
+  15% {
+    transform: translateX(-10px) rotate(-5deg);
+  }
+  30% {
+    transform: translateX(8px) rotate(3deg);
+  }
+  45% {
+    transform: translateX(-6px) rotate(-3deg);
+  }
+  60% {
+    transform: translateX(4px) rotate(2deg);
+  }
+  75% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+`;
+
+export const morphAnimation = keyframes`
+  0%, 100% {
+    border-radius: 50%;
+    transform: scale(1);
+  }
+  25% {
+    border-radius: 30%;
+    transform: scale(1.1);
+  }
+  50% {
+    border-radius: 20%;
+    transform: scale(0.95);
+  }
+  75% {
+    border-radius: 40%;
+    transform: scale(1.05);
+  }
+`;
+
+export const swingAnimation = keyframes`
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+
+export const floatAnimation = keyframes`
+  0%, 100% {
+    transform: translateY(0) translateX(0);
+  }
+  33% {
+    transform: translateY(-10px) translateX(-5px);
+  }
+  66% {
+    transform: translateY(5px) translateX(5px);
+  }
+`;
+
+export const jelloAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1, 1);
+  }
+  25% {
+    transform: scale(0.9, 1.1);
+  }
+  50% {
+    transform: scale(1.1, 0.9);
+  }
+  75% {
+    transform: scale(0.95, 1.05);
+  }
+`;
+
+export const rippleAnimation = keyframes`
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+
+export const neonFlickerAnimation = keyframes`
+  0%, 100% {
+    opacity: 1;
+    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+  }
+  10% {
+    opacity: 0.8;
+    filter: brightness(0.8) drop-shadow(0 0 5px currentColor);
+  }
+  20% {
+    opacity: 1;
+    filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
+  }
+  30% {
+    opacity: 0.9;
+    filter: brightness(0.9) drop-shadow(0 0 8px currentColor);
+  }
+  40% {
+    opacity: 1;
+    filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
+  }
+  50% {
+    opacity: 0.95;
+    filter: brightness(1) drop-shadow(0 0 10px currentColor);
+  }
+  60% {
+    opacity: 0.85;
+    filter: brightness(0.85) drop-shadow(0 0 6px currentColor);
+  }
+  70% {
+    opacity: 1;
+    filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
+  }
+  80% {
+    opacity: 0.9;
+    filter: brightness(0.95) drop-shadow(0 0 9px currentColor);
+  }
+  90% {
+    opacity: 1;
+    filter: brightness(1.05) drop-shadow(0 0 11px currentColor);
+  }
+`;
+
+export const breatheAnimation = keyframes`
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(1);
+  }
+  50% {
+    transform: scale(1.05);
+    filter: brightness(1.2);
+  }
+`;
+
+// Size configurations

package/src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts

@@ -0,0 +1,231 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import {
+  bounceAnimation,
+  breatheAnimation,
+  fadeInOutAnimation,
+  flipAnimation,
+  floatAnimation,
+  glowPulseAnimation,
+  heartbeatAnimation,
+  jelloAnimation,
+  morphAnimation,
+  neonFlickerAnimation,
+  pulseAnimation,
+  rippleAnimation,
+  rotateAnimation,
+  shakeAnimation,
+  spinAnimation,
+  swingAnimation,
+  translateAnimation,
+  wobbleAnimation,
+} from './AnimatedIcon.animations';
+import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
+
+export const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {
+  sm: { size: 24, fontSize: 20 },
+  md: { size: 32, fontSize: 28 },
+  lg: { size: 48, fontSize: 44 },
+  xl: { size: 64, fontSize: 60 },
+};
+
+/**
+ * Every variant produces the same shorthand — keyframes, duration, easing,
+ * iteration count, delay — so only the three things that actually differ are
+ * tabulated. `scale` multiplies the caller's duration for the variants that
+ * read as slower than the rest.
+ */
+const ANIMATIONS: Record<string, { keyframes: string; easing: string; scale: number }> = {
+  rotate: { keyframes: `${rotateAnimation}`, easing: 'linear', scale: 1 },
+  pulse: { keyframes: `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },
+  translate: { keyframes: `${translateAnimation}`, easing: 'ease-in-out', scale: 1 },
+  bounce: { keyframes: `${bounceAnimation}`, easing: 'ease-in-out', scale: 1 },
+  shake: { keyframes: `${shakeAnimation}`, easing: 'ease-in-out', scale: 1 },
+  flip: { keyframes: `${flipAnimation}`, easing: 'ease-in-out', scale: 1 },
+  spin: { keyframes: `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },
+  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },
+  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },
+  wobble: { keyframes: `${wobbleAnimation}`, easing: 'ease-in-out', scale: 1 },
+  morph: { keyframes: `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },
+  swing: { keyframes: `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },
+  jello: { keyframes: `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },
+  float: { keyframes: `${floatAnimation}`, easing: 'ease-in-out', scale: 2 },
+  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: 'ease-in-out', scale: 2 },
+  breathe: { keyframes: `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },
+};
+
+const animationFor = (
+  variant: AnimationVariant,
+  duration: number,
+  delay: number,
+  loop: boolean,
+) => {
+  const spec = ANIMATIONS[variant];
+  if (!spec) return 'none';
+
+  const iterationCount = loop ? 'infinite' : '1';
+  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;
+};
+
+const SHADOWS: Record<string, (theme: Theme) => string> = {
+  soft: (theme) => `0 4px 20px ${alpha(theme.palette.common.black, 0.15)}`,
+  hard: (theme) => `4px 4px 0px ${alpha(theme.palette.common.black, 0.25)}`,
+  elevated: (theme) =>
+    `0 10px 40px ${alpha(theme.palette.common.black, 0.2)}, 0 2px 10px ${alpha(theme.palette.common.black, 0.1)}`,
+};
+
+export interface IconStyleFlags {
+  $size: number;
+  $fontSize: number;
+  $animationVariant: AnimationVariant;
+  $duration: number;
+  $delay: number;
+  $loop: boolean;
+  $glow: boolean;
+  $glass: boolean;
+  $glowColor?: string;
+  $customColor?: string;
+  $metallic?: boolean;
+  $gradient?: boolean;
+  $shadow?: 'soft' | 'hard' | 'elevated' | 'none';
+  $ripple?: boolean;
+  $neon?: boolean;
+  $holographic?: boolean;
+}
+
+/**
+ * The four surface treatments that paint the icon themselves — metallic,
+ * gradient, neon and holographic — each run a second animation alongside the
+ * chosen one, so they all need the base animation string.
+ */
+const effectStyles = (
+  theme: Theme,
+  flags: IconStyleFlags,
+  animation: string,
+  color: string,
+): CSSObject => {
+  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;
+
+  return {
+    ...($glass && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
+      backdropFilter: 'blur(10px)',
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.3)}, 0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+    }),
+    ...($metallic && {
+      background: `linear-gradient(145deg,
+      ${theme.palette.grey[300]} 0%,
+      ${theme.palette.grey[500]} 25%,
+      ${theme.palette.grey[400]} 50%,
+      ${theme.palette.grey[600]} 75%,
+      ${theme.palette.grey[400]} 100%)`,
+      backgroundSize: '200% 200%',
+      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
+      boxShadow: `inset 0 2px 4px ${alpha(theme.palette.common.white, 0.5)},
+                inset 0 -2px 4px ${alpha(theme.palette.common.black, 0.3)},
+                0 4px 8px ${alpha(theme.palette.common.black, 0.2)}`,
+    }),
+    ...($gradient && {
+      background: `linear-gradient(135deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 100%)`,
+      backgroundSize: '200% 200%',
+      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`,
+    }),
+    ...($neon && {
+      color,
+      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      filter: `brightness(1.2) contrast(1.2)`,
+      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`,
+    }),
+    ...($holographic && {
+      background: `linear-gradient(45deg,
+      ${theme.palette.primary.main} 0%,
+      ${theme.palette.secondary.main} 25%,
+      ${theme.palette.error.main} 50%,
+      ${theme.palette.warning.main} 75%,
+      ${theme.palette.primary.main} 100%)`,
+      backgroundSize: '400% 400%',
+      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      backgroundClip: 'text',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      filter: `hue-rotate(0deg)`,
+      '@keyframes hueRotate': {
+        '0%': { filter: 'hue-rotate(0deg)' },
+        '100%': { filter: 'hue-rotate(360deg)' },
+      },
+      '&::before': {
+        content: '""',
+        position: 'absolute' as const,
+        inset: -2,
+        borderRadius: '50%',
+        background: 'inherit',
+        filter: 'blur(10px)',
+        opacity: 0.5,
+        zIndex: -1,
+      },
+    }),
+  };
+};
+
+export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
+  const {
+    $size, $fontSize, $animationVariant, $duration, $delay, $loop,
+    $glow, $glowColor, $customColor, $shadow, $ripple, $neon,
+  } = flags;
+
+  const color = $customColor || theme.palette.primary.main;
+  const glowColor = $glowColor || color;
+  const animation = animationFor($animationVariant, $duration, $delay, $loop);
+
+  // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,
+  // a bare child renders an svg.
+  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };
+
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: $size,
+    height: $size,
+    color,
+    animation,
+    position: 'relative' as const,
+    cursor: 'default',
+    borderRadius: '50%',
+    transition: 'all 0.3s ease',
+    boxShadow: SHADOWS[$shadow ?? 'none']?.(theme) ?? 'none',
+    ...($glow && {
+      '&::before': {
+        content: '""',
+        position: 'absolute' as const,
+        inset: -8,
+        borderRadius: '50%',
+        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
+        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        zIndex: -1,
+      },
+      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`,
+    }),
+    ...effectStyles(theme, flags, animation, color),
+    ...($ripple && {
+      '&::after': {
+        content: '""',
+        position: 'absolute' as const,
+        inset: 0,
+        borderRadius: '50%',
+        border: `2px solid ${color}`,
+        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,
+      },
+    }),
+    '& .MuiSvgIcon-root': glyphSize,
+    '& svg': glyphSize,
+    '&:hover': {
+      transform: 'scale(1.05)',
+      filter: $neon ? `brightness(1.4) contrast(1.3)` : undefined,
+    },
+  };
+};