pixel-react 1.6.2 → 1.6.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 (196) 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/AttachImage/AttachImage.d.ts +1 -6
  7. package/lib/components/AttachImage/types.d.ts +8 -0
  8. package/lib/components/Avatar/types.d.ts +9 -1
  9. package/lib/components/CreateVariable/CreateVariableSlider.d.ts +5 -0
  10. package/lib/components/CreateVariable/index.d.ts +1 -0
  11. package/lib/components/CreateVariable/types.d.ts +56 -0
  12. package/lib/components/Drawer/Types.d.ts +13 -0
  13. package/lib/components/IconButton/types.d.ts +1 -0
  14. package/lib/components/MiniModal/types.d.ts +7 -0
  15. package/lib/components/Select/components/types.d.ts +1 -0
  16. package/lib/components/Select/types.d.ts +2 -0
  17. package/lib/components/TableTree/Components/TableBody.d.ts +4 -0
  18. package/lib/components/TableTree/Components/TableCell.d.ts +4 -0
  19. package/lib/components/TableTree/Components/TableHead.d.ts +4 -0
  20. package/lib/components/TableTree/Components/TableRow.d.ts +4 -0
  21. package/lib/components/TableTree/TableTree copy.d.ts +25 -0
  22. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  23. package/lib/components/TableTree/types.d.ts +38 -5
  24. package/lib/index.d.ts +117 -7
  25. package/lib/index.esm.js +594 -324
  26. package/lib/index.esm.js.map +1 -1
  27. package/lib/index.js +594 -323
  28. package/lib/index.js.map +1 -1
  29. package/lib/tsconfig.tsbuildinfo +1 -1
  30. package/package.json +1 -1
  31. package/src/assets/icons/authorization_icon.svg +1 -0
  32. package/src/assets/icons/backward.svg +10 -0
  33. package/src/assets/icons/capture_icon.svg +6 -0
  34. package/src/assets/icons/download_file_icon.svg +2 -9
  35. package/src/assets/icons/forward.svg +3 -0
  36. package/src/assets/icons/project_status_icon.svg +10 -0
  37. package/src/assets/icons/refresh_icon.svg +4 -0
  38. package/src/assets/icons/rotate_icon.svg +10 -0
  39. package/src/assets/icons/swipe_icon.svg +9 -0
  40. package/src/assets/icons/tap_icon.svg +4 -0
  41. package/src/components/AttachImage/AttachImage.stories.tsx +2 -0
  42. package/src/components/AttachImage/AttachImage.tsx +5 -9
  43. package/src/components/AttachImage/types.ts +25 -18
  44. package/src/components/Avatar/Avatar.scss +4 -0
  45. package/src/components/Avatar/Avatar.stories.tsx +38 -18
  46. package/src/components/Avatar/Avatar.tsx +19 -3
  47. package/src/components/Avatar/types.ts +9 -1
  48. package/src/components/Charts/DonutChart/DonutChart.tsx +8 -3
  49. package/src/components/Charts/RadialChart/RadialChart.scss +4 -0
  50. package/src/components/Charts/RadialChart/RadialChart.tsx +51 -45
  51. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -0
  52. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -0
  53. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -0
  54. package/src/components/CreateVariable/index.ts +1 -0
  55. package/src/components/CreateVariable/types.ts +58 -0
  56. package/src/components/Drawer/Drawer.scss +1 -1
  57. package/src/components/Drawer/Drawer.stories.tsx +0 -1
  58. package/src/components/Drawer/Drawer.tsx +4 -1
  59. package/src/components/Drawer/Types.ts +13 -0
  60. package/src/components/FileDropzone/FileDropzone.scss +0 -1
  61. package/src/components/Icon/iconList.ts +16 -0
  62. package/src/components/IconButton/IconButton.scss +11 -11
  63. package/src/components/IconButton/IconButton.tsx +2 -1
  64. package/src/components/IconButton/types.ts +1 -0
  65. package/src/components/MiniModal/MiniModal.scss +0 -4
  66. package/src/components/MiniModal/MiniModal.stories.tsx +3 -2
  67. package/src/components/MiniModal/MiniModal.tsx +28 -10
  68. package/src/components/MiniModal/types.ts +7 -0
  69. package/src/components/Select/Select.scss +20 -0
  70. package/src/components/Select/Select.stories.tsx +50 -1
  71. package/src/components/Select/Select.tsx +34 -7
  72. package/src/components/Select/components/Dropdown.scss +9 -0
  73. package/src/components/Select/components/Dropdown.tsx +20 -6
  74. package/src/components/Select/components/types.ts +1 -0
  75. package/src/components/Select/types.ts +12 -2
  76. package/src/components/TableTree/Components/TableBody.tsx +35 -0
  77. package/src/components/TableTree/Components/TableCell.tsx +59 -0
  78. package/src/components/TableTree/Components/TableHead.tsx +39 -0
  79. package/src/components/TableTree/Components/TableRow.tsx +37 -0
  80. package/src/components/TableTree/TableTree.scss +8 -5
  81. package/src/components/TableTree/TableTree.tsx +16 -46
  82. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -0
  83. package/src/components/TableTree/Utils/renderSpaces.ts +0 -0
  84. package/src/components/TableTree/types.ts +43 -5
  85. package/src/index.ts +2 -0
  86. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  87. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  88. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  89. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  90. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  91. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  92. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  93. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  94. package/lib/components/Button/Button.stories.d.ts +0 -13
  95. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  96. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  97. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  98. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  99. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  100. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  101. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  102. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  103. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  104. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +0 -8
  105. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  106. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  107. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  108. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  109. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  110. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  111. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  112. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  113. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  114. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  115. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  116. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  117. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  118. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  119. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  120. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  121. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  122. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  123. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  124. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  125. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  126. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  127. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  128. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  129. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  130. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  131. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  132. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  133. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  134. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  135. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  136. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  137. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  138. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  139. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  140. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  141. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  142. package/lib/components/ExcelFile/Types.d.ts +0 -129
  143. package/lib/components/ExcelFile/index.d.ts +0 -1
  144. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  145. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  146. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  147. package/lib/components/Form/Form.stories.d.ts +0 -7
  148. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  149. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  150. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  151. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  152. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  153. package/lib/components/Input/Input.stories.d.ts +0 -9
  154. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  155. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -11
  156. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  157. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  158. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  159. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  160. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  161. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  162. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -10
  163. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  164. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  165. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  166. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  167. package/lib/components/Search/Search.stories.d.ts +0 -6
  168. package/lib/components/Select/Select.stories.d.ts +0 -13
  169. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  170. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  171. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  172. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  173. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  174. package/lib/components/Table/Table.stories.d.ts +0 -13
  175. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  176. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  177. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  178. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  179. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  180. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  181. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  182. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  183. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  184. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  185. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  186. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  187. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  188. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  189. package/lib/utils/find/findAndInsert.d.ts +0 -7
  190. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  191. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  192. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  193. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  194. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  195. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
  196. /package/lib/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.d.ts +0 -0
@@ -6,6 +6,7 @@ import {
6
6
  ArcResult,
7
7
  ArcAnglesResult,
8
8
  } from './types';
9
+ import Tooltip from '../../Tooltip';
9
10
 
10
11
  const useColorMappings = () =>
11
12
  useMemo(() => {
@@ -117,54 +118,59 @@ const RadialChart: React.FC<RadialChartProps> = ({
117
118
  calculateArcAngles(status.value, total, currentAngle, radius);
118
119
  currentAngle = endAngle;
119
120
  return (
120
- <svg
121
- key={status.status}
122
- width={svgSize}
123
- height={svgSize}
124
- viewBox={`0 0 ${svgSize} ${svgSize}`}
125
- onClick={() => onClick(status)}
126
- role="img"
127
- aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
121
+ <Tooltip
122
+ title={`${status.status}: ${Math.round(percentage * 100)}%`}
123
+ zIndex={1000}
128
124
  >
129
- <g
130
- transform={`translate(${radius + lineWidth}, ${
131
- radius + lineWidth
132
- })`}
125
+ <svg
126
+ key={status.status}
127
+ width={svgSize}
128
+ height={svgSize}
129
+ viewBox={`0 0 ${svgSize} ${svgSize}`}
130
+ onClick={() => onClick(status)}
131
+ role="img"
132
+ aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
133
133
  >
134
- {/* Background Circle */}
135
- <path
136
- d={backgroundArcPath}
137
- fill="none"
138
- stroke={
139
- backgroundColorMapping[
140
- normalizedStatus as keyof typeof colorMapping
141
- ]
142
- }
143
- strokeWidth={lineWidth}
144
- />
145
- {/* Status Arc */}
146
- <path
147
- d={foregroundArcPath}
148
- fill="none"
149
- stroke={
150
- colorMapping[normalizedStatus as keyof typeof colorMapping]
151
- }
152
- strokeWidth={lineWidth}
153
- />
154
- {/* Percentage Text */}
155
- <text
156
- x="0"
157
- y="0"
158
- fill={
159
- colorMapping[normalizedStatus as keyof typeof colorMapping]
160
- }
161
- textAnchor="middle"
162
- dominantBaseline="central"
134
+ <g
135
+ transform={`translate(${radius + lineWidth}, ${
136
+ radius + lineWidth
137
+ })`}
163
138
  >
164
- {`${Math.round(percentage * 100)}%`}
165
- </text>
166
- </g>
167
- </svg>
139
+ {/* Background Circle */}
140
+ <path
141
+ d={backgroundArcPath}
142
+ fill="none"
143
+ stroke={
144
+ backgroundColorMapping[
145
+ normalizedStatus as keyof typeof colorMapping
146
+ ]
147
+ }
148
+ strokeWidth={lineWidth}
149
+ />
150
+ {/* Status Arc */}
151
+ <path
152
+ d={foregroundArcPath}
153
+ fill="none"
154
+ stroke={
155
+ colorMapping[normalizedStatus as keyof typeof colorMapping]
156
+ }
157
+ strokeWidth={lineWidth}
158
+ />
159
+ {/* Percentage Text */}
160
+ <text
161
+ x="0"
162
+ y="0"
163
+ fill={
164
+ colorMapping[normalizedStatus as keyof typeof colorMapping]
165
+ }
166
+ textAnchor="middle"
167
+ dominantBaseline="central"
168
+ >
169
+ {`${Math.round(percentage * 100)}%`}
170
+ </text>
171
+ </g>
172
+ </svg>
173
+ </Tooltip>
168
174
  );
169
175
  })}
170
176
  </div>
@@ -0,0 +1,18 @@
1
+ .ff-create-variable-slider {
2
+ padding: 8px;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 8px;
6
+ .ff-hide-value-content {
7
+ display: flex;
8
+ align-items: center;
9
+ }
10
+ }
11
+
12
+ .ff-create-slider-footer {
13
+ width: 100%;
14
+ gap: 8px;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: flex-end;
18
+ }
@@ -0,0 +1,66 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import { useState } from 'react';
3
+ import CreateVariableSlider from './CreateVariableSlider';
4
+ import { CreateVariableProps } from './types';
5
+ import React from 'react';
6
+
7
+ const meta: Meta<typeof CreateVariableSlider> = {
8
+ title: 'Components/CreateVariableSlider',
9
+ component: CreateVariableSlider,
10
+ };
11
+
12
+ export default meta;
13
+ type Story = StoryObj<typeof CreateVariableSlider>;
14
+
15
+ export const WithState: Story = {
16
+ render: (args) => {
17
+ const [variableName, setVariableName] = useState('');
18
+ const [value, setValue] = useState('');
19
+ const [selectedVariableType, setSelectedVariableType] = useState({
20
+ label: 'Local Variable',
21
+ value: 'LOCAL',
22
+ });
23
+ const [hideValue, setHideValue] = useState(false);
24
+
25
+ const variableTypeList = [
26
+ { label: 'Local Variable', value: 'LOCAL' },
27
+ { label: 'Global Variable', value: 'GLOBAL' },
28
+ { label: 'Project Environment Variable', value: 'PROJECT_ENVIRONMENT' },
29
+ ];
30
+ const handleNameChange = (value) => {
31
+ setVariableName(value);
32
+ };
33
+ const handleValueChange = (value) => {
34
+ setValue(value);
35
+ };
36
+ const handleTypeChange = (value) => {
37
+ setSelectedVariableType(value);
38
+ };
39
+ const handleSubmit = () => {
40
+ let variable = {
41
+ name: variableName,
42
+ value,
43
+ type: selectedVariableType.value,
44
+ hideValue,
45
+ };
46
+ console.log('Variable :', variable);
47
+ };
48
+
49
+ return (
50
+ <CreateVariableSlider
51
+ {...args}
52
+ isOpen={true} // Ensures the drawer is open for interaction
53
+ variableName={variableName}
54
+ value={value}
55
+ selectedVariableType={selectedVariableType}
56
+ hideValue={hideValue}
57
+ variableTypesList={variableTypeList}
58
+ onNameChange={handleNameChange}
59
+ onValueChange={handleValueChange}
60
+ onVariableTypeChange={handleTypeChange}
61
+ onHideChange={setHideValue}
62
+ handleSubmit={handleSubmit}
63
+ />
64
+ );
65
+ },
66
+ };
@@ -0,0 +1,95 @@
1
+ import { type FC, type JSX } from 'react';
2
+ import Drawer from '../Drawer';
3
+ import { CreateVariableProps } from './types';
4
+ import Input from '../Input';
5
+ import Select from '../Select';
6
+ import './CreateVariableSlider.scss';
7
+ import Checkbox from '../Checkbox';
8
+ import Icon from '../Icon';
9
+ import Button from '../Button';
10
+ import Tooltip from '../Tooltip';
11
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
12
+
13
+ const CreateVariableSlider: FC<CreateVariableProps> = ({
14
+ isOpen,
15
+ variableTypesList = [],
16
+ onClose,
17
+ onNameChange,
18
+ onValueChange,
19
+ variableName,
20
+ value,
21
+ onVariableTypeChange,
22
+ selectedVariableType,
23
+ hideValue = false,
24
+ onHideChange,
25
+ handleSubmit,
26
+ }): JSX.Element => {
27
+ const FooterContent: FC = (): JSX.Element => {
28
+ return (
29
+ <div className="ff-create-slider-footer">
30
+ <Button onClick={onClose} label="Cancel" variant="tertiary" />
31
+ <Button
32
+ variant="primary"
33
+ label="create"
34
+ type="submit"
35
+ onClick={handleSubmit}
36
+ disabled={checkEmpty(variableName) || checkEmpty(value)}
37
+ />
38
+ </div>
39
+ );
40
+ };
41
+ return (
42
+ <Drawer
43
+ onClose={onClose}
44
+ isOpen={isOpen}
45
+ title="Create Variable"
46
+ width="284px"
47
+ height="222px"
48
+ top="35%"
49
+ right={8}
50
+ isFooterRequired={true}
51
+ overlay
52
+ footerContent={<FooterContent />}
53
+ >
54
+ <div className="ff-create-variable-slider">
55
+ <Input
56
+ label="Variable Name"
57
+ required
58
+ type="text"
59
+ name="variable name"
60
+ value={variableName}
61
+ onChange={(event) => onNameChange(event.target.value)}
62
+ />
63
+ <Select
64
+ label="Variable Type"
65
+ required
66
+ onChange={(option: any) => onVariableTypeChange(option)}
67
+ selectedOption={selectedVariableType}
68
+ optionsList={variableTypesList}
69
+ optionZIndex={99999}
70
+ />
71
+ <Input
72
+ label="Variable Value"
73
+ required
74
+ type="text"
75
+ name="value"
76
+ value={value}
77
+ onChange={(event) => onValueChange(event.target.value)}
78
+ />
79
+ <div className="ff-hide-value-content">
80
+ <Checkbox
81
+ onChange={(event) => onHideChange(event.target.checked)}
82
+ name="hide value"
83
+ label="Hide Value"
84
+ checked={hideValue}
85
+ />
86
+ <Tooltip title="Once the value is hidden, it cannot be undone">
87
+ <Icon name="info" width={12} height={12} />
88
+ </Tooltip>
89
+ </div>
90
+ </div>
91
+ </Drawer>
92
+ );
93
+ };
94
+
95
+ export default CreateVariableSlider;
@@ -0,0 +1 @@
1
+ export { default } from './CreateVariableSlider';
@@ -0,0 +1,58 @@
1
+ export type variableType = 'LOCAL' | 'GLOBAL' | 'GROUP' | 'PROJECT_ENVIRONMENT';
2
+
3
+ export type DynamicObj = {
4
+ [key: string]: any;
5
+ };
6
+
7
+ export interface CreateVariableProps {
8
+ /**
9
+ * Open Create variable Slider
10
+ */
11
+ isOpen: boolean;
12
+ /**
13
+ * Value for the variable name
14
+ */
15
+ variableName: string;
16
+ /**
17
+ * Value for the variable to be created
18
+ */
19
+ value: string;
20
+ /**
21
+ * List for the variable types
22
+ */
23
+ variableTypesList: DynamicObj[];
24
+ /**
25
+ * Selected variable type
26
+ */
27
+ selectedVariableType: DynamicObj;
28
+ /**
29
+ * Function to handle variable type change
30
+ * @param option
31
+ * @returns
32
+ */
33
+ onVariableTypeChange: (option: DynamicObj) => void;
34
+ /**
35
+ * Function to handle close
36
+ */
37
+ onClose?: () => void;
38
+ /**
39
+ * onChange of name
40
+ */
41
+ onNameChange: (value: string | boolean) => void;
42
+ /**
43
+ * onChange of value
44
+ */
45
+ onValueChange: (value: string | boolean) => void;
46
+ /**
47
+ * Hide value
48
+ */
49
+ hideValue: boolean;
50
+ /**
51
+ * onChange for hide value
52
+ */
53
+ onHideChange: (value: boolean) => void;
54
+ /**
55
+ * Function to handle submit
56
+ */
57
+ handleSubmit: () => void;
58
+ }
@@ -19,7 +19,6 @@
19
19
  right: 0;
20
20
  bottom: 0;
21
21
  top: 87px;
22
- min-width: 450px;
23
22
  background-color: var(--primary-button-text-color);
24
23
  z-index: 999;
25
24
  transform: translateX(100%);
@@ -123,6 +122,7 @@
123
122
  z-index: 1000;
124
123
  background-color: var(--base-bg-color);
125
124
  transform: translateY(3px);
125
+ border-radius: 0 0 4px 4px;
126
126
 
127
127
  .button-container {
128
128
  display: flex;
@@ -115,7 +115,6 @@ export const WithTertiaryButtons: Story = {
115
115
  },
116
116
  };
117
117
 
118
-
119
118
  export const WithCustomZIndex: Story = {
120
119
  args: {
121
120
  ...defaultArgs,
@@ -36,6 +36,9 @@ const Drawer: FC<DrawerProps> = ({
36
36
  zIndex = 999,
37
37
  secondLayerZIndex = false,
38
38
  top,
39
+ height,
40
+ width,
41
+ right = 0,
39
42
  }: DrawerProps) => {
40
43
  const [isExpanded, setIsExpanded] = useState(false);
41
44
 
@@ -85,7 +88,7 @@ const Drawer: FC<DrawerProps> = ({
85
88
  className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
86
89
  'ff-drawer--open': isOpen,
87
90
  })}
88
- style={{ zIndex, top }}
91
+ style={{ zIndex, top, height, width, right }}
89
92
  >
90
93
  {showHeader && (
91
94
  <div
@@ -141,4 +141,17 @@ export interface DrawerProps {
141
141
  * Custom top for the drawer
142
142
  */
143
143
  top?: string;
144
+ /**
145
+ * Height of the drawer
146
+ */
147
+ height?: string;
148
+ /**
149
+ *
150
+ * width of the drawer
151
+ */
152
+ width?: string;
153
+ /**
154
+ * Position from right
155
+ */
156
+ right?: string | number;
144
157
  }
@@ -65,7 +65,6 @@
65
65
 
66
66
  .ff-file-details-wrapper {
67
67
  @include column-flex-gap(10px);
68
- width: 640px;
69
68
  max-height: 300px;
70
69
  overflow-y: auto;
71
70
  scroll-behavior: smooth;
@@ -222,6 +222,14 @@ 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
224
  import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
225
+ import ProjectStatusIcon from '../../assets/icons/project_status_icon.svg?react';
226
+ import captureIcon from '../../assets/icons/capture_icon.svg?react';
227
+ import rotateIcon from '../../assets/icons/rotate_icon.svg?react';
228
+ import tapIcon from '../../assets/icons/tap_icon.svg?react';
229
+ import refreshIcon from '../../assets/icons/refresh_icon.svg?react';
230
+ import swipeIcon from '../../assets/icons/swipe_icon.svg?react';
231
+ import backward from '../../assets/icons/backward.svg?react';
232
+ import forward from '../../assets/icons/forward.svg?react';
225
233
 
226
234
  Components['success'] = ToastSuccessIcon;
227
235
  Components['alert'] = Alert;
@@ -442,5 +450,13 @@ Components['remove_user'] = RemoveUser;
442
450
  Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
443
451
  Components['info_user'] = InfoUser;
444
452
  Components['web_service_icon'] = WebServiceIcon;
453
+ Components['project_status_icon'] = ProjectStatusIcon;
454
+ Components['capture_icon'] = captureIcon;
455
+ Components['backward'] = backward;
456
+ Components['forward'] = forward;
457
+ Components['refresh_icon'] = refreshIcon;
458
+ Components['rotate_icon'] = rotateIcon;
459
+ Components['tap_icon'] = tapIcon;
460
+ Components['swipe_icon'] = swipeIcon;
445
461
 
446
462
  export default Components;
@@ -9,32 +9,32 @@
9
9
  cursor: pointer;
10
10
  @include mixins.center-content();
11
11
  gap: 8px;
12
- background-color: var(--secondary-icon-color);
12
+ background-color: var(--hover-color);
13
13
  padding: 2px 8px 2px 2px;
14
- border: 1px solid transparent;
14
+ border: 1px solid var(--secondary-icon-color);
15
15
  .button-icon {
16
16
  width: 20px;
17
17
  height: 20px;
18
- border: 1px solid transparent;
18
+ border: 1px solid var(--primary-icon-color);
19
19
  border-radius: 50%;
20
20
  @include mixins.center-content();
21
- background-color: var(--hover-color);
21
+ background-color: var(--secondary-icon-color);
22
22
  .ff-icon-color {
23
23
  path {
24
- color: var(--secondary-icon-color);
24
+ color: var(--primary-icon-color);
25
25
  }
26
26
  }
27
27
  }
28
28
  .icon-name {
29
- color: var(--primary-icon-color);
29
+ color: var(--secondary-icon-color);
30
30
  @include mixins.center-content();
31
31
  }
32
32
  &:hover {
33
- border: 1px solid var(--secondary-icon-color);
34
- background-color: var(--hover-color);
33
+ border: 1px solid transparent;
34
+ background-color: var(--secondary-icon-color);
35
35
  .icon-name {
36
36
  font-weight: 600;
37
- color: var(--secondary-icon-color);
37
+ color: var(--primary-icon-color);
38
38
  @include mixins.center-content();
39
39
  }
40
40
  .button-icon {
@@ -43,10 +43,10 @@
43
43
  border: 1px solid transparent;
44
44
  border-radius: 50%;
45
45
  @include mixins.center-content();
46
- background-color: var(--secondary-icon-color);
46
+ background-color: var(--hover-color);
47
47
  .ff-icon-color {
48
48
  path {
49
- color: var(--primary-icon-color);
49
+ color: var(--secondary-icon-color);
50
50
  }
51
51
  }
52
52
  }
@@ -9,9 +9,10 @@ const IconButton: React.FC<IconButtonProps> = ({
9
9
  label,
10
10
  iconName = 'plus_user_icon',
11
11
  onClick,
12
+ ref,
12
13
  }) => {
13
14
  return (
14
- <button onClick={onClick} className={classNames('ff-plus-icon')}>
15
+ <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
15
16
  <div className={classNames('button-icon')}>
16
17
  <Icon
17
18
  height={12}
@@ -2,4 +2,5 @@ export interface IconButtonProps {
2
2
  label: string;
3
3
  iconName: string;
4
4
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
5
+ ref?: React.RefObject<HTMLButtonElement>;
5
6
  }
@@ -35,7 +35,6 @@
35
35
  &.popover-arrow-top {
36
36
  bottom: 100%;
37
37
  left: 30px;
38
- border-width: 0 10px 10px 10px;
39
38
  padding: 0 3px 0 0;
40
39
  border-color: transparent transparent var(--ff-mini-modal-border)
41
40
  transparent;
@@ -46,7 +45,6 @@
46
45
  }
47
46
  &.popover-arrow-left {
48
47
  left: -15px; //align the arrow with modal for the right side modal
49
- border-width: 10px 10px 10px 0;
50
48
  border-color: transparent var(--ff-mini-modal-border) transparent
51
49
  transparent;
52
50
  filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -58,7 +56,6 @@
58
56
  &.popover-arrow-bottom {
59
57
  top: 100%;
60
58
  left: 30px;
61
- border-width: 10px 10px 0 10px;
62
59
  border-color: var(--ff-mini-modal-border) transparent transparent
63
60
  transparent; // Bottom part of the arrow with the correct color
64
61
  filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
@@ -70,7 +67,6 @@
70
67
  &.popover-arrow-right {
71
68
  right: -10px;
72
69
  top: 66px;
73
- border-width: 10px 0 10px 10px;
74
70
  border-color: transparent transparent transparent
75
71
  var(--ff-mini-modal-border);
76
72
  filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
@@ -55,7 +55,7 @@ const BasicModalComponent = () => {
55
55
  isOverlay: true,
56
56
  zIndexOverlay: 99,
57
57
  }}
58
- modalProperties={{ width: 300, height: 180 }}
58
+ modalProperties={{ width: 300, height: 180, left: 180, top: 250 }}
59
59
  headerProps={
60
60
  <>
61
61
  <Typography as="p">Modal 1</Typography>
@@ -271,7 +271,8 @@ export const CustomModalWithArrow = () => {
271
271
  isOverlay: true,
272
272
  zIndexOverlay: 99,
273
273
  }}
274
- modalProperties={{ width: 300, height: 250 }}
274
+ modalProperties={{ width: 300, height: 250, left: 180 }}
275
+ arrowProperties={{ left: 270, size: 6 }}
275
276
  arrowZIndex={1000}
276
277
  headerProps={
277
278
  <>
@@ -31,6 +31,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
31
31
  extraLeftSpace,
32
32
  isIconModel,
33
33
  wrapperProperties,
34
+ arrowProperties,
34
35
  arrowZIndex,
35
36
  overlay,
36
37
  outSideClick,
@@ -43,7 +44,21 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
43
44
  });
44
45
  const [isVisible, setIsVisible] = useState(false);
45
46
  const modalRef = useRef<HTMLDivElement>(null);
47
+ const {
48
+ width: modalWidth,
49
+ height: modalHeight,
50
+ borderRadius: modalBorderRadius = 4,
51
+ zIndex: modalZIndex = 99,
52
+ boxShadow: modalBoxShadow,
53
+ left: modalLeft,
54
+ top: modalTop,
55
+ } = modalProperties || {};
46
56
 
57
+ const {
58
+ left: popOverLeft,
59
+ top: popOverTop,
60
+ size: popOverSize = 10,
61
+ } = arrowProperties || {};
47
62
  // Function to calculate available space
48
63
  const getAvailableSpace = (rect: Rect): AvailableSpace => {
49
64
  const { top, left, bottom, right } = rect;
@@ -196,14 +211,6 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
196
211
  };
197
212
  }, [calculatePosition]);
198
213
 
199
- const {
200
- width: modalWidth,
201
- height: modalHeight,
202
- borderRadius: modalBorderRadius = 4,
203
- zIndex: modalZIndex = 99,
204
- boxShadow: modalBoxShadow,
205
- } = modalProperties || {};
206
-
207
214
  const {
208
215
  width: wrapperWidth = 35,
209
216
  zIndex: wrapperZIndex = 101,
@@ -234,8 +241,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
234
241
  animatedModal: isAnimated,
235
242
  })}
236
243
  style={{
237
- top: `${calculatedModalTop}px`,
238
- left: `${calculatedModalLeft}px`,
244
+ top: `${modalTop ?? calculatedModalTop}px`,
245
+ left: `${modalLeft ?? calculatedModalLeft}px`,
239
246
  }}
240
247
  >
241
248
  {isPopOver && (
@@ -251,6 +258,17 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
251
258
  } ${getArrowClassName()}`}
252
259
  style={{
253
260
  zIndex: `${arrowZIndex}`,
261
+ top: `${popOverTop && popOverTop}px`,
262
+ left: `${popOverLeft && popOverLeft}px`,
263
+ borderWidth: `${
264
+ modalPosition === 'right'
265
+ ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0`
266
+ : modalPosition === 'top'
267
+ ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px`
268
+ : modalPosition === 'left'
269
+ ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px`
270
+ : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`
271
+ }`,
254
272
  }}
255
273
  />
256
274
  )}
@@ -5,6 +5,8 @@ interface ModalDimensions {
5
5
  borderRadius?: number;
6
6
  zIndex?: number;
7
7
  boxShadow?: string;
8
+ left?: number;
9
+ top?: number;
8
10
  }
9
11
  export interface MiniEditModalProps {
10
12
  /**
@@ -94,6 +96,11 @@ export interface MiniEditModalProps {
94
96
  boxShadow?: string;
95
97
  };
96
98
  arrowZIndex?: number;
99
+ arrowProperties?: {
100
+ left?: number;
101
+ top?: number;
102
+ size?: number;
103
+ };
97
104
  overlay?: {
98
105
  isOverlay?: boolean;
99
106
  zIndexOverlay?: number;