feat(codemods): add named-exports codemod to convert default imports to named imports (#3162)

stephl3 · web-flow · commit d027d4cf9872 · 2025-10-01T00:01:40.000Z
* chore: add named exports to mostly all packages

* feat(codemods): add import-related utils

* feat(codemods): add named-exports codemod

* docs(codemods): named-exports

* chore: changesets

* test(codemods): fix output test and rm redundant test
diff --git a/.changeset/moody-sites-relate.md b/.changeset/moody-sites-relate.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/codemods': minor
+---
+
+Add `named-exports` codemod for migrating LG package default exports to named exports. [codemods README](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports)
diff --git a/.changeset/yummy-glasses-switch.md b/.changeset/yummy-glasses-switch.md
@@ -0,0 +1,28 @@
+---
+'@leafygreen-ui/confirmation-modal': minor
+'@leafygreen-ui/inline-definition': minor
+'@leafygreen-ui/expandable-card': minor
+'@leafygreen-ui/marketing-modal': minor
+'@leafygreen-ui/form-footer': minor
+'@leafygreen-ui/icon-button': minor
+'@leafygreen-ui/pagination': minor
+'@leafygreen-ui/text-input': minor
+'@leafygreen-ui/text-area': minor
+'@leafygreen-ui/checkbox': minor
+'@leafygreen-ui/copyable': minor
+'@leafygreen-ui/callout': minor
+'@leafygreen-ui/popover': minor
+'@leafygreen-ui/stepper': minor
+'@leafygreen-ui/tooltip': minor
+'@leafygreen-ui/button': minor
+'@leafygreen-ui/portal': minor
+'@leafygreen-ui/toggle': minor
+'@leafygreen-ui/badge': minor
+'@leafygreen-ui/modal': minor
+'@leafygreen-ui/card': minor
+'@leafygreen-ui/code': minor
+'@leafygreen-ui/icon': minor
+'@leafygreen-ui/logo': minor
+---
+
+Mark default export as deprecated and add named export if missing. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
diff --git a/packages/badge/src/index.ts b/packages/badge/src/index.ts
@@ -1,3 +1,9 @@
 import Badge from './Badge/Badge';
 export { type BadgeProps, Variant } from './Badge/Badge.types';
+
+/**
+ * @deprecated Use named export `{ Badge }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+ */
 export default Badge;
+
+export { Badge };
diff --git a/packages/button/src/index.ts b/packages/button/src/index.ts
@@ -1,3 +1,9 @@
-export { Button as default } from './Button';
+export {
+  Button,
+  /**
+   * @deprecated Use named export `{ Button }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  Button as default,
+} from './Button';
 export type { BaseButtonProps, ButtonProps } from './types';
 export { FontSize, Size, Variant } from './types';
diff --git a/packages/callout/src/index.ts b/packages/callout/src/index.ts
@@ -1,2 +1,8 @@
-export { default } from './Callout/Callout';
+export {
+  default as Callout,
+  /**
+   * @deprecated Use named export `{ Callout }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+} from './Callout/Callout';
 export { type CalloutProps, Variant } from './Callout/Callout.types';
diff --git a/packages/card/src/index.ts b/packages/card/src/index.ts
@@ -1,2 +1,8 @@
 export { type CardProps, ContentStyle } from './Card';
-export { Card as default } from './Card';
+export {
+  Card,
+  /**
+   * @deprecated Use named export `{ Card }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  Card as default,
+} from './Card';
diff --git a/packages/checkbox/src/index.ts b/packages/checkbox/src/index.ts
@@ -1,4 +1,12 @@
-export { type CheckboxProps, checkWrapperClassName, default } from './Checkbox';
+export {
+  default as Checkbox,
+  type CheckboxProps,
+  checkWrapperClassName,
+  /**
+   * @deprecated Use named export `{ Checkbox }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+} from './Checkbox';
 export {
   DEFAULT_LGID_ROOT,
   getLgIds,
diff --git a/packages/code/src/index.ts b/packages/code/src/index.ts
@@ -9,4 +9,7 @@ export type { SyntaxProps } from './Syntax/Syntax.types';
 export type { LineHighlightingDefinition } from './types';
 export { Language } from './types';
 export { getLgIds, type GetLgIdsReturnType } from './utils';
+/**
+ * @deprecated Use named export `{ Code }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+ */
 export default Code;
diff --git a/packages/confirmation-modal/src/index.ts b/packages/confirmation-modal/src/index.ts
@@ -1,4 +1,10 @@
-export { ConfirmationModal as default } from './ConfirmationModal/ConfirmationModal';
+export {
+  ConfirmationModal,
+  /**
+   * @deprecated Use named export `{ ConfirmationModal }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  ConfirmationModal as default,
+} from './ConfirmationModal/ConfirmationModal';
 export {
   type ConfirmationModalProps,
   Variant,
diff --git a/packages/copyable/src/index.ts b/packages/copyable/src/index.ts
@@ -1,2 +1,8 @@
-export { default } from './Copyable';
+export {
+  default as Copyable,
+  /**
+   * @deprecated Use named export `{ Copyable }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+} from './Copyable';
 export { type CopyableProps, Size } from './Copyable';
diff --git a/packages/expandable-card/src/index.ts b/packages/expandable-card/src/index.ts
@@ -1 +1,8 @@
-export { default, type ExpandableCardProps } from './ExpandableCard';
+export {
+  /**
+   * @deprecated Use named export `{ ExpandableCard }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as ExpandableCard,
+  type ExpandableCardProps,
+} from './ExpandableCard';
diff --git a/packages/form-footer/src/index.ts b/packages/form-footer/src/index.ts
@@ -1,3 +1,9 @@
-export { default } from './FormFooter';
+export {
+  /**
+   * @deprecated Use named export `{ FormFooter }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as FormFooter,
+} from './FormFooter';
 export { type FormFooterProps } from './FormFooter.types';
 export { getLgIds } from './utils';
diff --git a/packages/icon-button/src/index.ts b/packages/icon-button/src/index.ts
@@ -1,7 +1,11 @@
 export {
   type AccessibleIconButtonProps,
   type BaseIconButtonProps,
+  /**
+   * @deprecated Use named export `{ IconButton }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
   default,
+  default as IconButton,
   type IconButtonProps,
   Size,
 } from './IconButton';
diff --git a/packages/icon/src/index.ts b/packages/icon/src/index.ts
@@ -3,6 +3,12 @@ export type { IconProps } from './createIconComponent';
 export { createIconComponent } from './createIconComponent';
 export { Size, sizeMap } from './glyphCommon';
 export { type GlyphName, glyphs } from './glyphs';
-export { Icon as default } from './Icon';
+export {
+  /**
+   * @deprecated Use named export `{ Icon }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  Icon as default,
+  Icon,
+} from './Icon';
 export { isComponentGlyph } from './isComponentGlyph';
 export { LGGlyph } from './types';
diff --git a/packages/inline-definition/src/index.ts b/packages/inline-definition/src/index.ts
@@ -1 +1,8 @@
-export { default, type InlineDefinitionProps } from './InlineDefinition';
+export {
+  /**
+   * @deprecated Use named export `{ InlineDefinition }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as InlineDefinition,
+  type InlineDefinitionProps,
+} from './InlineDefinition';
diff --git a/packages/logo/src/index.ts b/packages/logo/src/index.ts
@@ -11,7 +11,13 @@ export { EnterpriseAdvancedLogoLockup } from './Logos/EnterpriseAdvancedLogoLock
 export { UniversityLogoLockup } from './Logos/UniversityLogoLockup';
 
 // Deprecated Product Logo Marks
-export { default } from './Logo';
+export {
+  /**
+   * @deprecated Use named export `{ Logo }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as Logo,
+} from './Logo';
 export { SupportedColors } from './Logo.types';
 export { AtlasLogoMark } from './Logos/AtlasLogoMark';
 export { ChartsLogoMark } from './Logos/ChartsLogoMark';
diff --git a/packages/marketing-modal/src/index.ts b/packages/marketing-modal/src/index.ts
@@ -1,4 +1,10 @@
-export { default } from './MarketingModal/MarketingModal';
+export {
+  /**
+   * @deprecated Use named export `{ MarketingModal }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as MarketingModal,
+} from './MarketingModal/MarketingModal';
 export type { MarketingModalProps } from './MarketingModal/MarketingModal.types';
 export {
   BlobPosition,
diff --git a/packages/modal/src/index.ts b/packages/modal/src/index.ts
@@ -1,4 +1,12 @@
 export { Footer } from './Footer';
-export { default, type ModalProps, ModalSize } from './Modal';
+export {
+  /**
+   * @deprecated Use named export `{ Modal }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as Modal,
+  type ModalProps,
+  ModalSize,
+} from './Modal';
 export { CloseIconColor } from './shared.types';
 export { getLgIds, getTestUtils } from './utils';
diff --git a/packages/pagination/src/index.ts b/packages/pagination/src/index.ts
@@ -1,3 +1,8 @@
 import Pagination from './Pagination';
 export type { PaginationProps } from './Pagination';
+
+/**
+ * @deprecated Use named export `{ Pagination }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+ */
 export default Pagination;
+export { Pagination };
diff --git a/packages/popover/src/index.ts b/packages/popover/src/index.ts
@@ -19,4 +19,7 @@ export {
 } from './Popover';
 export { getPopoverRenderModeProps } from './utils/getPopoverRenderModeProps';
 
+/**
+ * @deprecated Use named export `{ Popover }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+ */
 export default Popover;
diff --git a/packages/portal/src/index.ts b/packages/portal/src/index.ts
@@ -1,2 +1,9 @@
-export { default, usePortalContainer } from './Portal';
+export {
+  /**
+   * @deprecated Use named export `{ Portal }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as Portal,
+  usePortalContainer,
+} from './Portal';
 export { type PortalProps } from './Portal/Portal.types';
diff --git a/packages/stepper/src/index.ts b/packages/stepper/src/index.ts
@@ -1,2 +1,9 @@
 export { Step } from './Step';
-export { Stepper as default, type StepperProps } from './Stepper';
+export {
+  /**
+   * @deprecated Use named export `{ Stepper }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  Stepper as default,
+  Stepper,
+  type StepperProps,
+} from './Stepper';
diff --git a/packages/text-area/src/index.ts b/packages/text-area/src/index.ts
@@ -1,2 +1,10 @@
-export { TextArea as default, State, type TextAreaProps } from './TextArea';
+export {
+  /**
+   * @deprecated Use named export `{ TextArea }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  TextArea as default,
+  State,
+  TextArea,
+  type TextAreaProps,
+} from './TextArea';
 export { DEFAULT_LGID_ROOT, getLgIds } from './utils/getLgIds';
diff --git a/packages/text-input/src/index.ts b/packages/text-input/src/index.ts
@@ -1,4 +1,10 @@
-export { default } from './TextInput';
+export {
+  /**
+   * @deprecated Use named export `{ TextInput }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as TextInput,
+} from './TextInput';
 // Export types
 export type { TextInputProps } from './TextInput';
 // Export constants
diff --git a/packages/toggle/src/index.ts b/packages/toggle/src/index.ts
@@ -1,5 +1,10 @@
-import Toggle from './Toggle/Toggle';
+export {
+  /**
+   * @deprecated Use named export `{ Toggle }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+   */
+  default,
+  default as Toggle,
+} from './Toggle/Toggle';
 export type { ToggleProps } from './Toggle/types';
 export { Size } from './Toggle/types';
 export { DEFAULT_LGID_ROOT, getLgIds } from './utils/getLgIds';
-export default Toggle;
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
@@ -12,4 +12,7 @@ export {
 export { useTooltipTriggerEventHandlers } from './Tooltip/utils/useTooltipTriggerEventHandlers';
 
 export { Tooltip }; // named
+/**
+ * @deprecated Use named export `{ Tooltip }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance.
+ */
 export default Tooltip; // default
diff --git a/tools/codemods/README.md b/tools/codemods/README.md
@@ -166,6 +166,57 @@ import ConfirmationModal from '@leafygreen-ui/confirmation-modal';
 </ConfirmationModal>;
 ```
 
+### `named-exports`
+
+This codemod converts default imports to named imports for LeafyGreen UI components.
+
+By default, the codemod will apply for all below listed packages. Use the `--packages` flag to filter for a subset of these.
+
+- `@leafygreen-ui/badge`
+- `@leafygreen-ui/button`
+- `@leafygreen-ui/callout`
+- `@leafygreen-ui/card`
+- `@leafygreen-ui/checkbox`
+- `@leafygreen-ui/code`
+- `@leafygreen-ui/confirmation-modal`
+- `@leafygreen-ui/copyable`
+- `@leafygreen-ui/expandable-card`
+- `@leafygreen-ui/form-footer`
+- `@leafygreen-ui/icon`
+- `@leafygreen-ui/icon-button`
+- `@leafygreen-ui/inline-definition`
+- `@leafygreen-ui/logo`
+- `@leafygreen-ui/marketing-modal`
+- `@leafygreen-ui/modal`
+- `@leafygreen-ui/pagination`
+- `@leafygreen-ui/popover`
+- `@leafygreen-ui/portal`
+- `@leafygreen-ui/stepper`
+- `@leafygreen-ui/text-area`
+- `@leafygreen-ui/text-input`
+- `@leafygreen-ui/toggle`
+- `@leafygreen-ui/tooltip`
+
+```shell
+pnpm lg codemod named-exports <path>
+```
+
+**Before**:
+
+```tsx
+import Button, { Size } from '@leafygreen-ui/button';
+import LGModal from '@leafygreen-ui/modal';
+import Tooltip from '@leafygreen-ui/tooltip';
+```
+
+**After**:
+
+```tsx
+import { Button, Size } from '@leafygreen-ui/button';
+import { Modal as LGModal } from '@leafygreen-ui/modal';
+import { Tooltip } from '@leafygreen-ui/tooltip';
+```
+
 ### `popover-v12`
 
 This codemod can be used to get started in refactoring LG components dependent on v12+ of `@leafygreen-ui/popover`.
diff --git a/tools/codemods/src/codemods/named-exports/tests/aliased-import.input.tsx b/tools/codemods/src/codemods/named-exports/tests/aliased-import.input.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import LGButton from '@leafygreen-ui/button';
+import LGModal from '@leafygreen-ui/modal';
+
+const App = () => {
+  return (
+    <div>
+      <LGButton>Click me</LGButton>
+      <LGModal open={false}>Modal content</LGModal>
+    </div>
+  );
+};
+
+export default App;
diff --git a/tools/codemods/src/codemods/named-exports/tests/aliased-import.output.tsx b/tools/codemods/src/codemods/named-exports/tests/aliased-import.output.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Button as LGButton } from '@leafygreen-ui/button';
+import { Modal as LGModal } from '@leafygreen-ui/modal';
+
+const App = () => {
+  return (
+    <div>
+      <LGButton>Click me</LGButton>
+      <LGModal open={false}>Modal content</LGModal>
+    </div>
+  );
+};
+
+export default App;
diff --git a/tools/codemods/src/codemods/named-exports/tests/already-named.input.tsx b/tools/codemods/src/codemods/named-exports/tests/already-named.input.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/already-named.output.tsx b/tools/codemods/src/codemods/named-exports/tests/already-named.output.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/filter-packages.input.tsx b/tools/codemods/src/codemods/named-exports/tests/filter-packages.input.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/filter-packages.output.tsx b/tools/codemods/src/codemods/named-exports/tests/filter-packages.output.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/mixed-imports.input.tsx b/tools/codemods/src/codemods/named-exports/tests/mixed-imports.input.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/mixed-imports.output.tsx b/tools/codemods/src/codemods/named-exports/tests/mixed-imports.output.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/multiple-packages.input.tsx b/tools/codemods/src/codemods/named-exports/tests/multiple-packages.input.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/multiple-packages.output.tsx b/tools/codemods/src/codemods/named-exports/tests/multiple-packages.output.tsx
diff --git a/tools/codemods/src/codemods/named-exports/tests/transform.spec.ts b/tools/codemods/src/codemods/named-exports/tests/transform.spec.ts
diff --git a/tools/codemods/src/codemods/named-exports/transform.ts b/tools/codemods/src/codemods/named-exports/transform.ts
diff --git a/tools/codemods/src/utils/imports/hasNamedImport.ts b/tools/codemods/src/utils/imports/hasNamedImport.ts
diff --git a/tools/codemods/src/utils/imports/index.ts b/tools/codemods/src/utils/imports/index.ts
diff --git a/tools/codemods/src/utils/imports/mergeImportSpecifiers.ts b/tools/codemods/src/utils/imports/mergeImportSpecifiers.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@lg-tools/codemods': minor
 +---
++
 +Add `named-exports` codemod for migrating LG package default exports to named exports. [codemods README](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports)