@seeqdev/qomponents 0.0.170 → 0.0.172

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 (22) hide show
  1. package/README.md +135 -135
  2. package/dist/FontCustom.woff +0 -0
  3. package/dist/FontCustom.woff2 +0 -0
  4. package/dist/example/.eslintrc.cjs +14 -14
  5. package/dist/example/README.md +33 -33
  6. package/dist/example/index.html +13 -13
  7. package/dist/example/package.json +32 -32
  8. package/dist/example/src/ComplexSelectExample.tsx +81 -81
  9. package/dist/example/src/Example.tsx +638 -638
  10. package/dist/example/src/index.css +103 -103
  11. package/dist/example/src/main.tsx +10 -10
  12. package/dist/example/src/vite-env.d.ts +1 -1
  13. package/dist/example/tsconfig.json +33 -33
  14. package/dist/example/tsconfig.node.json +12 -12
  15. package/dist/example/vite.config.ts +13 -13
  16. package/dist/index.esm.js +14 -14
  17. package/dist/index.esm.js.map +1 -1
  18. package/dist/index.js +14 -14
  19. package/dist/index.js.map +1 -1
  20. package/dist/src/Tabs/Tabs.types.d.ts +5 -0
  21. package/dist/styles.css +3868 -3872
  22. package/package.json +89 -89
package/dist/example/src/Example.tsx CHANGED
@@ -1,638 +1,638 @@
1
- import React from 'react';
2
- import {
3
- Button,
4
- ButtonWithDropdown,
5
- ButtonWithPopover,
6
- Checkbox,
7
- Icon,
8
- Modal,
9
- QTip,
10
- Select,
11
- Tabs,
12
- TextArea,
13
- TextField,
14
- ToolbarButton,
15
- Accordion,
16
- Alert,
17
- ButtonGroup,
18
- Carousel,
19
- Collapse,
20
- InputGroup,
21
- ProgressBar,
22
- SeeqActionDropdown,
23
- Slider,
24
- } from '@seeqdev/qomponents';
25
- import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
26
-
27
- const availableThemes = [
28
- { display: 'Analysis', value: 'color_analysis' },
29
- { display: 'Topic', value: 'color_topic' },
30
- { display: 'DataLab', value: 'color_datalab' },
31
- ];
32
-
33
- const options = [
34
- { value: '1', label: 'Beginner' },
35
- { value: '2', label: 'Advanced' },
36
- { value: '3', label: 'Expert' },
37
- ];
38
-
39
- const Trigger = ({ label }: { label: string }) => (
40
- <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
41
- <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
42
- {label}
43
- </div>
44
- );
45
-
46
- const accordionItems = [
47
- {
48
- value: 'phone',
49
- id: 'phone',
50
- itemTestId: 'phonecall',
51
- trigger: <Trigger label="Phone" />,
52
- content: (
53
- <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
54
- If you need to reach us, please call us at 555-555-5555.
55
- </div>
56
- ),
57
- },
58
- {
59
- value: 'email',
60
- id: 'email',
61
- itemTestId: 'email',
62
- trigger: <Trigger label="Email" />,
63
- content: (
64
- <div className="p-2 text-[0.8125rem] dark:text-sq-white">
65
- If you need to reach us, please mail example@seeqtest.com
66
- </div>
67
- ),
68
- },
69
- {
70
- value: 'address',
71
- id: 'address',
72
- itemTestId: 'address',
73
- trigger: <Trigger label="Address" />,
74
- content: (
75
- <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
76
- If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
77
- </div>
78
- ),
79
- },
80
- ];
81
-
82
- const renderData = (text: string) => (
83
- <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
84
- <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
85
- </div>
86
- );
87
-
88
- const tabsList = [
89
- {
90
- id: 'plugins',
91
- label: 'Plugins',
92
- icon: 'fc-data',
93
- content: renderData("Here's where you can find all the plugins you need. Enjoy!"),
94
- },
95
- {
96
- id: 'addons',
97
- label: 'Addons',
98
- icon: 'fc-gears-2',
99
- content: renderData("Here's where you can find all the addons you need. Enjoy!"),
100
- },
101
- {
102
- id: 'shelf',
103
- label: 'Shelf',
104
- icon: 'fc-workbook-lock',
105
- content: renderData("Here's where you can find all the private documents you need. Enjoy!"),
106
- },
107
- ];
108
-
109
- function Example() {
110
- /**
111
- * Theming is supported "out of the box". To apply a theme wrap your addOn in a div and assign the class that
112
- * matched the desired theme:
113
- * - color_analysis for Analysis styled qomponents (green)
114
- * - color_topic for Topic styled qomponents (blue)
115
- * - DataLab for DataLab styled qomponents (orange)
116
- */
117
- const [theme, setTheme] = React.useState('color_analysis');
118
- /**
119
- * qomponents also support tw-dark. To render qomponents using tw-dark wrap your addOn in a div and assign the
120
- * class "tw-dark" for dark-mode or "tw-light" for light mode.
121
- */
122
- const [mode, setMode] = React.useState('tw-light');
123
-
124
- const [btGroupType, setBtGroupType] = React.useState('left');
125
-
126
- /**
127
- * This example uses controlled inputs (https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/)
128
- */
129
- const [textFieldValue, setTextFieldValue] = React.useState('');
130
- const [textAreaValue, setTextAreaValue] = React.useState('');
131
- const [selectValue, setSelectValue] = React.useState();
132
- const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
133
- const [alertDisplay, setAlertDisplay] = React.useState('success');
134
- const [easeOfUse, setEaseOfUse] = React.useState(false);
135
- const [lookAndFeel, setLookAndFeel] = React.useState(false);
136
- const [speed, setSpeed] = React.useState(false);
137
- const [help, setHelp] = React.useState('phone');
138
- const [openDropdown, setOpenDropdown] = React.useState('');
139
- const [openPopver, setOpenPopover] = React.useState('');
140
- const [modalOpen, setModalOpen] = React.useState(false);
141
- const [modalTitle, setModalTitle] = React.useState('Modal Title');
142
- const [activeTab, setActiveTab] = React.useState('plugins');
143
- const [collapseVisible, setCollapseVisible] = React.useState(false);
144
- const [inputGroupValue, setInputGroupValue] = React.useState('');
145
- const [sliderValue, setSliderValue] = React.useState<number>(50);
146
-
147
- return (
148
- // outer-wrapper div that assigns the mode (tw-dark or light) as well as the theme
149
- <div className={`backdrop ${mode} ${theme}`}>
150
- {/*add the QTip component at the very top level or your application to ensure your tooltips display as expected!*/}
151
- <QTip />
152
- <div className="flex-container">
153
- <div className="scroll-container">
154
- <div className="header">qomponents - form example</div>
155
- <div>Use this example to see qomponents in actions.</div>
156
- No libraries other than Seeq's qomponents (and of course React) are used to create this example, however
157
- minimal CSS is used to create an appealing form - you can find all that CSS in index.css.
158
- <p className="mb-10">
159
- <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
160
- available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use
161
- this property to provide only width, margins and padding. This will ensure for a smooth upgrade experience
162
- when Seeq's look and feel changes. <br />
163
- Tip: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
164
- TextArea, as well as Select.
165
- </p>
166
- <p className="mb-10">
167
- Using FontAwesome? You can pass FontAwesome Icons to the qomponent Icon component
168
- <Icon icon="fa-regular fa-face-smile" extraClassNames="ml-10" />
169
- </p>
170
- <div className="mb-10">
171
- <a
172
- href="#"
173
- onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
174
- // this is how you display a q-tip for an element that doesn't come with an "out-of the box" tooltip
175
- // property:
176
- data-qtip-text="Toggle Dark/Light Mode."
177
- // the position is optional and defaults to top
178
- data-qtip-position="bottom">
179
- <Icon icon="fc-sun" extraClassNames="mr-10" />
180
- Click to toggle to {mode === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
181
- </a>
182
- </div>
183
- <div className="formRow">
184
- <div className="labelWidth">Select theme:</div>
185
- {availableThemes.map((t) => (
186
- <Checkbox
187
- key={t.value}
188
- type="radio"
189
- checked={theme === t.value}
190
- value={t.value}
191
- label={t.display}
192
- onChange={(e) => setTheme(e.target.value)}
193
- extraClassNames="mr-10"
194
- />
195
- ))}
196
- </div>
197
- <div className="formRow">
198
- <div className="labelWidth">AddOn Name</div>
199
- <TextField
200
- placeholder="you must enter a name"
201
- extraClassNames="formElementWidth"
202
- value={textFieldValue}
203
- showError={textFieldValue === ''}
204
- onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextFieldValue(e.target.value)}
205
- />
206
- </div>
207
- <div className="formRow">
208
- <div className="labelWidth">Description</div>
209
- <TextArea
210
- value={textAreaValue}
211
- onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
212
- extraClassNames="formElementWidth"
213
- placeholder="provide some text here"
214
- />
215
- </div>
216
- <div className="formRow">
217
- <div className="labelWidth">Goals</div>
218
- <div className="formColumn">
219
- <div>
220
- <Checkbox checked={easeOfUse} label="Ease of Use" onChange={() => setEaseOfUse(!easeOfUse)} />
221
- <Checkbox
222
- checked={lookAndFeel}
223
- label="Improved Look & Feel"
224
- onChange={() => setLookAndFeel(!lookAndFeel)}
225
- />
226
- <Checkbox checked={speed} label="Speedy Development" onChange={() => setSpeed(!speed)} />
227
- </div>
228
- </div>
229
- </div>
230
- <div className="formRow">
231
- <div className="labelWidth">Level</div>
232
- <Select
233
- value={selectValue}
234
- extraClassNames="formElementWidth"
235
- onChange={(selectValue) => setSelectValue(selectValue)}
236
- options={options}
237
- placeholder="please choose"
238
- />
239
- </div>
240
- <div className="formRow">
241
- <div className="labelWidth">Advanced</div>
242
- <ComplexSelectExample
243
- value={complexSelectedValue}
244
- onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
245
- />
246
- </div>
247
- <div className="formRow">
248
- <div className="labelWidth">Website tools</div>
249
- <div className="formElementWidth border rounded-sm">
250
- <Tabs
251
- stretchTabs={true}
252
- activeTab={activeTab}
253
- onTabSelect={setActiveTab}
254
- defaultActiveTab="data"
255
- tabs={tabsList}
256
- />
257
- </div>
258
- </div>
259
- <div className="formRow">
260
- <div className="labelWidth">Get help</div>
261
- <div className="formElementWidth border rounded-sm">
262
- <Accordion
263
- accordionItems={accordionItems}
264
- value={help}
265
- testId="basic-accordion1"
266
- onItemSelect={(value) => setHelp(value)}
267
- />
268
- </div>
269
- </div>
270
- <div className="formRow">
271
- <div className="labelWidth">Tools</div>
272
- <div className="formElementWidth formRow border rounded-sm p-4 flex justify-center">
273
- <ToolbarButton
274
- icon="fc-y-axis"
275
- label="Analyzer"
276
- testId="basic-analyzer"
277
- tooltipText="Analize data from any csv document"
278
- hasArrow
279
- tooltipOptions={{ position: 'top', delay: 0 }}
280
- isHtmlTooltip={false}
281
- popoverContent={
282
- <div className="text-sm dark:text-white">
283
- <p className="p-2">Select file from your computer or google drive</p>
284
- <Button type="button" label="Click to select file" />
285
- </div>
286
- }
287
- />
288
- <ToolbarButton
289
- icon="fc-sun"
290
- label={mode === 'light' ? 'Dark Mode' : 'Light Mode'}
291
- testId="basic-toggler"
292
- isActive={mode === 'tw-light'}
293
- tooltipText="Toggle light and dark modes"
294
- onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
295
- tooltipOptions={{ position: 'top', delay: 0 }}
296
- isHtmlTooltip={false}
297
- />
298
- <ToolbarButton
299
- icon="fc-marker"
300
- label="Language"
301
- testId="basic-language-changer"
302
- tooltipText="Disabled toolbar to change website language"
303
- tooltipOptions={{ position: 'top', delay: 0 }}
304
- disabled
305
- />
306
- </div>
307
- </div>
308
- <div className="formRow">
309
- <div className="labelWidth">Take action</div>
310
- <div className="formElementWidth">
311
- <ButtonWithDropdown
312
- onOpenChange={(isOpen) => setOpenDropdown(isOpen ? 'dropdown-1' : '')}
313
- isOpen={openDropdown === 'dropdown-1'}
314
- triggerIcon={
315
- <Icon
316
- icon="fc-more"
317
- type="text"
318
- extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white w-[18px]"
319
- />
320
- }
321
- containerTestId="basic-dropdown1"
322
- tooltip="See actions to take for plugins"
323
- tooltipDelay={0}
324
- hasArrow
325
- tooltipPlacement="top"
326
- dropdownItems={[
327
- { label: 'Create', icon: 'fc-add-row', onClick: () => setOpenDropdown('') },
328
- { label: 'Update', icon: 'fc-asset-tree', onClick: () => setOpenDropdown(''), hasDivider: true },
329
- {
330
- label: 'Sort',
331
- icon: 'fc-search-power',
332
- onClick: () => setOpenDropdown(''),
333
- subMenuItems: [
334
- { label: 'Ascending', iconClass: 'fc-arrow_up', onClick: () => setOpenDropdown('') },
335
- { label: 'Descending', iconClass: 'fc-arrow_down', onClick: () => setOpenDropdown('') },
336
- ],
337
- },
338
- { label: 'Delete', icon: 'fc-delete', onClick: () => setOpenDropdown('') },
339
- ]}
340
- />
341
- </div>
342
- </div>
343
- <div className="formRow mt-4">
344
- <div className="labelWidth">More information</div>
345
- <div className="formElementWidth">
346
- <ButtonWithPopover
347
- trigger={<Icon type="text" icon="fc-circle_info" />}
348
- containerTestId="basic-popover-1"
349
- isOpen={openPopver === 'basic-popover-1'}
350
- onOpenChange={(isOpen) => setOpenPopover(isOpen ? 'basic-popover-1' : '')}
351
- isHoverEnabled={false}
352
- align="start"
353
- tooltipPlacement="top"
354
- hasArrow
355
- isHtmlTooltip={false}>
356
- <div className="text-sm dark:text-white w-72 p-4">
357
- <p className="font-bold">What are plugins?</p>
358
- Plugins are modular software components that extend the functionality of an application. They allow
359
- users to add new features or customize existing ones. Plugins can be easily integrated into an
360
- application and provide a way to enhance its capabilities without modifying the core codebase.Plugins
361
- are modular software components that extend the functionality of an application.
362
- </div>
363
- </ButtonWithPopover>
364
- </div>
365
- </div>
366
- <div className="formRow mt-4">
367
- <div className="labelWidth">Accept terms</div>
368
- <div className="formElementWidth">
369
- <Button
370
- onClick={() => {
371
- setModalOpen(true);
372
- }}
373
- label="View terms of use"
374
- />
375
- <Modal
376
- open={modalOpen}
377
- onClose={() => setModalOpen(false)}
378
- title="Terms of use"
379
- titleIcon="fc-circle_info"
380
- isTitleEditable
381
- onTitleChanged={(event) => setModalTitle(event.target.value)}
382
- hideCloseIcon={false}
383
- size="lg"
384
- customButton={true}
385
- customButtonLabel="Back">
386
- <div>
387
- <p>
388
- By using this website, you agree to the following terms of use: Lorem ipsum dolor sit amet,
389
- consectetur adipiscing elit. Sed euismod, justo id aliquet aliquam, elit enim tincidunt mauris, nec
390
- aliquam nunc elit vitae nunc. Sed vitae fringilla mauris. Nulla facilisi. Sed auctor, nunc vel
391
- aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc. Sed auctor, nunc vel
392
- aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc.
393
- </p>
394
- </div>
395
- </Modal>
396
- </div>
397
- </div>
398
- <div className="formRow mt-8">
399
- <div className="labelWidth">Button example</div>
400
- <div className="formElementWidth">
401
- <div className="flex gap-2 mb-4">
402
- <Button label="Show Success" onClick={() => setAlertDisplay('success')} variant="theme" />
403
- <Button label="Show Cancel" onClick={() => setAlertDisplay('cancel')} variant="danger" />
404
- <Button label="Show Info" onClick={() => setAlertDisplay('info')} variant="outline" />
405
- </div>
406
- </div>
407
- </div>
408
- {/* Alert Example: Show info, success, or warning based on form submission */}
409
- <div className="formRow mt-8">
410
- <div className="labelWidth">Alert example</div>
411
- <div className="formElementWidth">
412
- {alertDisplay === 'success' && (
413
- <Alert variant="theme" testId="alert-success" dismissible>
414
- <div className="font-bold">Submission Successful</div>
415
- <div>
416
- Your add-on details have been submitted successfully. Thank you for contributing to the Seeq Add-on
417
- ecosystem!
418
- </div>
419
- </Alert>
420
- )}
421
- {alertDisplay === 'cancel' && (
422
- <Alert variant="warning" testId="alert-cancel" dismissible>
423
- <div className="font-bold">Submission Cancelled</div>
424
- <div>You have cancelled the submission. No changes were saved.</div>
425
- </Alert>
426
- )}
427
- {alertDisplay === 'info' && (
428
- <Alert variant="gray" testId="alert-info" dismissible>
429
- <div className="font-bold">Ready to Submit</div>
430
- <div>Fill out the form and click Submit to add your new add-on to Seeq.</div>
431
- </Alert>
432
- )}
433
- </div>
434
- </div>
435
- {/* ButtonGroup Example: Show and select a display type */}
436
- <div className="formRow mt-8">
437
- <div className="labelWidth">ButtonGroup example</div>
438
- <div className="formElementWidth">
439
- <ButtonGroup
440
- buttons={[
441
- {
442
- variant: 'button',
443
- buttonProps: {
444
- label: 'Left',
445
- value: 'left',
446
- variant: 'outline',
447
- isActive: btGroupType === 'left',
448
- },
449
- },
450
- {
451
- variant: 'button',
452
- buttonProps: {
453
- label: 'Center',
454
- value: 'center',
455
- variant: 'outline',
456
- isActive: btGroupType === 'center',
457
- },
458
- },
459
- {
460
- variant: 'button',
461
- buttonProps: {
462
- label: 'Right',
463
- value: 'right',
464
- variant: 'outline',
465
- isActive: btGroupType === 'right',
466
- },
467
- },
468
- ]}
469
- onChange={(type) => setBtGroupType(type)}
470
- extraClassNames="mb-4"
471
- />
472
- </div>
473
- </div>
474
- {/* Carousel Example: Show a set of images with captions, allow navigation */}
475
- <div className="formRow mt-8 h-60">
476
- <div className="labelWidth">Carousel example</div>
477
- <div className="formElementWidth">
478
- <Carousel
479
- carouselItems={[
480
- <div className="flex flex-col items-center justify-center p-4" key="slide1">
481
- <img
482
- src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&h=250&q=80"
483
- alt="Mountains"
484
- className="w-48 h-32 object-cover rounded-md mb-2"
485
- />
486
- <div className="font-bold">Explore the Mountains</div>
487
- <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
488
- </div>,
489
- <div className="flex flex-col items-center justify-center p-4" key="slide2">
490
- <img
491
- src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&h=250&q=80"
492
- alt="City"
493
- className="w-48 h-32 object-cover rounded-md mb-2"
494
- />
495
- <div className="font-bold">City Lights</div>
496
- <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
497
- </div>,
498
- <div className="flex flex-col items-center justify-center p-4" key="slide3">
499
- <img
500
- src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&h=250&q=80"
501
- alt="Beach"
502
- className="w-48 h-32 object-cover rounded-md mb-2"
503
- />
504
- <div className="font-bold">Relax at the Beach</div>
505
- <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
506
- </div>,
507
- ]}
508
- showArrows={false}
509
- continuous={true}
510
- showIndicators
511
- autoSlide={false}
512
- testId="carousel-example"
513
- extraClassNames="rounded-md shadow-sm mb-4"
514
- />
515
- </div>
516
- </div>
517
- {/* Collapse Example: Expand/collapse a section for additional details */}
518
- <div className="formRow mt-8">
519
- <div className="labelWidth">Collapse example</div>
520
- <div className="formElementWidth">
521
- <Button
522
- label={collapseVisible ? 'Hide advanced options' : 'Show advanced options'}
523
- variant="outline"
524
- onClick={() => setCollapseVisible((v) => !v)}
525
- extraClassNames="mb-2"
526
- />
527
- <Collapse isVisible={collapseVisible}>
528
- <div className="p-4 mt-2 bg-transparent rounded-md">
529
- <div className="font-bold">Advanced Settings</div>
530
- <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
531
- <Checkbox label="Enable beta features" />
532
- <Checkbox label="Show debug info" />
533
- </div>
534
- </Collapse>
535
- </div>
536
- </div>
537
- {/* SeeqActionDropdown Example: Contextual actions for a document */}
538
- <div className="formRow mt-8">
539
- <div className="labelWidth">SeeqActionDropdown example</div>
540
- <div className="formElementWidth">
541
- <SeeqActionDropdown
542
- seeqActionDropdownItems={[
543
- {
544
- display: 'Edit Document',
545
- icon: 'fc-edit',
546
- action: () => alert('Edit action triggered!'),
547
- text: 'Edit the selected document',
548
- enabled: true,
549
- },
550
- {
551
- display: 'Share',
552
- icon: 'fc-share',
553
- action: () => alert('Share action triggered!'),
554
- text: 'Share the selected document',
555
- enabled: true,
556
- },
557
- {
558
- display: 'Delete',
559
- icon: 'fc-delete',
560
- action: () => alert('Delete action triggered!'),
561
- text: 'Delete the selected document',
562
- enabled: true,
563
- },
564
- ]}
565
- trigger={<Button label="Actions" icon="fc-more" variant="outline" extraClassNames="w-32" />}
566
- variant="create-workbench"
567
- id="seeq-action-dropdown-example"
568
- />
569
- </div>
570
- </div>
571
- {/* InputGroup Example: Input with edit and delete icon buttons */}
572
- <div className="formRow mt-8">
573
- <div className="labelWidth">InputGroup example</div>
574
- <div className="formElementWidth">
575
- <InputGroup
576
- value={inputGroupValue}
577
- onChange={(e) => setInputGroupValue(e.target.value)}
578
- placeholder="Enter item name"
579
- append={[
580
- {
581
- variant: 'button',
582
- buttonProps: {
583
- icon: 'fc-edit',
584
- variant: 'outline',
585
- onClick: () => setInputGroupValue('Edit clicked'),
586
- },
587
- },
588
- {
589
- variant: 'button',
590
- buttonProps: {
591
- icon: 'fc-delete',
592
- variant: 'outline',
593
- onClick: () => setInputGroupValue('Delete clicked'),
594
- },
595
- },
596
- ]}
597
- extraClassNames="flex-1"
598
- />
599
- </div>
600
- </div>
601
- {/* ProgressBar Example: Show progress of a task */}
602
- <div className="formRow mt-8">
603
- <div className="labelWidth">ProgressBar example</div>
604
- <div className="formElementWidth flex flex-col items-start gap-1">
605
- <ProgressBar
606
- values={[
607
- { value: 85, label: 'Uploading orders', color: '#0491c2' },
608
- { value: 90, label: 'Processing invoices', color: '#f59e42' },
609
- ]}
610
- max={200}
611
- containerExtraClasses="w-full"
612
- />
613
- <span className="text-xs text-[#0491c2]">Uploading orders... 85%</span>
614
- <span className="text-xs text-[#f59e42]">Processing invoices... 90%</span>
615
- </div>
616
- </div>
617
- {/* Slider Example: Adjust a value with immediate feedback */}
618
- <div className="formRow mt-8">
619
- <div className="labelWidth">Slider example</div>
620
- <div className="formElementWidth flex items-center gap-4">
621
- <Slider
622
- min={0}
623
- max={100}
624
- step={5}
625
- value={sliderValue}
626
- onValueChange={(val: number[]) => setSliderValue(val[0])}
627
- rootExtraClassNames="w-64"
628
- />
629
- <span className="text-xs text-sq-color-gray">Current value: {sliderValue}</span>
630
- </div>
631
- </div>
632
- </div>
633
- </div>
634
- </div>
635
- );
636
- }
637
-
638
- export default Example;
1
+ import React from 'react';
2
+ import {
3
+ Button,
4
+ ButtonWithDropdown,
5
+ ButtonWithPopover,
6
+ Checkbox,
7
+ Icon,
8
+ Modal,
9
+ QTip,
10
+ Select,
11
+ Tabs,
12
+ TextArea,
13
+ TextField,
14
+ ToolbarButton,
15
+ Accordion,
16
+ Alert,
17
+ ButtonGroup,
18
+ Carousel,
19
+ Collapse,
20
+ InputGroup,
21
+ ProgressBar,
22
+ SeeqActionDropdown,
23
+ Slider,
24
+ } from '@seeqdev/qomponents';
25
+ import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
26
+
27
+ const availableThemes = [
28
+ { display: 'Analysis', value: 'color_analysis' },
29
+ { display: 'Topic', value: 'color_topic' },
30
+ { display: 'DataLab', value: 'color_datalab' },
31
+ ];
32
+
33
+ const options = [
34
+ { value: '1', label: 'Beginner' },
35
+ { value: '2', label: 'Advanced' },
36
+ { value: '3', label: 'Expert' },
37
+ ];
38
+
39
+ const Trigger = ({ label }: { label: string }) => (
40
+ <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
41
+ <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
42
+ {label}
43
+ </div>
44
+ );
45
+
46
+ const accordionItems = [
47
+ {
48
+ value: 'phone',
49
+ id: 'phone',
50
+ itemTestId: 'phonecall',
51
+ trigger: <Trigger label="Phone" />,
52
+ content: (
53
+ <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
54
+ If you need to reach us, please call us at 555-555-5555.
55
+ </div>
56
+ ),
57
+ },
58
+ {
59
+ value: 'email',
60
+ id: 'email',
61
+ itemTestId: 'email',
62
+ trigger: <Trigger label="Email" />,
63
+ content: (
64
+ <div className="p-2 text-[0.8125rem] dark:text-sq-white">
65
+ If you need to reach us, please mail example@seeqtest.com
66
+ </div>
67
+ ),
68
+ },
69
+ {
70
+ value: 'address',
71
+ id: 'address',
72
+ itemTestId: 'address',
73
+ trigger: <Trigger label="Address" />,
74
+ content: (
75
+ <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
76
+ If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
77
+ </div>
78
+ ),
79
+ },
80
+ ];
81
+
82
+ const renderData = (text: string) => (
83
+ <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
84
+ <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
85
+ </div>
86
+ );
87
+
88
+ const tabsList = [
89
+ {
90
+ id: 'plugins',
91
+ label: 'Plugins',
92
+ icon: 'fc-data',
93
+ content: renderData("Here's where you can find all the plugins you need. Enjoy!"),
94
+ },
95
+ {
96
+ id: 'addons',
97
+ label: 'Addons',
98
+ icon: 'fc-gears-2',
99
+ content: renderData("Here's where you can find all the addons you need. Enjoy!"),
100
+ },
101
+ {
102
+ id: 'shelf',
103
+ label: 'Shelf',
104
+ icon: 'fc-workbook-lock',
105
+ content: renderData("Here's where you can find all the private documents you need. Enjoy!"),
106
+ },
107
+ ];
108
+
109
+ function Example() {
110
+ /**
111
+ * Theming is supported "out of the box". To apply a theme wrap your addOn in a div and assign the class that
112
+ * matched the desired theme:
113
+ * - color_analysis for Analysis styled qomponents (green)
114
+ * - color_topic for Topic styled qomponents (blue)
115
+ * - DataLab for DataLab styled qomponents (orange)
116
+ */
117
+ const [theme, setTheme] = React.useState('color_analysis');
118
+ /**
119
+ * qomponents also support tw-dark. To render qomponents using tw-dark wrap your addOn in a div and assign the
120
+ * class "tw-dark" for dark-mode or "tw-light" for light mode.
121
+ */
122
+ const [mode, setMode] = React.useState('tw-light');
123
+
124
+ const [btGroupType, setBtGroupType] = React.useState('left');
125
+
126
+ /**
127
+ * This example uses controlled inputs (https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/)
128
+ */
129
+ const [textFieldValue, setTextFieldValue] = React.useState('');
130
+ const [textAreaValue, setTextAreaValue] = React.useState('');
131
+ const [selectValue, setSelectValue] = React.useState();
132
+ const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
133
+ const [alertDisplay, setAlertDisplay] = React.useState('success');
134
+ const [easeOfUse, setEaseOfUse] = React.useState(false);
135
+ const [lookAndFeel, setLookAndFeel] = React.useState(false);
136
+ const [speed, setSpeed] = React.useState(false);
137
+ const [help, setHelp] = React.useState('phone');
138
+ const [openDropdown, setOpenDropdown] = React.useState('');
139
+ const [openPopver, setOpenPopover] = React.useState('');
140
+ const [modalOpen, setModalOpen] = React.useState(false);
141
+ const [modalTitle, setModalTitle] = React.useState('Modal Title');
142
+ const [activeTab, setActiveTab] = React.useState('plugins');
143
+ const [collapseVisible, setCollapseVisible] = React.useState(false);
144
+ const [inputGroupValue, setInputGroupValue] = React.useState('');
145
+ const [sliderValue, setSliderValue] = React.useState<number>(50);
146
+
147
+ return (
148
+ // outer-wrapper div that assigns the mode (tw-dark or light) as well as the theme
149
+ <div className={`backdrop ${mode} ${theme}`}>
150
+ {/*add the QTip component at the very top level or your application to ensure your tooltips display as expected!*/}
151
+ <QTip />
152
+ <div className="flex-container">
153
+ <div className="scroll-container">
154
+ <div className="header">qomponents - form example</div>
155
+ <div>Use this example to see qomponents in actions.</div>
156
+ No libraries other than Seeq's qomponents (and of course React) are used to create this example, however
157
+ minimal CSS is used to create an appealing form - you can find all that CSS in index.css.
158
+ <p className="mb-10">
159
+ <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
160
+ available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use
161
+ this property to provide only width, margins and padding. This will ensure for a smooth upgrade experience
162
+ when Seeq's look and feel changes. <br />
163
+ Tip: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
164
+ TextArea, as well as Select.
165
+ </p>
166
+ <p className="mb-10">
167
+ Using FontAwesome? You can pass FontAwesome Icons to the qomponent Icon component
168
+ <Icon icon="fa-regular fa-face-smile" extraClassNames="ml-10" />
169
+ </p>
170
+ <div className="mb-10">
171
+ <a
172
+ href="#"
173
+ onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
174
+ // this is how you display a q-tip for an element that doesn't come with an "out-of the box" tooltip
175
+ // property:
176
+ data-qtip-text="Toggle Dark/Light Mode."
177
+ // the position is optional and defaults to top
178
+ data-qtip-position="bottom">
179
+ <Icon icon="fc-sun" extraClassNames="mr-10" />
180
+ Click to toggle to {mode === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
181
+ </a>
182
+ </div>
183
+ <div className="formRow">
184
+ <div className="labelWidth">Select theme:</div>
185
+ {availableThemes.map((t) => (
186
+ <Checkbox
187
+ key={t.value}
188
+ type="radio"
189
+ checked={theme === t.value}
190
+ value={t.value}
191
+ label={t.display}
192
+ onChange={(e) => setTheme(e.target.value)}
193
+ extraClassNames="mr-10"
194
+ />
195
+ ))}
196
+ </div>
197
+ <div className="formRow">
198
+ <div className="labelWidth">AddOn Name</div>
199
+ <TextField
200
+ placeholder="you must enter a name"
201
+ extraClassNames="formElementWidth"
202
+ value={textFieldValue}
203
+ showError={textFieldValue === ''}
204
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextFieldValue(e.target.value)}
205
+ />
206
+ </div>
207
+ <div className="formRow">
208
+ <div className="labelWidth">Description</div>
209
+ <TextArea
210
+ value={textAreaValue}
211
+ onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
212
+ extraClassNames="formElementWidth"
213
+ placeholder="provide some text here"
214
+ />
215
+ </div>
216
+ <div className="formRow">
217
+ <div className="labelWidth">Goals</div>
218
+ <div className="formColumn">
219
+ <div>
220
+ <Checkbox checked={easeOfUse} label="Ease of Use" onChange={() => setEaseOfUse(!easeOfUse)} />
221
+ <Checkbox
222
+ checked={lookAndFeel}
223
+ label="Improved Look & Feel"
224
+ onChange={() => setLookAndFeel(!lookAndFeel)}
225
+ />
226
+ <Checkbox checked={speed} label="Speedy Development" onChange={() => setSpeed(!speed)} />
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <div className="formRow">
231
+ <div className="labelWidth">Level</div>
232
+ <Select
233
+ value={selectValue}
234
+ extraClassNames="formElementWidth"
235
+ onChange={(selectValue) => setSelectValue(selectValue)}
236
+ options={options}
237
+ placeholder="please choose"
238
+ />
239
+ </div>
240
+ <div className="formRow">
241
+ <div className="labelWidth">Advanced</div>
242
+ <ComplexSelectExample
243
+ value={complexSelectedValue}
244
+ onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
245
+ />
246
+ </div>
247
+ <div className="formRow">
248
+ <div className="labelWidth">Website tools</div>
249
+ <div className="formElementWidth border rounded-sm">
250
+ <Tabs
251
+ stretchTabs={true}
252
+ activeTab={activeTab}
253
+ onTabSelect={setActiveTab}
254
+ defaultActiveTab="data"
255
+ tabs={tabsList}
256
+ />
257
+ </div>
258
+ </div>
259
+ <div className="formRow">
260
+ <div className="labelWidth">Get help</div>
261
+ <div className="formElementWidth border rounded-sm">
262
+ <Accordion
263
+ accordionItems={accordionItems}
264
+ value={help}
265
+ testId="basic-accordion1"
266
+ onItemSelect={(value) => setHelp(value)}
267
+ />
268
+ </div>
269
+ </div>
270
+ <div className="formRow">
271
+ <div className="labelWidth">Tools</div>
272
+ <div className="formElementWidth formRow border rounded-sm p-4 flex justify-center">
273
+ <ToolbarButton
274
+ icon="fc-y-axis"
275
+ label="Analyzer"
276
+ testId="basic-analyzer"
277
+ tooltipText="Analize data from any csv document"
278
+ hasArrow
279
+ tooltipOptions={{ position: 'top', delay: 0 }}
280
+ isHtmlTooltip={false}
281
+ popoverContent={
282
+ <div className="text-sm dark:text-white">
283
+ <p className="p-2">Select file from your computer or google drive</p>
284
+ <Button type="button" label="Click to select file" />
285
+ </div>
286
+ }
287
+ />
288
+ <ToolbarButton
289
+ icon="fc-sun"
290
+ label={mode === 'light' ? 'Dark Mode' : 'Light Mode'}
291
+ testId="basic-toggler"
292
+ isActive={mode === 'tw-light'}
293
+ tooltipText="Toggle light and dark modes"
294
+ onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
295
+ tooltipOptions={{ position: 'top', delay: 0 }}
296
+ isHtmlTooltip={false}
297
+ />
298
+ <ToolbarButton
299
+ icon="fc-marker"
300
+ label="Language"
301
+ testId="basic-language-changer"
302
+ tooltipText="Disabled toolbar to change website language"
303
+ tooltipOptions={{ position: 'top', delay: 0 }}
304
+ disabled
305
+ />
306
+ </div>
307
+ </div>
308
+ <div className="formRow">
309
+ <div className="labelWidth">Take action</div>
310
+ <div className="formElementWidth">
311
+ <ButtonWithDropdown
312
+ onOpenChange={(isOpen) => setOpenDropdown(isOpen ? 'dropdown-1' : '')}
313
+ isOpen={openDropdown === 'dropdown-1'}
314
+ triggerIcon={
315
+ <Icon
316
+ icon="fc-more"
317
+ type="text"
318
+ extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white w-[18px]"
319
+ />
320
+ }
321
+ containerTestId="basic-dropdown1"
322
+ tooltip="See actions to take for plugins"
323
+ tooltipDelay={0}
324
+ hasArrow
325
+ tooltipPlacement="top"
326
+ dropdownItems={[
327
+ { label: 'Create', icon: 'fc-add-row', onClick: () => setOpenDropdown('') },
328
+ { label: 'Update', icon: 'fc-asset-tree', onClick: () => setOpenDropdown(''), hasDivider: true },
329
+ {
330
+ label: 'Sort',
331
+ icon: 'fc-search-power',
332
+ onClick: () => setOpenDropdown(''),
333
+ subMenuItems: [
334
+ { label: 'Ascending', iconClass: 'fc-arrow_up', onClick: () => setOpenDropdown('') },
335
+ { label: 'Descending', iconClass: 'fc-arrow_down', onClick: () => setOpenDropdown('') },
336
+ ],
337
+ },
338
+ { label: 'Delete', icon: 'fc-delete', onClick: () => setOpenDropdown('') },
339
+ ]}
340
+ />
341
+ </div>
342
+ </div>
343
+ <div className="formRow mt-4">
344
+ <div className="labelWidth">More information</div>
345
+ <div className="formElementWidth">
346
+ <ButtonWithPopover
347
+ trigger={<Icon type="text" icon="fc-circle_info" />}
348
+ containerTestId="basic-popover-1"
349
+ isOpen={openPopver === 'basic-popover-1'}
350
+ onOpenChange={(isOpen) => setOpenPopover(isOpen ? 'basic-popover-1' : '')}
351
+ isHoverEnabled={false}
352
+ align="start"
353
+ tooltipPlacement="top"
354
+ hasArrow
355
+ isHtmlTooltip={false}>
356
+ <div className="text-sm dark:text-white w-72 p-4">
357
+ <p className="font-bold">What are plugins?</p>
358
+ Plugins are modular software components that extend the functionality of an application. They allow
359
+ users to add new features or customize existing ones. Plugins can be easily integrated into an
360
+ application and provide a way to enhance its capabilities without modifying the core codebase.Plugins
361
+ are modular software components that extend the functionality of an application.
362
+ </div>
363
+ </ButtonWithPopover>
364
+ </div>
365
+ </div>
366
+ <div className="formRow mt-4">
367
+ <div className="labelWidth">Accept terms</div>
368
+ <div className="formElementWidth">
369
+ <Button
370
+ onClick={() => {
371
+ setModalOpen(true);
372
+ }}
373
+ label="View terms of use"
374
+ />
375
+ <Modal
376
+ open={modalOpen}
377
+ onClose={() => setModalOpen(false)}
378
+ title="Terms of use"
379
+ titleIcon="fc-circle_info"
380
+ isTitleEditable
381
+ onTitleChanged={(event) => setModalTitle(event.target.value)}
382
+ hideCloseIcon={false}
383
+ size="lg"
384
+ customButton={true}
385
+ customButtonLabel="Back">
386
+ <div>
387
+ <p>
388
+ By using this website, you agree to the following terms of use: Lorem ipsum dolor sit amet,
389
+ consectetur adipiscing elit. Sed euismod, justo id aliquet aliquam, elit enim tincidunt mauris, nec
390
+ aliquam nunc elit vitae nunc. Sed vitae fringilla mauris. Nulla facilisi. Sed auctor, nunc vel
391
+ aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc. Sed auctor, nunc vel
392
+ aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc.
393
+ </p>
394
+ </div>
395
+ </Modal>
396
+ </div>
397
+ </div>
398
+ <div className="formRow mt-8">
399
+ <div className="labelWidth">Button example</div>
400
+ <div className="formElementWidth">
401
+ <div className="flex gap-2 mb-4">
402
+ <Button label="Show Success" onClick={() => setAlertDisplay('success')} variant="theme" />
403
+ <Button label="Show Cancel" onClick={() => setAlertDisplay('cancel')} variant="danger" />
404
+ <Button label="Show Info" onClick={() => setAlertDisplay('info')} variant="outline" />
405
+ </div>
406
+ </div>
407
+ </div>
408
+ {/* Alert Example: Show info, success, or warning based on form submission */}
409
+ <div className="formRow mt-8">
410
+ <div className="labelWidth">Alert example</div>
411
+ <div className="formElementWidth">
412
+ {alertDisplay === 'success' && (
413
+ <Alert variant="theme" testId="alert-success" dismissible>
414
+ <div className="font-bold">Submission Successful</div>
415
+ <div>
416
+ Your add-on details have been submitted successfully. Thank you for contributing to the Seeq Add-on
417
+ ecosystem!
418
+ </div>
419
+ </Alert>
420
+ )}
421
+ {alertDisplay === 'cancel' && (
422
+ <Alert variant="warning" testId="alert-cancel" dismissible>
423
+ <div className="font-bold">Submission Cancelled</div>
424
+ <div>You have cancelled the submission. No changes were saved.</div>
425
+ </Alert>
426
+ )}
427
+ {alertDisplay === 'info' && (
428
+ <Alert variant="gray" testId="alert-info" dismissible>
429
+ <div className="font-bold">Ready to Submit</div>
430
+ <div>Fill out the form and click Submit to add your new add-on to Seeq.</div>
431
+ </Alert>
432
+ )}
433
+ </div>
434
+ </div>
435
+ {/* ButtonGroup Example: Show and select a display type */}
436
+ <div className="formRow mt-8">
437
+ <div className="labelWidth">ButtonGroup example</div>
438
+ <div className="formElementWidth">
439
+ <ButtonGroup
440
+ buttons={[
441
+ {
442
+ variant: 'button',
443
+ buttonProps: {
444
+ label: 'Left',
445
+ value: 'left',
446
+ variant: 'outline',
447
+ isActive: btGroupType === 'left',
448
+ },
449
+ },
450
+ {
451
+ variant: 'button',
452
+ buttonProps: {
453
+ label: 'Center',
454
+ value: 'center',
455
+ variant: 'outline',
456
+ isActive: btGroupType === 'center',
457
+ },
458
+ },
459
+ {
460
+ variant: 'button',
461
+ buttonProps: {
462
+ label: 'Right',
463
+ value: 'right',
464
+ variant: 'outline',
465
+ isActive: btGroupType === 'right',
466
+ },
467
+ },
468
+ ]}
469
+ onChange={(type) => setBtGroupType(type)}
470
+ extraClassNames="mb-4"
471
+ />
472
+ </div>
473
+ </div>
474
+ {/* Carousel Example: Show a set of images with captions, allow navigation */}
475
+ <div className="formRow mt-8 h-60">
476
+ <div className="labelWidth">Carousel example</div>
477
+ <div className="formElementWidth">
478
+ <Carousel
479
+ carouselItems={[
480
+ <div className="flex flex-col items-center justify-center p-4" key="slide1">
481
+ <img
482
+ src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&h=250&q=80"
483
+ alt="Mountains"
484
+ className="w-48 h-32 object-cover rounded-md mb-2"
485
+ />
486
+ <div className="font-bold">Explore the Mountains</div>
487
+ <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
488
+ </div>,
489
+ <div className="flex flex-col items-center justify-center p-4" key="slide2">
490
+ <img
491
+ src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&h=250&q=80"
492
+ alt="City"
493
+ className="w-48 h-32 object-cover rounded-md mb-2"
494
+ />
495
+ <div className="font-bold">City Lights</div>
496
+ <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
497
+ </div>,
498
+ <div className="flex flex-col items-center justify-center p-4" key="slide3">
499
+ <img
500
+ src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&h=250&q=80"
501
+ alt="Beach"
502
+ className="w-48 h-32 object-cover rounded-md mb-2"
503
+ />
504
+ <div className="font-bold">Relax at the Beach</div>
505
+ <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
506
+ </div>,
507
+ ]}
508
+ showArrows={false}
509
+ continuous={true}
510
+ showIndicators
511
+ autoSlide={false}
512
+ testId="carousel-example"
513
+ extraClassNames="rounded-md shadow-sm mb-4"
514
+ />
515
+ </div>
516
+ </div>
517
+ {/* Collapse Example: Expand/collapse a section for additional details */}
518
+ <div className="formRow mt-8">
519
+ <div className="labelWidth">Collapse example</div>
520
+ <div className="formElementWidth">
521
+ <Button
522
+ label={collapseVisible ? 'Hide advanced options' : 'Show advanced options'}
523
+ variant="outline"
524
+ onClick={() => setCollapseVisible((v) => !v)}
525
+ extraClassNames="mb-2"
526
+ />
527
+ <Collapse isVisible={collapseVisible}>
528
+ <div className="p-4 mt-2 bg-transparent rounded-md">
529
+ <div className="font-bold">Advanced Settings</div>
530
+ <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
531
+ <Checkbox label="Enable beta features" />
532
+ <Checkbox label="Show debug info" />
533
+ </div>
534
+ </Collapse>
535
+ </div>
536
+ </div>
537
+ {/* SeeqActionDropdown Example: Contextual actions for a document */}
538
+ <div className="formRow mt-8">
539
+ <div className="labelWidth">SeeqActionDropdown example</div>
540
+ <div className="formElementWidth">
541
+ <SeeqActionDropdown
542
+ seeqActionDropdownItems={[
543
+ {
544
+ display: 'Edit Document',
545
+ icon: 'fc-edit',
546
+ action: () => alert('Edit action triggered!'),
547
+ text: 'Edit the selected document',
548
+ enabled: true,
549
+ },
550
+ {
551
+ display: 'Share',
552
+ icon: 'fc-share',
553
+ action: () => alert('Share action triggered!'),
554
+ text: 'Share the selected document',
555
+ enabled: true,
556
+ },
557
+ {
558
+ display: 'Delete',
559
+ icon: 'fc-delete',
560
+ action: () => alert('Delete action triggered!'),
561
+ text: 'Delete the selected document',
562
+ enabled: true,
563
+ },
564
+ ]}
565
+ trigger={<Button label="Actions" icon="fc-more" variant="outline" extraClassNames="w-32" />}
566
+ variant="create-workbench"
567
+ id="seeq-action-dropdown-example"
568
+ />
569
+ </div>
570
+ </div>
571
+ {/* InputGroup Example: Input with edit and delete icon buttons */}
572
+ <div className="formRow mt-8">
573
+ <div className="labelWidth">InputGroup example</div>
574
+ <div className="formElementWidth">
575
+ <InputGroup
576
+ value={inputGroupValue}
577
+ onChange={(e) => setInputGroupValue(e.target.value)}
578
+ placeholder="Enter item name"
579
+ append={[
580
+ {
581
+ variant: 'button',
582
+ buttonProps: {
583
+ icon: 'fc-edit',
584
+ variant: 'outline',
585
+ onClick: () => setInputGroupValue('Edit clicked'),
586
+ },
587
+ },
588
+ {
589
+ variant: 'button',
590
+ buttonProps: {
591
+ icon: 'fc-delete',
592
+ variant: 'outline',
593
+ onClick: () => setInputGroupValue('Delete clicked'),
594
+ },
595
+ },
596
+ ]}
597
+ extraClassNames="flex-1"
598
+ />
599
+ </div>
600
+ </div>
601
+ {/* ProgressBar Example: Show progress of a task */}
602
+ <div className="formRow mt-8">
603
+ <div className="labelWidth">ProgressBar example</div>
604
+ <div className="formElementWidth flex flex-col items-start gap-1">
605
+ <ProgressBar
606
+ values={[
607
+ { value: 85, label: 'Uploading orders', color: '#0491c2' },
608
+ { value: 90, label: 'Processing invoices', color: '#f59e42' },
609
+ ]}
610
+ max={200}
611
+ containerExtraClasses="w-full"
612
+ />
613
+ <span className="text-xs text-[#0491c2]">Uploading orders... 85%</span>
614
+ <span className="text-xs text-[#f59e42]">Processing invoices... 90%</span>
615
+ </div>
616
+ </div>
617
+ {/* Slider Example: Adjust a value with immediate feedback */}
618
+ <div className="formRow mt-8">
619
+ <div className="labelWidth">Slider example</div>
620
+ <div className="formElementWidth flex items-center gap-4">
621
+ <Slider
622
+ min={0}
623
+ max={100}
624
+ step={5}
625
+ value={sliderValue}
626
+ onValueChange={(val: number[]) => setSliderValue(val[0])}
627
+ rootExtraClassNames="w-64"
628
+ />
629
+ <span className="text-xs text-sq-color-gray">Current value: {sliderValue}</span>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ );
636
+ }
637
+
638
+ export default Example;