refactor: preview receives values from inputs

src/components/Preview/Preview.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 
 import { IconsType } from '~components/Icon/Icon.types';
 import { PreviewModeSelector } from '~components/Tabber/PreviewModeSelector/PreviewModeSelector';
@@ -25,11 +25,17 @@ const previewModeMockList = [
   },
 ];
 
+const getTargetValue = (e: ChangeEvent<HTMLInputElement>): string =>
+  e.target.value;
+
 function Preview(props: PreviewProps): ReactNode {
   return (
     <div className={scss.container}>
       <div className={scss.previewContent}>
-        <PreviewModeSelector list={previewModeMockList} />
+        <PreviewModeSelector
+          changeDevice={getTargetValue}
+          list={previewModeMockList}
+        />
       </div>
       <div>{props.children}</div>
     </div>

src/components/Tabber/PreviewModeSelector/PreviewModeSelector.spec.tsx

@@ -1,8 +1,8 @@
+import { ChangeEvent } from 'react';
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { changeDevice } from '../utils';
-
 import { IconsType } from '~components/Icon/Icon.types';
 
 import { PreviewMode } from './PreviewModeSelector.components';
@@ -13,18 +13,24 @@ describe('PreviewModeSelector', () => {
     id: 'some-id',
     name: 'some-name',
   };
+  let getTargetValue: (e: ChangeEvent<HTMLInputElement>) => string;
+
+  beforeEach(() => {
+    getTargetValue = (e: ChangeEvent<HTMLInputElement>): string =>
+      e.target.value;
+  });
 
   describe('PreviewMode', () => {
-    it('[Icon] should render the icons', () => {
-      render(<PreviewMode item={item} onSelect={changeDevice} />);
+    it('render the icons when passed', () => {
+      render(<PreviewMode item={item} onSelect={getTargetValue} />);
 
       const icon = screen.getByRole('img');
 
       expect(icon).toBeInTheDocument();
     });
 
-    it('[Icon] When clicked, it should change to checked', async () => {
-      render(<PreviewMode item={item} onSelect={changeDevice} />);
+    it('When clicked, it  change to checked', async () => {
+      render(<PreviewMode item={item} onSelect={getTargetValue} />);
 
       const inputElement = screen.getByRole('radio', { name: 'some-name' });
 
@@ -33,8 +39,8 @@ describe('PreviewModeSelector', () => {
       expect(inputElement).toBeChecked();
     });
 
-    it('[Icon] When clicked, it should change to background', async () => {
-      render(<PreviewMode item={item} onSelect={changeDevice} />);
+    it('changes the background when clicked', async () => {
+      render(<PreviewMode item={item} onSelect={getTargetValue} />);
 
       const inputElement = screen.getByRole('radio', { name: 'some-name' });
 

src/components/Tabber/PreviewModeSelector/PreviewModeSelector.stories.tsx

@@ -1,3 +1,5 @@
+import { ChangeEvent } from 'react';
+
 import { Story } from '@ladle/react';
 
 import { IconsType } from '~components/Icon/Icon.types';
@@ -23,5 +25,8 @@ const previewModes = [
 ];
 
 export const PreviewModeSelectorStories: Story = () => (
-  <PreviewModeSelector list={previewModes} />
+  <PreviewModeSelector
+    changeDevice={(e: ChangeEvent<HTMLInputElement>) => e.target.value}
+    list={previewModes}
+  />
 );

src/components/Tabber/PreviewModeSelector/PreviewModeSelector.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { changeDevice } from '../utils';
-
 import scss from './PreviewModeSelector.module.scss';
 
 import { PreviewMode } from './PreviewModeSelector.components';
@@ -13,7 +11,7 @@ export function PreviewModeSelector(
   return (
     <div className={scss.containerPreview}>
       {props.list.map((item) => (
-        <PreviewMode item={item} key={item.id} onSelect={changeDevice} />
+        <PreviewMode item={item} key={item.id} onSelect={props.changeDevice} />
       ))}
     </div>
   );

src/components/Tabber/PreviewModeSelector/PreviewModeSelector.types.ts

@@ -14,5 +14,6 @@ export type PreviewModeProps = {
 };
 
 export type PreviewModeSelectorProps = {
+  changeDevice: (e: ChangeEvent<HTMLInputElement>) => string;
   list: PreviewMode[];
 };

src/components/Tabber/utils.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 // @ts-nocheck
-import { ChangeEvent } from 'react';
-
 import { Account } from '~services/api/accounts/accounts.types';
 import { SocialMedia } from '~services/api/social-media/social-media.types';
 import { AccountPost } from '~stores/useAccountStore';
@@ -24,11 +22,6 @@ export const createTabId = (account: Account): TabId => {
   return `${account.id}-${account.socialMediaId}`;
 };
 
-export const changeDevice = (e: ChangeEvent<HTMLInputElement>): string => {
-  const targetValuePreview = e.target.value;
-  return targetValuePreview;
-};
-
 export const accountsToTabs = (
   accounts: AccountPost[],
   socialMedias: SocialMediaState['socialMedias']