Refactor: Extract Arrow and Indicator components from Carousel

This commit extracts the arrow and indicator rendering logic from the main Carousel component into dedicated `Arrow` and `Indicator` components.

- I created `src/components/Carousel/Arrow.tsx` for arrow controls.
- I created `src/components/Carousel/Indicator.tsx` for indicator dots.
- I updated `src/components/Carousel/index.tsx` to use these new components by modifying `defaultProps` for `renderArrowPrev`, `renderArrowNext`, and `renderIndicator`.

This change improves code modularity, readability, and reusability of the arrow and indicator UI elements.

All existing tests pass, and snapshots have been updated accordingly.

Author: google-labs-jules[bot]

package.json

@@ -34,7 +34,7 @@
         "storybook": "start-storybook -p 9001 -s ./src -c .storybook",
         "changelog": "auto-changelog --ignore-commit-pattern=\"(Merge pull request|Merge branch|Updating changelog|Prepare for publishing)\" --breaking-pattern \"BREAKING CHANGE:\"",
         "update-codesandbox": "cd codesandbox/default && yarn add react-responsive-carousel@latest",
-        "format": "prettier \"**/*.{js,ts,tsx,json}\"",
+        "format": "prettier --write \"**/*.{js,ts,tsx,json}\"",
         "format:check": "yarn format --check",
         "format:write": "yarn format --write",
         "test": "yarn format:check && yarn typecheck && yarn jest && yarn jest-ssr",

src/__tests__/__snapshots__/Carousel.tsx.snap

@@ -1,32 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Slider Basics Default Props methods renderArrowNext should return a button 1`] = `
-<button
-  aria-label="next"
-  className="control-arrow control-next"
-  onClick={[MockFunction]}
-  type="button"
+<Arrow
+  direction="next"
+  enabled={true}
+  label="next"
+  onClickHandler={[MockFunction]}
 />
 `;
 
 exports[`Slider Basics Default Props methods renderArrowPrev should return a button 1`] = `
-<button
-  aria-label="prev"
-  className="control-arrow control-prev"
-  onClick={[MockFunction]}
-  type="button"
+<Arrow
+  direction="prev"
+  enabled={true}
+  label="prev"
+  onClickHandler={[MockFunction]}
 />
 `;
 
 exports[`Slider Basics Default Props methods renderIndicator should return a list item 1`] = `
-<li
-  aria-label="slide 1"
-  className="dot selected"
-  onClick={[MockFunction]}
-  onKeyDown={[MockFunction]}
-  role="button"
-  tabIndex={0}
-  value={0}
+<Indicator
+  index={0}
+  isSelected={true}
+  label="slide"
+  onClickHandler={[MockFunction]}
 />
 `;
 

src/components/Carousel/Arrow.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import klass from '../../cssClasses'; // Assuming cssClasses.ts is in src/
+
+interface ArrowProps {
+    direction: 'prev' | 'next';
+    onClickHandler: () => void;
+    enabled: boolean;
+    label: string;
+}
+
+const Arrow: React.FC<ArrowProps> = ({ direction, onClickHandler, enabled, label }) => {
+    const isPrev = direction === 'prev';
+    const arrowClassName = isPrev ? klass.ARROW_PREV(!enabled) : klass.ARROW_NEXT(!enabled);
+
+    return <button type="button" aria-label={label} className={arrowClassName} onClick={onClickHandler} />;
+};
+
+export default Arrow;

src/components/Carousel/Indicator.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import klass from '../../cssClasses'; // Assuming cssClasses.ts is in src/
+
+interface IndicatorProps {
+    onClickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    isSelected: boolean;
+    index: number;
+    label: string;
+}
+
+const Indicator: React.FC<IndicatorProps> = ({ onClickHandler, isSelected, index, label }) => {
+    return (
+        <li
+            className={klass.DOT(isSelected)}
+            onClick={onClickHandler}
+            onKeyDown={onClickHandler}
+            value={index}
+            key={index}
+            role="button"
+            tabIndex={0}
+            aria-label={`${label} ${index + 1}`}
+        />
+    );
+};
+
+export default Indicator;

src/components/Carousel/index.tsx

@@ -7,6 +7,8 @@ import getDocument from '../../shims/document';
 import getWindow from '../../shims/window';
 import { noop, defaultStatusFormatter, isKeyboardEvent } from './utils';
 import { AnimationHandler, CarouselProps, CarouselState } from './types';
+import Arrow from './Arrow';
+import Indicator from './Indicator';
 import {
     slideAnimationHandler,
     slideSwipeAnimationHandler,
@@ -43,29 +45,18 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
         onSwipeMove: () => false,
         preventMovementUntilSwipeScrollTolerance: false,
         renderArrowPrev: (onClickHandler: () => void, hasPrev: boolean, label: string) => (
-            <button type="button" aria-label={label} className={klass.ARROW_PREV(!hasPrev)} onClick={onClickHandler} />
+            <Arrow direction="prev" onClickHandler={onClickHandler} enabled={hasPrev} label={label} />
         ),
         renderArrowNext: (onClickHandler: () => void, hasNext: boolean, label: string) => (
-            <button type="button" aria-label={label} className={klass.ARROW_NEXT(!hasNext)} onClick={onClickHandler} />
+            <Arrow direction="next" onClickHandler={onClickHandler} enabled={hasNext} label={label} />
         ),
         renderIndicator: (
             onClickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
             isSelected: boolean,
             index: number,
             label: string
         ) => {
-            return (
-                <li
-                    className={klass.DOT(isSelected)}
-                    onClick={onClickHandler}
-                    onKeyDown={onClickHandler}
-                    value={index}
-                    key={index}
-                    role="button"
-                    tabIndex={0}
-                    aria-label={`${label} ${index + 1}`}
-                />
-            );
+            return <Indicator onClickHandler={onClickHandler} isSelected={isSelected} index={index} label={label} />;
         },
         renderItem: (item: React.ReactNode) => {
             return item;