@j2inn/fin5-ui-utils 6.0.3 → 6.0.5-beta.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.
Files changed (216) hide show
  1. package/README.md +5 -5
  2. package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
  3. package/dist/fantomProps/createFin5Props/index.js +146 -146
  4. package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  5. package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +16 -16
  6. package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
  7. package/dist/fantomProps/fantomPropsToObject.js +183 -183
  8. package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  9. package/dist/fantomProps/generateJsonFromFantomPropsFile.js +41 -41
  10. package/dist/fantomProps/localePropsToJson.d.ts +1 -1
  11. package/dist/fantomProps/localePropsToJson.js +50 -50
  12. package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
  13. package/dist/fantomProps/readFantomPropsFile.js +66 -61
  14. package/dist/fantomProps/readFantomPropsFile.js.map +1 -1
  15. package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
  16. package/dist/fin5Top/fin5FileUpload.js +51 -51
  17. package/dist/fin5Top/fin5Top.d.ts +124 -124
  18. package/dist/fin5Top/fin5Top.js +53 -53
  19. package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
  20. package/dist/fin5Top/finEdge2Cloud.js +15 -15
  21. package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
  22. package/dist/fin5Top/getFin5BinUrl.js +9 -9
  23. package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
  24. package/dist/fin5Top/openFin5Alarm.js +23 -23
  25. package/dist/fin5Top/openFin5Historian.d.ts +3 -3
  26. package/dist/fin5Top/openFin5Historian.js +19 -19
  27. package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  28. package/dist/fin5Top/useFin5AppURLHashParameter.js +133 -133
  29. package/dist/index.d.ts +35 -35
  30. package/dist/index.js +69 -69
  31. package/dist/jobs/jobUtils.d.ts +14 -14
  32. package/dist/jobs/jobUtils.js +15 -15
  33. package/dist/react/app/Fin5AppContainer.d.ts +36 -36
  34. package/dist/react/app/Fin5AppContainer.js +102 -102
  35. package/dist/react/app/Fin5AppContainer.js.map +1 -1
  36. package/dist/react/app/Fin5AppRootStore.d.ts +40 -38
  37. package/dist/react/app/Fin5AppRootStore.js +69 -68
  38. package/dist/react/app/Fin5AppRootStore.js.map +1 -1
  39. package/dist/react/components/ErrorBoundary.d.ts +57 -57
  40. package/dist/react/components/ErrorBoundary.js +150 -150
  41. package/dist/react/components/ErrorDisplayer.d.ts +19 -19
  42. package/dist/react/components/ErrorDisplayer.js +36 -36
  43. package/dist/react/components/Loader.d.ts +9 -9
  44. package/dist/react/components/Loader.js +17 -17
  45. package/dist/react/components/LoadingSpinner.d.ts +2 -2
  46. package/dist/react/components/LoadingSpinner.js +27 -27
  47. package/dist/react/components/RecordImage.d.ts +20 -20
  48. package/dist/react/components/RecordImage.js +51 -51
  49. package/dist/react/components/charts/QRCode.d.ts +25 -25
  50. package/dist/react/components/charts/QRCode.js +82 -82
  51. package/dist/react/components/charts/line-bar/Chart.d.ts +166 -166
  52. package/dist/react/components/charts/line-bar/Chart.js +442 -442
  53. package/dist/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  54. package/dist/react/components/charts/line-bar/HGridChart.js +285 -285
  55. package/dist/react/components/charts/pie/PieChart.d.ts +94 -94
  56. package/dist/react/components/charts/pie/PieChart.js +204 -204
  57. package/dist/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  58. package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
  59. package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
  60. package/dist/react/components/graphics/GraphicViewer.js +29 -29
  61. package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  62. package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
  63. package/dist/react/components/makeCustomElement.d.ts +16 -16
  64. package/dist/react/components/makeCustomElement.js +150 -150
  65. package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
  66. package/dist/react/components/navigation/BasicLayout.js +155 -155
  67. package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  68. package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
  69. package/dist/react/components/navigation/MenuPage.d.ts +37 -37
  70. package/dist/react/components/navigation/MenuPage.js +36 -36
  71. package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
  72. package/dist/react/components/navigation/MenuTrigger.js +33 -33
  73. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  74. package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
  75. package/dist/react/components/navigation/ReactRouterLayout.d.ts +46 -46
  76. package/dist/react/components/navigation/ReactRouterLayout.js +132 -132
  77. package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
  78. package/dist/react/components/navigation/customRouting/Router.js +45 -45
  79. package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  80. package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
  81. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  82. package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
  83. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  84. package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
  85. package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  86. package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
  87. package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
  88. package/dist/react/hooks/useFin5BinUrl.js +15 -15
  89. package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
  90. package/dist/react/hooks/useFin5ColorScheme.js +49 -49
  91. package/dist/react/hooks/useScreenSize.d.ts +7 -7
  92. package/dist/react/hooks/useScreenSize.js +31 -31
  93. package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
  94. package/dist_es/fantomProps/createFin5Props/index.js +140 -140
  95. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
  96. package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
  97. package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
  98. package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
  99. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
  100. package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
  101. package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
  102. package/dist_es/fantomProps/localePropsToJson.js +21 -21
  103. package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
  104. package/dist_es/fantomProps/readFantomPropsFile.js +40 -35
  105. package/dist_es/fantomProps/readFantomPropsFile.js.map +1 -1
  106. package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
  107. package/dist_es/fin5Top/fin5FileUpload.js +47 -47
  108. package/dist_es/fin5Top/fin5Top.d.ts +124 -124
  109. package/dist_es/fin5Top/fin5Top.js +49 -49
  110. package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
  111. package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
  112. package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
  113. package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
  114. package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
  115. package/dist_es/fin5Top/openFin5Alarm.js +19 -19
  116. package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
  117. package/dist_es/fin5Top/openFin5Historian.js +15 -15
  118. package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
  119. package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
  120. package/dist_es/index.d.ts +35 -35
  121. package/dist_es/index.js +53 -53
  122. package/dist_es/jobs/jobUtils.d.ts +14 -14
  123. package/dist_es/jobs/jobUtils.js +9 -9
  124. package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
  125. package/dist_es/react/app/Fin5AppContainer.js +73 -73
  126. package/dist_es/react/app/Fin5AppContainer.js.map +1 -1
  127. package/dist_es/react/app/Fin5AppContainer.jsx +82 -0
  128. package/dist_es/react/app/Fin5AppContainer.jsx.map +1 -0
  129. package/dist_es/react/app/Fin5AppRootStore.d.ts +40 -38
  130. package/dist_es/react/app/Fin5AppRootStore.js +65 -64
  131. package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
  132. package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
  133. package/dist_es/react/components/ErrorBoundary.js +123 -123
  134. package/dist_es/react/components/ErrorBoundary.jsx +150 -0
  135. package/dist_es/react/components/ErrorBoundary.jsx.map +1 -0
  136. package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
  137. package/dist_es/react/components/ErrorDisplayer.js +28 -28
  138. package/dist_es/react/components/ErrorDisplayer.jsx +36 -0
  139. package/dist_es/react/components/ErrorDisplayer.jsx.map +1 -0
  140. package/dist_es/react/components/Loader.d.ts +9 -9
  141. package/dist_es/react/components/Loader.js +12 -12
  142. package/dist_es/react/components/Loader.jsx +13 -0
  143. package/dist_es/react/components/Loader.jsx.map +1 -0
  144. package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
  145. package/dist_es/react/components/LoadingSpinner.js +20 -20
  146. package/dist_es/react/components/LoadingSpinner.jsx +22 -0
  147. package/dist_es/react/components/LoadingSpinner.jsx.map +1 -0
  148. package/dist_es/react/components/RecordImage.d.ts +20 -20
  149. package/dist_es/react/components/RecordImage.js +24 -24
  150. package/dist_es/react/components/charts/QRCode.d.ts +25 -25
  151. package/dist_es/react/components/charts/QRCode.js +52 -52
  152. package/dist_es/react/components/charts/line-bar/Chart.d.ts +166 -166
  153. package/dist_es/react/components/charts/line-bar/Chart.js +415 -415
  154. package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +58 -58
  155. package/dist_es/react/components/charts/line-bar/HGridChart.js +250 -250
  156. package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts +12 -0
  157. package/dist_es/react/components/charts/line-bar/ZincGridChart.js +17 -0
  158. package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map +1 -0
  159. package/dist_es/react/components/charts/pie/PieChart.d.ts +94 -94
  160. package/dist_es/react/components/charts/pie/PieChart.js +177 -177
  161. package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +21 -21
  162. package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
  163. package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
  164. package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
  165. package/dist_es/react/components/graphics/GraphicViewer.jsx +23 -0
  166. package/dist_es/react/components/graphics/GraphicViewer.jsx.map +1 -0
  167. package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
  168. package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
  169. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +63 -0
  170. package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +1 -0
  171. package/dist_es/react/components/makeCustomElement.d.ts +16 -16
  172. package/dist_es/react/components/makeCustomElement.js +142 -142
  173. package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
  174. package/dist_es/react/components/navigation/BasicLayout.js +124 -124
  175. package/dist_es/react/components/navigation/BasicLayout.jsx +133 -0
  176. package/dist_es/react/components/navigation/BasicLayout.jsx.map +1 -0
  177. package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
  178. package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
  179. package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
  180. package/dist_es/react/components/navigation/MenuPage.js +30 -30
  181. package/dist_es/react/components/navigation/MenuPage.jsx +31 -0
  182. package/dist_es/react/components/navigation/MenuPage.jsx.map +1 -0
  183. package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
  184. package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
  185. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
  186. package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
  187. package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +46 -46
  188. package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
  189. package/dist_es/react/components/navigation/Router.d.ts +12 -0
  190. package/dist_es/react/components/navigation/Router.js +19 -0
  191. package/dist_es/react/components/navigation/Router.js.map +1 -0
  192. package/dist_es/react/components/navigation/Router.jsx +19 -0
  193. package/dist_es/react/components/navigation/Router.jsx.map +1 -0
  194. package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
  195. package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
  196. package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
  197. package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
  198. package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +23 -0
  199. package/dist_es/react/components/navigation/react-router/BasicLayout.js +82 -0
  200. package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +1 -0
  201. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +24 -0
  202. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +82 -0
  203. package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +1 -0
  204. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
  205. package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
  206. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
  207. package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
  208. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
  209. package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
  210. package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
  211. package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
  212. package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
  213. package/dist_es/react/hooks/useFin5ColorScheme.js +45 -45
  214. package/dist_es/react/hooks/useScreenSize.d.ts +7 -7
  215. package/dist_es/react/hooks/useScreenSize.js +27 -27
  216. package/package.json +2 -2
@@ -1,124 +1,124 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import React, { useState } from 'react';
5
- import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
6
- import { usei18n } from '@j2inn/utils';
7
- import { createUseStyles, useTheme } from 'react-jss';
8
- const boundryStyles = createUseStyles((theme) => ({
9
- errorBoundry: {
10
- backgroundColor: theme.bodyBg,
11
- flex: `1 1 auto`,
12
- },
13
- boundryContainer: {
14
- margin: '0 auto',
15
- flex: `1 1 auto`,
16
- padding: `2rem`,
17
- maxWidth: 1024,
18
- backgroundColor: theme.bgColor,
19
- [`& h1, & h3`]: {
20
- paddingBottom: `1rem`,
21
- },
22
- },
23
- errorDetails: {
24
- [`& pre`]: {
25
- overflow: 'auto',
26
- marginTop: '1rem',
27
- backgroundColor: ColorVals.Black,
28
- color: ColorVals.White,
29
- padding: '0.3rem',
30
- },
31
- },
32
- }));
33
- function get(i18n, key, fallback) {
34
- return i18n.has(key) ? i18n.get(key) : fallback;
35
- }
36
- /**
37
- * Format an error message into something more useful for the clipboard.
38
- */
39
- function formatErrorMessage(error, appId) {
40
- return JSON.stringify({
41
- timestamp: new Date().toISOString(),
42
- appId: appId ?? '',
43
- location: location.href,
44
- navigator: {
45
- cookieEnabled: navigator.cookieEnabled,
46
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
47
- deviceMemory: navigator.deviceMemory,
48
- language: navigator.language,
49
- languages: navigator.languages,
50
- onLine: navigator.onLine,
51
- userAgent: navigator.userAgent,
52
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
53
- userAgentData: navigator.userAgentData,
54
- vendor: navigator.vendor,
55
- },
56
- error: String(error.stack),
57
- }, null, 2);
58
- }
59
- /**
60
- * Shows the internal error details to a user.
61
- */
62
- const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
63
- const i18n = usei18n();
64
- const classes = boundryStyles();
65
- const theme = useTheme();
66
- const copyToClipboard = () => {
67
- navigator.clipboard.writeText(formatErrorMessage(error, appId));
68
- Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
69
- };
70
- return (React.createElement("div", { className: classes.errorDetails },
71
- React.createElement(Checkbox, { onChange: (e) => {
72
- setShowDetails(e.target.checked);
73
- }, defaultChecked: showDetails, value: showDetails }, get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')),
74
- showDetails && (React.createElement(React.Fragment, null,
75
- React.createElement("pre", null, error.stack),
76
- React.createElement(Container, { horizontal: true, middle: true, right: true },
77
- React.createElement(Button, { onClick: copyToClipboard }, get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')))))));
78
- };
79
- /**
80
- * The inner error boundary component. This is required so
81
- * we can use hooks that can't be used in a normal class component.
82
- */
83
- const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
84
- const i18n = usei18n();
85
- const [showDetails, setShowDetails] = useState(true);
86
- const classes = boundryStyles();
87
- const title = `finUi.errorBoundary.${mode}.title`;
88
- const appName = `${appId}.name`;
89
- const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
90
- (appId ? `: ${get(i18n, appName, appName)}` : '');
91
- const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
92
- ? 'To continue, please reload or navigate to the home page.'
93
- : 'To continue, please reload, navigate to the home page or another application.');
94
- return (React.createElement(Container, { vertical: true, top: true, center: true, className: classes.errorBoundry },
95
- React.createElement("div", { className: classes.boundryContainer, style: { gap: `1rem` } },
96
- React.createElement("h1", null, header),
97
- React.createElement("h3", null, get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')),
98
- React.createElement("p", null, continueMsg),
99
- React.createElement("div", null,
100
- React.createElement(ErrorDetails, { showDetails: showDetails, setShowDetails: setShowDetails, error: error, appId: appId })),
101
- React.createElement(Divider, null),
102
- React.createElement(Container, { horizontal: true, middle: true, left: true, style: { gap: `1rem` } },
103
- React.createElement(Button, { onClick: () => window.location.reload(), type: 'primary' }, get(i18n, 'finUi.common.reload', 'Reload')),
104
- React.createElement(Button, { onClick: () => window.location.assign('/') }, get(i18n, 'finUi.common.home', 'Home'))),
105
- showReportDialog && (React.createElement("div", { style: { marginTop: `0.5rem` } },
106
- React.createElement("small", { onClick: showReportDialog }, get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')))))));
107
- };
108
- /**
109
- * A common error boundary used to capture errors.
110
- */
111
- export class ErrorBoundary extends React.Component {
112
- state = {};
113
- componentDidCatch(error, info) {
114
- this.props.onError?.(error);
115
- console.error(error, info);
116
- }
117
- static getDerivedStateFromError(error) {
118
- return { error };
119
- }
120
- render() {
121
- return this.state.error ? (React.createElement(ErrorBoundaryInner, { error: this.state.error, mode: this.props.mode, appId: this.props.appId, showReportDialog: this.props.showReportDialog })) : (this.props.children);
122
- }
123
- }
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React, { useState } from 'react';
5
+ import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
6
+ import { usei18n } from '@j2inn/utils';
7
+ import { createUseStyles, useTheme } from 'react-jss';
8
+ const boundryStyles = createUseStyles((theme) => ({
9
+ errorBoundry: {
10
+ backgroundColor: theme.bodyBg,
11
+ flex: `1 1 auto`,
12
+ },
13
+ boundryContainer: {
14
+ margin: '0 auto',
15
+ flex: `1 1 auto`,
16
+ padding: `2rem`,
17
+ maxWidth: 1024,
18
+ backgroundColor: theme.bgColor,
19
+ [`& h1, & h3`]: {
20
+ paddingBottom: `1rem`,
21
+ },
22
+ },
23
+ errorDetails: {
24
+ [`& pre`]: {
25
+ overflow: 'auto',
26
+ marginTop: '1rem',
27
+ backgroundColor: ColorVals.Black,
28
+ color: ColorVals.White,
29
+ padding: '0.3rem',
30
+ },
31
+ },
32
+ }));
33
+ function get(i18n, key, fallback) {
34
+ return i18n.has(key) ? i18n.get(key) : fallback;
35
+ }
36
+ /**
37
+ * Format an error message into something more useful for the clipboard.
38
+ */
39
+ function formatErrorMessage(error, appId) {
40
+ return JSON.stringify({
41
+ timestamp: new Date().toISOString(),
42
+ appId: appId ?? '',
43
+ location: location.href,
44
+ navigator: {
45
+ cookieEnabled: navigator.cookieEnabled,
46
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
47
+ deviceMemory: navigator.deviceMemory,
48
+ language: navigator.language,
49
+ languages: navigator.languages,
50
+ onLine: navigator.onLine,
51
+ userAgent: navigator.userAgent,
52
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
53
+ userAgentData: navigator.userAgentData,
54
+ vendor: navigator.vendor,
55
+ },
56
+ error: String(error.stack),
57
+ }, null, 2);
58
+ }
59
+ /**
60
+ * Shows the internal error details to a user.
61
+ */
62
+ const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
63
+ const i18n = usei18n();
64
+ const classes = boundryStyles();
65
+ const theme = useTheme();
66
+ const copyToClipboard = () => {
67
+ navigator.clipboard.writeText(formatErrorMessage(error, appId));
68
+ Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
69
+ };
70
+ return (React.createElement("div", { className: classes.errorDetails },
71
+ React.createElement(Checkbox, { onChange: (e) => {
72
+ setShowDetails(e.target.checked);
73
+ }, defaultChecked: showDetails, value: showDetails }, get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')),
74
+ showDetails && (React.createElement(React.Fragment, null,
75
+ React.createElement("pre", null, error.stack),
76
+ React.createElement(Container, { horizontal: true, middle: true, right: true },
77
+ React.createElement(Button, { onClick: copyToClipboard }, get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')))))));
78
+ };
79
+ /**
80
+ * The inner error boundary component. This is required so
81
+ * we can use hooks that can't be used in a normal class component.
82
+ */
83
+ const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
84
+ const i18n = usei18n();
85
+ const [showDetails, setShowDetails] = useState(true);
86
+ const classes = boundryStyles();
87
+ const title = `finUi.errorBoundary.${mode}.title`;
88
+ const appName = `${appId}.name`;
89
+ const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
90
+ (appId ? `: ${get(i18n, appName, appName)}` : '');
91
+ const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
92
+ ? 'To continue, please reload or navigate to the home page.'
93
+ : 'To continue, please reload, navigate to the home page or another application.');
94
+ return (React.createElement(Container, { vertical: true, top: true, center: true, className: classes.errorBoundry },
95
+ React.createElement("div", { className: classes.boundryContainer, style: { gap: `1rem` } },
96
+ React.createElement("h1", null, header),
97
+ React.createElement("h3", null, get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')),
98
+ React.createElement("p", null, continueMsg),
99
+ React.createElement("div", null,
100
+ React.createElement(ErrorDetails, { showDetails: showDetails, setShowDetails: setShowDetails, error: error, appId: appId })),
101
+ React.createElement(Divider, null),
102
+ React.createElement(Container, { horizontal: true, middle: true, left: true, style: { gap: `1rem` } },
103
+ React.createElement(Button, { onClick: () => window.location.reload(), type: 'primary' }, get(i18n, 'finUi.common.reload', 'Reload')),
104
+ React.createElement(Button, { onClick: () => window.location.assign('/') }, get(i18n, 'finUi.common.home', 'Home'))),
105
+ showReportDialog && (React.createElement("div", { style: { marginTop: `0.5rem` } },
106
+ React.createElement("small", { onClick: showReportDialog }, get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')))))));
107
+ };
108
+ /**
109
+ * A common error boundary used to capture errors.
110
+ */
111
+ export class ErrorBoundary extends React.Component {
112
+ state = {};
113
+ componentDidCatch(error, info) {
114
+ this.props.onError?.(error);
115
+ console.error(error, info);
116
+ }
117
+ static getDerivedStateFromError(error) {
118
+ return { error };
119
+ }
120
+ render() {
121
+ return this.state.error ? (React.createElement(ErrorBoundaryInner, { error: this.state.error, mode: this.props.mode, appId: this.props.appId, showReportDialog: this.props.showReportDialog })) : (this.props.children);
122
+ }
123
+ }
124
124
  //# sourceMappingURL=ErrorBoundary.js.map
@@ -0,0 +1,150 @@
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React, { useState } from 'react';
5
+ import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
6
+ import { usei18n } from '@j2inn/utils';
7
+ import { createUseStyles, useTheme } from 'react-jss';
8
+ const boundryStyles = createUseStyles((theme) => ({
9
+ errorBoundry: {
10
+ backgroundColor: theme.bodyBg,
11
+ flex: `1 1 auto`,
12
+ },
13
+ boundryContainer: {
14
+ margin: '0 auto',
15
+ flex: `1 1 auto`,
16
+ padding: `2rem`,
17
+ maxWidth: 1024,
18
+ backgroundColor: theme.bgColor,
19
+ [`& h1, & h3`]: {
20
+ paddingBottom: `1rem`,
21
+ },
22
+ },
23
+ errorDetails: {
24
+ [`& pre`]: {
25
+ overflow: 'auto',
26
+ marginTop: '1rem',
27
+ backgroundColor: ColorVals.Black,
28
+ color: ColorVals.White,
29
+ padding: '0.3rem',
30
+ },
31
+ },
32
+ }));
33
+ function get(i18n, key, fallback) {
34
+ return i18n.has(key) ? i18n.get(key) : fallback;
35
+ }
36
+ /**
37
+ * Format an error message into something more useful for the clipboard.
38
+ */
39
+ function formatErrorMessage(error, appId) {
40
+ return JSON.stringify({
41
+ timestamp: new Date().toISOString(),
42
+ appId: appId ?? '',
43
+ location: location.href,
44
+ navigator: {
45
+ cookieEnabled: navigator.cookieEnabled,
46
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
47
+ deviceMemory: navigator.deviceMemory,
48
+ language: navigator.language,
49
+ languages: navigator.languages,
50
+ onLine: navigator.onLine,
51
+ userAgent: navigator.userAgent,
52
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
53
+ userAgentData: navigator.userAgentData,
54
+ vendor: navigator.vendor,
55
+ },
56
+ error: String(error.stack),
57
+ }, null, 2);
58
+ }
59
+ /**
60
+ * Shows the internal error details to a user.
61
+ */
62
+ const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
63
+ const i18n = usei18n();
64
+ const classes = boundryStyles();
65
+ const theme = useTheme();
66
+ const copyToClipboard = () => {
67
+ navigator.clipboard.writeText(formatErrorMessage(error, appId));
68
+ Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
69
+ };
70
+ return (<div className={classes.errorDetails}>
71
+ <Checkbox onChange={(e) => {
72
+ setShowDetails(e.target.checked);
73
+ }} defaultChecked={showDetails} value={showDetails}>
74
+ {get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')}
75
+ </Checkbox>
76
+ {showDetails && (<>
77
+ <pre>{error.stack}</pre>
78
+ <Container horizontal middle right>
79
+ <Button onClick={copyToClipboard}>
80
+ {get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')}
81
+ </Button>
82
+ </Container>
83
+ </>)}
84
+ </div>);
85
+ };
86
+ /**
87
+ * The inner error boundary component. This is required so
88
+ * we can use hooks that can't be used in a normal class component.
89
+ */
90
+ const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
91
+ const i18n = usei18n();
92
+ const [showDetails, setShowDetails] = useState(true);
93
+ const classes = boundryStyles();
94
+ const title = `finUi.errorBoundary.${mode}.title`;
95
+ const appName = `${appId}.name`;
96
+ const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
97
+ (appId ? `: ${get(i18n, appName, appName)}` : '');
98
+ const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
99
+ ? 'To continue, please reload or navigate to the home page.'
100
+ : 'To continue, please reload, navigate to the home page or another application.');
101
+ return (<Container vertical top center className={classes.errorBoundry}>
102
+ <div className={classes.boundryContainer} style={{ gap: `1rem` }}>
103
+ <h1>{header}</h1>
104
+
105
+ <h3>
106
+ {get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')}
107
+ </h3>
108
+
109
+ <p>{continueMsg}</p>
110
+
111
+ <div>
112
+ <ErrorDetails showDetails={showDetails} setShowDetails={setShowDetails} error={error} appId={appId}/>
113
+ </div>
114
+
115
+ <Divider />
116
+
117
+ <Container horizontal middle left style={{ gap: `1rem` }}>
118
+ <Button onClick={() => window.location.reload()} type='primary'>
119
+ {get(i18n, 'finUi.common.reload', 'Reload')}
120
+ </Button>
121
+ <Button onClick={() => window.location.assign('/')}>
122
+ {get(i18n, 'finUi.common.home', 'Home')}
123
+ </Button>
124
+ </Container>
125
+
126
+ {showReportDialog && (<div style={{ marginTop: `0.5rem` }}>
127
+ <small onClick={showReportDialog}>
128
+ {get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')}
129
+ </small>
130
+ </div>)}
131
+ </div>
132
+ </Container>);
133
+ };
134
+ /**
135
+ * A common error boundary used to capture errors.
136
+ */
137
+ export class ErrorBoundary extends React.Component {
138
+ state = {};
139
+ componentDidCatch(error, info) {
140
+ this.props.onError?.(error);
141
+ console.error(error, info);
142
+ }
143
+ static getDerivedStateFromError(error) {
144
+ return { error };
145
+ }
146
+ render() {
147
+ return this.state.error ? (<ErrorBoundaryInner error={this.state.error} mode={this.props.mode} appId={this.props.appId} showReportDialog={this.props.showReportDialog}/>) : (this.props.children);
148
+ }
149
+ }
150
+ //# sourceMappingURL=ErrorBoundary.jsx.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ErrorBoundary.jsx","sourceRoot":"","sources":["../../../src/react/components/ErrorBoundary.tsx"],"names":[],"mappings":"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"}
@@ -1,19 +1,19 @@
1
- import React, { ErrorInfo, ReactNode } from 'react';
2
- interface ErrorBoundaryState {
3
- error?: Error;
4
- }
5
- interface ErrorBoundaryProps {
6
- children: ReactNode;
7
- }
8
- export declare class DefaultErrorBoundary extends React.Component<ErrorBoundaryProps> {
9
- state: ErrorBoundaryState;
10
- static getDerivedStateFromError(error: Error): ErrorBoundaryState;
11
- componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
12
- render(): ReactNode;
13
- }
14
- export interface ErrorDisplayerProps {
15
- error: Error;
16
- extra: React.ReactNode;
17
- }
18
- export declare const ErrorDisplayer: React.FC<ErrorDisplayerProps>;
19
- export {};
1
+ import React, { ErrorInfo, ReactNode } from 'react';
2
+ interface ErrorBoundaryState {
3
+ error?: Error;
4
+ }
5
+ interface ErrorBoundaryProps {
6
+ children: ReactNode;
7
+ }
8
+ export declare class DefaultErrorBoundary extends React.Component<ErrorBoundaryProps> {
9
+ state: ErrorBoundaryState;
10
+ static getDerivedStateFromError(error: Error): ErrorBoundaryState;
11
+ componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
12
+ render(): ReactNode;
13
+ }
14
+ export interface ErrorDisplayerProps {
15
+ error: Error;
16
+ extra: React.ReactNode;
17
+ }
18
+ export declare const ErrorDisplayer: React.FC<ErrorDisplayerProps>;
19
+ export {};
@@ -1,29 +1,29 @@
1
- import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
2
- import React from 'react';
3
- export class DefaultErrorBoundary extends React.Component {
4
- state = {};
5
- static getDerivedStateFromError(error) {
6
- // Update state so the next render will show the fallback UI.
7
- return { error: error };
8
- }
9
- componentDidCatch(error, errorInfo) {
10
- // You can also log the error to an error reporting service
11
- console.error(error, errorInfo);
12
- }
13
- render() {
14
- if (this.state.error) {
15
- // You can render any custom fallback UI
16
- return (React.createElement(ErrorDisplayer, { error: this.state.error, extra: [
17
- React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => window.location.reload() }, "Refresh The Page"),
18
- ] }));
19
- }
20
- return this.props.children;
21
- }
22
- }
23
- export const ErrorDisplayer = ({ error, extra, }) => {
24
- return (React.createElement(Result, { status: 'error', title: 'Ouch... Something Went Wrong', subTitle: React.createElement(Container, { center: true },
25
- React.createElement(Collapse, { style: { width: 600, textAlign: 'left' } },
26
- React.createElement(Collapse.Panel, { header: `${error.toString()}`, key: '1' },
27
- React.createElement(Typography.Text, { style: { width: 400 } }, error.stack)))), extra: extra }));
28
- };
1
+ import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
2
+ import React from 'react';
3
+ export class DefaultErrorBoundary extends React.Component {
4
+ state = {};
5
+ static getDerivedStateFromError(error) {
6
+ // Update state so the next render will show the fallback UI.
7
+ return { error: error };
8
+ }
9
+ componentDidCatch(error, errorInfo) {
10
+ // You can also log the error to an error reporting service
11
+ console.error(error, errorInfo);
12
+ }
13
+ render() {
14
+ if (this.state.error) {
15
+ // You can render any custom fallback UI
16
+ return (React.createElement(ErrorDisplayer, { error: this.state.error, extra: [
17
+ React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => window.location.reload() }, "Refresh The Page"),
18
+ ] }));
19
+ }
20
+ return this.props.children;
21
+ }
22
+ }
23
+ export const ErrorDisplayer = ({ error, extra, }) => {
24
+ return (React.createElement(Result, { status: 'error', title: 'Ouch... Something Went Wrong', subTitle: React.createElement(Container, { center: true },
25
+ React.createElement(Collapse, { style: { width: 600, textAlign: 'left' } },
26
+ React.createElement(Collapse.Panel, { header: `${error.toString()}`, key: '1' },
27
+ React.createElement(Typography.Text, { style: { width: 400 } }, error.stack)))), extra: extra }));
28
+ };
29
29
  //# sourceMappingURL=ErrorDisplayer.js.map
@@ -0,0 +1,36 @@
1
+ import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
2
+ import React from 'react';
3
+ export class DefaultErrorBoundary extends React.Component {
4
+ state = {};
5
+ static getDerivedStateFromError(error) {
6
+ // Update state so the next render will show the fallback UI.
7
+ return { error: error };
8
+ }
9
+ componentDidCatch(error, errorInfo) {
10
+ // You can also log the error to an error reporting service
11
+ console.error(error, errorInfo);
12
+ }
13
+ render() {
14
+ if (this.state.error) {
15
+ // You can render any custom fallback UI
16
+ return (<ErrorDisplayer error={this.state.error} extra={[
17
+ <Button type='primary' key='refresh' onClick={() => window.location.reload()}>
18
+ Refresh The Page
19
+ </Button>,
20
+ ]}/>);
21
+ }
22
+ return this.props.children;
23
+ }
24
+ }
25
+ export const ErrorDisplayer = ({ error, extra, }) => {
26
+ return (<Result status='error' title='Ouch... Something Went Wrong' subTitle={<Container center>
27
+ <Collapse style={{ width: 600, textAlign: 'left' }}>
28
+ <Collapse.Panel header={`${error.toString()}`} key='1'>
29
+ <Typography.Text style={{ width: 400 }}>
30
+ {error.stack}
31
+ </Typography.Text>
32
+ </Collapse.Panel>
33
+ </Collapse>
34
+ </Container>} extra={extra}/>);
35
+ };
36
+ //# sourceMappingURL=ErrorDisplayer.jsx.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ErrorDisplayer.jsx","sourceRoot":"","sources":["../../../src/react/components/ErrorDisplayer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAC3E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAUnD,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAA6B;IACnE,KAAK,GAAuB,EAAE,CAAA;IAEvC,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAC5D,2DAA2D;QAC3D,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAChC,CAAC;IAEQ,MAAM;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACrB,wCAAwC;YACxC,OAAO,CACN,CAAC,cAAc,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC;oBACN,CAAC,MAAM,CACN,IAAI,CAAC,SAAS,CACd,GAAG,CAAC,SAAS,CACb,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CACxC;;MACD,EAAE,MAAM,CAAC;iBACT,CAAC,EACD,CACF,CAAA;SACD;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC3B,CAAC;CACD;AAOD,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,KAAK,EACL,KAAK,GACL,EAAE,EAAE;IACJ,OAAO,CACN,CAAC,MAAM,CACN,MAAM,CAAC,OAAO,CACd,KAAK,CAAC,8BAA8B,CACpC,QAAQ,CAAC,CACR,CAAC,SAAS,CAAC,MAAM,CAChB;KAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAClD;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CACrD;OAAA,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CACtC;QAAA,CAAC,KAAK,CAAC,KAAK,CACb;OAAA,EAAE,UAAU,CAAC,IAAI,CAClB;MAAA,EAAE,QAAQ,CAAC,KAAK,CACjB;KAAA,EAAE,QAAQ,CACX;IAAA,EAAE,SAAS,CAAC,CACZ,CACD,KAAK,CAAC,CAAC,KAAK,CAAC,EACZ,CACF,CAAA;AACF,CAAC,CAAA"}
@@ -1,9 +1,9 @@
1
- import React from 'react';
2
- /**
3
- * A simple UI loader.
4
- */
5
- declare const Loader: ({ loading, children, }: {
6
- loading: boolean;
7
- children?: React.ReactNode;
8
- }) => JSX.Element;
9
- export default Loader;
1
+ import React from 'react';
2
+ /**
3
+ * A simple UI loader.
4
+ */
5
+ declare const Loader: ({ loading, children, }: {
6
+ loading: boolean;
7
+ children?: React.ReactNode;
8
+ }) => JSX.Element;
9
+ export default Loader;
@@ -1,13 +1,13 @@
1
- /*
2
- * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
- */
4
- import React from 'react';
5
- import { LoadingSpinner } from './LoadingSpinner';
6
- /**
7
- * A simple UI loader.
8
- */
9
- const Loader = ({ loading, children, }) => {
10
- return loading ? React.createElement(LoadingSpinner, null) : React.createElement(React.Fragment, null, children);
11
- };
12
- export default Loader;
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React from 'react';
5
+ import { LoadingSpinner } from './LoadingSpinner';
6
+ /**
7
+ * A simple UI loader.
8
+ */
9
+ const Loader = ({ loading, children, }) => {
10
+ return loading ? React.createElement(LoadingSpinner, null) : React.createElement(React.Fragment, null, children);
11
+ };
12
+ export default Loader;
13
13
  //# sourceMappingURL=Loader.js.map
@@ -0,0 +1,13 @@
1
+ /*
2
+ * Copyright (c) 2022, J2 Innovations. All Rights Reserved
3
+ */
4
+ import React from 'react';
5
+ import { LoadingSpinner } from './LoadingSpinner';
6
+ /**
7
+ * A simple UI loader.
8
+ */
9
+ const Loader = ({ loading, children, }) => {
10
+ return loading ? <LoadingSpinner /> : <>{children}</>;
11
+ };
12
+ export default Loader;
13
+ //# sourceMappingURL=Loader.jsx.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Loader.jsx","sourceRoot":"","sources":["../../../src/react/components/Loader.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,EACf,OAAO,EACP,QAAQ,GAIR,EAAe,EAAE;IACjB,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAA;AACtD,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}
@@ -1,2 +1,2 @@
1
- import React from 'react';
2
- export declare const LoadingSpinner: React.FC;
1
+ import React from 'react';
2
+ export declare const LoadingSpinner: React.FC;