fix: resolve antd to one copy in tests and Storybook

babel.config.js

@@ -7,14 +7,6 @@ module.exports = {
   plugins: [
     'babel-plugin-styled-components',
     '@babel/plugin-transform-runtime',
-    [
-      // https://4x.ant.design/docs/react/getting-started#Import-on-Demand
-      'import',
-      {
-        libraryName: 'antd',
-        style: false,
-      },
-    ],
   ],
   env: {
     test: {

jest.config.js

@@ -13,6 +13,8 @@ module.exports = {
   testPathIgnorePatterns: ['node_modules/'],
   testMatch: ['**/*.test.(ts|tsx)'],
   moduleNameMapper: {
+    // Resolves antd like the rollup build does, so Provider and subpath imports share one ConfigProvider
+    '^antd$': 'antd/es',
     // Mocks out all these file formats when tests are run.
     '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       'identity-obj-proxy',

package.json

@@ -98,7 +98,6 @@
     "@types/react-dom": "^18.2.17",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
-    "babel-plugin-import": "^1.13.8",
     "babel-plugin-styled-components": "^2.1.4",
     "css-loader": "^7.1.4",
     "eslint": "^8.54.0",

src/Checkbox/index.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { fontSizeFromTheme } from '../styled-utils';
 
 export { CheckboxProps } from 'antd';
-export { CheckboxChangeEvent } from 'antd/lib/checkbox';
+export { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 /**
  * Are there both truthy and falsy values in the given array of booleans?

src/Collapse/Collapse.ts

@@ -1,6 +1,6 @@
 import { Collapse as AntdCollapse } from 'antd';
-import { CollapseProps as AntdCollapseProps } from 'antd/lib/collapse/Collapse';
-import { CollapsePanelProps as AntdCollapsePanelProps } from 'antd/lib/collapse/CollapsePanel';
+import { CollapseProps as AntdCollapseProps } from 'antd/es/collapse/Collapse';
+import { CollapsePanelProps as AntdCollapsePanelProps } from 'antd/es/collapse/CollapsePanel';
 import styled, { css } from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';

src/Empty/index.tsx

@@ -1,5 +1,5 @@
 import { Empty as AntdEmpty } from 'antd';
-import { EmptyProps } from 'antd/lib/empty';
+import { EmptyProps } from 'antd/es/empty';
 import { FC, ReactNode } from 'react';
 
 // We have to redefine this in order to avoid the TypeScript error:

src/Fields/SelectField.tsx

@@ -1,4 +1,4 @@
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
+import { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import React from 'react';
 import {
   useController,

src/Fields/pickerLocale.ts

@@ -1,4 +1,4 @@
-import { PickerLocale } from 'antd/lib/date-picker/generatePicker';
+import { PickerLocale } from 'antd/es/date-picker/generatePicker';
 import CalendarLocale from 'rc-picker/lib/locale/de_DE';
 
 export const PICKER_LOCALE: PickerLocale = {

src/Provider/index.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { FilledButton } from '../Button/ColoredButtons';
+import { DatePicker } from '../DatePicker';
+
+import { Provider } from './index';
+
+function unprefixedAntdClasses(container: HTMLElement): Array<string> {
+  return Array.from(container.querySelectorAll('[class]')).flatMap((element) =>
+    Array.from(element.classList).filter((name) => name.startsWith('ant-')),
+  );
+}
+
+describe('<Provider />', () => {
+  it('prefixes components that import antd from a subpath', () => {
+    const { container } = render(
+      <Provider>
+        <FilledButton>Speichern</FilledButton>
+        <DatePicker />
+      </Provider>,
+    );
+
+    expect(unprefixedAntdClasses(container)).toEqual([]);
+  });
+
+  it('localizes components that import antd from a subpath', () => {
+    render(
+      <Provider>
+        <DatePicker />
+      </Provider>,
+    );
+
+    expect(screen.getByPlaceholderText('Datum auswählen')).toBeInTheDocument();
+  });
+});

src/Provider/index.tsx

@@ -1,5 +1,5 @@
 import { ConfigProvider as AntdConfigProvider } from 'antd';
-import deDE from 'antd/lib/locale/de_DE';
+import deDE from 'antd/es/locale/de_DE';
 import React, { PropsWithChildren } from 'react';
 import { ThemeProvider } from 'styled-components';
 

src/Select/index.tsx

@@ -1,5 +1,5 @@
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
+import { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { BaseSelectRef } from 'rc-select';
 import React, {
   ForwardedRef,

src/Skeleton/index.tsx

@@ -2,10 +2,10 @@ import {
   Skeleton as AntdSkeleton,
   SkeletonProps as AntdSkeletonProps,
 } from 'antd';
-import SkeletonAvatar from 'antd/lib/skeleton/Avatar';
-import SkeletonButton from 'antd/lib/skeleton/Button';
-import SkeletonImage from 'antd/lib/skeleton/Image';
-import SkeletonInput from 'antd/lib/skeleton/Input';
+import SkeletonAvatar from 'antd/es/skeleton/Avatar';
+import SkeletonButton from 'antd/es/skeleton/Button';
+import SkeletonImage from 'antd/es/skeleton/Image';
+import SkeletonInput from 'antd/es/skeleton/Input';
 import * as React from 'react';
 
 // Copied from antd/lib/skeleton/Skeleton.d.ts to fix:

src/Space/index.tsx

@@ -2,7 +2,7 @@ import { Space as AntdSpace, SpaceProps as AntdSpaceProps } from 'antd';
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 
-export { SpaceSize } from 'antd/lib/space';
+export { SpaceSize } from 'antd/es/space';
 
 export type SpaceProps = Omit<AntdSpaceProps, 'direction'> & {
   block?: boolean;

src/Tag/index.tsx

@@ -3,7 +3,7 @@ import {
   TagProps as AntdTagProps,
   TagType as AntdTagType,
 } from 'antd';
-import { CheckableTagProps as AntdCheckableTagProps } from 'antd/lib/tag/CheckableTag';
+import { CheckableTagProps as AntdCheckableTagProps } from 'antd/es/tag/CheckableTag';
 import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';

src/Upload/index.tsx

@@ -1,6 +1,6 @@
 import { Upload as AntdUpload, UploadProps as AntdUploadProps } from 'antd';
 import { RcFile as AntdRcFile } from 'antd/es/upload';
-import { UploadFile as AntdUploadFile } from 'antd/lib/upload/interface';
+import { UploadFile as AntdUploadFile } from 'antd/es/upload/interface';
 
 export const Upload: typeof AntdUpload = AntdUpload;
 export type UploadProps = AntdUploadProps;

src/notification/index.tsx

@@ -1,5 +1,5 @@
 import { notification as antdNotification } from 'antd';
-import { ArgsProps } from 'antd/lib/notification';
+import { ArgsProps } from 'antd/es/notification';
 
 export const notification: typeof antdNotification = antdNotification;
 export type NotificationArgs = ArgsProps;

yarn.lock

@@ -360,7 +360,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.27.1":
+"@babel/helper-module-imports@npm:^7.18.6, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-module-imports@npm:7.27.1"
   dependencies:
@@ -2943,7 +2943,6 @@ __metadata:
     antd: "npm:4.20.5"
     babel-jest: "npm:^29.7.0"
     babel-loader: "npm:^9.1.3"
-    babel-plugin-import: "npm:^1.13.8"
     babel-plugin-styled-components: "npm:^2.1.4"
     css-loader: "npm:^7.1.4"
     date-fns: "npm:^2.29.3"
@@ -6166,15 +6165,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-import@npm:^1.13.8":
-  version: 1.13.8
-  resolution: "babel-plugin-import@npm:1.13.8"
-  dependencies:
-    "@babel/helper-module-imports": "npm:^7.0.0"
-  checksum: 10c0/91da78cd28dff17188b025e0c40cdc823af8d9bceae4aac2a232d5510082c05a7d9b624303be4342b8178551bc38d435a5bd26ccc85f60aecebd7ab30477c315
-  languageName: node
-  linkType: hard
-
 "babel-plugin-istanbul@npm:^6.1.1":
   version: 6.1.1
   resolution: "babel-plugin-istanbul@npm:6.1.1"