Add new Tour component

client/packages/lowcoder-core/lib/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 type EvalMethods = Record<string, Record<string, Function>>;
 type CodeType = undefined | "JSON" | "Function" | "PureJSON";
@@ -613,6 +613,7 @@ declare abstract class MultiBaseComp<ChildrenType extends Record<string, Comp<un
     toJsonValue(): DataType;
     autoHeight(): boolean;
     changeChildAction(childName: string & keyof ChildrenType, value: ConstructorToDataType<new (...params: any) => ChildrenType[typeof childName]>): CompAction<JSONValue>;
+    getRef(): React.RefObject<HTMLDivElement>;
 }
 declare function mergeExtra(e1: ExtraNodeType | undefined, e2: ExtraNodeType): ExtraNodeType;
 

client/packages/lowcoder-design/src/icons/index.ts

@@ -106,6 +106,7 @@ export { ReactComponent as TextCompIcon } from "./icon-text-display.svg";
 export { ReactComponent as SwitchCompIcon } from "./icon-switch.svg";
 export { ReactComponent as TableCompIcon } from "./icon-table-comp.svg";
 export { ReactComponent as SelectCompIcon } from "./icon-insert-select.svg";
+export { ReactComponent as IconModal } from "./icon-modal.svg";
 export { ReactComponent as CheckboxCompIcon } from "./icon-checkboxes.svg";
 export { ReactComponent as RadioCompIcon } from "./icon-radio.svg";
 export { ReactComponent as TimeCompIcon } from "./icon-time.svg";

client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx

@@ -0,0 +1,95 @@
+import { trans } from "i18n";
+import {
+  CommonNameConfig,
+  MultiBaseComp,
+  NameConfig,
+  stringExposingStateControl,
+  UICompBuilder,
+  withExposingConfigs,
+  withMethodExposing
+} from "lowcoder-sdk";
+import { TourChildrenMap, TourPropertyView } from "./tourPropertyView";
+import { Tour, TourProps } from "antd";
+import React, { useContext } from "react";
+import { EditorContext } from "@lowcoder-ee/comps/editorState";
+import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp";
+import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp";
+import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp";
+
+/**
+ * This component builds the Property Panel and the fake 'UI' for the Tour component
+ */
+let TourBasicComp = (function() {
+  const childrenMap = {
+    ...TourChildrenMap,
+    defaultValue: stringExposingStateControl("defaultValue"),
+    value: stringExposingStateControl("value")
+    // style: styleControl(SelectStyle),
+  };
+  return new UICompBuilder(childrenMap, (props, dispatch) => {
+    const editorState = useContext(EditorContext);
+    const compMap: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = Object.values(editorState.getAllUICompMap());
+
+    const steps: TourProps["steps"] = props.options.map((step) => {
+      const targetName = step.target;
+      let target = undefined;
+      const compListItem = compMap.find((compItem) => compItem.children.name.getView() === targetName);
+      if (compListItem) {
+        console.log(`setting selected comp to ${compListItem}`);
+        try {
+          target = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef?.();
+        } catch (e) {
+          target = ((compListItem as MultiBaseComp).children.comp as HookComp).getRef?.();
+        }
+      }
+
+      return {
+        /**
+         * I'm pretty sure it's safe to use dangerouslySetInnerHTML here as any creator of an app
+         * will have unrestricted access to the data of any user anyway. E.g. have a button that
+         * just sends the current cookies wherever, thus the developer of the app must be trusted
+         * in all cases
+         * This even applies to things like <b onmouseover="alert('mouseover');">, because the
+         * app creator might desire functionality like this.
+         */
+        title: (<div dangerouslySetInnerHTML={{ __html: step.title }} />),
+        description: (<div dangerouslySetInnerHTML={{ __html: step.description }} />),
+        target: target?.current,
+        arrow: step.arrow,
+        placement: step.placement === "" ? undefined : step.placement,
+        mask: step.mask,
+        cover: step.cover ? (<img src={step.cover} />) : undefined,
+        type: step.type === "" ? undefined : step.type,
+      };
+    });
+
+    return (
+      <Tour
+        steps={steps}
+        open={props.open.value}
+        onClose={() => props.open.onChange(false)}
+        // indicatorsRender={(current, total) => props.indicatorsRender(current, total)} // todo enable later
+        disabledInteraction={props.disabledInteraction}
+        arrow={props.arrow}
+        placement={props.placement === "" ? undefined : props.placement}
+        type={props.type === "" ? undefined : props.type}
+        mask={props.mask}
+      />
+    );
+  })
+    .setPropertyViewFn((children) => <TourPropertyView {...children} />)
+    .build();
+})();
+
+export const TourComp = withMethodExposing(TourBasicComp, [
+  {
+    method: {
+      name: "startTour",
+      description: "Triggers the tour to start",
+      params: []
+    },
+    execute: (comp, values) => {
+      comp.children.open.getView().onChange(true);
+    }
+  }
+]);

client/packages/lowcoder/src/comps/comps/tourComp/tourControlConstants.tsx

@@ -0,0 +1,27 @@
+export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center' | '';
+export type TourStepType = 'default' | 'primary' | '';
+
+export const PlacementOptions: {label: string, value: PlacementType}[] = [
+  { label: "​", value: ""},
+  { label: "Center", value: "center"},
+  { label: "Left", value: "left"},
+  { label: "Left Top", value: "leftTop"},
+  { label: "Left Bottom", value: "leftBottom"},
+  { label: "Right", value: "right"},
+  { label: "Right Top", value: "rightTop"},
+  { label: "Right Bottom", value: "rightBottom"},
+  { label: "Top", value: "top"},
+  { label: "Top Left", value: "topLeft"},
+  { label: "Top Right", value: "topRight"},
+  { label: "Bottom", value: "bottom"},
+  { label: "Bottom Left", value: "bottomLeft"},
+  { label: "Bottom Right", value: "bottomRight"},
+];
+
+export const TypeOptions: {label: string, value: TourStepType}[] = [
+  { label: "​", value: ""},
+  { label: "Default", value: "default"},
+  { label: "Primary", value: "primary"},
+];
+
+export {};

client/packages/lowcoder/src/comps/comps/tourComp/tourPropertyView.tsx

@@ -0,0 +1,77 @@
+import { RecordConstructorToComp } from "lowcoder-core";
+import { BoolControl } from "../../controls/boolControl";
+import { ArrowControl, BoolCodeControl, MaskControl } from "../../controls/codeControl";
+import { Section } from "lowcoder-design";
+import { TourStepControl } from "@lowcoder-ee/comps/controls/tourStepControl";
+import { booleanExposingStateControl, dropdownControl } from "lowcoder-sdk";
+import { trans } from "i18n";
+import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
+import {
+  TourArrowTooltip,
+  TourMaskTooltip,
+  TourPlacementTooltip
+} from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
+
+export const TourChildrenMap = {
+  open: booleanExposingStateControl("open"),
+  options: TourStepControl,
+  // indicatorsRender: AlkjdfControl, // todo get this working later
+  disabledInteraction: BoolControl,
+  mask: MaskControl,
+  placement: dropdownControl(PlacementOptions, "bottom"),
+  arrow: ArrowControl,
+  type: dropdownControl(TypeOptions, "default"),
+};
+
+export const TourPropertyView = (
+  children: RecordConstructorToComp<
+    typeof TourChildrenMap & {
+      hidden: typeof BoolCodeControl;
+    }
+  > //& {
+    // style: { getPropertyView: () => ControlNode };
+  // }
+) => (
+  <>
+    <Section name={trans("tour.section1Title")}>
+      {children.options.propertyView({})}
+    </Section>
+
+    <Section name="customization">
+      {/*{children.indicatorsRender.propertyView({*/}
+      {/*  label: trans("tour.indicatorsRender.label"),*/}
+      {/*  tooltip: IndicatorsRenderTooltip,*/}
+      {/*})}*/}
+      {children.disabledInteraction.propertyView({
+        label: trans("tour.disabledInteraction.label"),
+        tooltip: trans("tour.disabledInteraction.tooltip")
+      })}
+      {children.mask.propertyView({
+        label: trans("tour.mask.label"),
+        tooltip: TourMaskTooltip,
+      })}
+      {children.placement.propertyView({
+        label: trans("tour.placement.label"),
+        tooltip: TourPlacementTooltip,
+        radioButton: false
+      })}
+      {children.arrow.propertyView({
+        label: trans("tour.arrow.label"),
+        tooltip: TourArrowTooltip,
+      })}
+      {children.type.propertyView({
+        label: trans("tour.type.label"),
+        tooltip: trans("tour.type.tooltip")
+      })}
+    </Section>
+
+    {/*{["layout", "both"].includes(*/}
+    {/*  useContext(EditorContext).editorModeStatus*/}
+    {/*) && (*/}
+    {/*  <Section name={sectionNames.style}>*/}
+    {/*    {children.style.getPropertyView()}*/}
+    {/*  </Section>*/}
+    {/*)}*/}
+  </>
+);
+

client/packages/lowcoder/src/comps/comps/tourComp/tourTooltips.tsx

@@ -0,0 +1,121 @@
+import { trans } from "@lowcoder-ee/i18n";
+
+const indicatorsRenderExample = `(current, total) => (
+  <span>
+    {current + 1} / {total}
+  </span>
+)`;
+export const IndicatorsRenderTooltip = (
+  <div>
+    {trans("tour.indicatorsRender.tooltip")}
+    <br />
+    <br />
+    {trans("tour.indicatorsRender.tooltipValidTypes")}
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipSignatureHeader")}</h4>
+    <code>
+      {trans("tour.indicatorsRender.tooltipFunctionSignature")}
+    </code>
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipExampleHeader")}</h4>
+    <code>
+      {indicatorsRenderExample}
+    </code>
+  </div>
+);
+
+let styleExample = {
+  "style": { "boxShadow": "inset 0 0 15px #fff" },
+  "color": "rgba(40, 0, 255, .4)"
+};
+
+export const TourStepMaskTooltip = (
+  <div>
+    {trans("tour.options.mask.tooltip")}
+    <br />
+    <br />
+    {trans("tour.options.mask.tooltipValidTypes")}
+    <br />
+    <br />
+    <h3>Example:</h3>
+    <code>
+      {JSON.stringify(styleExample, null, 1)}
+    </code>
+  </div>
+);
+
+export const TourMaskTooltip = (
+  <div>
+    {trans("tour.mask.tooltip")}
+    <br />
+    <br />
+    {trans("tour.mask.tooltipValidTypes")}
+    <br />
+    <br />
+    <h4>Example:</h4>
+    <code>
+      {JSON.stringify(styleExample, null, 1)}
+    </code>
+  </div>
+);
+
+export const TourPlacementTooltip = (
+  <div>
+    {trans("tour.placement.tooltip")}
+    <br />
+    <br />
+    <h4>{trans("tour.placement.tooltipValidOptions")}</h4>
+    <h5>{trans("tour.placement.tooltipValidOptionsAbove")}</h5>
+    <ul>
+      <li><code>topLeft</code></li>
+      <li><code>top</code></li>
+      <li><code>topRight</code></li>
+    </ul>
+    <h5>{trans("tour.placement.tooltipValidOptionsLeft")}</h5>
+    <ul>
+      <li><code>leftTop</code></li>
+      <li><code>left</code></li>
+      <li><code>leftBottom</code></li>
+    </ul>
+    <h5>{trans("tour.placement.tooltipValidOptionsRight")}</h5>
+    <ul>
+      <li><code>rightTop</code></li>
+      <li><code>right</code></li>
+      <li><code>rightBottom</code></li>
+    </ul>
+    <h5>{trans("tour.placement.tooltipValidOptionsBelow")}</h5>
+    <ul>
+      <li><code>bottomLeft</code></li>
+      <li><code>bottom</code></li>
+      <li><code>bottomRight</code></li>
+    </ul>
+    <h5>{trans("tour.placement.tooltipValidOptionsOnTop")}</h5>
+    <ul>
+      <li>center</li>
+    </ul>
+  </div>
+);
+
+const arrowTooltipSignature = `boolean | { pointAtCenter: boolean }`;
+export const TourStepArrowTooltip = (
+  <div>
+    {trans("tour.options.arrow.tooltip")}
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipSignatureHeader")}</h4>
+    <code>{arrowTooltipSignature}</code>
+  </div>
+);
+export const TourArrowTooltip = (
+  <div>
+    {trans("tour.arrow.tooltip")}
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipSignatureHeader")}</h4>
+    <code>{arrowTooltipSignature}</code>
+  </div>
+);
+
+export {};

client/packages/lowcoder/src/comps/controls/actionSelector/executeCompAction.tsx

@@ -1,5 +1,4 @@
-import { customAction, routeByNameAction } from "lowcoder-core";
-import { CompParams, ConstructorToDataType } from "lowcoder-core";
+import { CompParams, ConstructorToDataType, customAction, routeByNameAction } from "lowcoder-core";
 import { GridItemComp } from "comps/comps/gridItemComp";
 import { SimpleNameComp } from "comps/comps/simpleNameComp";
 import { TemporaryStateItemComp } from "comps/comps/temporaryStateComp";

client/packages/lowcoder/src/comps/controls/codeControl.tsx

@@ -30,11 +30,11 @@ import {
   toHex,
   wrapperToControlItem,
 } from "lowcoder-design";
-import { lazy, ReactNode, Suspense } from "react";
+import { CSSProperties, lazy, ReactNode, Suspense } from "react";
 import {
   showTransform,
   toArrayJSONObject,
-  toBoolean,
+  toBoolean, toBooleanOrCss, toBooleanOrJsonObject,
   toJSONArray,
   toJSONObject,
   toJSONObjectArray,
@@ -318,6 +318,8 @@ export type CodeControlJSONType = ReturnType<typeof tmpFuncForJson>;
 export const StringControl = codeControl<string>(toString);
 export const NumberControl = codeControl<number>(toNumber);
 export const StringOrNumberControl = codeControl<string | number>(toStringOrNumber);
+export const MaskControl = codeControl<boolean | { style?: CSSProperties | undefined; color?: string | undefined; } | undefined>(toBooleanOrCss);
+export const ArrowControl = codeControl<boolean | { pointAtCenter: boolean } | undefined>(toBooleanOrJsonObject);
 
 // rangeCheck, don't support Infinity temporarily
 export class RangeControl {
@@ -506,6 +508,16 @@ export const FunctionControl = codeControl<CodeFunction>(
   { codeType: "Function", evalWithMethods: true }
 );
 
+// export const AlkjdfControl = codeControl<(current: number, total: number)=>ReactNode>(
+//   (value) => {
+//     if (typeof value === "function") {
+//       return value;
+//     }
+//     return (current,total) => (value as (current: number, total: number)=>ReactNode)(current,total);
+//   },
+//   { codeType: "Function", evalWithMethods: true }
+// );
+
 export const TransformerCodeControl = codeControl<JSONValue>(
   (value) => {
     if (typeof value === "function") {