Skip to content

Commit 49b3270

Browse files
kyletsangkyletsang
authored
fix: fix RSC error with createWithBsPrefix components (#6672)
* fix: fix RSC error with createWithBsPrefix components * update index
1 parent 57b4e29 commit 49b3270

35 files changed

+898
-102
lines changed

‎src/Alert.tsx

+2-14
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import PropTypes from 'prop-types';
44
import { elementType } from 'prop-types-extra';
55
import { useUncontrolled } from 'uncontrollable';
66
import useEventCallback from '@restart/hooks/useEventCallback';
7-
import Anchor from '@restart/ui/Anchor';
87
import { useBootstrapPrefix } from './ThemeProvider';
8+
import AlertHeading from './AlertHeading';
9+
import AlertLink from './AlertLink';
910
import Fade from './Fade';
1011
import CloseButton, { CloseButtonVariant } from './CloseButton';
1112
import { Variant } from './types';
12-
import divWithClassName from './divWithClassName';
13-
import createWithBsPrefix from './createWithBsPrefix';
1413
import { TransitionType } from './helpers';
1514

1615
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -24,17 +23,6 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
2423
transition?: TransitionType;
2524
}
2625

27-
const DivStyledAsH4 = divWithClassName('h4');
28-
DivStyledAsH4.displayName = 'DivStyledAsH4';
29-
30-
const AlertHeading = createWithBsPrefix('alert-heading', {
31-
Component: DivStyledAsH4,
32-
});
33-
34-
const AlertLink = createWithBsPrefix('alert-link', {
35-
Component: Anchor,
36-
});
37-
3826
const propTypes = {
3927
/**
4028
* @default 'alert'

‎src/AlertHeading.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import divWithClassName from './divWithClassName';
5+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
6+
7+
const DivStyledAsH4 = divWithClassName('h4');
8+
DivStyledAsH4.displayName = 'DivStyledAsH4';
9+
10+
export interface AlertHeadingProps
11+
extends BsPrefixProps,
12+
React.HTMLAttributes<HTMLElement> {}
13+
14+
const AlertHeading: BsPrefixRefForwardingComponent<'div', AlertHeadingProps> =
15+
React.forwardRef<HTMLElement, AlertHeadingProps>(
16+
({ className, bsPrefix, as: Component = DivStyledAsH4, ...props }, ref) => {
17+
bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-heading');
18+
return (
19+
<Component
20+
ref={ref}
21+
className={classNames(className, bsPrefix)}
22+
{...props}
23+
/>
24+
);
25+
},
26+
);
27+
28+
AlertHeading.displayName = 'AlertHeading';
29+
30+
export default AlertHeading;

‎src/AlertLink.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import Anchor from '@restart/ui/Anchor';
4+
import { useBootstrapPrefix } from './ThemeProvider';
5+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
6+
7+
export interface AlertLinkProps
8+
extends BsPrefixProps,
9+
React.AnchorHTMLAttributes<HTMLElement> {}
10+
11+
const AlertLink: BsPrefixRefForwardingComponent<'a', AlertLinkProps> =
12+
React.forwardRef<HTMLElement, AlertLinkProps>(
13+
({ className, bsPrefix, as: Component = Anchor, ...props }, ref) => {
14+
bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-link');
15+
return (
16+
<Component
17+
ref={ref}
18+
className={classNames(className, bsPrefix)}
19+
{...props}
20+
/>
21+
);
22+
},
23+
);
24+
25+
AlertLink.displayName = 'AlertLink';
26+
27+
export default AlertLink;

‎src/Card.tsx

+8-17
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,18 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44

55
import { useBootstrapPrefix } from './ThemeProvider';
6-
import createWithBsPrefix from './createWithBsPrefix';
7-
import divWithClassName from './divWithClassName';
8-
import CardImg from './CardImg';
6+
import CardBody from './CardBody';
7+
import CardFooter from './CardFooter';
98
import CardHeader from './CardHeader';
9+
import CardImg from './CardImg';
10+
import CardImgOverlay from './CardImgOverlay';
11+
import CardLink from './CardLink';
12+
import CardSubtitle from './CardSubtitle';
13+
import CardText from './CardText';
14+
import CardTitle from './CardTitle';
1015
import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
1116
import { Color, Variant } from './types';
1217

13-
const DivStyledAsH5 = divWithClassName('h5');
14-
const DivStyledAsH6 = divWithClassName('h6');
15-
const CardBody = createWithBsPrefix('card-body');
16-
const CardTitle = createWithBsPrefix('card-title', {
17-
Component: DivStyledAsH5,
18-
});
19-
const CardSubtitle = createWithBsPrefix('card-subtitle', {
20-
Component: DivStyledAsH6,
21-
});
22-
const CardLink = createWithBsPrefix('card-link', { Component: 'a' });
23-
const CardText = createWithBsPrefix('card-text', { Component: 'p' });
24-
const CardFooter = createWithBsPrefix('card-footer');
25-
const CardImgOverlay = createWithBsPrefix('card-img-overlay');
26-
2718
export interface CardProps
2819
extends BsPrefixProps,
2920
React.HTMLAttributes<HTMLElement> {

‎src/CardBody.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
6+
export interface CardBodyProps
7+
extends BsPrefixProps,
8+
React.HTMLAttributes<HTMLElement> {}
9+
10+
const CardBody: BsPrefixRefForwardingComponent<'div', CardBodyProps> =
11+
React.forwardRef<HTMLElement, CardBodyProps>(
12+
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
13+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-body');
14+
return (
15+
<Component
16+
ref={ref}
17+
className={classNames(className, bsPrefix)}
18+
{...props}
19+
/>
20+
);
21+
},
22+
);
23+
24+
CardBody.displayName = 'CardBody';
25+
26+
export default CardBody;

‎src/CardFooter.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
6+
export interface CardFooterProps
7+
extends BsPrefixProps,
8+
React.HTMLAttributes<HTMLElement> {}
9+
10+
const CardFooter: BsPrefixRefForwardingComponent<'div', CardFooterProps> =
11+
React.forwardRef<HTMLElement, CardFooterProps>(
12+
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
13+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-footer');
14+
return (
15+
<Component
16+
ref={ref}
17+
className={classNames(className, bsPrefix)}
18+
{...props}
19+
/>
20+
);
21+
},
22+
);
23+
24+
CardFooter.displayName = 'CardFooter';
25+
26+
export default CardFooter;

‎src/CardGroup.tsx

+25-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1-
import createWithBsPrefix from './createWithBsPrefix';
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
25

3-
export default createWithBsPrefix('card-group');
6+
export interface CardGroupProps
7+
extends BsPrefixProps,
8+
React.HTMLAttributes<HTMLElement> {}
9+
10+
const CardGroup: BsPrefixRefForwardingComponent<'div', CardGroupProps> =
11+
React.forwardRef<HTMLElement, CardGroupProps>(
12+
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
13+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-group');
14+
return (
15+
<Component
16+
ref={ref}
17+
className={classNames(className, bsPrefix)}
18+
{...props}
19+
/>
20+
);
21+
},
22+
);
23+
24+
CardGroup.displayName = 'CardGroup';
25+
26+
export default CardGroup;

‎src/CardImgOverlay.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
6+
export interface CardImgOverlayProps
7+
extends BsPrefixProps,
8+
React.HTMLAttributes<HTMLElement> {}
9+
10+
const CardImgOverlay: BsPrefixRefForwardingComponent<
11+
'div',
12+
CardImgOverlayProps
13+
> = React.forwardRef<HTMLElement, CardImgOverlayProps>(
14+
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
15+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-img-overlay');
16+
return (
17+
<Component
18+
ref={ref}
19+
className={classNames(className, bsPrefix)}
20+
{...props}
21+
/>
22+
);
23+
},
24+
);
25+
26+
CardImgOverlay.displayName = 'CardImgOverlay';
27+
28+
export default CardImgOverlay;

‎src/CardLink.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
6+
export interface CardLinkProps
7+
extends BsPrefixProps,
8+
React.AnchorHTMLAttributes<HTMLElement> {}
9+
10+
const CardLink: BsPrefixRefForwardingComponent<'a', CardLinkProps> =
11+
React.forwardRef<HTMLElement, CardLinkProps>(
12+
({ className, bsPrefix, as: Component = 'a', ...props }, ref) => {
13+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-link');
14+
return (
15+
<Component
16+
ref={ref}
17+
className={classNames(className, bsPrefix)}
18+
{...props}
19+
/>
20+
);
21+
},
22+
);
23+
24+
CardLink.displayName = 'CardLink';
25+
26+
export default CardLink;

‎src/CardSubtitle.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
import divWithClassName from './divWithClassName';
6+
7+
const DivStyledAsH6 = divWithClassName('h6');
8+
9+
export interface CardSubtitleProps
10+
extends BsPrefixProps,
11+
React.HTMLAttributes<HTMLElement> {}
12+
13+
const CardSubtitle: BsPrefixRefForwardingComponent<'div', CardSubtitleProps> =
14+
React.forwardRef<HTMLElement, CardSubtitleProps>(
15+
({ className, bsPrefix, as: Component = DivStyledAsH6, ...props }, ref) => {
16+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-subtitle');
17+
return (
18+
<Component
19+
ref={ref}
20+
className={classNames(className, bsPrefix)}
21+
{...props}
22+
/>
23+
);
24+
},
25+
);
26+
27+
CardSubtitle.displayName = 'CardSubtitle';
28+
29+
export default CardSubtitle;

‎src/CardText.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
6+
export interface CardTextProps
7+
extends BsPrefixProps,
8+
React.HTMLAttributes<HTMLElement> {}
9+
10+
const CardText: BsPrefixRefForwardingComponent<'p', CardTextProps> =
11+
React.forwardRef<HTMLElement, CardTextProps>(
12+
({ className, bsPrefix, as: Component = 'p', ...props }, ref) => {
13+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-text');
14+
return (
15+
<Component
16+
ref={ref}
17+
className={classNames(className, bsPrefix)}
18+
{...props}
19+
/>
20+
);
21+
},
22+
);
23+
24+
CardText.displayName = 'CardText';
25+
26+
export default CardText;

‎src/CardTitle.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
5+
import divWithClassName from './divWithClassName';
6+
7+
const DivStyledAsH5 = divWithClassName('h5');
8+
9+
export interface CardTitleProps
10+
extends BsPrefixProps,
11+
React.HTMLAttributes<HTMLElement> {}
12+
13+
const CardTitle: BsPrefixRefForwardingComponent<'div', CardTitleProps> =
14+
React.forwardRef<HTMLElement, CardTitleProps>(
15+
({ className, bsPrefix, as: Component = DivStyledAsH5, ...props }, ref) => {
16+
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-title');
17+
return (
18+
<Component
19+
ref={ref}
20+
className={classNames(className, bsPrefix)}
21+
{...props}
22+
/>
23+
);
24+
},
25+
);
26+
27+
CardTitle.displayName = 'CardTitle';
28+
29+
export default CardTitle;

‎src/CarouselCaption.tsx

+27-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1-
import createWithBsPrefix from './createWithBsPrefix';
1+
import * as React from 'react';
2+
import classNames from 'classnames';
3+
import { useBootstrapPrefix } from './ThemeProvider';
4+
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
25

3-
export default createWithBsPrefix('carousel-caption');
6+
export interface CarouselCaptionProps
7+
extends BsPrefixProps,
8+
React.HTMLAttributes<HTMLElement> {}
9+
10+
const CarouselCaption: BsPrefixRefForwardingComponent<
11+
'div',
12+
CarouselCaptionProps
13+
> = React.forwardRef<HTMLElement, CarouselCaptionProps>(
14+
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
15+
bsPrefix = useBootstrapPrefix(bsPrefix, 'carousel-caption');
16+
return (
17+
<Component
18+
ref={ref}
19+
className={classNames(className, bsPrefix)}
20+
{...props}
21+
/>
22+
);
23+
},
24+
);
25+
26+
CarouselCaption.displayName = 'CarouselCaption';
27+
28+
export default CarouselCaption;

0 commit comments

Comments
 (0)