build: add React18 Support (twilio-labs#2682)

* build: add React18 Support Update packages dependencies to include React v18 * refactor: add PropsWithChildren pros Add React.PropsWithChildren for compatibility with React v18 * chore: update React version on missing packages * fix: added newer proptypes types (react 18) (twilio-labs#3) * refactor(yarn.lock): update yarn.lock file * chore: update eslint and React versions * chore: fixing eslint issues * WIP: Fix react fc typings (twilio-labs#5) * fix: un-needed React.FC typing with no children * fix: removing unknown from interface PropsWithChildren as not needed * fix: types on the rest of the files * fix(components): radio and button-group React18 fix * fix: update React app tests Co-authored-by: Pablo Espinosa <[email protected]>
espipj · Jan 4, 2023 · db773cb · db773cb
1 parent 84db9f6
commit db773cb
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 30 deletions.
diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
@@ -241,7 +241,7 @@ CustomizedAlertDialog.parameters = {
   },
 };
 
-export const CustomizedDestructiveAlertDialog: Story = () => {
+export const CustomizedDestructiveAlertDialog = (): JSX.Element => {
   const currentTheme = useTheme();
   return (
     <CustomizationProvider

diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -82,11 +82,14 @@ const HiddenCheckbox = React.forwardRef<HTMLInputElement, HiddenCheckboxProps>((
 
 HiddenCheckbox.displayName = 'HiddenCheckbox';
 
-const CheckboxIcon: React.FC<{
-  indeterminate: boolean | undefined;
-  checked: boolean | undefined;
-  element: BoxProps['element'];
-}> = ({checked, element, indeterminate}) => {
+const CheckboxIcon: React.FC<
+  React.PropsWithChildren<{
+    indeterminate: boolean | undefined;
+    disabled: boolean | undefined;
+    checked: boolean | undefined;
+    element: BoxProps['element'];
+  }>
+> = ({checked, element, indeterminate}) => {
   if (indeterminate) {
     return <MinusIcon element={element} decorative color="inherit" size="sizeIcon10" />;
   }

diff --git a/packages/paste-core/components/label/stories/label.stories.tsx b/packages/paste-core/components/label/stories/label.stories.tsx
@@ -64,7 +64,7 @@ export const I18n = (): React.ReactNode => {
 
 I18n.storyName = 'i18n label';
 
-export const Customized: Story = () => {
+export const Customized = (): JSX.Element => {
   const currentTheme = useTheme();
   return (
     <Stack orientation="vertical" spacing="space20">

diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
@@ -468,7 +468,7 @@ export const TextareaDisabledInsertBeforeAndAfterInverse = (): React.ReactNode =
 
 TextareaDisabledInsertBeforeAndAfterInverse.storyName = 'Textarea - Disabled insert before and after inverse';
 
-export const CustomizedTextarea: Story = () => {
+export const CustomizedTextarea = (): JSX.Element => {
   const activeTheme = useTheme();
   const uidTwo = useUID();
   const uidTwoVariant = useUID();

diff --git a/yarn.lock b/yarn.lock
@@ -885,6 +885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.18.10":
+  version: 7.18.10
+  resolution: "@babel/helper-string-parser@npm:7.18.10"
+  checksum: d554a4393365b624916b5c00a4cc21c990c6617e7f3fe30be7d9731f107f12c33229a7a3db9d829bfa110d2eb9f04790745d421640e3bd245bb412dc0ea123c1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-string-parser@npm:^7.19.4":
   version: 7.19.4
   resolution: "@babel/helper-string-parser@npm:7.19.4"
@@ -3076,7 +3083,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.14.8, @babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.2, @babel/types@npm:^7.20.5":
+"@babel/types@npm:^7.14.8, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.2, @babel/types@npm:^7.20.5":
   version: 7.20.5
   resolution: "@babel/types@npm:7.20.5"
   dependencies:
@@ -3087,6 +3094,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.18.10, @babel/types@npm:^7.18.6, @babel/types@npm:^7.18.9, @babel/types@npm:^7.19.0":
+  version: 7.19.0
+  resolution: "@babel/types@npm:7.19.0"
+  dependencies:
+    "@babel/helper-string-parser": ^7.18.10
+    "@babel/helper-validator-identifier": ^7.18.6
+    to-fast-properties: ^2.0.0
+  checksum: 9b346715a68aeede70ba9c685a144b0b26c53bcd595d448e24c8fa8df4d5956a5712e56ebadb7c85dcc32f218ee42788e37b93d50d3295c992072224cb3ef3fe
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -5683,7 +5701,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.13, @jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.13":
   version: 0.3.17
   resolution: "@jridgewell/trace-mapping@npm:0.3.17"
   dependencies:
@@ -5693,6 +5711,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jridgewell/trace-mapping@npm:^0.3.9":
+  version: 0.3.15
+  resolution: "@jridgewell/trace-mapping@npm:0.3.15"
+  dependencies:
+    "@jridgewell/resolve-uri": ^3.0.3
+    "@jridgewell/sourcemap-codec": ^1.4.10
+  checksum: 38917e9c2b014d469a9f51c016ed506acbe44dd16ec2f6f99b553ebf3764d22abadbf992f2367b6d2b3511f3eae8ed3a8963f6c1030093fda23efd35ecab2bae
+  languageName: node
+  linkType: hard
+
 "@lerna/add@npm:4.0.0":
   version: 4.0.0
   resolution: "@lerna/add@npm:4.0.0"
@@ -14945,9 +14973,9 @@ __metadata:
   linkType: hard
 
 "@types/lodash@npm:^4.14.167":
-  version: 4.14.191
-  resolution: "@types/lodash@npm:4.14.191"
-  checksum: ba0d5434e10690869f32d5ea49095250157cae502f10d57de0a723fd72229ce6c6a4979576f0f13e0aa9fbe3ce2457bfb9fa7d4ec3d6daba56730a51906d1491
+  version: 4.14.185
+  resolution: "@types/lodash@npm:4.14.185"
+  checksum: f81d13da5ecab110ca9c5c7cc2bedc3c9802a6acf668576aecd1b8f4b134ed81d06c15f1e600fb08f05975098280a0d97d30cddfc2cb39ec1c6b56e971ca53b3
   languageName: node
   linkType: hard
 
@@ -15054,9 +15082,9 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0":
-  version: 16.18.6
-  resolution: "@types/node@npm:16.18.6"
-  checksum: 85b6a11c347e1edfe014eb2c520aec37117152c932b632f455d4e2a71a311fb25578602c7c25f825c6f1c3e4a912506857c1aa679717318296f5590ac0d33254
+  version: 16.11.59
+  resolution: "@types/node@npm:16.11.59"
+  checksum: b3a2986ef8f8216bb7fd1187dcf2e69aca3e6b6b5fdfd6abf4cf11c44e3cdd587fae875a28dc4ef257e2b369e2c5290642aff6a0a9d702f3385a78f561293259
   languageName: node
   linkType: hard
 
@@ -15248,13 +15276,13 @@ __metadata:
   linkType: hard
 
 "@types/react@npm:*, @types/react@npm:^18.0.0":
-  version: 18.0.26
-  resolution: "@types/react@npm:18.0.26"
+  version: 18.0.24
+  resolution: "@types/react@npm:18.0.24"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: b62f0ea3cdfa68e106391728325057ad36f1bde7ba2dfae029472c47e01e482bc77c6ba4f1dad59f3f04ee81cb597618ff7c30a33c157c0a20462b6dd6aa2d4d
+  checksum: 7d06125bac61e1c6661e5dfbeeeb56d5b6d1d4c743292faebaa6b0f30f8414c7af3cadf674923fd86e4ca14e82566ff9156cd40c56786be024600c31b97d6c03
   languageName: node
   linkType: hard
 
@@ -36540,14 +36568,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.1.3":
-  version: 1.2.7
-  resolution: "minimist@npm:1.2.7"
-  checksum: 7346574a1038ca23c32e02252f603801f09384dd1d78b69a943a4e8c2c28730b80e96193882d3d3b22a063445f460e48316b29b8a25addca2d7e5e8f75478bec
-  languageName: node
-  linkType: hard
-
-"minimist@npm:^1.2.6":
+"minimist@npm:^1.1.3, minimist@npm:^1.2.6":
   version: 1.2.6
   resolution: "minimist@npm:1.2.6"
   checksum: d15428cd1e11eb14e1233bcfb88ae07ed7a147de251441d61158619dfb32c4d7e9061d09cab4825fdee18ecd6fce323228c8c47b5ba7cd20af378ca4048fb3fb
@@ -42084,7 +42105,7 @@ fsevents@^1.2.7:
     loose-envify: ^1.1.0
     scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
+    react: ^18.2.0
   checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
@@ -42984,14 +43005,14 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.2":
+"regenerator-runtime@npm:^0.13.11":
   version: 0.13.11
   resolution: "regenerator-runtime@npm:0.13.11"
   checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.3, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7, regenerator-runtime@npm:^0.13.9":
+"regenerator-runtime@npm:^0.13.2, regenerator-runtime@npm:^0.13.3, regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7, regenerator-runtime@npm:^0.13.9":
   version: 0.13.9
   resolution: "regenerator-runtime@npm:0.13.9"
   checksum: 65ed455fe5afd799e2897baf691ca21c2772e1a969d19bb0c4695757c2d96249eb74ee3553ea34a91062b2a676beedf630b4c1551cc6299afb937be1426ec55e