react-restyle-components 0.1.35 → 0.1.36

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 (176) hide show
  1. package/README.md +3 -4
  2. package/lib/cjs/App.js +12 -36
  3. package/lib/cjs/App.test.js +8 -10
  4. package/lib/cjs/core-components/atoms/buttons/button.stories.js +8 -20
  5. package/lib/cjs/core-components/atoms/buttons/buttons.component.js +6 -17
  6. package/lib/cjs/core-components/atoms/buttons/buttons.test.js +14 -0
  7. package/lib/cjs/core-components/atoms/buttons/buttons.test.js.map +1 -0
  8. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js +11 -27
  9. package/lib/cjs/core-components/atoms/check-box/checkBox.component.js.map +1 -1
  10. package/lib/cjs/core-components/atoms/check-box/checkBox.stories.js +9 -22
  11. package/lib/cjs/core-components/atoms/check-box/checkBox.test.js +14 -0
  12. package/lib/cjs/core-components/atoms/check-box/checkBox.test.js.map +1 -0
  13. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js +38 -98
  14. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.js.map +1 -1
  15. package/lib/cjs/core-components/atoms/date-picker/date-picker.stories.js +8 -18
  16. package/lib/cjs/core-components/atoms/date-picker/date-picker.test.js +15 -0
  17. package/lib/cjs/core-components/atoms/date-picker/date-picker.test.js.map +1 -0
  18. package/lib/cjs/core-components/atoms/form/form.component.js +194 -0
  19. package/lib/cjs/core-components/atoms/form/form.component.js.map +1 -0
  20. package/lib/cjs/core-components/atoms/form/form.test.js +100 -0
  21. package/lib/cjs/core-components/atoms/form/form.test.js.map +1 -0
  22. package/lib/cjs/core-components/atoms/input/input-otp.component.js +76 -118
  23. package/lib/cjs/core-components/atoms/input/input-pin.component.js +94 -174
  24. package/lib/cjs/core-components/atoms/input/input-pin.stories.js +9 -17
  25. package/lib/cjs/core-components/atoms/input/input-pin.test.js +18 -0
  26. package/lib/cjs/core-components/atoms/input/input-pin.test.js.map +1 -0
  27. package/lib/cjs/core-components/atoms/input/input.component.js +13 -65
  28. package/lib/cjs/core-components/atoms/input/input.stories.js +7 -16
  29. package/lib/cjs/core-components/atoms/input/input.test.js +18 -0
  30. package/lib/cjs/core-components/atoms/input/input.test.js.map +1 -0
  31. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js +58 -134
  32. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.js.map +1 -1
  33. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.stories.js +7 -14
  34. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.test.js +14 -0
  35. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.test.js.map +1 -0
  36. package/lib/cjs/core-components/atoms/loader/loader.component.js +21 -83
  37. package/lib/cjs/core-components/atoms/loader/loader.stories.js +8 -14
  38. package/lib/cjs/core-components/atoms/loader/loader.test.js +14 -0
  39. package/lib/cjs/core-components/atoms/loader/loader.test.js.map +1 -0
  40. package/lib/cjs/core-components/atoms/radio/radio.component.js +8 -22
  41. package/lib/cjs/core-components/atoms/radio/radio.component.js.map +1 -1
  42. package/lib/cjs/core-components/atoms/radio/radio.stories.js +10 -22
  43. package/lib/cjs/core-components/atoms/radio/radio.test.js +14 -0
  44. package/lib/cjs/core-components/atoms/radio/radio.test.js.map +1 -0
  45. package/lib/cjs/core-components/atoms/stepper/stepper.component.js +34 -77
  46. package/lib/cjs/core-components/atoms/stepper/stepper.stories.js +7 -15
  47. package/lib/cjs/core-components/atoms/stepper/stepper.test.js +13 -0
  48. package/lib/cjs/core-components/atoms/stepper/stepper.test.js.map +1 -0
  49. package/lib/cjs/core-components/atoms/timer/timer.component.js +93 -120
  50. package/lib/cjs/core-components/atoms/timer/timer.component.js.map +1 -1
  51. package/lib/cjs/core-components/atoms/timer/timer.test.js +20 -0
  52. package/lib/cjs/core-components/atoms/timer/timer.test.js.map +1 -0
  53. package/lib/cjs/core-components/index.js +32 -35
  54. package/lib/cjs/core-components/index.js.map +1 -1
  55. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.component.js +129 -0
  56. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.component.js.map +1 -0
  57. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +21 -0
  58. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.stories.js.map +1 -0
  59. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.test.js +16 -0
  60. package/lib/cjs/core-components/molecules/css-multiline-input/css-multiline-input.test.js.map +1 -0
  61. package/lib/cjs/core-components/molecules/css-multiline-input/css-properties.js +165 -0
  62. package/lib/cjs/core-components/molecules/css-multiline-input/css-properties.js.map +1 -0
  63. package/lib/cjs/core-utils/index.js +15 -31
  64. package/lib/cjs/core-utils/unit-test.utils.js +6 -8
  65. package/lib/cjs/index.js +15 -31
  66. package/lib/cjs/reportWebVitals.js +29 -52
  67. package/lib/cjs/reportWebVitals.js.map +1 -1
  68. package/lib/cjs/setupTests.js +1 -1
  69. package/lib/esm/App.js +12 -34
  70. package/lib/esm/App.test.js +8 -8
  71. package/lib/esm/core-components/atoms/buttons/button.stories.js +7 -17
  72. package/lib/esm/core-components/atoms/buttons/buttons.component.js +4 -13
  73. package/lib/esm/core-components/atoms/buttons/buttons.test.js +9 -0
  74. package/lib/esm/core-components/atoms/buttons/buttons.test.js.map +1 -0
  75. package/lib/esm/core-components/atoms/check-box/checkBox.component.js +9 -20
  76. package/lib/esm/core-components/atoms/check-box/checkBox.component.js.map +1 -1
  77. package/lib/esm/core-components/atoms/check-box/checkBox.stories.js +8 -16
  78. package/lib/esm/core-components/atoms/check-box/checkBox.test.js +9 -0
  79. package/lib/esm/core-components/atoms/check-box/checkBox.test.js.map +1 -0
  80. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js +20 -52
  81. package/lib/esm/core-components/atoms/date-picker/date-picker.component.js.map +1 -1
  82. package/lib/esm/core-components/atoms/date-picker/date-picker.stories.js +8 -16
  83. package/lib/esm/core-components/atoms/date-picker/date-picker.test.js +10 -0
  84. package/lib/esm/core-components/atoms/date-picker/date-picker.test.js.map +1 -0
  85. package/lib/esm/core-components/atoms/form/form.component.js +155 -0
  86. package/lib/esm/core-components/atoms/form/form.component.js.map +1 -0
  87. package/lib/esm/core-components/atoms/form/form.test.js +95 -0
  88. package/lib/esm/core-components/atoms/form/form.test.js.map +1 -0
  89. package/lib/esm/core-components/atoms/input/input-otp.component.js +59 -80
  90. package/lib/esm/core-components/atoms/input/input-pin.component.js +77 -136
  91. package/lib/esm/core-components/atoms/input/input-pin.stories.js +8 -14
  92. package/lib/esm/core-components/atoms/input/input-pin.test.js +13 -0
  93. package/lib/esm/core-components/atoms/input/input-pin.test.js.map +1 -0
  94. package/lib/esm/core-components/atoms/input/input.component.js +12 -62
  95. package/lib/esm/core-components/atoms/input/input.stories.js +6 -13
  96. package/lib/esm/core-components/atoms/input/input.test.js +13 -0
  97. package/lib/esm/core-components/atoms/input/input.test.js.map +1 -0
  98. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js +37 -96
  99. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.js.map +1 -1
  100. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.stories.js +6 -11
  101. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.test.js +9 -0
  102. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.test.js.map +1 -0
  103. package/lib/esm/core-components/atoms/loader/loader.component.js +20 -80
  104. package/lib/esm/core-components/atoms/loader/loader.stories.js +7 -11
  105. package/lib/esm/core-components/atoms/loader/loader.test.js +9 -0
  106. package/lib/esm/core-components/atoms/loader/loader.test.js.map +1 -0
  107. package/lib/esm/core-components/atoms/radio/radio.component.js +6 -12
  108. package/lib/esm/core-components/atoms/radio/radio.component.js.map +1 -1
  109. package/lib/esm/core-components/atoms/radio/radio.stories.js +9 -16
  110. package/lib/esm/core-components/atoms/radio/radio.test.js +9 -0
  111. package/lib/esm/core-components/atoms/radio/radio.test.js.map +1 -0
  112. package/lib/esm/core-components/atoms/stepper/stepper.component.js +32 -74
  113. package/lib/esm/core-components/atoms/stepper/stepper.stories.js +6 -12
  114. package/lib/esm/core-components/atoms/stepper/stepper.test.js +8 -0
  115. package/lib/esm/core-components/atoms/stepper/stepper.test.js.map +1 -0
  116. package/lib/esm/core-components/atoms/timer/timer.component.js +75 -81
  117. package/lib/esm/core-components/atoms/timer/timer.component.js.map +1 -1
  118. package/lib/esm/core-components/atoms/timer/timer.test.js +15 -0
  119. package/lib/esm/core-components/atoms/timer/timer.test.js.map +1 -0
  120. package/lib/esm/core-components/index.js +15 -12
  121. package/lib/esm/core-components/index.js.map +1 -1
  122. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.component.js +102 -0
  123. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.component.js.map +1 -0
  124. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.stories.js +14 -0
  125. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.stories.js.map +1 -0
  126. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.test.js +11 -0
  127. package/lib/esm/core-components/molecules/css-multiline-input/css-multiline-input.test.js.map +1 -0
  128. package/lib/esm/core-components/molecules/css-multiline-input/css-properties.js +162 -0
  129. package/lib/esm/core-components/molecules/css-multiline-input/css-properties.js.map +1 -0
  130. package/lib/esm/core-utils/index.js +2 -2
  131. package/lib/esm/core-utils/unit-test.utils.js +5 -5
  132. package/lib/esm/index.js +2 -2
  133. package/lib/esm/reportWebVitals.js +10 -10
  134. package/lib/esm/reportWebVitals.js.map +1 -1
  135. package/lib/esm/setupTests.js +2 -2
  136. package/package.json +32 -21
  137. package/lib/cjs/core-components/atoms/buttons/buttons.component.test.js +0 -22
  138. package/lib/cjs/core-components/atoms/buttons/buttons.component.test.js.map +0 -1
  139. package/lib/cjs/core-components/atoms/check-box/checkBox.component.test.js +0 -21
  140. package/lib/cjs/core-components/atoms/check-box/checkBox.component.test.js.map +0 -1
  141. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.test.js +0 -23
  142. package/lib/cjs/core-components/atoms/date-picker/date-picker.component.test.js.map +0 -1
  143. package/lib/cjs/core-components/atoms/input/input-pin.component.test.js +0 -36
  144. package/lib/cjs/core-components/atoms/input/input-pin.component.test.js.map +0 -1
  145. package/lib/cjs/core-components/atoms/input/input.component.test.js +0 -38
  146. package/lib/cjs/core-components/atoms/input/input.component.test.js.map +0 -1
  147. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.test.js +0 -23
  148. package/lib/cjs/core-components/atoms/input-dropdown/input-dropdown.component.test.js.map +0 -1
  149. package/lib/cjs/core-components/atoms/loader/loader.component.test.js +0 -18
  150. package/lib/cjs/core-components/atoms/loader/loader.component.test.js.map +0 -1
  151. package/lib/cjs/core-components/atoms/radio/radio.component.test.js +0 -21
  152. package/lib/cjs/core-components/atoms/radio/radio.component.test.js.map +0 -1
  153. package/lib/cjs/core-components/atoms/stepper/stepper.component.test.js +0 -22
  154. package/lib/cjs/core-components/atoms/stepper/stepper.component.test.js.map +0 -1
  155. package/lib/cjs/core-components/atoms/timer/timer.component.test.js +0 -30
  156. package/lib/cjs/core-components/atoms/timer/timer.component.test.js.map +0 -1
  157. package/lib/esm/core-components/atoms/buttons/buttons.component.test.js +0 -15
  158. package/lib/esm/core-components/atoms/buttons/buttons.component.test.js.map +0 -1
  159. package/lib/esm/core-components/atoms/check-box/checkBox.component.test.js +0 -11
  160. package/lib/esm/core-components/atoms/check-box/checkBox.component.test.js.map +0 -1
  161. package/lib/esm/core-components/atoms/date-picker/date-picker.component.test.js +0 -16
  162. package/lib/esm/core-components/atoms/date-picker/date-picker.component.test.js.map +0 -1
  163. package/lib/esm/core-components/atoms/input/input-pin.component.test.js +0 -29
  164. package/lib/esm/core-components/atoms/input/input-pin.component.test.js.map +0 -1
  165. package/lib/esm/core-components/atoms/input/input.component.test.js +0 -31
  166. package/lib/esm/core-components/atoms/input/input.component.test.js.map +0 -1
  167. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.test.js +0 -16
  168. package/lib/esm/core-components/atoms/input-dropdown/input-dropdown.component.test.js.map +0 -1
  169. package/lib/esm/core-components/atoms/loader/loader.component.test.js +0 -9
  170. package/lib/esm/core-components/atoms/loader/loader.component.test.js.map +0 -1
  171. package/lib/esm/core-components/atoms/radio/radio.component.test.js +0 -11
  172. package/lib/esm/core-components/atoms/radio/radio.component.test.js.map +0 -1
  173. package/lib/esm/core-components/atoms/stepper/stepper.component.test.js +0 -15
  174. package/lib/esm/core-components/atoms/stepper/stepper.component.test.js.map +0 -1
  175. package/lib/esm/core-components/atoms/timer/timer.component.test.js +0 -15
  176. package/lib/esm/core-components/atoms/timer/timer.component.test.js.map +0 -1
@@ -1,186 +1,106 @@
1
1
  "use strict";
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) {
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) {
37
19
  if (mod && mod.__esModule) return mod;
38
20
  var result = {};
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);
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
43
22
  __setModuleDefault(result, mod);
44
23
  return result;
45
- };
24
+ };
46
25
  Object.defineProperty(exports, "__esModule", { value: true });
47
26
  exports.InputPin = void 0;
48
27
  /* eslint-disable */
49
28
  const react_1 = __importStar(require("react"));
50
29
  require("./input.styles.css");
51
- const InputPin = ({
52
- title,
53
- className,
54
- pin,
55
- errorMsg,
56
- defaultMsg,
57
- hasError,
58
- onPinChanged,
59
- }) => {
60
- const pinLength = 12;
61
- const Pin_Min_Value = 0;
62
- const Pin_Max_Value = 9;
63
- const BACKSPACE_Key = "Backspace";
64
- const inputRefs = (0, react_1.useRef)([]);
65
- const removeValuesFromArray = (valuesArray, value) => {
66
- const valueIndex = valuesArray.findIndex((entry) => entry === value);
67
- if (valueIndex === -1) {
68
- return;
69
- }
70
- valuesArray.splice(valueIndex, 1);
71
- };
72
- const changePinFocus = (pinIndex) => {
73
- const ref = inputRefs.current[pinIndex];
74
- if (ref) {
75
- ref.focus();
76
- }
77
- };
78
- const onChange = (event, index) => {
79
- const previousValue = event.target.defaultValue;
80
- const valueArray = event.target.value.split("");
81
- removeValuesFromArray(valueArray, previousValue);
82
- const value = valueArray.pop();
83
- if (!value) {
84
- return;
85
- }
86
- const pinNumber = Number(value);
87
- if (isNaN(pinNumber) || value.length === 0) {
88
- return;
89
- }
90
- if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
91
- onPinChanged(pinNumber, index);
92
- if (index < pinLength - 1) {
93
- changePinFocus(index + 1);
94
- }
95
- }
96
- };
97
- const onKeyDown = (event, index) => {
98
- const keyboardKeyCode = event.nativeEvent.code;
99
- if (keyboardKeyCode != BACKSPACE_Key) return;
100
- if (pin[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
101
- changePinFocus(index - 1);
102
- }
103
- if (pin[index] === undefined) {
104
- changePinFocus(index - 1);
105
- } else {
106
- onPinChanged(undefined, index);
107
- }
108
- };
109
- return react_1.default.createElement(
110
- "div",
111
- { className: `${className} relative` },
112
- react_1.default.createElement(
113
- "label",
114
- {
115
- className:
116
- "duration-300 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md",
117
- },
118
- title
119
- ),
120
- react_1.default.createElement(
121
- "div",
122
- { className: "flex space-x-1" },
123
- Array.from({ length: pinLength }, (_, index) => {
124
- var _a;
125
- return react_1.default.createElement(
126
- "div",
127
- { className: "flex space-x-1 max-w-full items-stretch", key: index },
128
- react_1.default.createElement("input", {
129
- "data-testid": "inputElementPin",
130
- type: "tel",
131
- className:
132
- "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 ",
133
- onKeyUp: (event) => onKeyDown(event, index),
134
- key: index,
135
- onMouseUp: () => {
136
- if (pin.join("").length <= 0) {
137
- changePinFocus(0);
138
- }
139
- },
140
- onClick: () => {
141
- if (pin.join("").length <= 0) {
142
- onPinChanged(undefined, 0);
143
- }
144
- },
145
- ref: (el) => {
146
- if (el) {
147
- inputRefs.current[index] = el;
148
- }
149
- },
150
- onChange: (event) => onChange(event, index),
151
- value:
152
- ((_a = pin[index]) === null || _a === void 0
153
- ? void 0
154
- : _a.toString()) || "",
155
- }),
156
- react_1.default.createElement(
157
- "div",
158
- { className: "invisible" },
159
- (index + 1) % 4 === 0 ? "ss" : null
160
- )
161
- );
162
- })
163
- ),
164
- hasError &&
165
- (hasError === null || hasError === void 0 ? void 0 : hasError.type) !==
166
- "required" &&
167
- react_1.default.createElement(
168
- "span",
169
- {
170
- className: "text-sm text-red text-4xs font-nunitoSansRegular",
171
- id: "error",
172
- },
173
- `${errorMsg || ""}`
174
- ),
175
- (!hasError ||
176
- (hasError === null || hasError === void 0 ? void 0 : hasError.type) ===
177
- "required") &&
178
- react_1.default.createElement(
179
- "span",
180
- { className: "text-sm text-4xs font-nunitoSansRegular", id: "error" },
181
- `${defaultMsg || ""}`
182
- )
183
- );
30
+ const InputPin = ({ title, className, pin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
31
+ const pinLength = 12;
32
+ const Pin_Min_Value = 0;
33
+ const Pin_Max_Value = 9;
34
+ const BACKSPACE_Key = 'Backspace';
35
+ const inputRefs = (0, react_1.useRef)([]);
36
+ const removeValuesFromArray = (valuesArray, value) => {
37
+ const valueIndex = valuesArray.findIndex((entry) => entry === value);
38
+ if (valueIndex === -1) {
39
+ return;
40
+ }
41
+ valuesArray.splice(valueIndex, 1);
42
+ };
43
+ const changePinFocus = (pinIndex) => {
44
+ const ref = inputRefs.current[pinIndex];
45
+ if (ref) {
46
+ ref.focus();
47
+ }
48
+ };
49
+ const onChange = (event, index) => {
50
+ const previousValue = event.target.defaultValue;
51
+ const valueArray = event.target.value.split('');
52
+ removeValuesFromArray(valueArray, previousValue);
53
+ const value = valueArray.pop();
54
+ if (!value) {
55
+ return;
56
+ }
57
+ const pinNumber = Number(value);
58
+ if (isNaN(pinNumber) || value.length === 0) {
59
+ return;
60
+ }
61
+ if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
62
+ onPinChanged(pinNumber, index);
63
+ if (index < pinLength - 1) {
64
+ changePinFocus(index + 1);
65
+ }
66
+ }
67
+ };
68
+ const onKeyDown = (event, index) => {
69
+ const keyboardKeyCode = event.nativeEvent.code;
70
+ if (keyboardKeyCode != BACKSPACE_Key)
71
+ return;
72
+ if (pin[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
73
+ changePinFocus(index - 1);
74
+ }
75
+ if (pin[index] === undefined) {
76
+ changePinFocus(index - 1);
77
+ }
78
+ else {
79
+ onPinChanged(undefined, index);
80
+ }
81
+ };
82
+ return (react_1.default.createElement("div", { className: `${className} relative` },
83
+ react_1.default.createElement("label", { className: "duration-300 -z-1 origin-0 text-gray-dark-secondary font-nunitoSansRegular text-md" }, title),
84
+ react_1.default.createElement("div", { className: "flex space-x-1" }, Array.from({ length: pinLength }, (_, index) => {
85
+ var _a;
86
+ return (react_1.default.createElement("div", { className: "flex space-x-1 max-w-full items-stretch", key: index },
87
+ react_1.default.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: () => {
88
+ if (pin.join('').length <= 0) {
89
+ changePinFocus(0);
90
+ }
91
+ }, onClick: () => {
92
+ if (pin.join('').length <= 0) {
93
+ onPinChanged(undefined, 0);
94
+ }
95
+ }, ref: (el) => {
96
+ if (el) {
97
+ inputRefs.current[index] = el;
98
+ }
99
+ }, onChange: (event) => onChange(event, index), value: ((_a = pin[index]) === null || _a === void 0 ? void 0 : _a.toString()) || '' }),
100
+ react_1.default.createElement("div", { className: "invisible" }, (index + 1) % 4 === 0 ? 'ss' : null)));
101
+ })),
102
+ hasError && (hasError === null || hasError === void 0 ? void 0 : hasError.type) !== 'required' && (react_1.default.createElement("span", { className: "text-sm text-red text-4xs font-nunitoSansRegular", id: "error" }, `${errorMsg || ''}`)),
103
+ (!hasError || (hasError === null || hasError === void 0 ? void 0 : hasError.type) === 'required') && (react_1.default.createElement("span", { className: "text-sm text-4xs font-nunitoSansRegular", id: "error" }, `${defaultMsg || ''}`))));
184
104
  };
185
105
  exports.InputPin = InputPin;
186
- //# sourceMappingURL=input-pin.component.js.map
106
+ //# sourceMappingURL=input-pin.component.js.map
@@ -1,28 +1,20 @@
1
1
  "use strict";
2
- var __importDefault =
3
- (this && this.__importDefault) ||
4
- function (mod) {
5
- return mod && mod.__esModule ? mod : { default: mod };
6
- };
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
7
5
  Object.defineProperty(exports, "__esModule", { value: true });
8
6
  exports.Primary = void 0;
9
7
  const react_1 = __importDefault(require("react"));
10
8
  const input_pin_component_1 = require("./input-pin.component");
11
9
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
12
10
  exports.default = {
13
- title: "Atoms/InputPin",
14
- component: input_pin_component_1.InputPin,
11
+ title: 'Atoms/InputPin',
12
+ component: input_pin_component_1.InputPin,
15
13
  };
16
14
  const pin = new Array(12);
17
15
  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
18
- const Primary = () =>
19
- react_1.default.createElement(input_pin_component_1.InputPin, {
20
- title: "Enter your Aadhaar Number",
21
- hasError: true,
22
- onPinChanged: (value) => {
23
- console.log({ value });
24
- },
25
- pin: pin,
26
- });
16
+ const Primary = () => (react_1.default.createElement(input_pin_component_1.InputPin, { title: "Enter your Aadhaar Number", hasError: true, onPinChanged: (value) => {
17
+ console.log({ value });
18
+ }, pin: pin }));
27
19
  exports.Primary = Primary;
28
- //# sourceMappingURL=input-pin.stories.js.map
20
+ //# sourceMappingURL=input-pin.stories.js.map
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ /* eslint-disable testing-library/render-result-naming-convention */
7
+ const react_1 = __importDefault(require("react"));
8
+ const _core_utils_1 = require("@core-utils");
9
+ const input_pin_component_1 = require("./input-pin.component");
10
+ it('render InputOtp correctly without error', () => {
11
+ const pinInput = (0, _core_utils_1.render)(react_1.default.createElement(input_pin_component_1.InputPin, { title: "Enter your Aadhaar Number", hasError: false, errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number", onPinChanged: () => jest.fn(), pin: new Array(12) }));
12
+ expect(pinInput).toMatchSnapshot();
13
+ });
14
+ it('render InputOtp correctly with error', () => {
15
+ const pinInput = (0, _core_utils_1.render)(react_1.default.createElement(input_pin_component_1.InputPin, { title: "Enter your Aadhaar Number", hasError: true, errorMsg: "Uh oh! You\u2019ve entered an invalid aadhaar number", onPinChanged: () => jest.fn(), pin: new Array(12) }));
16
+ expect(pinInput).toMatchSnapshot();
17
+ });
18
+ //# sourceMappingURL=input-pin.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-pin.test.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input-pin.test.tsx"],"names":[],"mappings":";;;;;AAAA,oEAAoE;AACpE,kDAA0B;AAC1B,6CAAmC;AACnC,+DAA+C;AAE/C,EAAE,CAAC,yCAAyC,EAAE,GAAG,EAAE;IACjD,MAAM,QAAQ,GAAG,IAAA,oBAAM,EACrB,8BAAC,8BAAQ,IACP,KAAK,EAAC,2BAA2B,EACjC,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAC,sDAAiD,EAC1D,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAC7B,GAAG,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC,GAClB,CACH,CAAC;IACF,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;AACrC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,QAAQ,GAAG,IAAA,oBAAM,EACrB,8BAAC,8BAAQ,IACP,KAAK,EAAC,2BAA2B,EACjC,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAC,sDAAiD,EAC1D,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAC7B,GAAG,EAAE,IAAI,KAAK,CAAC,EAAE,CAAC,GAClB,CACH,CAAC;IACF,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe,EAAE,CAAC;AACrC,CAAC,CAAC,CAAC"}
@@ -1,73 +1,21 @@
1
1
  "use strict";
2
- var __importDefault =
3
- (this && this.__importDefault) ||
4
- function (mod) {
5
- return mod && mod.__esModule ? mod : { default: mod };
6
- };
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
7
5
  Object.defineProperty(exports, "__esModule", { value: true });
8
6
  exports.Input = void 0;
9
7
  /* eslint-disable no-console */
10
8
  const react_1 = __importDefault(require("react"));
11
9
  require("./input.styles.css");
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
- );
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 || ''}`))));
71
19
  };
72
20
  exports.Input = Input;
73
- //# sourceMappingURL=input.component.js.map
21
+ //# sourceMappingURL=input.component.js.map
@@ -1,26 +1,17 @@
1
1
  "use strict";
2
- var __importDefault =
3
- (this && this.__importDefault) ||
4
- function (mod) {
5
- return mod && mod.__esModule ? mod : { default: mod };
6
- };
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
7
5
  Object.defineProperty(exports, "__esModule", { value: true });
8
6
  exports.Primary = void 0;
9
7
  const react_1 = __importDefault(require("react"));
10
8
  const input_component_1 = require("./input.component");
11
9
  // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
12
10
  exports.default = {
13
- title: "Atoms/Input",
14
- component: input_component_1.Input,
11
+ title: 'Atoms/Input',
12
+ component: input_component_1.Input,
15
13
  };
16
14
  // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
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
- });
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 }) }));
25
16
  exports.Primary = Primary;
26
- //# sourceMappingURL=input.stories.js.map
17
+ //# sourceMappingURL=input.stories.js.map
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ /* eslint-disable testing-library/render-result-naming-convention */
7
+ const react_1 = __importDefault(require("react"));
8
+ const _core_utils_1 = require("@core-utils");
9
+ 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();
13
+ });
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();
17
+ });
18
+ //# sourceMappingURL=input.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../../../src/core-components/atoms/input/input.test.tsx"],"names":[],"mappings":";;;;;AAAA,oEAAoE;AACpE,kDAA0B;AAC1B,6CAAmC;AACnC,uDAAwC;AAExC,EAAE,CAAC,sCAAsC,EAAE,GAAG,EAAE;IAC9C,MAAM,KAAK,GAAG,IAAA,oBAAM,EAClB,8BAAC,uBAAK,IACJ,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,EAAE,EACT,UAAU,EAAC,wBAAwB,EACnC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GACzB,CACH,CAAC;IACF,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,CAAC;AAClC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;IAC3C,MAAM,KAAK,GAAG,IAAA,oBAAM,EAClB,8BAAC,uBAAK,IACJ,SAAS,EAAC,oDAAoD,EAC9D,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,EAAE,EACT,UAAU,EAAC,wBAAwB,EACnC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,GACzB,CACH,CAAC;IACF,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,CAAC;AAClC,CAAC,CAAC,CAAC"}