Merge pull request #476 from lowcoder-org/dev

Dev -> Main to prepare V2.1.4

Author: FalkWolsky

client/README.md

@@ -31,26 +31,89 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks"
 
 ### Start develop
 
-1. Check out the source code.
-2. Change to client dir in the repository root via cd client.
+
+1. Check out source code.
+2. Change to **/client** dir in the source dir.
 
 ```bash
 cd client
 ```
-   
-4. Run yarn to install dependencies: .
+3. Run yarn to install dependencies.
 
 ```bash
 yarn install
 ```
 
-5. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`.
-6. After the dev server starts successfully, it will be automatically opened in the default browser.
+4. Start dev server: 
+
+```bash
+LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start
+```
+
+5. After dev server starts successfully, it will be automatically opened in the default browser.
 
 ### Before submitting a pull request
 
 In addition, before submitting a pull request, please make sure the following is done:
 
 1. If you’ve fixed a bug or added code that should be tested and add unit test suite.
-2. Run `yarn test` and ensure all test suites pass.
-3. If you add new dependency, use yarn workspace lowcoder some-package to make sure yarn.lock is also updated.
+2. Run test and ensure all test suites pass.
+
+```bash
+yarn test
+```
+
+3. If you add new dependency, use the yarn worspace tool to make sure yarn.lock is also updated.
+
+```bash
+yarn workspace lowcoder <package name>
+```
+
+### Developing and publishung UI components for Lowcoder
+
+1. Initialization
+
+Project initiation
+
+```bash
+yarn create Lowcoder-plugin <your plugin name>
+```
+
+Go to the project root
+
+```bash
+cd my-plugin
+```
+
+Start the development environment
+
+```bash
+yarn start
+```
+
+After executing yarn start, the browser is automatically opened and you enter the component development environment.
+Please find more information in our [docs](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/develop-ui-components-for-apps)
+
+2. Export components
+
+To export all the components, use src/index.ts, for example:
+
+```bash
+import HelloWorldComp from "./HelloWorldComp";
+
+export default {
+  hello_world: HelloWorldComp,
+};
+```
+
+import HelloWorldComp from "./HelloWorldComp";
+
+3. Publish plugins
+
+When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command:
+
+```bash
+yarn build --publish
+```
+
+You can check a code demo here:  [Code Demo on Github](https://github.com/lowcoder-org/lowcoder/tree/main/client/packages/lowcoder-plugin-demo)

client/VERSION

@@ -1 +1 @@
-2.1.0
+2.1.4

client/packages/lowcoder-comps/package.json

@@ -7,7 +7,7 @@
     "@fullcalendar/core": "^6.1.6",
     "@fullcalendar/daygrid": "^6.1.6",
     "@fullcalendar/interaction": "^6.1.6",
-    "@fullcalendar/list": "^6.1.6",
+    "@fullcalendar/list": "^6.1.9",
     "@fullcalendar/moment": "^6.1.6",
     "@fullcalendar/react": "^6.1.6",
     "@fullcalendar/timegrid": "^6.1.6",

client/packages/lowcoder/index.html

@@ -95,6 +95,6 @@
 
     <div id="root"></div>
     <script type="module" src="/src/index.ts"></script>
-    <%- browserCheckScript %>
+    <!-- <%- browserCheckScript %> -->
   </body>
 </html>

client/packages/lowcoder/package.json

@@ -116,7 +116,7 @@
   },
   "devDependencies": {
     "@types/core-js": "^2.5.5",
-    "@types/intl": "^1.2.0",
+    "@types/intl": "^1.2.1",
     "@types/papaparse": "^5.3.5",
     "@types/regenerator-runtime": "^0.13.1",
     "@types/uuid": "^8.3.4",

client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx

@@ -86,7 +86,9 @@ function TabBarView(props: TabBarProps) {
           activeKey={props.selectedKey}
         >
           {props.tabs.map((tab) => {
-            return <TabBarItem key={tab.key} icon={tab.icon} title={tab.title} />;
+            return (
+              <TabBarItem key={tab.key} icon={tab.icon} title={tab.title} />
+            );
           })}
         </TabBar>
       </TabBarWrapper>
@@ -126,9 +128,18 @@ let MobileTabLayoutTmp = (function () {
   const childrenMap = {
     tabs: manualOptionsControl(TabOptionComp, {
       initOptions: [
-        { label: trans("optionsControl.optionI", { i: 1 }), icon: "/icon:solid/1" },
-        { label: trans("optionsControl.optionI", { i: 2 }), icon: "/icon:solid/2" },
-        { label: trans("optionsControl.optionI", { i: 3 }), icon: "/icon:solid/3" },
+        {
+          label: trans("optionsControl.optionI", { i: 1 }),
+          icon: "/icon:solid/1",
+        },
+        {
+          label: trans("optionsControl.optionI", { i: 2 }),
+          icon: "/icon:solid/2",
+        },
+        {
+          label: trans("optionsControl.optionI", { i: 3 }),
+          icon: "/icon:solid/3",
+        },
       ],
     }),
   };
@@ -138,7 +149,9 @@ let MobileTabLayoutTmp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-          <Section name={trans("aggregation.tabBar")}>{children.tabs.propertyView({})}</Section>
+          <Section name={trans("aggregation.tabBar")}>
+            {children.tabs.propertyView({})}
+          </Section>
         </>
       );
     })
@@ -168,7 +181,9 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
       tabs={tabViews.map((tab, index) => ({
         key: index,
         title: tab.children.label.getView(),
-        icon: tab.children.icon.toJsonValue() ? tab.children.icon.getView() : undefined,
+        icon: tab.children.icon.toJsonValue()
+          ? tab.children.icon.getView()
+          : undefined,
       }))}
       selectedKey={tabIndex + ""}
       onChange={(key) => setTabIndex(Number(key))}

client/packages/lowcoder/src/comps/comps/meetingComp/meetingControlerUtils.tsx

@@ -0,0 +1,36 @@
+import { CheckBox, controlItem, Switch, SwitchWrapper } from "lowcoder-design";
+import { ReactNode } from "react";
+import { ControlParams, SimpleComp } from "@lowcoder-ee/index.sdk";
+
+export class BoolShareVideoControl extends SimpleComp<boolean> {
+  readonly IGNORABLE_DEFAULT_VALUE = false;
+  protected getDefaultValue(): boolean {
+    return false;
+  }
+
+  getPropertyView(): ReactNode {
+    return (
+      <Switch
+        value={this.value}
+        onChange={(x) => this.dispatchChangeValueAction(x)}
+      />
+    );
+  }
+
+  propertyView(params: ControlParams & { type?: "switch" | "checkbox" }) {
+    return controlItem(
+      { filterText: params.label },
+      <SwitchWrapper {...params}>
+        {params.type === "checkbox" ? (
+          <CheckBox
+            style={{ marginRight: "8px" }}
+            checked={this.value}
+            onChange={(x) => this.dispatchChangeValueAction(x.target.checked)}
+          />
+        ) : (
+          this.getPropertyView()
+        )}
+      </SwitchWrapper>
+    );
+  }
+}