oneslash-design-system 1.0.3

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/components/alert/alert.tsx

@@ -0,0 +1,42 @@
+'use client';
+import React, { useEffect } from 'react';
+
+export default function Alert({ open, type, message, onClose }: AlertProps) {
+  useEffect(() => {
+    if (open) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  let bgColor;
+  switch (type) {
+    case 'error':
+      bgColor = 'bg-light-error-main dark:bg-dark-error-main';
+      break;
+    case 'warning':
+      bgColor = 'bg-light-warning-main dark:bg-dark-warning-main';
+      break;
+    case 'info':
+      bgColor = 'bg-light-info-main dark:bg-dark-info-main';
+      break;
+    case 'success':
+      bgColor = 'bg-light-success-main dark:bg-dark-success-main';
+      break;
+  }
+
+  return (
+    <div className="fixed top-4 inset-x-0 z-50 flex justify-center">
+      <div className={`flex items-center justify-between w-full max-w-md p-4 rounded-[8px] shadow-lg text-light-text-contrast dark:text-dark-text-contrast ${bgColor}`}>
+        <span>{message}</span>
+        <button onClick={onClose} className="ml-4 text-xl font-bold">
+          &times;
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/button/button.tsx

@@ -0,0 +1,107 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Button({
+  size,
+  type,
+  state,
+  label,
+  iconLeftName,
+  iconRightName,
+  onClick,
+}: ButtonProps) {
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [IconLeft, setIconLeft] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
+  const [IconRight, setIconRight] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
+
+  // import icon
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  // Load icons on mount and when props change
+  useEffect(() => {
+    const fetchIcons = async () => {
+      if (typeof iconLeftName === 'string') {
+        setIconLeft(await loadIcon(iconLeftName));
+      }
+      if (typeof iconRightName === 'string') {
+        setIconRight(await loadIcon(iconRightName));
+      }
+    };
+    fetchIcons();
+  }, [iconLeftName, iconRightName, loadIcon]);
+
+  // size
+  const sizeClasses = 
+    size === 'large' ? 'text-body1 p-2'
+    : size === 'small' ? 'text-body2 p-1'
+    : 'text-body1 p-1'; // medium size
+
+  // icon size
+  const sizeIcon = 
+    size === 'large' ? 'w-6 h-6' 
+    : size === 'small' ? 'w-4 h-4' 
+    : 'w-5 h-5'; // medium size
+
+  // type
+  const typeClasses = {
+    primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
+    secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
+    tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
+    textOnly: 'text-light-text-primary dark:text-dark-text-primary',
+  }[type];
+
+  const hoverTypeClasses = {
+    primary: ' hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
+    secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
+    tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
+    textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
+  }[type];
+
+  // state
+  const stateClasses = {
+    enabled: 'cursor-pointer',
+    hovered: 'cursor-pointer',
+    selected: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
+    focused: 'ring-2 ring-light-accent-main dark:ring-dark-accent-main',
+    disabled: 'text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
+  }[state];
+
+  
+
+  return (
+    <button
+      className={`flex flex-row space-x-2 items-center rounded-[8px] 
+        ${sizeClasses} 
+        ${typeClasses} 
+        ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''} 
+        ${stateClasses}`}
+      disabled={state === 'disabled'}
+      onMouseEnter={() => {
+        if (state !== 'disabled') setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        if (state !== 'disabled') setIsHovered(false);
+      }}
+      onClick={onClick}
+    >
+      {IconLeft && <IconLeft className={sizeIcon} />}
+      <div className="whitespace-nowrap px-2">
+        {label}
+      </div>
+      {IconRight && <IconRight className={sizeIcon} />}
+    </button>
+  );
+}

package/components/checkBox/checkBox.tsx

@@ -0,0 +1,57 @@
+'use client';
+import React, { useState } from 'react';
+
+
+
+export default function Checkbox({
+  label, 
+  checked = false, 
+  onChange
+}: CheckboxProps) {
+  
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleToggle = () => {
+    const newChecked = !isChecked;
+    setIsChecked(newChecked);
+    if (onChange) {
+      onChange(newChecked);
+    }
+  };
+
+  return (
+    <label className="flex items-center cursor-pointer">
+      <div
+        onClick={handleToggle}
+        className="relative flex items-center justify-center w-6 h-6 group"
+      >
+        {/* Circle behind the checkbox */}
+        <div
+          className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected transition-all"
+        ></div>
+        
+        {/* Checkbox */}
+        <div
+          className={`relative z-10 w-4 h-4 border-2 rounded ${
+            isChecked
+              ? 'bg-light-accent-main dark:bg-dark-accent-main border-none'
+              : 'border-light-text-secondary dark:border-dark-text-secondary'
+          } flex items-center justify-center transition-colors`}
+        >
+          {isChecked && (
+            <svg
+              className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 12 12"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path strokeWidth="2" d="M1 6l4 3 6-7" />
+            </svg>
+          )}
+        </div>
+      </div>
+      {label && <span className="ml-2">{label}</span>}
+    </label>
+  );
+}

package/components/iconButton/iconButton.tsx

@@ -0,0 +1,96 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function IconButton({
+  variant,
+  color,
+  state,
+  iconName,
+	onClick,
+}: IconButtonProps) {
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
+
+  // import icon
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  // Load icons on mount and when props change
+  useEffect(() => {
+    const fetchIcons = async () => {
+      if (typeof iconName === 'string') {
+        setIcon(await loadIcon(iconName));
+      }
+    };
+    fetchIcons();
+  }, [iconName, loadIcon]);
+
+
+  // padding, corner
+  const baseClasses = variant === 'contained' 
+    ? 'p-2 rounded-[8px] leading-none ' 
+    : 'p-2 rounded-[8px] leading-none ';
+
+  // bg color
+  const bgColor = variant === 'contained'
+    ? color === 'primary' 
+      ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
+      : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
+    : color === 'primary' 
+    ? ' ' // textOnly && primary
+    : ' '; // textOnly && secondary
+
+  // bg color hover
+	const bgColorHover = variant === 'contained'
+  ? color === 'primary' 
+    ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark'  // contained && primary
+    : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300'  // contained && secondary
+  : color === 'primary' 
+  ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'  // textOnly && primary
+  : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover';  // textOnly && secondary
+
+  // icon color
+  const iconColor = variant === 'contained'
+    ? color === 'primary' 
+      ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
+      : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
+    : color === 'primary'
+    ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
+    : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
+
+
+  // state
+  const stateClasses = state === 'disabled'
+    ? 'cursor-not-allowed opacity-50'
+    : state === 'selected'
+    ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
+    : isHovered
+    ? 'cursor-pointer hover:bg-opacity-75'
+    : 'cursor-pointer';
+
+  
+
+  return (
+    <button
+      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-300 ease-in-out`}
+      disabled={state === 'disabled'}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+			onClick={onClick}
+    	>
+        {Icon && <Icon className="size-6" />}
+    </button>
+  );
+}

package/components/menuItem/menuItem.tsx

@@ -0,0 +1,57 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+import NextLink from 'next/link';
+
+export default function MenuItem({ 
+	href = '#', 
+	iconName, 
+	label, 
+	isSelected, 
+	onClick, }
+: MenuItemProps) {
+
+	const [Icon, setIcon] = useState<IconType | null>(null);
+
+  // Import icon dynamically
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const IconComponent = module[iconName as keyof typeof module] as IconType;
+      return IconComponent || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcon = async () => {
+      if (iconName) {
+        setIcon(await loadIcon(iconName));
+      }
+    };
+    fetchIcon();
+  }, [iconName, loadIcon]);
+
+
+  return (
+    <NextLink href={href}>
+      <div 
+        className={`
+          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start
+          ${isSelected 
+            ? 'bg-light-action-selected dark:bg-dark-action-selected' 
+            : 'hover:bg-light-action-hover dark:hover:bg-dark-action-hover'}
+        `}
+        style={{ width: '100%' }}
+        onClick={onClick}
+      >
+        {Icon && <Icon className="w-5 h-5" />}
+        <span className="whitespace-nowrap text-body1">
+          {label}
+        </span>
+      </div>
+    </NextLink>
+  );
+}

package/components/modal/modal.tsx

@@ -0,0 +1,41 @@
+'use client';
+import React from 'react';
+
+export default function Modal({ 
+	isOpen, 
+	title, 
+	children, 
+	onClose, 
+	actions, 
+}: ModalProps) {
+
+  if (!isOpen) return null;
+
+	const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50 " 
+      onClick={handleOverlayClick}
+    >
+      <div className="bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 w-[600px]"
+      style={{
+        position: 'relative',
+        margin: '0 auto'
+      }}>
+        <h2 className="text-h6">
+					{title}
+				</h2>
+        <div className="text-body1 space-y-4">
+          {children}
+        </div>
+        <div className="flex justify-between">
+          {actions}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/popover/popover.tsx

@@ -0,0 +1,74 @@
+'use client';
+import React, { useState, useRef, useEffect } from 'react';
+
+export default function Popover({ anchorEl, open, onClose, children }: PopoverProps) {
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Close popover when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchorEl) {
+        onClose();
+      }
+    };
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, anchorEl, onClose]);
+
+  // Calculate position
+  useEffect(() => {
+    if (anchorEl && open) {
+      const anchorRect = anchorEl.getBoundingClientRect();
+      const popoverRect = popoverRef.current?.getBoundingClientRect();
+      if (popoverRect) {
+        const spaceBelow = window.innerHeight - anchorRect.bottom;
+        const spaceAbove = anchorRect.top;
+
+        // Determine if we should place the popover above
+        const shouldPlaceAbove = spaceBelow < popoverRect.height + 8 && spaceAbove > popoverRect.height + 8;
+
+        // Calculate top position, correcting for popover height when placing above
+        const topPosition = shouldPlaceAbove
+          ? anchorRect.top + window.scrollY - popoverRect.height - 8 // Adjust by 8px to maintain spacing
+          : anchorRect.bottom + window.scrollY + 8; // Add 8px for spacing below
+
+        // Calculate left position with viewport boundary checks
+        let leftPosition = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
+
+        if (leftPosition < 8) {
+          // Adjust to align with the left boundary of the viewport
+          leftPosition = 8;
+        } else if (leftPosition + popoverRect.width > window.innerWidth - 8) {
+          // Adjust to align with the right boundary of the viewport
+          leftPosition = window.innerWidth - popoverRect.width - 8;
+        }
+
+        setPopoverStyle({
+          position: 'absolute',
+          top: topPosition,
+          left: leftPosition,
+          zIndex: 10000,
+          pointerEvents: 'auto',
+        });
+      }
+    }
+  }, [anchorEl, open]);
+
+  if (!open || !anchorEl) return null;
+
+  return (
+    <div
+      ref={popoverRef}
+      style={popoverStyle}
+      className="bg-light-background-default dark:bg-dark-background-default border rounded-[8px] shadow-lg"
+      role="dialog"
+    >
+      {children}
+    </div>
+  );
+}

package/components/tab/tab.tsx

@@ -0,0 +1,62 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+
+
+const TabIcon: React.FC<{ iconName?: string }> = ({ iconName }) => {
+  const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
+
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const IconComponent = module[iconName as keyof typeof module] as React.ComponentType<React.SVGProps<SVGSVGElement>>;
+      return IconComponent || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcon = async () => {
+      if (iconName) {
+        setIcon(await loadIcon(iconName));
+      }
+    };
+    fetchIcon();
+  }, [iconName, loadIcon]);
+
+  return Icon ? <Icon className="w-5 h-5" /> : null;
+};
+
+const Tab: React.FC<TabProps> = ({ label, href, isSelected, onClick, iconName }) => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleClick = () => {
+    onClick();
+    if (href) {
+    router.push(href);
+    }
+  };
+
+  return (
+    <div
+      className={`
+        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start
+        ${isSelected 
+          ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast' 
+          : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover'}
+      `}
+      onClick={handleClick}
+    >
+      {iconName && <TabIcon iconName={iconName} />}
+      <span className="whitespace-nowrap text-body1">
+        {label}
+      </span>
+    </div>
+  );
+};
+
+export default Tab;

package/components/tag/tag.tsx

@@ -0,0 +1,95 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Tag({
+  key,
+  variant,
+  size,
+  state,
+  label,
+  iconName,
+  isDeletable,
+  onClick,
+  color = 'default',
+}: TagProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [Icon, setIcon] = useState<IconType | null>(null);
+  const [DeleteIcon, setDeleteIcon] = useState<IconType | null>(null);
+
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcons = async () => {
+      if (typeof iconName === 'string') {
+        setIcon(await loadIcon(iconName));
+      }
+      if (typeof isDeletable === 'string') {
+        setDeleteIcon(await loadIcon(isDeletable));
+      }
+    };
+    fetchIcons();
+  }, [iconName, isDeletable, loadIcon]);
+
+  // size and padding
+  const sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
+
+
+    // bg color
+  const bgClasses = variant === 'contained'
+    ? (color === 'info'
+      ? 'bg-light-info-main dark:bg-dark-info-main' // info 
+      : 'bg-light-background-accent200 dark:bg-dark-background-accent200') // default 
+    : ''; // textOnly
+
+  // font color
+  const fontClasses = variant === 'textOnly'
+    ? (color === 'info'
+        ? 'text-light-info-main dark:text-dark-info-main' // info
+        : 'text-light-text-primary dark:text-dark-text-primary') // default
+    : 'text-light-text-primary dark:text-dark-text-primary'; // contained
+
+  // state
+  const stateClasses = state === 'selected' 
+    ? 'bg-light-accent-main dark:bg-dark-accent-main text-white' 
+    : 'cursor-pointer';
+
+  // hover
+  const hoverClasses = isHovered ? (variant === 'contained' ? 'hover:bg-dark-background-accent300' : '') : '';
+
+  return (
+    <div
+      className={`flex items-center space-x-1 rounded-full 
+        ${sizeClasses} ${bgClasses} ${fontClasses} ${stateClasses} ${hoverClasses} 
+        transition-colors duration-300 ease-in-out`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+      <span>{label}</span>
+      {isDeletable && (
+        <button
+          className="ml-2 text-red-500"
+          onClick={(e) => {
+            e.stopPropagation();
+            // Handle delete action
+          }}
+        >
+          {DeleteIcon && <DeleteIcon className="w-4 h-4" />}
+        </button>
+      )}
+    </div>
+  );
+}