easier to consume brand

packages/commerce/src/index.tsx

@@ -25,7 +25,7 @@ const Commerce = createContext<CommerceContextValue<any> | {}>({})
 
 export type Provider = CommerceConfig & {
   fetcher: Fetcher
-  brand: Brand.Config
+  brand?: Brand.Config
   cart?: {
     useCart?: SWRHook<Cart.GetCartHook>
     useAddItem?: MutationHook<Cart.AddItemHook>
@@ -74,7 +74,8 @@ export type CommerceConfig = {
 export type CommerceContextValue<P extends Provider> = {
   providerRef: MutableRefObject<P>
   fetcherRef: MutableRefObject<Fetcher>
-} & CommerceConfig
+} & CommerceConfig &
+  Brand.Config
 
 export type CommerceProps<P extends Provider> = {
   children?: ReactNode
@@ -98,9 +99,9 @@ export function CoreCommerceProvider<P extends Provider>({
   const fetcherRef = useRef(provider.fetcher)
   // If the parent re-renders this provider will re-render every
   // consumer unless we memoize the config
-  const { locale, cartCookie } = providerRef.current
+  const { locale, cartCookie, brand = {} } = providerRef.current
   const cfg = useMemo(
-    () => ({ providerRef, fetcherRef, locale, cartCookie }),
+    () => ({ providerRef, fetcherRef, locale, cartCookie, brand }),
     [locale, cartCookie]
   )
 

packages/commerce/src/types/brand.ts

@@ -1,5 +1,5 @@
 import type { VFC } from 'react'
 
 export type Config = {
-  Logo: VFC
+  Logo?: VFC
 }

site/components/auth/ForgotPassword.tsx

@@ -1,11 +1,15 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
 import { useUI } from '@components/ui/context'
-import { Logo, Button, Input } from '@components/ui'
+import { AcmeLogo, Button, Input } from '@components/ui'
+import { useCommerce } from '@framework'
 
 interface Props {}
 
 const ForgotPassword: FC<Props> = () => {
+  // @ts-ignore
+  const { brand = {} } = useCommerce()
+  const { Logo = AcmeLogo } = brand
   // Form State
   const [email, setEmail] = useState('')
   const [loading, setLoading] = useState(false)

site/components/auth/LoginView.tsx

@@ -1,10 +1,14 @@
 import { FC, useEffect, useState, useCallback } from 'react'
-import { Logo, Button, Input } from '@components/ui'
+import { AcmeLogo, Button, Input } from '@components/ui'
 import useLogin from '@framework/auth/use-login'
 import { useUI } from '@components/ui/context'
 import { validate } from 'email-validator'
+import { useCommerce } from '@framework'
 
 const LoginView: React.FC = () => {
+  // @ts-ignore
+  const { brand = {} } = useCommerce()
+  const { Logo = AcmeLogo } = brand
   // Form State
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')

site/components/auth/SignUpView.tsx

@@ -2,12 +2,15 @@ import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
 import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
-import { Logo, Button, Input } from '@components/ui'
+import { AcmeLogo, Button, Input } from '@components/ui'
 import useSignup from '@framework/auth/use-signup'
 
 interface Props {}
 
 const SignUpView: FC<Props> = () => {
+  // @ts-ignore
+  const { brand = {} } = useCommerce()
+  const { Logo = AcmeLogo } = brand
   // Form State
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')

site/components/common/Footer/Footer.tsx

@@ -5,9 +5,10 @@ import { useRouter } from 'next/router'
 import type { Page } from '@commerce/types/page'
 import getSlug from '@lib/get-slug'
 import { Github, Vercel } from '@components/icons'
-import { Logo, Container } from '@components/ui'
+import { AcmeLogo, Container } from '@components/ui'
 import { I18nWidget } from '@components/common'
 import s from './Footer.module.css'
+import { useCommerce } from '@framework'
 
 interface Props {
   className?: string
@@ -25,6 +26,9 @@ const links = [
 const Footer: FC<Props> = ({ className, pages }) => {
   const { sitePages } = usePages(pages)
   const rootClassName = cn(s.root, className)
+  // @ts-ignore
+  const { brand = {} } = useCommerce()
+  const { Logo = AcmeLogo } = brand
 
   return (
     <footer className={rootClassName}>
@@ -33,7 +37,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div className="col-span-1 lg:col-span-2">
             <Link href="/">
               <a className="flex flex-initial items-center font-bold md:mr-24">
-                <span className="rounded-full border border-accent-6 mr-2">
+                <span className="rounded-full  mr-2">
                   <Logo />
                 </span>
                 <span>ACME</span>

site/components/common/Navbar/Navbar.tsx

@@ -2,9 +2,9 @@ import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
-import { Logo, Container } from '@components/ui'
+import { AcmeLogo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
-import { brand } from '@framework/brand'
+import { useCommerce } from '@framework'
 
 interface Link {
   href: string
@@ -14,7 +14,11 @@ interface Link {
 interface NavbarProps {
   links?: Link[]
 }
+
 const Navbar: FC<NavbarProps> = ({ links }) => {
+  // @ts-ignore
+  const { brand = {} } = useCommerce()
+  const { Logo = AcmeLogo } = brand
   return (
     <NavbarRoot>
       <Container clean className="mx-auto max-w-8xl px-6">
@@ -22,7 +26,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
           <div className="flex items-center flex-1">
             <Link href="/">
               <a className={s.logo} aria-label="Logo">
-                {brand.Logo ? <brand.Logo /> : <Logo />}
+                <Logo />
               </a>
             </Link>
             <nav className={s.navMenu}>

site/components/ui/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-const Logo = ({ className = '', ...props }) => (
+const AcmeLogo = ({ className = '', ...props }) => (
   <svg
     width="32"
     height="32"
@@ -18,4 +18,4 @@ const Logo = ({ className = '', ...props }) => (
   </svg>
 )
 
-export default Logo
+export default AcmeLogo

site/components/ui/index.ts

@@ -1,5 +1,5 @@
 export { default as Hero } from './Hero'
-export { default as Logo } from './Logo'
+export { default as AcmeLogo } from './Logo'
 export { default as Grid } from './Grid'
 export { default as Button } from './Button'
 export { default as Sidebar } from './Sidebar'