Merge remote-tracking branch 'formidable/master'

Author: jpdriver

.eslintrc

@@ -1,10 +1,13 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
+  "plugins": [
+    "prettier"
+  ],
   "extends": [
-    "formidable/configurations/es6-react",
-    "prettier",
-    "prettier/react"
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:import/recommended"
   ],
   "env": {
     "browser": true,
@@ -23,7 +26,8 @@
       "jsx": true,
       "generators": true,
       "experimentalObjectRestSpread": true
-    }
+    },
+    "requireConfigFile": false
   },
   "rules": {
     "comma-dangle": "off",
@@ -57,6 +61,7 @@
     "filenames/match-regex": "off",
     "react/react-in-jsx-scope": "off",
     "max-params": ["error", 5],
-    "max-nested-callbacks": ["error", 5]
+    "max-nested-callbacks": ["error", 5],
+    "prettier/prettier": "error"
   }
 }

.gitignore

@@ -8,3 +8,4 @@ bundle-stats.html
 .next
 .out
 .history/
+stats.html

.prettierrc

@@ -5,5 +5,13 @@ module.exports = {
   "addons": [
     "@storybook/addon-controls",
     // "@storybook/addon-actions"
-  ]
+  ],
+  "webpackFinal": async (config) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: "javascript/auto",
+    })
+    return config
+  }
 }

.storybook/main.js

@@ -5,8 +5,8 @@
 <br><br>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/dm/react-live.svg"></a>
 <a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/v/react-live.svg"></a>
-<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
-<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
+<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
+<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
 <img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg">
 <a href="https://github.com/FormidableLabs/react-live#maintenance-status">
   <img alt="Maintenance Status" src="https://img.shields.io/badge/maintenance-active-green.svg" />
@@ -129,7 +129,7 @@ the kind of sizes you will get in a production app. The minified
 bundles we publish _exclude_ some dependencies that we depend
 on.
 
-<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
+<img src="https://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
 
 In an actual app when you use `react-live` you will also be bundling
 Buble for transpilation, which adds `~135kB` to your bundle. This also
@@ -138,7 +138,7 @@ is rather large as well.
 
 We maintain a fork of Buble which excludes the ESnext Regular Expression
 transpilation with removes Buble's large dependency and weighs in at
-a smaller size of `~51kB`, which you can find published at [`@philpl/buble`](http://npm.im/@philpl/buble).
+a smaller size of `~51kB`, which you can find published at [`@philpl/buble`](https://npm.im/@philpl/buble).
 
 You can alias this in Webpack or the build tool of your choice, which
 will reduce the overall bundle size of `react-live` to about `83kB`.

README.md

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

demo/.eslintrc

@@ -57,6 +57,7 @@ const StyledPreview = styled(LivePreview)`
   color: black;
   height: auto;
   overflow: hidden;
+  text-align: center;
 
   ${column};
 `;

demo/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "name": "react-live-demo",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -13,18 +13,17 @@
   },
   "dependencies": {
     "formidable-oss-badges": "^0.3.6",
-    "next": "11.0.0",
-    "polished": "^4.1.3",
+    "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-live": "^2.2.3",
-    "styled-components": "^5.3.0"
+    "react-live": "^3.0.0-rc0",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "babel-plugin-polished": "^1.1.0",
-    "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "7.29.0",
-    "eslint-config-next": "11.0.0"
+    "babel-plugin-styled-components": "^2.0.2",
+    "eslint": "8.7.0",
+    "eslint-config-next": "12.0.8"
   },
   "engines": {
     "node": ">=12.0.0"

demo/components/LiveEdit.js

@@ -12,14 +12,14 @@ const Container = styled.div`
   width: ${polished.rem(1024)};
   padding: ${polished.rem(20)};
   padding-bottom: ${polished.rem(100)};
-  text-align: center;
 `;
 
 const Description = styled.p`
   color: ${foreground};
   font-size: ${polished.modularScale(1)};
   margin-bottom: ${polished.rem(20)};
   margin-top: ${polished.rem(50)};
+  text-align: center;
 `;
 
 const componentClassExample = `