Replace `@tesseract-design/viewfinder` with `@theoryofnekomata/viewfinder` as the latter is the updated package.master
@@ -10,6 +10,7 @@ | |||||
}, | }, | ||||
"dependencies": { | "dependencies": { | ||||
"@tesseract-design/react-common": "^0.3.0", | "@tesseract-design/react-common": "^0.3.0", | ||||
"@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", | ||||
@@ -1,10 +1,35 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | |||||
import * as T from '@tesseract-design/react-common' | 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 Link from '../../molecules/Link' | ||||
import DummyContent from '../../molecules/DummyContent' | import DummyContent from '../../molecules/DummyContent' | ||||
import Brand from '../../molecules/Brand' | 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 = { | type Props = { | ||||
query: string, | query: string, | ||||
userLinkLabel: string, | userLinkLabel: string, | ||||
@@ -26,6 +51,7 @@ const BasicLayoutTemplate: React.FC<Props> = ({ | |||||
}) => { | }) => { | ||||
return ( | return ( | ||||
<Basic.Layout | <Basic.Layout | ||||
topBarComponent={TopBarComponent} | |||||
brand={ | brand={ | ||||
<Brand /> | <Brand /> | ||||
} | } | ||||
@@ -1,10 +1,34 @@ | |||||
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 '@tesseract-design/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' | ||||
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')({ | const LinkContainer = styled('nav')({ | ||||
margin: '1rem 0', | margin: '1rem 0', | ||||
display: 'grid', | display: 'grid', | ||||
@@ -85,6 +109,7 @@ const IndexTemplate: React.FC<Props> = ({ | |||||
brand={ | brand={ | ||||
<Brand /> | <Brand /> | ||||
} | } | ||||
topBarComponent={TopBarComponent} | |||||
topBarCenter={ | topBarCenter={ | ||||
<form> | <form> | ||||
<T.TextInput | <T.TextInput | ||||
@@ -1,10 +1,51 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | |||||
import * as T from '@tesseract-design/react-common' | 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 DummyContent from '../../molecules/DummyContent' | ||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | 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 = { | type Props = { | ||||
query: string, | query: string, | ||||
menuLinkLabel: string, | menuLinkLabel: string, | ||||
@@ -37,6 +78,8 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
brand={ | brand={ | ||||
<Brand /> | <Brand /> | ||||
} | } | ||||
topBarComponent={TopBarComponent} | |||||
sidebarMainComponent={SidebarMainComponent} | |||||
sidebarMainOpen={subpage === sidebarSubpageQueryValue} | sidebarMainOpen={subpage === sidebarSubpageQueryValue} | ||||
topBarCenter={ | topBarCenter={ | ||||
<form> | <form> | ||||
@@ -79,9 +122,9 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
</Link> | </Link> | ||||
} | } | ||||
sidebarMain={ | sidebarMain={ | ||||
<LeftSidebar.SidebarContainer> | |||||
<LeftSidebar.SidebarMainContainer> | |||||
<DummyContent /> | <DummyContent /> | ||||
</LeftSidebar.SidebarContainer> | |||||
</LeftSidebar.SidebarMainContainer> | |||||
} | } | ||||
> | > | ||||
<LeftSidebar.ContentContainer> | <LeftSidebar.ContentContainer> | ||||
@@ -1,10 +1,66 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | |||||
import * as T from '@tesseract-design/react-common' | 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 DummyContent from '../../molecules/DummyContent' | ||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | 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 = { | type Props = { | ||||
query: string, | query: string, | ||||
menuLinkLabel: string, | menuLinkLabel: string, | ||||
@@ -43,6 +99,9 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
brand={ | brand={ | ||||
<Brand /> | <Brand /> | ||||
} | } | ||||
sidebarMainComponent={SidebarMainComponent} | |||||
sidebarMenuComponent={SidebarMenuComponent} | |||||
topBarComponent={TopBarComponent} | |||||
topBarCenter={ | topBarCenter={ | ||||
<form> | <form> | ||||
<T.TextInput | <T.TextInput | ||||
@@ -1,10 +1,40 @@ | |||||
import * as React from 'react' | import * as React from 'react' | ||||
import styled from 'styled-components' | |||||
import * as T from '@tesseract-design/react-common' | 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 DummyContent from '../../molecules/DummyContent' | ||||
import Link from '../../molecules/Link' | import Link from '../../molecules/Link' | ||||
import Brand from '../../molecules/Brand' | 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 = { | type Props = { | ||||
query: string, | query: string, | ||||
userLinkLabel: string, | userLinkLabel: string, | ||||
@@ -29,6 +59,8 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
brand={ | brand={ | ||||
<Brand /> | <Brand /> | ||||
} | } | ||||
topBarComponent={TopBarComponent} | |||||
sidebarMainComponent={SidebarMainComponent} | |||||
topBarCenter={ | topBarCenter={ | ||||
<form> | <form> | ||||
<T.TextInput | <T.TextInput | ||||
@@ -56,9 +88,9 @@ const RightSidebarLayoutTemplate: React.FC<Props> = ({ | |||||
</Link> | </Link> | ||||
} | } | ||||
sidebarMain={ | sidebarMain={ | ||||
<RightSidebarStatic.SidebarContainer> | |||||
<RightSidebarStatic.SidebarMainContainer> | |||||
<DummyContent /> | <DummyContent /> | ||||
</RightSidebarStatic.SidebarContainer> | |||||
</RightSidebarStatic.SidebarMainContainer> | |||||
} | } | ||||
> | > | ||||
<RightSidebarStatic.ContentContainer> | <RightSidebarStatic.ContentContainer> | ||||
@@ -250,6 +250,11 @@ | |||||
pascal-case "3.1.1" | pascal-case "3.1.1" | ||||
react-feather "2.0.3" | 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": | "@types/hast@^2.0.0": | ||||
version "2.3.1" | version "2.3.1" | ||||
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9" | resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9" | ||||