oneslash-design-system 1.2.12 → 1.2.14

package/components/modal.tsx

@@ -0,0 +1,85 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  title?: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  actions?: React.ReactNode;
+  size?: 'medium' | 'large'; 
+}
+
+export default function Modal({ 
+  isOpen, 
+  title, 
+  children, 
+  onClose, 
+  actions, 
+  size = 'medium', // Default size is medium
+}: ModalProps) {
+  
+  if (!isOpen) return null;
+
+  // close modal by clicking elsewhere
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // close modal by esc keypress
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  // Determine width based on size prop
+  const modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
+  const maxWidth = size === 'large' ? '1200px' : '600px';
+
+  
+
+  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"
+      tabIndex={-1}
+    >
+      <div 
+        className={`bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ${modalWidth}`}
+        style={{
+          maxWidth,
+          width: 'calc(100vw - 64px)',
+          maxHeight: '800px',
+          height: 'auto',
+          overflowY: 'auto',
+        }}
+      >
+        {title && (
+          <h2 id="modal-title" className="text-h6">
+            {title}
+          </h2>
+        )}
+        <div className="text-body1 space-y-4">
+          {children}
+        </div>
+        {actions && (
+          <div className="flex justify-between">
+            {actions}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/navigation.tsx

@@ -0,0 +1,27 @@
+'use client';
+import React from 'react';
+
+interface NavigationProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function Navigation({
+  children,
+  className = '',
+}: NavigationProps) {
+  return (
+    <nav
+      className={`
+        bg-light-background-default dark:bg-dark-background-default
+        border-r border-light-misc-divider dark:border-dark-misc-divider
+        p-[10px]
+        ${className}
+      `}
+    >
+      {children}
+    </nav>
+  );
+}
+
+export { Navigation };

package/components/popover.tsx

@@ -0,0 +1,69 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+
+interface PopoverProps {
+  id?: string;
+  anchorEl?: HTMLElement | null;
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export default function Popover({
+  id,
+  anchorEl,
+  open,
+  onClose,
+  children,
+}: PopoverProps) {
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null);
+  const [hasMounted, setHasMounted] = useState(false);
+
+  // Initialize Popper.js
+  const { styles, attributes } = usePopper(anchorEl, popoverElement, {
+    placement: 'bottom-start', // Default placement, can be customized
+    modifiers: [
+      { name: 'offset', options: { offset: [0, 8] } }, // Offset for spacing between anchor and popover
+    ],
+  });
+
+  // Handle outside clicks to close the popover
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popoverElement && !popoverElement.contains(event.target as Node) && anchorEl) {
+        onClose();
+      }
+    };
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, anchorEl, popoverElement, onClose]);
+
+  // Ensure popover is only rendered after the component mounts
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!open || !hasMounted || !anchorEl) return null;
+
+  // Render popover in a portal to prevent layout shifts and positioning issues
+  return createPortal(
+    <div
+      id={id}
+      ref={setPopoverElement}
+      style={{ ...styles.popper, display: open ? 'block' : 'none' }}
+      {...attributes.popper}
+      className="bg-light-background-accent300 dark:bg-dark-background-accent300 rounded-[8px] shadow-lg p-2"
+      role="dialog"
+    >
+      {children}
+    </div>,
+    document.body // Mounting the popover in the document body for isolation
+  );
+}

package/components/radioGroup.tsx

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+
+interface RadioOption {
+  label: string;
+  value: string;
+}
+
+interface RadioGroupProps {
+  options: RadioOption[];
+  selectedValue: string;
+  onChange: (value: string) => void;
+  direction?: 'horizontal' | 'vertical';
+}
+
+export default function RadioGroup({
+  options,
+  selectedValue,
+  onChange,
+  direction = 'vertical',
+}: RadioGroupProps) {
+  return (
+    <div
+      className={`flex ${ direction === 'horizontal' ? 'space-x-4' : 'flex-col space-y-2' }`}
+    >
+      {options.map((option) => (
+        <label
+          key={option.value}
+          className="flex items-center cursor-pointer"
+          onClick={() => onChange(option.value)}
+        >
+          {/* outer circle */}
+          <div
+            className={`relative flex justify-center items-center w-4 h-4 rounded-full border-2
+              ${selectedValue === option.value 
+                ? 'border-light-text-primary dark:border-dark-text-primary'
+                : 'border-light-text-secondary dark:border-dark-text-secondary'}
+            `}
+          >
+            {/* Inner circle */}
+            {selectedValue === option.value && (
+              <div className='absolute w-2 h-2 rounded-full bg-light-text-primary dark:bg-dark-text-primary'/>
+              )}
+          </div>
+          <span className="ml-2 text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}

package/components/select.tsx

@@ -0,0 +1,253 @@
+'use client';
+import React, { useState, useEffect, useRef, useCallback, SVGProps, JSX } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import Menu from './menu';
+import MenuItem from './menuItem';
+
+type IconType = (props: SVGProps<SVGSVGElement>) => JSX.Element;
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  iconName?: string;
+}
+
+interface SelectProps {
+  value?: string | string[];
+  options: SelectOption[];
+  onChange?: (value: string | string[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  decoIconName?: string;
+  width?: number | string;
+  multiple?: boolean;
+  className?: string;
+}
+
+export default function Select({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  placeholder = 'Label',
+  decoIconName,
+  width,
+  multiple = false,
+  className = '',
+}: SelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [DecoIcon, setDecoIcon] = useState<IconType | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  const selectRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Handle SSR
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Load decoration icon
+  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 IconType;
+      return IconComponent || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcon = async () => {
+      if (decoIconName) {
+        setDecoIcon(await loadIcon(decoIconName));
+      }
+    };
+    fetchIcon();
+  }, [decoIconName, loadIcon]);
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    if (!mounted) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        selectRef.current &&
+        menuRef.current &&
+        !selectRef.current.contains(event.target as Node) &&
+        !menuRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, mounted]);
+
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    setIsFocused(!isOpen);
+  };
+
+  const handleSelect = (optionValue: string) => {
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      const newValues = currentValues.includes(optionValue)
+        ? currentValues.filter(v => v !== optionValue)
+        : [...currentValues, optionValue];
+      onChange?.(newValues);
+    } else {
+      onChange?.(optionValue);
+      setIsOpen(false);
+      setIsFocused(false);
+    }
+  };
+
+  const getDisplayLabel = () => {
+    if (!value) return placeholder;
+
+    if (multiple && Array.isArray(value)) {
+      if (value.length === 0) return placeholder;
+      const labels = value
+        .map(v => options.find(opt => opt.value === v)?.label)
+        .filter(Boolean);
+      return labels.join(', ');
+    }
+
+    return options.find(opt => opt.value === value)?.label || placeholder;
+  };
+
+  const isSelected = (optionValue: string) => {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(optionValue);
+    }
+    return value === optionValue;
+  };
+
+  // Determine border styles based on state
+  const getBorderStyles = () => {
+    if (disabled) {
+      return 'border border-light-actionOutlinedBorder-disabled dark:border-dark-actionOutlinedBorder-disabled';
+    }
+    if (isFocused || isOpen) {
+      return 'border border-light-accent-main dark:border-dark-accent-main outline outline-1 outline-light-accent-main dark:outline-dark-accent-main outline-offset-0';
+    }
+    if (isHovered) {
+      return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled';
+    }
+    return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled';
+  };
+
+  // Determine background color
+  const getBackgroundColor = () => {
+    if (isHovered && !isOpen && !disabled) {
+      return 'bg-light-action-hover dark:bg-dark-action-hover';
+    }
+    return 'bg-light-background-default dark:bg-dark-background-default';
+  };
+
+  // Determine text color
+  const getTextColor = () => {
+    if (disabled) {
+      return 'text-light-text-disabled dark:text-dark-text-disabled';
+    }
+    return 'text-light-text-primary dark:text-dark-text-primary';
+  };
+
+  // Determine icon color
+  const getIconColor = () => {
+    if (disabled) {
+      return 'text-light-text-disabled dark:text-dark-text-disabled';
+    }
+    return 'text-light-text-secondary dark:text-dark-text-secondary';
+  };
+
+  return (
+    <div className={`relative ${className}`} style={{ width: width || '100%' }}>
+      {/* Select Button */}
+      <div
+        ref={selectRef}
+        className={`
+          rounded-[8px]
+          ${getBorderStyles()}
+          ${getBackgroundColor()}
+          ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+          transition-all duration-200 ease-in-out
+          outline-none
+        `}
+        onClick={handleToggle}
+        onMouseEnter={() => !disabled && setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleToggle();
+          }
+        }}
+      >
+        {/* Inner Content Container with Padding */}
+        <div className={`flex items-center justify-between p-2 ${getTextColor()}`}>
+          {/* Content Container */}
+          <div className="flex items-center space-x-1 flex-1 overflow-hidden">
+            {/* Optional Decoration Icon */}
+            {DecoIcon && (
+              <DecoIcon className={`w-6 h-6 flex-shrink-0 ${getIconColor()}`} />
+            )}
+
+            {/* Display Text */}
+            <span className="text-body1 truncate">
+              {getDisplayLabel()}
+            </span>
+          </div>
+
+          {/* Chevron Icon */}
+          <ChevronDownIcon
+            className={`
+              w-6 h-6 flex-shrink-0 ml-1
+              ${getIconColor()}
+              transition-transform duration-200
+              ${isOpen ? 'transform rotate-180' : ''}
+            `}
+          />
+        </div>
+      </div>
+
+      {/* Dropdown Menu */}
+      {mounted && isOpen && (
+        <div
+          className="absolute z-50 mt-1 left-0"
+          style={{ width: width || '100%' }}
+        >
+          <Menu ref={menuRef} width={width || '100%'}>
+            {options.map((option) => (
+              <MenuItem
+                key={option.value}
+                label={option.label}
+                iconName={option.iconName}
+                isSelected={isSelected(option.value)}
+                onClick={() => handleSelect(option.value)}
+                className="w-full"
+              />
+            ))}
+          </Menu>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Select };

package/components/tab.tsx

@@ -0,0 +1,85 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+
+type TabProps = {
+  label: string;
+  href?: string;
+  isSelected: boolean;
+  onClickTab: () => void;
+  onClickActionIcon?: any;
+  decoIcon?: string;
+  actionIcon?: string;
+};
+
+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 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]);
+
+  const handleClick = () => {
+    onClickTab();
+    if (href) {
+      router.push(href);
+    }
+  };
+
+  return (
+    <div
+      className={`
+        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out
+        ${isSelected 
+          ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast' 
+          : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'}
+      `}
+      onClick={handleClick}
+    >
+      {IconLeft && <IconLeft className="w-6 h-6" />}
+      <span className="whitespace-nowrap text-body1 px-[6px]">
+        {label}
+      </span>
+      {IconRight && (
+        <div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className="w-6 h-6" />
+        </div>
+      )}
+    </div>
+  );
+}

package/components/tableCell.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableCellProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableCell({children}: TableCellProps) {
+
+		return (
+				<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider">
+						{children}
+				</div>
+		);
+};

package/components/tableContainer.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableContainerProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableContainer({children}: TableContainerProps) {
+
+		return (
+				<div className="w-full overflow-x-auto bg-light-background-default dark:bg-dark-background-default">
+						{children}
+				</div>
+		);
+};

package/components/tableHeader.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableHeaderProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableHeader({children}: TableHeaderProps) {
+
+		return (
+				<div className="py-2 bg-light-background-default dark:bg-dark-background-default">
+						{children}
+				</div>
+		);
+};

package/components/tableHeaderCell.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableHeaderCellProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableHeaderCell({children}: TableHeaderCellProps) {
+
+		return (
+				<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary">
+						{children}
+				</div>
+		);
+};

package/components/tableRow.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableRowProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableRow({children}: TableRowProps) {
+
+		return (
+				<div className="flex w-full">
+						{children}
+				</div>
+		);
+};

package/components/tabsContainer.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react';
+
+interface TabsContainerProps {
+  children: React.ReactNode;
+}
+
+export default function TabsContainer({
+  children,
+}: TabsContainerProps) {
+  const tabCount = React.Children.count(children);
+
+  return (
+    <div
+      className={`
+        flex space-x-2 p-1 rounded-[12px]
+        ${tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent'}
+      `}
+    >
+      {children}
+    </div>
+  );
+}