[docs-infra] Move API pages to TS

docs/src/modules/components/ApiPage.tsx

@@ -30,7 +30,7 @@ import {
   getClassApiDefinitions,
   getClassesToC,
 } from 'docs/src/modules/components/ApiPage/definitions/classes';
-import { getSlotsApiDefinitions } from './ApiPage/definitions/slots';
+import { getSlotsApiDefinitions } from 'docs/src/modules/components/ApiPage/definitions/slots';
 
 // TODO Move this type definition to the AppLayoutDocs file when moved to TS
 export interface TableOfContentsParams {

docs/src/modules/components/ApiPage/processors/classes.ts

@@ -0,0 +1,59 @@
+import { PropsTranslations, ComponentApiContent } from '@mui-internal/api-docs-builder';
+import { Translate } from '@mui/docs/i18n';
+import kebabCase from 'lodash/kebabCase';
+
+export interface ClassDefinition {
+  className: string;
+  key: string;
+  hash: string;
+  description?: string;
+  isGlobal?: boolean;
+  isDeprecated?: boolean;
+  deprecationInfo?: string;
+}
+
+export type GetCssToCParams = {
+  classes: ClassDefinition[];
+  t: Translate;
+  hash?: string;
+};
+
+export const getClassesToC = ({ classes, t, hash }: GetCssToCParams) =>
+  !classes || classes.length === 0
+    ? []
+    : [
+        {
+          text: t('api-docs.classes'),
+          hash: hash ?? 'classes',
+          children: [
+            ...classes.map(({ key, hash: classeHash }) => ({
+              text: key,
+              hash: classeHash,
+              children: [],
+            })),
+          ],
+        },
+      ];
+
+export interface ClassesApiProcessorParams {
+  componentClasses: ComponentApiContent['classes'];
+  classDescriptions: PropsTranslations['classDescriptions'];
+  componentName: string;
+}
+
+export function classesApiProcessor(params: ClassesApiProcessorParams): ClassDefinition[] {
+  const { componentClasses, classDescriptions, componentName } = params;
+
+  return componentClasses.map((classDefinition) => {
+    return {
+      ...classDefinition,
+      description:
+        classDescriptions[classDefinition.key]?.description
+          ?.replace(/{{conditions}}/, classDescriptions[classDefinition.key].conditions!)
+          ?.replace(/{{nodeName}}/, classDescriptions[classDefinition.key].nodeName!) ??
+        classDefinition.description,
+      deprecationInfo: classDescriptions[classDefinition.key]?.deprecationInfo,
+      hash: `${kebabCase(componentName)}-classes-${classDefinition.className}`,
+    };
+  });
+}

docs/src/modules/components/ApiPage/processors/properties.ts

@@ -0,0 +1,182 @@
+import { PropsTableItem, PropsTranslations } from '@mui-internal/api-docs-builder';
+import { Translate } from '@mui/docs/i18n';
+import kebabCase from 'lodash/kebabCase';
+import {
+  HookApiContent,
+  HooksTranslations,
+} from 'packages/api-docs-builder/types/ApiBuilder.types';
+
+export interface PropertyDefinition {
+  additionalInfo?: string[];
+  hash: string;
+  deprecationInfo?: string;
+  description?: string;
+  isDeprecated?: boolean;
+  isOptional?: boolean;
+  isRequired?: boolean;
+  propDefault?: string;
+  propName: string;
+  requiresRef?: boolean;
+  seeMoreDescription?: string;
+  signature?: string;
+  signatureArgs?: { argName: string; argDescription?: string }[];
+  signatureReturnDescription?: string;
+  typeName: string;
+  /**
+   * Used by MUI X interface documentation
+   */
+  isProPlan?: boolean;
+  /**
+   * Used by MUI X interface documentation
+   */
+  isPremiumPlan?: boolean;
+}
+
+export type GetCssToCParams = {
+  properties: PropertyDefinition[];
+  inheritance?: boolean;
+  themeDefaultProps?: boolean;
+  t: Translate;
+  hash?: string;
+};
+
+export const getPropertiesToC = ({
+  properties,
+  inheritance,
+  themeDefaultProps,
+  t,
+  hash,
+}: GetCssToCParams) => ({
+  text: t('api-docs.props'),
+  hash,
+  children: [
+    ...properties.map(({ propName, hash: propertyHash }) => ({
+      text: propName,
+      hash: propertyHash,
+      children: [],
+    })),
+    ...(inheritance
+      ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }]
+      : []),
+    ...(themeDefaultProps
+      ? [{ text: t('api-docs.themeDefaultProps'), hash: 'theme-default-props', children: [] }]
+      : []),
+  ],
+});
+
+interface PropsApiProcessorParams {
+  componentName: string;
+  properties: {
+    [name: string]: PropsTableItem;
+  };
+  propertiesDescriptions: PropsTranslations['propDescriptions'];
+  /**
+   * Add indicators that the properties is optional instead of showing it is required.
+   */
+  showOptionalAbbr?: boolean;
+}
+
+export function propsApiProcessor(params: PropsApiProcessorParams): PropertyDefinition[] {
+  const { properties, propertiesDescriptions, componentName, showOptionalAbbr = false } = params;
+
+  return Object.entries(properties).map(([propName, propData]) => {
+    const isRequired = propData.required && !showOptionalAbbr;
+    const isOptional = !propData.required && showOptionalAbbr;
+
+    const isDeprecated = propData.deprecated;
+    const deprecationInfo = propData.deprecationInfo;
+
+    const typeName = propData.type?.description || propData.type.name;
+    const propDefault = propData.default;
+    const propDescription = propertiesDescriptions[propName];
+
+    const additionalInfo = (
+      ['cssApi', 'sx', 'slotsApi', 'joy-size', 'joy-color', 'joy-variant'] as const
+    ).filter((key) => propData.additionalInfo?.[key]);
+
+    const seeMoreDescription =
+      propDescription?.seeMoreText &&
+      propData.seeMoreLink &&
+      propDescription.seeMoreText.replace(
+        '{{link}}',
+        `<a href="${propData.seeMoreLink.url}">${propData.seeMoreLink.text}</a>`,
+      );
+
+    const signature = propData.signature?.type;
+    const signatureArgs = propData.signature?.describedArgs?.map((argName) => ({
+      argName,
+      argDescription: propertiesDescriptions[propName].typeDescriptions?.[argName],
+    }));
+    const signatureReturnDescription =
+      propData.signature?.returned &&
+      propertiesDescriptions[propName].typeDescriptions?.[propData.signature.returned];
+
+    return {
+      hash: `${kebabCase(componentName)}-prop-${propName}`,
+      propName,
+      seeMoreDescription,
+      description: propDescription?.description,
+      requiresRef: propDescription?.requiresRef,
+      isOptional,
+      isRequired,
+      isDeprecated,
+      deprecationInfo,
+      typeName,
+      propDefault,
+      additionalInfo,
+      signature,
+      signatureArgs,
+      signatureReturnDescription,
+    };
+  });
+}
+
+// interface InterfaceApiProcessorParams {}
+
+// export function InterfaceApiProcessor(params: InterfaceApiProcessorParams): PropertyDefinition[] {
+//   return [];
+// }
+
+interface HookCommonApiParams {
+  hookName: string;
+}
+
+interface HookReturnApiProcessorParams extends HookCommonApiParams {
+  kind: 'return';
+  properties: HookApiContent['returnValue'];
+  translations: HooksTranslations['returnValueDescriptions'];
+}
+
+interface HookParametersApiProcessorParams extends HookCommonApiParams {
+  kind: 'parameters';
+  properties: HookApiContent['parameters'];
+  translations: HooksTranslations['parametersDescriptions'];
+}
+
+export function hookApiProcessor(
+  params: HookReturnApiProcessorParams | HookParametersApiProcessorParams,
+): PropertyDefinition[] {
+  const { properties, translations, hookName, kind } = params;
+
+  return Object.entries(properties).map(([propName, propData]) => {
+    const isOptional = !propData.required;
+
+    const isDeprecated = propData.deprecated;
+    const deprecationInfo = propData.deprecationInfo;
+
+    const typeName = propData.type?.description || propData.type.name;
+    const propDefault = propData.default;
+    const propDescription = translations[propName];
+
+    return {
+      hash: `${kebabCase(hookName)}-${kind === 'parameters' ? 'parameters' : 'return-value'}-${propName}`,
+      propName,
+      description: propDescription?.description,
+      isOptional,
+      isDeprecated,
+      deprecationInfo,
+      typeName,
+      propDefault,
+    };
+  });
+}

docs/src/modules/components/ApiPage/processors/slots.ts

@@ -0,0 +1,32 @@
+import { PropsTranslations, ComponentApiContent } from '@mui-internal/api-docs-builder';
+
+export type SlotDefinition = {
+  className: string | null;
+  hash: string;
+  description?: string;
+  name: string;
+  defaultValue?: string;
+};
+
+export interface SlotsApiProcessorParams {
+  componentSlots: ComponentApiContent['slots'];
+  slotDescriptions: PropsTranslations['slotDescriptions'];
+  componentName: string;
+}
+
+export function slotsApiProcessor(params: SlotsApiProcessorParams): SlotDefinition[] {
+  const { componentSlots, slotDescriptions, componentName } = params;
+
+  if (!componentSlots) {
+    return [];
+  }
+  return componentSlots.map(({ class: className, name, default: defaultValue }) => {
+    return {
+      description: slotDescriptions?.[name],
+      className,
+      name,
+      defaultValue,
+      hash: `${componentName}-css-${className ?? name}`,
+    };
+  });
+}

docs/src/modules/components/ApiPage/sections/ClassesSection.tsx

@@ -74,8 +74,8 @@ export type ClassesSectionProps = (
   level?: 'h2' | 'h3' | 'h4';
   defaultLayout: ApiDisplayOptions;
   layoutStorageKey: string;
-  displayClassKeys: boolean;
-  styleOverridesLink: string;
+  displayClassKeys?: boolean;
+  styleOverridesLink?: string;
 };
 
 export default function ClassesSection(props: ClassesSectionProps) {