From 62aaca0b035b25d5fb4bbef8bee40c2a1785a5d5 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Tue, 1 Jun 2021 09:29:43 +0800 Subject: [PATCH] Add Prettier and ESLint This allows new projects to be formatted using Prettier and ESLint. --- .eslintrc.json | 35 + .prettierrc | 8 + package.json | 11 +- src/components/molecules/Brand/index.tsx | 10 +- .../molecules/DummyContent/index.tsx | 46 +- src/components/molecules/Link/index.tsx | 37 +- .../templates/BasicLayout/index.tsx | 25 +- src/components/templates/Index/index.tsx | 61 +- .../templates/LeftSidebarLayout/index.tsx | 38 +- .../LeftSidebarWithMenuLayout/index.tsx | 71 +- .../templates/RightSidebarLayout/index.tsx | 25 +- src/pages/_app.tsx | 11 +- src/pages/_document.tsx | 23 +- src/pages/index.tsx | 14 +- src/pages/layouts/basic/index.tsx | 10 +- src/pages/layouts/left-sidebar/index.tsx | 14 +- .../layouts/left-sidebar/with-menu/index.tsx | 63 +- .../layouts/right-sidebar-static/index.tsx | 11 +- yarn.lock | 1686 +++++++++++++++-- 19 files changed, 1764 insertions(+), 435 deletions(-) create mode 100644 .eslintrc.json create mode 100644 .prettierrc diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..711a5f6 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,35 @@ +{ + "settings": { + "react": { + "version": "detect", + "pragma": "React", + "fragment": "Fragment" + } + }, + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": [ + "react", + "@typescript-eslint" + ], + "rules": { + "react/react-in-jsx-scope": "off", + "react/prop-types": "off" + } +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..10bab1f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "jsxSingleQuote": false, + "semi": false, + "jsxBracketSameLine": false, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": false +} diff --git a/package.json b/package.json index 5fbcb00..81ecbd1 100644 --- a/package.json +++ b/package.json @@ -10,16 +10,25 @@ }, "dependencies": { "@tesseract-design/react-common": "^0.3.0", - "@theoryofnekomata/viewfinder": "0.2.4", + "@theoryofnekomata/viewfinder": "0.2.4", "next": "10.1.3", "react": "17.0.2", "react-dom": "17.0.2", + "react-markdown": "^6.0.1", "styled-components": "^5.2.3" }, "devDependencies": { "@types/node": "^14.14.41", "@types/react": "^17.0.3", "@types/styled-components": "^5.1.9", + "@typescript-eslint/eslint-plugin": "^4.26.0", + "@typescript-eslint/parser": "^4.26.0", + "eslint": "^7.27.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-react": "^7.24.0", + "eslint-plugin-react-app": "^6.2.2", + "prettier": "2.3.0", "typescript": "^4.2.4" }, "optionalDependencies": { diff --git a/src/components/molecules/Brand/index.tsx b/src/components/molecules/Brand/index.tsx index 2cb292c..7ffd3d6 100644 --- a/src/components/molecules/Brand/index.tsx +++ b/src/components/molecules/Brand/index.tsx @@ -1,5 +1,6 @@ -import Link from '../Link' +import * as React from 'react' import styled from 'styled-components' +import Link from '../Link' const BrandBase = styled(Link)({ display: 'block', @@ -23,17 +24,14 @@ const Hide = styled('span')({ }, }) -const Brand = () => { +const Brand: React.FC = () => { return ( - B - - rand - + Brand ) } diff --git a/src/components/molecules/DummyContent/index.tsx b/src/components/molecules/DummyContent/index.tsx index 308af2b..6606819 100644 --- a/src/components/molecules/DummyContent/index.tsx +++ b/src/components/molecules/DummyContent/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable */ import ReactMarkdown from 'react-markdown' const DEFAULT_CONTENTS = [ @@ -74,7 +75,7 @@ After basic preparation, ramen can be seasoned and flavored with any number of t Seasonings commonly added to ramen are white pepper, black pepper, butter, chili pepper, sesame seeds, and crushed garlic. Soup recipes and methods of preparation tend to be closely guarded secrets. Most tonkotsu ramen restaurants offer a system known as kae-dama (替え玉), where customers who have finished their noodles can request a "refill" (for a few hundred yen more) to be put into their remaining soup. -` +`, }, { name: 'japanese-calligraphy', @@ -170,28 +171,21 @@ During the 1800s, influenced by the musical trends of the Romantic music era, in 'yamaha-montage-8-00.webp', ], }, -]; +] -const DummyContent = ({ - contents = DEFAULT_CONTENTS, -}) => { - const content = contents[Math.floor(Math.random() * contents.length)]; +const DummyContent = ({contents = DEFAULT_CONTENTS}) => { + const content = contents[Math.floor(Math.random() * contents.length)] return ( { + p: ({node, ...etcProps}) => { if (!(Array.isArray(content.images) && content.images.length > 0)) { - return ( -

- ); + return

} - const shouldHaveImage = Math.floor(Math.random() * 2) === 1; + const shouldHaveImage = Math.floor(Math.random() * 2) === 1 if (shouldHaveImage) { - const randomImage = Math.floor(Math.random() * content.images.length); + const randomImage = Math.floor(Math.random() * content.images.length) return ( <> -

+

- ); + ) } - return ( -

- ) - } + return

+ }, }} - /> + > + {content.text} + ) -}; +} -export default DummyContent; +export default DummyContent diff --git a/src/components/molecules/Link/index.tsx b/src/components/molecules/Link/index.tsx index af71b6a..67f3839 100644 --- a/src/components/molecules/Link/index.tsx +++ b/src/components/molecules/Link/index.tsx @@ -1,37 +1,20 @@ import * as React from 'react' import NextLink from 'next/link' -import {UrlObject} from 'url'; +import {UrlObject} from 'url' type Props = { - href: UrlObject, - as?: UrlObject, - prefetch?: boolean, - replace?: boolean, - shallow?: boolean, - component?: React.ElementType, + href: UrlObject + as?: UrlObject + prefetch?: boolean + replace?: boolean + shallow?: boolean + component?: React.ElementType } -const Link: React.FC = ({ - href, - as, - prefetch, - replace, - shallow, - component: Component = 'a', - ...etcProps -}) => { +const Link: React.FC = ({href, as, prefetch, replace, shallow, component: Component = 'a', ...etcProps}) => { return ( - - + + ) } diff --git a/src/components/templates/BasicLayout/index.tsx b/src/components/templates/BasicLayout/index.tsx index aa7048f..1d90bd3 100644 --- a/src/components/templates/BasicLayout/index.tsx +++ b/src/components/templates/BasicLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' import * as T from '@tesseract-design/react-common' -import { Basic } from '@theoryofnekomata/viewfinder' +import {Basic} from '@theoryofnekomata/viewfinder' import Link from '../../molecules/Link' import DummyContent from '../../molecules/DummyContent' import Brand from '../../molecules/Brand' @@ -31,13 +31,13 @@ const TopBarComponent = styled('div')({ }) type Props = { - query: string, - userLinkLabel: string, - searchQueryKey: string, - searchLabel: string, - searchHint: string, - popupQueryKey: string, - userPopupQueryValue: string, + query: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string } const BasicLayoutTemplate: React.FC = ({ @@ -52,9 +52,7 @@ const BasicLayoutTemplate: React.FC = ({ return ( - } + brand={} topBarCenter={

= ({ }, }} > - + } > diff --git a/src/components/templates/Index/index.tsx b/src/components/templates/Index/index.tsx index a877ab3..dc4dd5b 100644 --- a/src/components/templates/Index/index.tsx +++ b/src/components/templates/Index/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' import * as T from '@tesseract-design/react-common' -import { Basic } from '@theoryofnekomata/viewfinder' +import {Basic} from '@theoryofnekomata/viewfinder' import Link from '../../molecules/Link' import Brand from '../../molecules/Brand' @@ -86,13 +86,13 @@ const StyledLink = styled(Link)({ }) type Props = { - query: string, - userLinkLabel: string, - searchQueryKey: string, - searchLabel: string, - searchHint: string, - popupQueryKey: string, - userPopupQueryValue: string, + query: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string } const IndexTemplate: React.FC = ({ @@ -106,9 +106,7 @@ const IndexTemplate: React.FC = ({ }) => { return ( - } + brand={} topBarComponent={TopBarComponent} topBarCenter={ @@ -130,71 +128,52 @@ const IndexTemplate: React.FC = ({ }, }} > - + } > -

- Welcome -

-

- Select a template to preview: -

+

Welcome

+

Select a template to preview:

Basic Layout - + Right Sidebar (static) - + Left Sidebar - + Left Sidebar (with menu) - + diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx index 0f8c226..fb5bb9e 100644 --- a/src/components/templates/LeftSidebarLayout/index.tsx +++ b/src/components/templates/LeftSidebarLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' import * as T from '@tesseract-design/react-common' -import { LeftSidebar } from '@theoryofnekomata/viewfinder' +import {LeftSidebar} from '@theoryofnekomata/viewfinder' import DummyContent from '../../molecules/DummyContent' import Link from '../../molecules/Link' import Brand from '../../molecules/Brand' @@ -47,17 +47,17 @@ const SidebarMainComponent = styled('div')({ }) type Props = { - query: string, - menuLinkLabel: string, - userLinkLabel: string, - searchQueryKey: string, - searchLabel: string, - searchHint: string, - popupQueryKey: string, - userPopupQueryValue: string, - sidebarSubpageQueryValue: string, - subpageQueryKey: string, - subpage: string, + query: string + menuLinkLabel: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string + sidebarSubpageQueryValue: string + subpageQueryKey: string + subpage: string } const LeftSidebarLayoutTemplate: React.FC = ({ @@ -75,9 +75,7 @@ const LeftSidebarLayoutTemplate: React.FC = ({ }) => { return ( - } + brand={} topBarComponent={TopBarComponent} sidebarMainComponent={SidebarMainComponent} sidebarMainOpen={subpage === sidebarSubpageQueryValue} @@ -101,10 +99,7 @@ const LeftSidebarLayoutTemplate: React.FC = ({ }, }} > - + } userLink={ @@ -115,10 +110,7 @@ const LeftSidebarLayoutTemplate: React.FC = ({ }, }} > - + } sidebarMain={ diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx index a4bb757..e597ae1 100644 --- a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx +++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' import * as T from '@tesseract-design/react-common' -import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder' +import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder' import DummyContent from '../../molecules/DummyContent' import Link from '../../molecules/Link' import Brand from '../../molecules/Brand' @@ -62,20 +62,20 @@ const SidebarMenuComponent = styled('div')({ }) type Props = { - query: string, - menuLinkLabel: string, - userLinkLabel: string, - searchQueryKey: string, - searchLabel: string, - searchHint: string, - popupQueryKey: string, - moreSubpageQueryValue: string, - sidebarSubpageQueryValue: string, - moreLinkLabel: string, - sidebarMenuItems: LeftSidebarWithMenu.MenuItem[], - userPopupQueryValue: string, - subpageQueryKey: string, - subpage: string, + query: string + menuLinkLabel: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + moreSubpageQueryValue: string + sidebarSubpageQueryValue: string + moreLinkLabel: string + sidebarMenuItems: LeftSidebarWithMenu.MenuItem[] + userPopupQueryValue: string + subpageQueryKey: string + subpage: string } const LeftSidebarLayoutTemplate: React.FC = ({ @@ -96,9 +96,7 @@ const LeftSidebarLayoutTemplate: React.FC = ({ }) => { return ( - } + brand={} sidebarMainComponent={SidebarMainComponent} sidebarMenuComponent={SidebarMenuComponent} topBarComponent={TopBarComponent} @@ -122,10 +120,7 @@ const LeftSidebarLayoutTemplate: React.FC = ({ }, }} > - + } userLink={ @@ -136,10 +131,7 @@ const LeftSidebarLayoutTemplate: React.FC = ({ }, }} > - + } moreLinkMenuItem={{ @@ -149,34 +141,21 @@ const LeftSidebarLayoutTemplate: React.FC = ({ [subpageQueryKey]: moreSubpageQueryValue, }, }, - icon: ( - - ), + icon: , }} moreItemsOpen={subpage === moreSubpageQueryValue} - moreLinkComponent={({ url, icon, label, }) => ( - + moreLinkComponent={({url, icon, label}) => ( + - - {icon} - + {icon} {label} )} - linkComponent={({ url, icon, label, }) => ( - + linkComponent={({url, icon, label}) => ( + - - {icon} - + {icon} {label} diff --git a/src/components/templates/RightSidebarLayout/index.tsx b/src/components/templates/RightSidebarLayout/index.tsx index da8df77..cba230e 100644 --- a/src/components/templates/RightSidebarLayout/index.tsx +++ b/src/components/templates/RightSidebarLayout/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' import * as T from '@tesseract-design/react-common' -import { RightSidebarStatic } from '@theoryofnekomata/viewfinder' +import {RightSidebarStatic} from '@theoryofnekomata/viewfinder' import DummyContent from '../../molecules/DummyContent' import Link from '../../molecules/Link' import Brand from '../../molecules/Brand' @@ -36,13 +36,13 @@ const SidebarMainComponent = styled('div')({ }) type Props = { - query: string, - userLinkLabel: string, - searchQueryKey: string, - searchLabel: string, - searchHint: string, - popupQueryKey: string, - userPopupQueryValue: string, + query: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string } const RightSidebarLayoutTemplate: React.FC = ({ @@ -56,9 +56,7 @@ const RightSidebarLayoutTemplate: React.FC = ({ }) => { return ( - } + brand={} topBarComponent={TopBarComponent} sidebarMainComponent={SidebarMainComponent} topBarCenter={ @@ -81,10 +79,7 @@ const RightSidebarLayoutTemplate: React.FC = ({ }, }} > - + } sidebarMain={ diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2f65002..fbfe6a8 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,12 @@ -const MyApp = ({ Component, pageProps }) => { - return +import * as React from 'react' + +type Props = { + Component: React.ElementType + pageProps: Record +} + +const MyApp: React.FC = ({Component, pageProps}) => { + return } export default MyApp diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index d6c721d..2372a47 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,4 +1,5 @@ -import Document, {Html, Head, Main, NextScript} from 'next/document' +import * as React from 'react' +import Document, {Html, Head, Main, NextScript, DocumentInitialProps, DocumentContext} from 'next/document' import {ServerStyleSheet} from 'styled-components' import pkg from '../../package.json' import config from '../../next.config' @@ -6,19 +7,14 @@ import config from '../../next.config' const publicUrl = process.env.NODE_ENV === 'production' ? pkg.homepage : config.basePath export default class MyDocument extends Document { - static async getInitialProps(ctx) { + static async getInitialProps(ctx: DocumentContext): Promise { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ - enhanceApp: (App) => (props) => - sheet.collectStyles( - , - ), + enhanceApp: (App) => (props) => sheet.collectStyles(), }) const initialProps = await Document.getInitialProps(ctx) @@ -29,7 +25,10 @@ export default class MyDocument extends Document { <> {initialProps.styles} - + @@ -45,11 +44,9 @@ export default class MyDocument extends Document { } } - render() { + render(): React.ReactElement { return ( - +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d986265..58b6292 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,13 +4,11 @@ import {QUERY, POPUP} from '../utilities/queryKeys' import Template from '../components/templates/Index' type Props = { - query: string, + query: string } -const Page: NextPage = ({ - query, -}) => { - return ( +const Page: NextPage = ({query}) => { + return (