feat: add necessary component to handle image, icon, errors

Author: JeremyDolle

template/__mocks__/TestAppWrapper.tsx

@@ -0,0 +1,21 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { type PropsWithChildren } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { ThemeProvider } from '@/theme';
+
+import '@/translations';
+
+import { queryClient, storage } from '@/App';
+
+function TestAppWrapper({ children }: PropsWithChildren) {
+  return (
+    <GestureHandlerRootView>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider storage={storage}>{children}</ThemeProvider>
+      </QueryClientProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+export default TestAppWrapper;

template/package.json

@@ -25,6 +25,7 @@
     "intl-pluralrules": "^2.0.1",
     "ky": "^1.2.4",
     "react": "18.3.1",
+    "react-error-boundary": "^4.0.13",
     "react-i18next": "^14.1.0",
     "react-native": "0.75.4",
     "react-native-gesture-handler": "^2.16.0",

template/src/App.tsx

@@ -1,24 +1,27 @@
 import 'react-native-gesture-handler';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { MMKV } from 'react-native-mmkv';
 
 import { ThemeProvider } from '@/theme';
 import ApplicationNavigator from '@/navigations/Application';
 
-import './translations';
+import '@/translations';
 
 export const queryClient = new QueryClient();
 
 export const storage = new MMKV();
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider storage={storage}>
-        <ApplicationNavigator />
-      </ThemeProvider>
-    </QueryClientProvider>
+    <GestureHandlerRootView>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider storage={storage}>
+          <ApplicationNavigator />
+        </ThemeProvider>
+      </QueryClientProvider>
+    </GestureHandlerRootView>
   );
 }
 

template/src/components/atoms/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,26 @@
+import type { ErrorInfo } from 'react';
+import type { ErrorBoundaryPropsWithFallback } from 'react-error-boundary';
+
+import { ErrorBoundary as DefaultErrorBoundary } from 'react-error-boundary';
+import { View } from 'react-native';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+type Props = Optional<ErrorBoundaryPropsWithFallback, 'fallback'>;
+
+function ErrorBoundary({ fallback = <View />, onError, ...props }: Props) {
+  const onErrorReportCrashlytics = (error: Error, info: ErrorInfo) => {
+    // use any crash reporting tool here
+    return onError?.(error, info);
+  };
+
+  return (
+    <DefaultErrorBoundary
+      {...props}
+      fallback={fallback}
+      onError={onErrorReportCrashlytics}
+    />
+  );
+}
+
+export default ErrorBoundary;

template/src/components/atoms/IconByVariant/IconByVariant.tsx

@@ -14,7 +14,7 @@ type Props = SvgProps & {
 const icons = getAssetsContext('icons');
 const EXTENSION = 'svg';
 
-function IconByVariant({ path, ...props }: Props) {
+function IconByVariant({ path, width = 24, height = 24, ...props }: Props) {
   const [icon, setIcon] = useState<ReactElement<SvgProps>>();
   const { variant } = useTheme();
 
@@ -59,11 +59,13 @@ function IconByVariant({ path, ...props }: Props) {
         ...icon,
         props: {
           ...icon.props,
+          height,
+          width,
           ...currentProps,
         },
       };
     },
-    [icon],
+    [icon, width, height],
   );
 
   return <Component {...props} />;

template/src/components/atoms/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react-native';
+import { Text } from 'react-native';
+
+import TestAppWrapper from '@/../__mocks__/TestAppWrapper';
+
+import SkeletonLoader from './Skeleton';
+
+describe('SkeletonLoader', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  it('renders children when not loading', () => {
+    const { getByText } = render(
+      <SkeletonLoader loading={false}>
+        <Text>Loaded Content</Text>
+      </SkeletonLoader>,
+      {
+        wrapper: TestAppWrapper,
+      },
+    );
+    expect(getByText('Loaded Content')).toBeTruthy();
+  });
+
+  it('renders skeleton when loading', () => {
+    const { getByTestId } = render(<SkeletonLoader loading />, {
+      wrapper: TestAppWrapper,
+    });
+    const skeleton = getByTestId('skeleton-loader');
+    jest.advanceTimersByTime(800);
+    expect(skeleton).toBeTruthy();
+  });
+
+  it('applies correct height and width', () => {
+    const { getByTestId } = render(
+      <SkeletonLoader height={50} loading width={100} />,
+      { wrapper: TestAppWrapper },
+    );
+    const skeleton = getByTestId('skeleton-loader');
+    expect(skeleton).toHaveAnimatedStyle({
+      opacity: 0.2,
+    });
+    jest.advanceTimersByTime(800);
+    expect(skeleton).toHaveAnimatedStyle({
+      opacity: 1,
+    });
+    expect(skeleton).toHaveStyle({
+      backgroundColor: '#A1A1A1',
+      borderRadius: 4,
+      height: 50,
+      width: 100,
+    });
+  });
+});

template/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,71 @@
+import type { DimensionValue, ViewProps } from 'react-native';
+
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useTheme } from '@/theme';
+
+type Props = ViewProps & {
+  height?: DimensionValue;
+  loading?: boolean;
+  width?: DimensionValue;
+};
+
+const FROM = 0.2;
+const TO = 1;
+
+function SkeletonLoader({
+  children,
+  height = 24,
+  loading = false,
+  width = '100%',
+  ...props
+}: Props) {
+  const { backgrounds, borders } = useTheme();
+
+  const opacity = useSharedValue(FROM);
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  useEffect(() => {
+    if (!loading) {
+      return;
+    }
+    opacity.value = withRepeat(withTiming(TO, { duration: 800 }), -1, true);
+  }, [loading, opacity]);
+
+  return (
+    <View
+      {...props}
+      style={[{ minHeight: height, minWidth: width }, props.style]}
+    >
+      {loading ? (
+        <Animated.View
+          style={[
+            animatedStyles,
+            backgrounds.skeleton,
+            borders.rounded_4,
+            {
+              height,
+              width,
+            },
+            props.style,
+          ]}
+          testID="skeleton-loader"
+        />
+      ) : (
+        children
+      )}
+    </View>
+  );
+}
+
+export default SkeletonLoader;

template/src/components/atoms/index.ts

@@ -1,2 +1,4 @@
 export { default as AssetByVariant } from './AssetByVariant/AssetByVariant';
+export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
 export { default as IconByVariant } from './IconByVariant/IconByVariant';
+export { default as Skeleton } from './Skeleton/Skeleton';

template/src/components/molecules/Brand/Brand.test.tsx

@@ -1,30 +1,17 @@
 import type { ViewStyle } from 'react-native';
 
-import { render, screen } from '@testing-library/react-native';
-import { MMKV } from 'react-native-mmkv';
+import { render } from '@testing-library/react-native';
 
-import { ThemeProvider } from '@/theme';
+import TestAppWrapper from '@/../__mocks__/TestAppWrapper';
 
 import Brand from './Brand';
 
 describe('Brand component should render correctly', () => {
-  let storage: MMKV;
-
-  beforeAll(() => {
-    storage = new MMKV();
-  });
-
   test('with default props if not precises (height: 200, width: 200, resizeMode: "contain")', () => {
-    const component = (
-      <ThemeProvider storage={storage}>
-        <Brand />
-      </ThemeProvider>
-    );
-
-    render(component);
+    const { getByTestId } = render(<Brand />, { wrapper: TestAppWrapper });
 
-    const wrapper = screen.getByTestId('brand-img-wrapper');
-    const img = screen.getByTestId('brand-img');
+    const wrapper = getByTestId('brand-img-wrapper');
+    const img = getByTestId('brand-img');
 
     // Props set correctly
     expect((wrapper.props.style as ViewStyle).height).toBe(200);
@@ -33,16 +20,13 @@ describe('Brand component should render correctly', () => {
   });
 
   test('with passed props', () => {
-    const component = (
-      <ThemeProvider storage={storage}>
-        <Brand height={100} resizeMode="cover" width={100} />
-      </ThemeProvider>
+    const { getByTestId } = render(
+      <Brand height={100} resizeMode="cover" width={100} />,
+      { wrapper: TestAppWrapper },
     );
 
-    render(component);
-
-    const wrapper = screen.getByTestId('brand-img-wrapper');
-    const img = screen.getByTestId('brand-img');
+    const wrapper = getByTestId('brand-img-wrapper');
+    const img = getByTestId('brand-img');
 
     expect((wrapper.props.style as ViewStyle).height).toBe(100);
     expect((wrapper.props.style as ViewStyle).width).toBe(100);

template/src/components/molecules/DefaultError/DefaultError.tsx

@@ -0,0 +1,57 @@
+import { useErrorBoundary } from 'react-error-boundary';
+import { useTranslation } from 'react-i18next';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { useTheme } from '@/theme';
+
+import { IconByVariant } from '@/components/atoms';
+
+type Props = {
+  onReset?: () => void;
+};
+
+function DefaultErrorScreen({ onReset }: Props) {
+  const { gutters, layout, colors, fonts } = useTheme();
+  const { t } = useTranslation();
+  const { resetBoundary } = useErrorBoundary();
+
+  return (
+    <View
+      style={[
+        layout.flex_1,
+        layout.justifyCenter,
+        layout.itemsCenter,
+        gutters.gap_16,
+        gutters.padding_16,
+      ]}
+    >
+      <IconByVariant
+        height={42}
+        path="fire"
+        stroke={colors.red500}
+        width={42}
+      />
+      <Text style={[fonts.gray800, fonts.bold, fonts.size_16]}>
+        {t('error_boundary.title')}
+      </Text>
+      <Text style={[fonts.gray800, fonts.size_12, fonts.alignCenter]}>
+        {t('error_boundary.description')}
+      </Text>
+
+      {onReset && (
+        <TouchableOpacity
+          onPress={() => {
+            resetBoundary();
+            onReset?.();
+          }}
+        >
+          <Text style={[fonts.gray800, fonts.size_16]}>
+            {t('error_boundary.cta')}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+export default DefaultErrorScreen;

template/src/components/molecules/index.ts

@@ -1 +1,2 @@
 export { default as Brand } from './Brand/Brand';
+export { default as DefaultError } from './DefaultError/DefaultError';