Merge pull request #13 from wp-graphql/update-linting-rules

Linting Updates

.eslintrc.json

@@ -1,77 +1,49 @@
 {
   "root": true,
-  "parser": "@babel/eslint-parser",
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
   "env": {
     "browser": true,
-    "es6": true,
-    "node": true,
-    "jest": true
+    "es2021": true,
+    "node": true
   },
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@next/next/recommended",
     "plugin:react/recommended",
-    "plugin:jest/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "next"
   ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
   "plugins": [
     "react",
-    "jest",
-    "prettier",
-    "react-hooks",
-    "@next/next"
+    "@typescript-eslint",
+    "import"
   ],
   "rules": {
-    "prettier/prettier": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
     "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off",
-    "no-console": "warn",
-    "no-debugger": "warn",
-    "no-unused-vars": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "@next/next/no-img-element": "error"
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "react/prop-types": "off"
   },
   "settings": {
     "react": {
       "version": "detect"
-    },
-    "requireConfigFile": false
-  },
-  "overrides": [
-    {
-      "files": ["*.js", "*.jsx"],
-      "parser": "@babel/eslint-parser",
-      "parserOptions": {
-        "requireConfigFile": false,
-        "babelOptions": {
-          "presets": ["@babel/preset-env", "@babel/preset-react"]
-        }
-      },
-      "rules": {
-        // ...your JavaScript-specific rules here
-      }
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint"],
-      "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended"
-      ],
-      "rules": {
-        // ...your TypeScript-specific rules here
-      }
     }
-  ]
-}
+  }
+}

components/Button.jsx

@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import clsx from 'clsx'
+import Link from 'next/link'
 
 const styles = {
   primary:

components/DocsSidebarNavigation.jsx

@@ -1,6 +1,6 @@
-import Link from 'next/link'
-import clsx from 'clsx'
 import { gql } from '@apollo/client'
+import clsx from 'clsx'
+import Link from 'next/link'
 
 DocsSidebarNavigation.fragment = gql`
   fragment DocsSidebarNavigationFragment on RootQuery {

components/FeatureTabsLeft.jsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
-import Image from 'next/image'
+import { gql } from '@apollo/client'
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
 
 import { Container } from '@/components/Container'
-import { gql } from '@apollo/client'
+
 
 const FeatureTabsLeft = (layout) => {
   const { features } = layout

components/FeatureTabsTop.jsx

@@ -1,9 +1,10 @@
-import Image from 'next/image'
+import { gql } from '@apollo/client'
 import { Tab } from '@headlessui/react'
 import clsx from 'clsx'
+import Image from 'next/image'
 
 import { Container } from '@/components/Container'
-import { gql } from '@apollo/client'
+
 
 function Feature({ feature, isActive, className, ...props }) {
   return (

components/Fence.jsx

@@ -1,5 +1,5 @@
-import { Fragment } from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Fragment } from 'react'
 
 export function Fence({ children, language }) {
   return (

components/HomepageLayoutsLayoutsFaqs.jsx

@@ -1,6 +1,7 @@
-import { Container } from '@/components/Container'
 import { gql } from '@apollo/client'
 
+import { Container } from '@/components/Container'
+
 const getColumns = (questions, numberOfColumns) => {
   let columns = []
   // start with the middle column to keep things centered

components/HomepageLayoutsLayoutsFeatures.jsx

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client'
+
 import FeatureTabsLeft from './FeatureTabsLeft'
 import FeatureTabsTop from './FeatureTabsTop'
 

components/HomepageLayoutsLayoutsHero.jsx

@@ -1,9 +1,10 @@
-import { Fragment } from 'react'
+import { gql } from '@apollo/client'
 import clsx from 'clsx'
 import Highlight, { defaultProps } from 'prism-react-renderer'
+import { Fragment } from 'react'
 
 import { Button } from '@/components/Button'
-import { gql } from '@apollo/client'
+
 
 function TrafficLightsIcon(props) {
   return (

components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx

@@ -1,11 +1,12 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { gql } from '@apollo/client'
 import clsx from 'clsx'
 import { useInView } from 'framer-motion'
+import Image from 'next/image'
 import Link from 'next/link'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { Container } from '@/components/Container'
-import Image from 'next/image'
-import { gql } from '@apollo/client'
+
 
 function FieldType({ title, uri, featuredImage, className, ...props }) {
   let animationDelay = useMemo(() => {

components/Icon.jsx

@@ -1,5 +1,5 @@
-import { useId } from 'react'
 import clsx from 'clsx'
+import { useId } from 'react'
 
 import { InstallationIcon } from '@/components/icons/InstallationIcon'
 import { LightbulbIcon } from '@/components/icons/LightbulbIcon'

components/Layout.jsx

@@ -1,14 +1,14 @@
-import { useCallback, useEffect, useState } from 'react'
-import Link from 'next/link'
+import { gql } from '@apollo/client'
+import { flatListToHierarchical } from '@faustwp/core'
 import clsx from 'clsx'
+import Link from 'next/link'
+import { useCallback, useEffect, useState } from 'react'
 
-import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
+import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Prose } from '@/components/Prose'
-import { gql } from '@apollo/client'
-import { flatListToHierarchical } from '@faustwp/core'
-import { collectHeadings } from '@/lib/utils'
 import { SiteHeader } from '@/components/SiteHeader'
+import { collectHeadings } from '@/lib/utils'
 
 Layout.fragment = gql`
   fragment LayoutFragment on RootQuery {

components/LayoutArchive.jsx

@@ -1,10 +1,13 @@
-import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
-import { Prose } from '@/components/Prose'
 import { gql } from '@apollo/client'
 import { flatListToHierarchical } from '@faustwp/core'
-import { SiteHeader } from '@/components/SiteHeader'
+
 import { PrimaryNavigation } from './PrimaryNavigation'
 
+import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
+import { Prose } from '@/components/Prose'
+import { SiteHeader } from '@/components/SiteHeader'
+
+
 LayoutArchive.fragment = gql`
   fragment LayoutArchiveFragment on RootQuery {
     ...PrimaryNavigationFragment

components/LayoutFrontPage.jsx

@@ -1,6 +1,7 @@
-import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { gql } from '@apollo/client'
 import { flatListToHierarchical } from '@faustwp/core'
+
+import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { SiteHeader } from '@/components/SiteHeader'
 
 LayoutFrontPage.fragment = gql`

components/MobileNavigation.jsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
+import { Dialog } from '@headlessui/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Dialog } from '@headlessui/react'
+import { useEffect, useState } from 'react'
 
-import { Logo } from '@/components/Logo'
 import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
+import { Logo } from '@/components/Logo'
 
 function MenuIcon(props) {
   return (

components/PrimaryNavigation.jsx

@@ -1,8 +1,7 @@
-import * as React from 'react'
-import Link from 'next/link'
 import { gql } from '@apollo/client'
+import Link from 'next/link'
+import * as React from 'react'
 
-import { cn } from '@/lib/utils'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -12,6 +11,7 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from '@/components/ui/navigation-menu'
+import { cn } from '@/lib/utils'
 
 PrimaryNavigation.fragment = gql`
   fragment PrimaryNavigationFragment on RootQuery {

components/SiteHeader.jsx

@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
-import Link from 'next/link'
 import clsx from 'clsx'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
+import { GitHubIcon } from '@/components/icons/GitHubIcon'
+import { WordPressIcon } from '@/components/icons/WordPressIcon'
 import { Logo } from '@/components/Logo'
 import { MobileNavigation } from '@/components/MobileNavigation'
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Search } from '@/components/Search'
 import { ThemeSelector } from '@/components/ThemeSelector'
-import { GitHubIcon } from '@/components/icons/GitHubIcon'
-import { WordPressIcon } from '@/components/icons/WordPressIcon'
 
 export function SiteHeader({ navigation }) {
   let [isScrolled, setIsScrolled] = useState(false)

components/ThemeSelector.jsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
 import { Listbox } from '@headlessui/react'
 import clsx from 'clsx'
+import { useEffect, useState } from 'react'
 
 const themes = [
   { name: 'Light', value: 'light', icon: LightIcon },

components/ui/badge.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

components/ui/label.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

components/ui/navigation-menu.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
 import { cva } from 'class-variance-authority'
 import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

components/ui/separator.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

components/ui/tabs.js

@@ -1,7 +1,7 @@
 'use client'
 
-import * as React from 'react'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

faust.config.js

@@ -1,7 +1,9 @@
 import { setConfig } from '@faustwp/core'
-import templates from '@/wp-templates/index.js'
+
 import possibleTypes from './possibleTypes.json'
 
+import templates from '@/wp-templates/index.js'
+
 /**
  * @type {import('@faustwp/core').FaustConfig}
  **/