refactor: 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/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 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/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/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.js

@@ -3,7 +3,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
+const { VerticalNavBar, HorizontalNavBar } = require('stremio/components/NavBar');
 const styles = require('./styles');
 
 const TABS = [

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 Button = require('stremio/components/Button');
+const 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 Button = require('stremio/components/Button');
+const 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 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 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 } 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();

src/components/NavBar/VerticalNavBar/NavTabButton/NavTabButton.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 styles = require('./styles');
 
 const NavTabButton = ({ className, logo, icon, label, href, selected, onClick }) => {