refactor: rename DualScrollSync to DualScrollSyncBase and update exports for clarity

Author: dorixdev

lib/components/DualScrollSync/DualScrollSync.test.tsx

@@ -1,23 +1,23 @@
 import { render } from '@testing-library/react';
 
-import { DualScrollSync } from './DualScrollSync';
+import { DualScrollSyncBase } from './DualScrollSync';
 
 describe('DualScrollSync', () => {
 	it('should render children correctly', () => {
 		const { getByTestId } = render(
-			<DualScrollSync>
+			<DualScrollSyncBase>
 				<div>Test Content</div>
-			</DualScrollSync>
+			</DualScrollSyncBase>
 		);
 
 		expect(getByTestId('dual-scroll-sync')).toBeInTheDocument();
 	});
 
 	it('should render with provided id', () => {
 		const { getByTestId } = render(
-			<DualScrollSync id="custom-id">
+			<DualScrollSyncBase id="custom-id">
 				<div>Test Content</div>
-			</DualScrollSync>
+			</DualScrollSyncBase>
 		);
 
 		expect(getByTestId('custom-id')).toBeInTheDocument();
@@ -29,7 +29,7 @@ describe('DualScrollSync', () => {
 			{ label: 'Item 2', sectionKey: 's2' }
 		];
 
-		const { getByTestId } = render(<DualScrollSync items={items} id="test" />);
+		const { getByTestId } = render(<DualScrollSyncBase items={items} id="test" />);
 
 		expect(getByTestId('test-nav-id')).toBeInTheDocument();
 		expect(getByTestId('test-nav-id-item-s1')).toBeInTheDocument();
@@ -41,9 +41,9 @@ describe('DualScrollSync', () => {
 
 	it('should render children when items prop is not provided', () => {
 		const { getByTestId, getByText } = render(
-			<DualScrollSync id="test">
+			<DualScrollSyncBase id="test">
 				<h1 data-testid="child-heading">Child Heading</h1>
-			</DualScrollSync>
+			</DualScrollSyncBase>
 		);
 
 		expect(getByTestId('test')).toBeInTheDocument();

lib/components/DualScrollSync/DualScrollSync.tsx

@@ -6,14 +6,19 @@ import { DualScrollSyncContext } from '@/contexts';
 import { useScrollSyncObserver, useValidateChildren } from '@/hooks';
 
 import styles from './DualScrollSync.module.scss';
-import type { DualScrollSyncProps } from './DualScrollSync.types';
+import type { DualScrollSyncProps, DualScrollSyncType } from './DualScrollSync.types';
 import { DualScrollSyncContent } from './DualScrollSyncContent';
 import { DualScrollSyncContentSection } from './DualScrollSyncContentSection/DualScrollSyncContentSection';
 import { DualScrollSyncLabel } from './DualScrollSyncLabel/DualScrollSyncLabel';
 import { DualScrollSyncNav } from './DualScrollSyncNav';
 import { DualScrollSyncNavItem } from './DualScrollSyncNavItem';
 
-export const DualScrollSync: FC<DualScrollSyncProps> = ({ children, id, items, onItemClick }) => {
+export const DualScrollSyncBase: FC<DualScrollSyncProps> = ({
+	children,
+	id,
+	items,
+	onItemClick
+}) => {
 	const baseId = id ?? 'dual-scroll-sync';
 	const navId = `${baseId}-nav`;
 	const contentId = `${baseId}-content`;
@@ -80,4 +85,12 @@ export const DualScrollSync: FC<DualScrollSyncProps> = ({ children, id, items, o
 	);
 };
 
-DualScrollSync.displayName = 'DualScrollSync';
+DualScrollSyncBase.displayName = 'DualScrollSync';
+
+export const DualScrollSync: DualScrollSyncType = Object.assign(DualScrollSyncBase, {
+	Nav: DualScrollSyncNav,
+	NavItem: DualScrollSyncNavItem,
+	Content: DualScrollSyncContent,
+	ContentSection: DualScrollSyncContentSection,
+	Label: DualScrollSyncLabel
+});

lib/components/DualScrollSync/index.ts

@@ -1,21 +1,6 @@
-import { DualScrollSync as DualScrollSyncBase } from './DualScrollSync';
-import type { DualScrollSyncType } from './DualScrollSync.types';
-import { DualScrollSyncContent } from './DualScrollSyncContent';
-import { DualScrollSyncContentSection } from './DualScrollSyncContentSection/DualScrollSyncContentSection';
-import { DualScrollSyncLabel } from './DualScrollSyncLabel';
-import { DualScrollSyncNav } from './DualScrollSyncNav';
-import { DualScrollSyncNavItem } from './DualScrollSyncNavItem';
-
+export { DualScrollSync } from './DualScrollSync';
 export type { DualScrollSyncItem, DualScrollSyncProps } from './DualScrollSync.types';
 export type * from './DualScrollSyncContent';
 export type * from './DualScrollSyncContentSection';
 export type * from './DualScrollSyncNav';
 export type * from './DualScrollSyncNavItem';
-
-export const DualScrollSync: DualScrollSyncType = Object.assign(DualScrollSyncBase, {
-	Nav: DualScrollSyncNav,
-	NavItem: DualScrollSyncNavItem,
-	Content: DualScrollSyncContent,
-	ContentSection: DualScrollSyncContentSection,
-	Label: DualScrollSyncLabel
-});