@12-apps/ui 1.0.0 → 1.3.1

package/src/components/form/Button/Button.styles.ts

@@ -0,0 +1,225 @@
+import { alpha, keyframes } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+// Define pulse animation globally
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 15px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+interface ColorPalette {
+  main: string;
+  dark: string;
+  light: string;
+  contrastText: string;
+}
+
+const shade = (
+  palette: ColorPalette | undefined,
+  key: 'dark' | 'light',
+  fallback: ColorPalette,
+): string => palette?.[key] || palette?.main || fallback[key];
+
+/** `neutral` has no MUI palette entry, so its four shades come from grey. */
+const neutralPalette = (theme: Theme): ColorPalette => ({
+  main: theme.palette.grey?.[700] || '#616161',
+  dark: theme.palette.grey?.[800] || '#424242',
+  light: theme.palette.grey?.[500] || '#9e9e9e',
+  contrastText: '#fff',
+});
+
+export const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
+  if (color === 'neutral') return neutralPalette(theme);
+
+  const colorMap: Record<string, ColorPalette> = {
+    primary: theme.palette.primary as ColorPalette,
+    secondary: theme.palette.secondary as ColorPalette,
+    success: theme.palette.success as ColorPalette,
+    warning: theme.palette.warning as ColorPalette,
+    danger: theme.palette.error as ColorPalette,
+  };
+
+  const fallback = theme.palette.primary as ColorPalette;
+  const palette = colorMap[color] || fallback;
+
+  // Ensure palette has required properties
+  return {
+    main: palette?.main || fallback.main,
+    dark: shade(palette, 'dark', fallback),
+    light: shade(palette, 'light', fallback),
+    contrastText: palette?.contrastText || '#fff',
+  };
+};
+
+export const SIZE_MAP: Record<string, CSSObject> = {
+  xs: { padding: '2px 8px', fontSize: '0.75rem' },
+  sm: { padding: '6px 12px', fontSize: '0.875rem' },
+  md: { padding: '8px 16px', fontSize: '1rem' },
+  lg: { padding: '10px 20px', fontSize: '1.125rem' },
+  xl: { padding: '12px 24px', fontSize: '1.25rem' },
+};
+
+/**
+ * MUI centres icons with a negative margin that fights our own padding, so the
+ * flex alignment is restated here rather than fought with `!important`.
+ */
+export const iconAlignmentStyles = (theme: Theme): CSSObject => ({
+  '& .MuiButton-startIcon, & .MuiButton-endIcon': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 0,
+    verticalAlign: 'middle',
+    '& > *': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      lineHeight: 0,
+    },
+  },
+  '& .MuiButton-startIcon': {
+    marginRight: theme.spacing(0.5),
+  },
+  '& .MuiButton-endIcon': {
+    marginLeft: theme.spacing(0.5),
+  },
+});
+
+// Gradients run between two related hues; the named colours pick a specific pair,
+// anything else runs from its own main to its own dark.
+const GRADIENT_PAIRS: Record<string, (theme: Theme) => [string, string]> = {
+  primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+};
+
+const gradientFor = (theme: Theme, color: string, palette: ColorPalette): string => {
+  const [from, to] = GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+
+const VARIANT_STYLES: Record<
+  string,
+  (theme: Theme, palette: ColorPalette, color: string) => CSSObject
+> = {
+  solid: (theme, palette) => ({
+    backgroundColor: palette.main,
+    color: palette.contrastText || '#fff',
+    '&:hover': {
+      backgroundColor: palette.dark,
+      transform: 'translateY(-2px)',
+      boxShadow: theme.shadows[8],
+    },
+  }),
+  outline: (_theme, palette) => ({
+    backgroundColor: 'transparent',
+    color: palette.main,
+    border: `1px solid ${palette.main}`,
+    '&:hover': {
+      backgroundColor: alpha(palette.main, 0.1),
+      borderColor: palette.dark,
+    },
+  }),
+  ghost: (_theme, palette) => ({
+    backgroundColor: 'transparent',
+    color: palette.main,
+    '&:hover': {
+      backgroundColor: alpha(palette.main, 0.1),
+    },
+  }),
+  text: (_theme, palette) => ({
+    backgroundColor: 'transparent',
+    color: palette.main,
+    border: `none`,
+    '&:hover': {
+      backgroundColor: alpha(palette.main, 0.1),
+    },
+    '&.active': {
+      backgroundColor: alpha(palette.main, 0.1),
+      color: palette.main,
+    },
+  }),
+  glass: (theme, palette) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: 'blur(20px)',
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    color: palette.main,
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.background.paper, 0.2),
+      transform: 'translateY(-2px)',
+    },
+  }),
+  gradient: (theme, palette, color) => ({
+    background: gradientFor(theme, color, palette),
+    color: '#fff',
+    '&:hover': {
+      filter: 'brightness(1.1)',
+      transform: 'translateY(-2px)',
+      boxShadow: theme.shadows[12],
+    },
+  }),
+};
+
+export const buttonVariantStyles = (
+  theme: Theme,
+  variant: string | undefined,
+  palette: ColorPalette,
+  color: string,
+): CSSObject => VARIANT_STYLES[variant ?? '']?.(theme, palette, color) ?? {};
+
+// Glow effect - applied with !important to override variant shadows
+const glowStyles = (palette: ColorPalette): CSSObject => ({
+  boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,
+  filter: 'brightness(1.05)',
+  '&:hover': {
+    boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,
+    filter: 'brightness(1.1)',
+    transform: 'translateY(-2px) scale(1.02)',
+  },
+});
+
+// Pulse animation using pseudo-element
+const pulseStyles = (palette: ColorPalette): CSSObject => ({
+  position: 'relative',
+  overflow: 'visible',
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: '100%',
+    height: '100%',
+    borderRadius: 'inherit',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: palette.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+});
+
+/**
+ * glow and pulse are independent flags. The three combinations used to be spelled
+ * out one by one, but each is just the union of whichever flags are set.
+ */
+export const buttonEmphasisStyles = (
+  palette: ColorPalette,
+  glow?: boolean,
+  pulse?: boolean,
+): CSSObject => ({
+  ...(glow ? glowStyles(palette) : {}),
+  ...(pulse ? pulseStyles(palette) : {}),
+});

package/src/components/form/Button/Button.test.stories.tsx

@@ -1,4 +1,5 @@
-import { Delete,Save } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Save from '@mui/icons-material/Save';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
 
@@ -132,22 +133,26 @@ export const KeyboardNavigation: Story = {
   play: async ({ canvasElement, step, args }) => {
     const canvas = within(canvasElement);
 
+    // The story renders this single button, so one tab reaches it. Focus then
+    // stays put across the activation steps — pressing Enter or Space on a
+    // button does not move it — which is what makes this one keyboard journey
+    // rather than three re-focused fragments.
     await step('Focus via Tab navigation', async () => {
       const button = canvas.getByTestId('keyboard-button');
-      button.focus();
-      await expect(button).toHaveFocus();
+      await userEvent.tab();
+      await waitFor(() => expect(button).toHaveFocus());
     });
 
     await step('Enter key activation', async () => {
       const button = canvas.getByTestId('keyboard-button');
-      button.focus();
+      await waitFor(() => expect(button).toHaveFocus());
       await userEvent.keyboard('{Enter}');
       await expect(args.onClick).toHaveBeenCalled();
     });
 
     await step('Space key activation', async () => {
       const button = canvas.getByTestId('keyboard-button');
-      button.focus();
+      await waitFor(() => expect(button).toHaveFocus());
       await userEvent.keyboard(' ');
       await expect(args.onClick).toHaveBeenCalled();
     });
@@ -225,8 +230,10 @@ export const DisabledAccessibility: Story = {
     });
 
     await step('Verify keyboard interaction is prevented', async () => {
-      const button = canvas.getByTestId('disabled-button');
-      button.focus();
+      // A disabled button is not tabbable and cannot take focus, so keyboard
+      // input never reaches it. The previous version called .focus() on it,
+      // which is a no-op on a disabled element — the step passed for the wrong
+      // reason. Sending the keys with focus left on the body is the real check.
       await userEvent.keyboard('{Enter}');
       await userEvent.keyboard(' ');
       await expect(args.onClick).not.toHaveBeenCalled();
@@ -441,16 +448,12 @@ export const PerformanceTest: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await step('Measure render time', async () => {
-      const startTime = Date.now();
+    await step('All buttons rendered', async () => {
+      // The timing assertion that used to live here bracketed getAllByTestId,
+      // which queries DOM that is already rendered — it measured query time, not
+      // render time, and a 100ms wall-clock budget is exactly what a loaded CI
+      // runner blows through. The count is the part that actually held.
       const buttons = canvas.getAllByTestId(/perf-button-/);
-      const endTime = Date.now();
-
-      const renderTime = endTime - startTime;
-      // Performance measurement for testing - no console output
-
-      // Assert reasonable render time (adjust threshold as needed)
-      await expect(renderTime).toBeLessThan(100);
       await expect(buttons.length).toBe(50);
     });
 
@@ -519,13 +522,14 @@ export const LoadingWithIcon: Story = {
       const button = canvas.getByTestId('loading-icon-button');
       await expect(button).toBeInTheDocument();
 
-      // Icon should not be visible when loading
-      const icon = canvas.queryByTestId('delete-icon');
-      await expect(icon).not.toBeInTheDocument();
-
-      // Loading spinner should be visible
+      // Assert the positive condition first: the spinner being present is what
+      // establishes that the loading state actually rendered. Without it the
+      // absence check below would also pass on a button that rendered nothing.
       const spinner = canvas.getByRole('progressbar');
       await expect(spinner).toBeInTheDocument();
+
+      // Icon should not be visible when loading
+      await waitFor(() => expect(canvas.queryByTestId('delete-icon')).not.toBeInTheDocument());
     });
   },
 };

package/src/components/form/Button/Button.tsx

@@ -1,62 +1,17 @@
-import { alpha, Button as MuiButton, CircularProgress, keyframes } from '@mui/material';
-import type { Theme } from '@mui/material/styles';
+import { Button as MuiButton, CircularProgress } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
+import { resolveButtonProps } from './Button.helpers';
+import {
+  buttonEmphasisStyles,
+  buttonVariantStyles,
+  getColorFromTheme,
+  iconAlignmentStyles,
+  SIZE_MAP,
+} from './Button.styles';
 import type { ButtonProps } from './Button.types';
 
-// Define pulse animation globally
-const pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 15px currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-
-interface ColorPalette {
-  main: string;
-  dark: string;
-  light: string;
-  contrastText: string;
-}
-
-const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
-  if (color === 'neutral') {
-    return {
-      main: theme.palette.grey?.[700] || '#616161',
-      dark: theme.palette.grey?.[800] || '#424242',
-      light: theme.palette.grey?.[500] || '#9e9e9e',
-      contrastText: '#fff',
-    };
-  }
-
-  const colorMap: Record<string, ColorPalette> = {
-    primary: theme.palette.primary as ColorPalette,
-    secondary: theme.palette.secondary as ColorPalette,
-    success: theme.palette.success as ColorPalette,
-    warning: theme.palette.warning as ColorPalette,
-    danger: theme.palette.error as ColorPalette,
-  };
-
-  const palette = colorMap[color] || theme.palette.primary;
-
-  // Ensure palette has required properties
-  return {
-    main: palette?.main || theme.palette.primary.main,
-    dark: palette?.dark || palette?.main || theme.palette.primary.dark,
-    light: palette?.light || palette?.main || theme.palette.primary.light,
-    contrastText: palette?.contrastText || '#fff',
-  };
-};
-
 const StyledButton = styled(MuiButton, {
   shouldForwardProp: (prop) =>
     ['glow', 'pulse', 'loading', 'customVariant', 'customColor', 'ripple'].indexOf(
@@ -78,188 +33,39 @@ const StyledButton = styled(MuiButton, {
     transition: 'all 0.3s ease',
     position: 'relative',
     overflow: 'hidden',
-
-    // Icon alignment fixes
-    '& .MuiButton-startIcon, & .MuiButton-endIcon': {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      margin: 0,
-      verticalAlign: 'middle',
-      '& > *': {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        lineHeight: 0,
-      },
-    },
-    '& .MuiButton-startIcon': {
-      marginRight: theme.spacing(0.5),
-    },
-    '& .MuiButton-endIcon': {
-      marginLeft: theme.spacing(0.5),
-    },
-
-    // Variant styles
-    ...(customVariant === 'solid' && {
-      backgroundColor: colorPalette.main,
-      color: colorPalette.contrastText || '#fff',
-      '&:hover': {
-        backgroundColor: colorPalette.dark,
-        transform: 'translateY(-2px)',
-        boxShadow: theme.shadows[8],
-      },
-    }),
-
-    ...(customVariant === 'outline' && {
-      backgroundColor: 'transparent',
-      color: colorPalette.main,
-      border: `1px solid ${colorPalette.main}`,
-      '&:hover': {
-        backgroundColor: alpha(colorPalette.main, 0.1),
-        borderColor: colorPalette.dark,
-      },
-    }),
-
-    ...(customVariant === 'ghost' && {
-      backgroundColor: 'transparent',
-      color: colorPalette.main,
-      '&:hover': {
-        backgroundColor: alpha(colorPalette.main, 0.1),
-      },
-    }),
-
-    ...(customVariant === 'text' && {
-      backgroundColor: 'transparent',
-      color: colorPalette.main,
-      border: `none`,
-      '&:hover': {
-        backgroundColor: alpha(colorPalette.main, 0.1),
-      },
-      '&.active': {
-        backgroundColor: alpha(colorPalette.main, 0.1),
-        color: colorPalette.main,
-      },
-    }),
-
-    ...(customVariant === 'glass' && {
-      backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
-      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-      color: colorPalette.main,
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.background.paper, 0.2),
-        transform: 'translateY(-2px)',
-      },
-    }),
-
-    ...(customVariant === 'gradient' && {
-      background:
-        customColor === 'primary'
-          ? `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`
-          : customColor === 'secondary'
-            ? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.primary.main} 100%)`
-            : customColor === 'success'
-              ? `linear-gradient(135deg, ${theme.palette.success.light} 0%, ${theme.palette.success.dark} 100%)`
-              : customColor === 'warning'
-                ? `linear-gradient(135deg, ${theme.palette.warning.light} 0%, ${theme.palette.warning.dark} 100%)`
-                : customColor === 'danger'
-                  ? `linear-gradient(135deg, ${theme.palette.error.light} 0%, ${theme.palette.error.dark} 100%)`
-                  : `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark} 100%)`,
-      color: '#fff',
-      '&:hover': {
-        filter: 'brightness(1.1)',
-        transform: 'translateY(-2px)',
-        boxShadow: theme.shadows[12],
-      },
-    }),
-
-    // Glow effect - applied with !important to override variant shadows
-    ...(glow &&
-      !pulse && {
-        boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.6)}, 0 0 40px 10px ${alpha(colorPalette.main, 0.3)} !important`,
-        filter: 'brightness(1.05)',
-        '&:hover': {
-          boxShadow: `0 0 25px 8px ${alpha(colorPalette.main, 0.7)}, 0 0 50px 15px ${alpha(colorPalette.main, 0.4)} !important`,
-          filter: 'brightness(1.1)',
-          transform: 'translateY(-2px) scale(1.02)',
-        },
-      }),
-
-    // Pulse animation using pseudo-element
-    ...(pulse &&
-      !glow && {
-        position: 'relative',
-        overflow: 'visible',
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          width: '100%',
-          height: '100%',
-          borderRadius: 'inherit',
-          transform: 'translate(-50%, -50%)',
-          backgroundColor: colorPalette.main,
-          opacity: 0.3,
-          animation: `${pulseAnimation} 2s infinite`,
-          pointerEvents: 'none',
-          zIndex: -1,
-        },
-      }),
-
-    // Both glow and pulse effects combined
-    ...(glow &&
-      pulse && {
-        position: 'relative',
-        overflow: 'visible',
-        boxShadow: `0 0 20px 5px ${alpha(colorPalette.main, 0.6)}, 0 0 40px 10px ${alpha(colorPalette.main, 0.3)} !important`,
-        filter: 'brightness(1.05)',
-        '&:hover': {
-          boxShadow: `0 0 25px 8px ${alpha(colorPalette.main, 0.7)}, 0 0 50px 15px ${alpha(colorPalette.main, 0.4)} !important`,
-          filter: 'brightness(1.1)',
-          transform: 'translateY(-2px) scale(1.02)',
-        },
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          width: '100%',
-          height: '100%',
-          borderRadius: 'inherit',
-          transform: 'translate(-50%, -50%)',
-          backgroundColor: colorPalette.main,
-          opacity: 0.3,
-          animation: `${pulseAnimation} 2s infinite`,
-          pointerEvents: 'none',
-          zIndex: -1,
-        },
-      }),
+    ...iconAlignmentStyles(theme),
+    ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),
+    ...buttonEmphasisStyles(colorPalette, glow, pulse),
   };
 });
 
-const sizeMap = {
-  xs: { padding: '2px 8px', fontSize: '0.75rem' },
-  sm: { padding: '6px 12px', fontSize: '0.875rem' },
-  md: { padding: '8px 16px', fontSize: '1rem' },
-  lg: { padding: '10px 20px', fontSize: '1.125rem' },
-  xl: { padding: '12px 24px', fontSize: '1.25rem' },
+/** Our six variants collapse onto MUI's three; only outline and text differ. */
+const muiVariantFor = (variant?: string): 'outlined' | 'text' | 'contained' => {
+  if (variant === 'outline') return 'outlined';
+  return variant === 'text' ? 'text' : 'contained';
+};
+
+type MuiButtonColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error';
+
+/** `danger` and `neutral` are ours; the rest are MUI's own names already. */
+const muiColorFor = (color: NonNullable<ButtonProps['color']>): MuiButtonColor => {
+  if (color === 'danger') return 'error';
+  return color === 'neutral' ? 'inherit' : color;
 };
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      variant = 'solid',
-      color = 'primary',
-      size = 'md',
-      loading = false,
+  (rawProps, ref) => {
+    const {
+      variant,
+      color,
+      size,
+      loading,
       icon,
-      iconPosition = 'left',
-      glow = false,
-      pulse = false,
-      ripple = true,
-      active = false,
+      iconPosition,
+      glow,
+      pulse,
+      ripple,
+      active,
       children,
       disabled,
       onClick,
@@ -267,31 +73,22 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       onBlur,
       dataTestId,
       ...props
-    },
-    ref,
-  ) => {
-    const muiVariant = variant ==='outline' ? 'outlined' : variant === 'text' ? 'text': 'contained';
-    const muiColor =
-      color === 'danger'
-        ? 'error'
-        : color === 'neutral'
-          ? 'inherit'
-          : (color);
+    } = resolveButtonProps(rawProps);
+    const testId = (suffix: string) =>
+      dataTestId ? `${dataTestId}-${suffix}` : `button-${suffix}`;
 
     // Wrap icon with testId if provided
     const iconWithTestId =
-      !loading && icon ? (
-        <span data-testid={dataTestId ? `${dataTestId}-icon` : 'button-icon'}>{icon}</span>
-      ) : undefined;
+      !loading && icon ? <span data-testid={testId('icon')}>{icon}</span> : undefined;
 
-    const activeClassName = active ? 'active' : '';
-    const mergedClassName = [activeClassName, props.className].filter(Boolean).join(' ') || undefined;
+    const mergedClassName =
+      [active ? 'active' : '', props.className].filter(Boolean).join(' ') || undefined;
 
     return (
       <StyledButton
         ref={ref}
-        variant={muiVariant}
-        color={muiColor}
+        variant={muiVariantFor(variant)}
+        color={muiColorFor(color)}
         customVariant={variant}
         customColor={color}
         glow={glow}
@@ -304,17 +101,13 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         onClick={onClick}
         onFocus={onFocus}
         onBlur={onBlur}
-        sx={sizeMap[size]}
+        sx={SIZE_MAP[size]}
         data-testid={dataTestId || 'button'}
         {...props}
         className={mergedClassName}
       >
         {loading ? (
-          <CircularProgress
-            size={16}
-            color="inherit"
-            data-testid={dataTestId ? `${dataTestId}-loading` : 'button-loading'}
-          />
+          <CircularProgress size={16} color="inherit" data-testid={testId('loading')} />
         ) : (
           children
         )}