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/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/common/AddonDetailsModal/AddonDetails/AddonDetails.js → 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/common/AddonDetailsModal/AddonDetailsModal.js → 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/common/AddonDetailsModal/styles.less → 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/common/BottomSheet/BottomSheet.tsx → 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/common/Chips/Chip/Chip.tsx → 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/common/Chips/Chips.tsx → 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/common/ColorInput/ColorInput.js → 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/common/ContinueWatchingItem/ContinueWatchingItem.js → 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/common/EventModal/EventModal.js → 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/common/EventModal/styles.less → 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;
 }