react-bricks 4.6.1 → 4.7.0-beta.1

package/astro/DynamicComponent.astro

@@ -0,0 +1,170 @@
+---
+import type { types } from 'react-bricks/astro'
+import { reactBricksAstroStore, AstroBrick } from 'react-bricks/astro'
+import PageViewer from 'react-bricks/astro/PageViewer.astro'
+
+// import type { types } from '@/shared/types'
+// import reactBricksAstroStore from '../../ReactBricks/reactBricksAstroStore'
+// import AstroBrick from '../AstroBrick'
+// import PageViewer from './PageViewer.astro'
+
+interface Props {
+  block: types.IContentBlock
+  index?: number
+  itemsCount?: number
+  page?: types.Page
+  [x: string]: unknown
+}
+
+let error = false
+const { block, index, itemsCount, page, ...props } = Astro.props as Props
+const config = reactBricksAstroStore.getConfig()
+if (!config) {
+  console.warn('React Bricks Store is not initialized')
+  error = true
+}
+
+reactBricksAstroStore.setBlock(block)
+
+// console.log('DynamicComponent', import.meta.env.SSR, !!config)
+const Brick = reactBricksAstroStore.getBrick(block)
+
+let blockProps = { ...block.props, ...props }
+
+if (!Brick) {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(`Missing component for block type "${block.type}"`)
+  }
+  error = true
+} else {
+  // Apply mapExternalDataToProps if it is defined
+  // and externalData is supplied
+  if (
+    Brick.schema.mapExternalDataToProps &&
+    typeof Brick.schema.mapExternalDataToProps === 'function' &&
+    page?.externalData &&
+    typeof page.externalData === 'object'
+  ) {
+    blockProps = {
+      ...blockProps,
+      ...Brick.schema.mapExternalDataToProps(page.externalData, block.props),
+    }
+  }
+}
+
+function trimEndChar(str: string, charToRemove: string) {
+  return str.endsWith(charToRemove) ? str.slice(0, -1) : str
+}
+
+const pathname =
+  Astro.url.pathname === '/'
+    ? Astro.url.pathname
+    : trimEndChar(Astro.url.pathname || '', '/')
+---
+
+{
+  error || !Brick ? (
+    ''
+  ) : blockProps['RB_PAGE_EMBED'] &&
+    blockProps['RB_PAGE_EMBED_CONTENT'] &&
+    blockProps['RB_PAGE_EMBED_CONTENT'].statusCode !== 404 &&
+    blockProps['RB_PAGE_EMBED_CONTENT'].error !== 'Not found' ? (
+    <PageViewer page={blockProps['RB_PAGE_EMBED_CONTENT']} main={false} />
+  ) : !Brick.schema.astroInteractivity ? (
+    <AstroBrick
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : Brick.schema.astroInteractivity === 'load' ||
+    (Brick.schema.astroInteractivity as any).load === true ? (
+    <AstroBrick
+      client:load
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : Brick.schema.astroInteractivity === 'idle' ||
+    (Brick.schema.astroInteractivity as any).idle === true ? (
+    <AstroBrick
+      client:idle
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!(Brick.schema.astroInteractivity as any).idle?.timeout ? (
+    <AstroBrick
+      client:idle={{
+        timeout: (Brick.schema.astroInteractivity as any).idle?.timeout,
+      }}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : Brick.schema.astroInteractivity === 'visible' ||
+    (Brick.schema.astroInteractivity as any).visible === true ? (
+    <AstroBrick
+      client:visible
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!(Brick.schema.astroInteractivity as any).visible?.rootMargin ? (
+    <AstroBrick
+      client:visible={{
+        rootMargin: (Brick.schema.astroInteractivity as any).visible
+          ?.rootMargin,
+      }}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!(Brick.schema.astroInteractivity as any).media ? (
+    <AstroBrick
+      client:media={(Brick.schema.astroInteractivity as any).media}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!(Brick.schema.astroInteractivity as any).only ? (
+    <AstroBrick
+      client:only={(Brick.schema.astroInteractivity as any).only}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : (
+    <AstroBrick
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  )
+}

package/astro/PageViewer.astro

@@ -0,0 +1,47 @@
+---
+import type { types } from 'react-bricks/astro'
+import { reactBricksAstroStore, ClickToEdit } from 'react-bricks/astro'
+import DynamicComponent from 'react-bricks/astro/DynamicComponent.astro'
+
+// import type { types } from '@/shared/types'
+// import reactBricksAstroStore from '../../ReactBricks/reactBricksAstroStore'
+// import ClickToEdit from '../ClickToEdit'
+// import DynamicComponent from './DynamicComponent.astro'
+
+interface Props {
+  page: types.Page
+  main?: boolean
+}
+
+let error = false
+const { page, main } = Astro.props as Props
+
+if (!page) {
+  console.error(`Page not found.`)
+  error = true
+}
+
+reactBricksAstroStore.setPage(page)
+
+const pageType = reactBricksAstroStore.getPageType(page)
+
+if (!pageType) {
+  console.error(`Unknown pageType ${page.type}.`)
+  error = true
+}
+
+// console.log('is main?', !!main, page.name)
+---
+
+{
+  error
+    ? ''
+    : (page?.content?.map((block, index) => (
+        <DynamicComponent
+          page={page}
+          key={`${block.id}-${index}`}
+          {...{ block }}
+        />
+      )) ?? null)
+}
+{!!main ? <ClickToEdit client:idle page={page} /> : ''}

package/astro/index.js

@@ -0,0 +1 @@
+"use strict";require("intersection-observer");var e=require("../react-bricks-DBsyFafC.js"),t=require("../react-bricks-1Be065Jm.js"),r=require("react"),n=require("react-icons/fi"),o=require("../react-bricks-BFoJ4_oR.js");require("../react-bricks-Btf-citH.js"),require("classnames"),require("../react-bricks-BNm3bMhQ.js"),require("ts-md5");var i,s="c"+(i=5,e.__spreadArray([],e.__read(Array(i)),!1).map((function(){return(~~(36*Math.random())).toString(36)})).join("")),a=function(){return r.createElement(r.Fragment,null,r.createElement("style",null,"\n.".concat(s," {\n  display:block;\n  position: fixed;\n  box-sizing: border-box;\n  z-index: 999;\n  bottom: 20px;\n  left: 20px;\n  padding: 5px 12px;\n  background-color: #ffffffdd;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #1e293b;\n  font-size: 11px;\n  font-weight: 600;\n  border: 1px solid #e2e8f0cc;\n  border-radius: 20px;\n  text-transform: uppercase;\n  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n  filter: none;\n  transition: all 300ms ease;\n}\n.").concat(s,":hover {\n  background-color: #ffffff;\n  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));\n}\n.").concat(s," .l {\n  transition: color 300ms ease;\n}\n.").concat(s,":hover .l {\n  color: #f65a8e;\n}\n      ")),r.createElement("a",{href:"https://reactbricks.com?utm_campaign=site-badge",target:"_blank",className:s},r.createElement("img",{src:"https://reactbricks.com/_next/static/media/reactbricks_icon.c57a7be4.svg",style:{width:18,height:18,marginRight:6}}),r.createElement("span",null,"Made in ",r.createElement("span",{className:"l"},"React Bricks"))))},c=t.reactBricksAstroStore.getBricks,l=t.reactBricksAstroStore.getPageValues,p=t.reactBricksAstroStore.getBlockValue,d=t.reactBricksAstroStore.isAdmin;t.reactBricksAstroStore.register,Object.defineProperty(exports,"types",{enumerable:!0,get:function(){return e.types}}),exports.File=t.File,exports.Image=t.Image,exports.Link=t.Link,exports.Repeater=t.Repeater,exports.RichText=t.CompatibleRichText,exports.RichTextExt=t.RichText,exports.Text=t.Text,exports.reactBricksAstroStore=t.reactBricksAstroStore,exports.useAdminContext=t.useAdminContext,exports.usePageValues=t.usePageValues,exports.useReactBricksContext=t.useReactBricksContext,exports.useVisualEdit=t.useVisualEdit,exports.Plain=o.Plain,exports.AstroBrick=function(n){var o=n.index,i=n.itemsCount,s=n.blockProps,a=n.page,c=n.block,l=n.pathname,p=void 0===l?"":l,d=t.reactBricksAstroStore.getBrick(c);return d?(t.reactBricksAstroStore.setPathname(p),r.createElement(d,e.__assign({},s,{key:s.key,index:o,itemsCount:i,__page:a,__block:c}))):("development"===process.env.NODE_ENV&&console.warn('Missing component for block type "'.concat(c.type,'"')),null)},exports.ClickToEdit=function(i){var s,c,l=i.page,p=e.__read(r.useState(!1),2),d=p[0],u=p[1],x=t.useReactBricksContext();if(r.useEffect((function(){u(!0)}),[]),!d)return null;if(!x)return null;var m,f=(null===(s=null==l?void 0:l.customValues)||void 0===s?void 0:s.___t)&&!o.isPaidPlan(null===(c=l.customValues)||void 0===c?void 0:c.___t),g=localStorage.getItem(e.AUTH_TOKEN_LS_KEY);if(g&&g.length>10&&g.startsWith("ey")){if((null==x?void 0:x.clickToEditSide)===e.types.ClickToEditSide.None)return null;var k=x||{navigate:function(){}},b=k.navigate,h=k.editorPath,E=k.clickToEditSide,y={};return E===e.types.ClickToEditSide.BottomRight&&(y.bottom=50,y.right=0,y.borderTopLeftRadius=999,y.borderBottomLeftRadius=999,y.transform="translate(8px,0)"),E===e.types.ClickToEditSide.BottomLeft&&(y.bottom=50,y.left=0,y.borderTopRightRadius=999,y.borderBottomRightRadius=999,y.transform="translate(-8px,0)"),E===e.types.ClickToEditSide.TopRight&&(y.top=50,y.right=0,y.borderTopLeftRadius=999,y.borderBottomLeftRadius=999,y.transform="translate(8px,0)"),E===e.types.ClickToEditSide.TopLeft&&(y.top=50,y.left=0,y.borderTopRightRadius=999,y.borderBottomRightRadius=999,y.transform="translate(-8px,0)"),r.createElement(r.Fragment,null,r.createElement("style",null,"\n.rb-click-to-edit {\n  position: fixed;\n  z-index: 10;\n  width: 61px;\n  height: 38px;\n  background-color: #f65a8e;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #fff;\n  font-size: 20px;\n  cursor: pointer;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  transition: all 150ms ease;\n  border: 2px solid #fff;\n}\n.rb-click-to-edit-left:hover {\n  transform: translate(-2px,0)!important;\n}\n.rb-click-to-edit-right:hover {\n  transform: translate(2px,0)!important;\n}\n      "),r.createElement("div",{className:"rb-click-to-edit ".concat((m=E,m===e.types.ClickToEditSide.TopLeft||m===e.types.ClickToEditSide.BottomLeft?"rb-click-to-edit-left":"rb-click-to-edit-right")),style:y,onClick:function(){return b("".concat(h,"?p=").concat(encodeURIComponent(l.id),"&l=").concat(l.language))}},r.createElement(n.FiEdit,null)),f&&r.createElement(a,null))}return f&&r.createElement(a,null)},exports.getBlockValue=p,exports.getBricks=c,exports.getPageValues=l,exports.isAdmin=d;

package/astro/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "react-bricks-astro",
+  "version": "4.7.0-beta.1",
+  "main": "index.js",
+  "module": "react-bricks-astro.esm.js",
+  "types": "./react-bricks-astro.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./react-bricks-astro.esm.js",
+      "default": "./react-bricks-astro.esm.js",
+      "types": "./react-bricks-astro.d.ts"
+    },
+    "./DynamicComponent.astro": "./DynamicComponent.astro",
+    "./PageViewer.astro": "./PageViewer.astro"
+  }
+}