pixel-react 1.8.2 → 1.8.3

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 (50) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Input/types.d.ts +4 -0
  3. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  4. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  5. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +1 -0
  6. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  7. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +1 -0
  8. package/lib/components/SequentialConnectingBranch/types.d.ts +1 -0
  9. package/lib/components/TableTree/types.d.ts +4 -4
  10. package/lib/index.d.ts +8 -1
  11. package/lib/index.esm.js +66 -69
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +66 -69
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/lib/utils/formData/ConvertFormDataToObject.d.ts +1 -0
  17. package/lib/validations/regex.d.ts +7 -1
  18. package/package.json +1 -1
  19. package/src/assets/Themes/BaseTheme.scss +2 -1
  20. package/src/assets/Themes/DarkTheme.scss +9 -0
  21. package/src/assets/icons/test_freshers_logo.svg +8 -0
  22. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +9 -2
  23. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +4 -1
  24. package/src/components/Icon/Icon.stories.tsx +56 -8
  25. package/src/components/Icon/iconList.ts +3 -1
  26. package/src/components/Input/Input.stories.tsx +12 -0
  27. package/src/components/Input/Input.tsx +3 -1
  28. package/src/components/Input/types.ts +4 -0
  29. package/src/components/InputWithDropdown/types.ts +1 -1
  30. package/src/components/LabelEditTextField/LabelEditTextField.scss +4 -0
  31. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +2 -1
  32. package/src/components/LabelEditTextField/LabelEditTextField.tsx +14 -10
  33. package/src/components/LabelEditTextField/types.ts +2 -0
  34. package/src/components/MachineInputField/MachineInputField.scss +5 -1
  35. package/src/components/MachineInputField/MachineInputField.tsx +1 -0
  36. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +2 -0
  37. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +65 -57
  38. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +1 -0
  39. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +2 -0
  40. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +1 -0
  41. package/src/components/SequentialConnectingBranch/types.ts +5 -1
  42. package/src/components/TableTree/Components/TableCell.tsx +3 -3
  43. package/src/components/TableTree/TableTree.scss +0 -7
  44. package/src/components/TableTree/TableTree.tsx +3 -22
  45. package/src/components/TableTree/types.ts +4 -4
  46. package/src/utils/formData/ConvertFormDataToObject.stories.tsx +27 -0
  47. package/src/utils/formData/ConvertFormDataToObject.ts +14 -0
  48. package/src/utils/getExtension/getExtension.stories.tsx +1 -0
  49. package/src/validations/regex.stories.tsx +39 -0
  50. package/src/validations/regex.ts +19 -0
@@ -26,6 +26,7 @@ const Branches = ({
26
26
  addInstanceLabel = '',
27
27
  scriptType = '',
28
28
  projectType = '',
29
+ readOnly,
29
30
  }: BranchesProps) => {
30
31
  const evenRow = rowIndex % 2 === 0;
31
32
  const lastMachineInstance = checkEmpty(
@@ -192,72 +193,79 @@ const Branches = ({
192
193
  ) as MachineType[]
193
194
  }
194
195
  contentReverse={!evenRow}
195
- modalId={`${machineInstanceId}-runCount-${numberOfRuns}`}
196
+ modalId={`${machineInstanceId}-runCount-${
197
+ numberOfRuns - 1
198
+ }`}
196
199
  onClick={() =>
197
200
  onUpdateAddBrowserInstance(
198
201
  `${machineInstanceId}-runCount-0`,
199
- machineInstance as ExecutionContext
202
+ machineInstance as ExecutionContext
200
203
  )
201
204
  }
202
205
  />
203
206
  </div>
204
- <div
205
- className={classNames({
206
- 'ff-connecting-branch-datalist': evenRow,
207
- 'ff-connecting-branch-datalist-reverse': !evenRow,
208
- })}
209
- >
210
- {hideDataSet && (
211
- <div
212
- id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
213
- className="ff-dataset-list-branch"
207
+ {!readOnly && (
208
+ <div
209
+ className={classNames({
210
+ 'ff-connecting-branch-datalist': evenRow,
211
+ 'ff-connecting-branch-datalist-reverse': !evenRow,
212
+ })}
213
+ >
214
+ {hideDataSet && (
215
+ <>
216
+ <div
217
+ id={`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`}
218
+ className="ff-dataset-list-branch"
219
+ onClick={() =>
220
+ onUpdateDataSetList(
221
+ `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
222
+ {
223
+ peVariableSetId: peVariableSetId,
224
+ globalVariableSetId: globalVariableSetId,
225
+ testDataSetId: testDataSetId,
226
+ },
227
+ true,
228
+ numberOfRuns,
229
+ machineInstanceId
230
+ )
231
+ }
232
+ >
233
+ <Icon
234
+ name="datalist_icon"
235
+ className="ff-connecting-icon"
236
+ />
237
+ <Typography
238
+ className="ff-connecting-text"
239
+ color="var(--ff-connecting-branch-color)"
240
+ >
241
+ Dataset List
242
+ </Typography>
243
+ </div>
244
+
245
+ <Icon
246
+ name="plus_icon"
247
+ className="ff-connecting-icon"
248
+ onClick={() => onAddRunBrowser(machineInstanceId)}
249
+ color="var(--ff-connecting-branch-color)"
250
+ />
251
+ <Typography
252
+ className="ff-connecting-text"
253
+ color="var(--ff-connecting-branch-color)"
254
+ >
255
+ Run
256
+ </Typography>
257
+ </>
258
+ )}
259
+ <Icon
260
+ name="delete"
261
+ className="ff-connecting-delete-icon"
214
262
  onClick={() =>
215
- onUpdateDataSetList(
216
- `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
217
- {
218
- peVariableSetId: peVariableSetId,
219
- globalVariableSetId: globalVariableSetId,
220
- testDataSetId: testDataSetId,
221
- },
222
- true,
223
- numberOfRuns,
224
- machineInstanceId
225
- )
263
+ onDeleteBrowser(machineInstanceId, numberOfRuns)
226
264
  }
227
- >
228
- <Icon
229
- name="datalist_icon"
230
- className="ff-connecting-icon"
231
- />
232
- <Typography
233
- className="ff-connecting-text"
234
- color="var(--ff-connecting-branch-color)"
235
- >
236
- Dataset List
237
- </Typography>
238
- </div>
239
- )}
240
- <Icon
241
- name="plus_icon"
242
- className="ff-connecting-icon"
243
- onClick={() => onAddRunBrowser(machineInstanceId)}
244
- color="var(--ff-connecting-branch-color)"
245
- />
246
- <Typography
247
- className="ff-connecting-text"
248
- color="var(--ff-connecting-branch-color)"
249
- >
250
- Run
251
- </Typography>
252
- <Icon
253
- name="delete"
254
- className="ff-connecting-delete-icon"
255
- onClick={() =>
256
- onDeleteBrowser(machineInstanceId, numberOfRuns)
257
- }
258
- color="var(--ff-connecting-branch-delete-color)"
259
- />
260
- </div>
265
+ color="var(--ff-connecting-branch-delete-color)"
266
+ />
267
+ </div>
268
+ )}
261
269
  </div>
262
270
  ) : (
263
271
  <div className="ff-connecting-branch-browser-button">
@@ -24,6 +24,7 @@ export interface BranchesProps {
24
24
  machineInstance: ExecutionContext
25
25
  ) => void;
26
26
  projectType?: string;
27
+ readOnly: boolean
27
28
  }
28
29
 
29
30
  export interface branchTypeProps {
@@ -18,6 +18,7 @@ const ConnectingBranches = ({
18
18
  addInstanceLabel = '',
19
19
  scriptType = '',
20
20
  projectType = 'Web',
21
+ readOnly = false
21
22
  }: ConnectingBranchesProps) => {
22
23
  const [machineInstance, setMachineInstance] = useState<
23
24
  ExecutionContext[] | {}[]
@@ -66,6 +67,7 @@ const ConnectingBranches = ({
66
67
  addInstanceLabel={addInstanceLabel}
67
68
  scriptType={scriptType}
68
69
  projectType={projectType}
70
+ readOnly={readOnly}
69
71
  />
70
72
  </Fragment>
71
73
  ))}
@@ -21,4 +21,5 @@ export interface ConnectingBranchesProps {
21
21
  modalId: string,
22
22
  machineInstance: ExecutionContext
23
23
  ) => void;
24
+ readOnly: boolean;
24
25
  }
@@ -8,7 +8,10 @@ export interface SequentialConnectingBranchProps {
8
8
  machineOptionsList?: Option[];
9
9
  onHandleSelect?: (option: Option) => void;
10
10
  onAddBrowserInstance?: (modalId: string) => void;
11
- onUpdateAddBrowserInstance: (modalId: string, machineInstance: ExecutionContext) => void;
11
+ onUpdateAddBrowserInstance: (
12
+ modalId: string,
13
+ machineInstance: ExecutionContext
14
+ ) => void;
12
15
  onDeleteBrowserInstance?: (id: string, runCount: number) => void;
13
16
  onAddRunBrowserInstance?: (machineInstanceId: string) => void;
14
17
  onDeleteMachineInstance?: () => void;
@@ -23,6 +26,7 @@ export interface SequentialConnectingBranchProps {
23
26
  addInstanceLabel?: string;
24
27
  scriptType?: string;
25
28
  projectType?: string;
29
+ readOnly?: boolean;
26
30
  }
27
31
 
28
32
  // Type for machine information
@@ -15,7 +15,7 @@ const renderSpaces = (
15
15
  <span
16
16
  key={i}
17
17
  className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
18
- isLast && i === level-1 ? 'last-node' : ''
18
+ isLast && i === level - 1 ? 'last-node' : ''
19
19
  }`}
20
20
  />
21
21
  ))}
@@ -51,7 +51,7 @@ const TableCell = React.memo(
51
51
  {col.isTree && select === 'checkbox' && (
52
52
  <Checkbox
53
53
  checked={selected.includes(node.id)}
54
- onChange={() => onCheckBoxChange('checkbox', node)}
54
+ onChange={(e) => onCheckBoxChange(e, node)}
55
55
  />
56
56
  )}
57
57
  {col.isTree && select === 'radio' && (
@@ -59,7 +59,7 @@ const TableCell = React.memo(
59
59
  name={node.title}
60
60
  checked={selected.includes(node.id)}
61
61
  value={node.id}
62
- onChange={() => onCheckBoxChange('radio', node)}
62
+ onChange={(e) => onCheckBoxChange(e, node)}
63
63
  />
64
64
  )}
65
65
  {prepareData(node, col)}
@@ -199,13 +199,6 @@
199
199
  transition: transform 0.3s ease;
200
200
  }
201
201
 
202
- tr:after {
203
- content: ' ';
204
- display: block;
205
- visibility: hidden;
206
- clear: both;
207
- }
208
-
209
202
  .tree-table-space-container {
210
203
  display: inline-flex;
211
204
  // flex-direction: row-reverse;
@@ -4,7 +4,6 @@ import { TreeTableProps } from './types';
4
4
  import TableHead from './Components/TableHead';
5
5
  import TableBody from './Components/TableBody';
6
6
  import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
7
- import getAllChildIds from './Utils/getAllChildIds';
8
7
  import functionCheck from '../../utils/functionCheck/functionCheck';
9
8
 
10
9
  const TreeTable: React.FC<TreeTableProps> = ({
@@ -41,28 +40,10 @@ const TreeTable: React.FC<TreeTableProps> = ({
41
40
  );
42
41
 
43
42
  const handleCheckBoxChange = useCallback(
44
- (type: string, node: any) => {
45
- const nodeId = node.id;
46
-
47
- if (type === 'radio') {
48
- onChange?.('true', [nodeId]);
49
- } else {
50
- let updatedSelected = [...selected];
51
-
52
- if (!updatedSelected.includes(nodeId)) {
53
- const childIds = getAllChildIds(nodeId, treeData);
54
- updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
55
- } else {
56
- const childIds = getAllChildIds(nodeId, treeData);
57
- updatedSelected = updatedSelected.filter(
58
- (id) => !childIds.includes(id)
59
- );
60
- }
61
-
62
- onChange?.('true', updatedSelected);
63
- }
43
+ (e: any, node: any) => {
44
+ onChange?.(e, node);
64
45
  },
65
- [selected, treeData, onChange]
46
+ [onChange]
66
47
  );
67
48
 
68
49
  const handleRowClick = useCallback(
@@ -15,7 +15,7 @@ export interface TableCellProps {
15
15
  level: number;
16
16
  selected: string[];
17
17
  select: string | null;
18
- onCheckBoxChange: (type: string, node: any) => void;
18
+ onCheckBoxChange: (e: any, node: string[] | any) => void;
19
19
  onToggleExpand: (node: any) => void;
20
20
  parentSiblings: boolean[];
21
21
  isLast: boolean | undefined;
@@ -32,7 +32,7 @@ export interface TableBodyProps {
32
32
  select: string | null;
33
33
  onRowClick: (e: any, node: any) => void;
34
34
  onToggleExpand: (node: any) => void;
35
- onCheckBoxChange: (type: string, node: any) => void;
35
+ onCheckBoxChange: (e: any, node: string[] | any) => void;
36
36
  }
37
37
 
38
38
  export interface TableRowProps {
@@ -43,7 +43,7 @@ export interface TableRowProps {
43
43
  select: string | null;
44
44
  onRowClick: (e: any, node: any) => void;
45
45
  onToggleExpand: (node: any) => void;
46
- onCheckBoxChange: (type: string, node: any) => void;
46
+ onCheckBoxChange: (e: any, node: string[] | any) => void;
47
47
  parentSiblings: boolean[];
48
48
  isLast: boolean | undefined;
49
49
  }
@@ -65,7 +65,7 @@ export interface TreeTableProps {
65
65
  columnsData: Column[];
66
66
  selected?: string[];
67
67
  select?: 'radio' | 'checkbox' | 'none';
68
- onChange?: (e: any, node: string[]) => void;
68
+ onChange?: (e: any, node: string[] | any) => void;
69
69
  onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
70
70
  onExpand?: (_isExpanded: boolean, node: string) => void;
71
71
  loadMore?: (_direction?: string) => void;
@@ -0,0 +1,27 @@
1
+ import React from 'react';
2
+ import { convertFormDataToObject } from './ConvertFormDataToObject';
3
+
4
+ export default {
5
+ title: 'Utils/convertFormDataToObject',
6
+ component: convertFormDataToObject,
7
+ };
8
+
9
+ export const Default = () => {
10
+ const formData = new FormData();
11
+ formData.append('username', 'Md Imran');
12
+ formData.append('email', 'im@xyz.com');
13
+ formData.append('age', '23');
14
+
15
+ const result = convertFormDataToObject(formData);
16
+
17
+ return (
18
+ <div>
19
+ <h3>Test convertFormDataToObject</h3>
20
+ <pre>
21
+ Convertion to an Array to show existing FormData:
22
+ {JSON.stringify(Array.from(formData.entries()), null, 2)}
23
+ </pre>
24
+ <pre>Result: {JSON.stringify(result, null, 2)}</pre>
25
+ </div>
26
+ );
27
+ };
@@ -0,0 +1,14 @@
1
+ export const convertFormDataToObject = (formData: FormData): Record<string, any> => {
2
+ const obj: Record<string, any> = {};
3
+ formData.forEach((value, key) => {
4
+ if (obj[key]) {
5
+ // If the key already exists, convert it to an array
6
+ obj[key] = Array.isArray(obj[key])
7
+ ? [...obj[key], value]
8
+ : [obj[key], value];
9
+ } else {
10
+ obj[key] = value;
11
+ }
12
+ });
13
+ return obj;
14
+ };
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { getExtension } from './getExtension';
2
3
 
3
4
  export default {
@@ -46,6 +46,12 @@ import {
46
46
  CURRENCY_GENERIC_REGEX,
47
47
  LINKEDIN_PROFILE_REGEX,
48
48
  TWITTER_HANDLE_REGEX,
49
+ STEP_GROUP_NAME_REGEX,
50
+ NLP_DESCRIPTION_REGEX,
51
+ FILE_NAME_REGEX,
52
+ ELEMENTS_TRAILING_SPACE_REGEX,
53
+ ELEMENTS_WHITE_SPACE_REGEX,
54
+ PARAMETER_ALPHANUMERIC_REGEX,
49
55
  } from './regex';
50
56
 
51
57
  export default {
@@ -287,8 +293,41 @@ export const Playground = () => {
287
293
  regex: TWITTER_HANDLE_REGEX,
288
294
  description: 'Validates Twitter handle (e.g. @username)',
289
295
  },
296
+ {
297
+ name: 'STEP_GROUP_NAME_REGEX',
298
+ regex: STEP_GROUP_NAME_REGEX,
299
+ description:
300
+ 'Step group name accept only ( ,) ,-,_ special characters(e.g,step-group_one(test))',
301
+ },
302
+ {
303
+ name: 'NLP_DESCRIPTION_REGEX',
304
+ regex: NLP_DESCRIPTION_REGEX,
305
+ description:
306
+ 'NLP Description should allow _ and $ only (e.g ,$nlpName_test)',
307
+ },
308
+ {
309
+ name: 'FILE_NAME_REGEX',
310
+ regex: FILE_NAME_REGEX,
311
+ description: `It should include a valid file extension (e.g.,'.txt', '.jpg') without special characters like '@' or multiple dots after the extension.`,
312
+ },
313
+ {
314
+ name: 'ELEMENTS_TRAILING_SPACE_REGEX',
315
+ regex: ELEMENTS_TRAILING_SPACE_REGEX,
316
+ description: `Element Name should not have space in the initial and end.`,
317
+ },
318
+ {
319
+ name: 'ELEMENTS_WHITE_SPACE_REGEX',
320
+ regex: ELEMENTS_WHITE_SPACE_REGEX,
321
+ description: `Elements name should not have only white space.`,
322
+ },
323
+ {
324
+ name: 'PARAMETER_ALPHANUMERIC_REGEX,',
325
+ regex: PARAMETER_ALPHANUMERIC_REGEX,
326
+ description: `Parameter name should be alphanumeric.`,
327
+ },
290
328
  ];
291
329
 
330
+
292
331
  const validateInput = () => {
293
332
  const validator = validators.find(
294
333
  (validator) => validator.name === selectedRegex
@@ -145,6 +145,19 @@ const LINKEDIN_PROFILE_REGEX =
145
145
  // Twitter Handle Validation
146
146
  const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
147
147
 
148
+ const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
149
+
150
+ const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
151
+
152
+ const FILE_NAME_REGEX = /\.([^.@]+)$/;
153
+
154
+ const ELEMENTS_TRAILING_SPACE_REGEX = /^\S.*\S$/;
155
+
156
+ const ELEMENTS_WHITE_SPACE_REGEX = /.*\S.*/;
157
+
158
+ const PARAMETER_ALPHANUMERIC_REGEX =
159
+ /^[-_A-Za-z0-9 ]*$|^[-_A-Za-z0-9 ][A-Za-z0-9 ]*[-_A-Za-z-_]$/;
160
+
148
161
  export {
149
162
  EMAIL_REGEX,
150
163
  URL_REGEX,
@@ -191,4 +204,10 @@ export {
191
204
  CURRENCY_GENERIC_REGEX,
192
205
  LINKEDIN_PROFILE_REGEX,
193
206
  TWITTER_HANDLE_REGEX,
207
+ STEP_GROUP_NAME_REGEX,
208
+ NLP_DESCRIPTION_REGEX,
209
+ FILE_NAME_REGEX,
210
+ ELEMENTS_TRAILING_SPACE_REGEX,
211
+ ELEMENTS_WHITE_SPACE_REGEX,
212
+ PARAMETER_ALPHANUMERIC_REGEX,
194
213
  };