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
@@ -0,0 +1,366 @@
1
+ import React, { useState } from 'react';
2
+ import { Meta, StoryObj } from '@storybook/react';
3
+ import BrowserTabs from './BrowserTabs';
4
+ import Typography from '../Typography';
5
+
6
+ const meta: Meta<typeof BrowserTabs> = {
7
+ title: 'Components/BrowserTabs',
8
+ component: BrowserTabs,
9
+ parameters: {
10
+ layout: 'centered',
11
+ },
12
+ tags: ['autodocs'],
13
+ };
14
+
15
+ type Story = StoryObj<typeof BrowserTabs>;
16
+
17
+ const TabContentOne = () => (
18
+ <div>
19
+ <Typography as="h1" fontSize={32} fontWeight="bold">
20
+ Google
21
+ </Typography>
22
+ <Typography as="p">Search anything</Typography>
23
+ </div>
24
+ );
25
+
26
+ const TabContentTwo = () => (
27
+ <div>
28
+ <Typography as="h1" fontSize={32} fontWeight="bold">
29
+ Flipkart
30
+ </Typography>
31
+ <Typography as="p">Shop Now!</Typography>
32
+ </div>
33
+ );
34
+
35
+ const TabContentThree = () => (
36
+ <div>
37
+ <Typography as="h1" fontSize={32} fontWeight="bold">
38
+ Fireflink
39
+ </Typography>
40
+ <Typography as="p">Automate your scripts</Typography>
41
+ </div>
42
+ );
43
+
44
+ const TabContentFour = () => (
45
+ <div>
46
+ <Typography as="h1" fontSize={32} fontWeight="bold">
47
+ Tab--4
48
+ </Typography>
49
+ <Typography as="p">This is the content for Tab - 4</Typography>
50
+ </div>
51
+ );
52
+
53
+ const tabsData = [
54
+ {
55
+ id: 'tab-11',
56
+ label: 'Google',
57
+ component: <TabContentOne />,
58
+ tabIcon: 'manage_apps',
59
+ },
60
+ {
61
+ id: 'tab-2',
62
+ label: 'gitlab',
63
+ component: <TabContentTwo />,
64
+ tabIcon: 'gitlab',
65
+ },
66
+ {
67
+ id: 'tab-3',
68
+ label: 'Fireflink',
69
+ component: <TabContentThree />,
70
+ tabIcon: 'moon_stars_icon',
71
+ },
72
+ ];
73
+
74
+ export const DefaultTabs: Story = {
75
+ render: () => {
76
+ const [activeTabIdDefault, setActiveTabIdDefault] =
77
+ useState<string>('tab-11');
78
+
79
+ return (
80
+ <div>
81
+ <BrowserTabs
82
+ tabsData={tabsData}
83
+ activeTabId={activeTabIdDefault}
84
+ onTabClick={setActiveTabIdDefault}
85
+ />
86
+ </div>
87
+ );
88
+ },
89
+ };
90
+
91
+ const multipleData = [
92
+ {
93
+ id: 'tab-1',
94
+ label: 'Google',
95
+ component: <TabContentOne />,
96
+ tabIcon: 'manage_apps',
97
+ },
98
+ {
99
+ id: 'tab-2',
100
+ label: 'Flipkart',
101
+ component: <TabContentTwo />,
102
+ tabIcon: 'web_service_icon',
103
+ },
104
+ {
105
+ id: 'tab-3',
106
+ label: 'Fireflink',
107
+ component: <TabContentThree />,
108
+ tabIcon: 'moon_stars_icon',
109
+ },
110
+ {
111
+ id: 'tab-4',
112
+ label: 'javascript',
113
+ component: <TabContentOne />,
114
+ tabIcon: 'javascript',
115
+ },
116
+ {
117
+ id: 'tab-5',
118
+ label: 'slack',
119
+ component: <TabContentTwo />,
120
+ tabIcon: 'slack',
121
+ },
122
+ {
123
+ id: 'tab-6',
124
+ label: 'Fireflink',
125
+ component: <TabContentThree />,
126
+ tabIcon: 'moon_stars_icon',
127
+ },
128
+ {
129
+ id: 'tab-7',
130
+ label: 'Yahoo',
131
+ component: <TabContentOne />,
132
+ tabIcon: 'manage_apps',
133
+ },
134
+ {
135
+ id: 'tab-8',
136
+ label: 'Chrome',
137
+ component: <TabContentTwo />,
138
+ tabIcon: 'chrome_icon',
139
+ },
140
+ {
141
+ id: 'tab-9',
142
+ label: 'jenkins',
143
+ component: <TabContentThree />,
144
+ tabIcon: 'jenkins',
145
+ },
146
+ {
147
+ id: 'tab-10',
148
+ label: 'java',
149
+ component: <TabContentOne />,
150
+ tabIcon: 'java',
151
+ },
152
+ {
153
+ id: 'tab-11',
154
+ label: 'github',
155
+ component: <TabContentTwo />,
156
+ tabIcon: 'github',
157
+ },
158
+ {
159
+ id: 'tab-12',
160
+ label: 'Fireflink',
161
+ component: <TabContentThree />,
162
+ tabIcon: 'moon_stars_icon',
163
+ },
164
+ {
165
+ id: 'tab-13',
166
+ label: 'Yahoo',
167
+ component: <TabContentOne />,
168
+ tabIcon: 'manage_apps',
169
+ },
170
+ {
171
+ id: 'tab-14',
172
+ label: 'slack',
173
+ component: <TabContentTwo />,
174
+ tabIcon: 'slack',
175
+ },
176
+ {
177
+ id: 'tab-15',
178
+ label: 'jenkins',
179
+ component: <TabContentThree />,
180
+ tabIcon: 'jenkins',
181
+ },
182
+ {
183
+ id: 'tab-16',
184
+ label: 'csharp',
185
+ component: <TabContentOne />,
186
+ tabIcon: 'csharp',
187
+ },
188
+ {
189
+ id: 'tab-17',
190
+ label: 'gitlab',
191
+ component: <TabContentTwo />,
192
+ tabIcon: 'gitlab',
193
+ },
194
+ {
195
+ id: 'tab-18',
196
+ label: 'Fireflink',
197
+ component: <TabContentThree />,
198
+ tabIcon: 'moon_stars_icon',
199
+ },
200
+ {
201
+ id: 'tab-19',
202
+ label: 'Google',
203
+ component: <TabContentOne />,
204
+ tabIcon: 'manage_apps',
205
+ },
206
+ {
207
+ id: 'tab-20',
208
+ label: 'Chrome',
209
+ component: <TabContentTwo />,
210
+ tabIcon: 'chrome_icon',
211
+ },
212
+ {
213
+ id: 'tab-21',
214
+ label: 'jira',
215
+ component: <TabContentThree />,
216
+ tabIcon: 'jira_logo',
217
+ },
218
+ {
219
+ id: 'tab-22',
220
+ label: 'bitbucket',
221
+ component: <TabContentOne />,
222
+ tabIcon: 'bitbucket',
223
+ },
224
+ {
225
+ id: 'tab-23',
226
+ label: 'slack',
227
+ component: <TabContentTwo />,
228
+ tabIcon: 'slack',
229
+ },
230
+ {
231
+ id: 'tab-24',
232
+ label: 'Amazon',
233
+ component: <TabContentThree />,
234
+ tabIcon: 'moon_stars_icon',
235
+ },
236
+ {
237
+ id: 'tab-25',
238
+ label: 'Google',
239
+ component: <TabContentOne />,
240
+ tabIcon: 'manage_apps',
241
+ },
242
+ {
243
+ id: 'tab-26',
244
+ label: 'Chrome',
245
+ component: <TabContentTwo />,
246
+ tabIcon: 'chrome_icon',
247
+ },
248
+ {
249
+ id: 'tab-27',
250
+ label: 'jira',
251
+ component: <TabContentThree />,
252
+ tabIcon: 'jira_logo',
253
+ },
254
+ {
255
+ id: 'tab-28',
256
+ label: 'azure',
257
+ component: <TabContentOne />,
258
+ tabIcon: 'azure',
259
+ },
260
+ {
261
+ id: 'tab-29',
262
+ label: 'gitlab',
263
+ component: <TabContentTwo />,
264
+ tabIcon: 'gitlab',
265
+ },
266
+ {
267
+ id: 'tab-30',
268
+ label: 'jira',
269
+ component: <TabContentThree />,
270
+ tabIcon: 'jira_logo',
271
+ },
272
+ {
273
+ id: 'tab-31',
274
+ label: 'Yahoo',
275
+ component: <TabContentOne />,
276
+ tabIcon: 'manage_apps',
277
+ },
278
+ {
279
+ id: 'tab-32',
280
+ label: 'slack',
281
+ component: <TabContentTwo />,
282
+ tabIcon: 'slack',
283
+ },
284
+ {
285
+ id: 'tab-33',
286
+ label: 'python',
287
+ component: <TabContentThree />,
288
+ tabIcon: 'python',
289
+ },
290
+ {
291
+ id: 'tab-24',
292
+ label: 'Amazon',
293
+ component: <TabContentThree />,
294
+ tabIcon: 'moon_stars_icon',
295
+ },
296
+ {
297
+ id: 'tab-25',
298
+ label: 'linux',
299
+ component: <TabContentOne />,
300
+ tabIcon: 'linux',
301
+ },
302
+ {
303
+ id: 'tab-26',
304
+ label: 'github',
305
+ component: <TabContentTwo />,
306
+ tabIcon: 'github',
307
+ },
308
+ {
309
+ id: 'tab-27',
310
+ label: 'fire',
311
+ component: <TabContentThree />,
312
+ tabIcon: 'moon_stars_icon',
313
+ },
314
+ {
315
+ id: 'tab-28',
316
+ label: 'Amazon',
317
+ component: <TabContentOne />,
318
+ tabIcon: 'manage_apps',
319
+ },
320
+ {
321
+ id: 'tab-29',
322
+ label: 'Chrome',
323
+ component: <TabContentTwo />,
324
+ tabIcon: 'chrome_icon',
325
+ },
326
+ {
327
+ id: 'tab-30',
328
+ label: 'Amazon',
329
+ component: <TabContentThree />,
330
+ tabIcon: 'moon_stars_icon',
331
+ },
332
+ {
333
+ id: 'tab-31',
334
+ label: 'browserstack',
335
+ component: <TabContentOne />,
336
+ tabIcon: 'browserstack_icon',
337
+ },
338
+ {
339
+ id: 'tab-32',
340
+ label: 'gitlab',
341
+ component: <TabContentTwo />,
342
+ tabIcon: 'gitlab',
343
+ },
344
+ {
345
+ id: 'tab-33',
346
+ label: 'vikas',
347
+ component: <TabContentThree />,
348
+ tabIcon: 'moon_stars_icon',
349
+ },
350
+ ];
351
+
352
+ export const MultipleTabs: Story = {
353
+ render: () => {
354
+ const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-11');
355
+
356
+ return (
357
+ <BrowserTabs
358
+ tabsData={multipleData}
359
+ activeTabId={activeTabIdDefault}
360
+ onTabClick={setActiveTabIdDefault}
361
+ />
362
+ );
363
+ },
364
+ };
365
+
366
+ export default meta;
@@ -0,0 +1,128 @@
1
+ import { useRef, useState, useEffect } from 'react';
2
+ import classNames from 'classnames';
3
+ import { BrowserTabsProps } from './types';
4
+ import Icon from '../Icon';
5
+ import Typography from '../Typography';
6
+ import Tooltip from '../Tooltip';
7
+ import './BrowserTabs.scss';
8
+ import '../../assets/styles/_colors.scss';
9
+
10
+ const BrowserTabs = ({
11
+ tabsData,
12
+ activeTabId,
13
+ onTabClick,
14
+ onTabClose,
15
+ onTabAdd,
16
+ maxTabWidth = 132,
17
+ showCloseOnActive = true,
18
+ }: BrowserTabsProps) => {
19
+ const containerRef = useRef<HTMLDivElement>(null);
20
+ const [tabWidth, setTabWidth] = useState<number>();
21
+
22
+ useEffect(() => {
23
+ const updateTabWidth = () => {
24
+ if (containerRef.current) {
25
+ const containerWidth =
26
+ containerRef.current.getBoundingClientRect().width;
27
+ const calculatedWidth = containerWidth / tabsData.length;
28
+ setTabWidth(Math.min(maxTabWidth, calculatedWidth));
29
+ }
30
+ };
31
+
32
+ updateTabWidth();
33
+ window.addEventListener('resize', updateTabWidth);
34
+
35
+ return () => window.removeEventListener('resize', updateTabWidth);
36
+ }, [tabsData.length, maxTabWidth]);
37
+
38
+ return (
39
+ <div className="ff-browser-tabs-container" ref={containerRef}>
40
+ <div className="ff-browser-tab-row">
41
+ <div className="ff-tab-button-container">
42
+ {tabsData.map((tab, index) => {
43
+ const isActive = activeTabId === tab.id;
44
+ const isTabTooSmall = tabWidth && tabWidth < 80;
45
+ return (
46
+ <div
47
+ key={tab.id}
48
+ className={classNames('ff-tab-wrapper', { active: isActive })}
49
+ >
50
+ <Tooltip title={isTabTooSmall ? tab.label : ''}>
51
+ <button
52
+ onClick={() => onTabClick(tab.id)}
53
+ className="ff-tab-button"
54
+ style={{
55
+ width: tabWidth ? `${tabWidth}px` : 'auto',
56
+ padding: tabWidth && tabWidth < 80 ? ' 0px' : '0px 8px',
57
+ }}
58
+ >
59
+ <div className="ff-tab-content">
60
+ {tabWidth &&
61
+ tabWidth >= 20 &&
62
+ (!isActive || tabWidth >= 80) && (
63
+ <Icon
64
+ name={tab.tabIcon}
65
+ hoverEffect={false}
66
+ color="inherit"
67
+ />
68
+ )}
69
+
70
+ {tabWidth && tabWidth > 40 && (
71
+ <div className="ff-tab-label-container">
72
+ <Typography
73
+ children={tab.label}
74
+ lineHeight="18px"
75
+ fontWeight={isActive ? 'semi-bold' : 'regular'}
76
+ color={
77
+ isActive
78
+ ? 'var(--tabs-label-active-color)'
79
+ : 'var(--tabs-label-default-color)'
80
+ }
81
+ className="ff-tab-label"
82
+ />
83
+ </div>
84
+ )}
85
+
86
+ {((tabWidth && tabWidth >= 80) || isActive) &&
87
+ showCloseOnActive && (
88
+ <Icon
89
+ name="close"
90
+ className="ff-close-icon"
91
+ hoverEffect={false}
92
+ height={10}
93
+ width={10}
94
+ onClick={(e) => {
95
+ e.stopPropagation();
96
+ if (onTabClose) {
97
+ onTabClose(Number(tab.id));
98
+ }
99
+ }}
100
+ />
101
+ )}
102
+ </div>
103
+ </button>
104
+ </Tooltip>
105
+ {isActive ||
106
+ index === tabsData.length - 1 ||
107
+ (activeTabId === tabsData[0]?.id && index === 0) ||
108
+ activeTabId === tabsData[index + 1]?.id ? null : (
109
+ <span
110
+ className="ff-tab-separator"
111
+ style={{
112
+ margin: tabWidth && tabWidth > 80 ? '0 4px' : '0 1px',
113
+ }}
114
+ />
115
+ )}
116
+ </div>
117
+ );
118
+ })}
119
+ </div>
120
+ <div className="ff-tab-plus-icon" onClick={onTabAdd}>
121
+ <Icon name="add_file" color="#71347B" width={10} height={10} />
122
+ </div>
123
+ </div>
124
+ </div>
125
+ );
126
+ };
127
+
128
+ export default BrowserTabs;
@@ -0,0 +1 @@
1
+ export { default } from "./BrowserTabs"
@@ -0,0 +1,73 @@
1
+ /**
2
+ * Represents a single tab in the BrowserTabs component.
3
+ */
4
+ export interface BrowserTab {
5
+ /**
6
+ * Unique identifier for the tab.
7
+ */
8
+ id: string;
9
+
10
+ /**
11
+ * Label text displayed on the tab.
12
+ */
13
+ label: string;
14
+
15
+ /**
16
+ * Optional component to be rendered when the tab is active.
17
+ */
18
+ component?: JSX.Element;
19
+
20
+ /**
21
+ * Name of the tab icon.
22
+ */
23
+ tabIcon: string;
24
+ }
25
+
26
+ /**
27
+ * Props for the BrowserTabs component.
28
+ */
29
+ export interface BrowserTabsProps {
30
+ /**
31
+ * An array of tab objects containing label, icon, and an optional component.
32
+ */
33
+ tabsData: BrowserTab[];
34
+
35
+ /**
36
+ * The ID of the currently active tab.
37
+ */
38
+ activeTabId: string;
39
+
40
+ /**
41
+ * Function to update the active tab state when a user clicks on a tab.
42
+ * @param id - The unique identifier of the clicked tab.
43
+ */
44
+ onTabClick: (id: string) => void;
45
+ /**
46
+ * Function to add a new tab.
47
+ */
48
+ onTabAdd?: () => void;
49
+ /**
50
+ * Function to close a specific tab.
51
+ * @param index - The index of the tab to be closed.
52
+ */
53
+ onTabClose?: (index: number) => void;
54
+ /**
55
+ * Minimum width for each tab (in pixels).
56
+ */
57
+ minTabWidth?: number;
58
+
59
+ /**
60
+ * Maximum width for each tab (in pixels).
61
+ */
62
+ maxTabWidth?: number;
63
+
64
+ /**
65
+ * Show the close button only for the active tab.
66
+ */
67
+ showCloseOnActive?: boolean;
68
+
69
+ /**
70
+ * Custom CSS class name to override default styles.
71
+ */
72
+ className?: string;
73
+ }