4
0
forked from crowetic/commerce

Merge branch 'master' of github.com:okbel/e-comm-example

This commit is contained in:
Belen Curcio 2020-10-23 11:48:14 -03:00
commit 62277666b1
22 changed files with 227 additions and 103 deletions

View File

@ -11,6 +11,8 @@
--text-secondary: white; --text-secondary: white;
--hover: rgba(0, 0, 0, 0.075); --hover: rgba(0, 0, 0, 0.075);
--hover-1: rgba(0, 0, 0, 0.15);
--hover-2: rgba(0, 0, 0, 0.25);
--cyan: #22b8cf; --cyan: #22b8cf;
--green: #37b679; --green: #37b679;
@ -41,6 +43,8 @@
--secondary: white; --secondary: white;
--secondary-2: #f1f3f5; --secondary-2: #f1f3f5;
--hover: rgba(255, 255, 255, 0.075); --hover: rgba(255, 255, 255, 0.075);
--hover-1: rgba(255, 255, 255, 0.15);
--hover-2: rgba(255, 255, 255, 0.25);
--selection: var(--purple); --selection: var(--purple);
--text-base: white; --text-base: white;

View File

@ -1,3 +1,3 @@
.fit { .fit {
min-height: calc(100vh - 88px - 41px); min-height: calc(100vh - 88px);
} }

View File

@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
return ( return (
<div <div
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-100" className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-150"
style={{ style={{
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`, backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}} }}

View File

@ -21,7 +21,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
return ( return (
<footer className={rootClassName}> <footer className={rootClassName}>
<Container> <Container>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 border-b border-accents-2 py-12 text-primary bg-primary transition-colors duration-150">
<div className="col-span-1 lg:col-span-2"> <div className="col-span-1 lg:col-span-2">
<Link href="/"> <Link href="/">
<a className="flex flex-initial items-center font-bold md:mr-24"> <a className="flex flex-initial items-center font-bold md:mr-24">
@ -36,21 +36,21 @@ const Footer: FC<Props> = ({ className, pages }) => {
<ul className="flex flex-initial flex-col md:flex-1"> <ul className="flex flex-initial flex-col md:flex-1">
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/"> <Link href="/">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
Home Home
</a> </a>
</Link> </Link>
</li> </li>
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/"> <Link href="/">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
Careers Careers
</a> </a>
</Link> </Link>
</li> </li>
<li className="py-3 md:py-0 md:pb-4"> <li className="py-3 md:py-0 md:pb-4">
<Link href="/blog"> <Link href="/blog">
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
Blog Blog
</a> </a>
</Link> </Link>
@ -58,7 +58,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{sitePages.map((page) => ( {sitePages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
{page.name} {page.name}
</a> </a>
</Link> </Link>
@ -71,7 +71,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{legalPages.map((page) => ( {legalPages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
{page.name} {page.name}
</a> </a>
</Link> </Link>

View File

@ -1,4 +1,4 @@
.root { .root {
@apply h-full bg-primary mx-auto; @apply h-full bg-primary mx-auto transition-colors duration-150;
max-width: 2460px; max-width: 2460px;
} }

View File

@ -1,4 +1,4 @@
import { FC, useState } from 'react' import { FC, useEffect, useState } from 'react'
import cn from 'classnames' import cn from 'classnames'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import { CommerceProvider } from '@lib/bigcommerce' import { CommerceProvider } from '@lib/bigcommerce'
@ -18,13 +18,35 @@ interface Props {
const Layout: FC<Props> = ({ children, pageProps }) => { const Layout: FC<Props> = ({ children, pageProps }) => {
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, closeSidebar } = useUI()
const [acceptedCookies, setAcceptedCookies] = useState(false) const [acceptedCookies, setAcceptedCookies] = useState(false)
const [hasScrolled, setHasScrolled] = useState(false)
useEffect(() => {
const offset = 0
function handleScroll() {
const { scrollTop } = document.documentElement
if (scrollTop > offset) setHasScrolled(true)
else setHasScrolled(false)
}
document.addEventListener('scroll', handleScroll)
return () => {
document.removeEventListener('scroll', handleScroll)
}
}, [])
return ( return (
<CommerceProvider locale="en-us"> <CommerceProvider locale="en-us">
<div className={cn(s.root)}> <div className={cn(s.root)}>
<Container> <header
<Navbar /> className={cn(
</Container> 'sticky top-0 bg-primary z-40 transition-all duration-150',
{ 'shadow-magical': hasScrolled }
)}
>
<Container>
<Navbar />
</Container>
</header>
<main className="fit">{children}</main> <main className="fit">{children}</main>
<Footer pages={pageProps.pages} /> <Footer pages={pageProps.pages} />
<Sidebar show={displaySidebar} close={closeSidebar}> <Sidebar show={displaySidebar} close={closeSidebar}>

View File

@ -1,3 +1,3 @@
.link { .link {
@apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer; @apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer;
} }

View File

@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
return ( return (
<div <div
className={cn( className={cn(
'relative text-sm bg-accents-1 text-base w-full', 'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
className className
)} )}
> >

View File

@ -9,26 +9,30 @@ interface Props {
const Toggle: FC<Props> = ({ className, checked, onChange }) => { const Toggle: FC<Props> = ({ className, checked, onChange }) => {
return ( return (
<Switch checked={checked} onChange={onChange}> <Switch
checked={checked}
onChange={onChange}
className="focus:outline-none"
>
<span <span
role="checkbox" role="checkbox"
aria-checked="false" aria-checked="false"
tabIndex={0} tabIndex={0}
className={`${ className={`${
checked ? 'bg-gray-800' : 'bg-gray-200' checked ? 'bg-gray-800' : 'bg-gray-200'
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`} } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-150 focus:outline-none focus:shadow-outline`}
> >
<span <span
aria-hidden="true" aria-hidden="true"
className={`${ className={`${
checked ? 'translate-x-5' : 'translate-x-0' checked ? 'translate-x-5' : 'translate-x-0'
} translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`} } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-150`}
> >
<span <span
className={`${ className={`${
checked checked
? 'opacity-0 ease-out duration-100' ? 'opacity-0 ease-out duration-150'
: 'opacity-100 ease-in duration-200' : 'opacity-100 ease-in duration-150'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`} } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
> >
<HiSun className="h-3 w-3 text-gray-400" /> <HiSun className="h-3 w-3 text-gray-400" />
@ -36,9 +40,9 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
<span <span
className={`${ className={`${
checked checked
? 'opacity-100 ease-in duration-200' ? 'opacity-100 ease-in duration-150'
: 'opacity-0 ease-out duration-100' : 'opacity-0 ease-out duration-150'
} opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`} } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
> >
<HiMoon className="h-3 w-3 text-yellow-400" /> <HiMoon className="h-3 w-3 text-yellow-400" />
</span> </span>

View File

@ -26,7 +26,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
return ( return (
<Transition <Transition
show={open} show={open}
enter="transition ease-out duration-100 z-20" enter="transition ease-out duration-150 z-20"
enterFrom="transform opacity-0 scale-95" enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100" enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75" leave="transition ease-in duration-75"

View File

@ -10,10 +10,9 @@
} }
.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-150 text-base flex items-center;
&:hover { &:hover {
@apply text-accents-8 transition scale-110 duration-100; @apply text-accents-8 transition scale-110 duration-150;
} }
&:last-child { &:last-child {

View File

@ -1,22 +1,76 @@
.root { .root {
@apply relative w-full h-full; @apply relative w-full h-full relative;
overflow-y: hidden; overflow-y: hidden;
}
& > div { .leftControl,
overflow: visible !important; .rightControl {
@apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
}
.leftControl {
@apply left-6;
}
.rightControl {
@apply right-6;
}
.control {
@apply opacity-0 transition duration-150;
}
.root:hover .control {
@apply opacity-100;
}
.positionIndicatorsContainer {
@apply hidden;
@screen sm {
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
} }
} }
.rootPanel { .positionIndicator {
@apply absolute flex flex-row inset-0 z-20 m-20; @apply rounded-full p-2;
/* :hover .dot {
@apply bg-hover-2;
}
:focus .dot {
@apply outline-none;
} */
} }
.leftPanel { .dot {
@apply flex-1; @apply bg-hover-1 transition w-3 h-3 rounded-full;
cursor: url('/cursor-left.png'), auto;
} }
.rightPanel { .positionIndicator:hover .dot {
@apply flex-1; @apply bg-hover-2;
cursor: url('/cursor-right.png'), auto;
} }
.positionIndicator:focus {
@apply outline-none;
}
.positionIndicator:focus .dot {
@apply shadow-outline-blue;
}
.positionIndicatorActive .dot {
@apply bg-white;
}
.positionIndicatorActive:hover .dot {
@apply bg-white;
}
/* sx={{
width: '10px',
height: '10px',
bg: currentSlide === idx ? 'primary' : 'gray',
borderRadius: 'full',
mx: 2,
'&:focus': { outline: 'none' },
}} */

View File

@ -1,36 +1,71 @@
import React, { FC, useState } from 'react' import { useKeenSlider } from 'keen-slider/react'
import SwipeableViews from 'react-swipeable-views' import React, { Children, FC, isValidElement, useState } from 'react'
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
import cn from 'classnames'
import s from './ProductSlider.module.css' import s from './ProductSlider.module.css'
interface Props {
children?: any
}
const ProductSlider: FC<Props> = ({ children }) => { const ProductSlider: FC = ({ children }) => {
const [idx, setIdx] = useState(0) const [currentSlide, setCurrentSlide] = useState(0)
const count = React.Children.count(children) const [isMounted, setIsMounted] = useState(false)
const goBack = () => { const [ref, slider] = useKeenSlider<HTMLDivElement>({
idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1) loop: true,
} slidesPerView: 1,
mounted: () => setIsMounted(true),
const goNext = () => { slideChanged(s) {
idx + 1 === count ? setIdx(0) : setIdx(idx + 1) setCurrentSlide(s.details().relativeSlide)
} },
})
return ( return (
<div className={s.root}> <div className={s.root}>
<SwipeableViews <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
index={idx} <HiChevronLeft />
onChangeIndex={setIdx} </button>
containerStyle={{ overflow: 'visible' }} <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
slideStyle={{ overflow: 'visible' }} <HiChevronRight />
</button>
<div
ref={ref}
className="keen-slider h-full transition-opacity duration-150"
style={{ opacity: isMounted ? 1 : 0 }}
> >
{children} {Children.map(children, (child) => {
</SwipeableViews> // Add the keen-slider__slide className to children
<div className={s.rootPanel}> if (isValidElement(child)) {
<div className={s.leftPanel} onClick={goBack}></div> return {
<div className={s.rightPanel} onClick={goNext}></div> ...child,
props: {
...child.props,
className: `${
child.props.className ? `${child.props.className} ` : ''
}keen-slider__slide`,
},
}
}
return child
})}
</div> </div>
{slider && (
<div className={cn(s.positionIndicatorsContainer)}>
{[...Array(slider.details().size).keys()].map((idx) => {
return (
<button
key={idx}
className={cn(s.positionIndicator, {
[s.positionIndicatorActive]: currentSlide === idx,
})}
onClick={() => {
slider.moveToSlideRelative(idx)
}}
>
<div className={s.dot} />
</button>
)
})}
</div>
)}
</div> </div>
) )
} }

View File

@ -1,8 +1,8 @@
.root { .root {
@apply relative grid items-start gap-8 grid-cols-1; @apply relative grid items-start gap-8 grid-cols-1 overflow-x-hidden;
@screen lg { @screen lg {
@apply grid-cols-12 pt-10; @apply grid-cols-12;
} }
} }
@ -17,24 +17,18 @@
} }
@screen lg { @screen lg {
@apply mx-0 col-span-7; @apply mx-0 col-span-6;
min-height: 100%; min-height: 100%;
height: 100%; height: 100%;
} }
} }
.squareBg { .squareBg {
@apply absolute inset-0 bg-violet z-0; @apply absolute inset-0 bg-violet z-0 h-full;
max-height: 250px;
@screen md {
@apply inset-20;
max-height: 500px;
}
} }
.nameBox { .nameBox {
@apply absolute top-6 left-10 z-10; @apply absolute top-6 left-6 z-20;
& .name { & .name {
@apply px-6 py-2 bg-primary text-primary font-bold; @apply px-6 py-2 bg-primary text-primary font-bold;
@ -46,20 +40,19 @@
@apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide; @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
} }
@screen md { @screen lg {
& .name, & .name,
& .price { & .price {
@apply bg-violet-light text-white; @apply bg-hover-1 text-white;
} }
} }
} }
.sidebar { .sidebar {
@apply flex flex-col col-span-1; @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
@screen lg { @screen lg {
@apply col-span-5; @apply col-span-5 pl-12 pt-20;
padding-top: 5rem;
} }
} }
@ -68,20 +61,18 @@
} }
.img { .img {
@apply w-full h-full object-cover; @apply w-full h-auto max-h-full object-cover;
@screen md {
height: 100%;
margin-top: -2.75rem;
}
@screen lg {
height: 100%;
margin-top: -8%;
}
} }
.button { .button {
min-width: 300px; min-width: 300px;
text-align: center; text-align: center;
} }
.wishlistButton {
@apply absolute z-30 top-6 right-0 bg-primary text-base w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
@screen lg {
@apply right-12 text-white bg-violet;
}
}

View File

@ -9,6 +9,8 @@ import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { isDesktop } from '@lib/browser' import { isDesktop } from '@lib/browser'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product' import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { getProductOptions } from '../helpers' import { getProductOptions } from '../helpers'
import { Heart } from '@components/icon'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
@ -46,7 +48,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
} }
return ( return (
<Container> <Container className="max-w-none w-full" clean>
<NextSeo <NextSeo
title={product.name} title={product.name}
description={product.description} description={product.description}
@ -88,12 +90,6 @@ const ProductView: FC<Props> = ({ product, className }) => {
))} ))}
</ProductSlider> </ProductSlider>
</div> </div>
{!validMedia && (
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>
)}
</div> </div>
<div className={s.sidebar}> <div className={s.sidebar}>
@ -143,6 +139,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
</div> </div>
</section> </section>
</div> </div>
{/* TODO make it work */}
<div className={s.wishlistButton}>
<Heart />
</div>
</div> </div>
</Container> </Container>
) )

View File

@ -1,6 +1,6 @@
.root { .root {
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-100 ease-in-out items-center justify-center cursor-pointer transition duration-150 ease-in-out
p-0 shadow-none border-gray-200 border box-border; p-0 shadow-none border-gray-200 border box-border;
& > span { & > span {
@ -13,7 +13,7 @@
} }
.color { .color {
@apply text-black transition duration-100 ease-in-out; @apply text-black transition duration-150 ease-in-out;
&:hover { &:hover {
@apply text-black; @apply text-black;

View File

@ -5,10 +5,11 @@ interface Props {
className?: string className?: string
children?: any children?: any
el?: HTMLElement el?: HTMLElement
clean?: boolean
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { const Container: FC<Props> = ({ children, className, el = 'div', clean }) => {
const rootClassName = cn('mx-auto max-w-8xl px-12', className) const rootClassName = cn(className, { 'mx-auto max-w-8xl px-12': !clean })
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement

View File

@ -28,6 +28,7 @@
"classnames": "^2.2.6", "classnames": "^2.2.6",
"cookie": "^0.4.1", "cookie": "^0.4.1",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"keen-slider": "^5.2.4",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0", "lodash.random": "^3.2.0",
"next": "^9.5.6-canary.9", "next": "^9.5.6-canary.9",

View File

@ -1,4 +1,5 @@
import '@assets/main.css' import '@assets/main.css'
import 'keen-slider/keen-slider.min.css'
// To be removed // To be removed
import 'animate.css' import 'animate.css'

View File

@ -63,7 +63,7 @@ export default function Home({
}, []) }, [])
return ( return (
<div className="mt-3"> <div>
<Grid> <Grid>
{featured.slice(0, 3).map(({ node }) => ( {featured.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} /> <ProductCard key={node.path} product={node} />
@ -96,7 +96,7 @@ export default function Home({
</Marquee> </Marquee>
<div className="py-12 flex flex-row w-full px-12"> <div className="py-12 flex flex-row w-full px-12">
<div className="pr-3 w-48 relative"> <div className="pr-3 w-48 relative">
<div className="sticky top-2"> <div className="sticky top-32">
<ul className="mb-10"> <ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-base font-bold tracking-wide">
All Categories All Categories

View File

@ -18,6 +18,8 @@ module.exports = {
secondary: 'var(--secondary)', secondary: 'var(--secondary)',
'secondary-2': 'var(--secondary-2)', 'secondary-2': 'var(--secondary-2)',
hover: 'var(--hover)', hover: 'var(--hover)',
'hover-1': 'var(--hover-1)',
'hover-2': 'var(--hover-2)',
'accents-0': 'var(--accents-0)', 'accents-0': 'var(--accents-0)',
'accents-1': 'var(--accents-1)', 'accents-1': 'var(--accents-1)',
'accents-2': 'var(--accents-2)', 'accents-2': 'var(--accents-2)',
@ -41,6 +43,10 @@ module.exports = {
primary: 'var(--text-primary)', primary: 'var(--text-primary)',
secondary: 'var(--text-secondary)', secondary: 'var(--text-secondary)',
}, },
boxShadow: {
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
},
}, },
}, },
variants: {}, variants: {},

View File

@ -5399,6 +5399,11 @@ jws@^3.2.2:
jwa "^1.4.1" jwa "^1.4.1"
safe-buffer "^5.0.1" safe-buffer "^5.0.1"
keen-slider@^5.2.4:
version "5.2.4"
resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
keycode@^2.1.7: keycode@^2.1.7:
version "2.2.0" version "2.2.0"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"