chore(exoflex): update `react`, `react-native` & `react-native-paper` version

[StefanusChristian]

Changes:

Package & Example app changes:

• Upgrade react, react-native, react-native-web, react-native-paper, react-native-collapsible version.
• Change react-native-calendars from Yoan repository into latest version. (changes from @JonathanRadotski https://github.com/StefanusChristian/infra/pull/1/files)
• Add new expo project in example directory. Since the previous one was still in SDK40, it is easier to create a new one instead of updating it to SDK47.
• Add patch-package to both exoflex (patch react-native-collapsible) & exoflex/new-example (patch react-navigation-drawer).
  • react-native-collapsible: Adding the fix that has been merged to the package but not released yet. commit
  • react-navigation-drawer: This package is deprecated now and have been included into react-navigation instead. But I think it was introduced in version 5.x.x (docs) and we still use 4.x.x (docs). So for a quick fix, I follow this guide for the error: https://github.com/react-navigation/react-navigation/issues/9665#issuecomment-880711983

Adjusted Component:

• Accordion: Add useNativeRiver props to useAnimation()
• Badge: Add textStyle typing
• Button:
  • ButtonOpacity:
    • Update ref as RefObject<TouchableOpacity> since ButtonProp types based on react-native-paper types and the ref was RefObject<View> (from Surface component).
    • Adjust usage of accessibilityTraits & accessibilityComponentType into accessibilityStates. (Reference)
    • Adjust Icon props naming from color to iconColor.
      • ButtonRipple:
      • Adjust usage of accessibilityTraits & accessibilityComponentType into accessibilityStates.
      • Adjust Icon props naming from color to iconColor.
• Calendar: Adjust CalendarProps to follow latest version of the package.
• Chip: Adjust Icon props naming from color to iconColor.
• Collapsible: Add useNativeRiver props to useAnimation()
• DateTimePicker: Adjust DateTimePicker.web type from DateObject into DateData.
• Menu: Adjust PaperMenu.Item props naming from icon to leadingIcon.
• SegmentedControl: Add StyleProp<ViewStyle> in both Indicator & SegmentedControl.
• Switch: Add StyleProp<ViewStyle> types.
• Toast: Adjust Icon props naming from color to iconColor.

Contants, Helper & Types Changes:

• Theme: Add 2 new color key as part of the Theme: notification & tooltip.
• getPaperTheme: Adjust import naming from Theme into MD2Theme and adjust the props needed.
• Colors types: Add new key tooltip as Colors type.
• Custom react-native-color-slider types: Change number[] into Array<number>

How to test:

• Move to packages/exoflex and run yarn install to install dependencies.
• Move to packages/exoflex/example and also run yarn install. Once it's done, run yarn start to test the component.

Notes:

Based on testing, the only component that has problem is ButtonRipple. The button didn't work properly on iOS simulator, but animation run properly on Android (cc: @JonathanRadotski @Udayawibawamukti).

[ikusa]

@StefanusChristian Also do we have the example of buttonRipple not working properly on the IOS? curious what's the actual result of these bug

[darcien]

Great work @StefanusChristian! We might need to update the repo settings before merging your changes because right now it's blocked by a dead circleci check.

[StefanusChristian]

@ikusa @darcien Here's the video showing the ButtonRipple problem on iOS. The button onPress is invoked but didn't show the ripple animation at all.

https://user-images.githubusercontent.com/25154563/215960201-a3325f69-360f-48aa-ab20-292986cc07c2.mp4

[darcien]

Let's not block the upgrade PR on the button ripple issue. I'm keen to ship this B I G P R ASAP and address the minor issues separately.

[darcien]

For the repo setting (remove/bypass the circleci check), do you have the authority for that @darcien? I think I don't have the permission, so I can't adjust the setting

I've removed the required CircleCI check for merging the PR. In the future, we will need to migrate the CI.

@StefanusChristian can you try running the tests locally and see if it passes? After that is checked, we should be good to go

[StefanusChristian]

For the repo setting (remove/bypass the circleci check), do you have the authority for that @darcien? I think I don't have the permission, so I can't adjust the setting

I've removed the required CircleCI check for merging the PR. In the future, we will need to migrate the CI.

@StefanusChristian can you try running the tests locally and see if it passes? After that is checked, we should be good to go

It seems the jest preset is error for getBaseWebPreset, since the jest-preset is removed from the latest react-native-web (0.18.xx). Reference: https://github.com/necolas/react-native-web/issues/2312

Do you guys have any idea on how to fix the jest-preset? @ikusa @darcien

[StefanusChristian]

@ikusa @darcien Web jest & test finally adjusted 🎉🎉🎉

Passed Tests

https://user-images.githubusercontent.com/25154563/218062491-74b07419-78bb-4591-a685-f1b0c7faae24.mp4

I'll list the changes for making the web test work in here:

1. Adjust the getBaseWebPreset (web platform jest-preset) to use module mapper based on latest rnw docs and set testEnvironment to jsdom for web.
2. Upgrade @testing-library/react & react-dom to match our current react version.
3. Add testID on some component that will turn into data-testid when rendered on our web test. Reference.
4. Adjust function from @testing-library/react: wait into waitFor and fireEvent.click usage. For fireEvent adjustment, somehow the fireEvent.click call doesn't trigger the mock function, so I use below form instead and it works. This might need more time to investigate but I think the adjustment is good for now

   
   From:

fireEvent.click(getByTestId('button'));

Into:

fireEvent( getByTestId('button'), new MouseEvent('click', { bubbles: true, cancelable: true, }), );