Merge branch 'release-23.x' into removing-react-imports-5

Author: jacobo-dominguez-wgu

.github/workflows/ci.yml

@@ -8,6 +8,10 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [20, 24]
+    continue-on-error: ${{ matrix.node == 24 }}
     steps:
     - name: Checkout
       uses: actions/checkout@v4
@@ -16,7 +20,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Check Types

package-lock.json

@@ -1,13 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
+  /** Specifies the base element */
+  as?: React.ElementType;
+  /** Specifies the contents of the row */
+  children: React.ReactNode;
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /** Specifies whether row should be displayed horizontally */
+  isStacked?: boolean;
+}
+
 function ActionRow({
-  as,
-  isStacked,
+  as = 'div',
+  isStacked = false,
   children,
   ...props
-}) {
+}: ActionRowProps) {
   return React.createElement(
     as,
     {
@@ -21,24 +31,6 @@ function ActionRow({
   );
 }
 
-ActionRow.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /** Specifies the contents of the row */
-  children: PropTypes.node,
-  /** Specifies whether row should be displayed horizontally */
-  isStacked: PropTypes.bool,
-};
-
-ActionRow.defaultProps = {
-  as: 'div',
-  className: undefined,
-  children: null,
-  isStacked: false,
-};
-
 function ActionRowSpacer() {
   return <span className="pgn__action-row-spacer" />;
 }

src/ActionRow/index.jsx renamed to src/ActionRow/index.tsx

@@ -1,14 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ForwardedRef } from 'react';
 import classNames from 'classnames';
 
+interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Specifies contents of the component. */
+  children: React.ReactNode;
+  /** Specifies class name to append to the base element. */
+  className?: string;
+  /** Specifies variant to use. */
+  variant?: 'error' | 'success' | 'warning' | 'light' | 'dark';
+  /** Specifies arrow position. */
+  arrowPlacement?: 'top' | 'right' | 'bottom' | 'left';
+}
+
 const Annotation = React.forwardRef(({
   className,
-  variant,
+  variant = 'success',
   children,
-  arrowPlacement,
+  arrowPlacement = 'bottom',
   ...props
-}, ref) => (
+} : AnnotationProps, ref : ForwardedRef<HTMLSpanElement>) => (
   <span
     className={classNames(
       className,
@@ -22,21 +32,4 @@ const Annotation = React.forwardRef(({
   </span>
 ));
 
-Annotation.defaultProps = {
-  className: undefined,
-  variant: 'success',
-  arrowPlacement: 'bottom',
-};
-
-Annotation.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-  /** Specifies class name to append to the base element. */
-  className: PropTypes.string,
-  /** Specifies variant to use. */
-  variant: PropTypes.oneOf(['error', 'success', 'warning', 'light', 'dark']),
-  /** Specifies arrow position. */
-  arrowPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-};
-
 export default Annotation;

src/Annotation/index.jsx renamed to src/Annotation/index.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
+// @ts-ignore
 import defaultAvatar from './default-avatar.svg';
 
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /** Alt text. Usually the user's name */
+  alt?: string;
+  /** Size of the avatar */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'huge';
+  /** Image src of the avatar image */
+  src?: string;
+}
+
 function Avatar({
-  alt,
-  size,
+  alt = '',
+  size = 'md',
   src,
   ...attrs
-}) {
+}: AvatarProps) {
   return (
     <img
       {...attrs}
@@ -23,19 +32,4 @@ function Avatar({
   );
 }
 
-Avatar.propTypes = {
-  /** Alt text. Usually the user's name */
-  alt: PropTypes.string,
-  /** Size of the avatar */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'huge']),
-  /** Image src of the avatar image */
-  src: PropTypes.string,
-};
-
-Avatar.defaultProps = {
-  alt: '',
-  size: 'md',
-  src: undefined,
-};
-
 export default Avatar;

src/Avatar/index.jsx renamed to src/Avatar/index.tsx

@@ -1,23 +1,38 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ForwardedRef } from 'react';
 import classNames from 'classnames';
 import Button from '../Button';
-import Avatar from '../Avatar';
+import Avatar, { AvatarProps } from '../Avatar';
 
 const buttonSizesToAvatarSize = {
   sm: 'xs',
   md: 'sm',
   lg: 'md',
 };
 
+interface AvatarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The button text */
+  children?: string;
+  /** A class name to append to the button */
+  className?: string;
+  /** Show the label or only the avatar */
+  showLabel?: boolean;
+  /** The button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Image src of the avatar image */
+  src?: string;
+  /** The button style variant to use */
+  variant?: string;
+}
+
 const AvatarButton = React.forwardRef(({
   children,
   className,
-  showLabel,
-  size,
+  showLabel = true,
+  size = 'md',
   src,
+  variant = 'tertiary',
   ...attrs
-}, ref) => {
+}: AvatarButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
   const avatarSize = buttonSizesToAvatarSize[size] || 'sm';
   return (
     <Button
@@ -31,35 +46,12 @@ const AvatarButton = React.forwardRef(({
       )}
       size={size}
       ref={ref}
+      variant={variant}
     >
-      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize} />
+      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize as AvatarProps['size']} />
       {showLabel && children}
     </Button>
   );
 });
 
-AvatarButton.propTypes = {
-  /** The button text */
-  children: PropTypes.string,
-  /** A class name to append to the button */
-  className: PropTypes.string,
-  /** Show the label or only the avatar */
-  showLabel: PropTypes.bool,
-  /** The button size */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  /** Image src of the avatar image */
-  src: PropTypes.string,
-  /** The button style variant to use */
-  variant: PropTypes.string,
-};
-
-AvatarButton.defaultProps = {
-  children: undefined,
-  className: undefined,
-  showLabel: true,
-  size: 'md',
-  src: undefined,
-  variant: 'tertiary',
-};
-
 export default AvatarButton;

src/AvatarButton/index.jsx renamed to src/AvatarButton/index.tsx

@@ -1,40 +1,59 @@
 import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
-import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
-// @ts-ignore
-import { requiredWhen } from '../utils/propTypes';
-import { STYLE_VARIANTS } from './constants';
 import ChipIcon from './ChipIcon';
+import { STYLE_VARIANTS } from './constants';
 
 export const CHIP_PGN_CLASS = 'pgn__chip';
 
 export interface IChip {
+  /** Specifies the content of the `Chip`. */
   children: React.ReactNode,
+  /** Click handler for the whole `Chip`, has effect only when Chip does not have any interactive icons. */
   onClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Specifies an additional `className` to add to the base element. */
   className?: string,
+  /** The `Chip` style [variant](https://github.com/openedx/paragon/blob/release-23.x/src/Chip/constants.ts) to use. */
   variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
+  /**
+   * An icon component to render before the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconBefore?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconBeforeAlt?: string,
+  /**
+   * An icon component to render before after the content.
+   * Example import of a Paragon icon component:
+   *
+   * `import { Check } from '@openedx/paragon/icons';`
+   */
   iconAfter?: React.ComponentType,
+  /** Specifies icon alt text. */
   iconAfterAlt?: string,
+  /** A click handler for the `Chip` icon before. */
   onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,
+  /** A click handler for the `Chip` icon after. */
   onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,
+  /** Disables the `Chip`. */
   disabled?: boolean,
+  /** Indicates if `Chip` has been selected. */
   isSelected?: boolean,
 }
 
 const Chip = React.forwardRef(({
   children,
   className,
-  variant,
+  variant = 'light',
   iconBefore,
   iconBeforeAlt,
   iconAfter,
   iconAfterAlt,
   onIconBeforeClick,
   onIconAfterClick,
-  disabled,
-  isSelected,
+  disabled = false,
+  isSelected = false,
   onClick,
   ...props
 }: IChip, ref: ForwardedRef<HTMLDivElement>) => {
@@ -92,56 +111,4 @@ const Chip = React.forwardRef(({
   );
 });
 
-Chip.propTypes = {
-  /** Specifies the content of the `Chip`. */
-  // @ts-ignore
-  children: PropTypes.node.isRequired,
-  /** Specifies an additional `className` to add to the base element. */
-  className: PropTypes.string,
-  /** The `Chip` style variant to use. */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** Disables the `Chip`. */
-  disabled: PropTypes.bool,
-  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */
-  onClick: PropTypes.func,
-  /**
-   * An icon component to render before the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
-  /** A click handler for the `Chip` icon before. */
-  onIconBeforeClick: PropTypes.func,
-  /**
-   * An icon component to render before after the content.
-   * Example import of a Paragon icon component:
-   *
-   * `import { Check } from '@openedx/paragon/icons';`
-   */
-  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
-  /** Specifies icon alt text. */
-  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
-  /** A click handler for the `Chip` icon after. */
-  onIconAfterClick: PropTypes.func,
-  /** Indicates if `Chip` has been selected. */
-  isSelected: PropTypes.bool,
-};
-
-Chip.defaultProps = {
-  className: undefined,
-  variant: STYLE_VARIANTS.LIGHT,
-  disabled: false,
-  onClick: undefined,
-  iconBefore: undefined,
-  iconAfter: undefined,
-  onIconBeforeClick: undefined,
-  onIconAfterClick: undefined,
-  isSelected: false,
-  iconAfterAlt: undefined,
-  iconBeforeAlt: undefined,
-};
-
 export default Chip;