Replace `@tesseract-design/viewfinder` with `@theoryofnekomata/viewfinder` as the latter is the updated package.master
@@ -10,6 +10,7 @@ | |||
}, | |||
"dependencies": { | |||
"@tesseract-design/react-common": "^0.3.0", | |||
"@theoryofnekomata/viewfinder": "0.2.4", | |||
"next": "10.1.3", | |||
"react": "17.0.2", | |||
"react-dom": "17.0.2", | |||
@@ -1,10 +1,35 @@ | |||
import * as React from 'react' | |||
import styled from 'styled-components' | |||
import * as T from '@tesseract-design/react-common' | |||
import { Basic } from '@tesseract-design/viewfinder' | |||
import { Basic } from '@theoryofnekomata/viewfinder' | |||
import Link from '../../molecules/Link' | |||
import DummyContent from '../../molecules/DummyContent' | |||
import Brand from '../../molecules/Brand' | |||
const TopBarComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
'::before': { | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.5, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
type Props = { | |||
query: string, | |||
userLinkLabel: string, | |||
@@ -26,6 +51,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({ | |||
}) => { | |||
return ( | |||
<Basic.Layout | |||
topBarComponent={TopBarComponent} | |||
brand={ | |||
<Brand /> | |||
} | |||
@@ -1,10 +1,34 @@ | |||
import * as React from 'react' | |||
import styled from 'styled-components' | |||
import * as T from '@tesseract-design/react-common' | |||
import { Basic } from '@tesseract-design/viewfinder' | |||
import { Basic } from '@theoryofnekomata/viewfinder' | |||
import Link from '../../molecules/Link' | |||
import Brand from '../../molecules/Brand' | |||
const TopBarComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
'::before': { | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.5, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
const LinkContainer = styled('nav')({ | |||
margin: '1rem 0', | |||
display: 'grid', | |||
@@ -85,6 +109,7 @@ const IndexTemplate: React.FC<Props> = ({ | |||
brand={ | |||
<Brand /> | |||
} | |||
topBarComponent={TopBarComponent} | |||
topBarCenter={ | |||
<form> | |||
<T.TextInput | |||
@@ -1,10 +1,51 @@ | |||
import * as React from 'react' | |||
import styled from 'styled-components' | |||
import * as T from '@tesseract-design/react-common' | |||
import { LeftSidebar } from '@tesseract-design/viewfinder' | |||
import { LeftSidebar } from '@theoryofnekomata/viewfinder' | |||
import DummyContent from '../../molecules/DummyContent' | |||
import Link from '../../molecules/Link' | |||
import Brand from '../../molecules/Brand' | |||
const TopBarComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
'::before': { | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.5, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
const SidebarMainComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
zIndex: 2, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.25, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
type Props = { | |||
query: string, | |||
menuLinkLabel: string, | |||
@@ -37,6 +78,8 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||
brand={ | |||
<Brand /> | |||
} | |||
topBarComponent={TopBarComponent} | |||
sidebarMainComponent={SidebarMainComponent} | |||
sidebarMainOpen={subpage === sidebarSubpageQueryValue} | |||
topBarCenter={ | |||
<form> | |||
@@ -79,9 +122,9 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||
</Link> | |||
} | |||
sidebarMain={ | |||
<LeftSidebar.SidebarContainer> | |||
<LeftSidebar.SidebarMainContainer> | |||
<DummyContent /> | |||
</LeftSidebar.SidebarContainer> | |||
</LeftSidebar.SidebarMainContainer> | |||
} | |||
> | |||
<LeftSidebar.ContentContainer> | |||
@@ -1,10 +1,66 @@ | |||
import * as React from 'react' | |||
import styled from 'styled-components' | |||
import * as T from '@tesseract-design/react-common' | |||
import { LeftSidebarWithMenu } from '@tesseract-design/viewfinder' | |||
import { LeftSidebarWithMenu } from '@theoryofnekomata/viewfinder' | |||
import DummyContent from '../../molecules/DummyContent' | |||
import Link from '../../molecules/Link' | |||
import Brand from '../../molecules/Brand' | |||
const TopBarComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
'::before': { | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.5, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
const SidebarMainComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
zIndex: 2, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.25, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
const SidebarMenuComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.4, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
type Props = { | |||
query: string, | |||
menuLinkLabel: string, | |||
@@ -43,6 +99,9 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||
brand={ | |||
<Brand /> | |||
} | |||
sidebarMainComponent={SidebarMainComponent} | |||
sidebarMenuComponent={SidebarMenuComponent} | |||
topBarComponent={TopBarComponent} | |||
topBarCenter={ | |||
<form> | |||
<T.TextInput | |||
@@ -1,10 +1,40 @@ | |||
import * as React from 'react' | |||
import styled from 'styled-components' | |||
import * as T from '@tesseract-design/react-common' | |||
import { RightSidebarStatic } from '@tesseract-design/viewfinder' | |||
import { RightSidebarStatic } from '@theoryofnekomata/viewfinder' | |||
import DummyContent from '../../molecules/DummyContent' | |||
import Link from '../../molecules/Link' | |||
import Brand from '../../molecules/Brand' | |||
const TopBarComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
'::before': { | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
'::after': { | |||
backgroundColor: 'black', | |||
opacity: 0.5, | |||
content: "''", | |||
width: '100%', | |||
height: '100%', | |||
position: 'absolute', | |||
top: 0, | |||
left: 0, | |||
pointerEvents: 'none', | |||
}, | |||
}) | |||
const SidebarMainComponent = styled('div')({ | |||
backgroundColor: 'var(--color-bg, white)', | |||
zIndex: 2, | |||
}) | |||
type Props = { | |||
query: string, | |||
userLinkLabel: string, | |||
@@ -29,6 +59,8 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({ | |||
brand={ | |||
<Brand /> | |||
} | |||
topBarComponent={TopBarComponent} | |||
sidebarMainComponent={SidebarMainComponent} | |||
topBarCenter={ | |||
<form> | |||
<T.TextInput | |||
@@ -56,9 +88,9 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({ | |||
</Link> | |||
} | |||
sidebarMain={ | |||
<RightSidebarStatic.SidebarContainer> | |||
<RightSidebarStatic.SidebarMainContainer> | |||
<DummyContent /> | |||
</RightSidebarStatic.SidebarContainer> | |||
</RightSidebarStatic.SidebarMainContainer> | |||
} | |||
> | |||
<RightSidebarStatic.ContentContainer> | |||
@@ -250,6 +250,11 @@ | |||
pascal-case "3.1.1" | |||
react-feather "2.0.3" | |||
"@theoryofnekomata/viewfinder@0.2.4": | |||
version "0.2.4" | |||
resolved "https://js.pack.modal.sh/@theoryofnekomata%2fviewfinder/-/viewfinder-0.2.4.tgz#771ec79029ae60b4a355de44709842818ac0fb9c" | |||
integrity sha512-XeIxmeh3XTnLF5HlQYMY3bEKVyAWS3Ulg4JCbEJMpjgzH+++JNn4hm0Bc7gZYzlJRFOmPaV0uK8BbpoYQcz+tQ== | |||
"@types/hast@^2.0.0": | |||
version "2.3.1" | |||
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9" | |||