dhre-component-lib 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{src/components/Badge → dist}/Badge.module.scss +0 -1
- package/{src/components/BreadCrumb → dist}/Breadcrumb.module.scss +0 -3
- package/{src/components/Button → dist}/Button.module.scss +3 -16
- package/{src/components/CircularProgress → dist}/CircularProgress.module.scss +0 -1
- package/dist/assets/output-4Fi7j5sB.css +247 -0
- package/dist/components/Badge/index.d.ts +0 -1
- package/dist/components/BreadCrumb/index.d.ts +0 -1
- package/dist/components/Button/index.d.ts +0 -1
- package/dist/components/CircularProgress/index.d.ts +0 -1
- package/dist/components/Map/index.d.ts +0 -1
- package/dist/components/Modal/index.d.ts +0 -1
- package/dist/components/Notification/index.d.ts +0 -1
- package/dist/components/OtpInput/index.d.ts +0 -1
- package/dist/components/PdfView/index.d.ts +0 -1
- package/dist/components/Tooltip/index.d.ts +0 -1
- package/dist/dist/styles.css +2 -0
- package/dist/dist/styles.css.map +1 -0
- package/dist/index.d.ts +15 -1
- package/dist/index.esm.js +9323 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +9359 -1
- package/dist/index.js.map +1 -0
- package/package.json +8 -7
- package/dist/components/Avatar/Avatar.js +0 -6
- package/dist/components/Avatar/Avatar.test.js +0 -39
- package/dist/components/Avatar/index.js +0 -1
- package/dist/components/Badge/Badge.js +0 -6
- package/dist/components/Badge/Badge.test.js +0 -44
- package/dist/components/Badge/index.js +0 -2
- package/dist/components/BreadCrumb/BreadCrumb.js +0 -8
- package/dist/components/BreadCrumb/BreadCrumb.test.js +0 -55
- package/dist/components/BreadCrumb/index.js +0 -2
- package/dist/components/Button/Button.js +0 -6
- package/dist/components/Button/Button.test.js +0 -36
- package/dist/components/Button/index.js +0 -2
- package/dist/components/Checkbox/Checkbox.js +0 -7
- package/dist/components/Checkbox/Checkbox.test.js +0 -59
- package/dist/components/Checkbox/index.js +0 -1
- package/dist/components/CircularProgress/CircularProgress.js +0 -15
- package/dist/components/CircularProgress/CircularProgress.test.js +0 -31
- package/dist/components/CircularProgress/index.js +0 -2
- package/dist/components/Divider/Divider.js +0 -7
- package/dist/components/Divider/Divider.test.js +0 -30
- package/dist/components/Divider/index.js +0 -1
- package/dist/components/Enum.js +0 -17
- package/dist/components/InputTextField/InputTextField.js +0 -9
- package/dist/components/InputTextField/InputTextField.test.js +0 -98
- package/dist/components/InputTextField/index.js +0 -1
- package/dist/components/Link/Link.js +0 -6
- package/dist/components/Link/Link.test.js +0 -47
- package/dist/components/Link/index.js +0 -1
- package/dist/components/Map/Directions.js +0 -9
- package/dist/components/Map/GoogleMap.js +0 -104
- package/dist/components/Map/GoogleMapsLoader.js +0 -10
- package/dist/components/Map/index.js +0 -3
- package/dist/components/Modal/Modal.js +0 -14
- package/dist/components/Modal/Modal.test.js +0 -52
- package/dist/components/Modal/index.js +0 -2
- package/dist/components/Notification/Notification.js +0 -21
- package/dist/components/Notification/Notification.test.js +0 -40
- package/dist/components/Notification/index.js +0 -2
- package/dist/components/OtpInput/OtpInput.js +0 -68
- package/dist/components/OtpInput/OtpInput.test.js +0 -36
- package/dist/components/OtpInput/index.js +0 -2
- package/dist/components/PdfView/PdfView.js +0 -59
- package/dist/components/PdfView/PdfView.test.js +0 -41
- package/dist/components/PdfView/index.js +0 -2
- package/dist/components/Progress/Progress.js +0 -9
- package/dist/components/Progress/Progress.test.js +0 -34
- package/dist/components/Progress/index.js +0 -1
- package/dist/components/RadioButton/RadioButton.js +0 -7
- package/dist/components/RadioButton/RadioButton.test.js +0 -29
- package/dist/components/RadioButton/index.js +0 -1
- package/dist/components/Switch/Switch.js +0 -10
- package/dist/components/Switch/Switch.test.js +0 -45
- package/dist/components/Switch/index.js +0 -1
- package/dist/components/Tag/Tag.js +0 -6
- package/dist/components/Tag/Tag.test.js +0 -43
- package/dist/components/Tag/index.js +0 -1
- package/dist/components/Tooltip/Tooltip.js +0 -11
- package/dist/components/Tooltip/Tooltip.test.js +0 -48
- package/dist/components/Tooltip/index.js +0 -2
- package/dist/components/index.d.ts +0 -15
- package/dist/components/index.js +0 -15
- package/dist/theme/colors.js +0 -2
- package/src/__mocks__/styleMock.js +0 -1
- package/src/components/Avatar/Avatar.test.tsx +0 -53
- package/src/components/Avatar/Avatar.tsx +0 -28
- package/src/components/Avatar/index.ts +0 -1
- package/src/components/Badge/Badge.test.tsx +0 -59
- package/src/components/Badge/Badge.tsx +0 -25
- package/src/components/Badge/index.ts +0 -2
- package/src/components/BreadCrumb/BreadCrumb.test.tsx +0 -90
- package/src/components/BreadCrumb/BreadCrumb.tsx +0 -45
- package/src/components/BreadCrumb/index.ts +0 -2
- package/src/components/Button/Button.test.tsx +0 -49
- package/src/components/Button/Button.tsx +0 -29
- package/src/components/Button/index.ts +0 -2
- package/src/components/Checkbox/Checkbox.test.tsx +0 -93
- package/src/components/Checkbox/Checkbox.tsx +0 -35
- package/src/components/Checkbox/index.ts +0 -1
- package/src/components/CircularProgress/CircularProgress.test.tsx +0 -39
- package/src/components/CircularProgress/CircularProgress.tsx +0 -37
- package/src/components/CircularProgress/index.ts +0 -2
- package/src/components/Divider/Divider.test.tsx +0 -44
- package/src/components/Divider/Divider.tsx +0 -24
- package/src/components/Divider/index.ts +0 -1
- package/src/components/Enum.ts +0 -19
- package/src/components/InputTextField/InputTextField.test.tsx +0 -118
- package/src/components/InputTextField/InputTextField.tsx +0 -48
- package/src/components/InputTextField/index.ts +0 -1
- package/src/components/Link/Link.test.tsx +0 -55
- package/src/components/Link/Link.tsx +0 -33
- package/src/components/Link/index.ts +0 -1
- package/src/components/Map/Directions.tsx +0 -36
- package/src/components/Map/GoogleMap.tsx +0 -186
- package/src/components/Map/GoogleMapsLoader.tsx +0 -12
- package/src/components/Map/index.ts +0 -3
- package/src/components/Modal/Modal.test.tsx +0 -74
- package/src/components/Modal/Modal.tsx +0 -39
- package/src/components/Modal/index.ts +0 -2
- package/src/components/Notification/Notification.test.tsx +0 -53
- package/src/components/Notification/Notification.tsx +0 -42
- package/src/components/Notification/index.ts +0 -2
- package/src/components/OtpInput/OtpInput.test.tsx +0 -53
- package/src/components/OtpInput/OtpInput.tsx +0 -137
- package/src/components/OtpInput/index.ts +0 -2
- package/src/components/PdfView/PdfView.test.tsx +0 -52
- package/src/components/PdfView/PdfView.tsx +0 -116
- package/src/components/PdfView/index.ts +0 -2
- package/src/components/Progress/Progress.test.tsx +0 -43
- package/src/components/Progress/Progress.tsx +0 -35
- package/src/components/Progress/index.ts +0 -1
- package/src/components/RadioButton/RadioButton.test.tsx +0 -56
- package/src/components/RadioButton/RadioButton.tsx +0 -43
- package/src/components/RadioButton/index.ts +0 -1
- package/src/components/Switch/Switch.test.tsx +0 -83
- package/src/components/Switch/Switch.tsx +0 -38
- package/src/components/Switch/index.ts +0 -1
- package/src/components/Tag/Tag.css +0 -14
- package/src/components/Tag/Tag.test.tsx +0 -61
- package/src/components/Tag/Tag.tsx +0 -19
- package/src/components/Tag/index.ts +0 -1
- package/src/components/Tooltip/Tooltip.test.tsx +0 -68
- package/src/components/Tooltip/Tooltip.tsx +0 -38
- package/src/components/Tooltip/index.ts +0 -2
- package/src/components/index.ts +0 -15
- package/src/index.ts +0 -1
- package/src/theme/colors.ts +0 -3
- package/src/typings.d.ts +0 -1
- /package/{src/components/Map → dist}/GoogleMap.module.scss +0 -0
- /package/{src/components/Modal → dist}/Modal.module.scss +0 -0
- /package/{src/components/Notification → dist}/Notification.module.scss +0 -0
- /package/{src/components/OtpInput → dist}/OtpInput.module.scss +0 -0
- /package/{src/components/PdfView → dist}/PdfView.module.scss +0 -0
- /package/{src/components/Tooltip → dist}/Tooltip.module.scss +0 -0
- /package/{src/theme/colors → dist}/colors.scss +0 -0
- /package/{src/theme/Typography → dist}/typography.scss +0 -0
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dhre-component-lib",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "jest",
|
|
7
7
|
"rollup": "rollup -c",
|
|
8
8
|
"test:coverage": "jest --coverage",
|
|
9
|
-
"build": "
|
|
9
|
+
"build": "rollup -c"
|
|
10
10
|
},
|
|
11
11
|
"author": "",
|
|
12
12
|
"license": "ISC",
|
|
@@ -45,6 +45,8 @@
|
|
|
45
45
|
"@mui/icons-material": "^5.16.7",
|
|
46
46
|
"@mui/material": "^5.16.7",
|
|
47
47
|
"@react-google-maps/api": "^2.19.3",
|
|
48
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
49
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
48
50
|
"tslib": "^2.6.3"
|
|
49
51
|
},
|
|
50
52
|
"peerDependencies": {
|
|
@@ -52,9 +54,9 @@
|
|
|
52
54
|
"react-dom": "^18.3.1"
|
|
53
55
|
},
|
|
54
56
|
"main": "dist/index.js",
|
|
55
|
-
"module": "dist/
|
|
57
|
+
"module": "dist/index.esm.js",
|
|
56
58
|
"types": "dist/index.d.ts",
|
|
57
|
-
"
|
|
59
|
+
"type": "module",
|
|
58
60
|
"keywords": [
|
|
59
61
|
"react",
|
|
60
62
|
"components",
|
|
@@ -62,7 +64,6 @@
|
|
|
62
64
|
"scss"
|
|
63
65
|
],
|
|
64
66
|
"files": [
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
]
|
|
67
|
+
"dist"
|
|
68
|
+
]
|
|
68
69
|
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom';
|
|
4
|
-
import Avatar from './Avatar';
|
|
5
|
-
describe('Avatar Component', () => {
|
|
6
|
-
const defaultProps = {
|
|
7
|
-
src: 'test-image.jpg',
|
|
8
|
-
alt: 'Test Avatar',
|
|
9
|
-
imgClassName: 'avatar-class',
|
|
10
|
-
};
|
|
11
|
-
it('renders the image with the provided src and alt attributes', () => {
|
|
12
|
-
render(React.createElement(Avatar, { ...defaultProps }));
|
|
13
|
-
const imgElement = screen.getByAltText(defaultProps.alt);
|
|
14
|
-
expect(imgElement).toHaveAttribute('src', defaultProps.src);
|
|
15
|
-
expect(imgElement).toHaveAttribute('alt', defaultProps.alt);
|
|
16
|
-
});
|
|
17
|
-
it('applies the correct className to the image', () => {
|
|
18
|
-
render(React.createElement(Avatar, { ...defaultProps }));
|
|
19
|
-
const imgElement = screen.getByAltText(defaultProps.alt);
|
|
20
|
-
expect(imgElement).toHaveClass(defaultProps.imgClassName);
|
|
21
|
-
});
|
|
22
|
-
it('handles the onClick event correctly', () => {
|
|
23
|
-
const handleClick = jest.fn();
|
|
24
|
-
render(React.createElement(Avatar, { ...defaultProps, handleClick: handleClick }));
|
|
25
|
-
const imgElement = screen.getByAltText(defaultProps.alt);
|
|
26
|
-
fireEvent.click(imgElement);
|
|
27
|
-
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
28
|
-
});
|
|
29
|
-
it('does not crash without handleClick prop', () => {
|
|
30
|
-
render(React.createElement(Avatar, { ...defaultProps }));
|
|
31
|
-
const imgElement = screen.getByAltText(defaultProps.alt);
|
|
32
|
-
expect(() => fireEvent.click(imgElement)).not.toThrow();
|
|
33
|
-
});
|
|
34
|
-
it('renders correctly without crashing', () => {
|
|
35
|
-
render(React.createElement(Avatar, { ...defaultProps }));
|
|
36
|
-
const imgElement = screen.getByAltText(defaultProps.alt);
|
|
37
|
-
expect(imgElement).toBeInTheDocument();
|
|
38
|
-
});
|
|
39
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Avatar";
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from './Badge.module.scss';
|
|
3
|
-
const Badge = ({ content, badgeClassName, handleClick, }) => {
|
|
4
|
-
return (React.createElement("button", { onClick: handleClick, className: `${styles.badge} ${badgeClassName}` }, content));
|
|
5
|
-
};
|
|
6
|
-
export default Badge;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom';
|
|
4
|
-
import Badge from './Badge';
|
|
5
|
-
describe('Badge Component', () => {
|
|
6
|
-
const defaultProps = {
|
|
7
|
-
content: 'Test Badge',
|
|
8
|
-
badgeClassName: 'badge-class',
|
|
9
|
-
};
|
|
10
|
-
it('renders the badge with the provided content', () => {
|
|
11
|
-
render(React.createElement(Badge, { ...defaultProps }));
|
|
12
|
-
const badgeElement = screen.getByText(defaultProps.content);
|
|
13
|
-
expect(badgeElement).toBeInTheDocument();
|
|
14
|
-
});
|
|
15
|
-
it('handles the onClick event correctly', () => {
|
|
16
|
-
const handleClick = jest.fn();
|
|
17
|
-
render(React.createElement(Badge, { ...defaultProps, handleClick: handleClick }));
|
|
18
|
-
const badgeElement = screen.getByText(defaultProps.content);
|
|
19
|
-
fireEvent.click(badgeElement);
|
|
20
|
-
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
21
|
-
});
|
|
22
|
-
it('does not crash without handleClick prop', () => {
|
|
23
|
-
render(React.createElement(Badge, { ...defaultProps }));
|
|
24
|
-
const badgeElement = screen.getByText(defaultProps.content);
|
|
25
|
-
expect(() => fireEvent.click(badgeElement)).not.toThrow();
|
|
26
|
-
});
|
|
27
|
-
it('renders correctly with numeric content', () => {
|
|
28
|
-
const numericProps = {
|
|
29
|
-
...defaultProps,
|
|
30
|
-
content: 99,
|
|
31
|
-
};
|
|
32
|
-
render(React.createElement(Badge, { ...numericProps }));
|
|
33
|
-
const badgeElement = screen.getByText(numericProps.content.toString());
|
|
34
|
-
expect(badgeElement).toBeInTheDocument();
|
|
35
|
-
expect(badgeElement).toHaveTextContent('99');
|
|
36
|
-
});
|
|
37
|
-
it('renders correctly with different content', () => {
|
|
38
|
-
const newContent = 'Updated Badge';
|
|
39
|
-
render(React.createElement(Badge, { ...defaultProps, content: newContent }));
|
|
40
|
-
const badgeElement = screen.getByText(newContent);
|
|
41
|
-
expect(badgeElement).toBeInTheDocument();
|
|
42
|
-
expect(badgeElement).toHaveTextContent(newContent);
|
|
43
|
-
});
|
|
44
|
-
});
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from './Breadcrumb.module.scss';
|
|
3
|
-
const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/", separatorClassName, }) => {
|
|
4
|
-
return (React.createElement("nav", { className: `${styles.breadcrumb} ${breadcrumbClassName}` }, items.map((item, index) => (React.createElement(React.Fragment, { key: index },
|
|
5
|
-
React.createElement("button", { className: `${styles.breadcrumbItem} ${itemClassName}`, onClick: item.handleClick }, item.label),
|
|
6
|
-
index < items.length - 1 && (React.createElement("span", { className: `${styles.separator} ${separatorClassName}` }, separator)))))));
|
|
7
|
-
};
|
|
8
|
-
export default Breadcrumb;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom';
|
|
4
|
-
import Breadcrumb from './BreadCrumb';
|
|
5
|
-
describe('Breadcrumb', () => {
|
|
6
|
-
it('should render with given props', () => {
|
|
7
|
-
const items = [
|
|
8
|
-
{ label: 'Home', handleClick: () => { } },
|
|
9
|
-
{ label: 'Library' },
|
|
10
|
-
{ label: 'Data' },
|
|
11
|
-
];
|
|
12
|
-
render(React.createElement(Breadcrumb, { items: items, breadcrumbClassName: "breadcrumb-class", itemClassName: "item-class", separator: ">", separatorClassName: "separator-class" }));
|
|
13
|
-
// Check if breadcrumb container is rendered
|
|
14
|
-
const breadcrumb = screen.getByRole('navigation');
|
|
15
|
-
expect(breadcrumb).toBeInTheDocument();
|
|
16
|
-
expect(breadcrumb).toHaveClass('breadcrumb-class');
|
|
17
|
-
// Check if breadcrumb items are rendered
|
|
18
|
-
items.forEach((item) => {
|
|
19
|
-
const itemElement = screen.getByText(item.label);
|
|
20
|
-
expect(itemElement).toBeInTheDocument();
|
|
21
|
-
expect(itemElement).toHaveClass('item-class');
|
|
22
|
-
});
|
|
23
|
-
// Check if separators are rendered
|
|
24
|
-
const separators = screen.getAllByText('>');
|
|
25
|
-
expect(separators.length).toBe(items.length - 1);
|
|
26
|
-
separators.forEach(separator => expect(separator).toHaveClass('separator-class'));
|
|
27
|
-
});
|
|
28
|
-
it('should call handleClick when a breadcrumb item is clicked', () => {
|
|
29
|
-
const handleClick = jest.fn();
|
|
30
|
-
const items = [
|
|
31
|
-
{ label: 'Home', handleClick },
|
|
32
|
-
{ label: 'Library' },
|
|
33
|
-
];
|
|
34
|
-
render(React.createElement(Breadcrumb, { items: items, breadcrumbClassName: "breadcrumb-class", itemClassName: "item-class", separator: ">", separatorClassName: "separator-class" }));
|
|
35
|
-
const homeItem = screen.getByText('Home');
|
|
36
|
-
fireEvent.click(homeItem);
|
|
37
|
-
expect(handleClick).toHaveBeenCalled();
|
|
38
|
-
});
|
|
39
|
-
it('should render without separators if none are provided', () => {
|
|
40
|
-
const items = [
|
|
41
|
-
{ label: 'Home' },
|
|
42
|
-
{ label: 'Library' },
|
|
43
|
-
];
|
|
44
|
-
render(React.createElement(Breadcrumb, { items: items, breadcrumbClassName: "breadcrumb-class", itemClassName: "item-class", separator: "" // Pass an empty string for separator
|
|
45
|
-
}));
|
|
46
|
-
// Check if breadcrumb items are rendered
|
|
47
|
-
items.forEach((item) => {
|
|
48
|
-
const itemElement = screen.getByText(item.label);
|
|
49
|
-
expect(itemElement).toBeInTheDocument();
|
|
50
|
-
});
|
|
51
|
-
// Check that no separators are present by querying with the separator class name
|
|
52
|
-
const separators = screen.queryAllByRole('presentation');
|
|
53
|
-
expect(separators.length).toBe(0);
|
|
54
|
-
});
|
|
55
|
-
});
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import styles from './Button.module.scss';
|
|
3
|
-
const Button = ({ label, variant, color, size, handleClick, }) => {
|
|
4
|
-
return (React.createElement("button", { onClick: handleClick, className: `${styles.button} ${styles[variant]} ${styles[color]} ${styles[size]}` }, label));
|
|
5
|
-
};
|
|
6
|
-
export default Button;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom';
|
|
4
|
-
import Button from './Button';
|
|
5
|
-
describe('Button Component', () => {
|
|
6
|
-
let handleClick;
|
|
7
|
-
beforeEach(() => {
|
|
8
|
-
handleClick = jest.fn(); // Initialize the mock function before each test
|
|
9
|
-
});
|
|
10
|
-
const renderButton = (props = {}) => {
|
|
11
|
-
const defaultProps = {
|
|
12
|
-
label: 'Click Me',
|
|
13
|
-
variant: 'contained',
|
|
14
|
-
color: 'primary',
|
|
15
|
-
size: 'small',
|
|
16
|
-
handleClick: handleClick
|
|
17
|
-
};
|
|
18
|
-
return render(React.createElement(Button, { ...defaultProps }));
|
|
19
|
-
};
|
|
20
|
-
it('renders the button with the correct label', () => {
|
|
21
|
-
renderButton();
|
|
22
|
-
const buttonElement = screen.getByText('Click Me');
|
|
23
|
-
expect(buttonElement).toBeInTheDocument();
|
|
24
|
-
expect(buttonElement.tagName).toBe('BUTTON');
|
|
25
|
-
});
|
|
26
|
-
it('calls the handleClick function when the button is clicked', () => {
|
|
27
|
-
renderButton();
|
|
28
|
-
const buttonElement = screen.getByText('Click Me');
|
|
29
|
-
fireEvent.click(buttonElement);
|
|
30
|
-
expect(handleClick).toHaveBeenCalledTimes(1); // Ensure the mock function is called once
|
|
31
|
-
});
|
|
32
|
-
it('does not call handleClick when the button is not clicked', () => {
|
|
33
|
-
renderButton();
|
|
34
|
-
expect(handleClick).not.toHaveBeenCalled();
|
|
35
|
-
});
|
|
36
|
-
});
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
const CustomCheckbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
|
|
3
|
-
return (React.createElement("div", { className: className },
|
|
4
|
-
React.createElement("input", { type: "checkbox", checked: checked, onChange: onChange, className: checkboxClassName, ...rest }),
|
|
5
|
-
label && React.createElement("label", { className: labelClassName }, label)));
|
|
6
|
-
};
|
|
7
|
-
export default CustomCheckbox;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
-
import '@testing-library/jest-dom';
|
|
4
|
-
import CustomCheckbox from './Checkbox';
|
|
5
|
-
describe('CustomCheckbox Component', () => {
|
|
6
|
-
let handleChange;
|
|
7
|
-
// Function to generate default props for each test
|
|
8
|
-
const getDefaultProps = () => ({
|
|
9
|
-
label: 'Accept Terms',
|
|
10
|
-
checked: false,
|
|
11
|
-
onChange: handleChange,
|
|
12
|
-
className: 'custom-container',
|
|
13
|
-
checkboxClassName: 'custom-checkbox',
|
|
14
|
-
labelClassName: 'custom-label',
|
|
15
|
-
});
|
|
16
|
-
beforeEach(() => {
|
|
17
|
-
handleChange = jest.fn(); // Reset the mock function before each test
|
|
18
|
-
});
|
|
19
|
-
it('renders the checkbox with a label', () => {
|
|
20
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps() }));
|
|
21
|
-
const checkboxElement = screen.getByRole('checkbox');
|
|
22
|
-
const labelElement = screen.getByText('Accept Terms');
|
|
23
|
-
expect(checkboxElement).toBeInTheDocument();
|
|
24
|
-
expect(labelElement).toBeInTheDocument();
|
|
25
|
-
});
|
|
26
|
-
it('applies the correct className to the checkbox container', () => {
|
|
27
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps() }));
|
|
28
|
-
const container = screen.getByRole('checkbox').parentElement;
|
|
29
|
-
expect(container).toHaveClass('custom-container');
|
|
30
|
-
});
|
|
31
|
-
it('applies the correct className to the checkbox', () => {
|
|
32
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps() }));
|
|
33
|
-
const checkboxElement = screen.getByRole('checkbox');
|
|
34
|
-
expect(checkboxElement).toHaveClass('custom-checkbox');
|
|
35
|
-
});
|
|
36
|
-
it('applies the correct className to the label', () => {
|
|
37
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps() }));
|
|
38
|
-
const labelElement = screen.getByText('Accept Terms');
|
|
39
|
-
expect(labelElement).toHaveClass('custom-label');
|
|
40
|
-
});
|
|
41
|
-
it('checks the checkbox based on the checked prop', () => {
|
|
42
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps(), checked: true }));
|
|
43
|
-
const checkboxElement = screen.getByRole('checkbox');
|
|
44
|
-
expect(checkboxElement).toBeChecked();
|
|
45
|
-
});
|
|
46
|
-
it('calls the onChange function when the checkbox state changes', () => {
|
|
47
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps(), checked: false }));
|
|
48
|
-
const checkboxElement = screen.getByRole('checkbox');
|
|
49
|
-
fireEvent.click(checkboxElement); // Toggle the checkbox
|
|
50
|
-
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
51
|
-
});
|
|
52
|
-
it('renders correctly with different label', () => {
|
|
53
|
-
const newLabel = 'Agree to Privacy Policy';
|
|
54
|
-
render(React.createElement(CustomCheckbox, { ...getDefaultProps(), label: newLabel }));
|
|
55
|
-
const labelElement = screen.getByText(newLabel);
|
|
56
|
-
expect(labelElement).toBeInTheDocument();
|
|
57
|
-
expect(labelElement).toHaveTextContent(newLabel);
|
|
58
|
-
});
|
|
59
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Checkbox";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import styles from './CircularProgress.module.scss';
|
|
3
|
-
const CircularProgress = ({ value = 0, variant = 'indeterminate', color = 'primary', thickness = 4, size = 100, }) => {
|
|
4
|
-
const isDeterminate = variant === 'determinate';
|
|
5
|
-
const rotationStyle = isDeterminate
|
|
6
|
-
? { transform: `rotate(${(value / 100) * 360}deg)` }
|
|
7
|
-
: {};
|
|
8
|
-
return (React.createElement("div", { className: `${styles.spinner} ${styles[color]}`, style: {
|
|
9
|
-
width: typeof size === 'number' ? `${size}px` : size,
|
|
10
|
-
height: typeof size === 'number' ? `${size}px` : size,
|
|
11
|
-
borderWidth: `${thickness}px`,
|
|
12
|
-
...rotationStyle,
|
|
13
|
-
} }));
|
|
14
|
-
};
|
|
15
|
-
export default CircularProgress;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render } from "@testing-library/react";
|
|
3
|
-
import CircularProgress from "./CircularProgress";
|
|
4
|
-
describe("Loading Component", () => {
|
|
5
|
-
const renderComponent = (props) => render(React.createElement(CircularProgress, { ...props }));
|
|
6
|
-
it("applies the correct size and thickness", () => {
|
|
7
|
-
const { container } = renderComponent({ size: 60, thickness: 5 });
|
|
8
|
-
const spinner = container.firstChild;
|
|
9
|
-
expect(spinner).not.toBeNull();
|
|
10
|
-
expect(spinner.style.width).toBe("60px");
|
|
11
|
-
expect(spinner.style.height).toBe("60px");
|
|
12
|
-
expect(spinner.style.borderWidth).toBe("5px");
|
|
13
|
-
});
|
|
14
|
-
it("renders the determinate spinner with the correct rotation", () => {
|
|
15
|
-
const { container } = renderComponent({
|
|
16
|
-
variant: "determinate",
|
|
17
|
-
value: 75,
|
|
18
|
-
});
|
|
19
|
-
const spinner = container.firstChild;
|
|
20
|
-
const expectedRotation = `rotate(${(75 / 100) * 360}deg)`;
|
|
21
|
-
expect(spinner).not.toBeNull();
|
|
22
|
-
expect(spinner.style.transform).toBe(expectedRotation);
|
|
23
|
-
});
|
|
24
|
-
it("handles string size correctly", () => {
|
|
25
|
-
const { container } = renderComponent({ size: "50%" });
|
|
26
|
-
const spinner = container.firstChild;
|
|
27
|
-
expect(spinner).not.toBeNull();
|
|
28
|
-
expect(spinner.style.width).toBe("50%");
|
|
29
|
-
expect(spinner.style.height).toBe("50%");
|
|
30
|
-
});
|
|
31
|
-
});
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { DIVIDER_ORIENTATION } from "../Enum";
|
|
3
|
-
const CustomDivider = ({ orientation = DIVIDER_ORIENTATION.Horizontal, className = "", dividerClassName = "", ...rest }) => {
|
|
4
|
-
return (React.createElement("div", { className: `${className} ${orientation}`, ...rest },
|
|
5
|
-
React.createElement("div", { className: dividerClassName })));
|
|
6
|
-
};
|
|
7
|
-
export default CustomDivider;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render } from "@testing-library/react";
|
|
3
|
-
import CustomDivider from "./Divider";
|
|
4
|
-
import { DIVIDER_ORIENTATION } from "../Enum";
|
|
5
|
-
describe("CustomDivider Component", () => {
|
|
6
|
-
it("renders without crashing", () => {
|
|
7
|
-
const { container } = render(React.createElement(CustomDivider, null));
|
|
8
|
-
expect(container.firstChild).toBeTruthy();
|
|
9
|
-
});
|
|
10
|
-
it("applies the correct default orientation class", () => {
|
|
11
|
-
const { container } = render(React.createElement(CustomDivider, null));
|
|
12
|
-
expect(container.firstChild).toHaveClass(DIVIDER_ORIENTATION.Horizontal);
|
|
13
|
-
});
|
|
14
|
-
it("applies a custom orientation class", () => {
|
|
15
|
-
const { container } = render(React.createElement(CustomDivider, { orientation: DIVIDER_ORIENTATION.Vertical }));
|
|
16
|
-
expect(container.firstChild).toHaveClass(DIVIDER_ORIENTATION.Vertical);
|
|
17
|
-
});
|
|
18
|
-
it("applies the passed className to the outer div", () => {
|
|
19
|
-
const { container } = render(React.createElement(CustomDivider, { className: "custom-class" }));
|
|
20
|
-
expect(container.firstChild).toHaveClass("custom-class");
|
|
21
|
-
});
|
|
22
|
-
it("applies the passed dividerClassName to the inner div", () => {
|
|
23
|
-
const { container } = render(React.createElement(CustomDivider, { dividerClassName: "inner-class" }));
|
|
24
|
-
expect(container.firstChild?.firstChild).toHaveClass("inner-class");
|
|
25
|
-
});
|
|
26
|
-
it("passes additional props to the outer div", () => {
|
|
27
|
-
const { container } = render(React.createElement(CustomDivider, { "data-testid": "custom-divider" }));
|
|
28
|
-
expect(container.firstChild).toHaveAttribute("data-testid", "custom-divider");
|
|
29
|
-
});
|
|
30
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Divider";
|
package/dist/components/Enum.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
export const INPUT_TYPES = {
|
|
2
|
-
PASSWORD: 'password',
|
|
3
|
-
TEXT: 'text',
|
|
4
|
-
EMAIL: 'email',
|
|
5
|
-
NUMBER: 'number',
|
|
6
|
-
DATE: 'date',
|
|
7
|
-
};
|
|
8
|
-
export const DIVIDER_ORIENTATION = {
|
|
9
|
-
Horizontal: "horizontal",
|
|
10
|
-
Vertical: "vertical",
|
|
11
|
-
};
|
|
12
|
-
export const LINK_TARGET = {
|
|
13
|
-
Self: '_self',
|
|
14
|
-
Blank: '_blank',
|
|
15
|
-
Parent: '_parent',
|
|
16
|
-
Top: '_top',
|
|
17
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { INPUT_TYPES } from '../Enum';
|
|
3
|
-
const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placeholder = '', onChange, className = '', inputClassName = '', labelClassName = '', error = '', errorClassName = '', ...rest }) => {
|
|
4
|
-
return (React.createElement("div", { className: className },
|
|
5
|
-
label && React.createElement("label", { className: labelClassName }, label),
|
|
6
|
-
React.createElement("input", { type: type, value: value, placeholder: placeholder, onChange: onChange, className: inputClassName, ...rest }),
|
|
7
|
-
error && React.createElement("div", { className: errorClassName }, error)));
|
|
8
|
-
};
|
|
9
|
-
export default CustomInputField;
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
3
|
-
import CustomInputField from './InputTextField';
|
|
4
|
-
import { INPUT_TYPES } from '../Enum';
|
|
5
|
-
const renderWithProps = (props = {}) => {
|
|
6
|
-
const defaultProps = {
|
|
7
|
-
label: 'Test Label',
|
|
8
|
-
value: 'Test Value',
|
|
9
|
-
type: INPUT_TYPES.TEXT,
|
|
10
|
-
placeholder: 'Enter text...',
|
|
11
|
-
onChange: jest.fn(),
|
|
12
|
-
className: 'custom-input-wrapper',
|
|
13
|
-
inputClassName: 'custom-input',
|
|
14
|
-
labelClassName: 'custom-label',
|
|
15
|
-
error: '',
|
|
16
|
-
errorClassName: 'custom-error',
|
|
17
|
-
id: 'test-input-field',
|
|
18
|
-
...props
|
|
19
|
-
};
|
|
20
|
-
return render(React.createElement(CustomInputField, { ...defaultProps }));
|
|
21
|
-
};
|
|
22
|
-
describe('CustomInputField Component', () => {
|
|
23
|
-
// it('renders without crashing', () => {
|
|
24
|
-
// renderWithProps();
|
|
25
|
-
// // Check if the label correctly associates with the input by using the id
|
|
26
|
-
// const input = screen.getByLabelText('Test Label');
|
|
27
|
-
// expect(input).toBeInTheDocument();
|
|
28
|
-
// });
|
|
29
|
-
it('renders the label correctly', () => {
|
|
30
|
-
renderWithProps();
|
|
31
|
-
expect(screen.getByText('Test Label')).toHaveClass('custom-label');
|
|
32
|
-
});
|
|
33
|
-
it('renders the input with the correct value', () => {
|
|
34
|
-
renderWithProps();
|
|
35
|
-
expect(screen.getByDisplayValue('Test Value')).toHaveClass('custom-input');
|
|
36
|
-
});
|
|
37
|
-
it('calls the onChange handler when input value changes', () => {
|
|
38
|
-
const mockOnChange = jest.fn();
|
|
39
|
-
renderWithProps({ onChange: mockOnChange });
|
|
40
|
-
const input = screen.getByDisplayValue('Test Value');
|
|
41
|
-
fireEvent.change(input, { target: { value: 'New Value' } });
|
|
42
|
-
expect(mockOnChange).toHaveBeenCalledTimes(1);
|
|
43
|
-
});
|
|
44
|
-
it('displays the error message correctly', () => {
|
|
45
|
-
renderWithProps({ error: 'Error message' });
|
|
46
|
-
expect(screen.getByText('Error message')).toHaveClass('custom-error');
|
|
47
|
-
});
|
|
48
|
-
it('renders the input with the correct type', () => {
|
|
49
|
-
renderWithProps({ type: INPUT_TYPES.EMAIL });
|
|
50
|
-
expect(screen.getByPlaceholderText('Enter text...')).toHaveAttribute('type', INPUT_TYPES.EMAIL);
|
|
51
|
-
});
|
|
52
|
-
// it('applies the passed className to the wrapper div', () => {
|
|
53
|
-
// renderWithProps();
|
|
54
|
-
// // Check the class name of the wrapper div
|
|
55
|
-
// const wrapper = screen.getByLabelText('Test Label').parentElement?.parentElement;
|
|
56
|
-
// expect(wrapper).toHaveClass('custom-input-wrapper');
|
|
57
|
-
// });
|
|
58
|
-
it('applies additional props to the input field', () => {
|
|
59
|
-
renderWithProps();
|
|
60
|
-
expect(screen.getByPlaceholderText('Enter text...')).toBeInTheDocument();
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
describe('CustomInputField Component - Default Values', () => {
|
|
64
|
-
it('renders the input field with default value when value prop is not provided', () => {
|
|
65
|
-
render(React.createElement(CustomInputField, { label: "Test Label", type: INPUT_TYPES.TEXT, value: "", onChange: jest.fn() }));
|
|
66
|
-
expect(screen.getByPlaceholderText('')).toHaveValue('');
|
|
67
|
-
});
|
|
68
|
-
it('renders the input field with default type when type prop is not provided', () => {
|
|
69
|
-
render(React.createElement(CustomInputField, { label: "Test Label", value: "Test Value", type: INPUT_TYPES.TEXT, onChange: jest.fn() }));
|
|
70
|
-
expect(screen.getByDisplayValue('Test Value')).toHaveAttribute('type', INPUT_TYPES.TEXT);
|
|
71
|
-
});
|
|
72
|
-
it('renders the input field with default placeholder when placeholder prop is not provided', () => {
|
|
73
|
-
render(React.createElement(CustomInputField, { label: "Test Label", value: "Test Value", type: INPUT_TYPES.TEXT, onChange: jest.fn() }));
|
|
74
|
-
expect(screen.getByDisplayValue('Test Value')).toHaveAttribute('placeholder', '');
|
|
75
|
-
});
|
|
76
|
-
// it('applies default class names if className, inputClassName, or labelClassName are not provided', () => {
|
|
77
|
-
// render(<CustomInputField label="Test Label" value="Test Value" type={INPUT_TYPES.TEXT} onChange={jest.fn()} />);
|
|
78
|
-
// // Get the label element
|
|
79
|
-
// const label = screen.getByText('Test Label');
|
|
80
|
-
// const input = screen.getByDisplayValue('Test Value');
|
|
81
|
-
// // Get the parent wrapper div
|
|
82
|
-
// const wrapper = label.closest('div');
|
|
83
|
-
// // Check if the wrapper div has default class names or no class names
|
|
84
|
-
// if (wrapper) {
|
|
85
|
-
// // Expect no additional class names or specific default class names
|
|
86
|
-
// expect(wrapper).toHaveClass('default-wrapper-class'); // Replace with actual default class
|
|
87
|
-
// }
|
|
88
|
-
// // Check if the input field has default input class names or no class names
|
|
89
|
-
// expect(input).toHaveClass('default-input-class'); // Replace with actual default class
|
|
90
|
-
// // Check if the label has default label class names or no class names
|
|
91
|
-
// expect(label).toHaveClass('default-label-class'); // Replace with actual default class
|
|
92
|
-
// });
|
|
93
|
-
it('does not render the error message if error prop is not provided', () => {
|
|
94
|
-
render(React.createElement(CustomInputField, { label: "Test Label", value: "Test Value", type: INPUT_TYPES.TEXT, onChange: jest.fn() }));
|
|
95
|
-
const errorMessage = screen.queryByText('Error message');
|
|
96
|
-
expect(errorMessage).not.toBeInTheDocument();
|
|
97
|
-
});
|
|
98
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./InputTextField";
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { LINK_TARGET } from '../Enum';
|
|
3
|
-
const Link = ({ href, target = LINK_TARGET.Self, rel, className = '', children, ...rest }) => {
|
|
4
|
-
return (React.createElement("a", { href: href, target: target, rel: rel, className: className, ...rest }, children));
|
|
5
|
-
};
|
|
6
|
-
export default Link;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import Link from './Link';
|
|
4
|
-
import { LINK_TARGET } from '../Enum';
|
|
5
|
-
describe('Link Component', () => {
|
|
6
|
-
const defaultProps = {
|
|
7
|
-
href: 'https://example.com',
|
|
8
|
-
target: LINK_TARGET.Self,
|
|
9
|
-
rel: 'noopener noreferrer',
|
|
10
|
-
className: 'custom-link',
|
|
11
|
-
children: 'Click here',
|
|
12
|
-
};
|
|
13
|
-
it('renders the link with the correct href', () => {
|
|
14
|
-
render(React.createElement(Link, { ...defaultProps }));
|
|
15
|
-
expect(screen.getByText('Click here')).toHaveAttribute('href', 'https://example.com');
|
|
16
|
-
});
|
|
17
|
-
it('renders the link with the correct target attribute', () => {
|
|
18
|
-
render(React.createElement(Link, { ...defaultProps }));
|
|
19
|
-
expect(screen.getByText('Click here')).toHaveAttribute('target', LINK_TARGET.Self);
|
|
20
|
-
});
|
|
21
|
-
it('renders the link with the correct rel attribute', () => {
|
|
22
|
-
render(React.createElement(Link, { ...defaultProps }));
|
|
23
|
-
expect(screen.getByText('Click here')).toHaveAttribute('rel', 'noopener noreferrer');
|
|
24
|
-
});
|
|
25
|
-
it('renders the link with the correct className', () => {
|
|
26
|
-
render(React.createElement(Link, { ...defaultProps }));
|
|
27
|
-
expect(screen.getByText('Click here')).toHaveClass('custom-link');
|
|
28
|
-
});
|
|
29
|
-
it('renders the link with the correct children', () => {
|
|
30
|
-
render(React.createElement(Link, { ...defaultProps }));
|
|
31
|
-
expect(screen.getByText('Click here')).toBeInTheDocument();
|
|
32
|
-
});
|
|
33
|
-
it('renders with default target when not specified', () => {
|
|
34
|
-
const propsWithoutTarget = {
|
|
35
|
-
href: defaultProps.href,
|
|
36
|
-
rel: defaultProps.rel,
|
|
37
|
-
className: defaultProps.className,
|
|
38
|
-
children: defaultProps.children,
|
|
39
|
-
};
|
|
40
|
-
render(React.createElement(Link, { ...propsWithoutTarget }));
|
|
41
|
-
expect(screen.getByText('Click here')).toHaveAttribute('target', LINK_TARGET.Self);
|
|
42
|
-
});
|
|
43
|
-
it('applies additional props to the link element', () => {
|
|
44
|
-
render(React.createElement(Link, { ...defaultProps, "data-testid": "custom-link" }));
|
|
45
|
-
expect(screen.getByTestId('custom-link')).toBeInTheDocument();
|
|
46
|
-
});
|
|
47
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from "./Link";
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
const GetDirectionAction = ({ title, titleClasses, location, locationClasses, hours, hoursClasses, directionsLink, buttonName = 'Get Directions', }) => {
|
|
3
|
-
return (React.createElement("div", { className: "direction-action-container" },
|
|
4
|
-
React.createElement("h3", { className: titleClasses }, title),
|
|
5
|
-
React.createElement("p", { className: locationClasses }, location),
|
|
6
|
-
React.createElement("p", { className: hoursClasses }, hours),
|
|
7
|
-
React.createElement("a", { href: directionsLink, target: "_blank", rel: "noopener noreferrer", className: "directions-link" }, buttonName)));
|
|
8
|
-
};
|
|
9
|
-
export default GetDirectionAction;
|