@balena/ui-shared-components 2.0.0 → 2.0.1

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 (9) hide show
  1. package/dist/components/DownloadImageDialog/ApplicationInstructions.js +10 -6
  2. package/dist/components/DownloadImageDialog/ImageForm.js +1 -1
  3. package/dist/components/DownloadImageDialog/OsTypeSelector.js +1 -1
  4. package/dist/components/DownloadImageDialog/VariantSelector.js +1 -1
  5. package/dist_esm5/components/DownloadImageDialog/ApplicationInstructions.js +10 -6
  6. package/dist_esm5/components/DownloadImageDialog/ImageForm.js +1 -1
  7. package/dist_esm5/components/DownloadImageDialog/OsTypeSelector.js +1 -1
  8. package/dist_esm5/components/DownloadImageDialog/VariantSelector.js +1 -1
  9. package/package.json +2 -2
package/dist/components/DownloadImageDialog/ApplicationInstructions.js CHANGED
@@ -107,10 +107,10 @@ export var ApplicationInstructions = memo(function (_a) {
107
107
  ], false);
108
108
  return (_jsxs(Box, __assign({ display: "flex", flexDirection: "column", alignItems: "flex-start" }, { children: [_jsx(Typography, __assign({ variant: "h5" }, { children: "Instructions" })), hasOsSpecificInstructions && (_jsx(Box, __assign({ mb: 3 }, { children: _jsx(Box, __assign({ sx: { borderBottom: 1, borderColor: 'divider' } }, { children: _jsx(Tabs, __assign({ value: Object.keys(instructions).find(function (key) { return key === currentOs; }), onChange: function (_event, value) { return setCurrentOs(value !== null && value !== void 0 ? value : 'Unknown'); }, "aria-label": "os tabs" }, { children: Object.keys(instructions).map(function (os) {
109
109
  return _jsx(Tab, { label: os, value: os }, os);
110
- }) })) })) }))), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, __assign({ mt: 2 }, { children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, __assign({ target: "_blank", href: "https://www.balena.io/docs/learn/getting-started/".concat(deviceType.slug, "/nodejs/") }, { children: "Getting Started Guide" })), "."] }) }))] })));
110
+ }) })) })) }))), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, __assign({ mt: 2 }, { children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, __assign({ href: "https://www.balena.io/docs/learn/getting-started/".concat(deviceType.slug, "/nodejs/") }, { children: "Getting Started Guide" })), "."] }) }))] })));
111
111
  });
112
- var InstructionsItem = function (props) {
113
- var node = props.node, index = props.index;
112
+ var InstructionsItem = function (_a) {
113
+ var node = _a.node, index = _a.index;
114
114
  var hasChildren = has(node, 'children');
115
115
  var text = null;
116
116
  if (typeof node === 'string') {
@@ -119,7 +119,7 @@ var InstructionsItem = function (props) {
119
119
  if (node === null || node === void 0 ? void 0 : node.text) {
120
120
  text = node.text;
121
121
  }
122
- return (_jsxs(OrderedListItem, __assign({ index: index + 1, sx: { maxWidth: '100%', paddingY: 0 } }, { children: [_jsx(Markdown, { children: text, components: {
122
+ return (_jsxs(OrderedListItem, __assign({ index: index + 1, sx: { maxWidth: '100%' } }, { children: [_jsx(Markdown, { children: text, components: {
123
123
  code: function (codeProps) {
124
124
  return (_jsx("code", __assign({ style: {
125
125
  maxWidth: '100%',
@@ -132,12 +132,16 @@ var InstructionsItem = function (props) {
132
132
  br: function () {
133
133
  return _jsx("p", {});
134
134
  },
135
+ p: function (_a) {
136
+ var children = _a.children;
137
+ return (_jsx("p", __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: children })));
138
+ },
135
139
  } }), hasChildren && (_jsx(List, { children: node.children.map(function (item, i) {
136
140
  return _jsx(InstructionsItem, { node: item, index: i }, i);
137
141
  }) }))] })));
138
142
  };
139
- var InstructionsList = function (props) {
140
- var instructions = props.instructions;
143
+ var InstructionsList = function (_a) {
144
+ var instructions = _a.instructions;
141
145
  return (_jsx(List, { children: instructions.map(function (item, i) {
142
146
  return _jsx(InstructionsItem, { node: item, index: i }, "".concat(item, "_").concat(i));
143
147
  }) }));
package/dist/components/DownloadImageDialog/ImageForm.js CHANGED
@@ -159,7 +159,7 @@ export var ImageForm = memo(function (_a) {
159
159
  endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: _jsx(IconButton, __assign({ onClick: function () { return setShowPassword(function (show) { return !show; }); }, onMouseDown: function (event) {
160
160
  event.preventDefault();
161
161
  }, edge: "end" }, { children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) })) }))),
162
- }, onChange: function (event) { return onChange('wifiKey', event.target.value); } })] }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, __assign({ onClick: function () { return setShowAdvancedSettings(!showAdvancedSettings); }, sx: { px: 0 }, disableRipple: true }, { children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] })), _jsx(Collapse, __assign({ in: showAdvancedSettings, collapsedSize: 0 }, { children: _jsxs(Box, __assign({ display: "flex", flexDirection: "column" }, { children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, __assign({ htmlFor: "poll-interval-label", sx: { display: 'flex' } }, { children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, __assign({ href: POLL_INTERVAL_DOCS, target: "_blank", sx: {
162
+ }, onChange: function (event) { return onChange('wifiKey', event.target.value); } })] }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, __assign({ onClick: function () { return setShowAdvancedSettings(!showAdvancedSettings); }, sx: { px: 0 }, disableRipple: true }, { children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] })), _jsx(Collapse, __assign({ in: showAdvancedSettings, collapsedSize: 0 }, { children: _jsxs(Box, __assign({ display: "flex", flexDirection: "column" }, { children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, __assign({ htmlFor: "poll-interval-label", sx: { display: 'flex' } }, { children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, __assign({ href: POLL_INTERVAL_DOCS, sx: {
163
163
  display: 'flex',
164
164
  alignItems: 'center',
165
165
  height: '1.5rem',
package/dist/components/DownloadImageDialog/OsTypeSelector.js CHANGED
@@ -44,7 +44,7 @@ export var OsTypeSelector = function (_a) {
44
44
  var selectedOsType = selectOsTypes.find(function (osType) {
45
45
  return osType.slug === selectedOsTypeSlug && osType.supportedForDeviceType;
46
46
  });
47
- return (_jsxs(Box, __assign({ display: "flex", flexDirection: "column", flex: 1 }, { children: [_jsxs(InputLabel, __assign({ htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 } }, { children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, __assign({ sx: { height: 14 }, target: "_blank", href: "https://www.balena.io/docs/reference/OS/extended-support-release" }, { children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) }))] })), _jsx(Select, __assign({ id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_b = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _b !== void 0 ? _b : OsTypesEnum.DEFAULT, renderValue: function (selected) { return (_jsx(Box, __assign({ display: "flex", width: "100%" }, { children: _jsx(OsTypeOption, { osType: selectOsTypes.find(function (osType) { return selected === osType.slug; }) }) }))); }, onChange: function (event) {
47
+ return (_jsxs(Box, __assign({ display: "flex", flexDirection: "column", flex: 1 }, { children: [_jsxs(InputLabel, __assign({ htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 } }, { children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, __assign({ sx: { height: 14 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release" }, { children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) }))] })), _jsx(Select, __assign({ id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_b = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _b !== void 0 ? _b : OsTypesEnum.DEFAULT, renderValue: function (selected) { return (_jsx(Box, __assign({ display: "flex", width: "100%" }, { children: _jsx(OsTypeOption, { osType: selectOsTypes.find(function (osType) { return selected === osType.slug; }) }) }))); }, onChange: function (event) {
48
48
  var osType = selectOsTypes.find(function (os) { return os.slug === event.target.value; });
49
49
  return !osType.disabled && onSelectedOsTypeChange(osType.slug);
50
50
  } }, { children: selectOsTypes.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.slug }, { children: _jsx(OsTypeOption, { osType: option }) }), option.slug)); }) }))] })));
package/dist/components/DownloadImageDialog/VariantSelector.js CHANGED
@@ -17,7 +17,7 @@ import { Lightbulb } from '@mui/icons-material';
17
17
  var variantInfo = {
18
18
  dev: {
19
19
  title: (_jsxs(Box, __assign({ display: "flex", gap: 1, flexDirection: "row", alignItems: "center" }, { children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, __assign({ variant: "smallText", color: "customBlue.main", alignItems: "center", display: "flex" }, { children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] }))] }))),
20
- description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, __assign({ href: "https://balena.io/docs/development/local-mode/", target: "_blank" }, { children: "local mode" })), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
20
+ description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, __assign({ href: "https://balena.io/docs/development/local-mode/" }, { children: "local mode" })), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
21
21
  },
22
22
  prod: {
23
23
  title: _jsx(Typography, { children: getOsVariantDisplayText('prod') }),
package/dist_esm5/components/DownloadImageDialog/ApplicationInstructions.js CHANGED
@@ -72,10 +72,10 @@ export var ApplicationInstructions = memo(function (_a) {
72
72
  ], false);
73
73
  return (_jsxs(Box, __assign({ display: "flex", flexDirection: "column", alignItems: "flex-start" }, { children: [_jsx(Typography, __assign({ variant: "h5" }, { children: "Instructions" })), hasOsSpecificInstructions && (_jsx(Box, __assign({ mb: 3 }, { children: _jsx(Box, __assign({ sx: { borderBottom: 1, borderColor: 'divider' } }, { children: _jsx(Tabs, __assign({ value: Object.keys(instructions).find(function (key) { return key === currentOs; }), onChange: function (_event, value) { return setCurrentOs(value !== null && value !== void 0 ? value : 'Unknown'); }, "aria-label": "os tabs" }, { children: Object.keys(instructions).map(function (os) {
74
74
  return _jsx(Tab, { label: os, value: os }, os);
75
- }) })) })) }))), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, __assign({ mt: 2 }, { children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, __assign({ target: "_blank", href: "https://www.balena.io/docs/learn/getting-started/".concat(deviceType.slug, "/nodejs/") }, { children: "Getting Started Guide" })), "."] }) }))] })));
75
+ }) })) })) }))), _jsx(InstructionsList, { instructions: finalInstructions }), _jsx(Box, __assign({ mt: 2 }, { children: _jsxs(Typography, { children: ["For more details please refer to our", ' ', _jsx(MUILinkWithTracking, __assign({ href: "https://www.balena.io/docs/learn/getting-started/".concat(deviceType.slug, "/nodejs/") }, { children: "Getting Started Guide" })), "."] }) }))] })));
76
76
  });
77
- var InstructionsItem = function (props) {
78
- var node = props.node, index = props.index;
77
+ var InstructionsItem = function (_a) {
78
+ var node = _a.node, index = _a.index;
79
79
  var hasChildren = has(node, 'children');
80
80
  var text = null;
81
81
  if (typeof node === 'string') {
@@ -84,7 +84,7 @@ var InstructionsItem = function (props) {
84
84
  if (node === null || node === void 0 ? void 0 : node.text) {
85
85
  text = node.text;
86
86
  }
87
- return (_jsxs(OrderedListItem, __assign({ index: index + 1, sx: { maxWidth: '100%', paddingY: 0 } }, { children: [_jsx(Markdown, { children: text, components: {
87
+ return (_jsxs(OrderedListItem, __assign({ index: index + 1, sx: { maxWidth: '100%' } }, { children: [_jsx(Markdown, { children: text, components: {
88
88
  code: function (codeProps) {
89
89
  return (_jsx("code", __assign({ style: {
90
90
  maxWidth: '100%',
@@ -97,12 +97,16 @@ var InstructionsItem = function (props) {
97
97
  br: function () {
98
98
  return _jsx("p", {});
99
99
  },
100
+ p: function (_a) {
101
+ var children = _a.children;
102
+ return (_jsx("p", __assign({ style: { marginTop: 0, marginBottom: 0 } }, { children: children })));
103
+ },
100
104
  } }), hasChildren && (_jsx(List, { children: node.children.map(function (item, i) {
101
105
  return _jsx(InstructionsItem, { node: item, index: i }, i);
102
106
  }) }))] })));
103
107
  };
104
- var InstructionsList = function (props) {
105
- var instructions = props.instructions;
108
+ var InstructionsList = function (_a) {
109
+ var instructions = _a.instructions;
106
110
  return (_jsx(List, { children: instructions.map(function (item, i) {
107
111
  return _jsx(InstructionsItem, { node: item, index: i }, "".concat(item, "_").concat(i));
108
112
  }) }));
package/dist_esm5/components/DownloadImageDialog/ImageForm.js CHANGED
@@ -133,7 +133,7 @@ export var ImageForm = memo(function (_a) {
133
133
  endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: _jsx(IconButton, __assign({ onClick: function () { return setShowPassword(function (show) { return !show; }); }, onMouseDown: function (event) {
134
134
  event.preventDefault();
135
135
  }, edge: "end" }, { children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) })) }))),
136
- }, onChange: function (event) { return onChange('wifiKey', event.target.value); } })] }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, __assign({ onClick: function () { return setShowAdvancedSettings(!showAdvancedSettings); }, sx: { px: 0 }, disableRipple: true }, { children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] })), _jsx(Collapse, __assign({ in: showAdvancedSettings, collapsedSize: 0 }, { children: _jsxs(Box, __assign({ display: "flex", flexDirection: "column" }, { children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, __assign({ htmlFor: "poll-interval-label", sx: { display: 'flex' } }, { children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, __assign({ href: POLL_INTERVAL_DOCS, target: "_blank", sx: {
136
+ }, onChange: function (event) { return onChange('wifiKey', event.target.value); } })] }))] })), _jsx(Divider, { variant: "fullWidth", sx: { my: 3, borderStyle: 'dashed' } }), _jsxs(Button, __assign({ onClick: function () { return setShowAdvancedSettings(!showAdvancedSettings); }, sx: { px: 0 }, disableRipple: true }, { children: [showAdvancedSettings ? _jsx(RemoveIcon, {}) : _jsx(AddIcon, {}), " Advanced settings"] })), _jsx(Collapse, __assign({ in: showAdvancedSettings, collapsedSize: 0 }, { children: _jsxs(Box, __assign({ display: "flex", flexDirection: "column" }, { children: [_jsxs(FormControl, { children: [_jsxs(FormLabel, __assign({ htmlFor: "poll-interval-label", sx: { display: 'flex' } }, { children: ["Check for updates every X minutes", ' ', _jsx(MUILinkWithTracking, __assign({ href: POLL_INTERVAL_DOCS, sx: {
137
137
  display: 'flex',
138
138
  alignItems: 'center',
139
139
  height: '1.5rem',
package/dist_esm5/components/DownloadImageDialog/OsTypeSelector.js CHANGED
@@ -34,7 +34,7 @@ export var OsTypeSelector = function (_a) {
34
34
  var selectedOsType = selectOsTypes.find(function (osType) {
35
35
  return osType.slug === selectedOsTypeSlug && osType.supportedForDeviceType;
36
36
  });
37
- return (_jsxs(Box, __assign({ display: "flex", flexDirection: "column", flex: 1 }, { children: [_jsxs(InputLabel, __assign({ htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 } }, { children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, __assign({ sx: { height: 14 }, target: "_blank", href: "https://www.balena.io/docs/reference/OS/extended-support-release" }, { children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) }))] })), _jsx(Select, __assign({ id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_b = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _b !== void 0 ? _b : OsTypesEnum.DEFAULT, renderValue: function (selected) { return (_jsx(Box, __assign({ display: "flex", width: "100%" }, { children: _jsx(OsTypeOption, { osType: selectOsTypes.find(function (osType) { return selected === osType.slug; }) }) }))); }, onChange: function (event) {
37
+ return (_jsxs(Box, __assign({ display: "flex", flexDirection: "column", flex: 1 }, { children: [_jsxs(InputLabel, __assign({ htmlFor: "newAppApplicationType", sx: { display: 'flex', alignItems: 'center', mb: 2 } }, { children: ["Select OS type", ' ', _jsx(MUILinkWithTracking, __assign({ sx: { height: 14 }, href: "https://www.balena.io/docs/reference/OS/extended-support-release" }, { children: _jsx(ArticleIcon, { sx: { width: 14, height: 14, marginLeft: 1 } }) }))] })), _jsx(Select, __assign({ id: "newAppApplicationType", fullWidth: true, disabled: supportedOsTypes.length === 0, value: (_b = selectedOsType === null || selectedOsType === void 0 ? void 0 : selectedOsType.slug) !== null && _b !== void 0 ? _b : OsTypesEnum.DEFAULT, renderValue: function (selected) { return (_jsx(Box, __assign({ display: "flex", width: "100%" }, { children: _jsx(OsTypeOption, { osType: selectOsTypes.find(function (osType) { return selected === osType.slug; }) }) }))); }, onChange: function (event) {
38
38
  var osType = selectOsTypes.find(function (os) { return os.slug === event.target.value; });
39
39
  return !osType.disabled && onSelectedOsTypeChange(osType.slug);
40
40
  } }, { children: selectOsTypes.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.slug }, { children: _jsx(OsTypeOption, { osType: option }) }), option.slug)); }) }))] })));
package/dist_esm5/components/DownloadImageDialog/VariantSelector.js CHANGED
@@ -7,7 +7,7 @@ import { Lightbulb } from '@mui/icons-material';
7
7
  var variantInfo = {
8
8
  dev: {
9
9
  title: (_jsxs(Box, __assign({ display: "flex", gap: 1, flexDirection: "row", alignItems: "center" }, { children: [_jsx(Typography, { children: getOsVariantDisplayText('dev') }), _jsxs(Typography, __assign({ variant: "smallText", color: "customBlue.main", alignItems: "center", display: "flex" }, { children: [_jsx(Lightbulb, { sx: { width: 14, height: 14 } }), "Recommended for first time users"] }))] }))),
10
- description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, __assign({ href: "https://balena.io/docs/development/local-mode/", target: "_blank" }, { children: "local mode" })), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
10
+ description: (_jsxs(_Fragment, { children: ["Development images should be used when you are developing an application and want to use the fast", ' ', _jsx(MUILinkWithTracking, __assign({ href: "https://balena.io/docs/development/local-mode/" }, { children: "local mode" })), ' ', "workflow", ' ', _jsx("strong", { children: "This variant should never be used in production." })] })),
11
11
  },
12
12
  prod: {
13
13
  title: _jsx(Typography, { children: getOsVariantDisplayText('prod') }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@balena/ui-shared-components",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist_esm5/index.js",
6
6
  "sideEffects": false,
@@ -112,6 +112,6 @@
112
112
  },
113
113
  "homepage": "https://github.com/balena-io/ui-shared-components#readme",
114
114
  "versionist": {
115
- "publishedAt": "2024-02-09T15:13:42.995Z"
115
+ "publishedAt": "2024-02-12T17:33:58.680Z"
116
116
  }
117
117
  }