shadcn-kanban-board

To build a functional Kanban board, follow the pattern demonstrated in the project's example. The implementation involves several key pieces:

1. Provider & Layout: Wrap your application or page content in KanbanBoardProvider and place the <KanbanBoard> component within your layout.
2. State Management: Use stable IDs (e.g., via createId() from @paralleldrive/cuid2) for columns and cards to ensure smooth drag-and-drop operations.
3. Loading State: Use the useJsLoaded() hook to prevent layout shift. While JS is loading, you can render a <KanbanBoardColumnSkeleton> to provide a visual placeholder.
4. Interactivity:
   • Drag & Drop: The board supports mouse and keyboard DnD (via useDndEvents()). Keyboard controls include Space/Enter to pick up/drop, Arrow keys to move, and Escape to cancel.
   • Editing: Use <Input> and <Textarea> for inline editing of column and card titles.
5. Theming: The board uses KanbanColorCircle primitives which automatically adapt to your Shadcn/UI CSS variables.

The project uses a flat configuration for ESLint with typescript-eslint, unicorn, simple-import-sort, vitest, testing-library, and playwright.

Key configuration features include:

• Type-Checked Linting: Uses tseslint.configs.recommendedTypeChecked and tseslint.configs.stylisticTypeChecked with projectService: true for deep type analysis.
• Import Sorting: Enforces strict import and export ordering via simple-import-sort.
• Prettier Integration: Uses eslint-plugin-prettier/recommended to ensure code formatting consistency.
• Testing Support:
  • Vitest: Configured for files matching app/**/*.{test,spec}.{js,ts,jsx,tsx} with type-checking enabled.
  • Testing Library: React-specific testing rules applied to src/**/*.test.{jsx,tsx}.
  • Playwright: E2E testing rules applied to playwright/**/*.e2e.ts.

import tseslint from 'typescript-eslint';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default tseslint.config(
  // ... configuration blocks
  eslintPluginPrettierRecommended,
);

The project uses Playwright for end-to-end (E2E) testing. Tests are located in the ./playwright directory and must use the .e2e.ts file extension. The configuration is optimized for both local development and CI environments, utilizing environment variables like CI and APP_URL to adjust behavior such as retries, tracing, and the base URL.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './playwright',
  testMatch: '*.e2e.ts',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: 1,
  reporter: 'html',
  use: {
    baseURL: process.env.APP_URL ?? 'http://localhost:3000',
    trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
  webServer: {
    command: process.env.CI ? 'npm run start-with-server-mocks' : 'npm run dev-with-mocks',
    port: 3000,
    reuseExistingServer: process.env.CI ? false : true,
  },
});

The following specific rules are enforced to maintain code quality and consistency across the codebase.

// TypeScript Rules
'@typescript-eslint/consistent-type-definitions': ['error', 'type'],
'@typescript-eslint/no-unused-vars': [
  'error',
  {
    args: 'all',
    argsIgnorePattern: '^_',
    caughtErrors: 'all',
    caughtErrorsIgnorePattern: '^_',
    destructuredArrayIgnorePattern: '^_',
    varsIgnorePattern: '^_',
    ignoreRestSiblings: true,
  },
],
'@typescript-eslint/consistent-type-imports': [
  'error',
  {
    prefer: 'type-imports',
    fixStyle: 'separate-type-imports',
    disallowTypeAnnotations: true,
  },
],
'@typescript-eslint/no-misused-promises': [
  'error',
  { checksVoidReturn: { attributes: false } },
],
'@typescript-eslint/only-throw-error': [
  'error',
  {
    allow: [
      { from: 'file', name: 'DataWithResponseInit' },
      { from: 'file', name: 'ErrorResponse' },
      { from: 'lib', name: 'Response' },
    ],
  },
],

// Unicorn Rules
'unicorn/better-regex': 'warn',
'unicorn/no-process-exit': 'off',
'unicorn/no-array-reduce': 'off',
'unicorn/no-array-callback-reference': 'off',
'unicorn/prevent-abbreviations': [
  'error',
  {
    replacements: { args: false, params: false, props: false, utils: false },
  },
],
'unicorn/filename-case': [
  'error',
  {
    case: 'kebabCase',
    ignore: [
      /.*\._index\.(tsx|ts)$/,
      /.*\$[A-Za-z]+Slug(\.[A-Za-z]+)*\.(tsx,ts)$/,
      /.*_\.[A-Za-z]+\.(tsx|ts)$/,
    ],
  },
],

// Import Sorting
'simple-import-sort/imports': 'error',
'simple-import-sort/exports': 'error',