@12-apps/ui 1.0.0 → 1.3.1

package/src/components/form/HeaderButton/HeaderButton.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Box, Button } from '@mui/material';
+import type { ButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+
+type Breakpoint = 'sm' | 'md' | 'lg';
+
+export interface HeaderButtonProps {
+  /** The label — shown next to the icon on wide screens, hidden (icon-only) below `collapseBelow`. */
+  text: ReactNode;
+  /** Leading icon/image — always visible. */
+  icon: ReactNode;
+  /** Optional trailing icon (e.g. a dropdown chevron) — always visible. */
+  endIcon?: ReactNode;
+  onClick?: ButtonProps['onClick'];
+  /** MUI variant. @default 'contained' */
+  variant?: ButtonProps['variant'];
+  /** MUI color. @default 'primary' */
+  color?: ButtonProps['color'];
+  disabled?: boolean;
+  /** Width below which the button collapses to icon-only. @default 'md' */
+  collapseBelow?: Breakpoint;
+  fullWidth?: boolean;
+  'aria-haspopup'?: ButtonProps['aria-haspopup'];
+  'aria-expanded'?: boolean;
+  dataTestId?: string;
+}
+
+/**
+ * A page-header action that adapts to width: below `collapseBelow` it renders
+ * ONLY its icon (compact, so several fit one line on phones); at/above it renders
+ * the icon + text label. The accessible name is always `text`, so the icon-only
+ * state stays labeled for screen readers.
+ */
+export function HeaderButton({
+  text,
+  icon,
+  endIcon,
+  onClick,
+  variant = 'contained',
+  color = 'primary',
+  disabled,
+  collapseBelow = 'md',
+  fullWidth,
+  dataTestId,
+  ...aria
+}: HeaderButtonProps): React.JSX.Element {
+  // Hide the label below the breakpoint; keep the icon(s). `gap` collapses around
+  // the display:none label, so on mobile it reads as a compact icon button.
+  const labelDisplay = { xs: 'none', [collapseBelow]: 'inline' };
+  const horizontalPad = { xs: 1, [collapseBelow]: 2 };
+  return (
+    <Button
+      variant={variant}
+      color={color}
+      size="medium"
+      onClick={onClick}
+      disabled={disabled}
+      fullWidth={fullWidth}
+      aria-label={typeof text === 'string' ? text : undefined}
+      aria-haspopup={aria['aria-haspopup']}
+      aria-expanded={aria['aria-expanded']}
+      data-testid={dataTestId}
+      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: '1rem', textTransform: 'none' }}
+    >
+      <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center' }}>
+        {icon}
+      </Box>
+      <Box component="span" sx={{ display: labelDisplay }}>
+        {text}
+      </Box>
+      {endIcon != null && (
+        <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center' }}>
+          {endIcon}
+        </Box>
+      )}
+    </Button>
+  );
+}

package/src/components/form/HeaderButton/index.ts

@@ -0,0 +1,2 @@
+export { HeaderButton } from './HeaderButton';
+export type { HeaderButtonProps } from './HeaderButton';

package/src/components/form/Input/Input.stories.tsx

@@ -1,4 +1,8 @@
-import { Email, Lock, Search, Visibility, VisibilityOff } from '@mui/icons-material';
+import Email from '@mui/icons-material/Email';
+import Lock from '@mui/icons-material/Lock';
+import Search from '@mui/icons-material/Search';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { IconButton } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';

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

@@ -0,0 +1,176 @@
+import { alpha, keyframes } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { InputProps } from './Input.types';
+
+type InputVariant = NonNullable<InputProps['variant']>;
+
+// Define pulse animation
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+/** Our four variants map onto MUI's three; `glass` and `gradient` restyle an outline. */
+export const muiVariantFor = (variant: InputVariant): 'outlined' | 'filled' | 'standard' => {
+  switch (variant) {
+    case 'underline':
+      return 'standard';
+    case 'glass':
+    case 'gradient':
+      return 'outlined';
+    default:
+      return variant as 'outlined' | 'filled' | 'standard';
+  }
+};
+
+export const SIZE_MAP = {
+  sm: { size: 'small' as const },
+  md: { size: 'medium' as const },
+  lg: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '16px 14px' } } },
+};
+
+export const glowStyles = (theme: Theme): CSSObject => ({
+  '& .MuiInputBase-root': {
+    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,
+    '&.Mui-focused': {
+      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,
+    },
+  },
+});
+
+// A bar behind the field rather than a border on it, so it can pulse outward
+// without the input resizing.
+export const pulseStyles = (theme: Theme): CSSObject => ({
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: '50%',
+    left: '0',
+    right: '0',
+    height: '56px',
+    transform: 'translateY(-50%)',
+    borderRadius: theme.spacing(0.5),
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: 'none',
+    zIndex: -1,
+  },
+});
+
+export const floatingLabelStyles = (theme: Theme): CSSObject => ({
+  '& .MuiInputLabel-root': {
+    transform: 'translate(14px, 16px) scale(1)',
+    '&.MuiInputLabel-shrink': {
+      transform: 'translate(14px, -9px) scale(0.75)',
+      backgroundColor: theme.palette.background.paper,
+      padding: '0 4px',
+    },
+  },
+});
+
+export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
+  switch (variant) {
+    case 'glass':
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: 'blur(20px)',
+        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+        '&:hover': {
+          backgroundColor: alpha(theme.palette.background.paper, 0.15),
+          borderColor: alpha(theme.palette.primary.main, 0.3),
+        },
+        '&.Mui-focused': {
+          backgroundColor: alpha(theme.palette.background.paper, 0.2),
+          borderColor: theme.palette.primary.main,
+          boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,
+        },
+      };
+    case 'underline':
+      return {
+        '&:before': {
+          borderBottomColor: alpha(theme.palette.divider, 0.42),
+        },
+        '&:hover:not(.Mui-disabled):before': {
+          borderBottomColor: theme.palette.primary.main,
+        },
+        '&:after': {
+          borderBottomColor: theme.palette.primary.main,
+        },
+      };
+    case 'gradient':
+      return gradientStyles(theme);
+    default:
+      return {};
+  }
+};
+
+// The border is a gradient painted behind the field and masked to a 2px ring,
+// since CSS cannot put a gradient on `border-color` directly.
+const gradientStyles = (theme: Theme): CSSObject => ({
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+  border: `2px solid transparent`,
+  backgroundOrigin: 'border-box',
+  backgroundClip: 'padding-box, border-box',
+  position: 'relative',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 'inherit',
+    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+    maskComposite: 'exclude',
+    padding: '2px',
+    zIndex: -1,
+  },
+  '&:hover': {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`,
+  },
+  '&.Mui-focused': {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,
+    '&::before': {
+      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
+    },
+  },
+});
+
+export const outlinedStyles = (theme: Theme): CSSObject => ({
+  '& fieldset': {
+    borderColor: alpha(theme.palette.divider, 0.23),
+  },
+  '&:hover fieldset': {
+    borderColor: theme.palette.primary.main,
+  },
+  '&.Mui-focused fieldset': {
+    borderColor: theme.palette.primary.main,
+    borderWidth: 2,
+  },
+  '&.Mui-error fieldset': {
+    borderColor: theme.palette.error.main,
+  },
+});
+
+export const filledStyles = (theme: Theme): CSSObject => ({
+  backgroundColor: alpha(theme.palette.action.hover, 0.04),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.action.hover, 0.08),
+  },
+  '&.Mui-focused': {
+    backgroundColor: alpha(theme.palette.action.hover, 0.12),
+  },
+});

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

@@ -1,4 +1,8 @@
-import { Email, Lock, Person,Visibility, VisibilityOff } from '@mui/icons-material';
+import Email from '@mui/icons-material/Email';
+import Lock from '@mui/icons-material/Lock';
+import Person from '@mui/icons-material/Person';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { IconButton } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
@@ -160,9 +164,11 @@ export const StateChangeTest: Story = {
         setError(inputValue.length < 3);
       };
 
+      // Toggle only. The old version also queued a 2s timer to clear the flag,
+      // which made the rendered state depend on wall-clock time — a play
+      // function that ran slowly would see `loading` flip under it.
       const handleLoadingToggle = () => {
-        setLoading(!loading);
-        window.setTimeout(() => setLoading(false), 2000);
+        setLoading((previous) => !previous);
       };
 
       return (
@@ -277,13 +283,13 @@ export const KeyboardNavigation: Story = {
       const firstInput = canvas.getByTestId('first-input');
       const secondInput = canvas.getByTestId('second-input');
 
-      // Focus first element
-      firstInput.focus();
-      await expect(firstInput).toHaveFocus();
+      // Tab in from the body rather than calling .focus().
+      await userEvent.tab();
+      await waitFor(() => expect(firstInput).toHaveFocus());
 
       // Tab to next element
       await userEvent.tab();
-      await expect(secondInput).toHaveFocus();
+      await waitFor(() => expect(secondInput).toHaveFocus());
     });
 
     await step('Tab navigation continues', async () => {
@@ -291,28 +297,28 @@ export const KeyboardNavigation: Story = {
       const button = canvas.getByTestId('after-inputs');
 
       await userEvent.tab();
-      await expect(thirdInput).toHaveFocus();
+      await waitFor(() => expect(thirdInput).toHaveFocus());
 
       await userEvent.tab();
-      await expect(button).toHaveFocus();
+      await waitFor(() => expect(button).toHaveFocus());
     });
 
     await step('Tab navigation backward', async () => {
       const thirdInput = canvas.getByTestId('third-input');
 
       await userEvent.tab({ shift: true });
-      await expect(thirdInput).toHaveFocus();
+      await waitFor(() => expect(thirdInput).toHaveFocus());
     });
 
     await step('Enter key in input (should not submit)', async () => {
       const firstInput = canvas.getByTestId('first-input');
-      firstInput.focus();
 
+      // Typing into an input focuses it, so the extra .focus() was redundant.
       await userEvent.type(firstInput, 'test');
       await userEvent.keyboard('{Enter}');
 
       // Input should still have focus and content
-      await expect(firstInput).toHaveFocus();
+      await waitFor(() => expect(firstInput).toHaveFocus());
       await expect(firstInput).toHaveValue('test');
     });
   },
@@ -471,8 +477,9 @@ export const FocusManagement: Story = {
       const closeButton = within(modal).getByTestId('close-modal');
       const openButton = canvas.getByTestId('open-modal');
 
-      // Set focus to open button before closing
-      openButton.focus();
+      // No pre-focus: the assertion below is about the modal being removed, and
+      // .focus() on the open button neither affected that nor was ever checked.
+      await expect(openButton).toBeInTheDocument();
       await userEvent.click(closeButton);
 
       // Modal should be gone
@@ -567,13 +574,13 @@ export const ResponsiveDesign: Story = {
 
       // Test interaction on each input
       await userEvent.click(input1);
-      await expect(input1).toHaveFocus();
+      await waitFor(() => expect(input1).toHaveFocus());
 
       await userEvent.click(input2);
-      await expect(input2).toHaveFocus();
+      await waitFor(() => expect(input2).toHaveFocus());
 
       await userEvent.click(input3);
-      await expect(input3).toHaveFocus();
+      await waitFor(() => expect(input3).toHaveFocus());
     });
   },
 };
@@ -630,10 +637,10 @@ export const ThemeVariations: Story = {
 
       // Focus each input to test theme-aware focus styles
       await userEvent.click(outlinedInput);
-      await expect(outlinedInput).toHaveFocus();
+      await waitFor(() => expect(outlinedInput).toHaveFocus());
 
       await userEvent.click(glassInput);
-      await expect(glassInput).toHaveFocus();
+      await waitFor(() => expect(glassInput).toHaveFocus());
     });
   },
 };
@@ -692,7 +699,7 @@ export const VisualStates: Story = {
     await step('Focus state interaction', async () => {
       const focusInput = canvas.getByTestId('focus-state');
       await userEvent.click(focusInput);
-      await expect(focusInput).toHaveFocus();
+      await waitFor(() => expect(focusInput).toHaveFocus());
     });
 
     await step('Disabled state verification', async () => {
@@ -700,7 +707,7 @@ export const VisualStates: Story = {
       await expect(disabledInput).toBeDisabled();
       // Try to click (should not gain focus)
       await userEvent.click(disabledInput);
-      await expect(disabledInput).not.toHaveFocus();
+      await waitFor(() => expect(disabledInput).not.toHaveFocus());
     });
 
     await step('Error state verification', async () => {
@@ -720,7 +727,7 @@ export const VisualStates: Story = {
     await step('Glow state interaction', async () => {
       const glowInput = canvas.getByTestId('glow-state');
       await userEvent.click(glowInput);
-      await expect(glowInput).toHaveFocus();
+      await waitFor(() => expect(glowInput).toHaveFocus());
       // Glow effect should be visible via CSS
     });
   },
@@ -811,7 +818,7 @@ export const EdgeCases: Story = {
 
       // Should be visible and interactive despite all effects
       await userEvent.click(allEffectsInput);
-      await expect(allEffectsInput).toHaveFocus();
+      await waitFor(() => expect(allEffectsInput).toHaveFocus());
 
       await userEvent.type(allEffectsInput, 'works with all effects');
       await expect(allEffectsInput).toHaveValue('works with all effects');