dhre-component-lib 0.0.9 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-component-lib",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "private": false,
   "scripts": {
     "test": "jest",
@@ -53,6 +53,7 @@
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ]
 }

package/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Avatar, { AvatarProps } from './Avatar';
+
+describe('Avatar Component', () => {
+  const defaultProps: AvatarProps = {
+    src: 'test-image.jpg',
+    alt: 'Test Avatar',
+    imgClassName: 'avatar-class',
+  };
+
+  it('renders the image with the provided src and alt attributes', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    
+    expect(imgElement).toHaveAttribute('src', defaultProps.src);
+    expect(imgElement).toHaveAttribute('alt', defaultProps.alt);
+  });
+
+  it('applies the correct className to the image', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    
+    expect(imgElement).toHaveClass(defaultProps.imgClassName);
+  });
+
+  it('handles the onClick event correctly', () => {
+    const handleClick = jest.fn();
+    render(<Avatar {...defaultProps} handleClick={handleClick} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    fireEvent.click(imgElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not crash without handleClick prop', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    expect(() => fireEvent.click(imgElement)).not.toThrow();
+  });
+
+  it('renders correctly without crashing', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    expect(imgElement).toBeInTheDocument();
+  });
+});

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface AvatarProps {
+  src: string;
+  alt: string;
+  imgClassName: string;
+  handleClick?: () => void;
+}
+
+const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  imgClassName,
+  handleClick,
+}) => {
+  return (
+    <button onClick={handleClick}>
+    <img
+          src={src}
+          alt={alt}
+          
+          className={imgClassName}
+        />
+    </button>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { default } from "./Avatar";

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Badge, { BadgeProps } from './Badge';
+
+describe('Badge Component', () => {
+  const defaultProps: BadgeProps = {
+    content: 'Test Badge',
+    badgeClassName: 'badge-class',
+  };
+
+  it('renders the badge with the provided content', () => {
+    render(<Badge {...defaultProps} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    
+    expect(badgeElement).toBeInTheDocument();
+  });
+
+  it('handles the onClick event correctly', () => {
+    const handleClick = jest.fn();
+    render(<Badge {...defaultProps} handleClick={handleClick} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    fireEvent.click(badgeElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not crash without handleClick prop', () => {
+    render(<Badge {...defaultProps} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    expect(() => fireEvent.click(badgeElement)).not.toThrow();
+  });
+
+  it('renders correctly with numeric content', () => {
+    const numericProps: BadgeProps = {
+      ...defaultProps,
+      content: 99,
+    };
+    render(<Badge {...numericProps} />);
+    
+    const badgeElement = screen.getByText(numericProps.content.toString());
+    
+    expect(badgeElement).toBeInTheDocument();
+    expect(badgeElement).toHaveTextContent('99');
+  });
+
+  it('renders correctly with different content', () => {
+    const newContent = 'Updated Badge';
+    render(<Badge {...defaultProps} content={newContent} />);
+    
+    const badgeElement = screen.getByText(newContent);
+    
+    expect(badgeElement).toBeInTheDocument();
+    expect(badgeElement).toHaveTextContent(newContent);
+  });
+});

package/src/components/Badge/Badge.tsx

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

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { default } from "./Badge";

package/src/components/BreadCrumb/BreadCrumb.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Breadcrumb from './BreadCrumb';
+
+describe('Breadcrumb', () => {
+  it('should render with given props', () => {
+    const items = [
+      { label: 'Home', handleClick: () => {} },
+      { label: 'Library' },
+      { label: 'Data' },
+    ];
+
+    render(
+      <Breadcrumb
+        items={items}
+        breadcrumbClassName="breadcrumb-class"
+        itemClassName="item-class"
+        separator=">"
+        separatorClassName="separator-class"
+      />
+    );
+
+    // Check if breadcrumb container is rendered
+    const breadcrumb = screen.getByRole('navigation');
+    expect(breadcrumb).toBeInTheDocument();
+    expect(breadcrumb).toHaveClass('breadcrumb-class');
+
+    // Check if breadcrumb items are rendered
+    items.forEach((item) => {
+      const itemElement = screen.getByText(item.label);
+      expect(itemElement).toBeInTheDocument();
+      expect(itemElement).toHaveClass('item-class');
+    });
+
+    // Check if separators are rendered
+    const separators = screen.getAllByText('>');
+    expect(separators.length).toBe(items.length - 1);
+    separators.forEach(separator => expect(separator).toHaveClass('separator-class'));
+  });
+
+  it('should call handleClick when a breadcrumb item is clicked', () => {
+    const handleClick = jest.fn();
+    const items = [
+      { label: 'Home', handleClick },
+      { label: 'Library' },
+    ];
+
+    render(
+      <Breadcrumb
+        items={items}
+        breadcrumbClassName="breadcrumb-class"
+        itemClassName="item-class"
+        separator=">"
+        separatorClassName="separator-class"
+      />
+    );
+
+    const homeItem = screen.getByText('Home');
+    fireEvent.click(homeItem);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('should render without separators if none are provided', () => {
+    const items = [
+      { label: 'Home' },
+      { label: 'Library' },
+    ];
+
+    render(
+      <Breadcrumb
+        items={items}
+        breadcrumbClassName="breadcrumb-class"
+        itemClassName="item-class"
+        separator=""  // Pass an empty string for separator
+      />
+    );
+
+    // Check if breadcrumb items are rendered
+    items.forEach((item) => {
+      const itemElement = screen.getByText(item.label);
+      expect(itemElement).toBeInTheDocument();
+    });
+
+    // Check that no separators are present by querying with the separator class name
+    const separators = screen.queryAllByRole('presentation');
+    expect(separators.length).toBe(0);
+  });
+});

package/src/components/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styles from './Breadcrumb.module.scss';
+
+export interface BreadcrumbItem {
+  label: string;           
+  handleClick?: () => void; 
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];  
+  breadcrumbClassName: string; 
+  itemClassName?: string;      
+  separator?: string;   
+  separatorClassName?: string;       
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  breadcrumbClassName,
+  itemClassName,
+  separator = "/",
+  separatorClassName,
+}) => {
+  return (
+    <nav className={`${styles.breadcrumb} ${breadcrumbClassName}`}>
+      {items.map((item, index) => (
+        <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>
+  );
+};
+
+export default Breadcrumb;

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/BreadCrumb/index.ts

@@ -0,0 +1 @@
+export { default } from "./BreadCrumb";

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Button, { ButtonProps } from './Button';
+
+describe('Button Component', () => {
+  let handleClick: jest.Mock;
+
+  beforeEach(() => {
+    handleClick = jest.fn(); // Initialize the mock function before each test
+  });
+
+  const renderButton = (props: Partial<ButtonProps> = {}) => {
+    const defaultProps: ButtonProps = {
+      label: 'Click Me',
+      variant: 'contained',
+      color: 'primary',
+      size: 'small',
+      handleClick: handleClick
+    };
+
+    return render(<Button {...defaultProps} />);
+  };
+
+  it('renders the button with the correct label', () => {
+    renderButton();
+    
+    const buttonElement = screen.getByText('Click Me');
+    
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+
+  it('calls the handleClick function when the button is clicked', () => {
+    renderButton();
+    
+    const buttonElement = screen.getByText('Click Me');
+    
+    fireEvent.click(buttonElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1); // Ensure the mock function is called once
+  });
+
+  it('does not call handleClick when the button is not clicked', () => {
+    renderButton();
+    
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+});

package/src/components/Button/Button.tsx

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

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CustomCheckbox from './Checkbox';
+
+interface CustomCheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+}
+
+describe('CustomCheckbox Component', () => {
+  let handleChange: jest.Mock;
+
+  // Function to generate default props for each test
+  const getDefaultProps = (): CustomCheckboxProps => ({
+    label: 'Accept Terms',
+    checked: false,
+    onChange: handleChange,
+    className: 'custom-container',
+    checkboxClassName: 'custom-checkbox',
+    labelClassName: 'custom-label',
+  });
+
+  beforeEach(() => {
+    handleChange = jest.fn();  // Reset the mock function before each test
+  });
+
+  it('renders the checkbox with a label', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    const labelElement = screen.getByText('Accept Terms');
+    
+    expect(checkboxElement).toBeInTheDocument();
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it('applies the correct className to the checkbox container', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const container = screen.getByRole('checkbox').parentElement;
+    
+    expect(container).toHaveClass('custom-container');
+  });
+
+  it('applies the correct className to the checkbox', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    
+    expect(checkboxElement).toHaveClass('custom-checkbox');
+  });
+
+  it('applies the correct className to the label', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const labelElement = screen.getByText('Accept Terms');
+    
+    expect(labelElement).toHaveClass('custom-label');
+  });
+
+  it('checks the checkbox based on the checked prop', () => {
+    render(<CustomCheckbox {...getDefaultProps()} checked={true} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    
+    expect(checkboxElement).toBeChecked();
+  });
+
+  it('calls the onChange function when the checkbox state changes', () => {
+    render(<CustomCheckbox {...getDefaultProps()} checked={false} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    
+    fireEvent.click(checkboxElement);  // Toggle the checkbox
+    
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders correctly with different label', () => {
+    const newLabel = 'Agree to Privacy Policy';
+    render(<CustomCheckbox {...getDefaultProps()} label={newLabel} />);
+    
+    const labelElement = screen.getByText(newLabel);
+    
+    expect(labelElement).toBeInTheDocument();
+    expect(labelElement).toHaveTextContent(newLabel);
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface CustomCheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+}
+
+const CustomCheckbox: React.FC<CustomCheckboxProps> = ({
+  label,
+  checked = false,
+  onChange,
+  className = '',
+  checkboxClassName = '',
+  labelClassName = '',
+  ...rest 
+}) => {
+  return (
+    <div className={className}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        className={checkboxClassName}
+        {...rest} 
+      />
+      {label && <label className={labelClassName}>{label}</label>}
+    </div>
+  );
+};
+
+export default CustomCheckbox;

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default } from "./Checkbox";

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); }
+}