-
-
-
-
-
- {children}
-
+
+ {open ? (
+
+
+
+
+
+ {children}
-
-
-
+
)
}
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index a23992946..a0d5e8339 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -1,9 +1,11 @@
-import { FC, useRef } from 'react'
import s from './Sidebar.module.css'
-import { Transition } from '@headlessui/react'
-import { useOverlay, OverlayContainer } from '@react-aria/overlays'
-import { FocusScope } from '@react-aria/focus'
import Portal from '@reach/portal'
+import { FC, useEffect, useRef } from 'react'
+import {
+ disableBodyScroll,
+ enableBodyScroll,
+ clearAllBodyScrollLocks,
+} from 'body-scroll-lock'
interface Props {
children: any
@@ -12,62 +14,40 @@ interface Props {
}
const Sidebar: FC
= ({ children, open = false, onClose }) => {
- const ref = useRef(null)
- const { overlayProps } = useOverlay(
- {
- isOpen: open,
- isDismissable: true,
- onClose: onClose,
- },
- ref
- )
+ const ref = useRef() as React.MutableRefObject
+
+ useEffect(() => {
+ if (ref.current) {
+ if (open) {
+ disableBodyScroll(ref.current)
+ } else {
+ enableBodyScroll(ref.current)
+ }
+ }
+ return () => {
+ clearAllBodyScrollLocks()
+ }
+ }, [open])
return (
-
-
-
-
-
+ ) : null}
)
}
diff --git a/components/ui/Toast/Toast.module.css b/components/ui/Toast/Toast.module.css
deleted file mode 100644
index 41e77b622..000000000
--- a/components/ui/Toast/Toast.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.root {
-}
-
-.toast {
- @apply absolute bg-primary text-primary flex items-center border border-accents-1
- rounded-md z-50 shadow-2xl top-0 right-0 p-6 my-6 mx-3;
- width: 420px;
- z-index: 20000;
-}
diff --git a/components/ui/Toast/Toast.tsx b/components/ui/Toast/Toast.tsx
deleted file mode 100644
index 33baf3353..000000000
--- a/components/ui/Toast/Toast.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import cn from 'classnames'
-import { FC, useRef, useEffect, useCallback } from 'react'
-import s from './Toast.module.css'
-import { useDialog } from '@react-aria/dialog'
-import { FocusScope } from '@react-aria/focus'
-import { Transition } from '@headlessui/react'
-import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
-
-interface Props {
- className?: string
- children?: any
- open?: boolean
- onClose: () => void
-}
-
-const Toast: FC
= ({
- className,
- children,
- open = false,
- onClose,
- ...props
-}) => {
- const rootClassName = cn(s.root, className)
- let ref = useRef() as React.MutableRefObject
- let { modalProps } = useModal()
- let { dialogProps } = useDialog({}, ref)
- let { overlayProps } = useOverlay(
- {
- isOpen: open,
- isDismissable: true,
- onClose: onClose,
- ...props,
- },
- ref
- )
-
- // useEffect(() => {
- // setTimeout(() => {
- // useCallback(onClose, [])
- // }, 400)
- // })
-
- return (
-
-
-
-
-
-
-
- )
-}
-
-export default Toast
diff --git a/components/ui/Toast/index.ts b/components/ui/Toast/index.ts
deleted file mode 100644
index 0e86a3392..000000000
--- a/components/ui/Toast/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Toast'
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index 8fff349fd..096e2f865 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -1,6 +1,5 @@
import React, { FC, useMemo } from 'react'
import { ThemeProvider } from 'next-themes'
-import { SSRProvider, OverlayProvider } from 'react-aria'
export interface State {
displaySidebar: boolean
@@ -181,10 +180,6 @@ export const useUI = () => {
export const ManagedUIContext: FC = ({ children }) => (
-
-
- {children}
-
-
+ {children}
)
diff --git a/components/ui/index.ts b/components/ui/index.ts
index f1796b650..581c12d53 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -10,4 +10,3 @@ export { default as Skeleton } from './Skeleton'
export { default as Modal } from './Modal'
export { default as Text } from './Text'
export { default as Input } from './Input'
-export { default as Toast } from './Toast'
diff --git a/lib/defaults.ts b/lib/defaults.ts
new file mode 100644
index 000000000..db0503a7a
--- /dev/null
+++ b/lib/defaults.ts
@@ -0,0 +1,14 @@
+// Fallback to CMS Data
+
+export const defatultPageProps = {
+ header: {
+ links: [
+ {
+ link: {
+ title: 'New Arrivals',
+ url: '/',
+ },
+ },
+ ],
+ },
+}
diff --git a/package.json b/package.json
index 6a05ee916..5c61c0095 100644
--- a/package.json
+++ b/package.json
@@ -43,12 +43,12 @@
},
"dependencies": {
"@bigcommerce/storefront-data-hooks": "^1.0.2",
- "@headlessui/react": "^0.2.0",
"@reach/portal": "^0.11.2",
- "@react-aria/overlays": "^3.4.0",
"@tailwindcss/ui": "^0.6.2",
+ "@types/body-scroll-lock": "^2.6.1",
"@types/lodash.throttle": "^4.1.6",
"@vercel/fetch": "^6.1.0",
+ "body-scroll-lock": "^3.1.5",
"bowser": "^2.11.0",
"classnames": "^2.2.6",
"email-validator": "^2.0.4",
@@ -56,12 +56,11 @@
"keen-slider": "^5.2.4",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
- "next": "^10.0.3",
+ "next": "^10.0.3-canary.3",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"postcss-nesting": "^7.0.1",
"react": "^16.14.0",
- "react-aria": "^3.0.0",
"react-dom": "^16.14.0",
"react-intersection-observer": "^8.30.1",
"react-merge-refs": "^1.1.0",
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index ea5f8bf8b..367a50ec4 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -51,7 +51,7 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
return arr
}, [])
: products.map((product) => `/product${product.node.path}`),
- fallback: 'unstable_blocking',
+ fallback: 'blocking',
}
}
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index fbfa19373..ee81857de 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -4,9 +4,9 @@ import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-a
import useWishlist from '@bigcommerce/storefront-data-hooks/wishlist/use-wishlist'
import { Layout } from '@components/common'
import { Heart } from '@components/icons'
-import { Container, Text } from '@components/ui'
+import { Text, Container } from '@components/ui'
import { WishlistCard } from '@components/wishlist'
-import { Transition } from '@headlessui/react'
+import { defatultPageProps } from '@lib/defaults'
export async function getStaticProps({
preview,
@@ -15,7 +15,7 @@ export async function getStaticProps({
const config = getConfig({ locale })
const { pages } = await getAllPages({ config, preview })
return {
- props: { pages },
+ props: { ...defatultPageProps, pages },
}
}
@@ -28,45 +28,22 @@ export default function Wishlist() {
My Wishlist
{isEmpty ? (
-
-
-
-
-
-
-
- Your wishlist is empty
-
-
- Biscuit oat cake wafer icing ice cream tiramisu pudding
- cupcake.
-
-
+
+
+
+
+
+ Your wishlist is empty
+
+
+ Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+
+
) : (
-
- {data &&
- data.items?.map((item) => (
-
-
-
- ))}
-
+ data &&
+ data.items?.map((item) => (
+
+ ))
)}