oneslash-design-system 1.1.31 → 1.1.33

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

@@ -6,12 +6,6 @@ interface UserImageProps {
   userImgUrl?: string;
 }
 
-//read initials from userHandle
-function getInitials(userHandle: string): string {
-  const words = userHandle.trim().split(/\s+/);
-  return words.slice(0, 2).map(word => word.charAt(0).toUpperCase()).join('');
-}
-
 function getColorSeed(userHandle: string): string {
   const words = userHandle.trim().split(/\s+/);
   let letters = words.map(word => word.charAt(0).toLowerCase());
@@ -33,19 +27,18 @@ function getHash(str: string): number {
   return hash;
 }
 
-export default function UserImage({ 
-	userHandle, 
-	userImgUrl,
- }: UserImageProps) {
-
+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: lighter pastel
-  const lightBg = `hsl(${hue}, 20%, 80%)`;
-  // Dark mode: darker variant
-  const darkBg = `hsl(${hue}, 20%, 30%)`;
+  // Light mode: vibrant pastel
+  const lightBg = `hsl(${hue}, 80%, 80%)`;
+  // Dark mode: darker, vibrant variant
+  const darkBg = `hsl(${hue}, 80%, 30%)`;
 
   return (
     <div
@@ -53,9 +46,7 @@ export default function UserImage({
         '--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`}
+      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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",