Fix circular dependencies (#1202)

* add CircularDependencyPlugin

* clean exports from views, components and shared/components

* remove indexes, fix circular deps related to providers

* fix more imports

* fix circular dependency problem in logs

* bring back indexes in views folder

* pr fix

.storybook/preview.jsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import React, { useRef } from 'react'
 import useResizeObserver from 'use-resize-observer'
 
-import { GlobalStyle } from '../src/shared/components'
+import { GlobalStyle } from '../src/shared/components/GlobalStyle'
 
 const Wrapper = styled.div`
   padding: 10px;

config-overrides.js

@@ -1,12 +1,18 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
 const StylelintPlugin = require('stylelint-webpack-plugin')
+const CircularDependencyPlugin = require('circular-dependency-plugin')
 const { override, addBabelPlugin, addWebpackAlias, addWebpackModuleRule, addWebpackPlugin } = require('customize-cra')
 
 module.exports = {
   webpack: override(
     addBabelPlugin('@emotion/babel-plugin'),
     addWebpackPlugin(new StylelintPlugin({ files: './src/**/*.{tsx,ts}' })),
+    addWebpackPlugin(
+      new CircularDependencyPlugin({
+        exclude: /a\.js|node_modules/,
+      })
+    ),
     addWebpackAlias({
       '@': path.resolve(__dirname, 'src/'),
     }),

package.json

@@ -124,6 +124,7 @@
     "@types/video.js": "^7.3.23",
     "@typescript-eslint/eslint-plugin": "^4.27.0",
     "@typescript-eslint/parser": "^4.27.0",
+    "circular-dependency-plugin": "^5.2.2",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.24.0",

src/App.tsx

@@ -3,11 +3,15 @@ import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
 import { createApolloClient } from '@/api'
-import { GlobalStyle } from '@/shared/components'
+import { GlobalStyle } from '@/shared/components/GlobalStyle'
 import { routingTransitions } from '@/styles/routingTransitions'
 
 import { MainLayout } from './MainLayout'
-import { AssetsManager, DialogProvider, OverlayManagerProvider, Snackbars, StorageProvidersProvider } from './providers'
+import { AssetsManager } from './providers/assets'
+import { DialogProvider } from './providers/dialogs'
+import { OverlayManagerProvider } from './providers/overlayManager'
+import { Snackbars } from './providers/snackbars'
+import { StorageProvidersProvider } from './providers/storageProviders'
 
 export const App = () => {
   // create client on render so the mocking setup is done if needed

src/MainLayout.tsx

@@ -2,15 +2,16 @@ import loadable from '@loadable/component'
 import React, { useEffect } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
-import { StudioLoading, TopbarBase } from '@/components'
+import { StudioLoading } from '@/components/StudioEntrypoint'
+import { TopbarBase } from '@/components/Topbar'
 import { BASE_PATHS } from '@/config/routes'
 import { isBrowserOutdated } from '@/utils/browser'
 
-import { useDialog } from './providers'
+import { useDialog } from './providers/dialogs'
 import { AdminView } from './views/admin'
 import { LegalLayout } from './views/legal'
 import { PlaygroundLayout } from './views/playground'
-import { ViewerLayout } from './views/viewer'
+import { ViewerLayout } from './views/viewer/ViewerLayout'
 
 const LoadableStudioLayout = loadable(() => import('./views/studio/StudioLayout'), {
   fallback: (

src/components/ChannelCard.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { useChannel } from '@/api/hooks'
 import { useHandleFollowChannel } from '@/hooks'
-import { AssetType, useAsset } from '@/providers'
-import { ChannelCardBase } from '@/shared/components'
+import { AssetType, useAsset } from '@/providers/assets'
+import { ChannelCardBase } from '@/shared/components/ChannelCardBase'
 
 export type ChannelCardProps = {
   id?: string

src/components/ChannelGallery.tsx

@@ -2,7 +2,9 @@ import React, { useMemo } from 'react'
 
 import { BasicChannelFieldsFragment } from '@/api/queries'
 import { ChannelCard } from '@/components/ChannelCard'
-import { Gallery, RankingNumberTile, breakpointsOfGrid } from '@/shared/components'
+import { Gallery } from '@/shared/components/Gallery'
+import { breakpointsOfGrid } from '@/shared/components/Grid'
+import { RankingNumberTile } from '@/shared/components/RankingNumberTile'
 
 type ChannelGalleryProps = {
   title?: string

src/components/ChannelGrid.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import React from 'react'
 
 import { BasicChannelFieldsFragment } from '@/api/queries'
-import { Grid } from '@/shared/components'
+import { Grid } from '@/shared/components/Grid'
 
 import { ChannelCard } from './ChannelCard'
 

src/components/ChannelLink/ChannelLink.style.ts

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
-import { SkeletonLoader, Text } from '@/shared/components'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
+import { Text } from '@/shared/components/Text'
 import { sizes } from '@/shared/theme'
 
 type ContainerProps = {

src/components/ChannelLink/ChannelLink.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { useBasicChannel } from '@/api/hooks'
 import { BasicChannelFieldsFragment } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
-import { AssetType, useAsset } from '@/providers'
+import { AssetType, useAsset } from '@/providers/assets'
 import { Avatar, AvatarSize } from '@/shared/components/Avatar'
 import { SentryLogger } from '@/utils/logs'
 

src/components/ChannelWithVideos/ChannelWithVideos.style.ts

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
-import { Avatar, Button, Text } from '@/shared/components'
+import { Avatar } from '@/shared/components/Avatar'
+import { Button } from '@/shared/components/Button'
+import { Text } from '@/shared/components/Text'
 import { sizes } from '@/shared/theme'
 
 export const ChannelCardAnchor = styled(Link)`

src/components/ChannelWithVideos/ChannelWithVideos.tsx

@@ -6,8 +6,9 @@ import { useInfiniteGrid } from '@/components/InfiniteGrids/useInfiniteGrid'
 import { VideoTile } from '@/components/VideoTile'
 import { absoluteRoutes } from '@/config/routes'
 import { useHandleFollowChannel } from '@/hooks'
-import { AssetType, useAsset } from '@/providers'
-import { Grid, SkeletonLoader } from '@/shared/components'
+import { AssetType, useAsset } from '@/providers/assets'
+import { Grid } from '@/shared/components/Grid'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
 import { SentryLogger } from '@/utils/logs'
 import { formatNumberShort } from '@/utils/number'
 

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react'
 import React, { useState } from 'react'
 
 import { OverlayManagerProvider } from '@/providers/overlayManager'
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 
 import { ActionDialog, ActionDialogProps } from './ActionDialog'
 

src/components/Dialogs/ActionDialog/ActionDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, ButtonProps } from '@/shared/components'
+import { Button, ButtonProps } from '@/shared/components/Button'
 
 import { ActionsContainer, AdditionalActionsContainer, ButtonsContainer } from './ActionDialog.style'
 

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react'
 import React, { useState } from 'react'
 
 import { OverlayManagerProvider } from '@/providers/overlayManager'
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 
 import { BaseDialogProps, BaseDialog as Dialog } from './BaseDialog'
 

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { IconButton } from '@/shared/components'
+import { IconButton } from '@/shared/components/IconButton'
 import { colors, media, sizes, zIndex } from '@/shared/theme'
 
 export const DialogBackDrop = styled.div`

src/components/Dialogs/BaseDialog/BaseDialog.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
-import { Portal } from '@/components'
-import { useOverlayManager } from '@/providers'
+import { Portal } from '@/components/Portal'
+import { useOverlayManager } from '@/providers/overlayManager'
 import { SvgGlyphClose } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 

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

@@ -2,8 +2,9 @@ import styled from '@emotion/styled/'
 import { Meta, Story } from '@storybook/react'
 import React, { useRef, useState } from 'react'
 
-import { OverlayManagerProvider } from '@/providers'
-import { Avatar, SkeletonLoader } from '@/shared/components'
+import { OverlayManagerProvider } from '@/providers/overlayManager'
+import { Avatar } from '@/shared/components/Avatar'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
 import { AssetDimensions, ImageCropData } from '@/types/cropper'
 
 import { ImageCropDialog, ImageCropDialogImperativeHandle, ImageCropDialogProps } from './ImageCropDialog'

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

@@ -1,8 +1,9 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
-import { SkeletonLoader, Text } from '@/shared/components'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
 import { Slider } from '@/shared/components/Slider'
+import { Text } from '@/shared/components/Text'
 import { colors, sizes } from '@/shared/theme'
 
 import { ActionDialog } from '../ActionDialog'

src/components/Dialogs/ImageCropDialog/ImageCropDialog.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react'
 
-import { IconButton } from '@/shared/components'
+import { IconButton } from '@/shared/components/IconButton'
 import { SvgGlyphPan, SvgGlyphZoomIn, SvgGlyphZoomOut } from '@/shared/icons'
 import { AssetDimensions, ImageCropData } from '@/types/cropper'
 import { validateImage } from '@/utils/image'

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { Text } from '@/shared/components'
+import { Text } from '@/shared/components/Text'
 import { colors, sizes } from '@/shared/theme'
 
 export const MessageIconWrapper = styled.div`

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react'
 import React, { useState } from 'react'
 
 import { OverlayManagerProvider } from '@/providers/overlayManager'
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 
 import { Multistepper } from './Multistepper'
 

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { Text } from '@/shared/components'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphChevronRight } from '@/shared/icons'
 import { colors, media, sizes, typography } from '@/shared/theme'
 

src/components/Dialogs/Multistepper/Multistepper.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 
-import { Text } from '@/shared/components'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphCheck } from '@/shared/icons'
 
 import {

src/components/Dialogs/TransactionDialog/TransactionDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { ExtrinsicStatus } from '@/joystream-lib'
-import { Tooltip } from '@/shared/components'
+import { Tooltip } from '@/shared/components/Tooltip'
 
 import { Step, StepsBar, StyledSpinner, StyledTransactionIllustration, TextContainer } from './TransactionDialog.style'
 

src/components/InfiniteGrids/InfiniteChannelGrid.tsx

@@ -7,7 +7,8 @@ import {
   GetChannelsConnectionQuery,
   GetChannelsConnectionQueryVariables,
 } from '@/api/queries'
-import { Grid, Text } from '@/shared/components'
+import { Grid } from '@/shared/components/Grid'
+import { Text } from '@/shared/components/Text'
 import { sizes } from '@/shared/theme'
 import { SentryLogger } from '@/utils/logs'
 

src/components/InfiniteGrids/InfiniteChannelWithVideosGrid.tsx

@@ -11,15 +11,12 @@ import {
 import { ChannelWithVideos } from '@/components/ChannelWithVideos'
 import { useInfiniteGrid } from '@/components/InfiniteGrids/useInfiniteGrid'
 import { languages } from '@/config/languages'
-import {
-  EmptyFallback,
-  GridHeadingContainer,
-  LoadMoreButton,
-  Select,
-  SkeletonLoader,
-  Text,
-  TitleContainer,
-} from '@/shared/components'
+import { EmptyFallback } from '@/shared/components/EmptyFallback'
+import { GridHeadingContainer, TitleContainer } from '@/shared/components/GridHeading'
+import { LoadMoreButton } from '@/shared/components/LoadMoreButton'
+import { Select } from '@/shared/components/Select'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphChevronRight } from '@/shared/icons'
 import { SentryLogger } from '@/utils/logs'
 

src/components/InfiniteGrids/InfiniteGrid.style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 import { colors, sizes } from '@/shared/theme'
 
 export const LoadMoreButtonWrapper = styled.div`

src/components/InfiniteGrids/InfiniteVideoGrid.tsx

@@ -7,7 +7,11 @@ import {
   GetVideosConnectionQueryVariables,
   VideoWhereInput,
 } from '@/api/queries'
-import { Grid, GridHeadingContainer, LoadMoreButton, SkeletonLoader, Text, TitleContainer } from '@/shared/components'
+import { Grid } from '@/shared/components/Grid'
+import { GridHeadingContainer, TitleContainer } from '@/shared/components/GridHeading'
+import { LoadMoreButton } from '@/shared/components/LoadMoreButton'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphChevronRight } from '@/shared/icons'
 import { SentryLogger } from '@/utils/logs'
 

src/components/InterruptedVideosGallery.tsx

@@ -1,8 +1,8 @@
 import { RouteComponentProps } from '@reach/router'
 import React from 'react'
 
-import { VideoGallery } from '@/components'
-import { usePersonalDataStore } from '@/providers'
+import { VideoGallery } from '@/components/VideoGallery'
+import { usePersonalDataStore } from '@/providers/personalData'
 import { ConsoleLogger } from '@/utils/logs'
 
 const INTERRUPTED_VIDEOS_COUNT = 16

src/components/NoConnectionIndicator/NoConnectionIndicator.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, Story } from '@storybook/react'
 import React from 'react'
 
-import { ConnectionStatusManager, Snackbars } from '@/providers'
+import { ConnectionStatusManager } from '@/providers/connectionStatus'
+import { Snackbars } from '@/providers/snackbars'
 
 import { NoConnectionIndicator, NoConnectionIndicatorProps } from './NoConnectionIndicator'
 

src/components/NoConnectionIndicator/NoConnectionIndicator.style.ts

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

src/components/NoConnectionIndicator/NoConnectionIndicator.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { CSSTransition } from 'react-transition-group'
 
-import { ConnectionStatus } from '@/providers'
-import { Text } from '@/shared/components'
+import { ConnectionStatus } from '@/providers/connectionStatus'
+import { Text } from '@/shared/components/Text'
 import { SvgAlertWarning } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 

src/components/OfficialJoystreamUpdate.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { useVideos } from '@/api/hooks'
-import { VideoGallery } from '@/components'
+import { VideoGallery } from '@/components/VideoGallery'
 import { readEnv } from '@/config/envs'
 
 const channelId = readEnv('OFFICIAL_JOYSTREAM_CHANNEL_ID')

src/components/Sidenav/SidenavBase.style.ts

@@ -2,8 +2,8 @@ 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 { Text } from '@/shared/components/Text'
 import { SvgJoystreamFullLogo } from '@/shared/illustrations'
 import { colors, media, sizes, transitions, typography, zIndex } from '@/shared/theme'
 

src/components/Sidenav/StudioSidenav/StudioSidenav.tsx

@@ -3,14 +3,11 @@ import { CSSTransition } from 'react-transition-group'
 
 import { NavItemType, SidenavBase } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
-import {
-  chanelUnseenDraftsSelector,
-  useAuthorizedUser,
-  useDraftStore,
-  useEditVideoSheet,
-  useUploadsStore,
-} from '@/providers'
-import { Button } from '@/shared/components'
+import { chanelUnseenDraftsSelector, useDraftStore } from '@/providers/drafts'
+import { useEditVideoSheet } from '@/providers/editVideoSheet'
+import { useUploadsStore } from '@/providers/uploadsManager'
+import { useAuthorizedUser } from '@/providers/user'
+import { Button } from '@/shared/components/Button'
 import { SvgGlyphAddVideo, SvgGlyphExternal, SvgNavChannel, SvgNavUpload, SvgNavVideos } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 import { openInNewTab } from '@/utils/browser'

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

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 
-import { ChannelLink } from '@/components'
-import { Text } from '@/shared/components'
+import { ChannelLink } from '@/components/ChannelLink'
+import { Text } from '@/shared/components/Text'
 import { colors, sizes, typography } from '@/shared/theme'
 
 import { EXPANDED_SIDENAVBAR_WIDTH, NAVBAR_LEFT_PADDING } from '../SidenavBase.style'

src/components/Sidenav/ViewerSidenav/ViewerSidenav.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react'
 
 import { NavItemType, SidenavBase } from '@/components/Sidenav/SidenavBase'
 import { absoluteRoutes } from '@/config/routes'
-import { usePersonalDataStore } from '@/providers'
-import { Button } from '@/shared/components'
+import { usePersonalDataStore } from '@/providers/personalData'
+import { Button } from '@/shared/components/Button'
 import { SvgGlyphExternal, SvgNavChannels, SvgNavHome, SvgNavNew, SvgNavPopular } from '@/shared/icons'
 import { openInNewTab } from '@/utils/browser'
 import { ConsoleLogger } from '@/utils/logs'

src/components/SignInSteps/AccountStep.style.ts

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled'
 
-import { Button, RadioButton, Text } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
+import { RadioButton } from '@/shared/components/RadioButton'
 import { Spinner } from '@/shared/components/Spinner'
+import { Text } from '@/shared/components/Text'
 import { SvgAccountCreationIllustration } from '@/shared/illustrations'
 import { colors, media, sizes, transitions, typography } from '@/shared/theme'
 

src/components/SignInSteps/AccountStep.tsx

@@ -2,8 +2,8 @@ import React, { FormEvent, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
-import { useUser } from '@/providers'
-import { Text } from '@/shared/components'
+import { useUser } from '@/providers/user'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphChannel, SvgOutlineConnect } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 

src/components/SignInSteps/ExtensionStep.style.ts

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 
-import { Button, Text } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
+import { Text } from '@/shared/components/Text'
 import { sizes } from '@/shared/theme'
 
 import { StepFooter } from './SignInSteps.style'

src/components/SignInSteps/ExtensionStep.tsx

@@ -2,8 +2,10 @@ import React, { useEffect } from 'react'
 import { useNavigate } from 'react-router'
 
 import { useRouterQuery } from '@/hooks'
-import { useDialog, useUser } from '@/providers'
-import { Button, Text } from '@/shared/components'
+import { useDialog } from '@/providers/dialogs'
+import { useUser } from '@/providers/user'
+import { Button } from '@/shared/components/Button'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphExternal } from '@/shared/icons'
 
 import { PolkadotExtensionRejectedWrapper, StyledButton, StyledListItem, StyledStepFooter } from './ExtensionStep.style'

src/components/SignInSteps/SignInSteps.style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { Text } from '@/shared/components'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphWarning } from '@/shared/icons/GlyphWarning'
 import { SvgJoystreamLogo, SvgPolkadotLogo } from '@/shared/illustrations'
 import { colors, sizes } from '@/shared/theme'

src/components/SignInSteps/TermsStep.style.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 
-import { Button, IconButton } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
+import { IconButton } from '@/shared/components/IconButton'
 import { colors, sizes } from '@/shared/theme'
 
 export const TermsBox = styled.div`

src/components/SkeletonLoaderVideoGrid.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Grid } from '@/shared/components'
+import { Grid } from '@/shared/components/Grid'
 
 import { VideoTile } from './VideoTile'
 

src/components/StudioEntrypoint.tsx

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

src/components/TermsOfService.tsx

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

src/components/TopTenThisWeek.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { useMostViewedVideos } from '@/api/hooks'
-import { VideoGallery } from '@/components'
+import { VideoGallery } from '@/components/VideoGallery'
 
 export const TopTenThisWeek = () => {
   const { videos, loading } = useMostViewedVideos({ limit: 10, timePeriodDays: 7 })

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

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

src/components/Topbar/StudioTopbar/StudioTopbar.tsx

@@ -5,8 +5,14 @@ import { CSSTransition } from 'react-transition-group'
 import { BasicChannelFieldsFragment } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
 import { useDisplayDataLostWarning } from '@/hooks'
-import { AssetType, useAsset, useEditVideoSheet, useUser } from '@/providers'
-import { Button, ExpandButton, IconButton, SkeletonLoader, Text } from '@/shared/components'
+import { AssetType, useAsset } from '@/providers/assets'
+import { useEditVideoSheet } from '@/providers/editVideoSheet'
+import { useUser } from '@/providers/user'
+import { Button } from '@/shared/components/Button'
+import { ExpandButton } from '@/shared/components/ExpandButton'
+import { IconButton } from '@/shared/components/IconButton'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
+import { Text } from '@/shared/components/Text'
 import { SvgGlyphAddVideo, SvgGlyphCheck, SvgGlyphLogOut, SvgGlyphNewChannel } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 

src/components/Topbar/TopbarBase.style.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import { Link } from 'react-router-dom'
 
 import { StyledSearchbar } from '@/components/Topbar/ViewerTopbar/ViewerTopbar.style'
-import { Text } from '@/shared/components'
+import { Text } from '@/shared/components/Text'
 import { SvgJoystreamFullLogo, SvgJoystreamOneLetterLogo } from '@/shared/illustrations'
 import { colors, media, sizes, transitions, typography, zIndex } from '@/shared/theme'
 

src/components/VideoGallery.tsx

@@ -2,8 +2,9 @@ import styled from '@emotion/styled'
 import React, { useMemo } from 'react'
 
 import { VideoFieldsFragment } from '@/api/queries'
-import { Gallery, RankingNumberTile } from '@/shared/components'
+import { Gallery } from '@/shared/components/Gallery'
 import { breakpointsOfGrid } from '@/shared/components/Grid'
+import { RankingNumberTile } from '@/shared/components/RankingNumberTile'
 import { AvatarContainer } from '@/shared/components/VideoTileBase/VideoTileBase.styles'
 import { media } from '@/shared/theme'
 

src/components/VideoGrid.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import React from 'react'
 
 import { VideoFieldsFragment } from '@/api/queries'
-import { Grid } from '@/shared/components'
+import { Grid } from '@/shared/components/Grid'
 
 import { VideoTile } from './VideoTile'
 

src/components/VideoHero/VideoHero.style.ts

@@ -1,11 +1,13 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
-import { IconButton, SkeletonLoader, Text } from '@/shared/components'
+import { IconButton } from '@/shared/components/IconButton'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
+import { Text } from '@/shared/components/Text'
 import { colors, media, sizes, typography } from '@/shared/theme'
 
-import { TOP_NAVBAR_HEIGHT } from '..'
 import { ChannelLink } from '../ChannelLink'
+import { TOP_NAVBAR_HEIGHT } from '../Topbar'
 
 const BUTTONS_HEIGHT = 48
 

src/components/VideoHero/VideoHero.tsx

@@ -3,8 +3,11 @@ import { Link } from 'react-router-dom'
 import { CSSTransition } from 'react-transition-group'
 
 import { absoluteRoutes } from '@/config/routes'
-import { AssetType, useAsset } from '@/providers'
-import { Button, GridItem, LayoutGrid, SkeletonLoader, VideoPlayer } from '@/shared/components'
+import { AssetType, useAsset } from '@/providers/assets'
+import { Button } from '@/shared/components/Button'
+import { GridItem, LayoutGrid } from '@/shared/components/LayoutGrid'
+import { SkeletonLoader } from '@/shared/components/SkeletonLoader'
+import { VideoPlayer } from '@/shared/components/VideoPlayer'
 import { SvgActionPlay } from '@/shared/icons/ActionPlay'
 import { SvgActionSoundOff } from '@/shared/icons/ActionSoundOff'
 import { SvgActionSoundOn } from '@/shared/icons/ActionSoundOn'

src/components/VideoTile.tsx

@@ -3,7 +3,8 @@ import React from 'react'
 import { useVideo } from '@/api/hooks'
 import { AssetAvailability } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
-import { AssetType, singleDraftSelector, useAsset, useDraftStore } from '@/providers'
+import { AssetType, useAsset } from '@/providers/assets'
+import { singleDraftSelector, useDraftStore } from '@/providers/drafts'
 import {
   VideoTileBase,
   VideoTileBaseMetaProps,

src/components/ViewErrorFallback.tsx

@@ -5,7 +5,9 @@ import { useNavigate } from 'react-router-dom'
 
 import { absoluteRoutes } from '@/config/routes'
 import { JOYSTREAM_DISCORD_URL } from '@/config/urls'
-import { AnimatedError, Button, Text } from '@/shared/components'
+import { AnimatedError } from '@/shared/components/AnimatedError'
+import { Button } from '@/shared/components/Button'
+import { Text } from '@/shared/components/Text'
 import { media, sizes } from '@/shared/theme'
 import { SentryLogger } from '@/utils/logs'
 

src/components/index.ts

@@ -1,30 +0,0 @@
-export * from './VideoGallery'
-export * from './VideoHero'
-export * from './ChannelGallery'
-export * from './Topbar/ViewerTopbar'
-export * from './Topbar/StudioTopbar'
-export * from './VideoGrid'
-export * from './SkeletonLoaderVideoGrid'
-export * from './VideoTile'
-export * from './ChannelCard'
-export * from './ChannelGrid'
-export * from './ViewErrorFallback'
-export * from './ChannelLink'
-export * from './BackgroundPattern'
-export * from './InfiniteGrids'
-export * from './Sidenav'
-export * from './InterruptedVideosGallery'
-export * from './ViewWrapper'
-export * from './Portal'
-export * from './Dialogs'
-export * from './LimitedWidthContainer'
-export * from './Topbar'
-export * from './NoConnectionIndicator'
-export * from './SignInSteps'
-export * from './StudioEntrypoint'
-export * from './PrivateRoute'
-export * from './OfficialJoystreamUpdate'
-export * from './TopTenThisWeek'
-export * from './TopTenChannels'
-export * from './ChannelWithVideos'
-export * from './DiscoverChannels'

src/hooks/useDeleteVideo.tsx

@@ -1,6 +1,10 @@
 import { useApolloClient } from '@apollo/client'
 
-import { useAuthorizedUser, useDialog, useJoystream, useTransaction, useUploadsStore } from '@/providers'
+import { useDialog } from '@/providers/dialogs'
+import { useJoystream } from '@/providers/joystream'
+import { useTransaction } from '@/providers/transactionManager'
+import { useUploadsStore } from '@/providers/uploadsManager'
+import { useAuthorizedUser } from '@/providers/user'
 import { removeVideoFromCache } from '@/utils/cachingAssets'
 
 export const useDeleteVideo = () => {

src/hooks/useHandleFollowChannel.tsx

@@ -1,5 +1,5 @@
 import { useFollowChannel, useUnfollowChannel } from '@/api/hooks'
-import { usePersonalDataStore } from '@/providers'
+import { usePersonalDataStore } from '@/providers/personalData'
 import { SentryLogger } from '@/utils/logs'
 
 export const useHandleFollowChannel = (id?: string) => {

src/mocking/accessors/pagination.ts

@@ -1,4 +1,5 @@
-import { filterAndSortGenericData } from '.'
+import { filterAndSortGenericData } from './filtering'
+
 import { MockVideo } from '../data/mockVideos'
 import { CountData, FilteringArgs, GenericData } from '../types'
 

src/providers/assets/assetsManager.tsx

@@ -2,13 +2,13 @@ import { shuffle } from 'lodash'
 import React, { useEffect } from 'react'
 
 import { ASSET_RESPONSE_TIMEOUT } from '@/config/assets'
-import { AssetType } from '@/providers'
 import { ResolvedAssetDetails } from '@/types/assets'
 import { AssetLogger, ConsoleLogger, SentryLogger } from '@/utils/logs'
 import { TimeoutError, withTimeout } from '@/utils/misc'
 
 import { getAssetUrl, testAssetDownload } from './helpers'
 import { useAssetStore } from './store'
+import { AssetType } from './types'
 
 import { useStorageProviders } from '../storageProviders'
 

src/providers/editVideoSheet/hooks.tsx

@@ -12,7 +12,8 @@ import { SentryLogger } from '@/utils/logs'
 import { EditVideoSheetContext } from './provider'
 import { EditVideoAssets, EditVideoFormFields, EditVideoSheetState, EditVideoSheetTab } from './types'
 
-import { channelDraftsSelector, useAuthorizedUser, useDraftStore } from '..'
+import { channelDraftsSelector, useDraftStore } from '../drafts'
+import { useAuthorizedUser } from '../user'
 
 export const useEditVideoSheet = () => {
   const ctx = useContext(EditVideoSheetContext)

src/providers/editVideoSheet/provider.tsx

@@ -12,7 +12,7 @@ import {
   EditVideoTabCachedDirtyFormData,
 } from './types'
 
-import { useOverlayManager } from '..'
+import { useOverlayManager } from '../overlayManager'
 
 export const EditVideoSheetContext = React.createContext<ContextValue | undefined>(undefined)
 EditVideoSheetContext.displayName = 'EditVideoSheetContext'

src/providers/editVideoSheet/types.ts

@@ -1,4 +1,4 @@
-import { ImageInputMetadata, VideoInputMetadata } from '@/shared/components'
+import { ImageInputMetadata, VideoInputMetadata } from '@/shared/components/MultiFileSelect'
 
 export type EditVideoAssets = {
   video: {

src/providers/index.ts

@@ -1,13 +0,0 @@
-export * from './personalData'
-export * from './snackbars'
-export * from './overlayManager'
-export * from './drafts'
-export * from './user'
-export * from './joystream'
-export * from './connectionStatus'
-export * from './editVideoSheet'
-export * from './uploadsManager'
-export * from './transactionManager'
-export * from './dialogs'
-export * from './storageProviders'
-export * from './assets'

src/providers/joystream/provider.tsx

@@ -5,7 +5,8 @@ import { NODE_URL } from '@/config/urls'
 import { JoystreamJs } from '@/joystream-lib'
 import { SentryLogger } from '@/utils/logs'
 
-import { useConnectionStatusStore, useUser } from '..'
+import { useConnectionStatusStore } from '../connectionStatus'
+import { useUser } from '../user'
 
 type JoystreamContextValue = {
   joystream: JoystreamJs | null

src/providers/snackbars/snackbar.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import React, { ReactNode, useEffect } from 'react'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 
-import { Snackbar } from '@/shared/components'
+import { Snackbar } from '@/shared/components/Snackbar'
 import { SvgAlertError, SvgAlertInfo, SvgAlertSuccess, SvgAlertWarning } from '@/shared/icons'
 import { sizes, transitions } from '@/shared/theme'
 

src/providers/storageProviders.tsx

@@ -9,7 +9,7 @@ import {
   GetWorkersQuery,
   GetWorkersQueryVariables,
 } from '@/api/queries/__generated__/workers.generated'
-import { ViewErrorFallback } from '@/components'
+import { ViewErrorFallback } from '@/components/ViewErrorFallback'
 import { SentryLogger } from '@/utils/logs'
 import { getRandomIntInclusive } from '@/utils/number'
 

src/providers/transactionManager/transactionManager.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { useQueryNodeStateSubscription } from '@/api/hooks'
-import { TransactionDialog } from '@/components'
+import { TransactionDialog } from '@/components/Dialogs'
 import { SentryLogger } from '@/utils/logs'
 
 import { useTransactionManagerStore } from './store'

src/providers/transactionManager/useTransaction.ts

@@ -1,8 +1,11 @@
 import { ExtrinsicFailedError, ExtrinsicResult, ExtrinsicSignCancelledError, ExtrinsicStatus } from '@/joystream-lib'
-import { TransactionDialogStep, useConnectionStatusStore, useDialog, useSnackbar } from '@/providers'
 import { ConsoleLogger, SentryLogger } from '@/utils/logs'
 
-import { useTransactionManagerStore } from './store'
+import { TransactionDialogStep, useTransactionManagerStore } from './store'
+
+import { useConnectionStatusStore } from '../connectionStatus'
+import { useDialog } from '../dialogs'
+import { useSnackbar } from '../snackbars'
 
 type UpdateStatusFn = (status: TransactionDialogStep) => void
 type SuccessMessage = {

src/providers/uploadsManager/uploadsManager.tsx

@@ -8,7 +8,8 @@ import { fetchMissingAssets } from '@/providers/uploadsManager/utils'
 
 import { useUploadsStore } from './store'
 
-import { useSnackbar, useUser } from '..'
+import { useSnackbar } from '../snackbars'
+import { useUser } from '../user'
 
 export const UploadsManager: React.FC = () => {
   const navigate = useNavigate()

src/providers/user/user.tsx

@@ -3,10 +3,10 @@ import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'
 import React, { useContext, useEffect, useState } from 'react'
 
 import { useMembership, useMemberships } from '@/api/hooks'
-import { ViewErrorFallback } from '@/components'
+import { ViewErrorFallback } from '@/components/ViewErrorFallback'
 import { WEB3_APP_NAME } from '@/config/urls'
 import { AccountId } from '@/joystream-lib'
-import { ConsoleLogger, SentryLogger } from '@/utils/logs'
+import { AssetLogger, ConsoleLogger, SentryLogger } from '@/utils/logs'
 
 import { ActiveUserState, ActiveUserStoreActions, useActiveUserStore } from './store'
 
@@ -38,6 +38,11 @@ export const ActiveUserProvider: React.FC = ({ children }) => {
   const activeUserState = useActiveUserStore(({ actions, ...activeUser }) => ({ ...activeUser }))
   const { setActiveUser, resetActiveUser } = useActiveUserStore((state) => state.actions)
 
+  useEffect(() => {
+    SentryLogger.setUser(activeUserState)
+    AssetLogger.setUser(activeUserState)
+  }, [activeUserState])
+
   const [accounts, setAccounts] = useState<Account[] | null>(null)
   const [extensionConnected, setExtensionConnected] = useState<boolean | null>(null)
 

src/shared/components/Banner/Banner.style.ts

@@ -1,10 +1,12 @@
 import styled from '@emotion/styled'
 
-import { Button, Text } from '@/shared/components'
 import { colors, sizes } from '@/shared/theme'
 
 import { BannerVariant } from './Banner'
 
+import { Button } from '../Button'
+import { Text } from '../Text'
+
 type BannerProps = {
   variant: BannerVariant
 }

src/shared/components/Banner/Banner.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-import { IconButton } from '@/shared/components'
+import { IconButton } from '@/shared/components/IconButton'
 import { SvgAlertError, SvgAlertInfo, SvgAlertSuccess, SvgAlertWarning, SvgGlyphClose } from '@/shared/icons'
 
 import {

src/shared/components/ChannelCover/ChannelCover.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 
-import { BackgroundPattern } from '@/components'
+import { BackgroundPattern } from '@/components/BackgroundPattern'
 import { SvgGlyphFileImage, SvgGlyphImage, SvgLargeUploadFailed } from '@/shared/icons'
 import { transitions } from '@/shared/theme'
 

src/shared/components/CircularProgress/CircularProgress.style.tsx

@@ -2,8 +2,6 @@ import styled from '@emotion/styled'
 
 import { colors } from '@/shared/theme'
 
-import { Path } from './Path'
-
 export type TrailVariant = 'default' | 'player'
 
 type TrailProps = {
@@ -25,10 +23,10 @@ export const SVG = styled.svg`
   /* needed when parent container has display: flex */
   width: 100%;
 `
-export const Trail = styled(Path)<TrailProps>`
+export const Trail = styled.path<TrailProps>`
   stroke: ${({ variant }) => getStrokeColor(variant)};
 `
-export const StyledPath = styled(Path)`
+export const StyledPath = styled.path`
   stroke: ${colors.blue[500]};
   transition: stroke-dashoffset 0.5s ease 0s;
 `

src/shared/components/CircularProgress/CircularProgress.tsx

@@ -52,20 +52,48 @@ export const CircularProgress: React.FC<CircularProgressProps> = ({
         {background ? <Background cx={VIEWBOX_CENTER_X} cy={VIEWBOX_CENTER_Y} r={VIEWBOX_HEIGHT_HALF} /> : null}
         {!noTrail && (
           <Trail
-            counterClockwise={counterClockwise}
-            dashRatio={circleRatio}
-            pathRadius={pathRadius}
+            style={Object.assign({}, getDashStyle(counterClockwise, circleRatio, pathRadius))}
+            d={getPathDescription(pathRadius, counterClockwise)}
             variant={variant}
             strokeWidth={strokeWidth}
           />
         )}
         <StyledPath
-          counterClockwise={counterClockwise}
-          dashRatio={pathRatio * circleRatio}
-          pathRadius={pathRadius}
           strokeWidth={strokeWidth}
+          className={className}
+          style={Object.assign({}, getDashStyle(counterClockwise, pathRatio * circleRatio, pathRadius))}
+          d={getPathDescription(pathRadius, counterClockwise)}
+          fillOpacity={0}
         />
       </SVG>
     </>
   )
 }
+
+// SVG path description specifies how the path should be drawn
+const getPathDescription = (pathRadius: number, counterClockwise: boolean) => {
+  const radius = pathRadius
+  const rotation = counterClockwise ? 1 : 0
+
+  // Move to center of canvas
+  // Relative move to top canvas
+  // Relative arc to bottom of canvas
+  // Relative arc to top of canvas
+  return `
+      M ${VIEWBOX_CENTER_X},${VIEWBOX_CENTER_Y}
+      m 0,-${radius}
+      a ${radius},${radius} ${rotation} 1 1 0,${2 * radius}
+      a ${radius},${radius} ${rotation} 1 1 0,-${2 * radius}
+    `
+}
+
+const getDashStyle = (counterClockwise: boolean, dashRatio: number, pathRadius: number) => {
+  const diameter = Math.PI * 2 * pathRadius
+  const gapLength = (1 - dashRatio) * diameter
+  return {
+    // Have dash be full diameter, and gap be full diameter
+    strokeDasharray: `${diameter}px ${diameter}px`,
+    // Shift dash backward by gapLength, so gap starts appearing at correct distance
+    strokeDashoffset: `${counterClockwise ? -gapLength : gapLength}px`,
+  }
+}

src/shared/components/ContextMenu/ContextMenu.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react'
 import React from 'react'
 
 import { useContextMenu } from '@/hooks'
-import { OverlayManagerProvider } from '@/providers'
+import { OverlayManagerProvider } from '@/providers/overlayManager'
 import { SvgGlyphCopy, SvgGlyphEdit, SvgGlyphTrash } from '@/shared/icons'
 
 import { ContextMenu, ContextMenuItem } from './ContextMenu'

src/shared/components/ContextMenu/ContextMenu.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
-import { Portal } from '@/components'
-import { useOverlayManager } from '@/providers'
+import { Portal } from '@/components/Portal'
+import { useOverlayManager } from '@/providers/overlayManager'
 
 import { StyledContainer, StyledMenuItem, StyledText } from './ContextMenu.style'
 

src/shared/components/DismissibleBanner/DismissibleBanner.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react'
 import React from 'react'
 
-import { usePersonalDataStore } from '@/providers'
+import { usePersonalDataStore } from '@/providers/personalData'
 
 import { DismissibleBanner, DismissibleBannerProps } from './DismissibleBanner'
 

src/shared/components/DismissibleBanner/DismissibleBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { usePersonalDataStore } from '@/providers'
+import { usePersonalDataStore } from '@/providers/personalData'
 
 import { Banner, BannerProps } from '../Banner'
 

src/shared/components/EmptyFallback/EmptyFallback.stories.tsx

@@ -1,7 +1,7 @@
 import { Story } from '@storybook/react'
 import React from 'react'
 
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 import { SvgGlyphUpload } from '@/shared/icons'
 
 import { EmptyFallback, EmptyFallbackProps } from './EmptyFallback'

src/shared/components/Gallery/Gallery.style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 
 import { sizes } from '../../theme'
 

src/shared/components/Gallery/Gallery.tsx

@@ -1,13 +1,12 @@
 import React, { ComponentProps, useRef } from 'react'
 
-import { TitleContainer } from '@/shared/components'
 import { Arrow } from '@/shared/components/Carousel/Carousel.style'
 import { SvgGlyphChevronLeft, SvgGlyphChevronRight, SvgPlayerPlay } from '@/shared/icons'
 
 import { CarouselArrowsContainer, Container, SeeAllLink } from './Gallery.style'
 
 import { Carousel, CarouselProps } from '../Carousel/Carousel'
-import { GridHeadingContainer } from '../GridHeading'
+import { GridHeadingContainer, TitleContainer } from '../GridHeading'
 import { Text } from '../Text'
 
 export type GalleryProps = {

src/shared/components/LayoutGrid/index.ts

@@ -0,0 +1 @@
+export * from './LayoutGrid'

src/shared/components/LoadMoreButton/LoadMoreButton.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import React, { FC, MouseEvent } from 'react'
 
-import { Button } from '@/shared/components'
+import { Button } from '@/shared/components/Button'
 import { SvgGlyphChevronDown } from '@/shared/icons'
 
 type LoadMoreButtonProps = {

src/shared/components/MultiFileSelect/MultiFileSelect.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react'
 import React, { useState } from 'react'
 
-import { OverlayManagerProvider } from '@/providers'
+import { OverlayManagerProvider } from '@/providers/overlayManager'
 
 import { InputFilesState, MultiFileSelect, MultiFileSelectProps } from './MultiFileSelect'
 

src/shared/components/VideoPlayer/VideoOverlays/EndingOverlay.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router'
 
 import { BasicVideoFieldsFragment } from '@/api/queries'
 import { absoluteRoutes } from '@/config/routes'
-import { AssetType, useAsset } from '@/providers'
+import { AssetType, useAsset } from '@/providers/assets'
 import { SvgGlyphRestart, SvgPlayerPause, SvgPlayerPlay } from '@/shared/icons'
 
 import {

src/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -2,7 +2,7 @@ import { debounce, round } from 'lodash'
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react'
 
 import { VideoFieldsFragment } from '@/api/queries'
-import { usePersonalDataStore } from '@/providers'
+import { usePersonalDataStore } from '@/providers/personalData'
 import {
   SvgPlayerFullScreen,
   SvgPlayerPause,

src/shared/components/VideoTileBase/VideoTile.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
-import { OverlayManagerProvider } from '@/providers'
+import { OverlayManagerProvider } from '@/providers/overlayManager'
 import { ConsoleLogger } from '@/utils/logs'
 
 import { VideoTileBase, VideoTileBaseProps } from './VideoTileBase'

src/shared/components/index.ts

@@ -1,51 +0,0 @@
-export * from './SkeletonLoader'
-export * from './Avatar'
-export * from './Button'
-export * from './IconButton'
-export * from './Carousel'
-export * from './RadioButton'
-export * from './Text'
-export * from './VideoTileBase'
-export * from './VideoPlayer'
-export * from './HamburgerButton'
-export * from './Gallery'
-export * from './ChannelAvatar'
-export * from './GlobalStyle'
-export * from './ToggleButton'
-export * from './Searchbar'
-export * from './Tabs'
-export * from './CategoryPicker'
-export * from './Grid'
-export * from './Slider'
-export * from './TitleArea'
-export * from './Tooltip'
-export * from './ChannelCover'
-export * from './FormField'
-export * from './Pagination'
-export * from './ContextMenu'
-export * from './Datepicker'
-export * from './Select'
-export * from './TextField'
-export * from './Checkbox'
-export * from './TextArea'
-export * from './Banner'
-export * from './DismissibleBanner'
-export * from './ActionBar'
-export * from './MultiFileSelect'
-export * from './FileSelect'
-export * from './FileStep'
-export * from './Spinner'
-export * from './CircularProgress'
-export * from './ExpandButton'
-export * from './Snackbar'
-export * from './HelperText'
-export * from './LegalText'
-export * from './Loader'
-export * from './AnimatedError'
-export * from './EmptyFallback'
-export * from './LayoutGrid/LayoutGrid'
-export * from './LoadMoreButton'
-export * from './CallToActionButton'
-export * from './GridHeading'
-export * from './ChannelCardBase'
-export * from './RankingNumberTile'

src/utils/logs/asset.ts

@@ -5,7 +5,6 @@ import { ResolvedAssetDetails } from '@/types/assets'
 
 import { ConsoleLogger } from './console'
 import { SentryLogger } from './sentry'
-import { getUserInfo } from './shared'
 
 export type AssetEvent = {
   type: string
@@ -15,11 +14,16 @@ export type AssetEvent = {
 
 class _AssetLogger {
   private logUrl = ''
+  private user?: Record<string, unknown>
 
   initialize(logUrl: string | null) {
     if (logUrl) this.logUrl = logUrl
   }
 
+  setUser(user?: Record<string, unknown>) {
+    this.user = user
+  }
+
   private pendingEvents: AssetEvent[] = []
 
   private sendEvents = debounce(async () => {
@@ -43,7 +47,7 @@ class _AssetLogger {
   private addEvent(event: AssetEvent) {
     const eventWithUser = {
       ...event,
-      user: getUserInfo(false),
+      user: this.user,
     }
     this.pendingEvents.push(eventWithUser)
     this.sendEvents()

src/utils/logs/sentry.ts

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/react'
 import { Severity } from '@sentry/react'
 
 import { ConsoleLogger } from './console'
-import { getUserInfo } from './shared'
 
 type LogContexts = Record<string, Record<string, unknown>>
 
@@ -21,6 +20,7 @@ class SentryError extends Error {
 
 class _SentryLogger {
   private initialized = false
+  private user?: Record<string, unknown>
 
   initialize(DSN: string) {
     Sentry.init({
@@ -33,6 +33,10 @@ class _SentryLogger {
     this.initialized = true
   }
 
+  setUser(user?: Record<string, unknown>) {
+    this.user = user
+  }
+
   error(
     title: string,
     source: string,
@@ -77,7 +81,7 @@ class _SentryLogger {
         ...contexts,
       },
       tags,
-      user: getUserInfo(),
+      user: { ...this.user, ip_address: '{{auto}}' },
     })
   }
 
@@ -94,7 +98,7 @@ class _SentryLogger {
       level: Severity.fromString(level),
       contexts,
       tags: { source },
-      user: getUserInfo(),
+      user: { ...this.user, ip_address: '{{auto}}' },
     })
   }
 }

src/utils/logs/shared.ts

@@ -1,16 +1,6 @@
-import { useActiveUserStore } from '@/providers/user/store'
-
 export const getLogArgs = (message: string, details?: unknown) => {
   if (details) {
     return [message, details]
   }
   return [message]
 }
-
-export const getUserInfo = (includeIp = true): Record<string, unknown> => {
-  const { actions, ...userState } = useActiveUserStore.getState()
-  return {
-    ...userState,
-    ...(includeIp ? { ip_address: '{{auto}}' } : {}),
-  }
-}

src/views/admin/AdminView.tsx

@@ -3,8 +3,10 @@ import { Link } from 'react-router-dom'
 
 import { TARGET_DEV_ENV, availableEnvs, setEnvInLocalStorage } from '@/config/envs'
 import { absoluteRoutes } from '@/config/routes'
-import { useSnackbar } from '@/providers'
-import { Button, Select, Text } from '@/shared/components'
+import { useSnackbar } from '@/providers/snackbars'
+import { Button } from '@/shared/components/Button'
+import { Select } from '@/shared/components/Select'
+import { Text } from '@/shared/components/Text'
 import { SentryLogger } from '@/utils/logs'
 
 const items = availableEnvs().map((item) => ({ name: item, value: item }))

src/views/legal/CopyrightPolicyView.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { LegalListItem, LegalParagraph, Text } from '@/shared/components'
+import { LegalListItem, LegalParagraph } from '@/shared/components/LegalText'
+import { Text } from '@/shared/components/Text'
 
 export const CopyrightPolicyView: React.FC = () => {
   return (

src/views/legal/LegalLayout.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled'
 import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
-import { TopbarBase } from '@/components'
+import { TopbarBase } from '@/components/Topbar'
 import { relativeRoutes } from '@/config/routes'
 import { colors, sizes } from '@/shared/theme'
 

src/views/playground/PlaygroundLayout.tsx

@@ -3,7 +3,9 @@ import React from 'react'
 import { Route, Routes } from 'react-router'
 import { Link } from 'react-router-dom'
 
-import { ActiveUserProvider, ConnectionStatusManager, DialogProvider } from '@/providers'
+import { ConnectionStatusManager } from '@/providers/connectionStatus'
+import { DialogProvider } from '@/providers/dialogs'
+import { ActiveUserProvider } from '@/providers/user'
 import { colors } from '@/shared/theme'
 
 import {

src/views/playground/Playgrounds/Animations.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled'
 import React from 'react'
 
-import { AnimatedError, Loader } from '@/shared/components'
+import { AnimatedError } from '@/shared/components/AnimatedError'
+import { Loader } from '@/shared/components/Loader'
 
 export const Animations = () => {
   return (