@seeqdev/qomponents 0.0.155-react-19-v10 → 0.0.156

package/README.md

@@ -1,136 +1,136 @@
-<!-- markdownlint-disable-next-line -->
-<p align="center">
-  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
-</p>
-<h1 align="center">qomponents</h1>
-
-
-Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
-React component (more coming soon!)
-
-These components are used by Seeq's application and are made publicly available for Developers who want to expand
-the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
-experience. Every component comes fully styled (and with dark mode support).
-
-## Installation
-
-Seeq qomponents are available on npm.
-
-**npm:**
-
-```sh
-npm install @seeqdev/qomponents
-```
-
-**yarn:**
-
-```sh
-yarn add @seeqdev/qomponents
-```
-
-## Getting started with Seeq qomponents
-
-Prefer a more complete example? <br/>Checkout the example folder provided.
-It includes a ready to run example application. Start with the readme in the example folder to get up and running!
-
-Here is an example of a basic app using the `Button` component:
-
-```jsx
-import * as React from 'react';
-import {Button} from '@seeqdev/qomponents';
-
-function App() {
-  return <Button variant="theme" label="Seeq Rocks" />;
-}
-```
-
-To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
-
-```css
-@import '@seeqdev/qomponents/dist/styles.css';
-```
-
-<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 />
-<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
-TextArea, as well as Select.
-
-## Frequently asked questions
-
-<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
-
-Webpack needs a little help :)  
-Add the following to the <code>rules</code> array in your <code>webpack.config</code>
-
-```
-  {
-    test: /@?(seeqdev).*\.(ts|js)x?$/, 
-    loader:'babel-loader'
-  },
-  {
-    test: /\.(woff|woff2|eot|ttf|otf)$/i,
-    type: 'asset/resource',
-  }
-```
-
-If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:
-
-```
-@import '~@seeqdev/qomponents/dist/styles.css';
-@import '~@fortawesome/fontawesome-free/css/all.css';
-```
-
-<h3>2) How do I get my Button to be green?</h3>
-
-The colors of your qomponents are controlled by the "theme". </br>
-If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
-Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
-also be applied to the body tag.
-
-```html
-
-<div class="color_analysis">
-  ... your application here
-</div>
-
-```
-
-There are 3 themes available:
-
-| Theme    | Color  | Class          | Example                |
-|:---------|:-------|:---------------|:-----------------------|
-| Topic    | blue   | color_topic    | class="color_topic"    |
-| Analysis | green  | color_analysis | class="color_analysis" |
-| DataLab  | orange | color_datalab  | class="color_datalab"  |
-
-<h3>3) How do I use Fontawesome Icons?</h3>
-Before you can use Fontawesome icons you must install FontAwesome.
-
-```
-npm install --save @fortawesome/fontawesome-free
-```
-
-Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
-add the following import to your main css file:
-
-```
-@import "@fortawesome/fontawesome-free/css/all.css";
-```
-
-If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
-required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
-be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
-
-For Example:
-
-```
-@import "@fortawesome/fontawesome-free/css/fontawesome.css";
-@import "@fortawesome/fontawesome-free/css/solid.css";
-```
-
-<h3>4) How can I see all the props that are available?</h3>
-Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
+<!-- markdownlint-disable-next-line -->
+<p align="center">
+  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
+</p>
+<h1 align="center">qomponents</h1>
+
+
+Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
+React component (more coming soon!)
+
+These components are used by Seeq's application and are made publicly available for Developers who want to expand
+the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
+experience. Every component comes fully styled (and with dark mode support).
+
+## Installation
+
+Seeq qomponents are available on npm.
+
+**npm:**
+
+```sh
+npm install @seeqdev/qomponents
+```
+
+**yarn:**
+
+```sh
+yarn add @seeqdev/qomponents
+```
+
+## Getting started with Seeq qomponents
+
+Prefer a more complete example? <br/>Checkout the example folder provided.
+It includes a ready to run example application. Start with the readme in the example folder to get up and running!
+
+Here is an example of a basic app using the `Button` component:
+
+```jsx
+import * as React from 'react';
+import {Button} from '@seeqdev/qomponents';
+
+function App() {
+  return <Button variant="theme" label="Seeq Rocks" />;
+}
+```
+
+To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
+
+```css
+@import '@seeqdev/qomponents/dist/styles.css';
+```
+
+<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 />
+<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
+TextArea, as well as Select.
+
+## Frequently asked questions
+
+<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
+
+Webpack needs a little help :)  
+Add the following to the <code>rules</code> array in your <code>webpack.config</code>
+
+```
+  {
+    test: /@?(seeqdev).*\.(ts|js)x?$/, 
+    loader:'babel-loader'
+  },
+  {
+    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+    type: 'asset/resource',
+  }
+```
+
+If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:
+
+```
+@import '~@seeqdev/qomponents/dist/styles.css';
+@import '~@fortawesome/fontawesome-free/css/all.css';
+```
+
+<h3>2) How do I get my Button to be green?</h3>
+
+The colors of your qomponents are controlled by the "theme". </br>
+If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
+Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
+also be applied to the body tag.
+
+```html
+
+<div class="color_analysis">
+  ... your application here
+</div>
+
+```
+
+There are 3 themes available:
+
+| Theme    | Color  | Class          | Example                |
+|:---------|:-------|:---------------|:-----------------------|
+| Topic    | blue   | color_topic    | class="color_topic"    |
+| Analysis | green  | color_analysis | class="color_analysis" |
+| DataLab  | orange | color_datalab  | class="color_datalab"  |
+
+<h3>3) How do I use Fontawesome Icons?</h3>
+Before you can use Fontawesome icons you must install FontAwesome.
+
+```
+npm install --save @fortawesome/fontawesome-free
+```
+
+Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
+add the following import to your main css file:
+
+```
+@import "@fortawesome/fontawesome-free/css/all.css";
+```
+
+If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
+required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
+be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
+
+For Example:
+
+```
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+```
+
+<h3>4) How can I see all the props that are available?</h3>
+Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
 folder. This file contains all available properties including some descriptive text that tells you more about them.

package/dist/Accordion/Accordion.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllAccordionVariants: () => React.JSX.Element;
+export declare const AllAccordionVariants: () => JSX.Element;

package/dist/Alert/Alert.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllAlertsVariants: () => React.JSX.Element;
+export declare const AllAlertsVariants: () => JSX.Element;

package/dist/Alert/Alert.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 interface Props {
     children: React.ReactNode;

package/dist/Button/Button.stories.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllButtonVariants: () => React.JSX.Element;
-export declare const ButtonWithTooltip: () => React.JSX.Element;
-export declare const ButtonWithIcon: () => React.JSX.Element;
-export declare const DisabledButton: () => React.JSX.Element;
+export declare const AllButtonVariants: () => JSX.Element;
+export declare const ButtonWithTooltip: () => JSX.Element;
+export declare const ButtonWithIcon: () => JSX.Element;
+export declare const DisabledButton: () => JSX.Element;

package/dist/Button/Button.types.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps {
     /** function to call when clicking the button (takes no parameters) */
     onClick?: (e: React.MouseEvent) => void;
     /** label translation key on the button (i.e. SUBMIT) */
-    label?: string | React.JSX.Element | React.ReactNode;
+    label?: string | JSX.Element | React.ReactNode;
     variant?: ButtonVariant;
     /** type of button (i.e button/submit/reset, default is button) */
     type?: ButtonType;

package/dist/ButtonGroup/ButtonGroup.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllButtonGroups: () => React.JSX.Element;
+export declare const AllButtonGroups: () => JSX.Element;

package/dist/ButtonGroup/ButtonGroup.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '../Button/Button.types';
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 /**

package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllButtonWithDropdownVariants: () => React.JSX.Element;
+export declare const AllButtonWithDropdownVariants: () => JSX.Element;

package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 interface DropdownSubItem {
     /** icon class to be used with the dropdown subitems - if available (i.e. 'fc-zoom')  */

package/dist/ButtonWithPopover/ButtonWithPopover.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllButtonWithPopoverVariants: () => React.JSX.Element;
+export declare const AllButtonWithPopoverVariants: () => JSX.Element;

package/dist/Carousel/Carousel.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllCarousels: () => React.JSX.Element;
+export declare const AllCarousels: () => JSX.Element;

package/dist/Carousel/Carousel.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Properties for the Carousel component.
  */

package/dist/Checkbox/Checkbox.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllCheckboxes: () => React.JSX.Element;
+export declare const AllCheckboxes: () => JSX.Element;

package/dist/Checkbox/Checkbox.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export interface CheckboxProps extends TooltipComponentProps {

package/dist/Collapse/Collapse.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllCollapses: () => React.JSX.Element;
+export declare const AllCollapses: () => JSX.Element;

package/dist/Collapse/Collapse.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CollapseProps {
     isVisible: boolean;
     children: React.ReactNode;

package/dist/Icon/Icon.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllIcons: () => React.JSX.Element;
+export declare const AllIcons: () => JSX.Element;

package/dist/Icon/Icon.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
 export type IconType = (typeof iconTypes)[number];

package/dist/InputGroup/InputGroup.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllTextFields: () => React.JSX.Element;
+export declare const AllTextFields: () => JSX.Element;

package/dist/InputGroup/InputGroup.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '../Button/Button.types';
 import { InputLengthStyleProps, TextFieldProps } from '../TextField/TextField.types';
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';

package/dist/ProgressBar/ProgressBar.stories.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllProgressBars: () => React.JSX.Element;
+export declare const AllProgressBars: () => JSX.Element;
+export declare const WaveAnimationShowcase: () => JSX.Element;
+export declare const HeightCustomizationShowcase: () => JSX.Element;

package/dist/ProgressBar/ProgressBar.types.d.ts

@@ -1,4 +1,8 @@
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * Animation types for progress indicators
+ */
+export type ProgressAnimationType = 'default' | 'wave' | 'none';
 /**
  * The ProgressBar component displays a visual representation of a progress value.
  */
@@ -15,6 +19,8 @@ export interface ProgressIndicatorProps extends TooltipComponentProps {
     label?: string;
     /** Additional classes to apply to the label. */
     labelClasses?: string;
+    /** Animation type for the progress indicator */
+    animationType?: ProgressAnimationType;
 }
 export interface ProgressBarProps {
     /** The indicator values */
@@ -23,8 +29,12 @@ export interface ProgressBarProps {
     max?: number;
     /** Additional classes to apply to the progress bar container. */
     containerExtraClasses?: string;
+    /** Additional classes to apply to the progress bar for styling (including height). */
+    extraClassNames?: string;
     /** The test id for the progress bar. */
     testId?: string;
     /** The label to display when the progress bar has a value of zero. */
     zeroValueLabel?: string;
+    /** Animation type for all progress indicators (can be overridden per indicator) */
+    animationType?: ProgressAnimationType;
 }

package/dist/ProgressBar/index.d.ts

@@ -1 +1,2 @@
 export { default } from './ProgressBar';
+export type { ProgressBarProps, ProgressIndicatorProps, ProgressAnimationType } from './ProgressBar.types';

package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllSeeqActionDropdownVariants: () => React.JSX.Element;
+export declare const AllSeeqActionDropdownVariants: () => JSX.Element;

package/dist/SeeqActionDropdown/SeeqActionDropdown.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export interface SeeqActionDropdownItems {
     id?: string;

package/dist/Select/Select.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllSelectVariants: () => React.JSX.Element;
+export declare const AllSelectVariants: () => JSX.Element;

package/dist/Slider/Slider.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllSliders: () => React.JSX.Element;
+export declare const AllSliders: () => JSX.Element;

package/dist/Slider/Slider.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface SliderProps {
     disabled?: boolean;
     onValueChange?: (value: number[]) => void;

package/dist/SvgIcon/SvgIcon.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllIcons: () => React.JSX.Element;
+export declare const AllIcons: () => JSX.Element;

package/dist/SvgIcon/SvgIcon.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 export declare const svgIconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success", "default"];
 export type SvgIconType = (typeof svgIconTypes)[number];

package/dist/Tabs/Tabs.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllTabsVariants: () => React.JSX.Element;
+export declare const AllTabsVariants: () => JSX.Element;

package/dist/Tabs/Tabs.types.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface TabsProps {
     extraClassNames?: string;
     defaultActiveTab?: string;
@@ -11,7 +10,7 @@ export interface TabsProps {
     tabs: {
         label: string;
         id: string;
-        content: React.JSX.Element;
+        content: JSX.Element;
         icon?: string;
         testId?: string;
         tabExtraClassNames?: string;

package/dist/TextArea/TextArea.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllTextAreas: () => React.JSX.Element;
+export declare const AllTextAreas: () => JSX.Element;

package/dist/TextArea/TextArea.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormControlElement } from '../types';
 export interface TextAreaProps {
     /** extra class names to be placed on the TextArea component */

package/dist/TextField/TextField.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllTextFields: () => React.JSX.Element;
+export declare const AllTextFields: () => JSX.Element;

package/dist/TextField/TextField.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
 import { FormControlElement, InputGroupPlacement } from '../types';
 export interface TextFieldProps extends TooltipComponentProps {

package/dist/ToolbarButton/ToolbarButton.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllToolbarButtonVariants: () => React.JSX.Element;
+export declare const AllToolbarButtonVariants: () => JSX.Element;

package/dist/Tooltip/QTip.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllQTips: () => React.JSX.Element;
+export declare const AllQTips: () => JSX.Element;

package/dist/Tooltip/QTipPerformance.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const QtipPerformance: () => React.JSX.Element;
+export declare const QtipPerformance: () => JSX.Element;

package/dist/Tooltip/Tooltip.stories.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const AllTooltips: () => React.JSX.Element;
+export declare const AllTooltips: () => JSX.Element;