### Initial Project Setup and Dependency Installation

Source: https://github.com/alibaba/formily/wiki/贡献指南

Steps to navigate into the Formily directory, install overall project dependencies using npm, run an initial build, bootstrap sub-project dependencies using Lerna, and then build individual sub-projects to prepare the development environment.

```shell
$ cd formily
$ npm install #安装整体项目依赖
$ npm run build #先跑一遍构建
$ npm run bootstrap  # 安装子项目依赖
$ npm run build #各自构建子项目lib
```

--------------------------------

### Start Reactive Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to start the development server for the `@formily/reactive` project documentation, for contributors focusing on the reactive system.

```bash
$ yarn workspace @formily/reactive start
```

--------------------------------

### Install Formily React UI Bridge

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

Installs the `@formily/react` UI bridge library, essential for integrating Formily's core data with React applications to achieve interactive form effects.

```bash
npm install --save @formily/react
```

--------------------------------

### Install Formily Core Library

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

Installs the core Formily library, `@formily/core`, which manages form state, validation, and data linkage. This is a fundamental dependency for any Formily project.

```bash
npm install --save @formily/core
```

--------------------------------

### Initial Project Setup and Build Commands

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Commands to navigate into the Formily project directory, install all overall project dependencies using Yarn, build all sub-projects, and execute unit tests to ensure functionality.

```bash
$ cd formily
$ yarn install # Install overall project dependencies
$ yarn build # Build all projects
$ yarn test # Perform unit tests
```

--------------------------------

### Install Formily Vue UI Bridge

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

Installs the `@formily/vue` UI bridge library, necessary for connecting Formily's core data with Vue applications to enable rich form interactions.

```bash
npm install --save @formily/vue
```

--------------------------------

### Start Fusion Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to start the development server for the `@formily/next` (Fusion) project documentation, for contributors working on Fusion Design integrations.

```bash
$ yarn workspace @formily/next start
```

--------------------------------

### Install Formily Alibaba Fusion Component Integration

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

Installs Alibaba Fusion (`@alifd/next`), Moment.js, and the `@formily/next` package. This enables seamless integration of Formily with Alibaba Fusion components, offering a ready-to-use solution for various form requirements.

```bash
npm install --save @alifd/next moment @formily/next
```

--------------------------------

### Start Core Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to start the development server specifically for the `@formily/core` project documentation, useful for contributors focusing on the core library.

```bash
$ yarn workspace @formily/core start
```

--------------------------------

### Start React Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to start the development server for the `@formily/react` project documentation, enabling contributors to work on React-specific Formily documentation.

```bash
$ yarn workspace @formily/react start
```

--------------------------------

### Install Formily Ant Design Component Integration

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

Installs Ant Design, Moment.js, and the `@formily/antd` package. This provides a pre-encapsulated solution for using Formily with Ant Design components out-of-the-box, covering common form scenarios.

```bash
npm install --save antd moment @formily/antd
```

--------------------------------

### Start Vue Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to start the development server for the `@formily/vue` project documentation, useful for contributors working on Vue-specific Formily integrations.

```bash
$ yarn workspace @formily/vue start
```

--------------------------------

### Start Ant Design Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to start the development server for the `@formily/antd` project documentation, for contributors focusing on Ant Design integrations.

```bash
$ yarn workspace @formily/antd start
```

--------------------------------

### Start Main Project Documentation Server

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Command to launch the development server for the main Formily project documentation, allowing contributors to preview changes to the documentation.

```bash
$ yarn start
```

--------------------------------

### Install Formily Core Library via npm

Source: https://github.com/alibaba/formily/blob/formily_next/packages/core/docs/index.md

This snippet demonstrates how to install the core Formily library using npm, saving it as a dependency in your project.

```bash
$ npm install --save @formily/core
```

--------------------------------

### Install Formily Designable Packages

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/form-builder.md

Instructions for installing the Formily Designable extension packages for different UI frameworks, enabling form building and configuration capabilities. Users can choose the appropriate package based on their project's UI library (Ant Design or Alibaba Fusion).

```bash
npm install --save @designable/formily-antd
```

```bash
npm install --save @designable/formily-next
```

--------------------------------

### Formily Antd Quick Start with NumberPicker

Source: https://github.com/alibaba/formily/blob/formily_next/packages/antd/docs/index.zh-CN.md

This example demonstrates a basic Formily setup using `FormProvider`, `Field`, and `FormConsumer` with Ant Design's `NumberPicker` component. It creates a form with two number input fields (price and count) and dynamically calculates their product, displaying the result using `FormConsumer`.

```tsx
/**
 * defaultShowCode: true
 */
import React from 'react'
import { NumberPicker, FormItem, Space } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'

const form = createForm()

export default () => (
  <FormProvider form={form}>
    <Space>
      <Field
        name="price"
        title="价格"
        initialValue={5.2}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: '请输入',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormItem>×</FormItem>
      <Field
        name="count"
        title="数量"
        initialValue={100}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: '请输入',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormConsumer>
        {(form) => (
          <FormItem>{` ${form.values.price * form.values.count} 元`}</FormItem>
        )}
      </FormConsumer>
    </Space>
  </FormProvider>
)
```

--------------------------------

### Formily Quick Start with NumberPicker and FormItem

Source: https://github.com/alibaba/formily/blob/formily_next/packages/next/docs/index.zh-CN.md

This TypeScript/React example demonstrates a basic Formily setup. It showcases how to create a form instance, provide it to components using `FormProvider`, define form fields with `Field`, and use `NumberPicker` and `FormItem` for input and layout. The `FormConsumer` is used to dynamically display the calculated product of two number fields, illustrating reactive form state management.

```tsx
/**
 * defaultShowCode: true
 */
import React from 'react'
import { NumberPicker, FormItem, Space } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'

const form = createForm()

export default () => (
  <FormProvider form={form}>
    <Space>
      <Field
        name="price"
        title="价格"
        initialValue={5.2}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: '请输入',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormItem>×</FormItem>
      <Field
        name="count"
        title="数量"
        initialValue={100}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: '请输入',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormConsumer>
        {(form) => (
          <FormItem>{` ${form.values.price * form.values.count} 元`}</FormItem>
        )}
      </FormConsumer>
    </Space>
  </FormProvider>
)
```

--------------------------------

### Run Core Module Development Demo

Source: https://github.com/alibaba/formily/wiki/贡献指南

Command to start the development server for the 'core' module, allowing developers to view and interact with its demo. Changes made to 'packages/core/README.md' will be reflected in watch mode, facilitating intuitive code modification and testing.

```shell
$ cd formily
$ npm run doc:core # 查看core的demo展示，目录位于 packages/core/README.md
```

--------------------------------

### Import Formily Core, React Bridge, and Ant Design Components

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

Demonstrates how to import essential Formily dependencies using ES Module syntax. This includes `React`, `createForm` from `@formily/core`, `FormProvider` and `Field` from `@formily/react`, and `FormItem` and `Input` from `@formily/antd` for building forms.

```ts
import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
import { FormItem, Input } from '@formily/antd'
```

--------------------------------

### Building a Reactive Form with Formily and React

Source: https://github.com/alibaba/formily/blob/formily_next/packages/core/docs/index.md

This comprehensive example demonstrates how to create a reactive form using `@formily/core` and React. It showcases the setup of form contexts (`FormContext`, `FieldContext`), custom UI components (`Field`, `FormItem`, `Input`), form provisioning (`FormProvider`), and real-time validation logic (e.g., password matching). The snippet illustrates how to integrate Formily's core capabilities with React's component model to build dynamic and responsive forms.

```tsx
/**
 * defaultShowCode: true
 */
import React, { createContext, useMemo, useContext, useEffect } from 'react'
import { createForm, setValidateLanguage } from '@formily/core'
import { observer } from '@formily/reactive-react'

//Create a context to facilitate Field consumption
const FormContext = createContext()
//Create a context to facilitate the consumption of FormItem
const FieldContext = createContext()

//State bridge component
const Field = observer((props) => {
  const form = useContext(FormContext)
  //Create a field
  const field = form.createField(props)
  useEffect(() => {
    //Mount field
    field.onMount()
    return () => {
      //Unload field
      field.onUnmount()
    }
  })
  if (!field.visible || field.hidden) return null
  //Render the field, associate the field state with the UI component
  const component = React.createElement(field.component[0], {
    ...field.component[1],
    value: field.value,
    onChange: field.onInput,
  })

  //Render field wrapper
  const decorator = React.createElement(
    field.decorator[0],
    field.decorator[1],
    component
  )

  return (
    <FieldContext.Provider value={field}>{decorator}</FieldContext.Provider>
  )
})

// FormItem UI component
const FormItem = observer(({ children }) => {
  const field = useContext(FieldContext)
  return (
    <div>
      <div style={{ height: 20 }}>{field.title}:</div>
      {children}
      <div style={{ height: 20, fontSize: 12, color: 'red' }}>
        {field.selfErrors.join(',')}
      </div>
    </div>
  )
})

// Input UI component
const Input = (props) => {
  return (
    <input
      {...props}
      value={props.value || ''}
      style={{
        ...props.style,
        border: '2px solid rgb(186 203 255)',
        borderRadius: 6,
        width: '100%',
        height: 28,
        padding: '0 5px',
      }}
    />
  )
}

//Form management entrance
const FormProvider = (props) => {
  useEffect(() => {
    //Mount form
    props.form?.onMount()
    return () => {
      //Uninstall the form
      props.form?.onUnmount()
    }
  })
  return (
    <FormContext.Provider value={props.form}>
      {props.children}
    </FormContext.Provider>
  )
}

//Form response monitor
const FormConsumer = observer((props) => {
  const form = useContext(FormContext)
  return <div>{props.children(form)}</div>
})

/*
 * The above logic has been implemented in @formily/react or @formily/vue, and there is no need to rewrite it in actual use
 */

//Switch the built-in check internationalization copy to English
setValidateLanguage('en')

export default () => {
  const form = useMemo(() => createForm({ validateFirst: true }))

  const createPasswordEqualValidate = (equalName) => (field) => {
    if (
      form.values.confirm_password &&
      field.value &&
      form.values[equalName] !== field.value
    ) {
      field.selfErrors = ['Password does not match Confirm Password.']
    } else {
      field.selfErrors = []
    }
  }

  return (
    <FormProvider form={form}>
      <Field
        name="name"
        title="Name"
        required
        decorator={[FormItem]}
        component={[Input, { placeholder: 'Please Input' }]}
      />
      <Field
        name="password"
        title="Password"
        required
        decorator={[FormItem]}
        component={[Input, { type: 'password', placeholder: 'Please Input' }]}
        reactions={createPasswordEqualValidate('confirm_password')}
      />
      <Field
        name="confirm_password"
        title="Confirm Password"
        required
        decorator={[FormItem]}
        component={[Input, { type: 'password', placeholder: 'Please Input' }]}
        reactions={createPasswordEqualValidate('password')}
      />
      <code>
        <pre>
          <FormConsumer>
            {(form) => JSON.stringify(form.values, null, 2)}
          </FormConsumer>
        </pre>
      </code>
    </FormProvider>
  )
}
```

--------------------------------

### Formily Core Concepts and Component API Reference

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

This section provides detailed API documentation and conceptual explanations for key Formily elements, including createForm, FormProvider, FormLayout, Field (with its attributes like name, title, required, initialValue, decorator, component), FormConsumer, FormButtonGroup, and Submit. It clarifies their purpose, parameters, and usage within the Formily ecosystem.

```APIDOC
createForm:
  - Purpose: Creates the core domain model of the form, which is the standard ViewModel as the MVVM design pattern.
  - Link: https://core.formilyjs.org/api/entry/create-form

FormProvider:
  - Purpose: Used as the entrance to the view layer bridge form model.
  - Parameters:
    - form: Receives the Form instance created by createForm and passes it to child components in the form of context.
  - Link: https://react.formilyjs.org/api/components/form-provider

FormLayout:
  - Purpose: Component used to control the style of FormItem in batches.
  - Example: layout="vertical" (label on top, component on bottom).
  - Link: https://antd.formilyjs.org/components/form-layout

Field:
  - Purpose: Component used to undertake common fields.
  - Link: https://react.formilyjs.org/api/components/field
  - Attributes:
    - name: Identifies the path of the field in the final submitted data of the form.
    - title: Identifies the title of the field.
      - If decorator is FormItem: Received as label by FormItem.
      - If custom component: Consumer of title taken over by custom component.
      - If no decorator: Title will not be displayed on the UI.
    - required: Shorthand for required verification.
      - If decorator is FormItem: Automatic asterisk prompt, status feedback on verification failure.
      - If custom component: Corresponding UI style needs to be implemented by custom component.
      - If no decorator: Blocks submission, no UI feedback for verification failure.
    - initialValue: Represents the default value of the field.
    - decorator: Represents the UI decorator of the field (e.g., FormItem).
      - Format: Array [component_type, component_attribute].
    - component: Represents the input control of the field (e.g., Input or Select).
      - Format: Array [component_type, component_attribute].

FormConsumer:
  - Purpose: Exists as a responder of a responsive model; core is a render props mode.
  - Functionality: In the callback function as children, all dependencies are automatically collected; if dependencies change, it will be re-rendered.
  - Use Case: Conveniently realize the needs of various calculations and summaries.
  - Link: https://react.formilyjs.org/api/components/form-consumer

FormButtonGroup:
  - Purpose: Exists as a form button group container, mainly responsible for the layout of the buttons.
  - Link: https://antd.formilyjs.org/components/form-button-group

Submit:
  - Purpose: Exists as an action trigger for form submission.
  - Alternatives: Can also directly use the form.submit method to submit.
  - Advantages: No need to write onClick event handler on Button component every time; handles loading state of the Form.
  - Loading State: If onSubmit method returns a Promise and the Promise is pending, the button will automatically enter the loading state.
  - Link: https://antd.formilyjs.org/components/submit
```

--------------------------------

### Basic Formily React Form with Ant Design Components

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/quick-start.md

This snippet demonstrates how to create a simple reactive form using Formily in a React application. It showcases the integration of @formily/core for form logic, @formily/react for UI binding, and @formily/antd for Ant Design components, including FormItem, Input, and FormButtonGroup.

```tsx
/**
 * defaultShowCode: true
 */
import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'
import {
  FormItem,
  FormLayout,
  Input,
  FormButtonGroup,
  Submit,
} from '@formily/antd'

const form = createForm()

export default () => {
  return (
    <FormProvider form={form}>
      <FormLayout layout="vertical">
        <Field
          name="input"
          title="Input box"
          required
          initialValue="Hello world"
          decorator={[FormItem]}
          component={[Input]}
        />
      </FormLayout>
      <FormConsumer>
        {() => (
          <div
            style={{
              marginBottom: 20,
              padding: 5,
              border: '1px dashed #666',
            }}
          >
            Real-time response：{form.values.input}
          </div>
        )}
      </FormConsumer>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}
```

--------------------------------

### Quick Start with Formily and Ant Design

Source: https://github.com/alibaba/formily/blob/formily_next/packages/antd/docs/index.md

This example demonstrates how to create a basic form using Formily with Ant Design components. It initializes a form, defines two NumberPicker fields for 'price' and 'count', and uses FormConsumer to dynamically display the calculated total.

```tsx
/**
 * defaultShowCode: true
 */
import React from 'react'
import { NumberPicker, FormItem, Space } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'

const form = createForm()

export default () => (
  <FormProvider form={form}>
    <Space>
      <Field
        name="price"
        title="price"
        initialValue={5.2}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: 'Please enter',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormItem>×</FormItem>
      <Field
        name="count"
        title="quantity"
        initialValue={100}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: 'Please enter',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormConsumer>
        {(form) => (
          <FormItem>{` ${form.values.price * form.values.count}元`}</FormItem>
        )}
      </FormConsumer>
    </Space>
  </FormProvider>
)
```

--------------------------------

### Quick Start Formily React Application with NumberPickers

Source: https://github.com/alibaba/formily/blob/formily_next/packages/next/docs/index.md

This example demonstrates a basic Formily application in React. It sets up a form using `FormProvider` and `createForm`, then defines two `Field` components (`price` and `count`) using `NumberPicker` for input. A `FormConsumer` is used to dynamically display the calculated total based on the input values, showcasing real-time form state management.

```tsx
/**
 * defaultShowCode: true
 */
import React from 'react'
import { NumberPicker, FormItem, Space } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'

const form = createForm()

export default () => (
  <FormProvider form={form}>
    <Space>
      <Field
        name="price"
        title="price"
        initialValue={5.2}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: 'Please enter',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormItem>×</FormItem>
      <Field
        name="count"
        title="quantity"
        initialValue={100}
        decorator={[FormItem]}
        component={[
          NumberPicker,
          {
            placeholder: 'Please enter',
            style: {
              width: 100,
            },
          },
        ]}
      />
      <FormConsumer>
        {(form) => (
          <FormItem>{` ${form.values.price * form.values.count}元`}</FormItem>
        )}
      </FormConsumer>
    </Space>
  </FormProvider>
)
```

--------------------------------

### Formily Quick Start: Basic React Form with Ant Design and Validation

Source: https://github.com/alibaba/formily/blob/formily_next/packages/react/docs/index.md

This comprehensive example illustrates how to build a simple form using Formily in a React application, integrated with Ant Design components. It covers form creation, field definition, custom validation logic (e.g., password confirmation), and displaying form values dynamically. It highlights the use of FormProvider, Field, FormItem, and FormConsumer.

```tsx
/**
 * defaultShowCode: true
 */
import React, { useMemo } from 'react'
import { createForm, setValidateLanguage } from '@formily/core'
import {
  FormProvider,
  FormConsumer,
  Field,
  useField,
  observer,
} from '@formily/react'
import { Input, Form } from 'antd'

// FormItem UI component
const FormItem = observer(({ children }) => {
  const field = useField()
  return (
    <Form.Item
      label={field.title}
      help={field.selfErrors?.length ? field.selfErrors : undefined}
      extra={field.description}
      validateStatus={field.validateStatus}
    >
      {children}
    </Form.Item>
  )
})

/*
 * The above logic has been implemented in @formily/antd, and there is no need to rewrite it in actual use
 */

//Switch the built-in check internationalization copy to English
setValidateLanguage('en')

export default () => {
  const form = useMemo(() => createForm({ validateFirst: true }))

  const createPasswordEqualValidate = (equalName) => (field) => {
    if (
      form.values.confirm_password &&
      field.value &&
      form.values[equalName] !== field.value
    ) {
      field.selfErrors = ['Password does not match Confirm Password.']
    } else {
      field.selfErrors = []
    }
  }

  return (
    <FormProvider form={form}>
      <Form layout="vertical">
        <Field
          name="name"
          title="Name"
          required
          decorator={[FormItem]}
          component={[Input, { placeholder: 'Please Input' }]}
        />
        <Field
          name="password"
          title="Password"
          required
          decorator={[FormItem]}
          component={[Input, { type: 'password', placeholder: 'Please Input' }]}
          reactions={createPasswordEqualValidate('confirm_password')}
        />
        <Field
          name="confirm_password"
          title="Confirm Password"
          required
          decorator={[FormItem]}
          component={[Input, { type: 'password', placeholder: 'Please Input' }]}
          reactions={createPasswordEqualValidate('password')}
        />
        <code>
          <pre>
            <FormConsumer>
              {(form) => JSON.stringify(form.values, null, 2)}
            </FormConsumer>
          </pre>
        </code>
      </Form>
    </FormProvider>
  )
}
```

--------------------------------

### Install babel-plugin-import for Webpack projects

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/advanced/build.md

Commands to install `babel-plugin-import` via npm or yarn. This package is essential for configuring on-demand component loading in a standard Webpack setup.

```shell
npm install babel-plugin-import --save-dev
```

```shell
yarn add babel-plugin-import --dev
```

--------------------------------

### Pull Request Naming Convention

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/contribution.md

Specification for the format of Pull Request names, following the conventional commits standard. It includes type, scope, and subject, with an example to guide contributors.

```APIDOC
PR Name Format:
  <type>(<scope>): <subject>

Examples:
  feat(core): add unit test

Fields:
  type: Type of change (e.g., feat, fix, docs, style, refactor, test, chore)
  scope: Optional, specifies the part of the codebase affected
  subject: Concise description of the change
```

--------------------------------

### Install Formily Reactive Library

Source: https://github.com/alibaba/formily/blob/formily_next/packages/reactive/docs/index.md

Installs the core @formily/reactive package using npm, which provides observable state management capabilities.

```bash
$ npm install --save @formily/reactive
```

--------------------------------

### Handle Form Submission Validation Start with Formily

Source: https://github.com/alibaba/formily/blob/formily_next/packages/core/docs/api/entry/FormEffectHooks.md

Illustrates the usage of `onFormSubmitValidateStart` to respond when the form's validation process begins during submission. The example updates a state variable to indicate the start of validation.

```tsx
import React, { useMemo, useState } from 'react'
import { createForm, onFormSubmitValidateStart } from '@formily/core'
import { ActionResponse } from './ActionResponse'

export default () => {
  const [response, setResponse] = useState('')
  const form = useMemo(
    () =>
      createForm({
        effects() {
          onFormSubmitValidateStart(() => {
            setResponse('Form submission verification starts')
          })
        },
      }),
    []
  )
  return (
    <ActionResponse response={response}>
      <button
        onClick={() => {
          form.createField({
            name: 'input',
            required: true,
          })
          form.submit()
        }}
      >
        Submit
      </button>
    </ActionResponse>
  )
}
```

--------------------------------

### Install Formily Core and React Packages

Source: https://github.com/alibaba/formily/blob/formily_next/packages/react/docs/index.zh-CN.md

This command installs the necessary `@formily/core` and `@formily/react` packages using npm, which are fundamental for building forms with Formily.

```bash
$ npm install --save @formily/core @formily/react
```

--------------------------------

### Monitor Form Submission Start with Formily `onFormSubmitStart` Hook (React/TSX)

Source: https://github.com/alibaba/formily/blob/formily_next/packages/core/docs/api/entry/FormEffectHooks.md

This example illustrates using the `onFormSubmitStart` hook to detect the beginning of a form submission process. It updates a response message when the form submission starts. The form's `submit()` method is called to trigger the effect.

```tsx
import React, { useMemo, useState } from 'react'
import { createForm, onFormSubmitStart } from '@formily/core'
import { ActionResponse } from './ActionResponse'

export default () => {
  const [response, setResponse] = useState('')
  const form = useMemo(
    () =>
      createForm({
        effects() {
          onFormSubmitStart(() => {
            setResponse('form submission start')
          })
        },
      }),
    []
  )
  return (
    <ActionResponse response={response}>
      <button
        onClick={() => {
          form.submit()
        }}
      >
        Submit
      </button>
    </ActionResponse>
  )
}
```

--------------------------------

### Install Formily and Alibaba Fusion Dependencies

Source: https://github.com/alibaba/formily/blob/formily_next/packages/next/docs/index.md

This command installs the required npm packages for building applications with Formily and Alibaba Fusion components. It includes `@alifd/next` and `moment` for UI components, and `@formily/core`, `@formily/react`, and `@formily/next` for Formily's core logic, React integration, and Next.js specific components.

```bash
$ npm install --save @alifd/next moment
$ npm install --save @formily/core @formily/react @formily/next
```

--------------------------------

### React Component Example using useFieldSchema

Source: https://github.com/alibaba/formily/blob/formily_next/packages/react/docs/api/hooks/useFieldSchema.md

This example demonstrates how to integrate and use the `useFieldSchema` hook within a React functional component. It shows how to retrieve the current field's schema and display its JSON representation, illustrating the hook's practical application within a Formily setup using `FormProvider` and `createSchemaField`.

```tsx
import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField, useFieldSchema } from '@formily/react'

const form = createForm()

const Custom = () => {
  const schema = useFieldSchema()
  return (
    <code>
      <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre>
    </code>
  )
}

const SchemaField = createSchemaField({
  components: {
    Custom,
  },
})

export default () => (
  <FormProvider form={form}>
    <SchemaField>
      <SchemaField.Object
        name="custom"
        x-component="Custom"
        x-component-props={{
          schema: {
            type: 'object',
            properties: {
              input: {
                type: 'string',
                'x-component': 'Custom',
              },
            },
          },
        }}
      />
    </SchemaField>
  </FormProvider>
)
```

--------------------------------

### Install Formily Next.js and Core Dependencies

Source: https://github.com/alibaba/formily/blob/formily_next/packages/next/docs/components/index.md

These commands install the required npm packages for `@formily/next` and `@formily/react`, along with their peer dependencies `@alifd/next` and `moment`, which are essential for the component library's functionality.

```bash
$ npm install --save @alifd/next moment
$ npm install --save @formily/next @formily/react
```

--------------------------------

### Designable Studio Setup with Formily Components

Source: https://github.com/alibaba/formily/blob/formily_next/docs/guide/form-builder.md

This TypeScript React code sets up a Designable studio environment. It initializes the `Designer` with custom shortcuts for saving schemas, registers internationalization locales for component sources, and renders the main studio layout. The layout includes various panels like component resources, outline tree, history, and a viewport, populating the resource panel with a wide range of Formily components for drag-and-drop functionality.

```tsx
import 'antd/dist/antd.less'
import React, { useMemo } from 'react'
import ReactDOM from 'react-dom'
import {
  Designer, //Designer root component, mainly used to deliver context
  DesignerToolsWidget, //Drawing board tool pendant
  ViewToolsWidget, //View switching tool pendant
  Workspace, //Workspace components, core components, used to manage drag and drop behavior in the workspace, tree node data, etc...
  OutlineTreeWidget, //Outline tree component, it will automatically identify the current workspace and display the tree nodes in the workspace
  ResourceWidget, //Drag and drop the source widget
  HistoryWidget, //History widget
  StudioPanel, //Main layout panel
  CompositePanel, //Left combined layout panel
  WorkspacePanel, //Workspace layout panel
  ToolbarPanel, //Toolbar layout panel
  ViewportPanel, //Viewport layout panel
  ViewPanel, //View layout panel
  SettingsPanel, //Configure the form layout panel on the right
  ComponentTreeWidget, //Component tree renderer
} from '@designable/react'
import { SettingsForm } from '@designable/react-settings-form'
import {
  createDesigner,
  GlobalRegistry,
  Shortcut,
  KeyCode,
} from '@designable/core'
import {
  LogoWidget,
  ActionsWidget,
  PreviewWidget,
  SchemaEditorWidget,
  MarkupSchemaWidget,
} from './widgets'
import { saveSchema } from './service'
import {
  Form,
  Field,
  Input,
  Select,
  TreeSelect,
  Cascader,
  Radio,
  Checkbox,
  Slider,
  Rate,
  NumberPicker,
  Transfer,
  Password,
  DatePicker,
  TimePicker,
  Upload,
  Switch,
  Text,
  Card,
  ArrayCards,
  ObjectContainer,
  ArrayTable,
  Space,
  FormTab,
  FormCollapse,
  FormLayout,
  FormGrid,
} from '../src'

GlobalRegistry.registerDesignerLocales({
  'zh-CN': {
    sources: {
      Inputs: 'Input controls',
      Layouts: 'Layout components',
      Arrays: 'Self-incrementing components',
      Displays: 'Display components',
    },
  },
  'en-US': {
    sources: {
      Inputs: 'Inputs',
      Layouts: 'Layouts',
      Arrays: 'Arrays',
      Displays: 'Displays',
    },
  },
})

const App = () => {
  const engine = useMemo(
    () =>
      createDesigner({
        shortcuts: [
          new Shortcut({
            codes: [
              [KeyCode.Meta, KeyCode.S],
              [KeyCode.Control, KeyCode.S],
            ],
            handler(ctx) {
              saveSchema(ctx.engine)
            },
          }),
        ],
        rootComponentName: 'Form',
      }),
    []
  )
  return (
    <Designer engine={engine}>
      <StudioPanel logo={<LogoWidget />} actions={<ActionsWidget />}>
        <CompositePanel>
          <CompositePanel.Item title="panels.Component" icon="Component">
            <ResourceWidget
              title="sources.Inputs"
              sources={[
                Input,
                Password,
                NumberPicker,
                Rate,
                Slider,
                Select,
                TreeSelect,
                Cascader,
                Transfer,
                Checkbox,
                Radio,
                DatePicker,
                TimePicker,
                Upload,
                Switch,
                ObjectContainer,
              ]}
            />
            <ResourceWidget
              title="sources.Layouts"
              sources={[
                Card,
                FormGrid,
                FormTab,
                FormLayout,
                FormCollapse,
                Space,
              ]}
            />
            <ResourceWidget
              title="sources.Arrays"
              sources={[ArrayCards, ArrayTable]}
            />
            <ResourceWidget title="sources.Displays" sources={[Text]} />
          </CompositePanel.Item>
          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
            <OutlineTreeWidget />
          </CompositePanel.Item>
          <CompositePanel.Item title="panels.History" icon="History">
            <HistoryWidget />
          </CompositePanel.Item>
        </CompositePanel>
        <Workspace id="form">
          <WorkspacePanel>
            <ToolbarPanel>
              <DesignerToolsWidget />
              <ViewToolsWidget
                use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
              />
            </ToolbarPanel>
            <ViewportPanel>
              <ViewPanel type="DESIGNABLE">
                {() => (
                  <ComponentTreeWidget
                    components={{
                      Form,
                      Field,
                      Input,
                      Select,
                      TreeSelect,
                      Cascader,
                      Radio,
                      Checkbox,
                      Slider,
                      Rate,
                      NumberPicker,
                      Transfer,
                      Password,

```

--------------------------------

### Install Formily Ant Design and Dependencies

Source: https://github.com/alibaba/formily/blob/formily_next/packages/antd/docs/components/index.md

This command installs the necessary packages for using `@formily/antd`. It includes `antd` and `moment` as core Ant Design dependencies, along with `@formily/core` and `@formily/react` for Formily's functionality. This setup is required to develop applications using Formily with Ant Design components.

```bash
$ npm install --save antd moment
$ npm install --save @formily/core @formily/react @formily/antd
```

--------------------------------

### Basic Form Creation Example with createForm

Source: https://github.com/alibaba/formily/blob/formily_next/packages/core/docs/api/entry/createForm.zh-CN.md

Demonstrates how to import and use the `createForm` function from the `@formily/core` package. This example shows how to instantiate a new form with predefined initial values.

```ts
import { createForm } from '@formily/core'

const form = createForm({
  initialValues: {
    say: 'hello',
  },
})
```

--------------------------------

### FormPath slice Method Usage

Source: https://github.com/alibaba/formily/blob/formily_next/packages/core/docs/api/entry/FormPath.zh-CN.md

Examples demonstrating the `slice` method of FormPath. It shows how to extract a sub-path from a data operation path, starting from a specified index.

```TypeScript
import { FormPath } from '@formily/core';

console.log(FormPath.parse('aa.bb.cc').slice(1).toString()) //bb.cc
```

--------------------------------

### FormDialog Component API Reference

Source: https://github.com/alibaba/formily/blob/formily_next/packages/antd/docs/components/FormDialog.zh-CN.md

This section provides an API overview for the FormDialog component and its sub-components. It details the various constructor overloads for FormDialog, allowing flexible instantiation with different combinations of title, ID, and renderer. Additionally, it describes FormDialog.Footer and FormDialog.Portal, outlining their properties and intended usage within the FormDialog ecosystem.

```APIDOC
FormDialog:
  (title: IModalProps, id: string, renderer: FormDialogRenderer): IFormDialog
  (title: IModalProps, renderer: FormDialogRenderer): IFormDialog
  (title: ModalTitle, id: string, renderer: FormDialogRenderer): IFormDialog
  (title: ModalTitle, renderer: FormDialogRenderer): IFormDialog

FormDialog.Footer:
  Description: A sub-component of FormDialog, typically used for rendering action buttons or footers within the dialog.
  Properties: None.
  Children: Accepts child nodes to be rendered inside the footer.

FormDialog.Portal:
  Description: A sub-component of FormDialog that allows specifying a custom DOM element for rendering the dialog content, useful for managing z-index or rendering context in complex applications.
  Properties:
    id: string (optional)
      Default: 'form-dialog'
      Description: Specifies the ID of the DOM element where the dialog should be mounted. This is particularly useful in applications with multiple prefixCls or distinct regional dialogs, allowing precise control over the rendering location.
```