Merge branch 'master' into master

README.md

@@ -17,7 +17,7 @@ This project is currently <b>under development</b>.
 - Responsive
 - UI Components
 - Theming
-- Standarized Data Hooks
+- Standardized Data Hooks
 - Integrations - Integrate seamlessly with the most common ecommerce platforms.
 - Dark Mode Support
 

components/common/HTMLContent/HTMLContent.module.css

@@ -1,26 +0,0 @@
-.root {
-  @apply text-lg leading-7 font-medium max-w-6xl mx-auto;
-}
-
-.root p {
-  @apply text-justify;
-}
-
-.root h1 {
-  @apply text-5xl mb-12;
-}
-
-.root h2 {
-  @apply text-3xl mt-12 mb-4 leading-snug;
-}
-
-.root h3 {
-  @apply text-2xl mt-8 mb-4 leading-snug;
-}
-
-.root p,
-.root ul,
-.root ol,
-.root blockquote {
-  @apply mb-6;
-}

components/common/HTMLContent/HTMLContent.tsx

@@ -1,16 +0,0 @@
-import cn from 'classnames'
-import s from './HTMLContent.module.css'
-
-type Props = {
-  className?: 'string'
-  html: string
-}
-
-export default function HTMLContent({ className, html }: Props) {
-  return (
-    <div
-      className={cn(s.root, className)}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
-  )
-}

components/common/HTMLContent/index.ts

@@ -1 +0,0 @@
-export { default } from './HTMLContent'

components/common/index.ts

@@ -7,5 +7,4 @@ export { default as Searchbar } from './Searchbar'
 export { default as UserNav } from './UserNav'
 export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
-export { default as HTMLContent } from './HTMLContent'
 export { default as I18nWidget } from './I18nWidget'

components/icons/Github.tsx

@@ -1,4 +1,4 @@
-const Sun = ({ ...props }) => {
+const Github = ({ ...props }) => {
   return (
     <svg
       width="24"
@@ -17,4 +17,4 @@ const Sun = ({ ...props }) => {
   )
 }
 
-export default Sun
+export default Github

components/product/ProductView/ProductView.tsx

@@ -6,8 +6,7 @@ import { NextSeo } from 'next-seo'
 import s from './ProductView.module.css'
 import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
-import { Button, Container } from '@components/ui'
+import { Button, Container, Text } from '@components/ui'
-import { HTMLContent } from '@components/common'
 
 import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
 import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
@@ -137,7 +136,7 @@ const ProductView: FC<Props> = ({ product }) => {
             ))}
 
             <div className="pb-14 break-words w-full max-w-xl">
-              <HTMLContent html={product.description} />
+              <Text html={product.description} />
             </div>
           </section>
           <div>

components/ui/Text/Text.tsx

@@ -10,7 +10,8 @@ interface Props {
   variant?: Variant
   className?: string
   style?: CSSProperties
-  children: React.ReactNode | any
+  children?: React.ReactNode | any
+  html?: string
 }
 
 type Variant = 'heading' | 'body' | 'pageHeading' | 'sectionHeading'
@@ -20,6 +21,7 @@ const Text: FunctionComponent<Props> = ({
   className = '',
   variant = 'body',
   children,
+  html,
 }) => {
   const componentsMap: {
     [P in Variant]: React.ComponentType<any> | string
@@ -36,6 +38,12 @@ const Text: FunctionComponent<Props> = ({
     | React.ComponentType<any>
     | string = componentsMap![variant!]
 
+  const htmlContentProps = html
+    ? {
+        dangerouslySetInnerHTML: { __html: html },
+      }
+    : {}
+
   return (
     <Component
       className={cn(
@@ -49,6 +57,7 @@ const Text: FunctionComponent<Props> = ({
         className
       )}
       style={style}
+      {...htmlContentProps}
     >
       {children}
     </Component>

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -7,8 +7,7 @@ import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
 import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remove-item'
 import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
 import { useUI } from '@components/ui/context'
-import { Button } from '@components/ui'
+import { Button, Text } from '@components/ui'
-import { HTMLContent } from '@components/common'
 import { Trash } from '@components/icons'
 import s from './WishlistCard.module.css'
 
@@ -72,7 +71,7 @@ const WishlistCard: FC<Props> = ({ item }) => {
           </Link>
         </h3>
         <div className="mb-4">
-          <HTMLContent html={product.description!} />
+          <Text html={product.description} />
         </div>
         <Button
           aria-label="Add to Cart"

license.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -56,7 +56,7 @@
     "keen-slider": "^5.2.4",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^10.0.1-canary.7",
+    "next": "^10.0.3",
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "postcss-nesting": "^7.0.1",

pages/[...pages].tsx

@@ -3,12 +3,14 @@ import type {
   GetStaticPropsContext,
   InferGetStaticPropsType,
 } from 'next'
+import getSlug from '@lib/get-slug'
+import { missingLocaleInPages } from '@lib/usage-warns'
+import { Layout } from '@components/common'
+import { Text } from '@components/ui'
 import { getConfig } from '@bigcommerce/storefront-data-hooks/api'
 import getPage from '@bigcommerce/storefront-data-hooks/api/operations/get-page'
 import getAllPages from '@bigcommerce/storefront-data-hooks/api/operations/get-all-pages'
-import getSlug from '@lib/get-slug'
+import { defatultPageProps } from '@lib/defaults'
-import { missingLocaleInPages } from '@lib/usage-warns'
-import { Layout, HTMLContent } from '@components/common'
 
 export async function getStaticProps({
   preview,
@@ -32,7 +34,7 @@ export async function getStaticProps({
   }
 
   return {
-    props: { pages, page },
+    props: { ...defatultPageProps, pages, page },
     revalidate: 60 * 60, // Every hour
   }
 }
@@ -64,7 +66,7 @@ export default function Pages({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div className="max-w-2xl mx-auto py-20">
-      {page?.body && <HTMLContent html={page.body} />}
+      {page?.body && <Text html={page.body} />}
     </div>
   )
 }

pages/product/[slug].tsx

@@ -51,8 +51,7 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
           return arr
         }, [])
       : products.map((product) => `/product${product.node.path}`),
-    // If your store has tons of products, enable fallback mode to improve build times!
+    fallback: 'unstable_blocking',
-    fallback: false,
   }
 }