@gameplan/temp-listview-web-sdk

A React component library for displaying Kanban-style task and method boards with filtering capabilities.

Features

• 📋 Kanban board with customizable columns
• 🔍 Filter by teams, levels, and boards
• 👁️ Show/hide columns
• 🎨 Drag and drop task management
• 🎯 Built with React and TypeScript
• 💅 Styled with Tailwind CSS
• 🌗 Dark mode support

Installation

npm install @gameplan/temp-listview-web-sdk
# or
yarn add @gameplan/temp-listview-web-sdk
# or
pnpm add @gameplan/temp-listview-web-sdk

Usage

Basic Example

import { ListView } from '@gameplan/temp-listview-web-sdk';
import '@gameplan/temp-listview-web-sdk/styles.css';

function App() {
  const [selectedTeamIds, setSelectedTeamIds] = useState<string[]>([]);
  const [selectedLevels, setSelectedLevels] = useState<string[]>([]);
  const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>({});

  const handleDragDrop = async (item, targetColumn, targetIndex) => {
    // Handle drag and drop logic
    console.log('Item moved:', item, 'to column:', targetColumn);
  };

  return (
    <ListView
      kanbanColumns={kanbanColumns}
      teams={teams}
      availableLevels={[1, 2, 3]}
      selectedTeamIds={selectedTeamIds}
      selectedLevels={selectedLevels}
      columnVisibility={columnVisibility}
      loading={false}
      teamsLoading={false}
      onTeamToggle={(teamId) => {
        setSelectedTeamIds(prev =>
          prev.includes(teamId) ? prev.filter(id => id !== teamId) : [...prev, teamId]
        );
      }}
      onClearTeamFilters={() => setSelectedTeamIds([])}
      onLevelToggle={(level) => {
        setSelectedLevels(prev =>
          prev.includes(level) ? prev.filter(l => l !== level) : [...prev, level]
        );
      }}
      onClearLevelFilters={() => setSelectedLevels([])}
      onToggleColumnVisibility={(columnId) => {
        setColumnVisibility(prev => ({ ...prev, [columnId]: !prev[columnId] }));
      }}
      onDragDrop={handleDragDrop}
    />
  );
}

Props

ListView Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | kanbanColumns | KanbanColumn[] | Yes | Array of kanban columns with items | | teams | Team[] | Yes | List of teams for filtering | | boards | Board[] | No | List of boards for filtering (when showAllBoards is true) | | availableLevels | number[] | Yes | Available task levels for filtering | | selectedTeamIds | string[] | Yes | Currently selected team IDs | | selectedLevels | string[] | Yes | Currently selected levels | | selectedBoardIds | string[] | No | Currently selected board IDs | | columnVisibility | Record<string, boolean> | Yes | Visibility state of columns | | loading | boolean | No | General loading state | | error | string | No | Error message to display | | teamsLoading | boolean | No | Teams loading state | | boardsLoading | boolean | No | Boards loading state | | showAllBoards | boolean | No | Show board filter dropdown | | title | string | No | Title for the board | | onTeamToggle | (teamId: string) => void | Yes | Team filter toggle handler | | onClearTeamFilters | () => void | Yes | Clear team filters handler | | onLevelToggle | (level: string) => void | Yes | Level filter toggle handler | | onClearLevelFilters | () => void | Yes | Clear level filters handler | | onBoardToggle | (boardId: string) => void | No | Board filter toggle handler | | onClearBoardFilters | () => void | No | Clear board filters handler | | onToggleColumnVisibility | (columnId: string) => void | Yes | Column visibility toggle handler | | onDragDrop | (item: KanbanItem, targetColumn: string, targetIndex?: number) => Promise<void> | Yes | Drag and drop handler |

Type Definitions

interface KanbanColumn {
  id: string;
  title: string;
  items: KanbanItem[];
  isVisible: boolean;
  initials: string;
}

interface KanbanItem {
  id: string;
  title: string;
  status: TaskStatus;
  nodeId: string;
  nodeType: string;
  nodeTitle: string;
  teamId?: string;
  teamName?: string;
  itemType: 'task' | 'method';
  level?: number;
}

interface Team {
  id: string;
  name: string;
}

interface Board {
  id: string;
  name: string;
}

type TaskStatus =
  | 'POSSIBILITIES'
  | 'BACKLOG'
  | 'STARTED'
  | 'PAUSED'
  | 'BLOCKED'
  | 'REVIEW'
  | 'DONE'
  | 'VALUE_REALIZED';

Styling

The component uses Tailwind CSS. Make sure to import the styles:

import '@gameplan/temp-listview-web-sdk/styles.css';

CSS Variables

The component uses CSS custom properties for theming. You can customize these in your app:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --border: 214.3 31.8% 91.4%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... and more */
}

Peer Dependencies

This package requires the following peer dependencies:

• react: ^18.0.0 || ^19.0.0
• react-dom: ^18.0.0 || ^19.0.0
• lucide-react: >=0.263.0

License

MIT

Support

For issues and feature requests, please open an issue on GitHub.