style(dashboard-v2): update prettier config

This commit is contained in:
Michał Leszczyk 2022-02-18 09:17:28 +01:00
parent 2f428b8e04
commit 0d108a8b82
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
9 changed files with 88 additions and 90 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

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

View File

@ -1,13 +1,13 @@
import * as 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;
return <Layout {...props}>{element}</Layout> return <Layout {...props}>{element}</Layout>;
} }

View File

@ -4,28 +4,28 @@ module.exports = {
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: ['js'], extensions: ["js"],
}, },
}, },
], ],
} };

View File

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

View File

@ -1,28 +1,28 @@
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,
marginBottom: 64, marginBottom: 64,
maxWidth: 320, maxWidth: 320,
} };
const paragraphStyles = { 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,
} };
// markup // markup
const NotFoundPage = () => { const NotFoundPage = () => {
@ -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>.
@ -48,7 +48,7 @@ const NotFoundPage = () => {
<Link to="/">Go home</Link>. <Link to="/">Go home</Link>.
</p> </p>
</main> </main>
) );
} };
export default NotFoundPage export default NotFoundPage;

View File

@ -1,8 +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,8 +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,57 +1,57 @@
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: ['./src/**/*.{js,jsx,ts,tsx}'], content: ["./src/**/*.{js,jsx,ts,tsx}"],
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",
}, },
}, },
}, },
@ -59,9 +59,9 @@ module.exports = {
plugin(function ({ addBase, theme }) { plugin(function ({ addBase, theme }) {
addBase({ addBase({
body: { body: {
color: theme('textColor.palette.600'), color: theme("textColor.palette.600"),
}, },
}) });
}), }),
], ],
} };