From b539a41397c06945bfbba634edaad550d4a1cf1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Thu, 17 Feb 2022 12:16:21 +0100 Subject: [PATCH] ops(dashboard-v2): setup (& satisfy) prettier --- packages/dashboard-v2/.eslintrc.js | 2 +- packages/dashboard-v2/.prettierignore | 3 + packages/dashboard-v2/.prettierrc.json | 5 ++ packages/dashboard-v2/README.md | 6 +- packages/dashboard-v2/gatsby-browser.js | 16 ++--- packages/dashboard-v2/gatsby-config.js | 38 ++++++------ packages/dashboard-v2/package.json | 4 +- packages/dashboard-v2/postcss.config.js | 4 +- packages/dashboard-v2/src/pages/404.js | 22 +++---- packages/dashboard-v2/src/pages/files.js | 9 +-- packages/dashboard-v2/src/pages/index.js | 9 +-- packages/dashboard-v2/tailwind.config.js | 77 ++++++++++++------------ packages/dashboard-v2/yarn.lock | 5 ++ 13 files changed, 101 insertions(+), 99 deletions(-) create mode 100644 packages/dashboard-v2/.prettierignore create mode 100644 packages/dashboard-v2/.prettierrc.json diff --git a/packages/dashboard-v2/.eslintrc.js b/packages/dashboard-v2/.eslintrc.js index 2eb5695e..be715fed 100644 --- 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', } diff --git a/packages/dashboard-v2/.prettierignore b/packages/dashboard-v2/.prettierignore new file mode 100644 index 00000000..b99378ec --- /dev/null +++ b/packages/dashboard-v2/.prettierignore @@ -0,0 +1,3 @@ +node_modules/ +.cache/ +public/ diff --git a/packages/dashboard-v2/.prettierrc.json b/packages/dashboard-v2/.prettierrc.json new file mode 100644 index 00000000..31ba22d8 --- /dev/null +++ b/packages/dashboard-v2/.prettierrc.json @@ -0,0 +1,5 @@ +{ + "semi": false, + "singleQuote": true, + "printWidth": 120 +} diff --git a/packages/dashboard-v2/README.md b/packages/dashboard-v2/README.md index a78a95e3..ba9db568 100644 --- 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` diff --git a/packages/dashboard-v2/gatsby-browser.js b/packages/dashboard-v2/gatsby-browser.js index 73f8ff7c..65d3a113 100644 --- 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 diff --git a/packages/dashboard-v2/gatsby-config.js b/packages/dashboard-v2/gatsby-config.js index 3234b64e..63a85da5 100644 --- 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'], + }, + }, + ], +} diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json index 560f17d2..f587f2d4 100644 --- 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" } diff --git a/packages/dashboard-v2/postcss.config.js b/packages/dashboard-v2/postcss.config.js index 116848f6..4193e8ab 100644 --- 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')], +} diff --git a/packages/dashboard-v2/src/pages/404.js b/packages/dashboard-v2/src/pages/404.js index 053ae0e8..4d41c72f 100644 --- 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 = () => { Not found

Page not found

- Sorry{" "} + Sorry{' '} 😔 - {" "} + {' '} we couldn’t find what you were looking for.
- {process.env.NODE_ENV === "development" ? ( + {process.env.NODE_ENV === 'development' ? ( <>
Try creating a page in src/pages/. diff --git a/packages/dashboard-v2/src/pages/files.js b/packages/dashboard-v2/src/pages/files.js index e7f71f5e..2e07480c 100644 --- 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 diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js index b87df20a..28d6d602 100644 --- 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 diff --git a/packages/dashboard-v2/tailwind.config.js b/packages/dashboard-v2/tailwind.config.js index 1a81d88c..89800342 100644 --- 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'), }, - }); + }) }), ], -}; +} diff --git a/packages/dashboard-v2/yarn.lock b/packages/dashboard-v2/yarn.lock index 3b6de69d..fbaa67ca 100644 --- 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"