Merge pull request #129 from contentful/strict-typescript

contentful · Mar 18, 2019 · 05d1af8 · 05d1af8
2 parents 24ce766 + befef0b
commit 05d1af8
Show file tree

Hide file tree

Showing 220 changed files with 1,518 additions and 2,083 deletions.
diff --git a/packages/forma-36-react-components/.eslintrc.js b/packages/forma-36-react-components/.eslintrc.js
@@ -51,7 +51,6 @@ module.exports = {
     ],
     '@typescript-eslint/no-for-in-array': 'error',
     '@typescript-eslint/no-var-requires': 'off',
-    // enable again once all components are Typescript
-    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
   },
 };
diff --git a/packages/forma-36-react-components/package.json b/packages/forma-36-react-components/package.json
@@ -35,7 +35,9 @@
     "@types/jest": "23.3.13",
     "@types/jest-axe": "2.2.2",
     "@types/react": "16.8.6",
+    "@types/react-dom": "16.8.2",
     "@types/react-transition-group": "2.0.15",
+    "@types/react-copy-to-clipboard": "4.2.6",
     "@types/storybook__react": "4.0.1",
     "@typescript-eslint/eslint-plugin": "1.3.0",
     "@typescript-eslint/parser": "1.3.0",
@@ -87,11 +89,10 @@
     "rollup-plugin-terser": "^3.0.0",
     "semantic-release": "^15.1.4",
     "size-limit": "^0.21.1",
-    "storybook-prop-types-addon": "1.0.0",
+    "storybook-prop-types-addon": "1.0.1",
     "style-loader": "^0.23.1",
     "travis-deploy-once": "^4.4.1",
     "typescript": "3.3.3",
-    "typings-for-css-modules-loader": "^1.7.0",
     "webpack": "4.29.0",
     "webpack-cli": "^3.2.1"
   },

diff --git a/packages/forma-36-react-components/src/components/Asset/Asset.css.d.ts b/packages/forma-36-react-components/src/components/Asset/Asset.css.d.ts
diff --git a/packages/forma-36-react-components/src/components/Asset/Asset.stories.tsx b/packages/forma-36-react-components/src/components/Asset/Asset.stories.tsx
@@ -10,9 +10,9 @@ storiesOf('Components|Asset', module)
   })
   .add('default', () => (
     <Asset
-      extraClassNames={text('Extra Class Names', '')}
-      src={text('Source', 'https://placekitten.com/200/300')}
-      title={text('Title', 'Image of a cat')}
-      type={select('Asset Type', types, 'archive')}
+      extraClassNames={text('extraClassNames', '')}
+      src={text('src', 'https://placekitten.com/200/300')}
+      title={text('title', 'Image of a cat')}
+      type={select('type', types, 'archive')}
     />
   ));
diff --git a/packages/forma-36-react-components/src/components/Asset/Asset.tsx b/packages/forma-36-react-components/src/components/Asset/Asset.tsx
@@ -20,18 +20,19 @@ export const types = {
 
 export type AssetType = keyof typeof types;
 
-export interface AssetProps {
-  extraClassNames?: string;
+export type AssetProps = {
   src: string;
   title: string;
   type?: AssetType;
-}
+  extraClassNames?: string;
+} & typeof defaultProps;
+
+const defaultProps = {
+  type: 'image',
+};
 
 export class Asset extends Component<AssetProps> {
-  static defaultProps = {
-    extraClassNames: undefined,
-    type: 'image',
-  };
+  static defaultProps = defaultProps;
 
   renderImage = (src: string, title: string) => (
     <React.Fragment>
@@ -48,7 +49,7 @@ export class Asset extends Component<AssetProps> {
     </React.Fragment>
   );
 
-  renderAsset = (type: string, title: string) => {
+  renderAsset = (type: AssetType, title: string) => {
     const illustraionName = type.charAt(0).toUpperCase() + type.slice(1);
     return (
       <div className={styles['Asset__asset-container']}>
@@ -67,7 +68,7 @@ export class Asset extends Component<AssetProps> {
 
     return (
       <div className={classNames} {...otherProps}>
-        {type === 'image'
+        {type && type === 'image'
           ? this.renderImage(src, title)
           : this.renderAsset(type, title)}
       </div>

diff --git a/packages/forma-36-react-components/src/components/Button/Button.css.d.ts b/packages/forma-36-react-components/src/components/Button/Button.css.d.ts
diff --git a/packages/forma-36-react-components/src/components/Button/Button.stories.tsx b/packages/forma-36-react-components/src/components/Button/Button.stories.tsx
@@ -15,10 +15,10 @@ storiesOf('Components|Button', module)
     'Button',
     () => (
       <Button
-        extraClassNames={text('Extra Class Names', '')}
-        icon={select('Icon', [undefined, ...Object.keys(iconName)], undefined)}
+        extraClassNames={text('extraClassNames', '')}
+        icon={select('icon', [undefined, ...Object.keys(iconName)], undefined)}
         buttonType={select(
-          'Type',
+          'buttonType',
           {
             muted: 'muted',
             primary: 'primary',
@@ -28,14 +28,14 @@ storiesOf('Components|Button', module)
           },
           'muted',
         )}
-        size={select('Size', [undefined, 'small', 'large'], undefined)}
-        loading={boolean('Loading', false)}
-        indicateDropdown={boolean('Show dropdown chevron', false)}
-        disabled={boolean('Disabled', false)}
-        isFullWidth={boolean('Is full width', false)}
-        onClick={action('OnClick')}
-        onBlur={action('OnBlur')}
-        href={text('Href', '')}
+        size={select('size', [undefined, 'small', 'large'], undefined)}
+        loading={boolean('loading', false)}
+        indicateDropdown={boolean('indicateDropdown', false)}
+        disabled={boolean('disabled', false)}
+        isFullWidth={boolean('isFullWidth', false)}
+        onClick={action('onClick')}
+        onBlur={action('onBlur')}
+        href={text('href', '')}
       >
         {text('Text', 'Embed entry')}
       </Button>

diff --git a/packages/forma-36-react-components/src/components/Button/Button.tsx b/packages/forma-36-react-components/src/components/Button/Button.tsx
@@ -1,4 +1,11 @@
-import React, { Component, SyntheticEvent, CSSProperties } from 'react';
+import React, {
+  Component,
+  CSSProperties,
+  FocusEvent,
+  MouseEvent as ReactMouseEvent,
+  FocusEventHandler,
+  MouseEventHandler,
+} from 'react';
 import cn from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import Icon, { IconType } from '../Icon/Icon';
@@ -7,14 +14,12 @@ import Spinner from '../Spinner';
 
 const styles = require('./Button.css');
 
-export interface ButtonProps {
-  extraClassNames?: string;
-  children?: React.ReactNode;
+export type ButtonProps = {
   icon?: IconType;
   indicateDropdown?: boolean;
-  onClick?: (e: SyntheticEvent) => void;
+  onClick?: MouseEventHandler;
   isFullWidth?: boolean;
-  onBlur?: (e: SyntheticEvent) => void;
+  onBlur?: FocusEventHandler;
   loading?: boolean;
   disabled?: boolean;
   testId?: string;
@@ -23,18 +28,22 @@ export interface ButtonProps {
   size?: 'small' | 'large';
   href?: string;
   style?: CSSProperties;
-}
+  extraClassNames?: string;
+  children?: React.ReactNode;
+} & typeof defaultProps;
+
+const defaultProps = {
+  loading: false,
+  isFullWidth: false,
+  indicateDropdown: false,
+  disabled: false,
+  testId: 'cf-ui-button',
+  buttonType: 'primary',
+  type: 'button',
+};
 
 export class Button extends Component<ButtonProps> {
-  static defaultProps = {
-    loading: false,
-    isFullWidth: false,
-    indicateDropdown: false,
-    disabled: false,
-    testId: 'cf-ui-button',
-    buttonType: 'primary',
-    type: 'button',
-  };
+  static defaultProps = defaultProps;
 
   render() {
     const {
@@ -69,16 +78,17 @@ 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 (
       <Element
-        onBlur={(e: SyntheticEvent) => {
+        onBlur={(e: FocusEvent) => {
           if (onBlur && !disabled) {
             onBlur(e);
           }
         }}
-        onClick={(e: SyntheticEvent) => {
+        onClick={(e: ReactMouseEvent) => {
           if (onClick && !disabled && !loading) {
             onClick(e);
           }

diff --git a/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.css.d.ts b/packages/forma-36-react-components/src/components/Card/AssetCard/AssetCard.css.d.ts
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
@@ -14,7 +14,7 @@ storiesOf('Components|Card/AssetCard', module)
   })
   .add('default', () => (
     <AssetCard
-      extraClassNames={text('Extra Class Names', '')}
+      extraClassNames={text('extraClassNames', '')}
       status={select(
         'Status',
         {
@@ -33,9 +33,9 @@ storiesOf('Components|Card/AssetCard', module)
   ))
   .add('with dropdownListElements', () => (
     <AssetCard
-      extraClassNames={text('Extra Class Names', '')}
+      extraClassNames={text('extraClassNames', '')}
       status={select(
-        'Status',
+        'status',
         {
           Draft: 'draft',
           Changed: 'changed',
@@ -44,10 +44,10 @@ storiesOf('Components|Card/AssetCard', module)
         },
         'published',
       )}
-      type={select('Asset Type', types, 'image')}
-      isLoading={boolean('Is Loading', false)}
-      src={text('Source', 'https://placekitten.com/200/300')}
-      title={text('Title', 'Image of a cat')}
+      type={select('type', types, 'image')}
+      isLoading={boolean('isLoading', false)}
+      src={text('src', 'https://placekitten.com/200/300')}
+      title={text('title', 'Image of a cat')}
       dropdownListElements={
         <span>
           <DropdownList>