refactor: Transform <Badge>, <Breadcrumb>, ... to typescript (#3807)

Author: diana-villalvazo-wgu

src/Badge/index.jsx

@@ -0,0 +1,33 @@
+import React, { ForwardedRef } from 'react';
+import BaseBadge from 'react-bootstrap/Badge';
+import { ComponentWithAsProp } from '../utils/types/bootstrap';
+
+const STYLE_VARIANTS = [
+  'primary',
+  'secondary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'light',
+  'dark',
+];
+
+interface BadgeProps {
+  /** Specifies element type for this component */
+  as?: React.ElementType;
+  /** Visual style of the badge. The full type definition can be seen [here](https://github.com/openedx/paragon/blob/release-23.x/src/Badge/index.tsx) */
+  variant?: typeof STYLE_VARIANTS[number];
+  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */
+  pill?: boolean;
+  /** Overrides underlying component base CSS class name */
+  bsPrefix?: string;
+}
+
+const Badge: ComponentWithAsProp<'span', BadgeProps> = React.forwardRef(({
+  as = 'span', variant = 'primary', pill = false, bsPrefix = 'badge', ...props
+}: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) => (
+  <BaseBadge as={as} variant={variant} pill={pill} bsPrefix={bsPrefix} {...props} ref={ref} />
+));
+
+export default Badge;

src/Badge/index.tsx

@@ -1,15 +1,30 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export default function BreadcrumbLink({ as, clickHandler, linkProps }) {
+interface BreadcrumbLinkProps {
+  as: React.ElementType;
+  clickHandler?: (event: React.MouseEvent, link: any) => void;
+  linkProps: {
+    label: string;
+    url?: string; // deprecated, use href instead when rendering as 'a'
+    className?: string;
+    [key: string]: any;
+  };
+}
+
+interface AdditionalProps {
+  href?: string;
+  onClick?: (event: React.MouseEvent, link: any) => void;
+}
+
+export default function BreadcrumbLink({ as, clickHandler = undefined, linkProps }: BreadcrumbLinkProps) {
   const {
     label,
     url,
     className,
     ...props
   } = linkProps;
-  const addtlProps = {};
+  const addtlProps: AdditionalProps = {};
 
   if (as === 'a' && url) {
     // eslint-disable-next-line no-console
@@ -34,17 +49,3 @@ export default function BreadcrumbLink({ as, clickHandler, linkProps }) {
     label,
   );
 }
-
-BreadcrumbLink.propTypes = {
-  as: PropTypes.elementType.isRequired,
-  clickHandler: PropTypes.func,
-  linkProps: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    className: PropTypes.string,
-  }).isRequired,
-};
-
-BreadcrumbLink.defaultProps = {
-  clickHandler: undefined,
-};

src/Breadcrumb/BreadcrumbLink.jsx src/Breadcrumb/BreadcrumbLink.tsxsrc/Breadcrumb/BreadcrumbLink.jsx renamed to src/Breadcrumb/BreadcrumbLink.tsx

@@ -1,15 +1,39 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import BreadcrumbLink from './BreadcrumbLink';
 import { ChevronRight } from '../../icons';
 import Icon from '../Icon';
 
+interface BreadcrumbProps {
+  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`
+   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.
+   */
+  links: Array<{ label: string, [key: string]: any }>;
+  /** allows to add a label that is not a link to the end of the breadcrumb. */
+  activeLabel?: string;
+  /** label of the element */
+  ariaLabel?: string;
+  /** allows to add a custom element between the breadcrumb items.
+   * Defaults to `>` rendered using the `Icon` component. */
+  spacer?: React.ReactElement;
+  /** allows to add a custom function to be called `onClick` of a breadcrumb link.
+   * The use case for this is for adding custom analytics to the component. */
+  clickHandler?: (event: React.MouseEvent, link: any) => void;
+  /** The `Breadcrumbs` style variant to use. */
+  variant?: 'light' | 'dark';
+  /** The `Breadcrumbs` mobile variant view. */
+  isMobile?: boolean;
+  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or
+   * [react-router's Link](https://reactrouter.com/en/main/components/link).
+   */
+  linkAs?: React.ElementType;
+}
+
 function Breadcrumb({
   links, activeLabel, spacer, clickHandler,
-  variant, isMobile, ariaLabel, linkAs, ...props
-}) {
+  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a', ...props
+}: BreadcrumbProps) {
   const linkCount = links.length;
   const displayLinks = isMobile ? [links[linkCount - 1]] : links;
 
@@ -39,41 +63,4 @@ function Breadcrumb({
   );
 }
 
-Breadcrumb.propTypes = {
-  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`
-   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.
-   */
-  links: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
-  })).isRequired,
-  /** allows to add a label that is not a link to the end of the breadcrumb. */
-  activeLabel: PropTypes.string,
-  /** label of the element */
-  ariaLabel: PropTypes.string,
-  /** allows to add a custom element between the breadcrumb items.
-   * Defaults to `>` rendered using the `Icon` component. */
-  spacer: PropTypes.element,
-  /** allows to add a custom function to be called `onClick` of a breadcrumb link.
-   * The use case for this is for adding custom analytics to the component. */
-  clickHandler: PropTypes.func,
-  /** The `Breadcrumbs` style variant to use. */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** The `Breadcrumbs` mobile variant view. */
-  isMobile: PropTypes.bool,
-  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or
-   * [react-router's Link](https://reactrouter.com/en/main/components/link).
-   */
-  linkAs: PropTypes.elementType,
-};
-
-Breadcrumb.defaultProps = {
-  activeLabel: undefined,
-  ariaLabel: 'breadcrumb',
-  spacer: undefined,
-  clickHandler: undefined,
-  variant: 'light',
-  isMobile: false,
-  linkAs: 'a',
-};
-
 export default Breadcrumb;

src/Breadcrumb/index.jsx src/Breadcrumb/index.tsxsrc/Breadcrumb/index.jsx renamed to src/Breadcrumb/index.tsx

@@ -1,8 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-function CardCarouselSubtitle({ children, as, className }) {
+interface CardCarouselSubtitleProps {
+  /** Specifies contents of the component. */
+  children: React.ReactNode;
+  /** Specifies the base element */
+  as?: React.ElementType;
+  /** A class name to append to the base element. */
+  className?: string;
+}
+
+function CardCarouselSubtitle({ children, as, className }: CardCarouselSubtitleProps) {
   const Component = as || 'p';
   return (
     <Component className={classNames('pgn__card-carousel-subtitle', className)}>
@@ -11,18 +19,4 @@ function CardCarouselSubtitle({ children, as, className }) {
   );
 }
 
-CardCarouselSubtitle.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-  /** Specifies the base element */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  /** A class name to append to the base element. */
-  className: PropTypes.string,
-};
-
-CardCarouselSubtitle.defaultProps = {
-  as: undefined,
-  className: undefined,
-};
-
 export default CardCarouselSubtitle;

…rd/CardCarousel/CardCarouselSubtitle.jsx …rd/CardCarousel/CardCarouselSubtitle.tsxsrc/Card/CardCarousel/CardCarouselSubtitle.jsx renamed to src/Card/CardCarousel/CardCarouselSubtitle.tsx src/Card/CardCarousel/CardCarouselSubtitle.jsx renamed to src/Card/CardCarousel/CardCarouselSubtitle.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface CardCarouselTitleProps {
+  children: React.ReactNode;
+  as?: React.ElementType;
+  className?: string;
+}
+
+function CardCarouselTitle({ children, as, className }: CardCarouselTitleProps) {
+  const Component = as || 'h2';
+  return (
+    <Component className={classNames('pgn__card-carousel-title', className)}>
+      {children}
+    </Component>
+  );
+}
+
+export default CardCarouselTitle;

src/Card/CardCarousel/CardCarouselTitle.jsx

@@ -6,6 +6,8 @@ export { default as Alert, ALERT_CLOSE_LABEL_TEXT } from './Alert';
 export { default as Annotation } from './Annotation';
 export { default as Avatar } from './Avatar';
 export { default as AvatarButton } from './AvatarButton';
+export { default as Badge } from './Badge';
+export { default as Breadcrumb } from './Breadcrumb';
 export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
@@ -57,10 +59,6 @@ export { default as breakpoints } from './utils/breakpoints';
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as asInput } from './asInput';
-// @ts-ignore: has yet to be converted to TypeScript
-export { default as Badge } from './Badge';
-// @ts-ignore: has yet to be converted to TypeScript
-export { default as Breadcrumb } from './Breadcrumb';
 
 export {
   default as Card,