Custom Sections Override

interface Section {
  id: string; // Unique grouping ID
  title: string; // Header text
  primaryAction?: {
    id: string;
    label: string;
    prefixIcon?: React.ReactElement;
    onClick: () => void;
  };
  badge?: {
    visible: boolean;
    skin?: 'light' | 'danger' | 'neutralLight';
  };
}

// Section Renderer Signature
type SectionRenderer = (item: any) => Section;

{
  "type": "collectionPage",
  "collectionPage": {
    "components": [
      {
        "layout": [
          {
            "type": "Table",
            "table": {
              "sections": {
                "id": "groupByType" // Matches override key
              }
            }
          }
        ]
      }
    ]
  }
}

// components/sections/groupByType.ts
import { Section } from '@wix/patterns';

export function groupByType(item: any): Section {
  const type = item.type || 'other';
  return {
    id: type,
    title: type.toUpperCase(),
    badge: { visible: true, skin: 'neutralLight' }
  };
}

// components/sections/index.tsx
import { groupByType } from './groupByType';
export const useSections = () => ({ groupByType });

// 1. Add import (keep all existing imports)
import { useSections } from './components/sections';

// 2. Add hook call (keep all existing hook calls)
const sections = useSections();

// 3. Add sections to PatternsWizardOverridesProvider value (keep ALL existing overrides)