react-restyle-components 0.1.43 → 0.1.45

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.
Files changed (135) hide show
  1. package/lib/cjs/App.js +36 -12
  2. package/lib/cjs/App.test.js +10 -8
  3. package/lib/cjs/core-components/atoms/buttons/button.stories.js +26 -44
  4. package/lib/cjs/core-components/atoms/buttons/button.stories.js.map +1 -1
  5. package/lib/cjs/core-components/atoms/buttons/buttons.component.js +27 -9
  6. package/lib/cjs/core-components/atoms/buttons/buttons.test.js +15 -7
  7. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +102 -35
  8. package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +17 -17
  9. package/lib/cjs/core-components/atoms/check-box/checkBox.test.js +15 -7
  10. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +98 -37
  11. package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +17 -15
  12. package/lib/cjs/core-components/atoms/date-picker/date-picker.test.js +16 -7
  13. package/lib/cjs/core-components/atoms/form/form.component.js +571 -159
  14. package/lib/cjs/core-components/atoms/form/form.test.js +87 -59
  15. package/lib/cjs/core-components/atoms/icons/icons.component.js +40 -26
  16. package/lib/cjs/core-components/atoms/input/input-otp.component.js +118 -76
  17. package/lib/cjs/core-components/atoms/input/input-pin.component.js +180 -98
  18. package/lib/cjs/core-components/atoms/input/input-pin.stories.js +14 -14
  19. package/lib/cjs/core-components/atoms/input/input-pin.test.js +28 -10
  20. package/lib/cjs/core-components/atoms/input/input.component.js +104 -33
  21. package/lib/cjs/core-components/atoms/input/input.stories.js +15 -15
  22. package/lib/cjs/core-components/atoms/input/input.test.js +30 -10
  23. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +127 -53
  24. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +12 -12
  25. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.test.js +16 -7
  26. package/lib/cjs/core-components/atoms/loader/loader.component.js +83 -21
  27. package/lib/cjs/core-components/atoms/loader/loader.stories.js +8 -8
  28. package/lib/cjs/core-components/atoms/loader/loader.test.js +11 -7
  29. package/lib/cjs/core-components/atoms/radio/radio.component.js +102 -37
  30. package/lib/cjs/core-components/atoms/radio/radio.stories.js +16 -16
  31. package/lib/cjs/core-components/atoms/radio/radio.test.js +15 -7
  32. package/lib/cjs/core-components/atoms/stepper/stepper.component.js +77 -34
  33. package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +13 -13
  34. package/lib/cjs/core-components/atoms/stepper/stepper.test.js +16 -7
  35. package/lib/cjs/core-components/atoms/stepper/stepper.test.js.map +1 -1
  36. package/lib/cjs/core-components/atoms/tabs/tabs.component.js +95 -0
  37. package/lib/cjs/core-components/atoms/tabs/tabs.component.js.map +1 -0
  38. package/lib/cjs/core-components/atoms/tabs/tabs.stories.js +26 -0
  39. package/lib/cjs/core-components/atoms/tabs/tabs.stories.js.map +1 -0
  40. package/lib/cjs/core-components/atoms/tabs/tabs.test.js +26 -0
  41. package/lib/cjs/core-components/atoms/tabs/tabs.test.js.map +1 -0
  42. package/lib/cjs/core-components/atoms/timer/timer.component.js +119 -92
  43. package/lib/cjs/core-components/atoms/timer/timer.test.js +20 -10
  44. package/lib/cjs/core-components/atoms/tooltip/tooltip.component.js +85 -45
  45. package/lib/cjs/core-components/atoms/tooltip/tooltip.component.test.js +13 -9
  46. package/lib/cjs/core-components/atoms/tooltip/tooltip.stories.js +8 -8
  47. package/lib/cjs/core-components/index.js +65 -26
  48. package/lib/cjs/core-components/index.js.map +1 -1
  49. package/lib/cjs/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +210 -106
  50. package/lib/cjs/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js +23 -9
  51. package/lib/cjs/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +38 -36
  52. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +226 -0
  53. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js.map +1 -0
  54. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js +34 -0
  55. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js.map +1 -0
  56. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +34 -0
  57. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js.map +1 -0
  58. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.component.js +203 -106
  59. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +8 -8
  60. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.test.js +14 -7
  61. package/lib/cjs/core-components/molecules/css-multiline-input/css-properties.js +159 -159
  62. package/lib/cjs/core-utils/index.js +31 -15
  63. package/lib/cjs/core-utils/unit-test.utils.js +8 -6
  64. package/lib/cjs/index.js +31 -15
  65. package/lib/cjs/library/assets/svg/index.js +39 -13
  66. package/lib/cjs/reportWebVitals.js +1 -1
  67. package/lib/cjs/setupTests.js +1 -1
  68. package/lib/esm/App.js +34 -12
  69. package/lib/esm/App.test.js +8 -8
  70. package/lib/esm/core-components/atoms/buttons/button.stories.js +24 -44
  71. package/lib/esm/core-components/atoms/buttons/button.stories.js.map +1 -1
  72. package/lib/esm/core-components/atoms/buttons/buttons.component.js +23 -7
  73. package/lib/esm/core-components/atoms/buttons/buttons.test.js +13 -7
  74. package/lib/esm/core-components/atoms/check-box/checkBox.component.js +65 -19
  75. package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +18 -18
  76. package/lib/esm/core-components/atoms/check-box/checkBox.test.js +13 -7
  77. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +54 -21
  78. package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +14 -14
  79. package/lib/esm/core-components/atoms/date-picker/date-picker.test.js +15 -8
  80. package/lib/esm/core-components/atoms/form/form.component.js +513 -138
  81. package/lib/esm/core-components/atoms/form/form.test.js +78 -60
  82. package/lib/esm/core-components/atoms/icons/icons.component.js +36 -24
  83. package/lib/esm/core-components/atoms/input/input-otp.component.js +80 -59
  84. package/lib/esm/core-components/atoms/input/input-pin.component.js +142 -81
  85. package/lib/esm/core-components/atoms/input/input-pin.stories.js +15 -15
  86. package/lib/esm/core-components/atoms/input/input-pin.test.js +26 -10
  87. package/lib/esm/core-components/atoms/input/input.component.js +66 -16
  88. package/lib/esm/core-components/atoms/input/input.stories.js +16 -16
  89. package/lib/esm/core-components/atoms/input/input.test.js +28 -10
  90. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +95 -36
  91. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +13 -13
  92. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.test.js +14 -7
  93. package/lib/esm/core-components/atoms/loader/loader.component.js +80 -20
  94. package/lib/esm/core-components/atoms/loader/loader.stories.js +9 -9
  95. package/lib/esm/core-components/atoms/loader/loader.test.js +7 -7
  96. package/lib/esm/core-components/atoms/radio/radio.component.js +65 -21
  97. package/lib/esm/core-components/atoms/radio/radio.stories.js +17 -17
  98. package/lib/esm/core-components/atoms/radio/radio.test.js +13 -7
  99. package/lib/esm/core-components/atoms/stepper/stepper.component.js +74 -32
  100. package/lib/esm/core-components/atoms/stepper/stepper.stories.js +14 -14
  101. package/lib/esm/core-components/atoms/stepper/stepper.test.js +14 -7
  102. package/lib/esm/core-components/atoms/stepper/stepper.test.js.map +1 -1
  103. package/lib/esm/core-components/atoms/tabs/tabs.component.js +47 -0
  104. package/lib/esm/core-components/atoms/tabs/tabs.component.js.map +1 -0
  105. package/lib/esm/core-components/atoms/tabs/tabs.stories.js +23 -0
  106. package/lib/esm/core-components/atoms/tabs/tabs.stories.js.map +1 -0
  107. package/lib/esm/core-components/atoms/tabs/tabs.test.js +19 -0
  108. package/lib/esm/core-components/atoms/tabs/tabs.test.js.map +1 -0
  109. package/lib/esm/core-components/atoms/timer/timer.component.js +81 -75
  110. package/lib/esm/core-components/atoms/timer/timer.test.js +10 -10
  111. package/lib/esm/core-components/atoms/tooltip/tooltip.component.js +46 -25
  112. package/lib/esm/core-components/atoms/tooltip/tooltip.component.test.js +9 -9
  113. package/lib/esm/core-components/atoms/tooltip/tooltip.stories.js +9 -9
  114. package/lib/esm/core-components/index.js +19 -17
  115. package/lib/esm/core-components/index.js.map +1 -1
  116. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +170 -88
  117. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.test.js +17 -9
  118. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +38 -37
  119. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +177 -0
  120. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js.map +1 -0
  121. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js +23 -0
  122. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.test.js.map +1 -0
  123. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +30 -0
  124. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js.map +1 -0
  125. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.component.js +166 -90
  126. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +9 -9
  127. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.test.js +9 -7
  128. package/lib/esm/core-components/molecules/css-multiline-input/css-properties.js +159 -159
  129. package/lib/esm/core-utils/index.js +2 -2
  130. package/lib/esm/core-utils/unit-test.utils.js +5 -5
  131. package/lib/esm/index.js +2 -2
  132. package/lib/esm/library/assets/svg/index.js +19 -10
  133. package/lib/esm/reportWebVitals.js +1 -1
  134. package/lib/esm/setupTests.js +2 -2
  135. package/package.json +3 -1
@@ -1,13 +1,29 @@
1
1
  /* eslint-disable testing-library/render-result-naming-convention */
2
- import React from 'react';
3
- import { render } from '@core-utils';
4
- import { InputPin } from './input-pin.component';
5
- it('render InputOtp correctly without error', () => {
6
- const pinInput = render(React.createElement(InputPin, { title: "Enter your Aadhaar Number", hasError: false, errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number", onPinChanged: () => jest.fn(), defaultPin: [] }));
7
- expect(pinInput).toMatchSnapshot();
2
+ import React from "react";
3
+ import { render } from "@core-utils";
4
+ import { InputPin } from "./input-pin.component";
5
+ it("render InputOtp correctly without error", () => {
6
+ const pinInput = render(
7
+ React.createElement(InputPin, {
8
+ title: "Enter your Aadhaar Number",
9
+ hasError: false,
10
+ errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number",
11
+ onPinChanged: () => jest.fn(),
12
+ defaultPin: [],
13
+ }),
14
+ );
15
+ expect(pinInput).toMatchSnapshot();
8
16
  });
9
- it('render InputOtp correctly with error', () => {
10
- const pinInput = render(React.createElement(InputPin, { title: "Enter your Aadhaar Number", hasError: true, errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number", onPinChanged: () => jest.fn(), defaultPin: [] }));
11
- expect(pinInput).toMatchSnapshot();
17
+ it("render InputOtp correctly with error", () => {
18
+ const pinInput = render(
19
+ React.createElement(InputPin, {
20
+ title: "Enter your Aadhaar Number",
21
+ hasError: true,
22
+ errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number",
23
+ onPinChanged: () => jest.fn(),
24
+ defaultPin: [],
25
+ }),
26
+ );
27
+ expect(pinInput).toMatchSnapshot();
12
28
  });
13
- //# sourceMappingURL=input-pin.test.js.map
29
+ //# sourceMappingURL=input-pin.test.js.map
@@ -1,18 +1,68 @@
1
1
  /* eslint-disable no-console */
2
- import React, { useState } from 'react';
3
- import './input.styles.css';
4
- export const Input = ({ title, defaultValue, className, disable, hasError, errorMsg, defaultMsg, inputStyle, autoComplete, maxlength = 40, onChange, onBlur, }) => {
5
- const [value, setValue] = useState(defaultValue);
6
- const onKeyUpValue = (event) => {
7
- onChange(event.target.value);
8
- };
9
- return (React.createElement("div", { className: `${className} relative` },
10
- React.createElement("input", { "data-testid": "inputElement", type: "text", name: "name", value: value, placeholder: " ", disabled: disable, className: `pt-3 pb-2 bg-transparent block w-full px-0 mt-0 rounded-none border-0 border-b appearance-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular ${inputStyle}`, onChange: (e) => {
11
- setValue(e.target.value);
12
- onChange && onChange(e.target.value);
13
- }, onKeyUp: onKeyUpValue, onBlur: (e) => onBlur && onBlur(e.target.value), autoComplete: autoComplete, maxLength: maxlength }),
14
- React.createElement("label", { className: "absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md" }, title),
15
- hasError && (hasError === null || hasError === void 0 ? void 0 : hasError.type) !== 'required' && (React.createElement("span", { className: "text-sm text-red text-4xs", id: "error" }, `${errorMsg || ''}`)),
16
- (!hasError || (hasError === null || hasError === void 0 ? void 0 : hasError.type) === 'required') && (React.createElement("span", { className: "text-sm text-4xs", id: "error" }, `${defaultMsg || ''}`))));
2
+ import React, { useState } from "react";
3
+ import "./input.styles.css";
4
+ export const Input = ({
5
+ title,
6
+ defaultValue,
7
+ className,
8
+ disable,
9
+ hasError,
10
+ errorMsg,
11
+ defaultMsg,
12
+ inputStyle,
13
+ autoComplete,
14
+ maxlength = 40,
15
+ onChange,
16
+ onBlur,
17
+ }) => {
18
+ const [value, setValue] = useState(defaultValue);
19
+ const onKeyUpValue = (event) => {
20
+ onChange(event.target.value);
21
+ };
22
+ return React.createElement(
23
+ "div",
24
+ { className: `${className} relative` },
25
+ React.createElement("input", {
26
+ "data-testid": "inputElement",
27
+ type: "text",
28
+ name: "name",
29
+ value: value,
30
+ placeholder: " ",
31
+ disabled: disable,
32
+ className: `pt-3 pb-2 bg-transparent block w-full px-0 mt-0 rounded-none border-0 border-b appearance-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular ${inputStyle}`,
33
+ onChange: (e) => {
34
+ setValue(e.target.value);
35
+ onChange && onChange(e.target.value);
36
+ },
37
+ onKeyUp: onKeyUpValue,
38
+ onBlur: (e) => onBlur && onBlur(e.target.value),
39
+ autoComplete: autoComplete,
40
+ maxLength: maxlength,
41
+ }),
42
+ React.createElement(
43
+ "label",
44
+ {
45
+ className:
46
+ "absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md",
47
+ },
48
+ title,
49
+ ),
50
+ hasError &&
51
+ (hasError === null || hasError === void 0 ? void 0 : hasError.type) !==
52
+ "required" &&
53
+ React.createElement(
54
+ "span",
55
+ { className: "text-sm text-red text-4xs", id: "error" },
56
+ `${errorMsg || ""}`,
57
+ ),
58
+ (!hasError ||
59
+ (hasError === null || hasError === void 0 ? void 0 : hasError.type) ===
60
+ "required") &&
61
+ React.createElement(
62
+ "span",
63
+ { className: "text-sm text-4xs", id: "error" },
64
+ `${defaultMsg || ""}`,
65
+ ),
66
+ );
17
67
  };
18
- //# sourceMappingURL=input.component.js.map
68
+ //# sourceMappingURL=input.component.js.map
@@ -1,22 +1,22 @@
1
- import { Input } from './input.component';
1
+ import { Input } from "./input.component";
2
2
  const meta = {
3
- title: 'Design System/Atoms/Input',
4
- component: Input,
5
- tags: ['autodocs'],
3
+ title: "Design System/Atoms/Input",
4
+ component: Input,
5
+ tags: ["autodocs"],
6
6
  };
7
7
  export default meta;
8
8
  export const Primary = {
9
- args: {
10
- className: 'mt-4',
11
- title: 'Enter your Pan Number',
12
- hasError: true,
13
- defaultValue: '',
14
- onChange: (item) => {
15
- console.log({ item });
16
- },
17
- onBlur: (item) => {
18
- console.log({ item });
19
- },
9
+ args: {
10
+ className: "mt-4",
11
+ title: "Enter your Pan Number",
12
+ hasError: true,
13
+ defaultValue: "",
14
+ onChange: (item) => {
15
+ console.log({ item });
20
16
  },
17
+ onBlur: (item) => {
18
+ console.log({ item });
19
+ },
20
+ },
21
21
  };
22
- //# sourceMappingURL=input.stories.js.map
22
+ //# sourceMappingURL=input.stories.js.map
@@ -1,13 +1,31 @@
1
1
  /* eslint-disable testing-library/render-result-naming-convention */
2
- import React from 'react';
3
- import { render } from '@core-utils';
4
- import { Input } from './input.component';
5
- it('render Input correctly without error', () => {
6
- const input = render(React.createElement(Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: false, defaultValue: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
7
- expect(input).toMatchSnapshot();
2
+ import React from "react";
3
+ import { render } from "@core-utils";
4
+ import { Input } from "./input.component";
5
+ it("render Input correctly without error", () => {
6
+ const input = render(
7
+ React.createElement(Input, {
8
+ className: "h-1 relative top-1 border-red-600 border-b-0 dummy",
9
+ title: "input",
10
+ hasError: false,
11
+ defaultValue: "",
12
+ inputStyle: " border-b-0 invisible ",
13
+ onChange: () => jest.fn(),
14
+ }),
15
+ );
16
+ expect(input).toMatchSnapshot();
8
17
  });
9
- it('render Input correctly with error', () => {
10
- const input = render(React.createElement(Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: true, defaultValue: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
11
- expect(input).toMatchSnapshot();
18
+ it("render Input correctly with error", () => {
19
+ const input = render(
20
+ React.createElement(Input, {
21
+ className: "h-1 relative top-1 border-red-600 border-b-0 dummy",
22
+ title: "input",
23
+ hasError: true,
24
+ defaultValue: "",
25
+ inputStyle: " border-b-0 invisible ",
26
+ onChange: () => jest.fn(),
27
+ }),
28
+ );
29
+ expect(input).toMatchSnapshot();
12
30
  });
13
- //# sourceMappingURL=input.test.js.map
31
+ //# sourceMappingURL=input.test.js.map
@@ -1,37 +1,96 @@
1
- import React, { useState, useEffect, useRef } from 'react';
2
- import { UpArrow, DownArrow } from '../../../library/assets/svg';
3
- export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
4
- const [isOpen, setIsOpen] = useState(false);
5
- const [value, setValue] = useState('');
6
- const useOutsideAlerter = (ref) => {
7
- useEffect(() => {
8
- function handleClickOutside(event) {
9
- if (ref.current &&
10
- !ref.current.contains(event.target) &&
11
- isOpen &&
12
- isOpen)
13
- setIsOpen(!isOpen);
14
- }
15
- document.addEventListener('mousedown', handleClickOutside);
16
- return () => {
17
- document.removeEventListener('mousedown', handleClickOutside);
18
- };
19
- }, [ref]);
20
- };
21
- const wrapperRef = useRef(null);
22
- useOutsideAlerter(wrapperRef);
23
- return (React.createElement("div", { className: `${className} relative` },
24
- React.createElement("div", { className: "flex flex-row items-center " },
25
- React.createElement("input", { type: "text", name: "name", placeholder: title, value: value, className: " pt-3 pb-2 w-full px-0 mt-0 bg-transparent border-gray-secondary border-0 border-b appearance-none focus:outline-none focus:ring-0 font-nunitoSansRegular text-md", onClick: () => {
26
- setIsOpen(!isOpen);
27
- }, onChange: (event) => onChange && onChange(event.target.value) }),
28
- !isOpen && (React.createElement("img", { src: UpArrow, className: "absolute h-4 w-4 right-0" })),
29
- isOpen && (React.createElement("img", { src: DownArrow, className: "absolute h-4 w-4 right-0" }))),
30
- isOpen && (React.createElement("div", { className: "z-10 w-full absolute text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700", ref: wrapperRef },
31
- React.createElement("ul", { className: "py-1" }, items.map((item, index) => (React.createElement("li", { key: index, className: "block py-2 px-4 text-md hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 font-nunitoSansRegular", onClick: () => {
32
- setValue(item);
33
- setIsOpen(!isOpen);
34
- } }, item)))))),
35
- hasError && (React.createElement("span", { className: "text-primaryCharcoal text-4xs", id: "error" }, `${title} is required`))));
1
+ import React, { useState, useEffect, useRef } from "react";
2
+ import { UpArrow, DownArrow } from "../../../library/assets/svg";
3
+ export const InputDropdown = ({
4
+ items,
5
+ className,
6
+ hasError,
7
+ title,
8
+ onChange,
9
+ }) => {
10
+ const [isOpen, setIsOpen] = useState(false);
11
+ const [value, setValue] = useState("");
12
+ const useOutsideAlerter = (ref) => {
13
+ useEffect(() => {
14
+ function handleClickOutside(event) {
15
+ if (
16
+ ref.current &&
17
+ !ref.current.contains(event.target) &&
18
+ isOpen &&
19
+ isOpen
20
+ )
21
+ setIsOpen(!isOpen);
22
+ }
23
+ document.addEventListener("mousedown", handleClickOutside);
24
+ return () => {
25
+ document.removeEventListener("mousedown", handleClickOutside);
26
+ };
27
+ }, [ref]);
28
+ };
29
+ const wrapperRef = useRef(null);
30
+ useOutsideAlerter(wrapperRef);
31
+ return React.createElement(
32
+ "div",
33
+ { className: `${className} relative` },
34
+ React.createElement(
35
+ "div",
36
+ { className: "flex flex-row items-center " },
37
+ React.createElement("input", {
38
+ type: "text",
39
+ name: "name",
40
+ placeholder: title,
41
+ value: value,
42
+ className:
43
+ " pt-3 pb-2 w-full px-0 mt-0 bg-transparent border-gray-secondary border-0 border-b appearance-none focus:outline-none focus:ring-0 font-nunitoSansRegular text-md",
44
+ onClick: () => {
45
+ setIsOpen(!isOpen);
46
+ },
47
+ onChange: (event) => onChange && onChange(event.target.value),
48
+ }),
49
+ !isOpen &&
50
+ React.createElement("img", {
51
+ src: UpArrow,
52
+ className: "absolute h-4 w-4 right-0",
53
+ }),
54
+ isOpen &&
55
+ React.createElement("img", {
56
+ src: DownArrow,
57
+ className: "absolute h-4 w-4 right-0",
58
+ }),
59
+ ),
60
+ isOpen &&
61
+ React.createElement(
62
+ "div",
63
+ {
64
+ className:
65
+ "z-10 w-full absolute text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700",
66
+ ref: wrapperRef,
67
+ },
68
+ React.createElement(
69
+ "ul",
70
+ { className: "py-1" },
71
+ items.map((item, index) =>
72
+ React.createElement(
73
+ "li",
74
+ {
75
+ key: index,
76
+ className:
77
+ "block py-2 px-4 text-md hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 font-nunitoSansRegular",
78
+ onClick: () => {
79
+ setValue(item);
80
+ setIsOpen(!isOpen);
81
+ },
82
+ },
83
+ item,
84
+ ),
85
+ ),
86
+ ),
87
+ ),
88
+ hasError &&
89
+ React.createElement(
90
+ "span",
91
+ { className: "text-primaryCharcoal text-4xs", id: "error" },
92
+ `${title} is required`,
93
+ ),
94
+ );
36
95
  };
37
- //# sourceMappingURL=input-dropdown.component.js.map
96
+ //# sourceMappingURL=input-dropdown.component.js.map
@@ -1,18 +1,18 @@
1
- import { InputDropdown } from './input-dropdown.component';
1
+ import { InputDropdown } from "./input-dropdown.component";
2
2
  const meta = {
3
- title: 'Design System/Atoms/InputDropdown',
4
- component: InputDropdown,
5
- tags: ['autodocs'],
6
- parameters: {
7
- componentSubtitle: `import { InputDropdown } from 'react-restyle-components'`,
8
- },
3
+ title: "Design System/Atoms/InputDropdown",
4
+ component: InputDropdown,
5
+ tags: ["autodocs"],
6
+ parameters: {
7
+ componentSubtitle: `import { InputDropdown } from 'react-restyle-components'`,
8
+ },
9
9
  };
10
10
  export default meta;
11
11
  export const Primary = {
12
- args: {
13
- title: 'Source of funds',
14
- items: ['Bank account', 'UPI', 'Credit Card'],
15
- hasError: true,
16
- },
12
+ args: {
13
+ title: "Source of funds",
14
+ items: ["Bank account", "UPI", "Credit Card"],
15
+ hasError: true,
16
+ },
17
17
  };
18
- //# sourceMappingURL=input-dropdown.stories.js.map
18
+ //# sourceMappingURL=input-dropdown.stories.js.map
@@ -1,9 +1,16 @@
1
1
  /* eslint-disable testing-library/render-result-naming-convention */
2
- import React from 'react';
3
- import { render } from '@core-utils';
4
- import { InputDropdown } from './input-dropdown.component';
5
- it('render InputDropdown correctly', () => {
6
- const inputDropDown = render(React.createElement(InputDropdown, { title: "Source of funds", items: ['Bank account', 'UPI', 'Credit Card'], hasError: true, onChange: () => jest.fn() }));
7
- expect(inputDropDown).toMatchSnapshot();
2
+ import React from "react";
3
+ import { render } from "@core-utils";
4
+ import { InputDropdown } from "./input-dropdown.component";
5
+ it("render InputDropdown correctly", () => {
6
+ const inputDropDown = render(
7
+ React.createElement(InputDropdown, {
8
+ title: "Source of funds",
9
+ items: ["Bank account", "UPI", "Credit Card"],
10
+ hasError: true,
11
+ onChange: () => jest.fn(),
12
+ }),
13
+ );
14
+ expect(inputDropDown).toMatchSnapshot();
8
15
  });
9
- //# sourceMappingURL=input-dropdown.test.js.map
16
+ //# sourceMappingURL=input-dropdown.test.js.map
@@ -1,16 +1,48 @@
1
- import React from 'react';
2
- import { Container, Row, Spinner } from 'reactstrap';
3
- export const Loader = () => (React.createElement(Container, { fluid: true, className: "vh-50 d-flex" },
4
- React.createElement(Row, { className: "justify-content-center align-self-center w-100 text-center" },
5
- React.createElement(Spinner, { color: "primary" }))));
1
+ import React from "react";
2
+ import { Container, Row, Spinner } from "reactstrap";
3
+ export const Loader = () =>
4
+ React.createElement(
5
+ Container,
6
+ { fluid: true, className: "vh-50 d-flex" },
7
+ React.createElement(
8
+ Row,
9
+ {
10
+ className: "justify-content-center align-self-center w-100 text-center",
11
+ },
12
+ React.createElement(Spinner, { color: "primary" }),
13
+ ),
14
+ );
6
15
  export const ModalLoader = () => {
7
- return (React.createElement(React.Fragment, null,
8
- React.createElement(React.Fragment, null,
9
- React.createElement("div", { className: "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none" },
10
- React.createElement("div", { className: "relative mx-auto " },
11
- React.createElement("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none" },
12
- React.createElement("div", { className: "relative p-2 flex-auto flex flex-col items-center" },
13
- React.createElement("style", null, `
16
+ return React.createElement(
17
+ React.Fragment,
18
+ null,
19
+ React.createElement(
20
+ React.Fragment,
21
+ null,
22
+ React.createElement(
23
+ "div",
24
+ {
25
+ className:
26
+ "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none",
27
+ },
28
+ React.createElement(
29
+ "div",
30
+ { className: "relative mx-auto " },
31
+ React.createElement(
32
+ "div",
33
+ {
34
+ className:
35
+ "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none",
36
+ },
37
+ React.createElement(
38
+ "div",
39
+ {
40
+ className: "relative p-2 flex-auto flex flex-col items-center",
41
+ },
42
+ React.createElement(
43
+ "style",
44
+ null,
45
+ `
14
46
  .spinner .background {
15
47
  fill: #555;
16
48
  }
@@ -42,12 +74,40 @@ export const ModalLoader = () => {
42
74
  transform: rotate(360deg);
43
75
  }
44
76
  }
45
- `),
46
- React.createElement("svg", { className: "spinner", width: "100", height: "100", viewBox: "0 0 100 100" },
47
- React.createElement("circle", { className: "background", cx: "0", cy: "0" }),
48
- React.createElement("path", { className: "line", d: "M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50" })),
49
- ' ',
50
- React.createElement("span", { style: { marginTop: -15 } }, "loading ..."))))),
51
- React.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" }))));
77
+ `,
78
+ ),
79
+ React.createElement(
80
+ "svg",
81
+ {
82
+ className: "spinner",
83
+ width: "100",
84
+ height: "100",
85
+ viewBox: "0 0 100 100",
86
+ },
87
+ React.createElement("circle", {
88
+ className: "background",
89
+ cx: "0",
90
+ cy: "0",
91
+ }),
92
+ React.createElement("path", {
93
+ className: "line",
94
+ d: "M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50",
95
+ }),
96
+ ),
97
+ " ",
98
+ React.createElement(
99
+ "span",
100
+ { style: { marginTop: -15 } },
101
+ "loading ...",
102
+ ),
103
+ ),
104
+ ),
105
+ ),
106
+ ),
107
+ React.createElement("div", {
108
+ className: "opacity-25 fixed inset-0 z-40 bg-black",
109
+ }),
110
+ ),
111
+ );
52
112
  };
53
- //# sourceMappingURL=loader.component.js.map
113
+ //# sourceMappingURL=loader.component.js.map
@@ -1,14 +1,14 @@
1
- import { Loader } from './loader.component';
1
+ import { Loader } from "./loader.component";
2
2
  const meta = {
3
- title: 'Design System/Atoms/Loader',
4
- component: Loader,
5
- tags: ['autodocs'],
6
- parameters: {
7
- componentSubtitle: `import { Loader } from 'react-restyle-components'`,
8
- },
3
+ title: "Design System/Atoms/Loader",
4
+ component: Loader,
5
+ tags: ["autodocs"],
6
+ parameters: {
7
+ componentSubtitle: `import { Loader } from 'react-restyle-components'`,
8
+ },
9
9
  };
10
10
  export default meta;
11
11
  export const Primary = {
12
- args: {},
12
+ args: {},
13
13
  };
14
- //# sourceMappingURL=loader.stories.js.map
14
+ //# sourceMappingURL=loader.stories.js.map
@@ -1,9 +1,9 @@
1
1
  /* eslint-disable testing-library/render-result-naming-convention */
2
- import React from 'react';
3
- import { render } from '@core-utils';
4
- import { Loader } from './loader.component';
5
- it('render Loader correctly', () => {
6
- const loader = render(React.createElement(Loader, null));
7
- expect(loader).toMatchSnapshot();
2
+ import React from "react";
3
+ import { render } from "@core-utils";
4
+ import { Loader } from "./loader.component";
5
+ it("render Loader correctly", () => {
6
+ const loader = render(React.createElement(Loader, null));
7
+ expect(loader).toMatchSnapshot();
8
8
  });
9
- //# sourceMappingURL=loader.test.js.map
9
+ //# sourceMappingURL=loader.test.js.map
@@ -1,22 +1,66 @@
1
- import React, { useState } from 'react';
2
- import { CheckedRadio, UncheckRadio } from '../../../library/assets/svg';
3
- import { InputWrapper } from '../form/form.component';
4
- export const Radio = ({ title = 'Source', data = [], className, onChange, }) => {
5
- const [list, setList] = useState(data);
6
- const width = 20;
7
- return (React.createElement(React.Fragment, null,
8
- React.createElement(InputWrapper, { label: title }, list === null || list === void 0 ? void 0 : list.map((item, index) => (React.createElement("div", { className: `${className} flex items-center mb-1`, onClick: () => {
9
- const result = list === null || list === void 0 ? void 0 : list.map((e, i) => {
10
- if (i == index)
11
- return Object.assign(Object.assign({}, e), { checked: true });
12
- else
13
- return Object.assign(Object.assign({}, e), { checked: false });
14
- });
15
- setList(result);
16
- onChange(result === null || result === void 0 ? void 0 : result.find((item) => item.checked));
17
- }, key: index },
18
- React.createElement("div", { className: "flex flex-row gap-1 items-center" },
19
- item.checked ? (React.createElement(CheckedRadio, { width: width, height: width })) : (React.createElement(UncheckRadio, { width: width, height: width })),
20
- React.createElement("span", { className: "text-4xs" }, item === null || item === void 0 ? void 0 : item.title))))))));
1
+ import React, { useState } from "react";
2
+ import { CheckedRadio, UncheckRadio } from "../../../library/assets/svg";
3
+ import { InputWrapper } from "../form/form.component";
4
+ export const Radio = ({ title = "Source", data = [], className, onChange }) => {
5
+ const [list, setList] = useState(data);
6
+ const width = 20;
7
+ return React.createElement(
8
+ React.Fragment,
9
+ null,
10
+ React.createElement(
11
+ InputWrapper,
12
+ { label: title },
13
+ list === null || list === void 0
14
+ ? void 0
15
+ : list.map((item, index) =>
16
+ React.createElement(
17
+ "div",
18
+ {
19
+ className: `${className} flex items-center mb-1`,
20
+ onClick: () => {
21
+ const result =
22
+ list === null || list === void 0
23
+ ? void 0
24
+ : list.map((e, i) => {
25
+ if (i == index)
26
+ return Object.assign(Object.assign({}, e), {
27
+ checked: true,
28
+ });
29
+ else
30
+ return Object.assign(Object.assign({}, e), {
31
+ checked: false,
32
+ });
33
+ });
34
+ setList(result);
35
+ onChange(
36
+ result === null || result === void 0
37
+ ? void 0
38
+ : result.find((item) => item.checked),
39
+ );
40
+ },
41
+ key: index,
42
+ },
43
+ React.createElement(
44
+ "div",
45
+ { className: "flex flex-row gap-1 items-center" },
46
+ item.checked
47
+ ? React.createElement(CheckedRadio, {
48
+ width: width,
49
+ height: width,
50
+ })
51
+ : React.createElement(UncheckRadio, {
52
+ width: width,
53
+ height: width,
54
+ }),
55
+ React.createElement(
56
+ "span",
57
+ { className: "text-4xs" },
58
+ item === null || item === void 0 ? void 0 : item.title,
59
+ ),
60
+ ),
61
+ ),
62
+ ),
63
+ ),
64
+ );
21
65
  };
22
- //# sourceMappingURL=radio.component.js.map
66
+ //# sourceMappingURL=radio.component.js.map