react-restyle-components 0.1.28 → 0.1.31

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 (93) 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 +20 -8
  4. package/lib/cjs/core-components/atoms/buttons/buttons.component.js +17 -6
  5. package/lib/cjs/core-components/atoms/buttons/buttons.component.test.js +15 -7
  6. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +27 -11
  7. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js.map +1 -1
  8. package/lib/cjs/core-components/atoms/check-box/checkBox.component.test.js +14 -7
  9. package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +22 -9
  10. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +98 -38
  11. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js.map +1 -1
  12. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.test.js +15 -7
  13. package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +18 -8
  14. package/lib/cjs/core-components/atoms/input/input-otp.component.js +119 -77
  15. package/lib/cjs/core-components/atoms/input/input-otp.component.js.map +1 -1
  16. package/lib/cjs/core-components/atoms/input/input-otp.styles.css +35 -0
  17. package/lib/cjs/core-components/atoms/input/input-pin.component.js +174 -94
  18. package/lib/cjs/core-components/atoms/input/input-pin.component.test.js +28 -10
  19. package/lib/cjs/core-components/atoms/input/input-pin.stories.js +17 -9
  20. package/lib/cjs/core-components/atoms/input/input.component.js +65 -13
  21. package/lib/cjs/core-components/atoms/input/input.component.test.js +30 -10
  22. package/lib/cjs/core-components/atoms/input/input.stories.js +16 -7
  23. package/lib/cjs/core-components/atoms/input/input.styles.css +35 -0
  24. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +134 -58
  25. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js.map +1 -1
  26. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.test.js +16 -7
  27. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +14 -7
  28. package/lib/cjs/core-components/atoms/loader/loader.component.js +83 -21
  29. package/lib/cjs/core-components/atoms/loader/loader.component.test.js +11 -7
  30. package/lib/cjs/core-components/atoms/loader/loader.stories.js +14 -8
  31. package/lib/cjs/core-components/atoms/radio/radio.component.js +22 -8
  32. package/lib/cjs/core-components/atoms/radio/radio.component.js.map +1 -1
  33. package/lib/cjs/core-components/atoms/radio/radio.component.test.js +14 -7
  34. package/lib/cjs/core-components/atoms/radio/radio.stories.js +22 -10
  35. package/lib/cjs/core-components/atoms/stepper/stepper.component.js +77 -34
  36. package/lib/cjs/core-components/atoms/stepper/stepper.component.test.js +16 -7
  37. package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +15 -7
  38. package/lib/cjs/core-components/atoms/timer/timer.component.js +120 -93
  39. package/lib/cjs/core-components/atoms/timer/timer.component.js.map +1 -1
  40. package/lib/cjs/core-components/atoms/timer/timer.component.test.js +20 -10
  41. package/lib/cjs/core-components/index.js +35 -16
  42. package/lib/cjs/core-utils/index.js +31 -15
  43. package/lib/cjs/core-utils/unit-test.utils.js +8 -6
  44. package/lib/cjs/index.js +31 -15
  45. package/lib/cjs/reportWebVitals.js +52 -29
  46. package/lib/cjs/setupTests.js +1 -1
  47. package/lib/esm/App.js +34 -12
  48. package/lib/esm/App.test.js +8 -8
  49. package/lib/esm/core-components/atoms/buttons/button.stories.js +17 -7
  50. package/lib/esm/core-components/atoms/buttons/buttons.component.js +13 -4
  51. package/lib/esm/core-components/atoms/buttons/buttons.component.test.js +13 -7
  52. package/lib/esm/core-components/atoms/check-box/checkBox.component.js +20 -9
  53. package/lib/esm/core-components/atoms/check-box/checkBox.component.js.map +1 -1
  54. package/lib/esm/core-components/atoms/check-box/checkBox.component.test.js +9 -7
  55. package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +16 -8
  56. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +52 -20
  57. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js.map +1 -1
  58. package/lib/esm/core-components/atoms/date-picker/date-picker.component.test.js +14 -8
  59. package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +16 -8
  60. package/lib/esm/core-components/atoms/input/input-otp.component.js +80 -59
  61. package/lib/esm/core-components/atoms/input/input-otp.component.js.map +1 -1
  62. package/lib/esm/core-components/atoms/input/input-otp.styles.css +35 -0
  63. package/lib/esm/core-components/atoms/input/input-pin.component.js +136 -77
  64. package/lib/esm/core-components/atoms/input/input-pin.component.test.js +26 -10
  65. package/lib/esm/core-components/atoms/input/input-pin.stories.js +14 -8
  66. package/lib/esm/core-components/atoms/input/input.component.js +62 -12
  67. package/lib/esm/core-components/atoms/input/input.component.test.js +28 -10
  68. package/lib/esm/core-components/atoms/input/input.stories.js +13 -6
  69. package/lib/esm/core-components/atoms/input/input.styles.css +35 -0
  70. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +96 -37
  71. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js.map +1 -1
  72. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.test.js +14 -7
  73. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +11 -6
  74. package/lib/esm/core-components/atoms/loader/loader.component.js +80 -20
  75. package/lib/esm/core-components/atoms/loader/loader.component.test.js +7 -7
  76. package/lib/esm/core-components/atoms/loader/loader.stories.js +11 -7
  77. package/lib/esm/core-components/atoms/radio/radio.component.js +12 -6
  78. package/lib/esm/core-components/atoms/radio/radio.component.js.map +1 -1
  79. package/lib/esm/core-components/atoms/radio/radio.component.test.js +9 -7
  80. package/lib/esm/core-components/atoms/radio/radio.stories.js +16 -9
  81. package/lib/esm/core-components/atoms/stepper/stepper.component.js +74 -32
  82. package/lib/esm/core-components/atoms/stepper/stepper.component.test.js +14 -7
  83. package/lib/esm/core-components/atoms/stepper/stepper.stories.js +12 -6
  84. package/lib/esm/core-components/atoms/timer/timer.component.js +81 -75
  85. package/lib/esm/core-components/atoms/timer/timer.component.js.map +1 -1
  86. package/lib/esm/core-components/atoms/timer/timer.component.test.js +10 -10
  87. package/lib/esm/core-components/index.js +12 -12
  88. package/lib/esm/core-utils/index.js +2 -2
  89. package/lib/esm/core-utils/unit-test.utils.js +5 -5
  90. package/lib/esm/index.js +2 -2
  91. package/lib/esm/reportWebVitals.js +10 -10
  92. package/lib/esm/setupTests.js +2 -2
  93. package/package.json +20 -4
@@ -1,21 +1,73 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  exports.Input = void 0;
7
9
  /* eslint-disable no-console */
8
10
  const react_1 = __importDefault(require("react"));
9
11
  require("./input.styles.css");
10
- const Input = ({ title, value, className, disable, hasError, errorMsg, defaultMsg, inputStyle, autoComplete, maxlength = 40, onChange, onBlur, }) => {
11
- const onKeyUpValue = (event) => {
12
- onChange(event.target.value);
13
- };
14
- return (react_1.default.createElement("div", { className: `${className} relative` },
15
- react_1.default.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) => onChange && onChange(e.target.value), onKeyUp: onKeyUpValue, onBlur: (e) => onBlur && onBlur(e.target.value), autoComplete: autoComplete, maxLength: maxlength }),
16
- react_1.default.createElement("label", { className: "absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md" }, title),
17
- hasError && (hasError === null || hasError === void 0 ? void 0 : hasError.type) !== 'required' && (react_1.default.createElement("span", { className: "text-sm text-red text-4xs", id: "error" }, `${errorMsg || ''}`)),
18
- (!hasError || (hasError === null || hasError === void 0 ? void 0 : hasError.type) === 'required') && (react_1.default.createElement("span", { className: "text-sm text-4xs", id: "error" }, `${defaultMsg || ''}`))));
12
+ const Input = ({
13
+ title,
14
+ value,
15
+ className,
16
+ disable,
17
+ hasError,
18
+ errorMsg,
19
+ defaultMsg,
20
+ inputStyle,
21
+ autoComplete,
22
+ maxlength = 40,
23
+ onChange,
24
+ onBlur,
25
+ }) => {
26
+ const onKeyUpValue = (event) => {
27
+ onChange(event.target.value);
28
+ };
29
+ return react_1.default.createElement(
30
+ "div",
31
+ { className: `${className} relative` },
32
+ react_1.default.createElement("input", {
33
+ "data-testid": "inputElement",
34
+ type: "text",
35
+ name: "name",
36
+ value: value,
37
+ placeholder: " ",
38
+ disabled: disable,
39
+ 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}`,
40
+ onChange: (e) => onChange && onChange(e.target.value),
41
+ onKeyUp: onKeyUpValue,
42
+ onBlur: (e) => onBlur && onBlur(e.target.value),
43
+ autoComplete: autoComplete,
44
+ maxLength: maxlength,
45
+ }),
46
+ react_1.default.createElement(
47
+ "label",
48
+ {
49
+ className:
50
+ "absolute duration-300 top-3 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md",
51
+ },
52
+ title
53
+ ),
54
+ hasError &&
55
+ (hasError === null || hasError === void 0 ? void 0 : hasError.type) !==
56
+ "required" &&
57
+ react_1.default.createElement(
58
+ "span",
59
+ { className: "text-sm text-red text-4xs", id: "error" },
60
+ `${errorMsg || ""}`
61
+ ),
62
+ (!hasError ||
63
+ (hasError === null || hasError === void 0 ? void 0 : hasError.type) ===
64
+ "required") &&
65
+ react_1.default.createElement(
66
+ "span",
67
+ { className: "text-sm text-4xs", id: "error" },
68
+ `${defaultMsg || ""}`
69
+ )
70
+ );
19
71
  };
20
72
  exports.Input = Input;
21
- //# sourceMappingURL=input.component.js.map
73
+ //# sourceMappingURL=input.component.js.map
@@ -1,18 +1,38 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  /* eslint-disable testing-library/render-result-naming-convention */
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const _core_utils_1 = require("@core-utils");
9
11
  const input_component_1 = require("./input.component");
10
- it('render Input correctly without error', () => {
11
- const input = (0, _core_utils_1.render)(react_1.default.createElement(input_component_1.Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: false, value: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
12
- expect(input).toMatchSnapshot();
12
+ it("render Input correctly without error", () => {
13
+ const input = (0, _core_utils_1.render)(
14
+ react_1.default.createElement(input_component_1.Input, {
15
+ className: "h-1 relative top-1 border-red-600 border-b-0 dummy",
16
+ title: "input",
17
+ hasError: false,
18
+ value: "",
19
+ inputStyle: " border-b-0 invisible ",
20
+ onChange: () => jest.fn(),
21
+ })
22
+ );
23
+ expect(input).toMatchSnapshot();
13
24
  });
14
- it('render Input correctly with error', () => {
15
- const input = (0, _core_utils_1.render)(react_1.default.createElement(input_component_1.Input, { className: "h-1 relative top-1 border-red-600 border-b-0 dummy", title: 'input', hasError: true, value: '', inputStyle: " border-b-0 invisible ", onChange: () => jest.fn() }));
16
- expect(input).toMatchSnapshot();
25
+ it("render Input correctly with error", () => {
26
+ const input = (0, _core_utils_1.render)(
27
+ react_1.default.createElement(input_component_1.Input, {
28
+ className: "h-1 relative top-1 border-red-600 border-b-0 dummy",
29
+ title: "input",
30
+ hasError: true,
31
+ value: "",
32
+ inputStyle: " border-b-0 invisible ",
33
+ onChange: () => jest.fn(),
34
+ })
35
+ );
36
+ expect(input).toMatchSnapshot();
17
37
  });
18
- //# sourceMappingURL=input.component.test.js.map
38
+ //# sourceMappingURL=input.component.test.js.map
@@ -1,17 +1,26 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  exports.Primary = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const input_component_1 = require("./input.component");
9
11
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
10
12
  exports.default = {
11
- title: 'Atoms/Input',
12
- component: input_component_1.Input,
13
+ title: "Atoms/Input",
14
+ component: input_component_1.Input,
13
15
  };
14
16
  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
15
- const Primary = () => (react_1.default.createElement(input_component_1.Input, { className: "mt-4", title: "Enter your Pan Number", hasError: true, value: "", onChange: (panNumber) => console.log({ panNumber }) }));
17
+ const Primary = () =>
18
+ react_1.default.createElement(input_component_1.Input, {
19
+ className: "mt-4",
20
+ title: "Enter your Pan Number",
21
+ hasError: true,
22
+ value: "",
23
+ onChange: (panNumber) => console.log({ panNumber }),
24
+ });
16
25
  exports.Primary = Primary;
17
- //# sourceMappingURL=input.stories.js.map
26
+ //# sourceMappingURL=input.stories.js.map
@@ -0,0 +1,35 @@
1
+ .-z-1 {
2
+ z-index: -1;
3
+ }
4
+
5
+ .origin-0 {
6
+ transform-origin: 0%;
7
+ }
8
+
9
+ input:focus ~ label,
10
+ input:not(:placeholder-shown) ~ label,
11
+ textarea:focus ~ label,
12
+ textarea:not(:placeholder-shown) ~ label,
13
+ select:focus ~ label,
14
+ select:not([value=""]):valid ~ label {
15
+ /* @apply transform; scale-75; -translate-y-6; */
16
+ --tw-translate-x: 0;
17
+ --tw-translate-y: 0;
18
+ --tw-rotate: 0;
19
+ --tw-skew-x: 0;
20
+ --tw-skew-y: 0;
21
+ transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
22
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
23
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
24
+ --tw-scale-x: 0.75;
25
+ --tw-scale-y: 0.75;
26
+ --tw-translate-y: -1.5rem;
27
+ }
28
+
29
+ input:focus ~ label,
30
+ select:focus ~ label {
31
+ /* @apply text-black; left-0; */
32
+ --tw-text-opacity: 1;
33
+ color: "#696969";
34
+ left: 0px;
35
+ }
@@ -1,68 +1,144 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
2
+ var __createBinding =
3
+ (this && this.__createBinding) ||
4
+ (Object.create
5
+ ? function (o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ var desc = Object.getOwnPropertyDescriptor(m, k);
8
+ if (
9
+ !desc ||
10
+ ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
11
+ ) {
12
+ desc = {
13
+ enumerable: true,
14
+ get: function () {
15
+ return m[k];
16
+ },
17
+ };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }
21
+ : function (o, m, k, k2) {
22
+ if (k2 === undefined) k2 = k;
23
+ o[k2] = m[k];
24
+ });
25
+ var __setModuleDefault =
26
+ (this && this.__setModuleDefault) ||
27
+ (Object.create
28
+ ? function (o, v) {
29
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
30
+ }
31
+ : function (o, v) {
32
+ o["default"] = v;
33
+ });
34
+ var __importStar =
35
+ (this && this.__importStar) ||
36
+ function (mod) {
19
37
  if (mod && mod.__esModule) return mod;
20
38
  var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
39
+ if (mod != null)
40
+ for (var k in mod)
41
+ if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
42
+ __createBinding(result, mod, k);
22
43
  __setModuleDefault(result, mod);
23
44
  return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
45
+ };
46
+ var __importDefault =
47
+ (this && this.__importDefault) ||
48
+ function (mod) {
49
+ return mod && mod.__esModule ? mod : { default: mod };
50
+ };
28
51
  Object.defineProperty(exports, "__esModule", { value: true });
29
52
  exports.InputDropdown = void 0;
30
53
  const react_1 = __importStar(require("react"));
31
- const UpArrow_svg_1 = __importDefault(require("../../../library/assets/svg/UpArrow.svg"));
32
- const DownArrow_svg_1 = __importDefault(require("../../../library/assets/svg/DownArrow.svg"));
33
- const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
34
- const [isOpen, setIsOpen] = (0, react_1.useState)(false);
35
- const [value, setValue] = (0, react_1.useState)('');
36
- const useOutsideAlerter = (ref) => {
37
- (0, react_1.useEffect)(() => {
38
- function handleClickOutside(event) {
39
- if (ref.current &&
40
- !ref.current.contains(event.target) &&
41
- isOpen &&
42
- isOpen)
43
- setIsOpen(!isOpen);
44
- }
45
- document.addEventListener('mousedown', handleClickOutside);
46
- return () => {
47
- document.removeEventListener('mousedown', handleClickOutside);
48
- };
49
- }, [ref]);
50
- };
51
- const wrapperRef = (0, react_1.useRef)(null);
52
- useOutsideAlerter(wrapperRef);
53
- return (react_1.default.createElement("div", { className: `${className} relative` },
54
- react_1.default.createElement("div", { className: "flex flex-row items-center " },
55
- react_1.default.createElement("input", { type: "text", name: "name", placeholder: title, value: value, className: " text-gray-dark-secondary 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: () => {
56
- setIsOpen(!isOpen);
57
- }, onChange: (event) => onChange && onChange(event.target.value) }),
58
- !isOpen && react_1.default.createElement("img", { src: UpArrow_svg_1.default, className: "absolute h-4 w-4 right-0" }),
59
- isOpen && react_1.default.createElement("img", { src: DownArrow_svg_1.default, className: "absolute h-4 w-4 right-0" })),
60
- isOpen && (react_1.default.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 },
61
- react_1.default.createElement("ul", { className: "py-1" }, items.map((item, index) => (react_1.default.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: () => {
62
- setValue(item);
63
- setIsOpen(!isOpen);
64
- } }, item)))))),
65
- hasError && (react_1.default.createElement("span", { className: "text-primaryCharcoal text-4xs", id: "error" }, `${title} is required`))));
54
+ const UpArrow_svg_1 = __importDefault(require("@assets/svg/UpArrow.svg"));
55
+ const DownArrow_svg_1 = __importDefault(require("@assets/svg/DownArrow.svg"));
56
+ const InputDropdown = ({ items, className, hasError, title, onChange }) => {
57
+ const [isOpen, setIsOpen] = (0, react_1.useState)(false);
58
+ const [value, setValue] = (0, react_1.useState)("");
59
+ const useOutsideAlerter = (ref) => {
60
+ (0, react_1.useEffect)(() => {
61
+ function handleClickOutside(event) {
62
+ if (
63
+ ref.current &&
64
+ !ref.current.contains(event.target) &&
65
+ isOpen &&
66
+ isOpen
67
+ )
68
+ setIsOpen(!isOpen);
69
+ }
70
+ document.addEventListener("mousedown", handleClickOutside);
71
+ return () => {
72
+ document.removeEventListener("mousedown", handleClickOutside);
73
+ };
74
+ }, [ref]);
75
+ };
76
+ const wrapperRef = (0, react_1.useRef)(null);
77
+ useOutsideAlerter(wrapperRef);
78
+ return react_1.default.createElement(
79
+ "div",
80
+ { className: `${className} relative` },
81
+ react_1.default.createElement(
82
+ "div",
83
+ { className: "flex flex-row items-center " },
84
+ react_1.default.createElement("input", {
85
+ type: "text",
86
+ name: "name",
87
+ placeholder: title,
88
+ value: value,
89
+ className:
90
+ " text-gray-dark-secondary 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",
91
+ onClick: () => {
92
+ setIsOpen(!isOpen);
93
+ },
94
+ onChange: (event) => onChange && onChange(event.target.value),
95
+ }),
96
+ !isOpen &&
97
+ react_1.default.createElement("img", {
98
+ src: UpArrow_svg_1.default,
99
+ className: "absolute h-4 w-4 right-0",
100
+ }),
101
+ isOpen &&
102
+ react_1.default.createElement("img", {
103
+ src: DownArrow_svg_1.default,
104
+ className: "absolute h-4 w-4 right-0",
105
+ })
106
+ ),
107
+ isOpen &&
108
+ react_1.default.createElement(
109
+ "div",
110
+ {
111
+ className:
112
+ "z-10 w-full absolute text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700",
113
+ ref: wrapperRef,
114
+ },
115
+ react_1.default.createElement(
116
+ "ul",
117
+ { className: "py-1" },
118
+ items.map((item, index) =>
119
+ react_1.default.createElement(
120
+ "li",
121
+ {
122
+ key: index,
123
+ className:
124
+ "block py-2 px-4 text-md hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 font-nunitoSansRegular",
125
+ onClick: () => {
126
+ setValue(item);
127
+ setIsOpen(!isOpen);
128
+ },
129
+ },
130
+ item
131
+ )
132
+ )
133
+ )
134
+ ),
135
+ hasError &&
136
+ react_1.default.createElement(
137
+ "span",
138
+ { className: "text-primaryCharcoal text-4xs", id: "error" },
139
+ `${title} is required`
140
+ )
141
+ );
66
142
  };
67
143
  exports.InputDropdown = InputDropdown;
68
- //# sourceMappingURL=input-dropdown.component.js.map
144
+ //# sourceMappingURL=input-dropdown.component.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-dropdown.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input-dropdown/input-dropdown.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyD;AACzD,0FAA8D;AAC9D,8FAAkE;AAS3D,MAAM,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,EAAE;QAChC,IAAA,iBAAS,EAAC,GAAG,EAAE;YACb,SAAS,kBAAkB,CAAC,KAAK;gBAC/B,IACE,GAAG,CAAC,OAAO;oBACX,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;oBACnC,MAAM;oBACN,MAAM;oBAEN,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;YACvB,CAAC;YACD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAC3D,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAChE,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAChC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,SAAS,WAAW;QACrC,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,yCACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,6LAA6L,EACvM,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;gBACrB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAC7D;YACD,CAAC,MAAM,IAAI,uCAAK,GAAG,EAAE,qBAAO,EAAE,SAAS,EAAC,0BAA0B,GAAG;YACrE,MAAM,IAAI,uCAAK,GAAG,EAAE,uBAAS,EAAE,SAAS,EAAC,0BAA0B,GAAG,CACnE;QACL,MAAM,IAAI,CACT,uCACE,SAAS,EAAC,6GAA6G,EACvH,GAAG,EAAE,UAAU;YAEf,sCAAI,SAAS,EAAC,MAAM,IACjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,sCACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,+GAA+G,EACzH,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,IAAI,CAAC,CAAC;oBACf,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;gBACrB,CAAC,IAEA,IAAI,CACF,CACN,CAAC,CACC,CACD,CACP;QAEA,QAAQ,IAAI,CACX,wCAAM,SAAS,EAAC,+BAA+B,EAAC,EAAE,EAAC,OAAO,IACvD,GAAG,KAAK,cAAc,CAClB,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA5EW,QAAA,aAAa,iBA4ExB"}
1
+ {"version":3,"file":"input-dropdown.component.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input-dropdown/input-dropdown.component.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyD;AACzD,0EAA8C;AAC9C,8EAAkD;AAS3C,MAAM,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,EAAE;QAChC,IAAA,iBAAS,EAAC,GAAG,EAAE;YACb,SAAS,kBAAkB,CAAC,KAAK;gBAC/B,IACE,GAAG,CAAC,OAAO;oBACX,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;oBACnC,MAAM;oBACN,MAAM;oBAEN,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;YACvB,CAAC;YACD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAC3D,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;YAChE,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAChC,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC9B,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,SAAS,WAAW;QACrC,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,yCACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,6LAA6L,EACvM,OAAO,EAAE,GAAG,EAAE;oBACZ,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;gBACrB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAC7D;YACD,CAAC,MAAM,IAAI,uCAAK,GAAG,EAAE,qBAAO,EAAE,SAAS,EAAC,0BAA0B,GAAG;YACrE,MAAM,IAAI,uCAAK,GAAG,EAAE,uBAAS,EAAE,SAAS,EAAC,0BAA0B,GAAG,CACnE;QACL,MAAM,IAAI,CACT,uCACE,SAAS,EAAC,6GAA6G,EACvH,GAAG,EAAE,UAAU;YAEf,sCAAI,SAAS,EAAC,MAAM,IACjB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,sCACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAC,+GAA+G,EACzH,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,IAAI,CAAC,CAAC;oBACf,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;gBACrB,CAAC,IAEA,IAAI,CACF,CACN,CAAC,CACC,CACD,CACP;QAEA,QAAQ,IAAI,CACX,wCAAM,SAAS,EAAC,+BAA+B,EAAC,EAAE,EAAC,OAAO,IACvD,GAAG,KAAK,cAAc,CAClB,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA5EW,QAAA,aAAa,iBA4ExB"}
@@ -1,14 +1,23 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  /* eslint-disable testing-library/render-result-naming-convention */
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const _core_utils_1 = require("@core-utils");
9
11
  const input_dropdown_component_1 = require("./input-dropdown.component");
10
- it('render InputDropdown correctly', () => {
11
- const inputDropDown = (0, _core_utils_1.render)(react_1.default.createElement(input_dropdown_component_1.InputDropdown, { title: "Source of funds", items: ['Bank account', 'UPI', 'Credit Card'], hasError: true, onChange: () => jest.fn() }));
12
- expect(inputDropDown).toMatchSnapshot();
12
+ it("render InputDropdown correctly", () => {
13
+ const inputDropDown = (0, _core_utils_1.render)(
14
+ react_1.default.createElement(input_dropdown_component_1.InputDropdown, {
15
+ title: "Source of funds",
16
+ items: ["Bank account", "UPI", "Credit Card"],
17
+ hasError: true,
18
+ onChange: () => jest.fn(),
19
+ })
20
+ );
21
+ expect(inputDropDown).toMatchSnapshot();
13
22
  });
14
- //# sourceMappingURL=input-dropdown.component.test.js.map
23
+ //# sourceMappingURL=input-dropdown.component.test.js.map
@@ -1,17 +1,24 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  exports.Primary = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const input_dropdown_component_1 = require("./input-dropdown.component");
9
11
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
10
12
  exports.default = {
11
- title: 'Atoms/InputDropdown',
12
- component: input_dropdown_component_1.InputDropdown,
13
+ title: "Atoms/InputDropdown",
14
+ component: input_dropdown_component_1.InputDropdown,
13
15
  };
14
16
  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
15
- const Primary = () => (react_1.default.createElement(input_dropdown_component_1.InputDropdown, { title: "Source of funds", items: ['Bank account', 'UPI', 'Credit Card'], hasError: true }));
17
+ const Primary = () =>
18
+ react_1.default.createElement(input_dropdown_component_1.InputDropdown, {
19
+ title: "Source of funds",
20
+ items: ["Bank account", "UPI", "Credit Card"],
21
+ hasError: true,
22
+ });
16
23
  exports.Primary = Primary;
17
- //# sourceMappingURL=input-dropdown.stories.js.map
24
+ //# sourceMappingURL=input-dropdown.stories.js.map
@@ -1,23 +1,57 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  exports.ModalLoader = exports.Loader = void 0;
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const reactstrap_1 = require("reactstrap");
9
- const Loader = () => (react_1.default.createElement(reactstrap_1.Container, { fluid: true, className: "vh-50 d-flex" },
10
- react_1.default.createElement(reactstrap_1.Row, { className: "justify-content-center align-self-center w-100 text-center" },
11
- react_1.default.createElement(reactstrap_1.Spinner, { color: "primary" }))));
11
+ const Loader = () =>
12
+ react_1.default.createElement(
13
+ reactstrap_1.Container,
14
+ { fluid: true, className: "vh-50 d-flex" },
15
+ react_1.default.createElement(
16
+ reactstrap_1.Row,
17
+ {
18
+ className: "justify-content-center align-self-center w-100 text-center",
19
+ },
20
+ react_1.default.createElement(reactstrap_1.Spinner, { color: "primary" })
21
+ )
22
+ );
12
23
  exports.Loader = Loader;
13
24
  const ModalLoader = () => {
14
- return (react_1.default.createElement(react_1.default.Fragment, null,
15
- react_1.default.createElement(react_1.default.Fragment, null,
16
- react_1.default.createElement("div", { className: "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none" },
17
- react_1.default.createElement("div", { className: "relative mx-auto " },
18
- react_1.default.createElement("div", { className: "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none" },
19
- react_1.default.createElement("div", { className: "relative p-2 flex-auto flex flex-col items-center" },
20
- react_1.default.createElement("style", null, `
25
+ return react_1.default.createElement(
26
+ react_1.default.Fragment,
27
+ null,
28
+ react_1.default.createElement(
29
+ react_1.default.Fragment,
30
+ null,
31
+ react_1.default.createElement(
32
+ "div",
33
+ {
34
+ className:
35
+ "justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none",
36
+ },
37
+ react_1.default.createElement(
38
+ "div",
39
+ { className: "relative mx-auto " },
40
+ react_1.default.createElement(
41
+ "div",
42
+ {
43
+ className:
44
+ "border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none",
45
+ },
46
+ react_1.default.createElement(
47
+ "div",
48
+ {
49
+ className: "relative p-2 flex-auto flex flex-col items-center",
50
+ },
51
+ react_1.default.createElement(
52
+ "style",
53
+ null,
54
+ `
21
55
  .spinner .background {
22
56
  fill: #555;
23
57
  }
@@ -49,13 +83,41 @@ const ModalLoader = () => {
49
83
  transform: rotate(360deg);
50
84
  }
51
85
  }
52
- `),
53
- react_1.default.createElement("svg", { className: "spinner", width: "100", height: "100", viewBox: "0 0 100 100" },
54
- react_1.default.createElement("circle", { className: "background", cx: "0", cy: "0" }),
55
- react_1.default.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" })),
56
- ' ',
57
- react_1.default.createElement("span", { style: { marginTop: -15 } }, "loading ..."))))),
58
- react_1.default.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" }))));
86
+ `
87
+ ),
88
+ react_1.default.createElement(
89
+ "svg",
90
+ {
91
+ className: "spinner",
92
+ width: "100",
93
+ height: "100",
94
+ viewBox: "0 0 100 100",
95
+ },
96
+ react_1.default.createElement("circle", {
97
+ className: "background",
98
+ cx: "0",
99
+ cy: "0",
100
+ }),
101
+ react_1.default.createElement("path", {
102
+ className: "line",
103
+ 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",
104
+ })
105
+ ),
106
+ " ",
107
+ react_1.default.createElement(
108
+ "span",
109
+ { style: { marginTop: -15 } },
110
+ "loading ..."
111
+ )
112
+ )
113
+ )
114
+ )
115
+ ),
116
+ react_1.default.createElement("div", {
117
+ className: "opacity-25 fixed inset-0 z-40 bg-black",
118
+ })
119
+ )
120
+ );
59
121
  };
60
122
  exports.ModalLoader = ModalLoader;
61
- //# sourceMappingURL=loader.component.js.map
123
+ //# sourceMappingURL=loader.component.js.map
@@ -1,14 +1,18 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __importDefault =
3
+ (this && this.__importDefault) ||
4
+ function (mod) {
5
+ return mod && mod.__esModule ? mod : { default: mod };
6
+ };
5
7
  Object.defineProperty(exports, "__esModule", { value: true });
6
8
  /* eslint-disable testing-library/render-result-naming-convention */
7
9
  const react_1 = __importDefault(require("react"));
8
10
  const _core_utils_1 = require("@core-utils");
9
11
  const loader_component_1 = require("./loader.component");
10
- it('render XB_Loader correctly', () => {
11
- const loader = (0, _core_utils_1.render)(react_1.default.createElement(loader_component_1.Loader, null));
12
- expect(loader).toMatchSnapshot();
12
+ it("render XB_Loader correctly", () => {
13
+ const loader = (0, _core_utils_1.render)(
14
+ react_1.default.createElement(loader_component_1.Loader, null)
15
+ );
16
+ expect(loader).toMatchSnapshot();
13
17
  });
14
- //# sourceMappingURL=loader.component.test.js.map
18
+ //# sourceMappingURL=loader.component.test.js.map