oneslash-design-system 1.2.11 → 1.2.13

package/.claude/settings.local.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm install)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

package/components/alert.tsx

@@ -0,0 +1,132 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import {
+  InformationCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon
+} from '@heroicons/react/24/outline';
+import IconButton from './iconButton';
+
+interface AlertProps {
+  open?: boolean;
+  type: 'success' | 'warning' | 'error' | 'info' | 'default';
+  message: string;
+  onClose: () => void;
+  showCloseButton?: boolean;
+}
+
+export default function Alert({
+  open,
+  type,
+  message,
+  onClose,
+  showCloseButton = false
+}: AlertProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      // Small delay to trigger the animation
+      const showTimer = setTimeout(() => setIsVisible(true), 10);
+
+      // Only auto-dismiss if there's no close button
+      if (!showCloseButton) {
+        const dismissTimer = setTimeout(() => {
+          handleClose();
+        }, 5000);
+        return () => {
+          clearTimeout(showTimer);
+          clearTimeout(dismissTimer);
+        };
+      }
+
+      return () => clearTimeout(showTimer);
+    } else if (shouldRender) {
+      // When open becomes false, trigger fade out
+      setIsVisible(false);
+      const hideTimer = setTimeout(() => {
+        setShouldRender(false);
+      }, 300);
+      return () => clearTimeout(hideTimer);
+    }
+  }, [open, showCloseButton, shouldRender]);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    // Wait for animation to complete before unmounting
+    setTimeout(() => {
+      setShouldRender(false);
+      onClose();
+    }, 300);
+  };
+
+  if (!shouldRender) return null;
+
+  // Get the appropriate icon based on type
+  const getIcon = () => {
+    switch (type) {
+      case 'error':
+        return <ExclamationCircleIcon className="w-6 h-6" />;
+      case 'warning':
+        return <ExclamationTriangleIcon className="w-6 h-6" />;
+      case 'info':
+        return <InformationCircleIcon className="w-6 h-6" />;
+      case 'success':
+        return <CheckCircleIcon className="w-6 h-6" />;
+      case 'default':
+      default:
+        return <InformationCircleIcon className="w-6 h-6" />;
+    }
+  };
+
+  let bgColor;
+  switch (type) {
+    case 'error':
+      bgColor = 'bg-light-error-main dark:bg-dark-error-main';
+      break;
+    case 'warning':
+      bgColor = 'bg-light-warning-main dark:bg-dark-warning-main';
+      break;
+    case 'info':
+      bgColor = 'bg-light-info-main dark:bg-dark-info-main';
+      break;
+    case 'success':
+      bgColor = 'bg-light-success-main dark:bg-dark-success-main';
+      break;
+    case 'default':
+    default:
+      bgColor = 'bg-light-secondary-light dark:bg-dark-secondary-light';
+      break;
+  }
+
+  return (
+    <div className="fixed top-0 inset-x-0 z-50 flex justify-center pointer-events-none">
+      <div
+        className={`flex items-start justify-between w-full max-w-md p-2 rounded-[8px] pointer-events-auto transition-opacity duration-200 ease-out ${bgColor} ${
+          isVisible
+            ? 'opacity-100'
+            : 'opacity-0'
+        }`}
+      >
+        <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
+          {getIcon()}
+          <span className="body1">{message}</span>
+        </div>
+        {showCloseButton && (
+          <div className="ml-4">
+            <IconButton
+              color="iconOnly"
+              state="enabled"
+              size="small"
+              iconName="XMarkIcon"
+              onClick={handleClose}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/button.tsx

@@ -0,0 +1,120 @@
+'use client';
+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;
+  className?: string;
+}
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Button({
+  size,
+  type,
+  state,
+  label,
+  decoIcon,
+  actionIcon,
+  onClickButton,
+  onClickActionIcon,
+  className = '',
+}: ButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  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 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 sizeClasses = {
+    large: 'text-body1 p-2',
+    medium: 'text-body1 p-1',
+    small: 'text-body2 p-1',
+  }[size];
+
+  const sizeIcon = {
+    large: 'w-6 h-6',
+    medium: 'w-5 h-5',
+    small: 'w-4 h-4',
+  }[size];
+
+  const baseTypeClasses = {
+    primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
+    secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
+    tertiary: 'bg-light-background-accent100 dark:bg-dark-background-accent100 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-secondary-dark dark:hover:bg-dark-secondary-dark',
+    tertiary: 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200',
+    textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
+  }[type];
+
+  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',
+  };
+
+  const buttonClasses = `
+    flex flex-row items-center rounded-[8px] transition-colors duration-200 ease-in-out justify-between
+    ${sizeClasses}
+    ${state === 'enabled' ? baseTypeClasses : ''}
+    ${state === 'focused' ? stateClasses.focused : ''}
+    ${state === 'disabled' ? stateClasses.disabled : baseTypeClasses}
+    ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''}
+    ${className}
+  `;
+
+  return (
+    <button
+      className={buttonClasses}
+      onMouseEnter={() => { if (state !== 'disabled') setIsHovered(true); }}
+      onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
+      onClick={onClickButton}
+    >
+      {/* Group IconLeft and label in a flex container for left alignment */}
+      <div className="flex items-center">
+        {IconLeft && <IconLeft className={sizeIcon} />}
+        <div className="whitespace-nowrap overflow-hidden truncate px-2">{label}</div>
+      </div>
+      {IconRight && (
+        <div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className={sizeIcon} />
+        </div>
+      )}
+    </button>
+  );
+}

package/components/checkBox.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { useState } from 'react';
+
+interface CheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export default function Checkbox({
+  label, 
+  checked = false, 
+  onChange
+}: CheckboxProps) {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleToggle = () => {
+    const newChecked = !isChecked;
+    setIsChecked(newChecked);
+    if (onChange) {
+      onChange(newChecked);
+    }
+  };
+
+  return (
+    <label className="flex items-center cursor-pointer">
+      <div
+        onClick={handleToggle}
+        className="relative flex items-center justify-center w-6 h-6 group transition-colors duration-200 ease-in-out"
+      >
+        {/* Circle behind the checkbox */}
+        <div
+          className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected"
+        ></div>
+        
+        {/* Checkbox */}
+        <div
+          className={`relative z-10 w-4 h-4 border-2 rounded ${
+            isChecked
+              ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
+              : 'border-light-text-secondary dark:border-dark-text-secondary'
+          } flex items-center justify-center`}
+        >
+          {isChecked && (
+            <svg
+              className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 12 12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path strokeWidth="2" d="M1 6l4 3 6-7" />
+            </svg>
+          )}
+        </div>
+      </div>
+      {label && <span className="ml-2 text-body1 text-light-text-primary dark:text-dark-text-primary">{label}</span>}
+    </label>
+  );
+}

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/iconButton.tsx

@@ -0,0 +1,103 @@
+'use client';
+import React, { useState } from 'react';
+import * as HeroIcons24 from '@heroicons/react/24/outline';
+import * as HeroIcons20 from '@heroicons/react/20/solid';
+import { LoadingSmall } from './loadingScreen';
+
+interface IconButtonProps {
+  color: "primary" | "secondary" | "tertiary" | "iconOnly";
+  state: "enabled" | "selected" | "disabled";
+  size: "large" | "medium" | "small";
+  iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
+  onClick?: any;
+  loading?: boolean;
+}
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function IconButton({
+  color,
+  state,
+  size,
+  iconName,
+  onClick,
+  loading = false, // Default to false
+}: IconButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Select icon based on size
+  const Icon: IconType = size === 'small' 
+    ? HeroIcons20[iconName] 
+    : HeroIcons24[iconName];
+
+  // Size-based classes
+  const sizeClasses = {
+    large: 'p-2',  // 8px padding
+    medium: 'p-1', // 4px padding
+    small: 'p-1',  // 4px padding
+  };
+
+  const iconSizeClasses = {
+    large: 'size-6',   // 24px
+    medium: 'size-6',  // 24px
+    small: 'size-5',   // 20px
+  };
+
+  // Base classes (padding and corner radius)
+  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none relative`;
+
+  // Background color
+  const bgColor = color === 'primary'
+    ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
+    : color === 'secondary'
+    ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
+    : color === 'tertiary'
+    ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
+    : ' '; // iconOnly: none
+
+  // Background hover color
+  const bgColorHover = color === 'primary'
+    ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
+    : color === 'secondary'
+    ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
+    : color === 'tertiary'
+    ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
+    : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'; // iconOnly
+
+  // Icon color
+  const iconColor = color === 'primary'
+    ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
+    : color === 'secondary'
+    ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
+    : color === 'tertiary'
+    ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
+    : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
+
+  // State classes, including loading
+  const stateClasses = loading
+    ? 'cursor-wait' // Show a waiting cursor during loading
+    : state === 'disabled'
+    ? 'cursor-not-allowed opacity-50'
+    : state === 'selected'
+    ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
+    : isHovered
+    ? 'cursor-pointer hover:bg-opacity-75'
+    : 'cursor-pointer';
+
+  return (
+    <button
+      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out flex items-center justify-center`}
+      disabled={state === 'disabled' || loading} // Disable button during loading
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
+      aria-label={loading ? 'Loading' : 'Reload'}
+    >
+      {loading ? (
+        <LoadingSmall size={size} /> // Pass the size prop to match the icon
+      ) : (
+        Icon && <Icon className={iconSizeClasses[size]} /> // Show icon when not loading
+      )}
+    </button>
+  );
+}

package/components/loadingScreen.tsx

@@ -0,0 +1,30 @@
+'use client';
+import React from 'react';
+
+interface LoadingSmallProps {
+  size?: 'large' | 'medium' | 'small'; // Match IconButton sizes
+}
+
+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-text-primary dark:border-dark-text-primary dark:border-t-transparent rounded-full animate-spin"></div>
+    </div>
+  );
+};
+
+export function LoadingSmall({ size = 'medium' }: LoadingSmallProps) {
+  const spinnerSizeClasses = {
+    large: 'w-6 h-6 border-2',  // 24px, border-2 for proportional thickness
+    medium: 'w-6 h-6 border-2', // 24px, border-2
+    small: 'w-5 h-5 border-2', // 20px, slightly thinner border
+  };
+
+  return (
+    <div className="flex justify-center items-center">
+      <div
+        className={`border-t-transparent border-light-text-primary dark:border-dark-text-primary dark:border-t-transparent rounded-full animate-spin ${spinnerSizeClasses[size]}`}
+      />
+    </div>
+  );
+}

package/components/menu.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React, { forwardRef } from 'react';
+
+interface MenuProps {
+  children: React.ReactNode;
+  width?: number | string;
+  className?: string;
+}
+
+const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  ({ children, width, className = '' }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          bg-light-background-accent300 dark:bg-dark-background-accent300
+          rounded-[8px]
+          shadow-lg
+          overflow-hidden
+          ${className}
+        `}
+        style={{ width: width || 'auto' }}
+      >
+        <div className="p-[10px]">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+export default Menu;
+export { Menu };

package/components/menuItem.tsx

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