feat: Move to TypeScript

Closes #199

.babelrc.js

@@ -1,11 +1,17 @@
 const config = {
-  presets: ['@babel/preset-env', '@babel/preset-react', '@emotion/babel-preset-css-prop'],
+  comments: true,
+  presets: [
+    '@babel/preset-env',
+    ['@babel/typescript', { allExtensions: true, isTSX: true }],
+    '@babel/preset-react',
+    '@emotion/babel-preset-css-prop',
+  ],
   plugins: [
     '@babel/plugin-proposal-class-properties',
     ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-transform-runtime',
-    'emotion',
+    '@emotion',
   ],
 };
 

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     USE_ANALYTICS: false,
   },
   rules: {
+    '@typescript-eslint/rule-name': 'error',
     'react/jsx-props-no-spreading': 'off',
   },
   overrides: [
@@ -21,6 +22,8 @@ module.exports = {
       },
     },
   ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', '@emotion'],
   settings: {
     'import/ignore': ['utils/testing'],
   },

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   collectCoverage: false,
-  collectCoverageFrom: ['src/**/**.js'],
+  collectCoverageFrom: ['src/**/**.jsx', 'src/**/**.js', 'src/**/**.ts', 'src/**/**.tsx'],
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
   coverageReporters: ['lcov', 'html', 'text-summary'],
   moduleNameMapper: {
@@ -14,8 +14,8 @@ module.exports = {
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/styleguide/'],
   testURL: 'http://localhost',
   transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest',
+    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
     // Replace other files with their filename.
-    '^(?!.*\\.(js|jsx|json)$)': '<rootDir>/utils/jest.file-transform.js',
+    '^(?!.*\\.(ts|tsx|js|jsx|json)$)': '<rootDir>/utils/jest.file-transform.js',
   },
 };

package.json

@@ -3,12 +3,13 @@
   "version": "0.4.0",
   "description": "Nautilus design system for React",
   "main": "dist/main.js",
-  "module": "src/index.js",
+  "module": "src/index.ts",
   "scripts": {
     "build:package": "NODE_ENV=production webpack",
     "build:styleguide": "DISABLE_PEER_DEPS_PLUGIN=true NODE_ENV=production styleguidist build",
     "build": "npm run build:package && npm run build:styleguide",
     "clean": "shx rm -rf coverage/ dist/",
+    "check-types": "tsc",
     "lint:eslint:fix": "eslint --fix .",
     "lint:eslint": "eslint .",
     "lint:fix": "npm run lint:eslint:fix && npm run lint:prettier:fix && npm run lint:stylelint:fix",
@@ -50,7 +51,6 @@
   "dependencies": {
     "chroma-js": "^2.1.0",
     "classnames": "^2.2.6",
-    "emotion-theming": "^10.0.19",
     "feather-icons": "^4.24.1",
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",
@@ -59,29 +59,35 @@
   },
   "devDependencies": {
     "@babel/core": "^7.6.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-jsx-source": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
-    "@emotion/babel-preset-css-prop": "^10.0.23",
-    "@emotion/core": "^10.0.22",
+    "@babel/preset-typescript": "^7.9.0",
+    "@emotion/babel-plugin": "^11.0.0-next.12",
+    "@emotion/babel-preset-css-prop": "^11.0.0-next.10",
+    "@emotion/react": "^11.0.0-next.10",
     "@octopusthink/eslint-config": "^0.5.0",
     "@octopusthink/prettier-config": "^0.5.2",
     "@reach/router": "^1.2.1",
     "@react-hook/window-size": "^1.0.8",
     "@testing-library/react": "^8.0.9",
+    "@types/prop-types": "^15.7.3",
+    "@types/reach__router": "^1.3.4",
+    "@types/react": "^16.9.34",
+    "@typescript-eslint/eslint-plugin": "^2.28.0",
+    "@typescript-eslint/parser": "^2.28.0",
     "acorn": "^6.3.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
-    "babel-plugin-emotion": "^10.0.23",
     "eslint": "^6.6.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-emotion": "^10.0.14",
+    "eslint-plugin-emotion": "^11.0.0-next.10",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^22.21.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -93,11 +99,12 @@
     "jest": "^24.9.0",
     "jest-axe": "^3.2.0",
     "jest-dom": "^3.5.0",
-    "jest-emotion": "^10.0.17",
+    "jest-emotion": "^11.0.0-next.10",
     "lint-staged": "^10.0.9",
     "peer-deps-externals-webpack-plugin": "^1.0.4",
     "prettier": "1.17.1",
     "react": "^16.11.0",
+    "react-docgen-typescript": "^1.16.3",
     "react-dom": "^16.11.0",
     "react-router-dom": "^5.1.2",
     "react-styleguidist": "^9.2.0",
@@ -109,11 +116,12 @@
     "stylelint-order": "^3.1.1",
     "stylelint-prettier": "^1.1.0",
     "stylelint-processor-styled-components": "^1.7.0",
+    "typescript": "^3.8.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   },
   "peerDependencies": {
-    "@emotion/core": "^10.0.22",
+    "@emotion/react": "^11.0.0-next.10",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   }

src/components/hoc/Nautilus/context.ts

@@ -0,0 +1,5 @@
+import { ReactElement, createContext } from 'react';
+
+import LinkComponent from '../../ui/Link';
+
+export const NautilusLinkComponentContext = createContext<ReactElement | any>(LinkComponent);

src/components/hoc/Nautilus/index.js → src/components/hoc/Nautilus/index.tsx

@@ -1,15 +1,26 @@
-import { Global, css } from '@emotion/core';
-import { ThemeProvider } from 'emotion-theming';
-import PropTypes from 'prop-types';
-import React from 'react';
+import { Global, css, ThemeProvider, Theme } from '@emotion/react';
+import React, { ReactNode } from 'react';
 
-import { nautilus as nautilusDefaultTheme, themePropTypes } from '../../../themes';
+import { nautilusDefaultTheme } from '../../../themes';
 import { NautilusLinkComponentContext } from './context';
 
-const Nautilus = (props) => {
-  const { children, config, theme } = props;
+interface Props {
+  /** @ignore */
+  children?: React.ReactNode;
+  /** Config values affect all component rendered underneath this `Nautilus` component. Used to set default `Link` components, etc. */
+  config: {
+    LinkComponent?: ReactNode;
+  };
+  /** Theme object used to style this instance of Nautilus and its components. */
+  theme: Theme;
+}
 
-  const { LinkComponent } = config;
+const Nautilus = ({
+  children,
+  config = { LinkComponent: undefined },
+  theme = nautilusDefaultTheme,
+}: Props) => {
+  const { LinkComponent } = config || {};
 
   return (
     <NautilusLinkComponentContext.Provider value={LinkComponent}>
@@ -43,21 +54,4 @@ const Nautilus = (props) => {
   );
 };
 
-Nautilus.defaultProps = {
-  children: undefined,
-  config: { LinkComponent: undefined },
-  theme: nautilusDefaultTheme,
-};
-
-Nautilus.propTypes = {
-  /** @ignore */
-  children: PropTypes.node,
-  /** Config values affect all component rendered underneath this `Nautilus` component. Used to set default `Link` components, etc. */
-  config: PropTypes.shape({
-    LinkComponent: PropTypes.elementType,
-  }),
-  /** Theme object used to style this instance of Nautilus and its components. */
-  theme: themePropTypes,
-};
-
 export default Nautilus;

src/components/inline/Emphasis/index.tsx

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import React, { FunctionComponent } from 'react';
+
+import { NautilusComponentProps } from '../../types';
+import { useTheme } from '../../../themes';
+
+interface Props
+  extends React.PropsWithoutRef<JSX.IntrinsicElements['em']>,
+    NautilusComponentProps {}
+
+const Emphasis: FunctionComponent<Props> = ({ children, unstyled, ...otherProps }: Props) => {
+  const theme = useTheme();
+
+  return (
+    <em
+      css={
+        unstyled
+          ? undefined
+          : css`
+              background: ${theme.colors.text.emphasisBackground};
+              color: ${theme.colors.text.emphasis};
+              font-style: italic;
+            `
+      }
+      {...otherProps}
+    >
+      {children}
+    </em>
+  );
+};
+
+export default Emphasis;

src/components/inline/Strong/index.js → src/components/inline/Strong/index.tsx

@@ -1,10 +1,12 @@
-import { css } from '@emotion/core';
-import PropTypes from 'prop-types';
-import React from 'react';
+import { css } from '@emotion/react';
+import React, { FunctionComponent } from 'react';
 
+import { NautilusComponentProps } from '../../types';
 import { useTheme } from '../../../themes';
 
-const Strong = (props) => {
+interface Props extends NautilusComponentProps {}
+
+const Strong: FunctionComponent<Props> = (props: Props) => {
   const { children, unstyled, ...otherProps } = props;
 
   const theme = useTheme();
@@ -27,18 +29,4 @@ const Strong = (props) => {
   );
 };
 
-Strong.defaultProps = {
-  children: undefined,
-  unstyled: false,
-};
-
-Strong.propTypes = {
-  /** @ignore */
-  children: PropTypes.node,
-  /* @ignore Don't output any CSS styles. */
-  unstyled: PropTypes.bool,
-};
-
-export const { defaultProps, propTypes } = Strong;
-
 export default Strong;

src/components/types/index.ts

@@ -0,0 +1,6 @@
+export interface NautilusComponentProps {
+  /** @ignore */
+  children?: React.ReactNode;
+  /** Don't output any CSS styles. */
+  unstyled?: Boolean;
+}

src/components/ui/Button/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
 import React from 'react';

src/components/ui/Heading/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import invariant from 'invariant';

src/components/ui/Icon/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import Feather from 'feather-icons';
 import PropTypes from 'prop-types';
 import React, { useState, useMemo } from 'react';

src/components/ui/Link/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 

src/components/ui/List/Item.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';

src/components/ui/List/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Children, cloneElement, useMemo, useState } from 'react';

src/components/ui/PageTitle/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import React from 'react';
 

src/components/ui/Paragraph/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import invariant from 'invariant';
 import PropTypes from 'prop-types';

src/components/ui/SkipLink/index.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import React from 'react';
 

src/components/ui/Tabs/Tab.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';