Typescript setup for core-react (#515)

* Add typescript packages

* Add tsconfig

* Couldn't do it without the tslib deps, even if it's supposed to be a dep on rollup-plugin-typescript2

* Disable ts checks as a baseline before porting

libraries/core-react/package.json

@@ -48,6 +48,8 @@
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "@testing-library/user-event": "^10.3.2",
+    "@types/react": "^16.9.47",
+    "@types/react-dom": "^16.9.8",
     "babel-plugin-react-docgen": "^4.1.0",
     "babel-plugin-styled-components": "^1.10.7",
     "jest": "^26.0.1",
@@ -58,7 +60,10 @@
     "react-dom": "^16.13.1",
     "rollup": "^2.15.0",
     "rollup-plugin-polyfill": "^3.0.0",
-    "styled-components": "4.4.1"
+    "rollup-plugin-typescript2": "^0.27.2",
+    "styled-components": "4.4.1",
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.2"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",

libraries/core-react/rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
 import babel from '@rollup/plugin-babel'
 import polyfill from 'rollup-plugin-polyfill'
+import typescript from 'rollup-plugin-typescript2'
 import pkg from './package.json'
 
 const peerDeps = Object.keys(pkg.peerDependencies || {})
@@ -28,6 +29,12 @@ export default [
     plugins: [
       json(),
       resolve({ extensions: ['.jsx', '.js'] }),
+      typescript({
+        tsconfig: 'tsconfig.json',
+        typescript: require('typescript'),
+        include: ['*.ts+(|x)', '**/*.ts+(|x)', '*.js+(|x)', '**/*.js+(|x)'],
+        exclude: ['node_modules/**'],
+      }),
       babel({
         exclude: 'node_modules/**',
         presets: ['@babel/env', '@babel/preset-react'],

libraries/core-react/src/Accordion/Accordion.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef, useMemo } from 'react'
 import createId from 'lodash/uniqueId'
 import PropTypes from 'prop-types'

libraries/core-react/src/Accordion/Accordion.test.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable no-undef */
+// @ts-nocheck
 import React from 'react'
 import PropTypes from 'prop-types'
 import { render, cleanup, screen, fireEvent } from '@testing-library/react'

libraries/core-react/src/Accordion/Accordion.tokens.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Accordion/AccordionHeader.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Accordion/AccordionItem.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { commonPropTypes, commonDefaultProps } from './Accordion.propTypes'

libraries/core-react/src/Accordion/AccordionPanel.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Accordion/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Accordion } from './Accordion'
 import { AccordionItem } from './AccordionItem'
 import { AccordionHeaderTitle, AccordionHeader } from './AccordionHeader'

libraries/core-react/src/Avatar/Avatar.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'

libraries/core-react/src/Avatar/Avatar.tokens.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export const avatar = {
   enabled: {
     border: {

libraries/core-react/src/Avatar/index.js

@@ -1 +1,2 @@
+// @ts-nocheck
 export { Avatar } from './Avatar'

libraries/core-react/src/Banner/Banner.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Banner/Banner.tokens.js

@@ -1,4 +1,5 @@
 /* eslint-disable camelcase */
+// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Banner/BannerActions.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Banner/BannerIcon.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Banner/BannerMessage.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Banner/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Banner } from './Banner'
 import { BannerIcon } from './BannerIcon'
 import { BannerMessage } from './BannerMessage'

libraries/core-react/src/Breadcrumbs/Breadcrumb.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'

libraries/core-react/src/Breadcrumbs/Breadcrumbs.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef, useState, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Breadcrumbs/Breadcrumbs.tokens.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Breadcrumbs/index.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Breadcrumbs } from './Breadcrumbs'
 import { Breadcrumb } from './Breadcrumb'
 

libraries/core-react/src/Button/Button.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'

libraries/core-react/src/Button/Button.tokens.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import primary from '@equinor/eds-tokens/components/button/buttons-primary.json'
 import secondary from '@equinor/eds-tokens/components/button/buttons-secondary.json'
 import danger from '@equinor/eds-tokens/components/button/buttons-danger.json'

libraries/core-react/src/Button/index.js

@@ -1 +1,2 @@
+// @ts-nocheck
 export { Button } from './Button'

libraries/core-react/src/Card/Card.jsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'

libraries/core-react/src/Card/Card.tokens.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {