@seeqdev/qomponents 0.0.19 → 0.0.21

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/TooltipPerformance.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Tooltip } from './Tooltip';
+import Icon from '../Icon';
+export default {
+    title: 'Tooltip',
+};
+const renderManyTooltips = () => {
+    const colsCount = 100;
+    const rowCount = 100;
+    const rows = [];
+    const getCols = (rowId) => {
+        const cols = [];
+        for (let i = 0; i < colsCount; i++) {
+            cols.push(React.createElement("td", { key: 'col_' + i + '_row_' + rowId },
+                React.createElement(Tooltip, { text: `hello there ${i}` },
+                    React.createElement(Icon, { icon: "fc-sun" }))));
+        }
+        return cols;
+    };
+    for (let i = 0; i < rowCount; i++) {
+        rows.push(React.createElement("tr", { key: 'row_' + i }, ...getCols(i)));
+    }
+    return (React.createElement("table", null,
+        React.createElement("tbody", null, rows.map((row) => row))));
+};
+export const TooltipPerformance = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4 tw-text-center" }, renderManyTooltips())));
+};
+//# sourceMappingURL=TooltipPerformance.stories.js.map

package/dist/Tooltip/TooltipPerformance.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPerformance.stories.js","sourceRoot":"","sources":["../../src/Tooltip/TooltipPerformance.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,eAAe;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,QAAQ,GAAG,GAAG,CAAC;IACrB,MAAM,IAAI,GAAG,EAAE,CAAC;IAEhB,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,IAAI,CAAC,IAAI,CACP,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK;gBACnC,oBAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,EAAE;oBAC/B,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CACd,CACP,CACN,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,4BAAI,GAAG,EAAE,MAAM,GAAG,CAAC,OAAM,OAAO,CAAC,CAAC,CAAC,CAAM,CAAC,CAAC;KACtD;IACD,OAAO,CACL;QACE,mCAAQ,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,CAAS,CACjC,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,gDAAgD,IAAE,kBAAkB,EAAE,CAAO,CAC3F,CACJ,CAAC;AACJ,CAAC,CAAC"}

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/Tooltip/index.js

@@ -1,2 +1,3 @@
-export { Tooltip as default } from './Tooltip';
+export { Tooltip } from './Tooltip';
+export { QTip } from './Qtip';
 //# sourceMappingURL=index.js.map

package/dist/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "0.0.15",
+    "@seeqdev/qomponents": "0.0.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/example/src/Example.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Checkbox, Icon, Select, TextArea, TextField, Tooltip } from '@seeqdev/qomponents';
+import { Button, Checkbox, Icon, QTip, Select, TextArea, TextField } from '@seeqdev/qomponents';
 import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
 
 const availableThemes = [
@@ -43,110 +43,122 @@ function Example() {
 
   return (
     // outer-wrapper div that assigns the mode (dark-mode or light) as well as the theme
-    <div className={`backdrop  ${mode} ${theme}`}>
-      <div className="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>
-          <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.
-        </p>
-        <p>
-          Using FontAwesome? You can pass FontAwesome Icons to the qomponent Icon component
-          <Icon icon="fa-regular fa-face-smile" extraClassNames="ml-10" />
-        </p>
-        <div>
-          <Tooltip text="Toggle Dark/Light Mode." position="bottom">
-            <a href="#" onClick={() => setMode(mode === 'tw-light' ? 'tw-dark' : 'tw-light')}>
+    <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>
-          </Tooltip>
-        </div>
-        <div className="formRow">
-          <div className="labelWidth">Select theme:</div>
-          {availableThemes.map((t) => (
-            <Checkbox
-              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="provide a name"
-            extraClassNames="formElementWidth"
-            value={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)} />
+          </div>
+          <div className="formRow">
+            <div className="labelWidth">Select theme:</div>
+            {availableThemes.map((t) => (
               <Checkbox
-                checked={lookAndFeel}
-                label="Improved Look & Feel"
-                onChange={() => setLookAndFeel(!lookAndFeel)}
+                type="radio"
+                checked={theme === t.value}
+                value={t.value}
+                label={t.display}
+                onChange={(e) => setTheme(e.target.value)}
+                extraClassNames="mr-10"
               />
-              <Checkbox checked={speed} label="Speedy Development" onChange={() => setSpeed(!speed)} />
+            ))}
+          </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="buttonRow">
+            <Button
+              label="Cancel"
+              onClick={() => {
+                setDisplay('cancel');
+              }}
+              extraClassNames="mr-10"
+            />
+            <Button
+              label="Submit"
+              onClick={() => {
+                setDisplay('success');
+              }}
+              variant="theme"
+            />
+          </div>
+          {display === 'success' && <div>submit button onClick function was called</div>}
+          {display === 'cancel' && <div>cancel button onClick function was called</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="buttonRow">
-          <Button
-            label="Cancel"
-            onClick={() => {
-              setDisplay('cancel');
-            }}
-            extraClassNames="mr-10"
-          />
-          <Button
-            label="Submit"
-            onClick={() => {
-              setDisplay('success');
-            }}
-            variant="theme"
-          />
-        </div>
-        {display === 'success' && <div>submit button onClick function was called</div>}
-        {display === 'cancel' && <div>cancel button onClick function was called</div>}
       </div>
     </div>
   );

package/dist/example/src/index.css

@@ -1,93 +1,102 @@
 @import '@seeqdev/qomponents/dist/styles.css';
-@import "@fortawesome/fontawesome-free/css/all.css";
+@import '@fortawesome/fontawesome-free/css/all.css';
 
 .tw-light {
-    background-color: white;
-    color: #1a1a1a;
+  background-color: white;
+  color: #1a1a1a;
 }
 
 .tw-dark {
-    background-color: rgb(36, 36, 34);
-    color: rgb(194, 188, 176);
-}
-
-.backdrop {
-    display: flex;
-    height: 100vh;
-    width: 100vw;
-    align-items: center;
-    justify-content: center;
+  background-color: rgb(36, 36, 34);
+  color: rgb(194, 188, 176);
 }
 
 .formPanel {
-    align-items: center;
-    width: 500px;
-    display: flex;
+  align-items: center;
+  width: 500px;
+  display: flex;
 }
 
 .header {
-    font-size: larger;
-    font-weight: bold;
+  font-size: larger;
+  font-weight: bold;
+}
+
+.backdrop {
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.scroll-container {
+  margin: auto;
+  max-height: 100%;
+  overflow: auto;
 }
 
-.container {
-    display: flex;
-    gap: 20px;
-    flex-direction: column;
-    width: 500px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 30px;
+.flex-container {
+  margin-top: 30px;
+  margin-bottom: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 500px;
 }
 
 .formRow {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
 }
 
 .formColumn {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .buttonRow {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
 }
 
 .labelWidth {
-    width: 150px;
+  width: 150px;
 }
 
 .formElementWidth {
-    width: 350px;
+  width: 350px;
 }
 
 .mr-10 {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 .ml-10 {
-    margin-left: 10px;
+  margin-left: 10px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
 }
 
 /* styles for complexSelect*/
 .selectOptionWrapperDiv {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 34px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 34px;
 }
 
 .selectOptionDiv {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .selectOptionSubText {
-    font-size: smaller;
-    padding: 0;
-    margin-top: -6px;
+  font-size: smaller;
+  padding: 0;
+  margin-top: -6px;
 }
 
-/* end styles for complexSelect*/
+/* end styles for complexSelect*/

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import Button from './Button';
 import TextField from './TextField';
 import Checkbox from './Checkbox';
 import TextArea from './TextArea';
-import Tooltip from './Tooltip';
+import { QTip, Tooltip } from './Tooltip';
 import Icon from './Icon';
 import Select from './Select';
 export { Button };
@@ -12,3 +12,4 @@ export { Tooltip };
 export { Checkbox };
 export { Icon };
 export { Select };
+export { QTip };