@mci-ui/mci-ui 0.0.0 → 0.0.2

package/src/shared/ui/mciTable/MciTable.tsx

@@ -0,0 +1,166 @@
+import { ArrowUpDown, Box, ChevronDown, ChevronUp } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { cn } from '../../lib/utils'
+import type { MciTableColumn } from '../../types/MciTableType'
+import { Skeleton } from '../index'
+
+interface MciTableProps<T extends Record<string, unknown>> {
+	columns: MciTableColumn<T>[]
+	data: T[]
+	loading?: boolean
+	variant?: 'clean' | 'elevated' | 'bordered'
+	skeletonRows?: number
+	actions?: React.ReactNode
+	noDataText?: string
+}
+
+export default function MciTable<T extends Record<string, unknown>>({
+	columns,
+	data,
+	loading = false,
+	variant = 'clean',
+	skeletonRows = 5,
+	actions,
+	noDataText,
+}: MciTableProps<T>) {
+	const [sortConfig, setSortConfig] = useState<{
+		key: keyof T
+		direction: 'asc' | 'desc' | null
+	} | null>(null)
+
+	const sortedData = useMemo(() => {
+		if (!sortConfig || !sortConfig.direction) return data
+		return [...data].sort((a, b) => {
+			const aVal = a[sortConfig.key]
+			const bVal = b[sortConfig.key]
+			if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1
+			if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1
+			return 0
+		})
+	}, [data, sortConfig])
+
+	const handleSort = (col: MciTableColumn<T>) => {
+		if (!col.sortable) return
+		setSortConfig(prev => {
+			if (!prev || prev.key !== col.key) {
+				return { key: col.key, direction: 'asc' }
+			}
+			if (prev.direction === 'asc') return { key: col.key, direction: 'desc' }
+			if (prev.direction === 'desc') return { key: col.key, direction: null }
+			return null
+		})
+	}
+
+	const getSortIcon = (col: MciTableColumn<T>) => {
+		if (!col.sortable) return null
+		if (!sortConfig || sortConfig.key !== col.key || !sortConfig.direction) {
+			return <ArrowUpDown size={15} className='opacity-40' />
+		}
+		return sortConfig.direction === 'asc' ? (
+			<ChevronUp size={15} />
+		) : (
+			<ChevronDown size={15} />
+		)
+	}
+
+	const variantStyle = cn(
+		'w-full border-separate border-spacing-0 transition-all duration-300',
+		variant === 'clean' && 'bg-white',
+		variant === 'elevated' && 'bg-white  shadow-lg',
+		variant === 'bordered' && 'border border-secondary-200 rounded-lg'
+	)
+
+	const headerCell = (col: MciTableColumn<T>) =>
+		cn(
+			'bg-secondary-50 text-secondary-800 text-sm font-semibold py-3 px-4 select-none',
+			'border-b border-secondary-200 transition-colors',
+			col.align === 'center' && 'text-center',
+			col.align === 'right' && 'text-right',
+			col.sortable && 'cursor-pointer hover:bg-secondary-100/70'
+		)
+
+	return (
+		<div className='w-full space-y-3'>
+			{actions && (
+				<div className='flex justify-between items-center mb-2'>{actions}</div>
+			)}
+
+			<div className='w-full overflow-x-auto rounded-lg'>
+				<table className={variantStyle}>
+					<thead>
+						<tr>
+							{columns.map((col, idx) => (
+								<th
+									key={String(col.key)}
+									onClick={() => handleSort(col)}
+									className={cn(
+										headerCell(col),
+										idx === 0 && 'rounded-tl-lg',
+										idx === columns.length - 1 && 'rounded-tr-lg'
+									)}
+									style={{ width: col.width }}
+								>
+									<div className='flex items-center justify-between gap-2'>
+										<span className='truncate'>{col.title}</span>
+										{getSortIcon(col)}
+									</div>
+								</th>
+							))}
+						</tr>
+					</thead>
+
+					<tbody>
+						{loading
+							? Array.from({ length: skeletonRows }).map((_, idx) => (
+									<tr key={idx}>
+										{columns.map((_, i) => (
+											<td key={i} className='px-4 py-3'>
+												<Skeleton height={18} variant='rounded' />
+											</td>
+										))}
+									</tr>
+							  ))
+							: sortedData.map((row, idx) => (
+									<tr
+										key={idx}
+										className={cn(
+											'border-b border-secondary-100  transition-all duration-200'
+										)}
+									>
+										{columns.map((col, i) => (
+											<td
+												key={i}
+												className={cn(
+													'px-4 py-3 text-sm text-gray-800',
+													col.align === 'center' && 'text-center',
+													col.align === 'right' && 'text-right'
+												)}
+											>
+												{col.render
+													? col.render(row[col.key], row)
+													: String(row[col.key])}
+											</td>
+										))}
+									</tr>
+							  ))}
+					</tbody>
+				</table>
+			</div>
+
+			{!loading && sortedData.length === 0 && (
+				<div className='flex flex-col items-center justify-center py-10 text-gray-500 dark:text-gray-400 animate-[fadeIn_0.4s_ease-in-out]'>
+					<div className='relative'>
+						<Box
+							size={64}
+							className='mb-3 text-secondary-400 dark:text-secondary-500 opacity-80 animate-[float_2.5s_ease-in-out_infinite]'
+						/>
+						<div className='absolute inset-0 blur-2xl bg-secondary-200/20 dark:bg-secondary-700/20 rounded-full scale-75 animate-[pulse_3s_ease-in-out_infinite]' />
+					</div>
+					<p className='text-sm font-medium animate-[fadeUp_0.6s_ease-out]'>
+						{noDataText}
+					</p>
+				</div>
+			)}
+		</div>
+	)
+}

package/src/shared/ui/modal/Modal.tsx

@@ -0,0 +1,92 @@
+import { X } from 'lucide-react'
+import React, { useEffect, useRef } from 'react'
+import { cn, useClickOutside, useEscapeKey } from '../../lib/utils'
+
+interface ModalProps {
+	show: boolean
+	setShow: (show: boolean) => void
+	title?: string
+	Header?: React.ReactNode
+	Body?: React.ReactNode
+	footer?: React.ReactNode
+}
+
+export default function Modal({
+	show,
+	setShow,
+	title,
+	Header,
+	Body,
+	footer,
+}: ModalProps) {
+	const modalRef = useRef<HTMLDivElement>(null!)
+
+	// ESC
+	const { handleEscape } = useEscapeKey(() => setShow(false))
+	useEffect(() => {
+		if (show) {
+			document.addEventListener('keydown', handleEscape)
+			document.body.style.overflow = 'hidden'
+		} else {
+			document.body.style.overflow = 'unset'
+		}
+		return () => document.removeEventListener('keydown', handleEscape)
+	}, [show, handleEscape])
+
+	// Click outside
+	const { handleClick } = useClickOutside(modalRef, () => setShow(false))
+	useEffect(() => {
+		if (show) document.addEventListener('mousedown', handleClick)
+		return () => document.removeEventListener('mousedown', handleClick)
+	}, [show, handleClick])
+
+	return (
+		<div
+			className={cn(
+				'fixed inset-0 z-50 flex items-center justify-center p-4 bg-secondary-100/50 backdrop-blur-sm transition-all duration-500 ease-in-out',
+				show
+					? 'opacity-100 pointer-events-auto'
+					: 'opacity-0 pointer-events-none'
+			)}
+		>
+			<div
+				ref={modalRef}
+				className={cn(
+					'relative w-full max-w-lg rounded-[7px] shadow-xl bg-secondary-50 text-gray-800',
+					'transform transition-all duration-500 ease-out',
+					show ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
+				)}
+			>
+				{/* Header */}
+				{(Header || title) && (
+					<div className='flex items-center justify-between px-6 py-4 border-b border-secondary-300'>
+						{Header || (
+							<h2 className='text-xl font-semibold text-gray-800'>{title}</h2>
+						)}
+
+						<button
+							onClick={() => setShow(false)}
+							className='text-gray-800 hover:text-secondary-300 active:animate-spin transition'
+						>
+							<X className='w-5 h-5' />
+						</button>
+					</div>
+				)}
+
+				{/* Body */}
+				{Body && (
+					<div className='px-6 py-4 max-h-96 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300'>
+						{Body}
+					</div>
+				)}
+
+				{/* Footer */}
+				{footer && (
+					<div className='flex items-center justify-end gap-3 px-6 py-4 border-t border-secondary-300'>
+						{footer}
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}

package/src/shared/ui/pagination/Pagination.tsx

@@ -0,0 +1,141 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface PaginationProps {
+	totalItems: number
+	currentPage: number
+	perPage: number
+	onPageChange: (page: number) => void
+	onPerPageChange?: (value: number) => void
+	siblingCount?: number
+	perPageOptions?: number[]
+	showPerPage?: boolean
+}
+
+export default function Pagination({
+	totalItems,
+	currentPage,
+	perPage,
+	onPageChange,
+	onPerPageChange,
+	siblingCount = 1,
+	perPageOptions = [10, 20, 30],
+	showPerPage = true,
+}: PaginationProps) {
+	const totalPages = Math.ceil(totalItems / perPage)
+
+	const createPageRange = () => {
+		const totalPageNumbers = siblingCount * 2 + 5
+		if (totalPages <= totalPageNumbers) {
+			return Array.from({ length: totalPages }, (_, i) => i + 1)
+		}
+
+		const leftSiblingIndex = Math.max(currentPage - siblingCount, 2)
+		const rightSiblingIndex = Math.min(
+			currentPage + siblingCount,
+			totalPages - 1
+		)
+
+		const showLeftDots = leftSiblingIndex > 2
+		const showRightDots = rightSiblingIndex < totalPages - 1
+
+		const range: (number | string)[] = [1]
+
+		if (showLeftDots) range.push('...')
+
+		for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+			range.push(i)
+		}
+
+		if (showRightDots) range.push('...')
+
+		range.push(totalPages)
+
+		return range
+	}
+
+	const pages = createPageRange()
+
+	const handlePrev = () => {
+		if (currentPage > 1) onPageChange(currentPage - 1)
+	}
+
+	const handleNext = () => {
+		if (currentPage < totalPages) onPageChange(currentPage + 1)
+	}
+
+	return (
+		<div className='w-full flex flex-col md:flex-row md:justify-between md:items-center gap-4 py-4'>
+			{/* Per Page Select */}
+			{showPerPage && onPerPageChange && (
+				<div className='flex justify-center md:justify-start w-full md:w-auto'>
+					<select
+						value={perPage}
+						onChange={e => onPerPageChange(Number(e.target.value))}
+						className='border rounded-lg px-3 py-2 text-sm bg-white
+                       hover:border-secondary-500 
+                       focus:outline-none focus:ring-2 focus:ring-secondary-500
+                       transition-all duration-200'
+					>
+						{perPageOptions.map(option => (
+							<option key={option} value={option}>
+								{option} / page
+							</option>
+						))}
+					</select>
+				</div>
+			)}
+
+			{/* Pagination */}
+			<div className='flex items-center justify-center md:justify-end w-full'>
+				{/* Prev */}
+				<button
+					onClick={handlePrev}
+					disabled={currentPage === 1}
+					className={`flex items-center justify-center rounded-xl border px-3 py-2 transition-all duration-200
+            ${
+							currentPage === 1
+								? 'opacity-40 cursor-not-allowed'
+								: 'hover:bg-secondary-100 hover:text-secondary-700'
+						}`}
+				>
+					<ChevronLeft size={18} />
+				</button>
+
+				{/* Page numbers */}
+				<div className='flex items-center gap-1 mx-2'>
+					{pages.map((page, idx) => (
+						<button
+							key={idx}
+							onClick={() => typeof page === 'number' && onPageChange(page)}
+							disabled={page === '...'}
+							className={`min-w-[40px] rounded-xl border px-3 py-2 text-sm font-medium transition-all duration-200
+                ${
+									page === currentPage
+										? 'bg-secondary-500 text-white shadow-md'
+										: page === '...'
+										? 'cursor-default border-none text-gray-400'
+										: 'bg-white text-secondary-700 hover:bg-secondary-100'
+								}`}
+						>
+							{page}
+						</button>
+					))}
+				</div>
+
+				{/* Next */}
+				<button
+					onClick={handleNext}
+					disabled={currentPage === totalPages}
+					className={`flex items-center justify-center rounded-xl border px-3 py-2 transition-all duration-200
+            ${
+							currentPage === totalPages
+								? 'opacity-40 cursor-not-allowed'
+								: 'hover:bg-secondary-100 hover:text-secondary-700'
+						}`}
+				>
+					<ChevronRight size={18} />
+				</button>
+			</div>
+		</div>
+	)
+}

package/src/shared/ui/skeleton/Skeleton.tsx

@@ -0,0 +1,33 @@
+import {cn} from '../../lib/utils.ts'
+
+type SkeletonProps = {
+    className?: string
+    variant?: 'default' | 'rounded' | 'circle'
+    width?: string | number
+    height?: string | number
+}
+
+export default function Skeleton({
+                                     className,
+                                     variant = 'default',
+                                     width = '100%',
+                                     height = '1rem',
+                                 }: SkeletonProps) {
+    return (
+        <div
+            className={cn(
+                'relative overflow-hidden bg-secondary-200 dark:bg-secondary-800',
+                'rounded-sm',
+                variant === 'circle' && 'rounded-full',
+                variant === 'rounded' && 'rounded-md',
+                className
+            )}
+            style={{
+                width: typeof width === 'number' ? `${width}px` : width,
+                height: typeof height === 'number' ? `${height}px` : height,
+            }}
+        >
+            <div className='absolute inset-0 shimmer-mask'/>
+        </div>
+    )
+}

package/src/shared/ui/tabs/Tabs.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+type Tab = {
+	id: string
+	label: string
+	icon?: React.ReactNode
+	content: React.ReactNode
+	disabled?: boolean
+}
+
+type TabsProps = {
+	tabs: Tab[]
+	defaultTab?: string
+	position?: 'top' | 'bottom' | 'left' | 'right'
+	variant?: 'primary' | 'secondary' | 'accent'
+	className?: string
+	onChange?: (tabId: string | number) => void
+}
+
+export default function Tabs({
+	tabs,
+	defaultTab,
+	position = 'top',
+	variant = 'primary',
+	className,
+	onChange,
+}: TabsProps) {
+	const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)
+	const [indicatorStyle, setIndicatorStyle] = useState({})
+	const tabsRef = useRef<(HTMLButtonElement | null)[]>([])
+
+	useEffect(() => {
+		const activeIndex = tabs.findIndex(tab => tab.id === activeTab)
+		const activeTabElement = tabsRef.current[activeIndex]
+
+		if (activeTabElement) {
+			const { offsetLeft, offsetTop, offsetWidth, offsetHeight } =
+				activeTabElement
+
+			setIndicatorStyle({
+				left: offsetLeft,
+				top: offsetTop,
+				width: offsetWidth,
+				height: offsetHeight,
+				transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+			})
+		}
+	}, [activeTab, position, tabs])
+
+	const containerClasses = {
+		top: 'flex-col',
+		bottom: 'flex-col-reverse',
+		left: 'flex-row',
+		right: 'flex-row-reverse',
+	}
+
+	const tabsContainerClasses = {
+		top: 'flex-row',
+		bottom: 'flex-row',
+		left: 'flex-col',
+		right: 'flex-col',
+	}
+
+	const contentClasses = {
+		top: 'mt-6',
+		bottom: 'mb-6',
+		left: 'ml-6',
+		right: 'mr-6',
+	}
+
+	const variantClasses = {
+		primary: {
+			active: 'text-secondary-600',
+			inactive:
+				'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300',
+			disabled: 'text-gray-300 dark:text-gray-600 cursor-not-allowed',
+			bg: 'bg-secondary-100 dark:bg-secondary-900',
+		},
+		secondary: {
+			active: 'text-accent-600',
+			inactive:
+				'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300',
+			disabled: 'text-gray-300 dark:text-gray-600 cursor-not-allowed',
+			bg: 'bg-accent-100 dark:bg-accent-900',
+		},
+		accent: {
+			active: 'text-gray-800 dark:text-gray-200',
+			inactive:
+				'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300',
+			disabled: 'text-gray-300 dark:text-gray-600 cursor-not-allowed',
+			bg: 'bg-gray-100 dark:bg-gray-800',
+		},
+	}
+
+	const isVertical = position === 'left' || position === 'right'
+
+	return (
+		<div className={cn('flex w-full', containerClasses[position], className)}>
+			{/* Tabs Container */}
+			<div
+				className={cn(
+					'flex relative bg-gray-50 dark:bg-gray-900 rounded-lg p-1',
+					tabsContainerClasses[position],
+					isVertical ? 'min-w-48' : 'w-full'
+				)}
+			>
+				{/* Animated Background Indicator */}
+				<div
+					className={cn(
+						'absolute rounded-md transition-all duration-300 ease-out',
+						variantClasses[variant].bg,
+						isVertical ? 'w-full' : 'h-full'
+					)}
+					style={indicatorStyle}
+				/>
+
+				{tabs.map((tab, index) => {
+					const isActive = activeTab === tab.id
+					const variantConfig = variantClasses[variant]
+
+					return (
+						<button
+							key={tab.id}
+                            ref={(el) => {
+                                tabsRef.current[index] = el
+                            }}
+							onClick={() => {
+								if (!tab.disabled) {
+									setActiveTab(tab.id)
+									onChange?.(tab.id)
+								}
+							}}
+							disabled={tab.disabled}
+							className={cn(
+								'relative flex items-center justify-center gap-2 px-4 py-3 font-medium',
+								'text-sm whitespace-nowrap transition-all duration-200 z-10',
+								'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500',
+								'rounded-md',
+								isActive
+									? [variantConfig.active, 'font-semibold']
+									: [
+											variantConfig.inactive,
+											'hover:bg-white/50 dark:hover:bg-gray-800/50',
+									  ],
+								tab.disabled && variantConfig.disabled,
+								isVertical ? 'w-full justify-start' : 'flex-1'
+							)}
+						>
+							{tab.icon && (
+								<span
+									className={cn(
+										'flex-shrink-0 transition-transform duration-200',
+										isActive && 'scale-110'
+									)}
+								>
+									{tab.icon}
+								</span>
+							)}
+							<span className='relative z-10'>{tab.label}</span>
+						</button>
+					)
+				})}
+			</div>
+
+			{/* Tab Content with Smooth Transition */}
+			<div className={cn('flex-1 overflow-hidden', contentClasses[position])}>
+				<div key={activeTab} className='animate-fade-in'>
+					{tabs.find(tab => tab.id === activeTab)?.content}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+type TabPanelProps = {
+	children: React.ReactNode
+	className?: string
+}
+
+export function TabPanel({ children, className }: TabPanelProps) {
+	return (
+		<div
+			className={cn(
+				'p-6 rounded-lg bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700',
+				className
+			)}
+		>
+			{children}
+		</div>
+	)
+}