This allows new projects to be formatted using Prettier and ESLint.master
@@ -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" | |||||
} | |||||
} |
@@ -0,0 +1,8 @@ | |||||
{ | |||||
"jsxSingleQuote": false, | |||||
"semi": false, | |||||
"jsxBracketSameLine": false, | |||||
"singleQuote": true, | |||||
"trailingComma": "all", | |||||
"bracketSpacing": false | |||||
} |
@@ -10,16 +10,25 @@ | |||||
}, | }, | ||||
"dependencies": { | "dependencies": { | ||||
"@tesseract-design/react-common": "^0.3.0", | "@tesseract-design/react-common": "^0.3.0", | ||||
"@theoryofnekomata/viewfinder": "0.2.4", | |||||
"@theoryofnekomata/viewfinder": "0.2.4", | |||||
"next": "10.1.3", | "next": "10.1.3", | ||||
"react": "17.0.2", | "react": "17.0.2", | ||||
"react-dom": "17.0.2", | "react-dom": "17.0.2", | ||||
"react-markdown": "^6.0.1", | |||||
"styled-components": "^5.2.3" | "styled-components": "^5.2.3" | ||||
}, | }, | ||||
"devDependencies": { | "devDependencies": { | ||||
"@types/node": "^14.14.41", | "@types/node": "^14.14.41", | ||||
"@types/react": "^17.0.3", | "@types/react": "^17.0.3", | ||||
"@types/styled-components": "^5.1.9", | "@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" | "typescript": "^4.2.4" | ||||
}, | }, | ||||
"optionalDependencies": { | "optionalDependencies": { | ||||
@@ -1,5 +1,6 @@ | |||||
import Link from '../Link' | |||||
import * as React from 'react' | |||||
import styled from 'styled-components' | import styled from 'styled-components' | ||||
import Link from '../Link' | |||||
const BrandBase = styled(Link)({ | const BrandBase = styled(Link)({ | ||||
display: 'block', | display: 'block', | ||||
@@ -23,17 +24,14 @@ const Hide = styled('span')({ | |||||
}, | }, | ||||
}) | }) | ||||
const Brand = () => { | |||||
const Brand: React.FC = () => { | |||||
return ( | return ( | ||||
<BrandBase | <BrandBase | ||||
href={{ | href={{ | ||||
pathname: '/', | pathname: '/', | ||||
}} | }} | ||||
> | > | ||||
B | |||||
<Hide> | |||||
rand | |||||
</Hide> | |||||
B<Hide>rand</Hide> | |||||
</BrandBase> | </BrandBase> | ||||
) | ) | ||||
} | } | ||||
@@ -1,3 +1,4 @@ | |||||
/* eslint-disable */ | |||||
import ReactMarkdown from 'react-markdown' | import ReactMarkdown from 'react-markdown' | ||||
const DEFAULT_CONTENTS = [ | 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. | 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. | 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', | 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', | '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 ( | return ( | ||||
<ReactMarkdown | <ReactMarkdown | ||||
children={content.text} | |||||
components={{ | components={{ | ||||
p: ({ node, ...etcProps }) => { | |||||
p: ({node, ...etcProps}) => { | |||||
if (!(Array.isArray(content.images) && content.images.length > 0)) { | 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) { | if (shouldHaveImage) { | ||||
const randomImage = Math.floor(Math.random() * content.images.length); | |||||
const randomImage = Math.floor(Math.random() * content.images.length) | |||||
return ( | return ( | ||||
<> | <> | ||||
<img | <img | ||||
@@ -202,21 +196,17 @@ const DummyContent = ({ | |||||
display: 'block', | display: 'block', | ||||
}} | }} | ||||
/> | /> | ||||
<p | |||||
{...etcProps} | |||||
/> | |||||
<p {...etcProps} /> | |||||
</> | </> | ||||
); | |||||
) | |||||
} | } | ||||
return ( | |||||
<p | |||||
{...etcProps} | |||||
/> | |||||
) | |||||
} | |||||
return <p {...etcProps} /> | |||||
}, | |||||
}} | }} | ||||
/> | |||||
> | |||||
{content.text} | |||||
</ReactMarkdown> | |||||
) | ) | ||||
}; | |||||
} | |||||
export default DummyContent; | |||||
export default DummyContent |
@@ -1,37 +1,20 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import NextLink from 'next/link' | import NextLink from 'next/link' | ||||
import {UrlObject} from 'url'; | |||||
import {UrlObject} from 'url' | |||||
type Props = { | 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 ( | 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> | </NextLink> | ||||
) | ) | ||||
} | } | ||||
@@ -1,7 +1,7 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | import styled from 'styled-components' | ||||
import * as T from '@tesseract-design/react-common' | import * as T from '@tesseract-design/react-common' | ||||
import { Basic } from '@theoryofnekomata/viewfinder' | |||||
import {Basic} from '@theoryofnekomata/viewfinder' | |||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import DummyContent from '../../molecules/DummyContent' | import DummyContent from '../../molecules/DummyContent' | ||||
import Brand from '../../molecules/Brand' | import Brand from '../../molecules/Brand' | ||||
@@ -31,13 +31,13 @@ const TopBarComponent = styled('div')({ | |||||
}) | }) | ||||
type Props = { | 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> = ({ | const BasicLayoutTemplate: React.FC<Props> = ({ | ||||
@@ -52,9 +52,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({ | |||||
return ( | return ( | ||||
<Basic.Layout | <Basic.Layout | ||||
topBarComponent={TopBarComponent} | topBarComponent={TopBarComponent} | ||||
brand={ | |||||
<Brand /> | |||||
} | |||||
brand={<Brand />} | |||||
topBarCenter={ | topBarCenter={ | ||||
<form> | <form> | ||||
<T.TextInput | <T.TextInput | ||||
@@ -75,10 +73,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({ | |||||
}, | }, | ||||
}} | }} | ||||
> | > | ||||
<T.Icon | |||||
name="user" | |||||
label={userLinkLabel} | |||||
/> | |||||
<T.Icon name="user" label={userLinkLabel} /> | |||||
</Link> | </Link> | ||||
} | } | ||||
> | > | ||||
@@ -1,7 +1,7 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | import styled from 'styled-components' | ||||
import * as T from '@tesseract-design/react-common' | import * as T from '@tesseract-design/react-common' | ||||
import { Basic } from '@theoryofnekomata/viewfinder' | |||||
import {Basic} from '@theoryofnekomata/viewfinder' | |||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | import Brand from '../../molecules/Brand' | ||||
@@ -86,13 +86,13 @@ const StyledLink = styled(Link)({ | |||||
}) | }) | ||||
type Props = { | 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> = ({ | const IndexTemplate: React.FC<Props> = ({ | ||||
@@ -106,9 +106,7 @@ const IndexTemplate: React.FC<Props> = ({ | |||||
}) => { | }) => { | ||||
return ( | return ( | ||||
<Basic.Layout | <Basic.Layout | ||||
brand={ | |||||
<Brand /> | |||||
} | |||||
brand={<Brand />} | |||||
topBarComponent={TopBarComponent} | topBarComponent={TopBarComponent} | ||||
topBarCenter={ | topBarCenter={ | ||||
<form> | <form> | ||||
@@ -130,71 +128,52 @@ const IndexTemplate: React.FC<Props> = ({ | |||||
}, | }, | ||||
}} | }} | ||||
> | > | ||||
<T.Icon | |||||
name="user" | |||||
label={userLinkLabel} | |||||
/> | |||||
<T.Icon name="user" label={userLinkLabel} /> | |||||
</Link> | </Link> | ||||
} | } | ||||
> | > | ||||
<Basic.ContentContainer> | <Basic.ContentContainer> | ||||
<h1> | |||||
Welcome | |||||
</h1> | |||||
<p> | |||||
Select a template to preview: | |||||
</p> | |||||
<h1>Welcome</h1> | |||||
<p>Select a template to preview:</p> | |||||
<LinkContainer> | <LinkContainer> | ||||
<StyledLink | <StyledLink | ||||
href={{ | href={{ | ||||
pathname: '/layouts/basic' | |||||
pathname: '/layouts/basic', | |||||
}} | }} | ||||
> | > | ||||
Basic Layout | Basic Layout | ||||
<PreviewWrapper> | <PreviewWrapper> | ||||
<Preview | |||||
src="/layouts/basic" | |||||
scrolling="no" | |||||
/> | |||||
<Preview src="/layouts/basic" scrolling="no" /> | |||||
</PreviewWrapper> | </PreviewWrapper> | ||||
</StyledLink> | </StyledLink> | ||||
<StyledLink | <StyledLink | ||||
href={{ | href={{ | ||||
pathname: '/layouts/right-sidebar-static' | |||||
pathname: '/layouts/right-sidebar-static', | |||||
}} | }} | ||||
> | > | ||||
Right Sidebar (static) | Right Sidebar (static) | ||||
<PreviewWrapper> | <PreviewWrapper> | ||||
<Preview | |||||
src="/layouts/right-sidebar-static" | |||||
scrolling="no" | |||||
/> | |||||
<Preview src="/layouts/right-sidebar-static" scrolling="no" /> | |||||
</PreviewWrapper> | </PreviewWrapper> | ||||
</StyledLink> | </StyledLink> | ||||
<StyledLink | <StyledLink | ||||
href={{ | href={{ | ||||
pathname: '/layouts/left-sidebar' | |||||
pathname: '/layouts/left-sidebar', | |||||
}} | }} | ||||
> | > | ||||
Left Sidebar | Left Sidebar | ||||
<PreviewWrapper> | <PreviewWrapper> | ||||
<Preview | |||||
src="/layouts/left-sidebar" | |||||
scrolling="no" | |||||
/> | |||||
<Preview src="/layouts/left-sidebar" scrolling="no" /> | |||||
</PreviewWrapper> | </PreviewWrapper> | ||||
</StyledLink> | </StyledLink> | ||||
<StyledLink | <StyledLink | ||||
href={{ | href={{ | ||||
pathname: '/layouts/left-sidebar/with-menu' | |||||
pathname: '/layouts/left-sidebar/with-menu', | |||||
}} | }} | ||||
> | > | ||||
Left Sidebar (with menu) | Left Sidebar (with menu) | ||||
<PreviewWrapper> | <PreviewWrapper> | ||||
<Preview | |||||
src="/layouts/left-sidebar/with-menu" | |||||
scrolling="no" | |||||
/> | |||||
<Preview src="/layouts/left-sidebar/with-menu" scrolling="no" /> | |||||
</PreviewWrapper> | </PreviewWrapper> | ||||
</StyledLink> | </StyledLink> | ||||
</LinkContainer> | </LinkContainer> | ||||
@@ -1,7 +1,7 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | import styled from 'styled-components' | ||||
import * as T from '@tesseract-design/react-common' | import * as T from '@tesseract-design/react-common' | ||||
import { LeftSidebar } from '@theoryofnekomata/viewfinder' | |||||
import {LeftSidebar} from '@theoryofnekomata/viewfinder' | |||||
import DummyContent from '../../molecules/DummyContent' | import DummyContent from '../../molecules/DummyContent' | ||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | import Brand from '../../molecules/Brand' | ||||
@@ -47,17 +47,17 @@ const SidebarMainComponent = styled('div')({ | |||||
}) | }) | ||||
type Props = { | 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> = ({ | const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | ||||
@@ -75,9 +75,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}) => { | }) => { | ||||
return ( | return ( | ||||
<LeftSidebar.Layout | <LeftSidebar.Layout | ||||
brand={ | |||||
<Brand /> | |||||
} | |||||
brand={<Brand />} | |||||
topBarComponent={TopBarComponent} | topBarComponent={TopBarComponent} | ||||
sidebarMainComponent={SidebarMainComponent} | sidebarMainComponent={SidebarMainComponent} | ||||
sidebarMainOpen={subpage === sidebarSubpageQueryValue} | 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> | </Link> | ||||
} | } | ||||
userLink={ | userLink={ | ||||
@@ -115,10 +110,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}, | }, | ||||
}} | }} | ||||
> | > | ||||
<T.Icon | |||||
name="user" | |||||
label={userLinkLabel} | |||||
/> | |||||
<T.Icon name="user" label={userLinkLabel} /> | |||||
</Link> | </Link> | ||||
} | } | ||||
sidebarMain={ | sidebarMain={ | ||||
@@ -1,7 +1,7 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | import styled from 'styled-components' | ||||
import * as T from '@tesseract-design/react-common' | import * as T from '@tesseract-design/react-common' | ||||
import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder' | |||||
import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder' | |||||
import DummyContent from '../../molecules/DummyContent' | import DummyContent from '../../molecules/DummyContent' | ||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | import Brand from '../../molecules/Brand' | ||||
@@ -62,20 +62,20 @@ const SidebarMenuComponent = styled('div')({ | |||||
}) | }) | ||||
type Props = { | 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> = ({ | const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | ||||
@@ -96,9 +96,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}) => { | }) => { | ||||
return ( | return ( | ||||
<LeftSidebarWithMenu.Layout | <LeftSidebarWithMenu.Layout | ||||
brand={ | |||||
<Brand /> | |||||
} | |||||
brand={<Brand />} | |||||
sidebarMainComponent={SidebarMainComponent} | sidebarMainComponent={SidebarMainComponent} | ||||
sidebarMenuComponent={SidebarMenuComponent} | sidebarMenuComponent={SidebarMenuComponent} | ||||
topBarComponent={TopBarComponent} | topBarComponent={TopBarComponent} | ||||
@@ -122,10 +120,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}, | }, | ||||
}} | }} | ||||
> | > | ||||
<T.Icon | |||||
name="menu" | |||||
label={menuLinkLabel} | |||||
/> | |||||
<T.Icon name="menu" label={menuLinkLabel} /> | |||||
</Link> | </Link> | ||||
} | } | ||||
userLink={ | userLink={ | ||||
@@ -136,10 +131,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}, | }, | ||||
}} | }} | ||||
> | > | ||||
<T.Icon | |||||
name="user" | |||||
label={userLinkLabel} | |||||
/> | |||||
<T.Icon name="user" label={userLinkLabel} /> | |||||
</Link> | </Link> | ||||
} | } | ||||
moreLinkMenuItem={{ | moreLinkMenuItem={{ | ||||
@@ -149,34 +141,21 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
[subpageQueryKey]: moreSubpageQueryValue, | [subpageQueryKey]: moreSubpageQueryValue, | ||||
}, | }, | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="more-horizontal" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="more-horizontal" label="" />, | |||||
}} | }} | ||||
moreItemsOpen={subpage === moreSubpageQueryValue} | moreItemsOpen={subpage === moreSubpageQueryValue} | ||||
moreLinkComponent={({ url, icon, label, }) => ( | |||||
<Link | |||||
href={url} | |||||
> | |||||
moreLinkComponent={({url, icon, label}) => ( | |||||
<Link href={url}> | |||||
<LeftSidebarWithMenu.MoreSidebarMenuContainer> | <LeftSidebarWithMenu.MoreSidebarMenuContainer> | ||||
<LeftSidebarWithMenu.MoreSidebarMenuItemIcon> | |||||
{icon} | |||||
</LeftSidebarWithMenu.MoreSidebarMenuItemIcon> | |||||
<LeftSidebarWithMenu.MoreSidebarMenuItemIcon>{icon}</LeftSidebarWithMenu.MoreSidebarMenuItemIcon> | |||||
{label} | {label} | ||||
</LeftSidebarWithMenu.MoreSidebarMenuContainer> | </LeftSidebarWithMenu.MoreSidebarMenuContainer> | ||||
</Link> | </Link> | ||||
)} | )} | ||||
linkComponent={({ url, icon, label, }) => ( | |||||
<Link | |||||
href={url} | |||||
> | |||||
linkComponent={({url, icon, label}) => ( | |||||
<Link href={url}> | |||||
<LeftSidebarWithMenu.SidebarMenuContainer> | <LeftSidebarWithMenu.SidebarMenuContainer> | ||||
<LeftSidebarWithMenu.SidebarMenuItemIcon> | |||||
{icon} | |||||
</LeftSidebarWithMenu.SidebarMenuItemIcon> | |||||
<LeftSidebarWithMenu.SidebarMenuItemIcon>{icon}</LeftSidebarWithMenu.SidebarMenuItemIcon> | |||||
{label} | {label} | ||||
</LeftSidebarWithMenu.SidebarMenuContainer> | </LeftSidebarWithMenu.SidebarMenuContainer> | ||||
</Link> | </Link> | ||||
@@ -1,7 +1,7 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | import styled from 'styled-components' | ||||
import * as T from '@tesseract-design/react-common' | import * as T from '@tesseract-design/react-common' | ||||
import { RightSidebarStatic } from '@theoryofnekomata/viewfinder' | |||||
import {RightSidebarStatic} from '@theoryofnekomata/viewfinder' | |||||
import DummyContent from '../../molecules/DummyContent' | import DummyContent from '../../molecules/DummyContent' | ||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | import Brand from '../../molecules/Brand' | ||||
@@ -36,13 +36,13 @@ const SidebarMainComponent = styled('div')({ | |||||
}) | }) | ||||
type Props = { | 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> = ({ | const RightSidebarLayoutTemplate: React.FC<Props> = ({ | ||||
@@ -56,9 +56,7 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}) => { | }) => { | ||||
return ( | return ( | ||||
<RightSidebarStatic.Layout | <RightSidebarStatic.Layout | ||||
brand={ | |||||
<Brand /> | |||||
} | |||||
brand={<Brand />} | |||||
topBarComponent={TopBarComponent} | topBarComponent={TopBarComponent} | ||||
sidebarMainComponent={SidebarMainComponent} | sidebarMainComponent={SidebarMainComponent} | ||||
topBarCenter={ | topBarCenter={ | ||||
@@ -81,10 +79,7 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
}, | }, | ||||
}} | }} | ||||
> | > | ||||
<T.Icon | |||||
name="user" | |||||
label={userLinkLabel} | |||||
/> | |||||
<T.Icon name="user" label={userLinkLabel} /> | |||||
</Link> | </Link> | ||||
} | } | ||||
sidebarMain={ | sidebarMain={ | ||||
@@ -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 | export default MyApp |
@@ -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 {ServerStyleSheet} from 'styled-components' | ||||
import pkg from '../../package.json' | import pkg from '../../package.json' | ||||
import config from '../../next.config' | 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 | const publicUrl = process.env.NODE_ENV === 'production' ? pkg.homepage : config.basePath | ||||
export default class MyDocument extends Document { | export default class MyDocument extends Document { | ||||
static async getInitialProps(ctx) { | |||||
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> { | |||||
const sheet = new ServerStyleSheet() | const sheet = new ServerStyleSheet() | ||||
const originalRenderPage = ctx.renderPage | const originalRenderPage = ctx.renderPage | ||||
try { | try { | ||||
ctx.renderPage = () => | ctx.renderPage = () => | ||||
originalRenderPage({ | originalRenderPage({ | ||||
enhanceApp: (App) => (props) => | |||||
sheet.collectStyles( | |||||
<App | |||||
{...props} | |||||
/>, | |||||
), | |||||
enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />), | |||||
}) | }) | ||||
const initialProps = await Document.getInitialProps(ctx) | const initialProps = await Document.getInitialProps(ctx) | ||||
@@ -29,7 +25,10 @@ export default class MyDocument extends Document { | |||||
<> | <> | ||||
{initialProps.styles} | {initialProps.styles} | ||||
<link rel="preconnect" href="https://fonts.gstatic.com" /> | <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}/global.css`} /> | ||||
<link rel="stylesheet" href={`${publicUrl}/theme.css`} /> | <link rel="stylesheet" href={`${publicUrl}/theme.css`} /> | ||||
<link rel="stylesheet" title="Dark" href={`${publicUrl}/theme/dark.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 ( | return ( | ||||
<Html | |||||
lang="en-PH" | |||||
> | |||||
<Html lang="en-PH"> | |||||
<Head /> | <Head /> | ||||
<body> | <body> | ||||
<Main /> | <Main /> | ||||
@@ -4,13 +4,11 @@ import {QUERY, POPUP} from '../utilities/queryKeys' | |||||
import Template from '../components/templates/Index' | import Template from '../components/templates/Index' | ||||
type Props = { | type Props = { | ||||
query: string, | |||||
query: string | |||||
} | } | ||||
const Page: NextPage<Props> = ({ | |||||
query, | |||||
}) => { | |||||
return ( | |||||
const Page: NextPage<Props> = ({query}) => { | |||||
return ( | |||||
<Template | <Template | ||||
query={query} | query={query} | ||||
userLinkLabel="User" | userLinkLabel="User" | ||||
@@ -20,16 +18,16 @@ const Page: NextPage<Props> = ({ | |||||
popupQueryKey={POPUP} | popupQueryKey={POPUP} | ||||
userPopupQueryValue={USER} | userPopupQueryValue={USER} | ||||
/> | /> | ||||
) | |||||
) | |||||
} | } | ||||
export default Page | export default Page | ||||
export const getServerSideProps: GetServerSideProps = async (ctx) => { | export const getServerSideProps: GetServerSideProps = async (ctx) => { | ||||
const { [QUERY]: query = '', } = ctx.query | |||||
const {[QUERY]: query = ''} = ctx.query | |||||
return { | return { | ||||
props: { | props: { | ||||
query, | query, | ||||
} | |||||
}, | |||||
} | } | ||||
} | } |
@@ -4,12 +4,10 @@ import {USER} from '../../../utilities/popups' | |||||
import {POPUP, QUERY} from '../../../utilities/queryKeys' | import {POPUP, QUERY} from '../../../utilities/queryKeys' | ||||
type Props = { | type Props = { | ||||
query: string, | |||||
query: string | |||||
} | } | ||||
const Page: NextPage<Props> = ({ | |||||
query, | |||||
}) => { | |||||
const Page: NextPage<Props> = ({query}) => { | |||||
return ( | return ( | ||||
<Template | <Template | ||||
query={query} | query={query} | ||||
@@ -26,10 +24,10 @@ const Page: NextPage<Props> = ({ | |||||
export default Page | export default Page | ||||
export const getServerSideProps: GetServerSideProps = async (ctx) => { | export const getServerSideProps: GetServerSideProps = async (ctx) => { | ||||
const { [QUERY]: query = '', } = ctx.query | |||||
const {[QUERY]: query = ''} = ctx.query | |||||
return { | return { | ||||
props: { | props: { | ||||
query, | query, | ||||
} | |||||
}, | |||||
} | } | ||||
} | } |
@@ -5,14 +5,11 @@ import {USER} from '../../../utilities/popups' | |||||
import {SIDEBAR} from '../../../utilities/subpages' | import {SIDEBAR} from '../../../utilities/subpages' | ||||
type Props = { | type Props = { | ||||
query: string, | |||||
subpage: string, | |||||
query: string | |||||
subpage: string | |||||
} | } | ||||
const Page: NextPage<Props> = ({ | |||||
query, | |||||
subpage, | |||||
}) => { | |||||
const Page: NextPage<Props> = ({query, subpage}) => { | |||||
return ( | return ( | ||||
<Template | <Template | ||||
subpage={subpage} | subpage={subpage} | ||||
@@ -33,12 +30,11 @@ const Page: NextPage<Props> = ({ | |||||
export default Page | export default Page | ||||
export const getServerSideProps: GetServerSideProps = async (ctx) => { | export const getServerSideProps: GetServerSideProps = async (ctx) => { | ||||
const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query | |||||
const {[QUERY]: query = '', [SUBPAGE]: subpage = null} = ctx.query | |||||
return { | return { | ||||
props: { | props: { | ||||
query, | query, | ||||
subpage, | subpage, | ||||
} | |||||
}, | |||||
} | } | ||||
} | } | ||||
@@ -7,14 +7,11 @@ import {USER} from '../../../../utilities/popups' | |||||
import {MORE, SIDEBAR} from '../../../../utilities/subpages' | import {MORE, SIDEBAR} from '../../../../utilities/subpages' | ||||
type Props = { | type Props = { | ||||
query: string, | |||||
subpage: string, | |||||
query: string | |||||
subpage: string | |||||
} | } | ||||
const Page: NextPage<Props> = ({ | |||||
query, | |||||
subpage, | |||||
}) => { | |||||
const Page: NextPage<Props> = ({query, subpage}) => { | |||||
return ( | return ( | ||||
<Template | <Template | ||||
query={query} | query={query} | ||||
@@ -37,12 +34,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
}, | }, | ||||
{ | { | ||||
id: '2', | id: '2', | ||||
@@ -50,12 +42,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
}, | }, | ||||
{ | { | ||||
id: '3', | id: '3', | ||||
@@ -63,12 +50,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
}, | }, | ||||
{ | { | ||||
id: '100', | id: '100', | ||||
@@ -76,12 +58,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
}, | }, | ||||
{ | { | ||||
id: '101', | id: '101', | ||||
@@ -89,12 +66,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
}, | }, | ||||
{ | { | ||||
id: '4', | id: '4', | ||||
@@ -102,12 +74,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
secondary: true, | secondary: true, | ||||
}, | }, | ||||
{ | { | ||||
@@ -116,12 +83,7 @@ const Page: NextPage<Props> = ({ | |||||
url: { | url: { | ||||
pathname: '/hello', | pathname: '/hello', | ||||
}, | }, | ||||
icon: ( | |||||
<T.Icon | |||||
name="square" | |||||
label="" | |||||
/> | |||||
), | |||||
icon: <T.Icon name="square" label="" />, | |||||
secondary: true, | secondary: true, | ||||
}, | }, | ||||
]} | ]} | ||||
@@ -132,12 +94,11 @@ const Page: NextPage<Props> = ({ | |||||
export default Page | export default Page | ||||
export const getServerSideProps: GetServerSideProps = async (ctx) => { | export const getServerSideProps: GetServerSideProps = async (ctx) => { | ||||
const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query | |||||
const {[QUERY]: query = '', [SUBPAGE]: subpage = null} = ctx.query | |||||
return { | return { | ||||
props: { | props: { | ||||
query, | query, | ||||
subpage, | subpage, | ||||
} | |||||
}, | |||||
} | } | ||||
} | } | ||||
@@ -4,12 +4,10 @@ import {POPUP, QUERY} from '../../../utilities/queryKeys' | |||||
import {USER} from '../../../utilities/popups' | import {USER} from '../../../utilities/popups' | ||||
type Props = { | type Props = { | ||||
query: string, | |||||
query: string | |||||
} | } | ||||
const Page: NextPage<Props> = ({ | |||||
query, | |||||
}) => { | |||||
const Page: NextPage<Props> = ({query}) => { | |||||
return ( | return ( | ||||
<Template | <Template | ||||
query={query} | query={query} | ||||
@@ -26,11 +24,10 @@ const Page: NextPage<Props> = ({ | |||||
export default Page | export default Page | ||||
export const getServerSideProps: GetServerSideProps = async (ctx) => { | export const getServerSideProps: GetServerSideProps = async (ctx) => { | ||||
const { [QUERY]: query = '', } = ctx.query | |||||
const {[QUERY]: query = ''} = ctx.query | |||||
return { | return { | ||||
props: { | props: { | ||||
query, | query, | ||||
} | |||||
}, | |||||
} | } | ||||
} | } | ||||