@seeqdev/qomponents 0.0.157 → 0.0.159

package/dist/example/package.json

@@ -11,20 +11,22 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "0.0.72",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@seeqdev/qomponents": "0.0.153",
+    "@tailwindcss/vite": "4.1.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "4.1.8"
   },
   "devDependencies": {
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "@types/react": "18.0.37",
+    "@types/react-dom": "18.0.11",
+    "@typescript-eslint/eslint-plugin": "5.59.0",
+    "@typescript-eslint/parser": "5.59.0",
+    "@vitejs/plugin-react": "4.5.1",
+    "eslint": "8.38.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.3.4",
+    "typescript": "5.0.2",
+    "vite": "6.3.5"
   }
 }

package/dist/example/src/Example.tsx

@@ -12,9 +12,17 @@ import {
   TextArea,
   TextField,
   ToolbarButton,
+  Accordion,
+  Alert,
+  ButtonGroup,
+  Carousel,
+  Collapse,
+  InputGroup,
+  ProgressBar,
+  SeeqActionDropdown,
+  Slider,
 } from '@seeqdev/qomponents';
 import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
-import Accordion from '../../src/Accordion';
 
 const availableThemes = [
   { display: 'Analysis', value: 'color_analysis' },
@@ -29,8 +37,8 @@ const options = [
 ];
 
 const Trigger = ({ label }: { label: string }) => (
-  <div className="tw-flex tw-justify-start tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark">
-    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[0.75rem]" type="text" />
+  <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>
 );
@@ -42,7 +50,7 @@ const accordionItems = [
     itemTestId: 'phonecall',
     trigger: <Trigger label="Phone" />,
     content: (
-      <div className="tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white">
+      <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>
     ),
@@ -53,7 +61,7 @@ const accordionItems = [
     itemTestId: 'email',
     trigger: <Trigger label="Email" />,
     content: (
-      <div className="tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white">
+      <div className="p-2 text-[0.8125rem] dark:text-sq-white">
         If you need to reach us, please mail example@seeqtest.com
       </div>
     ),
@@ -64,7 +72,7 @@ const accordionItems = [
     itemTestId: 'address',
     trigger: <Trigger label="Address" />,
     content: (
-      <div className="tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white">
+      <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>
     ),
@@ -72,8 +80,8 @@ const accordionItems = [
 ];
 
 const renderData = (text: string) => (
-  <div className="tw-text-sq-color-gray dark:tw-text-sq-white tw-p-6">
-    <p className="tw-mb-5 tw-text-[0.9375rem] tw-leading-normal">{text}</p>
+  <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>
 );
 
@@ -108,11 +116,13 @@ function Example() {
    */
   const [theme, setTheme] = React.useState('color_analysis');
   /**
-   * qomponents also support dark-mode. To render qomponents using dark-mode wrap your addOn in a div and assign the
+   * 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/)
    */
@@ -120,7 +130,7 @@ function Example() {
   const [textAreaValue, setTextAreaValue] = React.useState('');
   const [selectValue, setSelectValue] = React.useState();
   const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
-  const [display, setDisplay] = React.useState('');
+  const [alertDisplay, setAlertDisplay] = React.useState('success');
   const [easeOfUse, setEaseOfUse] = React.useState(false);
   const [lookAndFeel, setLookAndFeel] = React.useState(false);
   const [speed, setSpeed] = React.useState(false);
@@ -130,9 +140,12 @@ function Example() {
   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 (dark-mode or light) as well as the theme
+    // 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 />
@@ -171,6 +184,7 @@ function Example() {
             <div className="labelWidth">Select theme:</div>
             {availableThemes.map((t) => (
               <Checkbox
+                key={t.value}
                 type="radio"
                 checked={theme === t.value}
                 value={t.value}
@@ -232,7 +246,7 @@ function Example() {
           </div>
           <div className="formRow">
             <div className="labelWidth">Website tools</div>
-            <div className="formElementWidth tw-border tw-rounded-sm">
+            <div className="formElementWidth border rounded-sm">
               <Tabs
                 stretchTabs={true}
                 activeTab={activeTab}
@@ -244,7 +258,7 @@ function Example() {
           </div>
           <div className="formRow">
             <div className="labelWidth">Get help</div>
-            <div className="formElementWidth tw-border tw-rounded-sm">
+            <div className="formElementWidth border rounded-sm">
               <Accordion
                 accordionItems={accordionItems}
                 value={help}
@@ -255,7 +269,7 @@ function Example() {
           </div>
           <div className="formRow">
             <div className="labelWidth">Tools</div>
-            <div className="formElementWidth formRow tw-border tw-rounded-sm tw-p-4 tw-flex tw-justify-center">
+            <div className="formElementWidth formRow border rounded-sm p-4 flex justify-center">
               <ToolbarButton
                 icon="fc-y-axis"
                 label="Analyzer"
@@ -265,15 +279,15 @@ function Example() {
                 tooltipOptions={{ position: 'top', delay: 0 }}
                 isHtmlTooltip={false}
                 popoverContent={
-                  <div className="tw-text-sm dark:tw-text-white">
-                    <p className="tw-p-2">Select file from your computer or google drive</p>
+                  <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 === 'tw-light' ? 'Dark Mode' : 'Light Mode'}
+                label={mode === 'light' ? 'Dark Mode' : 'Light Mode'}
                 testId="basic-toggler"
                 isActive={mode === 'tw-light'}
                 tooltipText="Toggle light and dark modes"
@@ -301,7 +315,7 @@ function Example() {
                   <Icon
                     icon="fc-more"
                     type="text"
-                    extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white tw-w-[18px]"
+                    extraClassNames="tw-text-sq-text-color dark:tw-text-sq-white w-[18px]"
                   />
                 }
                 containerTestId="basic-dropdown1"
@@ -326,7 +340,7 @@ function Example() {
               />
             </div>
           </div>
-          <div className="formRow tw-mt-4">
+          <div className="formRow mt-4">
             <div className="labelWidth">More information</div>
             <div className="formElementWidth">
               <ButtonWithPopover
@@ -339,8 +353,8 @@ function Example() {
                 tooltipPlacement="top"
                 hasArrow
                 isHtmlTooltip={false}>
-                <div className="tw-text-sm dark:tw-text-white tw-w-72 tw-p-4">
-                  <p className="tw-font-bold">What are plugins?</p>
+                <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
@@ -349,7 +363,7 @@ function Example() {
               </ButtonWithPopover>
             </div>
           </div>
-          <div className="formRow">
+          <div className="formRow mt-4">
             <div className="labelWidth">Accept terms</div>
             <div className="formElementWidth">
               <Button
@@ -381,24 +395,240 @@ function Example() {
               </Modal>
             </div>
           </div>
-          <div className="buttonRow">
-            <Button
-              label="Cancel"
-              onClick={() => {
-                setDisplay('cancel');
-              }}
-              extraClassNames="mr-10"
-            />
-            <Button
-              label="Submit"
-              onClick={() => {
-                setDisplay('success');
-              }}
-              variant="theme"
-            />
+          <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>
-          {display === 'success' && <div>submit button onClick function was called</div>}
-          {display === 'cancel' && <div>cancel button onClick function was called</div>}
         </div>
       </div>
     </div>

package/dist/example/src/index.css

@@ -1,5 +1,6 @@
 @import '@seeqdev/qomponents/dist/styles.css';
 @import '@fortawesome/fontawesome-free/css/all.css';
+@import 'tailwindcss';
 
 .tw-light {
   background-color: white;

package/dist/example/vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   css: {
     postcss: {
       plugins: [],