oneslash-design-system 1.2.2 → 1.2.4

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>
-  );
-}

package/designTokens.js

@@ -1,234 +0,0 @@
-// 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: '#e8e8e8',
-        accent100:'#f1f1f1',
-        accent200:'#f7f7f7',
-        accent300:'#FFFFFF',
-      },
-      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: '#eeeeee',
-        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: '0.5px',
-    },
-    alignments: {
-      left: 'left',
-      center: 'center',
-      right: 'right',
-      justify: 'justify',
-    },
-  },
-};

package/index.css

@@ -1,8 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
-
-body {
-  font-family: 'Inter', sans-serif;
-}

package/index.ts

@@ -1,21 +0,0 @@
-import './index.css';
-import './designTokens';
-
-export * from './components/alert';
-export * from './components/button';
-export * from './components/checkBox';
-export * from './components/emptyBox';
-export * from './components/iconButton';
-export * from './components/loadingScreen';
-export * from './components/menu';
-export * from './components/menuItem';
-export * from './components/modal';
-export * from './components/navigation';
-export * from './components/popover';
-export * from './components/select';
-export * from './components/tab';
-export * from './components/tag';
-export * from './components/textField';
-export * from './components/timeStamp'
-export * from './components/tooltip';
-export * from './components/userImage';

package/next.config.mjs

@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-export default nextConfig;