Merge pull request #88 from contentful/add-prop-types-generatation

Add prop types generatation
contentful · Feb 13, 2019 · 7108da4 · 7108da4
2 parents 57febfc + 628b9be
commit 7108da4
Show file tree

Hide file tree

Showing 23 changed files with 196 additions and 169 deletions.
diff --git a/packages/forma-36-react-components/.babelrc b/packages/forma-36-react-components/.babelrc
@@ -7,6 +7,7 @@
     "@babel/plugin-proposal-export-namespace-from",
     "@babel/plugin-proposal-numeric-separator",
     "@babel/plugin-proposal-throw-expressions",
+    "babel-plugin-typescript-to-proptypes",
 
     // Stage 3
     "@babel/plugin-syntax-dynamic-import",

diff --git a/packages/forma-36-react-components/.eslintignore b/packages/forma-36-react-components/.eslintignore
@@ -1,2 +1,3 @@
 /node_modules/
-/dist/
+/dist/
+index.d.ts
diff --git a/packages/forma-36-react-components/package.json b/packages/forma-36-react-components/package.json
@@ -47,16 +47,17 @@
     "@types/storybook__react": "4.0.0",
     "@typescript-eslint/eslint-plugin": "1.3.0",
     "@typescript-eslint/parser": "1.3.0",
-    "babel-jest": "^24.0.0",
+    "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-css-modules-transform": "^1.6.2",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-inline-react-svg": "^1.0.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.23",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "babel-plugin-typescript-to-proptypes": "0.17.1",
     "css-loader": "^1.0.1",
     "cz-conventional-changelog": "^2.1.0",
     "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.8.0",
+    "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
     "eslint": "5.13.0",
     "eslint-config-dev": "2.0.0",
@@ -68,8 +69,8 @@
     "eslint-plugin-react": "7.12.4",
     "file-loader": "^3.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.0.0",
-    "jest-axe": "^3.1.0",
+    "jest": "^24.1.0",
+    "jest-axe": "^3.1.1",
     "markdown-it": "^8.4.2",
     "mini-css-extract-plugin": "^0.4.5",
     "optimize-css-assets-webpack-plugin": "5.0.1",
@@ -127,7 +128,7 @@
     "build": "yarn build:clean && yarn build:scripts && yarn build:styles && yarn build:types && yarn build:umd && yarn size && yarn build:post-clean",
     "size": "size-limit",
     "generate": "yarn plop --plopfile ./tools/plopfile.js",
-    "eslint": "eslint ./",
+    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint": "yarn eslint",
     "add-component": "yarn generate component",
     "add-documentation": "yarn generate documentation",

diff --git a/packages/forma-36-react-components/src/components/Button/Button.tsx b/packages/forma-36-react-components/src/components/Button/Button.tsx
@@ -75,6 +75,7 @@ export class Button extends Component<ButtonProps> {
     const iconColor =
       buttonType === 'muted' || buttonType === 'naked' ? 'secondary' : 'white';
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const Element: any = href ? 'a' : 'button';
 
     return (

diff --git a/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.stories.tsx b/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, select, boolean, number } from '@storybook/addon-knobs';
+import { text, select, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { host } from 'storybook-host';
 import { withInfo } from '@storybook/addon-info';

diff --git a/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.test.tsx b/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.test.tsx
@@ -6,8 +6,11 @@ import DropdownList from '../../Dropdown/DropdownList';
 import DropdownListItem from '../../Dropdown/DropdownListItem';
 
 it('renders the component', () => {
-  const output = shallow(<AssetCard>AssetCard</AssetCard>);
-
+  const output = shallow(
+    <AssetCard title="picture of a cat" src="http://placekitten.com/200/300">
+      AssetCard
+    </AssetCard>,
+  );
   expect(output).toMatchSnapshot();
 });
 
@@ -71,7 +74,7 @@ it('renders the component without actions', () => {
     <AssetCard src="http://placekitten.com/200/300" title="picture of a cat" />,
   );
 
-  expect(output.find('Dropdown').length).toEqual(0);
+  expect(output.find('Dropdown')).toHaveLength(0);
   expect(output).toMatchSnapshot();
 });
 

diff --git a/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.tsx b/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.tsx
@@ -11,10 +11,10 @@ import AssetCardSkeleton from './AssetCardSkeleton';
 const styles = require('./AssetCard.css');
 
 interface AssetCardPropTypes {
-  extraClassNames?: string;
   src: string;
+  title: string;
+  extraClassNames?: string;
   isLoading?: boolean;
-  title?: string;
   dropdownListElements?: React.ReactNode;
   status?: 'archived' | 'changed' | 'draft' | 'published';
   testId?: string;
@@ -26,12 +26,10 @@ interface AssetCardState {
 }
 
 export class AssetCard extends Component<AssetCardPropTypes, AssetCardState> {
-  static defaultProps = {
+  static defaultProps: Partial<AssetCardPropTypes> = {
     extraClassNames: undefined,
     dropdownListElements: undefined,
     isLoading: false,
-    src: undefined,
-    title: undefined,
     status: undefined,
     type: undefined,
     testId: 'cf-ui-asset-card',

diff --git a/...a-36-react-components/src/components/Card/AssetCard/__snapshots__/AssetCard.test.tsx.snap b/...a-36-react-components/src/components/Card/AssetCard/__snapshots__/AssetCard.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`renders the component 1`] = `
   padding="default"
   selected={false}
   testId="cf-ui-asset-card"
+  title="picture of a cat"
 >
   <div
     className="AssetCard__inner-wrapper"
@@ -18,6 +19,8 @@ exports[`renders the component 1`] = `
     >
       <Asset
         extraClassNames="AssetCard__asset"
+        src="http://placekitten.com/200/300"
+        title="picture of a cat"
         type="image"
       />
     </div>

diff --git a/packages/forma-36-react-components/src/components/Card/Card/Card.test.tsx b/packages/forma-36-react-components/src/components/Card/Card/Card.test.tsx
@@ -41,7 +41,7 @@ it('calls an onClick function', () => {
   output.simulate('click');
 
   expect(output).toMatchSnapshot();
-  expect(onClickFunc).toBeCalled();
+  expect(onClickFunc).toHaveBeenCalled();
 });
 
 it('can be selected', () => {

diff --git a/packages/forma-36-react-components/src/components/Card/Card/Card.tsx b/packages/forma-36-react-components/src/components/Card/Card/Card.tsx
@@ -48,14 +48,17 @@ export class Card extends Component<CardPropTypes> {
     });
 
     const Element: React.ReactType = href ? 'a' : 'div';
-    return React.createElement(Element, {
-      href,
-      className: classNames,
-      onClick: this.handleClick,
-      'data-test-id': testId,
-      ...otherProps,
+    return React.createElement(
+      Element,
+      {
+        href,
+        className: classNames,
+        onClick: this.handleClick,
+        'data-test-id': testId,
+        ...otherProps,
+      },
       children,
-    });
+    );
   }
 }
 

diff --git a/...ges/forma-36-react-components/src/components/Card/ReferenceCard/ReferenceCard.stories.tsx b/...ges/forma-36-react-components/src/components/Card/ReferenceCard/ReferenceCard.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, select, boolean, number } from '@storybook/addon-knobs';
+import { text, select, boolean } from '@storybook/addon-knobs';
 import { host } from 'storybook-host';
 import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';

diff --git a/packages/forma-36-react-components/src/components/Checkbox/Checkbox.stories.tsx b/packages/forma-36-react-components/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text, boolean } from '@storybook/addon-knobs';
+import { text, boolean, action } from '@storybook/addon-knobs';
 import { host } from 'storybook-host';
 import { withInfo } from '@storybook/addon-info';
 
@@ -24,6 +24,7 @@ storiesOf('Components|Checkbox', module)
         disabled={boolean('Disabled', false)}
         required={boolean('Required', false)}
         name={text('Name', 'some-name')}
+        onChange={action('onChange')}
       />
     )),
   );
diff --git a/packages/forma-36-react-components/src/components/CheckboxField/CheckboxField.stories.tsx b/packages/forma-36-react-components/src/components/CheckboxField/CheckboxField.stories.tsx
@@ -34,7 +34,9 @@ storiesOf('Components|CheckboxField', module)
           name="someOption"
           checked={store.state.optionOne}
           value="yes"
-          onChange={e => store.set({ optionOne: e.target.checked })}
+          onChange={e =>
+            store.set({ optionOne: (e.target as HTMLInputElement).checked })
+          }
           labelIsLight={boolean('Light', false)}
           inputProps={{
             onBlur: action('onBlur'),
@@ -50,7 +52,9 @@ storiesOf('Components|CheckboxField', module)
           name="someOption"
           value="no"
           checked={store.state.optionTwo}
-          onChange={e => store.set({ optionTwo: e.target.checked })}
+          onChange={e =>
+            store.set({ optionTwo: (e.target as HTMLInputElement).checked })
+          }
           labelIsLight={boolean('Light', false)}
           inputProps={{
             onBlur: action('onBlur'),

diff --git a/packages/forma-36-react-components/src/components/ControlledInput/ControlledInput.tsx b/packages/forma-36-react-components/src/components/ControlledInput/ControlledInput.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, EventHandler, ChangeEvent, FocusEvent } from 'react';
 import cn from 'classnames';
 
 const styles = require('./ControlledInput.css');
@@ -11,10 +10,10 @@ export interface ControlledInputPropTypes {
   labelText: string;
   testId?: string;
   checked?: boolean;
-  onChange?: (...args: any[]) => any;
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
   name?: string;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: EventHandler<FocusEvent<HTMLInputElement>>;
+  onFocus?: EventHandler<FocusEvent<HTMLInputElement>>;
   value?: string;
   disabled?: boolean;
   type?: 'checkbox' | 'radio';
@@ -71,12 +70,12 @@ export class ControlledInput extends Component<ControlledInputPropTypes> {
             onChange(e);
           }
         }}
-        onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
+        onBlur={e => {
           if (onBlur) {
             onBlur(e);
           }
         }}
-        onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
+        onFocus={e => {
           if (onFocus) {
             onFocus(e);
           }

diff --git a/...es/forma-36-react-components/src/components/ControlledInputField/ControlledInputField.tsx b/...es/forma-36-react-components/src/components/ControlledInputField/ControlledInputField.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, SyntheticEvent } from 'react';
 import cn from 'classnames';
 import FormLabel from '../FormLabel';
 import HelpText from '../HelpText';
@@ -24,7 +23,7 @@ export interface ControlledInputFieldPropTypes {
   checked?: boolean;
   inputProps?: object;
   inputType?: 'radio' | 'checkbox';
-  onChange?: (...args: any[]) => any;
+  onChange?: (e: SyntheticEvent) => void;
   children?: React.ReactNode;
 }
 

diff --git a/packages/forma-36-react-components/src/components/Icon/Icon.stories.tsx b/packages/forma-36-react-components/src/components/Icon/Icon.stories.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, select } from '@storybook/addon-knobs';

diff --git a/packages/forma-36-react-components/src/components/Icon/Icon.test.tsx b/packages/forma-36-react-components/src/components/Icon/Icon.test.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { axe } from 'jest-axe';

diff --git a/packages/forma-36-react-components/src/components/Icon/Icon.tsx b/packages/forma-36-react-components/src/components/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, CSSProperties } from 'react';
 import cn from 'classnames';
 import { iconName } from './constants';
 
@@ -239,7 +239,7 @@ export interface IconProps {
   testId?: string;
   size?: 'tiny' | 'small' | 'large';
   color?: 'primary' | 'positive' | 'negative' | 'secondary' | 'muted' | 'white';
-  style?: Object;
+  style?: CSSProperties;
   icon: IconType;
 }
 

diff --git a/packages/forma-36-react-components/src/components/IconButton/IconButton.test.tsx b/packages/forma-36-react-components/src/components/IconButton/IconButton.test.tsx
@@ -101,7 +101,7 @@ it('calls an onClick function', () => {
   output.simulate('click');
 
   expect(output).toMatchSnapshot();
-  expect(onClickFunc).toBeCalled();
+  expect(onClickFunc).toHaveBeenCalled();
 });
 
 it('prevents an onClick function from being called when disabled', () => {
@@ -118,7 +118,7 @@ it('prevents an onClick function from being called when disabled', () => {
   output.simulate('click');
 
   expect(output).toMatchSnapshot();
-  expect(onClickFunc).not.toBeCalled();
+  expect(onClickFunc).not.toHaveBeenCalled();
 });
 
 it('allows passing additional props not consumed by the component', () => {

diff --git a/packages/forma-36-react-components/src/components/IconButton/IconButton.tsx b/packages/forma-36-react-components/src/components/IconButton/IconButton.tsx
@@ -81,15 +81,18 @@ export class IconButton extends Component<IconButtonProps> {
     );
 
     if (href) {
+      if (disabled) {
+        return <a {...elementProps}>{content}</a>;
+      }
       return (
-        <a {...elementProps} href={disabled ? '' : href}>
-          {content}
+        <a {...elementProps} href={href}>
+          content
         </a>
       );
     }
 
     return (
-      <button {...elementProps} disabled={disabled}>
+      <button {...elementProps} type="button" disabled={disabled}>
         {content}
       </button>
     );