crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/vercel/commerce into agnostic

Browse Source
This commit is contained in:
Luis Alvarez 2021-02-12 14:56:03 -05:00
commit 2f903cc66c
15 changed files with 948 additions and 1683 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/base.css
View File

@ -3,7 +3,6 @@
--primary-2: #f1f3f5;
--secondary: #000000;
--secondary-2: #111;
--selection: var(--cyan);
--text-base: #000000;
@ -13,18 +12,14 @@
--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;
--green: #37b679;
--red: #da3c3c;
--pink: #e64980;
--purple: #f81ce5;
--blue: #0070f3;
--violet-light: #7048e8;
--violet: #5f3dc4;
--violet-light: #7048e8;
--accents-0: #f8f9fa;
--accents-1: #f1f3f5;
--accents-2: #e9ecef;
@ -132,3 +127,4 @@ a {
opacity: 1;
}
}

2
assets/components.css
View File

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

13
components/common/Avatar/Avatar.tsx
View File

@ -1,5 +1,5 @@
import { FC, useState, useMemo, useRef, useEffect } from 'react'
import { getRandomPairOfColors } from '@lib/colors'
import { FC, useRef, useEffect } from 'react'
import { useUserAvatar } from '@lib/hooks/useUserAvatar'
interface Props {
className?: string
@ -7,18 +7,13 @@ interface Props {
}
const Avatar: FC<Props> = ({}) => {
const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
useEffect(() => {
if (ref && ref.current) {
ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
}
}, [bg])
let { userAvatar } = useUserAvatar()
return (
<div
ref={ref}
style={{ backgroundImage: userAvatar }}
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
>
{/* Add an image - We're generating a gradient as placeholder <img></img> */}

2
components/common/Searchbar/Searchbar.module.css
View File

@ -7,7 +7,7 @@
}
.input:focus {
@apply outline-none shadow-outline-2;
@apply outline-none shadow-outline-normal;
}
.iconContainer {

6
components/common/UserNav/UserNav.module.css
View File

@ -24,7 +24,11 @@
}
.bagCount {
@apply border border-accents-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;
@apply border border-accents-1 bg-secondary text-secondary absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs;
padding-left: 2.5px;
padding-right: 2.5px;
min-width: 1.25rem;
min-height: 1.25rem;
}
.avatarButton {

4
components/product/ProductSlider/ProductSlider.module.css
View File

@ -15,7 +15,7 @@
.leftControl:hover,
.rightControl:hover {
@apply outline-none shadow-outline-blue;
@apply outline-none shadow-outline-normal;
}
.leftControl {
@ -70,7 +70,7 @@
}
.positionIndicator:focus .dot {
@apply shadow-outline-blue;
@apply shadow-outline-normal;
}
.positionIndicatorActive .dot {

2
components/ui/Button/Button.module.css
View File

@ -7,7 +7,7 @@
}
.root:focus {
@apply shadow-outline outline-none;
@apply shadow-outline-normal outline-none;
}
.root[data-active] {

2
components/ui/Input/Input.module.css
View File

@ -3,5 +3,5 @@
}
.root:focus {
@apply outline-none shadow-outline-gray;
@apply outline-none shadow-outline-normal;
}

14
components/ui/context.tsx
View File

@ -52,6 +52,10 @@ type Action =
type: 'SET_MODAL_VIEW'
view: MODAL_VIEWS
}
| {
type: 'SET_USER_AVATAR'
value: string
}
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
type ToastText = string
@ -123,6 +127,12 @@ function uiReducer(state: State, action: Action) {
toastText: action.text,
}
}
case 'SET_USER_AVATAR': {
return {
...state,
userAvatar: action.value,
}
}
}
}
@ -147,6 +157,9 @@ export const UIProvider: FC = (props) => {
const openToast = () => dispatch({ type: 'OPEN_TOAST' })
const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
const setUserAvatar = (value: string) =>
dispatch({ type: 'SET_USER_AVATAR', value })
const setModalView = (view: MODAL_VIEWS) =>
dispatch({ type: 'SET_MODAL_VIEW', view })
@ -164,6 +177,7 @@ export const UIProvider: FC = (props) => {
setModalView,
openToast,
closeToast,
setUserAvatar,
}),
[state]
)

26
lib/hooks/useUserAvatar.ts Normal file
View File

@ -0,0 +1,26 @@
import { useEffect } from 'react'
import { useUI } from '@components/ui/context'
import { getRandomPairOfColors } from '@lib/colors'
export const useUserAvatar = (name = 'userAvatar') => {
const { userAvatar, setUserAvatar } = useUI()
useEffect(() => {
if (!userAvatar && localStorage.getItem(name)) {
// Get bg from localStorage and push it to the context.
setUserAvatar(localStorage.getItem(name))
}
if (!localStorage.getItem(name)) {
// bg not set locally, generating one, setting localStorage and context to persist.
const bg = getRandomPairOfColors()
const value = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
localStorage.setItem(name, value)
setUserAvatar(value)
}
}, [])
return {
userAvatar,
setUserAvatar,
}
}

18
lib/logger.ts
View File

@ -1,18 +0,0 @@
import bunyan from 'bunyan'
import PrettyStream from 'bunyan-prettystream'
const prettyStdOut = new PrettyStream()
const log = bunyan.createLogger({
name: 'Next.js - Commerce',
level: 'debug',
streams: [
{
level: 'debug',
type: 'raw',
stream: prettyStdOut,
},
],
})
export default log

14
package.json
View File

@ -21,7 +21,6 @@
},
"dependencies": {
"@reach/portal": "^0.11.2",
"@tailwindcss/ui": "^0.6.2",
"@vercel/fetch": "^6.1.0",
"body-scroll-lock": "^3.1.5",
"bowser": "^2.11.0",
@ -35,17 +34,18 @@
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
"next": "^10.0.5",
"next": "^10.0.7-canary.3",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"postcss": "^8.2.4",
"postcss-nesting": "^7.0.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-merge-refs": "^1.1.0",
"react-ticker": "^1.2.2",
"swr": "^0.4.0",
"tabbable": "^5.1.5",
"tailwindcss": "^1.9"
"tailwindcss": "^2.0.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^1.20.0",
@ -55,8 +55,6 @@
"@manifoldco/swagger-to-ts": "^2.1.0",
"@next/bundle-analyzer": "^10.0.1",
"@types/body-scroll-lock": "^2.6.1",
"@types/bunyan": "^1.8.6",
"@types/bunyan-prettystream": "^0.1.31",
"@types/classnames": "^2.2.10",
"@types/cookie": "^0.4.0",
"@types/js-cookie": "^2.2.6",
@ -65,8 +63,6 @@
"@types/lodash.throttle": "^4.1.6",
"@types/node": "^14.14.16",
"@types/react": "^17.0.0",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3",
"graphql": "^15.4.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

6
pages/search.tsx
View File

@ -95,7 +95,7 @@ export default function Search({
<button
type="button"
onClick={(e) => handleClick(e, 'categories')}
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
@ -194,7 +194,7 @@ export default function Search({
<button
type="button"
onClick={(e) => handleClick(e, 'brands')}
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-900 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"
@ -371,7 +371,7 @@ export default function Search({
<button
type="button"
onClick={(e) => handleClick(e, 'sort')}
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
className="flex justify-between w-full rounded-sm border border-gray-300 px-4 py-3 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-normal active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
id="options-menu"
aria-haspopup="true"
aria-expanded="true"

3
tailwind.config.js
View File

@ -51,7 +51,7 @@ module.exports = {
secondary: 'var(--text-secondary)',
},
boxShadow: {
'outline-2': '0 0 0 2px var(--accents-2)',
'outline-normal': '0 0 0 2px var(--accents-2)',
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',
},
@ -63,5 +63,4 @@ module.exports = {
},
},
},
plugins: [require('@tailwindcss/ui')],
}

2511
yarn.lock
View File

File diff suppressed because it is too large Load Diff