@trackunit/react-widgets 2.0.0
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 +19 -0
- package/index.cjs.js +354 -0
- package/index.d.ts +1 -0
- package/index.esm.js +343 -0
- package/package.json +24 -0
- package/src/EmptyStates/Error/WidgetError.d.ts +10 -0
- package/src/EmptyStates/MissingConfiguration/WidgetMissingConfiguration.d.ts +8 -0
- package/src/EmptyStates/NoData/WidgetNoData.d.ts +12 -0
- package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.d.ts +13 -0
- package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.variants.d.ts +4 -0
- package/src/VerticalSplitWidgetLayout/VerticalSplitWidgetLayout.d.ts +12 -0
- package/src/VerticalSplitWidgetLayout/VerticalSplitWidgetLayout.variants.d.ts +2 -0
- package/src/Widget/WidgetBody.d.ts +25 -0
- package/src/Widget/WidgetBody.variants.d.ts +4 -0
- package/src/Widget/WidgetEditBody.d.ts +33 -0
- package/src/Widget/WidgetEditBody.variants.d.ts +4 -0
- package/src/WidgetKPI/WidgetKPI.d.ts +67 -0
- package/src/WidgetKPI/WidgetKPI.variants.d.ts +13 -0
- package/src/WidgetList/WidgetList.d.ts +35 -0
- package/src/WidgetList/WidgetList.variants.d.ts +2 -0
- package/src/WidgetListItem/WidgetListItem.d.ts +16 -0
- package/src/WidgetListItem/WidgetListItem.variants.d.ts +1 -0
- package/src/index.d.ts +10 -0
- package/src/translation.d.ts +33 -0
- package/translation.cjs.js +12 -0
- package/translation.cjs10.js +12 -0
- package/translation.cjs11.js +12 -0
- package/translation.cjs12.js +12 -0
- package/translation.cjs13.js +12 -0
- package/translation.cjs14.js +12 -0
- package/translation.cjs15.js +12 -0
- package/translation.cjs16.js +12 -0
- package/translation.cjs17.js +12 -0
- package/translation.cjs2.js +12 -0
- package/translation.cjs3.js +12 -0
- package/translation.cjs4.js +12 -0
- package/translation.cjs5.js +12 -0
- package/translation.cjs6.js +12 -0
- package/translation.cjs7.js +12 -0
- package/translation.cjs8.js +12 -0
- package/translation.cjs9.js +12 -0
- package/translation.esm.js +10 -0
- package/translation.esm10.js +10 -0
- package/translation.esm11.js +10 -0
- package/translation.esm12.js +10 -0
- package/translation.esm13.js +10 -0
- package/translation.esm14.js +10 -0
- package/translation.esm15.js +10 -0
- package/translation.esm16.js +10 -0
- package/translation.esm17.js +10 -0
- package/translation.esm2.js +10 -0
- package/translation.esm3.js +10 -0
- package/translation.esm4.js +10 -0
- package/translation.esm5.js +10 -0
- package/translation.esm6.js +10 -0
- package/translation.esm7.js +10 -0
- package/translation.esm8.js +10 -0
- package/translation.esm9.js +10 -0
package/README.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Trackunit React Widgets
|
|
2
|
+
The `@trackunit/react-widgets` package contains basic react widgets, meant for our canvas as part of Trackunits design system.
|
|
3
|
+
|
|
4
|
+
This library is exposed publicly for use in the the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).
|
|
5
|
+
|
|
6
|
+
To browse all available components visit the [Design System](https://design.iris.trackunit.com/).
|
|
7
|
+
|
|
8
|
+
For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
|
|
9
|
+
|
|
10
|
+
## Development
|
|
11
|
+
At this point this library is only developed by Trackunit Employees.
|
|
12
|
+
For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
|
|
13
|
+
|
|
14
|
+
## Trackunit
|
|
15
|
+
This package was developed by Trackunit ApS.
|
|
16
|
+
Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
|
|
17
|
+
|
|
18
|
+

|
|
19
|
+
|
package/index.cjs.js
ADDED
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
|
|
5
|
+
var reactComponents = require('@trackunit/react-components');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
|
|
8
|
+
var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
|
|
9
|
+
|
|
10
|
+
var defaultTranslations = {
|
|
11
|
+
"widget.edit.cancel": "Cancel",
|
|
12
|
+
"widget.edit.save": "Save",
|
|
13
|
+
"widget.edit.title": "Configure",
|
|
14
|
+
"widget.emptystate.configure": "Configure",
|
|
15
|
+
"widget.emptystate.error": "Something went wrong. Try refreshing the page. If the error persists, contact our support team.",
|
|
16
|
+
"widget.emptystate.missingdata": "This widget needs a quick setup before it can show your data."
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
/** The translation namespace for this library */
|
|
20
|
+
const namespace = "react.widgets";
|
|
21
|
+
/**
|
|
22
|
+
* The TranslationResource for this Library.
|
|
23
|
+
* Holds lazy loaded imports for all languages supported by the library.
|
|
24
|
+
*
|
|
25
|
+
* This is used to register the translations for this library before initializing i18next.
|
|
26
|
+
*/
|
|
27
|
+
const translations = {
|
|
28
|
+
ns: namespace,
|
|
29
|
+
default: defaultTranslations,
|
|
30
|
+
languages: {
|
|
31
|
+
de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
|
|
32
|
+
da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
|
|
33
|
+
cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
|
|
34
|
+
nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
|
|
35
|
+
fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
|
|
36
|
+
fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
|
|
37
|
+
hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
|
|
38
|
+
it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
|
|
39
|
+
nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
|
|
40
|
+
pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
|
|
41
|
+
pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
|
|
42
|
+
ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
|
|
43
|
+
ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
|
|
44
|
+
es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
|
|
45
|
+
sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
|
|
46
|
+
ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
|
|
47
|
+
th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* Local useTranslation for this specific library
|
|
52
|
+
*/
|
|
53
|
+
const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
|
|
54
|
+
/**
|
|
55
|
+
* Registers the translations for this library
|
|
56
|
+
*/
|
|
57
|
+
const setupLibraryTranslations = () => {
|
|
58
|
+
i18nLibraryTranslation.registerTranslations(translations);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var widgetError = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M111.778%20125.45C111.063%20125.451%20110.354%20125.31%20109.693%20125.036C109.032%20124.761%20108.432%20124.358%20107.928%20123.85L100.272%20116.2L92.6062%20123.854C92.1005%20124.359%2091.5002%20124.76%2090.8395%20125.034C90.1789%20125.307%2089.4708%20125.448%2088.7558%20125.448C87.3118%20125.447%2085.927%20124.873%2084.9062%20123.852C83.8854%20122.831%2083.3121%20121.446%2083.3125%20120.002C83.3129%20118.558%2083.8869%20117.173%2084.9082%20116.152L92.5642%20108.498L84.9082%20100.842C83.8869%2099.8211%2083.3129%2098.4364%2083.3125%2096.9924C83.3121%2095.5483%2083.8854%2094.1633%2084.9062%2093.1419C85.927%2092.1206%2087.3118%2091.5466%2088.7558%2091.5462C90.1998%2091.5459%2091.5849%2092.1191%2092.6062%2093.1399L100.272%20100.8L107.928%2093.1419C108.431%2092.6243%20109.032%2092.2118%20109.696%2091.9284C110.36%2091.645%20111.073%2091.4965%20111.795%2091.4913C112.517%2091.4862%20113.233%2091.6246%20113.9%2091.8985C114.568%2092.1724%20115.175%2092.5763%20115.685%2093.0868C116.196%2093.5973%20116.599%2094.2041%20116.873%2094.872C117.147%2095.5399%20117.285%2096.2555%20117.28%2096.9773C117.275%2097.6991%20117.126%2098.4127%20116.842%2099.0765C116.559%2099.7402%20116.146%20100.341%20115.628%20100.844L107.972%20108.5L115.628%20116.154C116.389%20116.916%20116.907%20117.886%20117.117%20118.942C117.327%20119.999%20117.219%20121.093%20116.807%20122.088C116.395%20123.083%20115.698%20123.934%20114.803%20124.532C113.907%20125.131%20112.855%20125.449%20111.778%20125.45Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Use when you want to show an error state in a widget.
|
|
65
|
+
*
|
|
66
|
+
* @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
|
|
67
|
+
* @returns {ReactNode} WidgetMissingConfiguration component
|
|
68
|
+
*/
|
|
69
|
+
const WidgetError = ({ description }) => {
|
|
70
|
+
const [t] = useTranslation();
|
|
71
|
+
return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: widgetError, description: description || t("widget.emptystate.error") }) }));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var widgetMissingConfiguration = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M123.038%20107.578H119.01C118.523%20105.078%20117.538%20102.701%20116.113%20100.59L118.964%2097.7352C119.239%2097.4593%20119.394%2097.0853%20119.394%2096.6954C119.394%2096.3054%20119.239%2095.9314%20118.964%2095.6556L115.844%2092.5414C115.708%2092.4045%20115.546%2092.2958%20115.368%2092.2217C115.189%2092.1475%20114.998%2092.1093%20114.805%2092.1093C114.612%2092.1093%20114.421%2092.1475%20114.242%2092.2217C114.064%2092.2958%20113.902%2092.4045%20113.766%2092.5414L110.916%2095.3906C108.804%2093.9684%20106.428%2092.9852%20103.928%2092.4995V88.466C103.928%2088.0772%20103.773%2087.7043%20103.499%2087.4294C103.224%2087.1545%20102.851%2087%20102.462%2087H98.0473C97.6585%2087%2097.2856%2087.1545%2097.0107%2087.4294C96.7357%2087.7043%2096.5813%2088.0772%2096.5813%2088.466V92.4995C94.0812%2092.9863%2091.7046%2093.9709%2089.5928%2095.3948L86.7383%2092.5414C86.6021%2092.4045%2086.4401%2092.2958%2086.2618%2092.2217C86.0834%2092.1475%2085.8922%2092.1093%2085.699%2092.1093C85.5059%2092.1093%2085.3146%2092.1475%2085.1363%2092.2217C84.9579%2092.2958%2084.796%2092.4045%2084.6597%2092.5414L81.5414%2095.6597C81.4043%2095.796%2081.2955%2095.958%2081.2213%2096.1364C81.147%2096.3149%2081.1088%2096.5063%2081.1088%2096.6995C81.1088%2096.8928%2081.147%2097.0842%2081.2213%2097.2626C81.2955%2097.4411%2081.4043%2097.6031%2081.5414%2097.7393L84.3906%20100.589C82.9669%20102.701%2081.982%20105.078%2081.4943%20107.578H77.466C77.0772%20107.578%2076.7043%20107.733%2076.4294%20108.008C76.1545%20108.282%2076%20108.655%2076%20109.044V113.455C76%20113.843%2076.1545%20114.216%2076.4294%20114.491C76.7043%20114.766%2077.0772%20114.921%2077.466%20114.921H81.4943C81.9821%20117.421%2082.967%20119.797%2084.3906%20121.909L81.5414%20124.758C81.4045%20124.895%2081.2958%20125.057%2081.2217%20125.235C81.1475%20125.413%2081.1093%20125.604%2081.1093%20125.798C81.1093%20125.991%2081.1475%20126.182%2081.2217%20126.36C81.2958%20126.539%2081.4045%20126.701%2081.5414%20126.837L84.6597%20129.956C84.796%20130.093%2084.9579%20130.202%2085.1363%20130.276C85.3146%20130.35%2085.5059%20130.388%2085.699%20130.388C85.8922%20130.388%2086.0834%20130.35%2086.2618%20130.276C86.4401%20130.202%2086.6021%20130.093%2086.7383%20129.956L89.5886%20127.106C91.7004%20128.53%2094.077%20129.515%2096.5771%20130.002V134.031C96.5771%20134.223%2096.615%20134.414%2096.6887%20134.592C96.7624%20134.77%2096.8703%20134.931%2097.0065%20135.067C97.1426%20135.203%2097.3042%20135.311%2097.4821%20135.385C97.6599%20135.459%2097.8506%20135.497%2098.0431%20135.497H102.458C102.65%20135.497%20102.841%20135.459%20103.019%20135.385C103.197%20135.311%20103.358%20135.203%20103.494%20135.067C103.631%20134.931%20103.738%20134.77%20103.812%20134.592C103.886%20134.414%20103.924%20134.223%20103.924%20134.031V130.01C106.424%20129.522%20108.8%20128.537%20110.912%20127.113L113.762%20129.964C113.898%20130.101%20114.06%20130.209%20114.238%20130.283C114.416%20130.358%20114.608%20130.396%20114.801%20130.396C114.994%20130.396%20115.185%20130.358%20115.364%20130.283C115.542%20130.209%20115.704%20130.101%20115.84%20129.964L118.964%20126.845C119.101%20126.709%20119.209%20126.547%20119.283%20126.369C119.358%20126.19%20119.396%20125.999%20119.396%20125.806C119.396%20125.613%20119.358%20125.422%20119.283%20125.243C119.209%20125.065%20119.101%20124.903%20118.964%20124.767L116.113%20121.918C117.538%20119.806%20118.523%20117.429%20119.01%20114.929H123.038C123.427%20114.929%20123.8%20114.775%20124.075%20114.5C124.35%20114.225%20124.504%20113.852%20124.504%20113.463V109.044C124.504%20108.655%20124.35%20108.282%20124.075%20108.008C123.8%20107.733%20123.427%20107.578%20123.038%20107.578ZM100.253%20122.278C98.0718%20122.278%2095.9399%20121.632%2094.1264%20120.421C92.3129%20119.21%2090.8993%20117.488%2090.0643%20115.474C89.2294%20113.459%2089.0106%20111.242%2089.4356%20109.104C89.8607%20106.965%2090.9105%20105%2092.4523%20103.458C93.994%20101.915%2095.9585%20100.865%2098.0973%20100.439C100.236%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.416%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.274%20114.176%20110.113%20116.98%20108.046%20119.047C105.979%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M100.253%20122.278C98.0722%20122.279%2095.9403%20121.632%2094.1268%20120.421C92.3133%20119.21%2090.8997%20117.489%2090.0648%20115.474C89.2298%20113.46%2089.011%20111.243%2089.4361%20109.104C89.8611%20106.965%2090.9109%20105%2092.4527%20103.458C93.9945%20101.916%2095.959%20100.865%2098.0978%20100.44C100.237%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.417%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.275%20114.176%20110.114%20116.98%20108.047%20119.047C105.98%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222.236%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M123.038%20107.578H119.01C118.523%20105.078%20117.538%20102.701%20116.113%20100.59L118.964%2097.7352C119.239%2097.4593%20119.394%2097.0853%20119.394%2096.6954C119.394%2096.3054%20119.239%2095.9314%20118.964%2095.6556L115.844%2092.5414C115.708%2092.4045%20115.546%2092.2958%20115.368%2092.2217C115.189%2092.1475%20114.998%2092.1093%20114.805%2092.1093C114.612%2092.1093%20114.421%2092.1475%20114.242%2092.2217C114.064%2092.2958%20113.902%2092.4045%20113.766%2092.5414L110.916%2095.3906C108.804%2093.9684%20106.428%2092.9852%20103.928%2092.4995V88.466C103.928%2088.0772%20103.773%2087.7043%20103.499%2087.4294C103.224%2087.1545%20102.851%2087%20102.462%2087H98.0473C97.6585%2087%2097.2856%2087.1545%2097.0107%2087.4294C96.7357%2087.7043%2096.5813%2088.0772%2096.5813%2088.466V92.4995C94.0812%2092.9863%2091.7046%2093.9709%2089.5928%2095.3948L86.7383%2092.5414C86.6021%2092.4045%2086.4401%2092.2958%2086.2618%2092.2217C86.0834%2092.1475%2085.8922%2092.1093%2085.699%2092.1093C85.5059%2092.1093%2085.3146%2092.1475%2085.1363%2092.2217C84.9579%2092.2958%2084.796%2092.4045%2084.6597%2092.5414L81.5414%2095.6597C81.4043%2095.796%2081.2955%2095.958%2081.2213%2096.1364C81.147%2096.3149%2081.1088%2096.5063%2081.1088%2096.6995C81.1088%2096.8928%2081.147%2097.0842%2081.2213%2097.2626C81.2955%2097.4411%2081.4043%2097.6031%2081.5414%2097.7393L84.3906%20100.589C82.9669%20102.701%2081.982%20105.078%2081.4943%20107.578H77.466C77.0772%20107.578%2076.7043%20107.733%2076.4294%20108.008C76.1545%20108.282%2076%20108.655%2076%20109.044V113.455C76%20113.843%2076.1545%20114.216%2076.4294%20114.491C76.7043%20114.766%2077.0772%20114.921%2077.466%20114.921H81.4943C81.9821%20117.421%2082.967%20119.797%2084.3906%20121.909L81.5414%20124.758C81.4045%20124.895%2081.2958%20125.057%2081.2217%20125.235C81.1475%20125.413%2081.1093%20125.604%2081.1093%20125.798C81.1093%20125.991%2081.1475%20126.182%2081.2217%20126.36C81.2958%20126.539%2081.4045%20126.701%2081.5414%20126.837L84.6597%20129.956C84.796%20130.093%2084.9579%20130.202%2085.1363%20130.276C85.3146%20130.35%2085.5059%20130.388%2085.699%20130.388C85.8922%20130.388%2086.0834%20130.35%2086.2618%20130.276C86.4401%20130.202%2086.6021%20130.093%2086.7383%20129.956L89.5886%20127.106C91.7004%20128.53%2094.077%20129.515%2096.5771%20130.002V134.031C96.5771%20134.223%2096.615%20134.414%2096.6887%20134.592C96.7624%20134.77%2096.8704%20134.931%2097.0065%20135.067C97.1426%20135.203%2097.3042%20135.311%2097.4821%20135.385C97.6599%20135.459%2097.8506%20135.497%2098.0431%20135.497H102.458C102.65%20135.497%20102.841%20135.459%20103.019%20135.385C103.197%20135.311%20103.358%20135.203%20103.494%20135.067C103.631%20134.931%20103.738%20134.77%20103.812%20134.592C103.886%20134.414%20103.924%20134.223%20103.924%20134.031V130.01C106.424%20129.522%20108.8%20128.537%20110.912%20127.113L113.762%20129.964C113.898%20130.101%20114.06%20130.209%20114.238%20130.283C114.416%20130.358%20114.608%20130.396%20114.801%20130.396C114.994%20130.396%20115.185%20130.358%20115.364%20130.283C115.542%20130.209%20115.704%20130.101%20115.84%20129.964L118.964%20126.845C119.101%20126.709%20119.209%20126.547%20119.283%20126.369C119.358%20126.19%20119.396%20125.999%20119.396%20125.806C119.396%20125.613%20119.358%20125.422%20119.283%20125.243C119.209%20125.065%20119.101%20124.903%20118.964%20124.767L116.113%20121.918C117.538%20119.806%20118.523%20117.429%20119.01%20114.929H123.038C123.427%20114.929%20123.8%20114.775%20124.075%20114.5C124.35%20114.225%20124.504%20113.852%20124.504%20113.463V109.044C124.504%20108.655%20124.35%20108.282%20124.075%20108.008C123.8%20107.733%20123.427%20107.578%20123.038%20107.578ZM100.253%20122.278C98.0718%20122.278%2095.9399%20121.632%2094.1264%20120.421C92.3129%20119.21%2090.8993%20117.488%2090.0643%20115.474C89.2294%20113.459%2089.0106%20111.242%2089.4356%20109.104C89.8607%20106.965%2090.9105%20105%2092.4523%20103.458C93.9941%20101.915%2095.9585%20100.865%2098.0973%20100.439C100.236%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.416%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.274%20114.176%20110.113%20116.98%20108.046%20119.047C105.979%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222.236%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Use when you want to show a missing configuration state of a widget.
|
|
78
|
+
*
|
|
79
|
+
* This will open the configuration modal when the user clicks the "Configure" button.
|
|
80
|
+
*
|
|
81
|
+
* @returns {ReactNode} WidgetMissingConfiguration component
|
|
82
|
+
*/
|
|
83
|
+
const WidgetMissingConfiguration = () => {
|
|
84
|
+
const [t] = useTranslation();
|
|
85
|
+
return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: widgetMissingConfiguration, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => irisAppRuntimeCore.WidgetConfigRuntime.openEditMode() } }) }));
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
var widgetNoDataGood = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M95.4118%20126C94.7838%20126.001%2094.1618%20125.879%2093.5817%20125.641C93.0015%20125.404%2092.4745%20125.055%2092.031%20124.615L82.4616%20115.156C82.0044%20114.72%2081.6398%20114.198%2081.3888%20113.621C81.1379%20113.044%2081.0058%20112.423%2081.0002%20111.795C80.9946%20111.167%2081.1155%20110.544%2081.3561%20109.962C81.5966%20109.381%2081.9518%20108.853%2082.4011%20108.409C82.8503%20107.964%2083.3845%20107.613%2083.9726%20107.375C84.5606%20107.138%2085.1907%20107.018%2085.826%20107.024C86.4613%20107.029%2087.0891%20107.16%2087.6727%20107.408C88.2564%20107.656%2088.7843%20108.016%2089.2255%20108.468L95.4141%20114.587L114.897%2095.3243C115.8%2094.4639%20117.008%2093.9884%20118.262%2094.0002C119.516%2094.012%20120.715%2094.5102%20121.601%2095.3875C122.487%2096.2649%20122.99%2097.4511%20123%2098.6909C123.01%2099.9308%20122.528%20101.125%20121.656%20102.017L98.7995%20124.615C98.3548%20125.055%2097.8267%20125.404%2097.2453%20125.642C96.664%20125.879%2096.0409%20126.001%2095.4118%20126Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
|
|
89
|
+
|
|
90
|
+
var widgetNoDataNeutral = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M99.3281%20119.8C101.856%20119.8%20103.885%20121.871%20103.885%20124.4C103.885%20126.929%20101.856%20129%2099.3281%20129C96.8001%20129%2094.7707%20126.929%2094.7705%20124.4C94.7705%20121.871%2096.8%20119.8%2099.3281%20119.8ZM91.0703%2094.46C95.6295%2089.8464%20103.027%2089.8463%20107.586%2094.46C112.139%2099.0671%20112.138%20106.532%20107.586%20111.14C106.256%20112.485%20104.677%20113.441%20102.996%20114.003V114.5C102.996%20116.532%20101.365%20118.2%2099.3281%20118.2C97.2912%20118.2%2095.6602%20116.532%2095.6602%20114.5V112.7C95.6602%20109.511%2098.1501%20107.579%20100.284%20107.093C101.052%20106.918%20101.783%20106.529%20102.39%20105.915C104.088%20104.196%20104.089%20101.404%20102.39%2099.6846C100.697%2097.9719%2097.958%2097.9719%2096.2656%2099.6846C94.8322%20101.135%2092.5037%20101.135%2091.0703%2099.6846C89.6434%2098.2406%2089.6434%2095.9039%2091.0703%2094.46Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E";
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Use when you want to show a no data state in a widget.
|
|
94
|
+
*
|
|
95
|
+
* @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
|
|
96
|
+
* @returns {ReactNode} WidgetMissingConfiguration component
|
|
97
|
+
*/
|
|
98
|
+
const WidgetNoData = ({ type = "Neutral", description }) => {
|
|
99
|
+
return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? widgetNoDataGood : widgetNoDataNeutral, description: description }) }));
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const cvaHorizontalWidgetLayoutContainer = cssClassVarianceUtilities.cvaMerge(["flex", "h-dvh", "flex-col", "overflow-auto"], {
|
|
103
|
+
variants: {
|
|
104
|
+
isScrolled: {
|
|
105
|
+
true: ["border-t"],
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
});
|
|
109
|
+
const cvaHorizontalChildFragment = cssClassVarianceUtilities.cvaMerge(["h-px", "w-full", "min-w-px", "bg-slate-200"]);
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Widget layout with a horizontal orientation with a border in the top when scrolling.
|
|
113
|
+
*
|
|
114
|
+
* @param { HorizontalWidgetLayoutProps} props - The props for the component
|
|
115
|
+
* @returns {JSX.Element} HorizontalWidgetLayout component
|
|
116
|
+
*/
|
|
117
|
+
const HorizontalWidgetLayout = ({ className, dataTestId, children, ref }) => {
|
|
118
|
+
const childrenArray = React.Children.toArray(children);
|
|
119
|
+
const { isAtTop } = reactComponents.useScrollDetection(ref);
|
|
120
|
+
return (jsxRuntime.jsx("div", { className: cvaHorizontalWidgetLayoutContainer({ className, isScrolled: !isAtTop }), "data-testid": dataTestId, ref: ref, children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [child, index < childrenArray.length - 1 && jsxRuntime.jsx("div", { className: cvaHorizontalChildFragment() })] }, index))) }));
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
const cvaVerticalSplitWidgetLayoutContainer = cssClassVarianceUtilities.cvaMerge([
|
|
124
|
+
"flex",
|
|
125
|
+
"w-full",
|
|
126
|
+
"flex-row",
|
|
127
|
+
"overflow-hidden",
|
|
128
|
+
"no-scrollbar",
|
|
129
|
+
"h-20",
|
|
130
|
+
"gap-2",
|
|
131
|
+
"overflow-x-scroll",
|
|
132
|
+
"px-2",
|
|
133
|
+
"py-4"
|
|
134
|
+
]);
|
|
135
|
+
cssClassVarianceUtilities.cvaMerge(["h-full", "w-px", "min-h-px", "bg-slate-200"]);
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Widget layout with a vertical split
|
|
139
|
+
*
|
|
140
|
+
* @param { VerticalSplitWidgetLayoutProps} props - The props for the component
|
|
141
|
+
* @returns {JSX.Element} VerticalSplitWidgetLayout component
|
|
142
|
+
*/
|
|
143
|
+
const VerticalSplitWidgetLayout = ({ className, dataTestId, children }) => {
|
|
144
|
+
const childrenArray = React.Children.toArray(children);
|
|
145
|
+
return (jsxRuntime.jsx("div", { className: cvaVerticalSplitWidgetLayoutContainer({ className }), "data-testid": dataTestId, children: childrenArray.map((child, index) => (jsxRuntime.jsx(React.Fragment, { children: child }, index))) }));
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
|
|
149
|
+
"@container",
|
|
150
|
+
"flex",
|
|
151
|
+
"flex-grow",
|
|
152
|
+
"overflow-auto",
|
|
153
|
+
"w-full",
|
|
154
|
+
"h-dvh",
|
|
155
|
+
"place-items-center",
|
|
156
|
+
"bg-white",
|
|
157
|
+
"overflow-hidden",
|
|
158
|
+
], {
|
|
159
|
+
variants: {
|
|
160
|
+
direction: {
|
|
161
|
+
row: "flex-row",
|
|
162
|
+
"row-reverse": "flex-row-reverse",
|
|
163
|
+
column: "flex-col",
|
|
164
|
+
"column-reverse": "flex-col-reverse",
|
|
165
|
+
},
|
|
166
|
+
density: {
|
|
167
|
+
none: "",
|
|
168
|
+
dense: "gap-1 p-2",
|
|
169
|
+
compact: "gap-3 p-3",
|
|
170
|
+
comfortable: "gap-4 p-4",
|
|
171
|
+
spacious: "gap-4 p-6",
|
|
172
|
+
auto: "gap-2 p-4 pt-2",
|
|
173
|
+
},
|
|
174
|
+
},
|
|
175
|
+
defaultVariants: {
|
|
176
|
+
direction: "column",
|
|
177
|
+
density: "auto",
|
|
178
|
+
},
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* The WidgetBody component should be used to inform the user of important information.
|
|
183
|
+
*
|
|
184
|
+
* @summary For applying padding and gap to a Widget.
|
|
185
|
+
* @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
|
|
186
|
+
* @param {WidgetBodyProps} props - The props for the WidgetBody component
|
|
187
|
+
* @returns {ReactNode} WidgetBody component
|
|
188
|
+
*/
|
|
189
|
+
const WidgetBody = ({ density = "auto", children, dataTestId, className, direction = "column", }) => {
|
|
190
|
+
return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, className, direction }), "data-testid": dataTestId, children: children }));
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
const cvaWidgetEditBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
|
|
194
|
+
variants: {
|
|
195
|
+
direction: {
|
|
196
|
+
row: "flex-row",
|
|
197
|
+
"row-reverse": "flex-row-reverse",
|
|
198
|
+
column: "flex-col",
|
|
199
|
+
"column-reverse": "flex-col-reverse",
|
|
200
|
+
},
|
|
201
|
+
density: {
|
|
202
|
+
none: "",
|
|
203
|
+
dense: "gap-1 p-2",
|
|
204
|
+
compact: "gap-3 p-3",
|
|
205
|
+
comfortable: "gap-4 p-4",
|
|
206
|
+
spacious: "gap-4 p-6",
|
|
207
|
+
auto: "gap-2 p-4",
|
|
208
|
+
},
|
|
209
|
+
},
|
|
210
|
+
defaultVariants: {
|
|
211
|
+
direction: "column",
|
|
212
|
+
density: "auto",
|
|
213
|
+
},
|
|
214
|
+
});
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* The WidgetEditBody component should be used to edit a Widget. This will create a centered dialog with a header, body and footer.
|
|
218
|
+
* The footer will have a cancel and save button.
|
|
219
|
+
*
|
|
220
|
+
* @summary For editing a Widget.
|
|
221
|
+
* @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
|
|
222
|
+
* @returns {ReactNode} WidgetBody component
|
|
223
|
+
*/
|
|
224
|
+
const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }) => {
|
|
225
|
+
const [t] = useTranslation();
|
|
226
|
+
const [saving, setSaving] = React.useState(false);
|
|
227
|
+
return (jsxRuntime.jsxs(reactComponents.Card, { className: cvaWidgetEditBodyDensityContainer({ density: "none", className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.CardHeader, { density: "comfortable", heading: title || t("widget.edit.title"), onClose: onCancel }), jsxRuntime.jsx(reactComponents.CardBody, { density: "comfortable", children: children }), jsxRuntime.jsxs(reactComponents.CardFooter, { density: "comfortable", children: [jsxRuntime.jsx(reactComponents.Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsxRuntime.jsx(reactComponents.Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
|
|
228
|
+
setSaving(true);
|
|
229
|
+
await onSave();
|
|
230
|
+
}, children: t("widget.edit.save") })] })] }));
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "flex", "flex-col", "flex-1", "place-content-start"], {
|
|
234
|
+
variants: {
|
|
235
|
+
variant: {
|
|
236
|
+
small: ["px-3"],
|
|
237
|
+
condensed: ["px-2", "py-0"],
|
|
238
|
+
default: [""],
|
|
239
|
+
},
|
|
240
|
+
},
|
|
241
|
+
defaultVariants: {
|
|
242
|
+
variant: "default",
|
|
243
|
+
},
|
|
244
|
+
});
|
|
245
|
+
const cvaWidgetKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "", "place-items-end", "gap-2", "h-10"]);
|
|
246
|
+
const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
|
|
247
|
+
"leading-tight",
|
|
248
|
+
"break-words",
|
|
249
|
+
"flex",
|
|
250
|
+
"items-start",
|
|
251
|
+
"text-sm",
|
|
252
|
+
"font-medium",
|
|
253
|
+
"text-neutral-500",
|
|
254
|
+
]);
|
|
255
|
+
const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-3xl", "font-medium"]);
|
|
256
|
+
const cvaWidgetKPITrendValueText = cssClassVarianceUtilities.cvaMerge([
|
|
257
|
+
"text-xs",
|
|
258
|
+
"font-semibold",
|
|
259
|
+
"whitespace-nowrap",
|
|
260
|
+
"truncate",
|
|
261
|
+
"overflow-hidden",
|
|
262
|
+
]);
|
|
263
|
+
const cvaWidgetKPITrendPercentage = cssClassVarianceUtilities.cvaMerge(["text-xs", "font-semibold"], {
|
|
264
|
+
variants: {
|
|
265
|
+
color: {
|
|
266
|
+
success: ["text-success-600"],
|
|
267
|
+
danger: ["text-danger-600"],
|
|
268
|
+
neutral: ["text-neutral-500"],
|
|
269
|
+
},
|
|
270
|
+
},
|
|
271
|
+
defaultVariants: {
|
|
272
|
+
color: "success",
|
|
273
|
+
},
|
|
274
|
+
});
|
|
275
|
+
const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
|
|
276
|
+
variants: {
|
|
277
|
+
isDefaultAndHasTrendValue: {
|
|
278
|
+
true: [],
|
|
279
|
+
false: ["flex", "flex-row", "gap-1"],
|
|
280
|
+
},
|
|
281
|
+
},
|
|
282
|
+
defaultVariants: {
|
|
283
|
+
isDefaultAndHasTrendValue: true,
|
|
284
|
+
},
|
|
285
|
+
});
|
|
286
|
+
|
|
287
|
+
/**
|
|
288
|
+
* The WidgetKPI component is used to display WidgetKPIs.
|
|
289
|
+
*
|
|
290
|
+
* @param {WidgetKPIProps} props - The props for the WidgetKPI component
|
|
291
|
+
* @returns {ReactElement} WidgetKPI component
|
|
292
|
+
*/
|
|
293
|
+
const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", ...rest }) => {
|
|
294
|
+
return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: cvaWidgetKPIHeader(), children: jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsxRuntime.jsx(reactComponents.Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsx("div", { className: cvaWidgetKPIValueContainer({
|
|
295
|
+
isDefaultAndHasTrendValue: Boolean(trend?.value),
|
|
296
|
+
className,
|
|
297
|
+
}), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : null] })) }));
|
|
298
|
+
};
|
|
299
|
+
const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
|
|
300
|
+
if (!trend) {
|
|
301
|
+
return null;
|
|
302
|
+
}
|
|
303
|
+
return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendValueText(), dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(reactComponents.Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
const cvaWidgetList = cssClassVarianceUtilities.cvaMerge(["min-h-0"]);
|
|
307
|
+
const cvaWidgetListVirtualizedList = cssClassVarianceUtilities.cvaMerge(["w-full"]);
|
|
308
|
+
|
|
309
|
+
/**
|
|
310
|
+
* WidgetList used for rendering a list of in a widget
|
|
311
|
+
*
|
|
312
|
+
* @param { WidgetListProps} props - The props for the WidgetList component
|
|
313
|
+
* @returns {JSX.Element} WidgetList component
|
|
314
|
+
*/
|
|
315
|
+
const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
|
|
316
|
+
return (jsxRuntime.jsx("div", { className: cvaWidgetList({ className }), children: jsxRuntime.jsx(reactComponents.VirtualizedList, { className: cvaWidgetListVirtualizedList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
|
|
317
|
+
return children(index);
|
|
318
|
+
} }) }));
|
|
319
|
+
};
|
|
320
|
+
|
|
321
|
+
const cvaWidgetListItem = cssClassVarianceUtilities.cvaMerge(["py-2", "px-4", "h-14", "w-full"]);
|
|
322
|
+
|
|
323
|
+
/**
|
|
324
|
+
* Widget ListItem component for the WidgetList component this is 1 row in the list
|
|
325
|
+
*
|
|
326
|
+
* @param { WidgetListItemProps} props - The props for the WidgetListItem component
|
|
327
|
+
* @returns {JSX.Element} WidgetListItem component
|
|
328
|
+
*/
|
|
329
|
+
const WidgetListItem = ({ className, dataTestId, onClick, details, tableCellComponent, }) => {
|
|
330
|
+
const interactableItemClass = onClick
|
|
331
|
+
? reactComponents.cvaInteractableItem({ cursor: "pointer", className: cvaWidgetListItem({ className }) })
|
|
332
|
+
: cvaWidgetListItem({ className });
|
|
333
|
+
return (jsxRuntime.jsx("div", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden text-ellipsis", children: tableCellComponent }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pl-2", children: [details, onClick ? jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "medium" }) : null] })] }) }));
|
|
334
|
+
};
|
|
335
|
+
|
|
336
|
+
/*
|
|
337
|
+
* ----------------------------
|
|
338
|
+
* | SETUP TRANSLATIONS START |
|
|
339
|
+
* ----------------------------
|
|
340
|
+
* This import and function call is needed to register translations for this library.
|
|
341
|
+
* Do not remove this if this library has translations.
|
|
342
|
+
*/
|
|
343
|
+
setupLibraryTranslations();
|
|
344
|
+
|
|
345
|
+
exports.HorizontalWidgetLayout = HorizontalWidgetLayout;
|
|
346
|
+
exports.VerticalSplitWidgetLayout = VerticalSplitWidgetLayout;
|
|
347
|
+
exports.WidgetBody = WidgetBody;
|
|
348
|
+
exports.WidgetEditBody = WidgetEditBody;
|
|
349
|
+
exports.WidgetError = WidgetError;
|
|
350
|
+
exports.WidgetKPI = WidgetKPI;
|
|
351
|
+
exports.WidgetList = WidgetList;
|
|
352
|
+
exports.WidgetListItem = WidgetListItem;
|
|
353
|
+
exports.WidgetMissingConfiguration = WidgetMissingConfiguration;
|
|
354
|
+
exports.WidgetNoData = WidgetNoData;
|
package/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./src/index";
|