diff --git a/babel.config.js b/babel.config.js index aef2b2f3..8dd98c69 100644 --- a/babel.config.js +++ b/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: { diff --git a/jest.config.js b/jest.config.js index 6c5f275c..fbee38ee 100644 --- a/jest.config.js +++ b/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', diff --git a/package.json b/package.json index cbeb0427..f9d15b12 100644 --- a/package.json +++ b/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", diff --git a/src/Checkbox/index.tsx b/src/Checkbox/index.tsx index d76e475f..2e46e67a 100644 --- a/src/Checkbox/index.tsx +++ b/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? diff --git a/src/Collapse/Collapse.ts b/src/Collapse/Collapse.ts index 710cded4..4dc8f2f3 100644 --- a/src/Collapse/Collapse.ts +++ b/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'; diff --git a/src/Empty/index.tsx b/src/Empty/index.tsx index 63b81768..b623c143 100644 --- a/src/Empty/index.tsx +++ b/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: diff --git a/src/Fields/SelectField.tsx b/src/Fields/SelectField.tsx index c4c10ae7..70d007a1 100644 --- a/src/Fields/SelectField.tsx +++ b/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, diff --git a/src/Fields/pickerLocale.ts b/src/Fields/pickerLocale.ts index 30f53a27..09426976 100644 --- a/src/Fields/pickerLocale.ts +++ b/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 = { diff --git a/src/Provider/index.test.tsx b/src/Provider/index.test.tsx new file mode 100644 index 00000000..59017bdd --- /dev/null +++ b/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 { + return Array.from(container.querySelectorAll('[class]')).flatMap((element) => + Array.from(element.classList).filter((name) => name.startsWith('ant-')), + ); +} + +describe('', () => { + it('prefixes components that import antd from a subpath', () => { + const { container } = render( + + Speichern + + , + ); + + expect(unprefixedAntdClasses(container)).toEqual([]); + }); + + it('localizes components that import antd from a subpath', () => { + render( + + + , + ); + + expect(screen.getByPlaceholderText('Datum auswählen')).toBeInTheDocument(); + }); +}); diff --git a/src/Provider/index.tsx b/src/Provider/index.tsx index fa2e3779..4f8cae17 100644 --- a/src/Provider/index.tsx +++ b/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'; diff --git a/src/Select/index.tsx b/src/Select/index.tsx index 2e21d9a5..d079a631 100644 --- a/src/Select/index.tsx +++ b/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, diff --git a/src/Skeleton/index.tsx b/src/Skeleton/index.tsx index 0d199a05..55012129 100644 --- a/src/Skeleton/index.tsx +++ b/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: diff --git a/src/Space/index.tsx b/src/Space/index.tsx index 691fac90..90c61212 100644 --- a/src/Space/index.tsx +++ b/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 & { block?: boolean; diff --git a/src/Tag/index.tsx b/src/Tag/index.tsx index c6b7eb77..2a802730 100644 --- a/src/Tag/index.tsx +++ b/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'; diff --git a/src/Upload/index.tsx b/src/Upload/index.tsx index a439da16..1b3a96ea 100644 --- a/src/Upload/index.tsx +++ b/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; diff --git a/src/notification/index.tsx b/src/notification/index.tsx index fa1c2ea0..18b6c7f4 100644 --- a/src/notification/index.tsx +++ b/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; diff --git a/yarn.lock b/yarn.lock index 2d748fd5..7dfff2f7 100644 --- a/yarn.lock +++ b/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"