Rework lib/gui/app/styled-components to typescript

Change-type: patch
Changelog-entry: Rework lib/gui/app/styled-components to typescript

lib/gui/app/components/finish/finish.tsx

@@ -23,14 +23,15 @@ import * as selectionState from '../../models/selection-state';
 import * as store from '../../models/store';
 import * as analytics from '../../modules/analytics';
 import * as updateLock from '../../modules/update-lock';
-import FlashAnother from '../flash-another/flash-another';
+import { FlashAnother } from '../flash-another/flash-another';
-import FlashResults from '../flash-results/flash-results';
+import { FlashResults } from '../flash-results/flash-results';
 import * as SVGIcon from '../svg-icon/svg-icon';
 
 const restart = (options: any, $state: any) => {
 	const {
 		applicationSessionUuid,
 		flashingWorkflowUuid,
+		// @ts-ignore
 	} = store.getState().toJS();
 	if (!options.preserveImage) {
 		selectionState.deselectImage();
@@ -65,6 +66,7 @@ const formattedErrors = () => {
 };
 
 function FinishPage({ $state }: any) {
+	// @ts-ignore
 	const results = flashState.getFlashResults().results || {};
 	const progressMessage = messages.progress;
 	return (
@@ -86,7 +88,7 @@ function FinishPage({ $state }: any) {
 					<div className="fallback-banner">
 						<div className="caption caption-big">
 							Thanks for using
-							<span os-open-external="https://etcher.io?ref=etcher_offline_banner">
+							<span os-open-external="https://balena.io/etcher?ref=etcher_offline_banner">
 								<SVGIcon
 									paths={['../../assets/etcher.svg']}
 									width="165px"
@@ -102,7 +104,7 @@ function FinishPage({ $state }: any) {
 								height="20px"
 							></SVGIcon>
 							by
-							<span os-open-external="https://resin.io?ref=etcher_success">
+							<span os-open-external="https://balena.io?ref=etcher_success">
 								<SVGIcon
 									paths={['../../assets/balena.svg']}
 									width="auto"
@@ -113,7 +115,7 @@ function FinishPage({ $state }: any) {
 								<span
 									className="caption caption-small footer-right"
 									manifest-bind="version"
-									os-open-external="https://github.com/resin-io/etcher/blob/master/CHANGELOG.md"
+									os-open-external="https://github.com/balena-io/etcher/blob/master/CHANGELOG.md"
 								></span>
 							</div>
 						</div>

lib/gui/app/components/flash-another/flash-another.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from 'styled-components';
 import { position, right } from 'styled-system';
@@ -25,7 +24,11 @@ const Div = styled.div<any>`
 	${right}
 `;
 
-const FlashAnother = (props: any) => {
+export interface FlashAnotherProps {
+	onClick: (options: { preserveImage: boolean }) => void;
+}
+
+export const FlashAnother = (props: FlashAnotherProps) => {
 	return (
 		<ThemedProvider>
 			<Div position="absolute" right="152px">
@@ -39,9 +42,3 @@ const FlashAnother = (props: any) => {
 		</ThemedProvider>
 	);
 };
-
-FlashAnother.propTypes = {
-	onClick: PropTypes.func,
-};
-
-export default FlashAnother;

lib/gui/app/components/flash-another/index.ts

@@ -16,7 +16,7 @@
 
 import * as angular from 'angular';
 import { react2angular } from 'react2angular';
-import FlashAnother from './flash-another';
+import { FlashAnother } from './flash-another';
 
 export const MODULE_NAME = 'Etcher.Components.FlashAnother';
 const FlashAnotherModule = angular.module(MODULE_NAME, []);

lib/gui/app/components/flash-results/flash-results.tsx

@@ -15,7 +15,6 @@
  */
 
 import * as _ from 'lodash';
-import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import styled from 'styled-components';
 import { left, position, space, top } from 'styled-system';
@@ -28,7 +27,7 @@ const Div: any = styled.div<any>`
   ${space}
 `;
 
-const FlashResults: any = ({
+export const FlashResults: any = ({
 	errors,
 	results,
 	message,
@@ -64,11 +63,3 @@ const FlashResults: any = ({
 		</Div>
 	);
 };
-
-FlashResults.propTypes = {
-	results: PropTypes.object,
-	message: PropTypes.object,
-	errors: PropTypes.func,
-};
-
-export default FlashResults;

lib/gui/app/components/flash-results/index.ts

@@ -20,7 +20,7 @@
 
 import * as angular from 'angular';
 import { react2angular } from 'react2angular';
-import FlashResults from './flash-results';
+import { FlashResults } from './flash-results';
 
 export const MODULE_NAME = 'Etcher.Components.FlashResults';
 const FlashResultsModule = angular.module(MODULE_NAME, []);

lib/gui/app/styled-components.tsx

@@ -0,0 +1,113 @@
+/*
+ * Copyright 2018 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Button, Flex, Provider, Txt } from 'rendition';
+import styled from 'styled-components';
+import { space } from 'styled-system';
+
+import { colors } from './theme';
+
+const theme = {
+	// TODO: Standardize how the colors are specified to match with rendition's format.
+	customColors: colors,
+	button: {
+		border: {
+			width: '0',
+			radius: '24px',
+		},
+		disabled: {
+			opacity: 1,
+		},
+		extend: () => `
+      width: 200px;
+      height: 48px;
+      font-size: 16px;
+
+      &:disabled {
+        background-color: ${colors.dark.disabled.background};
+        color: ${colors.dark.disabled.foreground};
+        opacity: 1;
+
+        &:hover {
+          background-color: ${colors.dark.disabled.background};
+          color: ${colors.dark.disabled.foreground};
+        }
+      }
+    `,
+	},
+};
+
+export const ThemedProvider = (props: any) => (
+	<Provider theme={theme} {...props}></Provider>
+);
+
+export const BaseButton = styled(Button)`
+	height: 48px;
+`;
+
+export const StepButton = (props: any) => (
+	<BaseButton primary {...props}></BaseButton>
+);
+
+export const ChangeButton = styled(BaseButton)`
+	color: ${colors.primary.background};
+	padding: 0;
+	width: 100%;
+	height: auto;
+
+	&:enabled {
+		&:hover,
+		&:focus,
+		&:active {
+			color: #8f9297;
+		}
+	}
+	${space}
+`;
+export const StepNameButton = styled(BaseButton)`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	font-weight: bold;
+	color: ${colors.dark.foreground};
+
+	&:enabled {
+		&:hover,
+		&:focus,
+		&:active {
+			color: #8f9297;
+		}
+	}
+`;
+export const StepSelection = styled(Flex)`
+	flex-wrap: wrap;
+	justify-content: center;
+`;
+export const Footer = styled(Txt)`
+	margin-top: 10px;
+	color: ${colors.dark.disabled.foreground};
+	font-size: 10px;
+`;
+export const Underline = styled(Txt.span)`
+	border-bottom: 1px dotted;
+	padding-bottom: 2px;
+`;
+export const DetailsText = styled(Txt.p)`
+	color: ${colors.dark.disabled.foreground};
+	margin-bottom: 0;
+`;

npm-shrinkwrap.json

@@ -1521,9 +1521,9 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
     "acorn": {
-      "version": "6.1.0",
+      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-      "integrity": "sha512-MW/FjM+IvU9CgBzjO3UIPCE2pyEwUsoFl+VGdczOPEdxfGFjuKny/gN54mOuX7Qxmb9Rg9MCn2oKiSUeW+pjrw==",
+      "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
       "dev": true
     },
     "acorn-jsx": {
@@ -2470,6 +2470,12 @@
         "chainsaw": "~0.1.0"
       }
     },
+    "binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+      "dev": true
+    },
     "bindings": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@@ -2905,26 +2911,6 @@
         "y18n": "^4.0.0"
       },
       "dependencies": {
-        "bluebird": {
-          "version": "3.7.1",
-          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.1.tgz",
-          "integrity": "sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==",
-          "dev": true
-        },
-        "glob": {
-          "version": "7.1.6",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
         "lru-cache": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4323,21 +4309,10 @@
       }
     },
     "data-uri-to-buffer": {
-      "version": "2.0.0",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz",
-      "integrity": "sha512-YbKCNLPPP4inc0E5If4OaalBc7gpaM2MRv77Pv2VThVComLKfbGYtJcdDCViDyp1Wd4SebhHLz94vp91zbK6bw==",
+      "integrity": "sha512-vKQ9DTQPN1FLYiiEEOQ6IBGFqvjCa5rSK3cWMy/Nespm5d/x3dGFT9UBZnkLxCwua/IXBi2TYnwTEpsOvhC4UQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "^8.0.7"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "8.10.40",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.40.tgz",
-          "integrity": "sha512-RRSjdwz63kS4u7edIwJUn8NqKLLQ6LyqF/X4+4jp38MBT3Vwetewi2N4dgJEshLbDwNgOJXNYoOwzVZUSSLhkQ==",
       "dev": true
-        }
-      }
     },
     "date-fns": {
       "version": "1.30.1",
@@ -4801,9 +4776,9 @@
       "dev": true
     },
     "des.js": {
-      "version": "1.0.1",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
-      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+      "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=",
       "dev": true,
       "requires": {
         "inherits": "^2.0.1",
@@ -5440,9 +5415,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
+      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.1.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "integrity": "sha512-xvJINNLbTeWQjrl6X+7eQCrIy/YPv5XCpKW6kB5mKvtnGILoLDcySuwomfdzt0BMdLNVnuRNTuzKNHj0bva1Cg==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -8232,6 +8207,15 @@
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
       "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
+    "is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^1.0.0"
+      }
+    },
     "is-buffer": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
@@ -10302,9 +10286,9 @@
       },
       "dependencies": {
         "buffer": {
-          "version": "4.9.2",
+          "version": "4.9.1",
-          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
-          "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+          "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
           "dev": true,
           "requires": {
             "base64-js": "^1.0.2",
@@ -14790,80 +14774,6 @@
         "chokidar": "^2.0.2",
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-          "dev": true,
-          "requires": {
-            "micromatch": "^3.1.4",
-            "normalize-path": "^2.1.1"
-          },
-          "dependencies": {
-            "normalize-path": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-              "dev": true,
-              "requires": {
-                "remove-trailing-separator": "^1.0.1"
-              }
-            }
-          }
-        },
-        "binary-extensions": {
-          "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-          "dev": true
-        },
-        "chokidar": {
-          "version": "2.1.8",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-          "dev": true,
-          "requires": {
-            "anymatch": "^2.0.0",
-            "async-each": "^1.0.1",
-            "braces": "^2.3.2",
-            "glob-parent": "^3.1.0",
-            "inherits": "^2.0.3",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
-            "normalize-path": "^3.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
-            "upath": "^1.1.1"
-          }
-        },
-        "is-binary-path": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^1.0.0"
-          }
-        },
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-          "dev": true
-        },
-        "readdirp": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.11",
-            "micromatch": "^3.1.10",
-            "readable-stream": "^2.0.2"
-          }
-        }
       }
     },
     "wdio-dot-reporter": {