refactor(components): make form components compliant with Eslint rules

18 files changed, 57 insertions, 43 deletions

diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts
index 04602f2..04602f2 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.fixture.ts
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
index b5f8ef8..4122ed2 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { AckeeToggle } from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
diff --git a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
index f7400f3..f7f5edf 100644
--- a/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
+++ b/src/components/organisms/forms/ackee-toggle/ackee-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { AckeeToggle } from './ackee-toggle';
 import { storageKey } from './ackee-toggle.fixture';
 
@@ -8,7 +8,7 @@ describe('AckeeToggle', () => {
   it('renders a toggle component', () => {
     render(<AckeeToggle storageKey={storageKey} defaultValue="full" />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Tracking:/i,
       })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/comment-form/comment-form.stories.tsx b/src/components/organisms/forms/comment-form/comment-form.stories.tsx
index a6069e6..a521bf7 100644
--- a/src/components/organisms/forms/comment-form/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form/comment-form.stories.tsx
@@ -1,5 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { CommentForm } from './comment-form';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { CommentForm as CommentFormComponent } from './comment-form';
 
 const saveComment = async () => {
   /** Do nothing. */
@@ -10,7 +10,7 @@ const saveComment = async () => {
  */
 export default {
   title: 'Organisms/Forms',
-  component: CommentForm,
+  component: CommentFormComponent,
   args: {
     saveComment,
     titleAlignment: 'left',
@@ -111,13 +111,13 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof CommentForm>;
+} as ComponentMeta<typeof CommentFormComponent>;
 
-const Template: ComponentStory<typeof CommentForm> = (args) => (
-  <CommentForm {...args} />
+const Template: ComponentStory<typeof CommentFormComponent> = (args) => (
+  <CommentFormComponent {...args} />
 );
 
 /**
- * Forms Stories - Comment
+ * Forms Stories - Comment form
  */
-export const Comment = Template.bind({});
+export const CommentForm = Template.bind({});
diff --git a/src/components/organisms/forms/comment-form/comment-form.test.tsx b/src/components/organisms/forms/comment-form/comment-form.test.tsx
index ca02edc..88a7de9 100644
--- a/src/components/organisms/forms/comment-form/comment-form.test.tsx
+++ b/src/components/organisms/forms/comment-form/comment-form.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { CommentForm } from './comment-form';
 
 const saveComment = async () => {
@@ -10,7 +10,7 @@ const title = 'Cum voluptas voluptatibus';
 describe('CommentForm', () => {
   it('renders a form', () => {
     render(<CommentForm saveComment={saveComment} />);
-    expect(screen.getByRole('form')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('form')).toBeInTheDocument();
   });
 
   it('renders an optional title', () => {
@@ -18,7 +18,7 @@ describe('CommentForm', () => {
       <CommentForm saveComment={saveComment} title={title} titleLevel={2} />
     );
     expect(
-      screen.getByRole('heading', { level: 2, name: title })
+      rtlScreen.getByRole('heading', { level: 2, name: title })
     ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/contact-form/contact-form.stories.tsx b/src/components/organisms/forms/contact-form/contact-form.stories.tsx
index 4df3db0..962bfda 100644
--- a/src/components/organisms/forms/contact-form/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form/contact-form.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ContactForm } from './contact-form';
 
 /**
@@ -59,7 +59,8 @@ const Template: ComponentStory<typeof ContactForm> = (args) => (
  */
 export const Contact = Template.bind({});
 Contact.args = {
-  sendMail: async (_data, reset: () => void) => {
-    reset();
-  },
+  sendMail: async (_data, reset: () => void) =>
+    new Promise(() => {
+      reset();
+    }),
 };
diff --git a/src/components/organisms/forms/contact-form/contact-form.test.tsx b/src/components/organisms/forms/contact-form/contact-form.test.tsx
index d788e09..0e2685e 100644
--- a/src/components/organisms/forms/contact-form/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form/contact-form.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { ContactForm } from './contact-form';
 
 const props = {
@@ -12,38 +12,42 @@ describe('ContactForm', () => {
   it('renders a contact form', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('form', { name: 'Contact form' })
+      rtlScreen.getByRole('form', { name: 'Contact form' })
     ).toBeInTheDocument();
   });
 
   it('renders a name field', () => {
     render(<ContactForm {...props} />);
-    expect(screen.getByRole('textbox', { name: /^Name:/ })).toBeInTheDocument();
+    expect(
+      rtlScreen.getByRole('textbox', { name: /^Name:/ })
+    ).toBeInTheDocument();
   });
 
   it('renders an email field', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('textbox', { name: /^Email:/ })
+      rtlScreen.getByRole('textbox', { name: /^Email:/ })
     ).toBeInTheDocument();
   });
 
   it('renders an object field', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('textbox', { name: /^Object:/ })
+      rtlScreen.getByRole('textbox', { name: /^Object:/ })
     ).toBeInTheDocument();
   });
 
   it('renders a message field', () => {
     render(<ContactForm {...props} />);
     expect(
-      screen.getByRole('textbox', { name: /^Message:/ })
+      rtlScreen.getByRole('textbox', { name: /^Message:/ })
     ).toBeInTheDocument();
   });
 
   it('renders a submit button', () => {
     render(<ContactForm {...props} />);
-    expect(screen.getByRole('button', { name: /^Send/ })).toBeInTheDocument();
+    expect(
+      rtlScreen.getByRole('button', { name: /^Send/ })
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts
index f13658a..f13658a 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.fixture.ts
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
index 7e541db..811830b 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MotionToggle } from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
index abae299..6952f46 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { MotionToggle } from './motion-toggle';
 import { storageKey } from './motion-toggle.fixture';
 
@@ -8,7 +8,7 @@ describe('MotionToggle', () => {
   it('renders a toggle component', () => {
     render(<MotionToggle storageKey={storageKey} defaultValue="on" />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Animations:/i,
       })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
index a8ca7ce..c141bf0 100644
--- a/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
+++ b/src/components/organisms/forms/motion-toggle/motion-toggle.tsx
@@ -1,8 +1,12 @@
-import { ChangeEvent, FC } from 'react';
+import { useCallback, type FC } from 'react';
 import { useIntl } from 'react-intl';
 import { useAttributes, useLocalStorage } from '../../../../utils/hooks';
 import { Legend } from '../../../atoms';
-import { Switch, SwitchOption, SwitchProps } from '../../../molecules';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+} from '../../../molecules';
 
 export type MotionToggleValue = 'on' | 'off';
 
@@ -37,7 +41,7 @@ export const MotionToggle: FC<MotionToggleProps> = ({
   );
   useAttributes({
     element:
-      typeof window !== 'undefined' ? document.documentElement : undefined,
+      typeof window === 'undefined' ? undefined : document.documentElement,
     attribute: 'reduced-motion',
     value: `${isReduced}`,
   });
@@ -71,9 +75,9 @@ export const MotionToggle: FC<MotionToggleProps> = ({
     },
   ];
 
-  const updateSetting = (e: ChangeEvent<HTMLInputElement>) => {
+  const updateSetting = useCallback(() => {
     setIsReduced((prev) => !prev);
-  };
+  }, [setIsReduced]);
 
   return (
     <Switch
diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx
index 3c8eaba..3aeb78b 100644
--- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx
+++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { PrismThemeToggle } from './prism-theme-toggle';
 
 /**
diff --git a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx
index 7c72797..ad8658d 100644
--- a/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx
+++ b/src/components/organisms/forms/prism-theme-toggle/prism-theme-toggle.test.tsx
@@ -1,12 +1,12 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { PrismThemeToggle } from './prism-theme-toggle';
 
 describe('PrismThemeToggle', () => {
   it('renders a toggle component', () => {
     render(<PrismThemeToggle />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Code blocks:/i,
       })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index e485380..1315fde 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -49,6 +49,9 @@
 }
 
 .field {
+  min-width: 0;
+  width: 100%;
+
   &:focus-within ~ .btn {
     background: var(--color-bg);
     border-color: var(--color-primary);
diff --git a/src/components/organisms/forms/search-form/search-form.stories.tsx b/src/components/organisms/forms/search-form/search-form.stories.tsx
index c5fbeb9..971a8ee 100644
--- a/src/components/organisms/forms/search-form/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form/search-form.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { SearchForm } from './search-form';
 
 /**
diff --git a/src/components/organisms/forms/search-form/search-form.test.tsx b/src/components/organisms/forms/search-form/search-form.test.tsx
index 1af0a47..908a8eb 100644
--- a/src/components/organisms/forms/search-form/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form/search-form.test.tsx
@@ -1,17 +1,19 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { SearchForm } from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input', () => {
     render(<SearchForm searchPage="#" />);
     expect(
-      screen.getByRole('searchbox', { name: 'Search for:' })
+      rtlScreen.getByRole('searchbox', { name: 'Search for:' })
     ).toBeInTheDocument();
   });
 
   it('renders a submit button', () => {
     render(<SearchForm searchPage="#" />);
-    expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
+    expect(
+      rtlScreen.getByRole('button', { name: 'Search' })
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx
index ac228b4..bfec65e 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ThemeToggle } from './theme-toggle';
 
 /**
diff --git a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx
index 9f8e4e1..d735936 100644
--- a/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx
+++ b/src/components/organisms/forms/theme-toggle/theme-toggle.test.tsx
@@ -1,12 +1,12 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
 import { ThemeToggle } from './theme-toggle';
 
 describe('ThemeToggle', () => {
   it('renders a toggle component', () => {
     render(<ThemeToggle />);
     expect(
-      screen.getByRole('radiogroup', {
+      rtlScreen.getByRole('radiogroup', {
         name: /Theme:/i,
       })
     ).toBeInTheDocument();