Merge branch 'cb/ts-progress-bar' of github.com:primer/components int…

…o cb/ts-progress-bar

.changeset/cool-snakes-bathe.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Text` to TypeScript

.changeset/friendly-carrots-accept.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `ProgressBar` to TypeScript

.changeset/happy-taxis-compare.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Flex` to TypeScript

.changeset/tricky-gifts-bake.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Migrate `Grid` to TypeScript

.eslintrc.json

@@ -1,12 +1,6 @@
 {
-  "parser": "@babel/eslint-parser",
-  "extends": [
-    "plugin:github/recommended",
-    "plugin:github/browser",
-    "plugin:react/recommended",
-    "plugin:jsx-a11y/recommended",
-    "plugin:react-hooks/recommended"
-  ],
+  "parser": "@typescript-eslint/parser",
+  "extends": ["plugin:react/recommended", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
   "globals": {
     "__DEV__": "readonly"
   },
@@ -17,24 +11,34 @@
     "jest": true,
     "node": true
   },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  // rules which apply to JS, TS, etc.
   "rules": {
     "react/prop-types": 0,
     "react/display-name": 0,
-    "import/no-namespace": 0,
-    "no-shadow": 0,
-    "no-unused-vars": [
-      "error",
-      {
-        "ignoreRestSiblings": true
-      }
-    ],
-    "eslint-comments/no-use": 0,
     "react-hooks/exhaustive-deps": "error",
-    "jsx-a11y/label-has-for": [
-      2,
-      {
-        "components": []
+    "jsx-a11y/label-has-for": [2, {"components": []}]
+  },
+  "overrides": [
+    // rules which apply only to JS
+    {
+      "files": ["**/*.js", "**/*.jsx"],
+      "extends": ["plugin:github/recommended", "plugin:github/browser"],
+      "rules": {
+        "eslint-comments/no-use": 0,
+        "import/no-namespace": 0,
+        "no-shadow": 0,
+        "no-unused-vars": ["error", {"ignoreRestSiblings": true}]
       }
-    ]
-  }
+    },
+    // rules which apply only to TS
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "extends": ["plugin:@typescript-eslint/recommended"]
+    }
+  ]
 }

.github/workflows/release.yml

@@ -26,6 +26,7 @@ jobs:
         id: changesets
         uses: changesets/action@master
         with:
+          title: Release Tracking
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
           publish: yarn release
         env:

package.json

@@ -73,6 +73,8 @@
     "@testing-library/user-event": "12.6.0",
     "@types/jest": "26.0.20",
     "@types/jest-axe": "3.5.1",
+    "@typescript-eslint/eslint-plugin": "4.14.1",
+    "@typescript-eslint/parser": "4.14.1",
     "@wojtekmaj/enzyme-adapter-react-17": "0.3.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-plugin-add-react-displayname": "0.0.5",

src/BaseStyles.tsx

@@ -35,12 +35,12 @@ const Base = styled.div<SystemTypographyProps & SystemCommonProps>`
 export type BaseStylesProps = ComponentProps<typeof Base>
 
 function BaseStyles(props: BaseStylesProps) {
-  const {color, lineHeight, fontFamily, theme, ...rest} = props
+  const {children, ...rest} = props
   useMouseIntent()
   return (
     <Base {...rest}>
       <GlobalStyle />
-      {props.children}
+      {children}
     </Base>
   )
 }

src/Flex.js → src/Flex.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components'
-import theme from './theme'
 import Box from './Box'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
 
 const Flex = styled(Box)``
 
@@ -13,4 +14,5 @@ Flex.propTypes = {
   ...Box.propTypes
 }
 
+export type FlexProps = ComponentProps<typeof Flex>
 export default Flex

src/Grid.js → src/Grid.tsx

@@ -1,9 +1,10 @@
 import styled from 'styled-components'
-import {GRID} from './constants'
-import theme from './theme'
 import Box from './Box'
+import {GRID, SystemGridProps} from './constants'
+import theme from './theme'
+import {ComponentProps} from './utils/types'
 
-const Grid = styled(Box)`
+const Grid = styled(Box)<SystemGridProps>`
   ${GRID};
 `
 
@@ -17,4 +18,5 @@ Grid.propTypes = {
   ...GRID.propTypes
 }
 
+export type GridProps = ComponentProps<typeof Grid>
 export default Grid

src/Text.js → src/Text.tsx

@@ -1,10 +1,10 @@
-import styled from 'styled-components'
 import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import sx, {SxProp} from './sx'
 import theme from './theme'
-import {TYPOGRAPHY, COMMON} from './constants'
-import sx from './sx'
 
-const Text = styled.span`
+const Text = styled.span<SystemTypographyProps & SystemCommonProps & SxProp>`
   ${TYPOGRAPHY};
   ${COMMON};
   ${sx};
@@ -21,4 +21,5 @@ Text.propTypes = {
   theme: PropTypes.object
 }
 
+export type TextProps = React.ComponentProps<typeof Text>
 export default Text

yarn.lock

@@ -2059,7 +2059,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@>=2.25.0":
+"@typescript-eslint/eslint-plugin@4.14.1", "@typescript-eslint/eslint-plugin@>=2.25.0":
   version "4.14.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.14.1.tgz#22dd301ce228aaab3416b14ead10b1db3e7d3180"
   integrity sha512-5JriGbYhtqMS1kRcZTQxndz1lKMwwEXKbwZbkUZNnp6MJX0+OVXnG0kOlBZP4LUAxEyzu3cs+EXd/97MJXsGfw==
@@ -2094,7 +2094,7 @@
     "@typescript-eslint/typescript-estree" "1.13.0"
     eslint-scope "^4.0.0"
 
-"@typescript-eslint/parser@>=2.25.0":
+"@typescript-eslint/parser@4.14.1", "@typescript-eslint/parser@>=2.25.0":
   version "4.14.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.14.1.tgz#3bd6c24710cd557d8446625284bcc9c6d52817c6"
   integrity sha512-mL3+gU18g9JPsHZuKMZ8Z0Ss9YP1S5xYZ7n68Z98GnPq02pYNQuRXL85b9GYhl6jpdvUc45Km7hAl71vybjUmw==