Prettier (#189)

* add Prettier

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierignore

@@ -0,0 +1,3 @@
+dist
+storybook-static
+.cache

package.json

@@ -5,5 +5,18 @@
     "packages": [
       "packages/*"
     ]
+  },
+  "scripts": {
+    "lint": "yarn workspaces run lint",
+    "prepare": "husky install"
+  },
+  "devDependencies": {
+    "husky": ">=6",
+    "lint-staged": ">=10",
+    "prettier": "^2.5.1",
+    "prettier-plugin-organize-imports": "^2.3.4"
+  },
+  "lint-staged": {
+    "*.{js,css,md,mdx,jsx,tsx,ts,json}": "prettier --write"
   }
 }

packages/react-babylonjs/.eslintrc

@@ -7,6 +7,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ]
 }

packages/react-babylonjs/.prettierignore

@@ -0,0 +1 @@
+dist

packages/react-babylonjs/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "printWidth": 100,
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": false,
+  "overrides": [
+    {
+      "files": ["*.md", "*.mdx"],
+      "options": {
+        "printWidth": 80,
+        "proseWrap": "always"
+      }
+    }
+  ]
+}

packages/react-babylonjs/package.json

@@ -30,7 +30,12 @@
     "node": ">=6.0.0"
   },
   "scripts": {
-    "lint": "eslint . --ext .ts",
+    "lint": "concurrently 'yarn:lint:check:*'",
+    "lint:check:eslint": "eslint . --ext .ts",
+    "lint:check:prettier": "prettier -c '**/*.{ts,js,tsx,jsx,json,md,mdx}'",
+    "lint:fix": "concurrently 'yarn:lint:fix:*'",
+    "lint:fix:eslint": "eslint --fix . --ext .ts",
+    "lint:fix:prettier": "prettier -w '**/*.{ts,js,tsx,jsx,json,md,mdx}'",
     "prebuild": "rimraf dist",
     "build": "cross-env NODE_ENV=production rollup -c",
     "start": "tsc-watch --onSuccess \"rollup -c\"",
@@ -53,13 +58,17 @@
     "@types/sinon": "^9.0.10",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
+    "concurrently": "^7.0.0",
     "cross-env": "^7.0.0",
     "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
     "esm": "^3.2.25",
     "github-release-notes": "0.17.2",
     "lodash.camelcase": "^4.3.0",
     "mocha": "8.1.3",
     "nyc": "^15.1.0",
+    "prettier": "^2.5.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",

packages/static/.eslintrc.json

@@ -4,8 +4,7 @@
     "plugin:import/errors",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier",
-    "prettier/react"
+    "prettier"
   ],
   "plugins": ["react", "import", "jsx-a11y"],
   "settings": {
@@ -14,6 +13,8 @@
     }
   },
   "rules": {
+    "jsx-a11y/heading-has-content": 1,
+    "no-unused-vars": 1,
     "react/prop-types": 0,
     "react/react-in-jsx-scope": "off",
     "lines-between-class-members": ["error", "always"],

packages/static/.prettierignore

@@ -0,0 +1 @@
+.cache

packages/static/package.json

@@ -59,24 +59,30 @@
     "start": "gatsby develop",
     "build": "gatsby build --prefix-paths",
     "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
-    "lint": "eslint --fix \"src/**/*.{js,jsx}\"",
+    "lint": "concurrently 'yarn:lint:check:*'",
+    "lint:check:eslint": "eslint \"src/**/*.{js,jsx}\"",
+    "lint:check:prettier": "prettier -c '**/*.{ts,js,tsx,jsx,json,md,mdx}'",
+    "lint:fix": "concurrently 'yarn:lint:fix:*'",
+    "lint:fix:eslint": "eslint --fix \"src/**/*.{js,jsx}\"",
+    "lint:fix:prettier": "prettier -w '**/*.{ts,js,tsx,jsx,json,md,mdx}'",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
+    "concurrently": "^7.0.0",
     "eslint": "^7.25.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "gatsby-plugin-remove-trailing-slashes": "^3.4.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.5.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
     "prism-react-renderer": "^1.2.0",
-    "remark-codesandbox": "^0.10.0",
-    "prettier-plugin-organize-imports": "^2.3.4"
+    "remark-codesandbox": "^0.10.0"
   }
 }

packages/static/src/components/index.js

@@ -1,7 +1,6 @@
-export * from './theme';
-import mdxComponents from './mdxComponents';
-import ThemeProvider from './theme/themeProvider';
-import Layout from './layout';
-import Link from './link';
-
-export {mdxComponents, ThemeProvider, Layout, Link}
+export * from './theme' // eslint-disable-line
+export { mdxComponents, ThemeProvider, Layout, Link }
+import Layout from './layout'
+import Link from './link'
+import mdxComponents from './mdxComponents'
+import ThemeProvider from './theme/themeProvider'

packages/static/src/components/mdxComponents/ReactDemo.js

@@ -1,7 +1,8 @@
-import React, { FC } from 'react'
+import React from 'react'
 
 const ReactDemo = (props) => {
   const { children } = props
+
   return (
     <div
       style={{

packages/static/src/components/mdxComponents/Sandbox.js

@@ -1,7 +1,8 @@
-import React, { FC } from 'react'
+import React from 'react'
 
 const Sandbox = (props) => {
   const { name } = props
+
   return (
     <iframe
       src={`https://codesandbox.io/embed/github/benallfree/react-babylonjs/tree/codesandbox-stories/examples/${name}?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&theme=dark`}

packages/static/src/components/mdxComponents/Stats.tsx → packages/static/src/components/mdxComponents/Stats.js

@@ -1,5 +1,5 @@
-import React, { FC, useEffect, useState } from 'react'
-import { useBeforeRender, useCanvas, useEngine } from 'react-babylonjs'
+import { useEffect } from 'react'
+import { useEngine } from 'react-babylonjs'
 
 const Stats = (props) => {
   const engine = useEngine()
@@ -8,12 +8,14 @@ const Stats = (props) => {
     const update = () => {
       console.log('callback', engine.getFps())
       const ctx = engine.getRenderingCanvas().getContext('2d')
+
       if (ctx) {
         ctx.font = '48px serif'
         ctx.fillText('Hello world', 0, 0)
       }
       requestAnimationFrame(update)
     }
+
     requestAnimationFrame(update)
   })
 

packages/static/src/components/mdxComponents/codeBlock.js

@@ -1,80 +1,87 @@
-import * as React from 'react';
-import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
-import { applyLanguages, getTheme } from '../../custom/config/codeBlockLanguages';
-import Loadable from 'react-loadable';
-import LoadingProvider from './loading';
+import Highlight, { defaultProps, Prism } from 'prism-react-renderer'
+import * as React from 'react'
+import Loadable from 'react-loadable'
+import { applyLanguages, getTheme } from '../../custom/config/codeBlockLanguages'
+import LoadingProvider from './loading'
 
-const theme = getTheme();
+const theme = getTheme()
 
 /** Removes the last token from a code example if it's empty. */
 function cleanTokens(tokens) {
-  const tokensLength = tokens.length;
+  const tokensLength = tokens.length
 
   if (tokensLength === 0) {
-    return tokens;
+    return tokens
   }
-  const lastToken = tokens[tokensLength - 1];
+  const lastToken = tokens[tokensLength - 1]
 
   if (lastToken.length === 1 && lastToken[0].empty) {
-    return tokens.slice(0, tokensLength - 1);
+    return tokens.slice(0, tokensLength - 1)
   }
-  return tokens;
+  return tokens
 }
 
 const LoadableComponent = Loadable({
   loader: () => import('./LiveProvider'),
   loading: LoadingProvider,
-});
+})
 
 /* eslint-disable react/jsx-key */
 const CodeBlock = ({ children: exampleCode, ...props }) => {
-  const [_, updateView] = React.useState(0);
+  const [_, updateView] = React.useState(0)
 
   React.useEffect(() => {
-    var windowPrism = window.Prism;
-    window.Prism = Prism;
-    applyLanguages(Prism);
-    window.Prism = windowPrism;
+    var windowPrism = window.Prism
+
+    window.Prism = Prism
+    applyLanguages(Prism)
+    window.Prism = windowPrism
     updateView({
-      data: Date.now()
-    });
-  }, []);
+      data: Date.now(),
+    })
+  }, [])
 
   if (props['react-live']) {
-    return <LoadableComponent code={exampleCode} />;
+    return <LoadableComponent code={exampleCode} />
   } else {
     return (
-      <Highlight {...defaultProps} Prism={Prism} code={exampleCode} language={(props.className)?props.className.split("-")[1] :"javascript"} theme={theme}>
+      <Highlight
+        {...defaultProps}
+        Prism={Prism}
+        code={exampleCode}
+        language={props.className ? props.className.split('-')[1] : 'javascript'}
+        theme={theme}
+      >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre className={className + ' pre'} style={style} p={3}>
             {cleanTokens(tokens).map((line, i) => {
-              let lineClass = {};
+              let lineClass = {}
 
-              let isDiff = false;
+              let isDiff = false
 
               if (line[0] && line[0].content.length && line[0].content[0] === '+') {
-                lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
-                isDiff = true;
+                lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' }
+                isDiff = true
               } else if (line[0] && line[0].content.length && line[0].content[0] === '-') {
-                lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
-                isDiff = true;
+                lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' }
+                isDiff = true
               } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '+') {
-                lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
-                isDiff = true;
+                lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' }
+                isDiff = true
               } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '-') {
-                lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
-                isDiff = true;
+                lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' }
+                isDiff = true
               }
-              const lineProps = getLineProps({ line, key: i });
+              const lineProps = getLineProps({ line, key: i })
 
-              lineProps.style = lineClass;
+              lineProps.style = lineClass
               const diffStyle = {
                 userSelect: 'none',
                 MozUserSelect: '-moz-none',
                 WebkitUserSelect: 'none',
-              };
+              }
 
-              let splitToken;
+              let splitToken
 
               return (
                 <div {...lineProps} key={line + i}>
@@ -88,11 +95,11 @@ const CodeBlock = ({ children: exampleCode, ...props }) => {
                           splitToken = {
                             types: ['template-string', 'string'],
                             content: token.content.slice(1),
-                          };
+                          }
                           const firstChar = {
                             types: ['operator'],
                             content: token.content.charAt(0),
-                          };
+                          }
 
                           return (
                             <React.Fragment key={token + key}>
@@ -102,22 +109,22 @@ const CodeBlock = ({ children: exampleCode, ...props }) => {
                               />
                               <span {...getTokenProps({ token: splitToken, key })} />
                             </React.Fragment>
-                          );
+                          )
                         } else {
-                          return <span {...getTokenProps({ token, key })} style={diffStyle} />;
+                          return <span {...getTokenProps({ token, key })} style={diffStyle} />
                         }
                       }
                     }
-                    return <span {...getTokenProps({ token, key })} />;
+                    return <span {...getTokenProps({ token, key })} />
                   })}
                 </div>
-              );
+              )
             })}
           </pre>
         )}
       </Highlight>
-    );
+    )
   }
-};
+}
 
-export default CodeBlock;
+export default CodeBlock