From 0644bfa3db44eae9947a50a794b70935216e0e85 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Thu, 24 Feb 2022 23:30:34 +0100
Subject: [PATCH] Fix react imports grouping sort

---
 .eslintrc                                                    | 2 +-
 examples/channel/index.tsx                                   | 5 +++--
 examples/community/index.tsx                                 | 5 +++--
 package.json                                                 | 1 +
 .../status-react/src/components/Modals/AgreementModal.tsx    | 2 +-
 packages/status-react/src/components/Modals/ConnectModal.tsx | 3 ++-
 packages/status-react/src/components/Modals/StatusModal.tsx  | 2 +-
 7 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index f557058f..b6e99f82 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -45,7 +45,7 @@
           // Side effect imports.
           ["^\\u0000"],
           // `react` related packages come first.
-          ["react"],
+          ["^react"],
           // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
           ["^@?\\w"],
           // Absolute imports and other imports such as Vue-style `@/foo`.
diff --git a/examples/channel/index.tsx b/examples/channel/index.tsx
index 6c608eb6..165c1524 100644
--- a/examples/channel/index.tsx
+++ b/examples/channel/index.tsx
@@ -1,6 +1,7 @@
-import React, { render } from 'react-dom'
+import React, { StrictMode } from 'react'
+import { render } from 'react-dom'
+
 import { GroupChat, lightTheme } from '@status-im/react'
-import { StrictMode } from 'react'
 
 const App = () => {
   return (
diff --git a/examples/community/index.tsx b/examples/community/index.tsx
index e85ee272..b1d272d7 100644
--- a/examples/community/index.tsx
+++ b/examples/community/index.tsx
@@ -1,6 +1,7 @@
-import React, { render } from 'react-dom'
+import React, { StrictMode } from 'react'
+import { render } from 'react-dom'
+
 import { CommunityChat, lightTheme } from '@status-im/react'
-import { StrictMode } from 'react'
 
 const App = () => {
   return (
diff --git a/package.json b/package.json
index f5ba98c0..2500a51a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "build": "wsrun -e -c -s build",
     "lint": "eslint 'packages/**/*.{ts,tsx}'",
     "lint:fix": "eslint 'packages/**/*.{ts,tsx}' --fix",
+    "lint:examples": "eslint 'examples/**/*.{ts,tsx}'",
     "format": "prettier --write .",
     "typecheck": "wsrun -e -c -s typecheck",
     "test": "wsrun -e -c -s test"
diff --git a/packages/status-react/src/components/Modals/AgreementModal.tsx b/packages/status-react/src/components/Modals/AgreementModal.tsx
index a794759b..65001b87 100644
--- a/packages/status-react/src/components/Modals/AgreementModal.tsx
+++ b/packages/status-react/src/components/Modals/AgreementModal.tsx
@@ -1,6 +1,6 @@
-import HCaptcha from '@hcaptcha/react-hcaptcha'
 import React, { useState } from 'react'
 
+import HCaptcha from '@hcaptcha/react-hcaptcha'
 import styled, { useTheme } from 'styled-components'
 
 import { useMessengerContext } from '../../contexts/messengerProvider'
diff --git a/packages/status-react/src/components/Modals/ConnectModal.tsx b/packages/status-react/src/components/Modals/ConnectModal.tsx
index ae1ac189..e2fc89b2 100644
--- a/packages/status-react/src/components/Modals/ConnectModal.tsx
+++ b/packages/status-react/src/components/Modals/ConnectModal.tsx
@@ -1,6 +1,7 @@
-import QRCode from 'qrcode.react'
 import React from 'react'
 
+import QRCode from 'qrcode.react'
+
 import { CopyInput } from '../Form/CopyInput'
 import { Heading, MiddleSection, QRWrapper, Section, Text } from './ModalStyle'
 
diff --git a/packages/status-react/src/components/Modals/StatusModal.tsx b/packages/status-react/src/components/Modals/StatusModal.tsx
index 5a5d7817..27f3a8c8 100644
--- a/packages/status-react/src/components/Modals/StatusModal.tsx
+++ b/packages/status-react/src/components/Modals/StatusModal.tsx
@@ -1,6 +1,6 @@
-import QRCode from 'qrcode.react'
 import React, { useState } from 'react'
 
+import QRCode from 'qrcode.react'
 import styled from 'styled-components'
 
 import { buttonStyles } from '../Buttons/buttonStyle'