From ac63c17cc67d69a056cfe87486ed9cda56a53091 Mon Sep 17 00:00:00 2001
From: Peter Kulko <peter.kulko@raccoongang.com>
Date: Wed, 4 Dec 2024 16:58:56 +0200
Subject: [PATCH] feat: replaced bootstrap BaseCard component

---
 src/Card/BaseCard.jsx | 81 +++++++++++++++++++++++++++++++++++++++++++
 src/Card/index.jsx    |  2 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/Card/BaseCard.jsx

diff --git a/src/Card/BaseCard.jsx b/src/Card/BaseCard.jsx
new file mode 100644
index 0000000000..e5d42e51b1
--- /dev/null
+++ b/src/Card/BaseCard.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import CardBody from './CardBody';
+
+const BASE_CARD_CLASSNAME = 'card';
+
+const BaseCard = React.forwardRef(
+  (
+    {
+      prefix,
+      className,
+      bgColor,
+      textColor,
+      borderColor,
+      hasBody = false,
+      children,
+      as: Component = 'div',
+      ...props
+    },
+    ref,
+  ) => {
+    const classes = classNames(
+      className,
+      prefix ? `${prefix}-${BASE_CARD_CLASSNAME}` : BASE_CARD_CLASSNAME,
+      bgColor && `bg-${bgColor}`,
+      textColor && `text-${textColor}`,
+      borderColor && `border-${borderColor}`,
+    );
+
+    return (
+      <Component ref={ref} {...props} className={classes}>
+        {hasBody ? <CardBody>{children}</CardBody> : children}
+      </Component>
+    );
+  },
+);
+
+const colorVariants = [
+  'primary',
+  'secondary',
+  'success',
+  'danger',
+  'warning',
+  'info',
+  'dark',
+  'light',
+];
+
+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']),
+  /** Border color of the card. */
+  borderColor: PropTypes.oneOf(colorVariants),
+  /** Determines whether the card should render its children inside a `CardBody` wrapper. */
+  hasBody: PropTypes.bool,
+  /** Set a custom element for this component. */
+  as: PropTypes.elementType,
+  /** Additional CSS class names to apply to the card element. */
+  className: PropTypes.string,
+  /** The content to render inside the card. */
+  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/index.jsx b/src/Card/index.jsx
index 8dd3bc0f5c..07dc4cf06a 100644
--- a/src/Card/index.jsx
+++ b/src/Card/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import BaseCard from 'react-bootstrap/Card';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import BaseCard from './BaseCard';
 import CardContext, { CardContextProvider } from './CardContext';
 import CardHeader from './CardHeader';
 import CardDivider from './CardDivider';