pixel-react 1.6.8 → 1.7.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 (173) 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/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. package/src/components/AddVariables/types.ts +0 -36
@@ -0,0 +1,159 @@
1
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
2
+ import VariableDropdown from '../Editor/VariableDropdown';
3
+ import Icon from '../Icon';
4
+ import Input from '../Input';
5
+ import { ConditionalDropdownProps, dynamicObject } from './types';
6
+ import './ConditionalDropdown.scss';
7
+ import React, { useState, useRef, useEffect } from 'react';
8
+ import OptionsDropdown from './OptionsDropdown';
9
+
10
+ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
11
+ label = '',
12
+ hashInputValue = '',
13
+ setHashInputValue,
14
+ variableList = [],
15
+ placeholder = 'Enter text',
16
+ onChange,
17
+ onCreateVariableClick,
18
+ value = '',
19
+ dropdownWidth = 'inherit',
20
+ isHash = false,
21
+ dataFiles = [],
22
+ ...props
23
+ }) => {
24
+ const [inputValue, setInputValue] = useState<string>('');
25
+ const [showDropdown, setShowDropdown] = useState<boolean>(false);
26
+ const [cursorPosition, setCursorPosition] = useState<number | null>(null);
27
+ const [showCreateVariableIcon, setShowCreateVariableIcon] =
28
+ useState<boolean>(false);
29
+ const [filteredOptions, setFilteredOptions] = useState<dynamicObject[]>([]);
30
+ const inputRef = useRef<HTMLInputElement>(null);
31
+
32
+ useEffect(() => {
33
+ if (cursorPosition !== null && inputRef.current) {
34
+ inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
35
+ inputRef.current.focus();
36
+ }
37
+ }, [cursorPosition]);
38
+
39
+ useEffect(() => {
40
+ if (inputValue.startsWith('#') && isHash) {
41
+ const searchQuery = inputValue.slice(1).toLowerCase();
42
+ const filtered = dataFiles.filter((file) =>
43
+ file.name.toLowerCase().includes(searchQuery)
44
+ );
45
+
46
+ setFilteredOptions(filtered);
47
+ setShowDropdown(filtered.length > 0);
48
+ } else if (!isHash) {
49
+ const newPayload = replaceVariablesWithIds(inputValue);
50
+ onChange?.(newPayload);
51
+ }
52
+ }, [inputValue]);
53
+
54
+ const replaceVariablesWithIds = (input: string): string => {
55
+ return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
56
+ const foundVariable = variableList.find(
57
+ (varaible) => varaible.name === variableName.trim()
58
+ );
59
+ return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
60
+ });
61
+ };
62
+
63
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
64
+ const fieldValue = event.target.value;
65
+ setInputValue(fieldValue);
66
+ const cursorPos = inputRef.current?.selectionStart || 0;
67
+ const isDollarTyped = fieldValue[cursorPos - 1] === '$';
68
+
69
+ if (isHash) {
70
+ setShowDropdown(fieldValue.startsWith('#'));
71
+ } else {
72
+ if (isDollarTyped) {
73
+ setShowDropdown(true);
74
+ } else {
75
+ setShowDropdown(false);
76
+ }
77
+ if (fieldValue?.includes('$')) {
78
+ setShowCreateVariableIcon(false);
79
+ } else {
80
+ setShowCreateVariableIcon(true);
81
+ }
82
+ }
83
+ };
84
+
85
+ const handleDropdownClick = (item: dynamicObject) => {
86
+ if (inputRef.current) {
87
+ const { selectionStart, selectionEnd } = inputRef.current;
88
+ const dollarSyntax = `{${
89
+ item.type === 'LOCAL'
90
+ ? 'LV'
91
+ : item.type === 'GLOBAL'
92
+ ? 'GV'
93
+ : item.type === 'GROUP'
94
+ ? 'SG'
95
+ : 'PEV'
96
+ }_${item.name}}`;
97
+
98
+ let newValue;
99
+ if (isHash && inputValue[0] === '#') {
100
+ newValue = item.name + inputValue.slice(selectionEnd || 1);
101
+ } else {
102
+ newValue =
103
+ inputValue.slice(0, selectionStart || 0) +
104
+ dollarSyntax +
105
+ inputValue.slice(selectionEnd || 0);
106
+ }
107
+ setHashInputValue?.(item);
108
+ setInputValue(newValue);
109
+ setCursorPosition((selectionStart || 0) + dollarSyntax.length);
110
+ setShowDropdown(false);
111
+ }
112
+ };
113
+
114
+ return (
115
+ <div className="ff-add-variable-container">
116
+ <div className="ff-add-variable-input">
117
+ <Input
118
+ {...props}
119
+ name="add_variable"
120
+ ref={inputRef}
121
+ type="text"
122
+ value={inputValue}
123
+ onChange={handleChange}
124
+ variant="primary"
125
+ label={label}
126
+ placeholder={placeholder}
127
+ />
128
+ {!checkEmpty(value) && !isHash && showCreateVariableIcon && (
129
+ <Icon
130
+ onClick={onCreateVariableClick}
131
+ name="add_variable"
132
+ width={24}
133
+ height={24}
134
+ hoverEffect
135
+ />
136
+ )}
137
+ </div>
138
+ {showDropdown && (
139
+ isHash ? (
140
+ <OptionsDropdown
141
+ position="relative"
142
+ width={dropdownWidth}
143
+ filteredOptions={filteredOptions}
144
+ onSelectVariable={handleDropdownClick}
145
+ />
146
+ ) : (
147
+ <VariableDropdown
148
+ position="relative"
149
+ width={dropdownWidth}
150
+ optionsList={variableList}
151
+ onSelectVariable={handleDropdownClick}
152
+ />
153
+ )
154
+ )}
155
+ </div>
156
+ );
157
+ };
158
+
159
+ export default ConditionalDropdown;
@@ -0,0 +1,44 @@
1
+ import type { FC, ReactNode } from 'react';
2
+ import { dynamicObject, OptionsDropdownProps } from './types';
3
+ import './ConditionalDropdown.scss';
4
+ import Typography from '../Typography';
5
+ import classNames from 'classnames';
6
+
7
+ const OptionsDropdown:FC<OptionsDropdownProps> = ({
8
+ onSelectVariable,
9
+ dropdownPosition,
10
+ filteredOptions= [],
11
+ position = 'relative',
12
+ width = '300px',
13
+ }): ReactNode => {
14
+ return (
15
+ <div
16
+ className={classNames('ff-variable-dropdown', position)}
17
+ style={
18
+ dropdownPosition
19
+ ? {
20
+ top: dropdownPosition.top + 30,
21
+ left: dropdownPosition.left - 30,
22
+ width,
23
+ }
24
+ : { width }
25
+ }
26
+ >
27
+ {filteredOptions?.map((option: dynamicObject): ReactNode => {
28
+ return (
29
+ <div
30
+ className="ff-variable-option"
31
+ onClick={() => onSelectVariable(option)}
32
+ key={option?.id}
33
+ >
34
+ <Typography as="span" fontSize={14}>
35
+ {option?.name}
36
+ </Typography>
37
+ </div>
38
+ );
39
+ })}
40
+ </div>
41
+ );
42
+ };
43
+
44
+ export default OptionsDropdown;
@@ -0,0 +1 @@
1
+ export { default } from './ConditionalDropdown';
@@ -0,0 +1,160 @@
1
+ import { dropdownPositionType } from "../Editor/types";
2
+
3
+ export type dynamicObject = {
4
+ [key: string]: any;
5
+ };
6
+
7
+ export type TestDataObject = {
8
+ _id: string;
9
+ name: string;
10
+ actualPath: string;
11
+ searchKey: string;
12
+ parentId: string;
13
+ }
14
+
15
+ export interface ConditionalDropdownProps {
16
+ /**
17
+ * Label for the field
18
+ */
19
+ label?: string;
20
+
21
+ /**
22
+ * Value in the input should stored in this state
23
+ */
24
+ hashInputValue?: TestDataObject | dynamicObject;
25
+
26
+ /**
27
+ * Function storing and updating the inputValue state
28
+ */
29
+ setHashInputValue?:(value: dynamicObject | undefined) => void;
30
+
31
+ /**
32
+ * List of variables
33
+ */
34
+ variableList?: dynamicObject[];
35
+ /**
36
+ * Place holder for the input field
37
+ */
38
+ placeholder?: string;
39
+ /**
40
+ * Function to handle input change
41
+ * @param value
42
+ * @returns
43
+ */
44
+ onChange?: (value: string) => void;
45
+ /**
46
+ * Function to handle create variable icon click
47
+ */
48
+ onCreateVariableClick?: () => void;
49
+ /**
50
+ * Width of the dropdown
51
+ */
52
+ dropdownWidth?: string;
53
+ /**
54
+ * Name | name of the input field
55
+ */
56
+ name?: string;
57
+ /**
58
+ * value | input field value
59
+ */
60
+ value?: string;
61
+ /**
62
+ * variants to set color/style of the input field
63
+ */
64
+ variant?: 'default' | 'primary';
65
+ /**
66
+ * type to set color/style of the input field
67
+ */
68
+ type?: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
69
+ /**
70
+ * error | If true, error message will be displayed
71
+ */
72
+ error?: boolean;
73
+ /**
74
+ * helperText | error, success, warning message to be shown
75
+ */
76
+ helperText?: string;
77
+ /**
78
+ * to disable the input field
79
+ */
80
+ disabled?: boolean;
81
+ /**
82
+ * if true, input field will be mandatory
83
+ */
84
+ required?: boolean;
85
+ /**
86
+ * classnames to style the input field
87
+ */
88
+ className?: string;
89
+ /**
90
+ * noBorder prop 'true' removes border of input
91
+ */
92
+ noBorder?: boolean;
93
+
94
+ onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
95
+
96
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
97
+
98
+ onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
99
+ /**
100
+ * id to select the input field uniquely
101
+ */
102
+ id?: string;
103
+ /**
104
+ * if on, suggestion popup will be displayed
105
+ */
106
+ autoComplete?: 'on' | 'off';
107
+ /**
108
+ * minimum and maximum values for the number type input field and their functions
109
+ */
110
+ minValue?: number;
111
+ maxValue?: number;
112
+ /**
113
+ * background of the input field prop
114
+ */
115
+ transparentBackground?: boolean;
116
+ /**
117
+ * size for the input field
118
+ */
119
+ size?: 'small' | 'medium';
120
+ /**
121
+ * isLabelRequired for the input field without label,showing placeholder
122
+ */
123
+ isLabelRequired?: boolean;
124
+
125
+ /**
126
+ * If true, dropdown opens when '#' is entered at the first position.
127
+ */
128
+ isHash?: boolean;
129
+ /**
130
+ * Options for the dropdown when `isHash` is true.
131
+ */
132
+ dataFiles?: dynamicObject[];
133
+ }
134
+
135
+ export interface OptionsDropdownProps {
136
+ /**
137
+ * Position whether absoloute or relative
138
+ */
139
+ position: 'absolute' | 'relative';
140
+
141
+ /**
142
+ * Dropdown width
143
+ */
144
+ width: string;
145
+
146
+ /**
147
+ * chars entered to search in Input :
148
+ */
149
+ filteredOptions?: dynamicObject[];
150
+
151
+ /**
152
+ * Function to handle click on variable
153
+ */
154
+ onSelectVariable: (variable: object) => void;
155
+
156
+ /**
157
+ * Dropdown postion used for dropdown placement
158
+ */
159
+ dropdownPosition?: dropdownPositionType;
160
+ }
@@ -57,7 +57,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
57
57
  required
58
58
  type="text"
59
59
  name="variable name"
60
- value={variableName}
60
+ value={variableName || ''}
61
61
  onChange={(event) => onNameChange(event.target.value)}
62
62
  />
63
63
  <Select
@@ -73,7 +73,7 @@ const CreateVariableSlider: FC<CreateVariableProps> = ({
73
73
  required
74
74
  type="text"
75
75
  name="value"
76
- value={value}
76
+ value={value || ''}
77
77
  onChange={(event) => onValueChange(event.target.value)}
78
78
  />
79
79
  <div className="ff-hide-value-content">
@@ -38,11 +38,11 @@ export interface CreateVariableProps {
38
38
  /**
39
39
  * onChange of name
40
40
  */
41
- onNameChange: (value: string | boolean) => void;
41
+ onNameChange: (value: string) => void;
42
42
  /**
43
43
  * onChange of value
44
44
  */
45
- onValueChange: (value: string | boolean) => void;
45
+ onValueChange: (value: string) => void;
46
46
  /**
47
47
  * Hide value
48
48
  */
@@ -1,80 +1,67 @@
1
- @use '../../assets/styles/colors' as *;
2
- @use '../../assets/styles/fonts';
3
1
  @use '../../assets/styles/mixins' as *;
4
2
 
5
- .ff-download-client-overlay {
6
- width: 378px;
7
- height: 217px;
3
+ .ff-download-client-wrapper {
8
4
  position: absolute;
9
- @include center-content;
10
- z-index: 9999;
5
+ height: 181px;
6
+ width: 368px;
7
+ border: 1px solid var(--download-client-border-color);
8
+ border-radius: 4px;
9
+ box-shadow: 0px 0px 8px 0px
10
+ var(--download-client-icon-container-box-shadow-color);
11
11
 
12
- .ff-download-client-container {
13
- width: 370px;
12
+ .ff-download-client-header-wrapper {
13
+ position: relative;
14
14
  @include center-content;
15
- flex-direction: column;
16
- border-radius: 8px;
17
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
- border: 1px solid var(--download-client-border-color);
19
- margin-left: 5px;
15
+ justify-content: space-between;
16
+ background-color: var(--download-client-header-bg-color);
20
17
 
21
- .ff-download-client-header {
22
- width: 100%;
23
- @include center-content;
24
- justify-content: space-between;
25
- padding: 7px 4px;
26
- margin-bottom: 8px;
27
- border-radius: 4px 4px 0 0;
28
- background-color: var(--download-client-header-bg-color);
29
- box-sizing: border-box;
18
+ .ff-download-client-hollow-triangle {
19
+ position: absolute;
20
+ height: 8px;
21
+ width: 8px;
22
+ border: 1px solid var(--download-client-border-color);
23
+ top: -6px;
24
+ right: 64px;
25
+ z-index: -1;
26
+ border-radius: 2px;
27
+ transform: rotate(45deg);
28
+ }
30
29
 
31
- .ff-header-arrow {
32
- content: "";
33
- display: block;
34
- position: absolute;
35
- top: 10px;
36
- right: 70px;
37
- width: 10px;
38
- height: 10px;
39
- background-color: var(--download-client-icon-container-bg-color) ;
40
- transform: translateY(-50%) rotate(-45deg);
41
- z-index: -999;
42
- border: 1px solid var(--download-client-header-bg-color);
43
- }
30
+ .ff-download-client-header-text {
31
+ margin-left: 4px;
32
+ }
44
33
 
34
+ .ff-download-client-close-icon {
35
+ cursor: pointer;
36
+ margin-right: 10px;
45
37
  }
38
+ }
46
39
 
47
- .ff-download-client-content {
48
- width: 100%;
49
- @include center-content;
50
- flex-direction: column;
51
- padding-left: 8px;
52
- padding-right: 24px;
53
- gap: 8px;
54
- margin-bottom: 8px;
55
- color: var(--popup-text-color);
56
- .ff-download-install,
57
- .ff-choose-os {
58
- padding: 4px 0;
59
- }
40
+ .ff-download-client-content-text {
41
+ width: calc(100% - 16px);
42
+ height: 132px;
43
+ background-color: #fff;
44
+ padding: 8px;
45
+
46
+ .ff-download-client-description-text {
47
+ margin-bottom: 8px
60
48
  }
61
49
 
62
- .ff-download-client-actions {
63
- width: 240px;
50
+ }
51
+
52
+ .ff-download-client-os-wrapper {
53
+ @include center-content;
54
+ gap: 24px;
55
+
56
+ .ff-os-version-wrapper {
64
57
  @include center-content;
65
- gap: 12px;
66
- margin-bottom: 17px;
67
- .ff-icons-container {
68
- @include center-content;
69
- width: 64px;
70
- height: 64px;
71
- border-radius: 8px;
72
- border: 1px solid var(--download-client-icon-container-border-color);
73
- background-color: var(--download-client-icon-container-bg-color);
74
- cursor: pointer;
75
- box-shadow: 0px 0px 10px 0px
76
- var(--download-client-icon-container-box-shadow-color);
77
- }
58
+ height: 64px;
59
+ width: 64px;
60
+ cursor: pointer;
61
+ border-radius: 8px;
62
+ border: 1px solid var(--download-client-icon-container-border-color);
63
+ box-shadow: 0px 0px 10px 0px
64
+ var(--download-client-icon-container-box-shadow-color);
78
65
  }
79
66
  }
80
67
  }
@@ -1,5 +1,6 @@
1
1
  import { Meta, StoryObj } from '@storybook/react';
2
2
  import DownloadClient from './DownloadClient';
3
+ import './DemoDownloadClient.scss';
3
4
 
4
5
  const meta: Meta<typeof DownloadClient> = {
5
6
  title: 'Components/DownloadClient',
@@ -14,12 +15,11 @@ type Story = StoryObj<typeof DownloadClient>;
14
15
 
15
16
  export const Default: Story = {
16
17
  args: {
17
- onClose: () =>{},
18
- onClickWindows: () =>{},
19
- onClickLinux: () =>{},
20
- onClickMac: () =>{},
21
- top: '100px',
22
- left: '50px',
18
+ onClose: () => {},
19
+ top: '50%',
20
+ left: '50%',
21
+ className: 'ff-download-client-stories',
22
+ onClick: () => {},
23
23
  },
24
24
  };
25
25
 
@@ -6,17 +6,13 @@ import { DownloadClientProps } from './type';
6
6
 
7
7
  const DownloadClient: React.FC<DownloadClientProps> = ({
8
8
  onClose,
9
- onClickWindows,
10
- onClickLinux,
11
- onClickMac,
12
- top = '10px',
13
- left = '10px',
9
+ top = '100px',
10
+ left = '0px',
11
+ className,
12
+ description = 'Download and Install the fireflink client to run the script',
13
+ onClick = () => {},
14
+ optionZIndex = 10000001,
14
15
  }) => {
15
- const title = 'Download Client';
16
- const description =
17
- 'Download and Install the fireflink client to run the script';
18
- const chooseOSText = 'Choose OS';
19
-
20
16
  useEffect(() => {
21
17
  const handleCloseDownloadClient = (event: KeyboardEvent) => {
22
18
  if (event.key === 'Escape') {
@@ -29,49 +25,62 @@ const DownloadClient: React.FC<DownloadClientProps> = ({
29
25
  };
30
26
  }, [onClose]);
31
27
 
28
+ const osVersion = ['windows', 'mac_icon', 'linux'];
29
+
32
30
  return (
33
- <div className="ff-download-client-overlay" style={{ top, left }}>
34
- <div className="ff-download-client-container">
35
- <div className="ff-download-client-header">
36
- <div className="ff-header-arrow"></div>
37
- <Typography
38
- color="var(--table-header-text-color)"
39
- fontWeight="semi-bold"
40
- >
41
- {title}
42
- </Typography>
43
- <div onClick={onClose}>
44
- <Icon name="close" width={12} height={12} />
45
- </div>
46
- </div>
47
- <div className="ff-download-client-content">
48
- <div className="ff-download-install">
49
- <Typography
50
- fontWeight="semi-bold"
51
- color="var(--download-client-content-text-color)"
52
- >
53
- {description}
54
- </Typography>
55
- </div>
56
- <div className="ff-choose-os">
57
- <Typography
58
- fontWeight="semi-bold"
59
- color="var(--download-client-choose-os-text-color)"
31
+ <div
32
+ className={`ff-download-client-wrapper ${className}`}
33
+ style={{ top: top, left: left, zIndex: optionZIndex }}
34
+ >
35
+ <div className="ff-download-client-header-wrapper">
36
+ <div className="ff-download-client-hollow-triangle"></div>
37
+ <Typography
38
+ fontWeight="semi-bold"
39
+ lineHeight="32px"
40
+ className="ff-download-client-header-text"
41
+ >
42
+ Download client
43
+ </Typography>
44
+ <Icon
45
+ name="close"
46
+ color="var(--brand-color)"
47
+ className="ff-download-client-close-icon"
48
+ height={12}
49
+ width={12}
50
+ />
51
+ </div>
52
+
53
+ <div className="ff-download-client-content-text">
54
+ <Typography
55
+ as="div"
56
+ color="var(--download-client-content-text-color)"
57
+ fontWeight="semi-bold"
58
+ textAlign="center"
59
+ lineHeight="26px"
60
+ >
61
+ {description}
62
+ </Typography>
63
+ <Typography
64
+ as="div"
65
+ className="ff-download-client-description-text"
66
+ textAlign="center"
67
+ fontWeight="medium"
68
+ lineHeight='26px'
69
+ >
70
+ Choose OS to Download
71
+ </Typography>
72
+
73
+ <div className="ff-download-client-os-wrapper">
74
+ {osVersion.map((os) => (
75
+ <div
76
+ className="ff-os-version-wrapper"
77
+ onClick={() => {
78
+ onClick(os === 'mac_icon' ? 'mac' : os);
79
+ }}
60
80
  >
61
- {chooseOSText}
62
- </Typography>
63
- </div>
64
- </div>
65
- <div className="ff-download-client-actions">
66
- <div className="ff-icons-container" onClick={onClickWindows}>
67
- <Icon name="windows" width={32} height={38} />
68
- </div>
69
- <div className="ff-icons-container" onClick={onClickLinux}>
70
- <Icon name="linux" width={32} height={38} />
71
- </div>
72
- <div className="ff-icons-container" onClick={onClickMac}>
73
- <Icon name="mac_icon" width={32} height={38} />
74
- </div>
81
+ <Icon name={os} height={36} width={36} />
82
+ </div>
83
+ ))}
75
84
  </div>
76
85
  </div>
77
86
  </div>