@seeqdev/qomponents 0.0.115 → 0.0.116

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/Collapse/Collapse.js

@@ -0,0 +1,20 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+const Collapse = ({ isVisible, children }) => {
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
+    useEffect(() => {
+        if (contentRef.current) {
+            setContentHeight(contentRef.current?.scrollHeight);
+        }
+    }, [children]);
+    const styles = useSpring({
+        opacity: isVisible ? 1 : 0,
+        height: isVisible ? contentHeight : 0,
+        y: isVisible ? 0 : 24,
+    });
+    return (React.createElement(animated.div, { style: styles },
+        React.createElement("div", { ref: contentRef }, children)));
+};
+export default Collapse;
+//# sourceMappingURL=Collapse.js.map

package/dist/Collapse/Collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGxD,MAAM,QAAQ,GAA2C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnF,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,gBAAgB,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;SACpD;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,MAAM,MAAM,GAAG,SAAS,CAAC;QACvB,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1B,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,QAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,MAAM;QACzB,6BAAK,GAAG,EAAE,UAAU,IAAG,QAAQ,CAAO,CACzB,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Collapse/Collapse.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Collapse from './Collapse';
+import { QTip } from '../Tooltip';
+import Button from '../Button';
+export default {
+    title: 'Collapse',
+};
+export const AllCollapses = () => {
+    const [isVisible, setIsVisible] = React.useState(true);
+    const renderChild = () => (React.createElement("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white" },
+        React.createElement("p", { className: "tw-mb-5 tw-text-[15px] tw-leading-normal" }, "This is a content to be shown when the collapse is visible. Clice the button above to toggle it"),
+        React.createElement(Button, { variant: "outline", label: "Save data" })));
+    const renderAllVariations = () => (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "tw-p-4 light" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Button, { variant: "theme", label: "Toggle Collapse", onClick: () => setIsVisible(!isVisible) }),
+                React.createElement(Collapse, { isVisible: isVisible }, renderChild()))),
+        React.createElement("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background" },
+            React.createElement("div", { className: "tw-p-4" },
+                React.createElement(Button, { variant: "theme", label: "Toggle Collapse", onClick: () => setIsVisible(!isVisible) }),
+                React.createElement(Collapse, { isVisible: isVisible }, renderChild())))));
+    return (React.createElement("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4" },
+        React.createElement(QTip, null),
+        React.createElement("div", { className: "color_topic" },
+            React.createElement("b", null, "Topic Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_analysis" },
+            React.createElement("b", null, "Analysis Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_datalab" },
+            React.createElement("b", null, "Datalab Colors"),
+            renderAllVariations()),
+        React.createElement("div", { className: "color_vantage" },
+            React.createElement("b", null, "Vantage Colors"),
+            renderAllVariations())));
+};
+//# sourceMappingURL=Collapse.stories.js.map

package/dist/Collapse/Collapse.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.stories.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,6BAAK,SAAS,EAAC,6CAA6C;QAC1D,2BAAG,SAAS,EAAC,0CAA0C,sGAEnD;QACJ,oBAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,WAAW,GAAG,CAC1C,CACP,CAAC;IACF,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC;QACE,6BAAK,SAAS,EAAC,cAAc;YAC3B,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GAAI;gBAC3F,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,IAAG,WAAW,EAAE,CAAY,CACtD,CACF;QAEN,6BAAK,SAAS,EAAC,yCAAyC;YACtD,6BAAK,SAAS,EAAC,QAAQ;gBACrB,oBAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,GAAI;gBAC3F,oBAAC,QAAQ,IAAC,SAAS,EAAE,SAAS,IAAG,WAAW,EAAE,CAAY,CACtD,CACF,CACL,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,IAAI,OAAG;QACR,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Collapse/Collapse.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Collapse from './Collapse';
+describe('Collapse component', () => {
+    test('renders children when visible', () => {
+        render(React.createElement(Collapse, { isVisible: true },
+            React.createElement("div", { "data-testid": "content" }, "Content")));
+        expect(screen.getByTestId('content')).toBeVisible();
+    });
+    test('does not render children when not visible', () => {
+        render(React.createElement(Collapse, { isVisible: false },
+            React.createElement("div", { "data-testid": "content" }, "Content")));
+        expect(screen.queryByTestId('content')).not.toBeVisible();
+    });
+    test('applies correct styles when not visible', () => {
+        render(React.createElement(Collapse, { isVisible: false },
+            React.createElement("div", { "data-testid": "content" }, "Content")));
+        const animatedDiv = screen.getByTestId('content').parentElement?.parentElement;
+        expect(animatedDiv).toHaveStyle('opacity: 0');
+        expect(animatedDiv).toHaveStyle('height: 0');
+    });
+});
+//# sourceMappingURL=Collapse.test.js.map

package/dist/Collapse/Collapse.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.test.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,2BAA2B,CAAC;AACnC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACzC,MAAM,CACJ,oBAAC,QAAQ,IAAC,SAAS,EAAE,IAAI;YACvB,4CAAiB,SAAS,cAAc,CAC/B,CACZ,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,2CAA2C,EAAE,GAAG,EAAE;QACrD,MAAM,CACJ,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK;YACxB,4CAAiB,SAAS,cAAc,CAC/B,CACZ,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,yCAAyC,EAAE,GAAG,EAAE;QACnD,MAAM,CACJ,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK;YACxB,4CAAiB,SAAS,cAAc,CAC/B,CACZ,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC;QAC/E,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Collapse/Collapse.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Collapse.types.js.map

package/dist/Collapse/Collapse.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.types.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.types.ts"],"names":[],"mappings":""}

package/dist/Collapse/index.js

@@ -0,0 +1,2 @@
+export { default } from './Collapse';
+//# sourceMappingURL=index.js.map

package/dist/Collapse/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Collapse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

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

@@ -1,12 +1,29 @@
-export interface ProgressBarProps {
-    /** The progress value, between 0 and 100. */
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * The ProgressBar component displays a visual representation of a progress value.
+ */
+interface ProgressIndicatorProps extends TooltipComponentProps {
+    /** Additional classes to apply to the progress indicator. */
+    extraClasses?: string;
+    /** The test id for the progress indicator. */
+    testId?: string;
+    /** The value of the progress indicator, between 0 and max. */
     value: number;
-    /** The label to display above the progress bar. */
-    label: string;
+    /** The color of the progress indicator.  e.g. #ffffff */
+    color?: string;
+    /** The label to display on the progress indicator. */
+    label?: string;
+    /** Additional classes to apply to the label. */
+    labelClasses?: string;
+}
+export interface ProgressBarProps {
+    /** The indicator values */
+    values: ProgressIndicatorProps[];
     /** The maximum value of the progress bar. */
     max?: number;
-    /** Additional classes to apply to the progress bar. */
-    extraClasses?: string;
+    /** Additional classes to apply to the progress bar container. */
+    containerExtraClasses?: string;
     /** The test id for the progress bar. */
     testId?: string;
 }
+export {};

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.72",
-    "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.72",
+    "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"
+  }
+}