@seeqdev/qomponents 0.0.171 → 0.0.172

package/dist/example/src/Example.tsx

@@ -1,638 +1,638 @@
-import React from 'react';
-import {
-  Button,
-  ButtonWithDropdown,
-  ButtonWithPopover,
-  Checkbox,
-  Icon,
-  Modal,
-  QTip,
-  Select,
-  Tabs,
-  TextArea,
-  TextField,
-  ToolbarButton,
-  Accordion,
-  Alert,
-  ButtonGroup,
-  Carousel,
-  Collapse,
-  InputGroup,
-  ProgressBar,
-  SeeqActionDropdown,
-  Slider,
-} from '@seeqdev/qomponents';
-import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
-
-const availableThemes = [
-  { display: 'Analysis', value: 'color_analysis' },
-  { display: 'Topic', value: 'color_topic' },
-  { display: 'DataLab', value: 'color_datalab' },
-];
-
-const options = [
-  { value: '1', label: 'Beginner' },
-  { value: '2', label: 'Advanced' },
-  { value: '3', label: 'Expert' },
-];
-
-const Trigger = ({ label }: { label: string }) => (
-  <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
-    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
-    {label}
-  </div>
-);
-
-const accordionItems = [
-  {
-    value: 'phone',
-    id: 'phone',
-    itemTestId: 'phonecall',
-    trigger: <Trigger label="Phone" />,
-    content: (
-      <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
-        If you need to reach us, please call us at 555-555-5555.
-      </div>
-    ),
-  },
-  {
-    value: 'email',
-    id: 'email',
-    itemTestId: 'email',
-    trigger: <Trigger label="Email" />,
-    content: (
-      <div className="p-2 text-[0.8125rem] dark:text-sq-white">
-        If you need to reach us, please mail example@seeqtest.com
-      </div>
-    ),
-  },
-  {
-    value: 'address',
-    id: 'address',
-    itemTestId: 'address',
-    trigger: <Trigger label="Address" />,
-    content: (
-      <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
-        If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
-      </div>
-    ),
-  },
-];
-
-const renderData = (text: string) => (
-  <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
-    <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
-  </div>
-);
-
-const tabsList = [
-  {
-    id: 'plugins',
-    label: 'Plugins',
-    icon: 'fc-data',
-    content: renderData("Here's where you can find all the plugins you need. Enjoy!"),
-  },
-  {
-    id: 'addons',
-    label: 'Addons',
-    icon: 'fc-gears-2',
-    content: renderData("Here's where you can find all the addons you need. Enjoy!"),
-  },
-  {
-    id: 'shelf',
-    label: 'Shelf',
-    icon: 'fc-workbook-lock',
-    content: renderData("Here's where you can find all the private documents you need. Enjoy!"),
-  },
-];
-
-function Example() {
-  /**
-   * Theming is supported "out of the box". To apply a theme wrap your addOn in a div and assign the class that
-   * matched the desired theme:
-   * - color_analysis for Analysis styled qomponents (green)
-   * - color_topic for Topic styled qomponents (blue)
-   * - DataLab for DataLab styled qomponents (orange)
-   */
-  const [theme, setTheme] = React.useState('color_analysis');
-  /**
-   * qomponents also support tw-dark. To render qomponents using tw-dark wrap your addOn in a div and assign the
-   * class "tw-dark" for dark-mode or "tw-light" for light mode.
-   */
-  const [mode, setMode] = React.useState('tw-light');
-
-  const [btGroupType, setBtGroupType] = React.useState('left');
-
-  /**
-   * This example uses controlled inputs (https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/)
-   */
-  const [textFieldValue, setTextFieldValue] = React.useState('');
-  const [textAreaValue, setTextAreaValue] = React.useState('');
-  const [selectValue, setSelectValue] = React.useState();
-  const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
-  const [alertDisplay, setAlertDisplay] = React.useState('success');
-  const [easeOfUse, setEaseOfUse] = React.useState(false);
-  const [lookAndFeel, setLookAndFeel] = React.useState(false);
-  const [speed, setSpeed] = React.useState(false);
-  const [help, setHelp] = React.useState('phone');
-  const [openDropdown, setOpenDropdown] = React.useState('');
-  const [openPopver, setOpenPopover] = React.useState('');
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const [modalTitle, setModalTitle] = React.useState('Modal Title');
-  const [activeTab, setActiveTab] = React.useState('plugins');
-  const [collapseVisible, setCollapseVisible] = React.useState(false);
-  const [inputGroupValue, setInputGroupValue] = React.useState('');
-  const [sliderValue, setSliderValue] = React.useState<number>(50);
-
-  return (
-    // outer-wrapper div that assigns the mode (tw-dark or light) as well as the theme
-    <div className={`backdrop ${mode} ${theme}`}>
-      {/*add the QTip component at the very top level or your application to ensure your tooltips display as expected!*/}
-      <QTip />
-      <div className="flex-container">
-        <div className="scroll-container">
-          <div className="header">qomponents - form example</div>
-          <div>Use this example to see qomponents in actions.</div>
-          No libraries other than Seeq's qomponents (and of course React) are used to create this example, however
-          minimal CSS is used to create an appealing form - you can find all that CSS in index.css.
-          <p className="mb-10">
-            <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
-            available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use
-            this property to provide only width, margins and padding. This will ensure for a smooth upgrade experience
-            when Seeq's look and feel changes. <br />
-            Tip: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
-            TextArea, as well as Select.
-          </p>
-          <p className="mb-10">
-            Using FontAwesome? You can pass FontAwesome Icons to the qomponent Icon component
-            <Icon icon="fa-regular fa-face-smile" extraClassNames="ml-10" />
-          </p>
-          <div className="mb-10">
-            <a
-              href="#"
-              onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
-              // this is how you display a q-tip for an element that doesn't come with an "out-of the box" tooltip
-              // property:
-              data-qtip-text="Toggle Dark/Light Mode."
-              // the position is optional and defaults to top
-              data-qtip-position="bottom">
-              <Icon icon="fc-sun" extraClassNames="mr-10" />
-              Click to toggle to {mode === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
-            </a>
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Select theme:</div>
-            {availableThemes.map((t) => (
-              <Checkbox
-                key={t.value}
-                type="radio"
-                checked={theme === t.value}
-                value={t.value}
-                label={t.display}
-                onChange={(e) => setTheme(e.target.value)}
-                extraClassNames="mr-10"
-              />
-            ))}
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">AddOn Name</div>
-            <TextField
-              placeholder="you must enter a name"
-              extraClassNames="formElementWidth"
-              value={textFieldValue}
-              showError={textFieldValue === ''}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextFieldValue(e.target.value)}
-            />
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Description</div>
-            <TextArea
-              value={textAreaValue}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
-              extraClassNames="formElementWidth"
-              placeholder="provide some text here"
-            />
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Goals</div>
-            <div className="formColumn">
-              <div>
-                <Checkbox checked={easeOfUse} label="Ease of Use" onChange={() => setEaseOfUse(!easeOfUse)} />
-                <Checkbox
-                  checked={lookAndFeel}
-                  label="Improved Look & Feel"
-                  onChange={() => setLookAndFeel(!lookAndFeel)}
-                />
-                <Checkbox checked={speed} label="Speedy Development" onChange={() => setSpeed(!speed)} />
-              </div>
-            </div>
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Level</div>
-            <Select
-              value={selectValue}
-              extraClassNames="formElementWidth"
-              onChange={(selectValue) => setSelectValue(selectValue)}
-              options={options}
-              placeholder="please choose"
-            />
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Advanced</div>
-            <ComplexSelectExample
-              value={complexSelectedValue}
-              onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
-            />
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Website tools</div>
-            <div className="formElementWidth border rounded-sm">
-              <Tabs
-                stretchTabs={true}
-                activeTab={activeTab}
-                onTabSelect={setActiveTab}
-                defaultActiveTab="data"
-                tabs={tabsList}
-              />
-            </div>
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Get help</div>
-            <div className="formElementWidth border rounded-sm">
-              <Accordion
-                accordionItems={accordionItems}
-                value={help}
-                testId="basic-accordion1"
-                onItemSelect={(value) => setHelp(value)}
-              />
-            </div>
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Tools</div>
-            <div className="formElementWidth formRow border rounded-sm p-4 flex justify-center">
-              <ToolbarButton
-                icon="fc-y-axis"
-                label="Analyzer"
-                testId="basic-analyzer"
-                tooltipText="Analize data from any csv document"
-                hasArrow
-                tooltipOptions={{ position: 'top', delay: 0 }}
-                isHtmlTooltip={false}
-                popoverContent={
-                  <div className="text-sm dark:text-white">
-                    <p className="p-2">Select file from your computer or google drive</p>
-                    <Button type="button" label="Click to select file" />
-                  </div>
-                }
-              />
-              <ToolbarButton
-                icon="fc-sun"
-                label={mode === 'light' ? 'Dark Mode' : 'Light Mode'}
-                testId="basic-toggler"
-                isActive={mode === 'tw-light'}
-                tooltipText="Toggle light and dark modes"
-                onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
-                tooltipOptions={{ position: 'top', delay: 0 }}
-                isHtmlTooltip={false}
-              />
-              <ToolbarButton
-                icon="fc-marker"
-                label="Language"
-                testId="basic-language-changer"
-                tooltipText="Disabled toolbar to change website language"
-                tooltipOptions={{ position: 'top', delay: 0 }}
-                disabled
-              />
-            </div>
-          </div>
-          <div className="formRow">
-            <div className="labelWidth">Take action</div>
-            <div className="formElementWidth">
-              <ButtonWithDropdown
-                onOpenChange={(isOpen) => setOpenDropdown(isOpen ? 'dropdown-1' : '')}
-                isOpen={openDropdown === 'dropdown-1'}
-                triggerIcon={
-                  <Icon
-                    icon="fc-more"
-                    type="text"
-                    extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white w-[18px]"
-                  />
-                }
-                containerTestId="basic-dropdown1"
-                tooltip="See actions to take for plugins"
-                tooltipDelay={0}
-                hasArrow
-                tooltipPlacement="top"
-                dropdownItems={[
-                  { label: 'Create', icon: 'fc-add-row', onClick: () => setOpenDropdown('') },
-                  { label: 'Update', icon: 'fc-asset-tree', onClick: () => setOpenDropdown(''), hasDivider: true },
-                  {
-                    label: 'Sort',
-                    icon: 'fc-search-power',
-                    onClick: () => setOpenDropdown(''),
-                    subMenuItems: [
-                      { label: 'Ascending', iconClass: 'fc-arrow_up', onClick: () => setOpenDropdown('') },
-                      { label: 'Descending', iconClass: 'fc-arrow_down', onClick: () => setOpenDropdown('') },
-                    ],
-                  },
-                  { label: 'Delete', icon: 'fc-delete', onClick: () => setOpenDropdown('') },
-                ]}
-              />
-            </div>
-          </div>
-          <div className="formRow mt-4">
-            <div className="labelWidth">More information</div>
-            <div className="formElementWidth">
-              <ButtonWithPopover
-                trigger={<Icon type="text" icon="fc-circle_info" />}
-                containerTestId="basic-popover-1"
-                isOpen={openPopver === 'basic-popover-1'}
-                onOpenChange={(isOpen) => setOpenPopover(isOpen ? 'basic-popover-1' : '')}
-                isHoverEnabled={false}
-                align="start"
-                tooltipPlacement="top"
-                hasArrow
-                isHtmlTooltip={false}>
-                <div className="text-sm dark:text-white w-72 p-4">
-                  <p className="font-bold">What are plugins?</p>
-                  Plugins are modular software components that extend the functionality of an application. They allow
-                  users to add new features or customize existing ones. Plugins can be easily integrated into an
-                  application and provide a way to enhance its capabilities without modifying the core codebase.Plugins
-                  are modular software components that extend the functionality of an application.
-                </div>
-              </ButtonWithPopover>
-            </div>
-          </div>
-          <div className="formRow mt-4">
-            <div className="labelWidth">Accept terms</div>
-            <div className="formElementWidth">
-              <Button
-                onClick={() => {
-                  setModalOpen(true);
-                }}
-                label="View terms of use"
-              />
-              <Modal
-                open={modalOpen}
-                onClose={() => setModalOpen(false)}
-                title="Terms of use"
-                titleIcon="fc-circle_info"
-                isTitleEditable
-                onTitleChanged={(event) => setModalTitle(event.target.value)}
-                hideCloseIcon={false}
-                size="lg"
-                customButton={true}
-                customButtonLabel="Back">
-                <div>
-                  <p>
-                    By using this website, you agree to the following terms of use: Lorem ipsum dolor sit amet,
-                    consectetur adipiscing elit. Sed euismod, justo id aliquet aliquam, elit enim tincidunt mauris, nec
-                    aliquam nunc elit vitae nunc. Sed vitae fringilla mauris. Nulla facilisi. Sed auctor, nunc vel
-                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc. Sed auctor, nunc vel
-                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc.
-                  </p>
-                </div>
-              </Modal>
-            </div>
-          </div>
-          <div className="formRow mt-8">
-            <div className="labelWidth">Button example</div>
-            <div className="formElementWidth">
-              <div className="flex gap-2 mb-4">
-                <Button label="Show Success" onClick={() => setAlertDisplay('success')} variant="theme" />
-                <Button label="Show Cancel" onClick={() => setAlertDisplay('cancel')} variant="danger" />
-                <Button label="Show Info" onClick={() => setAlertDisplay('info')} variant="outline" />
-              </div>
-            </div>
-          </div>
-          {/* Alert Example: Show info, success, or warning based on form submission */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">Alert example</div>
-            <div className="formElementWidth">
-              {alertDisplay === 'success' && (
-                <Alert variant="theme" testId="alert-success" dismissible>
-                  <div className="font-bold">Submission Successful</div>
-                  <div>
-                    Your add-on details have been submitted successfully. Thank you for contributing to the Seeq Add-on
-                    ecosystem!
-                  </div>
-                </Alert>
-              )}
-              {alertDisplay === 'cancel' && (
-                <Alert variant="warning" testId="alert-cancel" dismissible>
-                  <div className="font-bold">Submission Cancelled</div>
-                  <div>You have cancelled the submission. No changes were saved.</div>
-                </Alert>
-              )}
-              {alertDisplay === 'info' && (
-                <Alert variant="gray" testId="alert-info" dismissible>
-                  <div className="font-bold">Ready to Submit</div>
-                  <div>Fill out the form and click Submit to add your new add-on to Seeq.</div>
-                </Alert>
-              )}
-            </div>
-          </div>
-          {/* ButtonGroup Example: Show and select a display type */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">ButtonGroup example</div>
-            <div className="formElementWidth">
-              <ButtonGroup
-                buttons={[
-                  {
-                    variant: 'button',
-                    buttonProps: {
-                      label: 'Left',
-                      value: 'left',
-                      variant: 'outline',
-                      isActive: btGroupType === 'left',
-                    },
-                  },
-                  {
-                    variant: 'button',
-                    buttonProps: {
-                      label: 'Center',
-                      value: 'center',
-                      variant: 'outline',
-                      isActive: btGroupType === 'center',
-                    },
-                  },
-                  {
-                    variant: 'button',
-                    buttonProps: {
-                      label: 'Right',
-                      value: 'right',
-                      variant: 'outline',
-                      isActive: btGroupType === 'right',
-                    },
-                  },
-                ]}
-                onChange={(type) => setBtGroupType(type)}
-                extraClassNames="mb-4"
-              />
-            </div>
-          </div>
-          {/* Carousel Example: Show a set of images with captions, allow navigation */}
-          <div className="formRow mt-8 h-60">
-            <div className="labelWidth">Carousel example</div>
-            <div className="formElementWidth">
-              <Carousel
-                carouselItems={[
-                  <div className="flex flex-col items-center justify-center p-4" key="slide1">
-                    <img
-                      src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&h=250&q=80"
-                      alt="Mountains"
-                      className="w-48 h-32 object-cover rounded-md mb-2"
-                    />
-                    <div className="font-bold">Explore the Mountains</div>
-                    <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
-                  </div>,
-                  <div className="flex flex-col items-center justify-center p-4" key="slide2">
-                    <img
-                      src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&h=250&q=80"
-                      alt="City"
-                      className="w-48 h-32 object-cover rounded-md mb-2"
-                    />
-                    <div className="font-bold">City Lights</div>
-                    <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
-                  </div>,
-                  <div className="flex flex-col items-center justify-center p-4" key="slide3">
-                    <img
-                      src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&h=250&q=80"
-                      alt="Beach"
-                      className="w-48 h-32 object-cover rounded-md mb-2"
-                    />
-                    <div className="font-bold">Relax at the Beach</div>
-                    <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
-                  </div>,
-                ]}
-                showArrows={false}
-                continuous={true}
-                showIndicators
-                autoSlide={false}
-                testId="carousel-example"
-                extraClassNames="rounded-md shadow-sm mb-4"
-              />
-            </div>
-          </div>
-          {/* Collapse Example: Expand/collapse a section for additional details */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">Collapse example</div>
-            <div className="formElementWidth">
-              <Button
-                label={collapseVisible ? 'Hide advanced options' : 'Show advanced options'}
-                variant="outline"
-                onClick={() => setCollapseVisible((v) => !v)}
-                extraClassNames="mb-2"
-              />
-              <Collapse isVisible={collapseVisible}>
-                <div className="p-4 mt-2 bg-transparent rounded-md">
-                  <div className="font-bold">Advanced Settings</div>
-                  <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
-                  <Checkbox label="Enable beta features" />
-                  <Checkbox label="Show debug info" />
-                </div>
-              </Collapse>
-            </div>
-          </div>
-          {/* SeeqActionDropdown Example: Contextual actions for a document */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">SeeqActionDropdown example</div>
-            <div className="formElementWidth">
-              <SeeqActionDropdown
-                seeqActionDropdownItems={[
-                  {
-                    display: 'Edit Document',
-                    icon: 'fc-edit',
-                    action: () => alert('Edit action triggered!'),
-                    text: 'Edit the selected document',
-                    enabled: true,
-                  },
-                  {
-                    display: 'Share',
-                    icon: 'fc-share',
-                    action: () => alert('Share action triggered!'),
-                    text: 'Share the selected document',
-                    enabled: true,
-                  },
-                  {
-                    display: 'Delete',
-                    icon: 'fc-delete',
-                    action: () => alert('Delete action triggered!'),
-                    text: 'Delete the selected document',
-                    enabled: true,
-                  },
-                ]}
-                trigger={<Button label="Actions" icon="fc-more" variant="outline" extraClassNames="w-32" />}
-                variant="create-workbench"
-                id="seeq-action-dropdown-example"
-              />
-            </div>
-          </div>
-          {/* InputGroup Example: Input with edit and delete icon buttons */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">InputGroup example</div>
-            <div className="formElementWidth">
-              <InputGroup
-                value={inputGroupValue}
-                onChange={(e) => setInputGroupValue(e.target.value)}
-                placeholder="Enter item name"
-                append={[
-                  {
-                    variant: 'button',
-                    buttonProps: {
-                      icon: 'fc-edit',
-                      variant: 'outline',
-                      onClick: () => setInputGroupValue('Edit clicked'),
-                    },
-                  },
-                  {
-                    variant: 'button',
-                    buttonProps: {
-                      icon: 'fc-delete',
-                      variant: 'outline',
-                      onClick: () => setInputGroupValue('Delete clicked'),
-                    },
-                  },
-                ]}
-                extraClassNames="flex-1"
-              />
-            </div>
-          </div>
-          {/* ProgressBar Example: Show progress of a task */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">ProgressBar example</div>
-            <div className="formElementWidth flex flex-col items-start gap-1">
-              <ProgressBar
-                values={[
-                  { value: 85, label: 'Uploading orders', color: '#0491c2' },
-                  { value: 90, label: 'Processing invoices', color: '#f59e42' },
-                ]}
-                max={200}
-                containerExtraClasses="w-full"
-              />
-              <span className="text-xs text-[#0491c2]">Uploading orders... 85%</span>
-              <span className="text-xs text-[#f59e42]">Processing invoices... 90%</span>
-            </div>
-          </div>
-          {/* Slider Example: Adjust a value with immediate feedback */}
-          <div className="formRow mt-8">
-            <div className="labelWidth">Slider example</div>
-            <div className="formElementWidth flex items-center gap-4">
-              <Slider
-                min={0}
-                max={100}
-                step={5}
-                value={sliderValue}
-                onValueChange={(val: number[]) => setSliderValue(val[0])}
-                rootExtraClassNames="w-64"
-              />
-              <span className="text-xs text-sq-color-gray">Current value: {sliderValue}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Example;
+import React from 'react';
+import {
+  Button,
+  ButtonWithDropdown,
+  ButtonWithPopover,
+  Checkbox,
+  Icon,
+  Modal,
+  QTip,
+  Select,
+  Tabs,
+  TextArea,
+  TextField,
+  ToolbarButton,
+  Accordion,
+  Alert,
+  ButtonGroup,
+  Carousel,
+  Collapse,
+  InputGroup,
+  ProgressBar,
+  SeeqActionDropdown,
+  Slider,
+} from '@seeqdev/qomponents';
+import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
+
+const availableThemes = [
+  { display: 'Analysis', value: 'color_analysis' },
+  { display: 'Topic', value: 'color_topic' },
+  { display: 'DataLab', value: 'color_datalab' },
+];
+
+const options = [
+  { value: '1', label: 'Beginner' },
+  { value: '2', label: 'Advanced' },
+  { value: '3', label: 'Expert' },
+];
+
+const Trigger = ({ label }: { label: string }) => (
+  <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
+    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
+    {label}
+  </div>
+);
+
+const accordionItems = [
+  {
+    value: 'phone',
+    id: 'phone',
+    itemTestId: 'phonecall',
+    trigger: <Trigger label="Phone" />,
+    content: (
+      <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
+        If you need to reach us, please call us at 555-555-5555.
+      </div>
+    ),
+  },
+  {
+    value: 'email',
+    id: 'email',
+    itemTestId: 'email',
+    trigger: <Trigger label="Email" />,
+    content: (
+      <div className="p-2 text-[0.8125rem] dark:text-sq-white">
+        If you need to reach us, please mail example@seeqtest.com
+      </div>
+    ),
+  },
+  {
+    value: 'address',
+    id: 'address',
+    itemTestId: 'address',
+    trigger: <Trigger label="Address" />,
+    content: (
+      <div className="p-2 text-[0.8125rem] dark:tw-text-sq-white">
+        If you need to reach us, please visit us at 1234 Main St., Anytown, USA.
+      </div>
+    ),
+  },
+];
+
+const renderData = (text: string) => (
+  <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
+    <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
+  </div>
+);
+
+const tabsList = [
+  {
+    id: 'plugins',
+    label: 'Plugins',
+    icon: 'fc-data',
+    content: renderData("Here's where you can find all the plugins you need. Enjoy!"),
+  },
+  {
+    id: 'addons',
+    label: 'Addons',
+    icon: 'fc-gears-2',
+    content: renderData("Here's where you can find all the addons you need. Enjoy!"),
+  },
+  {
+    id: 'shelf',
+    label: 'Shelf',
+    icon: 'fc-workbook-lock',
+    content: renderData("Here's where you can find all the private documents you need. Enjoy!"),
+  },
+];
+
+function Example() {
+  /**
+   * Theming is supported "out of the box". To apply a theme wrap your addOn in a div and assign the class that
+   * matched the desired theme:
+   * - color_analysis for Analysis styled qomponents (green)
+   * - color_topic for Topic styled qomponents (blue)
+   * - DataLab for DataLab styled qomponents (orange)
+   */
+  const [theme, setTheme] = React.useState('color_analysis');
+  /**
+   * qomponents also support tw-dark. To render qomponents using tw-dark wrap your addOn in a div and assign the
+   * class "tw-dark" for dark-mode or "tw-light" for light mode.
+   */
+  const [mode, setMode] = React.useState('tw-light');
+
+  const [btGroupType, setBtGroupType] = React.useState('left');
+
+  /**
+   * This example uses controlled inputs (https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/)
+   */
+  const [textFieldValue, setTextFieldValue] = React.useState('');
+  const [textAreaValue, setTextAreaValue] = React.useState('');
+  const [selectValue, setSelectValue] = React.useState();
+  const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
+  const [alertDisplay, setAlertDisplay] = React.useState('success');
+  const [easeOfUse, setEaseOfUse] = React.useState(false);
+  const [lookAndFeel, setLookAndFeel] = React.useState(false);
+  const [speed, setSpeed] = React.useState(false);
+  const [help, setHelp] = React.useState('phone');
+  const [openDropdown, setOpenDropdown] = React.useState('');
+  const [openPopver, setOpenPopover] = React.useState('');
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [modalTitle, setModalTitle] = React.useState('Modal Title');
+  const [activeTab, setActiveTab] = React.useState('plugins');
+  const [collapseVisible, setCollapseVisible] = React.useState(false);
+  const [inputGroupValue, setInputGroupValue] = React.useState('');
+  const [sliderValue, setSliderValue] = React.useState<number>(50);
+
+  return (
+    // outer-wrapper div that assigns the mode (tw-dark or light) as well as the theme
+    <div className={`backdrop ${mode} ${theme}`}>
+      {/*add the QTip component at the very top level or your application to ensure your tooltips display as expected!*/}
+      <QTip />
+      <div className="flex-container">
+        <div className="scroll-container">
+          <div className="header">qomponents - form example</div>
+          <div>Use this example to see qomponents in actions.</div>
+          No libraries other than Seeq's qomponents (and of course React) are used to create this example, however
+          minimal CSS is used to create an appealing form - you can find all that CSS in index.css.
+          <p className="mb-10">
+            <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
+            available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use
+            this property to provide only width, margins and padding. This will ensure for a smooth upgrade experience
+            when Seeq's look and feel changes. <br />
+            Tip: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
+            TextArea, as well as Select.
+          </p>
+          <p className="mb-10">
+            Using FontAwesome? You can pass FontAwesome Icons to the qomponent Icon component
+            <Icon icon="fa-regular fa-face-smile" extraClassNames="ml-10" />
+          </p>
+          <div className="mb-10">
+            <a
+              href="#"
+              onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
+              // this is how you display a q-tip for an element that doesn't come with an "out-of the box" tooltip
+              // property:
+              data-qtip-text="Toggle Dark/Light Mode."
+              // the position is optional and defaults to top
+              data-qtip-position="bottom">
+              <Icon icon="fc-sun" extraClassNames="mr-10" />
+              Click to toggle to {mode === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
+            </a>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Select theme:</div>
+            {availableThemes.map((t) => (
+              <Checkbox
+                key={t.value}
+                type="radio"
+                checked={theme === t.value}
+                value={t.value}
+                label={t.display}
+                onChange={(e) => setTheme(e.target.value)}
+                extraClassNames="mr-10"
+              />
+            ))}
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">AddOn Name</div>
+            <TextField
+              placeholder="you must enter a name"
+              extraClassNames="formElementWidth"
+              value={textFieldValue}
+              showError={textFieldValue === ''}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextFieldValue(e.target.value)}
+            />
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Description</div>
+            <TextArea
+              value={textAreaValue}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
+              extraClassNames="formElementWidth"
+              placeholder="provide some text here"
+            />
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Goals</div>
+            <div className="formColumn">
+              <div>
+                <Checkbox checked={easeOfUse} label="Ease of Use" onChange={() => setEaseOfUse(!easeOfUse)} />
+                <Checkbox
+                  checked={lookAndFeel}
+                  label="Improved Look & Feel"
+                  onChange={() => setLookAndFeel(!lookAndFeel)}
+                />
+                <Checkbox checked={speed} label="Speedy Development" onChange={() => setSpeed(!speed)} />
+              </div>
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Level</div>
+            <Select
+              value={selectValue}
+              extraClassNames="formElementWidth"
+              onChange={(selectValue) => setSelectValue(selectValue)}
+              options={options}
+              placeholder="please choose"
+            />
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Advanced</div>
+            <ComplexSelectExample
+              value={complexSelectedValue}
+              onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
+            />
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Website tools</div>
+            <div className="formElementWidth border rounded-sm">
+              <Tabs
+                stretchTabs={true}
+                activeTab={activeTab}
+                onTabSelect={setActiveTab}
+                defaultActiveTab="data"
+                tabs={tabsList}
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Get help</div>
+            <div className="formElementWidth border rounded-sm">
+              <Accordion
+                accordionItems={accordionItems}
+                value={help}
+                testId="basic-accordion1"
+                onItemSelect={(value) => setHelp(value)}
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Tools</div>
+            <div className="formElementWidth formRow border rounded-sm p-4 flex justify-center">
+              <ToolbarButton
+                icon="fc-y-axis"
+                label="Analyzer"
+                testId="basic-analyzer"
+                tooltipText="Analize data from any csv document"
+                hasArrow
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                isHtmlTooltip={false}
+                popoverContent={
+                  <div className="text-sm dark:text-white">
+                    <p className="p-2">Select file from your computer or google drive</p>
+                    <Button type="button" label="Click to select file" />
+                  </div>
+                }
+              />
+              <ToolbarButton
+                icon="fc-sun"
+                label={mode === 'light' ? 'Dark Mode' : 'Light Mode'}
+                testId="basic-toggler"
+                isActive={mode === 'tw-light'}
+                tooltipText="Toggle light and dark modes"
+                onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                isHtmlTooltip={false}
+              />
+              <ToolbarButton
+                icon="fc-marker"
+                label="Language"
+                testId="basic-language-changer"
+                tooltipText="Disabled toolbar to change website language"
+                tooltipOptions={{ position: 'top', delay: 0 }}
+                disabled
+              />
+            </div>
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Take action</div>
+            <div className="formElementWidth">
+              <ButtonWithDropdown
+                onOpenChange={(isOpen) => setOpenDropdown(isOpen ? 'dropdown-1' : '')}
+                isOpen={openDropdown === 'dropdown-1'}
+                triggerIcon={
+                  <Icon
+                    icon="fc-more"
+                    type="text"
+                    extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white w-[18px]"
+                  />
+                }
+                containerTestId="basic-dropdown1"
+                tooltip="See actions to take for plugins"
+                tooltipDelay={0}
+                hasArrow
+                tooltipPlacement="top"
+                dropdownItems={[
+                  { label: 'Create', icon: 'fc-add-row', onClick: () => setOpenDropdown('') },
+                  { label: 'Update', icon: 'fc-asset-tree', onClick: () => setOpenDropdown(''), hasDivider: true },
+                  {
+                    label: 'Sort',
+                    icon: 'fc-search-power',
+                    onClick: () => setOpenDropdown(''),
+                    subMenuItems: [
+                      { label: 'Ascending', iconClass: 'fc-arrow_up', onClick: () => setOpenDropdown('') },
+                      { label: 'Descending', iconClass: 'fc-arrow_down', onClick: () => setOpenDropdown('') },
+                    ],
+                  },
+                  { label: 'Delete', icon: 'fc-delete', onClick: () => setOpenDropdown('') },
+                ]}
+              />
+            </div>
+          </div>
+          <div className="formRow mt-4">
+            <div className="labelWidth">More information</div>
+            <div className="formElementWidth">
+              <ButtonWithPopover
+                trigger={<Icon type="text" icon="fc-circle_info" />}
+                containerTestId="basic-popover-1"
+                isOpen={openPopver === 'basic-popover-1'}
+                onOpenChange={(isOpen) => setOpenPopover(isOpen ? 'basic-popover-1' : '')}
+                isHoverEnabled={false}
+                align="start"
+                tooltipPlacement="top"
+                hasArrow
+                isHtmlTooltip={false}>
+                <div className="text-sm dark:text-white w-72 p-4">
+                  <p className="font-bold">What are plugins?</p>
+                  Plugins are modular software components that extend the functionality of an application. They allow
+                  users to add new features or customize existing ones. Plugins can be easily integrated into an
+                  application and provide a way to enhance its capabilities without modifying the core codebase.Plugins
+                  are modular software components that extend the functionality of an application.
+                </div>
+              </ButtonWithPopover>
+            </div>
+          </div>
+          <div className="formRow mt-4">
+            <div className="labelWidth">Accept terms</div>
+            <div className="formElementWidth">
+              <Button
+                onClick={() => {
+                  setModalOpen(true);
+                }}
+                label="View terms of use"
+              />
+              <Modal
+                open={modalOpen}
+                onClose={() => setModalOpen(false)}
+                title="Terms of use"
+                titleIcon="fc-circle_info"
+                isTitleEditable
+                onTitleChanged={(event) => setModalTitle(event.target.value)}
+                hideCloseIcon={false}
+                size="lg"
+                customButton={true}
+                customButtonLabel="Back">
+                <div>
+                  <p>
+                    By using this website, you agree to the following terms of use: Lorem ipsum dolor sit amet,
+                    consectetur adipiscing elit. Sed euismod, justo id aliquet aliquam, elit enim tincidunt mauris, nec
+                    aliquam nunc elit vitae nunc. Sed vitae fringilla mauris. Nulla facilisi. Sed auctor, nunc vel
+                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc. Sed auctor, nunc vel
+                    aliquet luctus, nisl nunc tincidunt nunc, id lacinia mauris metus id nunc.
+                  </p>
+                </div>
+              </Modal>
+            </div>
+          </div>
+          <div className="formRow mt-8">
+            <div className="labelWidth">Button example</div>
+            <div className="formElementWidth">
+              <div className="flex gap-2 mb-4">
+                <Button label="Show Success" onClick={() => setAlertDisplay('success')} variant="theme" />
+                <Button label="Show Cancel" onClick={() => setAlertDisplay('cancel')} variant="danger" />
+                <Button label="Show Info" onClick={() => setAlertDisplay('info')} variant="outline" />
+              </div>
+            </div>
+          </div>
+          {/* Alert Example: Show info, success, or warning based on form submission */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">Alert example</div>
+            <div className="formElementWidth">
+              {alertDisplay === 'success' && (
+                <Alert variant="theme" testId="alert-success" dismissible>
+                  <div className="font-bold">Submission Successful</div>
+                  <div>
+                    Your add-on details have been submitted successfully. Thank you for contributing to the Seeq Add-on
+                    ecosystem!
+                  </div>
+                </Alert>
+              )}
+              {alertDisplay === 'cancel' && (
+                <Alert variant="warning" testId="alert-cancel" dismissible>
+                  <div className="font-bold">Submission Cancelled</div>
+                  <div>You have cancelled the submission. No changes were saved.</div>
+                </Alert>
+              )}
+              {alertDisplay === 'info' && (
+                <Alert variant="gray" testId="alert-info" dismissible>
+                  <div className="font-bold">Ready to Submit</div>
+                  <div>Fill out the form and click Submit to add your new add-on to Seeq.</div>
+                </Alert>
+              )}
+            </div>
+          </div>
+          {/* ButtonGroup Example: Show and select a display type */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">ButtonGroup example</div>
+            <div className="formElementWidth">
+              <ButtonGroup
+                buttons={[
+                  {
+                    variant: 'button',
+                    buttonProps: {
+                      label: 'Left',
+                      value: 'left',
+                      variant: 'outline',
+                      isActive: btGroupType === 'left',
+                    },
+                  },
+                  {
+                    variant: 'button',
+                    buttonProps: {
+                      label: 'Center',
+                      value: 'center',
+                      variant: 'outline',
+                      isActive: btGroupType === 'center',
+                    },
+                  },
+                  {
+                    variant: 'button',
+                    buttonProps: {
+                      label: 'Right',
+                      value: 'right',
+                      variant: 'outline',
+                      isActive: btGroupType === 'right',
+                    },
+                  },
+                ]}
+                onChange={(type) => setBtGroupType(type)}
+                extraClassNames="mb-4"
+              />
+            </div>
+          </div>
+          {/* Carousel Example: Show a set of images with captions, allow navigation */}
+          <div className="formRow mt-8 h-60">
+            <div className="labelWidth">Carousel example</div>
+            <div className="formElementWidth">
+              <Carousel
+                carouselItems={[
+                  <div className="flex flex-col items-center justify-center p-4" key="slide1">
+                    <img
+                      src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&h=250&q=80"
+                      alt="Mountains"
+                      className="w-48 h-32 object-cover rounded-md mb-2"
+                    />
+                    <div className="font-bold">Explore the Mountains</div>
+                    <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
+                  </div>,
+                  <div className="flex flex-col items-center justify-center p-4" key="slide2">
+                    <img
+                      src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=400&h=250&q=80"
+                      alt="City"
+                      className="w-48 h-32 object-cover rounded-md mb-2"
+                    />
+                    <div className="font-bold">City Lights</div>
+                    <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
+                  </div>,
+                  <div className="flex flex-col items-center justify-center p-4" key="slide3">
+                    <img
+                      src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&h=250&q=80"
+                      alt="Beach"
+                      className="w-48 h-32 object-cover rounded-md mb-2"
+                    />
+                    <div className="font-bold">Relax at the Beach</div>
+                    <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
+                  </div>,
+                ]}
+                showArrows={false}
+                continuous={true}
+                showIndicators
+                autoSlide={false}
+                testId="carousel-example"
+                extraClassNames="rounded-md shadow-sm mb-4"
+              />
+            </div>
+          </div>
+          {/* Collapse Example: Expand/collapse a section for additional details */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">Collapse example</div>
+            <div className="formElementWidth">
+              <Button
+                label={collapseVisible ? 'Hide advanced options' : 'Show advanced options'}
+                variant="outline"
+                onClick={() => setCollapseVisible((v) => !v)}
+                extraClassNames="mb-2"
+              />
+              <Collapse isVisible={collapseVisible}>
+                <div className="p-4 mt-2 bg-transparent rounded-md">
+                  <div className="font-bold">Advanced Settings</div>
+                  <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
+                  <Checkbox label="Enable beta features" />
+                  <Checkbox label="Show debug info" />
+                </div>
+              </Collapse>
+            </div>
+          </div>
+          {/* SeeqActionDropdown Example: Contextual actions for a document */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">SeeqActionDropdown example</div>
+            <div className="formElementWidth">
+              <SeeqActionDropdown
+                seeqActionDropdownItems={[
+                  {
+                    display: 'Edit Document',
+                    icon: 'fc-edit',
+                    action: () => alert('Edit action triggered!'),
+                    text: 'Edit the selected document',
+                    enabled: true,
+                  },
+                  {
+                    display: 'Share',
+                    icon: 'fc-share',
+                    action: () => alert('Share action triggered!'),
+                    text: 'Share the selected document',
+                    enabled: true,
+                  },
+                  {
+                    display: 'Delete',
+                    icon: 'fc-delete',
+                    action: () => alert('Delete action triggered!'),
+                    text: 'Delete the selected document',
+                    enabled: true,
+                  },
+                ]}
+                trigger={<Button label="Actions" icon="fc-more" variant="outline" extraClassNames="w-32" />}
+                variant="create-workbench"
+                id="seeq-action-dropdown-example"
+              />
+            </div>
+          </div>
+          {/* InputGroup Example: Input with edit and delete icon buttons */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">InputGroup example</div>
+            <div className="formElementWidth">
+              <InputGroup
+                value={inputGroupValue}
+                onChange={(e) => setInputGroupValue(e.target.value)}
+                placeholder="Enter item name"
+                append={[
+                  {
+                    variant: 'button',
+                    buttonProps: {
+                      icon: 'fc-edit',
+                      variant: 'outline',
+                      onClick: () => setInputGroupValue('Edit clicked'),
+                    },
+                  },
+                  {
+                    variant: 'button',
+                    buttonProps: {
+                      icon: 'fc-delete',
+                      variant: 'outline',
+                      onClick: () => setInputGroupValue('Delete clicked'),
+                    },
+                  },
+                ]}
+                extraClassNames="flex-1"
+              />
+            </div>
+          </div>
+          {/* ProgressBar Example: Show progress of a task */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">ProgressBar example</div>
+            <div className="formElementWidth flex flex-col items-start gap-1">
+              <ProgressBar
+                values={[
+                  { value: 85, label: 'Uploading orders', color: '#0491c2' },
+                  { value: 90, label: 'Processing invoices', color: '#f59e42' },
+                ]}
+                max={200}
+                containerExtraClasses="w-full"
+              />
+              <span className="text-xs text-[#0491c2]">Uploading orders... 85%</span>
+              <span className="text-xs text-[#f59e42]">Processing invoices... 90%</span>
+            </div>
+          </div>
+          {/* Slider Example: Adjust a value with immediate feedback */}
+          <div className="formRow mt-8">
+            <div className="labelWidth">Slider example</div>
+            <div className="formElementWidth flex items-center gap-4">
+              <Slider
+                min={0}
+                max={100}
+                step={5}
+                value={sliderValue}
+                onValueChange={(val: number[]) => setSliderValue(val[0])}
+                rootExtraClassNames="w-64"
+              />
+              <span className="text-xs text-sq-color-gray">Current value: {sliderValue}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Example;