Add stylelint (testing impacts) (#2524)

* Add stylelint (testing impacts)

* "defaultSeverity": "warning"

* Cleanup Table styles

* Default parser

.github/workflows/pr-any.yml

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

.stylelintrc

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

package.json

@@ -28,6 +28,7 @@
     "clean": "polkadot-dev-clean-build",
     "clean:i18n": "rm -rf packages/apps/public/locales/en && mkdir -p packages/apps/public/locales/en",
     "lint": "polkadot-dev-run-lint",
+    "lint:css": "stylelint './packages/**/src/**/*.tsx'",
     "postinstall": "polkadot-dev-yarn-only",
     "test": "polkadot-dev-run-test packages/page-claims/src",
     "start": "yarn clean && cd packages/apps && webpack --config webpack.config.js"
@@ -54,6 +55,9 @@
     "i18next-scanner": "^2.11.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "stylelint": "^13.3.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-plugin-serve": "^0.12.1"

packages/apps/src/Apps.tsx

@@ -125,7 +125,7 @@ export default React.memo(styled(Apps)`
     a.apps--SideBar-Item-NavLink-active {
       background: #f5f5f5;
       border-radius: 0.28571429rem 0 0 0.28571429rem;
-      // border-bottom: 2px solid transparent;
+      /* border-bottom: 2px solid transparent; */
       color: #3f3f3f;
 
       &:hover {

packages/page-claims/src/index.tsx

@@ -64,11 +64,11 @@ const Signature = styled.textarea`
     color: rgba(0, 0, 0, 0.5);
   }
 
-  &:-ms-input-placeholder {
+  &::-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.5);
   }
 
-  &::-ms-input-placeholder {
+  &:-ms-input-placeholder {
     color: rgba(0, 0, 0, 0.5);
   }
 `;

packages/page-contracts/src/Messages.tsx

@@ -182,6 +182,27 @@ export default React.memo(styled(Messages)`
       background: #e8f4ff;
     }
 
+    &.disabled {
+      opacity: 1 !important;
+      background: #eee !important;
+      color: #555 !important;
+    }
+
+    .accessory {
+      width: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .execute {
+        display: none;
+        background: transparent;
+        font-size: 1.5rem;
+        margin: 0;
+        padding: 0;
+      }
+    }
+
     &:hover {
       .accessory .execute {
         display: block;
@@ -201,26 +222,5 @@ export default React.memo(styled(Messages)`
         font-weight: normal;
       }
     }
-
-    .accessory {
-      width: 3rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .execute {
-        display: none;
-        background: transparent;
-        font-size: 1.5rem;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    &.disabled {
-      opacity: 1 !important;
-      background: #eee !important;
-      color: #555 !important;
-    }
   }
 `);

packages/page-js/src/Output.tsx

@@ -76,7 +76,7 @@ export default React.memo(styled(Output)`
 
   .logs-container {
     flex: 1;
-    overflow: auto;;
+    overflow: auto;
   }
 
   .logs-content {

packages/page-staking/src/Overview/Address/index.tsx

@@ -43,6 +43,10 @@ interface StakingState {
   stakeOwn?: BN;
 }
 
+/* stylelint-disable */
+const PERBILL_PERCENT = 10_000_000;
+/* stylelint-enable */
+
 function expandInfo ({ exposure, validatorPrefs }: DeriveStakingQuery): StakingState {
   let nominators: [string, Balance][] = [];
   let stakeTotal: BN | undefined;
@@ -60,7 +64,7 @@ function expandInfo ({ exposure, validatorPrefs }: DeriveStakingQuery): StakingS
 
   return {
     commission: commission
-      ? `${(commission.toNumber() / 10_000_000).toFixed(2)}%`
+      ? `${(commission.toNumber() / PERBILL_PERCENT).toFixed(2)}%`
       : undefined,
     nominators,
     stakeOther,

packages/page-staking/src/Targets/index.tsx

@@ -19,8 +19,6 @@ import { useTranslation } from '../translate';
 import Summary from './Summary';
 import Validator from './Validator';
 
-const PERBILL = new BN(1_000_000_000);
-
 interface Props {
   className?: string;
 }
@@ -34,6 +32,8 @@ interface AllInfo {
 
 type SortBy = 'rankOverall' | 'rankBondOwn' | 'rankBondOther' | 'rankBondTotal' | 'rankComm';
 
+const PERBILL = new BN(1_000_000_000);
+
 function sortValidators (list: ValidatorInfo[]): ValidatorInfo[] {
   return list
     .sort((a, b): number => b.commissionPer - a.commissionPer)

packages/react-components/src/AddressToggle.tsx

@@ -108,14 +108,6 @@ export default React.memo(styled(AddressToggle)`
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
   }
 
-  &.isAye {
-    cursor: move;
-    .ui--AddressToggle-address {
-      filter: none;
-      opacity: 1;
-    }
-  }
-
   .ui--AddressToggle-address,
   .ui--AddressToggle-toggle {
     flex: 1;
@@ -126,4 +118,13 @@ export default React.memo(styled(AddressToggle)`
     margin-top: 0.1rem;
     text-align: right;
   }
+
+  &.isAye {
+    cursor: move;
+
+    .ui--AddressToggle-address {
+      filter: none;
+      opacity: 1;
+    }
+  }
 `);

packages/react-components/src/Table/Body.tsx

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
+import styled from 'styled-components';
 import { isString } from '@polkadot/util';
 
 import Spinner from '../Spinner';
@@ -31,4 +32,143 @@ function Body ({ children, className, empty, isEmpty }: Props): React.ReactEleme
   );
 }
 
-export default React.memo(Body);
+export default React.memo(styled(Body)`
+  td {
+    border-top: 1px solid #e6e6e6;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    vertical-align: middle;
+
+    &:first-child {
+      border-left: 1px solid #e6e6e6;
+    }
+
+    &:last-child {
+      border-right: 1px solid #e6e6e6;
+    }
+
+    label {
+      display: block !important;
+      white-space: nowrap;
+    }
+
+    i.icon {
+      cursor: pointer;
+    }
+
+    div.empty {
+      opacity: 0.6;
+      padding: 0.25rem;
+    }
+
+    .ui--Spinner {
+      margin: 0 auto;
+
+      .text {
+        margin-bottom: 0;
+      }
+    }
+
+    &:hover label {
+      opacity: 1;
+    }
+
+    &.address {
+      min-width: 11rem;
+      padding: 0.85rem 1rem;
+    }
+
+    &.button {
+      text-align: right;
+      vertical-align: middle;
+      white-space: nowrap;
+    }
+
+    &.combined {
+      border-top-width: 0;
+    }
+
+    &.hash {
+      font-family: monospace;
+    }
+
+    &.number {
+      text-align: right;
+    }
+
+    &.relative {
+      position: relative;
+    }
+
+    &.overflow {
+      max-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &.together {
+      white-space: nowrap;
+    }
+
+    &.top {
+      vertical-align: top;
+    }
+
+    &.middle {
+      text-align: center;
+    }
+
+    &.mini {
+      padding: 0 0.75rem 0 0;
+      white-space: nowrap;
+    }
+
+    &.favorite i.icon.isSelected {
+      color: darkorange;
+    }
+  }
+
+  tr {
+    background: white;
+
+    &.isHighlight td {
+      background: #ffffed;
+    }
+
+    &:last-child td {
+      border-bottom: 1px solid #e6e6e6;
+    }
+
+    &:first-child {
+      td:first-child {
+        border-radius: 0.25rem 0 0 0;
+      }
+
+      td:last-child {
+        border-radius: 0 0.25rem 0 0;
+      }
+    }
+
+    &:last-child {
+      td:first-child {
+        border-radius: 0 0 0 0.25rem;
+      }
+
+      td:last-child {
+        border-radius: 0 0 0.25rem 0;
+      }
+    }
+
+    &:not(:hover) {
+      .ui.button:not(.isIcon):not(.disabled) {
+        background: #eee !important;
+        color: #555 !important;
+      }
+
+      .ui.toggle.checkbox input:checked~.box:before,
+      .ui.toggle.checkbox input:checked~label:before {
+        background-color: #eee !important;
+      }
+    }
+  }
+`);

packages/react-components/src/Table/Head.tsx

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
+import styled from 'styled-components';
 
 interface Props {
   className?: string;
@@ -41,4 +42,41 @@ function Head ({ className, filter, header, isEmpty }: Props): React.ReactElemen
   );
 }
 
-export default React.memo(Head);
+export default React.memo(styled(Head)`
+  th {
+    color: rgba(78, 78, 78, .66);
+    font-family: sans-serif;
+    font-weight: 100;
+    padding: 0.75rem 1rem 0.25rem;
+    text-align: right;
+    vertical-align: baseline;
+    white-space: nowrap;
+
+    h1, h2 {
+      font-size: 1.75rem;
+    }
+
+    &.address {
+      padding-left: 3rem;
+      text-align: left;
+    }
+
+    &.isClickable {
+      border-bottom: 2px solid transparent;
+      cursor: pointer;
+    }
+
+    &.start {
+      text-align: left;
+    }
+  }
+
+  tr {
+    background: transparent;
+    text-transform: lowercase;
+
+    &.filter th {
+      padding: 0;
+    }
+  }
+`);

packages/react-components/src/Table/index.tsx

@@ -44,88 +44,21 @@ export default React.memo(styled(Table)`
   max-width: 100%;
   width: 100%;
 
-  &.isFixed table {
-    table-layout: fixed;
-  }
-
   table {
     border-spacing: 0;
     max-width: 100%;
     overflow: hidden;
     width: 100%;
 
-    thead tr {
-      background: transparent;
-      text-transform: lowercase;
-
-      &.filter th {
-        padding: 0;
-      }
-    }
-
-    tbody tr {
-      background: white;
-
-      td {
-        border-top: 1px solid #e6e6e6;
-
-        &:first-child {
-          border-left: 1px solid #e6e6e6;
-        }
-
-        &:last-child {
-          border-right: 1px solid #e6e6e6;
-        }
-      }
-
-      &:first-child td {
-        &:first-child {
-          border-radius: 0.25rem 0 0 0;
-        }
-
-        &:last-child {
-          border-radius: 0 0.25rem 0 0;
-        }
-      }
-
-      &:last-child td {
-        border-bottom: 1px solid #e6e6e6;
-
-        &:first-child {
-          border-radius: 0 0 0 0.25rem;
-        }
-
-        &:last-child {
-          border-radius: 0 0 0.25rem 0;
-        }
-      }
-
-      &:not(:hover) {
-        .ui.button:not(.isIcon):not(.disabled) {
-          background: #eee !important;
-          color: #555 !important;
-        }
-
-        .ui.toggle.checkbox input:checked~.box:before,
-        .ui.toggle.checkbox input:checked~label:before {
-          background-color: #eee !important;
-        }
-      }
-    }
-
     tr {
       max-width: 100%;
       width: 100%;
 
-      &.isHighlight td {
-        background: #ffffed;
-      }
-
       label {
         opacity: 0.42;
       }
 
-      td, th {
+      td, &:not(.filter) th {
         &:first-child {
           padding-left: 1.5rem;
         }
@@ -142,120 +75,10 @@ export default React.memo(styled(Table)`
           }
         }
       }
+    }
 
-      td {
+    &.isFixed table {
-        padding: 0.75rem 1rem;
+      table-layout: fixed;
-        text-align: left;
-        vertical-align: middle;
-
-        label {
-          display: block !important;
-          white-space: nowrap;
-        }
-
-        i.icon {
-          cursor: pointer;
-        }
-
-        div.empty {
-          opacity: 0.6;
-          padding: 0.25rem;
-        }
-
-        .ui--Spinner {
-          margin: 0 auto;
-
-          .text {
-            margin-bottom: 0;
-          }
-        }
-
-        &:hover label {
-          opacity: 1;
-        }
-
-        &.address {
-          min-width: 11rem;
-          padding: 0.85rem 1rem;
-        }
-
-        &.button {
-          text-align: right;
-          vertical-align: middle;
-          white-space: nowrap;
-        }
-
-        &.combined {
-          border-top-width: 0;
-        }
-
-        &.hash {
-          font-family: monospace;
-        }
-
-        &.number {
-          text-align: right;
-        }
-
-        &.relative {
-          position: relative;
-        }
-
-        &.overflow {
-          max-width: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        &.together {
-          white-space: nowrap;
-        }
-
-        &.top {
-          vertical-align: top;
-        }
-
-        &.middle {
-          text-align: center;
-        }
-
-        &.mini {
-          padding: 0 0.75rem 0 0;
-          white-space: nowrap;
-        }
-
-        &.favorite i.icon.isSelected {
-          color: darkorange;
-        }
-      }
-
-      th {
-        color: rgba(78, 78, 78, .66);
-        font-family: sans-serif;
-        font-weight: 100;
-        text-align: right;
-        padding: 0.75rem 1rem 0.25rem;
-        vertical-align: baseline;
-        white-space: nowrap;
-
-        h1, h2 {
-          font-size: 1.75rem;
-        }
-
-        &.isClickable {
-          cursor: pointer;
-          border-bottom: 2px solid transparent;
-        }
-
-        &.address {
-          text-align: left;
-          padding-left: 3rem;
-        }
-
-        &.start {
-          text-align: left;
-        }
-      }
     }
   }
 `);