pixel-react 1.10.3 → 1.10.5

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 (83) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +2 -1
  2. package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
  3. package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
  4. package/lib/components/AddResourceButton/index.d.ts +1 -1
  5. package/lib/components/AddResourceButton/type.d.ts +2 -0
  6. package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
  7. package/lib/components/BrowserTabs/index.d.ts +1 -0
  8. package/lib/components/BrowserTabs/types.d.ts +64 -0
  9. package/lib/components/ConnectingBranch/data.d.ts +62 -64
  10. package/lib/components/ConnectingBranch/types.d.ts +28 -7
  11. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
  12. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
  13. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
  14. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  15. package/lib/components/Excel/Types.d.ts +1 -0
  16. package/lib/components/InputWithDropdown/types.d.ts +3 -0
  17. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  18. package/lib/components/MenuOption/types.d.ts +1 -0
  19. package/lib/components/MiniModal/types.d.ts +2 -1
  20. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  21. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  22. package/lib/components/TableTree/types.d.ts +4 -3
  23. package/lib/index.d.ts +112 -12
  24. package/lib/index.esm.js +504 -218
  25. package/lib/index.esm.js.map +1 -1
  26. package/lib/index.js +505 -218
  27. package/lib/index.js.map +1 -1
  28. package/lib/tsconfig.tsbuildinfo +1 -1
  29. package/package.json +1 -1
  30. package/src/ComponentProps/TreeNodeProps.ts +2 -1
  31. package/src/assets/Themes/BaseTheme.scss +1 -2
  32. package/src/assets/Themes/DarkTheme.scss +0 -1
  33. package/src/assets/styles/_mixins.scss +19 -0
  34. package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
  35. package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
  36. package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
  37. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
  38. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
  39. package/src/components/AddResourceButton/index.ts +1 -1
  40. package/src/components/AddResourceButton/type.ts +2 -0
  41. package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
  42. package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
  43. package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
  44. package/src/components/BrowserTabs/index.ts +1 -0
  45. package/src/components/BrowserTabs/types.ts +73 -0
  46. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
  47. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
  48. package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
  49. package/src/components/ConnectingBranch/data.tsx +207 -213
  50. package/src/components/ConnectingBranch/types.ts +26 -17
  51. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
  52. package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
  53. package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
  54. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
  55. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
  56. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
  57. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
  58. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
  59. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
  63. package/src/components/Excel/ExcelFile.stories.tsx +10 -2
  64. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
  65. package/src/components/Excel/Types.ts +1 -0
  66. package/src/components/Excel/dataConversion.ts +17 -19
  67. package/src/components/InputWithDropdown/InputWithDropdown.tsx +6 -0
  68. package/src/components/InputWithDropdown/types.ts +7 -1
  69. package/src/components/MenuOption/MenuOption.tsx +4 -0
  70. package/src/components/MenuOption/types.ts +1 -0
  71. package/src/components/MiniModal/MiniModal.scss +8 -0
  72. package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
  73. package/src/components/MiniModal/types.ts +2 -1
  74. package/src/components/Table/Table.stories.tsx +1 -1
  75. package/src/components/Table/Table.tsx +8 -4
  76. package/src/components/TableTree/Components/TableCell.tsx +25 -10
  77. package/src/components/TableTree/Components/TableHead.tsx +5 -5
  78. package/src/components/TableTree/Components/TableRow.tsx +27 -24
  79. package/src/components/TableTree/TableTree.scss +89 -69
  80. package/src/components/TableTree/TableTree.stories.tsx +66 -2
  81. package/src/components/TableTree/types.ts +4 -3
  82. package/src/index.ts +2 -0
  83. package/src/utils/getTreeDetails/getTreeDetails.ts +1 -1
@@ -1,10 +1,16 @@
1
+ import { ffid } from '../../../utils/ffID/ffid';
1
2
  import Typography from '../../Typography';
2
- import { indexType, MachineData, MachineInstancesProps } from '../types';
3
+ import {
4
+ indexType,
5
+ MachineData,
6
+ MachineInstancesProps,
7
+ RunLevelExecutionDataSet,
8
+ } from '../types';
3
9
 
4
10
  const MachineInstances: React.FC<MachineInstancesProps> = ({
5
11
  getChildNodeComponent,
6
- parentNode,
7
- data,
12
+ parentNodeIndex,
13
+ parentNodeData,
8
14
  verticalLineHeight,
9
15
  datasetHeight,
10
16
  curveHeights,
@@ -13,7 +19,7 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
13
19
  }) => {
14
20
  return (
15
21
  <>
16
- {data?.machineInstances?.length === 0 ? (
22
+ {parentNodeData?.machineInstances?.length === 0 ? (
17
23
  <>
18
24
  <div className="ff-selectedMachines-connecting-line">
19
25
  <div className="ff-line">
@@ -22,18 +28,19 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
22
28
  </div>
23
29
  </div>
24
30
  <div className="ff-machine-instance ff-machine-env-button">
25
- {getChildNodeComponent(true, data, parentNode)}
31
+ {getChildNodeComponent({
32
+ isButton: true,
33
+ parentNodeData,
34
+ parentNodeIndex,
35
+ })}
26
36
  </div>
27
37
  </>
28
38
  ) : (
29
- data?.machineInstances?.map(
30
- (instance: MachineData, machineInstanceIndex: indexType) => {
31
- const isFirstLine = machineInstanceIndex === 0;
39
+ parentNodeData?.machineInstances?.map(
40
+ (childNodeData: MachineData, childNodeIndex: indexType) => {
41
+ const isFirstLine = childNodeIndex === 0;
32
42
  return (
33
- <div
34
- className="ff-machine-instance-row"
35
- key={instance.clientId || machineInstanceIndex}
36
- >
43
+ <div className="ff-machine-instance-row" key={ffid()}>
37
44
  <div
38
45
  className={`ff-selectedMachines-connecting-line ${
39
46
  !isFirstLine ? 'ff-second-line' : ''
@@ -53,23 +60,28 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
53
60
  </div>
54
61
 
55
62
  <div className="ff-machine-instance">
56
- {instance.runLevelExecutionDataSets.map(
63
+ {childNodeData.runLevelExecutionDataSets.map(
57
64
  (
58
- dataSet: MachineData,
59
- runLevelExecutionDataIndex: indexType
65
+ runLevelExecutionDataSet: RunLevelExecutionDataSet,
66
+ runLevelExecutionDataSetIndex: indexType
60
67
  ) => (
61
68
  <div
62
- key={runLevelExecutionDataIndex}
69
+ key={
70
+ runLevelExecutionDataSet?.runLevelExecutionDataSetId +
71
+ ffid()
72
+ }
63
73
  className="ff-run-level-execution-dataset"
64
74
  ref={
65
- runLevelExecutionDataIndex === 0 ? datasetRef : null
75
+ runLevelExecutionDataSetIndex === 0
76
+ ? datasetRef
77
+ : null
66
78
  }
67
79
  >
68
80
  <div
69
81
  className="ff-execution-item"
70
- key={dataSet.executionDataSetId}
82
+ key={ffid()}
71
83
  ref={(element) =>
72
- (itemRefs.current[runLevelExecutionDataIndex] =
84
+ (itemRefs.current[runLevelExecutionDataSetIndex] =
73
85
  element)
74
86
  }
75
87
  >
@@ -78,18 +90,19 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
78
90
  style={{ top: `${-datasetHeight}px` }}
79
91
  >
80
92
  <div
81
- className={`ff-curve ff-connector-${runLevelExecutionDataIndex}`}
93
+ className={`ff-curve ff-connector-${runLevelExecutionDataSetIndex}`}
82
94
  style={{
83
- height: `${curveHeights[runLevelExecutionDataIndex]}px`,
95
+ height: `${curveHeights[runLevelExecutionDataSetIndex]}px`,
84
96
  }}
85
97
  >
86
98
  <div
87
- className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataIndex}`}
99
+ className={`ff-curve-right-icon ff-curve-right-icon-${runLevelExecutionDataSetIndex}`}
88
100
  ></div>
89
- {dataSet?.runScriptCount && (
101
+ {runLevelExecutionDataSet?.runScriptCount && (
90
102
  <div className="ff-selectedMachines-connecting-line-text">
91
103
  <Typography fontSize={8} fontWeight="regular">
92
- {dataSet.runScriptCount} Script
104
+ {runLevelExecutionDataSet.runScriptCount}{' '}
105
+ Script
93
106
  </Typography>
94
107
  </div>
95
108
  )}
@@ -97,14 +110,15 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
97
110
  </div>
98
111
 
99
112
  <div className="ff-run-data-box">
100
- {getChildNodeComponent(
101
- false,
102
- instance,
103
- machineInstanceIndex,
104
- dataSet,
105
- runLevelExecutionDataIndex,
106
- parentNode
107
- )}
113
+ {getChildNodeComponent({
114
+ isButton: false,
115
+ childNodeData,
116
+ childNodeIndex,
117
+ runLevelExecutionDataSet,
118
+ runLevelExecutionDataSetIndex,
119
+ parentNodeData,
120
+ parentNodeIndex,
121
+ })}
108
122
  </div>
109
123
  </div>
110
124
  </div>
@@ -112,7 +126,8 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
112
126
  )}
113
127
  </div>
114
128
 
115
- {machineInstanceIndex === data.machineInstances.length - 1 && (
129
+ {childNodeIndex ===
130
+ parentNodeData.machineInstances.length - 1 && (
116
131
  <>
117
132
  <div className="ff-selectedMachines-connecting-line ff-second-line">
118
133
  <div className="ff-line">
@@ -122,12 +137,12 @@ const MachineInstances: React.FC<MachineInstancesProps> = ({
122
137
  </div>
123
138
 
124
139
  <div className="ff-machine-instance ff-machine-env-button">
125
- {getChildNodeComponent(
126
- true,
127
- data,
128
- parentNode,
129
- machineInstanceIndex + 1
130
- )}
140
+ {getChildNodeComponent({
141
+ isButton: true,
142
+ parentNodeData,
143
+ parentNodeIndex,
144
+ childNodeIndex: childNodeIndex + 1,
145
+ })}
131
146
  </div>
132
147
  </>
133
148
  )}
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
3
3
  import ConnectingBranch from './ConnectingBranch';
4
4
  import machineData from './data';
5
5
  import Button from '../Button/Button';
6
+ import { ConnectingNodeConfig } from './types';
6
7
 
7
8
  const meta: Meta<typeof ConnectingBranch> = {
8
9
  title: 'Components/ConnectingBranch',
@@ -17,7 +18,7 @@ export default meta;
17
18
 
18
19
  type Story = StoryObj<typeof ConnectingBranch>;
19
20
 
20
- const getChildNodeComponent = (isButton: boolean) => {
21
+ const getChildNodeComponent = ({ isButton }: ConnectingNodeConfig) => {
21
22
  if (isButton) {
22
23
  return (
23
24
  <div>
@@ -36,7 +37,7 @@ const getParentNodeComponentActionItems = () => {
36
37
  return <div> Machine Action Items</div>;
37
38
  };
38
39
 
39
- const getParentNodeComponent = (isMultiSelect: boolean) => (
40
+ const getParentNodeComponent = ({ isMultiSelect }: ConnectingNodeConfig) => (
40
41
  <div className="ff-parent-node-container">
41
42
  {' '}
42
43
  {isMultiSelect ? 'MultiSelect' : 'Select'} DropDown
@@ -9,6 +9,7 @@ import {
9
9
  import { ArcherContainer, ArcherElement } from 'react-archer';
10
10
  import MachineInstances from './BranchComponents/MachineInstances';
11
11
  import Typography from '../Typography';
12
+ import { ffid } from '../../utils/ffID/ffid';
12
13
 
13
14
  const ConnectingBranch: React.FC<ConnectBranchProps> = ({
14
15
  data: machineData,
@@ -37,7 +38,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
37
38
  if (datasetRef.current) {
38
39
  setDatasetHeight(datasetRef.current.offsetHeight);
39
40
  }
40
- }, []);
41
+ }, [machineData]);
41
42
 
42
43
  const calculateCurveHeight = () => {
43
44
  const heights = itemRefs.current.map((_, index) => {
@@ -49,7 +50,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
49
50
 
50
51
  useEffect(() => {
51
52
  calculateCurveHeight();
52
- }, [datasetHeight]);
53
+ }, [datasetHeight, machineData]);
53
54
 
54
55
  const calculateRowSpan = (machine: MachineData): number => {
55
56
  const baseRows = 1;
@@ -57,14 +58,13 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
57
58
  return Math.max(baseRows + childrenRows, 1);
58
59
  };
59
60
 
60
- const machineCount =
61
- machineData?.executionSettings?.machines?.selectedMachines?.length;
61
+ const machineCount = machineData?.machines?.selectedMachines?.length;
62
62
  const isOddMachineCount = machineCount % 2 !== 0;
63
63
 
64
64
  let currentRow = 1;
65
65
 
66
66
  const calculateTotalRows = (): number => {
67
- return machineData.executionSettings.machines.selectedMachines.reduce(
67
+ return machineData.machines.selectedMachines.reduce(
68
68
  (totalRows: indexType, machine: MachineData) =>
69
69
  totalRows + calculateRowSpan(machine),
70
70
  1
@@ -73,7 +73,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
73
73
 
74
74
  const oddCountRow = Math.round(calculateTotalRows() / 2);
75
75
  const middleIndex = Math.floor(
76
- machineData.executionSettings.machines.selectedMachines.length / 2
76
+ machineData.machines.selectedMachines.length / 2
77
77
  );
78
78
  return (
79
79
  <div className="connecting-branch-container">
@@ -85,22 +85,22 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
85
85
  noCurves
86
86
  >
87
87
  <div className="ff-connecting-branch-grid-container">
88
- {machineData?.executionSettings?.machines?.selectedMachines.map(
89
- (machine: MachineData, index: indexType) => {
88
+ {machineData?.machines?.selectedMachines.map(
89
+ (parentNodeData: MachineData, parentNodeIndex: indexType) => {
90
90
  const rowStart = currentRow;
91
- const rowSpan = calculateRowSpan(machine);
91
+ const rowSpan = calculateRowSpan(parentNodeData);
92
92
  currentRow += rowSpan;
93
93
  const gap = 16;
94
94
  const verticalLineHeight = calculateVerticalLineHeight(
95
- machine?.machineInstances,
95
+ parentNodeData?.machineInstances,
96
96
  datasetHeight,
97
97
  gap
98
98
  );
99
99
  return (
100
- <React.Fragment key={index}>
100
+ <React.Fragment key={ffid()}>
101
101
  {/* Show ff-script-count-box only for the middle index */}
102
- {((!isOddMachineCount && index === middleIndex) ||
103
- (isOddMachineCount && index === 0)) && (
102
+ {((!isOddMachineCount && parentNodeIndex === middleIndex) ||
103
+ (isOddMachineCount && parentNodeIndex === 0)) && (
104
104
  <ArcherElement id="rootNode">
105
105
  <div
106
106
  className="ff-grid-item ff-dynamic-item"
@@ -113,10 +113,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
113
113
  <div className="ff-script-count-container">
114
114
  <div className="ff-script-count-box">
115
115
  <Typography fontSize={12} fontWeight="regular">
116
- {
117
- machineData?.executionSettings?.machines
118
- ?.totalNoScript
119
- }
116
+ {machineData?.machines?.totalNoScript}
120
117
  </Typography>
121
118
  <Typography fontSize={12} fontWeight="regular">
122
119
  Scripts
@@ -136,8 +133,8 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
136
133
  <div className="ff-selectedMachines-input">
137
134
  <div className="ff-input-box-container">
138
135
  <ArcherElement
139
- id={`parentnode${index}`}
140
- key={machine?.clientId}
136
+ id={`parentnode${parentNodeIndex}`}
137
+ key={ffid()}
141
138
  relations={[
142
139
  {
143
140
  targetId: 'rootNode',
@@ -147,14 +144,21 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
147
144
  ]}
148
145
  >
149
146
  {/* Todo: here we will add select dropdown */}
150
- {getParentNodeComponent(false, machine, index)}
147
+ {getParentNodeComponent({
148
+ isMultiSelect: false,
149
+ parentNodeData,
150
+ parentNodeIndex,
151
+ })}
151
152
  </ArcherElement>
152
- {getParentNodeComponentActionItems(machine, index)}
153
+ {getParentNodeComponentActionItems({
154
+ parentNodeData,
155
+ parentNodeIndex,
156
+ })}
153
157
  </div>
154
158
  </div>
155
159
  <MachineInstances
156
- parentNode={index}
157
- data={machine}
160
+ parentNodeIndex={parentNodeIndex}
161
+ parentNodeData={parentNodeData}
158
162
  verticalLineHeight={verticalLineHeight}
159
163
  datasetHeight={datasetHeight}
160
164
  curveHeights={curveHeights}
@@ -184,7 +188,7 @@ const ConnectingBranch: React.FC<ConnectBranchProps> = ({
184
188
  },
185
189
  ]}
186
190
  >
187
- <div>{getParentNodeComponent(true)}</div>
191
+ <div>{getParentNodeComponent({ isMultiSelect: true })}</div>
188
192
  </ArcherElement>
189
193
  </div>
190
194
  </div>