dhre-component-lib 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-component-lib",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "scripts": {
     "test": "jest",
@@ -38,6 +38,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
+    "sass": "^1.77.8",
     "tslib": "^2.6.3"
   },
   "peerDependencies": {

package/src/components/Avatar/Avatar.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Avatar, { AvatarProps } from './Avatar';
 
@@ -44,9 +44,10 @@ describe('Avatar Component', () => {
     expect(() => fireEvent.click(imgElement)).not.toThrow();
   });
 
-  it('matches snapshot for default rendering', () => {
-    const { container } = render(<Avatar {...defaultProps} />);
+  it('renders correctly without crashing', () => {
+    render(<Avatar {...defaultProps} />);
     
-    expect(container.firstChild).toMatchSnapshot();
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    expect(imgElement).toBeInTheDocument();
   });
 });

package/src/components/Avatar/Avatar.tsx

@@ -14,12 +14,14 @@ const Avatar: React.FC<AvatarProps> = ({
   handleClick,
 }) => {
   return (
-    <img 
-      src={src} 
-      alt={alt} 
-      onClick={handleClick} 
-      className={imgClassName} 
-    />
+    <button onClick={handleClick}>
+    <img
+          src={src}
+          alt={alt}
+          
+          className={imgClassName}
+        />
+    </button>
   );
 };
 

package/src/components/Badge/Badge.module.scss

@@ -0,0 +1,14 @@
+.badge {
+  display: inline-block;
+  padding: 6px 12px;
+  background-color: red;
+  color: white;
+  border-radius: 12px;
+  font-size: 14px;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background-color: darkred;
+  }
+}

package/src/components/Badge/Badge.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Badge, { BadgeProps } from './Badge';
 
@@ -55,9 +55,13 @@ describe('Badge Component', () => {
     expect(badgeElement).toHaveTextContent('99');
   });
 
-  it('matches snapshot for default rendering', () => {
-    const { container } = render(<Badge {...defaultProps} />);
+  it('renders correctly with different content', () => {
+    const newContent = 'Updated Badge';
+    render(<Badge {...defaultProps} content={newContent} />);
     
-    expect(container.firstChild).toMatchSnapshot();
+    const badgeElement = screen.getByText(newContent);
+    
+    expect(badgeElement).toBeInTheDocument();
+    expect(badgeElement).toHaveTextContent(newContent);
   });
 });

package/src/components/Badge/Badge.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import './Badge.css';
+import styles from './Badge.module.scss';
 
 export interface BadgeProps {
   content: string | number; 
-  badgeClassName: string;   
+  badgeClassName?: string;   
   handleClick?: () => void; 
 }
 
@@ -13,12 +13,12 @@ const Badge: React.FC<BadgeProps> = ({
   handleClick,
 }) => {
   return (
-    <span 
+    <button 
       onClick={handleClick} 
-      className={badgeClassName}
+      className={`${styles.badge} ${badgeClassName}`}
     >
       {content}
-    </span>
+    </button>
   );
 };
 

package/src/components/BreadCrumb/BreadCrumb.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import './Breadcrumb.css';
+import styles from './Breadcrumb.module.scss';
 
 export interface BreadcrumbItem {
   label: string;           
@@ -11,7 +11,7 @@ export interface BreadcrumbProps {
   breadcrumbClassName: string; 
   itemClassName?: string;      
   separator?: string;   
-  separatorClassName?: string,       
+  separatorClassName?: string;       
 }
 
 const Breadcrumb: React.FC<BreadcrumbProps> = ({
@@ -22,12 +22,21 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({
   separatorClassName,
 }) => {
   return (
-    <nav className={breadcrumbClassName}>
+    <nav className={`${styles.breadcrumb} ${breadcrumbClassName}`}>
       {items.map((item, index) => (
-        <span key={index} className={itemClassName} onClick={item.handleClick}>
-          {item.label}
-          {index < items.length - 1 && <span className={separatorClassName}>{separator}</span>}
-        </span>
+        <React.Fragment key={index}>
+          <button 
+            className={`${styles.breadcrumbItem} ${itemClassName}`} 
+            onClick={item.handleClick}
+          >
+            {item.label}
+          </button>
+          {index < items.length - 1 && (
+            <span className={`${styles.separator} ${separatorClassName}`}>
+              {separator}
+            </span>
+          )}
+        </React.Fragment>
       ))}
     </nav>
   );

package/src/components/BreadCrumb/Breadcrumb.module.scss

@@ -0,0 +1,20 @@
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+
+.breadcrumbItem {
+  color: blue;
+  cursor: pointer;
+  margin-right: 8px;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.separator {
+  margin: 0 8px;
+  color: grey;
+}

package/src/components/Button/Button.module.scss

@@ -0,0 +1,66 @@
+/* Base button styling */
+.button {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &.text {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  &.outlined {
+    background-color: transparent;
+    border: 2px solid currentColor;
+  }
+
+  &.contained {
+    background-color: currentColor;
+    color: #fff;
+
+    &.primary:hover {
+      background-color: #1565c0;
+    }
+    
+    &.secondary:hover {
+      background-color: #7b1fa2;
+    }
+    
+    &.success:hover {
+      background-color: #388e3c;
+    }
+    
+    &.error:hover {
+      background-color: #d32f2f;
+    }
+    
+    &.warning:hover {
+      background-color: #f57c00;
+    }
+    
+    &.info:hover {
+      background-color: #1976d2;
+    }
+  }
+
+  &.primary {
+    color: #1976d2;
+  }
+
+  &.secondary {
+    color: #9c27b0;
+  }
+
+  &.success {
+    color: #4caf50;
+  }
+
+  &.error {
+    color: #f44336;
+  }
+
+  &.warning {
+    color:

package/src/components/Button/Button.test.tsx

@@ -48,15 +48,19 @@ describe('Button Component', () => {
     expect(handleClick).toHaveBeenCalledTimes(1); // Ensure the mock function is called once
   });
 
-  it('renders correctly without crashing', () => {
-    const { container } = renderButton();
-    
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
   it('does not call handleClick when the button is not clicked', () => {
     renderButton();
     
     expect(handleClick).not.toHaveBeenCalled();
   });
+
+  it('renders correctly with a different label', () => {
+    const newLabel = 'Submit';
+    renderButton({ label: newLabel });
+    
+    const buttonElement = screen.getByText(newLabel);
+    
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
 });

package/src/components/Button/Button.tsx

@@ -1,19 +1,26 @@
 import React from "react";
-import './Button.css';
+import styles from './Button.module.scss';
 
 export interface ButtonProps {  
   label: string;
-  labelClassName: string;  
+  variant: 'text' | 'outlined' | 'contained';  
+  color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  size: 'small' | 'medium' | 'large';
   handleClick: () => void;
 }
 
 const Button: React.FC<ButtonProps> = ({  
   label,
-  labelClassName,
+  variant,
+  color,
+  size,
   handleClick,  
 }) => {
   return (
-    <button onClick={handleClick} className={labelClassName}>
+    <button 
+      onClick={handleClick} 
+      className={`${styles.button} ${styles[variant]} ${styles[color]} ${styles[size]}`}
+    >
       {label}
     </button>
   );

package/src/components/Checkbox/Checkbox.test.tsx

@@ -81,9 +81,13 @@ describe('CustomCheckbox Component', () => {
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 
-  it('renders correctly without crashing', () => {
-    const { container } = render(<CustomCheckbox {...getDefaultProps()} />);
+  it('renders correctly with different label', () => {
+    const newLabel = 'Agree to Privacy Policy';
+    render(<CustomCheckbox {...getDefaultProps()} label={newLabel} />);
     
-    expect(container.firstChild).toMatchSnapshot();
+    const labelElement = screen.getByText(newLabel);
+    
+    expect(labelElement).toBeInTheDocument();
+    expect(labelElement).toHaveTextContent(newLabel);
   });
 });

package/src/components/CircularProgress/CircularProgress.module.scss

@@ -0,0 +1,19 @@
+.spinner {
+  border-style: solid;
+  border-radius: 50%;
+  border-color: transparent;
+  border-top-color: currentColor;
+  animation: spin 1s linear infinite;
+}
+
+.spinner.primary { color: #007bff; }
+.spinner.secondary { color: #6c757d; }
+.spinner.error { color: #dc3545; }
+.spinner.success { color: #28a745; }
+.spinner.info { color: #17a2b8; }
+.spinner.warning { color: #ffc107; }
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/src/components/CircularProgress/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './CircularProgress.css';
+import styles from './CircularProgress.module.scss';
 
 export interface CircularProgressProps {
   value?: number;
@@ -23,7 +23,7 @@ const CircularProgress: React.FC<CircularProgressProps> = ({
 
   return (
     <div
-      className={`spinner ${color}`}
+      className={`${styles.spinner} ${styles[color]}`}
       style={{
         width: typeof size === 'number' ? `${size}px` : size,
         height: typeof size === 'number' ? `${size}px` : size,

package/src/components/Modal/{Modal.css → Modal.module.scss}

@@ -23,4 +23,4 @@
 
 .modalContent::-webkit-scrollbar {
   display: none;
-}
+}

package/src/components/Modal/Modal.test.tsx

@@ -6,7 +6,11 @@ describe('Modal Component', () => {
   const onCloseMock = jest.fn();
   const modalContentText = 'This is the modal content';
 
-  const renderModal = (isOpen: boolean, modalOverlayClassname?: string, modalContentClassname?: string) => {
+  const renderModal = (
+    isOpen: boolean,
+    modalOverlayClassname?: string,
+    modalContentClassname?: string
+  ) => {
     render(
       <Modal
         isOpen={isOpen}
@@ -35,7 +39,7 @@ describe('Modal Component', () => {
 
   it('calls onClose when clicking on the overlay', () => {
     renderModal(true);
-    const overlay = screen.getByText(modalContentText).closest('div.modalOverlay');
+    const overlay = screen.getByText(modalContentText).closest('button');
     fireEvent.click(overlay!);
     expect(onCloseMock).toHaveBeenCalled();
   });
@@ -50,15 +54,15 @@ describe('Modal Component', () => {
   it('applies the provided modalOverlayClassname', () => {
     const overlayClass = 'customOverlayClass';
     renderModal(true, overlayClass);
-    const overlay = screen.getByText(modalContentText).closest('div.modalOverlay');
+    const overlay = screen.getByText(modalContentText).closest('button');
     expect(overlay).toHaveClass(overlayClass);
   });
 
   it('applies the provided modalContentClassname', () => {
     const contentClass = 'customContentClass';
     renderModal(true, undefined, contentClass);
-    const modalContent = screen.getByText(modalContentText).closest('div.modalContent');
-    expect(modalContent).toHaveClass(contentClass);
+    const modalContent = screen.getByText(modalContentText);
+    expect(modalContent.parentElement).toHaveClass(contentClass);
   });
 
   it('does not render modal when isOpen is false, even if modalOverlayClassname and modalContentClassname are provided', () => {

package/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Modal.css";
+import styles from './Modal.module.scss';
 
 interface ModalProps {
   isOpen: boolean;
@@ -9,19 +9,30 @@ interface ModalProps {
   modalContentClassname?: string;
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, modalOverlayClassname, modalContentClassname }) => {
+const Modal: React.FC<ModalProps> = ({ 
+  isOpen, 
+  onClose, 
+  children, 
+  modalOverlayClassname = '', 
+  modalContentClassname = '' 
+}) => {
   if (!isOpen) return null;
 
-  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  const handleOverlayClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (event.target === event.currentTarget) {
       onClose();
     }
   };
 
   return (
-    <div className={`modalOverlay ${modalOverlayClassname}`} onClick={handleOverlayClick}>
-      <div className={`modalContent ${modalContentClassname}`}>{children}</div>
-    </div>
+    <button 
+      className={`${styles.modalOverlay} ${modalOverlayClassname}`} 
+      onClick={handleOverlayClick}
+    >
+      <div className={`${styles.modalContent} ${modalContentClassname}`}>
+        {children}
+      </div>
+    </button>
   );
 };
 

package/src/components/Notification/Notification.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import './Notification.css';
+import './Notification.module.scss';
 export interface NotificationProps {
   message: string;
   severity?: 'error' | 'warning' | 'info' | 'success';

package/src/components/OtpInput/OtpInput.module.scss

@@ -0,0 +1,49 @@
+@import '../../theme/colors/colors.scss';
+
+.otpMainContainer {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin: 10px;
+    width: 343px;
+  }
+  
+  .otpInputDiv { 
+    flex-direction: row;
+    gap: 12px;
+    display: flex 
+  }
+  
+  .otpInput {
+      width: 76px;
+      height: 48px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 400;
+      border-radius: 8px;
+  }
+  
+  .resendContainer {
+      display: flex;
+      flex-direction: row;
+      margin-top: 10px;
+      justify-content: space-between;
+  }
+  
+  .errorText {
+    color: $border-brand-danger;
+    font-weight: 400;
+    font-size: 14px;
+  }
+  
+  .timerText {
+    color: $content-disabled;
+    font-weight: 400;
+    font-size: 14px;
+  }
+  .resendText {
+    color: $content-disabled;
+    font-weight: 700;
+    font-size: 14px;
+  }
+  

package/src/components/OtpInput/OtpInput.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import OTPInput from './OtpInput';
+import '@testing-library/jest-dom'; 
+
+describe('OTPInput Component', () => {
+  it('renders the correct number of input fields based on the length prop', () => {
+    render(
+      <OTPInput
+        length={4}
+        onChange={() => {}}
+        onResend={() => {}}
+        resendText="Resend OTP"
+      />
+    );
+    const inputs = screen.getAllByRole('textbox');
+    expect(inputs).toHaveLength(4);
+  });
+  it('calls onChange prop when input changes', () => {
+    const handleChange = jest.fn();
+    render(<OTPInput length={4} onChange={handleChange} onResend={() => {}} resendText="Resend OTP" />);
+    const inputs = screen.getAllByRole('textbox');
+    fireEvent.change(inputs[0], { target: { value: '1' } });
+    expect(handleChange).toHaveBeenCalledWith('1');
+  });
+
+  it('calls onResend prop when the resend button is clicked', async () => {
+    const handleResend = jest.fn();
+    render(<OTPInput length={4} onChange={() => {}} onResend={handleResend} resendText="Resend OTP" resendDelay={0} />);
+    const resendButton = screen.getByRole('button', { name: /resend otp/i });
+    fireEvent.click(resendButton);
+    expect(handleResend).toHaveBeenCalled();
+  });
+  it('displays error text when the error prop is true', () => {
+    const errorMessage = 'Invalid OTP';
+    render(<OTPInput length={4} onChange={() => {}} onResend={() => {}} resendText="Resend OTP" error={true} errorText={errorMessage} />);
+    const errorElement = screen.getByText(errorMessage);
+    expect(errorElement).toBeInTheDocument();
+  });
+  it('changes border color to red when the error prop is true', () => {
+    render(
+      <OTPInput
+        length={4}
+        onChange={() => {}}
+        onResend={() => {}}
+        resendText="Resend OTP"
+        error={true}
+      />
+    );
+    const firstInput = screen.getByTestId('otp-input-0');
+    expect(firstInput).toHaveStyle('border: 1px solid #EB0542');
+  });
+});