Stylelint (testing, non-required) (#317)

* Stylelint

* Minor cleanups

* Default parser

* Header eslint rule

.github/workflows/pr-any.yml

@@ -5,7 +5,7 @@ jobs:
   pr:
     strategy:
       matrix:
-        step: ['lint', 'test', 'build']
+        step: ['lint', 'lint:css', 'test', 'build']
     name: ${{ matrix.step }}
     runs-on: ubuntu-latest
     steps:

.stylelintrc

@@ -0,0 +1,7 @@
+{
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-styled-components"
+  ],
+  "defaultSeverity": "warning"
+}

__mocks__/chrome.ts

@@ -1,4 +1,4 @@
-// Copyright 2019 @polkadot/extension-ui authors & contributors
+// Copyright 2019-2020 @polkadot/extension authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 

__mocks__/fileMock.js

@@ -1,2 +1,6 @@
+// Copyright 2019-2020 @polkadot/extension authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 // eslint-disable-line
 module.exports = '';

babel.config.js

@@ -1 +1,5 @@
+// Copyright 2019-2020 @polkadot/extension authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 module.exports = require('@polkadot/dev/config/babel');

jest.config.js

@@ -1,4 +1,7 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// Copyright 2019-2020 @polkadot/extension authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 const config = require('@polkadot/dev/config/jest');
 
 module.exports = Object.assign({}, config, {

package.json

@@ -7,9 +7,9 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.10.0-beta.11",
+    "@polkadot/api": "^1.10.0-beta.12",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/types": "^1.10.0-beta.11",
+    "@polkadot/types": "^1.10.0-beta.12",
     "@polkadot/util": "^2.7.1",
     "@polkadot/util-crypto": "^2.7.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -20,6 +20,7 @@
     "build:release": "polkadot-ci-ghact-build",
     "build:zip": "(rm -rf ./master-build.zip && yarn build && cd packages/extension/build && zip -r -FS ../../../master-build.zip . -i *) && (rm -rf ./master-src.zip && zip -r -x '*build*' -x '*node_modules*' -FS ./master-src.zip packages .babelrc.js .editorconfig .eslintignore .eslintrc.js babel.config.js CHANGELOG.md CONTRIBUTING.md jest.config.js lerna.json LICENSE package.json README.md tsconfig.json yarn.lock)",
     "lint": "polkadot-dev-run-lint",
+    "lint:css": "stylelint './packages/**/src/**/*.tsx'",
     "clean": "polkadot-dev-clean-build",
     "postinstall": "polkadot-dev-yarn-only",
     "start": "yarn watch",
@@ -28,10 +29,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@polkadot/dev": "^0.52.6",
+    "@polkadot/dev": "^0.52.8",
-    "@polkadot/typegen": "^1.10.0-beta.11",
+    "@polkadot/typegen": "^1.10.0-beta.12",
     "@types/jest": "^25.2.1",
     "copy-webpack-plugin": "^5.1.1",
-    "sinon-chrome": "^3.0.1"
+    "sinon-chrome": "^3.0.1",
+    "stylelint": "^13.3.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-styled-components": "^0.1.1"
   }
 }

packages/extension-base/package.json

@@ -6,9 +6,9 @@
   "license": "Apache-2",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api": "^1.10.0-beta.11",
+    "@polkadot/api": "^1.10.0-beta.12",
     "@polkadot/extension-inject": "0.24.0-beta.16",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/ui-keyring": "^0.52.0-beta.27"
+    "@polkadot/ui-keyring": "^0.52.0-beta.29"
   }
 }

packages/extension-ui/package.json

@@ -9,8 +9,8 @@
     "@polkadot/extension-base": "0.24.0-beta.16",
     "@polkadot/extension-inject": "0.24.0-beta.16",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/react-identicon": "^0.52.0-beta.27",
+    "@polkadot/react-identicon": "^0.52.0-beta.29",
-    "@polkadot/react-qr": "^0.52.0-beta.27",
+    "@polkadot/react-qr": "^0.52.0-beta.29",
     "@polkadot/util": "^2.7.1",
     "@polkadot/util-crypto": "^2.7.1",
     "react": "^16.13.1",

packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx

@@ -1,3 +1,7 @@
+// Copyright 2019-2020 @polkadot/extension authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import React from 'react';
 import { AccountWithChildren } from '@polkadot/extension-base/background/types';
 import Account from './Account';

packages/extension-ui/src/components/Switch.tsx

@@ -1,4 +1,8 @@
-import React from 'react';
+// Copyright 2019-2020 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
 interface Props {
@@ -10,13 +14,18 @@ interface Props {
 }
 
 function Switch ({ checked, checkedLabel, className, onChange, uncheckedLabel }: Props): React.ReactElement<Props> {
+  const _onChange = useCallback(
+    (event) => onChange(event.target.checked),
+    [onChange]
+  );
+
   return (
     <div className={className}>
       <span>{uncheckedLabel}</span>
       <label>
         <Checkbox
           checked={checked}
-          onChange={((event): void => onChange(event.target.checked))}
+          onChange={_onChange}
         />
         <Slider />
       </label>

packages/extension-ui/src/components/Table.tsx

@@ -22,17 +22,17 @@ function Table ({ children, className, isFull }: Props): React.ReactElement<Prop
 }
 
 export default React.memo(styled(Table)`
-  &.isFull {
-    height: 100%;
-    overflow: scroll;
-  }
-
   border: 0;
   display: block;
   font-size: ${({ theme }): string => theme.labelFontSize};
   line-height: ${({ theme }): string => theme.labelLineHeight};
   margin-bottom: 1rem;
 
+  &.isFull {
+    height: 100%;
+    overflow: scroll;
+  }
+
   td.data {
     max-width: 0;
     overflow: hidden;
@@ -60,15 +60,15 @@ export default React.memo(styled(Table)`
     cursor: pointer;
     max-width: 24rem;
 
+    summary {
+      text-overflow: ellipsis;
+      outline: 0;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
     &[open] summary {
       white-space: normal;
     }
-
-    summary {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      outline: 0;
-    }
   }
 `);

packages/extension/package.json

@@ -11,7 +11,7 @@
     "@polkadot/extension-ui": "0.24.0-beta.16"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.52.6",
+    "@polkadot/dev": "^0.52.7",
     "babel-loader": "^8.1.0",
     "extract-loader": "^5.0.1",
     "file-loader": "^6.0.0",

packages/extension/webpack.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 // Copyright 2019-2020 @polkadot/extension authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.