fix linters

Author: wirednkod

.eslintrc.cjs

@@ -0,0 +1,45 @@
+import js from '@eslint/js'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default [
+  {
+    ignores: ['dist', 'build'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  eslintConfigPrettier,
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': [
+        'warn',
+        {
+          additionalHooks: '(useTheme)',
+        },
+      ],
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

eslint.config.mjs

@@ -12,9 +12,11 @@
     "deploy": "gh-pages -d build",
     "build:pages": "tsc && vite build --base '/dashboard/'",
     "deploy:pages": "pnpm run build:pages && gh-pages -d build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\""
+    "lint": "pnpm run lint:prettier && pnpm run lint:eslint",
+    "lint:eslint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:prettier": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+    "lint:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\"",
+    "preview": "vite preview"
   },
   "dependencies": {
     "@polkadot-api/descriptors": "file:.papi/descriptors",

package.json

@@ -22,7 +22,7 @@ const App = () => {
       <ThemeProvider defaultTheme={settings?.themeMode as Theme}>
         <AccountContextProvider>
           <TooltipProvider>
-            <div className="flex min-h-screen w-full flex-col bg-muted/40">
+            <div className="bg-muted/40 flex min-h-screen w-full flex-col">
               <Navigation
                 lightClientLoaded={lightClientLoaded}
                 setLightClientLoaded={setLightClientLoaded}

src/App.tsx

@@ -26,7 +26,7 @@ export const getLink = ({
 export const getLinks = (title: string, arrays: GetLinksType[]) => (
   <div className="divide-y divide-dashed">
     <div>
-      <h4 className="my-4 font-extrabold text-primary">{title}</h4>
+      <h4 className="text-primary my-4 font-extrabold">{title}</h4>
       {arrays.map((arr) => (
         <p className="text-[#999] underline">{getLink(arr)}</p>
       ))}
@@ -41,15 +41,15 @@ export const Resources = () => {
         <DialogTrigger asChild>
           <a
             href="#"
-            className="flex items-center gap-4 px-2.5 py-2 text-muted-foreground transition-colors hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5 py-2 transition-colors"
           >
             <NotebookText className="h-5 w-5" />
             <span className="left">Resources</span>
           </a>
         </DialogTrigger>
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle className="font-bold text-primary">
+            <DialogTitle className="text-primary font-bold">
               Resources
             </DialogTitle>
             <DialogDescription>

src/Resources.tsx

@@ -8,7 +8,7 @@ export const ThemedLink: React.FC<{
   className?: string
 }> = ({ children, to, target = '_parent', className }) => (
   <Link
-    className={`font-bold text-primary ${className}`}
+    className={`text-primary font-bold ${className}`}
     to={to}
     target={target}
   >

src/components/ThemedComponents.tsx

@@ -44,10 +44,10 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
     {...props}
   >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))
 

src/components/ui/accordion.tsx

@@ -25,7 +25,8 @@ const badgeVariants = cva(
 )
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {

src/components/ui/badge.tsx

@@ -35,7 +35,8 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }

src/components/ui/button.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-lg border bg-card text-card-foreground shadow-xs',
+      'bg-card text-card-foreground rounded-lg border shadow-xs',
       className,
     )}
     {...props}
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
+      'text-2xl leading-none font-semibold tracking-tight',
       className,
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ))