fix(linting): improve linting rules

.eslintrc

@@ -2,17 +2,22 @@
   "plugins": ["import", "simple-import-sort", "jest", "testing-library"],
   "extends": [
     "react-app",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:import/typescript"
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:storybook/recommended"
   ],
   "ignorePatterns": ["dist/"],
   "rules": {
+    "no-console": "warn",
     "no-nested-ternary": "error",
+    "react/self-closing-comp": "warn",
+    "react/button-has-type": "warn",
+    "arrow-body-style": "error",
     "jest/no-focused-tests": "error",
     "import/first": "error",
     "import/no-duplicates": "error",
     "import/namespace": "off",
+    "import/no-named-as-default": 0,
     "simple-import-sort/imports": [
       "error",
       {

package.json

@@ -93,9 +93,16 @@
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
     "date-fns": "^2.28.0",
+    "eslint": "^8.10.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.0",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jest-dom": "^4.0.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-storybook": "^0.5.7",
     "eslint-plugin-testing-library": "^5.0.5",
     "framer-motion": "4.1.17",
     "husky": "^7.0.4",

src/ui/button/components/button-base.component.tsx

@@ -1,16 +1,13 @@
-import React from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import clsx from 'clsx';
 
 import { BUTTON_BASE_VARIANTS } from '../constants';
 
-export type ButtonBasePublicProps = {
-  type?: 'button' | 'submit' | 'reset';
+export type ButtonBasePublicProps = ComponentPropsWithRef<'button'> & {
   variant?: keyof typeof BUTTON_BASE_VARIANTS;
   size?: 'sm' | 'md';
   isDisabled?: boolean;
   isLoading?: boolean;
-  children: React.ReactNode;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 type ButtonBaseProps = ButtonBasePublicProps & {
@@ -34,8 +31,7 @@ export const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>(
   ) => (
     <button
       ref={ref}
-      // eslint-disable-next-line react/button-has-type
-      type={type}
+      type={type === 'submit' ? 'submit' : 'button'}
       disabled={isLoading || isDisabled}
       className={clsx(
         'flex items-center justify-center rounded border font-bold transition',

src/ui/stack/stack.stories.tsx

@@ -45,7 +45,7 @@ export default {
 } as ComponentMeta<typeof Stack>;
 
 const Box = ({ label }: { label: string }) => (
-  <div className=" w-6 h-6 bg-slate-100 border">{label}</div>
+  <div className=" h-6 w-6 border bg-slate-100">{label}</div>
 );
 
 const Template: ComponentStory<typeof Stack> = (args) => (

src/ui/typography/typography.stories.tsx

@@ -23,7 +23,7 @@ const typographyEntries: [string, string][] = [
 export const Default: ComponentStory<typeof Typography> = () => (
   <ul className="mt-2">
     {typographyEntries.map(([variant, title]) => (
-      <li key={variant} className="py-2 flex items-center">
+      <li key={variant} className="flex items-center py-2">
         <Typography
           variant={variant as TypographyVariant}
           translationKey={title}