import AntButton, {
    ButtonProps as AntButtonProps,
} from 'antd/lib/button/index';
import Tooltip from 'antd/lib/tooltip';
import classNames from 'classnames';
import React from 'react';
import styled from 'styled-components';
const ButtonStyled = styled(AntButton)`
    background-color: red;
`;
export type ButtonProps = AntButtonProps & {
    tooltipTitle?: React.ReactNode;
};
const Button = ({ tooltipTitle, ...props }: ButtonProps) => {
    const button = (
        <ButtonStyled {...props} className={classNames(props.className)} />
    );
    if (tooltipTitle) {
        return <Tooltip title={tooltipTitle}>{button}</Tooltip>;
    }
    return button;
};
export default Button;

export { default as Affix } from 'antd/lib/affix';
export { default as Anchor } from 'antd/lib/anchor';
...
export { default as Upload } from 'antd/lib/upload';
export { default as version } from 'antd/lib/version';
export { default as Button } from 'antd/lib/version';

export { default as Affix } from 'antd/lib/affix';
export { default as Anchor } from 'antd/lib/anchor';
...
export { default as Upload } from 'antd/lib/upload';
export { default as version } from 'antd/lib/version';
export { default as Button } from 'src/components/antd/Button';

import { execSync } from 'child_process';
        import fs from 'fs';
        import _ from 'lodash';
        import path from 'path';
        const SPECIAL_ALIASES = {};
        const COMPONENT_LIST_FILE_LOCATION = path.resolve(
            __dirname,
            '../src/components/antd/index.ts',
        );
        const ANT_LIB_LOCATION = path.resolve(__dirname, '../node_modules/antd/es');
        function getComponentLocations() {
            let content = getComponentListFileContent();
            const namePathMap: Record<string, string> = {};
            const singleExportRegexp = /([\s\S]*)^export {[ \n][ ]*default as ([a-zA-Z]+)[ ,]\n?} from '(.+)';\n?$([\s\S]*)/m;
            while (singleExportRegexp.test(content)) {
                const name = content.replace(singleExportRegexp, '$2');
                const path = content.replace(singleExportRegexp, '$3');
                content = content.replace(singleExportRegexp, '$1$4');
                const importedFromAnt = path.indexOf('antd') === 0;
                if (!importedFromAnt) {
                    namePathMap[name] = path;
                }
            }
            return namePathMap;
        }
        function getComponentListFileContent() {
            return fs.readFileSync(COMPONENT_LIST_FILE_LOCATION, {
                encoding: 'utf8',
            });
        }
        function makeAliasEntries() {
            const componentLocations = getComponentLocations();
            const absoluteAliases = Object.entries(componentLocations).map(
                ([name, path]) => {
                    const alias = `antd/es/${_.kebabCase(name)}$`;
                    return [alias, path];
                },
            );
            const relativeAliases = getAntRelativeImports()
                .replace(/^.*\.\.\/([\w-]+).*$/gm, '$1')
                .split('\n')
                .filter(Boolean)
                .map((fileName) => {
                    const key = _.capitalize(_.camelCase(fileName));
                    const path =
                        SPECIAL_ALIASES[fileName as keyof typeof SPECIAL_ALIASES] ||
                        componentLocations[key];
                    return [`../${fileName}$`, path];
                })
                .filter(([, alias]) => alias);
            return Object.fromEntries([...absoluteAliases, ...relativeAliases]);
        }
        function getAntRelativeImports() {
            return execSync(
                `find ${ANT_LIB_LOCATION} -type f -name "*.js" -not \\( -path "*_util*" -or -path "*tests*" -or -path "*locale*" -or -path "*style*" \\) -exec grep -hr "^import .* from '\\.\\./[a-z\\-]*';$"  {} \\; | grep -v 'config-provider\\|time-picker\\|locale-provider'`,
            ).toString();
        }
        export const AntAliasesEs = makeAliasEntries();

...
    resolve: {
        alias: {
            ...AntAliasesEs,
        },
    },
...

...
    "paths": {
        "antd": ["src/components/antd"],
    },
...

import _ from 'lodash';
        export const CssColors = {
            primaryColor: '#2469F5',
            linkColor: '#2469F5',
            linkHoverColor: '#2469F5',
            // non antd
            defaultBg: '#f0f0f0',
        };
        export const CssSizes = {
            fontSizeSmall: '12px',
            fontSizeBase: '15px',
            // non antd
            basicHeight: '40px',
        };
        export const CssOtherVars = {
            linkDecoration: 'none',
            linkHoverDecoration: 'underline',
            // non antd
            disabledOpacity: '0.75',
        };
        export const CssVariables = {
            ...CssColors,
            ...CssSizes,
            ...CssOtherVars,
        };
        function getKebabVariables(variables: Record<string, string>) {
            const entriesKebab = Object.entries(variables).map(([key, value]) => {
                return [_.kebabCase(key), value];
            });
            return Object.fromEntries(entriesKebab);
        }
        export const CssVariablesKebabCase = getKebabVariables(CssVariables);

...
    {
        test: /\.less$/,
        include: /node_modules/,
        use: [
            ...
            {
                loader: 'less-loader',
                options: {
                    sourceMap: true,
                    javascriptEnabled: true,
                    plugins: [
                        new CleanCSSPlugin({ advanced: true }),
                    ],
                    modifyVars: CssVariablesKebabCase,
                },
            },
        ],
    },
...

import { Button } from 'antd';
export const SomeComponent = () => {
    return <Button tooltipTitle="some tooltip text">some button text</Button>
}

<List
    data-testid="list"
    grid={{ column: 2 }}
    dataSource={['Item 1', 'Item 2']}
    renderItem={(item) => <List.Item>{item}</List.Item>}
/>

export { default as Col } from 'src/components/antd/Col; // path to our wrapper for Col
export { Row } from 'antd/es/grid/index'; // still reexport default Row as we didn't make a wrapper for it yet

...
const SPECIAL_ALIASES = {
    grid: 'src/components/antd/Grid',
    radio: 'src/components/antd/Radio', // just to illustrate how to do the same for Radio
};
...

...
    [
        'import',
        {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: true,
        },
        'antd',
    ],
...

...
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ru|en-gb/),
    ],
...

export { default as Loading } from '@ant-design/icons/lib/outline/LoadingOutline';

...
'@ant-design/icons/lib/dist$': path.resolve('src/components/antd/Icons.tsx'),
...

<Button loading>Loading</Button>