@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/board.d.ts

@@ -0,0 +1,107 @@
+import { type ReactNode } from 'react';
+import { type BadgeVariant } from './badge.js';
+/** `loading` shows skeleton cards, `error` a message with Try again, `unavailable` a message only. */
+export type BoardColumnStatus = 'loading' | 'error' | 'unavailable';
+export interface BoardColumn {
+    id: string;
+    title: string;
+    /** Most cards the column should hold. Over it, the header says so in words. */
+    limit?: number | undefined;
+    /** All cards in the column, such as a count from the server. Defaults to the cards in `items`. */
+    total?: number | undefined;
+    /** Leave out when the cards are ready. The other columns are not affected. */
+    status?: BoardColumnStatus | undefined;
+    /** Message for the `error` or `unavailable` status. */
+    error?: ReactNode;
+    /** Draws the title inside a Badge of this variant. */
+    tone?: BadgeVariant | undefined;
+}
+export interface BoardLane {
+    id: string;
+    title: string;
+}
+export interface BoardItem {
+    id: string;
+    columnId: string;
+    /** Needed when the board has `lanes`. Cards in an unknown lane are not shown. */
+    laneId?: string | undefined;
+    title: string;
+}
+export interface BoardLaneBy {
+    /** Text before the select. Defaults to "Lanes by". */
+    label?: string | undefined;
+    value: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    onChange: (value: string) => void;
+}
+export interface BoardNewItem {
+    title: string;
+    columnId: string;
+    laneId: string | undefined;
+}
+export interface BoardColumnText {
+    /** Shown in a ready column with no cards. Defaults to "No cards". */
+    empty?: ReactNode;
+    /** Visible text of the Show all button. Defaults to "Show all N". Its accessible name still ends with the column title. */
+    showAll?: ((total: number, column: BoardColumn) => ReactNode) | undefined;
+}
+export interface BoardCardParts {
+    /** The title, or the rename field while the card is renamed. */
+    title: ReactNode;
+    /** The actions menu button. Null when the card has no menu. */
+    menu: ReactNode;
+}
+export interface BoardProps<T extends BoardItem> {
+    columns: BoardColumn[];
+    /** Cards in each cell show in the order they have here. */
+    items: T[];
+    /** Swimlanes across every column. Leave out for a plain board. */
+    lanes?: BoardLane[] | undefined;
+    /** Gets the whole new list after a move, rename, or column delete. Without it cards do not drag or rename. */
+    onItemsChange?: ((items: T[]) => void) | undefined;
+    /** Gets the new columns after a reorder, rename, or delete. Without it columns are fixed. */
+    onColumnsChange?: ((columns: BoardColumn[]) => void) | undefined;
+    /** Shows "Add card" in every cell. The app makes the card and its id. */
+    onItemAdd?: ((item: BoardNewItem) => void) | undefined;
+    /** Shows "Add column" after the last column. */
+    onColumnAdd?: ((title: string) => void) | undefined;
+    /** Shows "Try again" on a column with `status: 'error'`. Load that column again here. */
+    onColumnRetry?: ((column: BoardColumn) => void) | undefined;
+    /** Shows "Show all N" at the foot of a column whose `total` is more than its cards in `items`. */
+    onColumnShowAll?: ((column: BoardColumn) => void) | undefined;
+    /** Replaces the column texts, such as "No rows" or "Show all 40 in table". */
+    columnText?: BoardColumnText | undefined;
+    /** Click or Enter on a card. Open your own Sheet or Dialog here. */
+    onItemOpen?: ((item: T) => void) | undefined;
+    /** Card body under the title: badges, people, dates. */
+    renderBody?: ((item: T) => ReactNode) | undefined;
+    /** Title content, such as an icon or key before the text. Screen readers still use `item.title`. */
+    renderTitle?: ((item: T) => ReactNode) | undefined;
+    /**
+     * The whole inside of a card, with no default frame. Place `parts.title` and
+     * `parts.menu` so rename and actions keep working. The board still owns
+     * drag, focus, keys, click, and selection.
+     */
+    renderCard?: ((item: T, parts: BoardCardParts) => ReactNode) | undefined;
+    /** `DropdownMenuItem`s for the card's actions menu. */
+    itemActions?: ((item: T) => ReactNode) | undefined;
+    /** Adds a search field that filters cards by title. */
+    searchable?: boolean | undefined;
+    /** Extra text search matches, such as a description or assignee. */
+    searchText?: ((item: T) => string) | undefined;
+    /** Adds a "Lanes by" select. The app regroups `lanes` and `laneId`. */
+    laneBy?: BoardLaneBy | undefined;
+    /** Accessible name of the board. Defaults to "Board". */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * A Kanban board. Columns run across, optional lanes run down, and cards sit
+ * in the cell where they meet. Cards drag to any cell, columns drag by their
+ * header, and titles rename in place. Lanes and the cards in each cell are
+ * virtualized, so thousands of cards stay fast.
+ */
+export declare function Board<T extends BoardItem>({ columns, items, lanes, onItemsChange, onColumnsChange, onItemAdd, onColumnAdd, onColumnRetry, onColumnShowAll, columnText, onItemOpen, renderBody, renderTitle, renderCard, itemActions, searchable, searchText, laneBy, label, className, }: BoardProps<T>): import("react").JSX.Element;