[typescript] Add tests for typings + fixes

[sebald]

This patch will add testing for TS typings (finally) and fixes some wrong typings (details below).

Closes #7696

• Ship the typings with the build
• Run the tests yarn run test:typings [-- --watch]
• Add typings for GridList
• Add typings for transitions Collapse, Fade and Slide
• Fix TestFieldProps (typo...)
• Fix SnackbarProps (action can be an array, message can be a string)
• Fix TransitionProps (duration can be a string)
• Fix FormGroupProps (row is optional)
• Fix SlideProps (direction + offset where missing)
• Use SlideProps in DrawerProps

---

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

[stevegeek]

@sebald Is it just me or is Collapse, Slide and Fade transition missing from defs?

declare module 'material-ui/transitions/Collapse' {
  import {TransitionCallback} from 'material-ui/internal/Transition';
  interface CollapseProps {
    in?: boolean;
    transitionDuration?: number | 'auto';
    onEnter?: TransitionCallback;
    onEntered?: TransitionCallback;
    onEntering?: TransitionCallback;
    onExit?: TransitionCallback;
    onExited?: TransitionCallback;
    onExiting?: TransitionCallback;
  }
  export default class Collapse extends MaterialUI.Component<CollapseProps> {}
}


declare module 'material-ui/transitions/Slide' {
  import {TransitionCallback} from 'material-ui/internal/Transition';
  interface SlideProps {
    direction?: 'left' | 'right' | 'up' | 'down';
    enterTransitionDuration?: number;
    in?: boolean;
    leaveTransitionDuration?: number;
    offset?: string;
    onEnter?: TransitionCallback;
    onEntered?: TransitionCallback;
    onEntering?: TransitionCallback;
    onExit?: TransitionCallback;
    onExited?: TransitionCallback;
    onExiting?: TransitionCallback;
  }
  export default class Slide extends MaterialUI.Component<SlideProps> {}
}

declare module 'material-ui/transitions/Fade' {
  import {TransitionCallback} from 'material-ui/internal/Transition';
  interface FadeProps {
    enterTransitionDuration?: number;
    in?: boolean;
    leaveTransitionDuration?: number;
    offset?: string;
    onEnter?: TransitionCallback;
    onEntered?: TransitionCallback;
    onEntering?: TransitionCallback;
    onExit?: TransitionCallback;
    onExited?: TransitionCallback;
    onExiting?: TransitionCallback;
  }
  export default class Fade extends MaterialUI.Component<FadeProps> {}
}

[sebald]

@stevegeek Which version of the typings are you using? I added them in 99c5658

[stevegeek]

@sebald Ah ok I must be using one from before that commit! thanks!

[sebald]

@stevegeek You're very welcome :) Let me know if you run into problems with them!

[stevegeek]

@sebald I think direction and offset are missing from Slide https://github.com/callemall/material-ui/blob/v1-beta/src/transitions/Slide.js#L35

  direction?: 'left' | 'right' | 'up' | 'down';
  offset?: string;

Also enterTransitionDuration and leaveTransitionDuration on Slide and Fade are just number , not number | 'auto' like transitionDuration on Collapse (see https://github.com/callemall/material-ui/blob/v1-beta/src/transitions/Fade.js#L26 vs https://github.com/callemall/material-ui/blob/v1-beta/src/transitions/Collapse.js#L75)

[stevegeek]

Another question, for material-ui-icons , what do you tihnk about adding typings to that package too?

eg

// Either declare here or import SvgIconProps from main typings as all icons are implemented with SvgIcon
declare interface IconProps extends React.HTMLAttributes<{}> {
  titleAccess?: string;
  viewBox?: string;
}

declare module 'material-ui-icons/Menu' {
  export default class Menu extends React.Component<IconProps> {}
}

declare module 'material-ui-icons/ExitToApp' {
  export default class Icon extends React.Component<IconProps> {}
}

... etc for all icons. Here could write a script to generate the declarations from the files names in https://github.com/callemall/material-ui/tree/v1-beta/packages/material-ui-icons/src

[sebald]

@stevegeek Thanks. Updated!

Yes, I want to add typigns for the icons, too. I just didn't have time yet. Which is kinda dump to say, because we already have typings internally ;D

We're using the following script to generate the typings:

/**
 * Generate type definitions for `material-ui-icons`.
 * The generated contens will be written to
 * `src/typings/material-ui-icons.d.ts`!
 */
const { parse, resolve } = require('path');
const { EOL } = require('os');
const chalk = require('chalk');
const { writeFile } = require('fs-extra');
const globby = require('globby');
const { map, pipe } = require('ramda');
const { error } = require('./utils');
const log = console.log;

const MODULE_DIR = resolve(__dirname, '../node_modules/material-ui-icons');
const DTS_FILE = resolve(__dirname, '../src/typings/material-ui-icons.d.ts');

// Helpers
// ---------------
const normalizeFileName = name => parse(name).name;

const createTypeDefinition = name =>
  `declare module 'material-ui-icons/${name}' {
  import SvgIcon from 'material-ui/SvgIcon';
  export default class ${name} extends SvgIcon {}
}`;

const convertFilesToTypings = map(
  pipe(normalizeFileName, createTypeDefinition)
);

// Script
// ---------------
log(`\u{1f52c}  Searching for modules inside "${chalk.dim(MODULE_DIR)}".`);
globby(['*.js', '!index*'], { cwd: MODULE_DIR })
  .then(convertFilesToTypings)
  .then(typings => typings.join(`${EOL}${EOL}`))
  .then(contents => writeFile(DTS_FILE, contents, { encoding: 'utf8' }))
  .then(() => log(`\u{1F5C4}  Written typings to ${chalk.dim(DTS_FILE)}.`))
  .catch(err => {
    if (err) {
      error(err);
    }
    process.exit(1);
  });

Just change the MODULE_DIR and DTS_FILE and you should be good to go.

[sebald]

Your output should look something like this: https://gist.github.com/sebald/c150a718aa05b2206dbdf1ef9e07e9d2

[stevegeek]

@sebald Thats just perfect, thanks!!

[oliviertassinari]

Oops, I have forgotten to merge the PR before the latest release. I will give you write access so we can work with more efficiency.

[sebald]

@oliviertassinari ¯_(ツ)_/¯ happens!

Wow, thanks :-O now I am scared.

[oliviertassinari]

Don't worry, it's gonna be all right. Whenever you want to improve the typescript coverage, go ahead. I don't know anyone better than you to take care of it.

[marcusjwhelan]

Will there be types for Grid? @sebald

[sebald]

@marcusjwhelan Not sure if I can follow. Do you have problems using them? Because there already are typings for Grid:

https://github.com/callemall/material-ui/blob/babfdb4e7ec6b158e7b1d16a5576f4efdfcf14ac/typings/index.d.ts#L587-L630

Please let me know if you run into issues with using the typings.

[marcusjwhelan]

@sebald @oliviertassinari The Typings are not shipped with npm. I have tried next. There is the @types/material-ui but it is only up to date with 0.17.

[oliviertassinari]

We need to release these typings! I can do a quick release before the end of the week.

[stevegeek]

@marcusjwhelan I have been using these typings for a while now and they are great so once released you can rely on them

@sebald @oliviertassinari Before releasing can we make sure to add the changes for the new withStyles and the removed createStyleSheet method

[sebald]

@stevegeek Can you please open an issue? (maybe even elaborate on the change)

[vyrotek]

@sebald I believe @stevegeek is referring to #7740 and #7730 which were just released in beta 5

I'm definitely looking forward to the typings being released!

[stevegeek]

@sebald @vyrotek Sorry just saw this message, yeah was referring to those latest changes in the API, you would like me to open an issue?

[sebald]

@stevegeek See #7793 :)