Type check tests and stories in CI (#1960)

* Add type check npm script

* Add type checking to CI

* Make value prop of Checkbox optional

* Export Select props type

* Update LabelGroup test

* Update import in deprecated Label type test

* Update Button import in PageLayout story

* Update import in anchored position story

* Remove htmlFor prop from FormControl.Label in ActionMenu story

* Update Label in deprecated ActionList story

* Comment out LinkButton stories

* Fix tsconfig.build.json

* Create funny-ears-add.md

.changeset/funny-ears-add.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Checkbox: `value` prop is now optional

.github/workflows/ci.yml

@@ -29,3 +29,6 @@ jobs:
 
       - name: Test
         run: npm run test
+
+      - name: Type check
+        run: npm run test:type-check

package.json

@@ -44,6 +44,7 @@
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",
+    "test:type-check": "tsc --noEmit",
     "release": "npm run build && changeset publish",
     "size": "size-limit",
     "prepare": "husky install"

src/Button/Button2.stories.tsx

@@ -1,8 +1,8 @@
-import React, {useState, forwardRef} from 'react'
-import {Button, ButtonProps, IconButton, LinkButton} from '.'
-import {BaseStyles, ThemeProvider} from '..'
+import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'
 import {Meta} from '@storybook/react'
-import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon, TriangleRightIcon} from '@primer/octicons-react'
+import React, {useState} from 'react'
+import {Button, ButtonProps, IconButton} from '.'
+import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
 
 export default {
@@ -186,52 +186,52 @@ export const disabledButton = ({...args}: ButtonProps) => {
   )
 }
 
-type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
-const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
-  ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    return <a ref={ref} href={to} {...props} />
-  }
-)
+// type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
+// const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
+//   ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
+//     // eslint-disable-next-line jsx-a11y/anchor-has-content
+//     return <a ref={ref} href={to} {...props} />
+//   }
+// )
 
-export const linkButton = ({...args}: ButtonProps) => {
-  return (
-    <>
-      <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-      <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="danger" {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-      <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="primary" {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-      <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="outline" {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-      <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="invisible" {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-      <Box mb={2} display="flex">
-        <LinkButton href="https://primer.style/" variant="primary" trailingIcon={TriangleRightIcon} {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-      <Box mb={2} display="flex">
-        <LinkButton to="/dummy" as={ReactRouterLikeLink} variant="primary" trailingIcon={TriangleRightIcon} {...args}>
-          Link to Primer
-        </LinkButton>
-      </Box>
-    </>
-  )
-}
+// export const linkButton = ({...args}: ButtonProps) => {
+//   return (
+//     <>
+//       <Box mb={2} display="flex">
+//         <LinkButton href="https://primer.style/" {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//       <Box mb={2} display="flex">
+//         <LinkButton href="https://primer.style/" variant="danger" {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//       <Box mb={2} display="flex">
+//         <LinkButton href="https://primer.style/" variant="primary" {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//       <Box mb={2} display="flex">
+//         <LinkButton href="https://primer.style/" variant="outline" {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//       <Box mb={2} display="flex">
+//         <LinkButton href="https://primer.style/" variant="invisible" {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//       <Box mb={2} display="flex">
+//         <LinkButton href="https://primer.style/" variant="primary" trailingIcon={TriangleRightIcon} {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//       <Box mb={2} display="flex">
+//         <LinkButton to="/dummy" as={ReactRouterLikeLink} variant="primary" trailingIcon={TriangleRightIcon} {...args}>
+//           Link to Primer
+//         </LinkButton>
+//       </Box>
+//     </>
+//   )
+// }

src/Checkbox.tsx

@@ -30,7 +30,7 @@ export type CheckboxProps = {
    * A unique value that is never shown to the user.
    * Used during form submission and to identify which checkbox inputs are selected
    */
-  value: string
+  value?: string
 } & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &
   SxProp
 

src/PageLayout/PageLayout.stories.tsx

@@ -1,7 +1,6 @@
 import {Meta, Story} from '@storybook/react'
 import React from 'react'
-import {Box, BranchName, Heading, Link, SideNav, StateLabel, TabNav, Text} from '..'
-import {Button} from '../drafts'
+import {Box, BranchName, Heading, Link, SideNav, StateLabel, TabNav, Text, Button} from '..'
 import {Placeholder} from '../Placeholder'
 import {PageLayout} from './PageLayout'
 

src/Select.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import {get} from './constants'
 import TextInputWrapper, {StyledWrapperProps} from './_TextInputWrapper'
 
-type SelectProps = Omit<
-  Omit<React.HTMLProps<HTMLSelectElement>, 'size'> & Omit<StyledWrapperProps, 'variant'>,
+export type SelectProps = Omit<
+  Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> & Omit<StyledWrapperProps, 'variant'>,
   'multiple' | 'hasLeadingVisual' | 'hasTrailingVisual' | 'as'
 >
 
@@ -42,7 +42,7 @@ const ArrowIndicator = styled(ArrowIndicatorSVG)`
 `
 
 const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({children, disabled, placeholder, size, required, validationStatus, ref: _propsRef, ...rest}: SelectProps, ref) => (
+  ({children, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => (
     <TextInputWrapper
       sx={{
         position: 'relative'

src/__tests__/LabelGroup.test.tsx

@@ -10,7 +10,6 @@ const comp = (
   <LabelGroup>
     <Label>Default label</Label>
     <Label>Darker gray label</Label>
-    <Label outline>Default outline label</Label>
   </LabelGroup>
 )
 

src/__tests__/deprecated/Label.types.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Label from '../deprecated/Label'
+import Label from '../../deprecated/Label'
 
 export function shouldAcceptCallWithNoProps() {
   return <Label />

src/index.ts

@@ -111,6 +111,7 @@ export {default as ProgressBar} from './ProgressBar'
 export type {ProgressBarProps} from './ProgressBar'
 export {default as RadioGroup} from './RadioGroup'
 export {default as Select} from './Select'
+export type {SelectProps} from './Select'
 export {SelectPanel} from './SelectPanel'
 export type {SelectPanelProps} from './SelectPanel'
 export {default as SideNav} from './SideNav'

src/stories/ActionMenu/fixtures.stories.tsx

@@ -340,11 +340,7 @@ const LayoutToggleItem = ({
         }
       }}
     >
-      <FormControl.Label
-        htmlFor="layout-selector"
-        sx={{fontWeight: 'normal', cursor: 'pointer', px: 3, py: 2, mb: 0}}
-        {...props}
-      >
+      <FormControl.Label sx={{fontWeight: 'normal', cursor: 'pointer', px: 3, py: 2, mb: 0}} {...props}>
         <Box sx={{textAlign: 'center', flexDirection: 'column', m: 'auto', alignItems: 'center', display: 'flex'}}>
           <Icon size="medium" />
           <Text sx={{color: selected ? 'fg.default' : 'fg.muted', fontSize: 0}}>{children}</Text>

src/stories/deprecated/ActionList.stories.tsx

@@ -311,11 +311,7 @@ export function CustomItemChildren(): JSX.Element {
           items={[
             {
               leadingVisual: ArrowRightIcon,
-              children: (
-                <Label outline borderColor="success.emphasis">
-                  Choose this one
-                </Label>
-              ),
+              children: <Label>Choose this one</Label>,
               trailingIcon: ArrowLeftIcon
             }
           ]}

src/stories/useAnchoredPosition.stories.tsx

@@ -7,7 +7,7 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import type {AnchorSide} from '@primer/behaviors'
 import Portal, {registerPortalRoot} from '../Portal'
-import Button from '../Button'
+import {Button} from '../Button'
 
 export default {
   title: 'Hooks/useAnchoredPosition',

tsconfig.build.json

@@ -1,5 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": true
+  },
   // NOTE: We exclude Storybook stories and test utilities which import
   // Storybook and its dependencies, because:
   //   a) we don't want Storybook types in our build output, and

tsconfig.json

@@ -7,7 +7,6 @@
     "jsx": "preserve",
     "declaration": true,
     "outDir": "./lib",
-    "emitDeclarationOnly": true,
     "strict": true,
     "moduleResolution": "node",
     "rootDirs": ["src"],