pixel-react 1.7.4 → 1.7.6
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.
- package/lib/components/ConditionalDropdown/types.d.ts +1 -1
- package/lib/components/FileDropzone/types.d.ts +12 -4
- package/lib/components/MenuOption/types.d.ts +1 -1
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/index.d.ts +69 -63
- package/lib/index.esm.js +70 -46
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +70 -46
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +4 -0
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +1 -1
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +1 -1
- package/src/components/ConditionalDropdown/types.ts +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +8 -8
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +1 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +4 -3
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +35 -27
- package/src/components/FileDropzone/Dropzone.tsx +3 -0
- package/src/components/FileDropzone/FileDropzone.scss +18 -0
- package/src/components/FileDropzone/FileDropzone.stories.tsx +75 -7
- package/src/components/FileDropzone/FileDropzone.tsx +2 -0
- package/src/components/FileDropzone/RadioFilePreview.tsx +7 -3
- package/src/components/FileDropzone/types.ts +13 -4
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -3
- package/src/components/MenuOption/MenuOption.tsx +9 -2
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/PopUpModal/types.ts +4 -3
- package/src/components/Search/Search.stories.tsx +1 -2
package/package.json
CHANGED
@@ -314,7 +314,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
314
314
|
return (
|
315
315
|
<div className="ff-legend-table-wrapper">
|
316
316
|
<table className="ff-legend-table">
|
317
|
-
<thead>
|
317
|
+
<thead className='ff-legend-table-thead'>
|
318
318
|
<tr>
|
319
319
|
<th className="ff-table-header" style={{ width: tableWidth }}>
|
320
320
|
Name
|
@@ -26,7 +26,7 @@ export interface ConditionalDropdownProps {
|
|
26
26
|
/**
|
27
27
|
* Function storing and updating the inputValue state
|
28
28
|
*/
|
29
|
-
setHashInputValue?:(value: dynamicObject |
|
29
|
+
setHashInputValue?:(value: File |dynamicObject | null) => void;
|
30
30
|
|
31
31
|
/**
|
32
32
|
* List of variables
|
@@ -105,21 +105,21 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
|
|
105
105
|
|
106
106
|
return (
|
107
107
|
<th
|
108
|
-
style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
|
109
108
|
className={classNames('ff-spreadsheet-header', {
|
110
109
|
'ff-spreadsheet-header--selected': selected,
|
111
110
|
})}
|
111
|
+
style={{ minWidth: `${columnWidth}px` }} //Dynamic value, Inline Styling required
|
112
112
|
onClick={handleClick}
|
113
113
|
onContextMenu={contextClick}
|
114
114
|
tabIndex={0}
|
115
115
|
>
|
116
|
-
<div
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
<Typography fontWeight=
|
122
|
-
|
116
|
+
<div
|
117
|
+
onClick={handleClick}
|
118
|
+
onContextMenu={contextClick}
|
119
|
+
tabIndex={0}
|
120
|
+
></div>
|
121
|
+
<Typography fontWeight="medium">
|
122
|
+
{label !== undefined ? label : columnIndexToLabel(column)}
|
123
123
|
</Typography>
|
124
124
|
<div
|
125
125
|
onMouseDown={onMouseDown}
|
@@ -103,14 +103,10 @@ const RowIndicator: Types.RowIndicatorComponent = ({
|
|
103
103
|
|
104
104
|
return (
|
105
105
|
<th
|
106
|
-
style={{
|
107
|
-
height: `${rowHeight}px`,
|
108
|
-
minWidth: '60px',
|
109
|
-
position: 'relative',
|
110
|
-
}} //Dynamic value, Inline Styling required
|
111
106
|
className={classNames('ff-spreadsheet-header', {
|
112
107
|
'ff-spreadsheet-header--selected': selected,
|
113
108
|
})}
|
109
|
+
style={{ height: `${rowHeight}px`, minWidth: '60px' }} //Dynamic value, Inline Styling required
|
114
110
|
onClick={handleClick}
|
115
111
|
onContextMenu={contextClick}
|
116
112
|
tabIndex={0}
|
@@ -93,20 +93,21 @@
|
|
93
93
|
text-align: center;
|
94
94
|
z-index: 1000;
|
95
95
|
position: sticky;
|
96
|
+
top: 0;
|
97
|
+
left: 0;
|
96
98
|
}
|
97
99
|
|
98
100
|
.ff-spreadsheet-corner-header {
|
99
101
|
position: fixed;
|
100
|
-
z-index:
|
102
|
+
z-index: 3000;
|
101
103
|
}
|
102
104
|
|
103
105
|
.ff-spreadsheet-row-header {
|
104
|
-
// position: relative;
|
105
106
|
height: 34px;
|
106
107
|
}
|
107
108
|
|
108
109
|
.corner-header {
|
109
|
-
border:
|
110
|
+
border: 1px solid var(--border-color);
|
110
111
|
background-color: var(--header-background-color);
|
111
112
|
position: absolute;
|
112
113
|
display: flex;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { useEffect, useState } from 'react';
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
2
2
|
import './ExcelToolBar.scss';
|
3
3
|
import MenuOption from '../../MenuOption';
|
4
4
|
import Tooltip from '../../Tooltip';
|
@@ -69,6 +69,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
69
69
|
};
|
70
70
|
|
71
71
|
const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
|
72
|
+
const underLineMenuRef = useRef<HTMLSpanElement>(null);
|
73
|
+
const borderMenuRef = useRef<HTMLSpanElement>(null);
|
72
74
|
|
73
75
|
useEffect(() => {
|
74
76
|
setCellStyle(cell?.style || basicStyle);
|
@@ -315,19 +317,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
315
317
|
onClick={() => setUnderlineType(data, underLine, true)}
|
316
318
|
name={getUnderlineIcon()}
|
317
319
|
/>
|
318
|
-
<
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
320
|
+
<span ref={underLineMenuRef}>
|
321
|
+
<MenuOption
|
322
|
+
targetRef={underLineMenuRef}
|
323
|
+
iconName="arrow_down"
|
324
|
+
zIndex={1000}
|
325
|
+
iconSize={12}
|
326
|
+
options={underlineTypeIcon}
|
327
|
+
tooltipPlacement="top"
|
328
|
+
variant="light"
|
329
|
+
onOptionClick={(e) => {
|
330
|
+
let selectedValue = e.value as string;
|
331
|
+
setUnderlineType(data, selectedValue, true);
|
332
|
+
setUnderLine(selectedValue);
|
333
|
+
}}
|
334
|
+
/>
|
335
|
+
</span>
|
331
336
|
</div>
|
332
337
|
</Tooltip>
|
333
338
|
</div>
|
@@ -391,19 +396,22 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
|
|
391
396
|
onClick={() => setBorderType(data, border, 'black')}
|
392
397
|
name={getBorderIcon()}
|
393
398
|
/>
|
394
|
-
<
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
399
|
+
<span ref={borderMenuRef}>
|
400
|
+
<MenuOption
|
401
|
+
iconName="arrow_down"
|
402
|
+
targetRef={borderMenuRef}
|
403
|
+
iconSize={12}
|
404
|
+
zIndex={1000}
|
405
|
+
options={borderTypeIcon}
|
406
|
+
tooltipPlacement="top"
|
407
|
+
variant="light"
|
408
|
+
onOptionClick={(e) => {
|
409
|
+
let selectedValue = e.value as string;
|
410
|
+
setBorderType(data, selectedValue, 'black');
|
411
|
+
setBorder(selectedValue);
|
412
|
+
}}
|
413
|
+
/>
|
414
|
+
</span>
|
407
415
|
</div>
|
408
416
|
</Tooltip>
|
409
417
|
</div>
|
@@ -24,6 +24,7 @@ const Dropzone: FC<DroppableProps> = ({
|
|
24
24
|
setSelectedFile,
|
25
25
|
handleRemoveFile,
|
26
26
|
isDisable,
|
27
|
+
setShowDrawer,
|
27
28
|
}) => {
|
28
29
|
const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
|
29
30
|
return (
|
@@ -42,6 +43,8 @@ const Dropzone: FC<DroppableProps> = ({
|
|
42
43
|
onFileRemoveClick={handleRemoveFile}
|
43
44
|
onFileReplaceClick={setSelectedFile}
|
44
45
|
setSelectedFile={setSelectedFile}
|
46
|
+
selectedRadioOption={selectedRadioOption}
|
47
|
+
setShowDrawer={setShowDrawer}
|
45
48
|
/>
|
46
49
|
) : (
|
47
50
|
<>
|
@@ -4,6 +4,12 @@
|
|
4
4
|
gap: $gap;
|
5
5
|
}
|
6
6
|
|
7
|
+
@mixin flex-center {
|
8
|
+
display: flex;
|
9
|
+
align-items: center;
|
10
|
+
justify-content: center;
|
11
|
+
}
|
12
|
+
|
7
13
|
@mixin center {
|
8
14
|
display: grid;
|
9
15
|
place-items: center;
|
@@ -160,4 +166,16 @@
|
|
160
166
|
.ff-disable-file-dropzone-wrapper {
|
161
167
|
opacity: 0.5;
|
162
168
|
cursor: not-allowed;
|
169
|
+
}
|
170
|
+
.footer_basic_button {
|
171
|
+
width: 100%;
|
172
|
+
position: absolute;
|
173
|
+
bottom: 0;
|
174
|
+
right: 0;
|
175
|
+
@include flex-center;
|
176
|
+
justify-content: flex-end;
|
177
|
+
gap: 16px;
|
178
|
+
border-top: 1px solid var(--border-color);
|
179
|
+
padding: 4px 8px;
|
180
|
+
background-color: var(--primary-icon-color);
|
163
181
|
}
|
@@ -5,8 +5,10 @@ import Toaster from '../Toast';
|
|
5
5
|
import { useState } from 'react';
|
6
6
|
import { RadioOption } from './types';
|
7
7
|
import Drawer from '../Drawer/Drawer';
|
8
|
-
import
|
8
|
+
import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
|
9
9
|
import './FileDropzone.scss';
|
10
|
+
import { DynamicObj } from '../CreateVariable/types';
|
11
|
+
import Button from '../Button';
|
10
12
|
|
11
13
|
const meta: Meta<typeof FileDropzone> = {
|
12
14
|
title: 'Components/FileDropzone',
|
@@ -107,8 +109,12 @@ export const WithRadioButton: Story = {
|
|
107
109
|
|
108
110
|
const [selectedRadioOption, setSelectedRadioOption] =
|
109
111
|
useState<RadioOption>();
|
110
|
-
const [selectedFile, setSelectedFile] = useState<File | null>(
|
111
|
-
|
112
|
+
const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
|
113
|
+
null
|
114
|
+
);
|
115
|
+
const [testDataSelectedFile, setTestDataSelectedFile] = useState<
|
116
|
+
DynamicObj | File | null
|
117
|
+
>(null);
|
112
118
|
|
113
119
|
const drawerArgs = {
|
114
120
|
primaryButtonProps: {
|
@@ -156,6 +162,42 @@ export const WithRadioButton: Story = {
|
|
156
162
|
}, 2000);
|
157
163
|
};
|
158
164
|
|
165
|
+
const testData = [
|
166
|
+
{
|
167
|
+
_id: '1',
|
168
|
+
name: 'File1.txt',
|
169
|
+
actualPath: '/documents/File1.txt',
|
170
|
+
searchKey: 'file1',
|
171
|
+
parentId: 'root',
|
172
|
+
},
|
173
|
+
{
|
174
|
+
_id: '2',
|
175
|
+
name: 'File2.doc',
|
176
|
+
actualPath: '/documents/File2.doc',
|
177
|
+
searchKey: 'file2',
|
178
|
+
parentId: 'root',
|
179
|
+
},
|
180
|
+
{
|
181
|
+
_id: '3',
|
182
|
+
name: 'Image1.png',
|
183
|
+
actualPath: '/images/Image1.png',
|
184
|
+
searchKey: 'image1',
|
185
|
+
parentId: 'folder1',
|
186
|
+
},
|
187
|
+
{
|
188
|
+
_id: '4',
|
189
|
+
name: 'Presentation.ppt',
|
190
|
+
actualPath: '/presentations/Presentation.ppt',
|
191
|
+
searchKey: 'presentation',
|
192
|
+
parentId: 'folder2',
|
193
|
+
},
|
194
|
+
];
|
195
|
+
|
196
|
+
const handleSaveButton = () => {
|
197
|
+
setSelectedFile(testDataSelectedFile);
|
198
|
+
setShowModal(false);
|
199
|
+
};
|
200
|
+
|
159
201
|
return (
|
160
202
|
<>
|
161
203
|
<FileDropzone
|
@@ -176,6 +218,7 @@ export const WithRadioButton: Story = {
|
|
176
218
|
selectedFile={selectedFile}
|
177
219
|
handleFileChange={handleFileChange}
|
178
220
|
handleRemoveFile={handleRemoveFile}
|
221
|
+
setShowDrawer={setShowModal}
|
179
222
|
/>
|
180
223
|
{showToaster && (
|
181
224
|
<Toaster
|
@@ -185,18 +228,43 @@ export const WithRadioButton: Story = {
|
|
185
228
|
toastMessage={'Max 5 files can be uploaded'}
|
186
229
|
/>
|
187
230
|
)}
|
188
|
-
{selectedRadioOption?.value === '
|
231
|
+
{selectedRadioOption?.value === 'Test Data' && (
|
189
232
|
<Drawer
|
190
233
|
{...drawerArgs}
|
191
234
|
isOpen={showModal}
|
192
235
|
onClose={() => setShowModal(false)}
|
193
|
-
isFooterRequired={
|
236
|
+
isFooterRequired={false}
|
194
237
|
_isExpanded={false}
|
195
238
|
size="small"
|
239
|
+
|
196
240
|
>
|
197
|
-
<
|
241
|
+
<ConditionalDropdown
|
242
|
+
label="Select Path Using #"
|
243
|
+
placeholder="Enter # to search files"
|
244
|
+
isHash
|
245
|
+
dataFiles={testData}
|
246
|
+
dropdownWidth="auto"
|
247
|
+
setHashInputValue={setTestDataSelectedFile}
|
248
|
+
/>
|
249
|
+
<div className="footer_basic_button">
|
250
|
+
<Button
|
251
|
+
type="button"
|
252
|
+
variant="secondary"
|
253
|
+
size="small"
|
254
|
+
onClick={() => setShowModal(false)}
|
255
|
+
label={'Cancel'}
|
256
|
+
/>
|
257
|
+
|
258
|
+
<Button
|
259
|
+
type={'button'}
|
260
|
+
variant="primary"
|
261
|
+
size="small"
|
262
|
+
label={'Save'}
|
263
|
+
onClick={handleSaveButton}
|
264
|
+
/>
|
265
|
+
</div>
|
198
266
|
</Drawer>
|
199
|
-
}
|
267
|
+
)}
|
200
268
|
</>
|
201
269
|
);
|
202
270
|
},
|
@@ -38,6 +38,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
38
38
|
handleRemoveFile,
|
39
39
|
isApiResponseError = false,
|
40
40
|
isDisable = false,
|
41
|
+
setShowDrawer,
|
41
42
|
}) => {
|
42
43
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
43
44
|
const {
|
@@ -131,6 +132,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
|
|
131
132
|
handleRemoveFile={handleRemoveFile}
|
132
133
|
setSelectedFile={setSelectedFile}
|
133
134
|
isDisable={isDisable}
|
135
|
+
setShowDrawer={setShowDrawer}
|
134
136
|
/>
|
135
137
|
|
136
138
|
{isWebServiceFileDropZone && (
|
@@ -8,14 +8,18 @@ import { useRef } from 'react';
|
|
8
8
|
const RadioFilePreview: React.FC<RadioFilePreviewProps> = ({
|
9
9
|
selectedFile,
|
10
10
|
onFileRemoveClick,
|
11
|
-
onFileReplaceClick
|
11
|
+
onFileReplaceClick,
|
12
|
+
selectedRadioOption,
|
13
|
+
setShowDrawer,
|
12
14
|
}) => {
|
13
15
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
14
16
|
|
15
17
|
const handleReplaceClick = () => {
|
16
|
-
if (
|
17
|
-
|
18
|
+
if (selectedRadioOption?.value === 'Test Data') {
|
19
|
+
setShowDrawer?.(true);
|
20
|
+
return;
|
18
21
|
}
|
22
|
+
fileInputRef.current?.click();
|
19
23
|
};
|
20
24
|
|
21
25
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
+
import { DynamicObj } from '../CreateVariable/types';
|
2
3
|
export interface RadioOption {
|
3
4
|
label: string;
|
4
5
|
value: string;
|
@@ -93,12 +94,12 @@ export interface FileDropzoneProps {
|
|
93
94
|
/**
|
94
95
|
* Its the File Name of File Selected from Local File.
|
95
96
|
**/
|
96
|
-
setSelectedFile?: (file: File | null) => void;
|
97
|
+
setSelectedFile?: (file: File | DynamicObj | null) => void;
|
97
98
|
|
98
99
|
/**
|
99
100
|
* Its the File Name of File Selected from Local File.
|
100
101
|
**/
|
101
|
-
selectedFile?: File | null;
|
102
|
+
selectedFile?: File | DynamicObj | null;
|
102
103
|
|
103
104
|
/**
|
104
105
|
* Its the function which updates the Selected file from Local Directory.
|
@@ -120,6 +121,11 @@ export interface FileDropzoneProps {
|
|
120
121
|
**/
|
121
122
|
isDisable?: boolean;
|
122
123
|
|
124
|
+
/**
|
125
|
+
* Its the boolean value setted when the replace is clicked for TestData radio option .
|
126
|
+
**/
|
127
|
+
setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
|
128
|
+
|
123
129
|
}
|
124
130
|
export interface FileState {
|
125
131
|
accepted: File[];
|
@@ -176,11 +182,12 @@ export interface DroppableProps {
|
|
176
182
|
selectedRadioOption?: Option,
|
177
183
|
radioOptions?: RadioOption[],
|
178
184
|
handleOptionChange?: (option: RadioOption)=> void,
|
179
|
-
selectedFile?: File | null,
|
180
|
-
setSelectedFile?: (file: File | null) => void;
|
185
|
+
selectedFile?: File | DynamicObj | null,
|
186
|
+
setSelectedFile?: (file: File | DynamicObj | null) => void;
|
181
187
|
handleFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
182
188
|
handleRemoveFile?: () => void;
|
183
189
|
isDisable?: boolean;
|
190
|
+
setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void;
|
184
191
|
}
|
185
192
|
|
186
193
|
export interface FilePreviewProps {
|
@@ -196,4 +203,6 @@ export interface RadioFilePreviewProps {
|
|
196
203
|
onFileRemoveClick?: () => void;
|
197
204
|
onFileReplaceClick?: (file: File | null) => void;
|
198
205
|
setSelectedFile?: (file: File | null) => void;
|
206
|
+
selectedRadioOption?: Option,
|
207
|
+
setShowDrawer?: (value: boolean | ((prevState: boolean) => boolean)) => void
|
199
208
|
}
|
@@ -135,13 +135,12 @@ export const MenuOptionBottom: Story = {
|
|
135
135
|
dropdownPlacement: 'down',
|
136
136
|
},
|
137
137
|
render: (args) => {
|
138
|
-
const moreRef = useRef<HTMLDivElement>(null);
|
139
138
|
return (
|
140
|
-
<div
|
139
|
+
<div id="more">
|
141
140
|
<MenuOption
|
142
141
|
{...args}
|
143
142
|
options={options}
|
144
|
-
targetRef={
|
143
|
+
targetRef={'more'}
|
145
144
|
onOptionClick={handleOptionClick}
|
146
145
|
/>
|
147
146
|
</div>
|
@@ -153,9 +153,15 @@ const MenuOption = ({
|
|
153
153
|
};
|
154
154
|
|
155
155
|
const calculateDims = () => {
|
156
|
-
|
157
|
-
|
156
|
+
let targetElement: HTMLElement | null = null;
|
157
|
+
if (typeof targetRef === 'string') {
|
158
|
+
targetElement = document.getElementById(targetRef);
|
159
|
+
} else if (targetRef && targetRef.current) {
|
160
|
+
targetElement = targetRef.current;
|
161
|
+
}
|
158
162
|
|
163
|
+
if (targetElement) {
|
164
|
+
const rect = targetElement.getBoundingClientRect();
|
159
165
|
setMenuPosition({
|
160
166
|
top: rect.top + window.scrollY,
|
161
167
|
left: rect.left + window.scrollX,
|
@@ -164,6 +170,7 @@ const MenuOption = ({
|
|
164
170
|
});
|
165
171
|
}
|
166
172
|
};
|
173
|
+
|
167
174
|
return (
|
168
175
|
<div className="ff-menu-option-container" ref={menuRef}>
|
169
176
|
<Tooltip title={tooltipTitle} placement={tooltipPlacement}>
|
@@ -5,12 +5,13 @@ export interface PopUpModalProps {
|
|
5
5
|
titleMessage: string;
|
6
6
|
subTitleMessage?: string;
|
7
7
|
iconName: string;
|
8
|
-
modalMessage: string;
|
8
|
+
modalMessage: string | React.ReactNode;
|
9
|
+
secondaryMessage?: string | React.ReactNode;
|
9
10
|
firstButtonLabel?: string;
|
10
11
|
secondButtonLabel: string;
|
11
12
|
buttonVariant: any;
|
12
13
|
border: string;
|
13
|
-
|
14
|
+
popupWidth?: string;
|
14
15
|
colorForTitleMessage?: string;
|
15
|
-
footerContent?:React.ReactNode;
|
16
|
+
footerContent?: React.ReactNode;
|
16
17
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
2
2
|
import Search from './Search';
|
3
|
-
import React,{ useState } from 'react';
|
3
|
+
import React, { useState } from 'react';
|
4
4
|
const meta: Meta<typeof Search> = {
|
5
5
|
title: 'Components/Search',
|
6
6
|
component: Search,
|
@@ -17,7 +17,6 @@ export const Default: Story = {
|
|
17
17
|
const [searchValue, setSearchValue] = useState('');
|
18
18
|
|
19
19
|
const handleSearch = (value: string) => {
|
20
|
-
alert(`Searching for: ${value}`);
|
21
20
|
setSearchValue(value);
|
22
21
|
};
|
23
22
|
|