Pre-reset changes

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.15.2
+  - export PATH="$HOME/.yarn/bin:$PATH"
+
+cache: yarn
+
+script: yarn run ci

package.json

@@ -22,6 +22,6 @@
     "@commitlint/cli": "^7.5.2",
     "@commitlint/config-conventional": "^7.5.0",
     "husky": "^1.3.1",
-    "lerna": "^3.13.0"
+    "lerna": "^3.13.1"
   }
 }

packages/configs/package.json

@@ -7,7 +7,7 @@
     "@bigcommerce/tslint-config": "^3.0.2",
     "lint-staged": "^8.1.5",
     "prettier": "^1.16.4",
-    "tslint": "^5.13.1",
+    "tslint": "^5.14.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.3.3333",
     "typescript-styled-plugin": "^0.14.0"

packages/plab/.svgrrc.js

@@ -18,8 +18,7 @@ module.exports = {
 
     export default class COMPONENT_NAME extends Icon {
       render() {
-        const props = this.props;
-        const { title } = props;
+        const { title, theme, ...props } = this.props;
         const size = this.getSize();
 
         BREAK

packages/plab/babel.config.js

@@ -6,9 +6,11 @@ module.exports = {
     [
       '@babel/preset-env',
       {
-        targets: {
-          browsers: ['last 2 versions', 'not ie < 11', 'not Baidu > 0', 'not QQAndroid > 0', 'not Android < 62'],
-        },
+        targets: isTestEnv
+          ? { node: 'current' }
+          : {
+              browsers: ['last 2 versions', 'not ie < 11', 'not Baidu > 0', 'not QQAndroid > 0', 'not Android < 62'],
+            },
         modules: isTestEnv ? 'auto' : false,
       },
     ],

packages/plab/jest.config.js

@@ -1,11 +1,9 @@
 module.exports = {
-  transform: {
-    '.[jt]sx?$': '<rootDir>/node_modules/babel-jest',
-  },
   testRegex: '(<rootDir>/(tests|src)/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
     '@src/(.*)': '<rootDir>/src/$1',
   },
   coverageDirectory: '<rootDir>/coverage',
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts', 'react-testing-library/cleanup-after-each'],
 };

packages/plab/package.json

@@ -4,7 +4,7 @@
   "sideEffects": false,
   "main": "dist/plab.cjs.js",
   "module": "dist/plab.es.js",
-  "typings": "dist/index.d.ts",
+  "typings": "dist/src/index.d.ts",
   "author": "BigCommerce Inc",
   "repository": "[email protected]:bigcommerce-labs/plab-playground.git",
   "license": "UNLICENSED",
@@ -32,13 +32,15 @@
     ]
   },
   "dependencies": {
-    "downshift": "^3.2.6",
+    "downshift": "^3.2.7",
     "hoist-non-react-statics": "^3.3.0",
     "polished": "^3.0.3",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-popper": "^1.3.3",
-    "styled-components": "^4.1.3"
+    "react-popper": "^1.3.3"
+  },
+  "peerDependencies": {
+    "react": ">= 16.3.0 < 17",
+    "react-dom": ">= 16.3.0 < 17",
+    "styled-components": "4.x"
   },
   "devDependencies": {
     "@babel/core": "^7.1.5",
@@ -50,18 +52,21 @@
     "@svgr/cli": "^4.1.0",
     "@types/hoist-non-react-statics": "^3.3.0",
     "@types/jest": "^24.0.11",
-    "@types/react": "^16.8.7",
+    "@types/react": "^16.8.8",
     "@types/react-dom": "^16.8.0",
     "@types/react-test-renderer": "^16.0.2",
     "@types/styled-components": "^4.1.12",
     "babel-core": "^7.0.0-0",
-    "babel-jest": "^24.3.1",
+    "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-styled-components": "^1.10.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "jest": "^24.3.1",
+    "jest": "^24.5.0",
+    "jest-dom": "^3.1.3",
     "jest-styled-components": "^6.3.1",
-    "react-test-renderer": "^16.8.4",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-testing-library": "^6.0.1",
     "rimraf": "^2.6.3",
     "rollup": "^1.6.0",
     "rollup-plugin-babel": "^4.3.2",
@@ -70,6 +75,7 @@
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-replace": "^2.1.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-typescript2": "^0.19.3"
+    "rollup-plugin-typescript2": "^0.20.1",
+    "styled-components": "^4.1.3"
   }
 }

packages/plab/setupTests.ts

@@ -0,0 +1 @@
+import 'jest-dom/extend-expect';

packages/plab/src/components/Button/Button.tsx

@@ -1,12 +1,12 @@
-import React, { Ref, RefObject } from 'react';
+import React, { Ref } from 'react';
 
 import { ThemeInterface } from '../../theme';
 import { Spinner } from '../Spinner';
 
 import { ContentWrapper, StyledButton } from './styled';
 
 interface PrivateProps {
-  forwardedRef: RefObject<HTMLButtonElement> | Ref<HTMLButtonElement>;
+  forwardedRef: Ref<HTMLButtonElement>;
 }
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -46,14 +46,23 @@ class RawButton extends React.PureComponent<ButtonProps & PrivateProps> {
   };
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
+export const StyleableButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (
   <RawButton {...props} forwardedRef={ref} />
 ));
 
-Button.displayName = 'Button';
-Button.defaultProps = {
-  actionType: 'normal',
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
+  <RawButton {...props} forwardedRef={ref} />
+));
+
+const defaultProps = {
+  actionType: 'normal' as 'normal',
   isLoading: false,
   spinner: <Spinner overlay={false} />,
-  variant: 'primary',
+  variant: 'primary' as 'primary',
 };
+
+Button.displayName = 'Button';
+Button.defaultProps = { ...defaultProps };
+
+StyleableButton.displayName = 'StyleableButton';
+StyleableButton.defaultProps = { ...defaultProps };