feat(components): introduce new UI components and enhance Vite configuration

- Added AssigneeSelector, Avatar, AvatarGroup, Button, Checkbox, CustomColordLabel, CustomNumberLabel, LabelsSelector, Progress, Tag, and Tooltip components for improved UI functionality. - Updated Vite configuration to change the development server port to 5173 and removed unnecessary interop settings for module compatibility. - Enhanced task management components to utilize new task structure and improve performance.
2025-06-22 14:16:39 +05:30
parent cfbb4534d8
commit 05729285af
18 changed files with 1566 additions and 689 deletions
--- a/worklenz-frontend/src/components/Avatar.tsx
+++ b/worklenz-frontend/src/components/Avatar.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+interface AvatarProps {
+  name?: string;
+  size?: number | 'small' | 'default' | 'large';
+  isDarkMode?: boolean;
+  className?: string;
+  src?: string;
+  backgroundColor?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  style?: React.CSSProperties;
+}
+
+const Avatar: React.FC<AvatarProps> = ({ 
+  name = '', 
+  size = 'default', 
+  isDarkMode = false, 
+  className = '',
+  src,
+  backgroundColor,
+  onClick,
+  style = {}
+}) => {
+  // Handle both numeric and string sizes
+  const getSize = () => {
+    if (typeof size === 'number') {
+      return { width: size, height: size, fontSize: `${size * 0.4}px` };
+    }
+    
+    const sizeMap = {
+      small: { width: 24, height: 24, fontSize: '10px' },
+      default: { width: 32, height: 32, fontSize: '14px' },
+      large: { width: 48, height: 48, fontSize: '18px' }
+    };
+    
+    return sizeMap[size];
+  };
+
+  const sizeStyle = getSize();
+  
+  const lightColors = [
+    '#f56565', '#4299e1', '#48bb78', '#ed8936', '#9f7aea', 
+    '#ed64a6', '#667eea', '#38b2ac', '#f6ad55', '#4fd1c7'
+  ];
+  
+  const darkColors = [
+    '#e53e3e', '#3182ce', '#38a169', '#dd6b20', '#805ad5', 
+    '#d53f8c', '#5a67d8', '#319795', '#d69e2e', '#319795'
+  ];
+  
+  const colors = isDarkMode ? darkColors : lightColors;
+  const colorIndex = name.charCodeAt(0) % colors.length;
+  const defaultBgColor = backgroundColor || colors[colorIndex];
+  
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.(e);
+  };
+
+  const avatarStyle = {
+    ...sizeStyle,
+    backgroundColor: defaultBgColor,
+    ...style
+  };
+
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={name}
+        onClick={handleClick}
+        className={`rounded-full object-cover shadow-sm cursor-pointer ${className}`}
+        style={avatarStyle}
+      />
+    );
+  }
+  
+  return (
+    <div 
+      onClick={handleClick}
+      className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm cursor-pointer ${className}`}
+      style={avatarStyle}
+    >
+      {name.charAt(0)?.toUpperCase() || '?'}
+    </div>
+  );
+};
+
+export default Avatar;