[v10] Add prettier commands to package.json, run prettier (#1137)

web/.prettierignore

@@ -0,0 +1,6 @@
+# Ignore directories:
+packages/design/src/assets/**
+packages/**/dist/**
+
+# Ignore protobuf files:
+**/*_pb.*

web/.prettierrc

@@ -2,9 +2,9 @@
   "arrowParens": "avoid",
   "printWidth": 80,
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5"
-}
+}

web/package.json

@@ -25,6 +25,8 @@
     "type-check-and-lint": "yarn type-check && yarn lint",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx packages/",
     "type-check": "tsc --noEmit",
+    "prettier-check": "yarn prettier --check 'packages/**/*.{ts,tsx,js,jsx,md}'",
+    "prettier-write": "yarn prettier --write 'packages/**/*.{ts,tsx,js,jsx,md}'",
     "nop": "exit 0"
   },
   "private": true,

web/packages/build/jest/config.js

@@ -17,7 +17,7 @@ limitations under the License.
 const path = require('path');
 
 module.exports = {
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
   moduleNameMapper: {
     // mock all imports to asset files
     '\\.(css|scss|stylesheet)$': path.join(__dirname, 'mockStyles.js'),

web/packages/build/webpack/webpack.base.js

@@ -152,5 +152,4 @@ function createDefaultConfig() {
   };
 }
 
-
-module.exports = configFactory;
+module.exports = configFactory;

web/packages/build/webpack/webpack.dev.config.js

@@ -31,9 +31,7 @@ module.exports = {
   },
   devtool: false,
   mode: 'development',
-  plugins: [
-    configFactory.plugins.reactRefresh(),
-  ],
+  plugins: [configFactory.plugins.reactRefresh()],
   module: {
     strictExportPresence: true,
     rules: [

web/packages/design/README.md

@@ -23,4 +23,4 @@ concept and principles on which this design system is built.
 
 [Build Better Component Libraries with Styled System](https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee)
 
-[Component Based Design System With Styled-System](https://varun.ca/styled-system/)
+[Component Based Design System With Styled-System](https://varun.ca/styled-system/)

web/packages/design/src/ButtonIcon/ButtonIcon.jsx

@@ -77,10 +77,10 @@ const StyledButtonIcon = styled.button`
   flex: 0 0 auto;
   background: transparent;
   color: inherit;
-  transition: all .3s;
+  transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
 
-  ${Icon}{
+  ${Icon} {
     color: inherit;
   }
 

web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx

@@ -19,7 +19,9 @@ import styled from 'styled-components';
 import { space, width } from 'design/system';
 import defaultTheme from 'design/theme';
 
-const ButtonOutlined = ({ children, setRef, ...props } = {setRef: undefined}) => {
+const ButtonOutlined = (
+  { children, setRef, ...props } = { setRef: undefined }
+) => {
   return (
     <StyledButton {...props} ref={setRef}>
       <span>{children}</span>
@@ -117,20 +119,20 @@ const StyledButton = styled.button`
   font-family: inherit;
   font-weight: bold;
   outline: none;
-  opacity: .56;
+  opacity: 0.56;
   position: relative;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
-  transition: all .3s;
+  transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
 
   &:hover {
     opacity: 1;
   }
 
   &:active {
-    opacity: .24;
+    opacity: 0.24;
   }
 
   > span {

web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.js.snap

@@ -3,7 +3,7 @@
 exports[`rendering of CardSuccess components 1`] = `
 .c1 {
   display: inline-block;
-  transition: color .3s;
+  transition: color 0.3s;
   margin-bottom: 16px;
   color: #00bfa5;
   font-size: 56px;

web/packages/design/src/Icon/Icon.jsx

@@ -21,7 +21,7 @@ import '../assets/icomoon/style.css';
 
 const Icon = styled.span`
   display: inline-block;
-  transition: color .3s;
+  transition: color 0.3s;
   ${space} ${width} ${color} ${fontSize}
 `;
 

web/packages/design/src/Input/Input.jsx

@@ -33,7 +33,7 @@ const Input = styled.input`
   appearance: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .24);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24);
   box-sizing: border-box;
   display: block;
   height: 40px;

web/packages/design/src/Pill/__snapshots__/Pill.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`design/Pill render the label with dismissable 1`] = `
 HTMLCollection [
   .c1 {
   display: inline-block;
-  transition: color .3s;
+  transition: color 0.3s;
   color: #FFFFFF;
 }
 
@@ -30,7 +30,7 @@ exports[`design/Pill renders the label without dismissable 1`] = `
 HTMLCollection [
   .c1 {
   display: inline-block;
-  transition: color .3s;
+  transition: color 0.3s;
   color: #FFFFFF;
 }
 

web/packages/design/src/Pill/index.ts

@@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Pill} from "./Pill";
+import { Pill } from './Pill';
 
-export {Pill}
+export { Pill };

web/packages/design/src/SlideTabs/index.ts

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-import SlideTabs from "./SlideTabs";
+import SlideTabs from './SlideTabs';
 
-export default SlideTabs;
+export default SlideTabs;

web/packages/design/src/TopNav/TopNavItem.jsx

@@ -37,21 +37,22 @@ const TopNavItem = styled.button`
   position: relative;
   text-decoration: none;
 
-  &:hover, &:focus {
-    background:  ${props =>
+  &:hover,
+  &:focus {
+    background: ${props =>
       props.active
         ? props.theme.colors.primary.light
         : 'rgba(255, 255, 255, .06)'};
   }
 
-  &.active{
-    background:  ${props => props.theme.colors.primary.light};
+  &.active {
+    background: ${props => props.theme.colors.primary.light};
     color: ${props => props.theme.colors.light};
   }
 
   &.active:after {
     background-color: ${props => props.theme.colors.accent};
-    content: "";
+    content: '';
     position: absolute;
     bottom: 0;
     left: 0;

web/packages/design/src/TopNav/TopNavUserMenu/TopNavUserMenu.jsx

@@ -54,12 +54,7 @@ class TopNavUserMenu extends React.Component {
       menuListCss,
     } = this.props;
     const initial =
-      user && user.length
-        ? user
-            .trim()
-            .charAt(0)
-            .toUpperCase()
-        : '';
+      user && user.length ? user.trim().charAt(0).toUpperCase() : '';
     const anchorEl = open ? this.btnRef : null;
     return (
       <>

web/packages/design/src/TopNav/__snapshots__/Topnav.story.test.js.snap

@@ -40,7 +40,7 @@ exports[`rendering of TopNav and TopNavItem 1`] = `
 
 .c1.active:after {
   background-color: #651FFF;
-  content: "";
+  content: '';
   position: absolute;
   bottom: 0;
   left: 0;
@@ -79,7 +79,7 @@ exports[`rendering of TopNav and TopNavItem 1`] = `
 
 .c2.active:after {
   background-color: #651FFF;
-  content: "";
+  content: '';
   position: absolute;
   bottom: 0;
   left: 0;

web/packages/design/src/theme/theme.js

@@ -16,7 +16,15 @@ limitations under the License.
 
 import { fonts } from './fonts';
 import { getContrastRatio } from './utils/colorManipulator';
-import { lightBlue, red, teal, orange, pink, blueGrey, yellow } from './palette';
+import {
+  lightBlue,
+  red,
+  teal,
+  orange,
+  pink,
+  blueGrey,
+  yellow,
+} from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 
 const space = [0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80];

web/packages/design/src/utils/testing.tsx

@@ -22,7 +22,7 @@ import {
   waitFor,
   screen,
   prettyDOM,
-  getByTestId
+  getByTestId,
 } from '@testing-library/react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import ThemeProvider from 'design/ThemeProvider';

web/packages/shared/README.md

@@ -10,4 +10,4 @@ Add `@gravitational/shared` to your package.json file.
 "devDependencies": {
     "@gravitational/shared": "^1.0.0",
   },
-```
+```

web/packages/shared/components/BpfViewer/BpfViewer.jsx

@@ -96,7 +96,7 @@ const StyledTextEditor = styled.div`
 
   .ace-monokai .ace_marker-layer .ace_active-line {
     //background: #928787;
-   }
+  }
 
   //.ace-monokai .ace_gutter,
   //.ace-monokai .ace_gutter-cell {

web/packages/shared/components/BpfViewer/ace-mode-bpf.js

@@ -31,14 +31,15 @@ ace.define(
     const oop = acequire('../lib/oop');
     const TextMode = acequire('./text').Mode;
     const FoldMode = acequire('./folding/coffee').FoldMode;
-    const MatchingBraceOutdent = acequire('./matching_brace_outdent')
-      .MatchingBraceOutdent;
+    const MatchingBraceOutdent = acequire(
+      './matching_brace_outdent'
+    ).MatchingBraceOutdent;
 
     const GravitationalHighlightRules = acequire(
       'ace/mode/grv_bpf_highlight_rules'
     ).GravitationalHighlightRules;
 
-    const Mode = function() {
+    const Mode = function () {
       this.$outdent = new MatchingBraceOutdent();
       this.foldingRules = new FoldMode();
       this.HighlightRules = GravitationalHighlightRules;
@@ -55,8 +56,9 @@ ace.define(
   ['require', 'exports', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
   (acequire, exports) => {
     const oop = acequire('ace/lib/oop');
-    const TextHighlightRules = acequire('ace/mode/text_highlight_rules')
-      .TextHighlightRules;
+    const TextHighlightRules = acequire(
+      'ace/mode/text_highlight_rules'
+    ).TextHighlightRules;
 
     function GravitationalHighlightRules() {
       this.$rules = new TextHighlightRules().getRules(); // Use Text's rules as a base
@@ -88,7 +90,7 @@ ace.define(
         {
           token: 'string', // multi line string start
           regex: /[|>][-+\d]*(?:$|\s+(?:$|#))/,
-          onMatch: function(val, state, stack, line) {
+          onMatch: function (val, state, stack, line) {
             line = line.replace(/ #.*/, '');
             var indent = /^ *((:\s*)?-(\s*[^|>])?)?/
               .exec(line)[0]
@@ -122,7 +124,7 @@ ace.define(
         {
           token: 'indent',
           regex: /^ */,
-          onMatch: function(val, state, stack) {
+          onMatch: function (val, state, stack) {
             var curIndent = stack[1];
 
             if (curIndent >= val.length) {
@@ -150,7 +152,7 @@ ace.define(
         {
           token: 'indent',
           regex: /^ */,
-          onMatch: function(val, state, stack) {
+          onMatch: function (val, state, stack) {
             var curIndent = stack[1];
 
             if (curIndent >= val.length) {

web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap

@@ -12,7 +12,7 @@ Object {
   appearance: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,.24);
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.24);
   box-sizing: border-box;
   display: block;
   height: 40px;
@@ -126,7 +126,7 @@ Object {
   appearance: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,.24);
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.24);
   box-sizing: border-box;
   display: block;
   height: 40px;

web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap

@@ -76,7 +76,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
   appearance: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,.24);
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.24);
   box-sizing: border-box;
   display: block;
   height: 40px;
@@ -424,7 +424,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
   appearance: none;
   border: none;
   border-radius: 4px;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,.24);
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.24);
   box-sizing: border-box;
   display: block;
   height: 40px;

web/packages/shared/components/SplitPane/SplitPane.jsx

@@ -60,14 +60,8 @@ const Pane = styled(Flex)`
 `;
 
 export function PaneSide(props) {
-  const {
-    children,
-    position,
-    isDragging,
-    split,
-    defaultSize,
-    hasTwoSides,
-  } = props;
+  const { children, position, isDragging, split, defaultSize, hasTwoSides } =
+    props;
 
   const compRef = React.useRef();