From 1ba0967500844e0f56400162327fc394391535ef Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sat, 24 Oct 2020 19:00:57 -0300 Subject: [PATCH 01/18] Stiling --- components/cart/CartItem/CartItem.module.css | 7 ++++--- components/cart/CartItem/CartItem.tsx | 13 +++++++------ components/ui/Text/Text.module.css | 4 ++++ components/ui/Text/Text.tsx | 4 +++- pages/cart.tsx | 11 +++++------ 5 files changed, 23 insertions(+), 16 deletions(-) diff --git a/components/cart/CartItem/CartItem.module.css b/components/cart/CartItem/CartItem.module.css index 618788020..70d29fc03 100644 --- a/components/cart/CartItem/CartItem.module.css +++ b/components/cart/CartItem/CartItem.module.css @@ -10,8 +10,9 @@ .productImage { position: absolute; - top: 0; - left: -10px; - top: 15px; transform: scale(1.9); + width: 100%; + height: 100%; + left: 30% !important; + top: 30% !important; } diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index f769a4fe1..cb3010d0f 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -55,18 +55,19 @@ const CartItem = ({ }, [item.quantity]) return ( -
  • -
    +
  • +
    -
    - {item.name} +
    + {item.name}
    ) : (
    -

    - My Cart -

    + My Cart + Review your Order
      {items.map((item) => ( ))}
    -
    +
    Before you leave, take a look at these items. We picked them just for you @@ -98,7 +97,7 @@ export default function Cart({}: InferGetStaticPropsType< )}
    -
    +
    • @@ -122,7 +121,7 @@ export default function Cart({}: InferGetStaticPropsType<
      From cd72d3a1ef0cf217d2a20f79e59d1cb939335812 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sat, 24 Oct 2020 19:14:34 -0300 Subject: [PATCH 02/18] Stiling --- components/cart/CartItem/CartItem.tsx | 15 +++++++++++---- pages/cart.tsx | 7 +++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index cb3010d0f..bc74812e0 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -1,10 +1,11 @@ -import { ChangeEvent, useEffect, useState } from 'react' +import s from './CartItem.module.css' import Image from 'next/image' +import Link from 'next/link' +import { ChangeEvent, useEffect, useState } from 'react' import { Trash, Plus, Minus } from '@components/icon' import usePrice from '@lib/bigcommerce/use-price' import useUpdateItem from '@lib/bigcommerce/cart/use-update-item' import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item' -import s from './CartItem.module.css' const CartItem = ({ item, @@ -53,7 +54,7 @@ const CartItem = ({ setQuantity(item.quantity) } }, [item.quantity]) - + console.log(item) return (
    • @@ -67,7 +68,13 @@ const CartItem = ({ />
      - {item.name} + {/** TODO: Replace this. No `path` found at Cart */} + + + {item.name} + + +
      + +
      +
      +
      + +
      {/* TODO make it work */} diff --git a/pages/cart.tsx b/pages/cart.tsx index 7e2d8a544..4f62cc063 100644 --- a/pages/cart.tsx +++ b/pages/cart.tsx @@ -37,8 +37,6 @@ export default function Cart({}: InferGetStaticPropsType< const error = null const success = null - console.log(items) - return (
      From 6b4d32a7d385ebe3d363b8a6b89c1f69bff6c213 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sat, 24 Oct 2020 19:35:16 -0300 Subject: [PATCH 05/18] Decrese size --- assets/base.css | 34 +++++++++++++++++++++++++++++++ components/core/Toggle/Toggle.tsx | 6 +++--- package.json | 11 +++------- pages/search.tsx | 14 ++++++------- 4 files changed, 47 insertions(+), 18 deletions(-) diff --git a/assets/base.css b/assets/base.css index 9334525f0..7d0df28bf 100644 --- a/assets/base.css +++ b/assets/base.css @@ -98,3 +98,37 @@ body { a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx index 25b918d79..942a5a7f6 100644 --- a/components/core/Toggle/Toggle.tsx +++ b/components/core/Toggle/Toggle.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react' import { Switch } from '@headlessui/react' -import { HiSun, HiMoon } from 'react-icons/hi' +import { Moon, Sun } from '@components/icon' interface Props { className?: string checked: boolean @@ -35,7 +35,7 @@ const Toggle: FC = ({ className, checked, onChange }) => { : 'opacity-100 ease-in duration-150' } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`} > - + = ({ className, checked, onChange }) => { : 'opacity-0 ease-out duration-150' } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`} > - + diff --git a/package.json b/package.json index a84b192dd..2760205ab 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,7 @@ "@headlessui/react": "^0.2.0", "@react-aria/overlays": "^3.4.0", "@tailwindcss/ui": "^0.6.2", - "animate.css": "^4.1.1", "bowser": "^2.11.0", - "bunyan": "^1.8.14", - "bunyan-prettystream": "^0.1.3", "classnames": "^2.2.6", "cookie": "^0.4.1", "js-cookie": "^2.2.1", @@ -35,16 +32,12 @@ "next": "^9.5.6-canary.14", "next-seo": "^4.11.0", "next-themes": "^0.0.4", - "nextjs-progressbar": "^0.0.6", "postcss-import": "^13.0.0", "postcss-nesting": "^7.0.1", "react": "^16.14.0", "react-aria": "^3.0.0", "react-dom": "^16.14.0", - "react-icons": "^3.11.0", "react-merge-refs": "^1.1.0", - "react-swipeable-views": "^0.13.9", - "react-swipeable-views-utils": "^0.14.0-alpha.0", "react-ticker": "^1.2.2", "swr": "^0.3.3", "tailwindcss": "^1.9" @@ -69,7 +62,9 @@ "postcss-flexbugs-fixes": "^4.2.1", "postcss-preset-env": "^6.7.0", "prettier": "^2.1.2", - "typescript": "^4.0.3" + "typescript": "^4.0.3", + "bunyan": "^1.8.14", + "bunyan-prettystream": "^0.1.3" }, "resolutions": { "webpack": "^5.0.0-beta.30" diff --git a/pages/search.tsx b/pages/search.tsx index d4b373ec2..2c03ba1fb 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -111,12 +111,12 @@ export default function Search({
    -
    +
    {data ? ( <> @@ -124,8 +124,8 @@ export default function Search({ {q}" @@ -145,7 +145,7 @@ export default function Search({ ( ))} From 6b69d31bad2dc86a45c85b21f7abffd94a4ff80a Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 25 Oct 2020 10:39:47 -0300 Subject: [PATCH 06/18] Decrese size --- pages/_app.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index a814e9a65..69f3ce223 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,9 +1,6 @@ import '@assets/main.css' import 'keen-slider/keen-slider.min.css' -// To be removed -import 'animate.css' - import { FC } from 'react' import type { AppProps } from 'next/app' From f2997c251988411e3d233e0de84584b441c875f0 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 25 Oct 2020 10:57:59 -0300 Subject: [PATCH 07/18] a11y pass --- components/cart/CartItem/CartItem.tsx | 1 + components/product/ProductCard/ProductCard.tsx | 2 ++ components/product/ProductSlider/ProductSlider.tsx | 8 +++++++- components/product/ProductView/ProductView.tsx | 2 ++ components/product/Swatch/Swatch.tsx | 1 + 5 files changed, 13 insertions(+), 1 deletion(-) diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx index bc74812e0..258eb5f9f 100644 --- a/components/cart/CartItem/CartItem.tsx +++ b/components/cart/CartItem/CartItem.tsx @@ -63,6 +63,7 @@ const CartItem = ({ src={item.image_url} width={150} height={150} + alt="Product Image" // The cart item image is already optimized and very small in size unoptimized /> diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index b37d7ca67..0274fbc30 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -36,6 +36,7 @@ const ProductCard: FC = ({
    {p.name} = ({
    {p.name} { return (
    -
    @@ -51,7 +51,7 @@ export default function Blog({}: InferGetStaticPropsType<
    - + Jacket
    {/** Replace by HTML Content */}
    From c9e379571237f7c26425eb75f98b1021749c68c0 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 25 Oct 2020 12:08:40 -0300 Subject: [PATCH 11/18] a11y pass --- components/core/I18nWidget/I18nWidget.tsx | 2 +- components/core/Searchbar/Searchbar.tsx | 2 ++ components/core/UserNav/UserNav.tsx | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/core/I18nWidget/I18nWidget.tsx b/components/core/I18nWidget/I18nWidget.tsx index e23a91865..1d50115a7 100644 --- a/components/core/I18nWidget/I18nWidget.tsx +++ b/components/core/I18nWidget/I18nWidget.tsx @@ -8,7 +8,7 @@ const I18nWidget: FC = () => { return (
    From 28cae88b5b4d1eeea51f833b3a1a14cbf4fbe6ea Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Sun, 25 Oct 2020 12:41:36 -0300 Subject: [PATCH 14/18] Enhanced Image Component --- .../core/EnhancedImage/EnhancedImage.tsx | 42 ++++++ components/core/EnhancedImage/index.ts | 1 + components/core/index.ts | 1 + .../product/ProductCard/ProductCard.tsx | 14 +- package.json | 8 +- yarn.lock | 125 ++---------------- 6 files changed, 67 insertions(+), 124 deletions(-) create mode 100644 components/core/EnhancedImage/EnhancedImage.tsx create mode 100644 components/core/EnhancedImage/index.ts diff --git a/components/core/EnhancedImage/EnhancedImage.tsx b/components/core/EnhancedImage/EnhancedImage.tsx new file mode 100644 index 000000000..0c7bdd96d --- /dev/null +++ b/components/core/EnhancedImage/EnhancedImage.tsx @@ -0,0 +1,42 @@ +import { FC } from 'react' +import { useInView } from 'react-intersection-observer' +import Image from 'next/image' + +type Props = Omit< + JSX.IntrinsicElements['img'], + 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' +> & { + src: string + quality?: string + priority?: boolean + loading?: readonly ['lazy', 'eager', undefined] + unoptimized?: boolean +} & ( + | { + width: number | string + height: number | string + unsized?: false + } + | { + width?: number | string + height?: number | string + unsized: true + } + ) + +const EnhancedImage: FC = ({ + ...props +}) => { + const [ref, inView] = useInView({ + triggerOnce: true, + rootMargin: '220px 0px', + }) + + return ( +
    + +
    + ) +} + +export default EnhancedImage diff --git a/components/core/EnhancedImage/index.ts b/components/core/EnhancedImage/index.ts new file mode 100644 index 000000000..48dbd6033 --- /dev/null +++ b/components/core/EnhancedImage/index.ts @@ -0,0 +1 @@ +export { default } from './EnhancedImage' diff --git a/components/core/index.ts b/components/core/index.ts index eea02cdec..670f5d58f 100644 --- a/components/core/index.ts +++ b/components/core/index.ts @@ -9,3 +9,4 @@ export { default as Toggle } from './Toggle' export { default as Head } from './Head' export { default as HTMLContent } from './HTMLContent' export { default as I18nWidget } from './I18nWidget' +export { default as EnhancedImage } from './EnhancedImage' diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 0274fbc30..0ff4cd56c 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -1,10 +1,10 @@ -import { FC, ReactNode, Component } from 'react' +import React, { FC, ReactNode, Component } from 'react' import cn from 'classnames' -import Image from 'next/image' -import Link from 'next/link' -import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products' -import { Heart } from '@components/icon' import s from './ProductCard.module.css' +import Link from 'next/link' +import { Heart } from '@components/icon' +import { EnhancedImage } from '@components/core' +import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products' interface Props { className?: string @@ -34,7 +34,7 @@ const ProductCard: FC = ({ {p.name}
    - {p.name} = ({
    - {p.name} Date: Sun, 25 Oct 2020 13:10:06 -0300 Subject: [PATCH 15/18] a11y pass --- components/core/Footer/Footer.tsx | 14 +++++++------- components/core/Toggle/Toggle.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/core/Footer/Footer.tsx b/components/core/Footer/Footer.tsx index 66a8a18fb..c9094897f 100644 --- a/components/core/Footer/Footer.tsx +++ b/components/core/Footer/Footer.tsx @@ -36,21 +36,21 @@ const Footer: FC = ({ className, pages }) => {