@seeqdev/qomponents 0.0.20 → 0.0.22

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/Button/Button.types.d.ts

@@ -34,6 +34,10 @@ export interface ButtonProps {
     stopPropagation?: boolean;
     /** a tooltip for the button */
     tooltip?: string;
+    /** true if the provided tooltip text should be rendered as HTML */
+    isHtmlTooltip?: boolean;
+    /** optional testId applied to the tooltip - useful for testing */
+    tooltipTestId?: string;
     /** options for the tooltip */
     tooltipOptions?: Omit<TooltipProps, 'text'>;
     /** if provided, determines whether to prevent the blur event from occurring onMouseDown*/

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

@@ -25,14 +25,12 @@ export interface IconProps {
     customId?: string;
     /** text to display on icon tooltip */
     tooltip?: string;
-    /** formatted text to display on icon tooltip */
-    formattedTooltip?: any;
     /** number of milliseconds to wait before showing a tooltip on-hover */
     tooltipDelay?: number;
     tooltipPlacement?: TooltipPosition;
+    /** true if the provided tooltip text should be rendered as HTML */
+    isHtmlTooltip?: boolean;
+    /** optional testId applied to the tooltip - useful for testing */
+    tooltipTestId?: string;
     number?: number;
-    /** set this to true if the icon is inside a <SingletonTooltip> element. In this case the tooltip and placement
-     * information will be passed on as data attributes and a singleton tooltip element will be reused for this icon.
-     * This is recommended for improved performance when there are many icons with tooltips. */
-    hasExternalTooltipHandler?: boolean;
 }

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllQTips: () => JSX.Element;

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

@@ -0,0 +1,13 @@
+import { TooltipPosition } from './Tooltip.types';
+export interface QTipDataAttributes {
+    /** text displayed by the tooltip */
+    'data-qtip-text': string;
+    /** one of TooltipPosition */
+    'data-qtip-placement'?: TooltipPosition;
+    /** set to true to render the provided text as html */
+    'data-qtip-is-html'?: boolean;
+    /** number of milliseconds to wait before showing a tooltip on-hover */
+    'data-qtip-delay'?: number;
+    /** useful for testing; sets the provided string as the data-testid attribute of the tooltip */
+    'data-qtip-testid'?: string;
+}

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const QtipPerformance: () => JSX.Element;

package/dist/Tooltip/Qtip.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * QTip
+ *
+ * QTip is a Singleton Tooltip component that guarantees high-performance and reduces component wrappers!
+ *
+ * QTip is used by all qomponents that support the display of tooltips.
+ * If you want to add a Tooltip to your application you can do so by adding the following html data-attributes:
+ *
+ *    'data-qtip-text': the tooltip text to display; this can also be a string containing valid HTML
+ *    'data-qtip-placement': one of TooltipPosition (top, bottom, right, or left)
+ *    'data-qtip-is-html': set this to true if you provided a text that contains HTML,
+ *    'data-qtip-delay': this can be used to delay the showing of the tooltip. this should be a number representing
+ *    the # of milliseconds you want to delay the tooltip for.
+ *    'data-qtip-testid': use this attribute to provide a value for a data-testid of your tooltip; this is useful
+ *    for tests
+ *
+ * In order for QTip to be able to display Tooltips you must add the QTip component to your top-most component
+ * (often that's App or Application) - simply add:
+ *
+ *    <QTip />
+ *
+ * and enjoy beautiful & performant tooltips!
+ */
+export declare const QTip: React.FunctionComponent<any>;

package/dist/Tooltip/Tooltip.d.ts

@@ -2,6 +2,12 @@ import React from 'react';
 import '../styles.css';
 import { TooltipProps } from './Tooltip.types';
 /**
- * This component displays a Tooltip for the provided children.
+ * @deprecated
+ * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
+ * See @QTip for more info!
+ *
+ * This component displays a Tooltip for the provided children. It is a CSS only tooltip that will not display
+ * correctly if a parent element has an overflow CSS property assigned. Please use QTip to ensure your tooltips
+ * display correctly.
  */
 export declare const Tooltip: React.FunctionComponent<TooltipProps>;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const TooltipPerformance: () => JSX.Element;

package/dist/Tooltip/index.d.ts

@@ -1 +1,2 @@
-export { Tooltip as default } from './Tooltip';
+export { Tooltip } from './Tooltip';
+export { QTip } from './Qtip';

package/dist/example/.eslintrc.cjs

@@ -1,14 +1,14 @@
-module.exports = {
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': 'warn',
-  },
-}
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

package/dist/example/README.md

@@ -1,33 +1,33 @@
-<!-- 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-form example</h1>
-
-Time to see qomponents in action!
-
-This is a simple form example that showcases Seeq's qomponents library.
-
-This application is built using [vite](https://vitejs.dev/).
-
-## Installation
-
-First, be sure to install all dependencies (React, and qomponents):
-
-```sh
-npm install
-```
-
-Once you've installed all dependencies you can start up a dev server and observer any changes you make in real-time:
-
-```sh
-npm run dev
-```
-
-## Tip
-
-All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
-components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).
-
-
-
+<!-- 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-form example</h1>
+
+Time to see qomponents in action!
+
+This is a simple form example that showcases Seeq's qomponents library.
+
+This application is built using [vite](https://vitejs.dev/).
+
+## Installation
+
+First, be sure to install all dependencies (React, and qomponents):
+
+```sh
+npm install
+```
+
+Once you've installed all dependencies you can start up a dev server and observer any changes you make in real-time:
+
+```sh
+npm run dev
+```
+
+## Tip
+
+All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
+components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).
+
+
+

package/dist/example/index.html

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>qomponents form example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>qomponents form example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/dist/example/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "0.0.20",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "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"
-  }
-}
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@seeqdev/qomponents": "0.0.20",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "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"
+  }
+}