From 7307e9d4a0cda867f5c04c28ee6b04df864754bb Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 26 May 2025 07:37:09 +0000
Subject: [PATCH 1/2] 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.
---
 package.json                                  |  2 +-
 src/__tests__/__snapshots__/Carousel.tsx.snap | 33 +++++++++----------
 src/components/Carousel/Arrow.tsx             | 18 ++++++++++
 src/components/Carousel/Indicator.tsx         | 26 +++++++++++++++
 src/components/Carousel/index.tsx             | 19 +++--------
 5 files changed, 65 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Carousel/Arrow.tsx
 create mode 100644 src/components/Carousel/Indicator.tsx

diff --git a/package.json b/package.json
index e24f26de..34204901 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/__snapshots__/Carousel.tsx.snap b/src/__tests__/__snapshots__/Carousel.tsx.snap
index c8bfb893..a5c7b685 100644
--- a/src/__tests__/__snapshots__/Carousel.tsx.snap
+++ b/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]}
 />
 `;
 
diff --git a/src/components/Carousel/Arrow.tsx b/src/components/Carousel/Arrow.tsx
new file mode 100644
index 00000000..ccf4ba8f
--- /dev/null
+++ b/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;
diff --git a/src/components/Carousel/Indicator.tsx b/src/components/Carousel/Indicator.tsx
new file mode 100644
index 00000000..2aa9d660
--- /dev/null
+++ b/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;
diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx
index b76eb3ed..4fbd2a53 100644
--- a/src/components/Carousel/index.tsx
+++ b/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,10 +45,10 @@ 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,
@@ -54,18 +56,7 @@ export default class Carousel extends React.Component<CarouselProps, CarouselSta
             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;

From 3c60fe4516ef1ab0be759b005d2d60f9fe317004 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 26 May 2025 07:45:41 +0000
Subject: [PATCH 2/2] 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`.
- I reverted an unintentional modification to the `scripts.format` in `package.json` back to its original state.

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.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 34204901..e24f26de 100644
--- a/package.json
+++ b/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 --write \"**/*.{js,ts,tsx,json}\"",
+        "format": "prettier \"**/*.{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",