pixel-react 1.6.9 → 1.7.1

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 (147) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. package/src/components/AddVariables/index.ts +0 -1
@@ -1,4 +1,4 @@
1
- import { ReactNode } from "react";
1
+ import { ReactNode } from 'react';
2
2
 
3
3
  interface OptionClick {
4
4
  /**
@@ -6,7 +6,7 @@ interface OptionClick {
6
6
  * @type {string}
7
7
  * @required
8
8
  */
9
- label: string |ReactNode;
9
+ label: string | ReactNode;
10
10
 
11
11
  /**
12
12
  * The value(s) associated with the option, which can be a single string or an array of strings.
@@ -208,6 +208,7 @@ interface MenuOptionProps {
208
208
  * @optional
209
209
  */
210
210
  optionCardVariant?: 'primary';
211
+ targetRef?: React.RefObject<HTMLElement>;
211
212
  }
212
213
 
213
214
  interface OptionProps {
@@ -117,7 +117,6 @@
117
117
  background: var(--ff-mini-modal-border);
118
118
  position: relative;
119
119
  max-height: fit-content;
120
- padding: 4px;
121
120
  width: 100%;
122
121
  margin: 0 0 0 -5px;
123
122
  height: 100%;
@@ -55,7 +55,12 @@ const BasicModalComponent = () => {
55
55
  isOverlay: true,
56
56
  zIndexOverlay: 99,
57
57
  }}
58
- modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
58
+ modalProperties={{
59
+ width: 300,
60
+ height: 180,
61
+ left: 180,
62
+ top: 250,
63
+ }}
59
64
  headerProps={
60
65
  <>
61
66
  <Typography as="p">Modal 1</Typography>
@@ -52,6 +52,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
52
52
  boxShadow: modalBoxShadow,
53
53
  left: modalLeft,
54
54
  top: modalTop,
55
+ padding: modalPadding,
55
56
  } = modalProperties || {};
56
57
 
57
58
  const {
@@ -300,6 +301,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
300
301
  modalBoxShadow ??
301
302
  '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'
302
303
  }`,
304
+ padding: `${modalPadding ?? 4}px`,
303
305
  }}
304
306
  >
305
307
  {headerProps ? (
@@ -312,7 +314,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
312
314
  <hr />
313
315
  </Typography>
314
316
  )}
315
- <div>{childContent}</div>
317
+ {childContent}
316
318
  {footerContent ? (
317
319
  <Typography as="footer">{footerContent}</Typography>
318
320
  ) : isIconModel ? (
@@ -7,6 +7,7 @@ interface ModalDimensions {
7
7
  boxShadow?: string;
8
8
  left?: number;
9
9
  top?: number;
10
+ padding?: number;
10
11
  }
11
12
  export interface MiniEditModalProps {
12
13
  /**
@@ -10,11 +10,11 @@
10
10
  box-sizing: border-box;
11
11
  margin-block: 4px;
12
12
  max-height: 160px;
13
-
14
13
  .ff-multiselect-options-wrapper {
15
14
  max-height: 128px;
16
15
  overflow-y: auto;
17
16
  border-radius: 2px;
17
+ overflow-x: hidden;
18
18
  &::-webkit-scrollbar {
19
19
  width: 4px;
20
20
  height: 40px;
@@ -37,11 +37,10 @@
37
37
  }
38
38
 
39
39
  .no-options {
40
- @extend .fontMd;
41
- color: var(--pop-up-background-blur);
40
+ color: var(--ff-select-text-color);
42
41
  text-align: center;
43
42
  margin: 0;
44
- padding: 10px;
43
+ padding: 7px;
45
44
  line-height: 12px;
46
45
  }
47
46
  .dropdown-option-container {
@@ -10,6 +10,7 @@ import Checkbox from '../Checkbox';
10
10
  import Tooltip from '../Tooltip';
11
11
  import { truncateText } from '../../utils/truncateText/truncateText';
12
12
  import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
13
+ import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
13
14
 
14
15
  const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
15
16
  (
@@ -21,11 +22,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
21
22
  zIndex,
22
23
  withSelectButton,
23
24
  labelAccessor='label',
24
- valueAccessor='value'
25
+ valueAccessor='value',
26
+ loadMoreOptions,
25
27
  },
26
28
  ref
27
29
  ) => {
28
- const filteredOptions = options
30
+ const filteredOptions = options
29
31
  ? options.filter((option) =>
30
32
  getValue(option, valueAccessor)
31
33
  ?.toLowerCase()
@@ -70,6 +72,22 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
70
72
 
71
73
  const themeContext = useContext(ThemeContext);
72
74
  const currentTheme = themeContext?.currentTheme;
75
+
76
+ useIntersectionObserver(['ff-multiselect-pagination'], {
77
+ root: document.getElementById('ff-multiselect-options-wrapper'),
78
+ rootMargin: '0px',
79
+ threshold: 0.1,
80
+ onIntersect: (entry, _observer) => {
81
+ if (entry.isIntersecting) {
82
+ if (loadMoreOptions) {
83
+ loadMoreOptions();
84
+ }
85
+
86
+
87
+ }
88
+ },
89
+ });
90
+
73
91
  return (
74
92
  <div
75
93
  role="listbox"
@@ -87,13 +105,17 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
87
105
  <div
88
106
  className="ff-multiselect-options-wrapper"
89
107
  style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
108
+
109
+ id="ff-multiselect-options-wrapper"
90
110
  >
91
111
  {filteredOptions.length === 0 ? (
92
- <div className="dropdown-option-container ">
93
- <p className="no-options">No Option</p>
94
- </div>
112
+ <Typography textAlign='center' as='p' className='no-options'>
113
+ No Result Found
114
+ </Typography>
115
+
95
116
  ) : (
96
- filteredOptions.map((info) => (
117
+ <>
118
+ { filteredOptions.map((info) => (
97
119
  <div
98
120
  role="option"
99
121
  className={`dropdown-option-container`}
@@ -126,7 +148,12 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
126
148
  }
127
149
  />
128
150
  </div>
129
- ))
151
+ ))}
152
+
153
+ <div id="ff-multiselect-pagination" >
154
+ </div>
155
+ </>
156
+
130
157
  )}
131
158
  </div>
132
159
  {withSelectButton && filteredOptions.length > 0 && (
@@ -203,6 +203,7 @@
203
203
  @include hovered-styles(var(--error-light));
204
204
  }
205
205
  &--disabled {
206
+ opacity: 0.5;
206
207
  pointer-events: none;
207
208
 
208
209
  border: 1px solid var(--multi-select-border);
@@ -78,6 +78,7 @@ const MultiSelect = ({
78
78
  labelAccessor = 'label',
79
79
  valueAccessor = 'value',
80
80
  withSelectButton = variant === 'machines' ? true : false,
81
+ loadMoreOptions = () => { },
81
82
  onEnter = () => { },
82
83
  }: MultiSelectProps) => {
83
84
  const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -463,6 +464,8 @@ const MultiSelect = ({
463
464
  zIndex={zIndex}
464
465
  withSelectButton={withSelectButton}
465
466
  labelAccessor={labelAccessor}
467
+ valueAccessor={valueAccessor}
468
+ loadMoreOptions={loadMoreOptions}
466
469
  />,
467
470
  document.body
468
471
  )}
@@ -41,7 +41,9 @@ interface MultiSelectProps {
41
41
 
42
42
  valueAccessor?: string;
43
43
 
44
- onEnter?:(newOption:string)=>void
44
+ onEnter?:(newOption:string)=>void;
45
+
46
+ loadMoreOptions?: () =>void;
45
47
  }
46
48
 
47
49
  export { Option, MultiSelectProps };
@@ -16,4 +16,6 @@ export interface DropdownProps {
16
16
  onSelect?: () => void;
17
17
  labelAccessor?: string;
18
18
  valueAccessor?: string;
19
+ loadMoreOptions?: () => void;
20
+
19
21
  }
@@ -15,13 +15,11 @@
15
15
 
16
16
  @mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
17
17
  opacity: $opacity;
18
-
19
18
  @if $color {
20
- color: $color;
19
+ color: var(--nlp-input-placeholder-color);
21
20
  }
22
-
23
21
  @if $border-color-arg {
24
- border-color: $border-color-arg;
22
+ border-color: var(--nlp-border-color);
25
23
  }
26
24
  }
27
25
 
@@ -29,22 +27,20 @@
29
27
  position: relative;
30
28
 
31
29
  .ff-nlp-input {
32
- @extend .fontSm;
33
30
  margin: 0;
34
31
  padding: 0;
35
32
  box-sizing: border-box;
36
33
  min-height: 32px;
37
- min-width: 489px;
34
+ min-width: 482px;
38
35
  display: flex;
39
36
  align-items: end;
40
37
  position: relative;
41
-
42
38
  &-fieldset {
43
39
  margin: 0;
44
40
  padding: 25px 0px 0px 8px;
45
41
  border: 1px solid transparent;
46
42
  box-sizing: border-box;
47
- height: 100%;
43
+ height: 32px;
48
44
  width: 100%;
49
45
  border-radius: 4px;
50
46
  display: block;
@@ -81,7 +77,6 @@
81
77
  @extend .font-size-8;
82
78
  padding: 0 2px;
83
79
  letter-spacing: 0.5px;
84
-
85
80
  &--default {
86
81
  @include transition-all(0.3s);
87
82
  opacity: 0;
@@ -106,11 +101,10 @@
106
101
  }
107
102
  }
108
103
 
109
- &-input {
110
- @extend .fontSm;
104
+ &-container {
111
105
  @include absolute-position(6px, auto, auto, auto);
112
106
  width: calc(100% - 38px);
113
- min-height: calc(100% - 8px);
107
+ height: 32px;
114
108
  padding: 0 28px 0 8px;
115
109
  border-radius: 4px;
116
110
  border: 1px solid transparent;
@@ -118,10 +112,12 @@
118
112
  background: transparent;
119
113
  outline: none;
120
114
  color: var(--ff-nlp-input-text-color);
115
+ text-indent: 22px;
121
116
 
122
117
  &:hover {
123
118
  ~ .ff-nlp-input-label {
124
- color: var(--ff-nlp-input-text-hover-color);
119
+ color: var(--nlp-input-placeholder-color);
120
+ padding-left: 26px;
125
121
  }
126
122
  }
127
123
 
@@ -133,7 +129,7 @@
133
129
  @include opacity-style(1, null, var(--ff-nlp-input-border-color));
134
130
 
135
131
  &:hover {
136
- border-color: var(--ff-nlp-input-text-color);
132
+ border-color: var(--nlp-input-placeholder-color);
137
133
 
138
134
  ~ .ff-nlp-input-fieldset--option {
139
135
  border-color: var(--ff-nlp-input-text-color);
@@ -208,7 +204,6 @@
208
204
  }
209
205
 
210
206
  &--active {
211
- @extend .font-size-8;
212
207
  @include transition-all;
213
208
  opacity: 0;
214
209
  transform: translateY(-150%);
@@ -225,17 +220,12 @@
225
220
  top: 60%;
226
221
  height: 100%;
227
222
  right: 10px;
228
- transform: rotateX(180deg) translateY(50%);
223
+ transform: rotateX(0deg) translateY(-50%);
229
224
  cursor: pointer;
230
225
 
231
226
  &--no-label {
232
227
  top: 50%;
233
228
  }
234
-
235
- &--down {
236
- transform: rotateX(0deg) translateY(-50%);
237
- z-index: 101;
238
- }
239
229
  }
240
230
  }
241
231
 
@@ -243,4 +233,70 @@
243
233
  @include absolute-position(auto, auto, -14px, 12px);
244
234
  white-space: nowrap;
245
235
  }
236
+ .ff-nlp-input-label {
237
+ display: flex;
238
+ align-items: center;
239
+ padding-left: 26px;
240
+ gap: 4px;
241
+ }
242
+ .ff-nlp-help_icon {
243
+ position: absolute;
244
+ bottom: 2px;
245
+ left: 8px;
246
+ width: 30px;
247
+ height: 30px;
248
+ z-index: 100;
249
+ cursor: pointer;
250
+ }
251
+ }
252
+ .ff-nlp-input-arrow {
253
+ z-index: 111;
254
+ }
255
+ .icon-container {
256
+ position: relative;
257
+ display: inline-block;
258
+ }
259
+
260
+ .icon-label {
261
+ position: absolute;
262
+ bottom: 100%;
263
+ left: 50%;
264
+ transform: translateX(-55%);
265
+ transform: translateY(-145%);
266
+ margin-bottom: 5px;
267
+ visibility: hidden;
268
+ opacity: 0;
269
+ transition: opacity 0.3s ease, visibility 0s linear 0.3s;
270
+ background-color: var(--tooltip-bg-color);
271
+ color: var(--tooltip-text-color);
272
+ padding: 2px 5px;
273
+ border-radius: 3px;
274
+ white-space: nowrap;
275
+ }
276
+
277
+ .icon-container:hover .icon-label {
278
+ visibility: visible;
279
+ opacity: 1;
280
+ transition-delay: 0s;
281
+ }
282
+
283
+ .help-icon-label {
284
+ position: absolute;
285
+ bottom: 80%;
286
+ left: 96%;
287
+ transform: translateX(-50%);
288
+ margin-bottom: 5px;
289
+ visibility: hidden;
290
+ opacity: 0;
291
+ transition: opacity 0.3s ease, visibility 0s linear 0.3s;
292
+ background-color: var(--tooltip-bg-color);
293
+ color: var(--tooltip-text-color);
294
+ padding: 2px 5px;
295
+ border-radius: 3px;
296
+ white-space: nowrap;
297
+ }
298
+ .help-icon-container:hover .help-icon-label {
299
+ visibility: visible;
300
+ opacity: 1;
301
+ transition-delay: 0s;
246
302
  }
@@ -1,7 +1,7 @@
1
+ import React, { useState } from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import NlpInput from './NlpInput';
3
- // import { useState } from 'react';
4
- // import { Option } from '../NLPInput/type';
4
+ import { nlpList } from './sampleData';
5
5
 
6
6
  const meta: Meta<typeof NlpInput> = {
7
7
  title: 'Components/NlpInput',
@@ -14,74 +14,48 @@ const meta: Meta<typeof NlpInput> = {
14
14
 
15
15
  type Story = StoryObj<typeof NlpInput>;
16
16
 
17
- export const Primary: Story = {
17
+ // Refactor primaryNlp to utilize args for control panel
18
+ export const PrimaryNlp: Story = {
18
19
  args: {
19
- label: 'NLP Input',
20
- optionsList: [
21
- {
22
- desc: 'randomNumber',
23
- displayName: 'randomNumber',
24
- failMessage: 'randomNumber has failed',
25
- isNonPE: false,
26
- name: 'randomNumber',
27
- nlpName: 'randomNumber',
28
- nlpType: 'PROGRAM_ELEMENTS',
29
- packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
30
- parentId: 'PKJ1017',
31
- passMessage: 'randomNumber has passed',
32
- programElementId: 'PRG_ELE1001',
33
- projectId: 'PJT1001',
34
- returnType: 'java.lang.Integer',
35
- searchName: 'randomNumber',
36
- stepInputs: [{}], // Placeholder, replace with actual data if needed
37
- toolTip: 'Logics : randomNumber',
38
- _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
39
- _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
40
- },
41
- {
42
- desc: 'randomNumber',
43
- displayName: 'randomNumber',
44
- failMessage: 'randomNumber has failed',
45
- isNonPE: false,
46
- name: 'randomNumber',
47
- nlpName: 'randomNumber',
48
- nlpType: 'PROGRAM_ELEMENTS',
49
- packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
50
- parentId: 'PKJ1017',
51
- passMessage: 'randomNumber has passed',
52
- programElementId: 'PRG_ELE1001',
53
- projectId: 'PJT1001',
54
- returnType: 'java.lang.Integer',
55
- searchName: 'randomNumber',
56
- stepInputs: [
57
- { name: 'Range Of The Number', type: 'java.lang.Integer' },
58
- ], // Placeholder, replace with actual data if needed
59
- toolTip: 'Logics : randomNumber',
60
- _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
61
- _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
62
- },
63
- {
64
- description: '',
65
- displayName: 'Open Browser 1',
66
- failMessage: 'Open Browser is failed',
67
- imported: false,
68
- libraryId: 'LIB1002',
69
- name: 'Open Browser',
70
- nlpName: 'Open Browser',
71
- nlpType: 'STEP_GROUP',
72
- parentId: 'STP_GRP1001',
73
- passMessage: 'Open Browser is passed',
74
- path: '/Root/Open and Close Browser/Open Browser',
75
- platform: 'Web',
76
- projectId: 'PJT1001',
77
- returnType: 'void',
78
- searchName: 'Open Browser',
79
- stepInputs: [], // Empty array for step inputs
80
- toolTip: 'Open and Close Browser : Open Browser : Web',
81
- _class: 'com.tyss.optimize.data.models.db.model.StepGroupNlp',
82
- _id: 'SG_NLP1001',
83
- },
84
- ],
20
+ label: 'Search NLP',
21
+ leftIcon: 'ai_search',
22
+ rightIcon: 'help_icon',
23
+ rightIconColor: 'var(--nlp-color)',
24
+ containerWidth: '1000px',
25
+ value: '',
26
+ optionsList: nlpList,
27
+ },
28
+ render: (args) => {
29
+ const [inputValue, setInputValue] = useState(args.value);
30
+ const [optionList, setOptionList] = useState(args.optionsList);
31
+
32
+ const handleChange = (e) => {
33
+ setInputValue(e.target.value);
34
+ setOptionList(nlpList);
35
+ };
36
+
37
+ const handleSelect = (e) => {
38
+ setInputValue(e.displayName);
39
+ };
40
+
41
+ return (
42
+ <NlpInput
43
+ {...args}
44
+ value={inputValue}
45
+ onChange={handleChange}
46
+ onSelect={handleSelect}
47
+ optionsList={optionList}
48
+ webServiceClick={() => {
49
+ alert('webServiceClick!');
50
+ }}
51
+ onHelpIconClick={() => {
52
+ alert('Help icon clicked!!');
53
+ }}
54
+ aiIconClick={() => {
55
+ alert('aiIconClick!');
56
+ }}
57
+ />
58
+ );
85
59
  },
86
60
  };
87
61
 
@@ -93,44 +67,4 @@ export const Disable: Story = {
93
67
  },
94
68
  };
95
69
 
96
- // export const WithInitialValue: Story = {
97
- // args: {
98
- // label: 'NLP Input',
99
- // selectedOption: { label: 'Option 2', value: '2' },
100
- // optionsList: [
101
- // { label: 'NLP 1', value: '1' },
102
- // { label: 'NLP 2', value: '2' },
103
- // { label: 'NLP 3', value: '3' },
104
- // ],
105
- // },
106
- // };
107
-
108
- // export const OptionSelection: Story = {
109
- // render: () => {
110
- // const optionsList = [
111
- // { label: 'NLP 1', value: '1' },
112
- // { label: 'NLP 2', value: '2' },
113
- // { label: 'NLP 3', value: '3' },
114
- // ];
115
-
116
- // const [selectedOption, setSelectedOption] = useState<Option>({
117
- // label: 'NLP 2',
118
- // value: '2',
119
- // });
120
-
121
- // const handleChange = (option: Option) => {
122
- // setSelectedOption(option);
123
- // };
124
-
125
- // return (
126
- // <NlpInput
127
- // label="NLP Input"
128
- // optionsList={optionsList}
129
- // selectedOption={selectedOption}
130
- // onChange={handleChange}
131
- // />
132
- // );
133
- // },
134
- // };
135
-
136
70
  export default meta;