Add Prettier and ESLint

This allows new projects to be formatted using Prettier and ESLint.

.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"
+	}
+}

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"jsxSingleQuote": false,
+	"semi": false,
+	"jsxBracketSameLine": false,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"bracketSpacing": false
+}

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": {

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 (
 		<BrandBase
 			href={{
 				pathname: '/',
 			}}
 		>
-			B
-			<Hide>
-				rand
-			</Hide>
+			B<Hide>rand</Hide>
 		</BrandBase>
 	)
 }

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 (
 		<ReactMarkdown
-			children={content.text}
 			components={{
-				p: ({ node, ...etcProps }) => {
+				p: ({node, ...etcProps}) => {
 					if (!(Array.isArray(content.images) && content.images.length > 0)) {
-						return (
-							<p
-								{...etcProps}
-							/>
-						);
+						return <p {...etcProps} />
 					}
-					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 (
 							<>
 								<img
@@ -202,21 +196,17 @@ const DummyContent = ({
 										display: 'block',
 									}}
 								/>
-								<p
-									{...etcProps}
-								/>
+								<p {...etcProps} />
 							</>
-						);
+						)
 					}
-					return (
-						<p
-							{...etcProps}
-						/>
-					)
-				}
+					return <p {...etcProps} />
+				},
 			}}
-		/>
+		>
+			{content.text}
+		</ReactMarkdown>
 	)
-};
+}
 
-export default DummyContent;
+export default DummyContent

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<Props> = ({
-	href,
-	as,
-	prefetch,
-	replace,
-	shallow,
-	component: Component = 'a',
-	...etcProps
-}) => {
+const Link: React.FC<Props> = ({href, as, prefetch, replace, shallow, component: Component = 'a', ...etcProps}) => {
 	return (
-		<NextLink
-			href={href}
-			as={as}
-			passHref
-			replace={replace}
-			shallow={shallow}
-			prefetch={prefetch}
-		>
-			<Component
-				{...etcProps}
-			/>
+		<NextLink href={href} as={as} passHref replace={replace} shallow={shallow} prefetch={prefetch}>
+			<Component {...etcProps} />
 		</NextLink>
 	)
 }

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<Props> = ({
@@ -52,9 +52,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({
 	return (
 		<Basic.Layout
 			topBarComponent={TopBarComponent}
-			brand={
-				<Brand />
-			}
+			brand={<Brand />}
 			topBarCenter={
 				<form>
 					<T.TextInput
@@ -75,10 +73,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="user"
-						label={userLinkLabel}
-					/>
+					<T.Icon name="user" label={userLinkLabel} />
 				</Link>
 			}
 		>

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<Props> = ({
@@ -106,9 +106,7 @@ const IndexTemplate: React.FC<Props> = ({
 }) => {
 	return (
 		<Basic.Layout
-			brand={
-				<Brand />
-			}
+			brand={<Brand />}
 			topBarComponent={TopBarComponent}
 			topBarCenter={
 				<form>
@@ -130,71 +128,52 @@ const IndexTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="user"
-						label={userLinkLabel}
-					/>
+					<T.Icon name="user" label={userLinkLabel} />
 				</Link>
 			}
 		>
 			<Basic.ContentContainer>
-				<h1>
-					Welcome
-				</h1>
-				<p>
-					Select a template to preview:
-				</p>
+				<h1>Welcome</h1>
+				<p>Select a template to preview:</p>
 				<LinkContainer>
 					<StyledLink
 						href={{
-							pathname: '/layouts/basic'
+							pathname: '/layouts/basic',
 						}}
 					>
 						Basic Layout
 						<PreviewWrapper>
-							<Preview
-								src="/layouts/basic"
-								scrolling="no"
-							/>
+							<Preview src="/layouts/basic" scrolling="no" />
 						</PreviewWrapper>
 					</StyledLink>
 					<StyledLink
 						href={{
-							pathname: '/layouts/right-sidebar-static'
+							pathname: '/layouts/right-sidebar-static',
 						}}
 					>
 						Right Sidebar (static)
 						<PreviewWrapper>
-							<Preview
-								src="/layouts/right-sidebar-static"
-								scrolling="no"
-							/>
+							<Preview src="/layouts/right-sidebar-static" scrolling="no" />
 						</PreviewWrapper>
 					</StyledLink>
 					<StyledLink
 						href={{
-							pathname: '/layouts/left-sidebar'
+							pathname: '/layouts/left-sidebar',
 						}}
 					>
 						Left Sidebar
 						<PreviewWrapper>
-							<Preview
-								src="/layouts/left-sidebar"
-								scrolling="no"
-							/>
+							<Preview src="/layouts/left-sidebar" scrolling="no" />
 						</PreviewWrapper>
 					</StyledLink>
 					<StyledLink
 						href={{
-							pathname: '/layouts/left-sidebar/with-menu'
+							pathname: '/layouts/left-sidebar/with-menu',
 						}}
 					>
 						Left Sidebar (with menu)
 						<PreviewWrapper>
-							<Preview
-								src="/layouts/left-sidebar/with-menu"
-								scrolling="no"
-							/>
+							<Preview src="/layouts/left-sidebar/with-menu" scrolling="no" />
 						</PreviewWrapper>
 					</StyledLink>
 				</LinkContainer>

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<Props> = ({
@@ -75,9 +75,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 }) => {
 	return (
 		<LeftSidebar.Layout
-			brand={
-				<Brand />
-			}
+			brand={<Brand />}
 			topBarComponent={TopBarComponent}
 			sidebarMainComponent={SidebarMainComponent}
 			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
@@ -101,10 +99,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="menu"
-						label={menuLinkLabel}
-					/>
+					<T.Icon name="menu" label={menuLinkLabel} />
 				</Link>
 			}
 			userLink={
@@ -115,10 +110,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="user"
-						label={userLinkLabel}
-					/>
+					<T.Icon name="user" label={userLinkLabel} />
 				</Link>
 			}
 			sidebarMain={

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<Props> = ({
@@ -96,9 +96,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 }) => {
 	return (
 		<LeftSidebarWithMenu.Layout
-			brand={
-				<Brand />
-			}
+			brand={<Brand />}
 			sidebarMainComponent={SidebarMainComponent}
 			sidebarMenuComponent={SidebarMenuComponent}
 			topBarComponent={TopBarComponent}
@@ -122,10 +120,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="menu"
-						label={menuLinkLabel}
-					/>
+					<T.Icon name="menu" label={menuLinkLabel} />
 				</Link>
 			}
 			userLink={
@@ -136,10 +131,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="user"
-						label={userLinkLabel}
-					/>
+					<T.Icon name="user" label={userLinkLabel} />
 				</Link>
 			}
 			moreLinkMenuItem={{
@@ -149,34 +141,21 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 						[subpageQueryKey]: moreSubpageQueryValue,
 					},
 				},
-				icon: (
-					<T.Icon
-						name="more-horizontal"
-						label=""
-					/>
-				),
+				icon: <T.Icon name="more-horizontal" label="" />,
 			}}
 			moreItemsOpen={subpage === moreSubpageQueryValue}
-			moreLinkComponent={({ url, icon, label, }) => (
-				<Link
-					href={url}
-				>
+			moreLinkComponent={({url, icon, label}) => (
+				<Link href={url}>
 					<LeftSidebarWithMenu.MoreSidebarMenuContainer>
-						<LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
-							{icon}
-						</LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
+						<LeftSidebarWithMenu.MoreSidebarMenuItemIcon>{icon}</LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
 						{label}
 					</LeftSidebarWithMenu.MoreSidebarMenuContainer>
 				</Link>
 			)}
-			linkComponent={({ url, icon, label, }) => (
-				<Link
-					href={url}
-				>
+			linkComponent={({url, icon, label}) => (
+				<Link href={url}>
 					<LeftSidebarWithMenu.SidebarMenuContainer>
-						<LeftSidebarWithMenu.SidebarMenuItemIcon>
-							{icon}
-						</LeftSidebarWithMenu.SidebarMenuItemIcon>
+						<LeftSidebarWithMenu.SidebarMenuItemIcon>{icon}</LeftSidebarWithMenu.SidebarMenuItemIcon>
 						{label}
 					</LeftSidebarWithMenu.SidebarMenuContainer>
 				</Link>

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<Props> = ({
@@ -56,9 +56,7 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({
 }) => {
 	return (
 		<RightSidebarStatic.Layout
-			brand={
-				<Brand />
-			}
+			brand={<Brand />}
 			topBarComponent={TopBarComponent}
 			sidebarMainComponent={SidebarMainComponent}
 			topBarCenter={
@@ -81,10 +79,7 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({
 						},
 					}}
 				>
-					<T.Icon
-						name="user"
-						label={userLinkLabel}
-					/>
+					<T.Icon name="user" label={userLinkLabel} />
 				</Link>
 			}
 			sidebarMain={

src/pages/_app.tsx

@@ -1,5 +1,12 @@
-const MyApp = ({ Component, pageProps }) => {
-  return <Component {...pageProps} />
+import * as React from 'react'
+
+type Props = {
+	Component: React.ElementType
+	pageProps: Record<string, unknown>
+}
+
+const MyApp: React.FC<Props> = ({Component, pageProps}) => {
+	return <Component {...pageProps} />
 }
 
 export default MyApp

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<DocumentInitialProps> {
 		const sheet = new ServerStyleSheet()
 		const originalRenderPage = ctx.renderPage
 
 		try {
 			ctx.renderPage = () =>
 				originalRenderPage({
-					enhanceApp: (App) => (props) =>
-						sheet.collectStyles(
-							<App
-								{...props}
-							/>,
-						),
+					enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
 				})
 
 			const initialProps = await Document.getInitialProps(ctx)
@@ -29,7 +25,10 @@ export default class MyDocument extends Document {
 					<>
 						{initialProps.styles}
 						<link rel="preconnect" href="https://fonts.gstatic.com" />
-						<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..112.5,100..900&display=swap" />
+						<link
+							rel="stylesheet"
+							href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..112.5,100..900&display=swap"
+						/>
 						<link rel="stylesheet" href={`${publicUrl}/global.css`} />
 						<link rel="stylesheet" href={`${publicUrl}/theme.css`} />
 						<link rel="stylesheet" title="Dark" href={`${publicUrl}/theme/dark.css`} />
@@ -45,11 +44,9 @@ export default class MyDocument extends Document {
 		}
 	}
 
-	render() {
+	render(): React.ReactElement {
 		return (
-			<Html
-				lang="en-PH"
-			>
+			<Html lang="en-PH">
 				<Head />
 				<body>
 					<Main />

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<Props> = ({
-	query,
-}) => {
-  return (
+const Page: NextPage<Props> = ({query}) => {
+	return (
 		<Template
 			query={query}
 			userLinkLabel="User"
@@ -20,16 +18,16 @@ const Page: NextPage<Props> = ({
 			popupQueryKey={POPUP}
 			userPopupQueryValue={USER}
 		/>
-  )
+	)
 }
 
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', } = ctx.query
+	const {[QUERY]: query = ''} = ctx.query
 	return {
 		props: {
 			query,
-		}
+		},
 	}
 }

src/pages/layouts/basic/index.tsx

@@ -4,12 +4,10 @@ import {USER} from '../../../utilities/popups'
 import {POPUP, QUERY} from '../../../utilities/queryKeys'
 
 type Props = {
-	query: string,
+	query: string
 }
 
-const Page: NextPage<Props> = ({
-	query,
-}) => {
+const Page: NextPage<Props> = ({query}) => {
 	return (
 		<Template
 			query={query}
@@ -26,10 +24,10 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', } = ctx.query
+	const {[QUERY]: query = ''} = ctx.query
 	return {
 		props: {
 			query,
-		}
+		},
 	}
 }

src/pages/layouts/left-sidebar/index.tsx

@@ -5,14 +5,11 @@ import {USER} from '../../../utilities/popups'
 import {SIDEBAR} from '../../../utilities/subpages'
 
 type Props = {
-	query: string,
-	subpage: string,
+	query: string
+	subpage: string
 }
 
-const Page: NextPage<Props> = ({
-	query,
-	subpage,
-}) => {
+const Page: NextPage<Props> = ({query, subpage}) => {
 	return (
 		<Template
 			subpage={subpage}
@@ -33,12 +30,11 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query
+	const {[QUERY]: query = '', [SUBPAGE]: subpage = null} = ctx.query
 	return {
 		props: {
 			query,
 			subpage,
-		}
+		},
 	}
 }
-

src/pages/layouts/left-sidebar/with-menu/index.tsx

@@ -7,14 +7,11 @@ import {USER} from '../../../../utilities/popups'
 import {MORE, SIDEBAR} from '../../../../utilities/subpages'
 
 type Props = {
-	query: string,
-	subpage: string,
+	query: string
+	subpage: string
 }
 
-const Page: NextPage<Props> = ({
-	query,
-	subpage,
-}) => {
+const Page: NextPage<Props> = ({query, subpage}) => {
 	return (
 		<Template
 			query={query}
@@ -37,12 +34,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 				},
 				{
 					id: '2',
@@ -50,12 +42,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 				},
 				{
 					id: '3',
@@ -63,12 +50,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 				},
 				{
 					id: '100',
@@ -76,12 +58,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 				},
 				{
 					id: '101',
@@ -89,12 +66,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 				},
 				{
 					id: '4',
@@ -102,12 +74,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 					secondary: true,
 				},
 				{
@@ -116,12 +83,7 @@ const Page: NextPage<Props> = ({
 					url: {
 						pathname: '/hello',
 					},
-					icon: (
-						<T.Icon
-							name="square"
-							label=""
-						/>
-					),
+					icon: <T.Icon name="square" label="" />,
 					secondary: true,
 				},
 			]}
@@ -132,12 +94,11 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query
+	const {[QUERY]: query = '', [SUBPAGE]: subpage = null} = ctx.query
 	return {
 		props: {
 			query,
 			subpage,
-		}
+		},
 	}
 }
-

src/pages/layouts/right-sidebar-static/index.tsx

@@ -4,12 +4,10 @@ import {POPUP, QUERY} from '../../../utilities/queryKeys'
 import {USER} from '../../../utilities/popups'
 
 type Props = {
-	query: string,
+	query: string
 }
 
-const Page: NextPage<Props> = ({
-	query,
-}) => {
+const Page: NextPage<Props> = ({query}) => {
 	return (
 		<Template
 			query={query}
@@ -26,11 +24,10 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', } = ctx.query
+	const {[QUERY]: query = ''} = ctx.query
 	return {
 		props: {
 			query,
-		}
+		},
 	}
 }
-