oneslash-design-system 1.0.4 → 1.0.8

package/components/{alert/alert.tsx → alert.tsx}

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 
 interface AlertProps {
-  open: boolean;
+  open?: boolean;
   type: 'success' | 'warning' | 'error' | 'info';
   message: string;
   onClose: () => void;

package/components/button.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+interface ButtonProps{
+  size: 'small' | 'medium' | 'large';
+  type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
+  state: 'enabled' | 'hovered' | 'focused' | 'disabled';
+  label: string;
+  decoIcon?: string;
+  actionIcon?: string;
+  onClickButton?: any; 
+  onClickActionIcon?: () => void;
+}
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Button({
+  size,
+  type,
+  state,
+  label,
+  decoIcon,
+  actionIcon,
+  onClickButton,
+  onClickActionIcon,
+}: ButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [IconLeft, setIconLeft] = useState<IconType | null>(null);
+  const [IconRight, setIconRight] = useState<IconType | null>(null);
+
+  // Import icon dynamically
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcons = async () => {
+      if (decoIcon) {
+        setIconLeft(await loadIcon(decoIcon));
+      }
+      if (actionIcon) {
+        setIconRight(await loadIcon(actionIcon));
+      }
+    };
+    fetchIcons();
+  }, [decoIcon, actionIcon, loadIcon]);
+
+  // Define classes for size
+  const sizeClasses = {
+    large: 'text-body1 p-2',
+    medium: 'text-body1 p-1',
+    small: 'text-body2 p-1',
+  }[size];
+
+  // Define icon size classes
+  const sizeIcon = {
+    large: 'w-6 h-6',
+    medium: 'w-5 h-5',
+    small: 'w-4 h-4',
+  }[size];
+
+  // Define classes for button types
+  const baseTypeClasses = {
+    primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
+    secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
+    tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
+    textOnly: 'text-light-text-primary dark:text-dark-text-primary',
+  }[type];
+
+  const hoverTypeClasses = {
+    primary: 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
+    secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
+    tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
+    textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
+  }[type];
+
+  // State classes
+  const stateClasses = {
+    enabled: 'cursor-pointer',
+    focused: 'ring-2 ring-offset-4 ring-offset-light-background-default dark:ring-offset-dark-background-default ring-light-accent-main dark:ring-dark-accent-main',
+    disabled: type === 'textOnly'
+      ? 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-transparent'
+      : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
+  };
+
+  // Build the button classes dynamically
+  const buttonClasses = `
+    flex flex-row space-x-2 items-center rounded-[8px]
+    ${sizeClasses}
+    ${state === 'enabled' ? baseTypeClasses : ''}
+    ${state === 'focused' ? stateClasses.focused : ''}
+    ${state === 'disabled' ? stateClasses.disabled : baseTypeClasses}
+    ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''}
+    `;
+
+  return (
+    <button
+      className={buttonClasses}
+      onMouseEnter={() => { if (state !== 'disabled') setIsHovered(true); }}
+      onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
+      onClick={onClickButton} // Button click action
+    >
+      {IconLeft && (
+          <IconLeft className={sizeIcon} />
+      )}
+      <div className="whitespace-nowrap px-2">{label}</div>
+      {IconRight && (
+        <div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className={sizeIcon} />
+        </div>
+      )}
+    </button>
+  );
+}

package/components/{checkBox/checkBox.tsx → checkBox.tsx}

@@ -1,5 +1,6 @@
 'use client';
-import React, { useState } from 'react';
+
+import { useState } from 'react';
 
 interface CheckboxProps {
   label?: string;
@@ -12,7 +13,6 @@ export default function Checkbox({
   checked = false, 
   onChange
 }: CheckboxProps) {
-  
   const [isChecked, setIsChecked] = useState(checked);
 
   const handleToggle = () => {

package/components/emptyBox.tsx

@@ -0,0 +1,33 @@
+'use client'
+import React from 'react';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+
+interface EmptyBoxProps{
+    text: string;
+    size: "small" | "large";
+  }
+  
+export default function EmptyBox ({ 
+    text,
+    size,
+}: EmptyBoxProps) {
+
+    const color = 'text-light-text-disabled dark:text-dark-text-disabled';
+
+    const height = size === 'small' 
+    ? 'py-6' 
+    : 'h-full';
+
+    const iconSize = 'size-6' ;
+
+    return (
+        <div className={`flex flex-col space-y-2 justify-center items-center w-full ${height}`}>
+            <ExclamationCircleIcon 
+                className={`${iconSize} ${color}`}
+            />
+            <p className={`text-body1 ${color}`} text-center>
+                {text}
+            </p>
+        </div>
+    );
+}

package/components/loadingScreen.tsx

@@ -0,0 +1,18 @@
+'use client';
+import React from 'react';
+
+export default function LoadingScreen() {
+  return (
+    <div className="flex justify-center items-center h-full w-full min-h-[200px]">
+        <div className="w-12 h-12 border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    </div>
+  );
+};
+
+export function LoadingSmall() {
+  return (
+    <div className="flex justify-center items-center h-[40px] w-[40px]">
+      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    </div>
+  );
+};

package/components/modal.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  actions: React.ReactNode;
+}
+
+export default function Modal({ 
+  isOpen, 
+  title, 
+  children, 
+  onClose, 
+  actions, 
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  return (
+    <div 
+      className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50"
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-labelledby="modal-title"
+      aria-modal="true"
+    >
+      <div 
+        className="bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 w-[600px]"
+        style={{
+          maxHeight: 'calc(100vh - 64px)',
+          overflowY: 'auto',
+        }}
+      >
+        <h2 id="modal-title" className="text-h6">
+          {title}
+        </h2>
+        <div className="text-body1 space-y-4">
+          {children}
+        </div>
+        <div className="flex justify-between">
+          {actions}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/popover.tsx

@@ -0,0 +1,98 @@
+'use client';
+import React, { useState, useRef, useLayoutEffect } from 'react';
+
+interface PopoverProps {
+  id?: string;
+  anchorEl?: HTMLElement | null;
+  open?: boolean;
+  onClose?: () => void;
+  children: any;
+}
+
+export default function Popover({ 
+  anchorEl, 
+  open = false, 
+  onClose, 
+  children 
+}: PopoverProps) {
+
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Close popover when clicking outside
+  useLayoutEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchorEl) {
+        onClose?.(); // Safe call for optional onClose
+      }
+    };
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, anchorEl, onClose]);
+
+  // Calculate position and handle scroll/resize
+  useLayoutEffect(() => {
+    if (anchorEl && open) {
+      const handlePositioning = () => {
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const popoverRect = popoverRef.current?.getBoundingClientRect();
+
+        if (popoverRect) {
+          const spaceBelow = window.innerHeight - anchorRect.bottom;
+          const spaceAbove = anchorRect.top;
+          
+          // Decide whether to place the popover above or below the anchor
+          const shouldPlaceAbove = spaceBelow < popoverRect.height + 8 && spaceAbove > popoverRect.height + 8;
+
+          // Calculate top and left positions
+          const topPosition = shouldPlaceAbove
+            ? anchorRect.top + window.scrollY - popoverRect.height - 8
+            : anchorRect.bottom + window.scrollY + 8;
+          
+          let leftPosition = anchorRect.left + window.scrollX + (anchorRect.width / 2) - (popoverRect.width / 2);
+
+          // Ensure the popover doesn't overflow off the left or right of the screen
+          if (leftPosition < 8) {
+            leftPosition = 8; // Prevent overflow on the left
+          } else if (leftPosition + popoverRect.width > window.innerWidth - 8) {
+            leftPosition = window.innerWidth - popoverRect.width - 8; // Prevent overflow on the right
+          }
+
+          setPopoverStyle({
+            position: 'absolute',
+            top: `${topPosition}px`,
+            left: `${leftPosition}px`,
+            zIndex: 10000,
+            visibility: 'visible',
+          });
+        }
+      };
+
+      handlePositioning(); // Initial positioning calculation
+      window.addEventListener('resize', handlePositioning);
+      window.addEventListener('scroll', handlePositioning, true);
+
+      return () => {
+        window.removeEventListener('resize', handlePositioning);
+        window.removeEventListener('scroll', handlePositioning, true);
+      };
+    }
+  }, [anchorEl, open]);
+
+  if (!open || !anchorEl) return null;
+
+  return (
+    <div
+      ref={popoverRef}
+      style={popoverStyle}
+      className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2"
+      role="dialog"
+    >
+      {children}
+    </div>
+  );
+}

package/components/{tab/tab.tsx → tab.tsx}

@@ -6,19 +6,36 @@ type TabProps = {
   label: string;
   href?: string;
   isSelected: boolean;
-  onClick: () => void;
-  iconName?: string;
+  onClickTab: () => void;
+  onClickActionIcon?: any;
+  decoIcon?: string;
+  actionIcon?: string;
 };
 
-const TabIcon: React.FC<{ iconName?: string }> = ({ iconName }) => {
-  const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
+export default function Tab({
+  label,
+  href,
+  isSelected,
+  onClickTab,
+  onClickActionIcon,
+  decoIcon,
+  actionIcon
+}: TabProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  
+  const [IconLeft, setIconLeft] = useState<IconType | null>(null);
+  const [IconRight, setIconRight] = useState<IconType | null>(null);
+
+  // Load icon dynamically
   const loadIcon = useCallback(async (iconName?: string) => {
     if (!iconName) return null;
     try {
       const module = await import('@heroicons/react/24/outline');
-      const IconComponent = module[iconName as keyof typeof module] as React.ComponentType<React.SVGProps<SVGSVGElement>>;
-      return IconComponent || null;
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
     } catch (error) {
       console.error(`Failed to load icon ${iconName}:`, error);
       return null;
@@ -26,23 +43,19 @@ const TabIcon: React.FC<{ iconName?: string }> = ({ iconName }) => {
   }, []);
 
   useEffect(() => {
-    const fetchIcon = async () => {
-      if (iconName) {
-        setIcon(await loadIcon(iconName));
+    const fetchIcons = async () => {
+      if (decoIcon) {
+        setIconLeft(await loadIcon(decoIcon));
+      }
+      if (actionIcon) {
+        setIconRight(await loadIcon(actionIcon));
       }
     };
-    fetchIcon();
-  }, [iconName, loadIcon]);
-
-  return Icon ? <Icon className="w-5 h-5" /> : null;
-};
-
-const Tab: React.FC<TabProps> = ({ label, href, isSelected, onClick, iconName }) => {
-  const router = useRouter();
-  const pathname = usePathname();
+    fetchIcons();
+  }, [decoIcon, actionIcon, loadIcon]);
 
   const handleClick = () => {
-    onClick();
+    onClickTab();
     if (href) {
       router.push(href);
     }
@@ -58,12 +71,15 @@ const Tab: React.FC<TabProps> = ({ label, href, isSelected, onClick, iconName })
       `}
       onClick={handleClick}
     >
-      {iconName && <TabIcon iconName={iconName} />}
-      <span className="whitespace-nowrap text-body1">
+      {IconLeft && <IconLeft className="w-5 h-5" />}
+      <span className="whitespace-nowrap text-body1 px-2">
         {label}
       </span>
+      {IconRight && (
+        <div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className="w-5 h-5" />
+        </div>
+      )}
     </div>
   );
-};
-
-export default Tab;
+}

package/components/{tag/tag.tsx → tag.tsx}

@@ -27,7 +27,6 @@ export default function Tag({
   onClick,
   color = 'default',
 }: TagProps) {
-
   const [isHovered, setIsHovered] = useState(false);
   const [Icon, setIcon] = useState<IconType | null>(null);
   const [DeleteIcon, setDeleteIcon] = useState<IconType | null>(null);
@@ -103,6 +102,7 @@ export default function Tag({
         >
           {DeleteIcon && <DeleteIcon className="w-4 h-4" />}
         </button>
+        
       )}
     </div>
   );

package/components/{textField/textField.tsx → textField.tsx}

@@ -5,9 +5,13 @@ interface TextFieldProps {
   id: string;
   label?: string;
   value: string;
-  onChange: any;
-  iconLeft?: any;
-  iconRight?: React.ReactNode | React.ComponentType<any>; 
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Specify the event type for both input and textarea
+  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Handle blur event for input/textarea
+  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Handle focus event for input/textarea
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void; // Add onKeyDown
+  autoFocus?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode | React.ComponentType<any>;
   multiline?: boolean;
   maxRows?: number;
   disabled?: boolean;
@@ -19,6 +23,10 @@ export default function TextField({
   label,
   value,
   onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  autoFocus = false, // Accept the autoFocus prop with default value
   iconLeft,
   iconRight,
   multiline = false,
@@ -26,47 +34,31 @@ export default function TextField({
   disabled = false,
   error = false,
 }: TextFieldProps) {
-	
   const [isFocused, setIsFocused] = useState(false);
 
-  // Base styles
   const baseClasses = 'w-full border rounded-[8px] p-2';
-
-  // Background color
   const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
-
-  // Border color
   const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
-
-  // State styles
-  const disabledClasses = 'bg-gray-200 cursor-not-allowed';
-  const errorClasses = 'border-red-500 focus:ring-red-500';
-  const focusClasses = 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none';
-  const hoverClasses = 'hover:border-light-outlinedBorder-hover';
-  const defaultClasses = 'border-gray-300';
-
-  // Container styles
   const containerClasses = `
     ${bgColor}
     ${borderColor}
     ${baseClasses}
-    ${disabled ? disabledClasses : ''}
-    ${error ? errorClasses : ''}
-    ${isFocused ? focusClasses : ''}
-    ${!disabled && !error ? hoverClasses : ''}
-    ${defaultClasses}
+    ${disabled ? 'bg-gray-200 cursor-not-allowed' : ''}
+    ${error ? 'border-red-500 focus:ring-red-500' : ''}
+    ${isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : ''}
+    ${!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : ''}
+    border-gray-300
   `;
 
-	// Render iconRight in TextField
-	const renderIconRight = () => {
-		if (React.isValidElement(iconRight)) {
-			return iconRight;
-		}
-		if (typeof iconRight === 'function') {
-			return React.createElement(iconRight); 
-		}
-		return null;
-	};
+  const renderIconRight = () => {
+    if (React.isValidElement(iconRight)) {
+      return iconRight;
+    }
+    if (typeof iconRight === 'function') {
+      return React.createElement(iconRight); 
+    }
+    return null;
+  };
 
   return (
     <div className="flex flex-col w-full">
@@ -93,8 +85,16 @@ export default function TextField({
             className={containerClasses}
             value={value}
             onChange={onChange}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
+            onFocus={(e) => {
+              setIsFocused(true);
+              if (onFocus) onFocus(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              if (onBlur) onBlur(e);
+            }}
+            onKeyDown={onKeyDown}
+            autoFocus={autoFocus} // Pass autoFocus to textarea
             disabled={disabled}
           />
         ) : (
@@ -104,8 +104,16 @@ export default function TextField({
             className={containerClasses}
             value={value}
             onChange={onChange}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
+            onFocus={(e) => {
+              setIsFocused(true);
+              if (onFocus) onFocus(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              if (onBlur) onBlur(e);
+            }}
+            onKeyDown={onKeyDown}
+            autoFocus={autoFocus} // Pass autoFocus to input
             disabled={disabled}
           />
         )}

package/components/timeStamp.tsx

@@ -0,0 +1,65 @@
+'use client';
+import React from 'react';
+
+interface TimeStampProps{
+    createdAt: string | number | Date;
+    dateFormat: 'absolute' | 'relative';
+  }
+  
+export default function TimeStamp({
+    createdAt,
+    dateFormat,
+}: TimeStampProps) {
+
+    // absolute timestamp
+    const absoluteTimeStamp = (createdAt: string | number | Date): string => {
+        const date = new Date(createdAt);
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const year = date.getFullYear();
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const formattedHours = hours.toString().padStart(2, '0');
+        const formattedMinutes = minutes.toString().padStart(2, '0');
+        const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        const dayOfWeek = daysOfWeek[date.getDay()];
+        return `${month}/${day}/${year} ${dayOfWeek} ${formattedHours}:${formattedMinutes}`;
+    };
+
+    // relative timestamp
+    const relativeTimeStamp = (createdAt: string | number | Date): string => {
+        const date = new Date(createdAt);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const seconds = Math.floor(diff / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        const weeks = Math.floor(days / 7);
+        const months = Math.floor(days / 30);
+        const years = Math.floor(days / 365);
+        if (years > 0) {
+            return `${years} year${years > 1 ? 's' : ''} ago`;
+        } else if (months > 0) {
+            return `${months} month${months > 1 ? 's' : ''} ago`;
+        } else if (weeks > 0) {
+            return `${weeks} week${weeks > 1 ? 's' : ''} ago`;
+        } else if (days > 0) {
+            return `${days} day${days > 1 ? 's' : ''} ago`;
+        } else if (hours > 0) {
+            return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        } else if (minutes > 0) {
+            return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+        } else {
+            return `${seconds} second${seconds > 1 ? 's' : ''} ago`;
+        }
+    };
+    
+    const timeStamp = dateFormat === 'absolute' ? absoluteTimeStamp(createdAt) : relativeTimeStamp(createdAt);
+
+    return (
+        <p className="text-caption text-light-text-secondary dark:text-dark-text-secondary">
+            {timeStamp}
+        </p>
+    );
+};

package/components/{tooltip/tooltip.tsx → tooltip.tsx}

@@ -6,11 +6,7 @@ interface TooltipProps {
   children: React.ReactElement;
 }
 
-export default function Tooltip({ 
-  title, 
-  children 
-}: TooltipProps) {
-
+export default function Tooltip({ title, children }: TooltipProps) {
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState<'top' | 'bottom'>('bottom');
   const tooltipRef = useRef<HTMLDivElement>(null);

package/index.css

@@ -1,4 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
+
+body {
+  font-family: 'Inter', sans-serif;
+}

package/index.ts

@@ -1,14 +1,18 @@
 import './index.css';
-export * from './components/button/button';
-export * from './components/alert/alert';
-export * from './components/button/button';
-export * from './components/checkBox/checkBox';
-export * from './components/iconButton/iconButton';
-export * from './components/menuItem/menuItem';
-export * from './components/modal/modal';
-export * from './components/popover/popover';
-export * from './components/tab/tab';
-export * from './components/tag/tag';
-export * from './components/textField/textField';
-export * from './components/tooltip/tooltip';
-export * from './components/userImage/userImage';
+import './designTokens';
+
+export * from './components/alert';
+export * from './components/button';
+export * from './components/checkBox';
+export * from './components/emptyBox';
+export * from './components/iconButton';
+export * from './components/loadingScreen';
+export * from './components/menuItem';
+export * from './components/modal';
+export * from './components/popover';
+export * from './components/tab';
+export * from './components/tag';
+export * from './components/textField';
+export * from './components/timeStamp'
+export * from './components/tooltip';
+export * from './components/userImage';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "private": false,
   "scripts": {
     "dev": "next dev",

package/components/button/button.tsx

@@ -1,118 +0,0 @@
-'use client';
-import React, { useState, useEffect, useCallback } from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
-
-interface ButtonProps {
-  size: 'large' | 'medium' | 'small';
-  type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
-  state: 'enabled' | 'hovered' | 'selected' | 'focused' | 'disabled';
-  label: string;
-  iconLeftName?: keyof typeof HeroIcons; // Reference to HeroIcons
-  iconRightName?: keyof typeof HeroIcons; // Reference to HeroIcons
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-export default function Button({
-  size,
-  type,
-  state,
-  label,
-  iconLeftName,
-  iconRightName,
-  onClick,
-}: ButtonProps) {
-
-  const [isHovered, setIsHovered] = useState(false);
-  const [IconLeft, setIconLeft] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
-  const [IconRight, setIconRight] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
-
-  // import icon
-  const loadIcon = useCallback(async (iconName?: string) => {
-    if (!iconName) return null;
-    try {
-      const module = await import('@heroicons/react/24/outline');
-      const Icon = module[iconName as keyof typeof module] as IconType;
-      return Icon || null;
-    } catch (error) {
-      console.error(`Failed to load icon ${iconName}:`, error);
-      return null;
-    }
-  }, []);
-
-  // Load icons on mount and when props change
-  useEffect(() => {
-    const fetchIcons = async () => {
-      if (typeof iconLeftName === 'string') {
-        setIconLeft(await loadIcon(iconLeftName));
-      }
-      if (typeof iconRightName === 'string') {
-        setIconRight(await loadIcon(iconRightName));
-      }
-    };
-    fetchIcons();
-  }, [iconLeftName, iconRightName, loadIcon]);
-
-  // size
-  const sizeClasses = 
-    size === 'large' ? 'text-body1 p-2'
-    : size === 'small' ? 'text-body2 p-1'
-    : 'text-body1 p-1'; // medium size
-
-  // icon size
-  const sizeIcon = 
-    size === 'large' ? 'w-6 h-6' 
-    : size === 'small' ? 'w-4 h-4' 
-    : 'w-5 h-5'; // medium size
-
-  // type
-  const typeClasses = {
-    primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
-    secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
-    tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
-    textOnly: 'text-light-text-primary dark:text-dark-text-primary',
-  }[type];
-
-  const hoverTypeClasses = {
-    primary: ' hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
-    secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
-    tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
-    textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
-  }[type];
-
-  // state
-  const stateClasses = {
-    enabled: 'cursor-pointer',
-    hovered: 'cursor-pointer',
-    selected: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
-    focused: 'ring-2 ring-light-accent-main dark:ring-dark-accent-main',
-    disabled: 'text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
-  }[state];
-
-  
-
-  return (
-    <button
-      className={`flex flex-row space-x-2 items-center rounded-[8px] 
-        ${sizeClasses} 
-        ${typeClasses} 
-        ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''} 
-        ${stateClasses}`}
-      disabled={state === 'disabled'}
-      onMouseEnter={() => {
-        if (state !== 'disabled') setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        if (state !== 'disabled') setIsHovered(false);
-      }}
-      onClick={onClick}
-    >
-      {IconLeft && <IconLeft className={sizeIcon} />}
-      <div className="whitespace-nowrap px-2">
-        {label}
-      </div>
-      {IconRight && <IconRight className={sizeIcon} />}
-    </button>
-  );
-}

package/components/modal/modal.tsx

@@ -1,49 +0,0 @@
-'use client';
-import React from 'react';
-
-interface ModalProps {
-  isOpen: boolean;
-  title: string;
-  children: React.ReactNode;
-  onClose: () => void;
-  actions?: React.ReactNode;
-}
-
-export default function Modal({ 
-	isOpen, 
-	title, 
-	children, 
-	onClose, 
-	actions, 
-}: ModalProps) {
-
-  if (!isOpen) return null;
-
-	const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  return (
-    <div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50 " 
-      onClick={handleOverlayClick}
-    >
-      <div className="bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 w-[600px]"
-      style={{
-        position: 'relative',
-        margin: '0 auto'
-      }}>
-        <h2 className="text-h6">
-					{title}
-				</h2>
-        <div className="text-body1 space-y-4">
-          {children}
-        </div>
-        <div className="flex justify-between">
-          {actions}
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/popover/popover.tsx

@@ -1,88 +0,0 @@
-'use client';
-import React, { useState, useRef, useEffect } from 'react';
-
-interface PopoverProps {
-  id?: string;
-  anchorEl: HTMLElement | null;
-  open: boolean;
-  onClose: () => void;
-  children: any;
-}
-
-export default function Popover({ 
-  anchorEl, 
-  open, 
-  onClose, 
-  children 
-}: PopoverProps) {
-
-  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  // Close popover when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchorEl) {
-        onClose();
-      }
-    };
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [open, anchorEl, onClose]);
-
-  // Calculate position
-  useEffect(() => {
-    if (anchorEl && open) {
-      const anchorRect = anchorEl.getBoundingClientRect();
-      const popoverRect = popoverRef.current?.getBoundingClientRect();
-      if (popoverRect) {
-        const spaceBelow = window.innerHeight - anchorRect.bottom;
-        const spaceAbove = anchorRect.top;
-
-        // Determine if we should place the popover above
-        const shouldPlaceAbove = spaceBelow < popoverRect.height + 8 && spaceAbove > popoverRect.height + 8;
-
-        // Calculate top position, correcting for popover height when placing above
-        const topPosition = shouldPlaceAbove
-          ? anchorRect.top + window.scrollY - popoverRect.height - 8 // Adjust by 8px to maintain spacing
-          : anchorRect.bottom + window.scrollY + 8; // Add 8px for spacing below
-
-        // Calculate left position with viewport boundary checks
-        let leftPosition = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
-
-        if (leftPosition < 8) {
-          // Adjust to align with the left boundary of the viewport
-          leftPosition = 8;
-        } else if (leftPosition + popoverRect.width > window.innerWidth - 8) {
-          // Adjust to align with the right boundary of the viewport
-          leftPosition = window.innerWidth - popoverRect.width - 8;
-        }
-
-        setPopoverStyle({
-          position: 'absolute',
-          top: topPosition,
-          left: leftPosition,
-          zIndex: 10000,
-          pointerEvents: 'auto',
-        });
-      }
-    }
-  }, [anchorEl, open]);
-
-  if (!open || !anchorEl) return null;
-
-  return (
-    <div
-      ref={popoverRef}
-      style={popoverStyle}
-      className="bg-light-background-default dark:bg-dark-background-default border rounded-[8px] shadow-lg"
-      role="dialog"
-    >
-      {children}
-    </div>
-  );
-}

package/global.d.ts

@@ -1,155 +0,0 @@
-// types/global.d.ts
-export {}
-declare global {
-
-    interface CommentReactionProps {
-      reactions: any;
-      isArchiveComment?: boolean;
-    }
-
-    interface TimeStampProps{
-      createdAt: string | number | Date;
-      dateFormat: 'absolute' | 'relative';
-    }
-
-    interface CheckboxProps {
-      label?: string;
-      checked?: boolean;
-      onChange?: (checked: boolean) => void;
-    }
-    
-    interface ReactionIconButtonProps {
-      size?: "small" | "medium" | "large";
-      color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-      figmaCommentId: string;
-      fileKey?: string;
-      accountId: string;
-      selectedHeadCommentId?: any;
-      associatedAccountId?: any;
-    }
-
-    interface CheckIconButtonProps {
-      size: "small" | "medium" | "large";
-      color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-    }
-
-    interface UncheckIconButtonProps {
-      size: "small" | "medium" | "large";
-      color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-    }
-
-    interface ButtonProps{
-      size: 'large' | 'medium' | 'small';
-      type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
-      state: 'enabled' | 'hovered' | 'selected' | 'focused' | 'disabled';
-      label: string;
-      iconLeftName?: keyof typeof HeroIcons;
-      iconRightName?: keyof typeof HeroIcons;
-      onClick?: any;
-    }
-
-    interface IconButtonProps{
-      variant: "contained" | "iconOnly";
-      color: "primary" | "secondary";
-      state: "enabled" | "selected" | "disabled";
-      iconName: keyof typeof HeroIcons;
-      onClick?: any;
-    }
-
-    interface TagProps{
-      key?: any;
-      variant: "contained" | "textOnly";
-      size: "medium" | "small";
-      state?: "enabled" | "selected" ;
-      label: any;
-      iconName?: keyof typeof HeroIcons;
-      isDeletable?: keyof typeof HeroIcons;
-      onClick?: any;
-      color?: 'default' | 'info';
-    }
-
-    interface EmptyBoxProps{
-      text: string;
-      size: "small" | "large";
-    }
-
-    interface TabPanelProps {
-      children?: React.ReactNode;
-      index: number;
-      value: number;
-    }
-
-    interface TextFieldProps {
-      id: string;
-      label?: string;
-      value: string;
-      onChange: any;
-      iconLeft?: any;
-      iconRight?: React.ReactNode | React.ComponentType<any>; 
-      multiline?: boolean;
-      maxRows?: number;
-      disabled?: boolean;
-      error?: boolean;
-    }
-
-    interface ModalProps {
-      isOpen: boolean;
-      title: string;
-      children: React.ReactNode;
-      onClose: () => void;
-      actions?: React.ReactNode;
-    }
-
-    interface MenuItemProps {
-      href?: string;
-      iconName?: string;
-      label: string;
-      isSelected?: boolean;
-      onClick: any;
-    }
-
-    type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-    interface TooltipProps {
-      title: string;
-      children: React.ReactElement;
-    }
-
-    interface UserImageProps {
-      userHandle: string;
-      userImgUrl?: string;
-    }
-
-    interface AlertProps {
-      open: boolean;
-      type: 'success' | 'warning' | 'error' | 'info';
-      message: string;
-      onClose: () => void;
-    }
-
-    interface PopoverProps {
-      id?: string;
-      anchorEl: HTMLElement | null;
-      open: boolean;
-      onClose: () => void;
-      children: ReactNode;
-    }
-
-    interface ScrapTagProps{
-      comment?: any;
-    }
-
-    type TabProps = {
-      label: string;
-      href?: string;
-      isSelected: boolean;
-      onClick: () => void;
-      iconName?: string;
-    };
-
-}
-
-declare module '@heroicons/react/*' {
-  const content: any;
-  export default content;
-}