@seeqdev/qomponents 0.0.155-react-19-v10 → 0.0.156

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.
Files changed (304) hide show
  1. package/README.md +135 -135
  2. package/dist/Accordion/Accordion.stories.d.ts +1 -2
  3. package/dist/Alert/Alert.stories.d.ts +1 -2
  4. package/dist/Alert/Alert.types.d.ts +0 -1
  5. package/dist/Button/Button.stories.d.ts +4 -5
  6. package/dist/Button/Button.types.d.ts +1 -1
  7. package/dist/ButtonGroup/ButtonGroup.stories.d.ts +1 -2
  8. package/dist/ButtonGroup/ButtonGroup.types.d.ts +0 -1
  9. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts +1 -2
  10. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +0 -1
  11. package/dist/ButtonWithPopover/ButtonWithPopover.stories.d.ts +1 -2
  12. package/dist/Carousel/Carousel.stories.d.ts +1 -2
  13. package/dist/Carousel/Carousel.types.d.ts +0 -1
  14. package/dist/Checkbox/Checkbox.stories.d.ts +1 -2
  15. package/dist/Checkbox/Checkbox.types.d.ts +0 -1
  16. package/dist/Collapse/Collapse.stories.d.ts +1 -2
  17. package/dist/Collapse/Collapse.types.d.ts +0 -1
  18. package/dist/Icon/Icon.stories.d.ts +1 -2
  19. package/dist/Icon/Icon.types.d.ts +0 -1
  20. package/dist/InputGroup/InputGroup.stories.d.ts +1 -2
  21. package/dist/InputGroup/InputGroup.types.d.ts +0 -1
  22. package/dist/ProgressBar/ProgressBar.stories.d.ts +3 -2
  23. package/dist/ProgressBar/ProgressBar.types.d.ts +10 -0
  24. package/dist/ProgressBar/index.d.ts +1 -0
  25. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.d.ts +1 -2
  26. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +0 -1
  27. package/dist/Select/Select.stories.d.ts +1 -2
  28. package/dist/Slider/Slider.stories.d.ts +1 -2
  29. package/dist/Slider/Slider.types.d.ts +0 -1
  30. package/dist/SvgIcon/SvgIcon.stories.d.ts +1 -2
  31. package/dist/SvgIcon/SvgIcon.types.d.ts +0 -1
  32. package/dist/Tabs/Tabs.stories.d.ts +1 -2
  33. package/dist/Tabs/Tabs.types.d.ts +1 -2
  34. package/dist/TextArea/TextArea.stories.d.ts +1 -2
  35. package/dist/TextArea/TextArea.types.d.ts +0 -1
  36. package/dist/TextField/TextField.stories.d.ts +1 -2
  37. package/dist/TextField/TextField.types.d.ts +0 -1
  38. package/dist/ToolbarButton/ToolbarButton.stories.d.ts +1 -2
  39. package/dist/Tooltip/QTip.stories.d.ts +1 -2
  40. package/dist/Tooltip/QTipPerformance.stories.d.ts +1 -2
  41. package/dist/Tooltip/Tooltip.stories.d.ts +1 -2
  42. package/dist/Tooltip/Tooltip.types.d.ts +2 -3
  43. package/dist/Tooltip/TooltipPerformance.stories.d.ts +1 -2
  44. package/dist/example/.eslintrc.cjs +14 -14
  45. package/dist/example/README.md +33 -33
  46. package/dist/example/index.html +13 -13
  47. package/dist/example/package.json +30 -30
  48. package/dist/example/src/ComplexSelectExample.tsx +81 -81
  49. package/dist/example/src/Example.tsx +408 -408
  50. package/dist/example/src/index.css +102 -102
  51. package/dist/example/src/main.tsx +10 -10
  52. package/dist/example/src/vite-env.d.ts +1 -1
  53. package/dist/example/tsconfig.json +33 -33
  54. package/dist/example/tsconfig.node.json +12 -12
  55. package/dist/example/vite.config.ts +12 -12
  56. package/dist/index.d.ts +1 -0
  57. package/dist/index.esm.js +7896 -14347
  58. package/dist/index.esm.js.map +1 -1
  59. package/dist/index.js +7889 -14340
  60. package/dist/index.js.map +1 -1
  61. package/dist/styles.css +4006 -3819
  62. package/package.json +88 -91
  63. package/dist/Accordion/Accordion.js +0 -9
  64. package/dist/Accordion/Accordion.js.map +0 -1
  65. package/dist/Accordion/Accordion.stories.js +0 -115
  66. package/dist/Accordion/Accordion.stories.js.map +0 -1
  67. package/dist/Accordion/Accordion.test.js +0 -55
  68. package/dist/Accordion/Accordion.test.js.map +0 -1
  69. package/dist/Accordion/Accordion.types.js +0 -2
  70. package/dist/Accordion/Accordion.types.js.map +0 -1
  71. package/dist/Accordion/index.js +0 -2
  72. package/dist/Accordion/index.js.map +0 -1
  73. package/dist/Alert/Alert.js +0 -34
  74. package/dist/Alert/Alert.js.map +0 -1
  75. package/dist/Alert/Alert.stories.js +0 -52
  76. package/dist/Alert/Alert.stories.js.map +0 -1
  77. package/dist/Alert/Alert.test.js +0 -51
  78. package/dist/Alert/Alert.test.js.map +0 -1
  79. package/dist/Alert/Alert.types.js +0 -2
  80. package/dist/Alert/Alert.types.js.map +0 -1
  81. package/dist/Alert/index.js +0 -2
  82. package/dist/Alert/index.js.map +0 -1
  83. package/dist/Button/Button.js +0 -92
  84. package/dist/Button/Button.js.map +0 -1
  85. package/dist/Button/Button.stories.js +0 -100
  86. package/dist/Button/Button.stories.js.map +0 -1
  87. package/dist/Button/Button.test.js +0 -49
  88. package/dist/Button/Button.test.js.map +0 -1
  89. package/dist/Button/Button.types.js +0 -5
  90. package/dist/Button/Button.types.js.map +0 -1
  91. package/dist/Button/index.js +0 -2
  92. package/dist/Button/index.js.map +0 -1
  93. package/dist/ButtonGroup/ButtonGroup.js +0 -35
  94. package/dist/ButtonGroup/ButtonGroup.js.map +0 -1
  95. package/dist/ButtonGroup/ButtonGroup.stories.js +0 -385
  96. package/dist/ButtonGroup/ButtonGroup.stories.js.map +0 -1
  97. package/dist/ButtonGroup/ButtonGroup.test.js +0 -67
  98. package/dist/ButtonGroup/ButtonGroup.test.js.map +0 -1
  99. package/dist/ButtonGroup/ButtonGroup.types.js +0 -2
  100. package/dist/ButtonGroup/ButtonGroup.types.js.map +0 -1
  101. package/dist/ButtonGroup/index.js +0 -2
  102. package/dist/ButtonGroup/index.js.map +0 -1
  103. package/dist/ButtonWithDropdown/ButtonWithDropdown.js +0 -60
  104. package/dist/ButtonWithDropdown/ButtonWithDropdown.js.map +0 -1
  105. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js +0 -143
  106. package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.js.map +0 -1
  107. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js +0 -93
  108. package/dist/ButtonWithDropdown/ButtonWithDropdown.test.js.map +0 -1
  109. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js +0 -2
  110. package/dist/ButtonWithDropdown/ButtonWithDropdown.types.js.map +0 -1
  111. package/dist/ButtonWithDropdown/index.js +0 -2
  112. package/dist/ButtonWithDropdown/index.js.map +0 -1
  113. package/dist/ButtonWithPopover/ButtonWithPopover.js +0 -62
  114. package/dist/ButtonWithPopover/ButtonWithPopover.js.map +0 -1
  115. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js +0 -75
  116. package/dist/ButtonWithPopover/ButtonWithPopover.stories.js.map +0 -1
  117. package/dist/ButtonWithPopover/ButtonWithPopover.test.js +0 -82
  118. package/dist/ButtonWithPopover/ButtonWithPopover.test.js.map +0 -1
  119. package/dist/ButtonWithPopover/ButtonWithPopover.types.js +0 -2
  120. package/dist/ButtonWithPopover/ButtonWithPopover.types.js.map +0 -1
  121. package/dist/ButtonWithPopover/index.js +0 -2
  122. package/dist/ButtonWithPopover/index.js.map +0 -1
  123. package/dist/Carousel/Carousel.js +0 -70
  124. package/dist/Carousel/Carousel.js.map +0 -1
  125. package/dist/Carousel/Carousel.stories.js +0 -115
  126. package/dist/Carousel/Carousel.stories.js.map +0 -1
  127. package/dist/Carousel/Carousel.test.js +0 -48
  128. package/dist/Carousel/Carousel.test.js.map +0 -1
  129. package/dist/Carousel/Carousel.types.js +0 -2
  130. package/dist/Carousel/Carousel.types.js.map +0 -1
  131. package/dist/Carousel/index.js +0 -2
  132. package/dist/Carousel/index.js.map +0 -1
  133. package/dist/Checkbox/Checkbox.js +0 -26
  134. package/dist/Checkbox/Checkbox.js.map +0 -1
  135. package/dist/Checkbox/Checkbox.stories.js +0 -34
  136. package/dist/Checkbox/Checkbox.stories.js.map +0 -1
  137. package/dist/Checkbox/Checkbox.test.js +0 -94
  138. package/dist/Checkbox/Checkbox.test.js.map +0 -1
  139. package/dist/Checkbox/Checkbox.types.js +0 -2
  140. package/dist/Checkbox/Checkbox.types.js.map +0 -1
  141. package/dist/Checkbox/index.js +0 -2
  142. package/dist/Checkbox/index.js.map +0 -1
  143. package/dist/Collapse/Collapse.js +0 -15
  144. package/dist/Collapse/Collapse.js.map +0 -1
  145. package/dist/Collapse/Collapse.stories.js +0 -37
  146. package/dist/Collapse/Collapse.stories.js.map +0 -1
  147. package/dist/Collapse/Collapse.test.js +0 -19
  148. package/dist/Collapse/Collapse.test.js.map +0 -1
  149. package/dist/Collapse/Collapse.types.js +0 -2
  150. package/dist/Collapse/Collapse.types.js.map +0 -1
  151. package/dist/Collapse/index.js +0 -2
  152. package/dist/Collapse/index.js.map +0 -1
  153. package/dist/Icon/Icon.js +0 -55
  154. package/dist/Icon/Icon.js.map +0 -1
  155. package/dist/Icon/Icon.stories.js +0 -49
  156. package/dist/Icon/Icon.stories.js.map +0 -1
  157. package/dist/Icon/Icon.test.js +0 -55
  158. package/dist/Icon/Icon.test.js.map +0 -1
  159. package/dist/Icon/Icon.types.js +0 -16
  160. package/dist/Icon/Icon.types.js.map +0 -1
  161. package/dist/Icon/index.js +0 -2
  162. package/dist/Icon/index.js.map +0 -1
  163. package/dist/InputGroup/InputGroup.js +0 -35
  164. package/dist/InputGroup/InputGroup.js.map +0 -1
  165. package/dist/InputGroup/InputGroup.stories.js +0 -176
  166. package/dist/InputGroup/InputGroup.stories.js.map +0 -1
  167. package/dist/InputGroup/InputGroup.test.js +0 -43
  168. package/dist/InputGroup/InputGroup.test.js.map +0 -1
  169. package/dist/InputGroup/InputGroup.types.js +0 -2
  170. package/dist/InputGroup/InputGroup.types.js.map +0 -1
  171. package/dist/InputGroup/index.js +0 -2
  172. package/dist/InputGroup/index.js.map +0 -1
  173. package/dist/Modal/Modal.js +0 -102
  174. package/dist/Modal/Modal.js.map +0 -1
  175. package/dist/Modal/Modal.stories.js +0 -127
  176. package/dist/Modal/Modal.stories.js.map +0 -1
  177. package/dist/Modal/Modal.test.js +0 -108
  178. package/dist/Modal/Modal.test.js.map +0 -1
  179. package/dist/Modal/Modal.types.js +0 -2
  180. package/dist/Modal/Modal.types.js.map +0 -1
  181. package/dist/Modal/index.js +0 -2
  182. package/dist/Modal/index.js.map +0 -1
  183. package/dist/ProgressBar/ProgressBar.js +0 -70
  184. package/dist/ProgressBar/ProgressBar.js.map +0 -1
  185. package/dist/ProgressBar/ProgressBar.stories.js +0 -83
  186. package/dist/ProgressBar/ProgressBar.stories.js.map +0 -1
  187. package/dist/ProgressBar/ProgressBar.test.js +0 -44
  188. package/dist/ProgressBar/ProgressBar.test.js.map +0 -1
  189. package/dist/ProgressBar/ProgressBar.types.js +0 -2
  190. package/dist/ProgressBar/ProgressBar.types.js.map +0 -1
  191. package/dist/ProgressBar/index.js +0 -2
  192. package/dist/ProgressBar/index.js.map +0 -1
  193. package/dist/SeeqActionDropdown/SeeqActionDropdown.js +0 -48
  194. package/dist/SeeqActionDropdown/SeeqActionDropdown.js.map +0 -1
  195. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js +0 -87
  196. package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.js.map +0 -1
  197. package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js +0 -73
  198. package/dist/SeeqActionDropdown/SeeqActionDropdown.test.js.map +0 -1
  199. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js +0 -2
  200. package/dist/SeeqActionDropdown/SeeqActionDropdown.types.js.map +0 -1
  201. package/dist/SeeqActionDropdown/index.js +0 -2
  202. package/dist/SeeqActionDropdown/index.js.map +0 -1
  203. package/dist/SeeqActionDropdown/variants.js +0 -38
  204. package/dist/SeeqActionDropdown/variants.js.map +0 -1
  205. package/dist/Select/Select.js +0 -177
  206. package/dist/Select/Select.js.map +0 -1
  207. package/dist/Select/Select.stories.js +0 -82
  208. package/dist/Select/Select.stories.js.map +0 -1
  209. package/dist/Select/Select.test.js +0 -182
  210. package/dist/Select/Select.test.js.map +0 -1
  211. package/dist/Select/Select.types.js +0 -2
  212. package/dist/Select/Select.types.js.map +0 -1
  213. package/dist/Select/index.js +0 -3
  214. package/dist/Select/index.js.map +0 -1
  215. package/dist/Slider/Slider.js +0 -13
  216. package/dist/Slider/Slider.js.map +0 -1
  217. package/dist/Slider/Slider.stories.js +0 -58
  218. package/dist/Slider/Slider.stories.js.map +0 -1
  219. package/dist/Slider/Slider.test.js +0 -33
  220. package/dist/Slider/Slider.test.js.map +0 -1
  221. package/dist/Slider/Slider.types.js +0 -2
  222. package/dist/Slider/Slider.types.js.map +0 -1
  223. package/dist/Slider/index.js +0 -2
  224. package/dist/Slider/index.js.map +0 -1
  225. package/dist/SvgIcon/SvgIcon.js +0 -30
  226. package/dist/SvgIcon/SvgIcon.js.map +0 -1
  227. package/dist/SvgIcon/SvgIcon.stories.js +0 -42
  228. package/dist/SvgIcon/SvgIcon.stories.js.map +0 -1
  229. package/dist/SvgIcon/SvgIcon.test.js +0 -41
  230. package/dist/SvgIcon/SvgIcon.test.js.map +0 -1
  231. package/dist/SvgIcon/SvgIcon.types.js +0 -6
  232. package/dist/SvgIcon/SvgIcon.types.js.map +0 -1
  233. package/dist/SvgIcon/index.js +0 -2
  234. package/dist/SvgIcon/index.js.map +0 -1
  235. package/dist/Tabs/Tabs.js +0 -22
  236. package/dist/Tabs/Tabs.js.map +0 -1
  237. package/dist/Tabs/Tabs.stories.js +0 -91
  238. package/dist/Tabs/Tabs.stories.js.map +0 -1
  239. package/dist/Tabs/Tabs.test.js +0 -91
  240. package/dist/Tabs/Tabs.test.js.map +0 -1
  241. package/dist/Tabs/Tabs.types.js +0 -2
  242. package/dist/Tabs/Tabs.types.js.map +0 -1
  243. package/dist/Tabs/index.js +0 -2
  244. package/dist/Tabs/index.js.map +0 -1
  245. package/dist/TextArea/TextArea.js +0 -25
  246. package/dist/TextArea/TextArea.js.map +0 -1
  247. package/dist/TextArea/TextArea.stories.js +0 -46
  248. package/dist/TextArea/TextArea.stories.js.map +0 -1
  249. package/dist/TextArea/TextArea.test.js +0 -68
  250. package/dist/TextArea/TextArea.test.js.map +0 -1
  251. package/dist/TextArea/TextArea.types.js +0 -2
  252. package/dist/TextArea/TextArea.types.js.map +0 -1
  253. package/dist/TextArea/index.js +0 -2
  254. package/dist/TextArea/index.js.map +0 -1
  255. package/dist/TextField/TextField.js +0 -86
  256. package/dist/TextField/TextField.js.map +0 -1
  257. package/dist/TextField/TextField.stories.js +0 -70
  258. package/dist/TextField/TextField.stories.js.map +0 -1
  259. package/dist/TextField/TextField.test.js +0 -41
  260. package/dist/TextField/TextField.test.js.map +0 -1
  261. package/dist/TextField/TextField.types.js +0 -2
  262. package/dist/TextField/TextField.types.js.map +0 -1
  263. package/dist/TextField/index.js +0 -2
  264. package/dist/TextField/index.js.map +0 -1
  265. package/dist/ToolbarButton/ToolbarButton.js +0 -69
  266. package/dist/ToolbarButton/ToolbarButton.js.map +0 -1
  267. package/dist/ToolbarButton/ToolbarButton.stories.js +0 -97
  268. package/dist/ToolbarButton/ToolbarButton.stories.js.map +0 -1
  269. package/dist/ToolbarButton/ToolbarButton.test.js +0 -93
  270. package/dist/ToolbarButton/ToolbarButton.test.js.map +0 -1
  271. package/dist/ToolbarButton/ToolbarButton.types.js +0 -2
  272. package/dist/ToolbarButton/ToolbarButton.types.js.map +0 -1
  273. package/dist/ToolbarButton/index.js +0 -2
  274. package/dist/ToolbarButton/index.js.map +0 -1
  275. package/dist/Tooltip/QTip.stories.js +0 -45
  276. package/dist/Tooltip/QTip.stories.js.map +0 -1
  277. package/dist/Tooltip/QTip.types.js +0 -2
  278. package/dist/Tooltip/QTip.types.js.map +0 -1
  279. package/dist/Tooltip/QTipPerformance.stories.js +0 -30
  280. package/dist/Tooltip/QTipPerformance.stories.js.map +0 -1
  281. package/dist/Tooltip/Qtip.js +0 -170
  282. package/dist/Tooltip/Qtip.js.map +0 -1
  283. package/dist/Tooltip/Tooltip.js +0 -36
  284. package/dist/Tooltip/Tooltip.js.map +0 -1
  285. package/dist/Tooltip/Tooltip.stories.js +0 -32
  286. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  287. package/dist/Tooltip/Tooltip.types.js +0 -3
  288. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  289. package/dist/Tooltip/TooltipPerformance.stories.js +0 -30
  290. package/dist/Tooltip/TooltipPerformance.stories.js.map +0 -1
  291. package/dist/Tooltip/index.js +0 -3
  292. package/dist/Tooltip/index.js.map +0 -1
  293. package/dist/Tooltip/qTip.utilities.js +0 -11
  294. package/dist/Tooltip/qTip.utilities.js.map +0 -1
  295. package/dist/types.js +0 -2
  296. package/dist/types.js.map +0 -1
  297. package/dist/utils/browserId.js +0 -29
  298. package/dist/utils/browserId.js.map +0 -1
  299. package/dist/utils/svg.js +0 -20
  300. package/dist/utils/svg.js.map +0 -1
  301. package/dist/utils/validateStyleDimension.js +0 -14
  302. package/dist/utils/validateStyleDimension.js.map +0 -1
  303. package/dist/utils/validateStyleDimension.test.js +0 -20
  304. package/dist/utils/validateStyleDimension.test.js.map +0 -1
package/dist/Tooltip/Tooltip.types.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  export declare const DEFAULT_TOOL_TIP_DELAY = 500;
2
2
  export declare const tooltipPositions: readonly ["top", "left", "right", "bottom"];
3
- import React from 'react';
4
3
  export type TooltipPosition = (typeof tooltipPositions)[number];
5
4
  export interface TooltipProps {
6
5
  position?: TooltipPosition;
7
- children?: React.JSX.Element | string;
8
- text: React.JSX.Element | string;
6
+ children?: JSX.Element | string;
7
+ text: JSX.Element | string;
9
8
  delay?: number;
10
9
  }
11
10
  export interface TooltipComponentProps {
package/dist/Tooltip/TooltipPerformance.stories.d.ts CHANGED
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
1
  declare const _default: {
3
2
  title: string;
4
3
  };
5
4
  export default _default;
6
- export declare const TooltipPerformance: () => React.JSX.Element;
5
+ export declare const TooltipPerformance: () => JSX.Element;
package/dist/example/.eslintrc.cjs CHANGED
@@ -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>
package/dist/example/package.json CHANGED
@@ -1,30 +1,30 @@
1
- {
2
- "name": "example",
3
- "private": true,
4
- "version": "0.0.0",
5
- "type": "module",
6
- "scripts": {
7
- "dev": "vite",
8
- "build": "tsc && vite build",
9
- "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10
- "preview": "vite preview"
11
- },
12
- "dependencies": {
13
- "@fortawesome/fontawesome-free": "^6.4.0",
14
- "@seeqdev/qomponents": "0.0.72",
15
- "react": "^18.2.0",
16
- "react-dom": "^18.2.0"
17
- },
18
- "devDependencies": {
19
- "@types/react": "^18.0.37",
20
- "@types/react-dom": "^18.0.11",
21
- "@typescript-eslint/eslint-plugin": "^5.59.0",
22
- "@typescript-eslint/parser": "^5.59.0",
23
- "@vitejs/plugin-react": "^4.0.0",
24
- "eslint": "^8.38.0",
25
- "eslint-plugin-react-hooks": "^4.6.0",
26
- "eslint-plugin-react-refresh": "^0.3.4",
27
- "typescript": "^5.0.2",
28
- "vite": "^4.3.9"
29
- }
30
- }
1
+ {
2
+ "name": "example",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "tsc && vite build",
9
+ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "@fortawesome/fontawesome-free": "^6.4.0",
14
+ "@seeqdev/qomponents": "0.0.72",
15
+ "react": "^18.2.0",
16
+ "react-dom": "^18.2.0"
17
+ },
18
+ "devDependencies": {
19
+ "@types/react": "^18.0.37",
20
+ "@types/react-dom": "^18.0.11",
21
+ "@typescript-eslint/eslint-plugin": "^5.59.0",
22
+ "@typescript-eslint/parser": "^5.59.0",
23
+ "@vitejs/plugin-react": "^4.0.0",
24
+ "eslint": "^8.38.0",
25
+ "eslint-plugin-react-hooks": "^4.6.0",
26
+ "eslint-plugin-react-refresh": "^0.3.4",
27
+ "typescript": "^5.0.2",
28
+ "vite": "^4.3.9"
29
+ }
30
+ }
package/dist/example/src/ComplexSelectExample.tsx CHANGED
@@ -1,81 +1,81 @@
1
- import React from 'react';
2
- import { Icon, Select } from '@seeqdev/qomponents';
3
-
4
- export interface SelectOption {
5
- id: string;
6
- label: string;
7
- color: string;
8
- asset: string;
9
- type: 'SCALAR' | 'STRING' | 'NUMERIC';
10
- }
11
-
12
- const options: SelectOption[] = [
13
- { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
14
- { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
15
- { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
16
- ];
17
-
18
- interface ComplexSelectExampleProps {
19
- onChange: (selectedOption: SelectOption) => void;
20
- value: SelectOption | undefined;
21
- }
22
-
23
- function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
24
- const getIcon = (type: string) => {
25
- switch (type) {
26
- case 'STRING':
27
- return 'fa fa-font';
28
- case 'SCALAR':
29
- return 'fc-scalar';
30
- default:
31
- return 'fc-series';
32
- }
33
- };
34
- /**
35
- * This function formats the select option as desired. You can apply css styling here or use additional qomponents
36
- * to style the select option display.
37
- *
38
- * You can use the same function to format the selected value or use a different one (sometimes having a separate
39
- * function is helpful if you want to limit the space that is taken up by the selected option).
40
- *
41
- * This example shows how to use an additional Icon component (styled in color based on the select option) as well
42
- * as how to display the properties of the select option
43
- */
44
- const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
45
- return (
46
- <div className="selectOptionWrapperDiv">
47
- <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
48
- <div className="selectOptionDiv">
49
- <div className="selectOption">
50
- <strong>{optionValue.label}</strong>
51
- </div>
52
- <div className="selectOptionSubText">{optionValue.asset}</div>
53
- </div>
54
- </div>
55
- );
56
- };
57
- const getOptionValue = (option: SelectOption) => {
58
- return option.id;
59
- };
60
-
61
- return (
62
- // use the getOptionLabel function to provide a custom render function that determines how the select options
63
- // are displayed
64
- // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
65
- // option is displayed
66
- <Select
67
- placeholder="formatted select options"
68
- extraClassNames="formElementWidth"
69
- options={options}
70
- value={value}
71
- getOptionLabel={getOptionLabel}
72
- getOptionValue={getOptionValue}
73
- getSelectedValueLabel={getOptionLabel}
74
- onChange={(selectedOption: SelectOption) => {
75
- onChange(selectedOption);
76
- }}
77
- />
78
- );
79
- }
80
-
81
- export default ComplexSelectExample;
1
+ import React from 'react';
2
+ import { Icon, Select } from '@seeqdev/qomponents';
3
+
4
+ export interface SelectOption {
5
+ id: string;
6
+ label: string;
7
+ color: string;
8
+ asset: string;
9
+ type: 'SCALAR' | 'STRING' | 'NUMERIC';
10
+ }
11
+
12
+ const options: SelectOption[] = [
13
+ { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
14
+ { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
15
+ { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
16
+ ];
17
+
18
+ interface ComplexSelectExampleProps {
19
+ onChange: (selectedOption: SelectOption) => void;
20
+ value: SelectOption | undefined;
21
+ }
22
+
23
+ function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
24
+ const getIcon = (type: string) => {
25
+ switch (type) {
26
+ case 'STRING':
27
+ return 'fa fa-font';
28
+ case 'SCALAR':
29
+ return 'fc-scalar';
30
+ default:
31
+ return 'fc-series';
32
+ }
33
+ };
34
+ /**
35
+ * This function formats the select option as desired. You can apply css styling here or use additional qomponents
36
+ * to style the select option display.
37
+ *
38
+ * You can use the same function to format the selected value or use a different one (sometimes having a separate
39
+ * function is helpful if you want to limit the space that is taken up by the selected option).
40
+ *
41
+ * This example shows how to use an additional Icon component (styled in color based on the select option) as well
42
+ * as how to display the properties of the select option
43
+ */
44
+ const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
45
+ return (
46
+ <div className="selectOptionWrapperDiv">
47
+ <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
48
+ <div className="selectOptionDiv">
49
+ <div className="selectOption">
50
+ <strong>{optionValue.label}</strong>
51
+ </div>
52
+ <div className="selectOptionSubText">{optionValue.asset}</div>
53
+ </div>
54
+ </div>
55
+ );
56
+ };
57
+ const getOptionValue = (option: SelectOption) => {
58
+ return option.id;
59
+ };
60
+
61
+ return (
62
+ // use the getOptionLabel function to provide a custom render function that determines how the select options
63
+ // are displayed
64
+ // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
65
+ // option is displayed
66
+ <Select
67
+ placeholder="formatted select options"
68
+ extraClassNames="formElementWidth"
69
+ options={options}
70
+ value={value}
71
+ getOptionLabel={getOptionLabel}
72
+ getOptionValue={getOptionValue}
73
+ getSelectedValueLabel={getOptionLabel}
74
+ onChange={(selectedOption: SelectOption) => {
75
+ onChange(selectedOption);
76
+ }}
77
+ />
78
+ );
79
+ }
80
+
81
+ export default ComplexSelectExample;