Merge pull request #1963 from illacloud/merge/feat/widget

Merge/feat/widget

apps/builder/package.json

@@ -49,6 +49,9 @@
     "@protobuf-ts/runtime": "^2.8.3",
     "@react-google-maps/api": "^2.18.1",
     "@reduxjs/toolkit": "^1.9.5",
+    "@rjsf/core": "^5.10.0",
+    "@rjsf/utils": "^5.10.0",
+    "@rjsf/validator-ajv8": "^5.10.0",
     "@sentry/react": "^7.54.0",
     "@tanstack/react-table": "^8.9.1",
     "@tanstack/table-core": "^8.9.1",

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/index.ts

@@ -0,0 +1,32 @@
+import { FormProps, ThemeProps, withTheme } from "@rjsf/core"
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils"
+import { ComponentType } from "react"
+import Templates, { generateTemplates } from "./templates"
+import Widgets, { generateWidgets } from "./widgets"
+
+export function generateTheme<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = FormContextType,
+>(): ThemeProps<T, S, F> {
+  return {
+    templates: generateTemplates<T, S, F>(),
+    widgets: generateWidgets<T, S, F>(),
+  }
+}
+
+const Theme = generateTheme()
+
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = FormContextType,
+>(): ComponentType<FormProps<T, S, F>> {
+  return withTheme<T, S, F>(generateTheme<T, S, F>())
+}
+
+const Form = generateForm()
+
+export { Form, Templates, Theme, Widgets, generateTemplates, generateWidgets }
+
+export default Form

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/labelWrapper/index.tsx

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from "react"
+import Label from "@/widgetLibrary/PublicSector/Label"
+import LabelProps from "@/widgetLibrary/PublicSector/Label/interface"
+import { applyLabelAndComponentWrapperStyle } from "./style"
+
+export const LabelWrapper: FC<
+  LabelProps & { children: ReactNode; isSingleLine?: boolean }
+> = ({ label, required, children, isSingleLine }) => {
+  return (
+    <div css={applyLabelAndComponentWrapperStyle(isSingleLine)}>
+      <Label
+        label={label}
+        labelAlign="left"
+        labelWidth={33}
+        labelPosition={isSingleLine ? "right" : "top"}
+        required={required}
+      />
+      {children}
+    </div>
+  )
+}

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/labelWrapper/style.ts

@@ -0,0 +1,22 @@
+import { css } from "@emotion/react"
+import { getColor } from "@illa-design/react"
+
+export const applyLabelAndComponentWrapperStyle = (isSingleLine?: boolean) => {
+  const singleLineStyle = isSingleLine
+    ? `
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: flex-end;
+  `
+    : ""
+  return css`
+    color: ${getColor("grayBlue", "02")}!important;
+    margin: 8px 0;
+    & > label {
+      font-size: 14px;
+      line-height: 20px;
+    }
+    ${singleLineStyle};
+  `
+}

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/templates/ArrayFieldItemTemplate/index.tsx

@@ -0,0 +1,78 @@
+import {
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from "@rjsf/utils"
+import { Col, Row } from "@illa-design/react"
+import { arrayItemStyle, buttonGroupStyle } from "./style"
+
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = FormContextType,
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+  const {
+    children,
+    disabled,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    hasToolbar,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } =
+    registry.templates.ButtonTemplates
+  const { toolbarAlign = "top" } = registry.formContext
+
+  return (
+    <Row align={toolbarAlign} key={`array-item-${index}`} css={arrayItemStyle}>
+      <Col flex="1">{children}</Col>
+      {hasToolbar && (
+        <Col flex="192px" style={{ marginLeft: "16px" }}>
+          <div css={buttonGroupStyle}>
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveUpButton
+                disabled={disabled || readonly || !hasMoveUp}
+                onClick={onReorderClick(index, index - 1)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveDownButton
+                disabled={disabled || readonly || !hasMoveDown}
+                onClick={onReorderClick(index, index + 1)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+            {hasCopy ? (
+              <CopyButton
+                disabled={disabled || readonly}
+                onClick={onCopyIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            ) : null}
+            {hasRemove && (
+              <RemoveButton
+                disabled={disabled || readonly}
+                onClick={onDropIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            )}
+          </div>
+        </Col>
+      )}
+    </Row>
+  )
+}

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/templates/ArrayFieldItemTemplate/style.ts

@@ -0,0 +1,12 @@
+import { css } from "@emotion/react"
+
+export const buttonGroupStyle = css`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+`
+
+export const arrayItemStyle = css`
+  margin-bottom: 16px;
+  align-items: center;
+`

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/templates/ArrayFieldTemplate/index.tsx

@@ -0,0 +1,115 @@
+import {
+  ArrayFieldTemplateItemType,
+  ArrayFieldTemplateProps,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from "@rjsf/utils"
+import { Col, Row } from "@illa-design/react"
+import { fieldsetStyle } from "./style"
+
+const DESCRIPTION_COL_STYLE = {
+  paddingBottom: "8px",
+}
+
+export default function ArrayFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = FormContextType,
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    formContext,
+    idSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+  } = props
+  const uiOptions = getUiOptions<T, S, F>(uiSchema)
+  const ArrayFieldDescriptionTemplate = getTemplate<
+    "ArrayFieldDescriptionTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldDescriptionTemplate", registry, uiOptions)
+  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, S, F>(
+    "ArrayFieldItemTemplate",
+    registry,
+    uiOptions,
+  )
+  const ArrayFieldTitleTemplate = getTemplate<
+    "ArrayFieldTitleTemplate",
+    T,
+    S,
+    F
+  >("ArrayFieldTitleTemplate", registry, uiOptions)
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates
+  const { rowGutter = 24 } = formContext as GenericObjectType
+
+  return (
+    <fieldset className={className} id={idSchema.$id} css={fieldsetStyle}>
+      <Row>
+        {(uiOptions.title || title) && (
+          <Col span={24}>
+            <ArrayFieldTitleTemplate
+              idSchema={idSchema}
+              required={required}
+              title={uiOptions.title || title}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        )}
+        {(uiOptions.description || schema.description) && (
+          <Col span={24} style={DESCRIPTION_COL_STYLE}>
+            <ArrayFieldDescriptionTemplate
+              description={uiOptions.description || schema.description}
+              idSchema={idSchema}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </Col>
+        )}
+        <Col span={24}>
+          {items &&
+            Array.isArray(items) &&
+            items.map(
+              ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+                <ArrayFieldItemTemplate key={key} {...itemProps} />
+              ),
+            )}
+        </Col>
+
+        {canAdd && (
+          <Col span={24}>
+            <Row verticalGap={rowGutter} justify="end">
+              <Col flex="192px">
+                <AddButton
+                  className="array-item-add"
+                  disabled={disabled || readonly}
+                  onClick={onAddClick}
+                  uiSchema={uiSchema}
+                  registry={registry}
+                />
+              </Col>
+            </Row>
+          </Col>
+        )}
+      </Row>
+    </fieldset>
+  )
+}

apps/builder/src/widgetLibrary/JsonSchemaFormWidget/@illadesign-ui/templates/ArrayFieldTemplate/style.ts

@@ -0,0 +1,5 @@
+import { css } from "@emotion/react"
+
+export const fieldsetStyle = css`
+  border: none;
+`