@trackunit/react-widgets 2.9.28 → 2.9.30
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/index.cjs.js +99 -12
- package/index.esm.js +99 -12
- package/package.json +2 -2
- package/src/EmptyStates/Error/WidgetError.d.ts +21 -3
- package/src/EmptyStates/MissingConfiguration/WidgetMissingConfiguration.d.ts +19 -2
- package/src/EmptyStates/NoData/WidgetNoData.d.ts +30 -3
- package/src/Widget/WidgetContent.d.ts +29 -4
package/index.cjs.js
CHANGED
|
@@ -61,10 +61,28 @@ const setupLibraryTranslations = () => {
|
|
|
61
61
|
var img$3 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3cpath d='M111.778 125.45C111.063 125.451 110.354 125.31 109.693 125.036C109.032 124.761 108.432 124.358 107.928 123.85L100.272 116.2L92.6062 123.854C92.1005 124.359 91.5002 124.76 90.8395 125.034C90.1789 125.307 89.4708 125.448 88.7558 125.448C87.3118 125.447 85.927 124.873 84.9062 123.852C83.8854 122.831 83.3121 121.446 83.3125 120.002C83.3129 118.558 83.8869 117.173 84.9082 116.152L92.5642 108.498L84.9082 100.842C83.8869 99.8211 83.3129 98.4364 83.3125 96.9924C83.3121 95.5483 83.8854 94.1633 84.9062 93.1419C85.927 92.1206 87.3118 91.5466 88.7558 91.5462C90.1998 91.5459 91.5849 92.1191 92.6062 93.1399L100.272 100.8L107.928 93.1419C108.431 92.6243 109.032 92.2118 109.696 91.9284C110.36 91.645 111.073 91.4965 111.795 91.4913C112.517 91.4862 113.233 91.6246 113.9 91.8985C114.568 92.1724 115.175 92.5763 115.685 93.0868C116.196 93.5973 116.599 94.2041 116.873 94.872C117.147 95.5399 117.285 96.2555 117.28 96.9773C117.275 97.6991 117.126 98.4127 116.842 99.0765C116.559 99.7402 116.146 100.341 115.628 100.844L107.972 108.5L115.628 116.154C116.389 116.916 116.907 117.886 117.117 118.942C117.327 119.999 117.219 121.093 116.807 122.088C116.395 123.083 115.698 123.934 114.803 124.532C113.907 125.131 112.855 125.449 111.778 125.45Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
|
-
*
|
|
64
|
+
* WidgetError displays a centered error empty state inside a widget. It shows an error illustration
|
|
65
|
+
* and a message describing what went wrong. If no custom `description` is provided, a default
|
|
66
|
+
* localized error message is shown.
|
|
65
67
|
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
+
* ### When to use
|
|
69
|
+
* Use WidgetError inside a widget when data fetching or processing fails and the widget cannot render its normal content.
|
|
70
|
+
*
|
|
71
|
+
* ### When not to use
|
|
72
|
+
* Do not use WidgetError for page-level errors — use a page-level error boundary or `Notice`.
|
|
73
|
+
* Do not use it when the widget simply has no data — use `WidgetNoData` instead.
|
|
74
|
+
*
|
|
75
|
+
* @example Error state inside a widget
|
|
76
|
+
* ```tsx
|
|
77
|
+
* import { WidgetError } from "@trackunit/react-widgets";
|
|
78
|
+
*
|
|
79
|
+
* const MyWidget = ({ error }: { error: boolean }) => {
|
|
80
|
+
* if (error) return <WidgetError description="Unable to load engine data." />;
|
|
81
|
+
* return <div>Widget content</div>;
|
|
82
|
+
* };
|
|
83
|
+
* ```
|
|
84
|
+
* @param {WidgetErrorProps} props - The props for the WidgetError component
|
|
85
|
+
* @returns {ReactNode} WidgetError component
|
|
68
86
|
*/
|
|
69
87
|
const WidgetError = ({ description, ref }) => {
|
|
70
88
|
const [t] = useTranslation();
|
|
@@ -74,10 +92,27 @@ const WidgetError = ({ description, ref }) => {
|
|
|
74
92
|
var img$2 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8703 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.994 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' fill='white'/%3e%3cpath d='M100.253 122.278C98.0722 122.279 95.9403 121.632 94.1268 120.421C92.3133 119.21 90.8997 117.489 90.0648 115.474C89.2298 113.46 89.011 111.243 89.4361 109.104C89.8611 106.965 90.9109 105 92.4527 103.458C93.9945 101.916 95.959 100.865 98.0978 100.44C100.237 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.417 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.275 114.176 110.114 116.98 108.047 119.047C105.98 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-miterlimit='10'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8704 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.9941 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3c/svg%3e";
|
|
75
93
|
|
|
76
94
|
/**
|
|
77
|
-
*
|
|
95
|
+
* WidgetMissingConfiguration displays a centered empty state inside a widget when it has not yet been configured.
|
|
96
|
+
* It shows an illustration, a localized description, and a "Configure" button that opens the widget's edit mode
|
|
97
|
+
* via `WidgetConfigRuntime.openEditMode()`. This component takes no props — all text is localized automatically.
|
|
78
98
|
*
|
|
79
|
-
*
|
|
99
|
+
* ### When to use
|
|
100
|
+
* Use WidgetMissingConfiguration when a configurable widget is rendered for the first time and requires
|
|
101
|
+
* user setup before it can display data (e.g., selecting a data source or configuring thresholds).
|
|
80
102
|
*
|
|
103
|
+
* ### When not to use
|
|
104
|
+
* Do not use WidgetMissingConfiguration when the widget has been configured but has no data — use `WidgetNoData`.
|
|
105
|
+
* Do not use it for error states — use `WidgetError`.
|
|
106
|
+
*
|
|
107
|
+
* @example Showing missing configuration state
|
|
108
|
+
* ```tsx
|
|
109
|
+
* import { WidgetMissingConfiguration } from "@trackunit/react-widgets";
|
|
110
|
+
*
|
|
111
|
+
* const ConfigurableWidget = ({ isConfigured }: { isConfigured: boolean }) => {
|
|
112
|
+
* if (!isConfigured) return <WidgetMissingConfiguration />;
|
|
113
|
+
* return <div>Widget content</div>;
|
|
114
|
+
* };
|
|
115
|
+
* ```
|
|
81
116
|
* @returns {ReactNode} WidgetMissingConfiguration component
|
|
82
117
|
*/
|
|
83
118
|
const WidgetMissingConfiguration = ({ ref }) => {
|
|
@@ -90,10 +125,37 @@ var img$1 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200
|
|
|
90
125
|
var img = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3cpath d='M99.3281 119.8C101.856 119.8 103.885 121.871 103.885 124.4C103.885 126.929 101.856 129 99.3281 129C96.8001 129 94.7707 126.929 94.7705 124.4C94.7705 121.871 96.8 119.8 99.3281 119.8ZM91.0703 94.46C95.6295 89.8464 103.027 89.8463 107.586 94.46C112.139 99.0671 112.138 106.532 107.586 111.14C106.256 112.485 104.677 113.441 102.996 114.003V114.5C102.996 116.532 101.365 118.2 99.3281 118.2C97.2912 118.2 95.6602 116.532 95.6602 114.5V112.7C95.6602 109.511 98.1501 107.579 100.284 107.093C101.052 106.918 101.783 106.529 102.39 105.915C104.088 104.196 104.089 101.404 102.39 99.6846C100.697 97.9719 97.958 97.9719 96.2656 99.6846C94.8322 101.135 92.5037 101.135 91.0703 99.6846C89.6434 98.2406 89.6434 95.9039 91.0703 94.46Z' fill='white' stroke='%23334155' stroke-width='2'/%3e%3c/svg%3e";
|
|
91
126
|
|
|
92
127
|
/**
|
|
93
|
-
*
|
|
128
|
+
* WidgetNoData displays a centered empty state inside a widget when there is no data to show.
|
|
129
|
+
* It renders an illustration and a description message. The `type` prop controls the illustration tone:
|
|
130
|
+
* `"Good"` indicates a positive empty state (e.g., no alerts), while `"Neutral"` indicates a neutral absence of data.
|
|
94
131
|
*
|
|
95
|
-
*
|
|
96
|
-
*
|
|
132
|
+
* ### When to use
|
|
133
|
+
* Use WidgetNoData when a widget's data source returns an empty result set and you want to communicate that clearly.
|
|
134
|
+
*
|
|
135
|
+
* ### When not to use
|
|
136
|
+
* Do not use WidgetNoData for error states — use `WidgetError`.
|
|
137
|
+
* Do not use it when the widget requires configuration — use `WidgetMissingConfiguration`.
|
|
138
|
+
*
|
|
139
|
+
* @example Neutral no-data state
|
|
140
|
+
* ```tsx
|
|
141
|
+
* import { WidgetNoData } from "@trackunit/react-widgets";
|
|
142
|
+
*
|
|
143
|
+
* const MyWidget = ({ items }: { items: Array<string> }) => {
|
|
144
|
+
* if (items.length === 0) return <WidgetNoData description="No assets match your filters." />;
|
|
145
|
+
* return <div>{items.join(", ")}</div>;
|
|
146
|
+
* };
|
|
147
|
+
* ```
|
|
148
|
+
* @example Positive no-data state
|
|
149
|
+
* ```tsx
|
|
150
|
+
* import { WidgetNoData } from "@trackunit/react-widgets";
|
|
151
|
+
*
|
|
152
|
+
* const AlertsWidget = ({ alertCount }: { alertCount: number }) => {
|
|
153
|
+
* if (alertCount === 0) return <WidgetNoData type="Good" description="No active alerts." />;
|
|
154
|
+
* return <div>{alertCount} alerts</div>;
|
|
155
|
+
* };
|
|
156
|
+
* ```
|
|
157
|
+
* @param {WidgetNoDataProps} props - The props for the WidgetNoData component
|
|
158
|
+
* @returns {ReactNode} WidgetNoData component
|
|
97
159
|
*/
|
|
98
160
|
const WidgetNoData = ({ type = "Neutral", description, ref }) => {
|
|
99
161
|
return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
|
|
@@ -179,12 +241,37 @@ const cvaWidgetContent = cssClassVarianceUtilities.cvaMerge(["@container", "over
|
|
|
179
241
|
});
|
|
180
242
|
|
|
181
243
|
/**
|
|
182
|
-
*
|
|
244
|
+
* WidgetContent is the layout foundation for all widget body content. It provides CSS Grid-based
|
|
245
|
+
* layout structures, responsive padding, spacing between child elements, and optional centering.
|
|
246
|
+
* The padding intentionally lives on this component (not on the Widget wrapper) so that overflow
|
|
247
|
+
* scrollbars are not inset.
|
|
248
|
+
*
|
|
249
|
+
* ### Layout options
|
|
250
|
+
* - `"none"` — basic stacking with no grid structure
|
|
251
|
+
* - `"top-fill"` — fixed-height header (first child) with remaining space filled by content
|
|
252
|
+
* - `"fill-bottom"` — content fills available space with a fixed-height footer at the bottom
|
|
253
|
+
* - `"top-fill-bottom"` — fixed header, flexible middle, and fixed footer
|
|
254
|
+
*
|
|
255
|
+
* ### When to use
|
|
256
|
+
* Use WidgetContent as the direct child of a widget `Card` to structure its body — for example, a `KPI` at the top with a chart filling the rest.
|
|
257
|
+
*
|
|
258
|
+
* ### When not to use
|
|
259
|
+
* Do not use WidgetContent outside a widget context. For general page layout, use `Page` and `PageContent`.
|
|
260
|
+
*
|
|
261
|
+
* @example KPI with chart using top-fill layout
|
|
262
|
+
* ```tsx
|
|
263
|
+
* import { WidgetContent } from "@trackunit/react-widgets";
|
|
264
|
+
* import { KPI } from "@trackunit/react-components";
|
|
183
265
|
*
|
|
184
|
-
*
|
|
185
|
-
*
|
|
266
|
+
* const AssetWidget = () => (
|
|
267
|
+
* <WidgetContent layout="top-fill" padding="responsive" gap="none" centering="none">
|
|
268
|
+
* <KPI title="Critical Assets" unit="assets" value={42} />
|
|
269
|
+
* <div>Chart goes here</div>
|
|
270
|
+
* </WidgetContent>
|
|
271
|
+
* );
|
|
272
|
+
* ```
|
|
186
273
|
* @param {WidgetContentProps} props - The props for the WidgetContent component
|
|
187
|
-
* @returns {
|
|
274
|
+
* @returns {ReactElement} WidgetContent component
|
|
188
275
|
*/
|
|
189
276
|
const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", ref, }) => {
|
|
190
277
|
return (jsxRuntime.jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, ref: ref, children: children }));
|
package/index.esm.js
CHANGED
|
@@ -59,10 +59,28 @@ const setupLibraryTranslations = () => {
|
|
|
59
59
|
var img$3 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3cpath d='M111.778 125.45C111.063 125.451 110.354 125.31 109.693 125.036C109.032 124.761 108.432 124.358 107.928 123.85L100.272 116.2L92.6062 123.854C92.1005 124.359 91.5002 124.76 90.8395 125.034C90.1789 125.307 89.4708 125.448 88.7558 125.448C87.3118 125.447 85.927 124.873 84.9062 123.852C83.8854 122.831 83.3121 121.446 83.3125 120.002C83.3129 118.558 83.8869 117.173 84.9082 116.152L92.5642 108.498L84.9082 100.842C83.8869 99.8211 83.3129 98.4364 83.3125 96.9924C83.3121 95.5483 83.8854 94.1633 84.9062 93.1419C85.927 92.1206 87.3118 91.5466 88.7558 91.5462C90.1998 91.5459 91.5849 92.1191 92.6062 93.1399L100.272 100.8L107.928 93.1419C108.431 92.6243 109.032 92.2118 109.696 91.9284C110.36 91.645 111.073 91.4965 111.795 91.4913C112.517 91.4862 113.233 91.6246 113.9 91.8985C114.568 92.1724 115.175 92.5763 115.685 93.0868C116.196 93.5973 116.599 94.2041 116.873 94.872C117.147 95.5399 117.285 96.2555 117.28 96.9773C117.275 97.6991 117.126 98.4127 116.842 99.0765C116.559 99.7402 116.146 100.341 115.628 100.844L107.972 108.5L115.628 116.154C116.389 116.916 116.907 117.886 117.117 118.942C117.327 119.999 117.219 121.093 116.807 122.088C116.395 123.083 115.698 123.934 114.803 124.532C113.907 125.131 112.855 125.449 111.778 125.45Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
|
-
*
|
|
62
|
+
* WidgetError displays a centered error empty state inside a widget. It shows an error illustration
|
|
63
|
+
* and a message describing what went wrong. If no custom `description` is provided, a default
|
|
64
|
+
* localized error message is shown.
|
|
63
65
|
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
+
* ### When to use
|
|
67
|
+
* Use WidgetError inside a widget when data fetching or processing fails and the widget cannot render its normal content.
|
|
68
|
+
*
|
|
69
|
+
* ### When not to use
|
|
70
|
+
* Do not use WidgetError for page-level errors — use a page-level error boundary or `Notice`.
|
|
71
|
+
* Do not use it when the widget simply has no data — use `WidgetNoData` instead.
|
|
72
|
+
*
|
|
73
|
+
* @example Error state inside a widget
|
|
74
|
+
* ```tsx
|
|
75
|
+
* import { WidgetError } from "@trackunit/react-widgets";
|
|
76
|
+
*
|
|
77
|
+
* const MyWidget = ({ error }: { error: boolean }) => {
|
|
78
|
+
* if (error) return <WidgetError description="Unable to load engine data." />;
|
|
79
|
+
* return <div>Widget content</div>;
|
|
80
|
+
* };
|
|
81
|
+
* ```
|
|
82
|
+
* @param {WidgetErrorProps} props - The props for the WidgetError component
|
|
83
|
+
* @returns {ReactNode} WidgetError component
|
|
66
84
|
*/
|
|
67
85
|
const WidgetError = ({ description, ref }) => {
|
|
68
86
|
const [t] = useTranslation();
|
|
@@ -72,10 +90,27 @@ const WidgetError = ({ description, ref }) => {
|
|
|
72
90
|
var img$2 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8703 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.994 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' fill='white'/%3e%3cpath d='M100.253 122.278C98.0722 122.279 95.9403 121.632 94.1268 120.421C92.3133 119.21 90.8997 117.489 90.0648 115.474C89.2298 113.46 89.011 111.243 89.4361 109.104C89.8611 106.965 90.9109 105 92.4527 103.458C93.9945 101.916 95.959 100.865 98.0978 100.44C100.237 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.417 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.275 114.176 110.114 116.98 108.047 119.047C105.98 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-miterlimit='10'/%3e%3cpath d='M123.038 107.578H119.01C118.523 105.078 117.538 102.701 116.113 100.59L118.964 97.7352C119.239 97.4593 119.394 97.0853 119.394 96.6954C119.394 96.3054 119.239 95.9314 118.964 95.6556L115.844 92.5414C115.708 92.4045 115.546 92.2958 115.368 92.2217C115.189 92.1475 114.998 92.1093 114.805 92.1093C114.612 92.1093 114.421 92.1475 114.242 92.2217C114.064 92.2958 113.902 92.4045 113.766 92.5414L110.916 95.3906C108.804 93.9684 106.428 92.9852 103.928 92.4995V88.466C103.928 88.0772 103.773 87.7043 103.499 87.4294C103.224 87.1545 102.851 87 102.462 87H98.0473C97.6585 87 97.2856 87.1545 97.0107 87.4294C96.7357 87.7043 96.5813 88.0772 96.5813 88.466V92.4995C94.0812 92.9863 91.7046 93.9709 89.5928 95.3948L86.7383 92.5414C86.6021 92.4045 86.4401 92.2958 86.2618 92.2217C86.0834 92.1475 85.8922 92.1093 85.699 92.1093C85.5059 92.1093 85.3146 92.1475 85.1363 92.2217C84.9579 92.2958 84.796 92.4045 84.6597 92.5414L81.5414 95.6597C81.4043 95.796 81.2955 95.958 81.2213 96.1364C81.147 96.3149 81.1088 96.5063 81.1088 96.6995C81.1088 96.8928 81.147 97.0842 81.2213 97.2626C81.2955 97.4411 81.4043 97.6031 81.5414 97.7393L84.3906 100.589C82.9669 102.701 81.982 105.078 81.4943 107.578H77.466C77.0772 107.578 76.7043 107.733 76.4294 108.008C76.1545 108.282 76 108.655 76 109.044V113.455C76 113.843 76.1545 114.216 76.4294 114.491C76.7043 114.766 77.0772 114.921 77.466 114.921H81.4943C81.9821 117.421 82.967 119.797 84.3906 121.909L81.5414 124.758C81.4045 124.895 81.2958 125.057 81.2217 125.235C81.1475 125.413 81.1093 125.604 81.1093 125.798C81.1093 125.991 81.1475 126.182 81.2217 126.36C81.2958 126.539 81.4045 126.701 81.5414 126.837L84.6597 129.956C84.796 130.093 84.9579 130.202 85.1363 130.276C85.3146 130.35 85.5059 130.388 85.699 130.388C85.8922 130.388 86.0834 130.35 86.2618 130.276C86.4401 130.202 86.6021 130.093 86.7383 129.956L89.5886 127.106C91.7004 128.53 94.077 129.515 96.5771 130.002V134.031C96.5771 134.223 96.615 134.414 96.6887 134.592C96.7624 134.77 96.8704 134.931 97.0065 135.067C97.1426 135.203 97.3042 135.311 97.4821 135.385C97.6599 135.459 97.8506 135.497 98.0431 135.497H102.458C102.65 135.497 102.841 135.459 103.019 135.385C103.197 135.311 103.358 135.203 103.494 135.067C103.631 134.931 103.738 134.77 103.812 134.592C103.886 134.414 103.924 134.223 103.924 134.031V130.01C106.424 129.522 108.8 128.537 110.912 127.113L113.762 129.964C113.898 130.101 114.06 130.209 114.238 130.283C114.416 130.358 114.608 130.396 114.801 130.396C114.994 130.396 115.185 130.358 115.364 130.283C115.542 130.209 115.704 130.101 115.84 129.964L118.964 126.845C119.101 126.709 119.209 126.547 119.283 126.369C119.358 126.19 119.396 125.999 119.396 125.806C119.396 125.613 119.358 125.422 119.283 125.243C119.209 125.065 119.101 124.903 118.964 124.767L116.113 121.918C117.538 119.806 118.523 117.429 119.01 114.929H123.038C123.427 114.929 123.8 114.775 124.075 114.5C124.35 114.225 124.504 113.852 124.504 113.463V109.044C124.504 108.655 124.35 108.282 124.075 108.008C123.8 107.733 123.427 107.578 123.038 107.578ZM100.253 122.278C98.0718 122.278 95.9399 121.632 94.1264 120.421C92.3129 119.21 90.8993 117.488 90.0643 115.474C89.2294 113.459 89.0106 111.242 89.4356 109.104C89.8607 106.965 90.9105 105 92.4523 103.458C93.9941 101.915 95.9585 100.865 98.0973 100.439C100.236 100.014 102.453 100.232 104.468 101.066C106.483 101.901 108.205 103.314 109.416 105.127C110.628 106.94 111.275 109.072 111.275 111.253C111.274 114.176 110.113 116.98 108.046 119.047C105.979 121.115 103.176 122.277 100.253 122.278Z' stroke='%23334155' stroke-width='2.236' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3c/svg%3e";
|
|
73
91
|
|
|
74
92
|
/**
|
|
75
|
-
*
|
|
93
|
+
* WidgetMissingConfiguration displays a centered empty state inside a widget when it has not yet been configured.
|
|
94
|
+
* It shows an illustration, a localized description, and a "Configure" button that opens the widget's edit mode
|
|
95
|
+
* via `WidgetConfigRuntime.openEditMode()`. This component takes no props — all text is localized automatically.
|
|
76
96
|
*
|
|
77
|
-
*
|
|
97
|
+
* ### When to use
|
|
98
|
+
* Use WidgetMissingConfiguration when a configurable widget is rendered for the first time and requires
|
|
99
|
+
* user setup before it can display data (e.g., selecting a data source or configuring thresholds).
|
|
78
100
|
*
|
|
101
|
+
* ### When not to use
|
|
102
|
+
* Do not use WidgetMissingConfiguration when the widget has been configured but has no data — use `WidgetNoData`.
|
|
103
|
+
* Do not use it for error states — use `WidgetError`.
|
|
104
|
+
*
|
|
105
|
+
* @example Showing missing configuration state
|
|
106
|
+
* ```tsx
|
|
107
|
+
* import { WidgetMissingConfiguration } from "@trackunit/react-widgets";
|
|
108
|
+
*
|
|
109
|
+
* const ConfigurableWidget = ({ isConfigured }: { isConfigured: boolean }) => {
|
|
110
|
+
* if (!isConfigured) return <WidgetMissingConfiguration />;
|
|
111
|
+
* return <div>Widget content</div>;
|
|
112
|
+
* };
|
|
113
|
+
* ```
|
|
79
114
|
* @returns {ReactNode} WidgetMissingConfiguration component
|
|
80
115
|
*/
|
|
81
116
|
const WidgetMissingConfiguration = ({ ref }) => {
|
|
@@ -88,10 +123,37 @@ var img$1 = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200
|
|
|
88
123
|
var img = "data:image/svg+xml,%3csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z' fill='%23F1F5F9'/%3e%3cpath d='M100.296 165.188C118.685 165.188 133.592 163.325 133.592 161.026C133.592 158.728 118.685 156.864 100.296 156.864C81.9071 156.864 67 158.728 67 161.026C67 163.325 81.9071 165.188 100.296 165.188Z' fill='%23E2E8F0'/%3e%3cpath d='M147.348 63H53.2C49.7758 63 47 65.7758 47 69.2V136.494C47 139.918 49.7758 142.694 53.2 142.694H147.348C150.772 142.694 153.548 139.918 153.548 136.494V69.2C153.548 65.7758 150.772 63 147.348 63Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M147.348 63H53.2078C51.5635 63 49.9865 63.6532 48.8238 64.8159C47.661 65.9787 47.0078 67.5557 47.0078 69.2V77.75H153.548V69.2C153.548 67.5557 152.895 65.9787 151.732 64.8159C150.569 63.6532 148.992 63 147.348 63Z' fill='white' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M56.3002 73.4363C58.0123 73.4363 59.4002 72.0484 59.4002 70.3363C59.4002 68.6242 58.0123 67.2363 56.3002 67.2363C54.5881 67.2363 53.2002 68.6242 53.2002 70.3363C53.2002 72.0484 54.5881 73.4363 56.3002 73.4363Z' fill='%23E2E8F0' stroke='%23334155' stroke-width='2' stroke-linejoin='round'/%3e%3cpath d='M99.3281 119.8C101.856 119.8 103.885 121.871 103.885 124.4C103.885 126.929 101.856 129 99.3281 129C96.8001 129 94.7707 126.929 94.7705 124.4C94.7705 121.871 96.8 119.8 99.3281 119.8ZM91.0703 94.46C95.6295 89.8464 103.027 89.8463 107.586 94.46C112.139 99.0671 112.138 106.532 107.586 111.14C106.256 112.485 104.677 113.441 102.996 114.003V114.5C102.996 116.532 101.365 118.2 99.3281 118.2C97.2912 118.2 95.6602 116.532 95.6602 114.5V112.7C95.6602 109.511 98.1501 107.579 100.284 107.093C101.052 106.918 101.783 106.529 102.39 105.915C104.088 104.196 104.089 101.404 102.39 99.6846C100.697 97.9719 97.958 97.9719 96.2656 99.6846C94.8322 101.135 92.5037 101.135 91.0703 99.6846C89.6434 98.2406 89.6434 95.9039 91.0703 94.46Z' fill='white' stroke='%23334155' stroke-width='2'/%3e%3c/svg%3e";
|
|
89
124
|
|
|
90
125
|
/**
|
|
91
|
-
*
|
|
126
|
+
* WidgetNoData displays a centered empty state inside a widget when there is no data to show.
|
|
127
|
+
* It renders an illustration and a description message. The `type` prop controls the illustration tone:
|
|
128
|
+
* `"Good"` indicates a positive empty state (e.g., no alerts), while `"Neutral"` indicates a neutral absence of data.
|
|
92
129
|
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
130
|
+
* ### When to use
|
|
131
|
+
* Use WidgetNoData when a widget's data source returns an empty result set and you want to communicate that clearly.
|
|
132
|
+
*
|
|
133
|
+
* ### When not to use
|
|
134
|
+
* Do not use WidgetNoData for error states — use `WidgetError`.
|
|
135
|
+
* Do not use it when the widget requires configuration — use `WidgetMissingConfiguration`.
|
|
136
|
+
*
|
|
137
|
+
* @example Neutral no-data state
|
|
138
|
+
* ```tsx
|
|
139
|
+
* import { WidgetNoData } from "@trackunit/react-widgets";
|
|
140
|
+
*
|
|
141
|
+
* const MyWidget = ({ items }: { items: Array<string> }) => {
|
|
142
|
+
* if (items.length === 0) return <WidgetNoData description="No assets match your filters." />;
|
|
143
|
+
* return <div>{items.join(", ")}</div>;
|
|
144
|
+
* };
|
|
145
|
+
* ```
|
|
146
|
+
* @example Positive no-data state
|
|
147
|
+
* ```tsx
|
|
148
|
+
* import { WidgetNoData } from "@trackunit/react-widgets";
|
|
149
|
+
*
|
|
150
|
+
* const AlertsWidget = ({ alertCount }: { alertCount: number }) => {
|
|
151
|
+
* if (alertCount === 0) return <WidgetNoData type="Good" description="No active alerts." />;
|
|
152
|
+
* return <div>{alertCount} alerts</div>;
|
|
153
|
+
* };
|
|
154
|
+
* ```
|
|
155
|
+
* @param {WidgetNoDataProps} props - The props for the WidgetNoData component
|
|
156
|
+
* @returns {ReactNode} WidgetNoData component
|
|
95
157
|
*/
|
|
96
158
|
const WidgetNoData = ({ type = "Neutral", description, ref }) => {
|
|
97
159
|
return (jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", ref: ref, children: jsx(EmptyState, { customImageSrc: type === "Good" ? img$1 : img, description: description }) }));
|
|
@@ -177,12 +239,37 @@ const cvaWidgetContent = cvaMerge(["@container", "overflow-hidden", "h-full", "w
|
|
|
177
239
|
});
|
|
178
240
|
|
|
179
241
|
/**
|
|
180
|
-
*
|
|
242
|
+
* WidgetContent is the layout foundation for all widget body content. It provides CSS Grid-based
|
|
243
|
+
* layout structures, responsive padding, spacing between child elements, and optional centering.
|
|
244
|
+
* The padding intentionally lives on this component (not on the Widget wrapper) so that overflow
|
|
245
|
+
* scrollbars are not inset.
|
|
246
|
+
*
|
|
247
|
+
* ### Layout options
|
|
248
|
+
* - `"none"` — basic stacking with no grid structure
|
|
249
|
+
* - `"top-fill"` — fixed-height header (first child) with remaining space filled by content
|
|
250
|
+
* - `"fill-bottom"` — content fills available space with a fixed-height footer at the bottom
|
|
251
|
+
* - `"top-fill-bottom"` — fixed header, flexible middle, and fixed footer
|
|
252
|
+
*
|
|
253
|
+
* ### When to use
|
|
254
|
+
* Use WidgetContent as the direct child of a widget `Card` to structure its body — for example, a `KPI` at the top with a chart filling the rest.
|
|
255
|
+
*
|
|
256
|
+
* ### When not to use
|
|
257
|
+
* Do not use WidgetContent outside a widget context. For general page layout, use `Page` and `PageContent`.
|
|
258
|
+
*
|
|
259
|
+
* @example KPI with chart using top-fill layout
|
|
260
|
+
* ```tsx
|
|
261
|
+
* import { WidgetContent } from "@trackunit/react-widgets";
|
|
262
|
+
* import { KPI } from "@trackunit/react-components";
|
|
181
263
|
*
|
|
182
|
-
*
|
|
183
|
-
*
|
|
264
|
+
* const AssetWidget = () => (
|
|
265
|
+
* <WidgetContent layout="top-fill" padding="responsive" gap="none" centering="none">
|
|
266
|
+
* <KPI title="Critical Assets" unit="assets" value={42} />
|
|
267
|
+
* <div>Chart goes here</div>
|
|
268
|
+
* </WidgetContent>
|
|
269
|
+
* );
|
|
270
|
+
* ```
|
|
184
271
|
* @param {WidgetContentProps} props - The props for the WidgetContent component
|
|
185
|
-
* @returns {
|
|
272
|
+
* @returns {ReactElement} WidgetContent component
|
|
186
273
|
*/
|
|
187
274
|
const WidgetContent = ({ children, "data-testid": dataTestId, layout = "none", padding = "none", gap = "none", className, centering = "none", ref, }) => {
|
|
188
275
|
return (jsx("div", { className: cvaWidgetContent({ layout, padding, gap, className, centering }), "data-testid": dataTestId, ref: ref, children: children }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-widgets",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.30",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"react": "19.0.0",
|
|
11
|
-
"@trackunit/react-components": "1.17.
|
|
11
|
+
"@trackunit/react-components": "1.17.24",
|
|
12
12
|
"@trackunit/iris-app-runtime-core": "1.13.26",
|
|
13
13
|
"@trackunit/css-class-variance-utilities": "1.11.43",
|
|
14
14
|
"@trackunit/ui-design-tokens": "1.11.43",
|
|
@@ -7,9 +7,27 @@ export interface WidgetErrorProps extends Refable<HTMLDivElement> {
|
|
|
7
7
|
description?: string;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* WidgetError displays a centered error empty state inside a widget. It shows an error illustration
|
|
11
|
+
* and a message describing what went wrong. If no custom `description` is provided, a default
|
|
12
|
+
* localized error message is shown.
|
|
11
13
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
+
* ### When to use
|
|
15
|
+
* Use WidgetError inside a widget when data fetching or processing fails and the widget cannot render its normal content.
|
|
16
|
+
*
|
|
17
|
+
* ### When not to use
|
|
18
|
+
* Do not use WidgetError for page-level errors — use a page-level error boundary or `Notice`.
|
|
19
|
+
* Do not use it when the widget simply has no data — use `WidgetNoData` instead.
|
|
20
|
+
*
|
|
21
|
+
* @example Error state inside a widget
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import { WidgetError } from "@trackunit/react-widgets";
|
|
24
|
+
*
|
|
25
|
+
* const MyWidget = ({ error }: { error: boolean }) => {
|
|
26
|
+
* if (error) return <WidgetError description="Unable to load engine data." />;
|
|
27
|
+
* return <div>Widget content</div>;
|
|
28
|
+
* };
|
|
29
|
+
* ```
|
|
30
|
+
* @param {WidgetErrorProps} props - The props for the WidgetError component
|
|
31
|
+
* @returns {ReactNode} WidgetError component
|
|
14
32
|
*/
|
|
15
33
|
export declare const WidgetError: ({ description, ref }: WidgetErrorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,27 @@
|
|
|
1
1
|
import { Refable } from "@trackunit/react-components";
|
|
2
2
|
export type WidgetMissingConfigurationProps = Refable<HTMLDivElement>;
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* WidgetMissingConfiguration displays a centered empty state inside a widget when it has not yet been configured.
|
|
5
|
+
* It shows an illustration, a localized description, and a "Configure" button that opens the widget's edit mode
|
|
6
|
+
* via `WidgetConfigRuntime.openEditMode()`. This component takes no props — all text is localized automatically.
|
|
5
7
|
*
|
|
6
|
-
*
|
|
8
|
+
* ### When to use
|
|
9
|
+
* Use WidgetMissingConfiguration when a configurable widget is rendered for the first time and requires
|
|
10
|
+
* user setup before it can display data (e.g., selecting a data source or configuring thresholds).
|
|
7
11
|
*
|
|
12
|
+
* ### When not to use
|
|
13
|
+
* Do not use WidgetMissingConfiguration when the widget has been configured but has no data — use `WidgetNoData`.
|
|
14
|
+
* Do not use it for error states — use `WidgetError`.
|
|
15
|
+
*
|
|
16
|
+
* @example Showing missing configuration state
|
|
17
|
+
* ```tsx
|
|
18
|
+
* import { WidgetMissingConfiguration } from "@trackunit/react-widgets";
|
|
19
|
+
*
|
|
20
|
+
* const ConfigurableWidget = ({ isConfigured }: { isConfigured: boolean }) => {
|
|
21
|
+
* if (!isConfigured) return <WidgetMissingConfiguration />;
|
|
22
|
+
* return <div>Widget content</div>;
|
|
23
|
+
* };
|
|
24
|
+
* ```
|
|
8
25
|
* @returns {ReactNode} WidgetMissingConfiguration component
|
|
9
26
|
*/
|
|
10
27
|
export declare const WidgetMissingConfiguration: ({ ref }: WidgetMissingConfigurationProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -13,9 +13,36 @@ export interface WidgetNoDataProps extends Refable<HTMLDivElement> {
|
|
|
13
13
|
description: string;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* WidgetNoData displays a centered empty state inside a widget when there is no data to show.
|
|
17
|
+
* It renders an illustration and a description message. The `type` prop controls the illustration tone:
|
|
18
|
+
* `"Good"` indicates a positive empty state (e.g., no alerts), while `"Neutral"` indicates a neutral absence of data.
|
|
17
19
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
+
* ### When to use
|
|
21
|
+
* Use WidgetNoData when a widget's data source returns an empty result set and you want to communicate that clearly.
|
|
22
|
+
*
|
|
23
|
+
* ### When not to use
|
|
24
|
+
* Do not use WidgetNoData for error states — use `WidgetError`.
|
|
25
|
+
* Do not use it when the widget requires configuration — use `WidgetMissingConfiguration`.
|
|
26
|
+
*
|
|
27
|
+
* @example Neutral no-data state
|
|
28
|
+
* ```tsx
|
|
29
|
+
* import { WidgetNoData } from "@trackunit/react-widgets";
|
|
30
|
+
*
|
|
31
|
+
* const MyWidget = ({ items }: { items: Array<string> }) => {
|
|
32
|
+
* if (items.length === 0) return <WidgetNoData description="No assets match your filters." />;
|
|
33
|
+
* return <div>{items.join(", ")}</div>;
|
|
34
|
+
* };
|
|
35
|
+
* ```
|
|
36
|
+
* @example Positive no-data state
|
|
37
|
+
* ```tsx
|
|
38
|
+
* import { WidgetNoData } from "@trackunit/react-widgets";
|
|
39
|
+
*
|
|
40
|
+
* const AlertsWidget = ({ alertCount }: { alertCount: number }) => {
|
|
41
|
+
* if (alertCount === 0) return <WidgetNoData type="Good" description="No active alerts." />;
|
|
42
|
+
* return <div>{alertCount} alerts</div>;
|
|
43
|
+
* };
|
|
44
|
+
* ```
|
|
45
|
+
* @param {WidgetNoDataProps} props - The props for the WidgetNoData component
|
|
46
|
+
* @returns {ReactNode} WidgetNoData component
|
|
20
47
|
*/
|
|
21
48
|
export declare const WidgetNoData: ({ type, description, ref }: WidgetNoDataProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -34,11 +34,36 @@ export interface WidgetContentProps extends CommonProps, Refable<HTMLDivElement>
|
|
|
34
34
|
centering: NonNullable<WidgetContentVariants["centering"]>;
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
|
-
*
|
|
37
|
+
* WidgetContent is the layout foundation for all widget body content. It provides CSS Grid-based
|
|
38
|
+
* layout structures, responsive padding, spacing between child elements, and optional centering.
|
|
39
|
+
* The padding intentionally lives on this component (not on the Widget wrapper) so that overflow
|
|
40
|
+
* scrollbars are not inset.
|
|
38
41
|
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
42
|
+
* ### Layout options
|
|
43
|
+
* - `"none"` — basic stacking with no grid structure
|
|
44
|
+
* - `"top-fill"` — fixed-height header (first child) with remaining space filled by content
|
|
45
|
+
* - `"fill-bottom"` — content fills available space with a fixed-height footer at the bottom
|
|
46
|
+
* - `"top-fill-bottom"` — fixed header, flexible middle, and fixed footer
|
|
47
|
+
*
|
|
48
|
+
* ### When to use
|
|
49
|
+
* Use WidgetContent as the direct child of a widget `Card` to structure its body — for example, a `KPI` at the top with a chart filling the rest.
|
|
50
|
+
*
|
|
51
|
+
* ### When not to use
|
|
52
|
+
* Do not use WidgetContent outside a widget context. For general page layout, use `Page` and `PageContent`.
|
|
53
|
+
*
|
|
54
|
+
* @example KPI with chart using top-fill layout
|
|
55
|
+
* ```tsx
|
|
56
|
+
* import { WidgetContent } from "@trackunit/react-widgets";
|
|
57
|
+
* import { KPI } from "@trackunit/react-components";
|
|
58
|
+
*
|
|
59
|
+
* const AssetWidget = () => (
|
|
60
|
+
* <WidgetContent layout="top-fill" padding="responsive" gap="none" centering="none">
|
|
61
|
+
* <KPI title="Critical Assets" unit="assets" value={42} />
|
|
62
|
+
* <div>Chart goes here</div>
|
|
63
|
+
* </WidgetContent>
|
|
64
|
+
* );
|
|
65
|
+
* ```
|
|
41
66
|
* @param {WidgetContentProps} props - The props for the WidgetContent component
|
|
42
|
-
* @returns {
|
|
67
|
+
* @returns {ReactElement} WidgetContent component
|
|
43
68
|
*/
|
|
44
69
|
export declare const WidgetContent: ({ children, "data-testid": dataTestId, layout, padding, gap, className, centering, ref, }: WidgetContentProps) => ReactElement;
|