oneslash-design-system 1.2.15 → 1.2.17

package/components/menuItem.tsx

@@ -1,117 +0,0 @@
-'use client';
-import React, { useState, useEffect, useCallback, SVGProps, JSX } from 'react';
-import NextLink from 'next/link';
-import UserImage from './userImage';
-import Tag from './tag';
-
-type IconType = (props: SVGProps<SVGSVGElement>) => JSX.Element;
-
-interface MenuItemProps {
-  href?: string;
-  iconName?: string;
-  userHandle?: string;
-  userImgUrl?: string;
-  label: string;
-  isSelected?: boolean;
-  onClick?: any;
-  className?: string;
-  size?: 'medium' | 'large';
-  tag?: {
-    label: React.ReactNode;
-    iconName?: string;
-  };
-  iconRight?: string;
-}
-
-export default function MenuItem({
-  href,
-  iconName,
-  userHandle,
-  userImgUrl,
-  label,
-  isSelected,
-  onClick,
-  className = '',
-  size = 'medium',
-  tag,
-  iconRight,
-}: MenuItemProps) {
-  const [IconLeft, setIconLeft] = useState<IconType | null>(null);
-  const [IconRight, setIconRight] = useState<IconType | null>(null);
-
-  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 (iconName) {
-        setIconLeft(await loadIcon(iconName));
-      }
-      if (iconRight) {
-        setIconRight(await loadIcon(iconRight));
-      }
-    };
-    fetchIcon();
-  }, [iconName, iconRight, loadIcon]);
-
-  // Size-based icon and text classes
-  const iconSize = size === 'large' ? 'w-6 h-6' : 'w-5 h-5';
-  const labelClass = size === 'large' ? 'text-body1' : 'text-body2';
-  const tagSize = size === 'large' ? 'medium' : 'small';
-
-  const content = (
-    <div
-      className={`
-        flex items-center p-2 rounded-[8px] cursor-pointer justify-between transition-colors duration-200 ease-in-out
-        ${isSelected
-          ? 'bg-light-background-accent300 dark:bg-dark-background-accent300 hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'
-          : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'}
-        ${className}
-      `}
-      style={{ width: '100%' }}
-      onClick={onClick}
-    >
-      {/* Left group: icon/userImg + label + tag with 8px gap */}
-      <div className="flex items-center gap-1">
-        {userImgUrl ? (
-          <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl} />
-        ) : (
-          IconLeft && (
-            <IconLeft
-              className={`${iconSize} text-light-text-secondary dark:text-dark-text-secondary`}
-            />
-          )
-        )}
-        <span className={`whitespace-nowrap ${labelClass} text-light-text-primary dark:text-dark-text-primary`}>
-          {label}
-        </span>
-        {tag && (
-          <Tag
-            variant="contained"
-            size={tagSize}
-            label={tag.label}
-            iconName={tag.iconName as any}
-          />
-        )}
-      </div>
-
-      {/* Right icon aligned to the right */}
-      {IconRight && (
-        <IconRight
-          className={`${iconSize} text-light-text-secondary dark:text-dark-text-secondary flex-shrink-0`}
-        />
-      )}
-    </div>
-  );
-
-  return href ? <NextLink href={href}>{content}</NextLink> : content;
-}

package/components/modal.tsx

@@ -1,85 +0,0 @@
-'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

@@ -1,27 +0,0 @@
-'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

@@ -1,69 +0,0 @@
-'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

@@ -1,50 +0,0 @@
-'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

@@ -1,253 +0,0 @@
-'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

@@ -1,85 +0,0 @@
-'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>
-  );
-}