[infra] Turn literal | (string & {}) to PropTypes.string (#46934)

Author: siriwatknp

packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts

@@ -199,6 +199,36 @@ function checkType({
   }
 
   if (type.isUnion()) {
+    const hasStringIntersection = type.types.some((t) => {
+      if (t.isIntersection && t.isIntersection()) {
+        const hasString = t.types.some((it) => it.flags & ts.TypeFlags.String);
+        const hasEmptyObject = t.types.some(
+          (it) =>
+            it.flags & ts.TypeFlags.Object &&
+            (!it.symbol || !it.symbol.members || it.symbol.members.size === 0),
+        );
+        return hasString && hasEmptyObject;
+      }
+      return false;
+    });
+
+    if (hasStringIntersection) {
+      const hasLiterals = type.types.some((t) => t.flags & ts.TypeFlags.Literal);
+      if (hasLiterals) {
+        const hasUndefined = type.types.some((t) => t.flags & ts.TypeFlags.Undefined);
+        if (hasUndefined) {
+          return createUnionType({
+            jsDoc,
+            types: [
+              createStringType({ jsDoc: undefined }),
+              createUndefinedType({ jsDoc: undefined }),
+            ],
+          });
+        }
+        return createStringType({ jsDoc });
+      }
+    }
+
     const node = createUnionType({
       jsDoc,
       types: type.types.map((x) => checkType({ type: x, location, typeStack, name, project })),
@@ -207,6 +237,19 @@ function checkType({
     return node.types.length === 1 ? node.types[0] : node;
   }
 
+  if (type.isIntersection && type.isIntersection()) {
+    const hasString = type.types.some((t) => t.flags & ts.TypeFlags.String);
+    const hasEmptyObject = type.types.some(
+      (t) =>
+        t.flags & ts.TypeFlags.Object &&
+        (!t.symbol || !t.symbol.members || t.symbol.members.size === 0),
+    );
+
+    if (hasString && hasEmptyObject) {
+      return createStringType({ jsDoc });
+    }
+  }
+
   if (type.flags & ts.TypeFlags.TypeParameter) {
     const baseConstraintOfType = project.checker.getBaseConstraintOfType(type);
 

packages-internal/scripts/typescript-to-proptypes/test/literal-autocomplete/input.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface ComponentProps {
+  color?: 'primary' | 'secondary' | 'error' | (string & {});
+  variant: 'text' | 'outlined' | 'contained' | (string & {});
+}
+
+export default function Component(props: ComponentProps): React.JSX.Element;

packages-internal/scripts/typescript-to-proptypes/test/literal-autocomplete/output.js

@@ -0,0 +1,4 @@
+Component.propTypes = {
+  color: PropTypes.string,
+  variant: PropTypes.string.isRequired,
+};

packages/mui-joy/src/Divider/Divider.tsx

@@ -181,7 +181,7 @@ Divider.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The props used for each slot inside.
    * @default {}

packages/mui-joy/src/Input/Input.tsx

@@ -359,7 +359,7 @@ Input.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  autoComplete: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  autoComplete: PropTypes.string,
   /**
    * @ignore
    */

packages/mui-joy/src/List/List.tsx

@@ -299,7 +299,7 @@ List.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The size of the component (affect other nested list* components).
    * @default 'md'

packages/mui-joy/src/ListDivider/ListDivider.tsx

@@ -171,7 +171,7 @@ ListDivider.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The props used for each slot inside.
    * @default {}

packages/mui-joy/src/ListItem/ListItem.tsx

@@ -305,7 +305,7 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The props used for each slot inside.
    * @default {}

packages/mui-joy/src/ListItemButton/ListItemButton.tsx

@@ -270,7 +270,7 @@ ListItemButton.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * If `true`, the component is selected.
    * @default false

packages/mui-joy/src/RadioGroup/RadioGroup.tsx

@@ -237,7 +237,7 @@ RadioGroup.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  role: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  role: PropTypes.string,
   /**
    * The size of the component.
    * @default 'md'