Add sort imports plugin (#731)

* setup sort imports plugin

* linting

* fix preview.jsx lint issue

.prettierrc.js

@@ -1,4 +1,7 @@
 module.exports = {
   ...require('@joystream/prettier-config'),
   printWidth: 120,
+  importOrder: ['^@/(.*)$', '^./', '^[./]'],
+  experimentalBabelParserPluginsList: ['jsx', 'typescript'],
+  importOrderSeparation: true,
 }

.storybook/manager.js

@@ -1,4 +1,5 @@
 import addons from '@storybook/addons'
+
 import joystreamTheme from './theme'
 
 addons.setConfig({

.storybook/preview.jsx

@@ -1,8 +1,9 @@
-import React, { useRef } from 'react'
 import { css } from '@emotion/react'
-import { GlobalStyle } from '../src/shared/components'
+import React, { useRef } from 'react'
 import useResizeObserver from 'use-resize-observer'
 
+import { GlobalStyle } from '../src/shared/components'
+
 const wrapperStyle = css`
   padding: 10px;
   height: calc(100vh - 20px);

package.json

@@ -133,7 +133,8 @@
     "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^6.1.16",
     "@storybook/theming": "^6.1.16",
-    "@svgr/cli": "^5.5.0"
+    "@svgr/cli": "^5.5.0",
+    "@trivago/prettier-plugin-sort-imports": "^2.0.2"
   },
   "browserslist": {
     "production": [

src/App.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
 import { ApolloProvider } from '@apollo/client'
+import React from 'react'
 
 import { createApolloClient } from '@/api'
 import { ConnectionStatusProvider, OverlayManagerProvider, SnackbarProvider } from '@/hooks'
+
 import MainLayout from './MainLayout'
 
 export default function App() {

src/MainLayout.tsx

@@ -1,13 +1,15 @@
+import loadable from '@loadable/component'
 import React from 'react'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import loadable from '@loadable/component'
-import { GlobalStyle } from '@/shared/components'
+
+import { TopbarBase, StudioLoading } from '@/components'
 import { BASE_PATHS } from '@/config/routes'
-import { ViewerLayout } from './views/viewer'
+import { GlobalStyle } from '@/shared/components'
+import { routingTransitions } from '@/styles/routingTransitions'
+
 import { LegalLayout } from './views/legal'
 import { PlaygroundLayout } from './views/playground'
-import { TopbarBase, StudioLoading } from '@/components'
-import { routingTransitions } from '@/styles/routingTransitions'
+import { ViewerLayout } from './views/viewer'
 
 const LoadableStudioLayout = loadable(() => import('./views/studio/StudioLayout'), {
   fallback: (

src/api/client/cache.ts

@@ -1,6 +1,9 @@
 import { InMemoryCache } from '@apollo/client'
+import { ReadFieldFunction } from '@apollo/client/cache/core/types/common'
+import { FieldPolicy, FieldReadFunction } from '@apollo/client/cache/inmemory/policies'
 import { offsetLimitPagination, relayStylePagination } from '@apollo/client/utilities'
 import { parseISO } from 'date-fns'
+
 import {
   AllChannelFieldsFragment,
   AssetAvailability,
@@ -11,8 +14,6 @@ import {
   VideoFieldsFragment,
   VideoOrderByInput,
 } from '../queries'
-import { FieldPolicy, FieldReadFunction } from '@apollo/client/cache/inmemory/policies'
-import { ReadFieldFunction } from '@apollo/client/cache/core/types/common'
 
 const getVideoKeyArgs = (args: Record<string, GetVideosQueryVariables['where']> | null) => {
   // make sure queries asking for a specific category are separated in cache

src/api/client/executors.ts

@@ -1,7 +1,8 @@
-import { ORION_GRAPHQL_URL, QUERY_NODE_GRAPHQL_URL } from '@/config/urls'
 import { HttpLink } from '@apollo/client'
 import { linkToExecutor } from '@graphql-tools/links'
 
+import { ORION_GRAPHQL_URL, QUERY_NODE_GRAPHQL_URL } from '@/config/urls'
+
 const createExecutors = () => {
   const queryNodeLink = new HttpLink({ uri: QUERY_NODE_GRAPHQL_URL })
   const orionLink = new HttpLink({ uri: ORION_GRAPHQL_URL })

src/api/client/index.ts

@@ -1,20 +1,21 @@
 import { ApolloClient, split } from '@apollo/client'
+import { SchemaLink } from '@apollo/client/link/schema'
 import { WebSocketLink } from '@apollo/client/link/ws'
-import { wrapSchema } from '@graphql-tools/wrap'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { delegateToSchema } from '@graphql-tools/delegate'
+import { CreateProxyingResolverFn } from '@graphql-tools/delegate/types'
 import { mergeSchemas } from '@graphql-tools/merge'
+import { wrapSchema } from '@graphql-tools/wrap'
 import { buildASTSchema, GraphQLFieldResolver } from 'graphql'
-import { SchemaLink } from '@apollo/client/link/schema'
 
-import extendedQueryNodeSchema from '../schemas/extendedQueryNode.graphql'
-import orionSchema from '../schemas/orion.graphql'
+import { createExecutors } from '@/api/client/executors'
+import { QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL } from '@/config/urls'
 
 import cache from './cache'
 import { queryNodeStitchingResolvers } from './resolvers'
-import { createExecutors } from '@/api/client/executors'
-import { delegateToSchema } from '@graphql-tools/delegate'
-import { CreateProxyingResolverFn } from '@graphql-tools/delegate/types'
-import { getMainDefinition } from '@apollo/client/utilities'
-import { QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL } from '@/config/urls'
+
+import extendedQueryNodeSchema from '../schemas/extendedQueryNode.graphql'
+import orionSchema from '../schemas/orion.graphql'
 
 // we do this so that operationName is passed along with the queries
 // this is needed for our mocking backend to operate

src/api/client/resolvers.ts

@@ -1,6 +1,7 @@
-import { GraphQLSchema } from 'graphql'
 import { delegateToSchema, Transform } from '@graphql-tools/delegate'
 import type { IResolvers, ISchemaLevelResolver } from '@graphql-tools/utils'
+import { GraphQLSchema } from 'graphql'
+
 import {
   TransformOrionViewsField,
   ORION_VIEWS_QUERY_NAME,

src/api/hooks/categories.ts

@@ -1,6 +1,7 @@
-import { useGetVideoCategoriesQuery, GetVideoCategoriesQuery, GetVideoCategoriesQueryVariables } from '@/api/queries'
 import { QueryHookOptions } from '@apollo/client'
 
+import { useGetVideoCategoriesQuery, GetVideoCategoriesQuery, GetVideoCategoriesQueryVariables } from '@/api/queries'
+
 type Opts = QueryHookOptions<GetVideoCategoriesQuery>
 const useCategories = (variables?: GetVideoCategoriesQueryVariables, opts?: Opts) => {
   const { data, ...rest } = useGetVideoCategoriesQuery({ ...opts, variables })

src/api/hooks/channel.ts

@@ -1,4 +1,5 @@
 import { MutationHookOptions, QueryHookOptions } from '@apollo/client'
+
 import {
   AssetAvailability,
   FollowChannelMutation,

src/api/hooks/coverVideo.ts

@@ -1,7 +1,6 @@
 import { CoverVideo, AllChannelFieldsFragment } from '@/api/queries'
-import { MockVideo } from '@/mocking/data/mockVideos'
-
 import { mockCoverVideo } from '@/mocking/data/mockCoverVideo'
+import { MockVideo } from '@/mocking/data/mockVideos'
 
 type UseCoverVideo = () => {
   data: {

src/api/hooks/index.ts

@@ -1,5 +1,5 @@
-import useCoverVideo from './coverVideo'
 import useCategories from './categories'
+import useCoverVideo from './coverVideo'
 import useSearch from './search'
 import useVideosConnection from './videosConnection'
 

src/api/hooks/membership.ts

@@ -1,4 +1,5 @@
 import { QueryHookOptions } from '@apollo/client'
+
 import {
   GetMembershipQuery,
   useGetMembershipQuery,

src/api/hooks/queryNode.ts

@@ -1,4 +1,5 @@
 import { SubscriptionHookOptions } from '@apollo/client'
+
 import {
   GetQueryNodeStateSubscription,
   GetQueryNodeStateSubscriptionVariables,

src/api/hooks/search.ts

@@ -1,6 +1,7 @@
-import { useSearchQuery, SearchQueryVariables, SearchQuery } from '@/api/queries'
 import { QueryHookOptions } from '@apollo/client'
 
+import { useSearchQuery, SearchQueryVariables, SearchQuery } from '@/api/queries'
+
 type Opts = QueryHookOptions<SearchQuery>
 const useSearch = (variables: SearchQueryVariables, opts?: Opts) => {
   const { data, ...rest } = useSearchQuery({ ...opts, variables })

src/api/hooks/video.ts

@@ -1,3 +1,5 @@
+import { QueryHookOptions, MutationHookOptions } from '@apollo/client'
+
 import {
   useGetVideoQuery,
   useAddVideoViewMutation,
@@ -7,7 +9,6 @@ import {
   GetVideosQueryVariables,
   useGetVideosQuery,
 } from '@/api/queries'
-import { QueryHookOptions, MutationHookOptions } from '@apollo/client'
 
 type VideoOpts = QueryHookOptions<GetVideoQuery>
 export const useVideo = (id: string, opts?: VideoOpts) => {

src/api/hooks/videosConnection.ts

@@ -1,4 +1,5 @@
 import { QueryHookOptions } from '@apollo/client'
+
 import { GetVideosConnectionQuery, GetVideosConnectionQueryVariables, useGetVideosConnectionQuery } from '@/api/queries'
 
 type Opts = QueryHookOptions<GetVideosConnectionQuery>

src/api/hooks/workers.ts

@@ -1,5 +1,7 @@
-import { getRandomIntInclusive } from '@/utils/number'
 import { QueryHookOptions } from '@apollo/client'
+import { useCallback } from 'react'
+
+import { WorkerType } from '@/api/queries'
 import {
   GetWorkerQuery,
   GetWorkersQuery,
@@ -7,8 +9,7 @@ import {
   useGetWorkerQuery,
   useGetWorkersQuery,
 } from '@/api/queries/__generated__/workers.generated'
-import { WorkerType } from '@/api/queries'
-import { useCallback } from 'react'
+import { getRandomIntInclusive } from '@/utils/number'
 
 type WorkerOpts = QueryHookOptions<GetWorkerQuery>
 export const useWorker = (id: string, opts?: WorkerOpts) => {

src/api/queries/__generated__/categories.generated.tsx

@@ -1,7 +1,8 @@
-import * as Types from './baseTypes.generated'
-
 import { gql } from '@apollo/client'
 import * as Apollo from '@apollo/client'
+
+import * as Types from './baseTypes.generated'
+
 export type VideoCategoryFieldsFragment = { __typename?: 'VideoCategory'; id: string; name?: Types.Maybe<string> }
 
 export type GetVideoCategoriesQueryVariables = Types.Exact<{ [key: string]: never }>

src/api/queries/__generated__/channels.generated.tsx

@@ -1,9 +1,9 @@
-import * as Types from './baseTypes.generated'
+import { gql } from '@apollo/client'
+import * as Apollo from '@apollo/client'
 
+import * as Types from './baseTypes.generated'
 import { DataObjectFieldsFragment, DataObjectFieldsFragmentDoc } from './shared.generated'
-import { gql } from '@apollo/client'
 
-import * as Apollo from '@apollo/client'
 export type BasicChannelFieldsFragment = {
   __typename?: 'Channel'
   id: string

src/api/queries/__generated__/memberships.generated.tsx

@@ -1,9 +1,9 @@
-import * as Types from './baseTypes.generated'
+import { gql } from '@apollo/client'
+import * as Apollo from '@apollo/client'
 
+import * as Types from './baseTypes.generated'
 import { BasicChannelFieldsFragment, BasicChannelFieldsFragmentDoc } from './channels.generated'
-import { gql } from '@apollo/client'
 
-import * as Apollo from '@apollo/client'
 export type BasicMembershipFieldsFragment = {
   __typename?: 'Membership'
   id: string

src/api/queries/__generated__/queryNode.generated.tsx

@@ -1,7 +1,8 @@
-import * as Types from './baseTypes.generated'
-
 import { gql } from '@apollo/client'
 import * as Apollo from '@apollo/client'
+
+import * as Types from './baseTypes.generated'
+
 export type GetQueryNodeStateSubscriptionVariables = Types.Exact<{ [key: string]: never }>
 
 export type GetQueryNodeStateSubscription = {

src/api/queries/__generated__/search.generated.tsx

@@ -1,10 +1,10 @@
-import * as Types from './baseTypes.generated'
+import { gql } from '@apollo/client'
+import * as Apollo from '@apollo/client'
 
-import { VideoFieldsFragment, VideoFieldsFragmentDoc } from './videos.generated'
+import * as Types from './baseTypes.generated'
 import { BasicChannelFieldsFragment, BasicChannelFieldsFragmentDoc } from './channels.generated'
-import { gql } from '@apollo/client'
+import { VideoFieldsFragment, VideoFieldsFragmentDoc } from './videos.generated'
 
-import * as Apollo from '@apollo/client'
 export type SearchQueryVariables = Types.Exact<{
   text: Types.Scalars['String']
 }>

src/api/queries/__generated__/shared.generated.tsx

@@ -1,7 +1,7 @@
-import * as Types from './baseTypes.generated'
+import { gql } from '@apollo/client'
 
+import * as Types from './baseTypes.generated'
 import { BasicWorkerFieldsFragment, BasicWorkerFieldsFragmentDoc } from './workers.generated'
-import { gql } from '@apollo/client'
 
 export type DataObjectFieldsFragment = {
   __typename?: 'DataObject'

src/api/queries/__generated__/videos.generated.tsx

@@ -1,10 +1,10 @@
-import * as Types from './baseTypes.generated'
+import { gql } from '@apollo/client'
+import * as Apollo from '@apollo/client'
 
-import { DataObjectFieldsFragment, DataObjectFieldsFragmentDoc } from './shared.generated'
+import * as Types from './baseTypes.generated'
 import { BasicChannelFieldsFragment, BasicChannelFieldsFragmentDoc } from './channels.generated'
-import { gql } from '@apollo/client'
+import { DataObjectFieldsFragment, DataObjectFieldsFragmentDoc } from './shared.generated'
 
-import * as Apollo from '@apollo/client'
 export type VideoMediaMetadataFieldsFragment = {
   __typename?: 'VideoMediaMetadata'
   id: string

src/api/queries/__generated__/workers.generated.tsx

@@ -1,7 +1,8 @@
-import * as Types from './baseTypes.generated'
-
 import { gql } from '@apollo/client'
 import * as Apollo from '@apollo/client'
+
+import * as Types from './baseTypes.generated'
+
 export type BasicWorkerFieldsFragment = {
   __typename?: 'Worker'
   id: string

src/components/BackgroundPattern.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import styled from '@emotion/styled'
+import React from 'react'
 
-import { zIndex, transitions, media } from '@/shared/theme'
 import { SvgBgPattern } from '@/shared/illustrations'
+import { zIndex, transitions, media } from '@/shared/theme'
 
 const PATTERN_OFFSET = {
   SMALL: '-150px',

src/components/ChannelGallery.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
 import styled from '@emotion/styled'
+import React from 'react'
 
+import { BasicChannelFieldsFragment } from '@/api/queries'
 import { Gallery } from '@/shared/components'
-import ChannelPreview from './ChannelPreview'
 import { sizes } from '@/shared/theme'
-import { BasicChannelFieldsFragment } from '@/api/queries'
+
+import ChannelPreview from './ChannelPreview'
 
 type ChannelGalleryProps = {
   title?: string

src/components/ChannelGrid.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
 import styled from '@emotion/styled'
+import React from 'react'
 
+import { BasicChannelFieldsFragment } from '@/api/queries'
 import { Grid } from '@/shared/components'
+
 import ChannelPreview from './ChannelPreview'
-import { BasicChannelFieldsFragment } from '@/api/queries'
 
 const StyledChannelPreview = styled(ChannelPreview)`
   margin: 0 auto;

src/components/ChannelLink/ChannelLink.style.ts

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled'
-import { colors, sizes, typography } from '@/shared/theme'
-import { Placeholder } from '@/shared/components'
 import { Link } from 'react-router-dom'
 
+import { Placeholder } from '@/shared/components'
+import { colors, sizes, typography } from '@/shared/theme'
+
 type ContainerProps = {
   disabled?: boolean
 }

src/components/ChannelLink/ChannelLink.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
-import Avatar, { AvatarSize } from '@/shared/components/Avatar'
-import { absoluteRoutes } from '@/config/routes'
-import { Container, Handle, HandlePlaceholder } from './ChannelLink.style'
+
 import { useBasicChannel } from '@/api/hooks'
 import { BasicChannelFieldsFragment } from '@/api/queries'
+import { absoluteRoutes } from '@/config/routes'
 import { useAsset } from '@/hooks'
+import Avatar, { AvatarSize } from '@/shared/components/Avatar'
+
+import { Container, Handle, HandlePlaceholder } from './ChannelLink.style'
 
 type ChannelLinkProps = {
   id?: string

src/components/ChannelLink/index.ts

@@ -1,2 +1,3 @@
 import ChannelLink from './ChannelLink'
+
 export default ChannelLink

src/components/ChannelPreview.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { ChannelPreviewBase } from '@/shared/components'
+
 import { useChannel } from '@/api/hooks'
 import { useChannelVideoCount } from '@/api/hooks/channel'
 import { absoluteRoutes } from '@/config/routes'
 import { useAsset } from '@/hooks'
+import { ChannelPreviewBase } from '@/shared/components'
 
 type ChannelPreviewProps = {
   id?: string

src/components/CoverVideo/CoverVideo.style.ts

@@ -1,8 +1,10 @@
+import { css, keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 import { darken, fluidRange } from 'polished'
+
 import { Button, IconButton, Placeholder, Text } from '@/shared/components'
 import { breakpoints, colors, sizes, media } from '@/shared/theme'
-import { css, keyframes } from '@emotion/react'
+
 import ChannelLink from '../ChannelLink'
 
 const CONTENT_OVERLAP_MAP = {

src/components/CoverVideo/CoverVideo.tsx

@@ -1,4 +1,14 @@
 import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { CSSTransition } from 'react-transition-group'
+
+import { useCoverVideo } from '@/api/hooks'
+import { absoluteRoutes } from '@/config/routes'
+import { useAsset } from '@/hooks'
+import { Placeholder, VideoPlayer } from '@/shared/components'
+import { SvgPlayerPause, SvgPlayerPlay, SvgPlayerSoundOff, SvgPlayerSoundOn } from '@/shared/icons'
+import { transitions } from '@/shared/theme'
+
 import {
   Container,
   HorizontalGradientOverlay,
@@ -17,14 +27,6 @@ import {
   ControlsContainer,
   ButtonsContainer,
 } from './CoverVideo.style'
-import { CSSTransition } from 'react-transition-group'
-import { absoluteRoutes } from '@/config/routes'
-import { Placeholder, VideoPlayer } from '@/shared/components'
-import { Link } from 'react-router-dom'
-import { transitions } from '@/shared/theme'
-import { useCoverVideo } from '@/api/hooks'
-import { SvgPlayerPause, SvgPlayerPlay, SvgPlayerSoundOff, SvgPlayerSoundOn } from '@/shared/icons'
-import { useAsset } from '@/hooks'
 
 const VIDEO_PLAYBACK_DELAY = 1250
 

src/components/Dialogs/ActionDialog/ActionDialog.stories.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react'
-import ActionDialog, { ActionDialogProps } from './ActionDialog'
 import { Story, Meta } from '@storybook/react'
-import { Button } from '@/shared/components'
+import React, { useState } from 'react'
+
 import { OverlayManagerProvider } from '@/hooks/useOverlayManager'
+import { Button } from '@/shared/components'
+
+import ActionDialog, { ActionDialogProps } from './ActionDialog'
 
 export default {
   title: 'General/ActionDialog',

src/components/Dialogs/ActionDialog/ActionDialog.style.ts

@@ -1,7 +1,8 @@
-import styled from '@emotion/styled'
 import { css } from '@emotion/react'
-import { media, sizes, colors, typography } from '@/shared/theme'
+import styled from '@emotion/styled'
+
 import { Button } from '@/shared/components'
+import { media, sizes, colors, typography } from '@/shared/theme'
 
 type ButtonProps = {
   error?: boolean

src/components/Dialogs/ActionDialog/ActionDialog.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
-import BaseDialog, { BaseDialogProps } from '../BaseDialog'
+
+import { Button } from '@/shared/components'
+
 import {
   ActionsContainer,
   ButtonsContainer,
   AdditionalActionsContainer,
   StyledPrimaryButton,
 } from './ActionDialog.style'
-import { Button } from '@/shared/components'
+
+import BaseDialog, { BaseDialogProps } from '../BaseDialog'
 
 export type ActionDialogProps = {
   additionalActionsNode?: React.ReactNode

src/components/Dialogs/BaseDialog/BaseDialog.stories.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from 'react'
-import Dialog, { BaseDialogProps } from './BaseDialog'
 import { Story, Meta } from '@storybook/react'
-import { Button } from '@/shared/components'
+import React, { useState } from 'react'
+
 import { OverlayManagerProvider } from '@/hooks/useOverlayManager'
+import { Button } from '@/shared/components'
+
+import Dialog, { BaseDialogProps } from './BaseDialog'
 
 export default {
   title: 'General/BaseDialog',

src/components/Dialogs/BaseDialog/BaseDialog.style.ts

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled'
+
 import { IconButton } from '@/shared/components'
 import { colors, sizes, media, zIndex } from '@/shared/theme'
 

src/components/Dialogs/BaseDialog/BaseDialog.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect } from 'react'
-import { DialogBackDrop, StyledContainer, StyledExitButton } from './BaseDialog.style'
-import { SvgGlyphClose } from '@/shared/icons'
+import { CSSTransition } from 'react-transition-group'
+
 import Portal from '@/components/Portal'
 import { useOverlayManager } from '@/hooks'
-import { CSSTransition } from 'react-transition-group'
+import { SvgGlyphClose } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 
+import { DialogBackDrop, StyledContainer, StyledExitButton } from './BaseDialog.style'
+
 export type BaseDialogProps = {
   showDialog?: boolean
   exitButton?: boolean

src/components/Dialogs/ImageCropDialog/ImageCropDialog.stories.tsx

@@ -1,11 +1,13 @@
-import React, { useState, useRef } from 'react'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled/'
 import { Story, Meta } from '@storybook/react'
+import React, { useState, useRef } from 'react'
+
+import { OverlayManagerProvider } from '@/hooks'
+import { Avatar, Placeholder } from '@/shared/components'
 import { ImageCropData, AssetDimensions } from '@/types/cropper'
+
 import ImageCropDialog, { ImageCropDialogImperativeHandle, ImageCropDialogProps } from './ImageCropDialog'
-import { Avatar, Placeholder } from '@/shared/components'
-import { OverlayManagerProvider } from '@/hooks'
-import { css } from '@emotion/react'
-import styled from '@emotion/styled/'
 
 export default {
   title: 'General/ImageCropDialog',

src/components/Dialogs/ImageCropDialog/ImageCropDialog.style.ts

@@ -1,8 +1,10 @@
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+
 import { Placeholder, Text } from '@/shared/components'
 import Slider from '@/shared/components/Slider'
 import { colors, sizes } from '@/shared/theme'
-import { css } from '@emotion/react'
-import styled from '@emotion/styled'
+
 import ActionDialog from '../ActionDialog'
 
 export const StyledActionDialog = styled(ActionDialog)`

src/components/Dialogs/ImageCropDialog/ImageCropDialog.tsx

@@ -1,8 +1,10 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
+
 import { IconButton } from '@/shared/components'
+import { SvgGlyphPan, SvgGlyphZoomIn, SvgGlyphZoomOut } from '@/shared/icons'
 import { ImageCropData, AssetDimensions } from '@/types/cropper'
-import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
-import { ActionDialogProps } from '../ActionDialog'
-import { CropperImageType, useCropper } from './cropper'
+import { validateImage } from '@/utils/image'
+
 import {
   AlignInfo,
   AlignInfoContainer,
@@ -15,8 +17,9 @@ import {
   StyledSlider,
   ZoomControl,
 } from './ImageCropDialog.style'
-import { SvgGlyphPan, SvgGlyphZoomIn, SvgGlyphZoomOut } from '@/shared/icons'
-import { validateImage } from '@/utils/image'
+import { CropperImageType, useCropper } from './cropper'
+
+import { ActionDialogProps } from '../ActionDialog'
 
 export type ImageCropDialogProps = {
   imageType: CropperImageType

src/components/Dialogs/ImageCropDialog/cropper.ts

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react'
 import Cropper from 'cropperjs'
-import { AssetDimensions, ImageCropData } from '@/types/cropper'
 import 'cropperjs/dist/cropper.min.css'
+import { useEffect, useState } from 'react'
+
+import { AssetDimensions, ImageCropData } from '@/types/cropper'
 
 const MAX_ZOOM = 3
 

src/components/Dialogs/MessageDialog/MessageDialog.stories.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
-import MessageDialog, { MessageDialogProps } from './MessageDialog'
 import { Story, Meta } from '@storybook/react'
+import React from 'react'
+
 import { OverlayManagerProvider } from '@/hooks/useOverlayManager'
 
+import MessageDialog, { MessageDialogProps } from './MessageDialog'
+
 export default {
   title: 'General/MessageDialog',
   component: MessageDialog,

src/components/Dialogs/MessageDialog/MessageDialog.style.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
-import { colors, sizes } from '@/shared/theme'
+
 import { Text } from '@/shared/components'
+import { colors, sizes } from '@/shared/theme'
 
 export const MessageIconWrapper = styled.div`
   margin-bottom: ${sizes(4)};

src/components/Dialogs/MessageDialog/MessageDialog.tsx

@@ -1,8 +1,11 @@
 import React, { ReactNode } from 'react'
-import ActionDialog, { ActionDialogProps } from '../ActionDialog/ActionDialog'
-import { StyledTitleText, StyledDescriptionText, MessageIconWrapper } from './MessageDialog.style'
+
 import { SvgOutlineError, SvgOutlineSuccess, SvgOutlineWarning } from '@/shared/icons'
 
+import { StyledTitleText, StyledDescriptionText, MessageIconWrapper } from './MessageDialog.style'
+
+import ActionDialog, { ActionDialogProps } from '../ActionDialog/ActionDialog'
+
 type DialogVariant = 'success' | 'warning' | 'error' | 'info'
 
 export type MessageDialogProps = {

src/components/Dialogs/Multistepper/Multistepper.stories.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react'
-import Multistepper from './Multistepper'
 import { Story, Meta } from '@storybook/react'
+import React, { useState } from 'react'
+
 import { OverlayManagerProvider } from '@/hooks/useOverlayManager'
 import { Button } from '@/shared/components'
 
+import Multistepper from './Multistepper'
+
 export default {
   title: 'General/Multistepper',
   component: Multistepper,

src/components/Dialogs/Multistepper/Multistepper.style.ts

@@ -1,8 +1,10 @@
 import styled from '@emotion/styled'
-import BaseDialog from '../BaseDialog'
+
 import { Text } from '@/shared/components'
-import { colors, sizes, media, typography } from '@/shared/theme'
 import { SvgGlyphChevronRight } from '@/shared/icons'
+import { colors, sizes, media, typography } from '@/shared/theme'
+
+import BaseDialog from '../BaseDialog'
 
 type CircleProps = {
   isFilled?: boolean

src/components/Dialogs/Multistepper/Multistepper.tsx

@@ -1,5 +1,8 @@
 import React, { Fragment } from 'react'
-import { BaseDialogProps } from '../BaseDialog'
+
+import { Text } from '@/shared/components'
+import { SvgGlyphCheck } from '@/shared/icons'
+
 import {
   StyledDialog,
   StyledHeader,
@@ -10,8 +13,8 @@ import {
   StyledChevron,
   StyledStepTitle,
 } from './Multistepper.style'
-import { SvgGlyphCheck } from '@/shared/icons'
-import { Text } from '@/shared/components'
+
+import { BaseDialogProps } from '../BaseDialog'
 
 type Step = {
   title: string

src/components/Dialogs/TransactionDialog/TransactionDialog.stories.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
-import TransactionDialog, { TransactionDialogProps } from './TransactionDialog'
 import { Meta, Story } from '@storybook/react'
+import React from 'react'
+
 import { OverlayManagerProvider } from '@/hooks/useOverlayManager'
 import { ExtrinsicStatus } from '@/joystream-lib'
 
+import TransactionDialog, { TransactionDialogProps } from './TransactionDialog'
+
 export default {
   title: 'General/TransactionDialog',
   component: TransactionDialog,

src/components/Dialogs/TransactionDialog/TransactionDialog.style.ts

@@ -1,8 +1,9 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { sizes, media, colors, transitions } from '@/shared/theme'
+
 import Spinner from '@/shared/components/Spinner'
-import { css } from '@emotion/react'
 import { SvgTransactionIllustration } from '@/shared/illustrations'
+import { sizes, media, colors, transitions } from '@/shared/theme'
 
 type StepProps = {
   isActive?: boolean

src/components/Dialogs/TransactionDialog/TransactionDialog.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
-import ActionDialog, { ActionDialogProps } from '../ActionDialog/ActionDialog'
-import { TextContainer, StyledTransactionIllustration, StyledSpinner, StepsBar, Step } from './TransactionDialog.style'
-import { StyledTitleText, StyledDescriptionText } from '../MessageDialog/MessageDialog.style'
+
 import { ExtrinsicStatus } from '@/joystream-lib'
 import { Tooltip } from '@/shared/components'
 
+import { TextContainer, StyledTransactionIllustration, StyledSpinner, StepsBar, Step } from './TransactionDialog.style'
+
+import ActionDialog, { ActionDialogProps } from '../ActionDialog/ActionDialog'
+import { StyledTitleText, StyledDescriptionText } from '../MessageDialog/MessageDialog.style'
+
 export type TransactionDialogProps = Pick<ActionDialogProps, 'className'> & {
   status: ExtrinsicStatus | null
   onClose: () => void

src/components/Dialogs/index.ts

@@ -1,8 +1,8 @@
 import ActionDialog from './ActionDialog'
-import MessageDialog from './MessageDialog'
 import BaseDialog, { BaseDialogProps } from './BaseDialog'
-import Multistepper from './Multistepper'
 import ImageCropDialog, { ImageCropDialogImperativeHandle } from './ImageCropDialog'
+import MessageDialog from './MessageDialog'
+import Multistepper from './Multistepper'
 import TransactionDialog from './TransactionDialog'
 
 export { BaseDialog, ActionDialog, Multistepper, ImageCropDialog, TransactionDialog, MessageDialog }

src/components/ErrorFallback.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
-
 import styled from '@emotion/styled'
 import { FallbackRender } from '@sentry/react/dist/errorboundary'
+import React from 'react'
 
 import { Button, Text } from '@/shared/components'
 import { sizes, colors } from '@/shared/theme'

src/components/InfiniteGrids/InfiniteChannelGrid.tsx

@@ -1,9 +1,7 @@
-import React, { useCallback, useState } from 'react'
-import styled from '@emotion/styled'
 import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+import React, { useCallback, useState } from 'react'
 
-import { sizes } from '@/shared/theme'
-import { Grid, Text } from '@/shared/components'
 import {
   GetChannelsConnectionDocument,
   GetChannelsConnectionQuery,
@@ -11,6 +9,9 @@ import {
   AssetAvailability,
 } from '@/api/queries'
 import ChannelPreview from '@/components/ChannelPreview'
+import { Grid, Text } from '@/shared/components'
+import { sizes } from '@/shared/theme'
+
 import useInfiniteGrid from './useInfiniteGrid'
 
 type InfiniteChannelGridProps = {

src/components/InfiniteGrids/InfiniteVideoGrid.tsx

@@ -1,9 +1,6 @@
-import React, { useCallback, useEffect, useState } from 'react'
 import styled from '@emotion/styled'
+import React, { useCallback, useEffect, useState } from 'react'
 
-import { sizes } from '@/shared/theme'
-import { Grid, Text, Placeholder } from '@/shared/components'
-import VideoPreview from '@/components/VideoPreview'
 import {
   GetVideosConnectionDocument,
   GetVideosConnectionQuery,
@@ -11,6 +8,10 @@ import {
   VideoWhereInput,
   AssetAvailability,
 } from '@/api/queries'
+import VideoPreview from '@/components/VideoPreview'
+import { Grid, Text, Placeholder } from '@/shared/components'
+import { sizes } from '@/shared/theme'
+
 import useInfiniteGrid from './useInfiniteGrid'
 
 type InfiniteVideoGridProps = {

src/components/InfiniteGrids/index.ts

@@ -1,4 +1,4 @@
-import InfiniteVideoGrid from './InfiniteVideoGrid'
 import InfiniteChannelGrid from './InfiniteChannelGrid'
+import InfiniteVideoGrid from './InfiniteVideoGrid'
 
 export { InfiniteVideoGrid, InfiniteChannelGrid }

src/components/InfiniteGrids/useInfiniteGrid.ts

@@ -1,8 +1,8 @@
-import { useEffect } from 'react'
 import { ApolloError, useQuery } from '@apollo/client'
-import { debounce } from 'lodash'
-import { DocumentNode } from 'graphql'
 import { TypedDocumentNode } from '@graphql-typed-document-node/core'
+import { DocumentNode } from 'graphql'
+import { debounce } from 'lodash'
+import { useEffect } from 'react'
 
 type PaginatedData<T> = {
   edges: {

src/components/InterruptedVideosGallery.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { RouteComponentProps } from '@reach/router'
+import React from 'react'
 
-import { usePersonalData } from '@/hooks'
 import { VideoGallery } from '@/components'
+import { usePersonalData } from '@/hooks'
 
 const INTERRUPTED_VIDEOS_COUNT = 16
 

src/components/Link/Link.style.ts

@@ -1,5 +1,6 @@
-import { Link } from 'react-router-dom'
 import styled from '@emotion/styled'
+import { Link } from 'react-router-dom'
+
 import { typography, colors } from '@/shared/theme'
 
 export const StyledLink = styled(Link)`

src/components/Link/Link.tsx

@@ -1,4 +1,5 @@
 import React, { ReactChild } from 'react'
+
 import { DisabledLabel, StyledLink } from './Link.style'
 
 export type LinkProps = {

src/components/Link/index.ts

@@ -1,2 +1,3 @@
 import Link from './Link'
+
 export default Link

src/components/NoConnectionIndicator/NoConnectionIndicator.stories.tsx

@@ -1,8 +1,10 @@
-import React from 'react'
 import { Story, Meta } from '@storybook/react'
-import NoConnectionIndicator, { NoConnectionIndicatorProps } from './NoConnectionIndicator'
+import React from 'react'
+
 import { ConnectionStatusProvider, SnackbarProvider } from '@/hooks'
 
+import NoConnectionIndicator, { NoConnectionIndicatorProps } from './NoConnectionIndicator'
+
 export default {
   title: 'General/NoConnectionIndicator',
   component: NoConnectionIndicator,

src/components/NoConnectionIndicator/NoConnectionIndicator.style.ts

@@ -1,7 +1,8 @@
-import { colors, sizes, zIndex, media } from '@/shared/theme'
-import { TOP_NAVBAR_HEIGHT } from '@/components'
 import styled from '@emotion/styled'
 
+import { TOP_NAVBAR_HEIGHT } from '@/components'
+import { colors, sizes, zIndex, media } from '@/shared/theme'
+
 export const TextWrapper = styled.div`
   width: 100%;
   display: flex;

src/components/NoConnectionIndicator/NoConnectionIndicator.tsx

@@ -1,9 +1,11 @@
+import React from 'react'
+import { CSSTransition } from 'react-transition-group'
+
 import { ConnectionStatus } from '@/hooks'
 import { Text } from '@/shared/components'
 import { SvgAlertWarning } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
-import React from 'react'
-import { CSSTransition } from 'react-transition-group'
+
 import { IndicatorWrapper, TextWrapper, IconWrapper } from './NoConnectionIndicator.style'
 
 export type NoConnectionIndicatorProps = {

src/components/NoConnectionIndicator/index.ts

@@ -1,2 +1,3 @@
 import NoConnectionIndicator from './NoConnectionIndicator'
+
 export default NoConnectionIndicator

src/components/PlaceholderVideoGrid.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Grid } from '@/shared/components'
+
 import VideoPreview from './VideoPreview'
 
 type PlaceholderVideoGridProps = {

src/components/Sidenav/SidenavBase.style.ts

@@ -1,10 +1,11 @@
-import { Text } from '@/shared/components'
-import { colors, sizes, transitions, typography, zIndex, media } from '@/shared/theme'
 import isPropValid from '@emotion/is-prop-valid'
 import styled from '@emotion/styled'
 import { Link, LinkProps } from 'react-router-dom'
+
+import { Text } from '@/shared/components'
 import { badgeStyles } from '@/shared/components/Badge'
 import { SvgJoystreamFullLogo } from '@/shared/illustrations'
+import { colors, sizes, transitions, typography, zIndex, media } from '@/shared/theme'
 
 export const EXPANDED_SIDENAVBAR_WIDTH = 360
 export const NAVBAR_LEFT_PADDING = 24

src/components/Sidenav/SidenavBase.tsx

@@ -1,6 +1,12 @@
 import React, { ReactNode } from 'react'
 import { useMatch } from 'react-router-dom'
+import { CSSTransition } from 'react-transition-group'
 import useResizeObserver from 'use-resize-observer'
+
+import { absoluteRoutes } from '@/config/routes'
+import HamburgerButton from '@/shared/components/HamburgerButton'
+import { transitions } from '@/shared/theme'
+
 import {
   SidebarNav,
   SidebarNavList,
@@ -17,10 +23,6 @@ import {
   StudioText,
   LegalLinksWrapper,
 } from './SidenavBase.style'
-import { CSSTransition } from 'react-transition-group'
-import { transitions } from '@/shared/theme'
-import HamburgerButton from '@/shared/components/HamburgerButton'
-import { absoluteRoutes } from '@/config/routes'
 
 type NavSubitem = {
   name: string

src/components/Sidenav/StudioSidenav/StudioSidenav.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
-import { useDrafts, useAuthorizedUser, useEditVideoSheet, useUploadsManager, useDisplayDataLostWarning } from '@/hooks'
+import { useNavigate } from 'react-router'
+import { CSSTransition } from 'react-transition-group'
+
+import SidenavBase, { NavItemType } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
+import { useDrafts, useAuthorizedUser, useEditVideoSheet, useUploadsManager, useDisplayDataLostWarning } from '@/hooks'
 import { Button } from '@/shared/components'
-import SidenavBase, { NavItemType } from '@/components/Sidenav/SidenavBase'
 import { SvgGlyphAddVideo, SvgGlyphExternal, SvgNavChannel, SvgNavUpload, SvgNavVideos } from '@/shared/icons'
-import { CSSTransition } from 'react-transition-group'
 import { transitions } from '@/shared/theme'
-import { useNavigate } from 'react-router'
 
 const studioNavbarItems: NavItemType[] = [
   {

src/components/Sidenav/ViewerSidenav/FollowedChannels.style.ts

@@ -1,7 +1,9 @@
-import { sizes, colors, typography } from '@/shared/theme'
 import styled from '@emotion/styled'
-import ChannelLink from '../../ChannelLink'
+
 import { Text } from '@/shared/components'
+import { sizes, colors, typography } from '@/shared/theme'
+
+import ChannelLink from '../../ChannelLink'
 import { NAVBAR_LEFT_PADDING, EXPANDED_SIDENAVBAR_WIDTH } from '../SidenavBase.style'
 
 export const FollowedChannelsWrapper = styled.div`

src/components/Sidenav/ViewerSidenav/FollowedChannels.tsx

@@ -1,4 +1,10 @@
 import React, { useState } from 'react'
+import { CSSTransition } from 'react-transition-group'
+
+import { FollowedChannel } from '@/hooks/usePersonalData/localStorageClient/types'
+import { SvgGlyphChevronDown, SvgGlyphChevronUp } from '@/shared/icons'
+import { transitions } from '@/shared/theme'
+
 import {
   ChannelsWrapper,
   ChannelsTitle,
@@ -9,10 +15,6 @@ import {
   ShowMoreIconWrapper,
   FollowedChannelsWrapper,
 } from './FollowedChannels.style'
-import { transitions } from '@/shared/theme'
-import { CSSTransition } from 'react-transition-group'
-import { FollowedChannel } from '@/hooks/usePersonalData/localStorageClient/types'
-import { SvgGlyphChevronDown, SvgGlyphChevronUp } from '@/shared/icons'
 
 const MAX_CHANNELS = 4
 

src/components/Sidenav/ViewerSidenav/ViewerSidenav.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
-import { usePersonalData } from '@/hooks'
+
+import SidenavBase, { NavItemType } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
+import { usePersonalData } from '@/hooks'
 import { Button } from '@/shared/components'
-import SidenavBase, { NavItemType } from '@/components/Sidenav/SidenavBase'
-import FollowedChannels from './FollowedChannels'
 import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavVideos } from '@/shared/icons'
 
+import FollowedChannels from './FollowedChannels'
+
 const viewerSidenavItems: NavItemType[] = [
   {
     icon: <SvgNavHome />,

src/components/SignInSteps/AccountStep.style.ts

@@ -1,8 +1,10 @@
+import styled from '@emotion/styled'
+
 import { Button, Text, RadioButton } from '@/shared/components'
 import Spinner from '@/shared/components/Spinner'
 import { SvgAccountCreationIllustration } from '@/shared/illustrations'
 import { sizes, colors, typography, transitions, media } from '@/shared/theme'
-import styled from '@emotion/styled'
+
 import { StepWrapper } from './SignInSteps.style'
 
 type AccountWrapperProps = {

src/components/SignInSteps/AccountStep.tsx

@@ -1,8 +1,12 @@
+import React, { FormEvent, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { CSSTransition, SwitchTransition } from 'react-transition-group'
+
 import { useUser } from '@/hooks'
 import { Text } from '@/shared/components'
+import { SvgGlyphChannel, SvgOutlineConnect } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
-import React, { FormEvent, useState } from 'react'
-import { CSSTransition, SwitchTransition } from 'react-transition-group'
+
 import {
   StyledSpinner,
   AccountStepImg,
@@ -28,8 +32,6 @@ import {
   StyledPolkadotLogo,
   StyledJoystreamLogo,
 } from './SignInSteps.style'
-import { useNavigate } from 'react-router'
-import { SvgGlyphChannel, SvgOutlineConnect } from '@/shared/icons'
 
 type AccountStepProps = {
   nextStepPath: string

src/components/SignInSteps/ExtensionStep.style.ts

@@ -1,6 +1,8 @@
+import styled from '@emotion/styled'
+
 import { Button, Text } from '@/shared/components'
 import { sizes } from '@/shared/theme'
-import styled from '@emotion/styled'
+
 import { StepFooter } from './SignInSteps.style'
 
 export const StyledButton = styled(Button)`

src/components/SignInSteps/ExtensionStep.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect } from 'react'
-import { StyledButton, StyledStepFooter, StyledListItem, PolkadotExtensionRejectedWrapper } from './ExtensionStep.style'
-import { BottomBarIcon, StepSubTitle, StepTitle, StepWrapper, StyledPolkadotLogo } from './SignInSteps.style'
-import { Text, Button } from '@/shared/components'
 import { useNavigate } from 'react-router'
+
 import { useRouterQuery, useUser, useDialog } from '@/hooks'
+import { Text, Button } from '@/shared/components'
 import { SvgGlyphExternal } from '@/shared/icons'
 
+import { StyledButton, StyledStepFooter, StyledListItem, PolkadotExtensionRejectedWrapper } from './ExtensionStep.style'
+import { BottomBarIcon, StepSubTitle, StepTitle, StepWrapper, StyledPolkadotLogo } from './SignInSteps.style'
+
 type ExtensionStepProps = {
   nextStepPath: string
 }

src/components/SignInSteps/SignInSteps.style.ts

@@ -1,8 +1,9 @@
+import styled from '@emotion/styled'
+
 import { Text } from '@/shared/components'
 import { SvgGlyphWarning } from '@/shared/icons/GlyphWarning'
 import { SvgJoystreamLogo, SvgPolkadotLogo } from '@/shared/illustrations'
 import { sizes, colors } from '@/shared/theme'
-import styled from '@emotion/styled'
 
 export const StepWrapper = styled.div`
   width: 100%;

src/components/SignInSteps/SignInStepsStepper.tsx

@@ -1,11 +1,14 @@
-import { useRouterQuery } from '@/hooks'
 import React from 'react'
 import { useNavigate } from 'react-router'
-import { Multistepper } from '../Dialogs'
+
+import { useRouterQuery } from '@/hooks'
+
 import AccountStep from './AccountStep'
 import ExtensionStep from './ExtensionStep'
 import TermsStep from './TermsStep'
 
+import { Multistepper } from '../Dialogs'
+
 const SignInStepsStepper: React.FC = () => {
   const navigate = useNavigate()
   const step = Number(useRouterQuery('step'))

src/components/SignInSteps/TermsStep.style.tsx

@@ -1,7 +1,8 @@
+import styled from '@emotion/styled'
 import React from 'react'
+
 import { Button, IconButton } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
-import styled from '@emotion/styled'
 
 export const TermsBox = styled.div`
   scroll-behavior: smooth;

src/components/SignInSteps/TermsStep.tsx

@@ -1,11 +1,13 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { CSSTransition } from 'react-transition-group'
+
+import TermsOfService from '@/components/TermsOfService'
 import { absoluteRoutes } from '@/config/routes'
 import { SvgGlyphChevronDown } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
-import React, { useEffect, useRef, useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
+
 import { StepFooter, StepWrapper } from './SignInSteps.style'
 import { TermsBox, TextWrapper, TermsOverlay, ScrollButton, ContinueButton } from './TermsStep.style'
-import TermsOfService from '@/components/TermsOfService'
 
 const TermsStep: React.FC = () => {
   const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false)

src/components/StudioEntrypoint.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
 import styled from '@emotion/styled'
-import { Spinner, Text } from '@/shared/components'
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+
 import { TOP_NAVBAR_HEIGHT } from '@/components'
 import { absoluteRoutes } from '@/config/routes'
 import { useUser } from '@/hooks'
-import { Navigate } from 'react-router-dom'
+import { Spinner, Text } from '@/shared/components'
 
 const DEFAULT_ROUTE = absoluteRoutes.studio.videos()
 

src/components/TermsOfService.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { LegalLastUpdateText, LegalListItem, LegalParagraph, Text } from '@/shared/components'
 
 const TermsOfService: React.FC = () => {

src/components/Topbar/StudioTopbar/StudioTopbar.style.tsx

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
-import { media, colors, sizes, transitions, typography, zIndex } from '@/shared/theme'
+
 import { Avatar, Text, Placeholder } from '@/shared/components'
+import { media, colors, sizes, transitions, typography, zIndex } from '@/shared/theme'
+
 import TopbarBase from '../TopbarBase'
 import { TOP_NAVBAR_HEIGHT } from '../TopbarBase.style'
 

src/components/Topbar/StudioTopbar/StudioTopbar.tsx

@@ -1,9 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { useUser, useDisplayDataLostWarning, useEditVideoSheet, useAsset } from '@/hooks'
+import { useNavigate } from 'react-router'
+import { CSSTransition } from 'react-transition-group'
+
 import { BasicChannelFieldsFragment } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
+import { useUser, useDisplayDataLostWarning, useEditVideoSheet, useAsset } from '@/hooks'
 import { Placeholder, Text, Button, ExpandButton, IconButton } from '@/shared/components'
 import { SvgGlyphAddVideo, SvgGlyphCheck, SvgGlyphLogOut, SvgGlyphNewChannel } from '@/shared/icons'
+import { transitions } from '@/shared/theme'
 
 import {
   StyledTopbarBase,
@@ -26,9 +30,6 @@ import {
   AvatarPlaceholder,
   GlyphCheckContainer,
 } from './StudioTopbar.style'
-import { CSSTransition } from 'react-transition-group'
-import { transitions } from '@/shared/theme'
-import { useNavigate } from 'react-router'
 
 type StudioTopbarProps = {
   hideChannelInfo?: boolean

src/components/Topbar/StudioTopbar/index.ts

@@ -1,2 +1,3 @@
 import StudioTopbar from './StudioTopbar'
+
 export default StudioTopbar

src/components/Topbar/TopbarBase.stories.tsx

@@ -1,7 +1,8 @@
+import { Story, Meta } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
+
 import TopbarBase, { TopbarBaseProps } from './TopbarBase'
-import { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Shared/T/TopbarBase',

src/components/Topbar/TopbarBase.style.tsx

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled'
-import { Text } from '@/shared/components'
+import { Link } from 'react-router-dom'
+
 import { StyledSearchbar } from '@/components/Topbar/ViewerTopbar/ViewerTopbar.style'
+import { Text } from '@/shared/components'
+import { SvgJoystreamFullLogo, SvgJoystreamOneLetterLogo } from '@/shared/illustrations'
 import { colors, sizes, transitions, typography, zIndex, media } from '@/shared/theme'
-import { Link } from 'react-router-dom'
+
 import { TopbarVariant } from './TopbarBase'
-import { SvgJoystreamFullLogo, SvgJoystreamOneLetterLogo } from '@/shared/illustrations'
 
 type TopNavbarStyleProps = {
   hasFocus?: boolean

src/components/Topbar/TopbarBase.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { FullLogo, Header, LogoLink, StudioText, LogoContainer, ShortLogo } from './TopbarBase.style'
 
 export type TopbarVariant = 'default' | 'studio'

src/components/Topbar/ViewerTopbar/ViewerTopbar.tsx

@@ -1,8 +1,11 @@
-import { absoluteRoutes, QUERY_PARAMS } from '@/config/routes'
-import { useLocation, useNavigate } from 'react-router-dom'
 import React, { useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { absoluteRoutes, QUERY_PARAMS } from '@/config/routes'
 import { RoutingState } from '@/types/routing'
+
 import { SearchbarContainer, StyledSearchbar } from './ViewerTopbar.style'
+
 import TopbarBase from '../TopbarBase'
 
 const ViewerTopbar: React.FC = () => {

src/components/Topbar/ViewerTopbar/index.ts

@@ -1,2 +1,3 @@
 import ViewerTopbar from './ViewerTopbar'
+
 export default ViewerTopbar

src/components/Topbar/index.ts

@@ -1,6 +1,6 @@
+import StudioTopbar from './StudioTopbar'
 import TopbarBase, { TopbarBaseProps } from './TopbarBase'
 import ViewerTopbar from './ViewerTopbar'
-import StudioTopbar from './StudioTopbar'
 
 export { TOP_NAVBAR_HEIGHT } from './TopbarBase.style'
 export type { TopbarBaseProps }

src/components/VideoGallery.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useMemo, useCallback } from 'react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
+import React, { useState, useMemo, useCallback } from 'react'
 
+import { VideoFieldsFragment } from '@/api/queries'
 import { Gallery, CAROUSEL_ARROW_HEIGHT, MIN_VIDEO_PREVIEW_WIDTH } from '@/shared/components'
-
 import { breakpointsOfGrid } from '@/shared/components/Grid'
-import VideoPreview from './VideoPreview'
 import { sizes } from '@/shared/theme'
-import { VideoFieldsFragment } from '@/api/queries'
+
+import VideoPreview from './VideoPreview'
 
 interface VideoFieldsWithProgress extends VideoFieldsFragment {
   progress?: number

src/components/VideoGrid.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
 import styled from '@emotion/styled'
+import React from 'react'
 
+import { VideoFieldsFragment } from '@/api/queries'
 import { Grid } from '@/shared/components'
+
 import VideoPreview from './VideoPreview'
-import { VideoFieldsFragment } from '@/api/queries'
 
 const StyledVideoPreview = styled(VideoPreview)`
   margin: 0 auto;

src/components/VideoPreview.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
+
 import { useVideo } from '@/api/hooks'
+import { AssetAvailability } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
+import { useDrafts, useAuthorizedUser, useAsset } from '@/hooks'
 import VideoPreviewBase, {
   VideoPreviewBaseMetaProps,
   VideoPreviewBaseProps,
   VideoPreviewPublisherProps,
 } from '@/shared/components/VideoPreviewBase/VideoPreviewBase'
-import { useDrafts, useAuthorizedUser, useAsset } from '@/hooks'
 import { copyToClipboard } from '@/utils/broswer'
-import { AssetAvailability } from '@/api/queries'
 
 export type VideoPreviewProps = {
   id?: string

src/components/ViewErrorFallback.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import styled from '@emotion/styled'
 import { FallbackRender } from '@sentry/react/dist/errorboundary'
+import React from 'react'
 
 import { Button, Text } from '@/shared/components'
-import { sizes, colors } from '@/shared/theme'
 import { SvgWellErrorIllustration } from '@/shared/illustrations'
+import { sizes, colors } from '@/shared/theme'
 
 const Container = styled.div`
   margin: ${sizes(20)} auto 0;