@seeqdev/qomponents 0.0.171 → 0.0.173
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +135 -135
- package/dist/ButtonWithPopover/ButtonWithPopover.js +2 -2
- package/dist/Icon/Icon.js +1 -1
- package/dist/Icon/Icon.stories.js +1 -1
- package/dist/Icon/Icon.stories.js.map +1 -1
- package/dist/Modal/Modal.js +3 -3
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/SvgIcon/SvgIcon.js +1 -1
- package/dist/Tooltip/Tooltip.js +5 -5
- package/dist/example/.eslintrc.cjs +14 -14
- package/dist/example/README.md +33 -33
- package/dist/example/index.html +13 -13
- package/dist/example/package.json +32 -32
- package/dist/example/src/ComplexSelectExample.tsx +81 -81
- package/dist/example/src/Example.tsx +638 -638
- package/dist/example/src/index.css +103 -103
- package/dist/example/src/main.tsx +10 -10
- package/dist/example/src/vite-env.d.ts +1 -1
- package/dist/example/tsconfig.json +33 -33
- package/dist/example/tsconfig.node.json +12 -12
- package/dist/example/vite.config.ts +13 -13
- package/dist/index.esm.js +17 -15
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +17 -15
- package/dist/index.js.map +1 -1
- package/dist/src/Alert/Alert.stories.d.ts +1 -0
- package/dist/src/Alert/Alert.types.d.ts +1 -1
- package/dist/src/Tabs/Tabs.types.d.ts +5 -0
- package/dist/styles.css +3887 -3868
- package/package.json +89 -89
package/README.md
CHANGED
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
<!-- markdownlint-disable-next-line -->
|
|
2
|
-
<p align="center">
|
|
3
|
-
<img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
|
|
4
|
-
</p>
|
|
5
|
-
<h1 align="center">qomponents</h1>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
|
|
9
|
-
React component (more coming soon!)
|
|
10
|
-
|
|
11
|
-
These components are used by Seeq's application and are made publicly available for Developers who want to expand
|
|
12
|
-
the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
|
|
13
|
-
experience. Every component comes fully styled (and with dark mode support).
|
|
14
|
-
|
|
15
|
-
## Installation
|
|
16
|
-
|
|
17
|
-
Seeq qomponents are available on npm.
|
|
18
|
-
|
|
19
|
-
**npm:**
|
|
20
|
-
|
|
21
|
-
```sh
|
|
22
|
-
npm install @seeqdev/qomponents
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
**yarn:**
|
|
26
|
-
|
|
27
|
-
```sh
|
|
28
|
-
yarn add @seeqdev/qomponents
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Getting started with Seeq qomponents
|
|
32
|
-
|
|
33
|
-
Prefer a more complete example? <br/>Checkout the example folder provided.
|
|
34
|
-
It includes a ready to run example application. Start with the readme in the example folder to get up and running!
|
|
35
|
-
|
|
36
|
-
Here is an example of a basic app using the `Button` component:
|
|
37
|
-
|
|
38
|
-
```jsx
|
|
39
|
-
import * as React from 'react';
|
|
40
|
-
import {Button} from '@seeqdev/qomponents';
|
|
41
|
-
|
|
42
|
-
function App() {
|
|
43
|
-
return <Button variant="theme" label="Seeq Rocks" />;
|
|
44
|
-
}
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
|
|
48
|
-
|
|
49
|
-
```css
|
|
50
|
-
@import '@seeqdev/qomponents/dist/styles.css';
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
<b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
|
|
54
|
-
available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
|
|
55
|
-
property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
|
|
56
|
-
Seeq's look and feel changes.
|
|
57
|
-
<br />
|
|
58
|
-
<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
|
|
59
|
-
TextArea, as well as Select.
|
|
60
|
-
|
|
61
|
-
## Frequently asked questions
|
|
62
|
-
|
|
63
|
-
<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
|
|
64
|
-
|
|
65
|
-
Webpack needs a little help :)
|
|
66
|
-
Add the following to the <code>rules</code> array in your <code>webpack.config</code>
|
|
67
|
-
|
|
68
|
-
```
|
|
69
|
-
{
|
|
70
|
-
test: /@?(seeqdev).*\.(ts|js)x?$/,
|
|
71
|
-
loader:'babel-loader'
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
test: /\.(woff|woff2|eot|ttf|otf)$/i,
|
|
75
|
-
type: 'asset/resource',
|
|
76
|
-
}
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:
|
|
80
|
-
|
|
81
|
-
```
|
|
82
|
-
@import '~@seeqdev/qomponents/dist/styles.css';
|
|
83
|
-
@import '~@fortawesome/fontawesome-free/css/all.css';
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
<h3>2) How do I get my Button to be green?</h3>
|
|
87
|
-
|
|
88
|
-
The colors of your qomponents are controlled by the "theme". </br>
|
|
89
|
-
If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
|
|
90
|
-
Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
|
|
91
|
-
also be applied to the body tag.
|
|
92
|
-
|
|
93
|
-
```html
|
|
94
|
-
|
|
95
|
-
<div class="color_analysis">
|
|
96
|
-
... your application here
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
There are 3 themes available:
|
|
102
|
-
|
|
103
|
-
| Theme | Color | Class | Example |
|
|
104
|
-
|:---------|:-------|:---------------|:-----------------------|
|
|
105
|
-
| Topic | blue | color_topic | class="color_topic" |
|
|
106
|
-
| Analysis | green | color_analysis | class="color_analysis" |
|
|
107
|
-
| DataLab | orange | color_datalab | class="color_datalab" |
|
|
108
|
-
|
|
109
|
-
<h3>3) How do I use Fontawesome Icons?</h3>
|
|
110
|
-
Before you can use Fontawesome icons you must install FontAwesome.
|
|
111
|
-
|
|
112
|
-
```
|
|
113
|
-
npm install --save @fortawesome/fontawesome-free
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
|
|
117
|
-
add the following import to your main css file:
|
|
118
|
-
|
|
119
|
-
```
|
|
120
|
-
@import "@fortawesome/fontawesome-free/css/all.css";
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
|
|
124
|
-
required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
|
|
125
|
-
be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
|
|
126
|
-
|
|
127
|
-
For Example:
|
|
128
|
-
|
|
129
|
-
```
|
|
130
|
-
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
|
|
131
|
-
@import "@fortawesome/fontawesome-free/css/solid.css";
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
<h3>4) How can I see all the props that are available?</h3>
|
|
135
|
-
Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
|
|
1
|
+
<!-- markdownlint-disable-next-line -->
|
|
2
|
+
<p align="center">
|
|
3
|
+
<img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
|
|
4
|
+
</p>
|
|
5
|
+
<h1 align="center">qomponents</h1>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
|
|
9
|
+
React component (more coming soon!)
|
|
10
|
+
|
|
11
|
+
These components are used by Seeq's application and are made publicly available for Developers who want to expand
|
|
12
|
+
the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
|
|
13
|
+
experience. Every component comes fully styled (and with dark mode support).
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
Seeq qomponents are available on npm.
|
|
18
|
+
|
|
19
|
+
**npm:**
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
npm install @seeqdev/qomponents
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
**yarn:**
|
|
26
|
+
|
|
27
|
+
```sh
|
|
28
|
+
yarn add @seeqdev/qomponents
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Getting started with Seeq qomponents
|
|
32
|
+
|
|
33
|
+
Prefer a more complete example? <br/>Checkout the example folder provided.
|
|
34
|
+
It includes a ready to run example application. Start with the readme in the example folder to get up and running!
|
|
35
|
+
|
|
36
|
+
Here is an example of a basic app using the `Button` component:
|
|
37
|
+
|
|
38
|
+
```jsx
|
|
39
|
+
import * as React from 'react';
|
|
40
|
+
import {Button} from '@seeqdev/qomponents';
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return <Button variant="theme" label="Seeq Rocks" />;
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
@import '@seeqdev/qomponents/dist/styles.css';
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
<b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
|
|
54
|
+
available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
|
|
55
|
+
property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
|
|
56
|
+
Seeq's look and feel changes.
|
|
57
|
+
<br />
|
|
58
|
+
<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
|
|
59
|
+
TextArea, as well as Select.
|
|
60
|
+
|
|
61
|
+
## Frequently asked questions
|
|
62
|
+
|
|
63
|
+
<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
|
|
64
|
+
|
|
65
|
+
Webpack needs a little help :)
|
|
66
|
+
Add the following to the <code>rules</code> array in your <code>webpack.config</code>
|
|
67
|
+
|
|
68
|
+
```
|
|
69
|
+
{
|
|
70
|
+
test: /@?(seeqdev).*\.(ts|js)x?$/,
|
|
71
|
+
loader:'babel-loader'
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
test: /\.(woff|woff2|eot|ttf|otf)$/i,
|
|
75
|
+
type: 'asset/resource',
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
@import '~@seeqdev/qomponents/dist/styles.css';
|
|
83
|
+
@import '~@fortawesome/fontawesome-free/css/all.css';
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
<h3>2) How do I get my Button to be green?</h3>
|
|
87
|
+
|
|
88
|
+
The colors of your qomponents are controlled by the "theme". </br>
|
|
89
|
+
If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
|
|
90
|
+
Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
|
|
91
|
+
also be applied to the body tag.
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
|
|
95
|
+
<div class="color_analysis">
|
|
96
|
+
... your application here
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
There are 3 themes available:
|
|
102
|
+
|
|
103
|
+
| Theme | Color | Class | Example |
|
|
104
|
+
|:---------|:-------|:---------------|:-----------------------|
|
|
105
|
+
| Topic | blue | color_topic | class="color_topic" |
|
|
106
|
+
| Analysis | green | color_analysis | class="color_analysis" |
|
|
107
|
+
| DataLab | orange | color_datalab | class="color_datalab" |
|
|
108
|
+
|
|
109
|
+
<h3>3) How do I use Fontawesome Icons?</h3>
|
|
110
|
+
Before you can use Fontawesome icons you must install FontAwesome.
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
npm install --save @fortawesome/fontawesome-free
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
|
|
117
|
+
add the following import to your main css file:
|
|
118
|
+
|
|
119
|
+
```
|
|
120
|
+
@import "@fortawesome/fontawesome-free/css/all.css";
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
|
|
124
|
+
required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
|
|
125
|
+
be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
|
|
126
|
+
|
|
127
|
+
For Example:
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
|
|
131
|
+
@import "@fortawesome/fontawesome-free/css/solid.css";
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
<h3>4) How can I see all the props that are available?</h3>
|
|
135
|
+
Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
|
|
136
136
|
folder. This file contains all available properties including some descriptive text that tells you more about them.
|
|
@@ -42,8 +42,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
|
|
|
42
42
|
};
|
|
43
43
|
React.useEffect(() => clearHoverTimeout, []);
|
|
44
44
|
const renderContent = () => {
|
|
45
|
-
return (_jsx(PopoverPrimitive.Content, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full", children: _jsxs("div", { "data-testid": containerTestId, className: `${bgStyles} ${borderStyles} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
46
|
-
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
|
|
45
|
+
return (_jsx(PopoverPrimitive.Content, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none tw-w-full tw-h-full", children: _jsxs("div", { "data-testid": containerTestId, className: `${bgStyles} ${borderStyles} tw-relative tw-z-[1200] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
|
|
46
|
+
data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
|
|
47
47
|
${extraPopoverClassNames || ''}`, children: [hasArrow && (_jsx(PopoverPrimitive.Arrow, { asChild: true, children: _jsx("div", { className: "tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }) })), children] }) }));
|
|
48
48
|
};
|
|
49
49
|
const renderPopover = (popoverOpenState) => {
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -47,7 +47,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
|
|
|
47
47
|
const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
|
|
48
48
|
const style = type === 'color' && color ? { color } : {};
|
|
49
49
|
const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
|
|
50
|
-
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
50
|
+
const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass}
|
|
51
51
|
${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
|
|
52
52
|
const tooltipData = getQTipData(tooltipProps);
|
|
53
53
|
return (_jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
|
|
@@ -7,7 +7,7 @@ export default {
|
|
|
7
7
|
export const AllIcons = () => {
|
|
8
8
|
const renderAllVariations = () => {
|
|
9
9
|
return (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("br", {}), iconTypes.map((iconType) => {
|
|
10
|
-
return (_jsxs("div", { children: [_jsxs("b", { children: ["type=", iconType] }), _jsx("br", {}), _jsxs("div", { children: [_jsx(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-genai-agent-q", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })] }),
|
|
10
|
+
return (_jsxs("div", { children: [_jsxs("b", { children: ["type=", iconType] }), _jsx("br", {}), _jsxs("div", { children: [_jsx(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-genai-agent-q", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })] }), _jsx("b", { children: "Sizes" }), _jsx("br", {}), _jsxs("div", { className: "tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-py-6", children: [_jsx(Icon, { icon: "fc-pca", size: "2xs", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "xs", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "sm", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "lg", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "xl", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "2xl", type: iconType, color: iconType === 'color' ? 'purple' : undefined })] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [_jsx(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })] }), _jsx("br", {})] }, `${iconType}`));
|
|
11
11
|
})] }));
|
|
12
12
|
};
|
|
13
13
|
return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [_jsxs("div", { className: "color_topic", children: [_jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [_jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [_jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [_jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../src/Icon/Icon.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/Modal/Modal.js
CHANGED
|
@@ -9,8 +9,8 @@ import TextField from '../TextField';
|
|
|
9
9
|
const Dialog = DialogPrimitive.Root;
|
|
10
10
|
const DialogPortal = DialogPrimitive.Portal;
|
|
11
11
|
const DialogClose = DialogPrimitive.Close;
|
|
12
|
-
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\
|
|
13
|
-
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
12
|
+
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx("div", { className: "tw-select-none tw-fixed tw-w-full tw-h-full tw-opacity-50 tw-inset-0 tw-z-[1009] tw-bg-sq-dark-background\n data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n data-[state=open]:fade-in-0 " }), _jsxs(DialogPrimitive.Content, { ref: ref, className: `tw-fixed tw-left-[50%] tw-top-0 tw-my-6 tw-translate-x-[-50%] tw-z-[1010] tw-grid
|
|
13
|
+
tw-gap-4 tw-border tw-bg-sq-white dark:tw-bg-sq-dark-background tw-p-6 tw-shadow-lg tw-duration-200
|
|
14
14
|
tw-rounded-lg ${className}`, ...props, children: [_jsx(DialogPrimitive.DialogTitle, { className: "tw-hidden" }), children] })] })));
|
|
15
15
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
16
16
|
const DialogHeader = (props) => (_jsx("div", { className: "tw-w-full tw-justify-between", children: _jsx("div", { ...props }) }));
|
|
@@ -70,7 +70,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
|
|
|
70
70
|
'tw-max-w-4xl': size === '4xl',
|
|
71
71
|
'tw-max-w-5xl': size === '5xl',
|
|
72
72
|
'tw-max-w-6xl': size === '6xl',
|
|
73
|
-
}, dialogClassName), children: [_jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\
|
|
73
|
+
}, dialogClassName), children: [_jsxs(DialogHeader, { className: "modal-header tw-flex tw-w-full tw-justify-between tw-border-sq-disabled-gray\n dark:tw-border-sq-dark-disabled-gray tw-border-0 tw-border-b tw-px-6 tw-py-4", children: [_jsx("div", { className: "tw-flex tw-w-full", children: renderTitle() }), !hideCloseIcon && (_jsx(DialogClose, { autoFocus: false, className: "[&:has(:focus-visible)]:none tw-opacity-70 tw-bg-transparent hover:tw-opacity-100 close tw-text-base tw-cursor-pointer tw-ml-4", "data-testid": "closeButton", children: _jsx("span", { className: "tw-cursor-pointer", children: "\u00D7" }) }))] }), _jsx(DialogDescription, { className: "modal-body tw-px-6 tw-py-4 tw-overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (_jsx(DialogFooter, { className: "modal-footer tw-px-6 tw-py-4", children: modalFooter ?? (_jsxs("div", { className: "tw-flex tw-w-full tw-justify-between", "data-testid": "modalFooter", children: [_jsx("div", { className: "tw-flex tw-justify-start", children: customButton && (_jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw-justify-start tw-min-w-[100px]", testId: "customButton", variant: customButtonVariant })) }), _jsxs("div", { className: "tw-flex tw-justify-end", children: [_jsx("div", { className: "tw-flex tw-items-center", children: middleFooterSection }), !hideCancelButton && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw-mr-5 tw-min-w-[100px]", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (_jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw-animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw-min-w-[100px]" }))] })] })) }))] }) })) : (_jsx(_Fragment, {}));
|
|
74
74
|
};
|
|
75
75
|
export default Modal;
|
|
76
76
|
//# sourceMappingURL=Modal.js.map
|
package/dist/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,eAAe,CAAC;AAEvB,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC;AAEpC,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CAAC;AAE5C,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,CAAC;AAE1C,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5C,MAAC,YAAY,eAIX,cACE,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
package/dist/SvgIcon/SvgIcon.js
CHANGED
|
@@ -18,7 +18,7 @@ import { getSvgIconPath } from '../utils/svg';
|
|
|
18
18
|
* @param tooltipProps - props to pass to the tooltip
|
|
19
19
|
*/
|
|
20
20
|
const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
|
|
21
|
-
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
21
|
+
const appliedClassNames = `${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none
|
|
22
22
|
tw-outline-none`;
|
|
23
23
|
const tooltipData = getQTipData(tooltipProps);
|
|
24
24
|
const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -14,13 +14,13 @@ export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_T
|
|
|
14
14
|
const arrowBaseClasses = 'before:tw-content-[\'\'] before:tw-absolute before:tw-border-8';
|
|
15
15
|
const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
|
|
16
16
|
const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
|
|
17
|
-
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
17
|
+
const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent
|
|
18
18
|
before:tw-border-l-transparent before:tw-border-r-black`;
|
|
19
|
-
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
19
|
+
const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
|
|
20
20
|
before:tw-border-l-black before:tw-border-r-transparent`;
|
|
21
|
-
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
21
|
+
const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black
|
|
22
22
|
before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
|
|
23
|
-
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
23
|
+
const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent
|
|
24
24
|
before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
|
|
25
25
|
const placements = {
|
|
26
26
|
top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
|
|
@@ -28,7 +28,7 @@ export const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_T
|
|
|
28
28
|
right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,
|
|
29
29
|
bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,
|
|
30
30
|
};
|
|
31
|
-
return (_jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, _jsx("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
31
|
+
return (_jsxs("div", { className: "tw-group tw-relative tw-inline-block", children: [children, _jsx("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms]
|
|
32
32
|
tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`, children: text })] }));
|
|
33
33
|
};
|
|
34
34
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
env: { browser: true, es2020: true },
|
|
3
|
-
extends: [
|
|
4
|
-
'eslint:recommended',
|
|
5
|
-
'plugin:@typescript-eslint/recommended',
|
|
6
|
-
'plugin:react-hooks/recommended',
|
|
7
|
-
],
|
|
8
|
-
parser: '@typescript-eslint/parser',
|
|
9
|
-
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
|
10
|
-
plugins: ['react-refresh'],
|
|
11
|
-
rules: {
|
|
12
|
-
'react-refresh/only-export-components': 'warn',
|
|
13
|
-
},
|
|
14
|
-
}
|
|
1
|
+
module.exports = {
|
|
2
|
+
env: { browser: true, es2020: true },
|
|
3
|
+
extends: [
|
|
4
|
+
'eslint:recommended',
|
|
5
|
+
'plugin:@typescript-eslint/recommended',
|
|
6
|
+
'plugin:react-hooks/recommended',
|
|
7
|
+
],
|
|
8
|
+
parser: '@typescript-eslint/parser',
|
|
9
|
+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
|
10
|
+
plugins: ['react-refresh'],
|
|
11
|
+
rules: {
|
|
12
|
+
'react-refresh/only-export-components': 'warn',
|
|
13
|
+
},
|
|
14
|
+
}
|
package/dist/example/README.md
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
<!-- markdownlint-disable-next-line -->
|
|
2
|
-
<p align="center">
|
|
3
|
-
<img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
|
|
4
|
-
</p>
|
|
5
|
-
<h1 align="center">qomponents-form example</h1>
|
|
6
|
-
|
|
7
|
-
Time to see qomponents in action!
|
|
8
|
-
|
|
9
|
-
This is a simple form example that showcases Seeq's qomponents library.
|
|
10
|
-
|
|
11
|
-
This application is built using [vite](https://vitejs.dev/).
|
|
12
|
-
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
First, be sure to install all dependencies (React, and qomponents):
|
|
16
|
-
|
|
17
|
-
```sh
|
|
18
|
-
npm install
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
Once you've installed all dependencies you can start up a dev server and observer any changes you make in real-time:
|
|
22
|
-
|
|
23
|
-
```sh
|
|
24
|
-
npm run dev
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Tip
|
|
28
|
-
|
|
29
|
-
All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
|
|
30
|
-
components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
1
|
+
<!-- markdownlint-disable-next-line -->
|
|
2
|
+
<p align="center">
|
|
3
|
+
<img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
|
|
4
|
+
</p>
|
|
5
|
+
<h1 align="center">qomponents-form example</h1>
|
|
6
|
+
|
|
7
|
+
Time to see qomponents in action!
|
|
8
|
+
|
|
9
|
+
This is a simple form example that showcases Seeq's qomponents library.
|
|
10
|
+
|
|
11
|
+
This application is built using [vite](https://vitejs.dev/).
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
First, be sure to install all dependencies (React, and qomponents):
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
npm install
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Once you've installed all dependencies you can start up a dev server and observer any changes you make in real-time:
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
npm run dev
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Tip
|
|
28
|
+
|
|
29
|
+
All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
|
|
30
|
+
components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
package/dist/example/index.html
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>qomponents form example</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="root"></div>
|
|
11
|
-
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>qomponents form example</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|