4
0
forked from crowetic/commerce

fix conflicts

This commit is contained in:
Franco Arza 2020-10-22 10:56:36 -03:00
commit 986cf74517
11 changed files with 252 additions and 99 deletions

View File

@ -3,7 +3,6 @@ import { FC } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { Logo } from '@components/ui' import { Logo } from '@components/ui'
import { Searchbar, UserNav } from '@components/core' import { Searchbar, UserNav } from '@components/core'
interface Props { interface Props {
className?: string className?: string
} }

View File

@ -0,0 +1,29 @@
.dropdownMenu {
@apply fixed top-0 right-0 z-20 w-full h-full;
@screen lg {
@apply absolute right-0 w-screen;
max-width: 200px;
}
& .dropdownMenuContainer {
@apply flex-col py-6 bg-primary h-full justify-around;
@screen lg {
@apply border border-accents-1 shadow-lg py-2 h-auto;
}
}
& .link {
@apply flex space-x-2 cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
text-transform: capitalize;
& .icons svg {
@apply w-6 h-6;
}
}
&.off {
@apply hidden;
}
}

View File

@ -0,0 +1,75 @@
import { useTheme } from 'next-themes'
import s from './DropdownMenu.module.css'
import { FC } from 'react'
import { FocusScope } from '@react-aria/focus'
import {
useOverlay,
DismissButton,
usePreventScroll,
} from '@react-aria/overlays'
import Link from 'next/link'
import cn from 'classnames'
import { Moon, Sun } from '@components/icon'
interface DropdownMenuProps {
onClose: () => void
innerRef: React.MutableRefObject<HTMLInputElement>
}
const DropdownMenu: FC<DropdownMenuProps> = ({
onClose,
children,
innerRef,
...props
}) => {
const { theme, setTheme } = useTheme()
let { overlayProps } = useOverlay(
{
isDismissable: true,
onClose: onClose,
isOpen: true,
},
innerRef
)
usePreventScroll()
return (
<FocusScope restoreFocus>
<div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
{/* Needed placeholder for User Interation*/}
<div className="flex justify-end">
<span onClick={onClose} className="bg-transparent h-12 w-12" />
</div>
<nav className={s.dropdownMenuContainer}>
<Link href="#">
<a className={s.link}>My Purchases</a>
</Link>
<Link href="#">
<a className={s.link}>My Account</a>
</Link>
<a
className={s.link}
onClick={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
>
<span>
Theme: <strong>{theme}</strong>{' '}
</span>
<span className={s.icons}>
{theme === 'dark' ? <Moon /> : <Sun />}
</span>
</a>
<Link href="#">
<a className={cn(s.link, 'border-t border-accents-2 mt-4')}>
Logout
</a>
</Link>
</nav>
</div>
</FocusScope>
)
}
export default DropdownMenu

View File

@ -2,30 +2,25 @@
@apply relative; @apply relative;
} }
.mainContainer {
}
.list { .list {
@apply flex flex-row items-center h-full; @apply flex flex-row items-center justify-items-end h-full;
} }
.item { .item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center; @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
&:hover { &:hover {
@apply text-accents-8; @apply text-accents-8 transition ease-in-out duration-100 transform scale-110;
}
&.heart:hover svg {
fill: var(--accents-9);
} }
&:last-child { &:last-child {
@apply mr-0; @apply mr-0;
} }
} }
.dropdownMenu {
@apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1 bg-primary;
max-width: 160px;
&.dropdownMenuContainer {
@apply shadow-lg overflow-hidden relative grid py-2;
}
& .link {
@apply px-6 py-3 flex items-center space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
}
}

View File

@ -1,82 +1,68 @@
import { FC, useState } from 'react' import Link from 'next/link'
import cn from 'classnames' import cn from 'classnames'
import useCart from '@lib/bigcommerce/cart/use-cart' import s from './UserNav.module.css'
import { Avatar, Toggle } from '@components/core' import { FC, useRef } from 'react'
import { Avatar } from '@components/core'
import { Heart, Bag } from '@components/icon' import { Heart, Bag } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import s from './UserNav.module.css' import DropdownMenu from './DropdownMenu'
import { useTheme } from 'next-themes'
import Link from 'next/link' import useCart from '@lib/bigcommerce/cart/use-cart'
interface Props { interface Props {
className?: string className?: string
} }
const countItem = (count: number, item: any) => count + item.quantity const countItem = (count: number, item: any) => count + item.quantity
const countItems = (count: number, items: any[]) => const countItems = (count: number, items: any[]) =>
items.reduce(countItem, count) items.reduce(countItem, count)
const UserNav: FC<Props> = ({ className }) => { const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { data } = useCart() const { data } = useCart()
const { theme, setTheme } = useTheme() const {
const [displayDropdown, setDisplayDropdown] = useState(false) openSidebar,
const { openSidebar, closeSidebar, displaySidebar } = useUI() closeSidebar,
displaySidebar,
displayDropdown,
openDropdown,
closeDropdown,
} = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
return ( return (
<nav className={cn(s.root, className)}> <nav className={cn(s.root, className)}>
<ul className={s.list}> <div className={s.mainContainer}>
<li <ul className={s.list}>
className={s.item} <li
onClick={() => (displaySidebar ? closeSidebar() : openSidebar())} className={s.item}
> onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
<Bag /> >
{itemsCount > 0 && ( <Bag />
<span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs"> {itemsCount > 0 && (
{itemsCount} <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
</span> {itemsCount}
)} </span>
</li> )}
<Link href="/wishlist">
<li className={s.item}>
<Heart />
</li> </li>
</Link> <Link href="/wishlist">
<li <li className={cn(s.item, s.heart)}>
className={s.item} <Heart />
onClick={() => { </li>
setDisplayDropdown((i) => !i) </Link>
}} <li
> className={s.item}
<Avatar /> onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
</li> >
</ul> <Avatar />
</li>
</ul>
</div>
{displayDropdown && ( {displayDropdown && (
<div className={s.dropdownMenu}> <DropdownMenu onClose={closeDropdown} innerRef={ref} />
<nav className={s.dropdownMenuContainer}>
<Link href="#">
<a className={s.link}>My Purchases</a>
</Link>
<Link href="#">
<a className={s.link}>My Account</a>
</Link>
<span className="inline-flex items-start px-6 py-2">
<span className="capitalize inline-block mr-2 text-base leading-6 font-medium text-gray-900">
Theme
</span>
<Toggle
checked={theme === 'dark'}
onChange={() =>
theme === 'dark' ? setTheme('light') : setTheme('dark')
}
/>
</span>
<Link href="#">
<a className={cn(s.link, 'mt-4')}>Logout</a>
</Link>
</nav>
</div>
)} )}
</nav> </nav>
) )

19
components/icon/Moon.tsx Normal file
View File

@ -0,0 +1,19 @@
const Moon = ({ ...props }) => {
return (
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
shape-rendering="geometricPrecision"
>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
)
}
export default Moon

27
components/icon/Sun.tsx Normal file
View File

@ -0,0 +1,27 @@
const Sun = ({ ...props }) => {
return (
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"
shape-rendering="geometricPrecision"
>
<circle cx="12" cy="12" r="5" />
<path d="M12 1v2" />
<path d="M12 21v2" />
<path d="M4.22 4.22l1.42 1.42" />
<path d="M18.36 18.36l1.42 1.42" />
<path d="M1 12h2" />
<path d="M21 12h2" />
<path d="M4.22 19.78l1.42-1.42" />
<path d="M18.36 5.64l1.42-1.42" />
</svg>
)
}
export default Sun

View File

@ -6,3 +6,5 @@ export { default as ArrowLeft } from './ArrowLeft'
export { default as Plus } from './Plus' export { default as Plus } from './Plus'
export { default as Minus } from './Minus' export { default as Minus } from './Minus'
export { default as Check } from './Check' export { default as Check } from './Check'
export { default as Sun } from './Sun'
export { default as Moon } from './Moon'

View File

@ -34,7 +34,7 @@
} }
.nameBox { .nameBox {
@apply absolute top-6 left-0 z-50; @apply absolute top-6 left-0 z-10;
& .name { & .name {
@apply px-6 py-2 bg-primary text-primary font-bold; @apply px-6 py-2 bg-primary text-primary font-bold;

View File

@ -8,7 +8,7 @@ interface Props {
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { const Container: FC<Props> = ({ children, className, el = 'div' }) => {
const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className) const rootClassName = cn('mx-auto max-w-7xl px-6', className)
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement

View File

@ -4,10 +4,12 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
export interface State { export interface State {
displaySidebar: boolean displaySidebar: boolean
displayDropdown: boolean
} }
const initialState = { const initialState = {
displaySidebar: false, displaySidebar: false,
displayDropdown: false,
} }
type Action = type Action =
@ -17,21 +19,61 @@ type Action =
| { | {
type: 'CLOSE_SIDEBAR' type: 'CLOSE_SIDEBAR'
} }
| {
type: 'OPEN_DROPDOWN'
}
| {
type: 'CLOSE_DROPDOWN'
}
export const UIContext = React.createContext<State | any>(initialState) export const UIContext = React.createContext<State | any>(initialState)
UIContext.displayName = 'UIContext' UIContext.displayName = 'UIContext'
function uiReducer(state: State, action: Action) {
switch (action.type) {
case 'OPEN_SIDEBAR': {
return {
...state,
displaySidebar: true,
}
}
case 'CLOSE_SIDEBAR': {
return {
...state,
displaySidebar: false,
}
}
case 'OPEN_DROPDOWN': {
return {
...state,
displayDropdown: true,
}
}
case 'CLOSE_DROPDOWN': {
return {
...state,
displayDropdown: false,
}
}
}
}
export const UIProvider: FC = (props) => { export const UIProvider: FC = (props) => {
const [state, dispatch] = React.useReducer(uiReducer, initialState) const [state, dispatch] = React.useReducer(uiReducer, initialState)
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' }) const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' }) const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
const value = { const value = {
...state, ...state,
openSidebar, openSidebar,
closeSidebar, closeSidebar,
openDropdown,
closeDropdown,
} }
return <UIContext.Provider value={value} {...props} /> return <UIContext.Provider value={value} {...props} />
@ -45,27 +87,6 @@ export const useUI = () => {
return context return context
} }
function uiReducer(state: State, action: Action) {
switch (action.type) {
case 'OPEN_SIDEBAR': {
return !state.displaySidebar
? {
...state,
displaySidebar: true,
}
: state
}
case 'CLOSE_SIDEBAR': {
return state.displaySidebar
? {
...state,
displaySidebar: false,
}
: state
}
}
}
export const ManagedUIContext: FC = ({ children }) => ( export const ManagedUIContext: FC = ({ children }) => (
<UIProvider> <UIProvider>
<ThemeProvider> <ThemeProvider>