build: migrate to expo sdk 49 (#451)

## Description

https://blog.expo.dev/expo-sdk-49-c6d398cdf740

### Issue

When upgrading project to expo SDK 49, we can't run the project on `web`
because of `stylis` and `metro` module resolution conflicts
expo/expo#23412 (comment).

Resolve `doc build` with
hipstersmoothie/react-docgen-typescript-plugin#78 (comment)
in
[b500f4f](b500f4f)


## Checklist

Before you create this PR confirms that it meets all requirements listed
below by checking the relevant checkboxes (`[x]`). This will ensure a
smooth and quick review process.

- [x] I read the [Contributor
Guide](https://github.com/dooboolab-community/dooboo-ui/blob/main/CONTRIBUTING.md)
and followed the process outlined there for submitting PRs.
- [x] Run `yarn test:all` and make sure nothing fails.
- [x] I am willing to follow-up on review comments in a timely manner.

babel.config.js

@@ -20,7 +20,6 @@ module.exports = (api) => {
       '@babel/plugin-syntax-dynamic-import',
       '@babel/plugin-transform-modules-commonjs',
       'react-native-reanimated/plugin',
-      '@babel/plugin-proposal-export-namespace-from',
     ],
   };
 };

docs/.storybook/main.js

@@ -1,4 +1,7 @@
 module.exports = {
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin'
+  },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-essentials',

docs/package.json

@@ -39,6 +39,7 @@
     "babel-preset-expo": "^9.2.2",
     "file-loader": "^6.2.0",
     "react": "^17",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-dom": "^17",
     "react-native-unimodules": "^0.14.10",
     "storybook-dark-mode": "^2.1.1",

docs/yarn.lock

@@ -10771,6 +10771,19 @@ react-dev-utils@~11.0.1:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
+react-docgen-typescript-plugin@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.5.tgz#015d8350b06a450d98000080d8ae5eac475e9f79"
+  integrity sha512-Ds6s2ioyIlH45XSfEVMNwRcDkzuff3xQCPxDFOzTc8GEshy+hksas8RYlmV4JEQREI+OGEGybhMCJk3vFbQZNQ==
+  dependencies:
+    debug "^4.1.1"
+    endent "^2.0.1"
+    find-cache-dir "^3.3.1"
+    flat-cache "^3.0.4"
+    micromatch "^4.0.2"
+    react-docgen-typescript "^2.2.2"
+    tslib "^2.0.0"
+
 react-docgen-typescript@^2.1.1, react-docgen-typescript@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"

main/uis/Accordion/__tests__/Accordion.test.tsx

@@ -5,14 +5,13 @@ import type {RenderAPI} from '@testing-library/react-native';
 import {fireEvent, render} from '@testing-library/react-native';
 
 import {createComponent, createTestProps} from '../../../../test/testUtils';
-import type {AccordionItemDataType} from '../../..';
 import {Accordion} from '../../..';
 
 let props: any;
 let component: ReactElement;
 let testingLib: RenderAPI;
 
-const data: AccordionItemDataType<string, string>[] = [
+const data: any[] = [
   {
     title: 'title1',
     items: ['body1', 'body2', 'body3'],

main/uis/ButtonGroup/__tests__/ButtonGroup.test.tsx

@@ -11,7 +11,11 @@ let testingLib: RenderAPI;
 
 const Component = (props?: ComponentProps<typeof ButtonGroup>): ReactElement =>
   createComponent(
-    <ButtonGroup options={['Option1', 'Option2', 'Option3']} {...props} />,
+    <ButtonGroup
+      options={['Option1', 'Option2', 'Option3']}
+      initialValue="Option1"
+      {...props}
+    />,
   );
 
 describe('[ButtonGroup]', () => {
@@ -29,6 +33,7 @@ describe('[ButtonGroup]', () => {
       testingLib = render(
         Component({
           options: ['Button 1', 'Button 2'],
+          initialValue: 'Button 1',
           onValueChange: mockPress,
         }),
       );
@@ -51,6 +56,7 @@ describe('[ButtonGroup]', () => {
         Component({
           testID: 'button-group-test',
           options: ['Button 1', 'Button 2'],
+          initialValue: 'Button 1',
           color: 'secondary',
         }),
       );

main/uis/RadioGroup/__tests__/RadioGroup.test.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {View} from 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
-import {act, fireEvent, render} from '@testing-library/react-native';
+import {act, fireEvent, render, waitFor} from '@testing-library/react-native';
 
 import {createComponent, createTestProps} from '../../../../test/testUtils';
-import type {RadioButtonType} from '../RadioButton';
+import type {RadioButtonType} from '..';
 import {RadioButton} from '../RadioButton';
 import {RadioGroup} from '..';
 
@@ -15,7 +15,7 @@ let testingLib: RenderAPI;
 const data = ['Person', 'Animal', 'Bird', 'Other'];
 
 describe('[RadioButton] render', () => {
-  it('should render without crashing', () => {
+  it('should render without crashing', async () => {
     props = createTestProps({
       selectedValue: data[0],
       selectValue: (value: string) => (props.selectedValue = value),
@@ -34,13 +34,12 @@ describe('[RadioButton] render', () => {
 
     testingLib = render(component);
 
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
   });
 
   describe('label', () => {
-    it('should render `labels`', () => {
+    it('should render `labels`', async () => {
       props = createTestProps();
 
       component = createComponent(
@@ -58,12 +57,11 @@ describe('[RadioButton] render', () => {
 
       testingLib = render(component);
 
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
+      const baseElement = await waitFor(() => testingLib.toJSON());
+      expect(baseElement).toBeTruthy();
     });
 
-    it('should render `labels` with left position', () => {
+    it('should render `labels` with left position', async () => {
       props = createTestProps();
 
       component = createComponent(
@@ -82,9 +80,8 @@ describe('[RadioButton] render', () => {
 
       testingLib = render(component);
 
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
+      const baseElement = await waitFor(() => testingLib.toJSON());
+      expect(baseElement).toBeTruthy();
     });
   });
 
@@ -108,7 +105,6 @@ describe('[RadioButton] render', () => {
     testingLib = render(component);
 
     const secondOption = testingLib.getByTestId('radio-1');
-
     expect(props.selectedValue).toEqual(data[0]);
 
     fireEvent.press(secondOption);
@@ -165,7 +161,7 @@ describe('[RadioButton]', () => {
       'danger',
     ];
 
-    it('should render all colors', () => {
+    it('should render all colors', async () => {
       component = createComponent(
         <View>
           {types.map((el) => {
@@ -186,21 +182,19 @@ describe('[RadioButton]', () => {
 
       testingLib = render(component);
 
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
+      const baseElement = await waitFor(() => testingLib.toJSON());
+      expect(baseElement).toBeTruthy();
     });
 
-    it('should render `disabled color', () => {
+    it('should render `disabled color', async () => {
       component = createComponent(
         <RadioButton disabled={true} label="label" />,
       );
 
       testingLib = render(component);
 
-      const json = testingLib.toJSON();
-
-      expect(json).toBeTruthy();
+      const baseElement = await waitFor(() => testingLib.toJSON());
+      expect(baseElement).toBeTruthy();
     });
   });
 });

main/uis/SwitchToggle/__tests__/SwitchToggle.test.tsx

@@ -1,24 +1,30 @@
 import type {ReactElement} from 'react';
 import React from 'react';
 import {Text} from 'react-native';
-import renderer from 'react-test-renderer';
-import {fireEvent, render} from '@testing-library/react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {fireEvent, render, waitFor} from '@testing-library/react-native';
 
 import {createComponent} from '../../../../test/testUtils';
 import {SwitchToggle} from '..';
 
+let testingLib: RenderAPI;
+
 describe('[SwitchToggle]', () => {
   const handlePress = jest.fn();
 
   beforeEach(() => {
     handlePress.mockClear();
   });
 
-  it('handles press event', () => {
-    const {getByRole} = render(
+  it('handles press event', async () => {
+    testingLib = render(
       createComponent(<SwitchToggle isOn={false} onPress={handlePress} />),
     );
 
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+
+    const {getByRole} = testingLib;
     fireEvent.press(getByRole('switch'));
     expect(handlePress).toBeCalled();
   });
@@ -46,20 +52,21 @@ describe('[SwitchToggle]', () => {
     );
 
   context('when switch toggle is on', () => {
-    it('renders as on state', () => {
-      const component = renderer.create(getSwitchToggle({isOn: true})).toJSON();
+    it('renders as on state', async () => {
+      testingLib = render(createComponent(getSwitchToggle({isOn: true})));
 
-      expect(component).toBeTruthy();
+      const baseElement = await waitFor(() => testingLib.toJSON());
+      expect(baseElement).toBeTruthy();
     });
   });
 
   context('when switch toggle is off', () => {
     it('renders as off state', () => {
-      const component = renderer
-        .create(getSwitchToggle({isOn: false}))
-        .toJSON();
+      const component = createComponent(getSwitchToggle({isOn: false}));
+      testingLib = render(component);
 
-      expect(component).toBeTruthy();
+      const baseElement = testingLib.toJSON();
+      expect(baseElement).toBeTruthy();
     });
   });
 });

metro.config.js

@@ -1,2 +1,9 @@
-require('ts-node/register');
-module.exports = require('./metro.config.ts');
+const {getDefaultConfig} = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+// The code below is a workaround for an issue arising when importing stylis from emotion.
+// This problem is due to stylis being built as an ES module (ESM).
+config.resolver.assetExts.push('mjs');
+
+module.exports = config;

package.json

@@ -11,12 +11,12 @@
     "lint": "eslint main packages docs stories --ext .ts,.tsx,.js,.jsx",
     "lint:ci": "commitlint --from HEAD~0 --to HEAD --verbose",
     "tsc": "tsc",
-    "start": "NODE_OPTIONS=--openssl-legacy-provider  expo start",
+    "start": "expo start",
     "jest": "jest --runInBand",
-    "android": "NODE_OPTIONS=--openssl-legacy-provider  expo start --android",
-    "ios": "NODE_OPTIONS=--openssl-legacy-provider expo start --ios",
-    "web": "NODE_OPTIONS=--openssl-legacy-provider expo start --web",
-    "test": "jest;",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest",
     "test:all": "yarn pre && yarn lint && yarn tsc && yarn test",
     "build": "tsc --project tsconfigBuild.json && yarn cp:icon; yarn cp:assets; yarn cp:main",
     "cp:assets": "cp -R main/__assets__ lib",
@@ -32,45 +32,44 @@
   },
   "dependencies": {
     "@dooboo-ui/theme": "^0.12.7",
-    "@emotion/native": "^11.10.0",
-    "@emotion/react": "^11.10.5",
+    "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.11.0",
     "@expo/match-media": "^0.4.0",
-    "@expo/webpack-config": "^18.0.1",
-    "@react-native-async-storage/async-storage": "1.17.11",
+    "@expo/webpack-config": "^18.1.0",
+    "@react-native-async-storage/async-storage": "1.18.2",
     "expo": "^49.0.0",
     "expo-font": "~11.4.0",
     "expo-linear-gradient": "~12.3.0",
     "expo-screen-orientation": "~6.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.71.8",
-    "react-native-gesture-handler": "~2.9.0",
-    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.5.0",
-    "react-native-svg": "13.4.0",
-    "react-native-web": "~0.18.10",
+    "react-native": "0.72.3",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-svg": "13.9.0",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "~0.19.6",
     "react-native-web-hooks": "^3.0.2",
     "react-useinterval": "^1.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-modules-commonjs": "^7.20.11",
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@dooboo/eslint-config-react-native": "^1.3.0",
     "@jest/types": "^29.4.1",
-    "@react-native-community/datetimepicker": "6.7.3",
+    "@react-native-community/datetimepicker": "^7.2.0",
     "@react-native-community/slider": "^4.4.2",
     "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-knobs": "^7.0.0",
+    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-ondevice-actions": "^6.5.3",
     "@storybook/addon-ondevice-knobs": "^6.5.3",
     "@storybook/addons": "^6.5.16",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/preview-api": "^7.0.6",
     "@storybook/react": "^6.5.16",
     "@storybook/react-native": "6.5.4",
     "@storybook/react-native-server": "6.5.4",
@@ -81,9 +80,8 @@
     "@types/jest": "^29.4.0",
     "@types/jest-plugin-context": "^2.9.5",
     "@types/node": "^18.11.19",
-    "@types/react": "~18.0.27",
+    "@types/react": "~18.2.14",
     "@types/react-dom": "~18.0.10",
-    "@types/react-native": "^0.72.0",
     "@types/react-responsive": "^8.0.5",
     "@types/react-test-renderer": "^18.0.0",
     "babel-loader": "^8.2.5",
@@ -104,8 +102,7 @@
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
-    "webpack-dev-server": "^3.11.3"
+    "typescript": "^5.1.6"
   },
   "workspaces": {
     "packages": [

stories/packages/PinchZoomStories/PinchZoomImageListStory.tsx

@@ -1,7 +1,7 @@
 // Caveat: Expo web needs React to be imported
 import type {ReactElement} from 'react';
 import React, {useState} from 'react';
-import type {ImageSourcePropType} from 'react-native';
+import type {DimensionValue, ImageSourcePropType} from 'react-native';
 import {Dimensions, FlatList, Image} from 'react-native';
 import styled from '@emotion/native';
 
@@ -64,7 +64,7 @@ function ImageItem({
   title,
   content,
 }: ImageItemProps): ReactElement {
-  const [width, setWidth] = useState<string | number>('100%');
+  const [width, setWidth] = useState<DimensionValue>('100%');
 
   return (
     <ItemContainer>