[docs] Update buildAPI script to handle the "styled" components

docs/pages/api-docs/slider-styled.md

@@ -20,7 +20,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 
 
+## Component name
 
+The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.
 
 ## Props
 
@@ -56,6 +58,39 @@ The `ref` is forwarded to the root element.
 
 Any other props supplied will be provided to the root element (native element).
 
+## CSS
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiSlider-root</span> | Class name applied to the root element. 
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiSlider-colorPrimary</span> | Class name applied to the root element if `color="primary"`. 
+| <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiSlider-colorSecondary</span> | Class name applied to the root element if `color="secondary"`. 
+| <span class="prop-name">marked</span> | <span class="prop-name">.MuiSlider-marked</span> | Class name applied to the root element if `marks` is provided with at least one label. 
+| <span class="prop-name">vertical</span> | <span class="prop-name">.MuiSlider-vertical</span> | Pseudo-class applied to the root element if `orientation="vertical"`. 
+| <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root and thumb element if `disabled={true}`. 
+| <span class="prop-name">rail</span> | <span class="prop-name">.MuiSlider-rail</span> | Class name applied to the rail element. 
+| <span class="prop-name">track</span> | <span class="prop-name">.MuiSlider-track</span> | Class name applied to the track element. 
+| <span class="prop-name">trackFalse</span> | <span class="prop-name">.MuiSlider-trackFalse</span> | Class name applied to the track element if `track={false}`. 
+| <span class="prop-name">trackInverted</span> | <span class="prop-name">.MuiSlider-trackInverted</span> | Class name applied to the track element if `track="inverted"`. 
+| <span class="prop-name">thumb</span> | <span class="prop-name">.MuiSlider-thumb</span> | Class name applied to the thumb element. 
+| <span class="prop-name">thumbColorPrimary</span> | <span class="prop-name">.MuiSlider-thumbColorPrimary</span> | Class name applied to the thumb element if `color="primary"`. 
+| <span class="prop-name">thumbColorSecondary</span> | <span class="prop-name">.MuiSlider-thumbColorSecondary</span> | Class name applied to the thumb element if `color="secondary"`. 
+| <span class="prop-name">active</span> | <span class="prop-name">.MuiSlider-active</span> | Pseudo-class applied to the thumb element if it's active. 
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the thumb element if keyboard focused. 
+| <span class="prop-name">valueLabel</span> | <span class="prop-name">.MuiSlider-valueLabel</span> | Class name applied to the thumb label element. 
+| <span class="prop-name">mark</span> | <span class="prop-name">.MuiSlider-mark</span> | Class name applied to the mark element. 
+| <span class="prop-name">markActive</span> | <span class="prop-name">.MuiSlider-markActive</span> | Class name applied to the mark element if active (depending on the value). 
+| <span class="prop-name">markLabel</span> | <span class="prop-name">.MuiSlider-markLabel</span> | Class name applied to the mark label element. 
+| <span class="prop-name">markLabelActive</span> | <span class="prop-name">.MuiSlider-markLabelActive</span> | Class name applied to the mark label element if active (depending on the value). 
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- 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/SliderStyled/SliderStyled.js) for more detail.
+
 ## Demos
 
 - [Slider Styled](/components/slider-styled/)

docs/scripts/buildApi.ts

@@ -192,6 +192,81 @@ async function annotateComponentDefinition(context: {
   writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' });
 }
 
+function trimComment(comment: string) {
+  let i = 0;
+  for (; i < comment.length; i += 1) {
+    if (comment[i] !== '*' && comment[i] !== ' ') {
+      break;
+    }
+  }
+  return comment.substr(i, comment.length - 1);
+}
+
+async function updateStylesDefinition(context: { api: ReactApi; component: { filename: string } }) {
+  const { api, component } = context;
+
+  const typesFilename = component.filename.replace(/\.js$/, '.d.ts');
+  const typesSource = readFileSync(typesFilename, { encoding: 'utf8' });
+  const typesAST = await babel.parseAsync(typesSource, {
+    configFile: false,
+    filename: typesFilename,
+    presets: [require.resolve('@babel/preset-typescript')],
+  });
+
+  if (typesAST === null) {
+    throw new Error('No AST returned from babel.');
+  }
+
+  if (api.styles.classes.length === 0) {
+    const componentName = path.basename(typesFilename).replace(/\.d\.ts$/, '');
+
+    traverse(typesAST, {
+      ExportNamedDeclaration(babelPath) {
+        const { node } = babelPath;
+        const declaration = node.declaration as babel.types.TSTypeAliasDeclaration;
+
+        const name = declaration.id?.name;
+
+        const typeAnnotation = declaration.typeAnnotation as babel.types.TSUnionType;
+
+        if (name === `${componentName}ClassKey` && typeAnnotation.types) {
+          const classes: string[] = [];
+
+          const nodeLeadingComments = declaration.typeAnnotation.leadingComments || [];
+
+          typeAnnotation.types.forEach((typeNode) => {
+            const value = (typeNode as babel.types.TSLiteralType).literal.value as string;
+
+            classes.push(value);
+
+            let leadingComments = typeNode.leadingComments;
+            if (leadingComments) {
+              leadingComments = leadingComments.concat(nodeLeadingComments);
+            } else {
+              leadingComments = nodeLeadingComments;
+            }
+
+            if (leadingComments) {
+              for (let i = 0; i < leadingComments.length; i += 1) {
+                if (
+                  leadingComments[i].end + 5 ===
+                  (typeNode as babel.types.TSLiteralType).literal.start
+                ) {
+                  api.styles.descriptions[value] = trimComment(leadingComments[i].value);
+                }
+              }
+            }
+
+            return '';
+          });
+
+          api.styles.classes = classes;
+        }
+      },
+    });
+  }
+}
+
 async function annotateClassesDefinition(context: {
   api: ReactApi;
   component: { filename: string };
@@ -300,12 +375,13 @@ async function buildDocs(options: {
     globalClasses: {},
   };
 
+  styles.name = component?.default?.options?.name;
+
   if (component.styles && component.default.options) {
     // Collect the customization points of the `classes` property.
     styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter(
       (className) => !className.match(/^(@media|@keyframes|@global)/),
     );
-    styles.name = component.default.options.name;
     styles.globalClasses = styles.classes.reduce((acc, key) => {
       acc[key] = generateClassName(
         // @ts-expect-error
@@ -376,6 +452,29 @@ async function buildDocs(options: {
   reactAPI.filename = componentObject.filename.replace(workspaceRoot, '');
   reactAPI.inheritance = getInheritance(testInfo, src);
 
+  await updateStylesDefinition({
+    api: reactAPI,
+    component: componentObject,
+  });
+
+  if (reactAPI.styles.classes) {
+    reactAPI.styles.globalClasses = reactAPI.styles.classes.reduce((acc, key) => {
+      acc[key] = generateClassName(
+        // @ts-expect-error
+        {
+          key,
+        },
+        {
+          options: {
+            name: styles.name,
+            theme: {},
+          },
+        },
+      );
+      return acc;
+    }, {} as Record<string, string>);
+  }
+
   let markdown;
   try {
     markdown = generateMarkdown(reactAPI);

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

@@ -48,4 +48,46 @@ export const SliderValueLabel: React.FC<SliderValueLabel>;
  */
 declare const Slider: ExtendSliderUnstyled<SliderStyledTypeMap>;
 
+export type SliderStyledClassKey =
+  /** Class name applied to the root element. */
+  | 'root'
+  /** Class name applied to the root element if `color="primary"`. */
+  | 'colorPrimary'
+  /** Class name applied to the root element if `color="secondary"`. */
+  | 'colorSecondary'
+  /** Class name applied to the root element if `marks` is provided with at least one label. */
+  | 'marked'
+  /** Pseudo-class applied to the root element if `orientation="vertical"`. */
+  | 'vertical'
+  /** Pseudo-class applied to the root and thumb element if `disabled={true}`. */
+  | 'disabled'
+  /** Class name applied to the rail element. */
+  | 'rail'
+  /** Class name applied to the track element. */
+  | 'track'
+  /** Class name applied to the track element if `track={false}`. */
+  | 'trackFalse'
+  /** Class name applied to the track element if `track="inverted"`. */
+  | 'trackInverted'
+  /** Class name applied to the thumb element. */
+  | 'thumb'
+  /** Class name applied to the thumb element if `color="primary"`. */
+  | 'thumbColorPrimary'
+  /** Class name applied to the thumb element if `color="secondary"`. */
+  | 'thumbColorSecondary'
+  /** Pseudo-class applied to the thumb element if it's active. */
+  | 'active'
+  /** Pseudo-class applied to the thumb element if keyboard focused. */
+  | 'focusVisible'
+  /** Class name applied to the thumb label element. */
+  | 'valueLabel'
+  /** Class name applied to the mark element. */
+  | 'mark'
+  /** Class name applied to the mark element if active (depending on the value). */
+  | 'markActive'
+  /** Class name applied to the mark label element. */
+  | 'markLabel'
+  /** Class name applied to the mark label element if active (depending on the value). */
+  | 'markLabelActive';
+
 export default Slider;

packages/material-ui-lab/src/SliderStyled/SliderStyled.js

@@ -303,6 +303,10 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) {
   );
 });
 
+Slider.options = {
+  name: 'MuiSlider',
+};
+
 Slider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |