ops(dashboard-v2): setup (& satisfy) prettier

packages/dashboard-v2/.eslintrc.js

@@ -2,5 +2,5 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: true,
   },
-  extends: "react-app",
+  extends: 'react-app',
 }

packages/dashboard-v2/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public/

packages/dashboard-v2/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

packages/dashboard-v2/README.md

@@ -2,9 +2,9 @@
 
 Code behind [account.skynetpro.net](https://account.skynetpro.net/)
 
-
 ## Development
+
 This is a Gatsby application. To run it locally, all you need is:
 
-* `yarn install`
+- `yarn install`
-* `yarn start`
+- `yarn start`

packages/dashboard-v2/gatsby-browser.js

@@ -1,11 +1,11 @@
-import React from "react";
+import * as React from 'react'
-import "@fontsource/sora/300.css"; // light
+import '@fontsource/sora/300.css' // light
-import "@fontsource/sora/400.css"; // normal
+import '@fontsource/sora/400.css' // normal
-import "@fontsource/sora/500.css"; // medium
+import '@fontsource/sora/500.css' // medium
-import "@fontsource/sora/600.css"; // semibold
+import '@fontsource/sora/600.css' // semibold
-import "@fontsource/source-sans-pro/400.css"; // normal
+import '@fontsource/source-sans-pro/400.css' // normal
-import "@fontsource/source-sans-pro/600.css"; // semibold
+import '@fontsource/source-sans-pro/600.css' // semibold
-import "./src/styles/global.css";
+import './src/styles/global.css'
 
 export function wrapPageElement({ element, props }) {
   const Layout = element.type.Layout ?? React.Fragment

packages/dashboard-v2/gatsby-config.js

@@ -1,31 +1,31 @@
 module.exports = {
   siteMetadata: {
     title: `Accounts Dashboard`,
-    siteUrl: `https://www.yourdomain.tld`
+    siteUrl: `https://www.yourdomain.tld`,
   },
   plugins: [
-    "gatsby-plugin-image",
+    'gatsby-plugin-image',
-    "gatsby-plugin-react-helmet",
+    'gatsby-plugin-react-helmet',
-    "gatsby-plugin-sharp",
+    'gatsby-plugin-sharp',
-    "gatsby-transformer-sharp",
+    'gatsby-transformer-sharp',
-    "gatsby-plugin-postcss", {
+    'gatsby-plugin-postcss',
+    {
       resolve: 'gatsby-source-filesystem',
       options: {
-        "name": "images",
+        name: 'images',
-        "path": "./src/images/"
+        path: './src/images/',
       },
-      __key: "images"
+      __key: 'images',
-    }, {
+    },
+    {
       resolve: `gatsby-plugin-alias-imports`,
       options: {
         alias: {
           // Allows npm link-ing skynet-storybook during development.
-          "styled-components": "./node_modules/styled-components",
+          'styled-components': './node_modules/styled-components',
+        },
+        extensions: ['js'],
+      },
     },
-        extensions: [
-          "js",
   ],
 }
-    }
-  ]
-};

packages/dashboard-v2/package.json

@@ -13,7 +13,8 @@
     "build": "gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "prettier": "prettier ."
   },
   "dependencies": {
     "@fontsource/sora": "^4.5.0",
@@ -39,6 +40,7 @@
     "gatsby-source-filesystem": "^4.6.0",
     "gatsby-transformer-sharp": "^4.6.0",
     "postcss": "^8.4.6",
+    "prettier": "2.5.1",
     "react-is": "^17.0.2",
     "styled-components": "^5.3.3"
   }

packages/dashboard-v2/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: [require('tailwindcss'), require('autoprefixer')],
-};
+}

packages/dashboard-v2/src/pages/404.js

@@ -1,11 +1,11 @@
-import * as React from "react"
+import * as React from 'react'
-import { Link } from "gatsby"
+import { Link } from 'gatsby'
 
 // styles
 const pageStyles = {
-  color: "#232129",
+  color: '#232129',
-  padding: "96px",
+  padding: '96px',
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+  fontFamily: '-apple-system, Roboto, sans-serif, serif',
 }
 const headingStyles = {
   marginTop: 0,
@@ -17,10 +17,10 @@ const paragraphStyles = {
   marginBottom: 48,
 }
 const codeStyles = {
-  color: "#8A6534",
+  color: '#8A6534',
   padding: 4,
-  backgroundColor: "#FFF4DB",
+  backgroundColor: '#FFF4DB',
-  fontSize: "1.25rem",
+  fontSize: '1.25rem',
   borderRadius: 4,
 }
 
@@ -31,13 +31,13 @@ const NotFoundPage = () => {
       <title>Not found</title>
       <h1 style={headingStyles}>Page not found</h1>
       <p style={paragraphStyles}>
-        Sorry{" "}
+        Sorry{' '}
         <span role="img" aria-label="Pensive emoji">
           😔
-        </span>{" "}
+        </span>{' '}
         we couldn’t find what you were looking for.
         <br />
-        {process.env.NODE_ENV === "development" ? (
+        {process.env.NODE_ENV === 'development' ? (
           <>
             <br />
             Try creating a page in <code style={codeStyles}>src/pages/</code>.

packages/dashboard-v2/src/pages/files.js

@@ -1,13 +1,8 @@
-import * as React from "react"
+import * as React from 'react'
 
 // markup
 const FilesPage = () => {
-
+  return <>FILES</>
-  return (
-    <>
-      FILES
-    </>
-  )
 }
 
 export default FilesPage

packages/dashboard-v2/src/pages/index.js

@@ -1,13 +1,8 @@
-import * as React from "react"
+import * as React from 'react'
 
 // markup
 const IndexPage = () => {
-
+  return <>Dashboard</>
-  return (
-    <>
-      Dashboard
-    </>
-  )
 }
 
 export default IndexPage

packages/dashboard-v2/tailwind.config.js

@@ -1,70 +1,67 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme')
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin')
 
 const colors = {
-  primary: { light: "#33D17E", DEFAULT: "#00c65e" },
+  primary: { light: '#33D17E', DEFAULT: '#00c65e' },
-  warning: "#ffd567",
+  warning: '#ffd567',
-  error: "#ED5454",
+  error: '#ED5454',
   palette: {
-    100: "#f5f7f7",
+    100: '#f5f7f7',
-    200: "#d4dddb",
+    200: '#d4dddb',
-    300: "#9e9e9e",
+    300: '#9e9e9e',
-    400: "#555555",
+    400: '#555555',
-    500: "#242424",
+    500: '#242424',
-    600: "#0d0d0d",
+    600: '#0d0d0d',
   },
-};
+}
 
 module.exports = {
-  content: [
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/skynet-storybook/dist/**/*.{js,jsx,ts,tsx}", // Also apply Tailwind classes to our shared components library
-  ],
   theme: {
     screens: {
-      sm: "640px",
+      sm: '640px',
-      md: "768px",
+      md: '768px',
-      lg: "1024px",
+      lg: '1024px',
-      xl: "1440px",
+      xl: '1440px',
     },
-    backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
+    backgroundColor: (theme) => ({ ...theme('colors'), ...colors }),
-    borderColor: (theme) => ({ ...theme("colors"), ...colors }),
+    borderColor: (theme) => ({ ...theme('colors'), ...colors }),
-    textColor: (theme) => ({ ...theme("colors"), ...colors }),
+    textColor: (theme) => ({ ...theme('colors'), ...colors }),
-    placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
+    placeholderColor: (theme) => ({ ...theme('colors'), ...colors }),
     extend: {
       fontFamily: {
-        sans: ["Sora", ...defaultTheme.fontFamily.sans],
+        sans: ['Sora', ...defaultTheme.fontFamily.sans],
-        content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
+        content: ['Source\\ Sans\\ Pro', ...defaultTheme.fontFamily.sans],
       },
       fontSize: {
-        tab: ["18px", "28px"],
+        tab: ['18px', '28px'],
       },
-      backgroundColor: ["disabled"],
+      backgroundColor: ['disabled'],
-      textColor: ["disabled"],
+      textColor: ['disabled'],
       keyframes: {
         wiggle: {
-          "0%, 100%": { transform: "rotate(-3deg)" },
+          '0%, 100%': { transform: 'rotate(-3deg)' },
-          "50%": { transform: "rotate(3deg)" },
+          '50%': { transform: 'rotate(3deg)' },
         },
       },
       animation: {
-        wiggle: "wiggle 3s ease-in-out infinite",
+        wiggle: 'wiggle 3s ease-in-out infinite',
       },
       width: {
-        page: "100%",
+        page: '100%',
-        "page-md": "640px",
+        'page-md': '640px',
-        "page-lg": "896px",
+        'page-lg': '896px',
-        "page-xl": "1312px",
+        'page-xl': '1312px',
-      }
+      },
     },
   },
   plugins: [
     plugin(function ({ addBase, theme }) {
       addBase({
         body: {
-          color: theme("textColor.palette.600"),
+          color: theme('textColor.palette.600'),
         },
-      });
+      })
     }),
   ],
-};
+}

packages/dashboard-v2/yarn.lock

@@ -8399,6 +8399,11 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+
 pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"