Editor demo

site/components/checkout/context.tsx

@@ -65,7 +65,7 @@ const checkoutReducer = (state: State, action: Action): State => {
   }
 }
 
-export const CheckoutProvider: FC = (props) => {
+export const CheckoutProvider: FC<{ children?: React.ReactNode }> = (props) => {
   const [state, dispatch] = useReducer(checkoutReducer, initialState)
 
   const setCardFields = useCallback(
@@ -86,7 +86,10 @@ export const CheckoutProvider: FC = (props) => {
 
   const cardFields = useMemo(() => state.cardFields, [state.cardFields])
 
-  const addressFields = useMemo(() => state.addressFields, [state.addressFields])
+  const addressFields = useMemo(
+    () => state.addressFields,
+    [state.addressFields]
+  )
 
   const value = useMemo(
     () => ({
@@ -96,7 +99,13 @@ export const CheckoutProvider: FC = (props) => {
       setAddressFields,
       clearCheckoutFields,
     }),
-    [cardFields, addressFields, setCardFields, setAddressFields, clearCheckoutFields]
+    [
+      cardFields,
+      addressFields,
+      setCardFields,
+      setAddressFields,
+      clearCheckoutFields,
+    ]
   )
 
   return <CheckoutContext.Provider value={value} {...props} />

site/components/common/Layout/Layout.tsx

@@ -49,6 +49,7 @@ const Modal = dynamic(() => import('@components/ui/Modal'), {
 })
 
 interface Props {
+  children?: React.ReactNode
   pageProps: {
     pages?: Page[]
     categories: Category[]
@@ -118,7 +119,7 @@ const Layout: React.FC<Props> = ({
       href: '/product/lightweight-jacket',
     },
     {
-      label: 'Source',
+      label: 'Source Code',
       href: 'https://github.com/BuilderIO/nextjs-edge-personalization-demo',
       external: true,
     },

site/components/common/Navbar/Navbar.tsx

@@ -4,6 +4,7 @@ import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
+import { Builder } from '@builder.io/react'
 
 interface Link {
   href: string
@@ -29,7 +30,16 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
             {links?.map((l) => (
               <Link href={l.href} key={l.href}>
                 <a
-                  {...(l.external ? { target: '_blank' } : {})}
+                  {...(l.external
+                    ? {
+                        target: '_blank',
+                        onClick: () => {
+                          if (Builder.isEditing) {
+                            open(l.href, '_blank')
+                          }
+                        },
+                      }
+                    : {})}
                   className={s.link}
                 >
                   {l.label}

site/components/common/Navbar/NavbarRoot.tsx

@@ -3,7 +3,7 @@ import throttle from 'lodash.throttle'
 import cn from 'clsx'
 import s from './Navbar.module.css'
 
-const NavbarRoot: FC = ({ children }) => {
+const NavbarRoot: FC<{ children?: React.ReactNode }> = ({ children }) => {
   const [hasScrolled, setHasScrolled] = useState(false)
 
   useEffect(() => {

site/components/common/SidebarLayout/SidebarLayout.tsx

@@ -4,7 +4,7 @@ import { UserNav } from '@components/common'
 import cn from 'clsx'
 import s from './SidebarLayout.module.css'
 
-type ComponentProps = { className?: string } & (
+type ComponentProps = { className?: string; children?: React.ReactNode } & (
   | { handleClose: () => any; handleBack?: never }
   | { handleBack: () => any; handleClose?: never }
 )

site/components/ui/Grid/Grid.tsx

@@ -4,7 +4,7 @@ import s from './Grid.module.css'
 
 interface GridProps {
   className?: string
-  children?: ReactNode[] | Component[] | any[]
+  children?: React.ReactNode
   layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
   variant?: 'default' | 'filled'
 }

site/components/ui/Link/Link.tsx

@@ -1,6 +1,11 @@
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
+import React from 'react'
 
-const Link: React.FC<NextLinkProps> = ({ href, children, ...props }) => {
+const Link: React.FC<NextLinkProps & { children?: React.ReactNode }> = ({
+  href,
+  children,
+  ...props
+}) => {
   return (
     <NextLink href={href}>
       <a {...props}>{children}</a>

site/components/ui/Skeleton/Skeleton.tsx

@@ -11,6 +11,7 @@ interface SkeletonProps {
   width?: string | number
   height?: string | number
   boxHeight?: string | number
+  children?: React.ReactNode
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({

site/components/ui/context.tsx

@@ -124,7 +124,7 @@ function uiReducer(state: State, action: Action) {
   }
 }
 
-export const UIProvider: FC = (props) => {
+export const UIProvider: FC<{ children?: React.ReactNode }> = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = useCallback(
@@ -209,7 +209,9 @@ export const useUI = () => {
   return context
 }
 
-export const ManagedUIContext: FC = ({ children }) => (
+export const ManagedUIContext: FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => (
   <UIProvider>
     <ThemeProvider>{children}</ThemeProvider>
   </UIProvider>

site/components/with-tooltip.js

@@ -0,0 +1,34 @@
+import { Builder } from '@builder.io/react'
+import Tooltip from '@mui/material/Tooltip'
+
+// HOC to add a tooltip to a component's source on hover, for demo purposes
+export function withTooltip(url, Component) {
+  return function SourceCodeTooltipWrappedComponent(props) {
+    return (
+      <Tooltip
+        // Only display when editing
+        open={Builder.isEditing ? undefined : false}
+        title={
+          <div
+            style={{
+              fontSize: 14,
+              fontWeight: 'bold',
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              // Open with JS so will open in visual editor
+              // (by default links are intentionally disabled in the visual editor)
+              open(url, '_blank')
+            }}
+          >
+            Click here to view my source code
+          </div>
+        }
+      >
+        <div>
+          <Component {...props} />
+        </div>
+      </Tooltip>
+    )
+  }
+}

site/config/builder.ts

@@ -1,5 +1,6 @@
 import dynamic from 'next/dynamic'
 import { Builder, withChildren } from '@builder.io/react'
+import { withTooltip } from '../components/with-tooltip'
 
 export default {
   // Put your Builder public API key here:
@@ -11,7 +12,10 @@ export default {
 Builder.registerComponent(
   // We dynamically import components so they are only downloaded in the browser
   // when used
-  dynamic(() => import('../components/ui/Hero')),
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/ui/Hero/Hero.tsx',
+    dynamic(() => import('../components/ui/Hero'))
+  ),
   {
     name: 'Hero',
     image:
@@ -32,14 +36,20 @@ Builder.registerComponent(
 )
 
 Builder.registerComponent(
-  dynamic(() => import('../components/common/Searchbar')),
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/common/Searchbar/Searchbar.tsx',
+    dynamic(() => import('../components/common/Searchbar'))
+  ),
   {
     name: 'Searchbar',
     image: 'https://tabler-icons.io/static/tabler-icons/icons-png/search.png',
   }
 )
 Builder.registerComponent(
-  dynamic(() => import('../components/ui/Rating')),
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/ui/Rating/Rating.tsx',
+    dynamic(() => import('../components/ui/Rating'))
+  ),
   {
     name: 'Rating',
     image: 'https://tabler-icons.io/static/tabler-icons/icons-png/stars.png',
@@ -53,7 +63,10 @@ Builder.registerComponent(
   }
 )
 Builder.registerComponent(
-  dynamic(() => import('../components/ui/ButtonLink')),
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/ui/ButtonLink/ButtonLink.tsx',
+    dynamic(() => import('../components/ui/ButtonLink'))
+  ),
   {
     name: 'Button',
     image:
@@ -75,8 +88,11 @@ Builder.registerComponent(
 )
 
 Builder.registerComponent(
-  dynamic(async () =>
-    withChildren((await import('../components/ui/Container')).default)
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/ui/Container/Container.tsx',
+    dynamic(async () =>
+      withChildren((await import('../components/ui/Container')).default)
+    )
   ),
   {
     name: 'Container',
@@ -90,7 +106,10 @@ Builder.registerComponent(
 )
 
 Builder.registerComponent(
-  dynamic(() => import('../components/common/ProductCell/ProductCell')),
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/common/ProductCell/ProductCell.tsx',
+    dynamic(() => import('../components/common/ProductCell/ProductCell'))
+  ),
   {
     name: 'Product Cell',
     image:
@@ -115,8 +134,11 @@ Builder.registerComponent(
 )
 
 Builder.registerComponent(
-  dynamic(async () =>
-    withChildren(await (await import('../components/ui/Collapse')).default)
+  withTooltip(
+    'https://github.com/BuilderIO/nextjs-edge-personalization-demo/blob/main/site/components/ui/Collapse/Collapse.tsx',
+    dynamic(async () =>
+      withChildren((await import('../components/ui/Collapse')).default)
+    )
   ),
   {
     name: 'Collapse',

site/lib/click-outside/click-outside.tsx

@@ -14,6 +14,7 @@ interface ClickOutsideProps {
   active: boolean
   onClick: (e?: MouseEvent) => void
   ref?: Ref<any>
+  children?: React.ReactNode
 }
 
 /**

site/package.json

@@ -14,10 +14,14 @@
   "sideEffects": false,
   "dependencies": {
     "@builder.io/personalization-utils": "^1.1.1",
-    "@builder.io/react": "^2.0.3",
+    "@builder.io/react": "^2.0.9",
     "@builder.io/utils": "^1.1.3",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.3",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
     "@react-spring/web": "^9.4.1",
+    "@types/react": "^18.0.18",
     "@vercel/commerce": "^0.0.1",
     "@vercel/commerce-bigcommerce": "^0.0.1",
     "@vercel/commerce-commercejs": "^0.0.1",
@@ -58,7 +62,6 @@
     "@types/lodash.random": "^3.2.6",
     "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^17.0.8",
-    "@types/react": "^17.0.38",
     "eslint": "^8.6.0",
     "eslint-config-next": "^12.0.8",
     "eslint-config-prettier": "^8.3.0",

site/pages/_app.tsx

@@ -7,7 +7,9 @@ import type { AppProps } from 'next/app'
 import { Head } from '@components/common'
 import { ManagedUIContext } from '@components/ui/context'
 
-const Noop: FC = ({ children }) => <>{children}</>
+const Noop: FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <>{children}</>
+)
 
 export default function MyApp({ Component, pageProps }: AppProps) {
   const Layout = (Component as any).Layout || Noop