@willyterrytt/designable-formily-antd

Formily + Designable component package for Ant Design v5.

This package is a secondary modification based on the official Designable/Formily package line and the @pind/designable-formily-antd Ant Design v5 adaptation. It keeps the original Designable material model and adds a clearer path for custom components.

Features

• Built for Ant Design v5 through @formily/antd-v5.
• Compatible with @pind/designable-* 2.0.0-beta.6.
• Exports design-time components, schema settings, locales, and material sources from one package.
• Supports custom components by adding:
  • a React component implementation
  • Behavior
  • Resource
  • property schema
  • locale text
  • source export

Install

npm install @willyterrytt/designable-formily-antd

You also need the peer dependencies used by Designable and Formily:

npm install @formily/core @formily/react @formily/antd-v5 antd react react-dom

Use In Designer

Use the package sources and components in your Designable editor.

import {
  Designer,
  ComponentTreeWidget,
  ResourceListWidget,
} from '@pind/designable-react'
import { sources } from '@willyterrytt/designable-formily-antd'

export const FormDesigner = ({ engine }) => {
  return (
    <Designer engine={engine}>
      <ResourceListWidget sources={Object.values({ ...sources })} />
      <ComponentTreeWidget components={{ ...sources }} />
    </Designer>
  )
}

Use In Preview Or Runtime Rendering

When rendering a saved schema with Formily, register the components used by your schema. For example:

import { createSchemaField } from '@formily/react'
import {
  Form,
  Text,
} from '@willyterrytt/designable-formily-antd'
import {
  FormItem,
  Input,
  Radio,
  Select,
  Switch,
} from '@formily/antd-v5'

const SchemaField = createSchemaField({
  components: {
    Form,
    FormItem,
    Input,
    Radio,
    Select,
    Switch,
    Text,
  },
})

Add A Custom Component

Create a component folder under src/components, for example src/components/MyWidget.

import React from 'react'
import { createBehavior, createResource } from '@pind/designable-core'
import { DnFC } from '@pind/designable-react'
import { createFieldSchema } from '../Field'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'

export const MyWidget: DnFC<any> = (props) => {
  return <div>{props.value}</div>
}

MyWidget.Behavior = createBehavior({
  name: 'MyWidget',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'MyWidget',
  designerProps: {
    propsSchema: createFieldSchema(AllSchemas.MyWidget as any),
  },
  designerLocales: AllLocales.MyWidget,
})

MyWidget.Resource = createResource('Custom', {
  icon: 'InputSource',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: 'My Widget',
        'x-decorator': 'FormItem',
        'x-component': 'MyWidget',
      },
    },
  ],
})

Then add matching schema and locale files:

// src/schemas/MyWidget.ts
import { ISchema } from '@formily/react'

export const MyWidget: ISchema = {
  type: 'object',
  properties: {},
}

// src/locales/MyWidget.ts
import { GlobalRegistry } from '@pind/designable-core'

GlobalRegistry.registerDesignerLocales({
  'zh-CN': {
    sources: {
      Custom: '自定义组件',
    },
  },
  'en-US': {
    sources: {
      Custom: 'Custom',
    },
  },
})

export const MyWidget = {
  'zh-CN': {
    title: '自定义组件',
  },
  'en-US': {
    title: 'Custom Component',
  },
}

Finally export it from:

• src/components/index.ts
• src/sources.ts
• src/schemas/all.ts
• src/locales/all.ts

After rebuilding, the component can be dragged in the designer and rendered by Formily as long as it is registered in createSchemaField.

Publish

Build and publish to the official npm registry:

pnpm install
pnpm --filter @willyterrytt/designable-formily-antd run build:cjs
pnpm --filter @willyterrytt/designable-formily-antd run build:esm
pnpm --filter @willyterrytt/designable-formily-antd exec ts-node copy
npm publish ./formily/antd --access public --registry https://registry.npmjs.org/

If npm two-factor authentication is enabled:

npm publish ./formily/antd --access public --registry https://registry.npmjs.org/ --otp 123456

You can also publish the packed tarball:

pnpm --filter @willyterrytt/designable-formily-antd pack --pack-destination ./artifacts
npm publish ./artifacts/willyterrytt-designable-formily-antd-2.1.1.tgz --access public --registry https://registry.npmjs.org/ --otp 123456