@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/src/components/ContentGroup/ContentGroupAccordion.js

@@ -0,0 +1,160 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useRouter } from 'next/router';
+import { VscChevronUp, VscChevronDown } from 'react-icons/vsc';
+import { CONTENT_GROUP, OPEN_STATES } from './constants';
+
+const ContentGroupAccordion = ({
+  name,
+  groupSections,
+  sectionsData,
+  VariantComponent,
+  openState,
+  groupSectionProps,
+  groupSectionTitleProps,
+  groupContentWrapperProps,
+  groupContentProps
+}) => {
+  const router = useRouter();
+  const { asPath } = router;
+
+  const sectionPairs = useMemo(
+    () =>
+      sectionsData.map(([sectionName, sectionLabel]) => ({
+        sectionName,
+        sectionLabel,
+        panelId: `${sectionName}-panel`
+      })),
+    [sectionsData]
+  );
+
+  const sectionNames = useMemo(() => sectionPairs.map(p => p.sectionName), [sectionPairs]);
+
+  const baseInitialOpen = useMemo(() => {
+    if (openState === OPEN_STATES.ALL_OPEN) return new Set(sectionNames);
+    if (openState === OPEN_STATES.ALL_CLOSED && sectionNames.length) return new Set();
+
+    return new Set([sectionNames[0]]);
+  }, [openState, sectionNames]);
+
+  const [openSet, setOpenSet] = useState(baseInitialOpen);
+
+  useEffect(
+    () => {
+      const rawHash = (asPath.split('#')[1] || '').trim();
+      if (rawHash && sectionNames.includes(rawHash) && !openSet.has(rawHash)) {
+        setOpenSet(prev => {
+          const next = new Set(prev);
+          next.add(rawHash);
+          return next;
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [asPath, sectionNames]
+  );
+
+  const WrapperComponent = VariantComponent || 'div';
+
+  const baseClass = `${CONTENT_GROUP}-accordion`;
+  const itemsClass = `${baseClass}__items`;
+  const itemClass = `${baseClass}__item`;
+  const headerBtnClass = `${baseClass}__header-btn`;
+  const panelClass = `${baseClass}__panel`;
+  const headingClass = `${baseClass}__heading`;
+  const titleClass = `${baseClass}__title`;
+  const chevronClass = `${baseClass}__chevron`;
+  const chevronIconClass = `${baseClass}__chevron-icon`;
+
+  const onToggle = sectionName => {
+    setOpenSet(prev => {
+      const next = new Set(prev);
+      const willOpen = !next.has(sectionName);
+
+      if (willOpen) next.add(sectionName);
+      else next.delete(sectionName);
+
+      const baseUrl = asPath.split('#')[0];
+      const newUrl = willOpen ? `${baseUrl}#${sectionName}` : baseUrl;
+
+      router.replace(`/Resolver`, newUrl, { shallow: true, scroll: false });
+
+      return next;
+    });
+  };
+
+  return (
+    <div className={baseClass}>
+      <div className={itemsClass} aria-label={name}>
+        {groupSections.map((groupSection, index) => {
+          const { sectionName, sectionLabel, panelId } = sectionPairs[index];
+          const isOpen = openSet.has(sectionName);
+
+          return (
+            <div
+              key={sectionName}
+              className={classnames(itemClass, { [`${itemClass}--open`]: isOpen })}
+              {...groupSectionProps}>
+              <h3 className={headingClass}>
+                <button
+                  id={sectionName}
+                  type="button"
+                  className={classnames(headerBtnClass, { [`${headerBtnClass}--open`]: isOpen })}
+                  aria-expanded={isOpen}
+                  aria-controls={panelId}
+                  onClick={() => onToggle(sectionName)}>
+                  <span className={titleClass} {...groupSectionTitleProps}>
+                    {sectionLabel}
+                  </span>
+
+                  <span aria-hidden="true" className={chevronClass}>
+                    {isOpen ? (
+                      <VscChevronUp className={chevronIconClass} />
+                    ) : (
+                      <VscChevronDown className={chevronIconClass} />
+                    )}
+                  </span>
+                </button>
+              </h3>
+
+              <WrapperComponent
+                id={panelId}
+                role="region"
+                aria-labelledby={sectionName}
+                className={panelClass}
+                hidden={!isOpen}
+                data-section={sectionName}
+                {...groupContentWrapperProps}>
+                <div {...groupContentProps}>{groupSection}</div>
+              </WrapperComponent>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+ContentGroupAccordion.propTypes = {
+  name: PropTypes.string.isRequired,
+  groupSections: PropTypes.array.isRequired,
+  sectionsData: PropTypes.array.isRequired,
+  VariantComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]),
+  openState: PropTypes.oneOf(Object.values(OPEN_STATES)),
+  groupSectionProps: PropTypes.object,
+  groupSectionTitleProps: PropTypes.object,
+  groupContentWrapperProps: PropTypes.object,
+  groupContentProps: PropTypes.object
+};
+
+ContentGroupAccordion.defaultProps = {
+  VariantComponent: null,
+  openState: OPEN_STATES.ALL_CLOSED,
+  groupSectionProps: {},
+  groupSectionTitleProps: {},
+  groupContentWrapperProps: {},
+  groupContentProps: {}
+};
+
+export default ContentGroupAccordion;

package/src/components/ContentGroup/ContentGroupDataFetcher.js

@@ -0,0 +1,74 @@
+import React, { useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useQuery, gql } from '@apollo/client';
+import { MainContext } from '@blaze-cms/nextjs-components';
+import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
+import ContentGroupTabs from './ContentGroupTabs';
+import ContentGroupAccordion from './ContentGroupAccordion';
+import { buildDataSections } from './helpers';
+import { CONTENT_GROUP_TYPES } from './constants';
+
+const PLACEHOLDER_QUERY = gql`
+  query {
+    __typename
+  }
+`;
+
+const ContentGroupDataFetcher = ({ dataProperty, parent, contentType, ...props }) => {
+  const { isPreview } = useContext(MainContext);
+  const dataPropertyName = Array.isArray(dataProperty) ? dataProperty[0] : dataProperty;
+
+  const { data: schemaData, loading: schemaLoading } = useQuery(getSingleEntitySchema, {
+    variables: { id: parent?.itemEntity },
+    skip: !parent?.itemEntity || !dataPropertyName
+  });
+
+  const dataQuery = useMemo(() => {
+    if (!schemaData) return null;
+    const { getEntitySchema } = schemaData;
+    const { actions: { getPublished, get } = {} } = getEntitySchema;
+    const actionKey = isPreview ? get : getPublished || get;
+    if (!actionKey) return null;
+    return generateSingleItemQuery(actionKey, `${dataPropertyName} { label text }`);
+  }, [schemaData, isPreview, dataPropertyName]);
+
+  const { data: recordData, loading: recordLoading } = useQuery(dataQuery || PLACEHOLDER_QUERY, {
+    variables: { id: parent?.itemId },
+    skip: !dataQuery || !parent?.itemId
+  });
+
+  if (schemaLoading || recordLoading) return '';
+  if (!recordData?.entityData) return null;
+
+  const propertyData = recordData.entityData[dataPropertyName];
+  if (!propertyData || !propertyData.length) return null;
+
+  const { groupSections, sectionsData } = buildDataSections(propertyData);
+
+  if (!groupSections.length) return null;
+
+  const GroupComponent =
+    contentType === CONTENT_GROUP_TYPES.ACCORDION ? ContentGroupAccordion : ContentGroupTabs;
+
+  return (
+    <GroupComponent
+      contentType={contentType}
+      groupSections={groupSections}
+      sectionsData={sectionsData}
+      {...props}
+    />
+  );
+};
+
+ContentGroupDataFetcher.propTypes = {
+  dataProperty: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  parent: PropTypes.object,
+  contentType: PropTypes.string.isRequired
+};
+
+ContentGroupDataFetcher.defaultProps = {
+  dataProperty: null,
+  parent: null
+};
+
+export default ContentGroupDataFetcher;

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -8,6 +8,7 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
   const router = useRouter();
   const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
   const { asPath } = router;
+
   const contentClassame = contentType === TAB ? TABS : SIDEPANEL;
   const mainDivClass = `${CONTENT_GROUP}-${contentClassame}`;
   const contentGroupClass = `${CONTENT_GROUP}-${contentClassame}__buttons-wrapper`;
@@ -30,6 +31,7 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
           const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${
             isSelected ? '--is-active' : ''
           }`;
+
           return (
             <button
               id={tabId}
@@ -44,18 +46,18 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
                 const newUrl = `${baseUrl}#${sectionName}`;
                 if (asPath === newUrl) return;
                 router.push(`/Resolver`, newUrl, { shallow: true });
-                setSelectedTab(tabId);
               }}>
               {sectioLabel}
             </button>
           );
         })}
       </ul>
+
       {groupSections.map((groupSection, index) => {
         const [sectionName] = sectionsData[index];
         const tabId = `${TAB}-${sectionName}`;
         const panelId = `${PANEL}-${sectionName}`;
-        if (selectedTab !== tabId) return null;
+        const isSelected = selectedTab === tabId;
 
         return (
           <WrapperComponent
@@ -64,7 +66,9 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
             className={sectionClass}
             role="tabpanel"
             tabId={tabId}
-            aria-labelledby={tabId}>
+            aria-labelledby={tabId}
+            aria-hidden={!isSelected}
+            tabIndex={isSelected ? 0 : -1}>
             {groupSection}
           </WrapperComponent>
         );

package/src/components/ContentGroup/constants.js

@@ -3,5 +3,18 @@ const TABS = 'tabs';
 const SIDEPANEL = 'sidepanel';
 const CONTENT_GROUP = 'content-group';
 const PANEL = 'panel';
+const FAQ_PAGE = 'https://schema.org/FAQPage';
 
-export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL };
+const CONTENT_GROUP_TYPES = Object.freeze({
+  TAB: 'tab',
+  SIDEPANEL: 'sidepanel',
+  ACCORDION: 'accordion'
+});
+
+const OPEN_STATES = Object.freeze({
+  FIRST_OPEN: 'first_open',
+  ALL_CLOSED: 'all_closed',
+  ALL_OPEN: 'all_open'
+});
+
+export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL, CONTENT_GROUP_TYPES, OPEN_STATES, FAQ_PAGE };

package/src/components/ContentGroup/helpers/build-data-sections.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+import getComponentId from '../../../helpers/get-component-id';
+
+const TextBlock = dynamic(() => import('../../TextBlock'));
+const ContentGroupSection = dynamic(() => import('../../ContentGroupSection'));
+
+const buildDataSections = (items = []) => {
+  const itemData = items.map((item, i) => {
+    if (!item || !item.text || !item.label) return null;
+
+    const sectionName = getComponentId(item.label || `section-${i}`, true, true);
+    return {
+      sectionName,
+      label: item.label,
+      sectionContent: (
+        <ContentGroupSection key={sectionName} name={sectionName} disableChildCheck>
+          <TextBlock html={item.text} name={`${sectionName}-text`} />
+        </ContentGroupSection>
+      )
+    };
+  });
+
+  return itemData.filter(Boolean).reduce(
+    (acc, { sectionName, label, sectionContent }) => {
+      if (!sectionName || !sectionContent) return acc;
+      acc.groupSections.push(sectionContent);
+      acc.sectionsData.push([sectionName, label]);
+      return acc;
+    },
+    { groupSections: [], sectionsData: [] }
+  );
+};
+
+export default buildDataSections;

package/src/components/ContentGroup/helpers/get-structured-data-properties.js

@@ -0,0 +1,36 @@
+const getStructuredDataProperties = isFaqContent => {
+  const properties = {
+    topWrapperProps: {},
+    groupSectionProps: {},
+    groupSectionTitleProps: {},
+    groupContentWrapperProps: {},
+    groupContentProps: {}
+  };
+  if (!isFaqContent) return properties;
+
+  properties.topWrapperProps = {
+    itemScope: true,
+    itemType: 'https://schema.org/FAQPage'
+  };
+  properties.groupSectionProps = {
+    itemScope: true,
+    itemProp: 'mainEntity',
+    itemType: 'https://schema.org/Question'
+  };
+  properties.groupSectionTitleProps = {
+    itemProp: 'name'
+  };
+  properties.groupContentWrapperProps = {
+    itemScope: true,
+    itemProp: 'acceptedAnswer',
+    itemType: 'https://schema.org/Answer'
+  };
+
+  properties.groupContentProps = {
+    itemProp: 'text'
+  };
+
+  return properties;
+};
+
+export default getStructuredDataProperties;

package/src/components/ContentGroup/helpers/index.js

@@ -1,4 +1,5 @@
 import getSectionsData from './get-sections-data';
 import getActiveTab from './get-active-tab';
+import buildDataSections from './build-data-sections';
 
-export { getSectionsData, getActiveTab };
+export { getSectionsData, getActiveTab, buildDataSections };

package/src/components/ContentGroupSection/ContentGroupSection.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { hasChildren } from '../../helpers';
 
-const ContentGroupSection = ({ children, name }) => {
-  if (!hasChildren(children)) return null;
+const ContentGroupSection = ({ children, name, disableChildCheck }) => {
+  if (!disableChildCheck && !hasChildren(children)) return null;
 
   return (
     <div key={name} className="content-group-section">

package/src/components/DataSummary/DataSummaryFactory.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema } from '../../application/query';
 import { buildPropsQuery, checkPropsToUse } from '../../helpers';
-import { getDataSummaryQuery, getLinkProps } from './helpers';
+import { getDataSummaryQuery, getLinkProps, getRecordId } from './helpers';
 import DataSummaryRender from './DataSummaryRender';
 
 const DataSummaryFactory = ({
@@ -27,7 +27,10 @@ const DataSummaryFactory = ({
     variables: { id: entityForQuery }
   });
 
+  const recordId = getRecordId(entityForQuery, dataRecordId, parent);
   const { isPreview } = useContext(MainContext);
+
+  if (!recordId) return null;
   if (loading) return '';
   if (error) return error.message;
   if (!data) return null;
@@ -36,7 +39,6 @@ const DataSummaryFactory = ({
   const linkProps = getLinkProps(propsToDisplay);
   const propsQueryString = buildPropsQuery(data, propsToDisplayValues, null, linkProps);
   const dataSummaryQuery = getDataSummaryQuery(data, isPreview, propsQueryString);
-  const recordId = dataRecordId[0] || parent.itemId;
   const isSlider = variant === 'slideSummary';
 
   return (

package/src/components/DataSummary/helpers/get-record-id.js

@@ -0,0 +1,14 @@
+import { checkIfLoggedIn } from '@blaze-cms/core-auth-ui';
+
+const getRecordId = (entityForQuery, dataRecordId, parent) => {
+  const [recordId] = dataRecordId;
+  let foundUserId;
+
+  if (entityForQuery === 'user' && !recordId) {
+    const { id: userId } = checkIfLoggedIn();
+    foundUserId = userId;
+  }
+  return foundUserId || recordId || (parent && parent.itemId);
+};
+
+export default getRecordId;

package/src/components/DataSummary/helpers/index.js

@@ -6,6 +6,7 @@ import buildLoopPropsContent from './build-loop-props-content';
 import parseBooleanValues from './parse-boolean-values';
 import getLinkBasedOnValue from './get-link-based-on-value';
 import getLinkProps from './get-link-props';
+import getRecordId from './get-record-id';
 
 export {
   getDataSummaryQuery,
@@ -15,5 +16,6 @@ export {
   buildLoopPropsContent,
   parseBooleanValues,
   getLinkBasedOnValue,
-  getLinkProps
+  getLinkProps,
+  getRecordId
 };

package/src/components/DateTime/DateTime.js

@@ -6,16 +6,16 @@ import Wrapper from '../Wrapper';
 
 dayjs.extend(LocalizedFormat);
 
-const DateTime = ({ format, customFormat, modifier }) => {
+const DateTime = ({ format, customFormat, modifier, prefix, suffix }) => {
   const dateFormat = customFormat || format;
 
   if (!dateFormat) return null;
 
-  const formatedDate = dayjs().format(dateFormat);
+  const formattedDate = dayjs().format(dateFormat);
 
   return (
     <Wrapper className="date" modifiers={modifier}>
-      {formatedDate}
+      {prefix} {formattedDate} {suffix}
     </Wrapper>
   );
 };
@@ -23,12 +23,16 @@ const DateTime = ({ format, customFormat, modifier }) => {
 DateTime.propTypes = {
   format: PropTypes.string.isRequired,
   customFormat: PropTypes.string,
-  modifier: PropTypes.string
+  modifier: PropTypes.string,
+  prefix: PropTypes.string,
+  suffix: PropTypes.string
 };
 
 DateTime.defaultProps = {
+  customFormat: '',
   modifier: null,
-  customFormat: ''
+  prefix: '',
+  suffix: ''
 };
 
 export default DateTime;

package/src/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { components, Modal } from '@blaze-cms/react-page-builder';
+import { GRAPH_QL_ERROR, PRIORITY_HIGH } from '../../constants';
+
+const { code: CodeComponent } = components;
+
+const ErrorMessage = ({ error, setErrorMessage }) => {
+  const errorMessageToDisplay =
+    typeof error === 'object' && error.message ? error.message.replace(GRAPH_QL_ERROR, '') : error;
+
+  const shouldDisplayInModal =
+    typeof error === 'object' && error.graphQLErrors
+      ? error.graphQLErrors.some(err => {
+          const { priority } = err.extensions.exception;
+          return priority === PRIORITY_HIGH;
+        })
+      : false;
+
+  return (
+    <div className="error_message">
+      {shouldDisplayInModal ? (
+        <Modal isSimple onClose={() => setErrorMessage(false)}>
+          <CodeComponent code={errorMessageToDisplay} />
+        </Modal>
+      ) : (
+        <CodeComponent code={errorMessageToDisplay} />
+      )}
+    </div>
+  );
+};
+
+export default ErrorMessage;

package/src/components/ErrorMessage/index.js

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(
+  () => import(/* webpackChunkName: "blazePbLoginErrorMessage" */ './ErrorMessage')
+);

package/src/components/Iframe/Iframe.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import IframeResizer from 'iframe-resizer-react';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import { IFRAME_CLASS, DEFAULT_WIDTH } from './constants';
 
-const Iframe = ({ src, modifier, width, height, enableScrolling }) => {
-  if (!src) return null;
+const UNSAFE_URL_PATTERN = /^(javascript|data):/i;
+
+const isSafeUrl = url => !UNSAFE_URL_PATTERN.test(url.trim());
+
+const Iframe = ({ src, modifier, width, height, enableScrolling, parent }) => {
+  const {
+    data: [resolvedSrc]
+  } = useStringTemplate(parent, [src || '']);
+  if (!resolvedSrc || !isSafeUrl(resolvedSrc)) return null;
   const modifierString = modifier ? ` ${modifier}` : '';
   const iframeClassName = `${IFRAME_CLASS}${modifierString}`;
   const defaultWidth = !width ? DEFAULT_WIDTH : {};
@@ -13,7 +21,7 @@ const Iframe = ({ src, modifier, width, height, enableScrolling }) => {
       <IframeResizer
         scrolling={enableScrolling}
         autoResize
-        src={src}
+        src={resolvedSrc}
         sizeHeight={!height}
         height={height}
         width={width}
@@ -24,13 +32,21 @@ const Iframe = ({ src, modifier, width, height, enableScrolling }) => {
 };
 
 Iframe.propTypes = {
-  src: PropTypes.string.isRequired,
+  src: PropTypes.string,
   enableScrolling: PropTypes.bool,
   modifier: PropTypes.string,
   width: PropTypes.string,
-  height: PropTypes.string
+  height: PropTypes.string,
+  parent: PropTypes.object
 };
 
-Iframe.defaultProps = { enableScrolling: false, modifier: '', width: '', height: '' };
+Iframe.defaultProps = {
+  src: '',
+  enableScrolling: false,
+  modifier: '',
+  width: '',
+  height: '',
+  parent: {}
+};
 
 export default Iframe;