react-restyle-components 0.1.45 → 0.1.47

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 (140) hide show
  1. package/lib/cjs/App.js +12 -36
  2. package/lib/cjs/App.test.js +8 -10
  3. package/lib/cjs/core-components/atoms/buttons/button.stories.js +24 -26
  4. package/lib/cjs/core-components/atoms/buttons/buttons.component.js +9 -27
  5. package/lib/cjs/core-components/atoms/buttons/buttons.test.js +7 -15
  6. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +35 -102
  7. package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +17 -17
  8. package/lib/cjs/core-components/atoms/check-box/checkBox.test.js +7 -15
  9. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +37 -98
  10. package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +15 -17
  11. package/lib/cjs/core-components/atoms/date-picker/date-picker.test.js +7 -16
  12. package/lib/cjs/core-components/atoms/form/form.component.js +159 -571
  13. package/lib/cjs/core-components/atoms/form/form.test.js +59 -87
  14. package/lib/cjs/core-components/atoms/icons/icons.component.js +58 -41
  15. package/lib/cjs/core-components/atoms/icons/icons.component.js.map +1 -1
  16. package/lib/cjs/core-components/atoms/icons/icons.stories.js +23 -0
  17. package/lib/cjs/core-components/atoms/icons/icons.stories.js.map +1 -0
  18. package/lib/cjs/core-components/atoms/icons/icons.test.js +16 -0
  19. package/lib/cjs/core-components/atoms/icons/icons.test.js.map +1 -0
  20. package/lib/cjs/core-components/atoms/input/input-otp.component.js +76 -118
  21. package/lib/cjs/core-components/atoms/input/input-pin.component.js +98 -180
  22. package/lib/cjs/core-components/atoms/input/input-pin.stories.js +14 -14
  23. package/lib/cjs/core-components/atoms/input/input-pin.test.js +10 -28
  24. package/lib/cjs/core-components/atoms/input/input.component.js +33 -104
  25. package/lib/cjs/core-components/atoms/input/input.stories.js +15 -15
  26. package/lib/cjs/core-components/atoms/input/input.test.js +10 -30
  27. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +53 -127
  28. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +12 -12
  29. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.test.js +7 -16
  30. package/lib/cjs/core-components/atoms/loader/loader.component.js +21 -83
  31. package/lib/cjs/core-components/atoms/loader/loader.stories.js +8 -8
  32. package/lib/cjs/core-components/atoms/loader/loader.test.js +7 -11
  33. package/lib/cjs/core-components/atoms/radio/radio.component.js +37 -102
  34. package/lib/cjs/core-components/atoms/radio/radio.stories.js +16 -16
  35. package/lib/cjs/core-components/atoms/radio/radio.test.js +7 -15
  36. package/lib/cjs/core-components/atoms/stepper/stepper.component.js +34 -77
  37. package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +13 -13
  38. package/lib/cjs/core-components/atoms/stepper/stepper.test.js +7 -16
  39. package/lib/cjs/core-components/atoms/tabs/tabs.component.js +32 -81
  40. package/lib/cjs/core-components/atoms/tabs/tabs.stories.js +16 -16
  41. package/lib/cjs/core-components/atoms/tabs/tabs.stories.js.map +1 -1
  42. package/lib/cjs/core-components/atoms/tabs/tabs.test.js +13 -20
  43. package/lib/cjs/core-components/atoms/timer/timer.component.js +92 -119
  44. package/lib/cjs/core-components/atoms/timer/timer.test.js +10 -20
  45. package/lib/cjs/core-components/atoms/tooltip/tooltip.component.js +45 -85
  46. package/lib/cjs/core-components/atoms/tooltip/tooltip.component.test.js +9 -13
  47. package/lib/cjs/core-components/atoms/tooltip/tooltip.stories.js +8 -8
  48. package/lib/cjs/core-components/index.js +27 -64
  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 +106 -210
  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 +9 -23
  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 +36 -38
  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 +104 -209
  53. 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 +16 -28
  54. package/lib/cjs/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +22 -24
  55. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.component.js +106 -203
  56. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +8 -8
  57. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.test.js +7 -14
  58. package/lib/cjs/core-components/molecules/css-multiline-input/css-properties.js +159 -159
  59. package/lib/cjs/core-utils/index.js +15 -31
  60. package/lib/cjs/core-utils/unit-test.utils.js +6 -8
  61. package/lib/cjs/index.js +15 -31
  62. package/lib/cjs/library/assets/svg/DownArrow.svg +14 -0
  63. package/lib/cjs/library/assets/svg/UpArrow.svg +14 -0
  64. package/lib/cjs/library/assets/svg/checkedBox.svg +14 -0
  65. package/lib/cjs/library/assets/svg/checkedRadio.svg +13 -0
  66. package/lib/cjs/library/assets/svg/datePicker.svg +3 -0
  67. package/lib/cjs/library/assets/svg/index.js +13 -39
  68. package/lib/cjs/library/assets/svg/index.ts +38 -0
  69. package/lib/cjs/library/assets/svg/timer copy.svg +3 -0
  70. package/lib/cjs/library/assets/svg/timer.svg +3 -0
  71. package/lib/cjs/library/assets/svg/unCheckbox.svg +3 -0
  72. package/lib/cjs/library/assets/svg/uncheckRadio.svg +3 -0
  73. package/lib/cjs/reportWebVitals.js +1 -1
  74. package/lib/cjs/setupTests.js +1 -1
  75. package/lib/esm/App.js +12 -34
  76. package/lib/esm/App.test.js +8 -8
  77. package/lib/esm/core-components/atoms/buttons/button.stories.js +24 -24
  78. package/lib/esm/core-components/atoms/buttons/buttons.component.js +7 -23
  79. package/lib/esm/core-components/atoms/buttons/buttons.test.js +7 -13
  80. package/lib/esm/core-components/atoms/check-box/checkBox.component.js +19 -65
  81. package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +18 -18
  82. package/lib/esm/core-components/atoms/check-box/checkBox.test.js +7 -13
  83. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +21 -54
  84. package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +14 -14
  85. package/lib/esm/core-components/atoms/date-picker/date-picker.test.js +8 -15
  86. package/lib/esm/core-components/atoms/form/form.component.js +138 -513
  87. package/lib/esm/core-components/atoms/form/form.test.js +60 -78
  88. package/lib/esm/core-components/atoms/icons/icons.component.js +32 -36
  89. package/lib/esm/core-components/atoms/icons/icons.component.js.map +1 -1
  90. package/lib/esm/core-components/atoms/icons/icons.stories.js +20 -0
  91. package/lib/esm/core-components/atoms/icons/icons.stories.js.map +1 -0
  92. package/lib/esm/core-components/atoms/icons/icons.test.js +11 -0
  93. package/lib/esm/core-components/atoms/icons/icons.test.js.map +1 -0
  94. package/lib/esm/core-components/atoms/input/input-otp.component.js +59 -80
  95. package/lib/esm/core-components/atoms/input/input-pin.component.js +81 -142
  96. package/lib/esm/core-components/atoms/input/input-pin.stories.js +15 -15
  97. package/lib/esm/core-components/atoms/input/input-pin.test.js +10 -26
  98. package/lib/esm/core-components/atoms/input/input.component.js +16 -66
  99. package/lib/esm/core-components/atoms/input/input.stories.js +16 -16
  100. package/lib/esm/core-components/atoms/input/input.test.js +10 -28
  101. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +36 -95
  102. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +13 -13
  103. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.test.js +7 -14
  104. package/lib/esm/core-components/atoms/loader/loader.component.js +20 -80
  105. package/lib/esm/core-components/atoms/loader/loader.stories.js +9 -9
  106. package/lib/esm/core-components/atoms/loader/loader.test.js +7 -7
  107. package/lib/esm/core-components/atoms/radio/radio.component.js +21 -65
  108. package/lib/esm/core-components/atoms/radio/radio.stories.js +17 -17
  109. package/lib/esm/core-components/atoms/radio/radio.test.js +7 -13
  110. package/lib/esm/core-components/atoms/stepper/stepper.component.js +32 -74
  111. package/lib/esm/core-components/atoms/stepper/stepper.stories.js +14 -14
  112. package/lib/esm/core-components/atoms/stepper/stepper.test.js +7 -14
  113. package/lib/esm/core-components/atoms/tabs/tabs.component.js +15 -43
  114. package/lib/esm/core-components/atoms/tabs/tabs.stories.js +17 -17
  115. package/lib/esm/core-components/atoms/tabs/tabs.stories.js.map +1 -1
  116. package/lib/esm/core-components/atoms/tabs/tabs.test.js +13 -18
  117. package/lib/esm/core-components/atoms/timer/timer.component.js +75 -81
  118. package/lib/esm/core-components/atoms/timer/timer.test.js +10 -10
  119. package/lib/esm/core-components/atoms/tooltip/tooltip.component.js +25 -46
  120. package/lib/esm/core-components/atoms/tooltip/tooltip.component.test.js +9 -9
  121. package/lib/esm/core-components/atoms/tooltip/tooltip.stories.js +9 -9
  122. package/lib/esm/core-components/index.js +19 -19
  123. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.component.js +88 -170
  124. 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 +9 -17
  125. package/lib/esm/core-components/molecules/auto-complete-filter-multiple-select-multiple-fields-display/auto-complete-filter-multiple-select-multiple-fields-display.stories.js +37 -38
  126. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js +86 -169
  127. 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 +16 -22
  128. package/lib/esm/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.js +23 -24
  129. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.component.js +90 -166
  130. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +9 -9
  131. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.test.js +7 -9
  132. package/lib/esm/core-components/molecules/css-multiline-input/css-properties.js +159 -159
  133. package/lib/esm/core-utils/index.js +2 -2
  134. package/lib/esm/core-utils/unit-test.utils.js +5 -5
  135. package/lib/esm/index.js +2 -2
  136. package/lib/esm/library/assets/svg/index.js +10 -19
  137. package/lib/esm/reportWebVitals.js +1 -1
  138. package/lib/esm/setupTests.js +2 -2
  139. package/lib/package.json +124 -0
  140. package/package.json +4 -4
@@ -1,145 +1,84 @@
1
1
  /* eslint-disable */
2
- import React, { useRef, useState } from "react";
3
- import "./input.styles.css";
4
- export const InputPin = ({
5
- title,
6
- className,
7
- defaultPin,
8
- errorMsg,
9
- defaultMsg,
10
- hasError,
11
- onPinChanged,
12
- }) => {
13
- const pin = useRef([]);
14
- const [reload, setReload] = useState(false);
15
- const pinLength = 12;
16
- const Pin_Min_Value = 0;
17
- const Pin_Max_Value = 9;
18
- const BACKSPACE_Key = "Backspace";
19
- const inputRefs = useRef([]);
20
- const removeValuesFromArray = (valuesArray, value) => {
21
- const valueIndex = valuesArray.findIndex((entry) => entry === value);
22
- if (valueIndex === -1) {
23
- return;
24
- }
25
- valuesArray.splice(valueIndex, 1);
26
- };
27
- const changePinFocus = (pinIndex) => {
28
- const ref = inputRefs.current[pinIndex];
29
- if (ref) {
30
- ref.focus();
31
- }
32
- };
33
- const onChange = (event, index) => {
34
- var _a;
35
- const previousValue = event.target.defaultValue;
36
- const valueArray = event.target.value.split("");
37
- const output = removeValuesFromArray(valueArray, previousValue);
38
- const value = valueArray.pop();
39
- if (!value) {
40
- return;
41
- }
42
- const pinNumber = Number(value);
43
- if (isNaN(pinNumber) || value.length === 0) {
44
- return;
45
- }
46
- pin.current[
47
- (_a = pin.current) === null || _a === void 0 ? void 0 : _a.length
48
- ] = value;
49
- setReload(!reload);
50
- if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
51
- onPinChanged(pin.current, index);
52
- if (index < pinLength - 1) {
53
- changePinFocus(index + 1);
54
- }
55
- }
56
- };
57
- const onKeyDown = (event, index) => {
58
- const keyboardKeyCode = event.nativeEvent.code;
59
- if (keyboardKeyCode != BACKSPACE_Key) return;
60
- if (pin.current[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
61
- changePinFocus(index - 1);
62
- }
63
- if (pin.current[index] === undefined) {
64
- changePinFocus(index - 1);
65
- } else {
66
- onPinChanged(undefined, index);
67
- }
68
- };
69
- return React.createElement(
70
- "div",
71
- { className: `${className} relative` },
72
- React.createElement(
73
- "label",
74
- {
75
- className:
76
- "duration-300 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md",
77
- },
78
- title,
79
- ),
80
- React.createElement(
81
- "div",
82
- { className: "flex space-x-1" },
83
- Array.from({ length: pinLength }, (_, index) => {
2
+ import React, { useRef, useState } from 'react';
3
+ import './input.styles.css';
4
+ export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
5
+ const pin = useRef([]);
6
+ const [reload, setReload] = useState(false);
7
+ const pinLength = 12;
8
+ const Pin_Min_Value = 0;
9
+ const Pin_Max_Value = 9;
10
+ const BACKSPACE_Key = 'Backspace';
11
+ const inputRefs = useRef([]);
12
+ const removeValuesFromArray = (valuesArray, value) => {
13
+ const valueIndex = valuesArray.findIndex((entry) => entry === value);
14
+ if (valueIndex === -1) {
15
+ return;
16
+ }
17
+ valuesArray.splice(valueIndex, 1);
18
+ };
19
+ const changePinFocus = (pinIndex) => {
20
+ const ref = inputRefs.current[pinIndex];
21
+ if (ref) {
22
+ ref.focus();
23
+ }
24
+ };
25
+ const onChange = (event, index) => {
84
26
  var _a;
85
- return React.createElement(
86
- "div",
87
- { className: "flex space-x-1 max-w-full items-stretch", key: index },
88
- React.createElement("input", {
89
- "data-testid": "inputElementPin",
90
- type: "tel",
91
- className:
92
- "pb-2 block w-4 px-0 mt-0 bg-transparent text-center border-0 border-b z-20 appearance-none rounded-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular ",
93
- onKeyUp: (event) => onKeyDown(event, index),
94
- key: index,
95
- onMouseUp: () => {
96
- if (pin.current.join("").length <= 0) {
97
- changePinFocus(0);
98
- }
99
- },
100
- onClick: () => {
101
- if (pin.current.join("").length <= 0) {
102
- onPinChanged(undefined, 0);
103
- }
104
- },
105
- ref: (el) => {
106
- if (el) {
107
- inputRefs.current[index] = el;
108
- }
109
- },
110
- onChange: (event) => onChange(event, index),
111
- value:
112
- ((_a = pin.current[index]) === null || _a === void 0
113
- ? void 0
114
- : _a.toString()) || "",
115
- }),
116
- React.createElement(
117
- "div",
118
- { className: "invisible" },
119
- (index + 1) % 4 === 0 ? "ss" : null,
120
- ),
121
- );
122
- }),
123
- ),
124
- hasError &&
125
- (hasError === null || hasError === void 0 ? void 0 : hasError.type) !==
126
- "required" &&
127
- React.createElement(
128
- "span",
129
- {
130
- className: "text-sm text-red text-4xs font-nunitoSansRegular",
131
- id: "error",
132
- },
133
- `${errorMsg || ""}`,
134
- ),
135
- (!hasError ||
136
- (hasError === null || hasError === void 0 ? void 0 : hasError.type) ===
137
- "required") &&
138
- React.createElement(
139
- "span",
140
- { className: "text-sm text-4xs font-nunitoSansRegular", id: "error" },
141
- `${defaultMsg || ""}`,
142
- ),
143
- );
27
+ const previousValue = event.target.defaultValue;
28
+ const valueArray = event.target.value.split('');
29
+ const output = removeValuesFromArray(valueArray, previousValue);
30
+ const value = valueArray.pop();
31
+ if (!value) {
32
+ return;
33
+ }
34
+ const pinNumber = Number(value);
35
+ if (isNaN(pinNumber) || value.length === 0) {
36
+ return;
37
+ }
38
+ pin.current[(_a = pin.current) === null || _a === void 0 ? void 0 : _a.length] = value;
39
+ setReload(!reload);
40
+ if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
41
+ onPinChanged(pin.current, index);
42
+ if (index < pinLength - 1) {
43
+ changePinFocus(index + 1);
44
+ }
45
+ }
46
+ };
47
+ const onKeyDown = (event, index) => {
48
+ const keyboardKeyCode = event.nativeEvent.code;
49
+ if (keyboardKeyCode != BACKSPACE_Key)
50
+ return;
51
+ if (pin.current[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
52
+ changePinFocus(index - 1);
53
+ }
54
+ if (pin.current[index] === undefined) {
55
+ changePinFocus(index - 1);
56
+ }
57
+ else {
58
+ onPinChanged(undefined, index);
59
+ }
60
+ };
61
+ return (React.createElement("div", { className: `${className} relative` },
62
+ React.createElement("label", { className: "duration-300 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md" }, title),
63
+ React.createElement("div", { className: "flex space-x-1" }, Array.from({ length: pinLength }, (_, index) => {
64
+ var _a;
65
+ return (React.createElement("div", { className: "flex space-x-1 max-w-full items-stretch", key: index },
66
+ React.createElement("input", { "data-testid": "inputElementPin", type: "tel", className: "pb-2 block w-4 px-0 mt-0 bg-transparent text-center border-0 border-b z-20 appearance-none rounded-none focus:outline-none focus:ring-0 focus:border-gray-secondary border-gray-secondary font-nunitoSansRegular ", onKeyUp: (event) => onKeyDown(event, index), key: index, onMouseUp: () => {
67
+ if (pin.current.join('').length <= 0) {
68
+ changePinFocus(0);
69
+ }
70
+ }, onClick: () => {
71
+ if (pin.current.join('').length <= 0) {
72
+ onPinChanged(undefined, 0);
73
+ }
74
+ }, ref: (el) => {
75
+ if (el) {
76
+ inputRefs.current[index] = el;
77
+ }
78
+ }, onChange: (event) => onChange(event, index), value: ((_a = pin.current[index]) === null || _a === void 0 ? void 0 : _a.toString()) || '' }),
79
+ React.createElement("div", { className: "invisible" }, (index + 1) % 4 === 0 ? 'ss' : null)));
80
+ })),
81
+ hasError && (hasError === null || hasError === void 0 ? void 0 : hasError.type) !== 'required' && (React.createElement("span", { className: "text-sm text-red text-4xs font-nunitoSansRegular", id: "error" }, `${errorMsg || ''}`)),
82
+ (!hasError || (hasError === null || hasError === void 0 ? void 0 : hasError.type) === 'required') && (React.createElement("span", { className: "text-sm text-4xs font-nunitoSansRegular", id: "error" }, `${defaultMsg || ''}`))));
144
83
  };
145
- //# sourceMappingURL=input-pin.component.js.map
84
+ //# sourceMappingURL=input-pin.component.js.map
@@ -1,21 +1,21 @@
1
- import { InputPin } from "./input-pin.component";
1
+ import { InputPin } from './input-pin.component';
2
2
  const meta = {
3
- title: "Design System/Atoms/InputPin",
4
- component: InputPin,
5
- tags: ["autodocs"],
6
- parameters: {
7
- componentSubtitle: `import { InputPin } from 'react-restyle-components'`,
8
- },
3
+ title: 'Design System/Atoms/InputPin',
4
+ component: InputPin,
5
+ tags: ['autodocs'],
6
+ parameters: {
7
+ componentSubtitle: `import { InputPin } from 'react-restyle-components'`,
8
+ },
9
9
  };
10
10
  export default meta;
11
11
  export const Primary = {
12
- args: {
13
- title: "Enter your Aadhaar Number",
14
- hasError: true,
15
- defaultPin: [],
16
- onPinChanged: (item) => {
17
- console.log({ item });
12
+ args: {
13
+ title: 'Enter your Aadhaar Number',
14
+ hasError: true,
15
+ defaultPin: [],
16
+ onPinChanged: (item) => {
17
+ console.log({ item });
18
+ },
18
19
  },
19
- },
20
20
  };
21
- //# sourceMappingURL=input-pin.stories.js.map
21
+ //# sourceMappingURL=input-pin.stories.js.map
@@ -1,29 +1,13 @@
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(
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();
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();
16
8
  });
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();
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();
28
12
  });
29
- //# sourceMappingURL=input-pin.test.js.map
13
+ //# sourceMappingURL=input-pin.test.js.map
@@ -1,68 +1,18 @@
1
1
  /* eslint-disable no-console */
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
- );
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 || ''}`))));
67
17
  };
68
- //# sourceMappingURL=input.component.js.map
18
+ //# 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 });
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
+ },
16
20
  },
17
- onBlur: (item) => {
18
- console.log({ item });
19
- },
20
- },
21
21
  };
22
- //# sourceMappingURL=input.stories.js.map
22
+ //# sourceMappingURL=input.stories.js.map
@@ -1,31 +1,13 @@
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(
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();
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();
17
8
  });
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();
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();
30
12
  });
31
- //# sourceMappingURL=input.test.js.map
13
+ //# sourceMappingURL=input.test.js.map
@@ -1,96 +1,37 @@
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
- );
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`))));
95
36
  };
96
- //# sourceMappingURL=input-dropdown.component.js.map
37
+ //# 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