oneslash-design-system 1.2.3 → 1.2.4

package/components/tag.tsx

@@ -1,81 +0,0 @@
-'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>;
-  color?: 'default' | 'info';
-}
-
-type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-export default function Tag({
-  variant,
-  size,
-  state = 'enabled',
-  label,
-  iconName,
-  onClick,
-  color = 'default',
-}: 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]';
-
-  // Background color
-  const bgClasses = variant === 'contained'
-    ? (color === 'info'
-        ? 'bg-light-info-main dark:bg-dark-info-main'
-        : 'bg-light-background-accent300 dark:bg-dark-background-accent300')
-    : '';
-
-  // Font color
-  const fontClasses = variant === 'textOnly'
-    ? (color === 'info'
-        ? 'text-light-info-main dark:text-dark-info-main'
-        : 'text-light-text-primary dark:text-dark-text-primary')
-    : 'text-light-text-primary dark:text-dark-text-primary';
-
-  // Border for contained variant
-  const borderClasses = variant === 'contained'
-    ? 'border border-light-misc-divider dark:border-dark-misc-divider'
-    : '';
-
-  // State and hover
-  const stateClasses = state === 'selected'
-    ? 'bg-light-accent-main dark:bg-dark-accent-main text-white'
-    : 'cursor-pointer';
-  const hoverClasses = variant === 'contained' && isHovered
-    ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
-    : '';
-
-  return (
-    <div
-      className={`
-        flex items-center space-x-1 rounded-full 
-        ${sizeClasses} ${bgClasses} ${fontClasses} ${borderClasses} ${stateClasses} ${hoverClasses}
-        transition-colors duration-200 ease-in-out
-      `}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onClick={onClick}
-    >
-      {Icon && <Icon className="w-4 h-4" />}
-      <span>{label}</span>
-    </div>
-  );
-}

package/components/textField.tsx

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

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

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

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

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