TS Strict SpectrumButton (#3143)

Co-authored-by: Daniel Lu <[email protected]>

Author: snowystinger

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "scripts": {
-    "check-types": "tsc",
+    "check-types": "tsc && tsc-strict",
     "install-16": "yarn add -W react@^16.8.0 react-dom@^16.8.0 @testing-library/react@^12 @testing-library/react-hooks@^8",
     "install-17": "yarn add -W react@^17 react-dom@^17 @testing-library/react@^12 @testing-library/react-hooks@^8",
     "start": "cross-env NODE_ENV=storybook start-storybook -p 9003 --ci -c '.storybook'",
@@ -164,6 +164,7 @@
     "style-loader": "^0.23.1",
     "tempy": "^0.5.0",
     "typescript": "^4.6.0",
+    "typescript-strict-plugin": "^2.0.0",
     "url-loader": "^1.1.2",
     "walk-object": "^4.0.0",
     "webpack": "^4.44.2",

packages/@react-spectrum/button/stories/Button.stories.tsx

@@ -139,13 +139,13 @@ function Example() {
     <Flex gap="size-200">
       <Button
         variant="cta"
-        UNSAFE_style={show && {background: 'red', userSelect: 'text'}}
+        UNSAFE_style={show ? undefined : {background: 'red', userSelect: 'text'}}
         onPressStart={() => setTimeout(() => setShow(true), 3000)}>
         Press and hold (overwrite)
       </Button>
       <Button
         variant="cta"
-        UNSAFE_style={show2 && {background: 'red'}}
+        UNSAFE_style={show2 ? undefined : {background: 'red'}}
         onPressStart={() => setTimeout(() => setShow2(true), 3000)}>
         Press and hold (no overwrite)
       </Button>
@@ -180,15 +180,13 @@ function renderStyles<T extends ElementType = 'button'>(props: SpectrumButtonPro
           onPress={action('press')}
           onPressStart={action('pressstart')}
           onPressEnd={action('pressend')}
-          variant="primary"  
           {...props}>
           Primary
         </Button>
         <Button
           onPress={action('press')}
           onPressStart={action('pressstart')}
           onPressEnd={action('pressend')}
-          variant="primary"
           isDisabled
           {...props}>
           Disabled
@@ -237,7 +235,6 @@ function renderStyles<T extends ElementType = 'button'>(props: SpectrumButtonPro
           onPress={action('press')}
           onPressStart={action('pressstart')}
           onPressEnd={action('pressend')}
-          variant="primary"
           isQuiet
           {...props}>
           Primary Quiet
@@ -246,7 +243,6 @@ function renderStyles<T extends ElementType = 'button'>(props: SpectrumButtonPro
           onPress={action('press')}
           onPressStart={action('pressstart')}
           onPressEnd={action('pressend')}
-          variant="primary"
           isDisabled
           isQuiet
           {...props}>

packages/@react-spectrum/utils/src/classNames.ts

@@ -23,7 +23,7 @@ export function keepSpectrumClassNames() {
   );
 }
 
-export function classNames(cssModule: {[key: string]: string}, ...values: Array<string | Object>): string {
+export function classNames(cssModule: {[key: string]: string}, ...values: Array<string | Object | undefined>): string {
   let classes = [];
   for (let value of values) {
     if (typeof value === 'object' && value) {

tsconfig.json

@@ -27,7 +27,16 @@
       "dom",
       "dom.iterable"
     ],
-    "skipLibCheck": false
+    "skipLibCheck": false,
+    "strict": false,
+    "plugins": [
+      {
+        "name": "typescript-strict-plugin",
+        "paths": [
+          "./packages/@react-spectrum/button/s",
+        ]
+      }
+    ]
   },
   "include": [
     "packages"

yarn.lock

@@ -16868,6 +16868,21 @@ ora@^5.2.0:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
+ora@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
+  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
+  dependencies:
+    bl "^4.1.0"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-spinners "^2.5.0"
+    is-interactive "^1.0.0"
+    is-unicode-supported "^0.1.0"
+    log-symbols "^4.1.0"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+
 orchestrator@^0.3.0:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/orchestrator/-/orchestrator-0.3.8.tgz#14e7e9e2764f7315fbac184e506c7aa6df94ad7e"
@@ -21773,6 +21788,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript-strict-plugin@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-strict-plugin/-/typescript-strict-plugin-2.0.0.tgz#67a2e6cba57b51a9925f86429e988d61c9071682"
+  integrity sha512-fTolU+9yHTqft5kKjwX++p3TBLhER+bmV8X4/iLxlrVqEA9ZcGXchnTJClLxgEdLwecjvA/Y3YlMnnh51M8eXw==
+  dependencies:
+    chalk "^3.0.0"
+    execa "^4.0.0"
+    ora "^5.4.1"
+    yargs "^16.2.0"
+
 typescript@^4.6.0:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"