feat(spindle-hooks): add useCarousel hooks

packages/spindle-hooks/src/index.ts

@@ -0,0 +1 @@
+export { useCarousel } from './useCarousel';

packages/spindle-hooks/src/useCarousel/index.ts

@@ -0,0 +1 @@
+export { useCarousel } from './useCarousel';

packages/spindle-hooks/src/useCarousel/useAutoSlide.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const AUTO_SLIDE_SPEED = 4000; // ms
+
+type Payload = {
+  onTimeOut: () => void;
+  shouldAutoPlaying?: boolean;
+};
+
+export function useAutoSlide({ onTimeOut, shouldAutoPlaying = true }: Payload) {
+  const [isAutoPlaying, setIsAutoPlaying] = useState(shouldAutoPlaying);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const resetTimeOut = useCallback(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }, [timeoutId]);
+
+  const activateAutoSlide = () => {
+    resetTimeOut();
+
+    const newTimeoutId = setTimeout(() => {
+      onTimeOut();
+    }, AUTO_SLIDE_SPEED);
+
+    setTimeoutId(newTimeoutId);
+  };
+
+  const resetAutoSlide = () => {
+    if (isAutoPlaying) {
+      activateAutoSlide();
+    }
+  };
+
+  const toggleAutoPlay = () => {
+    resetTimeOut();
+
+    if (!isAutoPlaying) {
+      activateAutoSlide();
+    }
+    setIsAutoPlaying((prev) => !prev);
+  };
+
+  useEffect(() => {
+    if (shouldAutoPlaying) {
+      activateAutoSlide();
+    }
+  }, []);
+
+  return {
+    isAutoPlaying,
+    setIsAutoPlaying,
+    resetAutoSlide,
+    resetTimeOut,
+    toggleAutoPlay,
+  };
+}