oneslash-design-system 1.2.12 → 1.2.14

package/components/tag.tsx

@@ -0,0 +1,81 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+
+interface TagProps {
+  variant: 'contained' | 'textOnly';
+  size: 'medium' | 'small';
+  state?: 'enabled' | 'selected';
+  label: React.ReactNode;
+  iconName?: keyof typeof HeroIcons;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Tag({
+  variant,
+  size,
+  state = 'enabled',
+  label,
+  iconName,
+  onClick,
+}: TagProps): JSX.Element {
+  const [isHovered, setIsHovered] = useState(false);
+  const [Icon, setIcon] = useState<IconType | null>(null);
+
+  // Load icon directly from HeroIcons
+  useEffect(() => {
+    if (iconName) {
+      setIcon(HeroIcons[iconName] as IconType);
+    }
+  }, [iconName]);
+
+  // Size and padding
+  const sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
+
+  // Selected state styles
+  const isSelected = state === 'selected';
+
+  // Background color
+  const bgClasses = isSelected && variant === 'contained'
+    ? 'bg-light-accent-main dark:bg-dark-accent-main'
+    : variant === 'contained'
+    ? 'bg-light-background-accent300 dark:bg-dark-background-accent300'
+    : '';
+
+  // Font color
+  const fontClasses = isSelected
+    ? 'text-white'
+    : 'text-light-text-primary dark:text-dark-text-primary';
+
+  // Border styles
+  const borderClasses = isSelected && variant === 'textOnly'
+    ? 'border border-light-accent-main dark:border-dark-accent-main'
+    : variant === 'contained'
+    ? 'border border-light-misc-divider dark:border-dark-misc-divider'
+    : '';
+
+  // Hover (only when not selected and onClick is provided)
+  const hoverClasses = !isSelected && variant === 'contained' && isHovered && onClick
+    ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
+    : '';
+
+  const cursorClass = onClick && !isSelected ? 'cursor-pointer' : '';
+
+  return (
+    <div
+      className={`
+        flex items-center space-x-1 rounded-full
+        ${sizeClasses} ${bgClasses} ${fontClasses} ${borderClasses} ${hoverClasses} ${cursorClass}
+        transition-colors duration-200 ease-in-out
+      `}
+      onMouseEnter={() => onClick && setIsHovered(true)}
+      onMouseLeave={() => onClick && setIsHovered(false)}
+      onClick={onClick}
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+      <span>{label}</span>
+    </div>
+  );
+}

package/components/textField.tsx

@@ -0,0 +1,116 @@
+'use client';
+import React, { useState } from 'react';
+
+interface TextFieldProps {
+  id: string;
+  label?: string;
+  value: string;
+  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;
+  autoFocus?: boolean;
+  multiline?: boolean;
+  maxRows?: number;
+  disabled?: boolean;
+  error?: boolean;
+  size?: 'large' | 'medium' | 'small';
+}
+
+export default function TextField({
+  id,
+  label,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  autoFocus = false, // Accept the autoFocus prop with default value
+  multiline = false,
+  maxRows = 6,
+  disabled = false,
+  error = false,
+  size = 'medium',
+}: TextFieldProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Define classes for size: text size and padding
+  const sizeClasses = {
+    large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
+    medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
+    small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+  }[size];
+
+  const baseClasses = 'w-full border rounded-[8px]';
+  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
+  const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
+  const containerClasses = `
+    ${bgColor}
+    ${borderColor}
+    ${baseClasses}
+    ${sizeClasses}
+    ${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
+  `;
+
+  return (
+    <div className="flex flex-col w-full">
+      {label && (
+        <label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {multiline ? (
+          <textarea
+            id={id}
+            rows={maxRows}
+            className={containerClasses}
+            value={value}
+            onChange={onChange}
+            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}
+            autoComplete="off" // Disable browser autocomplete/autofill
+          />
+        ) : (
+          <input
+            id={id}
+            type="text"
+            className={containerClasses}
+            value={value}
+            onChange={onChange}
+            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}
+            autoComplete="off" // Disable browser autocomplete/autofill
+          />
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-light-error-main text-body2">
+          This field is required
+        </p>
+      )}
+    </div>
+  );
+}

package/components/textarea.tsx

@@ -0,0 +1,120 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+
+interface TextareaProps {
+  id: string;
+  label?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  autoFocus?: boolean;
+  maxRows?: number;
+  disabled?: boolean;
+  error?: boolean;
+  size?: 'large' | 'medium' | 'small';
+}
+
+export default function Textarea({
+  id,
+  label,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  autoFocus = false,
+  maxRows = 6,
+  disabled = false,
+  error = false,
+  size = 'medium',
+}: TextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const adjustHeight = () => {
+      textarea.style.height = 'auto'; // Reset height to calculate scrollHeight
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+      const maxHeight = lineHeight * maxRows;
+      const scrollHeight = textarea.scrollHeight;
+
+      // Set height to scrollHeight, capped at maxRows, but at least 1 line
+      textarea.style.height = `${Math.max(Math.min(scrollHeight, maxHeight), lineHeight)}px`;
+
+      // Enable vertical scroll if content exceeds maxRows
+      textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+    };
+
+    // Set initial rows to 1 for single-line height
+    textarea.rows = 1;
+
+    adjustHeight();
+    textarea.addEventListener('input', adjustHeight);
+
+    return () => textarea.removeEventListener('input', adjustHeight);
+  }, [maxRows]);
+
+  // Define classes for size: text size and padding
+  const sizeClasses = {
+    large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
+    medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
+    small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+  }[size];
+
+  const baseClasses = 'w-full border rounded-[8px]';
+  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
+  const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
+  const containerClasses = `
+    ${bgColor}
+    ${borderColor}
+    ${baseClasses}
+    ${sizeClasses}
+    ${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
+  `;
+
+  return (
+    <div className="flex flex-col w-full">
+      {label && (
+        <label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          id={id}
+          rows={1}
+          className={containerClasses}
+          value={value}
+          onChange={onChange}
+          onFocus={(e) => {
+            setIsFocused(true);
+            if (onFocus) onFocus(e);
+          }}
+          onBlur={(e) => {
+            setIsFocused(false);
+            if (onBlur) onBlur(e);
+          }}
+          onKeyDown={onKeyDown}
+          autoFocus={autoFocus}
+          disabled={disabled}
+          autoComplete="off"
+        />
+      </div>
+      {error && (
+        <p className="mt-1 text-light-error-main text-body2">
+          This field is required
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+'use client';
+import React, { useState, useRef, useEffect } from 'react';
+
+interface TooltipProps {
+  title: string;
+  children: React.ReactElement;
+}
+
+export default function Tooltip({ title, children }: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState<'top' | 'bottom'>('bottom');
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handlePosition = () => {
+      if (tooltipRef.current && buttonRef.current) {
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        // Check if there's enough space below; if not, place tooltip above
+        if (window.innerHeight - buttonRect.bottom < tooltipRect.height + 8) {
+          setPosition('top');
+        } else {
+          setPosition('bottom');
+        }
+      }
+    };
+    if (visible) { 
+      handlePosition();
+    }
+  }, [visible]);
+
+  const handleClick = () => {
+    setVisible(false); // Hide tooltip on click
+  };
+
+  return (
+    <div
+      ref={buttonRef}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      onClick={handleClick}
+      className="relative inline-block"
+    >
+      {children}
+      {visible && (
+          <div
+            ref={tooltipRef}
+            className={`absolute whitespace-nowrap text-caption rounded-[8px] py-1 px-2 z-50
+              dark:bg-light-background-accent300 bg-dark-background-accent300 
+              dark:text-light-text-primary text-dark-text-primary
+							${position === 'bottom' ? 'mt-1' : 'mb-1'}`}
+            style={{
+              bottom: position === 'top' ? '100%' : undefined,
+              top: position === 'bottom' ? '100%' : undefined,
+              left: '50%',
+              transform: 'translateX(-50%)',
+            }}
+          >
+            {title}
+          </div>
+        )
+      }
+    </div>
+  );
+}

package/components/userImage.tsx

@@ -0,0 +1,64 @@
+'use client';
+import React from 'react';
+
+interface UserImageProps {
+  userHandle: string;
+  userImgUrl?: string;
+}
+
+function getColorSeed(userHandle: string): string {
+  const words = userHandle.trim().split(/\s+/);
+  let letters = words.map(word => word.charAt(0).toLowerCase());
+  if (letters.length === 1 && words[0].length >= 2) {
+    letters.push(words[0].charAt(1).toLowerCase());
+  } else if (letters.length > 2) {
+    letters = letters.slice(0, 2);
+  } else if (letters.length === 0) {
+    letters = ['x', 'x'];
+  }
+  return letters.join('');
+}
+
+function getHash(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
+}
+
+export default function UserImage({
+  userHandle,
+  userImgUrl,
+}: UserImageProps) {
+  const displayInitial = userHandle.charAt(0).toUpperCase() || 'A';
+  const seed = getColorSeed(userHandle);
+  const hue = Math.abs(getHash(seed)) % 360;
+
+  // Light mode: vibrant pastel
+  const lightBg = `hsl(${hue}, 80%, 80%)`;
+  // Dark mode: darker, vibrant variant
+  const darkBg = `hsl(${hue}, 80%, 30%)`;
+
+  return (
+    <div
+      style={{
+        '--light-bg': lightBg,
+        '--dark-bg': darkBg,
+      } as React.CSSProperties}
+      className="flex items-center justify-center w-6 h-6 rounded-full overflow-hidden bg-[var(--light-bg)] dark:bg-[var(--dark-bg)] text-light-text-secondary dark:text-dark-text-secondary"
+    >
+      {userImgUrl ? (
+        <img
+          src={userImgUrl}
+          alt={userHandle}
+          className="w-full h-full object-cover rounded-full"
+        />
+      ) : (
+        <span className="text-body1 text-light-text-secondary dark:text-dark-text-secondary">
+          {displayInitial}
+        </span>
+      )}
+    </div>
+  );
+}