diff --git a/.changeset/cool-snakes-bathe.md b/.changeset/cool-snakes-bathe.md new file mode 100644 index 00000000000..83896219e26 --- /dev/null +++ b/.changeset/cool-snakes-bathe.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Text` to TypeScript diff --git a/.changeset/happy-taxis-compare.md b/.changeset/happy-taxis-compare.md new file mode 100644 index 00000000000..f7c15c5e33a --- /dev/null +++ b/.changeset/happy-taxis-compare.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Flex` to TypeScript diff --git a/.eslintrc.json b/.eslintrc.json index 429f3cb1979..65235903158 100644 --- a/.eslintrc.json +++ b/.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"] + } + ] } diff --git a/package.json b/package.json index de021461ef4..85cda9fb200 100644 --- a/package.json +++ b/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", diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index 2a4213846b3..9e0fb178a1c 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -35,12 +35,12 @@ const Base = styled.div` export type BaseStylesProps = ComponentProps function BaseStyles(props: BaseStylesProps) { - const {color, lineHeight, fontFamily, theme, ...rest} = props + const {children, ...rest} = props useMouseIntent() return ( - {props.children} + {children} ) } diff --git a/src/Flex.js b/src/Flex.tsx similarity index 70% rename from src/Flex.js rename to src/Flex.tsx index 5f0a95f7c09..ce69f2e303b 100644 --- a/src/Flex.js +++ b/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 export default Flex diff --git a/src/Modal.js b/src/Modal.js deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/Text.js b/src/Text.tsx similarity index 55% rename from src/Text.js rename to src/Text.tsx index 60e121612d8..fad64d7ca81 100644 --- a/src/Text.js +++ b/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` ${TYPOGRAPHY}; ${COMMON}; ${sx}; @@ -21,4 +21,5 @@ Text.propTypes = { theme: PropTypes.object } +export type TextProps = React.ComponentProps export default Text diff --git a/src/__tests__/Flex.js b/src/__tests__/Flex.tsx similarity index 100% rename from src/__tests__/Flex.js rename to src/__tests__/Flex.tsx diff --git a/src/__tests__/Text.js b/src/__tests__/Text.tsx similarity index 100% rename from src/__tests__/Text.js rename to src/__tests__/Text.tsx diff --git a/src/__tests__/__snapshots__/Flex.js.snap b/src/__tests__/__snapshots__/Flex.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Flex.js.snap rename to src/__tests__/__snapshots__/Flex.tsx.snap diff --git a/src/__tests__/__snapshots__/Text.js.snap b/src/__tests__/__snapshots__/Text.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Text.js.snap rename to src/__tests__/__snapshots__/Text.tsx.snap diff --git a/yarn.lock b/yarn.lock index 596d8c992b2..1c7242429df 100644 --- a/yarn.lock +++ b/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==