Switch to modern flow syntax for utility types and bounds

Author: SamChou19815

.flowconfig

@@ -18,6 +18,17 @@ module.system.node.resolve_dirname=flow_modules
 module.system.node.resolve_dirname=node_modules
 react.runtime=automatic
 
+experimental.ts_utility_syntax=true
+experimental.deprecated_utilities='$ReadOnlyArray' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='$NonMaybeType' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='$ReadOnly' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='mixed' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='$ReadOnlyMap' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='$ReadOnlySet' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='$Keys' -> '<PROJECT_ROOT>/'
+experimental.deprecated_utilities='$Values' -> '<PROJECT_ROOT>/'
+experimental.deprecated_colon_extends=<PROJECT_ROOT>/
+
 [strict]
 nonstrict-import
 sketchy-null

apps/platform-tests/src/components/App.js

@@ -12,7 +12,7 @@ import { ScrollView } from 'react-native';
 import { css, html } from 'react-strict-dom';
 import { tokens, themeColors, systemColors } from './tokens.css.js';
 
-type ExampleBlockProps = $ReadOnly<{
+type ExampleBlockProps = Readonly<{
   title: string,
   children: React.Node
 }>;

apps/platform-tests/src/components/tokens.css.js

@@ -12,7 +12,7 @@ import type { StyleVars } from 'react-strict-dom';
 import { css } from 'react-strict-dom';
 
 export const tokens: StyleVars<
-  $ReadOnly<{
+  Readonly<{
     squareColor: string,
     textColor: string,
     inputColor: string,
@@ -29,7 +29,7 @@ export const tokens: StyleVars<
 });
 
 export const themeColors: StyleVars<
-  $ReadOnly<{
+  Readonly<{
     primary100: string,
     primary200: string
   }>
@@ -39,7 +39,7 @@ export const themeColors: StyleVars<
 });
 
 export const systemColors: StyleVars<
-  $ReadOnly<{
+  Readonly<{
     squareColor: string,
     outlineColor: string
   }>