@formily-design/formily-antd 1.0.0

package/playground/webpack.base.ts

@@ -0,0 +1,123 @@
+import path from 'path'
+import fs from 'fs-extra'
+import { GlobSync } from 'glob'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import autoprefixer from 'autoprefixer'
+import yaml from 'js-yaml'
+//import { getThemeVariables } from 'antd/dist/theme'
+
+const getWorkspaceAlias = () => {
+  const basePath = path.resolve(__dirname, '../../../')
+  const results: Record<string, string> = {}
+
+  const pkg = fs.readJSONSync(path.resolve(basePath, 'package.json')) || {}
+
+  let workspaces: string[] = []
+
+  if (Array.isArray(pkg.workspaces)) {
+    workspaces = pkg.workspaces
+  } else {
+    const pnpmWorkspacePath = path.resolve(basePath, 'pnpm-workspace.yaml')
+    if (fs.existsSync(pnpmWorkspacePath)) {
+      const pnpmWorkspace = yaml.load(
+        fs.readFileSync(pnpmWorkspacePath, 'utf-8')
+      ) as { packages?: string[] }
+      workspaces = pnpmWorkspace.packages || []
+    }
+  }
+
+  if (workspaces.length > 0) {
+    workspaces.forEach((pattern) => {
+      const { found } = new GlobSync(pattern, { cwd: basePath })
+      found.forEach((name) => {
+        const pkgJson = fs.readJSONSync(
+          path.resolve(basePath, name, './package.json')
+        )
+        results[pkgJson.name] = path.resolve(basePath, name, './src')
+      })
+    })
+  }
+
+  const currentPkg = fs.readJSONSync(path.resolve(__dirname, '../package.json'))
+  results[currentPkg.name] = path.resolve(__dirname, '../src')
+
+  return results
+}
+
+export default {
+  mode: 'development',
+  devtool: 'inline-source-map', // 嵌入到源文件中
+  stats: {
+    entrypoints: false,
+    children: false,
+  },
+  entry: {
+    playground: path.resolve(__dirname, './main'),
+  },
+  output: {
+    path: path.resolve(__dirname, '../build'),
+    filename: '[name].[hash].bundle.js',
+  },
+  resolve: {
+    modules: [path.resolve(__dirname, '../../../node_modules'), 'node_modules'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.mjs'],
+    alias: getWorkspaceAlias(),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: 'css-loader' },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => autoprefixer(),
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              // modifyVars: getThemeVariables({
+              //   dark: true, // 开启暗黑模式
+              // }),
+              javascriptEnabled: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: ['url-loader'],
+      },
+      {
+        test: /\.html?$/,
+        loader: require.resolve('file-loader'),
+        options: {
+          name: '[name].[ext]',
+        },
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+    ],
+  },
+}

package/playground/webpack.dev.ts

@@ -0,0 +1,64 @@
+import baseConfig from './webpack.base'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import MonacoPlugin from 'monaco-editor-webpack-plugin'
+//import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import webpack from 'webpack'
+import path from 'path'
+
+const PORT = 3001
+
+const createPages = (pages) => {
+  return pages.map(({ filename, template, chunk }) => {
+    return new HtmlWebpackPlugin({
+      filename,
+      template,
+      inject: 'body',
+      chunks: chunk,
+    })
+  })
+}
+
+for (const key in baseConfig.entry) {
+  if (Array.isArray(baseConfig.entry[key])) {
+    baseConfig.entry[key].push(
+      require.resolve('webpack/hot/dev-server'),
+      `${require.resolve('webpack-dev-server/client')}?http://localhost:${PORT}`
+    )
+  }
+}
+
+export default {
+  ...baseConfig,
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css',
+    }),
+    ...createPages([
+      {
+        filename: 'index.html',
+        template: path.resolve(__dirname, './template.ejs'),
+        chunk: ['playground'],
+      },
+    ]),
+    new webpack.HotModuleReplacementPlugin(),
+    new MonacoPlugin({
+      languages: ['json'],
+    }),
+    // new BundleAnalyzerPlugin()
+  ],
+  devServer: {
+    host: '127.0.0.1',
+    open: true,
+    port: PORT,
+    proxy: {
+      '/apimap': {
+        target: 'https://apis.map.qq.com/ws',
+        changeOrigin: true,
+        secure: false,
+        pathRewrite: { '^/apimap': '' },
+      },
+    },
+  },
+}

package/playground/webpack.prod.ts

@@ -0,0 +1,46 @@
+import baseConfig from './webpack.base'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import MonacoPlugin from 'monaco-editor-webpack-plugin'
+import path from 'path'
+
+const createPages = (pages) => {
+  return pages.map(({ filename, template, chunk }) => {
+    return new HtmlWebpackPlugin({
+      filename,
+      template,
+      inject: 'body',
+      chunks: chunk,
+    })
+  })
+}
+
+export default {
+  ...baseConfig,
+  mode: 'production',
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css',
+    }),
+    ...createPages([
+      {
+        filename: 'index.html',
+        template: path.resolve(__dirname, './template.ejs'),
+        chunk: ['playground'],
+      },
+    ]),
+    new MonacoPlugin({
+      languages: ['json'],
+    }),
+  ],
+  optimization: {
+    minimize: true,
+  },
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    moment: 'moment',
+    antd: 'antd',
+  },
+}

package/playground/widgets/ActionsWidget.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react'
+import { Space, Button, Radio } from 'antd'
+import { GithubOutlined } from '@ant-design/icons'
+import { useDesigner, TextWidget } from '@formily-design/react'
+import { GlobalRegistry } from '@formily-design/core'
+import { observer } from '@formily/react'
+import { loadInitialSchema, saveSchema } from '../service'
+
+export const ActionsWidget = observer(() => {
+  const designer = useDesigner()
+  useEffect(() => {
+    loadInitialSchema(designer)
+  }, [])
+  const supportLocales = ['zh-cn', 'en-us', 'ko-kr']
+  useEffect(() => {
+    if (!supportLocales.includes(GlobalRegistry.getDesignerLanguage())) {
+      GlobalRegistry.setDesignerLanguage('zh-cn')
+    }
+  }, [])
+  return (
+    <Space style={{ marginRight: 10 }}>
+      <Button href="https://designable-fusion.formilyjs.org">
+        Alibaba Fusion
+      </Button>
+      <Radio.Group
+        value={GlobalRegistry.getDesignerLanguage()}
+        optionType="button"
+        options={[
+          { label: 'English', value: 'en-us' },
+          { label: '简体中文', value: 'zh-cn' },
+          { label: '한국어', value: 'ko-kr' },
+        ]}
+        onChange={(e) => {
+          GlobalRegistry.setDesignerLanguage(e.target.value)
+        }}
+      />
+      <Button href="https://github.com/alibaba/designable" target="_blank">
+        <GithubOutlined />
+        Github
+      </Button>
+      <Button
+        onClick={() => {
+          saveSchema(designer)
+        }}
+      >
+        <TextWidget>Save</TextWidget>
+      </Button>
+      <Button
+        type="primary"
+        onClick={() => {
+          saveSchema(designer)
+        }}
+      >
+        <TextWidget>Publish</TextWidget>
+      </Button>
+    </Space>
+  )
+})

package/playground/widgets/LogoWidget.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useTheme } from '@formily-design/react'
+
+const logo = {
+  dark: '//img.alicdn.com/imgextra/i2/O1CN01NTUDi81fHLQvZCPnc_!!6000000003981-55-tps-1141-150.svg',
+  light:
+    '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
+}
+
+export const LogoWidget: React.FC = () => {
+  const url = logo[useTheme()]
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
+      <img
+        src={url}
+        style={{ margin: '12px 8px', height: 18, width: 'auto' }}
+      />
+    </div>
+  )
+}

package/playground/widgets/MarkupSchemaWidget.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import { TreeNode } from '@formily-design/core'
+import { MonacoInput } from '@formily-design/react-settings-form'
+import { isEmpty, isPlainObj } from '@formily/shared'
+
+export interface IMarkupSchemaWidgetProps {
+  tree: TreeNode
+}
+
+const transformToMarkupSchemaCode = (tree: TreeNode) => {
+  const printAttribute = (node: TreeNode) => {
+    if (!node) return ''
+    const props = { ...node.props }
+    if (node.depth !== 0) {
+      props.name = node.props.name || node.id
+    }
+    return `${Object.keys(props)
+      .map((key) => {
+        if (
+          key === 'x-designable-id' ||
+          key === 'x-designable-source-name' ||
+          key === '_isJSONSchemaObject' ||
+          key === 'version' ||
+          key === 'type'
+        )
+          return ''
+        const value = props[key]
+        if (isPlainObj(value) && isEmpty(value)) return ''
+        if (typeof value === 'string') return `${key}="${value}"`
+        return `${key}={${JSON.stringify(value)}}`
+      })
+      .join(' ')}`
+  }
+  const printChildren = (node: TreeNode) => {
+    if (!node) return ''
+    return node.children
+      .map((child) => {
+        return printNode(child)
+      })
+      .join('')
+  }
+  const printTag = (node: TreeNode) => {
+    if (node.props.type === 'string') return 'SchemaField.String'
+    if (node.props.type === 'number') return 'SchemaField.Number'
+    if (node.props.type === 'boolean') return 'SchemaField.Boolean'
+    if (node.props.type === 'date') return 'SchemaField.Date'
+    if (node.props.type === 'datetime') return 'SchemaField.DateTime'
+    if (node.props.type === 'array') return 'SchemaField.Array'
+    if (node.props.type === 'object') return 'SchemaField.Object'
+    if (node.props.type === 'void') return 'SchemaField.Void'
+    return 'SchemaField.Markup'
+  }
+  const printNode = (node: TreeNode) => {
+    if (!node) return ''
+    return `<${printTag(node)} ${printAttribute(node)} ${
+      node.children.length
+        ? `>${printChildren(node)}</${printTag(node)}>`
+        : '/>'
+    }`
+  }
+  const root = tree.find((child) => {
+    return child.componentName === 'Form' || child.componentName === 'Root'
+  })
+  return `import React, { useMemo } from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import {
+  Form,
+  FormItem,
+  DatePicker,
+  Checkbox,
+  Cascader,
+  Editable,
+  Input,
+  NumberPicker,
+  Switch,
+  Password,
+  PreviewText,
+  Radio,
+  Reset,
+  Select,
+  Space,
+  Submit,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  Upload,
+  FormGrid,
+  FormLayout,
+  FormTab,
+  FormCollapse,
+  ArrayTable,
+  ArrayCards,
+} from '@formily/antd-v5'
+import { Card, Slider, Rate } from 'antd'
+
+const Text: React.FC<{
+  value?: string
+  content?: string
+  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
+}> = ({ value, mode, content, ...props }) => {
+  const tagName = mode === 'normal' || !mode ? 'div' : mode
+  return React.createElement(tagName, props, value || content)
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    Space,
+    FormGrid,
+    FormLayout,
+    FormTab,
+    FormCollapse,
+    ArrayTable,
+    ArrayCards,
+    FormItem,
+    DatePicker,
+    Checkbox,
+    Cascader,
+    Editable,
+    Input,
+    Text,
+    NumberPicker,
+    Switch,
+    Password,
+    PreviewText,
+    Radio,
+    Reset,
+    Select,
+    Submit,
+    TimePicker,
+    Transfer,
+    TreeSelect,
+    Upload,
+    Card,
+    Slider,
+    Rate,
+  },
+})
+
+export default ()=>{
+  const form = useMemo(() => createForm(), [])
+
+  return <Form form={form} ${printAttribute(root)}>
+    <SchemaField>
+      ${printChildren(root)}
+    </SchemaField>
+  </Form>
+}
+  
+`
+}
+
+export const MarkupSchemaWidget: React.FC<IMarkupSchemaWidgetProps> = (
+  props
+) => {
+  return (
+    <MonacoInput
+      {...props}
+      options={{ readOnly: true }}
+      value={transformToMarkupSchemaCode(props.tree)}
+      language="typescript"
+    />
+  )
+}

package/playground/widgets/PreviewWidget.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { createForm, onFormSubmitSuccess } from '@formily/core'
+import { connect, createSchemaField, mapProps } from '@formily/react'
+import {
+  Form,
+  FormItem,
+  DatePicker,
+  Checkbox,
+  Cascader,
+  Editable,
+  Input,
+  NumberPicker,
+  Switch,
+  Password,
+  PreviewText,
+  Radio,
+  Reset,
+  Select,
+  Space,
+  Submit,
+  TimePicker,
+  Transfer,
+  TreeSelect,
+  Upload,
+  FormGrid,
+  FormLayout,
+  FormTab,
+  FormCollapse,
+  ArrayTable,
+  ArrayCards,
+  // FormButtonGroup,
+  FormProps,
+} from '@formily/antd-v5'
+import { Card, Slider, Rate, Spin } from 'antd'
+import { TreeNode } from '@formily-design/core'
+import { transformToSchema } from '@formily-design/formily-transformer'
+import {
+  transformSchema,
+  executeFormApi,
+  IFormApiConfig,
+  getLocalStorageData,
+} from '../utils'
+import { FormButtonGroup } from '../components/FormButtonGroup/FormButtonGroup'
+import { FormButton } from '../components/FormButton/FormButton'
+import { LocationPicker } from '../components/LocationPicker/LocationPicker'
+import { FormList } from '../components/FormList/FormList'
+
+const Text: React.FC<{
+  value?: string
+  content?: string
+  mode?: 'normal' | 'h1' | 'h2' | 'h3' | 'p'
+}> = ({ value, mode, content, ...props }) => {
+  const tagName = mode === 'normal' || !mode ? 'div' : mode
+  return React.createElement(tagName, props, value || content)
+}
+
+// 重置 LocationPicker 组件属性
+const LocationPickerComponent = connect(
+  LocationPicker,
+  mapProps((props) => {
+    return {
+      ...props,
+      // 将组件值映射为业务字段
+      fieldNames: {
+        address: 'fullAddress',
+        lat: 'latitude',
+        lng: 'longitude',
+        ...props.fieldNames,
+      },
+    }
+  })
+)
+
+const SchemaField = createSchemaField({
+  components: {
+    Space,
+    FormGrid,
+    FormLayout,
+    FormTab,
+    FormCollapse,
+    ArrayTable,
+    ArrayCards,
+    FormItem,
+    DatePicker,
+    Checkbox,
+    Cascader,
+    Editable,
+    Input,
+    Text,
+    NumberPicker,
+    Switch,
+    Password,
+    PreviewText,
+    Radio,
+    Reset,
+    Select,
+    Submit,
+    TimePicker,
+    Transfer,
+    TreeSelect,
+    Upload,
+    Card,
+    Slider,
+    Rate,
+    FormButtonGroup,
+    FormButton,
+    LocationPicker: LocationPickerComponent,
+    FormList,
+  },
+})
+
+export interface IPreviewWidgetProps {
+  tree: TreeNode
+}
+
+interface IFormSetterProps extends FormProps {
+  api?: IFormApiConfig
+  initApi?: IFormApiConfig
+}
+
+export const PreviewWidget: React.FC<IPreviewWidgetProps> = (props) => {
+  const form = useMemo(
+    () =>
+      createForm({
+        /** effects 里可以配置各种逻辑，如：字段联动、事件监听、observable + reaction 组合的响应式状态  */
+        effects() {
+          /** 监听表单提交成功 */
+          onFormSubmitSuccess((form) => {
+            // 处理表单提交后返回页面逻辑
+            // console.log('onFormSubmitSuccess', form)
+          })
+        },
+      }),
+    []
+  )
+  const { form: transformForm, schema } = useMemo(
+    () => transformToSchema(props.tree),
+    [props.tree]
+  )
+  const [detailLoading, setDetailLoading] = useState(false)
+  const formProps = transformForm as IFormSetterProps
+  // 接口需要的业务参数
+  const apiParams = {}
+  const scope = {
+    /** 所有 localStorage 数据 */
+    $localStorage: getLocalStorageData(),
+    /** 表单请求接口需要的业务参数 */
+    apiParams,
+    /** 全局数据 */
+    $globalData: {
+      ...apiParams,
+    },
+  }
+  useEffect(() => {
+    // TODO: 需要添加业务数据参数判断
+    if (form && formProps.initApi) {
+      setDetailLoading(true)
+      // 加载初始数据
+      executeFormApi(formProps.initApi, {})
+        .then((data) => {
+          form.setInitialValues(data)
+        })
+        .finally(() => {
+          setDetailLoading(false)
+        })
+    }
+  }, [form, formProps.initApi])
+  return (
+    <Spin spinning={detailLoading}>
+      <Form {...formProps} form={form}>
+        <SchemaField
+          schema={transformSchema(schema, { $globalData: scope.$globalData })}
+          scope={{
+            ...scope,
+            /** 表单提交作用域表达式 - 执行 form 配置的 API */
+            submitFormApi: formProps.api
+              ? (formValues: Record<string, any>) =>
+                  executeFormApi(formProps.api, formValues, {
+                    apiParams,
+                    scope,
+                  })
+              : undefined,
+          }}
+        />
+      </Form>
+    </Spin>
+  )
+}

package/playground/widgets/SchemaEditorWidget.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+  transformToSchema,
+  transformToTreeNode,
+} from '@formily-design/formily-transformer'
+import { TreeNode, ITreeNode } from '@formily-design/core'
+import { MonacoInput } from '@formily-design/react-settings-form'
+
+export interface ISchemaEditorWidgetProps {
+  tree: TreeNode
+  onChange?: (tree: ITreeNode) => void
+}
+
+export const SchemaEditorWidget: React.FC<ISchemaEditorWidgetProps> = (
+  props
+) => {
+  return (
+    <MonacoInput
+      {...props}
+      value={JSON.stringify(transformToSchema(props.tree), null, 2)}
+      onChange={(value) => {
+        props.onChange?.(transformToTreeNode(JSON.parse(value)))
+      }}
+      language="json"
+    />
+  )
+}

package/playground/widgets/index.ts

@@ -0,0 +1,5 @@
+export * from './LogoWidget'
+export * from './ActionsWidget'
+export * from './PreviewWidget'
+export * from './SchemaEditorWidget'
+export * from './MarkupSchemaWidget'