eps1lon

import React from 'react';
import %%COMPONENT%% from 'docs/src/modules/components/%%COMPONENT%%';
import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';

const pageFilename = 'blog/%%MARKDOWN_FILENAME%%';
const requireRaw = require.context('!raw-loader!./', false, /%%MARKDOWN_FILENAME%%\.md$/);

// eslint-disable-next-line react/prop-types
export default function Page({ docs }) {
  return <%%COMPONENT%% docs={docs} />;

eps1lon

import chai from 'chai';

chai.use((chaiAPI, utils) => {
  chai.Assertion.addMethod('toHaveLength', function toHaveLength(length) {
    new chai.Assertion(this._obj).to.have.length(length);
  });
});

eps1lon

const ChildProcess = require('child_process');
const Ink = require('ink');
const Path = require('path');
const React = require('react');

const workspaceRoot = Path.resolve(__dirname, '../../');

console.clear();
Ink.render(<Main />);

eps1lon

import * as path from 'path';
import * as fse from 'fs-extra';
import * as ttp from 'typescript-to-proptypes';
import * as prettier from 'prettier';
import * as globCallback from 'glob';
import { promisify } from 'util';
import * as _ from 'lodash';
import * as yargs from 'yargs';
import { fixBabelGeneratorIssues, fixLineEndings } from '../docs/scripts/helpers';

eps1lon

// Press ctrl+space for code completion
export default function transformer(fileInfo, api) {
  const j = api.jscodeshift;
  const ast = j(fileInfo.source);

  let reqPrefix = null;
  ast.findVariableDeclarators("reqPrefix").forEach(path => {
    if (reqPrefix !== null) {
      throw new Error("only one reqPrefix allowed");
    }

eps1lon

const childProcess = require('child_process');
const fs = require('fs-extra');
const glob = require('glob');
const path = require('path');
const { promisify } = require('util');

/**
 * prepares `@material-ui/*` packages to be published under a single verison
 * that is based on the commit SHA of `HEAD`
 */

eps1lon

MAIN -> Group:+ {% ([groups]) => groups  %}
Group -> Name GroupPr:? ":\n\n" Demos:* {% ([group, pr, , demos]) => ({ group, demos, pr }) %}
Demos -> " " Name Pr:? "\n" {% ([, name, pr]) => ({ name, pr }) %}
Pr -> " #" [0-9]:+ {% ([, pr]) => pr.join("") %}
GroupPr -> " ":? "(":? "#" [0-9]:+ ")":? {% ([, , ,pr]) => pr.join("") %}

Name -> [\(\) \w\-/]:+ {% ([s]) => s.join('') %}

eps1lon

With #13229 we got the proper infrastructure to present our demos both in JavaScript and TypeScript. We want to continue this effort with the goal to have all demos available in TypeScript.

If you want to make contributions to this repository and know a bit of TypeScript we would appreciate you helping us. 

## Getting started
TL;DR: Use #14739, #14485 or #14535 as example workflows.

0. Set up your fork (See ['getting started"](https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md#getting-started) in the contributing guide).
1. Choose a demo you want to convert. For this example, we'll use: https://next.material-ui.com/demos/lists/#nested-list
2. go to `./docs/src/pages/demos/lists/lists.md` and find the section. You're looking for a `{{ "demo": "some-path" }}` block:

eps1lon

• The Accessibility Tree: A Training Guide for Advanced Web Development

eps1lon

// Press ctrl+space for code completion
module.exports = function transformer(file, api) {
  const j = api.jscodeshift;

  return j(file.source)
    .find(j.CallExpression)
    .filter(path => {
      return path.get("callee").get("name").value === "warning";
    })
    .forEach(path => {