@griddo/ax 11.0.29-rc.0 → 11.0.30-rc.0

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/index.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import { ISchema, ISchemaTab, ISchemaField } from "@ax/types";
+import { Tabs } from "@ax/components";
+
+import ConnectedField from "./ConnectedField";
+
+import * as S from "./style";
+
+export const Form = (props: IFormProps): JSX.Element => {
+  const { schema, selectedTab, actions, isGlobal, theme, headerHeight, setSelectedTab, setHistoryPush } = props;
+
+  const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title.toLowerCase() === selectedTab);
+  const setTab = (tab: string) => setSelectedTab(tab);
+
+  const generateFields = (field: ISchemaField) => {
+    const { setSelectedContent } = props;
+    const { key, whiteList } = field;
+
+    const goTo = (editorID: number) => setSelectedContent(editorID);
+
+    return (
+      <ConnectedField
+        selectedTab={selectedTab}
+        whiteList={whiteList}
+        key={key}
+        objKey={key}
+        field={field}
+        goTo={goTo}
+        actions={actions}
+        componentType={schema.schemaType}
+        isGlobal={isGlobal}
+        theme={theme}
+        setHistoryPush={setHistoryPush}
+      />
+    );
+  };
+
+  const getTabs = () => {
+    const isPageSchema = schema.schemaType === "page";
+    const mappedTabs = schema.configTabs.reduce((acc: string[], curr: ISchemaTab) => {
+      const currTitle = curr.title.toLowerCase();
+      if (!isPageSchema || (isPageSchema && (currTitle === "content" || currTitle === "config"))) {
+        return [...acc, currTitle];
+      }
+      return acc;
+    }, []);
+
+    return mappedTabs;
+  };
+
+  const tabs = getTabs();
+
+  return (
+    <S.Wrapper data-testid="form-section">
+      <S.TabsWrapper headerHeight={headerHeight}>
+        <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
+      </S.TabsWrapper>
+      {tabContent && tabContent.fields.map((field: ISchemaField) => generateFields(field))}
+    </S.Wrapper>
+  );
+};
+
+export interface IFormProps {
+  selectedTab: string;
+  schema: ISchema | Record<string, never>;
+  actions: any;
+  setSelectedTab(tab: string): void;
+  setSelectedContent(editorID: number): void;
+  isGlobal?: boolean;
+  theme: string;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+  headerHeight: number;
+}
+
+export default Form;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/style.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+const Wrapper = styled.section``;
+
+const FieldWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const Link = styled.span`
+  cursor: pointer;
+  font-weight: bold;
+  color: ${(p) => p.theme.color?.interactive01};
+`;
+
+const TabsWrapper = styled.div<{ headerHeight: number }>`
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  position: sticky;
+  top: ${(p) => (p.headerHeight ? `calc(63px + ${p.headerHeight}px)` : "63px")};
+  z-index: 3;
+`;
+
+export { Wrapper, FieldWrapper, Link, TabsWrapper };

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Header/index.tsx

@@ -0,0 +1,132 @@
+import React, { memo, useCallback, useEffect, useState } from "react";
+
+import { IBreadcrumbItem, ISchema } from "@ax/types";
+import { Breadcrumb, Toast } from "@ax/components";
+import { useToast } from "@ax/hooks";
+
+import * as S from "./style";
+
+const Header = (props: IHeaderProps) => {
+  const {
+    breadcrumb,
+    schema,
+    selectedParent,
+    actions,
+    headerRef,
+    setSelectedContent,
+    setHeaderHeight,
+    hasStickyHeader,
+  } = props;
+
+  const { duplicateModuleAction, deleteModuleAction, copyModuleAction } = actions;
+  const title = breadcrumb[breadcrumb.length - 1].displayName;
+  const editorID = breadcrumb[breadcrumb.length - 1].editorID;
+  const parentID = breadcrumb.length > 1 ? breadcrumb[breadcrumb.length - 2].editorID : breadcrumb[0].editorID;
+  const isFormComponent = schema.schemaType === "formComponent";
+  const isInArray = Array.isArray(selectedParent);
+
+  const { isVisible, toggleToast, setIsVisible } = useToast();
+  const [y, setY] = useState(window.scrollY);
+  const [scrollDown, setScrollDown] = useState(false);
+  const [breadcrumbOld, setBreadcrumbOld] = useState(breadcrumb);
+
+  const handleNavigation = useCallback(
+    (e: Event) => {
+      const window = e.currentTarget as Window;
+      const height = headerRef.current ? headerRef.current.offsetHeight + headerRef.current.offsetTop : 0;
+      if (isInArray && y > window.scrollY) {
+        setHeaderHeight(height);
+        setScrollDown(false);
+      } else if (y > height && y < window.scrollY) {
+        setHeaderHeight(0);
+        setScrollDown(true);
+      }
+      setY(window.scrollY);
+    },
+    [y, headerRef, setHeaderHeight, isInArray]
+  );
+
+  useEffect(() => {
+    setY(window.scrollY);
+    window.addEventListener("scroll", handleNavigation);
+    return () => {
+      window.removeEventListener("scroll", handleNavigation);
+    };
+  }, [handleNavigation]);
+
+  useEffect(() => {
+    if (headerRef.current) {
+      const height = headerRef.current.offsetHeight + headerRef.current.offsetTop;
+      setHeaderHeight(height);
+      setBreadcrumbOld(breadcrumb);
+      if (JSON.stringify(breadcrumbOld) !== JSON.stringify(breadcrumb)) {
+        window.scrollTo(0, 0);
+        setBreadcrumbOld(breadcrumb);
+      }
+    }
+  }, [headerRef, breadcrumb, setHeaderHeight]);
+
+  const removeItem = () => {
+    setSelectedContent(parentID);
+    deleteModuleAction([editorID]);
+  };
+
+  const duplicateItem = () => {
+    duplicateModuleAction([editorID]);
+    setSelectedContent(parentID);
+  };
+
+  const copyItem = () => {
+    const isCopied = copyModuleAction([editorID]);
+    isCopied && toggleToast();
+  };
+
+  const duplicateOpt = {
+    label: "duplicate",
+    icon: "duplicate",
+    action: duplicateItem,
+  };
+
+  const deleteOpt = {
+    label: "delete",
+    icon: "delete",
+    action: removeItem,
+  };
+
+  const copyOpt = {
+    label: "copy",
+    icon: "copy",
+    action: copyItem,
+  };
+
+  let menuOptions = [duplicateOpt, deleteOpt];
+  menuOptions = isFormComponent ? [...menuOptions, copyOpt] : menuOptions;
+
+  return (
+    <S.Wrapper scrollDown={scrollDown || !hasStickyHeader}>
+      <S.HeaderWrapper data-testid="header-config-wrapper" ref={headerRef}>
+        <S.Title>{title}</S.Title>
+        <Breadcrumb breadcrumb={breadcrumb} setSelectedContent={setSelectedContent} />
+        {isInArray && <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />}
+      </S.HeaderWrapper>
+      {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
+    </S.Wrapper>
+  );
+};
+
+export interface IHeaderProps {
+  schema: ISchema | Record<string, never>;
+  actions: {
+    deleteModuleAction: (editorID: number[], key?: string) => void;
+    duplicateModuleAction: (editorID: number[], key?: string) => number;
+    copyModuleAction: (editorID: number[]) => boolean;
+  };
+  breadcrumb: IBreadcrumbItem[];
+  selectedParent: Record<string, unknown> | null;
+  setSelectedContent(editorID: number): void;
+  headerRef: React.RefObject<HTMLDivElement>;
+  setHeaderHeight(height: number): void;
+  hasStickyHeader: boolean;
+}
+
+export default memo(Header);

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Header/style.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+
+const Wrapper = styled.div<{ scrollDown: boolean }>`
+  padding-top: ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  position: ${(p) => (p.scrollDown ? "relative" : "sticky")};
+  top: ${(p) => (p.scrollDown ? "0" : "63px")};
+  z-index: 3;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+
+const Title = styled.p`
+  ${(p) => p.theme.textStyle.headingS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const StyledActionMenu = styled(ActionMenu)`
+  width: 32px;
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+
+export { Wrapper, HeaderWrapper, Title, StyledActionMenu };

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/index.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { isEmptyObj } from "@ax/helpers";
+import { Loading } from "@ax/components";
+import { IBreadcrumbItem, ISchema } from "@ax/types";
+
+import Form from "./Form";
+import Header from "./Header";
+
+import * as S from "./style";
+
+const FormConfigPanel = (props: IStateProps): JSX.Element => {
+  const {
+    isLoading,
+    schema,
+    actions,
+    setSelectedContent,
+    setSelectedTab,
+    selectedTab,
+    isGlobal,
+    setHistoryPush,
+    theme,
+    lastElementAddedId,
+    breadcrumb,
+    selectedParent,
+  } = props;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+
+  useEffect(() => {
+    if (lastElementAddedId && wrapperRef.current) {
+      const element = document.querySelector(`.editorId-${lastElementAddedId}`);
+      element && element.scrollIntoView();
+    }
+  }, [lastElementAddedId]);
+
+  if (isLoading || isEmptyObj(schema)) {
+    return <Loading />;
+  }
+
+  return (
+    <S.Wrapper data-testid="config-panel-wrapper" ref={wrapperRef}>
+      <Header
+        schema={schema}
+        actions={actions}
+        breadcrumb={breadcrumb}
+        selectedParent={selectedParent}
+        setSelectedContent={setSelectedContent}
+        headerRef={headerRef}
+        setHeaderHeight={setHeaderHeight}
+        hasStickyHeader={true}
+      />
+      <Form
+        actions={actions}
+        schema={schema}
+        setSelectedContent={setSelectedContent}
+        setSelectedTab={setSelectedTab}
+        selectedTab={selectedTab}
+        isGlobal={isGlobal}
+        theme={theme}
+        setHistoryPush={setHistoryPush}
+        headerHeight={headerHeight}
+      />
+    </S.Wrapper>
+  );
+};
+
+export interface IStateProps {
+  isLoading: boolean;
+  schema: ISchema | Record<string, never>;
+  actions: any;
+  setSelectedContent(editorID: number): void;
+  selectedTab: string;
+  setSelectedTab(tab: string): void;
+  isGlobal?: boolean;
+  pageTitle?: string;
+  setHistoryPush?: (path: string, isEditor: boolean) => void;
+  theme: string;
+  lastElementAddedId?: null | number;
+  breadcrumb: IBreadcrumbItem[];
+  selectedParent: Record<string, unknown> | null;
+}
+
+export default FormConfigPanel;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/style.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  width: 100%;
+`;
+
+export { Wrapper };

package/src/modules/Forms/FormEditor/Editor/index.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { connect } from "react-redux";
+import { ResizePanel } from "@ax/components";
+import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema } from "@ax/types";
+import { formsActions } from "@ax/containers/Forms";
+import PageBrowser from "../PageBrowser";
+import FormConfigPanel from "./FormConfigPanel";
+
+const Editor = (props: IProps) => {
+  const {
+    isLoading,
+    isGlobal,
+    theme,
+    browserRef,
+    schema,
+    selectedTab,
+    breadcrumb,
+    selectedParent,
+    setNotification,
+    setSelectedTab,
+    setSelectedContent,
+    addModule,
+    deleteModule,
+    duplicateModule,
+    moveModule,
+    copyModule,
+    pasteModule,
+  } = props;
+
+  const actions = {
+    setNotificationAction: setNotification,
+    addModuleAction: addModule,
+    deleteModuleAction: deleteModule,
+    duplicateModuleAction: duplicateModule,
+    moveModuleAction: moveModule,
+    copyModuleAction: copyModule,
+    pasteModuleAction: pasteModule,
+  };
+
+  return (
+    <ResizePanel
+      leftPanel={<PageBrowser isReadOnly={false} theme={theme} browserRef={browserRef} />}
+      rightPanel={
+        <FormConfigPanel
+          schema={schema}
+          actions={actions}
+          isLoading={isLoading}
+          isGlobal={isGlobal}
+          theme={theme}
+          setSelectedTab={setSelectedTab}
+          selectedTab={selectedTab}
+          setSelectedContent={setSelectedContent}
+          breadcrumb={breadcrumb}
+          selectedParent={selectedParent}
+        />
+      }
+      full={true}
+    />
+  );
+};
+
+interface IEditorStateProps {
+  isLoading: boolean;
+  selectedTab: string;
+  schema: ISchema | Record<string, never>;
+  breadcrumb: IBreadcrumbItem[];
+  selectedParent: Record<string, unknown> | null;
+}
+
+interface IPageBrowserDispatchProps {
+  setNotification: (notification: INotification) => void;
+  setSelectedTab(tab: string): void;
+  setSelectedContent(editorID: number): void;
+  addModule: (moduleType: string, key: string) => void;
+  deleteModule: (editorID: number[], key?: string) => void;
+  duplicateModule: (editorID: number[], key?: string) => number;
+  moveModule: (elementID: number[], content: any, newIndex: number, key: string) => void;
+  copyModule: (editorID: number[]) => boolean | number;
+  pasteModule: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
+  isGlobal: boolean;
+  theme: string;
+  browserRef: any;
+}
+
+type IProps = IEditorStateProps & IPageBrowserDispatchProps;
+
+const mapStateToProps = (state: IRootState): IEditorStateProps => ({
+  isLoading: state.app.isLoading,
+  selectedTab: state.forms.tab,
+  schema: state.forms.schema,
+  breadcrumb: state.forms.breadcrumb,
+  selectedParent: state.forms.selectedParent,
+});
+
+const mapDispatchToProps = {
+  setSelectedTab: formsActions.setSelectedTab,
+  setSelectedContent: formsActions.setSelectedContent,
+  addModule: formsActions.addModule,
+  deleteModule: formsActions.deleteModule,
+  duplicateModule: formsActions.duplicateModule,
+  moveModule: formsActions.moveModule,
+  copyModule: formsActions.copyModule,
+  pasteModule: formsActions.pasteModule,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Editor);

package/src/modules/Forms/FormEditor/PageBrowser/index.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { connect } from "react-redux";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { formsActions } from "@ax/containers/Forms";
+
+import { Browser } from "@ax/components";
+import { ILanguage, IRootState, ISchema, ISite, ISocialState } from "@ax/types";
+
+const PageBrowser = (props: IProps) => {
+  const {
+    socials,
+    cloudinaryName,
+    content,
+    setSelectedContent,
+    globalLangs,
+    theme,
+    isReadOnly,
+    isPreview,
+    browserRef,
+    currentSiteInfo,
+    deleteModule,
+    duplicateModule,
+    setScrollEditorID,
+  } = props;
+
+  const { id: siteID } = currentSiteInfo || {};
+
+  const actions = {
+    deleteModuleAction: deleteModule,
+    duplicateModuleAction: duplicateModule,
+    setSelectedContentAction: setSelectedContent,
+    setScrollEditorIDAction: setScrollEditorID,
+  };
+
+  return (
+    <Browser
+      isPage={true}
+      content={content}
+      socials={socials}
+      url={""}
+      theme={theme}
+      cloudinaryName={cloudinaryName}
+      siteLangs={globalLangs}
+      disabled={isReadOnly}
+      siteID={siteID}
+      isPreview={isPreview}
+      showIframe={true}
+      browserRef={browserRef}
+      actions={actions}
+      editorType="form"
+    />
+  );
+};
+
+interface IPageBrowserStateProps {
+  // TODO: Define content Type
+  content: any;
+  socials: ISocialState;
+  cloudinaryName: string | null;
+  globalLangs: ILanguage[];
+  schema: ISchema | Record<string, unknown>;
+  selectedParent: any;
+  currentSiteInfo: ISite | null;
+}
+
+interface IPageBrowserDispatchProps {
+  setSelectedContent(editorID: number): void;
+  theme: string;
+  isReadOnly: boolean;
+  isPreview?: boolean;
+  browserRef?: any;
+  deleteModule(editorID: number[]): void;
+  duplicateModule(editorID: number[]): number;
+  setScrollEditorID(editorID: number | null): void;
+}
+
+type IProps = IPageBrowserStateProps & IPageBrowserDispatchProps;
+
+const mapStateToProps = (state: IRootState): IPageBrowserStateProps => ({
+  content: { ...state.forms.formContent },
+  socials: state.social,
+  cloudinaryName: state.app.globalSettings.cloudinaryName,
+  globalLangs: state.app.globalLangs,
+  schema: state.forms.schema,
+  selectedParent: state.forms.selectedParent,
+  currentSiteInfo: state.sites.currentSiteInfo,
+});
+
+const mapDispatchToProps = {
+  setSelectedContent: formsActions.setSelectedContent,
+  deleteModule: pageEditorActions.deleteModule,
+  duplicateModule: pageEditorActions.duplicateModule,
+  setScrollEditorID: pageEditorActions.setScrollEditorID,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageBrowser);