[PickersCalendarSkeleton] Rename to CalendarPickerSkeleton

docs/pages/api-docs/pickers-calendar-skeleton.js → docs/pages/api-docs/calendar-picker-skeleton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ApiPage from 'docs/src/modules/components/ApiPage';
 import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './pickers-calendar-skeleton.json';
+import jsonPageContent from './calendar-picker-skeleton.json';
 
 export default function Page(props) {
   const { descriptions, pageContent } = props;
@@ -10,9 +10,9 @@ export default function Page(props) {
 
 Page.getInitialProps = () => {
   const req = require.context(
-    'docs/translations/api-docs/pickers-calendar-skeleton',
+    'docs/translations/api-docs/calendar-picker-skeleton',
     false,
-    /pickers-calendar-skeleton.*.json$/,
+    /calendar-picker-skeleton.*.json$/,
   );
   const descriptions = mapApiPageTranslations(req);
 

docs/pages/api-docs/calendar-picker-skeleton.json

@@ -0,0 +1,25 @@
+{
+  "props": {},
+  "name": "CalendarPickerSkeleton",
+  "styles": {
+    "classes": [
+      "root",
+      "loadingContainer",
+      "weekContainer",
+      "week",
+      "daysHeader",
+      "weekDayLabel",
+      "daySkeleton",
+      "hidden"
+    ],
+    "globalClasses": {},
+    "name": "MuiCalendarPickerSkeleton"
+  },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": false,
+  "cssComponent": false
+}

docs/scripts/buildApi.ts

@@ -1,4 +1,5 @@
 import { mkdirSync, readFileSync, writeFileSync } from 'fs';
+import * as fse from 'fs-extra';
 import path from 'path';
 import * as babel from '@babel/core';
 import traverse from '@babel/traverse';
@@ -41,6 +42,22 @@ import { getLineFeed, getUnstyledFilename } from './helpers';
 
 const DEMO_IGNORE = LANGUAGES_IN_PROGRESS.map((language) => `-${language}.md`);
 
+const apiDocsTranslationsDirectory = path.resolve('docs', 'translations', 'api-docs');
+function resolveApiDocsTranslationsComponentDirectory(component: ReactApi): string {
+  return path.resolve(apiDocsTranslationsDirectory, kebabCase(component.name));
+}
+function resolveApiDocsTranslationsComponentLanguagePath(
+  component: ReactApi,
+  language: typeof LANGUAGES[0],
+): string {
+  const languageSuffix = language === 'en' ? '' : `-${language}`;
+
+  return path.join(
+    resolveApiDocsTranslationsComponentDirectory(component),
+    `${kebabCase(component.name)}${languageSuffix}.json`,
+  );
+}
+
 interface ReactApi extends ReactDocgenApi {
   EOL: string;
   filename: string;
@@ -846,7 +863,7 @@ async function buildDocs(options: {
   outputDirectory: string;
   theme: object;
   workspaceRoot: string;
-}): Promise<void> {
+}): Promise<ReactApi | null> {
   const {
     component: componentObject,
     outputDirectory,
@@ -857,13 +874,13 @@ async function buildDocs(options: {
   } = options;
 
   if (componentObject.filename.indexOf('internal') !== -1) {
-    return;
+    return null;
   }
 
   const src = readFileSync(componentObject.filename, 'utf8');
 
   if (src.match(/@ignore - internal component\./) || src.match(/@ignore - do not document\./)) {
-    return;
+    return null;
   }
 
   const spread = !src.match(/ = exactProp\(/);
@@ -1112,36 +1129,22 @@ async function buildDocs(options: {
    */
   componentApi.classDescriptions = extractClassConditions(reactApi.styles.descriptions);
 
-  mkdirSync(path.resolve('docs', 'translations', 'api-docs', kebabCase(reactApi.name)), {
+  mkdirSync(resolveApiDocsTranslationsComponentDirectory(reactApi), {
     mode: 0o777,
     recursive: true,
   });
 
-  // docs/translations/api-docs/component-name/component-name.json
   writePrettifiedFile(
-    path.resolve(
-      'docs',
-      'translations',
-      'api-docs',
-      kebabCase(reactApi.name),
-      `${kebabCase(reactApi.name)}.json`,
-    ),
+    resolveApiDocsTranslationsComponentLanguagePath(reactApi, 'en'),
     JSON.stringify(componentApi),
     prettierConfigPath,
   );
 
-  // docs/translations/api-docs/component-name/component-name-xx.json
   LANGUAGES.forEach((language) => {
     if (language !== 'en') {
       try {
         writePrettifiedFile(
-          path.resolve(
-            'docs',
-            'translations',
-            'api-docs',
-            kebabCase(reactApi.name),
-            `${kebabCase(reactApi.name)}-${language}.json`,
-          ),
+          resolveApiDocsTranslationsComponentLanguagePath(reactApi, language),
           JSON.stringify(componentApi),
           prettierConfigPath,
           { flag: 'wx' },
@@ -1237,6 +1240,8 @@ Page.getInitialProps = () => {
       prettierConfigPath,
     });
   }
+
+  return reactApi;
 }
 
 /**
@@ -1252,6 +1257,38 @@ function generateApiPagesManifest(outputPath: string, prettierConfigPath: string
   writePrettifiedFile(outputPath, source, prettierConfigPath);
 }
 
+async function removeOutdatedApiDocsTranslations(components: ReactApi[]): Promise<void> {
+  const componentDirectories = new Set<string>();
+  const files = await fse.readdir(apiDocsTranslationsDirectory);
+  await Promise.all(
+    files.map(async (filename) => {
+      const filepath = path.join(apiDocsTranslationsDirectory, filename);
+      const stats = await fse.stat(filepath);
+      if (stats.isDirectory()) {
+        componentDirectories.add(filepath);
+      }
+    }),
+  );
+
+  const currentComponentDirectories = new Set(
+    components.map((component) => {
+      return resolveApiDocsTranslationsComponentDirectory(component);
+    }),
+  );
+
+  // outdatedComponentDirectories = currentComponentDirectories.difference(componentDirectories)
+  const outdatedComponentDirectories = new Set(componentDirectories);
+  currentComponentDirectories.forEach((componentDirectory) => {
+    outdatedComponentDirectories.delete(componentDirectory);
+  });
+
+  await Promise.all(
+    Array.from(outdatedComponentDirectories, (outdatedComponentDirectory) => {
+      return fse.remove(outdatedComponentDirectory);
+    }),
+  );
+}
+
 async function run(argv: {
   apiPagesManifestPath?: string;
   componentDirectories?: string[];
@@ -1305,20 +1342,18 @@ async function run(argv: {
       return directories.concat(findComponents(componentDirectory));
     }, [] as Array<{ filename: string }>)
     .filter((component) => {
+      if (component.filename.includes('ThemeProvider')) {
+        return false;
+      }
       if (grep === null) {
         return true;
       }
       return grep.test(component.filename);
     });
 
   const componentBuilds = components.map(async (component) => {
-    // Don't document ThmeProvider API
-    if (component.filename.includes('ThemeProvider')) {
-      return;
-    }
-
     try {
-      await buildDocs({
+      return await buildDocs({
         component,
         outputDirectory,
         pagesMarkdown,
@@ -1346,6 +1381,16 @@ async function run(argv: {
   }
 
   generateApiPagesManifest(apiPagesManifestPath, prettierConfigPath);
+  if (grep === null) {
+    const componentApis = builds
+      .filter((build): build is PromiseFulfilledResult<ReactApi> => {
+        return build.status === 'fulfilled' && build.value !== null;
+      })
+      .map((build) => {
+        return build.value;
+      });
+    await removeOutdatedApiDocsTranslations(componentApis);
+  }
 }
 
 yargs

docs/src/pages/components/date-picker/ServerRequestDatePicker.js

@@ -5,7 +5,7 @@ import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
 import PickersDay from '@material-ui/lab/PickersDay';
 import DatePicker from '@material-ui/lab/DatePicker';
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 
 function getRandomNumber(min, max) {
@@ -82,7 +82,7 @@ export default function ServerRequestDatePicker() {
         }}
         onMonthChange={handleMonthChange}
         renderInput={(params) => <TextField {...params} />}
-        renderLoading={() => <PickersCalendarSkeleton />}
+        renderLoading={() => <CalendarPickerSkeleton />}
         renderDay={(day, _value, DayComponentProps) => {
           const isSelected =
             !DayComponentProps.outsideCurrentMonth &&

docs/src/pages/components/date-picker/ServerRequestDatePicker.tsx

@@ -5,7 +5,7 @@ import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizaitonProvider from '@material-ui/lab/LocalizationProvider';
 import PickersDay from '@material-ui/lab/PickersDay';
 import DatePicker from '@material-ui/lab/DatePicker';
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 
 function getRandomNumber(min: number, max: number) {
@@ -82,7 +82,7 @@ export default function ServerRequestDatePicker() {
         }}
         onMonthChange={handleMonthChange}
         renderInput={(params) => <TextField {...params} />}
-        renderLoading={() => <PickersCalendarSkeleton />}
+        renderLoading={() => <CalendarPickerSkeleton />}
         renderDay={(day, _value, DayComponentProps) => {
           const isSelected =
             !DayComponentProps.outsideCurrentMonth &&

docs/src/pagesApi.js

@@ -19,6 +19,7 @@ module.exports = [
   { pathname: '/api-docs/button' },
   { pathname: '/api-docs/button-base' },
   { pathname: '/api-docs/button-group' },
+  { pathname: '/api-docs/calendar-picker-skeleton' },
   { pathname: '/api-docs/card' },
   { pathname: '/api-docs/card-action-area' },
   { pathname: '/api-docs/card-actions' },
@@ -97,7 +98,6 @@ module.exports = [
   { pathname: '/api-docs/pagination' },
   { pathname: '/api-docs/pagination-item' },
   { pathname: '/api-docs/paper' },
-  { pathname: '/api-docs/pickers-calendar-skeleton' },
   { pathname: '/api-docs/pickers-day' },
   { pathname: '/api-docs/popover' },
   { pathname: '/api-docs/popper' },

packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.test.tsx → packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.test.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { getClasses, createMount, describeConformance } from 'test/utils';
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
 
-describe('<PickersCalendarSkeleton />', () => {
+describe('<CalendarPickerSkeleton />', () => {
   let classes: Record<string, string>;
   const mount = createMount();
 
   before(() => {
-    classes = getClasses(<PickersCalendarSkeleton />);
+    classes = getClasses(<CalendarPickerSkeleton />);
   });
 
-  describeConformance(<PickersCalendarSkeleton />, () => ({
+  describeConformance(<CalendarPickerSkeleton />, () => ({
     classes,
     inheritComponent: 'div',
     mount,

packages/material-ui-lab/src/PickersCalendarSkeleton/PickersCalendarSkeleton.tsx → packages/material-ui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx

@@ -6,16 +6,16 @@ import { WithStyles, withStyles, MuiStyles, StyleRules } from '@material-ui/core
 import { DAY_SIZE, DAY_MARGIN } from '../internal/pickers/constants/dimensions';
 import { styles as calendarStyles, PickersCalendarClassKey } from '../DayPicker/PickersCalendar';
 
-export interface PickersCalendarSkeletonProps extends React.HTMLProps<HTMLDivElement> {}
+export interface CalendarPickerSkeletonProps extends React.HTMLProps<HTMLDivElement> {}
 
-export type PickersCalendarSkeletonClassKey =
+export type CalendarPickerSkeletonClassKey =
   | PickersCalendarClassKey
   | 'root'
   | 'daySkeleton'
   | 'hidden';
-export const styles: MuiStyles<PickersCalendarSkeletonClassKey> = (
+export const styles: MuiStyles<CalendarPickerSkeletonClassKey> = (
   theme,
-): StyleRules<PickersCalendarSkeletonClassKey> => ({
+): StyleRules<CalendarPickerSkeletonClassKey> => ({
   ...calendarStyles(theme),
   root: {
     alignSelf: 'start',
@@ -36,9 +36,9 @@ const monthMap = [
   [1, 1, 1, 1, 0, 0, 0],
 ];
 
-const PickersCalendarSkeleton: React.FC<
-  PickersCalendarSkeletonProps & WithStyles<typeof styles>
-> = (props) => {
+const CalendarPickerSkeleton: React.FC<CalendarPickerSkeletonProps & WithStyles<typeof styles>> = (
+  props,
+) => {
   const { className, classes, ...other } = props;
 
   return (
@@ -62,7 +62,7 @@ const PickersCalendarSkeleton: React.FC<
   );
 };
 
-PickersCalendarSkeleton.propTypes /* remove-proptypes */ = {
+CalendarPickerSkeleton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit TypeScript types and run "yarn proptypes"  |
@@ -85,6 +85,6 @@ PickersCalendarSkeleton.propTypes /* remove-proptypes */ = {
  *
  * API:
  *
- * - [PickersCalendarSkeleton API](https://material-ui.com/api/pickers-calendar-skeleton/)
+ * - [CalendarPickerSkeleton API](https://material-ui.com/api/calendar-picker-skeleton/)
  */
-export default withStyles(styles, { name: 'MuiCalendarSkeleton' })(PickersCalendarSkeleton);
+export default withStyles(styles, { name: 'MuiCalendarPickerSkeleton' })(CalendarPickerSkeleton);

packages/material-ui-lab/src/CalendarPickerSkeleton/index.ts

@@ -0,0 +1,4 @@
+export { default } from './CalendarPickerSkeleton';
+
+export type CalendarPickerSkeletonClassKey = import('./CalendarPickerSkeleton').CalendarPickerSkeletonClassKey;
+export type CalendarPickerSkeletonProps = import('./CalendarPickerSkeleton').CalendarPickerSkeletonProps;