diff --git a/public/global.css b/public/global.css
index c7474ab..457484a 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,5 +1,6 @@
body {
margin: 0;
+ /* overflow: overlay; */
}
h1 {
diff --git a/src/components/molecules/Brand/index.tsx b/src/components/molecules/Brand/index.tsx
new file mode 100644
index 0000000..2cb292c
--- /dev/null
+++ b/src/components/molecules/Brand/index.tsx
@@ -0,0 +1,41 @@
+import Link from '../Link'
+import styled from 'styled-components'
+
+const BrandBase = styled(Link)({
+ display: 'block',
+ textDecoration: 'none',
+ fontSize: '1.5rem',
+ fontWeight: 'bold',
+ fontStretch: '75%',
+ textTransform: 'uppercase',
+ width: '2rem',
+ textAlign: 'center',
+ '@media (min-width: 720px)': {
+ width: '8rem',
+ textAlign: 'left',
+ },
+})
+
+const Hide = styled('span')({
+ display: 'none',
+ '@media (min-width: 720px)': {
+ display: 'inline',
+ },
+})
+
+const Brand = () => {
+ return (
+
+ B
+
+ rand
+
+
+ )
+}
+
+export default Brand
diff --git a/src/components/molecules/Link/index.tsx b/src/components/molecules/Link/index.tsx
index b85b4f1..af71b6a 100644
--- a/src/components/molecules/Link/index.tsx
+++ b/src/components/molecules/Link/index.tsx
@@ -1,6 +1,25 @@
+import * as React from 'react'
import NextLink from 'next/link'
+import {UrlObject} from 'url';
-const Link = ({ href, as, prefetch, replace, shallow, component: Component = 'a', ...etcProps }) => {
+type Props = {
+ 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
+}) => {
return (
= ({
- query,
- children,
- brand,
- onSearch,
- searchLabel,
- searchName,
- searchHint,
- linkComponent,
- menuLinkLabel,
- menuLink,
- userLink,
- userLinkLabel,
-}) => {
- return (
- <>
-
-
- {children}
-
- >
- )
-}
-
-export default BasicLayout
diff --git a/src/components/organisms/layouts/LeftSidebar/index.tsx b/src/components/organisms/layouts/LeftSidebar/index.tsx
deleted file mode 100644
index 1bc699e..0000000
--- a/src/components/organisms/layouts/LeftSidebar/index.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import * as React from 'react';
-import styled, {createGlobalStyle} from 'styled-components';
-import TopBar from '../../widgets/TopBar';
-import {UrlObject} from 'url';
-
-const DisableScrolling = createGlobalStyle({
- 'body': {
- overflow: 'hidden',
- '@media (min-width: 1080px)': {
- overflow: 'auto',
- },
- },
-})
-
-const Main = styled('main')({
- boxSizing: 'border-box',
- '@media (min-width: 1080px)': {
- paddingLeft: 'calc(50% - var(--width-base, 360px) * 0.5)',
- },
-})
-
-const SidebarOverflow = styled('div')({
- width: '100%',
- height: '100%',
- overflow: 'auto',
- scrollbarWidth: 'none',
- '::-webkit-scrollbar': {
- display: 'none',
- },
-})
-
-const LeftSidebar = styled('div')({
- '--width-base': '360px',
- '--size-menu': '4rem',
- boxSizing: 'border-box',
- position: 'fixed',
- top: 0,
- left: '-100%',
- width: '100%',
- height: '100%',
- backgroundColor: 'var(--color-bg, white)',
- overflow: 'hidden',
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '@media (min-width: 1080px)': {
- width: 'calc(50% - var(--width-base, 360px) * 0.5)',
- left: 0,
- },
-})
-
-const OpenLeftSidebar = styled(LeftSidebar)({
- left: 0,
-})
-
-export const SidebarContainer = styled('div')({
- margin: '0 auto',
- padding: '0 1rem',
- boxSizing: 'border-box',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- '@media (min-width: 1080px)': {
- width: 'var(--width-base, 360px)',
- marginRight: 0,
- },
-})
-
-export const Container = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
-
- width: '100%',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- marginRight: 'auto',
- marginLeft: 'auto',
- '@media (min-width: 1080px)': {
- marginLeft: 0,
- },
-})
-
-type Props = {
- query?: string,
- onSearch?: React.FormEventHandler,
- searchLabel?: string,
- searchName?: string,
- searchHint?: string,
- brand?: React.ReactNode,
- linkComponent?: React.ElementType,
- sidebarMain?: React.ReactChild,
- sidebarMainOpen?: boolean,
- menuLink?: UrlObject,
- userLink?: UrlObject,
- menuLinkLabel?: string,
- userLinkLabel?: string,
-}
-
-const LeftSidebarLayout: React.FC = ({
- query,
- sidebarMain,
- sidebarMainOpen,
- children,
- onSearch,
- searchLabel,
- searchName,
- searchHint,
- brand,
- linkComponent,
- menuLinkLabel,
- menuLink,
- userLink,
- userLinkLabel,
-}) => {
- const LeftSidebarComponent = sidebarMainOpen ? OpenLeftSidebar : LeftSidebar
-
- return (
- <>
- {
- sidebarMainOpen
- && (
-
- )
- }
-
-
-
- {sidebarMain}
-
-
-
- {children}
-
- >
- )
-}
-
-export default LeftSidebarLayout
diff --git a/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx b/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx
deleted file mode 100644
index d4680b2..0000000
--- a/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx
+++ /dev/null
@@ -1,532 +0,0 @@
-import * as React from 'react';
-import * as T from '@tesseract-design/react-common';
-import styled, { createGlobalStyle } from 'styled-components';
-import TopBar from '../../widgets/TopBar';
-import {UrlObject} from 'url';
-
-const DisableScrolling = createGlobalStyle({
- 'body': {
- overflow: 'hidden',
- '@media (min-width: 1080px)': {
- overflow: 'auto',
- },
- },
-})
-
-const Wrapper = styled('div')({
- '--width-base': '360px',
- '--size-menu': '4rem',
- '--height-topbar': '4rem',
-})
-
-const Main = styled('main')({
- boxSizing: 'border-box',
- paddingBottom: 'var(--size-menu, 4rem)',
- '@media (min-width: 1080px)': {
- paddingLeft: 'calc(50% - var(--width-base, 360px) * 0.5)',
- paddingBottom: 0,
- },
-})
-
-const LeftSidebar = styled('div')({
- boxSizing: 'border-box',
- backgroundColor: 'var(--color-bg, white)',
- overflow: 'hidden',
- display: 'contents',
- left: 'calc(var(--width-base, 360px) * -1)',
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '@media (min-width: 1080px)': {
- position: 'fixed',
- top: 0,
- left: 0,
- width: 'calc(50% - var(--width-base, 360px) * 0.5)',
- height: '100%',
- display: 'block',
- },
-})
-
-const SidebarMain = styled('div')({
- scrollbarWidth: 'none',
- backgroundColor: 'var(--color-bg, white)',
- boxSizing: 'border-box',
- position: 'fixed',
- top: 0,
- right: '100%',
- width: '100%',
- height: '100%',
- overflow: 'auto',
- paddingTop: 'inherit',
- paddingBottom: 'var(--size-menu, 4rem)',
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '::-webkit-scrollbar': {
- display: 'none',
- },
- '@media (min-width: 1080px)': {
- position: 'absolute',
- right: 0,
- width: 'calc(var(--width-base, 360px) - var(--size-menu, 4rem))',
- marginLeft: 'auto',
- paddingBottom: 0,
- },
-})
-
-const OpenSidebarMain = styled(SidebarMain)({
- right: 0,
-})
-
-const SidebarMenu = styled('div')({
- boxSizing: 'border-box',
- scrollbarWidth: 'none',
- '::-webkit-scrollbar': {
- display: 'none',
- },
- position: 'fixed',
- bottom: 0,
- left: 0,
- width: '100%',
- height: 'var(--size-menu, 4rem)',
- zIndex: 1,
- backgroundColor: 'var(--color-bg, white)',
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '@media (min-width: 1080px)': {
- top: 0,
- marginLeft: 'auto',
- position: 'absolute',
- height: '100%',
- paddingTop: 'inherit',
- overflow: 'auto',
- zIndex: 'auto',
- },
-})
-
-const SidebarMenuSize = styled('div')({
- display: 'flex',
- width: '100%',
- height: '100%',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- margin: '0 auto',
- '@media (min-width: 1080px)': {
- maxWidth: 'none',
- marginRight: 0,
- flexDirection: 'column',
- justifyContent: 'space-between',
- alignItems: 'flex-end',
- },
-})
-
-const SidebarMenuGroup = styled('div')({
- display: 'contents',
- '@media (min-width: 1080px)': {
- width: '100%',
- display: 'block',
- },
-})
-
-const MoreItems = styled('div')({
- position: 'fixed',
- top: 0,
- left: '-100%',
- width: '100%',
- height: '100%',
- paddingTop: 'var(--height-topbar, 4rem)',
- paddingBottom: 'var(--size-menu, 4rem)',
- backgroundColor: 'var(--color-bg, white)',
- zIndex: -1,
- boxSizing: 'border-box',
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '@media (min-width: 1080px)': {
- display: 'contents',
- },
-})
-
-const OpenMoreItems = styled(MoreItems)({
- left: 0,
-})
-
-const MoreItemsScroll = styled('div')({
- width: '100%',
- height: '100%',
- overflow: 'auto',
- '@media (min-width: 1080px)': {
- display: 'contents',
- },
-})
-
-const MorePrimarySidebarMenuGroup = styled(SidebarMenuGroup)({
- '@media (min-width: 1080px)': {
- flex: 'auto',
- },
-})
-
-const MoreSecondarySidebarMenuGroup = styled(SidebarMenuGroup)({
- '@media (min-width: 1080px)': {
- order: 4,
- },
-})
-
-const SidebarMenuItem = styled('span')({
- width: 0,
- flex: 'auto',
- height: 'var(--size-menu, 4rem)',
- '> *': {
- height: '100%',
- },
- '@media (min-width: 1080px)': {
- width: 'auto !important',
- flex: '0 1 auto',
- '> *': {
- height: 'auto',
- }
- },
-})
-
-const MoreSidebarMenuItem = styled('span')({
- display: 'block',
- height: 'var(--size-menu, 4rem)',
- '> *': {
- height: '100%',
- },
- '@media (min-width: 1080px)': {
- width: 'auto !important',
- flex: '0 1 auto',
- },
-})
-
-const MoreToggleSidebarMenuItem = styled(SidebarMenuItem)({
- '@media (min-width: 1080px)': {
- display: 'none',
- },
-})
-
-const SidebarMenuItemIcon = styled('span')({
- display: 'block',
- '@media (min-width: 1080px)': {
- width: 'var(--size-menu, 4rem)',
- height: 'var(--size-menu, 4rem)',
- display: 'grid',
- placeContent: 'center',
- },
-})
-
-const MoreSidebarMenuItemIcon = styled('span')({
- marginRight: '1rem',
- display: 'block',
- '@media (min-width: 1080px)': {
- width: 'var(--size-menu, 4rem)',
- height: 'var(--size-menu, 4rem)',
- display: 'grid',
- placeContent: 'center',
- marginRight: 0,
- },
-})
-
-const SidebarMenuContainer = styled('span')({
- boxSizing: 'border-box',
- display: 'grid',
- placeContent: 'center',
- width: '100%',
- textAlign: 'center',
- '@media (min-width: 1080px)': {
- display: 'flex',
- justifyContent: 'flex-start',
- alignItems: 'center',
- width: 'var(--width-base, 360px)',
- marginLeft: 'auto',
- paddingRight: '1rem',
- textAlign: 'left',
- boxSizing: 'border-box',
- },
-})
-
-const MoreSidebarMenuContainer = styled('div')({
- display: 'flex',
- justifyContent: 'flex-start',
- alignItems: 'center',
- width: 'calc(var(--width-base, 360px) * 2)',
- margin: '0 auto',
- padding: '0 1rem',
- textAlign: 'left',
- boxSizing: 'border-box',
- '@media (min-width: 1080px)': {
- marginRight: 0,
- width: 'var(--width-base, 360px)',
- paddingLeft: 0,
- },
-})
-
-export const Container = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
-
- width: '100%',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- marginRight: 'auto',
- marginLeft: 'auto',
- '@media (min-width: 1080px)': {
- marginLeft: 0,
- },
-})
-
-export const SidebarMainContainer = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
- width: '100%',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- margin: '0 auto',
- '@media (min-width: 1080px)': {
- maxWidth: 'none',
- },
-})
-
-type MenuItem = {
- id: string,
- label: string,
- url: UrlObject,
- secondary?: boolean,
- icon: React.ReactChild,
-}
-
-type Props = {
- query?: string,
- onSearch?: React.FormEventHandler,
- searchLabel?: string,
- searchName?: string,
- searchHint?: string,
- brand?: React.ReactNode,
- linkComponent?: React.ElementType,
- sidebarMain?: React.ReactChild,
- sidebarMenuItems?: MenuItem[],
- sidebarMainOpen?: boolean,
- menuLink?: UrlObject,
- userLink?: UrlObject,
- menuLinkLabel?: string,
- userLinkLabel?: string,
- moreItemsOpen?: boolean,
-}
-
-const LeftSidebarWithMenuLayout: React.FC = ({
- query,
- children,
- sidebarMain,
- sidebarMenuItems,
- sidebarMainOpen,
- brand,
- onSearch,
- searchLabel,
- searchName,
- searchHint,
- linkComponent: LinkComponent = 'a',
- menuLinkLabel,
- menuLink,
- userLink,
- userLinkLabel,
- moreItemsOpen,
-}) => {
- const SidebarMainComponent = sidebarMainOpen ? OpenSidebarMain : SidebarMain
- const MoreItemsComponent = moreItemsOpen ? OpenMoreItems : MoreItems
- const primarySidebarMenuItems = sidebarMenuItems.filter(s => !s.secondary)
- const secondarySidebarMenuItems = sidebarMenuItems.filter(s => s.secondary)
-
-
- const visibleSecondarySidebarMenuItems = secondarySidebarMenuItems.slice(0, 1)
- const moreSecondarySidebarMenuItems = secondarySidebarMenuItems.slice(1)
- const visiblePrimarySidebarMenuItems = (
- visibleSecondarySidebarMenuItems.length === 1
- ? primarySidebarMenuItems.slice(0, 3)
- : primarySidebarMenuItems.slice(0, 4)
- )
- const morePrimarySidebarMenuItems = (
- visibleSecondarySidebarMenuItems.length === 1
- ? primarySidebarMenuItems.slice(3)
- : primarySidebarMenuItems.slice(4)
- )
-
- return (
- <>
- {
- (sidebarMainOpen || moreItemsOpen)
- && (
-
- )
- }
-
-
-
-
-
-
- {visiblePrimarySidebarMenuItems.map((item) => {
- return (
-
-
-
-
- {item.icon}
-
- {item.label}
-
-
-
- )
- })}
-
-
-
-
- {morePrimarySidebarMenuItems.map((item) => {
- return (
-
-
-
-
- {item.icon}
-
- {item.label}
-
-
-
- )
- })}
-
-
- {moreSecondarySidebarMenuItems.map((item) => {
- return (
-
-
-
-
- {item.icon}
-
- {item.label}
-
-
-
- )
- })}
-
-
-
-
-
-
-
-
-
-
- More
-
-
-
-
- {
- visibleSecondarySidebarMenuItems.length > 0
- && (
-
- {visibleSecondarySidebarMenuItems.map((item, i) => (
-
-
-
-
- {item.icon}
-
- {item.label}
-
-
-
- ))}
-
- )
- }
-
-
-
- {sidebarMain}
-
-
-
- {children}
-
-
- >
- )
-}
-
-export default LeftSidebarWithMenuLayout
diff --git a/src/components/organisms/layouts/RightSidebar/index.tsx b/src/components/organisms/layouts/RightSidebar/index.tsx
deleted file mode 100644
index f2faf9b..0000000
--- a/src/components/organisms/layouts/RightSidebar/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-import TopBar from '../../widgets/TopBar';
-import {UrlObject} from 'url';
-
-const Main = styled('main')({
- boxSizing: 'border-box',
- '@media (min-width: 1080px)': {
- paddingRight: 'calc(50% - var(--width-base, 360px) * 0.5)',
- },
-})
-
-const RightSidebar = styled('div')({
- '--width-base': '360px',
- boxSizing: 'border-box',
- backgroundColor: 'var(--color-bg, white)',
- // prevent collapse of margin
- '::after': {
- content: "''",
- display: 'block',
- paddingBottom: 1,
- marginTop: -1,
- boxSizing: 'border-box',
- },
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '@media (min-width: 1080px)': {
- position: 'absolute',
- top: 0,
- right: 0,
- width: 'calc(50% - var(--width-base, 360px) * 0.5)',
- height: '100%',
- },
-})
-
-export const SidebarContainer = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
- width: '100%',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- margin: '0 auto',
- '@media (min-width: 1080px)': {
- width: 'var(--width-base, 360px)',
- marginLeft: 0,
- },
-})
-
-export const Container = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
- width: '100%',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- margin: '0 auto',
- '@media (min-width: 1080px)': {
- marginRight: 0,
- },
-})
-
-type Props = {
- query?: string,
- onSearch?: React.FormEventHandler,
- searchLabel?: string,
- searchName?: string,
- searchHint?: string,
- brand?: React.ReactNode,
- linkComponent?: React.ElementType,
- sidebarMain?: React.ReactChild,
- menuLink: UrlObject,
- userLink: UrlObject,
- menuLinkLabel?: string,
- userLinkLabel?: string,
-}
-
-const RightSidebarLayout: React.FC = ({
- query,
- sidebarMain,
- children,
- brand,
- linkComponent,
- searchHint,
- searchName,
- searchLabel,
- onSearch,
- menuLinkLabel,
- menuLink,
- userLink,
- userLinkLabel,
-}) => {
- return (
- <>
-
-
- {children}
-
-
- {sidebarMain}
-
- >
- )
-}
-
-export default RightSidebarLayout
diff --git a/src/components/organisms/widgets/TopBar/index.tsx b/src/components/organisms/widgets/TopBar/index.tsx
deleted file mode 100644
index b2abeec..0000000
--- a/src/components/organisms/widgets/TopBar/index.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import * as React from 'react'
-import styled from 'styled-components'
-import * as T from '@tesseract-design/react-common'
-import {UrlObject} from 'url';
-
-const Base = styled('div')({
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100%',
- height: 'var(--height-topbar, 4rem)',
- backgroundColor: 'var(--color-bg, white)',
- zIndex: 2,
- '@media (prefers-color-scheme: dark)': {
- backgroundColor: 'var(--color-bg, black)',
- },
- '~ *': {
- paddingTop: 'var(--height-topbar, 4rem)',
- },
- '~ main ~ *': {
- paddingTop: 0,
- },
- '@media (min-width: 1080px)': {
- '~ main ~ *': {
- paddingTop: 'var(--height-topbar, 4rem)',
- },
- },
-})
-
-const Container = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
- margin: '0 auto',
- maxWidth: 'calc(var(--width-base, 360px) * 2)',
- width: '100%',
- height: '100%',
- display: 'flex',
- alignItems: 'center',
-})
-
-const WideContainer = styled(Container)({
- '@media (min-width: 1080px)': {
- maxWidth: 'calc(var(--width-base, 360px) * 3)',
- },
-})
-
-const BrandContainer = styled('div')({
- width: '6rem',
- '@media (min-width: 720px)': {
- width: '8rem',
- },
-})
-
-const SearchContainer = styled('form')({
- flex: 'auto',
- padding: '0 1rem',
- boxSizing: 'border-box',
- ':first-child': {
- paddingLeft: 0,
- },
-})
-
-const UserContainer = styled('div')({
- textAlign: 'right',
- height: '100%',
- whiteSpace: 'nowrap',
- '@media (min-width: 720px)': {
- minWidth: '8rem',
- },
-})
-
-const MenuUserLinkContainer = styled('span')({
- '@media (min-width: 1080px)': {
- position: 'absolute',
- left: -999999,
- },
-})
-
-type Props = {
- query?: string,
- onSearch?: React.FormEventHandler,
- searchLabel?: string,
- searchName?: string,
- searchHint?: string,
- wide?: boolean,
- withMenu?: boolean,
- brand?: React.ReactNode,
- linkComponent?: React.ElementType,
- menuLink: UrlObject,
- userLink: UrlObject,
- menuLinkLabel?: string,
- userLinkLabel?: string,
-}
-
-const TopBar: React.FC = ({
- query,
- onSearch,
- searchLabel = 'Search',
- searchName = 'q',
- searchHint = 'e.g. keywords, names…',
- wide,
- withMenu,
- brand,
- linkComponent: LinkComponent = 'a',
- menuLink,
- menuLinkLabel = 'Menu',
- userLink,
- userLinkLabel = 'Guest',
-}) => {
- const ContainerComponent = wide ? WideContainer : Container
- return (
-
-
- {
- Boolean(brand)
- && (
-
- {brand}
-
- )
- }
-
-
- }
- />
-
-
- {
- withMenu
- && (
-
-
-
-
-
- )
- }
-
-
-
-
-
-
- )
-}
-
-export default TopBar
diff --git a/src/components/templates/BasicLayout/index.tsx b/src/components/templates/BasicLayout/index.tsx
index a0590b6..1f667e9 100644
--- a/src/components/templates/BasicLayout/index.tsx
+++ b/src/components/templates/BasicLayout/index.tsx
@@ -1,39 +1,65 @@
import * as React from 'react'
-import Basic, { Container } from '../../organisms/layouts/Basic'
-import DummyContent from '../../molecules/DummyContent';
-import {UrlObject} from 'url';
+import * as T from '@tesseract-design/react-common'
+import { Basic } from '@tesseract-design/viewfinder'
+import Link from '../../molecules/Link'
+import DummyContent from '../../molecules/DummyContent'
+import Brand from '../../molecules/Brand'
type Props = {
query: string,
- linkComponent: React.ElementType,
- menuLink: UrlObject,
- userLink: UrlObject,
- menuLinkLabel: string,
userLinkLabel: string,
+ searchQueryKey: string,
+ searchLabel: string,
+ searchHint: string,
+ popupQueryKey: string,
+ userPopupQueryValue: string,
}
const BasicLayoutTemplate: React.FC = ({
query,
- linkComponent,
- menuLinkLabel,
- menuLink,
- userLink,
userLinkLabel,
+ searchQueryKey,
+ searchLabel,
+ searchHint,
+ popupQueryKey,
+ userPopupQueryValue,
}) => {
return (
-
+ }
+ topBarCenter={
+
+ }
+ userLink={
+
+
+
+ }
>
-
+
-
-
+
+
)
}
diff --git a/src/components/templates/Index/index.tsx b/src/components/templates/Index/index.tsx
index f1dbfd5..2bda991 100644
--- a/src/components/templates/Index/index.tsx
+++ b/src/components/templates/Index/index.tsx
@@ -1,8 +1,9 @@
import * as React from 'react'
import styled from 'styled-components'
-import Basic, { Container } from '../../organisms/layouts/Basic'
-import Link from '../../molecules/Link';
-import {UrlObject} from 'url';
+import * as T from '@tesseract-design/react-common'
+import { Basic } from '@tesseract-design/viewfinder'
+import Link from '../../molecules/Link'
+import Brand from '../../molecules/Brand'
const LinkContainer = styled('nav')({
margin: '1rem 0',
@@ -62,32 +63,56 @@ const StyledLink = styled(Link)({
type Props = {
query: string,
- linkComponent: React.ElementType,
- menuLink: UrlObject,
- userLink: UrlObject,
- menuLinkLabel: string,
userLinkLabel: string,
+ searchQueryKey: string,
+ searchLabel: string,
+ searchHint: string,
+ popupQueryKey: string,
+ userPopupQueryValue: string,
}
const IndexTemplate: React.FC = ({
query,
- linkComponent,
- menuLinkLabel,
- menuLink,
- userLink,
userLinkLabel,
+ searchQueryKey,
+ searchLabel,
+ searchHint,
+ popupQueryKey,
+ userPopupQueryValue,
}) => {
return (
-
+ }
+ topBarCenter={
+
+ }
+ userLink={
+
+
+
+ }
>
-
+
Welcome
@@ -110,13 +135,13 @@ const IndexTemplate: React.FC = ({
- Right Sidebar
+ Right Sidebar (static)
@@ -139,7 +164,7 @@ const IndexTemplate: React.FC = ({
pathname: '/layouts/left-sidebar/with-menu'
}}
>
- Left Sidebar (w/ menu)
+ Left Sidebar (with menu)
= ({
-
-
+
+
)
}
diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx
index 8adf984..ffef600 100644
--- a/src/components/templates/LeftSidebarLayout/index.tsx
+++ b/src/components/templates/LeftSidebarLayout/index.tsx
@@ -1,47 +1,91 @@
import * as React from 'react'
-import LeftSidebarLayout, { SidebarContainer, Container } from '../../organisms/layouts/LeftSidebar';
-import DummyContent from '../../molecules/DummyContent';
-import {UrlObject} from 'url';
+import * as T from '@tesseract-design/react-common'
+import { LeftSidebar } from '@tesseract-design/viewfinder'
+import DummyContent from '../../molecules/DummyContent'
+import Link from '../../molecules/Link'
+import Brand from '../../molecules/Brand'
type Props = {
query: string,
- linkComponent: React.ElementType,
sidebarMainOpen: boolean,
- menuLink: UrlObject,
- userLink: UrlObject,
menuLinkLabel: string,
userLinkLabel: string,
+ searchQueryKey: string,
+ searchLabel: string,
+ searchHint: string,
+ popupQueryKey: string,
+ userPopupQueryValue: string,
+ sidebarQueryKey: string,
}
const LeftSidebarLayoutTemplate: React.FC = ({
query,
sidebarMainOpen,
- linkComponent,
menuLinkLabel,
- menuLink,
- userLink,
userLinkLabel,
+ searchQueryKey,
+ searchLabel,
+ searchHint,
+ popupQueryKey,
+ userPopupQueryValue,
+ sidebarQueryKey,
}) => {
return (
-
+ }
sidebarMainOpen={sidebarMainOpen}
- linkComponent={linkComponent}
- menuLink={menuLink}
- menuLinkLabel={menuLinkLabel}
- userLink={userLink}
- userLinkLabel={userLinkLabel}
+ topBarCenter={
+
+ }
+ menuLink={
+
+
+
+ }
+ userLink={
+
+
+
+ }
sidebarMain={
-
+
-
+
}
>
-
+
-
-
+
+
)
}
diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
index 7c303a8..9f0b45a 100644
--- a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
+++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx
@@ -1,151 +1,139 @@
import * as React from 'react'
-import * as T from '@tesseract-design/react-common';
-import LeftSidebarWithMenuLayout, {
- Container,
- SidebarMainContainer,
-} from '../../organisms/layouts/LeftSidebarWithMenu';
-import DummyContent from '../../molecules/DummyContent';
-import {UrlObject} from 'url';
+import * as T from '@tesseract-design/react-common'
+import { LeftSidebarWithMenu } from '@tesseract-design/viewfinder'
+import DummyContent from '../../molecules/DummyContent'
+import Link from '../../molecules/Link'
+import Brand from '../../molecules/Brand'
type Props = {
query: string,
- linkComponent: React.ElementType,
sidebarMainOpen: boolean,
- menuLink: UrlObject,
- userLink: UrlObject,
menuLinkLabel: string,
userLinkLabel: string,
moreItemsOpen: boolean,
+ searchQueryKey: string,
+ searchLabel: string,
+ searchHint: string,
+ popupQueryKey: string,
+ moreQueryKey: string,
+ sidebarQueryKey: string,
+ moreLinkLabel: string,
+ sidebarMenuItems: LeftSidebarWithMenu.MenuItem[],
+ userPopupQueryValue: string,
}
const LeftSidebarLayoutTemplate: React.FC = ({
query,
sidebarMainOpen,
- linkComponent,
menuLinkLabel,
- menuLink,
- userLink,
userLinkLabel,
moreItemsOpen,
+ searchQueryKey,
+ searchLabel,
+ searchHint,
+ popupQueryKey,
+ moreQueryKey,
+ sidebarQueryKey,
+ moreLinkLabel,
+ sidebarMenuItems,
+ userPopupQueryValue,
}) => {
return (
-
-
-
+
}
- menuLink={menuLink}
- menuLinkLabel={menuLinkLabel}
- userLink={userLink}
- userLinkLabel={userLinkLabel}
- sidebarMenuItems={
- [
- {
- id: '1',
- label: 'P1',
- url: {
- href: '/hello',
- },
- icon: (
-
- ),
- },
- {
- id: '2',
- label: 'P2',
- url: {
- href: '/hello',
- },
- icon: (
-
- ),
- },
- {
- id: '3',
- label: 'P3',
- url: {
- href: '/hello',
- },
- icon: (
-
- ),
- },
- {
- id: '100',
- label: 'P4',
- url: {
- href: '/hello',
- },
- icon: (
-
- ),
- },
- {
- id: '101',
- label: 'P5',
- url: {
- href: '/hello',
- },
- icon: (
-
- ),
- },
- {
- id: '4',
- label: 'S1',
- url: {
- href: '/hello',
+ topBarCenter={
+
+ }
+ menuLink={
+
- ),
- secondary: true,
- },
- {
- id: '5',
- label: 'S2',
- url: {
- href: '/hello',
+ }}
+ >
+
+
+ }
+ userLink={
+
- ),
- secondary: true,
+ }}
+ >
+
+
+ }
+ moreLinkMenuItem={{
+ label: moreLinkLabel,
+ url: {
+ query: {
+ [moreQueryKey]: '',
},
- ]
+ },
+ icon: (
+
+ ),
+ }}
+ moreItemsOpen={moreItemsOpen}
+ moreLinkComponent={({ url, icon, label, }) => (
+
+
+
+ {icon}
+
+ {label}
+
+
+ )}
+ linkComponent={({ url, icon, label, }) => (
+
+
+
+ {icon}
+
+ {label}
+
+
+ )}
+ sidebarMainOpen={sidebarMainOpen}
+ sidebarMain={
+
+
+
}
+ sidebarMenuItems={sidebarMenuItems}
>
-
+
-
-
+
+
)
}
diff --git a/src/components/templates/RightSidebarLayout/index.tsx b/src/components/templates/RightSidebarLayout/index.tsx
index e11113b..3fd36fb 100644
--- a/src/components/templates/RightSidebarLayout/index.tsx
+++ b/src/components/templates/RightSidebarLayout/index.tsx
@@ -1,44 +1,70 @@
import * as React from 'react'
-import RightSidebarLayout, { SidebarContainer, Container } from '../../organisms/layouts/RightSidebar';
-import DummyContent from '../../molecules/DummyContent';
-import {UrlObject} from 'url';
+import * as T from '@tesseract-design/react-common'
+import { RightSidebarStatic } from '@tesseract-design/viewfinder'
+import DummyContent from '../../molecules/DummyContent'
+import Link from '../../molecules/Link'
+import Brand from '../../molecules/Brand'
type Props = {
query: string,
- linkComponent: React.ElementType,
- menuLink: UrlObject,
- userLink: UrlObject,
- menuLinkLabel: string,
userLinkLabel: string,
+ searchQueryKey: string,
+ searchLabel: string,
+ searchHint: string,
+ popupQueryKey: string,
+ userPopupQueryValue: string,
}
const RightSidebarLayoutTemplate: React.FC = ({
query,
- linkComponent,
- menuLinkLabel,
- menuLink,
- userLink,
userLinkLabel,
+ searchQueryKey,
+ searchLabel,
+ searchHint,
+ popupQueryKey,
+ userPopupQueryValue,
}) => {
return (
-
+ }
+ topBarCenter={
+
+ }
+ userLink={
+
+
+
+ }
sidebarMain={
-
+
-
+
}
>
-
+
-
-
+
+
)
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ac90e09..d986265 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,7 @@
-import Head from 'next/head'
-import Link from '../components/molecules/Link';
-import Template from '../components/templates/Index';
-import {GetServerSideProps, NextPage} from 'next';
+import {GetServerSideProps, NextPage} from 'next'
+import {USER} from '../utilities/popups'
+import {QUERY, POPUP} from '../utilities/queryKeys'
+import Template from '../components/templates/Index'
type Props = {
query: string,
@@ -12,22 +12,13 @@ const Page: NextPage = ({
}) => {
return (
)
}
@@ -35,7 +26,7 @@ const Page: NextPage = ({
export default Page
export const getServerSideProps: GetServerSideProps = async (ctx) => {
- const { q: query = '', } = ctx.query
+ const { [QUERY]: query = '', } = ctx.query
return {
props: {
query,
diff --git a/src/pages/layouts/basic/index.tsx b/src/pages/layouts/basic/index.tsx
index f9753ef..d1c5fb9 100644
--- a/src/pages/layouts/basic/index.tsx
+++ b/src/pages/layouts/basic/index.tsx
@@ -1,6 +1,7 @@
import {GetServerSideProps, NextPage} from 'next'
import Template from '../../../components/templates/BasicLayout'
-import Link from '../../../components/molecules/Link';
+import {USER} from '../../../utilities/popups'
+import {POPUP, QUERY} from '../../../utilities/queryKeys'
type Props = {
query: string,
@@ -11,22 +12,13 @@ const Page: NextPage = ({
}) => {
return (
)
}
@@ -34,7 +26,7 @@ const Page: NextPage = ({
export default Page
export const getServerSideProps: GetServerSideProps = async (ctx) => {
- const { q: query = '', } = ctx.query
+ const { [QUERY]: query = '', } = ctx.query
return {
props: {
query,
diff --git a/src/pages/layouts/left-sidebar/index.tsx b/src/pages/layouts/left-sidebar/index.tsx
index 2cad17f..e939616 100644
--- a/src/pages/layouts/left-sidebar/index.tsx
+++ b/src/pages/layouts/left-sidebar/index.tsx
@@ -1,6 +1,7 @@
import {GetServerSideProps, NextPage} from 'next'
import Template from '../../../components/templates/LeftSidebarLayout'
-import Link from '../../../components/molecules/Link';
+import {POPUP, QUERY, SIDEBAR} from '../../../utilities/queryKeys'
+import {USER} from '../../../utilities/popups'
type Props = {
query: string,
@@ -15,21 +16,14 @@ const Page: NextPage = ({
)
}
@@ -37,7 +31,7 @@ const Page: NextPage = ({
export default Page
export const getServerSideProps: GetServerSideProps = async (ctx) => {
- const { q: query = '', } = ctx.query
+ const { [QUERY]: query = '', } = ctx.query
return {
props: {
query,
diff --git a/src/pages/layouts/left-sidebar/with-menu/index.tsx b/src/pages/layouts/left-sidebar/with-menu/index.tsx
index c9f027e..13fba76 100644
--- a/src/pages/layouts/left-sidebar/with-menu/index.tsx
+++ b/src/pages/layouts/left-sidebar/with-menu/index.tsx
@@ -1,6 +1,9 @@
+import * as React from 'react'
+import * as T from '@tesseract-design/react-common'
import {GetServerSideProps, NextPage} from 'next'
import Template from '../../../../components/templates/LeftSidebarWithMenuLayout'
-import Link from '../../../../components/molecules/Link';
+import {MORE, POPUP, QUERY, SIDEBAR} from '../../../../utilities/queryKeys'
+import {USER} from '../../../../utilities/popups'
type Props = {
query: string,
@@ -16,23 +19,113 @@ const Page: NextPage = ({
return (
+ ),
+ },
+ {
+ id: '2',
+ label: 'P2',
+ url: {
+ pathname: '/hello',
+ },
+ icon: (
+
+ ),
+ },
+ {
+ id: '3',
+ label: 'P3',
+ url: {
+ pathname: '/hello',
+ },
+ icon: (
+
+ ),
+ },
+ {
+ id: '100',
+ label: 'P4',
+ url: {
+ pathname: '/hello',
+ },
+ icon: (
+
+ ),
+ },
+ {
+ id: '101',
+ label: 'P5',
+ url: {
+ pathname: '/hello',
+ },
+ icon: (
+
+ ),
+ },
+ {
+ id: '4',
+ label: 'S1',
+ url: {
+ pathname: '/hello',
+ },
+ icon: (
+
+ ),
+ secondary: true,
+ },
+ {
+ id: '5',
+ label: 'S2',
+ url: {
+ pathname: '/hello',
+ },
+ icon: (
+
+ ),
+ secondary: true,
+ },
+ ]}
/>
)
}
diff --git a/src/pages/layouts/right-sidebar/index.tsx b/src/pages/layouts/right-sidebar-static/index.tsx
similarity index 58%
rename from src/pages/layouts/right-sidebar/index.tsx
rename to src/pages/layouts/right-sidebar-static/index.tsx
index a2940c5..1127b33 100644
--- a/src/pages/layouts/right-sidebar/index.tsx
+++ b/src/pages/layouts/right-sidebar-static/index.tsx
@@ -1,6 +1,7 @@
import {GetServerSideProps, NextPage} from 'next'
import Template from '../../../components/templates/RightSidebarLayout'
-import Link from '../../../components/molecules/Link';
+import {POPUP, QUERY} from '../../../utilities/queryKeys'
+import {USER} from '../../../utilities/popups'
type Props = {
query: string,
@@ -11,22 +12,13 @@ const Page: NextPage = ({
}) => {
return (
)
}
@@ -34,7 +26,7 @@ const Page: NextPage = ({
export default Page
export const getServerSideProps: GetServerSideProps = async (ctx) => {
- const { q: query = '', } = ctx.query
+ const { [QUERY]: query = '', } = ctx.query
return {
props: {
query,
diff --git a/src/utilities/popups.ts b/src/utilities/popups.ts
new file mode 100644
index 0000000..686cac6
--- /dev/null
+++ b/src/utilities/popups.ts
@@ -0,0 +1 @@
+export const USER = 'user'
diff --git a/src/utilities/queryKeys.ts b/src/utilities/queryKeys.ts
new file mode 100644
index 0000000..724b102
--- /dev/null
+++ b/src/utilities/queryKeys.ts
@@ -0,0 +1,7 @@
+export const QUERY = 'q'
+
+export const POPUP = 'popup'
+
+export const SIDEBAR = 'sidebar'
+
+export const MORE = 'more'