Skip to content

Commit

Permalink
fix: fix RSC error with createWithBsPrefix components (#6672)
Browse files Browse the repository at this point in the history
* fix: fix RSC error with createWithBsPrefix components

* update index
  • Loading branch information
kyletsang authored Aug 7, 2023
1 parent 57b4e29 commit 49b3270
Show file tree
Hide file tree
Showing 35 changed files with 898 additions and 102 deletions.
16 changes: 2 additions & 14 deletions src/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import PropTypes from 'prop-types';
import { elementType } from 'prop-types-extra';
import { useUncontrolled } from 'uncontrollable';
import useEventCallback from '@restart/hooks/useEventCallback';
import Anchor from '@restart/ui/Anchor';
import { useBootstrapPrefix } from './ThemeProvider';
import AlertHeading from './AlertHeading';
import AlertLink from './AlertLink';
import Fade from './Fade';
import CloseButton, { CloseButtonVariant } from './CloseButton';
import { Variant } from './types';
import divWithClassName from './divWithClassName';
import createWithBsPrefix from './createWithBsPrefix';
import { TransitionType } from './helpers';

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

const DivStyledAsH4 = divWithClassName('h4');
DivStyledAsH4.displayName = 'DivStyledAsH4';

const AlertHeading = createWithBsPrefix('alert-heading', {
Component: DivStyledAsH4,
});

const AlertLink = createWithBsPrefix('alert-link', {
Component: Anchor,
});

const propTypes = {
/**
* @default 'alert'
Expand Down
30 changes: 30 additions & 0 deletions src/AlertHeading.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import divWithClassName from './divWithClassName';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

const DivStyledAsH4 = divWithClassName('h4');
DivStyledAsH4.displayName = 'DivStyledAsH4';

export interface AlertHeadingProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const AlertHeading: BsPrefixRefForwardingComponent<'div', AlertHeadingProps> =
React.forwardRef<HTMLElement, AlertHeadingProps>(
({ className, bsPrefix, as: Component = DivStyledAsH4, ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-heading');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

AlertHeading.displayName = 'AlertHeading';

export default AlertHeading;
27 changes: 27 additions & 0 deletions src/AlertLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';
import classNames from 'classnames';
import Anchor from '@restart/ui/Anchor';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export interface AlertLinkProps
extends BsPrefixProps,
React.AnchorHTMLAttributes<HTMLElement> {}

const AlertLink: BsPrefixRefForwardingComponent<'a', AlertLinkProps> =
React.forwardRef<HTMLElement, AlertLinkProps>(
({ className, bsPrefix, as: Component = Anchor, ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'alert-link');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

AlertLink.displayName = 'AlertLink';

export default AlertLink;
25 changes: 8 additions & 17 deletions src/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,18 @@ import * as React from 'react';
import PropTypes from 'prop-types';

import { useBootstrapPrefix } from './ThemeProvider';
import createWithBsPrefix from './createWithBsPrefix';
import divWithClassName from './divWithClassName';
import CardImg from './CardImg';
import CardBody from './CardBody';
import CardFooter from './CardFooter';
import CardHeader from './CardHeader';
import CardImg from './CardImg';
import CardImgOverlay from './CardImgOverlay';
import CardLink from './CardLink';
import CardSubtitle from './CardSubtitle';
import CardText from './CardText';
import CardTitle from './CardTitle';
import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
import { Color, Variant } from './types';

const DivStyledAsH5 = divWithClassName('h5');
const DivStyledAsH6 = divWithClassName('h6');
const CardBody = createWithBsPrefix('card-body');
const CardTitle = createWithBsPrefix('card-title', {
Component: DivStyledAsH5,
});
const CardSubtitle = createWithBsPrefix('card-subtitle', {
Component: DivStyledAsH6,
});
const CardLink = createWithBsPrefix('card-link', { Component: 'a' });
const CardText = createWithBsPrefix('card-text', { Component: 'p' });
const CardFooter = createWithBsPrefix('card-footer');
const CardImgOverlay = createWithBsPrefix('card-img-overlay');

export interface CardProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {
Expand Down
26 changes: 26 additions & 0 deletions src/CardBody.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export interface CardBodyProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardBody: BsPrefixRefForwardingComponent<'div', CardBodyProps> =
React.forwardRef<HTMLElement, CardBodyProps>(
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-body');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardBody.displayName = 'CardBody';

export default CardBody;
26 changes: 26 additions & 0 deletions src/CardFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export interface CardFooterProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardFooter: BsPrefixRefForwardingComponent<'div', CardFooterProps> =
React.forwardRef<HTMLElement, CardFooterProps>(
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-footer');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardFooter.displayName = 'CardFooter';

export default CardFooter;
27 changes: 25 additions & 2 deletions src/CardGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,26 @@
import createWithBsPrefix from './createWithBsPrefix';
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export default createWithBsPrefix('card-group');
export interface CardGroupProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardGroup: BsPrefixRefForwardingComponent<'div', CardGroupProps> =
React.forwardRef<HTMLElement, CardGroupProps>(
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-group');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardGroup.displayName = 'CardGroup';

export default CardGroup;
28 changes: 28 additions & 0 deletions src/CardImgOverlay.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export interface CardImgOverlayProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardImgOverlay: BsPrefixRefForwardingComponent<
'div',
CardImgOverlayProps
> = React.forwardRef<HTMLElement, CardImgOverlayProps>(
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-img-overlay');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardImgOverlay.displayName = 'CardImgOverlay';

export default CardImgOverlay;
26 changes: 26 additions & 0 deletions src/CardLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export interface CardLinkProps
extends BsPrefixProps,
React.AnchorHTMLAttributes<HTMLElement> {}

const CardLink: BsPrefixRefForwardingComponent<'a', CardLinkProps> =
React.forwardRef<HTMLElement, CardLinkProps>(
({ className, bsPrefix, as: Component = 'a', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-link');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardLink.displayName = 'CardLink';

export default CardLink;
29 changes: 29 additions & 0 deletions src/CardSubtitle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
import divWithClassName from './divWithClassName';

const DivStyledAsH6 = divWithClassName('h6');

export interface CardSubtitleProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardSubtitle: BsPrefixRefForwardingComponent<'div', CardSubtitleProps> =
React.forwardRef<HTMLElement, CardSubtitleProps>(
({ className, bsPrefix, as: Component = DivStyledAsH6, ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-subtitle');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardSubtitle.displayName = 'CardSubtitle';

export default CardSubtitle;
26 changes: 26 additions & 0 deletions src/CardText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export interface CardTextProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardText: BsPrefixRefForwardingComponent<'p', CardTextProps> =
React.forwardRef<HTMLElement, CardTextProps>(
({ className, bsPrefix, as: Component = 'p', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-text');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardText.displayName = 'CardText';

export default CardText;
29 changes: 29 additions & 0 deletions src/CardTitle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
import divWithClassName from './divWithClassName';

const DivStyledAsH5 = divWithClassName('h5');

export interface CardTitleProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CardTitle: BsPrefixRefForwardingComponent<'div', CardTitleProps> =
React.forwardRef<HTMLElement, CardTitleProps>(
({ className, bsPrefix, as: Component = DivStyledAsH5, ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'card-title');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CardTitle.displayName = 'CardTitle';

export default CardTitle;
29 changes: 27 additions & 2 deletions src/CarouselCaption.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
import createWithBsPrefix from './createWithBsPrefix';
import * as React from 'react';
import classNames from 'classnames';
import { useBootstrapPrefix } from './ThemeProvider';
import type { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';

export default createWithBsPrefix('carousel-caption');
export interface CarouselCaptionProps
extends BsPrefixProps,
React.HTMLAttributes<HTMLElement> {}

const CarouselCaption: BsPrefixRefForwardingComponent<
'div',
CarouselCaptionProps
> = React.forwardRef<HTMLElement, CarouselCaptionProps>(
({ className, bsPrefix, as: Component = 'div', ...props }, ref) => {
bsPrefix = useBootstrapPrefix(bsPrefix, 'carousel-caption');
return (
<Component
ref={ref}
className={classNames(className, bsPrefix)}
{...props}
/>
);
},
);

CarouselCaption.displayName = 'CarouselCaption';

export default CarouselCaption;
Loading

0 comments on commit 49b3270

Please sign in to comment.