@12-apps/ui 1.0.0 → 1.3.1

package/src/components/form/PasswordStrength/PasswordStrength.tsx

@@ -1,10 +1,5 @@
-import {
-  CheckCircle as SuccessIcon,
-  Security as SecurityIcon,
-  Warning as WarningIcon,
-  Check as CheckIcon,
-  Close as CloseIcon
-} from '@mui/icons-material';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 
 import {
   alpha,
@@ -16,11 +11,19 @@ import {
   Stack,
   styled,
   Typography,
-  useTheme,
-} from '@mui/material';
+  useTheme } from '@mui/material';
 import type { FC} from 'react';
 import React, { useMemo } from 'react';
 
+import type { RequirementChecks } from './PasswordStrength.helpers';
+import {
+  buildSuggestions,
+  calculatePasswordStrength,
+  defaultRequirements,
+  evaluateRequirements,
+  getStrengthIcon,
+  getStrengthLabel,
+  SuggestionsList } from './PasswordStrength.helpers';
 import type { PasswordRequirements, PasswordStrengthProps } from './PasswordStrength.types';
 
 interface RequirementIconProps {
@@ -35,14 +38,6 @@ interface RequirementIconProps {
 };
 
 // Default requirements
-const defaultRequirements: PasswordRequirements = {
-  minLength: 8,
-  uppercase: true,
-  lowercase: true,
-  numbers: true,
-  special: true,
-};
-
 // Animation keyframes
 const pulseAnimation = keyframes`
   0%, 100% {
@@ -66,8 +61,7 @@ const slideInAnimation = keyframes`
 
 // Styled components
 const StrengthContainer = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'animated',
-})<{ animated?: boolean }>(({ theme, animated }) => ({
+  shouldForwardProp: (prop) => prop !== 'animated' })<{ animated?: boolean }>(({ theme, animated }) => ({
   width: '100%',
   padding: theme.spacing(2),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
@@ -75,12 +69,10 @@ const StrengthContainer = styled(Box, {
   WebkitBackdropFilter: 'blur(10px)',
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
-  transition: animated ? 'all 0.3s ease' : 'none',
-}));
+  transition: animated ? 'all 0.3s ease' : 'none' }));
 
 const StrengthBar = styled(LinearProgress, {
-  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated',
-})<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {
+  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated' })<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {
   const getColor = () => {
     if (strength <= 20) return theme.palette.error.main;
     if (strength <= 40) return theme.palette.warning.main;
@@ -102,14 +94,11 @@ const StrengthBar = styled(LinearProgress, {
       borderRadius: 4,
       background: getGradient(),
       transition: animated ? 'all 0.3s ease' : 'none',
-      boxShadow: `0 2px 8px ${alpha(getColor(), 0.3)}`,
-    },
-  };
+      boxShadow: `0 2px 8px ${alpha(getColor(), 0.3)}` } };
 });
 
 const RequirementItem = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'met' && prop !== 'animated',
-})<{ met: boolean; animated?: boolean }>(({ theme, met, animated }) => ({
+  shouldForwardProp: (prop) => prop !== 'met' && prop !== 'animated' })<{ met: boolean; animated?: boolean }>(({ theme, met, animated }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
@@ -122,13 +111,10 @@ const RequirementItem = styled(Box, {
   animation: animated ? `${slideInAnimation} 0.3s ease` : 'none',
   '& svg': {
     fontSize: '1rem',
-    color: met ? theme.palette.success.main : theme.palette.text.disabled,
-  },
-}));
+    color: met ? theme.palette.success.main : theme.palette.text.disabled } }));
 
 const StrengthLabel = styled(Chip, {
-  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated',
-})<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {
+  shouldForwardProp: (prop) => prop !== 'strength' && prop !== 'animated' })<{ strength: number; animated?: boolean }>(({ theme, strength, animated }) => {
   const getColor = () => {
     if (strength <= 20) return theme.palette.error;
     if (strength <= 40) return theme.palette.warning;
@@ -144,19 +130,16 @@ const StrengthLabel = styled(Chip, {
     color: palette.main,
     border: `1px solid ${alpha(palette.main, 0.3)}`,
     fontWeight: 600,
-    animation: animated ? `${pulseAnimation} 2s ease infinite` : 'none',
-  };
+    animation: animated ? `${pulseAnimation} 2s ease infinite` : 'none' };
 });
 
 const StepsContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(1),
-  marginTop: theme.spacing(2),
-}));
+  marginTop: theme.spacing(2) }));
 
 const Step = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' && prop !== 'animated',
-})<{ active: boolean; completed: boolean; animated?: boolean }>(
+  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' && prop !== 'animated' })<{ active: boolean; completed: boolean; animated?: boolean }>(
   ({ theme, active, completed, animated }) => ({
     flex: 1,
     height: 6,
@@ -167,56 +150,176 @@ const Step = styled(Box, {
         ? `linear-gradient(90deg, ${theme.palette.warning.main} 0%, ${theme.palette.warning.light} 100%)`
         : alpha(theme.palette.action.disabled, 0.2),
     transition: animated ? 'all 0.3s ease' : 'none',
-    boxShadow: completed ? `0 2px 8px ${alpha(theme.palette.success.main, 0.3)}` : 'none',
-  }),
+    boxShadow: completed ? `0 2px 8px ${alpha(theme.palette.success.main, 0.3)}` : 'none' }),
 );
 
-// Helper functions
-const calculatePasswordStrength = (
-  password: string,
-  requirements: PasswordRequirements,
-): number => {
-  if (!password) return 0;
-
-  let strength = 0;
-  const checks = {
-    length: password.length >= (requirements.minLength || 8),
-    uppercase: !requirements.uppercase || /[A-Z]/.test(password),
-    lowercase: !requirements.lowercase || /[a-z]/.test(password),
-    numbers: !requirements.numbers || /\d/.test(password),
-    special: !requirements.special || /[!@#$%^&*(),.?":{}|<>]/.test(password),
-  };
+// The three indicator variants, out of the component body so the render keeps
+// only its own layout branches.
+const StrengthIndicator: React.FC<{
+  variant: PasswordStrengthProps['variant'];
+  strength: number;
+  animated: boolean;
+}> = ({ variant, strength, animated }) => {
+  const theme = useTheme();
 
-  // Base strength from length
-  strength += Math.min(password.length * 3, 30);
+  switch (variant) {
+    case 'circular':
+      return (
+        <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+          <Box
+            sx={{
+              width: 80,
+              height: 80,
+              borderRadius: '50%',
+              background: `conic-gradient(
+                ${theme.palette.success.main} 0deg ${strength * 3.6}deg,
+                ${alpha(theme.palette.action.disabled, 0.1)} ${strength * 3.6}deg 360deg
+              )`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              boxShadow: `0 4px 12px ${alpha(theme.palette.success.main, strength / 200)}` }}
+          >
+            <Box
+              sx={{
+                width: 64,
+                height: 64,
+                borderRadius: '50%',
+                background: theme.palette.background.paper,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexDirection: 'column' }}
+            >
+              <Typography variant="h6" fontWeight="bold">
+                {strength}%
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      );
+
+    case 'steps': {
+      const steps = 5;
+      const activeStep = Math.ceil((strength / 100) * steps);
+      return (
+        <StepsContainer>
+          {Array.from({ length: steps }, (_, i) => (
+            <Step key={i} active={i === activeStep - 1} completed={i < activeStep - 1} animated={animated} />
+          ))}
+        </StepsContainer>
+      );
+    }
 
-  // Add points for meeting requirements
-  if (checks.length) strength += 20;
-  if (checks.uppercase) strength += 10;
-  if (checks.lowercase) strength += 10;
-  if (checks.numbers) strength += 15;
-  if (checks.special) strength += 15;
+    default:
+      return <StrengthBar variant="determinate" value={strength} strength={strength} animated={animated} />;
+  }
+};
 
-  // Bonus for complexity
-  if (password.length > 12) strength += 10;
-  if (password.length > 16) strength += 10;
+const StrengthHeading: React.FC<{
+  strength: number;
+  hasValue: boolean;
+  animated: boolean;
+}> = ({ strength, hasValue, animated }) => (
+  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+    <Typography variant="body2" color="text.secondary">
+      Password Strength
+    </Typography>
+    {hasValue && (
+      <Fade in={true}>
+        <StrengthLabel
+          label={getStrengthLabel(strength)}
+          icon={getStrengthIcon(strength)}
+          size="small"
+          strength={strength}
+          animated={animated}
+        />
+      </Fade>
+    )}
+  </Box>
+);
 
-  return Math.min(strength, 100);
-};
+// One row per enabled requirement. Previously five near-identical JSX blocks,
+// each with its own `requirements.x &&` guard.
+const RequirementsList: React.FC<{
+  requirements: PasswordRequirements;
+  checks: RequirementChecks;
+  animated: boolean;
+}> = ({ requirements, checks, animated }) => {
+  const rows: ReadonlyArray<[unknown, keyof RequirementChecks, React.ReactNode]> = [
+    [requirements.minLength, 'length', `At least ${requirements.minLength} characters`],
+    [requirements.uppercase, 'uppercase', 'One uppercase letter'],
+    [requirements.lowercase, 'lowercase', 'One lowercase letter'],
+    [requirements.numbers, 'numbers', 'One number'],
+    [requirements.special, 'special', 'One special character'],
+  ];
 
-const getStrengthLabel = (strength: number): string => {
-  if (strength <= 20) return 'Very Weak';
-  if (strength <= 40) return 'Weak';
-  if (strength <= 60) return 'Fair';
-  if (strength <= 80) return 'Good';
-  return 'Strong';
+  return (
+    <Stack spacing={1}>
+      <Typography variant="caption" color="text.secondary" fontWeight="medium">
+        Requirements:
+      </Typography>
+      {rows
+        .filter(([enabled]) => Boolean(enabled))
+        .map(([, key, label]) => (
+          <RequirementItem key={key} met={checks[key]} animated={animated}>
+            <RequirementIcon met={checks[key]} />
+            <Typography variant="caption">{label}</Typography>
+          </RequirementItem>
+        ))}
+    </Stack>
+  );
 };
 
-const getStrengthIcon = (strength: number) => {
-  if (strength <= 40) return <WarningIcon />;
-  if (strength <= 80) return <SecurityIcon />;
-  return <SuccessIcon />;
-};
+// The visible sections. Kept apart from PasswordStrength itself so the exported
+// component is just prop defaults plus the three memos, and every display guard
+// lives in one place.
+const PasswordStrengthBody: React.FC<{
+  value: string;
+  strength: number;
+  requirements: PasswordRequirements;
+  requirementChecks: RequirementChecks;
+  suggestions: string[];
+  showStrengthLabel: boolean;
+  showRequirements: boolean;
+  showSuggestions: boolean;
+  variant: PasswordStrengthProps['variant'];
+  animated: boolean;
+}> = ({
+  value,
+  strength,
+  requirements,
+  requirementChecks,
+  suggestions,
+  showStrengthLabel,
+  showRequirements,
+  showSuggestions,
+  variant,
+  animated }) => (
+    <Stack spacing={2}>
+      {showStrengthLabel && (
+        <StrengthHeading strength={strength} hasValue={value.length > 0} animated={animated} />
+      )}
+
+      <StrengthIndicator variant={variant} strength={strength} animated={animated} />
+
+      {showRequirements && (
+        <Fade in={value.length > 0}>
+          <RequirementsList
+            requirements={requirements}
+            checks={requirementChecks}
+            animated={animated}
+          />
+        </Fade>
+      )}
+
+      {showSuggestions && suggestions.length > 0 && value.length > 0 && (
+        <Fade in={true}>
+          <SuggestionsList suggestions={suggestions} />
+        </Fade>
+      )}
+    </Stack>
+);
 
 // Main component
 export const PasswordStrength: FC<PasswordStrengthProps> = ({
@@ -227,190 +330,34 @@ export const PasswordStrength: FC<PasswordStrengthProps> = ({
   showSuggestions = false,
   variant = 'linear',
   animated = true,
-  'data-testid': dataTestId,
-}) => {
-  const theme = useTheme();
+  'data-testid': dataTestId }) => {
 
   const strength = useMemo(
     () => calculatePasswordStrength(value, requirements),
     [value, requirements],
   );
 
-  const requirementChecks = useMemo(() => {
-    if (!value)
-      return {
-        length: false,
-        uppercase: false,
-        lowercase: false,
-        numbers: false,
-        special: false,
-      };
-
-    return {
-      length: value.length >= (requirements.minLength || 8),
-      uppercase: !requirements.uppercase || /[A-Z]/.test(value),
-      lowercase: !requirements.lowercase || /[a-z]/.test(value),
-      numbers: !requirements.numbers || /\d/.test(value),
-      special: !requirements.special || /[!@#$%^&*(),.?":{}|<>]/.test(value),
-    };
-  }, [value, requirements]);
-
-  const suggestions = useMemo(() => {
-    const tips = [];
-    if (!requirementChecks.length) tips.push('Use at least 8 characters');
-    if (!requirementChecks.uppercase) tips.push('Add uppercase letters');
-    if (!requirementChecks.lowercase) tips.push('Add lowercase letters');
-    if (!requirementChecks.numbers) tips.push('Include numbers');
-    if (!requirementChecks.special) tips.push('Add special characters');
-    return tips;
-  }, [requirementChecks]);
-
-  const renderStrengthIndicator = () => {
-    switch (variant) {
-      case 'circular':
-        return (
-          <Box sx={{ position: 'relative', display: 'inline-flex' }}>
-            <Box
-              sx={{
-                width: 80,
-                height: 80,
-                borderRadius: '50%',
-                background: `conic-gradient(
-                  ${theme.palette.success.main} 0deg ${strength * 3.6}deg,
-                  ${alpha(theme.palette.action.disabled, 0.1)} ${strength * 3.6}deg 360deg
-                )`,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                boxShadow: `0 4px 12px ${alpha(theme.palette.success.main, strength / 200)}`,
-              }}
-            >
-              <Box
-                sx={{
-                  width: 64,
-                  height: 64,
-                  borderRadius: '50%',
-                  background: theme.palette.background.paper,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexDirection: 'column',
-                }}
-              >
-                <Typography variant="h6" fontWeight="bold">
-                  {strength}%
-                </Typography>
-              </Box>
-            </Box>
-          </Box>
-        );
-
-      case 'steps': {
-        const steps = 5;
-        const activeStep = Math.ceil((strength / 100) * steps);
-        return (
-          <StepsContainer>
-            {Array.from({ length: steps }, (_, i) => (
-              <Step key={i} active={i === activeStep - 1} completed={i < activeStep - 1} animated={animated} />
-            ))}
-          </StepsContainer>
-        );
-      }
-
-      default:
-        return <StrengthBar variant="determinate" value={strength} strength={strength} animated={animated} />;
-    }
-  };
+  const requirementChecks = useMemo(
+    () => evaluateRequirements(value, requirements),
+    [value, requirements],
+  );
+
+  const suggestions = useMemo(() => buildSuggestions(requirementChecks), [requirementChecks]);
 
   return (
     <StrengthContainer animated={animated} data-testid={dataTestId}>
-      <Stack spacing={2}>
-        {showStrengthLabel && (
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <Typography variant="body2" color="text.secondary">
-              Password Strength
-            </Typography>
-            {value.length > 0 && (
-              <Fade in={true}>
-                <StrengthLabel
-                  label={getStrengthLabel(strength)}
-                  icon={getStrengthIcon(strength)}
-                  size="small"
-                  strength={strength}
-                  animated={animated}
-                />
-              </Fade>
-            )}
-          </Box>
-        )}
-
-        {renderStrengthIndicator()}
-
-        {showRequirements && (
-          <Fade in={value.length > 0}>
-            <Stack spacing={1}>
-              <Typography variant="caption" color="text.secondary" fontWeight="medium">
-                Requirements:
-              </Typography>
-              {requirements.minLength && (
-                <RequirementItem met={requirementChecks.length} animated={animated}>
-                  <RequirementIcon met={requirementChecks.length} />
-                  <Typography variant="caption">
-                    At least {requirements.minLength} characters
-                  </Typography>
-                </RequirementItem>
-              )}
-              {requirements.uppercase && (
-                <RequirementItem met={requirementChecks.uppercase} animated={animated}>
-                  <RequirementIcon met={requirementChecks.uppercase} />
-                  <Typography variant="caption">One uppercase letter</Typography>
-                </RequirementItem>
-              )}
-              {requirements.lowercase && (
-                <RequirementItem met={requirementChecks.lowercase} animated={animated}>
-                  <RequirementIcon met={requirementChecks.lowercase} />
-                  <Typography variant="caption">One lowercase letter</Typography>
-                </RequirementItem>
-              )}
-              {requirements.numbers && (
-                <RequirementItem met={requirementChecks.numbers} animated={animated}>
-                  <RequirementIcon met={requirementChecks.numbers} />
-                  <Typography variant="caption">One number</Typography>
-                </RequirementItem>
-              )}
-              {requirements.special && (
-                <RequirementItem met={requirementChecks.special} animated={animated}>
-                  <RequirementIcon met={requirementChecks.special} />
-                  <Typography variant="caption">One special character</Typography>
-                </RequirementItem>
-              )}
-            </Stack>
-          </Fade>
-        )}
-
-        {showSuggestions && suggestions.length > 0 && value.length > 0 && (
-          <Fade in={true}>
-            <Box>
-              <Typography variant="caption" color="text.secondary" fontWeight="medium">
-                Suggestions:
-              </Typography>
-              <Box sx={{ mt: 1 }}>
-                {suggestions.map((tip, index) => (
-                  <Typography
-                    key={index}
-                    variant="caption"
-                    display="block"
-                    color="warning.main"
-                    sx={{ ml: 2 }}
-                  >
-                    • {tip}
-                  </Typography>
-                ))}
-              </Box>
-            </Box>
-          </Fade>
-        )}
-      </Stack>
+      <PasswordStrengthBody
+        value={value}
+        strength={strength}
+        requirements={requirements}
+        requirementChecks={requirementChecks}
+        suggestions={suggestions}
+        showStrengthLabel={showStrengthLabel}
+        showRequirements={showRequirements}
+        showSuggestions={showSuggestions}
+        variant={variant}
+        animated={animated}
+      />
     </StrengthContainer>
   );
 };

package/src/components/form/PhoneInput/PhoneInput.hooks.ts

@@ -0,0 +1,134 @@
+import type { CountryCode } from 'libphonenumber-js';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { countries } from './countries';
+import { detectCountryFromNumber, formatPhoneNumber, validatePhoneNumber } from './phone';
+import type { CountryData } from './PhoneInput.types';
+
+// Value, selected country, menu anchor and validity, plus the handlers that move
+// between them. Kept out of the component so its body is markup.
+export const usePhoneInput = ({
+  defaultValue,
+  initialCountryCode,
+  onChange,
+}: {
+  defaultValue: string;
+  initialCountryCode: CountryCode;
+  onChange?: (value: string, isValid: boolean, country: CountryCode) => void;
+}) => {
+const [value, setValue] = useState(defaultValue);
+const [selectedCountry, setSelectedCountry] = useState(
+  countries.find((c) => c.code === initialCountryCode) || countries[0],
+);
+const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+const [isValid, setIsValid] = useState(false);
+const [isFocused, setIsFocused] = useState(false);
+const onChangeRef = useRef(onChange);
+const isInitialMountRef = useRef(true);
+
+// Update ref when onChange changes
+useEffect(() => {
+  onChangeRef.current = onChange;
+}, [onChange]);
+
+useEffect(() => {
+  if (!selectedCountry) return;
+
+  const valid = validatePhoneNumber(value, selectedCountry.code);
+  setIsValid(valid);
+
+  // Skip onChange call on initial mount
+  if (isInitialMountRef.current) {
+    isInitialMountRef.current = false;
+    return;
+  }
+
+  // Call onChange for all value/country changes after initial mount
+  if (onChangeRef.current) {
+    onChangeRef.current(value, valid, selectedCountry.code);
+  }
+}, [value, selectedCountry]);
+
+  const handlers = usePhoneHandlers({
+    value,
+    setValue,
+    selectedCountry,
+    setSelectedCountry,
+    setAnchorEl,
+    setIsFocused,
+  });
+
+  return {
+    value,
+    selectedCountry,
+    anchorEl,
+    isValid,
+    isFocused,
+    setIsFocused,
+    setAnchorEl,
+    ...handlers,
+  };
+};
+
+// Opening and closing the country menu, picking a country, typing, and
+// reformatting on blur.
+const usePhoneHandlers = ({
+  value,
+  setValue,
+  selectedCountry,
+  setSelectedCountry,
+  setAnchorEl,
+  setIsFocused,
+}: {
+  value: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  selectedCountry?: CountryData;
+  setSelectedCountry: React.Dispatch<React.SetStateAction<CountryData | undefined>>;
+  setAnchorEl: React.Dispatch<React.SetStateAction<null | HTMLElement>>;
+  setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const handleCountryClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCountryClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleCountrySelect = (country: CountryData) => {
+    setSelectedCountry(country);
+    handleCountryClose();
+
+    // Reformat number with new country code
+    if (value) {
+      const formatted = formatPhoneNumber(value, country.code);
+      setValue(formatted);
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setValue(newValue);
+
+    // Auto-detect country if user types international format
+    if (newValue.startsWith('+')) {
+      const detectedCountry = detectCountryFromNumber(newValue);
+      if (detectedCountry) {
+        const detectedCountryData = countries.find((c) => c.code === detectedCountry);
+        if (detectedCountryData && detectedCountryData.code !== selectedCountry?.code) {
+          setSelectedCountry(detectedCountryData);
+        }
+      }
+    }
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (value && selectedCountry) {
+      const formatted = formatPhoneNumber(value, selectedCountry.code);
+      setValue(formatted);
+    }
+  };
+
+  return { handleCountryClick, handleCountryClose, handleCountrySelect, handleChange, handleBlur };
+};