@12-apps/ui 1.0.0

package/src/components/form/Menubar/Menubar.tsx

@@ -0,0 +1,467 @@
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {
+  alpha,
+  AppBar,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import React, { useRef,useState } from 'react';
+
+import type {
+  MenubarGroupProps,
+  MenubarItem,
+  MenubarProps,
+  MenubarSeparatorProps,
+} from './Menubar.types';
+
+export const Menubar: React.FC<MenubarProps> = ({
+  items,
+  variant = 'default',
+  size = 'md',
+  color = 'default',
+  orientation = 'horizontal',
+  glow = false,
+  pulse = false,
+  glass = false,
+  gradient = false,
+  loading = false,
+  disabled = false,
+  className,
+  style,
+  logo,
+  endContent,
+  sticky = false,
+  transparent = false,
+  blur = false,
+  elevation = 4,
+  fullWidth = true,
+  onClick,
+  onFocus,
+  onBlur,
+  'data-testid': dataTestId,
+}) => {
+  const theme = useTheme();
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const menuRefs = useRef<{ [key: string]: HTMLElement | null }>({});
+
+  const handleMenuOpen = (itemId: string, anchorEl: HTMLElement) => {
+    setActiveMenu(itemId);
+    menuRefs.current[itemId] = anchorEl;
+  };
+
+  const handleMenuClose = () => {
+    const previousMenu = activeMenu;
+    setActiveMenu(null);
+    // Return focus to the button that opened the menu
+    if (previousMenu && menuRefs.current[previousMenu]) {
+      menuRefs.current[previousMenu].focus();
+    }
+  };
+
+  const handleItemClick = (item: MenubarItem) => {
+    if (item.action) {
+      item.action();
+    }
+    onClick?.(item);
+    handleMenuClose();
+  };
+
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'xs':
+        return {
+          minHeight: 40,
+          fontSize: '0.75rem',
+          padding: theme.spacing(0.5, 1),
+        };
+      case 'sm':
+        return {
+          minHeight: 48,
+          fontSize: '0.875rem',
+          padding: theme.spacing(0.75, 1.5),
+        };
+      case 'md':
+        return {
+          minHeight: 56,
+          fontSize: '1rem',
+          padding: theme.spacing(1, 2),
+        };
+      case 'lg':
+        return {
+          minHeight: 64,
+          fontSize: '1.125rem',
+          padding: theme.spacing(1.25, 2.5),
+        };
+      case 'xl':
+        return {
+          minHeight: 72,
+          fontSize: '1.25rem',
+          padding: theme.spacing(1.5, 3),
+        };
+      default:
+        return {
+          minHeight: 56,
+          fontSize: '1rem',
+          padding: theme.spacing(1, 2),
+        };
+    }
+  };
+
+  const getColorStyles = () => {
+    if (color === 'default') {
+      return {
+        backgroundColor: transparent ? 'transparent' : theme.palette.background.paper,
+        color: theme.palette.text.primary,
+      };
+    }
+    return {
+      backgroundColor: transparent ? 'transparent' : theme.palette[color].main,
+      color: theme.palette[color].contrastText,
+    };
+  };
+
+  const getVariantStyles = () => {
+    const baseStyles = {
+      transition: theme.transitions.create(['all'], {
+        duration: theme.transitions.duration.standard,
+      }),
+      ...getSizeStyles(),
+      ...getColorStyles(),
+    };
+
+    const glowStyles = glow
+      ? {
+          boxShadow: `0 0 20px ${alpha(
+            color === 'default' ? theme.palette.primary.main : theme.palette[color].main,
+            0.4,
+          )}`,
+        }
+      : {};
+
+    const pulseStyles = pulse
+      ? {
+          animation: 'pulse 2s infinite',
+          '@keyframes pulse': {
+            '0%': { opacity: 1 },
+            '50%': { opacity: 0.8 },
+            '100%': { opacity: 1 },
+          },
+        }
+      : {};
+
+    const blurStyles = blur
+      ? {
+          backdropFilter: 'blur(10px)',
+        }
+      : {};
+
+    switch (variant) {
+      case 'glass':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
+          backdropFilter: 'blur(20px)',
+          borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+        };
+
+      case 'gradient': {
+        const gradientColor = color === 'default' ? 'primary' : color;
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          background: gradient
+            ? `linear-gradient(135deg, ${theme.palette[gradientColor].light}, ${theme.palette[gradientColor].dark})`
+            : theme.palette[gradientColor].main,
+          color: theme.palette[gradientColor].contrastText,
+        };
+      }
+
+      case 'elevated':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          ...blurStyles,
+          boxShadow: theme.shadows[elevation],
+        };
+
+      case 'minimal':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          ...blurStyles,
+          boxShadow: 'none',
+          borderBottom: 'none',
+        };
+
+      case 'bordered':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          ...blurStyles,
+          borderBottom: `2px solid ${
+            color === 'default' ? theme.palette.divider : theme.palette[color].main
+          }`,
+        };
+
+      default:
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          ...blurStyles,
+        };
+    }
+  };
+
+  const renderMenubarItem = (item: MenubarItem) => {
+    if (item.divider) {
+      return <MenubarSeparator key={item.id} orientation={orientation} />;
+    }
+
+    const hasChildren = item.children && item.children.length > 0;
+
+    return (
+      <Box key={item.id}>
+        <Button
+          data-testid={`menubar-button-${item.id}`}
+          onClick={(e) => {
+            if (hasChildren) {
+              handleMenuOpen(item.id, e.currentTarget);
+            } else {
+              handleItemClick(item);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              if (hasChildren) {
+                handleMenuOpen(item.id, e.currentTarget);
+              } else {
+                handleItemClick(item);
+              }
+            }
+          }}
+          onMouseDown={(e) => {
+            // Prevent default to maintain focus
+            e.preventDefault();
+          }}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          disabled={item.disabled || disabled}
+          startIcon={item.icon}
+          endIcon={hasChildren ? <KeyboardArrowDownIcon /> : null}
+          aria-haspopup={hasChildren ? 'menu' : undefined}
+          aria-expanded={hasChildren ? activeMenu === item.id : undefined}
+          sx={{
+            color: 'inherit',
+            textTransform: 'none',
+            ...getSizeStyles(),
+          }}
+        >
+          {item.label}
+        </Button>
+
+        {hasChildren && (
+          <Menu
+            anchorEl={menuRefs.current[item.id]}
+            open={activeMenu === item.id}
+            onClose={handleMenuClose}
+            autoFocus
+            PaperProps={{
+              sx: {
+                minWidth: 200,
+                mt: 1,
+              },
+            }}
+          >
+            {item.children?.map((child) =>
+              child.divider ? (
+                <Divider key={child.id} />
+              ) : (
+                <MenuItem
+                  key={child.id}
+                  onClick={() => handleItemClick(child)}
+                  disabled={child.disabled}
+                >
+                  {child.icon && <ListItemIcon>{child.icon}</ListItemIcon>}
+                  <ListItemText>{child.label}</ListItemText>
+                  {child.shortcut && (
+                    <Chip
+                      label={child.shortcut}
+                      size="small"
+                      variant="outlined"
+                      sx={{ ml: 2, height: 20, fontSize: '0.7rem' }}
+                    />
+                  )}
+                </MenuItem>
+              ),
+            )}
+          </Menu>
+        )}
+      </Box>
+    );
+  };
+
+  const content = (
+    <Toolbar
+      role="toolbar"
+      aria-label="Main navigation"
+      sx={{
+        ...getVariantStyles(),
+        width: fullWidth ? '100%' : 'auto',
+        flexDirection: orientation === 'vertical' ? 'column' : 'row',
+        alignItems: orientation === 'vertical' ? 'flex-start' : 'center',
+        gap: 1,
+      }}
+    >
+      {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}
+
+      {loading ? (
+        <CircularProgress size={20} color="inherit" />
+      ) : (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: orientation === 'vertical' ? 'column' : 'row',
+            gap: orientation === 'vertical' ? 0.5 : 1,
+            flex: 1,
+          }}
+        >
+          {items.map(renderMenubarItem)}
+        </Box>
+      )}
+
+      {endContent && <Box sx={{ ml: 'auto' }}>{endContent}</Box>}
+    </Toolbar>
+  );
+
+  if (orientation === 'vertical') {
+    return (
+      <Box
+        className={className}
+        sx={{
+          ...style,
+          position: sticky ? 'sticky' : 'relative',
+          top: sticky ? 0 : 'auto',
+          zIndex: theme.zIndex.appBar,
+        }}
+      >
+        {content}
+      </Box>
+    );
+  }
+
+  return (
+    <AppBar
+      position={sticky ? 'sticky' : 'static'}
+      className={className}
+      data-testid={dataTestId}
+      sx={{
+        ...getVariantStyles(),
+        ...style,
+      }}
+      elevation={0}
+      component="header"
+    >
+      {content}
+    </AppBar>
+  );
+};
+
+export const MenubarGroup: React.FC<MenubarGroupProps> = ({
+  label,
+  items,
+  icon,
+  disabled,
+  open,
+  onOpenChange,
+  onClick,
+  className,
+  style,
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const isOpen = open !== undefined ? open : Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    onOpenChange?.(false);
+  };
+
+  const handleItemClick = (item: MenubarItem) => {
+    if (item.action) {
+      item.action();
+    }
+    onClick?.(item);
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleClick}
+        disabled={disabled}
+        startIcon={icon}
+        endIcon={<KeyboardArrowDownIcon />}
+        className={className}
+        sx={style}
+      >
+        {label}
+      </Button>
+      <Menu anchorEl={anchorEl} open={isOpen} onClose={handleClose}>
+        {items.map((item) =>
+          item.divider ? (
+            <Divider key={item.id} />
+          ) : (
+            <MenuItem key={item.id} onClick={() => handleItemClick(item)} disabled={item.disabled}>
+              {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+              <ListItemText>{item.label}</ListItemText>
+              {item.shortcut && (
+                <Typography variant="caption" sx={{ ml: 2 }}>
+                  {item.shortcut}
+                </Typography>
+              )}
+            </MenuItem>
+          ),
+        )}
+      </Menu>
+    </>
+  );
+};
+
+export const MenubarSeparator: React.FC<MenubarSeparatorProps> = ({
+  orientation = 'horizontal',
+  className,
+  style,
+}) => (
+    <Divider
+      orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
+      flexItem
+      className={className}
+      sx={{
+        mx: orientation === 'horizontal' ? 1 : 0,
+        my: orientation === 'vertical' ? 1 : 0,
+        ...style,
+      }}
+    />
+  );

package/src/components/form/Menubar/Menubar.types.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties,ReactNode } from 'react';
+
+export interface MenubarItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  divider?: boolean;
+  action?: () => void;
+  children?: MenubarItem[];
+}
+
+export interface MenubarProps {
+  items: MenubarItem[];
+  variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'bordered';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  orientation?: 'horizontal' | 'vertical';
+  glow?: boolean;
+  pulse?: boolean;
+  glass?: boolean;
+  gradient?: boolean;
+  ripple?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  logo?: ReactNode;
+  endContent?: ReactNode;
+  sticky?: boolean;
+  transparent?: boolean;
+  blur?: boolean;
+  elevation?: number;
+  fullWidth?: boolean;
+  onClick?: (item: MenubarItem) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  'data-testid'?: string;
+}
+
+export interface MenubarGroupProps {
+  label: string;
+  items: MenubarItem[];
+  icon?: ReactNode;
+  disabled?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClick?: (item: MenubarItem) => void;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  className?: string;
+  style?: CSSProperties;
+}
+
+export interface MenubarItemProps extends MenubarItem {
+  selected?: boolean;
+  onClick?: () => void;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
+  showShortcut?: boolean;
+  ripple?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export interface MenubarSeparatorProps {
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  style?: CSSProperties;
+}

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

@@ -0,0 +1,8 @@
+export { Menubar, MenubarGroup, MenubarSeparator } from './Menubar';
+export type {
+  MenubarGroupProps,
+  MenubarItem,
+  MenubarItemProps,
+  MenubarProps,
+  MenubarSeparatorProps,
+} from './Menubar.types';

package/src/components/form/PasswordStrength/PasswordStrength.md

@@ -0,0 +1,139 @@
+# PasswordStrength Component
+
+A comprehensive password strength indicator with visual feedback, requirement checking, and multiple display variants.
+
+## Features
+
+- Real-time password strength calculation
+- Customizable requirements validation
+- Multiple visual indicators (linear, circular, steps)
+- Animated transitions and glass morphism effects
+- Helpful improvement suggestions
+- Full accessibility support
+- Theme integration
+
+## Usage
+
+```tsx
+import { PasswordStrength } from '@procurement/ui';
+
+// Basic usage
+<PasswordStrength value={password} />
+
+// With custom requirements
+<PasswordStrength
+  value={password}
+  requirements={{
+    minLength: 12,
+    uppercase: true,
+    lowercase: true,
+    numbers: true,
+    special: true,
+  }}
+  showSuggestions={true}
+  variant="circular"
+/>
+```
+
+## Props
+
+### `value` (required)
+
+- Type: `string`
+- Description: The password string to analyze
+
+### `showRequirements`
+
+- Type: `boolean`
+- Default: `true`
+- Description: Display requirements checklist with visual indicators
+
+### `requirements`
+
+- Type: `PasswordRequirements`
+- Default: `{ minLength: 8, uppercase: true, lowercase: true, numbers: true, special: true }`
+- Description: Custom password requirements configuration
+
+### `showStrengthLabel`
+
+- Type: `boolean`
+- Default: `true`
+- Description: Display strength label (Very Weak, Weak, Fair, Good, Strong)
+
+### `showSuggestions`
+
+- Type: `boolean`
+- Default: `false`
+- Description: Show improvement suggestions for weak passwords
+
+### `variant`
+
+- Type: `'linear' | 'circular' | 'steps'`
+- Default: `'linear'`
+- Description: Visual indicator style
+
+### `animated`
+
+- Type: `boolean`
+- Default: `true`
+- Description: Enable animations and smooth transitions
+
+## PasswordRequirements Interface
+
+```typescript
+interface PasswordRequirements {
+  minLength?: number;
+  uppercase?: boolean;
+  lowercase?: boolean;
+  numbers?: boolean;
+  special?: boolean;
+}
+```
+
+## Strength Levels
+
+1. **Very Weak (0-20%)** - Red color, needs significant improvement
+2. **Weak (21-40%)** - Orange color, basic requirements not met
+3. **Fair (41-60%)** - Blue color, moderate strength
+4. **Good (61-80%)** - Light green color, strong password
+5. **Strong (81-100%)** - Dark green color, excellent password
+
+## Accessibility
+
+- ARIA labels for screen readers
+- Keyboard navigation support
+- High contrast color indicators
+- Clear visual feedback for all states
+- Semantic HTML structure
+
+## Visual Variants
+
+### Linear Progress Bar
+
+Standard horizontal progress bar with gradient colors.
+
+### Circular Indicator
+
+Circular progress ring with percentage display.
+
+### Steps Indicator
+
+Five discrete steps showing incremental progress.
+
+## Design Tokens
+
+Uses MUI theme tokens for:
+
+- Colors and gradients
+- Spacing and layout
+- Typography scales
+- Border radius values
+- Animation durations
+
+## Best Practices
+
+- Always validate passwords on both client and server
+- Use this component alongside secure password input fields
+- Consider showing requirements before user starts typing
+- Provide clear feedback for password improvements
+- Test with screen readers for accessibility compliance