dhre-component-lib 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-component-lib",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "private": false,
   "scripts": {
     "test": "jest",
@@ -49,7 +49,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
-  "main": "dist/cjs/index.js",
+  "main": "dist/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ]
 }

package/jest.config.ts

@@ -1,10 +0,0 @@
-require('ts-node').register();
-module.exports = {
-    preset: 'ts-jest',
-    testEnvironment: 'jsdom',
-    setupFilesAfterEnv: ['./setupTests.ts'],
-    moduleNameMapper: {
-      '\\.(css|less|sass|scss)$': '<rootDir>/src/__mocks__/styleMock.js', // Mock CSS files
-    },
-    };
-  

package/rollup.config.mjs

@@ -1,37 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
-import PeerDepsExternalPlugin from 'rollup-plugin-peer-deps-external';
-
-import packageJson from "./package.json" assert { type: "json" };
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      PeerDepsExternalPlugin(),  
-    ],
-    //external: ['react', 'react-dom', '@mui/material', '@emotion/react', '@emotion/styled'],
-  },
-  {
-    input: "dist/esm/types/index.d.ts",
-    output: [{ file: "dist/index.d.ts", format: "esm" }],
-    plugins: [dts()],
-  },
-];

package/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/src/__mocks__/styleMock.js

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-.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,59 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

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

@@ -1,90 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,20 +0,0 @@
-.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

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

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

@@ -1,66 +0,0 @@
-/* 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

@@ -1,49 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

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

@@ -1,93 +0,0 @@
-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);
-  });
-});