dhre-component-lib 0.0.8 → 0.0.9

package/src/components/Tag/Tag.css

@@ -1,14 +0,0 @@
-.customTagClass {
-  display: inline-block;
-  padding: 5px 10px;
-  background-color: #f0f0f0;
-  color: #333;
-  border-radius: 12px;
-  font-size: 14px;
-  cursor: pointer;
-  margin-right: 8px;
-
-  &:hover {
-    background-color: #e0e0e0;
-  }
-}

package/src/components/Tag/Tag.test.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import Tag, { TagProps } from './Tag';
-
-describe('Tag Component', () => {
-  let handleClick: jest.Mock;
-
-  beforeEach(() => {
-    handleClick = jest.fn();  // Reset the mock function before each test
-  });
-
-  // Function to generate default props for each test
-  const getDefaultProps = (): TagProps => ({
-    content: 'Sample Tag',
-    tagClassName: 'tag-class',
-    handleClick,
-  });
-
-  it('renders the tag with the correct content', () => {
-    render(<Tag {...getDefaultProps()} />);
-    
-    const tagElement = screen.getByText('Sample Tag');
-    
-    expect(tagElement).toBeInTheDocument();
-  });
-
-  it('applies the correct className to the tag', () => {
-    render(<Tag {...getDefaultProps()} />);
-    
-    const tagElement = screen.getByText('Sample Tag');
-    
-    expect(tagElement).toHaveClass('tag-class');
-  });
-
-  it('calls the handleClick function when the tag is clicked', () => {
-    render(<Tag {...getDefaultProps()} />);
-    
-    const tagElement = screen.getByText('Sample Tag');
-    
-    fireEvent.click(tagElement);
-    
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call handleClick when the tag is not clicked', () => {
-    render(<Tag {...getDefaultProps()} />);
-    
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('renders correctly with different content', () => {
-    const newContent = 'New Tag Content';
-    render(<Tag {...getDefaultProps()} content={newContent} />);
-    
-    const tagElement = screen.getByText(newContent);
-    
-    expect(tagElement).toBeInTheDocument();
-    expect(tagElement).toHaveTextContent(newContent);
-  });
-});

package/src/components/Tag/Tag.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import styles from "./Tag.module.scss";
-
-export interface TagProps {
-  content: string | number;
-  tagClassName?: string; // Optional prop for custom class name
-  handleClick?: () => void;
-  style?: React.CSSProperties; // Inline styles as props
-}
-
-const Tag: React.FC<TagProps> = ({ content, tagClassName = styles.customTagClass, handleClick, style }) => {
-  return (
-    <button onClick={handleClick} style={style} className={tagClassName}>
-      {content}
-    </button>
-  );
-};
-
-export default Tag;

package/src/components/Tag/index.ts

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

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,37 +0,0 @@
-.tooltipWrapper {
-  display: inline-block;
-  position: relative;
-  margin-right: 20px;
-}
-
-.customTooltipClass {
-  position: absolute;
-  bottom: 125%; /* Position above the element */
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #333;
-  color: #fff;
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 14px;
-  white-space: nowrap;
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.customTooltipClass::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 5px;
-  border-style: solid;
-  border-color: #333 transparent transparent transparent;
-}
-
-.hoverText {
-  color: blue;
-  cursor: pointer;
-}

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import Tooltip, { TooltipProps } from "./Tooltip";
-
-describe("Tooltip Component", () => {
-  const defaultProps: TooltipProps = {
-    content: "Tooltip content",
-    tooltipClassName: "tooltip-class",
-    children: <button>Hover me</button>,
-  };
-
-  it("renders the children correctly", () => {
-    render(<Tooltip {...defaultProps} />);
-
-    const childElement = screen.getByText("Hover me");
-
-    expect(childElement).toBeInTheDocument();
-  });
-
-  it("does not show tooltip content by default", () => {
-    render(<Tooltip {...defaultProps} />);
-
-    const tooltipElement = screen.queryByText(defaultProps.content);
-
-    expect(tooltipElement).not.toBeInTheDocument();
-  });
-
-  it("shows tooltip content on mouse enter and hides it on mouse leave", () => {
-    render(<Tooltip {...defaultProps} />);
-
-    const childElement = screen.getByText("Hover me");
-
-    // Trigger mouse enter
-    fireEvent.mouseEnter(childElement);
-    let tooltipElement = screen.queryByText(defaultProps.content);
-    expect(tooltipElement).toBeInTheDocument();
-    expect(tooltipElement).toHaveClass(defaultProps.tooltipClassName);
-
-    // Trigger mouse leave
-    fireEvent.mouseLeave(childElement);
-    tooltipElement = screen.queryByText(defaultProps.content);
-
-    // Ensure tooltipElement is null if it was not found
-    expect(tooltipElement).toBeNull();
-  });
-
-  it("applies the correct container className", () => {
-    const customClassName = "custom-container-class";
-    render(<Tooltip {...defaultProps} containerClassName={customClassName} />);
-
-    const containerElement = screen.getByText("Hover me").parentElement;
-
-    expect(containerElement).toHaveClass(customClassName);
-  });
-
-  it("handles tooltip visibility correctly", () => {
-    render(<Tooltip {...defaultProps} />);
-
-    const childElement = screen.getByText("Hover me");
-
-    fireEvent.mouseEnter(childElement);
-
-    const tooltipElement = screen.queryByText(defaultProps.content);
-
-    expect(tooltipElement).toBeInTheDocument();
-  });
-});

package/src/components/Tooltip/Tooltip.tsx

@@ -1,38 +0,0 @@
-import React, { useState } from "react";
-import styles from './Tooltip.module.scss';
-
-export interface TooltipProps {
-  content: string; 
-  tooltipClassName: string; 
-  children: React.ReactNode;
-  containerClassName?: string;
-}
-
-const Tooltip: React.FC<TooltipProps> = ({
-  content,
-  tooltipClassName,
-  children,
-  containerClassName = "",
-}) => {
-  const [visible, setVisible] = useState(false);
-
-  const showTooltip = () => setVisible(true);
-  const hideTooltip = () => setVisible(false);
-
-  return (
-    <div 
-      className={`${styles.tooltipWrapper} ${containerClassName}`} 
-      onMouseEnter={showTooltip} 
-      onMouseLeave={hideTooltip}
-    >
-      {children}
-      {visible && (
-        <div className={`${styles.customTooltipClass} ${tooltipClassName}`}>
-          {content}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Tooltip;

package/src/components/Tooltip/index.ts

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

package/src/components/index.ts

@@ -1,15 +0,0 @@
-export { default as Button } from "./Button";
-export { default as Avatar } from "./Avatar";
-export { default as Badge } from "./Badge";
-export { default as BreadCrumb } from "./BreadCrumb";
-export { default as Checkbox } from "./Checkbox";
-export { default as CircularProgress } from "./CircularProgress";
-export { default as Divider } from "./Divider";
-export { default as Link } from "./Link";
-export { default as Progress } from "./Progress";
-export { default as RadioButton } from "./RadioButton";
-export { default as InputTextField } from "./InputTextField";
-export { default } from "./PdfView";
-export { default as Directions } from "./Map/Directions";
-export { default as GoogleMap } from "./Map/GoogleMap";
-export { default as OtpInput } from "./OtpInput/OtpInput";

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components';

package/src/theme/Typography/typography.scss

@@ -1,117 +0,0 @@
-$bold-weight: 700;
-$semi-bold-weight: 400;
-$medium-weight: 300;
-
-
-$font-sizes: (
-  'H1': 40px,
-  'H2': 36px,
-  'H3': 32px,
-  'H4': 26px,
-  'H5': 24px,
-  'H6': 22px,
-  'H7': 20px,
-  'H8': 18px,
-  'B1':20px,
-  'B2':18px,
-  'B3':16px,
-  'B4':14px,
-  'L1':14px,
-  'L2':12px,
-  'L3':10px,
-);
-
-$line-heights: (
-  'H1': 56px,
-  'H2': 50.4px,
-  'H3': 44.8px,
-  'H4': 36.4px,
-  'H5': 33.6px,
-  'H6': 30.8px,
-  'H7': 28px,
-  'H8': 25.2px,
-  'B1': 28px,
-  'B2': 25.2px,
-  'B3': 22.4px,
-  'B4': 22.4px,
-  'L1': 19.6px,
-  'L2': 16.8px,
-  'L3': 14px,
-);
-
-@mixin font-style($type, $weight, $font-size-key) {
-  $font-size: map-get($font-sizes, $font-size-key);
-  $line-height: map-get($line-heights, $font-size-key);
-  
-  font-weight: $weight;
-  font-size: $font-size;
-  line-height: $line-height;
-}
-
-// H1 Styles
-.H1_BOLD { @include font-style('heading', $bold-weight, 'H1'); }
-.H1_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H1'); }
-.H1_MEDIUM { @include font-style('heading', $medium-weight, 'H1'); }
-
-// H2 Styles
-.H2_BOLD { @include font-style('heading', $bold-weight, 'H2'); }
-.H2_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H2'); }
-.H2_MEDIUM { @include font-style('heading', $medium-weight, 'H2'); }
-
-// H3 Styles
-.H3_BOLD { @include font-style('heading', $bold-weight, 'H3'); }
-.H3_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H3'); }
-.H3_MEDIUM { @include font-style('heading', $medium-weight, 'H3'); }
-
-// H4 Styles
-.H4_BOLD { @include font-style('heading', $bold-weight, 'H4'); }
-.H4_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H4'); }
-.H4_MEDIUM { @include font-style('heading', $medium-weight, 'H4'); }
-
-// H5 Styles
-.H5_BOLD { @include font-style('heading', $bold-weight, 'H5'); }
-.H5_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H5'); }
-.H5_MEDIUM { @include font-style('heading', $medium-weight, 'H5'); }
-
-// H6 Styles
-.H6_BOLD { @include font-style('heading', $bold-weight, 'H6'); }
-.H6_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H6'); }
-.H6_MEDIUM { @include font-style('heading', $medium-weight, 'H6'); }
-
-// H7 Styles
-.H7_BOLD { @include font-style('heading', $bold-weight, 'H7'); }
-.H7_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H7'); }
-.H7_MEDIUM { @include font-style('heading', $medium-weight, 'H7'); }
-
-// H8 Styles
-.H8_BOLD { @include font-style('heading', $bold-weight, 'H8'); }
-.H8_SEMI_BOLD { @include font-style('heading', $semi-bold-weight, 'H8'); }
-.H8_MEDIUM { @include font-style('heading', $medium-weight, 'H8'); }
-
-// B1 Styles
-.B1_BOLD { @include font-style('body', $bold-weight, 'B1'); }
-.B1_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B1'); }
-
-// B2 Styles
-.B2_BOLD { @include font-style('body', $bold-weight, 'B2'); }
-.B2_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B2'); }
-
-// B3 Styles
-.B3_BOLD { @include font-style('body', $bold-weight, 'B3'); }
-.B3_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B3'); }
-
-// B4 Styles
-.B4_BOLD { @include font-style('body', $bold-weight, 'B4'); }
-.B4_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'B4'); }
-
-// L1 Styles
-.L1_BOLD { @include font-style('body', $bold-weight, 'L1'); }
-.L1_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'L1'); }
-
-// L2 Styles
-.L2_BOLD { @include font-style('body', $bold-weight, 'L2'); }
-.L2_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'L2'); }
-
-// L3 Styles
-.L3_BOLD { @include font-style('body', $bold-weight, 'L3'); }
-.L3_SEMI_BOLD { @include font-style('body', $semi-bold-weight, 'L3'); }

package/src/theme/colors/colors.scss

@@ -1,22 +0,0 @@
-$surface-primary: #FFFFFF;
-$surface-secondary: #F5F5F5;
-$surface-static: #FFFFFF;
-$surface-brand-static: #D92D27;
-$surface-brand-transparent-static: #D92D3E33;
-$surface-disabled: #E1E1E1;
-$surface-inverted-transparent: #68686833;
-
-$content-primary: #000000;
-$content-secondary: #686868;
-$content-disabled: #A7A7A7;
-$content-inverted: #FFFFFF;
-$content-static: #FFFFFF;
-$content-secondary-static: #CECECE;
-
-$border-primary: #686868;
-$border-secondary: #A7A7A7;
-$border-disabled: #CECECE;
-$border-inverted: #000000;
-$border-brand-static: #D92D27;
-$border-static: #FFFFFF;
-$border-brand-danger: #EB0542;

package/src/theme/colors.ts

@@ -1,3 +0,0 @@
-// format: Color name: BRAND_800
-
-export const COLORS = {};

package/src/typings.d.ts

@@ -1 +0,0 @@
-declare module '*.scss';

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "ESNext",         // Module system to use
-    "target": "ES5",            // Target JavaScript version
-    "moduleResolution": "node", // Module resolution strategy
-    "declaration": true,        // Generate .d.ts files
-    "outDir": "./dist",         // Output directory for compiled files
-    "jsx": "react-jsx",         // JSX handling for React
-    "esModuleInterop": true,    // Enable interoperability between CommonJS and ESModules
-    "skipLibCheck": true  ,      // Skip checking type declarations of libraries
-    "types": ["@testing-library/jest-dom","@types/google.maps", "node"],
-    "lib": ["ES2015", "DOM"], 
-  },
-  "include": ["src/**/*"],      // Include all source files in the src directory
-  "exclude": ["node_modules", "dist", "**/*.test.ts"] // Exclude unnecessary files
-}