Add eslint rule and fix as many issues as possible

frontend/src/components/v2/FormControl/FormControl.stories.tsx

@@ -1,13 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
 
 // Be careful on dep cycle
-import { Input } from '../Input/Input';
-import { FormControl } from './FormControl';
+import { Input } from "../Input/Input";
+import { FormControl } from "./FormControl";
 
 const meta: Meta<typeof FormControl> = {
-  title: 'Components/FormControl',
+  title: "Components/FormControl",
   component: FormControl,
-  tags: ['v2'],
+  tags: ["v2"],
   argTypes: {}
 };
 
@@ -18,9 +18,9 @@ type Story = StoryObj<typeof FormControl>;
 export const Basic: Story = {
   args: {
     children: <Input />,
-    label: 'Email',
-    id: 'email',
-    helperText: 'Type something..'
+    label: "Email",
+    id: "email",
+    helperText: "Type something.."
   }
 };
 
@@ -34,7 +34,7 @@ export const RequiredInput: Story = {
 export const ErrorInput: Story = {
   args: {
     ...Basic.args,
-    errorText: 'Some random error',
+    errorText: "Some random error",
     isError: true
   }
 };

frontend/src/components/v2/FormControl/FormControl.tsx

@@ -1,8 +1,8 @@
-import { cloneElement, ReactNode } from 'react';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as Label from '@radix-ui/react-label';
-import { twMerge } from 'tailwind-merge';
+import { cloneElement, ReactNode } from "react";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as Label from "@radix-ui/react-label";
+import { twMerge } from "tailwind-merge";
 
 export type FormLabelProps = {
   id?: string;
@@ -25,8 +25,8 @@ export type FormHelperTextProps = {
 export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
   <div
     className={twMerge(
-      'mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90',
-      isError && 'text-red-600'
+      "mt-2 flex items-center font-inter text-xs text-mineshaft-300 opacity-90",
+      isError && "text-red-600"
     )}
   >
     {isError && (
@@ -60,13 +60,13 @@ export const FormControl = ({
   className
 }: FormControlProps): JSX.Element => {
   return (
-    <div className={twMerge('mb-4', className)}>
-      {typeof label === 'string' ? (
+    <div className={twMerge("mb-4", className)}>
+      {typeof label === "string" ? (
         <FormLabel label={label} isRequired={isRequired} id={id} />
       ) : (
         label
       )}
-      {cloneElement(children, { isRequired, 'data-required': isRequired, isError })}
+      {cloneElement(children, { isRequired, "data-required": isRequired, isError })}
       {!isError && helperText && <FormHelperText isError={isError} text={helperText} />}
       {isError && errorText && <FormHelperText isError={isError} text={errorText} />}
     </div>

frontend/src/components/v2/FormControl/index.tsx

@@ -1,2 +1,2 @@
-export type { FormControlProps, FormHelperTextProps, FormLabelProps } from './FormControl';
-export { FormControl, FormHelperText, FormLabel } from './FormControl';
+export type { FormControlProps, FormHelperTextProps, FormLabelProps } from "./FormControl";
+export { FormControl, FormHelperText, FormLabel } from "./FormControl";