Merge pull request #781 from Stremio/refactor/components

Move components to their own folder

src/App/ErrorDialog/ErrorDialog.js

@@ -4,7 +4,7 @@ const React = require('react');
 const { useTranslation } = require('react-i18next');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { Button, Image } = require('stremio/common');
+const { Image, Button } = require('stremio/components');
 const styles = require('./styles');
 
 const ErrorDialog = ({ className }) => {

src/common/Button/Button.js

@@ -1,65 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const styles = require('./styles');
-const { useLongPress } = require('use-long-press');
-
-const Button = React.forwardRef(({ className, href, disabled, children, onLongPress, onDoubleClick, ...props }, ref) => {
-    const longPress = useLongPress(onLongPress, { detect: 'pointer' });
-    const onKeyDown = React.useCallback((event) => {
-        if (typeof props.onKeyDown === 'function') {
-            props.onKeyDown(event);
-        }
-
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            if (!event.nativeEvent.buttonClickPrevented) {
-                event.currentTarget.click();
-            }
-        }
-    }, [props.onKeyDown]);
-    const onMouseDown = React.useCallback((event) => {
-        if (typeof props.onMouseDown === 'function') {
-            props.onMouseDown(event);
-        }
-
-        if (!event.nativeEvent.buttonBlurPrevented) {
-            event.preventDefault();
-            if (document.activeElement instanceof HTMLElement) {
-                document.activeElement.blur();
-            }
-        }
-    }, [props.onMouseDown]);
-    return React.createElement(
-        typeof href === 'string' && href.length > 0 ? 'a' : 'div',
-        {
-            tabIndex: 0,
-            ...props,
-            ref,
-            className: classnames(className, styles['button-container'], { 'disabled': disabled }),
-            href,
-            onKeyDown,
-            onMouseDown,
-            onDoubleClick,
-            ...longPress()
-        },
-        children
-    );
-});
-
-Button.displayName = 'Button';
-
-Button.propTypes = {
-    className: PropTypes.string,
-    href: PropTypes.string,
-    disabled: PropTypes.bool,
-    children: PropTypes.node,
-    onKeyDown: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    onLongPress: PropTypes.func,
-    onDoubleClick: PropTypes.func
-};
-
-module.exports = Button;

src/common/Button/index.js

@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const Button = require('./Button');
-
-module.exports = Button;

src/common/Image/index.js

@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const Image = require('./Image');
-
-module.exports = Image;

src/common/MainNavBars/index.js

@@ -1,5 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const MainNavBars = require('./MainNavBars');
-
-module.exports = MainNavBars;

src/common/Toast/ToastItem/ToastItem.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
 const styles = require('./styles');
 
 const ToastItem = ({ title, message, dataset, onSelect, onClose, ...props }) => {

src/common/index.js

@@ -1,36 +1,8 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-const AddonDetailsModal = require('./AddonDetailsModal');
-const { default: BottomSheet } = require('./BottomSheet');
-const Button = require('./Button');
-const Toggle = require('./Toggle');
-const { default: Chips } = require('./Chips');
-const ColorInput = require('./ColorInput');
-const ContinueWatchingItem = require('./ContinueWatchingItem');
-const DelayedRenderer = require('./DelayedRenderer');
-const Image = require('./Image');
-const LibItem = require('./LibItem');
-const MainNavBars = require('./MainNavBars');
-const MetaItem = require('./MetaItem');
-const MetaPreview = require('./MetaPreview');
-const MetaRow = require('./MetaRow');
-const ModalDialog = require('./ModalDialog');
-const Multiselect = require('./Multiselect');
-const { default: MultiselectMenu } = require('./MultiselectMenu');
-const { HorizontalNavBar, VerticalNavBar } = require('./NavBar');
-const { default: HorizontalScroll } = require('./HorizontalScroll');
 const { PlatformProvider, usePlatform } = require('./Platform');
-const PlayIconCircleCentered = require('./PlayIconCircleCentered');
-const Popup = require('./Popup');
-const SearchBar = require('./SearchBar');
-const StreamingServerWarning = require('./StreamingServerWarning');
-const SharePrompt = require('./SharePrompt');
-const Slider = require('./Slider');
-const { default: TextInput } = require('./TextInput');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
-const { default: Transition } = require('./Transition');
-const Video = require('./Video');
 const comparatorWithPriorities = require('./comparatorWithPriorities');
 const CONSTANTS = require('./CONSTANTS');
 const { withCoreSuspender, useCoreSuspender } = require('./CoreSuspender');
@@ -50,44 +22,14 @@ const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
-const EventModal = require('./EventModal');
 
 module.exports = {
-    AddonDetailsModal,
-    BottomSheet,
-    Button,
-    Toggle,
-    Chips,
-    ColorInput,
-    ContinueWatchingItem,
-    DelayedRenderer,
-    Image,
-    LibItem,
-    MainNavBars,
-    MetaItem,
-    MetaPreview,
-    MetaRow,
-    ModalDialog,
-    Multiselect,
-    MultiselectMenu,
-    HorizontalNavBar,
-    HorizontalScroll,
-    VerticalNavBar,
     PlatformProvider,
     usePlatform,
-    PlayIconCircleCentered,
-    Popup,
-    SearchBar,
-    StreamingServerWarning,
-    SharePrompt,
-    Slider,
-    TextInput,
     ToastProvider,
     useToast,
     TooltipProvider,
     Tooltip,
-    Transition,
-    Video,
     comparatorWithPriorities,
     CONSTANTS,
     withCoreSuspender,
@@ -108,5 +50,4 @@ module.exports = {
     useStreamingServer,
     useTorrent,
     useTranslate,
-    EventModal,
 };

src/components/AddonDetailsModal/AddonDetails/AddonDetails.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Image = require('stremio/common/Image');
+const { default: Image } = require('stremio/components/Image');
 const styles = require('./styles');
 
 const AddonDetails = ({ className, id, name, version, logo, description, types, transportUrl, official }) => {

src/components/AddonDetailsModal/AddonDetailsModal.js

@@ -2,7 +2,7 @@
 
 const React = require('react');
 const PropTypes = require('prop-types');
-const ModalDialog = require('stremio/common/ModalDialog');
+const ModalDialog = require('stremio/components/ModalDialog');
 const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const { usePlatform } = require('stremio/common/Platform');
 const { useServices } = require('stremio/services');

src/components/AddonDetailsModal/styles.less

@@ -2,10 +2,6 @@
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
-:import('~stremio/common/ModalDialog/styles.less') {
-    label: label;
-}
-
 .addon-details-modal-container {
     .addon-details-container, .addon-details-message-container {
         width: 40rem;

src/components/BottomSheet/BottomSheet.tsx

@@ -11,7 +11,7 @@ const CLOSE_THRESHOLD = 100;
 type Props = {
     children: JSX.Element,
     title: string,
-    show?: boolean,
+    show: boolean,
     onClose: () => void,
 };
 

src/components/Button/Button.tsx

@@ -0,0 +1,71 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import { createElement, forwardRef, useCallback } from 'react';
+import classNames from 'classnames';
+import { LongPressEventType, useLongPress } from 'use-long-press';
+import styles from './Button.less';
+
+type Props = {
+    className?: string,
+    href?: string,
+    title?: string,
+    disabled?: boolean,
+    tabIndex?: number,
+    children: React.ReactNode,
+    onKeyDown?: (event: React.KeyboardEvent) => void,
+    onMouseDown?: (event: React.MouseEvent) => void,
+    onLongPress?: () => void,
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void,
+    onDoubleClick?: () => void,
+};
+
+const Button = forwardRef(({ className, href, disabled, children, onLongPress, onDoubleClick, ...props }: Props, ref) => {
+    const longPress = useLongPress(onLongPress!, { detect: LongPressEventType.Pointer });
+
+    const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (typeof props.onKeyDown === 'function') {
+            props.onKeyDown(event);
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            // @ts-expect-error: Property 'buttonClickPrevented' does not exist on type 'KeyboardEvent'.
+            if (!event.nativeEvent.buttonClickPrevented) {
+                event.currentTarget.click();
+            }
+        }
+    }, [props.onKeyDown]);
+
+    const onMouseDown = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+        if (typeof props.onMouseDown === 'function') {
+            props.onMouseDown(event);
+        }
+
+        // @ts-expect-error: Property 'buttonBlurPrevented' does not exist on type 'MouseEvent'.
+        if (!event.nativeEvent.buttonBlurPrevented) {
+            event.preventDefault();
+            if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+            }
+        }
+    }, [props.onMouseDown]);
+
+    return createElement(
+        typeof href === 'string' && href.length > 0 ? 'a' : 'div',
+        {
+            tabIndex: 0,
+            ...props,
+            ref,
+            className: classNames(className, styles['button-container'], { 'disabled': disabled }),
+            href,
+            onKeyDown,
+            onMouseDown,
+            onDoubleClick,
+            ...longPress()
+        },
+        children
+    );
+});
+
+export default Button;
+

src/components/Button/index.ts

@@ -0,0 +1,6 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import Button from './Button';
+
+export default Button;
+

src/components/Chips/Chip/Chip.tsx

@@ -2,7 +2,7 @@
 
 import React, { MouseEvent, memo, useCallback, useEffect, useRef } from 'react';
 import classNames from 'classnames';
-import Button from 'stremio/common/Button';
+import { Button } from 'stremio/components';
 import styles from './Chip.less';
 
 type Props = {

src/components/Chips/Chips.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import React, { memo } from 'react';
-import HorizontalScroll from '../HorizontalScroll';
+import { HorizontalScroll } from 'stremio/components';
 import Chip from './Chip';
 import styles from './Chips.less';
 

src/components/ColorInput/ColorInput.js

@@ -5,8 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const AColorPicker = require('a-color-picker');
 const { useTranslation } = require('react-i18next');
-const Button = require('stremio/common/Button');
-const ModalDialog = require('stremio/common/ModalDialog');
+const { Button, ModalDialog } = require('stremio/components');
 const useBinaryState = require('stremio/common/useBinaryState');
 const ColorPicker = require('./ColorPicker');
 const styles = require('./styles');

src/components/ContinueWatchingItem/ContinueWatchingItem.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const { useServices } = require('stremio/services');
-const LibItem = require('stremio/common/LibItem');
+const LibItem = require('stremio/components/LibItem');
 
 const ContinueWatchingItem = ({ _id, notifications, deepLinks, ...props }) => {
     const { core } = useServices();

src/components/EventModal/EventModal.js

@@ -2,8 +2,7 @@
 
 const React = require('react');
 const { useTranslation } = require('react-i18next');
-const Button = require('stremio/common/Button');
-const ModalDialog = require('stremio/common/ModalDialog');
+const { Button, ModalDialog } = require('stremio/components');
 const useEvents = require('./useEvents');
 const styles = require('./styles');
 const { default: Icon } = require('@stremio/stremio-icons/react');

src/components/EventModal/styles.less

@@ -2,7 +2,7 @@
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
-:import('~stremio/common/ModalDialog/styles.less') {
+:import('~stremio/components/ModalDialog/styles.less') {
     modal-dialog-content: modal-dialog-content;
     modal-dialog-container: modal-dialog-container;
 }

src/components/Image/Image.tsx

@@ -1,20 +1,30 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-const React = require('react');
-const PropTypes = require('prop-types');
+import React, { useCallback, useLayoutEffect, useState } from 'react';
 
-const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }) => {
-    const [broken, setBroken] = React.useState(false);
-    const onError = React.useCallback((event) => {
+type Props = {
+    className: string,
+    src: string,
+    alt: string,
+    fallbackSrc: string,
+    renderFallback: () => void,
+    onError: (event: React.SyntheticEvent<HTMLImageElement>) => void,
+};
+
+const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }: Props) => {
+    const [broken, setBroken] = useState(false);
+    const onError = useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
         if (typeof props.onError === 'function') {
             props.onError(event);
         }
 
         setBroken(true);
     }, [props.onError]);
-    React.useLayoutEffect(() => {
+
+    useLayoutEffect(() => {
         setBroken(false);
     }, [src]);
+
     return (broken || typeof src !== 'string' || src.length === 0) && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
         typeof renderFallback === 'function' ?
             renderFallback()
@@ -24,13 +34,4 @@ const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }) =
         <img {...props} className={className} src={src} alt={alt} loading='lazy' onError={onError} />;
 };
 
-Image.propTypes = {
-    className: PropTypes.string,
-    src: PropTypes.string,
-    alt: PropTypes.string,
-    fallbackSrc: PropTypes.string,
-    renderFallback: PropTypes.func,
-    onError: PropTypes.func
-};
-
-module.exports = Image;
+export default Image;

src/components/Image/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import Image from './Image';
+
+export default Image;

src/components/LibItem/LibItem.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const { useServices } = require('stremio/services');
 const PropTypes = require('prop-types');
-const MetaItem = require('stremio/common/MetaItem');
+const MetaItem = require('stremio/components/MetaItem');
 const { t } = require('i18next');
 
 const LibItem = ({ _id, removable, notifications, watched, ...props }) => {

src/components/MainNavBars/MainNavBars.tsx

@@ -1,10 +1,9 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
-const styles = require('./styles');
+import React, { memo } from 'react';
+import classnames from 'classnames';
+import { VerticalNavBar, HorizontalNavBar } from 'stremio/components/NavBar';
+import styles from './MainNavBars.less';
 
 const TABS = [
     { id: 'board', label: 'Board', icon: 'home', href: '#/' },
@@ -15,7 +14,14 @@ const TABS = [
     { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
 ];
 
-const MainNavBars = React.memo(({ className, route, query, children }) => {
+type Props = {
+    className: string,
+    route?: string,
+    query?: string,
+    children?: React.ReactNode,
+};
+
+const MainNavBars = memo(({ className, route, query, children }: Props) => {
     return (
         <div className={classnames(className, styles['main-nav-bars-container'])}>
             <HorizontalNavBar
@@ -37,13 +43,5 @@ const MainNavBars = React.memo(({ className, route, query, children }) => {
     );
 });
 
-MainNavBars.displayName = 'MainNavBars';
+export default MainNavBars;
 
-MainNavBars.propTypes = {
-    className: PropTypes.string,
-    route: PropTypes.string,
-    query: PropTypes.string,
-    children: PropTypes.node
-};
-
-module.exports = MainNavBars;

src/components/MainNavBars/index.ts

@@ -0,0 +1,6 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+import MainNavBars from './MainNavBars';
+
+export default MainNavBars;
+

src/components/MetaItem/MetaItem.js

@@ -6,9 +6,9 @@ const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const filterInvalidDOMProps = require('filter-invalid-dom-props').default;
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Image = require('stremio/common/Image');
-const Multiselect = require('stremio/common/Multiselect');
+const { default: Button } = require('stremio/components/Button');
+const { default: Image } = require('stremio/components/Image');
+const Multiselect = require('stremio/components/Multiselect');
 const useBinaryState = require('stremio/common/useBinaryState');
 const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS');
 const styles = require('./styles');

src/components/MetaItem/styles.less

@@ -3,21 +3,16 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
-:import('~stremio/common/Popup/styles.less') {
+:import('~stremio/components/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
 
-:import('~stremio/common/Multiselect/styles.less') {
+:import('~stremio/components/Multiselect/styles.less') {
     multiselect-menu-container: menu-container;
     multiselect-option-container: option-container;
     multiselect-option-label: label;
 }
 
-:import('~stremio/common/PlayIconCircleCentered/styles.less') {
-    play-icon-circle-centered-background: background;
-    play-icon-circle-centered-icon: icon;
-}
-
 @play-icon-size: 4rem;
 
 .meta-item-container {

src/components/MetaPreview/ActionButton/ActionButton.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
 const styles = require('./styles');
 const { Tooltip } = require('stremio/common/Tooltips');
 

src/components/MetaPreview/MetaLinks/MetaLinks.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
 const styles = require('./styles');
 
 const MetaLinks = ({ className, label, links }) => {

src/components/MetaPreview/MetaPreview.js

@@ -6,10 +6,10 @@ const classnames = require('classnames');
 const UrlUtils = require('url');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Image = require('stremio/common/Image');
-const ModalDialog = require('stremio/common/ModalDialog');
-const SharePrompt = require('stremio/common/SharePrompt');
+const { default: Button } = require('stremio/components/Button');
+const { default: Image } = require('stremio/components/Image');
+const ModalDialog = require('stremio/components/ModalDialog');
+const SharePrompt = require('stremio/components/SharePrompt');
 const CONSTANTS = require('stremio/common/CONSTANTS');
 const routesRegexp = require('stremio/common/routesRegexp');
 const useBinaryState = require('stremio/common/useBinaryState');

src/components/MetaRow/MetaRow.js

@@ -5,7 +5,7 @@ const ReactIs = require('react-is');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
 const CONSTANTS = require('stremio/common/CONSTANTS');
 const useTranslate = require('stremio/common/useTranslate');
 const MetaRowPlaceholder = require('./MetaRowPlaceholder');

src/components/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js

@@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
 const CONSTANTS = require('stremio/common/CONSTANTS');
 const styles = require('./styles');
 

src/components/ModalDialog/ModalDialog.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useRouteFocused, useModalsContainer } = require('stremio-router');
-const Button = require('stremio/common/Button');
+const { default: Button } = require('stremio/components/Button');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Modal } = require('stremio-router');
 const styles = require('./styles');

src/components/Multiselect/Multiselect.js

@@ -4,9 +4,9 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Popup = require('stremio/common/Popup');
-const ModalDialog = require('stremio/common/ModalDialog');
+const { Button } = require('stremio/components');
+const Popup = require('stremio/components/Popup');
+const ModalDialog = require('stremio/components/ModalDialog');
 const useBinaryState = require('stremio/common/useBinaryState');
 const styles = require('./styles');
 

src/components/Multiselect/styles.less

@@ -3,7 +3,7 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
-:import('~stremio/common/Popup/styles.less') {
+:import('~stremio/components/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
 

src/components/MultiselectMenu/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import React, { useRef, useEffect, useCallback } from 'react';
-import Button from 'stremio/common/Button';
+import { Button } from 'stremio/components';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import Option from './Option';

src/components/MultiselectMenu/Dropdown/Option/Option.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useMemo, forwardRef } from 'react';
 import classNames from 'classnames';
-import Button from 'stremio/common/Button';
+import { Button } from 'stremio/components';
 import styles from './Option.less';
 import Icon from '@stremio/stremio-icons/react';
 

src/components/MultiselectMenu/MultiselectMenu.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
 import React from 'react';
-import Button from 'stremio/common/Button';
+import { Button } from 'stremio/components';
 import useBinaryState from 'stremio/common/useBinaryState';
 import Dropdown from './Dropdown';
 import classNames from 'classnames';

src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -4,8 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
-const Button = require('stremio/common/Button');
-const Image = require('stremio/common/Image');
+const { Button, Image } = require('stremio/components');
 const useFullscreen = require('stremio/common/useFullscreen');
 const usePWA = require('stremio/common/usePWA');
 const SearchBar = require('./SearchBar');

src/components/NavBar/HorizontalNavBar/NavMenu/NavMenu.js

@@ -4,7 +4,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { useRouteFocused } = require('stremio-router');
-const Popup = require('stremio/common/Popup');
+const Popup = require('stremio/components/Popup');
 const useBinaryState = require('stremio/common/useBinaryState');
 const NavMenuContent = require('./NavMenuContent');
 const styles = require('./styles.less');

src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js

@@ -6,7 +6,7 @@ const classnames = require('classnames');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useServices } = require('stremio/services');
-const Button = require('stremio/common/Button');
+const { Button } = require('stremio/components');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
 const usePWA = require('stremio/common/usePWA');

src/components/NavBar/HorizontalNavBar/NavMenu/styles.less

@@ -3,7 +3,7 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 @import (reference) '~stremio/common/screen-sizes.less';
 
-:import('~stremio/common/Popup/styles.less') {
+:import('~stremio/components/Popup/styles.less') {
     popup-menu-container: menu-container;
 }
 

src/components/NavBar/HorizontalNavBar/SearchBar/SearchBar.js

@@ -7,14 +7,13 @@ const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { useRouteFocused } = require('stremio-router');
-const Button = require('stremio/common/Button');
+const { Button, TextInput } = require('stremio/components');
 const useTorrent = require('stremio/common/useTorrent');
 const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const useSearchHistory = require('./useSearchHistory');
 const useLocalSearch = require('./useLocalSearch');
 const styles = require('./styles');
 const useBinaryState = require('stremio/common/useBinaryState');
-const { default: TextInput } = require('stremio/common/TextInput');
 
 const SearchBar = React.memo(({ className, query, active }) => {
     const { t } = useTranslation();