react-bricks 4.6.0 → 4.7.0-alpha.0

package/astro/DynamicComponent.astro

@@ -0,0 +1,174 @@
+---
+import type { types } from 'react-bricks/astro'
+import { reactBricksAstroStore, AstroBrick } from 'react-bricks/astro'
+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)
+
+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 {
+  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 || '', '/')
+
+const isDev = import.meta.env.DEV
+---
+
+{
+  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 && isDev ? (
+    <AstroBrick
+      client:only
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : Brick.schema.astroInteractivity === 'load' ||
+    Brick.schema.astroInteractivity.load === true ? (
+    <AstroBrick
+      client:load
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : Brick.schema.astroInteractivity === 'idle' ||
+    Brick.schema.astroInteractivity.idle === true ? (
+    <AstroBrick
+      client:idle
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!Brick.schema.astroInteractivity.idle?.timeout ? (
+    <AstroBrick
+      client:idle={{
+        timeout: Brick.schema.astroInteractivity.idle?.timeout,
+      }}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : Brick.schema.astroInteractivity === 'visible' ||
+    Brick.schema.astroInteractivity.visible === true ? (
+    <AstroBrick
+      client:visible
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!Brick.schema.astroInteractivity.visible?.rootMargin ? (
+    <AstroBrick
+      client:visible={{
+        rootMargin: Brick.schema.astroInteractivity.visible?.rootMargin,
+      }}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!Brick.schema.astroInteractivity.media ? (
+    <AstroBrick
+      client:media={Brick.schema.astroInteractivity.media}
+      blockProps={blockProps}
+      index={index}
+      itemsCount={itemsCount}
+      page={page}
+      block={block}
+      pathname={pathname}
+    />
+  ) : !!Brick.schema.astroInteractivity.only ? (
+    <AstroBrick
+      client:only={Brick.schema.astroInteractivity.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,56 @@
+---
+import type { types } from 'react-bricks/astro'
+import { ClickToEdit, reactBricksAstroStore } from 'react-bricks/astro'
+import DynamicComponent from './DynamicComponent.astro'
+import TemplateViewer from './TemplateViewer.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
+}
+---
+
+{
+  error ? (
+    ''
+  ) : pageType.template ? (
+    <TemplateViewer page={page} pageType={pageType} />
+  ) : (
+    (page?.content?.map((block: any, index: any) => (
+      <DynamicComponent
+        page={page}
+        key={`${block.id}-${index}`}
+        {...{ block }}
+      />
+    )) ?? null)
+  )
+}
+{
+  !!main && !!page ? (
+    <ClickToEdit
+      client:idle
+      customValues={page.customValues}
+      id={page.id}
+      language={page.language}
+    />
+  ) : (
+    ''
+  )
+}

package/astro/Slot.astro

@@ -0,0 +1,40 @@
+---
+import type { types } from 'react-bricks/astro'
+import reactBricksAstroStore from '../../ReactBricks/reactBricksAstroStore'
+import SlotViewer from './SlotViewer.astro'
+
+interface Props {
+  page: types.Page
+  name: string
+}
+
+let error = false
+const { page, name } = Astro.props as Props
+
+reactBricksAstroStore.setPage(page)
+
+if (!page) {
+  error = true
+}
+
+const pageType = reactBricksAstroStore.getPageType(page)
+
+if (!pageType) {
+  console.error(`Unknown pageType ${page.type}.`)
+  error = true
+}
+
+if (!pageType?.template) {
+  console.error(`Page ${page.name} has no Template defined.`)
+  error = true
+}
+
+const slot = pageType?.template?.find((slot) => slot.slotName === name)
+
+if (!slot) {
+  console.error(`Slot ${name} not found in ${pageType} page type.`)
+  error = true
+}
+---
+
+{error ? '' : <SlotViewer page={page} slotName={name} />}

package/astro/SlotViewer.astro

@@ -0,0 +1,38 @@
+---
+import type { types } from 'react-bricks/astro'
+import DynamicComponent from './DynamicComponent.astro'
+
+interface Props {
+  page: types.Page
+  slotName: string
+}
+
+let error = false
+const { page, slotName } = Astro.props as Props
+
+const slotBlock = page.content.find(
+  (block) =>
+    block.type === '__RB_TEMPLATE_SLOT' && block.props['slotName'] === slotName
+)
+if (!slotBlock) {
+  console.error(`Slot ${slotName} not found.`)
+  error = true
+}
+if (!slotBlock?.props['slotItems'] || !slotBlock?.props['slotItems'].length) {
+  error = true
+}
+---
+
+{
+  error
+    ? ''
+    : ((slotBlock?.props['slotItems'] as types.IContentBlock[]).map(
+        (block, index) => (
+          <DynamicComponent
+            page={page}
+            key={`${block.id}-${index}`}
+            {...{ block }}
+          />
+        )
+      ) ?? null)
+}

package/astro/TemplateViewer.astro

@@ -0,0 +1,24 @@
+---
+import type { types } from 'react-bricks/astro'
+import SlotViewer from './SlotViewer.astro'
+
+interface Props {
+  page: types.Page
+  pageType: types.IPageType
+}
+let error = false
+const { page, pageType } = Astro.props as Props
+
+if (!pageType.template || !pageType.template.length) {
+  console.error(`Template not found.`)
+  error = true
+}
+---
+
+{
+  error
+    ? ''
+    : pageType?.template?.map((slot) => (
+        <SlotViewer page={page} slotName={slot.slotName} />
+      ))
+}

package/astro/index.js

@@ -0,0 +1,2 @@
+"use strict";require("intersection-observer");var e=require("../react-bricks-CXY4gR9A.js"),t=require("react"),r=require("../react-bricks-BgfLLAM0.js"),n=require("react-icons/fi"),o=require("../react-bricks-Bv9phTdZ.js");require("../react-bricks-DRIKzHUS.js"),require("classnames"),require("../react-bricks-1YD00zjF.js"),require("../react-bricks-DouXS5I0.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 t.createElement(t.Fragment,null,t.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      ")),t.createElement("a",{href:"https://reactbricks.com?utm_campaign=site-badge",target:"_blank",className:s},t.createElement("img",{src:"https://reactbricks.com/_next/static/media/reactbricks_icon.c57a7be4.svg",style:{width:18,height:18,marginRight:6}}),t.createElement("span",null,"Made in ",t.createElement("span",{className:"l"},"React Bricks"))))},c=r.reactBricksAstroStore.getBricks,l=r.reactBricksAstroStore.getPageValues,d=r.reactBricksAstroStore.getBlockValue,p=r.reactBricksAstroStore.isAdmin;r.reactBricksAstroStore.register,Object.defineProperty(exports,"types",{enumerable:!0,get:function(){return e.types}}),exports.File=r.File,exports.Image=r.Image,exports.Link=r.Link,exports.List=r.ListAstro,exports.Repeater=r.Repeater,exports.RichText=r.CompatibleRichText,exports.RichTextExt=r.RichText,exports.Text=r.Text,exports.reactBricksAstroStore=r.reactBricksAstroStore,exports.useAdminContext=r.useAdminContext,exports.usePageValues=r.usePageValues,exports.useReactBricksContext=r.useReactBricksContext,exports.useVisualEdit=r.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,d=void 0===l?"":l,p=e.__read(t.useState(r.reactBricksAstroStore.isRegistered()),2),u=p[0],f=p[1];if(t.useEffect((function(){return r.reactBricksAstroStore.__subscribeConfig((function(){f(!0)}))}),[]),"undefined"!=typeof window&&!u)return null;a&&r.reactBricksAstroStore.setPage(a);var x=r.reactBricksAstroStore.getBrick(c);return x?(r.reactBricksAstroStore.setPathname(d),t.createElement(x,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=i.customValues,c=i.id,l=i.language,d=e.__read(t.useState(!1),2),p=d[0],u=d[1],f=r.useReactBricksContext();if(t.useEffect((function(){u(!0)}),[]),!p)return null;var x=(null==s?void 0:s.___t)&&!o.isPaidPlan(null==s?void 0:s.___t)?t.createElement(a,null):null;if(!f)return x;var m,g=localStorage.getItem(e.AUTH_TOKEN_LS_KEY);if(g&&g.length>10&&g.startsWith("ey")){if((null==f?void 0:f.clickToEditSide)===e.types.ClickToEditSide.None)return x;var k=f||{navigate:function(){}},b=k.navigate,h=k.editorPath,E=k.clickToEditSide,_={};return E===e.types.ClickToEditSide.BottomRight&&(_.bottom=50,_.right=0,_.borderTopLeftRadius=999,_.borderBottomLeftRadius=999,_.transform="translate(8px,0)"),E===e.types.ClickToEditSide.BottomLeft&&(_.bottom=50,_.left=0,_.borderTopRightRadius=999,_.borderBottomRightRadius=999,_.transform="translate(-8px,0)"),E===e.types.ClickToEditSide.TopRight&&(_.top=50,_.right=0,_.borderTopLeftRadius=999,_.borderBottomLeftRadius=999,_.transform="translate(8px,0)"),E===e.types.ClickToEditSide.TopLeft&&(_.top=50,_.left=0,_.borderTopRightRadius=999,_.borderBottomRightRadius=999,_.transform="translate(-8px,0)"),t.createElement(t.Fragment,null,t.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      "),t.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:_,onClick:function(){return b("".concat(h,"?p=").concat(encodeURIComponent(c),"&l=").concat(l))}},t.createElement(n.FiEdit,null)),x)}return x},exports.getBlockValue=d,exports.getBricks=c,exports.getPageValues=l,exports.isAdmin=p;
+//# sourceMappingURL=index.js.map

package/astro/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-bricks-astro",
+  "version": "4.7.0-alpha.0",
+  "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",
+    "./Slot.astro": "./Slot.astro",
+    "./SlotViewer.astro": "./SlotViewer.astro",
+    "./TemplateViewer.astro": "./TemplateViewer.astro"
+  }
+}