feat!: remove setters from mobile hooks (#1262)

.storybook/decorators/withMobile.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 
 import type {Decorator} from '@storybook/react';
 
-import {useMobile} from '../../src';
+import {MobileProvider} from '../../src';
 
 export const WithMobile: Decorator = (Story, context) => {
-    const mobileValue = context.globals.platform === 'mobile';
+    const platform = context.globals.platform;
 
-    const [, setMobile] = useMobile(); // eslint-disable-line react-hooks/rules-of-hooks
-
-    React.useEffect(() => {
-        setMobile(mobileValue);
-    }, [mobileValue]);
-
-    return <Story {...context} />;
+    return (
+        <MobileProvider mobile={platform === 'mobile'} platform={platform}>
+            <Story key={platform} {...context} />
+        </MobileProvider>
+    );
 };

.storybook/decorators/withStrictMode.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type {Decorator} from '@storybook/react';
+
+export const WithStrictMode: Decorator = (Story, context) => {
+    const children = <Story {...context} />;
+
+    if (context.parameters?.disableStrictMode) {
+        return children;
+    }
+
+    return <React.StrictMode>{children}</React.StrictMode>;
+};

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import type {Decorator} from '@storybook/react';
+
+import {ThemeProvider} from '../../src';
+
+export const WithTheme: Decorator = (Story, context) => {
+    return (
+        <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
+            <Story {...context} />
+        </ThemeProvider>
+    );
+};

.storybook/preview.tsx

@@ -3,46 +3,19 @@ import '../styles/fonts.scss';
 // eslint-disable-next-line import/order
 import '../styles/styles.scss';
 
-import React from 'react';
-
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
-import type {Decorator, Preview} from '@storybook/react';
+import type {Preview} from '@storybook/react';
 
-import {Lang, MobileProvider, ThemeProvider, configure} from '../src';
 import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator';
 
 import {WithLang} from './decorators/withLang';
 import {WithMobile} from './decorators/withMobile';
+import {WithStrictMode} from './decorators/withStrictMode';
+import {WithTheme} from './decorators/withTheme';
 import {themes} from './theme';
 
-configure({
-    lang: Lang.En,
-});
-
-const withContextProvider: Decorator = (Story, context) => {
-    if (context.parameters?.disableStrictMode) {
-        return (
-            <ThemeProvider theme={context.globals.theme}>
-                <MobileProvider>
-                    <Story {...context} />
-                </MobileProvider>
-            </ThemeProvider>
-        );
-    }
-
-    return (
-        <React.StrictMode>
-            <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
-                <MobileProvider>
-                    <Story {...context} />
-                </MobileProvider>
-            </ThemeProvider>
-        </React.StrictMode>
-    );
-};
-
 const preview: Preview = {
-    decorators: [WithMobile, WithLang, withContextProvider],
+    decorators: [WithLang, WithMobile, WithTheme, WithStrictMode],
     parameters: {
         docs: {
             theme: themes.light,

src/components/Pagination/Pagination.tsx

@@ -31,7 +31,7 @@ export const Pagination = ({
     className,
     qa,
 }: PaginationProps) => {
-    const [mobile] = useMobile();
+    const mobile = useMobile();
 
     const size = mobile ? 'l' : 'm';
     const compact = mobile ? true : propCompact;

src/components/Select/Select.tsx

@@ -79,7 +79,7 @@ export const Select = React.forwardRef<HTMLButtonElement, SelectProps>(function
         onClose,
         id,
     } = props;
-    const [mobile] = useMobile();
+    const mobile = useMobile();
     const [{filter}, dispatch] = React.useReducer(reducer, initialState);
     // to avoid problem with incorrect popper offset calculation
     // for example: https://github.com/radix-ui/primitives/issues/1567

src/components/Toaster/ToasterComponent/ToasterComponent.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 export function ToasterComponent({className, mobile, hasPortal = true}: Props) {
-    const [defaultMobile] = useMobile();
+    const defaultMobile = useMobile();
     const {remove} = useToaster();
     const list = React.useContext(ToastsContext);
 

src/components/mobile/MobileContext.ts

@@ -19,17 +19,13 @@ export interface MobileContextProps {
     platform: Platform;
     useHistory: () => History;
     useLocation: () => Location;
-    setMobile: (mobile: boolean, platform?: Platform) => void;
-    setPlatform: (platform: Platform) => void;
 }
 
 const initialValue: MobileContextProps = {
     mobile: false,
     platform: Platform.BROWSER,
     useHistory: () => ({action: '', replace() {}, push() {}, goBack() {}}),
     useLocation: () => ({pathname: '', search: '', hash: ''}),
-    setMobile: () => {},
-    setPlatform: () => {},
 };
 
 export const MobileContext = React.createContext(initialValue);

src/components/mobile/MobileProvider.tsx

@@ -28,9 +28,6 @@ export function MobileProvider({
     useLocation = useLocationMock,
     children,
 }: MobileProviderProps) {
-    const [mobileValue, setMobile] = React.useState(mobile);
-    const [platformValue, setPlatform] = React.useState(platform);
-
     const useHistoryFunction: MobileContextProps['useHistory'] = React.useCallback(
         function useHistoryFunction() {
             const {goBack, back, ...props} = useHistory();
@@ -51,19 +48,17 @@ export function MobileProvider({
     );
 
     React.useEffect(() => {
-        document.body.classList.toggle(rootMobileClassName, mobileValue);
-    }, [rootMobileClassName, mobileValue]);
+        document.body.classList.toggle(rootMobileClassName, mobile);
+    }, [rootMobileClassName, mobile]);
 
-    const state: MobileContextProps = React.useMemo(() => {
+    const contextValue: MobileContextProps = React.useMemo(() => {
         return {
-            mobile: mobileValue,
-            setMobile,
-            platform: platformValue,
-            setPlatform,
+            mobile,
+            platform,
             useLocation,
             useHistory: useHistoryFunction,
         };
-    }, [mobileValue, platformValue, useLocation, useHistoryFunction]);
+    }, [mobile, platform, useLocation, useHistoryFunction]);
 
-    return <MobileContext.Provider value={state}>{children}</MobileContext.Provider>;
+    return <MobileContext.Provider value={contextValue}>{children}</MobileContext.Provider>;
 }

src/components/mobile/useMobile.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import {MobileContext} from './MobileContext';
-import type {MobileContextProps as Props} from './MobileContext';
+import type {MobileContextProps} from './MobileContext';
 
-export function useMobile(): [Props['mobile'], Props['setMobile']] {
-    const {mobile, setMobile} = React.useContext(MobileContext);
-    return [mobile, setMobile];
+export function useMobile(): MobileContextProps['mobile'] {
+    return React.useContext(MobileContext).mobile;
 }

src/components/mobile/usePlatform.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import {MobileContext} from './MobileContext';
-import type {MobileContextProps as Props} from './MobileContext';
+import type {MobileContextProps} from './MobileContext';
 
-export function usePlatform(): [Props['platform'], Props['setPlatform']] {
-    const {platform, setPlatform} = React.useContext(MobileContext);
-    return [platform, setPlatform];
+export function usePlatform(): MobileContextProps['platform'] {
+    return React.useContext(MobileContext).platform;
 }

src/components/mobile/withMobile.tsx

@@ -27,8 +27,6 @@ export function withMobile<T extends WithMobileProps>(
                     platform={this.context.platform}
                     useHistory={this.context.useHistory}
                     useLocation={this.context.useLocation}
-                    setMobile={this.context.setMobile}
-                    setPlatform={this.context.setPlatform}
                 />
             );
         }