@seeqdev/qomponents 0.0.171 → 0.0.172

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/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,32 +1,32 @@
-{
-  "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.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.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"
-  }
-}
+{
+  "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.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.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/ComplexSelectExample.tsx

@@ -1,81 +1,81 @@
-import React from 'react';
-import { Icon, Select } from '@seeqdev/qomponents';
-
-export interface SelectOption {
-  id: string;
-  label: string;
-  color: string;
-  asset: string;
-  type: 'SCALAR' | 'STRING' | 'NUMERIC';
-}
-
-const options: SelectOption[] = [
-  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
-  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
-  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
-];
-
-interface ComplexSelectExampleProps {
-  onChange: (selectedOption: SelectOption) => void;
-  value: SelectOption | undefined;
-}
-
-function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
-  const getIcon = (type: string) => {
-    switch (type) {
-      case 'STRING':
-        return 'fa fa-font';
-      case 'SCALAR':
-        return 'fc-scalar';
-      default:
-        return 'fc-series';
-    }
-  };
-  /**
-   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
-   * to style the select option display.
-   *
-   * You can use the same function to format the selected value or use a different one (sometimes having a separate
-   * function is helpful if you want to limit the space that is taken up by the selected option).
-   *
-   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
-   * as how to display the properties of the select option
-   */
-  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
-    return (
-      <div className="selectOptionWrapperDiv">
-        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
-        <div className="selectOptionDiv">
-          <div className="selectOption">
-            <strong>{optionValue.label}</strong>
-          </div>
-          <div className="selectOptionSubText">{optionValue.asset}</div>
-        </div>
-      </div>
-    );
-  };
-  const getOptionValue = (option: SelectOption) => {
-    return option.id;
-  };
-
-  return (
-    // use the getOptionLabel function to provide a custom render function that determines how the select options
-    // are displayed
-    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
-    // option is displayed
-    <Select
-      placeholder="formatted select options"
-      extraClassNames="formElementWidth"
-      options={options}
-      value={value}
-      getOptionLabel={getOptionLabel}
-      getOptionValue={getOptionValue}
-      getSelectedValueLabel={getOptionLabel}
-      onChange={(selectedOption: SelectOption) => {
-        onChange(selectedOption);
-      }}
-    />
-  );
-}
-
-export default ComplexSelectExample;
+import React from 'react';
+import { Icon, Select } from '@seeqdev/qomponents';
+
+export interface SelectOption {
+  id: string;
+  label: string;
+  color: string;
+  asset: string;
+  type: 'SCALAR' | 'STRING' | 'NUMERIC';
+}
+
+const options: SelectOption[] = [
+  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
+  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
+  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
+];
+
+interface ComplexSelectExampleProps {
+  onChange: (selectedOption: SelectOption) => void;
+  value: SelectOption | undefined;
+}
+
+function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'STRING':
+        return 'fa fa-font';
+      case 'SCALAR':
+        return 'fc-scalar';
+      default:
+        return 'fc-series';
+    }
+  };
+  /**
+   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
+   * to style the select option display.
+   *
+   * You can use the same function to format the selected value or use a different one (sometimes having a separate
+   * function is helpful if you want to limit the space that is taken up by the selected option).
+   *
+   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
+   * as how to display the properties of the select option
+   */
+  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
+    return (
+      <div className="selectOptionWrapperDiv">
+        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
+        <div className="selectOptionDiv">
+          <div className="selectOption">
+            <strong>{optionValue.label}</strong>
+          </div>
+          <div className="selectOptionSubText">{optionValue.asset}</div>
+        </div>
+      </div>
+    );
+  };
+  const getOptionValue = (option: SelectOption) => {
+    return option.id;
+  };
+
+  return (
+    // use the getOptionLabel function to provide a custom render function that determines how the select options
+    // are displayed
+    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
+    // option is displayed
+    <Select
+      placeholder="formatted select options"
+      extraClassNames="formElementWidth"
+      options={options}
+      value={value}
+      getOptionLabel={getOptionLabel}
+      getOptionValue={getOptionValue}
+      getSelectedValueLabel={getOptionLabel}
+      onChange={(selectedOption: SelectOption) => {
+        onChange(selectedOption);
+      }}
+    />
+  );
+}
+
+export default ComplexSelectExample;