HUA Docs - The Syntax of Emotion

v1.1.0

Pro

bash

npm install @hua-labs/hua

tsx

import { KanbanBoard } from "@hua-labs/ui/advanced/dashboard";


`columns`	`KanbanColumn[]`	-	docs:components.kanbanBoard.props.columns
`cards`	`KanbanCard[]`	-	docs:components.kanbanBoard.props.cards
`defaultColumns`	`KanbanColumn[]`	-	docs:components.kanbanBoard.props.defaultColumns
`defaultCards`	`KanbanCard[]`	-	docs:components.kanbanBoard.props.defaultCards
`onColumnsChange`	`(columns: KanbanColumn[]) => void`	-	docs:components.kanbanBoard.props.onColumnsChange
`onCardsChange`	`(cards: KanbanCard[]) => void`	-	docs:components.kanbanBoard.props.onCardsChange
`onCardMove`	`(event: KanbanCardMoveEvent) => void`	-	docs:components.kanbanBoard.props.onCardMove
`variant`	`"default" \| "gradient" \| "outline" \| "elevated"`	`"elevated"`	docs:components.kanbanBoard.props.variant
`allowAddColumn`	`boolean`	`false`	docs:components.kanbanBoard.props.allowAddColumn
`allowAddCard`	`boolean`	`true`	docs:components.kanbanBoard.props.allowAddCard
`allowColumnDrag`	`boolean`	`true`	docs:components.kanbanBoard.props.allowColumnDrag
`allowCardDrag`	`boolean`	`true`	docs:components.kanbanBoard.props.allowCardDrag
`readOnly`	`boolean`	`false`	docs:components.kanbanBoard.props.readOnly

docs:common.basicUsagetsx

import { useState } from 'react';
import { KanbanBoard } from '@hua-labs/ui/advanced/dashboard';

function ProjectBoard() {
  const [columns, setColumns] = useState([
    { id: 'todo', title: '할 일', color: 'blue' },
    { id: 'doing', title: '진행 중', color: 'orange', limit: 3 },
    { id: 'done', title: '완료', color: 'green' },
  ]);

  const [cards, setCards] = useState([
    { id: '1', columnId: 'todo', title: 'UI 디자인', priority: 'high' },
    { id: '2', columnId: 'doing', title: 'API 개발', priority: 'medium' },
  ]);

  return (
    <KanbanBoard
      columns={columns}
      cards={cards}
      onColumnsChange={setColumns}
      onCardsChange={setCards}
      allowAddColumn
      allowAddCard
    />
  );
}

docs:components.kanbanBoard.demo.cardTypestsx

interface KanbanCard {
  id: string;           // 고유 ID
  columnId: string;     // 소속 컬럼 ID
  title: string;        // 카드 제목
  description?: string; // 설명
  priority?: 'low' | 'medium' | 'high' | 'urgent';
  tags?: string[];      // 태그
  assignee?: {          // 담당자
    name: string;
    avatar?: string;
  };
  dueDate?: Date | string; // 마감일
}

docs:components.kanbanBoard.demo.handlingMoveEventstsx

<KanbanBoard
  columns={columns}
  cards={cards}
  onColumnsChange={setColumns}
  onCardsChange={setCards}
  onCardMove={(event) => {
    console.log(`Card ${event.cardId} moved`);
    console.log(`From: ${event.fromColumnId}`);
    console.log(`To: ${event.toColumnId} at index ${event.toIndex}`);

    // 서버에 동기화
    syncToServer(event);
  }}
  onColumnMove={(event) => {
    console.log(`Column ${event.columnId} moved to index ${event.toIndex}`);
  }}
/>

•docs:components.kanbanBoard.accessibility.keyboardNavigation: docs:components.kanbanBoard.accessibility.keyboardNavigationDesc
•docs:components.kanbanBoard.accessibility.ariaLabels: docs:components.kanbanBoard.accessibility.ariaLabelsDesc
•docs:common.accessibility.focusManagement: docs:components.kanbanBoard.accessibility.focusManagementDesc
•docs:components.kanbanBoard.accessibility.screenReaderSupport: docs:components.kanbanBoard.accessibility.screenReaderSupportDesc

SpotlightCardPro StatsPanelPro