手順5：Carouselを移行する

grep -rn "import.*Carousel.*from.*kepler-ui-components" src/ --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js"

{
  "dependencies": {
    "@amazon-devices/vega-carousel": "~1.0.0"
  }
}

// ❌ 更新前
import { Carousel } from '@amazon-devices/kepler-ui-components';

// ✅ 更新後
import { Carousel, CarouselRenderInfo } from '@amazon-devices/vega-carousel';

// ❌ 更新前（V1）- 単純なdata配列
<Carousel
  data={items}
  keyProvider={(item, index) => `item-${item.id}`}
  renderItem={({ item, index }) => <ItemCard item={item} />}
/>

// ✅ 更新後（V2）- dataAdapterパターン
const getItem = useCallback((index: number) => {
  if (index >= 0 && index < items.length) {
    return items[index];
  }
  return undefined;
}, [items]);

const getItemCount = useCallback(() => {
  return items.length;
}, [items]);

const getItemKey = useCallback((info: CarouselRenderInfo) => {
  return `item-${info.item.id}`;
}, []);

const notifyDataError = useCallback((error: CarouselDataError) => {
  return false;
}, []);

<Carousel
  dataAdapter={{
    getItem,
    getItemCount,
    getItemKey,
    notifyDataError,
  }}
  renderItem={({ item, index }) => <ItemCard item={item} />}
/>

// ❌ 更新前（V1）- 選択の追跡にonFocusを使用
const [selectedIndex, setSelectedIndex] = useState(0);

<Carousel
  onFocus={(index) => setSelectedIndex(index)}
/>

// ✅ 更新後（V2）- onSelectionChangedを使用
const onSelectionChanged = useCallback((event: CarouselSelectionChangeEvent) => {
  const item = items[event.index];
  // ここに独自のロジックを実装
}, [items]);

<Carousel
  onSelectionChanged={onSelectionChanged}
/>

// ✅ V2 Carouselの完全な実装
import React, { useCallback } from 'react';
import { Carousel, CarouselRenderInfo, CarouselSelectionChangeEvent } from '@amazon-devices/vega-carousel';

interface MovieItem {
  id: string;
  title: string;
  thumbnail: string;
}

function MovieCarousel({ movies }: { movies: MovieItem[] }) {
  const getItem = useCallback((index: number) => {
    return index >= 0 && index < movies.length ? movies[index] : undefined;
  }, [movies]);

  const getItemCount = useCallback(() => movies.length, [movies]);

  const getItemKey = useCallback((info: CarouselRenderInfo) => {
    return `movie-${info.item.id}`;
  }, []);

  const notifyDataError = useCallback(() => false, []);

  const onSelectionChanged = useCallback((event: CarouselSelectionChangeEvent) => {
    console.log('選択された映画：', movies[event.index]?.title);
  }, [movies]);

  return (
    <Carousel
      dataAdapter={{ getItem, getItemCount, getItemKey, notifyDataError }}
      renderItem={({ item }) => <MovieCard movie={item} />}
      uniqueId="movie-carousel"
      renderedItemsCount={7}
      hasPreferredFocus={true}
      selectionStrategy="anchored"
      onSelectionChanged={onSelectionChanged}
      itemStyle={{
        itemPadding: 16,
        selectedItemScaleFactor: 1.1,
      }}
      animationDuration={{
        itemScrollDuration: 0.3,
      }}
    />
  );
}