@hua-labs/ui-advanced
Pro

Coming Soon

Components

Enterprise

엔터프라이즈급 고급 UI 컴포넌트. DataTable, Chart, RichTextEditor, DatePicker 등 복잡한 UI를 쉽게 구현.

Pro 패키지 혜택

• 40+ 고급 컴포넌트
• 완전한 TypeScript 지원
• 접근성 (a11y) 준수
• 다크 모드 & 테마 커스터마이징
• 우선 지원 & 버그 수정

$npm install @hua-labs/ui-advanced

컴포넌트 카테고리

데이터 디스플레이

대용량 데이터를 효율적으로 표시

DataTableVirtualListTreeViewTimelineDiff

차트 & 시각화

다양한 차트와 데이터 시각화

LineChartBarChartPieChartAreaChartSparklineHeatmap

입력 & 편집

고급 텍스트 및 코드 편집기

RichTextEditorCodeEditorMarkdownEditorColorPickerSignature

날짜 & 시간

날짜/시간 선택 및 스케줄링

DatePickerTimePickerDateRangePickerCalendarScheduler

파일 & 미디어

파일 업로드 및 미디어 처리

FileUploadImageCropperMediaPlayerPDFViewerImageGallery

레이아웃 & 구성

드래그 앤 드롭 레이아웃

KanbanBoardDragDropListResizableSplitterMasonry

네비게이션 & 검색

명령 팔레트 및 고급 검색

CommandPaletteSpotlightAutocompleteTagInputMention

대시보드

대시보드용 위젯 컴포넌트

StatCardMetricCardKPIGaugeTrendIndicator

미리보기

DataTable
Data Display

정렬, 필터, 페이지네이션, 가상 스크롤을 지원하는 고성능 테이블

tsx

import { DataTable } from '@hua-labs/ui-advanced';

function UsersTable() {
  const columns = [
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email', filterable: true },
    { key: 'role', header: 'Role',
      render: (value) => <Badge>{value}</Badge>
    },
    { key: 'actions', header: '',
      render: (_, row) => <ActionMenu row={row} />
    },
  ];

  return (
    <DataTable
      data={users}
      columns={columns}
      pagination={{ pageSize: 20 }}
      virtualScroll={{ enabled: true, rowHeight: 48 }}
      selectable
      onRowSelect={(rows) => console.log(rows)}
      exportable={['csv', 'excel']}
    />
  );
}

CommandPalette
Navigation

Cmd+K로 열리는 명령 팔레트. 검색, 액션, 네비게이션 통합

tsx

import { CommandPalette, useCommandPalette } from '@hua-labs/ui-advanced';

function App() {
  const commands = [
    {
      id: 'search',
      label: 'Search...',
      icon: Search,
      shortcut: ['/', 's'],
      action: () => openSearch()
    },
    {
      id: 'new-doc',
      label: 'New Document',
      icon: FilePlus,
      shortcut: ['n'],
      action: () => createDoc()
    },
    {
      id: 'settings',
      label: 'Settings',
      icon: Gear,
      shortcut: [','],
      action: () => router.push('/settings')
    },
  ];

  return (
    <CommandPalette
      commands={commands}
      placeholder="Type a command or search..."
      hotkey="mod+k"
      footer={<span>ESC to close</span>}
    />
  );
}

DateRangePicker
Date & Time

프리셋, 커스텀 범위, 시간 선택을 지원하는 날짜 범위 선택기

tsx

import { DateRangePicker } from '@hua-labs/ui-advanced';

function ReportFilter() {
  const [range, setRange] = useState({ from: null, to: null });

  const presets = [
    { label: 'Today', value: 'today' },
    { label: 'Last 7 days', value: 'last7' },
    { label: 'Last 30 days', value: 'last30' },
    { label: 'This month', value: 'thisMonth' },
    { label: 'Last month', value: 'lastMonth' },
  ];

  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
      presets={presets}
      showTime
      minDate={new Date('2024-01-01')}
      maxDate={new Date()}
      locale="ko"
    />
  );
}

FileUpload
File & Media

드래그 앤 드롭, 프리뷰, 진행률 표시를 지원하는 파일 업로드

tsx

import { FileUpload } from '@hua-labs/ui-advanced';

function ImageUploader() {
  return (
    <FileUpload
      accept={['image/*', 'application/pdf']}
      maxSize={10 * 1024 * 1024} // 10MB
      maxFiles={5}
      preview
      onUpload={async (files) => {
        const formData = new FormData();
        files.forEach(f => formData.append('files', f));
        return await api.upload(formData);
      }}
      onError={(error) => toast.error(error.message)}
    >
      <FileUpload.Dropzone>
        <Upload className="h-8 w-8 text-muted-foreground" />
        <p>Drag & drop or click to upload</p>
      </FileUpload.Dropzone>
      <FileUpload.List />
    </FileUpload>
  );
}

ColorPicker
Input
Tailwind

Tailwind CSS 팔레트를 기본 지원하는 컬러 피커. HEX, RGB, HSL 변환 및 커스텀 팔레트 지원

tsx

import { ColorPicker } from '@hua-labs/ui-advanced';

function ThemeEditor() {
  const [color, setColor] = useState('#6366F1');

  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      // Tailwind CSS 팔레트 기본 내장
      palette="tailwind"
      // 또는 커스텀 팔레트
      customPalette={[
        { name: 'Brand', colors: ['#6366F1', '#8B5CF6', '#EC4899'] },
        { name: 'Neutral', colors: ['#1F2937', '#6B7280', '#F3F4F6'] },
      ]}
      // 출력 형식
      format="hex" // 'hex' | 'rgb' | 'hsl' | 'tailwind'
      // Tailwind 클래스로 출력
      outputTailwind // 'bg-indigo-500', 'text-indigo-500' 등
      showInput
      showPreview
      showPalette
      showOpacity
    />
  );
}

// Tailwind 형식 출력 예시
// color: 'indigo-500'
// className: 'bg-indigo-500'
// hex: '#6366F1'

로드맵

Q1 2026

DataTable, CommandPalette, DatePicker 출시

Q2 2026

Chart, FileUpload, RichTextEditor

Q3 2026

KanbanBoard, Scheduler, Dashboard 위젯

Q4 2026

전체 컴포넌트 완성 및 v1.0 출시

@hua-labs/ui-advancedPro