dhre-component-lib 0.0.1

package/jest.config.ts

@@ -0,0 +1,10 @@
+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/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "dhre-component-lib",
+  "version": "0.0.1",
+  "private": false,
+  "scripts": {
+    "test": "jest",
+    "rollup": "rollup -c"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "jest": "^29.7.0",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
+    "react-testing-library": "^8.0.1",
+    "rollup": "^4.18.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "ts-jest": "^29.2.4",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.3"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@testing-library/react": "^16.0.0",
+    "tslib": "^2.6.3"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts"
+}

package/rollup.config.mjs

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

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

package/src/__mocks__/styleMock.js

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

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,26 @@
+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 (
+    <img 
+      src={src} 
+      alt={alt} 
+      onClick={handleClick} 
+      className={imgClassName} 
+    />
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.css

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

package/src/components/Badge/Badge.tsx

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

package/src/components/Badge/index.ts

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

package/src/components/BreadCrumb/BreadCrumb.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import './Breadcrumb.css';
+
+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={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>
+      ))}
+    </nav>
+  );
+};
+
+export default Breadcrumb;

package/src/components/BreadCrumb/Breadcrumb.css

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

package/src/components/Button/Button.css

@@ -0,0 +1,92 @@
+/* Base button styling */
+.button {
+    padding: 8px 16px;
+    font-size: 14px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  /* Variants */
+  .button.text {
+    background-color: transparent;
+    color: inherit;
+  }
+  
+  .button.outlined {
+    background-color: transparent;
+    border: 2px solid currentColor;
+  }
+  
+  .button.contained {
+    background-color: currentColor;
+    color: #fff;
+  }
+  
+  /* Colors */
+  .button.primary {
+    color: #1976d2;
+  }
+  
+  .button.secondary {
+    color: #9c27b0;
+  }
+  
+  .button.success {
+    color: #4caf50;
+  }
+  
+  .button.error {
+    color: #f44336;
+  }
+  
+  .button.warning {
+    color: #ff9800;
+  }
+  
+  .button.info {
+    color: #2196f3;
+  }
+  
+  /* Sizes */
+  .button.small {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+  
+  .button.medium {
+    padding: 8px 16px;
+    font-size: 14px;
+  }
+  
+  .button.large {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
+  
+  /* Hover effects for contained buttons */
+  .button.contained.primary:hover {
+    background-color: #1565c0;
+  }
+  
+  .button.contained.secondary:hover {
+    background-color: #7b1fa2;
+  }
+  
+  .button.contained.success:hover {
+    background-color: #388e3c;
+  }
+  
+  .button.contained.error:hover {
+    background-color: #d32f2f;
+  }
+  
+  .button.contained.warning:hover {
+    background-color: #f57c00;
+  }
+  
+  .button.contained.info:hover {
+    background-color: #1976d2;
+  }
+  

package/src/components/Button/Button.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import './Button.css';
+
+export interface ButtonProps {  
+  label: string;
+  labelClassName: string;  
+  handleClick: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({  
+  label,
+  labelClassName,
+  handleClick,  
+}) => {
+  return (
+    <button onClick={handleClick} className={labelClassName}>
+      {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,61 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import Checkbox from "./Checkbox";
+
+describe("Checkbox Component", () => {
+  it("should render without crashing", () => {
+    const { getByTestId } = render(
+      <Checkbox data-testid="checkbox-rendered" />
+    );
+    expect(getByTestId("checkbox-rendered")).toBeInTheDocument();
+  });
+
+  it("should render with default props", () => {
+    const { getByRole } = render(<Checkbox />);
+    const checkboxElement = getByRole("checkbox");
+
+    expect(checkboxElement).not.toBeChecked();
+
+    expect(checkboxElement).toHaveAttribute("type", "checkbox");
+    expect(checkboxElement).not.toBeDisabled();
+  });
+
+  it("should render with the checked prop", () => {
+    const { getByRole } = render(<Checkbox checked={true} />);
+    const checkboxElement = getByRole("checkbox");
+
+    expect(checkboxElement).toBeChecked();
+  });
+
+  it("should handle the onChange event", () => {
+    const handleChange = jest.fn();
+    const { getByRole } = render(<Checkbox onChange={handleChange} />);
+    const checkboxElement = getByRole("checkbox");
+
+    fireEvent.click(checkboxElement);
+
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(handleChange).toHaveBeenCalledWith(expect.any(Object), true);
+  });
+
+  it("should render with the specified color", () => {
+    const { getByRole } = render(<Checkbox color="secondary" />);
+    const checkboxElement = getByRole("checkbox");
+
+    expect(checkboxElement).toBeInTheDocument();
+  });
+
+  it("should render with the specified size", () => {
+    const { getByRole } = render(<Checkbox size="small" />);
+    const checkboxElement = getByRole("checkbox");
+
+    expect(checkboxElement).toBeInTheDocument();
+  });
+
+  it("should render as disabled when the disabled prop is true", () => {
+    const { getByRole } = render(<Checkbox disabled />);
+    const checkboxElement = getByRole("checkbox");
+
+    expect(checkboxElement).toBeDisabled();
+  });
+});

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/Circular_Progress/CircularProgress.css

@@ -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/Circular_Progress/CircularProgress.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import CircularProgress, { CircularProgressProps } from "./CircularProgress";
+
+describe("Loading Component", () => {
+  const renderComponent = (props: CircularProgressProps) =>
+    render(<CircularProgress {...props} />);
+
+  it("applies the correct color class", () => {
+    const { container } = renderComponent({ color: "success" });
+    const spinner = container.firstChild as HTMLElement;
+
+    expect(spinner).not.toBeNull();
+    expect(spinner.className).toContain("success");
+  });
+
+  it("applies the correct size and thickness", () => {
+    const { container } = renderComponent({ size: 60, thickness: 5 });
+    const spinner = container.firstChild as HTMLElement;
+
+    expect(spinner).not.toBeNull();
+    expect(spinner.style.width).toBe("60px");
+    expect(spinner.style.height).toBe("60px");
+    expect(spinner.style.borderWidth).toBe("5px");
+  });
+
+  it("renders the determinate spinner with the correct rotation", () => {
+    const { container } = renderComponent({
+      variant: "determinate",
+      value: 75,
+    });
+    const spinner = container.firstChild as HTMLElement;
+
+    const expectedRotation = `rotate(${(75 / 100) * 360}deg)`;
+    expect(spinner).not.toBeNull();
+    expect(spinner.style.transform).toBe(expectedRotation);
+  });
+
+  it("handles string size correctly", () => {
+    const { container } = renderComponent({ size: "50%" });
+    const spinner = container.firstChild as HTMLElement;
+
+    expect(spinner).not.toBeNull();
+    expect(spinner.style.width).toBe("50%");
+    expect(spinner.style.height).toBe("50%");
+  });
+});

package/src/components/Circular_Progress/CircularProgress.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './CircularProgress.css';
+
+export interface CircularProgressProps {
+  value?: number;
+  variant?: 'determinate' | 'indeterminate';
+  color?: 'primary' | 'secondary' | 'error' | 'success' | 'info' | 'warning';
+  thickness?: number;
+  size?: number | string;
+}
+
+const CircularProgress: React.FC<CircularProgressProps> = ({
+  value = 0,
+  variant = 'indeterminate',
+  color = 'primary',
+  thickness = 4,
+  size = 100,
+}) => {
+  const isDeterminate = variant === 'determinate';
+  const rotationStyle = isDeterminate
+    ? { transform: `rotate(${(value / 100) * 360}deg)` }
+    : {};
+
+  return (
+    <div
+      className={`spinner ${color}`}
+      style={{
+        width: typeof size === 'number' ? `${size}px` : size,
+        height: typeof size === 'number' ? `${size}px` : size,
+        borderWidth: `${thickness}px`,
+        ...rotationStyle,
+      }}
+    />
+  );
+};
+
+export default CircularProgress;

package/src/components/Circular_Progress/index.ts

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

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import Divider from "./Divider";
+
+describe("Divider Component", () => {
+  it("should render without crashing", () => {
+    const { getByTestId } = render(<Divider data-testid="divider-rendered" />);
+    expect(getByTestId("divider-rendered")).toBeInTheDocument();
+  });
+
+  it("should render with default props", () => {
+    const { container } = render(<Divider />);
+    const dividerElement = container.querySelector(".MuiDivider-root");
+
+    expect(dividerElement).not.toHaveClass("MuiDivider-vertical");
+
+    expect(dividerElement).toHaveClass("MuiDivider-fullWidth");
+  });
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { DIVIDER_ORIENTATION } from "../Enum"; 
+
+interface CustomDividerProps {
+  orientation?: string; 
+  className?: string;
+  dividerClassName?: string;
+
+}
+
+const CustomDivider: React.FC<CustomDividerProps> = ({
+  orientation = DIVIDER_ORIENTATION.Horizontal, 
+  className = "",
+  dividerClassName = "",
+  ...rest 
+}) => {
+  return (
+    <div className={`${className} ${orientation}`} {...rest}>
+      <div className={dividerClassName} />
+    </div>
+  );
+};
+
+export default CustomDivider;

package/src/components/Divider/index.ts

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

package/src/components/Enum.ts

@@ -0,0 +1,19 @@
+export const INPUT_TYPES ={
+  PASSWORD : 'password',
+  TEXT : 'text',
+  EMAIL : 'email',
+  NUMBER : 'number',
+  DATE : 'date',
+}
+
+export const DIVIDER_ORIENTATION = {
+    Horizontal : "horizontal",
+    Vertical : "vertical",
+  }
+
+export const LINK_TARGET = {
+    Self : '_self',
+    Blank : '_blank',
+    Parent : '_parent',
+    Top : '_top',
+  }