Merge pull request #318 from ZeroGachis/fix/remove-hard-lib

remove hardware on a design library

Author: ulricden

Storybook/package-lock.json

@@ -28,7 +28,6 @@
     "react-dom": "^18.2.0",
     "react-native": "0.72.4",
     "react-native-code-push": "^8.1.0",
-    "react-native-device-info": "^10.12.0",
     "react-native-drop-shadow": "^0.0.6",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-icomoon": "^0.1.1",

Storybook/package.json

@@ -1,5 +1 @@
 import '@testing-library/react-native/extend-expect';
-//This 2 following lines are mandatory since we add and use react-native-device-info
-import mockRNDeviceInfo from 'react-native-device-info/jest/react-native-device-info-mock';
-// eslint-disable-next-line no-undef
-jest.mock('react-native-device-info', () => mockRNDeviceInfo);

jest.setup.ts

@@ -75,7 +75,6 @@
     "@gorhom/bottom-sheet": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-device-info": "*",
     "react-native-drop-shadow": "*",
     "react-native-gesture-handler": "*",
     "react-native-icomoon": "*",

modules.d.ts

@@ -2,19 +2,19 @@ import React from 'react';
 import { SafeAreaView, ViewStyle, StatusBar, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../styles/themes';
-import DeviceInfo from 'react-native-device-info';
 import type { WithTestID } from 'src/shared/type';
 
 type Props = WithTestID<{
     children?: React.ReactNode;
     style?: ViewStyle;
     statusBarColor?: string;
+    isTablet?: boolean;
 }>;
 
-export const Screen = ({ children, style, testID, statusBarColor }: Props) => {
+export const Screen = ({ children, style, testID, statusBarColor, isTablet = true }: Props) => {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
-    const isTablet = DeviceInfo.isTablet();
+
 
     const styles = StyleSheet.create({
         screen: {

package-lock.json

@@ -5,7 +5,6 @@ import { Button } from '../buttons/Button';
 import { Headline } from '../typography/Headline';
 import { DialogIcon, DialogIconProps } from './ModalIcon';
 import { useTheme } from '../../styles/themes';
-import DeviceInfo from 'react-native-device-info';
 
 interface Action {
     label: string;
@@ -33,10 +32,11 @@ export interface ModalProps extends PropsWithChildren {
     dismissable?: boolean;
     onDismiss?: () => void;
     actions: ModalActions;
+    isTablet?: boolean;
 }
 
 export const Modal = (props: ModalProps) => {
-    const { style, actionsStyle, leftActionsStyle, rightActionsStyle, actions, variant } = props;
+    const { style, actionsStyle, leftActionsStyle, rightActionsStyle, actions, variant, isTablet = true } = props;
 
     const styles = useStyles({
         style,
@@ -45,6 +45,7 @@ export const Modal = (props: ModalProps) => {
         rightActionsStyle,
         cancel: actions.cancel,
         variant,
+        isTablet,
     });
 
     return (
@@ -113,7 +114,7 @@ export const Modal = (props: ModalProps) => {
 
 type UseStylesProps = Pick<
     ModalProps,
-    'style' | 'actionsStyle' | 'leftActionsStyle' | 'rightActionsStyle' | 'variant'
+    'style' | 'actionsStyle' | 'leftActionsStyle' | 'rightActionsStyle' | 'variant' | 'isTablet'
 > & {
     cancel: ModalProps['actions']['cancel'];
 };
@@ -125,6 +126,7 @@ function useStyles({
     rightActionsStyle,
     cancel,
     variant,
+    isTablet,
 }: UseStylesProps) {
     const theme = useTheme();
 
@@ -202,5 +204,5 @@ function useStyles({
             rightOption: commonStyleSheet.rightOption,
         });
 
-    return DeviceInfo.isTablet() ? createTabletStyle() : createMobileStyle();
+    return isTablet ? createTabletStyle() : createMobileStyle();
 }

package.json

@@ -3,7 +3,6 @@ import { Appbar } from 'react-native-paper';
 import { useTheme } from '../../styles/themes';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { Headline } from '../typography/Headline';
-import DeviceInfo from 'react-native-device-info';
 import type { WithTestID } from 'src/shared/type';
 import TopAppBarAction from './TopAppBarAction';
 import { TopAppBarMenu } from './Menu/TopAppBarMenu';
@@ -20,10 +19,9 @@ export type TopAppBarProps = WithTestID<{
     onBack?: () => void;
     style?: ViewStyle;
     action?: ReactNode;
+    isTablet?: boolean;
 }>;
 
-const isTablet = DeviceInfo.isTablet();
-
 // eslint-disable-next-line react/function-component-definition
 export function TopAppBar({
     size = 'small',
@@ -32,8 +30,9 @@ export function TopAppBar({
     style,
     testID,
     action,
+    isTablet = true,
 }: TopAppBarProps) {
-    const styles = useStyles(size, style);
+    const styles = useStyles(size, style, isTablet);
 
     const headlineSize = isTablet ? 'n1' : isTitleBelowTopAppBar(size) ? 'n2' : 'n1';
 
@@ -69,7 +68,7 @@ TopAppBar.Action = TopAppBarAction;
 TopAppBar.Menu = TopAppBarMenu;
 TopAppBar.MenuItem = TopAppBarMenuItem;
 
-function useStyles(size: TopAppBarProps['size'], style: TopAppBarProps['style']) {
+function useStyles(size: TopAppBarProps['size'], style: TopAppBarProps['style'], isTablet: TopAppBarProps['isTablet']) {
     const theme = useTheme();
 
     return StyleSheet.create({

src/components/Screen.tsx

@@ -1,13 +1,15 @@
 import React, { ComponentProps } from 'react';
 import { Appbar } from 'react-native-paper';
 import { Theme, useTheme } from '../../styles/themes';
-import DeviceInfo from 'react-native-device-info';
 import { StyleSheet } from 'react-native';
 
-type TopAppBarActionProps = ComponentProps<typeof Appbar.Action>;
+type TopAppBarActionProps = ComponentProps<typeof Appbar.Action> & {
+    isTablet?: boolean;
+};
 const TopAppBarAction = (props: TopAppBarActionProps) => {
+    const { isTablet = true } = props;
     const theme = useTheme();
-    const styles = useStyles(theme);
+    const styles = useStyles(theme, isTablet);
 
     return (
         <Appbar.Action
@@ -20,9 +22,7 @@ const TopAppBarAction = (props: TopAppBarActionProps) => {
     );
 };
 
-function useStyles(theme: Theme) {
-    const isTablet = DeviceInfo.isTablet();
-
+function useStyles(theme: Theme, isTablet: boolean) {
     return StyleSheet.create({
         button: {
             backgroundColor: theme.sw.color.neutral[300],