From 84e45caa6c3c4699612324b0ae64cdd76951664e Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Tue, 3 Dec 2019 18:42:15 +0100 Subject: [PATCH] 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 | 12 +- .../flash-another/flash-another.tsx | 13 +- lib/gui/app/components/flash-another/index.ts | 2 +- .../flash-results/flash-results.tsx | 11 +- lib/gui/app/components/flash-results/index.ts | 2 +- lib/gui/app/styled-components.tsx | 113 +++++++++++++ npm-shrinkwrap.json | 152 ++++-------------- 7 files changed, 159 insertions(+), 146 deletions(-) create mode 100644 lib/gui/app/styled-components.tsx diff --git a/lib/gui/app/components/finish/finish.tsx b/lib/gui/app/components/finish/finish.tsx index 6267e311..ad9ba1af 100644 --- a/lib/gui/app/components/finish/finish.tsx +++ b/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 FlashResults from '../flash-results/flash-results'; +import { FlashAnother } from '../flash-another/flash-another'; +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) {
Thanks for using - + by - +
diff --git a/lib/gui/app/components/flash-another/flash-another.tsx b/lib/gui/app/components/flash-another/flash-another.tsx index e8097e8e..c993b559 100644 --- a/lib/gui/app/components/flash-another/flash-another.tsx +++ b/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` ${right} `; -const FlashAnother = (props: any) => { +export interface FlashAnotherProps { + onClick: (options: { preserveImage: boolean }) => void; +} + +export const FlashAnother = (props: FlashAnotherProps) => { return (
@@ -39,9 +42,3 @@ const FlashAnother = (props: any) => { ); }; - -FlashAnother.propTypes = { - onClick: PropTypes.func, -}; - -export default FlashAnother; diff --git a/lib/gui/app/components/flash-another/index.ts b/lib/gui/app/components/flash-another/index.ts index e9d7d4c8..06626392 100644 --- a/lib/gui/app/components/flash-another/index.ts +++ b/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, []); diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx index 15bac575..90b27e20 100644 --- a/lib/gui/app/components/flash-results/flash-results.tsx +++ b/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` ${space} `; -const FlashResults: any = ({ +export const FlashResults: any = ({ errors, results, message, @@ -64,11 +63,3 @@ const FlashResults: any = ({
); }; - -FlashResults.propTypes = { - results: PropTypes.object, - message: PropTypes.object, - errors: PropTypes.func, -}; - -export default FlashResults; diff --git a/lib/gui/app/components/flash-results/index.ts b/lib/gui/app/components/flash-results/index.ts index 1d85aa52..d5ecb0b4 100644 --- a/lib/gui/app/components/flash-results/index.ts +++ b/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, []); diff --git a/lib/gui/app/styled-components.tsx b/lib/gui/app/styled-components.tsx new file mode 100644 index 00000000..449fb665 --- /dev/null +++ b/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) => ( + +); + +export const BaseButton = styled(Button)` + height: 48px; +`; + +export const StepButton = (props: any) => ( + +); + +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; +`; diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 459020c1..8a5fc39c 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1521,9 +1521,9 @@ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" }, "acorn": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.0.tgz", - "integrity": "sha512-MW/FjM+IvU9CgBzjO3UIPCE2pyEwUsoFl+VGdczOPEdxfGFjuKny/gN54mOuX7Qxmb9Rg9MCn2oKiSUeW+pjrw==", + "version": "5.7.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", + "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", - "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-2.0.0.tgz", - "integrity": "sha512-YbKCNLPPP4inc0E5If4OaalBc7gpaM2MRv77Pv2VThVComLKfbGYtJcdDCViDyp1Wd4SebhHLz94vp91zbK6bw==", - "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 - } - } + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz", + "integrity": "sha512-vKQ9DTQPN1FLYiiEEOQ6IBGFqvjCa5rSK3cWMy/Nespm5d/x3dGFT9UBZnkLxCwua/IXBi2TYnwTEpsOvhC4UQ==", + "dev": true }, "date-fns": { "version": "1.30.1", @@ -4801,9 +4776,9 @@ "dev": true }, "des.js": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", - "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz", + "integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=", "dev": true, "requires": { "inherits": "^2.0.1", @@ -5440,9 +5415,9 @@ "dev": true }, "elliptic": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz", - "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==", + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.1.tgz", + "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", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz", - "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "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": {