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

2022-02-17 12:16:21 +01:00 · 2022-02-17 12:16:21 +01:00 · b539a41397
parent 0fa43b9b2d
commit b539a41397
13 changed files with 101 additions and 99 deletions
--- a/packages/dashboard-v2/.eslintrc.js
+++ b/packages/dashboard-v2/.eslintrc.js
@ -2,5 +2,5 @@ module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
-  extends: "react-app",
+  extends: 'react-app',
 }
--- a/packages/dashboard-v2/.prettierignore
+++ b/packages/dashboard-v2/.prettierignore
@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public/
--- a/packages/dashboard-v2/.prettierrc.json
+++ b/packages/dashboard-v2/.prettierrc.json
@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}
--- a/packages/dashboard-v2/README.md
+++ b/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 start`
+- `yarn install`
+- `yarn start`
--- a/packages/dashboard-v2/gatsby-browser.js
+++ b/packages/dashboard-v2/gatsby-browser.js
@ -1,11 +1,11 @@
-import React from "react";
-import "@fontsource/sora/300.css"; // light
-import "@fontsource/sora/400.css"; // normal
-import "@fontsource/sora/500.css"; // medium
-import "@fontsource/sora/600.css"; // semibold
-import "@fontsource/source-sans-pro/400.css"; // normal
-import "@fontsource/source-sans-pro/600.css"; // semibold
-import "./src/styles/global.css";
+import * as React from 'react'
+import '@fontsource/sora/300.css' // light
+import '@fontsource/sora/400.css' // normal
+import '@fontsource/sora/500.css' // medium
+import '@fontsource/sora/600.css' // semibold
+import '@fontsource/source-sans-pro/400.css' // normal
+import '@fontsource/source-sans-pro/600.css' // semibold
+import './src/styles/global.css'

 export function wrapPageElement({ element, props }) {
  const Layout = element.type.Layout ?? React.Fragment
--- a/packages/dashboard-v2/gatsby-config.js
+++ b/packages/dashboard-v2/gatsby-config.js
@ -1,31 +1,31 @@
 module.exports = {
  siteMetadata: {
-      title: `Accounts Dashboard`,
-    siteUrl: `https://www.yourdomain.tld`
+    title: `Accounts Dashboard`,
+    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
-    "gatsby-plugin-image",
-    "gatsby-plugin-react-helmet",
-    "gatsby-plugin-sharp",
-    "gatsby-transformer-sharp",
-    "gatsby-plugin-postcss", {
+    'gatsby-plugin-image',
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-sharp',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-postcss',
+    {
      resolve: 'gatsby-source-filesystem',
      options: {
-        "name": "images",
-        "path": "./src/images/"
+        name: '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'],
+      },
+    },
+  ],
+}
--- a/packages/dashboard-v2/package.json
+++ b/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"
  }
--- a/packages/dashboard-v2/postcss.config.js
+++ b/packages/dashboard-v2/postcss.config.js
@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
-};
+  plugins: [require('tailwindcss'), require('autoprefixer')],
+}
--- a/packages/dashboard-v2/src/pages/404.js
+++ b/packages/dashboard-v2/src/pages/404.js
@ -1,11 +1,11 @@
-import * as React from "react"
-import { Link } from "gatsby"
+import * as React from 'react'
+import { Link } from 'gatsby'

 // styles
 const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+  color: '#232129',
+  padding: '96px',
+  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",
-  fontSize: "1.25rem",
+  backgroundColor: '#FFF4DB',
+  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>.
--- a/packages/dashboard-v2/src/pages/files.js
+++ b/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
--- a/packages/dashboard-v2/src/pages/index.js
+++ b/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
--- a/packages/dashboard-v2/tailwind.config.js
+++ b/packages/dashboard-v2/tailwind.config.js
@ -1,70 +1,67 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
-const plugin = require("tailwindcss/plugin");
+const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')

 const colors = {
-  primary: { light: "#33D17E", DEFAULT: "#00c65e" },
-  warning: "#ffd567",
-  error: "#ED5454",
+  primary: { light: '#33D17E', DEFAULT: '#00c65e' },
+  warning: '#ffd567',
+  error: '#ED5454',
  palette: {
-    100: "#f5f7f7",
-    200: "#d4dddb",
-    300: "#9e9e9e",
-    400: "#555555",
-    500: "#242424",
-    600: "#0d0d0d",
+    100: '#f5f7f7',
+    200: '#d4dddb',
+    300: '#9e9e9e',
+    400: '#555555',
+    500: '#242424',
+    600: '#0d0d0d',
  },
-};
+}

 module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/skynet-storybook/dist/**/*.{js,jsx,ts,tsx}", // Also apply Tailwind classes to our shared components library
-  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    screens: {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1440px",
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1440px',
    },
-    backgroundColor: (theme) => ({ ...theme("colors"), ...colors }),
-    borderColor: (theme) => ({ ...theme("colors"), ...colors }),
-    textColor: (theme) => ({ ...theme("colors"), ...colors }),
-    placeholderColor: (theme) => ({ ...theme("colors"), ...colors }),
+    backgroundColor: (theme) => ({ ...theme('colors'), ...colors }),
+    borderColor: (theme) => ({ ...theme('colors'), ...colors }),
+    textColor: (theme) => ({ ...theme('colors'), ...colors }),
+    placeholderColor: (theme) => ({ ...theme('colors'), ...colors }),
    extend: {
      fontFamily: {
-        sans: ["Sora", ...defaultTheme.fontFamily.sans],
-        content: ["Source\\ Sans\\ Pro", ...defaultTheme.fontFamily.sans],
+        sans: ['Sora', ...defaultTheme.fontFamily.sans],
+        content: ['Source\\ Sans\\ Pro', ...defaultTheme.fontFamily.sans],
      },
      fontSize: {
-        tab: ["18px", "28px"],
+        tab: ['18px', '28px'],
      },
-      backgroundColor: ["disabled"],
-      textColor: ["disabled"],
+      backgroundColor: ['disabled'],
+      textColor: ['disabled'],
      keyframes: {
        wiggle: {
-          "0%, 100%": { transform: "rotate(-3deg)" },
-          "50%": { transform: "rotate(3deg)" },
+          '0%, 100%': { 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-md": "640px",
-        "page-lg": "896px",
-        "page-xl": "1312px",
-      }
+        page: '100%',
+        'page-md': '640px',
+        'page-lg': '896px',
+        'page-xl': '1312px',
+      },
    },
  },
  plugins: [
    plugin(function ({ addBase, theme }) {
      addBase({
        body: {
-          color: theme("textColor.palette.600"),
+          color: theme('textColor.palette.600'),
        },
-      });
+      })
    }),
  ],
-};
+}
--- a/packages/dashboard-v2/yarn.lock
+++ b/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"