[lab] Migrate Timeline to TypeScript

Author: oliviertassinari

docs/pages/api-docs/timeline.md

@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/Timeline/Timeline.js
+filename: /packages/material-ui-lab/src/Timeline/Timeline.tsx
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -51,7 +51,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/Timeline/Timeline.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/Timeline/Timeline.tsx) for more detail.
 
 ## Demos
 

docs/scripts/buildApi.ts

@@ -134,8 +134,8 @@ async function annotateComponentDefinition(context: {
       }
 
       const { leadingComments } = node;
-      const jsdocBlock = leadingComments !== null ? leadingComments[0] : null;
-      if (leadingComments !== null && leadingComments.length > 1) {
+      const jsdocBlock = leadingComments != null ? leadingComments[0] : null;
+      if (leadingComments != null && leadingComments.length > 1) {
         throw new Error('Should only have a single leading jsdoc block');
       }
       if (jsdocBlock != null) {
@@ -372,7 +372,7 @@ async function buildDocs(options: {
   // no Object.assign to visually check for collisions
   reactAPI.forwardsRefTo = testInfo.forwardsRefTo;
 
-  // if (reactAPI.name !== 'TableCell') {
+  // if (reactAPI.name !== 'Timeline') {
   //   return;
   // }
 

docs/src/modules/utils/find.js

@@ -46,7 +46,7 @@ function findPagesMarkdown(
   return pagesMarkdown;
 }
 
-const componentRegex = /^(Unstable_)?([A-Z][a-z]+)+\.js/;
+const componentRegex = /^(Unstable_)?([A-Z][a-z]+)+\.(js|tsx)/;
 
 /**
  * Returns the component source in a flat array.

docs/src/modules/utils/generateMarkdown.ts

@@ -540,7 +540,7 @@ function generateImportStatement(reactAPI: ReactApi): string {
       (match, dash, pkg) => `@material-ui/${pkg || 'core'}`,
     )
     // convert things like `/Table/Table.js` to ``
-    .replace(/\/([^/]+)\/\1\.js$/, '');
+    .replace(/\/([^/]+)\/\1\.(js|tsx)$/, '');
   return `## Import
 
 \`\`\`js

packages/material-ui-lab/package.json

@@ -29,6 +29,7 @@
     "build:node": "node ../../scripts/build node",
     "build:stable": "node ../../scripts/build stable",
     "build:copy-files": "node ../../scripts/copy-files.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "prebuild": "rimraf build",
     "release": "yarn build && npm publish build --tag next",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-lab/**/*.test.{js,ts,tsx}'",

packages/material-ui-lab/src/Timeline/Timeline.d.ts

@@ -4,7 +4,7 @@ import Timeline from './Timeline';
 
 describe('<Timeline />', () => {
   const mount = createMount();
-  let classes;
+  let classes: Record<string, string>;
 
   before(() => {
     classes = getClasses(<Timeline />);

packages/material-ui-lab/src/Timeline/Timeline.test.js renamed to packages/material-ui-lab/src/Timeline/Timeline.test.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { InternalStandardProps as StandardProps } from '@material-ui/core';
 import { capitalize } from '@material-ui/core/utils';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
 import TimelineContext from './TimelineContext';
 
-export const styles = () => ({
+export const styles = createStyles({
   /* Styles applied to the root element. */
   root: {
     display: 'flex',
@@ -21,12 +22,41 @@ export const styles = () => ({
   alignAlternate: {},
 });
 
-const Timeline = React.forwardRef(function Timeline(props, ref) {
+export type TimelineClassKey = keyof WithStyles<typeof styles>['classes'];
+
+export interface TimelineProps extends StandardProps<React.HTMLAttributes<HTMLUListElement>> {
+  /**
+   * The position where the timeline's content should appear.
+   * @default 'left'
+   */
+  align?: 'left' | 'right' | 'alternate';
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `align="left"`. */
+    alignLeft?: string;
+    /** Styles applied to the root element if `align="right"`. */
+    alignRight?: string;
+    /** Styles applied to the root element if `align="alternate"`. */
+    alignAlternate?: string;
+  };
+  ref?: React.Ref<HTMLUListElement>;
+}
+
+const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(function Timeline(props, ref) {
   const { align = 'left', classes, className, ...other } = props;
 
   return (
     <TimelineContext.Provider value={{ align }}>
       <ul
+        // @ts-expect-error unsafe string concat
         className={clsx(classes.root, classes[`align${capitalize(align)}`], className)}
         ref={ref}
         {...other}
@@ -38,7 +68,7 @@ const Timeline = React.forwardRef(function Timeline(props, ref) {
 Timeline.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The position where the timeline's content should appear.
@@ -59,4 +89,14 @@ Timeline.propTypes = {
   className: PropTypes.string,
 };
 
+/**
+ *
+ * Demos:
+ *
+ * - [Timeline](https://material-ui.com/components/timeline/)
+ *
+ * API:
+ *
+ * - [Timeline API](https://material-ui.com/api/timeline/)
+ */
 export default withStyles(styles, { name: 'MuiTimeline' })(Timeline);

packages/material-ui-lab/src/Timeline/Timeline.js renamed to packages/material-ui-lab/src/Timeline/Timeline.tsx

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "rootDir": "./src",
+    "outDir": "./build",
+    "emitDeclarationOnly": true
+  },
+  "include": ["src/**/*.ts*"],
+  "exclude": ["src/**/*.d.ts", "src/**/*.test.*", "./**/*.spec.*", "**/test-utils.tsx"],
+  "references": [{ "path": "../material-ui/tsconfig.build.json" }]
+}

packages/material-ui-lab/src/Timeline/TimelineContext.js renamed to packages/material-ui-lab/src/Timeline/TimelineContext.ts

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig",
-  "include": ["src/**/*", "test/**/*", "../material-ui/src/internal/svg-icons/Add.js"]
+  "include": ["src/**/*", "test/**/*"]
 }

packages/material-ui-lab/src/Timeline/index.js

@@ -381,6 +381,7 @@ export function inject(
     plugins: [
       require.resolve('@babel/plugin-syntax-class-properties'),
       require.resolve('@babel/plugin-syntax-jsx'),
+      [require.resolve('@babel/plugin-syntax-typescript'), { isTSX: true }],
       plugin(propTypes, options, propTypesToInject),
       ...(babelPlugins || []),
     ],

packages/material-ui-lab/src/Timeline/index.d.ts renamed to packages/material-ui-lab/src/Timeline/index.tsx

@@ -152,9 +152,9 @@ const prettierConfig = prettier.resolveConfig.sync(process.cwd(), {
 });
 
 async function generateProptypes(
-  tsFile: string,
-  jsFile: string,
   program: ttp.ts.Program,
+  sourceFile: string,
+  tsFile: string = sourceFile,
 ): Promise<GenerateResult> {
   const proptypes = ttp.parseFromProgram(tsFile, program, {
     shouldResolveObject: ({ name }) => {
@@ -182,7 +182,9 @@ async function generateProptypes(
     });
   });
 
-  const jsContent = await fse.readFile(jsFile, 'utf8');
+  const sourceContent = await fse.readFile(sourceFile, 'utf8');
+
+  const isTsFile = /(\.(ts|tsx))/.test(sourceFile);
 
   const unstyledFile = tsFile.endsWith('Styled.d.ts')
     ? tsFile.replace(/material-ui-lab|material-ui-core|Styled/g, (matched) => {
@@ -191,15 +193,17 @@ async function generateProptypes(
       })
     : null;
 
-  const result = ttp.inject(proptypes, jsContent, {
+  const result = ttp.inject(proptypes, sourceContent, {
     removeExistingPropTypes: true,
     babelOptions: {
-      filename: jsFile,
+      filename: sourceFile,
     },
     comment: [
       '----------------------------- Warning --------------------------------',
       '| These PropTypes are generated from the TypeScript type definitions |',
-      '|     To update them edit the d.ts file and run "yarn proptypes"     |',
+      isTsFile
+        ? '|     To update them edit TypeScript types and run "yarn proptypes"  |'
+        : '|     To update them edit the d.ts file and run "yarn proptypes"     |',
       '----------------------------------------------------------------------',
     ].join('\n'),
     getSortLiteralUnions,
@@ -258,11 +262,11 @@ async function generateProptypes(
     return GenerateResult.Failed;
   }
 
-  const prettified = prettier.format(result, { ...prettierConfig, filepath: jsFile });
+  const prettified = prettier.format(result, { ...prettierConfig, filepath: sourceFile });
   const formatted = fixBabelGeneratorIssues(prettified);
-  const correctedLineEndings = fixLineEndings(jsContent, formatted);
+  const correctedLineEndings = fixLineEndings(sourceContent, formatted);
 
-  await fse.writeFile(jsFile, correctedLineEndings);
+  await fse.writeFile(sourceFile, correctedLineEndings);
   return GenerateResult.Success;
 }
 
@@ -287,7 +291,7 @@ async function run(argv: HandlerArgv) {
       path.resolve(__dirname, '../packages/material-ui/src'),
       path.resolve(__dirname, '../packages/material-ui-lab/src'),
     ].map((folderPath) =>
-      glob('+([A-Z])*/+([A-Z])*.d.ts', {
+      glob('+([A-Z])*/+([A-Z])*.*@(d.ts|ts|tsx)', {
         absolute: true,
         cwd: folderPath,
       }),
@@ -299,7 +303,7 @@ async function run(argv: HandlerArgv) {
     // Example: Modal/ModalManager.d.ts
     .filter((filePath) => {
       const folderName = path.basename(path.dirname(filePath));
-      const fileName = path.basename(filePath, '.d.ts');
+      const fileName = path.basename(filePath).replace(/(\.d\.ts|\.tsx|\.ts)/g, '');
 
       return fileName === folderName;
     })
@@ -315,7 +319,8 @@ async function run(argv: HandlerArgv) {
       return GenerateResult.TODO;
     }
 
-    return generateProptypes(tsFile, jsFile, program);
+    const sourceFile = tsFile.includes('.d.ts') ? tsFile.replace('.d.ts', '.js') : tsFile;
+    return generateProptypes(program, sourceFile, tsFile);
   });
 
   const results = await Promise.all(promises);