oneslash-design-system 1.0.3

package/components/textField/textField.tsx

@@ -0,0 +1,107 @@
+'use client';
+import React, { useState } from 'react';
+
+export default function TextField({
+  id,
+  label,
+  value,
+  onChange,
+  iconLeft,
+  iconRight,
+  multiline = false,
+  maxRows = 6,
+  disabled = false,
+  error = false,
+}: TextFieldProps) {
+	
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Base styles
+  const baseClasses = 'w-full border rounded-[8px] p-2';
+
+  // Background color
+  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
+
+  // Border color
+  const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
+
+  // State styles
+  const disabledClasses = 'bg-gray-200 cursor-not-allowed';
+  const errorClasses = 'border-red-500 focus:ring-red-500';
+  const focusClasses = 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none';
+  const hoverClasses = 'hover:border-light-outlinedBorder-hover';
+  const defaultClasses = 'border-gray-300';
+
+  // Container styles
+  const containerClasses = `
+    ${bgColor}
+    ${borderColor}
+    ${baseClasses}
+    ${disabled ? disabledClasses : ''}
+    ${error ? errorClasses : ''}
+    ${isFocused ? focusClasses : ''}
+    ${!disabled && !error ? hoverClasses : ''}
+    ${defaultClasses}
+  `;
+
+	// Render iconRight in TextField
+	const renderIconRight = () => {
+		if (React.isValidElement(iconRight)) {
+			return iconRight;
+		}
+		if (typeof iconRight === 'function') {
+			return React.createElement(iconRight); 
+		}
+		return null;
+	};
+
+  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">
+        {iconLeft && (
+          <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
+            {iconLeft}
+          </span>
+        )}
+        {iconRight && (
+          <span className="absolute inset-y-0 right-0 pr-3 flex items-center">
+            {renderIconRight()}
+          </span>
+        )}
+        {multiline ? (
+          <textarea
+            id={id}
+            rows={maxRows}
+            className={containerClasses}
+            value={value}
+            onChange={onChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            disabled={disabled}
+          />
+        ) : (
+          <input
+            id={id}
+            type="text"
+            className={containerClasses}
+            value={value}
+            onChange={onChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            disabled={disabled}
+          />
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-light-error-main text-body2">
+          This field is required
+        </p>
+      )}
+    </div>
+  );
+}

package/components/tooltip/tooltip.tsx

@@ -0,0 +1,61 @@
+'use client';
+import React, { useState, useRef, useEffect } from 'react';
+
+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/userImage.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function UserImage({ 
+	userHandle, 
+	userImgUrl,
+ }: UserImageProps) {
+
+  const defaultInitial = userHandle.charAt(0).toUpperCase();
+
+  return (
+    <div 
+			className="flex items-center justify-center w-6 h-6 rounded-full overflow-hidden
+			bg-light-background-accent200 dark:bg-dark-background-accent200 
+			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">
+					{defaultInitial}
+				</span>
+      )}
+    </div>
+  );
+}

package/designTokens.js

@@ -0,0 +1,234 @@
+// design tokens definitions
+module.exports = {
+  colors: {
+    // light
+    light:{
+      text:{
+        primary: '#000000',
+        secondary: '#6D6D6D',
+        disabled: '#9E9E9E',
+        contrast: '#ffffff',
+      },
+      accent:{
+        main: '#EEAE03',
+        dark: '#CE8602',
+        light: '#FFDD43',
+        contrast: '#000000',
+      },
+      primary:{
+        main: '#454545',
+        dark: '#262626',
+        light: '#888888',
+      },
+      secondary:{
+        main: '#B0B0B0',
+        dark: '#888888',
+        light: '#D1D1D1',
+      },
+      error:{
+        main: '#D32F2F',
+        dark: '#B22323',
+        light: '#F27777',
+      },
+      warning:{
+        main: '#EF6C00',
+        dark: '#CC5302',
+        light: '#FFA732',
+      },
+      info:{
+        main: '#0087D4',
+        dark: '#006BAB',
+        light: '#2CC1FF',
+      },
+      success:{
+        main: '#328736',
+        dark: '#2A6B2D',
+        light: '#67C16B',
+      },
+      background:{
+        default: '#FFFFFF',
+        accent100:'#F6F6F6',
+        accent200:'#E7E7E7',
+        accent300:'#D1D1D1',
+      },
+      action:{
+        active: '#888888',
+        hover: '#F3F3F3',
+        selected: '#E3E3E3',
+        disabledBackground: '#D1D1D1',
+        disabled: '#B0B0B0',
+      },
+      actionBackground:{
+        enabled: '#FFFFFF',
+        hovered: '#FFFFFF',
+        selected: '#FFFFFF',
+        disabled: '#EEEEEE',
+      },
+      actionOutlinedBorder:{
+        enabled: '#888888',
+        hovered: '#CDCDCD',
+        selected: '#E8E8E8',
+        disabled: '#B0B0B0',
+      },
+      misc:{
+        divider: '#D1D1D1',
+      },
+    },
+
+    // dark
+    dark:{
+      text:{
+        primary: '#FFFFFF',
+        secondary: '#B0B0B0',
+        disabled: '#6D6D6D',
+        contrast: '#000000',
+      },
+      accent:{
+        main: '#FFCD29',
+        dark: '#CE8602',
+        light: '#FFDD43',
+        contrast: '#000000',
+      },
+      primary:{
+        main: '#D5D5D5',
+        dark: '#E9E9E9',
+        light: '#9A9A9A',
+      },
+      secondary:{
+        main: '#4F4F4F',
+        dark: '#454545',
+        light: '#6D6D6D',
+      },
+      error:{
+        main: '#E74C4C',
+        dark: '#B22323',
+        light: '#F27777',
+      },
+      warning:{
+        main: '#FF8C0A',
+        dark: '#CC5302',
+        light: '#FFA732',
+      },
+      info:{
+        main: '#00AFFF',
+        dark: '#006BAB',
+        light: '#2CC1FF',
+      },
+      success:{
+        main: '#42A547',
+        dark: '#2A6B2D',
+        light: '#67C16B',
+      },
+      background:{
+        default: '#262626',
+        accent100:'#333333',
+        accent200:'#454545',
+        accent300:'#4F4F4F',
+      },
+      action:{
+        active: '#171717',
+        hover: '#3D3D3D',
+        selected: '#4E4E4E',
+        disabledBackground: '#3C3C3C',
+        disabled: '#383838',
+      },
+      actionBackground:{
+        enabled: '#FFFFFF',
+        hovered: '#FFFFFF',
+        selected: '#FFFFFF',
+        disabled: '#383838',
+      },
+      actionOutlinedBorder:{
+        enabled: '#7B7B7B',
+        hovered: '#2F2F2F',
+        selected: '#404040',
+        disabled: '#383838',
+      },
+      misc:{
+        divider: '#404040',
+      },
+    },
+  },
+
+  spacing: {
+    small: '4px',
+    medium: '8px',
+    large: '16px',
+  },
+  
+  typography: {
+    family: 'Inter, sans-serif',
+    h1: {
+      weight: '300',
+      size: '96px',
+      lineHeight: '120%',
+      letterSpacing: '-1.5px',
+    },
+    h2: {
+      weight: '300',
+      size: '60px',
+      lineHeight: '120%',
+      letterSpacing: '-0.5px',
+    },
+    h3: {
+      weight: '400',
+      size: '48px',
+      lineHeight: '120%',
+      letterSpacing: '0px',
+    },
+    h4: {
+      weight: '400',
+      size: '34px',
+      lineHeight: '120%',
+      letterSpacing: '0.3px',
+    },
+    h5: {
+      weight: '400',
+      size: '24px',
+      lineHeight: '120%',
+      letterSpacing: '0px',
+    },
+    h6: {
+      weight: '500',
+      size: '20px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    subtitle1: {
+      weight: '500',
+      size: '16px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    subtitle2: {
+      weight: '500',
+      size: '14px',
+      lineHeight: '150%',
+      letterSpacing: '0.1px',
+    },
+    body1: {
+      weight: '400',
+      size: '16px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    body2: {
+      weight: '400',
+      size: '14px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    caption: {
+      weight: '400',
+      size: '12px',
+      lineHeight: '150%',
+      letterSpacing: '1.2px',
+    },
+    alignments: {
+      left: 'left',
+      center: 'center',
+      right: 'right',
+      justify: 'justify',
+    },
+  },
+};