Updates

lowcoder/client/packages/lowcoder-plugin-demo/src/CounterComp.tsx

@@ -0,0 +1,81 @@
+import {
+  antd,
+  UICompBuilder,
+  numberExposingStateControl,
+  Section,
+  withDefault,
+  withExposingConfigs,
+  NumberControl,
+  NameConfig,
+  eventHandlerControl,
+  withMethodExposing,
+} from "lowcoder-sdk";
+import styles from "./style.module.css";
+
+const { Button } = antd;
+
+const childrenMap = {
+  value: numberExposingStateControl("value", 10),
+  step: withDefault(NumberControl, 1),
+  onEvent: eventHandlerControl([
+    {
+      label: "onChange",
+      value: "change",
+      description: "",
+    },
+  ]),
+};
+
+const CounterCompBase = new UICompBuilder(childrenMap, (props: any) => {
+  const currentValue = props.value.value;
+  return (
+    <div className={styles.wrapper}>
+      <Button
+        onClick={() => {
+          props.value.onChange(currentValue - props.step);
+          props.onEvent("change");
+        }}
+      >
+        -
+      </Button>
+      <span style={{ padding: "0 8px" }}>{currentValue}</span>
+      <Button
+        onClick={() => {
+          props.value.onChange(currentValue + props.step);
+          props.onEvent("change");
+        }}
+      >
+        +
+      </Button>
+    </div>
+  );
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>
+        <Section name="Basic">
+          {children.value.propertyView({ label: "Initial Value" })}
+          {children.step.propertyView({ label: "Step" })}
+        </Section>
+        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+      </>
+    );
+  })
+  .build();
+
+const CounterCompTemp = withMethodExposing(CounterCompBase, [
+  {
+    method: {
+      name: "random",
+      params: [],
+    },
+    execute(comp: any) {
+      comp.children.value.getView().onChange(Math.floor(Math.random() * 100));
+    },
+  },
+]);
+
+export default withExposingConfigs(CounterCompTemp, [
+  new NameConfig("value", ""),
+  new NameConfig("step", ""),
+]);

lowcoder/client/packages/lowcoder-plugin-demo/src/HelloWorldComp.tsx

@@ -0,0 +1,24 @@
+import {
+  UICompBuilder,
+  stringExposingStateControl,
+  Section,
+  withExposingConfigs,
+  NameConfig,
+} from "lowcoder-sdk";
+
+import styles from "./style.module.css";
+
+const childrenMap = {
+  text: stringExposingStateControl("text", "world"),
+};
+
+const HelloWorldCompBase = new UICompBuilder(childrenMap, (props: any) => {
+  const text = props.text.value;
+  return <div className={styles.wrapper}>Hello {text}</div>;
+})
+  .setPropertyViewFn((children: any) => {
+    return <Section name="Basic">{children.text.propertyView({ label: "Text" })}</Section>;
+  })
+  .build();
+
+export default withExposingConfigs(HelloWorldCompBase, [new NameConfig("text", "")]);

lowcoder/client/packages/lowcoder-plugin-demo/src/app-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="lowcoder-cli/client" />
+
+declare module "lowcoder-sdk";

lowcoder/client/packages/lowcoder-plugin-demo/src/index.ts

@@ -0,0 +1,7 @@
+import CounterComp from "./CounterComp";
+import HelloWorldComp from "./HelloWorldComp";
+
+export default {
+  hello_world: HelloWorldComp,
+  counter: CounterComp,
+};

lowcoder/client/packages/lowcoder-plugin-demo/src/style.module.css

@@ -0,0 +1,10 @@
+.wrapper {
+  color: red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  border: 1px solid #dddddd;
+  background-color: white;
+  padding: 8px 0;
+}