From ae43c92661906f6907ae2ee9e7e7f2e56e93b428 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 15 Oct 2020 17:35:59 -0300 Subject: [PATCH 1/4] UI Provider --- components/core/Head/Head.tsx | 18 ++++++++++++++++++ components/core/Head/index.ts | 1 + components/core/index.ts | 1 + config.json | 18 ------------------ config/seo.json | 16 ++++++++++++++++ pages/_app.tsx | 9 +-------- tsconfig.json | 3 ++- 7 files changed, 39 insertions(+), 27 deletions(-) create mode 100644 components/core/Head/Head.tsx create mode 100644 components/core/Head/index.ts delete mode 100644 config.json create mode 100644 config/seo.json diff --git a/components/core/Head/Head.tsx b/components/core/Head/Head.tsx new file mode 100644 index 000000000..b2c0c997b --- /dev/null +++ b/components/core/Head/Head.tsx @@ -0,0 +1,18 @@ +import { FC } from 'react' +import NextHead from 'next/head' +import { DefaultSeo } from 'next-seo' +import config from '@config/seo.json' + +const Head: FC = () => { + return ( + <> + + + + + + + ) +} + +export default Head diff --git a/components/core/Head/index.ts b/components/core/Head/index.ts new file mode 100644 index 000000000..b317a124b --- /dev/null +++ b/components/core/Head/index.ts @@ -0,0 +1 @@ +export { default } from './Head' diff --git a/components/core/index.ts b/components/core/index.ts index 587c9cece..27b19d5d8 100644 --- a/components/core/index.ts +++ b/components/core/index.ts @@ -6,3 +6,4 @@ export { default as Navbar } from './Navbar' export { default as Searchbar } from './Searchbar' export { default as UserNav } from './UserNav' export { default as Toggle } from './Toggle' +export { default as Head } from './Head' diff --git a/config.json b/config.json deleted file mode 100644 index 6c279ee04..000000000 --- a/config.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "seo": { - "title": "ACME Storefront | Powered by Next.js Commerce", - "titleTemplate": "%s - ACME Storefront", - "description": "Next.js Commerce -> https://www.nextjs.org/commerce", - "openGraph": { - "type": "website", - "locale": "en_IE", - "url": "https://nextjs.org/commerce", - "site_name": "Next.js Commerce" - }, - "twitter": { - "handle": "@nextjs", - "site": "@nextjs", - "cardType": "summary_large_image" - } - } -} diff --git a/config/seo.json b/config/seo.json new file mode 100644 index 000000000..0d0c3d37d --- /dev/null +++ b/config/seo.json @@ -0,0 +1,16 @@ +{ + "title": "ACME Storefront | Powered by Next.js Commerce", + "titleTemplate": "%s - ACME Storefront", + "description": "Next.js Commerce -> https://www.nextjs.org/commerce", + "openGraph": { + "type": "website", + "locale": "en_IE", + "url": "https://nextjs.org/commerce", + "site_name": "Next.js Commerce" + }, + "twitter": { + "handle": "@nextjs", + "site": "@nextjs", + "cardType": "summary_large_image" + } +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 0339d477f..683e07139 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,11 +3,9 @@ import '@assets/tailwind.css' import '@assets/utils.css' import 'animate.css' import { FC } from 'react' -import { DefaultSeo } from 'next-seo' + import type { AppProps } from 'next/app' -import config from '../config.json' -import Head from 'next/head' import { CommerceProvider } from '@lib/bigcommerce' const Noop: FC = ({ children }) => <>{children} @@ -17,11 +15,6 @@ export default function MyApp({ Component, pageProps }: AppProps) { return ( <> - - - - - diff --git a/tsconfig.json b/tsconfig.json index 4760611cc..e6b6b9c9c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,8 @@ "@lib/*": ["lib/*"], "@assets/*": ["assets/*"], "@components/*": ["components/*"], - "@utils/*": ["utils/*"] + "@utils/*": ["utils/*"], + "@config/*": ["config/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"], From 5e4d2c2f8fe647cb7f1ec7a053d6e7d5cefc3b13 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 15 Oct 2020 18:02:49 -0300 Subject: [PATCH 2/4] ProductStyling --- components/core/Layout/Layout.tsx | 19 ++-------- .../ProductCard/ProductCard.module.css | 38 ++++++------------- .../product/ProductCard/ProductCard.tsx | 14 ++----- components/ui/context.tsx | 12 ++++++ lib/commerce/cart/use-cart.tsx | 2 +- pages/_app.tsx | 13 ++++--- 6 files changed, 39 insertions(+), 59 deletions(-) diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx index e3d0e02b8..216ce4f74 100644 --- a/components/core/Layout/Layout.tsx +++ b/components/core/Layout/Layout.tsx @@ -4,16 +4,15 @@ import s from './Layout.module.css' import { Navbar, Featurebar, Footer } from '@components/core' import { Container, Sidebar } from '@components/ui' import { CartSidebarView } from '@components/cart' -import { UIProvider, useUI } from '@components/ui/context' +import { useUI } from '@components/ui/context' + import { CommerceProvider } from '@lib/bigcommerce' -import { ThemeProvider } from 'next-themes' -import { SSRProvider, OverlayProvider } from 'react-aria' interface Props { className?: string children?: any } -const CoreLayout: FC = ({ className, children }) => { +const Layout: FC = ({ className, children }) => { const rootClassName = cn(s.root, className) const { displaySidebar, closeSidebar } = useUI() @@ -35,16 +34,4 @@ const CoreLayout: FC = ({ className, children }) => { ) } -const Layout: FC = (props) => ( - - - - - - - - - -) - export default Layout diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index b8329a94f..1c9b2a75f 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -6,31 +6,31 @@ @apply scale-75; } - & .productTitle, + & .productTitle > span, & .productPrice, & .wishlistButton { @apply bg-secondary text-secondary; } - &:nth-child(6n + 1) .productTitle, + &:nth-child(6n + 1) .productTitle > span, &:nth-child(6n + 1) .productPrice, &:nth-child(6n + 1) .wishlistButton { @apply bg-violet text-white; } - &:nth-child(6n + 5) .productTitle, + &:nth-child(6n + 5) .productTitle > span, &:nth-child(6n + 5) .productPrice, &:nth-child(6n + 5) .wishlistButton { @apply bg-blue text-white; } - &:nth-child(6n + 3) .productTitle, + &:nth-child(6n + 3) .productTitle > span, &:nth-child(6n + 3) .productPrice, &:nth-child(6n + 3) .wishlistButton { @apply bg-pink text-white; } - &:nth-child(6n + 6) .productTitle, + &:nth-child(6n + 6) .productTitle > span, &:nth-child(6n + 6) .productPrice, &:nth-child(6n + 6) .wishlistButton { @apply bg-cyan text-white; @@ -66,29 +66,13 @@ } .productTitle { - /* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */ - /* max-width: calc(100% - 50px); */ - line-height: 1.3; - padding: 2px 0; - border-left: 20px solid #c0c; - width: 400px; - margin: 20px auto; + line-height: 51px; + width: 200px; - & h2 { - background-color: #c0c; - padding: 4px 0; - color: #fff; - display: inline; - margin: 0; - - & .strong { - position: relative; - left: -10px; - } - } - - @screen lg { - @apply text-2xl; + & span { + @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; } } diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 2637b8a76..2bb3e149a 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -46,17 +46,11 @@ const ProductCard: FC = ({ className, node: p, variant }) => {
-
-
- -

- {p.name} -

- -
-
-
${p.prices.price.value}
+
+
+ {p.name}
+ ${p.prices.price.value}
diff --git a/components/ui/context.tsx b/components/ui/context.tsx index 40ac823b1..90fe8de94 100644 --- a/components/ui/context.tsx +++ b/components/ui/context.tsx @@ -1,4 +1,6 @@ import React, { FC } from 'react' +import { ThemeProvider } from 'next-themes' +import { SSRProvider, OverlayProvider } from 'react-aria' export interface State { displaySidebar: boolean @@ -63,3 +65,13 @@ function uiReducer(state: State, action: Action) { } } } + +export const ManagedUIContext: FC = ({ children }) => ( + + + + {children} + + + +) diff --git a/lib/commerce/cart/use-cart.tsx b/lib/commerce/cart/use-cart.tsx index bd1af710c..b65228553 100644 --- a/lib/commerce/cart/use-cart.tsx +++ b/lib/commerce/cart/use-cart.tsx @@ -18,7 +18,7 @@ export default function useCart( fetcherFn: HookFetcher, swrOptions?: ConfigInterface ) { - const { cartCookie } = useCommerce() + const { cartCookie = '' } = useCommerce() | {} const fetcher: typeof fetcherFn = (options, input, fetch) => { input.cartId = Cookies.get(cartCookie) return fetcherFn(options, input, fetch) diff --git a/pages/_app.tsx b/pages/_app.tsx index 683e07139..3d8dfc37c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,9 +3,9 @@ import '@assets/tailwind.css' import '@assets/utils.css' import 'animate.css' import { FC } from 'react' - +import { Head } from '@components/core' import type { AppProps } from 'next/app' - +import { ManagedUIContext } from '@components/ui/context' import { CommerceProvider } from '@lib/bigcommerce' const Noop: FC = ({ children }) => <>{children} @@ -15,10 +15,13 @@ export default function MyApp({ Component, pageProps }: AppProps) { return ( <> + - - - + + + + + ) From d3d45e1b2a24c2894243fb0b7e9762ce429e8858 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 15 Oct 2020 18:05:13 -0300 Subject: [PATCH 3/4] UI Provider --- lib/commerce/cart/use-cart.tsx | 2 +- pages/_app.tsx | 16 +++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/lib/commerce/cart/use-cart.tsx b/lib/commerce/cart/use-cart.tsx index b65228553..bd1af710c 100644 --- a/lib/commerce/cart/use-cart.tsx +++ b/lib/commerce/cart/use-cart.tsx @@ -18,7 +18,7 @@ export default function useCart( fetcherFn: HookFetcher, swrOptions?: ConfigInterface ) { - const { cartCookie = '' } = useCommerce() | {} + const { cartCookie } = useCommerce() const fetcher: typeof fetcherFn = (options, input, fetch) => { input.cartId = Cookies.get(cartCookie) return fetcherFn(options, input, fetch) diff --git a/pages/_app.tsx b/pages/_app.tsx index 3d8dfc37c..699cc901c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -14,15 +14,13 @@ export default function MyApp({ Component, pageProps }: AppProps) { const Layout = (Component as any).Layout || Noop return ( - <> + - - - - - - - - + + + + + + ) } From d26222b5e502d02adf809deb55b84f83a94f8e50 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 15 Oct 2020 18:11:00 -0300 Subject: [PATCH 4/4] Changes --- components/cart/CartItem/CartItem.tsx | 2 -- components/cart/CartSidebarView/CartSidebarView.tsx | 9 +++------ 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index fa472afd0..622001e8d 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -53,8 +53,6 @@ const CartItem = ({ } }, [item.quantity]) - console.log(item) - return (
  • diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx index f1274de16..23ead0008 100644 --- a/components/cart/CartSidebarView/CartSidebarView.tsx +++ b/components/cart/CartSidebarView/CartSidebarView.tsx @@ -27,9 +27,6 @@ const CartSidebarView: FC = () => { const items = data?.line_items.physical_items ?? [] - console.log('CART', data, isEmpty) - - // This should come from the API via hook I guess const error = null const success = null @@ -95,7 +92,7 @@ const CartSidebarView: FC = () => {

    My Cart

    -
      +
        {items.map((item) => ( {
    -
    +
    • Subtotal @@ -122,7 +119,7 @@ const CartSidebarView: FC = () => { FREE
    -
    +
    Total {total}