chore(dev): rework lint action and proper pre-commit linting

Author: STRML

.github/workflows/lint.yml

@@ -20,19 +20,15 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14
 
       - name: Install Node.js dependencies
         run: yarn
 
-      - name: Run linters
-        uses: wearerequired/lint-action@v1
-        with:
-          eslint: true
-          prettier: true
+      - name: Run Prettier
+        run: yarn fmt:check
 
-      # Flow is not supported by lint-action, so we run it raw
-      - name: Run Flow
-        run: yarn flow
+      - name: Run ESLint/Flow
+        run: yarn lint

.husky/pre-commit

@@ -2,5 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged
-make lint
+yarn flow
 make test

.travis.yml

@@ -6,4 +6,3 @@ node_js:
 script:
   - make build test
 cache: yarn
-

CHANGELOG.md

@@ -14,6 +14,7 @@ or autogenerated.
 RGL is React-only and does not require jQuery.
 
 ![BitMEX UI](http://i.imgur.com/oo1NT6c.gif)
+
 > GIF from production usage on [BitMEX.com](https://www.bitmex.com)
 
 [**[Demo](https://react-grid-layout.github.io/react-grid-layout/) | [Changelog](/CHANGELOG.md) | [CodeSandbox Editable demo](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js)**]
@@ -77,32 +78,32 @@ RGL is React-only and does not require jQuery.
 - [Statsout](https://statsout.com/)
 - [Datto RMM](https://www.datto.com/uk/products/rmm/)
 
-*Know of others? Create a PR to let me know!*
+_Know of others? Create a PR to let me know!_
 
 ## Features
 
-* 100% React - no jQuery
-* Compatible with server-rendered apps
-* Draggable widgets
-* Resizable widgets
-* Static widgets
-* Configurable packing: horizontal, vertical, or off
-* Bounds checking for dragging and resizing
-* Widgets may be added or removed without rebuilding grid
-* Layout can be serialized and restored
-* Responsive breakpoints
-* Separate layouts per responsive breakpoint
-* Grid Items placed using CSS Transforms
-  * Performance with CSS Transforms: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
-* Compatibility with `<React.StrictMode>`
-
-|Version         | Compatibility    |
-|----------------|------------------|
-| >= 0.17.0      | React 16 & 17    |
-| >= 0.11.3      | React 0.14 & 15  |
-| >= 0.10.0      | React 0.14       |
-| 0.8. - 0.9.2   | React 0.13       |
-| < 0.8          | React 0.12       |
+- 100% React - no jQuery
+- Compatible with server-rendered apps
+- Draggable widgets
+- Resizable widgets
+- Static widgets
+- Configurable packing: horizontal, vertical, or off
+- Bounds checking for dragging and resizing
+- Widgets may be added or removed without rebuilding grid
+- Layout can be serialized and restored
+- Responsive breakpoints
+- Separate layouts per responsive breakpoint
+- Grid Items placed using CSS Transforms
+  - Performance with CSS Transforms: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time
+- Compatibility with `<React.StrictMode>`
+
+| Version      | Compatibility   |
+| ------------ | --------------- |
+| >= 0.17.0    | React 16 & 17   |
+| >= 0.11.3    | React 0.14 & 15 |
+| >= 0.10.0    | React 0.14      |
+| 0.8. - 0.9.2 | React 0.13      |
+| < 0.8        | React 0.12      |
 
 ## Installation
 
@@ -129,41 +130,53 @@ produce a grid with three items where:
 - users will be able to freely drag and resize item `c`
 
 ```js
-import GridLayout from 'react-grid-layout';
+import GridLayout from "react-grid-layout";
 
 class MyFirstGrid extends React.Component {
   render() {
     // layout is an array of objects, see the demo for more complete usage
     const layout = [
-      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
-      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
-      {i: 'c', x: 4, y: 0, w: 1, h: 2}
+      { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
+      { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+      { i: "c", x: 4, y: 0, w: 1, h: 2 }
     ];
     return (
-      <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
+      <GridLayout
+        className="layout"
+        layout={layout}
+        cols={12}
+        rowHeight={30}
+        width={1200}
+      >
         <div key="a">a</div>
         <div key="b">b</div>
         <div key="c">c</div>
       </GridLayout>
-    )
+    );
   }
 }
 ```
 
 You may also choose to set layout properties directly on the children:
 
 ```js
-import GridLayout from 'react-grid-layout';
+import GridLayout from "react-grid-layout";
 
 class MyFirstGrid extends React.Component {
   render() {
     return (
       <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
-        <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div>
-        <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}>b</div>
-        <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>c</div>
+        <div key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2, static: true }}>
+          a
+        </div>
+        <div key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }}>
+          b
+        </div>
+        <div key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>
+          c
+        </div>
       </GridLayout>
-    )
+    );
   }
 }
 ```
@@ -178,21 +191,24 @@ excludes `React`, so it must be otherwise available in your application, either
 To make RGL responsive, use the `<ResponsiveReactGridLayout>` element:
 
 ```js
-import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
+import { Responsive as ResponsiveGridLayout } from "react-grid-layout";
 
 class MyResponsiveGrid extends React.Component {
   render() {
     // {lg: layout1, md: layout2, ...}
     const layouts = getLayoutsFromSomewhere();
     return (
-      <ResponsiveGridLayout className="layout" layouts={layouts}
-        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
-        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={layouts}
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+      >
         <div key="1">1</div>
         <div key="2">2</div>
         <div key="3">3</div>
       </ResponsiveGridLayout>
-    )
+    );
   }
 }
 ```
@@ -215,7 +231,7 @@ positions on drag events. In simple cases a HOC `WidthProvider` can be used to a
 width upon initialization and window resize events.
 
 ```js
-import { Responsive, WidthProvider } from 'react-grid-layout';
+import { Responsive, WidthProvider } from "react-grid-layout";
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -224,14 +240,17 @@ class MyResponsiveGrid extends React.Component {
     // {lg: layout1, md: layout2, ...}
     var layouts = getLayoutsFromSomewhere();
     return (
-      <ResponsiveGridLayout className="layout" layouts={layouts}
-        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
-        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={layouts}
+        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+      >
         <div key="1">1</div>
         <div key="2">2</div>
         <div key="3">3</div>
       </ResponsiveGridLayout>
-    )
+    );
   }
 }
 ```
@@ -494,7 +513,6 @@ will be draggable, even if the item is marked `static: true`.
 
 `<ReactGridLayout>` has [an optimized `shouldComponentUpdate` implementation](lib/ReactGridLayout.jsx), but it relies on the user memoizing the `children` array:
 
-
 ```js
 // lib/ReactGridLayout.jsx
 // ...
@@ -517,7 +535,7 @@ If you memoize your children, you can take advantage of this, and reap faster re
 function MyGrid(props) {
   const children = React.useMemo(() => {
     return new Array(props.count).fill(undefined).map((val, idx) => {
-      return <div key={idx} data-grid={{x: idx, y: 1, w: 1, h: 1}} />;
+      return <div key={idx} data-grid={{ x: idx, y: 1, w: 1, h: 1 }} />;
     });
   }, [props.count]);
   return <ReactGridLayout cols={12}>{children}</ReactGridLayout>;
@@ -540,7 +558,7 @@ const CustomGridItemComponent = React.forwardRef(({style, className, ...props},
   return (
     <div style={{ /* styles */, ...style}} className={className} ref={ref}>
       {/* Some other content */}
-    </div>  
+    </div>
   );
 }
 ```

README.md

@@ -2,4 +2,5 @@ module.exports = require("./lib/ReactGridLayout").default;
 module.exports.utils = require("./lib/utils");
 module.exports.Responsive = require("./lib/ResponsiveReactGridLayout").default;
 module.exports.Responsive.utils = require("./lib/responsiveUtils");
-module.exports.WidthProvider = require("./lib/components/WidthProvider").default;
+module.exports.WidthProvider =
+  require("./lib/components/WidthProvider").default;

index-dev.js

@@ -1,5 +1,7 @@
 module.exports = require("./build/ReactGridLayout").default;
 module.exports.utils = require("./build/utils");
-module.exports.Responsive = require("./build/ResponsiveReactGridLayout").default;
+module.exports.Responsive =
+  require("./build/ResponsiveReactGridLayout").default;
 module.exports.Responsive.utils = require("./build/responsiveUtils");
-module.exports.WidthProvider = require("./build/components/WidthProvider").default;
+module.exports.WidthProvider =
+  require("./build/components/WidthProvider").default;

index.js

@@ -12,7 +12,9 @@
     "dev": "make dev",
     "prepublishOnly": "make build",
     "validate": "npm ls",
-    "flow": "flow"
+    "flow": "flow",
+    "fmt": "prettier --write ./**.{json,js,yml,md}",
+    "fmt:check": "prettier --check ./**.{json,js,yml,md}"
   },
   "repository": {
     "type": "git",
@@ -106,7 +108,8 @@
   },
   "lint-staged": {
     "*.{js,jsx,css}": [
-      "prettier --write"
+      "eslint --ext .js,.jsx --fix",
+      "yarn fmt"
     ]
   }
 }