(nextjs) added eslint and import sorting

.eslintrc.js

@@ -0,0 +1,33 @@
+module.exports = {
+  extends: ['plugin:react/recommended', 'plugin:@next/next/recommended'],
+  rules: {
+    'react/prop-types': 0,
+    'react/display-name': 0,
+    'react/react-in-jsx-scope': 0,
+    '@next/next/no-img-element': 0,
+    'import/order': [
+      'error',
+      {
+        alphabetize: { order: 'asc' },
+        'newlines-between': 'always',
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'unknown'],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'builtin',
+            position: 'before',
+          },
+          { pattern: '~/**', group: 'internal' },
+          { pattern: './**', group: 'sibling' },
+        ],
+        pathGroupsExcludedImportTypes: ['react'],
+      },
+    ],
+  },
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module',
+  },
+  plugins: ['import', 'react-hooks'],
+  parser: '@typescript-eslint/parser',
+};

package.json

@@ -78,6 +78,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.4.3",
+    "@next/eslint-plugin-next": "^12.0.8",
     "@types/classnames": "^2.2.7",
     "@types/marked": "^1.2.2",
     "@types/node": "^11.13.22",
@@ -85,6 +86,7 @@
     "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
     "craco-alias": "^2.3.1",
+    "eslint-plugin-import": "^2.25.4",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.6",
     "next-transpile-modules": "^9.0.0",

src/api/auth/index.ts

@@ -1,5 +1,3 @@
-import { api, cleanResult } from '~/utils/api';
-import { API } from '~/constants/api';
 import {
   ApiAttachSocialRequest,
   ApiAttachSocialResult,
@@ -22,6 +20,8 @@ import {
   ApiUserLoginRequest,
   ApiUserLoginResult,
 } from '~/api/auth/types';
+import { API } from '~/constants/api';
+import { api, cleanResult } from '~/utils/api';
 
 export const apiUserLogin = ({ username, password }: ApiUserLoginRequest) =>
   api

src/api/boris/index.ts

@@ -1,8 +1,9 @@
-import { API } from '~/constants/api';
-import { api, cleanResult } from '~/utils/api';
-import { IGetGithubIssuesResult, StatBackend } from '~/types/boris';
 import axios from 'axios';
 
+import { API } from '~/constants/api';
+import { IGetGithubIssuesResult, StatBackend } from '~/types/boris';
+import { api, cleanResult } from '~/utils/api';
+
 export const getBorisBackendStats = () =>
   api.get<StatBackend>(API.BORIS.GET_BACKEND_STATS).then(cleanResult);
 

src/api/flow/index.ts

@@ -1,7 +1,7 @@
-import { api, cleanResult } from '~/utils/api';
 import { API } from '~/constants/api';
-import { PostCellViewRequest, PostCellViewResult } from '~/types/node';
 import { GetSearchResultsRequest, GetSearchResultsResult } from '~/types/flow';
+import { PostCellViewRequest, PostCellViewResult } from '~/types/node';
+import { api, cleanResult } from '~/utils/api';
 
 export const postCellView = ({ id, flow }: PostCellViewRequest) =>
   api

src/api/lab/index.ts

@@ -1,4 +1,3 @@
-import { api, cleanResult } from '~/utils/api';
 import { API } from '~/constants/api';
 import {
   GetLabNodesRequest,
@@ -6,6 +5,7 @@ import {
   GetLabStatsResult,
   GetLabUpdatesResult,
 } from '~/types/lab';
+import { api, cleanResult } from '~/utils/api';
 
 export const getLabNodes = ({ after }: GetLabNodesRequest) =>
   api

src/api/messages/index.ts

@@ -1,5 +1,3 @@
-import { api, cleanResult } from '~/utils/api';
-import { API } from '~/constants/api';
 import {
   ApiDeleteMessageRequest,
   ApiDeleteMessageResult,
@@ -8,6 +6,8 @@ import {
   ApiSendMessageRequest,
   ApiSendMessageResult,
 } from '~/api/messages/types';
+import { API } from '~/constants/api';
+import { api, cleanResult } from '~/utils/api';
 
 export const apiGetUserMessages = ({ username, after, before }: ApiGetUserMessagesRequest) =>
   api

src/api/metadata/index.ts

@@ -1,6 +1,6 @@
-import { api, cleanResult } from '~/utils/api';
-import { API } from '~/constants/api';
 import { ApiGetEmbedYoutubeResult } from '~/api/metadata/types';
+import { API } from '~/constants/api';
+import { api, cleanResult } from '~/utils/api';
 
 export const apiGetEmbedYoutube = (ids: string[]) =>
   api

src/api/node/index.ts

@@ -1,7 +1,8 @@
-import { api, cleanResult } from '~/utils/api';
+import axios, { AxiosRequestConfig } from 'axios';
-import { IComment, INode } from '~/types';
+
 import { API } from '~/constants/api';
 import { COMMENTS_DISPLAY } from '~/constants/node';
+import { IComment, INode } from '~/types';
 import {
   ApiDeleteNodeTagsRequest,
   ApiDeleteNodeTagsResult,
@@ -24,7 +25,8 @@ import {
   GetNodeDiffRequest,
   GetNodeDiffResult,
 } from '~/types/node';
-import axios, { AxiosRequestConfig } from 'axios';
+import { api, cleanResult } from '~/utils/api';
+
 
 export type ApiPostNodeRequest = { node: INode };
 export type ApiPostNodeResult = {

src/api/tags/index.ts

@@ -1,4 +1,3 @@
-import { api, cleanResult } from '~/utils/api';
 import { API } from '~/constants/api';
 import {
   ApiGetNodesOfTagRequest,
@@ -6,6 +5,7 @@ import {
   ApiGetTagSuggestionsRequest,
   ApiGetTagSuggestionsResult,
 } from '~/types/tags';
+import { api, cleanResult } from '~/utils/api';
 
 export const apiGetNodesOfTag = ({ tag, offset, limit }: ApiGetNodesOfTagRequest) =>
   api

src/api/uploads/index.ts

@@ -1,8 +1,8 @@
-import { api, cleanResult } from '~/utils/api';
 
-import { API } from '~/constants/api';
 import { ApiUploadFileRequest, ApiUploadFIleResult } from '~/api/uploads/types';
+import { API } from '~/constants/api';
 import { UploadTarget, UploadType } from '~/constants/uploads';
+import { api, cleanResult } from '~/utils/api';
 
 export const apiUploadFile = ({
   file,

src/api/uploads/types.ts

@@ -1,5 +1,5 @@
-import { IFile, IUploadProgressHandler } from '~/types';
 import { UploadTarget, UploadType } from '~/constants/uploads';
+import { IFile, IUploadProgressHandler } from '~/types';
 
 export type ApiUploadFileRequest = {
   file: File;

src/components/auth/login/LoginDialogButtons/index.tsx

@@ -1,10 +1,13 @@
 import React, { FC } from 'react';
-import { Button } from '~/components/input/Button';
+
 import { Grid } from '~/components/containers/Grid';
 import { Group } from '~/components/containers/Group';
-import styles from './styles.module.scss';
+import { Button } from '~/components/input/Button';
 import { OAuthProvider } from '~/types/auth';
 
+import styles from './styles.module.scss';
+
+
 interface IProps {
   openOauthWindow: (provider: OAuthProvider) => void;
 }

src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
+
 import { Button } from '~/components/input/Button';
+
 import styles from './styles.module.scss';
 
 interface IProps {}

src/components/auth/restore/RestoreInvalidCode/index.tsx

@@ -1,9 +1,11 @@
 import React, { VFC } from 'react';
-import styles from './styles.module.scss';
+
 import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
-import { Button } from '~/components/input/Button';
+
+import styles from './styles.module.scss';
 
 interface RestoreInvalidCodeProps {
   error: string;

src/components/auth/restore/RestoreSent/index.tsx

@@ -1,8 +1,10 @@
 import React, { VFC } from 'react';
-import styles from './styles.module.scss';
+
-import { Icon } from '~/components/input/Icon';
-import { Button } from '~/components/input/Button';
 import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+
+import styles from './styles.module.scss';
 
 interface RestoreSentProps {
   onClose: () => void;

src/components/auth/restore/RestoreSuccess/index.tsx

@@ -1,7 +1,9 @@
 import React, { VFC } from 'react';
-import { Icon } from '~/components/input/Icon';
+
-import { Button } from '~/components/input/Button';
 import { Group } from '~/components/containers/Group';
+import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+
 import styles from './styles.module.scss';
 
 interface RestoreSuccessProps {

src/components/bars/PlayerBar/index.tsx

@@ -1,11 +1,14 @@
 import React, { useCallback, VFC } from 'react';
-import styles from './styles.module.scss';
+
+import { path } from 'ramda';
+
 import { Icon } from '~/components/input/Icon';
 import { PlayerState } from '~/constants/player';
-import { path } from 'ramda';
 import { IFile } from '~/types';
 import { PlayerProgress } from '~/types/player';
 
+import styles from './styles.module.scss';
+
 interface Props {
   progress: PlayerProgress;
   status: PlayerState;

src/components/bars/SubmitBar/index.tsx

@@ -1,9 +1,13 @@
 import React, { FC, useCallback, useState } from 'react';
-import { Icon } from '~/components/input/Icon';
+
 import classNames from 'classnames';
-import styles from './styles.module.scss';
+
-import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Icon } from '~/components/input/Icon';
 import { Dialog } from '~/constants/modal';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+
+import styles from './styles.module.scss';
+
 
 interface Props {
   isLab?: boolean;

src/components/boris/BorisContactItem/index.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
+
 import { Icon } from '~/components/input/Icon';
 
+import styles from './styles.module.scss';
+
 interface Props {
   icon: string;
   title: string;

src/components/boris/BorisContacts/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
+
 import { BorisContactItem } from '~/components/boris/BorisContactItem';
+
 import styles from './styles.module.scss';
 
 interface Props {}

src/components/boris/BorisSidebar/index.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
-import styles from '~/layouts/BorisLayout/styles.module.scss';
+
-import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
 import { BorisContacts } from '~/components/boris/BorisContacts';
 import { BorisStats } from '~/components/boris/BorisStats';
+import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers';
 import { Group } from '~/components/containers/Group';
+import styles from '~/layouts/BorisLayout/styles.module.scss';
 import { BorisUsageStats } from '~/types/boris';
 
 interface Props {

src/components/boris/BorisStats/index.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
+
 import { BorisUsageStats } from '~/types/boris';
-import { BorisStatsGit } from '../BorisStatsGit';
+
 import { BorisStatsBackend } from '../BorisStatsBackend';
+import { BorisStatsGit } from '../BorisStatsGit';
 
 interface IProps {
   stats: BorisUsageStats;

src/components/boris/BorisStatsBackend/index.tsx

@@ -1,9 +1,11 @@
 import React, { FC } from 'react';
-import { StatBackend } from '~/types/boris';
+
-import styles from './styles.module.scss';
-import { sizeOf } from '~/utils/dom';
 import { StatsRow } from '~/components/common/StatsRow';
 import { SubTitle } from '~/components/common/SubTitle';
+import { StatBackend } from '~/types/boris';
+import { sizeOf } from '~/utils/dom';
+
+import styles from './styles.module.scss';
 
 interface IProps {
   stats: StatBackend;

src/components/boris/BorisStatsGit/index.tsx

@@ -1,9 +1,12 @@
 import React, { FC, useMemo } from 'react';
-import { GithubIssue } from '~/types/boris';
+
-import styles from './styles.module.scss';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { GithubIssue } from '~/types/boris';
+
 import { BorisStatsGitCard } from '../BorisStatsGitCard';
 
+import styles from './styles.module.scss';
+
 interface IProps {
   issues: GithubIssue[];
   isLoading: boolean;

src/components/boris/BorisStatsGitCard/index.tsx

@@ -1,9 +1,13 @@
 import React, { FC, useMemo } from 'react';
-import styles from './styles.module.scss';
+
-import { getPrettyDate } from '~/utils/dom';
-import { GithubIssue } from '~/types/boris';
 import classNames from 'classnames';
 
+import { GithubIssue } from '~/types/boris';
+import { getPrettyDate } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+
 interface IProps {
   data: GithubIssue;
 }

src/components/boris/BorisSuperpowers/index.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
+
 import { Toggle } from '~/components/input/Toggle';
 
+import styles from './styles.module.scss';
+
 interface IProps {
   active?: boolean;
   onChange?: (val: boolean) => void;

src/components/boris/BorisUIDemo/index.tsx

@@ -1,12 +1,14 @@
 import React, { FC, useState } from 'react';
+
 import { Card } from '~/components/containers/Card';
-import styles from './styles.module.scss';
-import markdown from '~/styles/common/markdown.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
 import { InputText } from '~/components/input/InputText';
-import { useShowModal } from '~/hooks/modal/useShowModal';
 import { Dialog } from '~/constants/modal';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import markdown from '~/styles/common/markdown.module.scss';
+
+import styles from './styles.module.scss';
 
 interface IProps {}
 

src/components/boris/Superpower/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import { useAuth } from '~/hooks/auth/useAuth';
 
 interface IProps {}

src/components/comment/Comment/index.tsx

@@ -1,11 +1,18 @@
 import React, { FC, HTMLAttributes, memo } from 'react';
-import { CommentWrapper } from '~/components/containers/CommentWrapper';
+
-import { IComment, ICommentGroup, IFile } from '~/types';
-import { CommentContent } from '~/components/comment/CommentContent';
-import styles from './styles.module.scss';
-import { CommendDeleted } from '../../node/CommendDeleted';
 import classNames from 'classnames';
+
+import { CommentContent } from '~/components/comment/CommentContent';
+import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { NEW_COMMENT_CLASSNAME } from '~/constants/comment';
+import { IComment, ICommentGroup, IFile } from '~/types';
+
+import { CommendDeleted } from '../../node/CommendDeleted';
+
+import styles from './styles.module.scss';
+
+
+
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   nodeId: number;

src/components/comment/CommentAvatar/index.tsx

@@ -1,10 +1,13 @@
 import React, { FC, useCallback, useState } from 'react';
-import { IUser } from '~/types/auth';
+
-import { Avatar } from '~/components/common/Avatar';
 import { path } from 'ramda';
 import { Manager, Popper, Reference } from 'react-popper';
-import styles from './styles.module.scss';
+
+import { Avatar } from '~/components/common/Avatar';
 import { useRandomPhrase } from '~/constants/phrases';
+import { IUser } from '~/types/auth';
+
+import styles from './styles.module.scss';
 
 interface Props {
   user: IUser;

src/components/comment/CommentContent/index.tsx

@@ -1,18 +1,25 @@
 import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useState } from 'react';
-import { IComment, IFile } from '~/types';
+
-import { append, assocPath, path } from 'ramda';
-import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
-import { Group } from '~/components/containers/Group';
-import styles from './styles.module.scss';
-import { UploadType } from '~/constants/uploads';
-import reduce from 'ramda/es/reduce';
-import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
 import classNames from 'classnames';
-import { PRESETS } from '~/constants/urls';
+import { append, assocPath, path } from 'ramda';
-import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
+import reduce from 'ramda/es/reduce';
-import { CommentMenu } from '../CommentMenu';
+
 import { CommentForm } from '~/components/comment/CommentForm';
+import { Group } from '~/components/containers/Group';
+import { AudioPlayer } from '~/components/media/AudioPlayer';
+import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
+import { UploadType } from '~/constants/uploads';
+import { PRESETS } from '~/constants/urls';
+import { IComment, IFile } from '~/types';
+import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
+
+import { CommentMenu } from '../CommentMenu';
+
+import styles from './styles.module.scss';
+
+
+
 
 interface IProps {
   nodeId: number;

src/components/comment/CommentEmbedBlock/index.tsx

@@ -1,9 +1,12 @@
 import React, { FC, memo, useMemo } from 'react';
-import { ICommentBlockProps } from '~/constants/comment';
+
-import styles from './styles.module.scss';
-import { getYoutubeThumb } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
+import { ICommentBlockProps } from '~/constants/comment';
 import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata';
+import { getYoutubeThumb } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
 
 type Props = ICommentBlockProps & {};
 

src/components/comment/CommentForm/index.tsx

@@ -1,24 +1,27 @@
 import React, { FC, useCallback, useState } from 'react';
-import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
+
 import { FormikProvider } from 'formik';
-import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
-import { Button } from '~/components/input/Button';
-import { UploadSubject, UploadTarget } from '~/constants/uploads';
-import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
-import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
-import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { IComment, INode } from '~/types';
-import { EMPTY_COMMENT } from '~/constants/node';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
-import styles from './styles.module.scss';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
-import { Filler } from '~/components/containers/Filler';
-import { useUploader } from '~/hooks/data/useUploader';
-import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
 import { observer } from 'mobx-react-lite';
 
+import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
+import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
+import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
+import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { EMPTY_COMMENT } from '~/constants/node';
+import { UploadSubject, UploadTarget } from '~/constants/uploads';
+import { useCommentFormFormik } from '~/hooks/comments/useCommentFormFormik';
+import { useUploader } from '~/hooks/data/useUploader';
+import { useInputPasteUpload } from '~/hooks/dom/useInputPasteUpload';
+import { IComment, INode } from '~/types';
+import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
+
+import styles from './styles.module.scss';
+
 interface IProps {
   comment?: IComment;
   nodeId: INode['id'];

src/components/comment/CommentFormAttachButtons/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback } from 'react';
-import { ButtonGroup } from '~/components/input/ButtonGroup';
+
 import { Button } from '~/components/input/Button';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
 import { COMMENT_FILE_TYPES } from '~/constants/uploads';
 
 interface IProps {

src/components/comment/CommentFormAttaches/index.tsx

@@ -1,13 +1,16 @@
 import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
+
-import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
-import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
-import { IFile } from '~/types';
 import { SortEnd } from 'react-sortable-hoc';
-import { moveArrItem } from '~/utils/fn';
+
-import { useFileDropZone } from '~/hooks';
+import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
+import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 import { COMMENT_FILE_TYPES } from '~/constants/uploads';
+import { useFileDropZone } from '~/hooks';
+import { IFile } from '~/types';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import { moveArrItem } from '~/utils/fn';
+
+import styles from './styles.module.scss';
 
 const CommentFormAttaches: FC = () => {
   const {

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useCallback, useEffect } from 'react';
-import { ButtonGroup } from '~/components/input/ButtonGroup';
+
 import { Button } from '~/components/input/Button';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
 import { useFormatWrapper, wrapTextInsideInput } from '~/hooks/dom/useFormatWrapper';
+
 import styles from './styles.module.scss';
 
 interface IProps {

src/components/comment/CommentMenu/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useCallback, useState } from 'react';
+
 import styles from './styles.module.scss';
 
 interface IProps {

src/components/comment/CommentTextBlock/index.tsx

@@ -1,10 +1,13 @@
 import React, { FC, useMemo } from 'react';
-import { ICommentBlockProps } from '~/constants/comment';
+
-import styles from './styles.module.scss';
 import classNames from 'classnames';
+
+import { ICommentBlockProps } from '~/constants/comment';
 import markdown from '~/styles/common/markdown.module.scss';
 import { formatText } from '~/utils/dom';
 
+import styles from './styles.module.scss';
+
 interface IProps extends ICommentBlockProps {}
 
 const CommentTextBlock: FC<IProps> = ({ block }) => {

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, KeyboardEventHandler, TextareaHTMLAttributes, useCallback } from 'react';
+
 import { Textarea } from '~/components/input/Textarea';
-import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
 import { useRandomPhrase } from '~/constants/phrases';
+import { useCommentFormContext } from '~/hooks/comments/useCommentFormFormik';
 
 interface IProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   isLoading?: boolean;

src/components/common/Anchor/index.tsx

@@ -1,9 +1,11 @@
 import React, { VFC } from 'react';
-import { LinkProps } from '~/utils/types';
+
-import { CONFIG } from '~/utils/config';
 import NextLink from 'next/link';
 import { Link } from 'react-router-dom';
 
+import { CONFIG } from '~/utils/config';
+import { LinkProps } from '~/utils/types';
+
 interface AnchorProps extends LinkProps {}
 
 const Anchor: VFC<AnchorProps> = ({ ref, href, children, ...rest }) =>

src/components/common/Avatar/index.tsx

@@ -1,11 +1,16 @@
 import React, { forwardRef, useCallback } from 'react';
-import { getURLFromString } from '~/utils/dom';
+
-import { PRESETS } from '~/constants/urls';
-import styles from './styles.module.scss';
 import classNames from 'classnames';
-import { openUserProfile } from '~/utils/user';
+
-import { DivProps } from '~/utils/types';
 import { Square } from '~/components/common/Square';
+import { PRESETS } from '~/constants/urls';
+import { getURLFromString } from '~/utils/dom';
+import { DivProps } from '~/utils/types';
+import { openUserProfile } from '~/utils/user';
+
+import styles from './styles.module.scss';
+
+
 
 interface Props extends DivProps {
   url?: string;

src/components/common/MenuDots/index.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
 import styles from '~/components/flow/FlowCell/styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { ButtonProps } from '~/utils/types';
-import classNames from 'classnames';
 
 interface Props extends ButtonProps {}
 

src/components/common/ScrollHelperBottom/index.tsx

@@ -1,9 +1,12 @@
 import React, { VFC } from 'react';
-import styles from './styles.module.scss';
+
-import { useScrollTop } from '~/hooks/dom/useScrollTop';
-import { useScrollHeight } from '~/hooks/dom/useScrollHeight';
 import classNames from 'classnames';
+
+import { useScrollHeight } from '~/hooks/dom/useScrollHeight';
 import { useScrollToBottom } from '~/hooks/dom/useScrollToBottom';
+import { useScrollTop } from '~/hooks/dom/useScrollTop';
+
+import styles from './styles.module.scss';
 
 interface ScrollHelperBottomProps {}
 

src/components/common/Square/index.tsx

@@ -1,8 +1,11 @@
 import React, { forwardRef } from 'react';
-import styles from './styles.module.scss';
+
-import { DivProps } from '~/utils/types';
 import classNames from 'classnames';
 
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
 interface SquareProps extends DivProps {
   image?: string;
   size?: number;

src/components/common/StatsRow/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
+
 import { Placeholder } from '~/components/placeholders/Placeholder';
+
 import styles from './styles.module.scss';
 
 const StatsRow: FC<{ isLoading: boolean; label: string }> = ({ isLoading, label, children }) => (

src/components/common/SubTitle/index.tsx

@@ -1,7 +1,10 @@
 import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { DivProps } from '~/utils/types';
-import classNames from 'classnames';
+
 import styles from './styles.module.scss';
 
 interface Props extends DivProps {

src/components/containers/Authorized/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import { useAuth } from '~/hooks/auth/useAuth';
 
 interface IProps {}

src/components/containers/BlurWrapper/index.tsx

@@ -1,7 +1,9 @@
 import React, { AllHTMLAttributes, FC } from 'react';
-import styles from './styles.module.scss';
+
 import classNames from 'classnames';
 
+import styles from './styles.module.scss';
+
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
 export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (

src/components/containers/Card/index.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
 
 import classNames from 'classnames';
 
+import styles from './styles.module.scss';
+
+
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
 };

src/components/containers/CellGrid/index.tsx

@@ -1,8 +1,10 @@
 import React, { FC, HTMLAttributes } from 'react';
-import styles from './styles.module.scss';
 
 import classNames from 'classnames';
 
+import styles from './styles.module.scss';
+
+
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;
   size: number;

src/components/containers/CommentWrapper/index.tsx

@@ -1,11 +1,13 @@
 import React, { FC } from 'react';
+
 import classNames from 'classnames';
+import { path } from 'ramda';
+
+import { CommentAvatar } from '~/components/comment/CommentAvatar';
+import { IUser } from '~/types/auth';
+import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
-import { IUser } from '~/types/auth';
-import { path } from 'ramda';
-import { CommentAvatar } from '~/components/comment/CommentAvatar';
-import { DivProps } from '~/utils/types';
 
 type IProps = DivProps & {
   user: IUser;

src/components/containers/CoverBackdrop/index.tsx

@@ -1,10 +1,13 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { IUser } from '~/types/auth';
+
-import styles from './styles.module.scss';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
 
+import { PRESETS } from '~/constants/urls';
+import { IUser } from '~/types/auth';
+import { getURL } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
 interface IProps {
   cover: IUser['cover'];
 }

src/components/containers/Filler/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
+
 import classNames from 'classnames';
+
 import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement>;

src/components/containers/Grid/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
+
 import classNames from 'classnames';
+
 import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {

src/components/containers/Group/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
+
 import classNames from 'classnames';
+
 import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {

src/components/containers/InfiniteScroll/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+
 import styles from './styles.module.scss';
 
 interface IProps extends HTMLAttributes<HTMLDivElement> {

src/components/containers/Markdown/index.tsx

@@ -1,7 +1,9 @@
 import React, { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
-import styles from '~/styles/common/markdown.module.scss';
+
 import classNames from 'classnames';
 
+import styles from '~/styles/common/markdown.module.scss';
+
 interface IProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
 
 const Markdown: FC<IProps> = ({ className, ...props }) => (

src/components/containers/Padder/index.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
 
 import classNames from 'classnames';
 
+import styles from './styles.module.scss';
+
+
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;
   vertical?: boolean;

src/components/containers/PageCoverProvider/index.tsx

@@ -1,9 +1,12 @@
 import React, { createContext, FC, useContext, useState } from 'react';
-import styles from './styles.module.scss';
+
 import { createPortal } from 'react-dom';
-import { getURL } from '~/utils/dom';
+
 import { PRESETS } from '~/constants/urls';
 import { IFile } from '~/types';
+import { getURL } from '~/utils/dom';
+
+import styles from './styles.module.scss';
 
 interface CoverContextValue {
   cover: IFile | null;

src/components/containers/PageCoverProvider/usePageCover.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
-import { IFile } from '~/types';
+
 import { usePageCoverContext } from '~/components/containers/PageCoverProvider/index';
+import { IFile } from '~/types';
 
 export const usePageCover = (cover?: IFile) => {
   const { setCover } = usePageCoverContext();

src/components/containers/Panel/index.tsx

@@ -1,8 +1,10 @@
 import React, { FC, HTMLAttributes } from 'react';
-import styles from './styles.module.scss';
 
 import classNames from 'classnames';
 
+import styles from './styles.module.scss';
+
+
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
   stretchy?: boolean;

src/components/containers/Sticky/index.tsx

@@ -1,4 +1,5 @@
 import React, { DetailsHTMLAttributes, FC } from 'react';
+
 import StickyBox from 'react-sticky-box';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {

src/components/containers/TagField/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, HTMLAttributes } from 'react';
+
 import styles from './styles.module.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};

src/components/dialogs/BetterScrollDialog/index.tsx

@@ -1,9 +1,12 @@
 import React, { FC, MouseEventHandler, useEffect, useRef } from 'react';
-import styles from './styles.module.scss';
+
 import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock';
+
 import { Icon } from '~/components/input/Icon';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 
+import styles from './styles.module.scss';
+
 interface IProps {
   children: React.ReactChild;
   header?: JSX.Element;

src/components/dialogs/DialogTitle/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, ReactNode } from 'react';
+
 import styles from './styles.module.scss';
 
 interface IProps {

src/components/dialogs/ModalWrapper/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC, MouseEventHandler } from 'react';
+
 import ReactDOM from 'react-dom';
+
 import styles from './styles.module.scss';
 
 type IProps = {

src/components/dialogs/Tabs/index.tsx

@@ -1,7 +1,9 @@
 import React, { createContext, FC, useContext, useMemo, useState, VFC } from 'react';
-import styles from './styles.module.scss';
+
 import classNames from 'classnames';
 
+import styles from './styles.module.scss';
+
 interface TabProps {
   items: string[];
 }

src/components/editors/AudioEditor/index.tsx

@@ -1,15 +1,20 @@
 import React, { FC, useCallback, useMemo } from 'react';
+
+import { values } from 'ramda';
+
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { UploadType } from '~/constants/uploads';
-import { ImageGrid } from '../ImageGrid';
-import { AudioGrid } from '../AudioGrid';
-import styles from './styles.module.scss';
-import { NodeEditorProps } from '~/types/node';
-import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { useNodeAudios } from '~/hooks/node/useNodeAudios';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { useNodeImages } from '~/hooks/node/useNodeImages';
+import { NodeEditorProps } from '~/types/node';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
-import { values } from 'ramda';
+
+import { AudioGrid } from '../AudioGrid';
+import { ImageGrid } from '../ImageGrid';
+
+import styles from './styles.module.scss';
+
 
 type IProps = NodeEditorProps;
 

src/components/editors/AudioGrid/index.tsx

@@ -1,12 +1,15 @@
 import React, { FC, useCallback } from 'react';
+
 import { SortEnd } from 'react-sortable-hoc';
+
+import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
+import { UploadStatus } from '~/store/uploader/UploaderStore';
 import { IFile } from '~/types';
 import { moveArrItem } from '~/utils/fn';
-import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 
 import styles from './styles.module.scss';
-import { UploadStatus } from '~/store/uploader/UploaderStore';
+
-import { useWindowSize } from '~/hooks/dom/useWindowSize';
 
 interface IProps {
   files: IFile[];

src/components/editors/EditorActionsPanel/index.tsx

@@ -1,9 +1,12 @@
 import React, { createElement, FC } from 'react';
-import styles from './styles.module.scss';
+
-import { NODE_PANEL_COMPONENTS } from '~/constants/node';
 import { has } from 'ramda';
+
+import { NODE_PANEL_COMPONENTS } from '~/constants/node';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
+import styles from './styles.module.scss';
+
 const EditorActionsPanel: FC = () => {
   const { values } = useNodeFormContext();
 

src/components/editors/EditorAudioUploadButton/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
 import { UploadType } from '~/constants/uploads';
 import { IEditorComponentProps } from '~/types/node';

src/components/editors/EditorButtons/index.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react';
-import { EditorActionsPanel } from '~/components/editors/EditorActionsPanel';
+
-import { Group } from '~/components/containers/Group';
-import { InputText } from '~/components/input/InputText';
-import { Button } from '~/components/input/Button';
-import { Padder } from '~/components/containers/Padder';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
+import { EditorActionsPanel } from '~/components/editors/EditorActionsPanel';
+import { Button } from '~/components/input/Button';
+import { InputText } from '~/components/input/InputText';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 const EditorButtons: FC = () => {
   const { values, handleChange, isSubmitting } = useNodeFormContext();

src/components/editors/EditorConfirmClose/index.tsx

@@ -1,8 +1,10 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
+
 import { Group } from '~/components/containers/Group';
 import { Button } from '~/components/input/Button';
 
+import styles from './styles.module.scss';
+
 interface IProps {
   onApprove: () => void;
   onDecline: () => void;

src/components/editors/EditorFiller/index.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
+
 import { Filler } from '~/components/containers/Filler';
 import { IEditorComponentProps } from '~/types/node';
+
 import styles from './styles.module.scss';
 
 type IProps = IEditorComponentProps & {};

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react';
+
 import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
 import { UploadType } from '~/constants/uploads';
 import { IEditorComponentProps } from '~/types/node';

src/components/editors/EditorPublicSwitch/index.tsx

@@ -1,9 +1,11 @@
 import React, { FC, useCallback } from 'react';
-import { IEditorComponentProps } from '~/types/node';
+
 import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
-import styles from './styles.module.scss';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { IEditorComponentProps } from '~/types/node';
+
+import styles from './styles.module.scss';
 
 interface IProps extends IEditorComponentProps {}
 

src/components/editors/EditorUploadButton/index.tsx

@@ -1,12 +1,14 @@
 import React, { ChangeEvent, FC, useCallback } from 'react';
-import styles from './styles.module.scss';
+
+import { Button } from '~/components/input/Button';
 import { Icon } from '~/components/input/Icon';
 import { UploadType } from '~/constants/uploads';
-import { IEditorComponentProps } from '~/types/node';
-import { getFileType } from '~/utils/uploader';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { Button } from '~/components/input/Button';
+import { IEditorComponentProps } from '~/types/node';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import { getFileType } from '~/utils/uploader';
+
+import styles from './styles.module.scss';
 
 type IProps = IEditorComponentProps & {
   accept?: string;

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -1,13 +1,15 @@
 import React, { ChangeEvent, FC, useCallback, useEffect } from 'react';
-import styles from './styles.module.scss';
+
-import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
-import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
+import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads';
 import { PRESETS } from '~/constants/urls';
-import { IEditorComponentProps } from '~/types/node';
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
-import { getFileType } from '~/utils/uploader';
 import { useUploader } from '~/hooks/data/useUploader';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { IEditorComponentProps } from '~/types/node';
+import { getURL } from '~/utils/dom';
+import { getFileType } from '~/utils/uploader';
+
+import styles from './styles.module.scss';
 
 type IProps = IEditorComponentProps & {};
 

src/components/editors/ImageEditor/index.tsx

@@ -1,11 +1,14 @@
 import React, { FC } from 'react';
-import { ImageGrid } from '~/components/editors/ImageGrid';
+
-import styles from './styles.module.scss';
-import { NodeEditorProps } from '~/types/node';
-import { UploadDropzone } from '~/components/upload/UploadDropzone';
-import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
 import { values } from 'ramda';
 
+import { ImageGrid } from '~/components/editors/ImageGrid';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { NodeEditorProps } from '~/types/node';
+import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+
+import styles from './styles.module.scss';
+
 type IProps = NodeEditorProps;
 
 const ImageEditor: FC<IProps> = () => {

src/components/editors/ImageGrid/index.tsx

@@ -1,11 +1,14 @@
 import React, { FC, useCallback } from 'react';
+
 import { SortEnd } from 'react-sortable-hoc';
-import styles from './styles.module.scss';
+
+import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
+import { UploadStatus } from '~/store/uploader/UploaderStore';
 import { IFile } from '~/types';
 import { moveArrItem } from '~/utils/fn';
-import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
+
-import { UploadStatus } from '~/store/uploader/UploaderStore';
+import styles from './styles.module.scss';
-import { useWindowSize } from '~/hooks/dom/useWindowSize';
 
 interface IProps {
   files: IFile[];

src/components/editors/SortableAudioGrid/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
+
 import { SortableContainer } from 'react-sortable-hoc';
-import { AudioUpload } from '~/components/upload/AudioUpload';
+
-import styles from './styles.module.scss';
 import { SortableAudioGridItem } from '~/components/editors/SortableAudioGridItem';
-import { IFile } from '~/types';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
+import { AudioUpload } from '~/components/upload/AudioUpload';
 import { UploadStatus } from '~/store/uploader/UploaderStore';
+import { IFile } from '~/types';
+
+import styles from './styles.module.scss';
 
 const SortableAudioGrid = SortableContainer(
   ({

src/components/editors/SortableAudioGridItem/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { SortableElement } from 'react-sortable-hoc';
 
 import styles from './styles.module.scss';

src/components/editors/SortableImageGrid/index.tsx

@@ -1,13 +1,16 @@
 import React, { useCallback } from 'react';
+
+import classNames from 'classnames';
 import { SortableContainer } from 'react-sortable-hoc';
-import { ImageUpload } from '~/components/upload/ImageUpload';
+
-import styles from './styles.module.scss';
 import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
+import { ImageUpload } from '~/components/upload/ImageUpload';
+import { PRESETS } from '~/constants/urls';
+import { UploadStatus } from '~/store/uploader/UploaderStore';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
+
-import classNames from 'classnames';
+import styles from './styles.module.scss';
-import { UploadStatus } from '~/store/uploader/UploaderStore';
 
 const SortableImageGrid = SortableContainer(
   ({

src/components/editors/SortableImageGridItem/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { SortableElement } from 'react-sortable-hoc';
 
 import styles from './styles.module.scss';

src/components/editors/TextEditor/index.tsx

@@ -1,10 +1,13 @@
 import React, { FC, useCallback } from 'react';
-import styles from './styles.module.scss';
+
-import { Textarea } from '~/components/input/Textarea';
 import { path } from 'ramda';
-import { NodeEditorProps } from '~/types/node';
+
-import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { Textarea } from '~/components/input/Textarea';
 import { useRandomPhrase } from '~/constants/phrases';
+import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { NodeEditorProps } from '~/types/node';
+
+import styles from './styles.module.scss';
 
 type IProps = NodeEditorProps & {};
 

src/components/editors/VideoEditor/index.tsx

@@ -1,11 +1,14 @@
 import React, { FC, useCallback, useMemo } from 'react';
-import styles from './styles.module.scss';
+
-import { path } from 'ramda';
-import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
-import { getYoutubeThumb } from '~/utils/dom';
+import { path } from 'ramda';
-import { NodeEditorProps } from '~/types/node';
+
+import { InputText } from '~/components/input/InputText';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { NodeEditorProps } from '~/types/node';
+import { getYoutubeThumb } from '~/utils/dom';
+
+import styles from './styles.module.scss';
 
 type IProps = NodeEditorProps & {};
 

src/components/flow/CellShade/index.tsx

@@ -1,10 +1,13 @@
 import React, { FC, useMemo } from 'react';
-import styles from './styles.module.scss';
+
-import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
-import { DivProps } from '~/utils/types';
 import classNames from 'classnames';
 import { transparentize } from 'color2k';
+
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
 import { normalizeBrightColor } from '~/utils/color';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
 
 interface Props extends DivProps {
   color?: string;

src/components/flow/FlowCell/index.tsx

@@ -1,15 +1,18 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
+
-import { CellShade } from '~/components/flow/CellShade';
-import { FlowDisplay, INode } from '~/types';
-import { FlowCellText } from '~/components/flow/FlowCellText';
 import classNames from 'classnames';
-import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
+
-import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
-import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
-import { MenuDots } from '~/components/common/MenuDots';
-import { FlowCellImage } from '~/components/flow/FlowCellImage';
 import { Anchor } from '~/components/common/Anchor';
+import { MenuDots } from '~/components/common/MenuDots';
+import { CellShade } from '~/components/flow/CellShade';
+import { FlowCellImage } from '~/components/flow/FlowCellImage';
+import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
+import { FlowCellText } from '~/components/flow/FlowCellText';
+import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
+import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
+import { FlowDisplay, INode } from '~/types';
+
+import styles from './styles.module.scss';
 
 interface Props {
   id: INode['id'];

src/components/flow/FlowCellImage/index.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import { IMGProps } from '~/utils/types';
+
-import styles from './styles.module.scss';
 import classNames from 'classnames';
 
+import { IMGProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
 interface Props extends IMGProps {
   height?: number;
 }

src/components/flow/FlowCellImageLazyLoad/index.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import LazyLoad from 'react-lazyload';
+
-import { IMGProps } from '~/utils/types';
-import styles from './styles.module.scss';
 import classNames from 'classnames';
+import LazyLoad from 'react-lazyload';
+
+import { IMGProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
 
 interface Props extends IMGProps {
   height?: number;

src/components/flow/FlowCellMenu/index.tsx

@@ -1,11 +1,14 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
+
-import { Icon } from '~/components/input/Icon';
 import classNames from 'classnames';
-import { Toggle } from '~/components/input/Toggle';
+
 import { Group } from '~/components/containers/Group';
+import { Icon } from '~/components/input/Icon';
+import { Toggle } from '~/components/input/Toggle';
 import { FlowDisplayVariant } from '~/types';
 
+import styles from './styles.module.scss';
+
 interface Props {
   onClose: () => void;
   currentView: FlowDisplayVariant;

src/components/flow/FlowCellText/index.tsx

@@ -1,9 +1,13 @@
 import React, { FC, ReactElement } from 'react';
-import { Markdown } from '~/components/containers/Markdown';
+
-import { DivProps } from '~/utils/types';
 import classNames from 'classnames';
-import styles from './styles.module.scss';
+
+import { Markdown } from '~/components/containers/Markdown';
 import { formatText } from '~/utils/dom';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
 
 interface Props extends DivProps {
   children: string;

src/components/flow/FlowGrid/index.tsx

@@ -1,13 +1,16 @@
 import React, { FC, Fragment } from 'react';
+
+import classNames from 'classnames';
+
+import { FlowCell } from '~/components/flow/FlowCell';
+import { PRESETS, URLS } from '~/constants/urls';
 import { FlowDisplay, IFlowNode, INode } from '~/types';
 import { IUser } from '~/types/auth';
-import { PRESETS, URLS } from '~/constants/urls';
-import { FlowCell } from '~/components/flow/FlowCell';
-import classNames from 'classnames';
-import styles from './styles.module.scss';
 import { getURLFromString } from '~/utils/dom';
 import { canEditNode } from '~/utils/node';
 
+import styles from './styles.module.scss';
+
 interface Props {
   nodes: IFlowNode[];
   user: Partial<IUser>;

src/components/flow/FlowRecent/index.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import { FlowRecentItem } from '../FlowRecentItem';
+
-import styles from './styles.module.scss';
 import { IFlowNode } from '~/types';
 
+import { FlowRecentItem } from '../FlowRecentItem';
+
+import styles from './styles.module.scss';
+
 interface IProps {
   recent: IFlowNode[];
   updated: IFlowNode[];

src/components/flow/FlowRecentItem/index.tsx

@@ -1,12 +1,17 @@
 import React, { FC, MouseEventHandler } from 'react';
-import { INode } from '~/types';
+
-import styles from './styles.module.scss';
-import { URLS } from '~/constants/urls';
-import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
-import { getPrettyDate } from '~/utils/dom';
 import classNames from 'classnames';
-import { Icon } from '~/components/input/Icon';
+
 import { Anchor } from '~/components/common/Anchor';
+import { Icon } from '~/components/input/Icon';
+import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
+import { URLS } from '~/constants/urls';
+import { INode } from '~/types';
+import { getPrettyDate } from '~/utils/dom';
+
+import styles from './styles.module.scss';
+
+
 
 interface IProps {
   node: Partial<INode>;

src/components/flow/FlowSearchResults/index.tsx

@@ -1,9 +1,12 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
+
-import { FlowRecentItem } from '../FlowRecentItem';
+import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { Icon } from '~/components/input/Icon';
 import { INode } from '~/types';
-import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
+
+import { FlowRecentItem } from '../FlowRecentItem';
+
+import styles from './styles.module.scss';
 
 interface IProps {
   isLoading: boolean;

src/components/flow/FlowSwiperHero/index.tsx

@@ -1,17 +1,20 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import styles from './styles.module.scss';
 
-import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
+
-import { Icon } from '~/components/input/Icon';
-import { getURLFromString } from '~/utils/dom';
-import { PRESETS, URLS } from '~/constants/urls';
-import SwiperClass from 'swiper/types/swiper-class';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
 import classNames from 'classnames';
-import { IFlowNode } from '~/types';
+import SwiperCore, { Autoplay, EffectFade, Lazy, Navigation } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperClass from 'swiper/types/swiper-class';
+
+import { Icon } from '~/components/input/Icon';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { PRESETS, URLS } from '~/constants/urls';
 import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useNavigation } from '~/hooks/navigation/useNavigation';
+import { IFlowNode } from '~/types';
+import { getURLFromString } from '~/utils/dom';
+
+import styles from './styles.module.scss';
 
 SwiperCore.use([EffectFade, Lazy, Autoplay, Navigation]);
 

src/components/input/ArcProgress/index.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from 'react';
-import styles from './styles.module.scss';
+
 import { describeArc } from '~/utils/dom';
 
+import styles from './styles.module.scss';
+
 interface IProps {
   size: number;
   progress?: number;

src/components/input/Button/index.tsx

@@ -1,9 +1,14 @@
-import classnames from 'classnames';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
-import styles from './styles.module.scss';
+
+import Tippy from '@tippy.js/react';
+import classnames from 'classnames';
+
+
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/types';
-import Tippy from '@tippy.js/react';
+
+import styles from './styles.module.scss';
+
 import 'tippy.js/dist/tippy.css';
 
 type IButtonProps = DetailedHTMLProps<