pixel-react 1.5.9 → 1.6.0

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 (79) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  5. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  6. package/lib/components/AddButton/AddButton.d.ts +5 -0
  7. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  8. package/lib/components/AddButton/index.d.ts +1 -0
  9. package/lib/components/AddButton/types.d.ts +4 -0
  10. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  11. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  12. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  13. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  14. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  15. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  16. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  17. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  18. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  19. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  20. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  21. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  22. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  23. package/lib/components/FieldSet/index.d.ts +1 -0
  24. package/lib/components/FieldSet/types.d.ts +7 -0
  25. package/lib/components/FileDropzone/types.d.ts +8 -0
  26. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
  27. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  28. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
  29. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  30. package/lib/components/Select/Select.stories.d.ts +1 -0
  31. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  32. package/lib/components/TableTree/TableTree.d.ts +4 -24
  33. package/lib/components/TableTree/data.d.ts +78 -273
  34. package/lib/components/TableTree/types.d.ts +29 -0
  35. package/lib/index.d.ts +98 -20
  36. package/lib/index.esm.js +367 -370
  37. package/lib/index.esm.js.map +1 -1
  38. package/lib/index.js +371 -370
  39. package/lib/index.js.map +1 -1
  40. package/lib/tsconfig.tsbuildinfo +1 -1
  41. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  42. package/package.json +2 -2
  43. package/src/assets/icons/approval_pending.svg +8 -8
  44. package/src/assets/icons/configuration.svg +3 -3
  45. package/src/assets/icons/defects.svg +8 -8
  46. package/src/assets/icons/element.svg +4 -4
  47. package/src/assets/icons/export.svg +5 -0
  48. package/src/assets/icons/import.svg +5 -0
  49. package/src/assets/icons/info_icon.svg +4 -16
  50. package/src/assets/icons/project_element.svg +4 -4
  51. package/src/assets/icons/replace_file.svg +14 -0
  52. package/src/assets/icons/step_group.svg +10 -10
  53. package/src/assets/icons/variable.svg +3 -3
  54. package/src/assets/icons/web_service_icon.svg +3 -0
  55. package/src/components/Checkbox/Checkbox.tsx +1 -7
  56. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  57. package/src/components/FieldSet/FieldSet.scss +9 -0
  58. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  59. package/src/components/FieldSet/FieldSet.tsx +29 -0
  60. package/src/components/FieldSet/index.ts +1 -0
  61. package/src/components/FieldSet/types.ts +8 -0
  62. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  63. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  64. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  65. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  66. package/src/components/FileDropzone/types.ts +8 -0
  67. package/src/components/Icon/iconList.ts +11 -7
  68. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  69. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  70. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  71. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  72. package/src/components/TableTree/TableTree.scss +154 -123
  73. package/src/components/TableTree/TableTree.stories.tsx +10 -5
  74. package/src/components/TableTree/TableTree.tsx +220 -287
  75. package/src/components/TableTree/data.ts +677 -569
  76. package/src/components/TableTree/types.ts +31 -0
  77. package/src/components/Toast/Toast.tsx +1 -1
  78. package/src/index.ts +8 -0
  79. /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
@@ -0,0 +1,103 @@
1
+ import React, { useState } from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+ import FieldSet from './FieldSet';
4
+
5
+ const meta: Meta<typeof FieldSet> = {
6
+ title: 'Components/FieldSet',
7
+ component: FieldSet,
8
+ parameters: {
9
+ layout: 'centered',
10
+ },
11
+ tags: ['autodocs'],
12
+ };
13
+
14
+ type Story = StoryObj<typeof FieldSet>;
15
+
16
+ const defaultArgs = {
17
+ legendName: 'Default Legend',
18
+ height: '200px',
19
+ width: '300px',
20
+ children: 'Default content inside the FieldSet.',
21
+ };
22
+
23
+ export const Default: Story = {
24
+ args: {
25
+ ...defaultArgs,
26
+ },
27
+ };
28
+
29
+ export const CustomDimensions: Story = {
30
+ args: {
31
+ ...defaultArgs,
32
+ height: '300px',
33
+ width: '400px',
34
+ legendName: 'Custom Dimensions',
35
+ },
36
+ };
37
+
38
+ export const WithNestedChildren: Story = {
39
+ args: {
40
+ ...defaultArgs,
41
+ legendName: 'Nested Content',
42
+ children: (
43
+ <div>
44
+ <p>This is some nested content inside the FieldSet.</p>
45
+ <button>Click Me</button>
46
+ </div>
47
+ ),
48
+ },
49
+ };
50
+
51
+ export const Controlled: Story = {
52
+ render: () => {
53
+ const [legend, setLegend] = useState('Controlled FieldSet');
54
+ const [content, setContent] = useState('Initial Content');
55
+
56
+ const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
57
+ setLegend(event.target.value);
58
+
59
+ const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
60
+ setContent(event.target.value);
61
+
62
+ return (
63
+ <>
64
+ <div style={{ marginBottom: '1rem' }}>
65
+ <label>
66
+ Legend:
67
+ <input
68
+ type="text"
69
+ value={legend}
70
+ onChange={handleLegendChange}
71
+ style={{ marginLeft: '0.5rem' }}
72
+ />
73
+ </label>
74
+ </div>
75
+ <div style={{ marginBottom: '1rem' }}>
76
+ <label>
77
+ Content:
78
+ <input
79
+ type="text"
80
+ value={content}
81
+ onChange={handleContentChange}
82
+ style={{ marginLeft: '0.5rem' }}
83
+ />
84
+ </label>
85
+ </div>
86
+ <FieldSet legendName={legend} height="250px" width="350px">
87
+ {content}
88
+ </FieldSet>
89
+ </>
90
+ );
91
+ },
92
+ };
93
+
94
+ export const EmptyFieldSet: Story = {
95
+ args: {
96
+ legendName: 'Empty FieldSet',
97
+ height: '32px',
98
+ width: '317px',
99
+ children: null,
100
+ },
101
+ };
102
+
103
+ export default meta;
@@ -0,0 +1,29 @@
1
+ import { FC } from 'react';
2
+ import './FieldSet.scss';
3
+ import { fieldSetProps } from './types';
4
+ import Typography from '../Typography';
5
+ const FieldSet: FC<fieldSetProps> = ({
6
+ legendName,
7
+ height,
8
+ width,
9
+ children,
10
+ }) => {
11
+ return (
12
+ <div className="ff_fieldSet_container">
13
+ <fieldset className="ff_fieldSet" style={{ height, width }}>
14
+ <legend className="ff_legend_container">
15
+ <Typography
16
+ color="var(--license_header_text_color)"
17
+ fontSize={8}
18
+ lineHeight="12px"
19
+ >
20
+ {legendName}
21
+ </Typography>
22
+ </legend>
23
+ <div className="ff_children_container">{children}</div>
24
+ </fieldset>
25
+ </div>
26
+ );
27
+ };
28
+
29
+ export default FieldSet;
@@ -0,0 +1 @@
1
+ export { default } from './FieldSet';
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ export interface fieldSetProps {
4
+ legendName: string;
5
+ height: string;
6
+ width: string;
7
+ children: ReactNode | string;
8
+ }
@@ -94,7 +94,7 @@
94
94
  display: flex;
95
95
  align-items: center;
96
96
  gap: 4px;
97
- width: 90%;
97
+ width: 87%;
98
98
 
99
99
  .ff-file-info__icon {
100
100
  @include center;
@@ -1,8 +1,8 @@
1
+ import React from 'react';
1
2
  import { StoryObj, Meta } from '@storybook/react';
2
3
  import FileDropzone from './FileDropzone';
3
4
  import Toaster from '../Toast';
4
5
  import { useState } from 'react';
5
- import React from 'react';
6
6
 
7
7
  const meta: Meta<typeof FileDropzone> = {
8
8
  title: 'Components/FileDropzone',
@@ -23,8 +23,8 @@ const defaultArgs = {
23
23
  maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
24
24
  invalidFileMessage: 'Invalid file format',
25
25
  fileExistMessage: 'File already exist with same name and type',
26
- width: 700,
27
- height: 350,
26
+ width: 640,
27
+ height: 188,
28
28
  };
29
29
 
30
30
  export const Primary: Story = {
@@ -49,6 +49,8 @@ export const withMIMEValidation: Story = {
49
49
  export const Controlled: Story = {
50
50
  render: () => {
51
51
  const [showToaster, setShowToaster] = useState<boolean>(false);
52
+ const [acceptedFiles, setAcceptedFiles] = useState([]);
53
+ const [rejectedFiles, setRejectedFiles] = useState([]);
52
54
 
53
55
  const showMaxFilesError = () => {
54
56
  setShowToaster(true);
@@ -57,6 +59,14 @@ export const Controlled: Story = {
57
59
  }, 2000);
58
60
  };
59
61
 
62
+ const getAcceptedFiles = (files) => {
63
+ setAcceptedFiles(files);
64
+ }
65
+
66
+ const getRejectedFiles = (files) => {
67
+ setRejectedFiles(files);
68
+ }
69
+
60
70
  return (
61
71
  <>
62
72
  <FileDropzone
@@ -69,6 +79,8 @@ export const Controlled: Story = {
69
79
  ]}
70
80
  validateMIMEType={true}
71
81
  onMaxFilesError={showMaxFilesError}
82
+ getAcceptedFiles={getAcceptedFiles}
83
+ getRejectedFiles={getRejectedFiles}
72
84
  />
73
85
  {showToaster && (
74
86
  <Toaster
@@ -25,6 +25,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
25
25
  validateMIMEType = false,
26
26
  width = 640,
27
27
  height = 188,
28
+ getAcceptedFiles = () => {},
29
+ getRejectedFiles = () => {},
28
30
  }) => {
29
31
  const {
30
32
  getRootProps,
@@ -47,6 +49,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
47
49
  // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
48
50
  });
49
51
 
52
+ getAcceptedFiles(acceptedFiles);
53
+ getRejectedFiles(rejectedFiles);
54
+
50
55
  const acceptedFilesList = useMemo(
51
56
  () =>
52
57
  acceptedFiles.map((file) => (
@@ -48,7 +48,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
48
48
  <div className="ff-file-actions__icon-replace">
49
49
  <Tooltip title="Replace">
50
50
  <Icon
51
- name="replace"
51
+ name="replace_file"
52
52
  color={'var(--icons-default-color)'}
53
53
  height={16}
54
54
  width={16}
@@ -57,6 +57,14 @@ export interface FileDropzoneProps {
57
57
  width?: number | string;
58
58
 
59
59
  height?: number | string;
60
+ /**
61
+ * Returns the accepted files in the state
62
+ **/
63
+ getAcceptedFiles?: (files: File[]) => void;
64
+ /**
65
+ * Returns the rejected files in the state
66
+ **/
67
+ getRejectedFiles?: (files: FileRejection[]) => void;
60
68
  }
61
69
  export interface FileState {
62
70
  accepted: File[];
@@ -31,7 +31,7 @@ import Tick from '../../assets/Icons/tick_icon.svg?react';
31
31
  import Search from '../../assets/icons/search.svg?react';
32
32
  import Filter from '../../assets/icons/filter.svg?react';
33
33
  import Alert from '../../assets/icons/alert.svg?react';
34
-
34
+ import ReplaceFile from '../../assets/icons/replace_file.svg?react';
35
35
  import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
36
36
  import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
37
37
  import ClockIcon from '../../assets/icons/clock_icon.svg?react';
@@ -46,7 +46,7 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
46
46
  import DeleteIcon from '../../assets/icons/delete.svg?react';
47
47
  import DetailsIcon from '../../assets/icons/details.svg?react';
48
48
  import ImpactListIcon from '../../assets/icons/impactList.svg?react';
49
-
49
+ import Export from '../../assets/icons/export.svg?react';
50
50
  import FormatePainter from '../../assets/icons/formate_painter.svg?react';
51
51
  import Bold from '../../assets/icons/bold.svg?react';
52
52
  import Italic from '../../assets/icons/italic.svg?react';
@@ -191,7 +191,7 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
191
191
  import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
192
192
  import UserWarning from '../../assets/icons/user_warning.svg?react';
193
193
  import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
194
-
194
+ import Import from '../../assets/icons/import.svg?react';
195
195
  import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
196
196
  import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
197
197
  import dashboardWebMobileIcon from '../../assets/icons/web_mobile_icon.svg?react';
@@ -221,9 +221,11 @@ import RemoveUser from '../../assets/icons/remove_user.svg?react';
221
221
  import AddToArchive from '../../assets/icons/add_archive.svg?react';
222
222
  import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
223
223
  import InfoUser from '../../assets/icons/info_user.svg?react';
224
+ import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
224
225
 
225
226
  Components['success'] = ToastSuccessIcon;
226
227
  Components['alert'] = Alert;
228
+ Components['alert'] = Alert;
227
229
  Components['delete_info'] = DeleteInfoIcon;
228
230
  Components['warning'] = WarningIcon;
229
231
  Components['toast_info'] = ToastInfoIcon;
@@ -266,7 +268,7 @@ Components['details'] = DetailsIcon;
266
268
  Components['impactList'] = ImpactListIcon;
267
269
  Components['beautify_icon'] = BeautifyIcon;
268
270
  Components['add_variable'] = AddVariable;
269
-
271
+ Components['replace_file'] = ReplaceFile;
270
272
  Components['formate_painter'] = FormatePainter;
271
273
  Components['bold'] = Bold;
272
274
  Components['italic'] = Italic;
@@ -286,7 +288,7 @@ Components['text_color'] = TextColor;
286
288
  Components['fill_color'] = FillColor;
287
289
  Components['formula_icon'] = FormulaIcon;
288
290
  Components['excel_corner_menu'] = ExcelCornerMenu;
289
-
291
+ Components['export'] = Export;
290
292
  Components['apk_file_type'] = ApkFileType;
291
293
  Components['csv_file_type'] = CsvFileType;
292
294
  Components['compressed_file_type'] = CompressedFileType;
@@ -301,7 +303,7 @@ Components['ipk_file_type'] = IpkFileType;
301
303
  Components['txt_file_type'] = TxtFileType;
302
304
  Components['gif_file_type'] = GifFileType;
303
305
  Components['jpg_file_type'] = JpgFileType;
304
-
306
+ Components['import'] = Import;
305
307
  Components['info'] = InfoIcon;
306
308
  Components['calendar_icon'] = CalendarIcon;
307
309
  Components['hide_icon'] = HideIcon;
@@ -424,6 +426,7 @@ Components['run_manual_testcase'] = RunManualTestcaseIcon;
424
426
  Components['run_automation_scripts'] = RunAutomationScriptsIcon;
425
427
  Components['eye_open_icon'] = EyeOpenIcon;
426
428
  Components['replace_icon'] = ReplaceIcon;
429
+ Components['replace_icon'] = ReplaceIcon;
427
430
  Components['header_preset'] = HeaderPreset;
428
431
  Components['project_element'] = ProjectElement;
429
432
  Components['element'] = Element;
@@ -436,7 +439,8 @@ Components['no_data'] = NoData;
436
439
  Components['add_user'] = AddUser;
437
440
  Components['add_to_archive'] = AddToArchive;
438
441
  Components['remove_user'] = RemoveUser;
439
- Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
442
+ Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
440
443
  Components['info_user'] = InfoUser;
444
+ Components['web_service_icon'] = WebServiceIcon;
441
445
 
442
446
  export default Components;
@@ -91,15 +91,19 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
91
91
  role="option"
92
92
  className={`dropdown-option-container`}
93
93
  key={getLabel(info, labelAccessor)}
94
- onClick={() =>
95
- !info?.isDisabled && handleOptionChange(info, !info.isChecked)
94
+ onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
95
+ const target = e.target as HTMLInputElement;
96
+ if(target.type==='checkbox'){
97
+ return
98
+ }
99
+ !info?.isDisabled && handleOptionChange(info, !info.isChecked);
100
+ }
96
101
  }
97
102
  >
98
103
  <Checkbox
99
104
  checked={info.isChecked}
100
105
  disabled={info?.isDisabled}
101
106
  />
102
-
103
107
  <Tooltip
104
108
  zIndex={zIndex + 1}
105
109
  title={
@@ -87,7 +87,7 @@ export const Default3: Story = {
87
87
  };
88
88
  export const EmailGroup: Story = {
89
89
  render: () => {
90
- const [options] = useState([
90
+ const [options,setOptions] = useState([
91
91
  {
92
92
  label: 'Sample1@gmail.com',
93
93
  value: 'sample1@gmail.com',
@@ -109,6 +109,10 @@ export const EmailGroup: Story = {
109
109
  ) => {
110
110
  setSelectedOptions(options);
111
111
  };
112
+ const onEnter=(newOption:string)=>{
113
+ setOptions(prev=>[...prev,{label:newOption,value:newOption}])
114
+ setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
115
+ }
112
116
  return (
113
117
  <MultiSelect
114
118
  label={'Enter Email'}
@@ -120,6 +124,7 @@ export const EmailGroup: Story = {
120
124
  acceptNewOption={true}
121
125
  displayCount={true}
122
126
  labelAccessor="label"
127
+ onEnter={onEnter}
123
128
  />
124
129
  );
125
130
  },
@@ -76,8 +76,9 @@ const MultiSelect = ({
76
76
  highlightedMachine = '',
77
77
  onSelectButtonClick = () => {},
78
78
  labelAccessor = '',
79
- valueAccessor = '',
79
+ valueAccessor = labelAccessor,
80
80
  withSelectButton = variant === 'machines' ? true : false,
81
+ onEnter=()=>{}
81
82
  }: MultiSelectProps) => {
82
83
  const [isOpen, setIsOpen] = useState<boolean>(false);
83
84
  const [allOptions, setAllOptions] = useState(options);
@@ -168,25 +169,8 @@ const MultiSelect = ({
168
169
  return;
169
170
  }
170
171
  }
171
-
172
- const newOption = {
173
- [labelAccessor]: searchedKeyword,
174
- [valueAccessor]: searchedKeyword.toLowerCase(),
175
- isChecked: true,
176
- };
177
- const filteredOptions = [...allOptions].filter(
178
- (option) => option.isChecked === true
179
- );
180
-
181
- setAllOptions([...allOptions, newOption]);
172
+ onEnter?.(searchedKeyword)
182
173
  setSearchedKeyword('');
183
- onChange?.([
184
- ...filteredOptions,
185
- {
186
- [labelAccessor]: searchedKeyword,
187
- [valueAccessor]: searchedKeyword.toLocaleLowerCase(),
188
- },
189
- ]);
190
174
  setIsOpen(false);
191
175
  }
192
176
  };
@@ -447,7 +431,7 @@ const MultiSelect = ({
447
431
  className="error-text"
448
432
  />
449
433
  )}
450
- {displayIcon && (
434
+ {displayIcon && variant==='labels' && (
451
435
  <Typography
452
436
  onClick={onManageLabelsClick}
453
437
  fontSize={8}
@@ -40,6 +40,8 @@ interface MultiSelectProps {
40
40
  labelAccessor?: string;
41
41
 
42
42
  valueAccessor?: string;
43
+
44
+ onEnter?:(newOption:string)=>void
43
45
  }
44
46
 
45
47
  export { Option, MultiSelectProps };