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

This commit is contained in:
Michał Leszczyk 2022-02-17 12:16:21 +01:00
parent 0fa43b9b2d
commit b539a41397
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
13 changed files with 101 additions and 99 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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 }) { export function wrapPageElement({ element, props }) {
const Layout = element.type.Layout ?? React.Fragment const Layout = element.type.Layout ?? React.Fragment

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 = { const colors = {
primary: { light: "#33D17E", DEFAULT: "#00c65e" }, primary: { light: '#33D17E', DEFAULT: '#00c65e' },
warning: "#ffd567", warning: '#ffd567',
error: "#ED5454", error: '#ED5454',
palette: { 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 = { 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: { theme: {
screens: { 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: { extend: {
fontFamily: { 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: { fontSize: {
tab: ["18px", "28px"], tab: ['18px', '28px'],
}, },
backgroundColor: ["disabled"], backgroundColor: ['disabled'],
textColor: ["disabled"], textColor: ['disabled'],
keyframes: { keyframes: {
wiggle: { wiggle: {
"0%, 100%": { transform: "rotate(-3deg)" }, '0%, 100%': { transform: 'rotate(-3deg)' },
"50%": { transform: "rotate(3deg)" }, '50%': { transform: 'rotate(3deg)' },
}, },
}, },
animation: { animation: {
wiggle: "wiggle 3s ease-in-out infinite", wiggle: 'wiggle 3s ease-in-out infinite',
}, },
width: { width: {
page: "100%", page: '100%',
"page-md": "640px", 'page-md': '640px',
"page-lg": "896px", 'page-lg': '896px',
"page-xl": "1312px", 'page-xl': '1312px',
} },
}, },
}, },
plugins: [ plugins: [
plugin(function ({ addBase, theme }) { plugin(function ({ addBase, theme }) {
addBase({ addBase({
body: { body: {
color: theme("textColor.palette.600"), color: theme('textColor.palette.600'),
}, },
}); })
}), }),
], ],
}; }

View File

@ -8399,6 +8399,11 @@ prepend-http@^2.0.0:
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= 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: pretty-bytes@^5.4.1:
version "5.6.0" version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"