@seeqdev/qomponents 0.0.70 → 0.0.71

package/dist/example/src/Example.tsx

@@ -1,167 +1,167 @@
-import React from 'react';
-import { Button, Checkbox, Icon, QTip, Select, TextArea, TextField } 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' },
-];
-
-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 dark-mode. To render qomponents using dark-mode 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');
-
-  /**
-   * 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 [display, setDisplay] = React.useState('');
-  const [easeOfUse, setEaseOfUse] = React.useState(false);
-  const [lookAndFeel, setLookAndFeel] = React.useState(false);
-  const [speed, setSpeed] = React.useState(false);
-
-  return (
-    // outer-wrapper div that assigns the mode (dark-mode 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
-                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="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>
-    </div>
-  );
-}
-
-export default Example;
+import React from 'react';
+import { Button, Checkbox, Icon, QTip, Select, TextArea, TextField } 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' },
+];
+
+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 dark-mode. To render qomponents using dark-mode 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');
+
+  /**
+   * 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 [display, setDisplay] = React.useState('');
+  const [easeOfUse, setEaseOfUse] = React.useState(false);
+  const [lookAndFeel, setLookAndFeel] = React.useState(false);
+  const [speed, setSpeed] = React.useState(false);
+
+  return (
+    // outer-wrapper div that assigns the mode (dark-mode 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
+                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="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>
+    </div>
+  );
+}
+
+export default Example;

package/dist/example/src/index.css

@@ -1,102 +1,102 @@
-@import '@seeqdev/qomponents/dist/styles.css';
-@import '@fortawesome/fontawesome-free/css/all.css';
-
-.tw-light {
-  background-color: white;
-  color: #1a1a1a;
-}
-
-.tw-dark {
-  background-color: rgb(36, 36, 34);
-  color: rgb(194, 188, 176);
-}
-
-.formPanel {
-  align-items: center;
-  width: 500px;
-  display: flex;
-}
-
-.header {
-  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;
-}
-
-.flex-container {
-  margin-top: 30px;
-  margin-bottom: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 500px;
-}
-
-.formRow {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 15px;
-}
-
-.formColumn {
-  display: flex;
-  flex-direction: column;
-}
-
-.buttonRow {
-  display: flex;
-  justify-content: center;
-}
-
-.labelWidth {
-  width: 150px;
-}
-
-.formElementWidth {
-  width: 350px;
-}
-
-.mr-10 {
-  margin-right: 10px;
-}
-
-.ml-10 {
-  margin-left: 10px;
-}
-
-.mb-10 {
-  margin-bottom: 10px;
-}
-
-/* styles for complexSelect*/
-.selectOptionWrapperDiv {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 34px;
-}
-
-.selectOptionDiv {
-  display: flex;
-  flex-direction: column;
-}
-
-.selectOptionSubText {
-  font-size: smaller;
-  padding: 0;
-  margin-top: -6px;
-}
-
-/* end styles for complexSelect*/
+@import '@seeqdev/qomponents/dist/styles.css';
+@import '@fortawesome/fontawesome-free/css/all.css';
+
+.tw-light {
+  background-color: white;
+  color: #1a1a1a;
+}
+
+.tw-dark {
+  background-color: rgb(36, 36, 34);
+  color: rgb(194, 188, 176);
+}
+
+.formPanel {
+  align-items: center;
+  width: 500px;
+  display: flex;
+}
+
+.header {
+  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;
+}
+
+.flex-container {
+  margin-top: 30px;
+  margin-bottom: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 500px;
+}
+
+.formRow {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 15px;
+}
+
+.formColumn {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttonRow {
+  display: flex;
+  justify-content: center;
+}
+
+.labelWidth {
+  width: 150px;
+}
+
+.formElementWidth {
+  width: 350px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+/* styles for complexSelect*/
+.selectOptionWrapperDiv {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 34px;
+}
+
+.selectOptionDiv {
+  display: flex;
+  flex-direction: column;
+}
+
+.selectOptionSubText {
+  font-size: smaller;
+  padding: 0;
+  margin-top: -6px;
+}
+
+/* end styles for complexSelect*/

package/dist/example/src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import Example from './Example';
-import './index.css';
-
-ReactDOM.createRoot(document.body as HTMLElement).render(
-  <React.StrictMode>
-    <Example />
-  </React.StrictMode>,
-);
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Example from './Example';
+import './index.css';
+
+ReactDOM.createRoot(document.body as HTMLElement).render(
+  <React.StrictMode>
+    <Example />
+  </React.StrictMode>,
+);

package/dist/example/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/dist/example/tsconfig.json

@@ -1,33 +1,33 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "src"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/dist/example/tsconfig.node.json

@@ -1,12 +1,12 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts"
-  ]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}