chore: add typescript types for BaseCard

openedx · Dec 9, 2024 · 9965409 · 9965409
1 parent f3beb20
commit 9965409
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/src/Card/BaseCard.jsx → src/Card/BaseCard.tsx b/src/Card/BaseCard.jsx → src/Card/BaseCard.tsx
@@ -2,21 +2,53 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import type { ComponentWithAsProp, BsPropsWithAs } from '../utils/types/bootstrap';
+
+// @ts-ignore
 import CardBody from './CardBody';
 
 const BASE_CARD_CLASSNAME = 'card';
 
-const BaseCard = React.forwardRef(
+const colorVariants = [
+  'primary',
+  'secondary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'dark',
+  'light',
+] as const;
+
+const textVariants = [
+  'white',
+  'muted',
+] as const;
+
+type ColorVariant = typeof colorVariants[number];
+type TextVariant = typeof textVariants[number];
+interface Props extends BsPropsWithAs {
+  prefix?: string;
+  bgColor?: ColorVariant;
+  textColor?: ColorVariant | TextVariant;
+  borderColor?: ColorVariant;
+  hasBody?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+type BaseCardType = ComponentWithAsProp<'div', Props>;
+
+const BaseCard : BaseCardType = React.forwardRef<HTMLDivElement, Props>(
   (
     {
       prefix,
       className,
       bgColor,
       textColor,
       borderColor,
-      hasBody,
+      hasBody = false,
       children,
-      as: Component,
+      as: Component = 'div',
       ...props
     },
     ref,
@@ -37,24 +69,14 @@ const BaseCard = React.forwardRef(
   },
 );
 
-const colorVariants = [
-  'primary',
-  'secondary',
-  'success',
-  'danger',
-  'warning',
-  'info',
-  'dark',
-  'light',
-];
-
+/* eslint-disable react/require-default-props */
 BaseCard.propTypes = {
   /** Prefix for component CSS classes. */
   prefix: PropTypes.string,
   /** Background color of the card. */
   bgColor: PropTypes.oneOf(colorVariants),
   /** Text color of the card. */
-  textColor: PropTypes.oneOf([...colorVariants, 'white', 'muted']),
+  textColor: PropTypes.oneOf([...colorVariants, ...textVariants]),
   /** Border color of the card. */
   borderColor: PropTypes.oneOf(colorVariants),
   /** Determines whether the card should render its children inside a `CardBody` wrapper. */
@@ -67,15 +89,4 @@ BaseCard.propTypes = {
   children: PropTypes.node,
 };
 
-BaseCard.defaultProps = {
-  prefix: undefined,
-  hasBody: false,
-  as: 'div',
-  borderColor: undefined,
-  className: undefined,
-  children: undefined,
-  bgColor: undefined,
-  textColor: undefined,
-};
-
 export default BaseCard;
diff --git a/src/Card/tests/BaseCard.test.jsx b/src/Card/tests/BaseCard.test.jsx
@@ -48,7 +48,7 @@ describe('BaseCard Component', () => {
     );
     const contentElement = screen.getByText('Direct Content');
     expect(contentElement).toBeInTheDocument();
-    expect(contentElement.closest('div')).not.toHaveClass('card-body');
+    expect(contentElement.closest('div')).not.toHaveClass('pgn__card-body');
   });
 
   it('supports a custom tag with the `as` prop', () => {