litmoss-form 0.0.0-stage → 5.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,221 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# litmoss-form
+
+![GitHub](https://img.shields.io/github/license/liuxian496/litmoss-form)
+![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/liuxian496/litmoss-form/test.yml)
+[![Coverage Status](https://coveralls.io/repos/github/liuxian496/litmoss/badge.svg)](https://coveralls.io/github/liuxian496/litmoss)
+![GitHub Repo stars](https://img.shields.io/github/stars/liuxian496/litmoss-form)
+
+litmoss-form 是一个基于 React 的轻量表单库，提供跨组件的表单数据管理能力。核心理念是将**表单数据的状态管理**与**表单UI控制**解耦。
+
+- **跨组件收集表单数据**：表单项通过 `path` 自动注册到 `Form` 上下文，无需逐层传递 props
+- **一次受控**：只要**表单组件**封装时实现一次受控逻辑，页面开发即可免去重复的受控代码编写，使开发者专注于业务逻辑的编排。
+- **命令式 API**：通过 `useForm`暴露`getValues`、`setValues`、`validate` 等方法
+- **可扩展的校验体系**：通过 `initLittenForm` 全局注入通用校验断言和默认提示文案，同时支持自定义校验
+- **两种校验模式**：全部校验（`all`）与分步校验（`step`）
+- **校验失败时**，自动聚焦到第一个出错的表单项
+- **UI无关**：不依赖与任何UI库，任何UI库都能通过封装**表单组件**继承
+
+## 在线文档
+
+[github pages：https://liuxian496.github.io/litmoss-form/](https://liuxian496.github.io/litmoss-form/)
+
+[chromatic：https://6ac70cb7870df8e554fb05ff-jcxiqbiehx.chromatic.com/](https://6ac70cb7870df8e554fb05ff-jcxiqbiehx.chromatic.com/)
+
+## 安装
+
+```bash
+npm i litmoss-form
+```
+
+以下依赖为 `peerDependencies`，打包时不包含，需要在使用的项目中自行安装：
+
+| 依赖                 | 版本       |
+|----------------------|------------|
+| `react`              | `^18.2.0`  |
+| `react-dom`          | `^18.2.0`  |
+| `classnames`         | `^2.5.1`   |
+| `cyndi`              | `^1.0.0`   |
+| `exception-boundary` | `^2.0.1`   |
+| `litmoss-hooks`      | `^3.0.0`   |
+| `lodash`             | `^4.17.21` |
+
+## 快速开始
+
+### 1. 在工程入口全局初始化
+
+在应用启动时调用一次 `initLittenForm`，注入通用校验断言与默认提示文案：
+
+```ts
+import { BaseValidationType, initLittenForm } from 'litmoss-form';
+
+export const ValidationType = {
+  ...BaseValidationType,
+  StringRequired: 'stringRequired',
+} as const;
+
+export type ValidationType =
+  (typeof ValidationType)[keyof typeof ValidationType];
+
+initLittenForm<ValidationType, string, unknown>({
+  commonValidationAssert: (value, type) => {
+    switch (type) {
+      case ValidationType.StringRequired:
+        return typeof value === 'string' && value.trim() !== '';
+      default:
+        return true;
+    }
+  },
+  getDefaultHelperInfo: (type) => {
+    switch (type) {
+      case ValidationType.StringRequired:
+        return '该项为必填项';
+      default:
+        return '';
+    }
+  },
+});
+```
+
+### 2. 使用表单
+
+```tsx
+import { Form, useForm } from 'litmoss-form';
+
+function Demo() {
+  const [formRef, form] = useForm();
+
+  function handleSubmit() {
+    const errors = form?.validate({ focusOnError: true }) ?? [];
+    if (errors.length > 0) return;
+
+    console.log(form?.getValues());
+  }
+
+  return (
+    <>
+      <Form ref={formRef}>
+        {/* 使用 useFormItemValue 封装的表单项组件 */}
+        <MyTextField
+          path="name"
+          validations={[{ type: ValidationType.StringRequired }]}
+        />
+      </Form>
+      <button onClick={handleSubmit}>提交</button>
+    </>
+  );
+}
+```
+
+## API 概览
+
+### 组件
+
+| 组件      | 说明                                                               |
+|-----------|--------------------------------------------------------------------|
+| `Form`    | 表单容器，通过 `ref` 暴露 `FormRef`。`validationMode` 默认为 `all` |
+| `Mounter` | 挂载完成后触发一次 `onDidMount` 回调，可用于级联表单等场景的初始化 |
+
+### Hooks
+
+| Hook               | 说明                                                            |
+|--------------------|-----------------------------------------------------------------|
+| `useForm`          | 返回 `[ref, form]`，`ref` 传给 `Form`，`form` 为 `FormRef` 实例 |
+| `useFormItemValue` | 管理表单项的值，并向 `Form` 上下文注册 / 卸载该表单项           |
+| `useHelperInfo`    | 根据 `validations` 执行校验，管理校验提示文本                   |
+
+### FormRef
+
+| 方法                            | 说明                                              |
+|---------------------------------|---------------------------------------------------|
+| `getValues()`                   | 获取表单当前全部数据                              |
+| `setValues(args)`               | 批量设置表单数据，`args` 形如 `[{ path, value }]` |
+| `getValueByPath(path)`          | 获取指定表单项的值                                |
+| `setValueByPath(path, value)`   | 设置指定表单项的值                                |
+| `setHelpTextByPath(path, text)` | 设置指定表单项的提示信息                          |
+| `validate({ focusOnError? })`   | 校验表单，返回失败项的 `{ path, helpInfo }` 数组  |
+| `validateField(path)`           | 通过属性路径验证表单项的方法,并返回验证结果       |
+| `focusFieldByPath(path)`        | 聚焦指定表单项                                    |
+
+### 常量
+
+| 常量                           | 说明                                             |
+|--------------------------------|--------------------------------------------------|
+| `ValidationMode.all`           | 全部校验，收集所有失败项                         |
+| `ValidationMode.step`          | 分步校验，按注册顺序校验，遇到第一个失败项即停止 |
+| `BaseValidationType.Customize` | 自定义校验类型，需配合 `validationAssert` 使用   |
+
+### 初始化
+
+| 方法                       | 说明                                                                                 |
+|----------------------------|--------------------------------------------------------------------------------------|
+| `initLittenForm(injector)` | 全局注入 `commonValidationAssert`、`getDefaultHelperInfo`、`getInitialValue`（可选） |
+
+## 自定义表单组件
+
+组合使用 `useHelperInfo` 与 `useFormItemValue` 即可封装一个受控、支持校验提示的表单组件：
+
+```tsx
+import { useRef } from 'react';
+import { useFormItemValue, useHelperInfo } from 'litmoss-form';
+import type { FormItemProps } from 'litmoss-form';
+
+export const MyTextField = ({
+  path,
+  initialValue,
+  validations = [],
+}: FormItemProps<string, ValidationType>) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [helperText, verifyFormItem, setHelperText] = useHelperInfo<
+    string,
+    ValidationType
+  >(validations);
+
+  const [value, setValue] = useFormItemValue<string>(
+    path,
+    initialValue,
+    verifyFormItem,
+    setHelperText,
+    inputRef
+  );
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        value={value ?? ''}
+        onChange={(e) => setValue(e.target.value)}
+        onBlur={() => verifyFormItem(value)}
+      />
+      <div>{helperText}</div>
+    </div>
+  );
+};
+```
+
+更多细节见 [自定义表单组件封装指南](./docs/custom-form-component-guide.md)。
+
+## 文档
+
+- [接入文档](./docs/integration.md)
+- [自定义表单组件封装指南](./docs/custom-form-component-guide.md)
+
+## 本地开发
+
+```bash
+npm i                                   # 安装依赖
+npm run storybook                       # 启动 Storybook（端口 6006）
+npm test                                # 运行测试
+npm run test-storybook -- --coverage    # 运行 Storybook 测试并生成覆盖率
+npm run lint                            # 代码检查
+npm run build                           # 构建
+```
+
+## License
+
+[Apache-2.0](./LICENSE)
+
+## 如果你想请我喝一咖啡（Buy Me a Coffee）
+
+<img src=".\\public\\wechat.jpg" height="360">
+<img src=".\\public\\alipay.jpg" height="360">

package/dist/components/form/context.d.ts

@@ -0,0 +1,15 @@
+import { FormContextProps, FormRegister } from './form.types';
+/**
+ * 用于管理表单状态和操作的 React Context
+ * 通过 `FormContextProps` 提供表单相关的属性和方法
+ * @see FormContextProps
+ */
+export declare const FormContext: import('react').Context<FormContextProps | undefined>;
+/**
+ * 初始化表单上下文
+ *
+ * @param formRegister - 用于存储表单项注册信息的对象，以 valuePath 作为键
+ * @param setErrorMsg - 用于更新错误信息的 React 状态设置函数
+ * @returns {FormContextProps} 返回包含注册、检查和卸载表单项方法的表单上下文
+ */
+export declare function initContext(formRegister: FormRegister, setErrorMsg: React.Dispatch<React.SetStateAction<string | undefined>>): FormContextProps;

package/dist/components/form/entries.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 当在表单中无法找到对应的值路径时的警告信息
+ * @param path 表单项的值在表单数据中的属性路径
+ * @returns 警告信息字符串
+ */
+export declare function valuePathNotFoundEntry(path: string): string;
+/**
+ * 当setValues函数的第一个参数不是FormArgs数组时的警告信息
+ * @returns 警告信息字符串
+ */
+export declare function setValuesFirstParamNotArray(): string;
+/**
+ * 当在表单项注册器中找不到set方法时的警告信息
+ * @returns 警告信息字符串
+ */
+export declare function setMethodNotFound(): string;
+/**
+ * 当在表单项注册器中找不到commonValidationAssert方法时的警告信息
+ * @returns
+ */
+export declare function commonValidationAssertNotFound(): string;
+/**
+ * 当尝试聚焦一个不存在的表单项时的警告信息
+ * @param path 表单项的唯一路径（path）
+ * @returns 警告信息字符串
+ */
+export declare function focusNotFound(path: string): string;
+export declare function validationAssertNotFoundEntry(path: string): string;

package/dist/components/form/form.d.ts

@@ -0,0 +1,10 @@
+import { FormProps } from './form.types';
+/**
+ * Form 是一个 React 组件，提供基于React Context的表单管理系统
+ * 通过 `ref` 暴露命令式方法，用于操作表单状态，如清空、获取、设置和校验表单值。
+ *
+ * @param {FormProps} props - 表单组件的属性
+ * @param {React.Ref<FormRef>} ref - 用于访问命令式表单方法的 ref
+ * @returns {JSX.Element} 渲染后的表单组件
+ */
+export declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<unknown>>;

package/dist/components/form/form.types.d.ts

@@ -0,0 +1,286 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { UserControlProps } from 'litmoss-hooks/dist/control/userControl/userControl.types';
+/**
+ * 表单组件属性
+ * @property children - 表单组件的子组件
+ * @property {ValidationMode} validationMode - 表单验证模式，支持分步验证或全部验证。默认全部验证（暂时只支持全部验证）
+ */
+export interface FormProps extends UserControlProps {
+    /**
+     * 表单组件的子组件
+     */
+    children?: ReactNode;
+    /**
+     * 表单验证模式，支持分步验证或全部验证。默认全部验证（暂时只支持全部验证）
+     */
+    validationMode?: ValidationMode;
+}
+/**
+ * 表单项验证后的提示信息，可以是string, JSX.Element，或者Undefined
+ * 通常使用string就可以满足基本的验证提示需求
+ */
+export type FormHelperInfo = string | JSX.Element | undefined;
+/**
+ * 表单验证模式常量
+ *
+ * @property {"all"} all - 全部验证，验证所有表单项并收集所有无效项的提示信息
+ * @property {"step"} step - 分步验证，按注册顺序验证表单项，遇到第一个无效项时停止验证并返回提示信息
+ *
+ * 用于 FormProps.validationMode 属性，或表单相关 API 的验证模式参数。
+ *
+ * 示例：
+ *   validationMode={ValidationMode.all}
+ *   validationMode={ValidationMode.step}
+ */
+export declare const ValidationMode: {
+    /**
+     * 全部验证，验证所有表单项并收集所有无效项的提示信息
+     */
+    readonly all: "all";
+    /**
+     * 分步验证，按注册顺序验证表单项，遇到第一个无效项时停止验证并返回提示信息
+     */
+    readonly step: "step";
+};
+export type ValidationMode = (typeof ValidationMode)[keyof typeof ValidationMode];
+/**
+ * 表单数据
+ */
+export interface FormValues {
+    [index: string]: unknown;
+}
+/**
+ * 可聚焦的表单控件接口
+ * 任何实现了该接口的表单控件都应提供一个 focus 方法，用于将焦点设置到该控件上
+ * 这对于表单验证失败时自动聚焦非常有用
+ * @property focus - 将焦点设置到该控件的方法
+ */
+export interface FocusableField {
+    focus: () => void;
+}
+/**
+ * 表单项注册器
+ * @property path - 表单项的值路径，值路径需要唯一
+ * @property get - 获取表单项值的方法
+ * @property set - 设置表单项值的方法
+ * @property validate - 可选的验证函数，接受表单项值作为参数，返回一个字符串或JSX元素表示验证结果
+ * @property setHelperText - 可选的设置帮助信息的方法，接受一个字符串或JSX元素作为参数
+ * @property fieldRef - 可选的表单控件引用，用于访问控件的实例方法，如 focus
+ */
+export interface FormItemRegister {
+    path: string;
+    get?: <V>() => V | undefined;
+    set?: <T>(value: T) => void;
+    validate?: <V>(value: V) => FormHelperInfo;
+    setHelperText?: Dispatch<SetStateAction<FormHelperInfo>>;
+    fieldRef?: React.RefObject<FocusableField | null>;
+}
+/**
+ * 表单注册器
+ * @property [index: string] - 以表单项的值路径作为键，值为对应的表单项注册器
+ */
+export interface FormRegister {
+    [index: string]: FormItemRegister;
+}
+/**
+ * 表单上下文属性
+ * @property register - 注册表单项
+ * @property checkValuePath - 检查指定路径的表单项值
+ * @property uninstall - 卸载指定路径的表单项
+ */
+export interface FormContextProps {
+    /**
+     * 注册表单项
+     * @param props 表单项注册器
+     * @returns void
+     */
+    register: (props: FormItemRegister) => void;
+    /**
+     * 检查表单项的值路径是否唯一
+     * @param path - 要校验的表单项的值路径
+     */
+    checkValuePath: (path: string) => void;
+    /**
+     * 卸载表单项
+     * @param path - 要卸载的表单项的值路径
+     * @returns void
+     */
+    uninstall: (path: string) => void;
+}
+/**
+ * 表单控件属性
+ */
+export interface FormControlProps {
+    /**
+     * 设置用于获取value属性的属性路径
+     */
+    valuePath: string;
+    /**
+     * 子组件
+     */
+    children: JSX.Element;
+}
+/**
+ * 表单项属性
+ * @property path - 表单项的唯一路径
+ * @property initialValue - 表单项的初始值, 不是默认值
+ * @property validations - 表单项的验证规则
+ */
+export interface FormItemProps<T, V> {
+    path: string;
+    initialValue?: T;
+    validations?: FormItemValidations<V>;
+}
+/**
+ * 表单项参数
+ * 用于设置表单项的值
+ * 包含属性路径和对应的值
+ * @property path - 表单项的唯一路径
+ * @property value - 表单项的值
+ */
+export interface FormItemArgs {
+    path: string;
+    value: unknown;
+}
+/**
+ * 表单参数
+ * 包含一个数组，每个元素是一个[表单项参数](#FormItemArgs)
+ */
+export type FormArgs = FormItemArgs[];
+/**
+ * 包含表单组件基础校验类型的对象。
+ *
+ * @property {string} Customize - 表示自定义校验类型。
+ */
+export declare const BaseValidationType: {
+    /**
+     * 表示自定义校验类型
+     */
+    readonly Customize: "customize";
+};
+/**
+ * 表单默认验证类型
+ */
+export type BaseValidationType = (typeof BaseValidationType)[keyof typeof BaseValidationType];
+/**
+ * 扩展验证类型
+ */
+export interface ExtendedValidation {
+    [key: string]: string;
+}
+/**
+ * 表单项的验证对象
+ * 包含帮助信息、验证类型和可选的验证断言函数，一个表单项可以包含多个验证对象
+ * @property helpInfo - 帮助信息，可以是字符串或JSX元素
+ * @property type - 验证类型，使用[ValidationType](#ValidationType)枚举
+ * @property validationAssert - 可选的验证断言函数，接受表单项值作为参数，返回一个布尔值表示验证是否通过
+ */
+export interface FormItemValidation<T> {
+    helpInfo?: FormHelperInfo;
+    type: T;
+    validationAssert?: (value: unknown) => boolean;
+}
+export type FormItemValidations<T> = FormItemValidation<T>[];
+/**
+ * 表单项帮助信息
+ * @package helpInfo - 帮助信息，可以是字符串或JSX元素
+ * @property path - 表单项的值路径
+ */
+export interface FormItemHelper {
+    helpInfo?: FormHelperInfo;
+    path: string;
+}
+/**
+ * 表单ref对象
+ * 包含操作表单的方法
+ * @property getValues - 获取表单当前数据的方法，返回一个包含所有表单项数据的对象
+ * @property setValues - 设置表单数据的方法，接受一个包含表单项路径和值的数组作为参数
+ * @property getValueByPath - 通过属性路径获取表单项对应控件的值的方法，接受一个字符串类型的路径作为参数，返回对应的值
+ * @property setValueByPath - 通过属性路径设置表单项对应控件的值的方法，接受一个字符串类型的路径和一个值作为参数
+ * @property setHelpTextByPath - 通过属性路径设置表单项的帮助信息的方法，接受一个字符串类型的路径和一个错误消息（字符串或JSX元素）作为参数
+ */
+export interface FormRef {
+    /**
+     * 获取表单当前数据
+     * @returns 表单当前数据对象
+     */
+    getValues: () => FormValues;
+    /**
+     * 设置表单数据
+     * @param {FormArgs} args 表单项参数数组
+     * @returns void
+     * @example
+     * ```ts
+     * myForm.setValues([{ path: "name", value: "Tom" }, { path: "age", value: 18 }]);
+     * ```
+     */
+    setValues: (args: FormArgs) => FormItemHelper[];
+    /**
+     * 通过属性路径获取表单项对应控件的值的方法
+     * @param path 表单项的值路径
+     * @returns 表单项的值
+     */
+    getValueByPath: (path: string) => unknown;
+    /**
+     * 通过属性路径设置表单项对应控件的值的方法
+     * @param path 表单项的值路径
+     * @param value 表单项对应控件的值
+     * @returns void
+     */
+    setValueByPath: (path: string, value: unknown) => FormHelperInfo;
+    /**
+     * 通过属性路径设置表单项对应控件的帮助信息的方法
+     * @param path 表单项的值路径
+     * @param {FormHelperInfo} helpText 帮助信息
+     * @returns void
+     */
+    setHelpTextByPath: (path: string, helpText: FormHelperInfo) => void;
+    /**
+     * 表单验证
+     * @param options - 验证选项
+     * @param options.focusOnError - 验证失败时是否自动聚焦到第一个错误表单项（可选，默认为 false）
+     * @returns 表单验证结果数组，包含每个验证失败表项的帮助信息和路径
+     */
+    validate: (options?: {
+        focusOnError?: boolean;
+    }) => FormItemHelper[];
+    /**
+     * 通过属性路径验证表单项的方法
+     * @param path 表单项的值路径
+     * @returns 验证结果，包含帮助信息和路径
+     */
+    validateField: (path: string) => FormItemHelper;
+    /**
+     * 通过属性路径聚焦表单项对应控件的方法
+     * @param path 表单项的值路径
+     * @returns void
+     */
+    focusFieldByPath: (path: string) => void;
+}
+/**
+ * 表单注入器
+ * @property commonValidationAssert - 可选的公共验证断言函数，接受一个值和一个验证类型作为参数，返回一个布尔值表示验证是否通过
+ * @property getDefaultHelperInfo - 可选的获取默认帮助信息的方法，接受一个值和一个验证类型作为参数，返回一个字符串或JSX元素表示默认帮助信息
+ * @property getInitialValue - 可选的获取初始值的方法，接受一个控件类型作为参数，返回对应的初始值
+ */
+export interface FormInjector<VT = unknown, CT = unknown, T = unknown> {
+    /**
+     * 公共验证断言函数，接受一个值和一个验证类型作为参数，返回一个布尔值表示验证是否通过
+     * @param value - 要验证的值
+     * @param validationType - 验证类型
+     * @returns 验证结果，true表示验证通过，false表示验证失败
+     */
+    commonValidationAssert?(value: unknown, validationType: VT): boolean;
+    /**
+     * 获取默认帮助信息的方法，接受一个验证类型作为参数，返回一个字符串或JSX元素表示默认帮助信息
+     * @param validationType - 验证类型
+     * @returns 默认帮助信息，字符串或JSX元素
+     */
+    getDefaultHelperInfo?(validationType: VT): FormHelperInfo;
+    /**
+     * 获取初始值的方法，接受一个控件类型作为参数，返回对应的初始值
+     * @param controlType - 控件类型
+     * @returns 控件的初始值
+     */
+    getInitialValue?(controlType: CT): T;
+}

package/dist/components/form/formBase.d.ts

@@ -0,0 +1 @@
+export declare function getVisualStates(cls?: string): string;

package/dist/components/form/formUtil.d.ts

@@ -0,0 +1,51 @@
+import { FormArgs, FormHelperInfo, FormItemHelper, FormRegister, FormValues } from './form.types';
+/**
+ * 获取表单当前数据
+ * @param {FormRegister} formRegister 表单注册器
+ * @returns 表单当前数据对象
+ */
+export declare function getValues(formRegister: FormRegister): FormValues;
+/**
+ * 通过属性路径获取表单项对应控件的值的方法
+ * @param path 表单项的值在表单数据中的属性路径
+ * @param {FormRegister} formRegister 表单注册器
+ * @returns 表单项对应控件的值
+ */
+export declare function getValueByPath(path: string, formRegister: FormRegister): unknown;
+/**
+ * 设置表单项的帮助信息
+ * @param path 表单项的值在表单数据中的属性路径
+ * @param helperText 帮助信息
+ * @param formRegister 表单注册器
+ */
+export declare function setHelpTextByPath(path: string, helperText: FormHelperInfo, formRegister: FormRegister): void;
+/**
+ * 设置表单数据
+ * @param {FormArgs} args 表单项参数数组
+ * @param {FormRegister} formRegister 表单注册器
+ */
+export declare function setValues(args: FormArgs, formRegister: FormRegister): FormItemHelper[];
+/**
+ * 通过属性路径设置指定表单项的值，并自动触发该表单项的验证逻辑。
+ *
+ * @param path 表单项的唯一路径（valuePath）
+ * @param value 需要设置的新值
+ * @param formRegister 当前表单的注册器对象
+ */
+export declare function setValueByPath(path: string, value: unknown, formRegister: FormRegister): FormHelperInfo;
+/**
+ * 通过属性路径验证表单项的方法
+ * @param path 表单项的唯一路径（valuePath）
+ * @param formRegister 当前表单的注册器对象
+ * @returns 验证结果，包含帮助信息和路径
+ */
+export declare function validateField(path: string, formRegister: FormRegister): {
+    helpInfo: FormHelperInfo;
+    path: string;
+} | undefined;
+/**
+ * 聚焦指定表单项
+ * @param path 表单项的唯一路径（valuePath）
+ * @param formRegister 当前表单的注册器对象
+ */
+export declare function focusFieldByPath(path: string, formRegister: FormRegister): void;

package/dist/components/form/useForm.d.ts

@@ -0,0 +1,12 @@
+import { FormRef } from './form.types';
+/**
+ * 获取表单ref的自定义hook
+ *
+ * @returns {[React.MutableRefObject<FormRef | undefined>, FormRef | undefined]} 返回一个元组：
+ * - ref：表单的可变 ref 对象
+ * - myForm：`FormRef` 类型的表单对象，包含操作表单的方法
+ *
+ * @example
+ * const [ref, myForm] = useForm();
+ */
+export declare function useForm(): [React.MutableRefObject<FormRef | undefined>, FormRef | undefined];

package/dist/components/form/useFormItemValue.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from 'react';
+import { FocusableField, FormHelperInfo } from './form.types';
+/**
+ *  提供一个自定义hook, 用来实现表单项的受控逻辑
+ *
+ * @template T - 表单项值的类型，默认FormItemValue
+ * @template V - 传递给校验函数的值类型，默认string
+ *
+ * @param valuePath - 唯一标识表单项的路径
+ * @param initialValue - 表单项的初始值
+ * @param onGetErrorMessage - 可选，校验值并返回错误信息或 JSX 元素的函数
+ * @param setHelperText - 可选，用于设置校验提示文本的 setter
+ *
+ * @returns 包含当前值和用于更新值的 setter 的元组
+ */
+export declare function useFormItemValue<T, V = string>(valuePath: string, initialValue?: T, onGetErrorMessage?: (value: V, path: string) => FormHelperInfo, setHelperText?: Dispatch<SetStateAction<FormHelperInfo>>, fieldRef?: React.RefObject<FocusableField | null>): [T, Dispatch<SetStateAction<T>>];

package/dist/components/form/useHelperInfo.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { FormHelperInfo, FormItemValidation } from './form.types';
+/**
+ * 提供一个自定义hook，管理表单项的帮助信息
+ *
+ * @template T - 帮助信息的类型，默认为 `FormHelperInfo`
+ * @template VT - 验证类型，默认为 `ValidationType`
+ * @template V - 需要校验的值类型，默认为 `string`
+ * @param validations - 需要应用于值的校验规则数组。
+ * @returns 返回一个元组，包含：
+ *   - 校验并更新帮助信息的函数 (`(value: V) => T`),
+ *   - 更新帮助信息状态的set函数 (`Dispatch<SetStateAction<FormHelperInfo>>`)。
+ */
+export declare function useHelperInfo<V, VT>(validations: FormItemValidation<VT>[]): [FormHelperInfo, (value: V) => FormHelperInfo, Dispatch<SetStateAction<FormHelperInfo>>];

package/dist/components/inject.d.ts

@@ -0,0 +1,11 @@
+import { FormInjector } from './form/form.types';
+/**
+ * 表单能力注入对象。
+ * 目的是扩展Litten Form的能力，并将具体的功能实现解耦，使得Litten Form可以适配不同的组件库或者自定义的表单实现（比如验证）。
+ */
+export declare const formInjector: FormInjector;
+/**
+ * 为litten form注入一些定制能力。
+ * @param args 注入实现集合，包含公共校验断言、默认帮助信息和初始值处理方法。
+ */
+export declare function initLittenForm<VT, CT, T>(args: FormInjector<VT, CT, T>): void;

package/dist/components/mounter/index.d.ts

@@ -0,0 +1,2 @@
+export { Mounter } from './mounter';
+export type { MounterProps } from './mounter.types';

package/dist/components/mounter/mounter.d.ts

@@ -0,0 +1,2 @@
+import { MounterProps } from './mounter.types';
+export declare const Mounter: ({ onDidMount }: MounterProps) => null;

package/dist/components/mounter/mounter.types.d.ts

@@ -0,0 +1,4 @@
+import { UserControlProps } from 'litmoss-hooks/dist/control/userControl/userControl.types';
+export interface MounterProps extends UserControlProps {
+    onDidMount: () => void;
+}

package/dist/components/util.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 输出控制台警告信息
+ * @param msg 警告信息
+ */
+export declare function warn(msg: string): void;

package/dist/components/validation/index.d.ts

@@ -0,0 +1 @@
+export { validate } from '../validation/validate';

package/dist/components/validation/validate.d.ts

@@ -0,0 +1,8 @@
+import { ValidationMode, FormItemHelper, FormRegister } from '../form/form.types';
+/**
+ * 验证所有注册的表单项，并收集验证后的提示信息
+ *
+ * @param {FormRegister} formRegister - 表单注册器
+ * @returns {FormItemHelper[]} 验证后的提示信息
+ */
+export declare function validate(formRegister: FormRegister, validationMode: ValidationMode): FormItemHelper[];

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Form } from './components/form/form';
+export { useForm } from './components/form/useForm';
+export { useFormItemValue } from './components/form/useFormItemValue';
+export { useHelperInfo } from './components/form/useHelperInfo';
+export { initLittenForm } from './components/inject';
+export { BaseValidationType, ValidationMode, } from './components/form/form.types';
+export { Mounter } from './components/mounter';
+export type { FormProps, FormRef, FormHelperInfo, FormItemProps, } from './components/form/form.types';
+export type { MounterProps } from './components/mounter/mounter.types';

package/dist/index.js

@@ -0,0 +1,271 @@
+import { createContext as e, forwardRef as t, useContext as n, useEffect as r, useImperativeHandle as i, useRef as a, useState as o } from "react";
+import { ExceptionBoundary as s } from "exception-boundary";
+import { ControlType as c } from "litmoss-hooks/dist/enum";
+import l from "classnames";
+import { getPrefixNs as u } from "cyndi/dist/getPrefixNs";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/components/form/form.types.ts
+var f = {
+	all: "all",
+	step: "step"
+}, p = { Customize: "customize" };
+//#endregion
+//#region src/components/validation/validate.ts
+function m(e) {
+	let t = [];
+	return Object.keys(e).forEach((n) => {
+		let r = e[n], i = r?.validate, a = r?.get;
+		if (i && a) {
+			let e = i(a());
+			e !== void 0 && t.push({
+				helpInfo: e,
+				path: n
+			});
+		}
+	}), t;
+}
+function h(e) {
+	let t = [], n = Object.keys(e), r = n.length;
+	for (let i = 0; i < r; i++) {
+		let r = n[i], a = e[r], o = a?.validate, s = a?.get;
+		if (o && s) {
+			let e = o(s());
+			if (e !== void 0) {
+				t.push({
+					helpInfo: e,
+					path: r
+				});
+				break;
+			}
+		}
+	}
+	return t;
+}
+function g(e, t) {
+	let n = [];
+	return n = t === f.all ? m(e) : h(e), n;
+}
+//#endregion
+//#region src/components/form/context.ts
+var _ = e(void 0);
+function v(e, t) {
+	return {
+		register: (t) => {
+			let { path: n } = t;
+			e[n] = { ...t };
+		},
+		uninstall: (t) => {
+			delete e[t];
+		},
+		checkValuePath: (n) => {
+			Object.prototype.hasOwnProperty.call(e, n) === !1 ? e[n] = { path: n } : t(`The valuePath "${n}" is used by other FormControl, Please check your form.`);
+		}
+	};
+}
+//#endregion
+//#region src/components/form/formBase.ts
+function y(e, t) {
+	return u(e, t, "litten");
+}
+function b(e) {
+	let t = y("form", e);
+	return l(t);
+}
+//#endregion
+//#region src/components/util.ts
+function x(e) {
+	console.warn(`[litten warning]: ${e}`);
+}
+//#endregion
+//#region src/components/form/entries.ts
+function S(e) {
+	return `Can not find the path "${e}" in form. Please check if the form item is registered.`;
+}
+function C() {
+	return "The first parameter of setValues should be an array of FormArgs";
+}
+function w() {
+	return "Can not find set method in form item register.";
+}
+function T() {
+	return "Can not find commonValidationAssert in formInjector, please provide it to support validation types other than Customize.";
+}
+function E(e) {
+	return `The fieldRef for path "${e}" does not have a focus method.`;
+}
+function D(e) {
+	return `When using custom validation, validationAssert must be configured. The path missing this setting is: ${e}`;
+}
+//#endregion
+//#region src/components/form/formUtil.ts
+function O(e) {
+	let t = {};
+	return Object.keys(e).forEach((n) => {
+		let r = e[n]?.get;
+		r && (t[n] = r());
+	}), t;
+}
+function k(e, t) {
+	let n = t[e], r;
+	if (n !== void 0) {
+		let e = n.get;
+		e && (r = e());
+	} else x(S(e));
+	return r;
+}
+function A(e, t, n) {
+	let r = n[e];
+	r === void 0 ? x(S(e)) : r.setHelperText?.(t);
+}
+function j(e, t) {
+	let n = [];
+	return Array.isArray(e) ? (e.forEach((e) => {
+		let { path: r, value: i } = e, a = t[r]?.set, o = t[r]?.validate;
+		if (a) {
+			a(i);
+			let e = o?.(i);
+			e !== void 0 && n.push({
+				helpInfo: e,
+				path: r
+			});
+		} else x(w());
+	}), n) : (x(C()), n);
+}
+function M(e, t, n) {
+	let r = n[e];
+	if (r !== void 0) {
+		let { set: e, validate: n } = r;
+		if (e) return e(t), n?.(t);
+		x(w());
+	} else x(S(e));
+}
+function N(e, t) {
+	let n = t[e];
+	if (n !== void 0) {
+		let { validate: t, get: r } = n, i = r?.();
+		return {
+			helpInfo: t?.(i),
+			path: e
+		};
+	}
+	x(S(e));
+}
+function P(e, t) {
+	let n = t[e];
+	n ? n.fieldRef?.current?.focus ? n.fieldRef.current.focus() : x(E(e)) : x(S(e));
+}
+//#endregion
+//#region src/components/form/form.tsx
+var F = t(({ children: e, prefixCls: t, validationMode: n = f.all, ...r }, a) => {
+	let [c] = o({}), [l, u] = o(), [p] = o(() => v(c, u));
+	return i(a, () => ({
+		getValues: () => O(c),
+		getValueByPath: (e) => k(e, c),
+		setHelpTextByPath: (e, t) => {
+			A(e, t, c);
+		},
+		setValues: (e) => j(e, c),
+		setValueByPath: (e, t) => M(e, t, c),
+		validate: (e) => {
+			let { focusOnError: t } = e || {}, r = g(c, n);
+			if (t !== !1 && r.length > 0) {
+				let e = r[0];
+				P(e.path, c);
+			}
+			return r;
+		},
+		validateField: (e) => N(e, c),
+		focusFieldByPath: (e) => {
+			P(e, c);
+		}
+	}), [c, n]), /* @__PURE__ */ d(s, {
+		errorMsg: l,
+		children: /* @__PURE__ */ d(_.Provider, {
+			value: p,
+			children: /* @__PURE__ */ d("div", {
+				className: b(t),
+				...r,
+				children: e
+			})
+		})
+	});
+});
+F.displayName = c.Form;
+//#endregion
+//#region src/components/form/useForm.ts
+function I() {
+	let e = a(), [t, n] = o();
+	return r(() => (n(e.current), () => {
+		e.current = void 0;
+	}), [e]), [e, t];
+}
+//#endregion
+//#region src/components/form/useFormItemValue.ts
+function L(e, t, i, a, s) {
+	let c = n(_), [l, u] = o(t);
+	return r(() => (c?.checkValuePath(e), () => {
+		c?.uninstall(e);
+	}), [c, e]), r(() => {
+		c?.register({
+			path: e,
+			get: () => l,
+			set: u,
+			validate: (t) => i?.(t, e),
+			setHelperText: a,
+			fieldRef: s
+		});
+	}, [
+		c,
+		i,
+		l,
+		e,
+		a,
+		s
+	]), [l, u];
+}
+//#endregion
+//#region src/components/inject.ts
+var R = {};
+function z(e) {
+	let { commonValidationAssert: t, getDefaultHelperInfo: n, getInitialValue: r } = e;
+	R.commonValidationAssert = t, R.getDefaultHelperInfo = n, R.getInitialValue = r;
+}
+//#endregion
+//#region src/components/form/useHelperInfo.ts
+function B(e) {
+	let [t, n] = o();
+	function r(t, r) {
+		let i, a = !1, o = e.length;
+		for (let n = 0; n < o; n++) {
+			let { helpInfo: o, type: s, validationAssert: c } = e[n];
+			if (s === p.Customize) {
+				if (c !== void 0) a = c(t) === !1;
+				else {
+					x(D(r));
+					break;
+				}
+			} else if (R.commonValidationAssert) a = R.commonValidationAssert(t, s) === !1;
+			else {
+				x(T());
+				break;
+			}
+			if (a) {
+				i = o ?? (R.getDefaultHelperInfo ? R.getDefaultHelperInfo(s) : void 0);
+				break;
+			}
+		}
+		return n(i), i;
+	}
+	return [
+		t,
+		r,
+		n
+	];
+}
+//#endregion
+//#region src/components/mounter/mounter.tsx
+var V = ({ onDidMount: e }) => (r(() => {
+	e?.();
+}, []), null);
+//#endregion
+export { p as BaseValidationType, F as Form, V as Mounter, f as ValidationMode, z as initLittenForm, I as useForm, L as useFormItemValue, B as useHelperInfo };

package/package.json

@@ -1,6 +1,101 @@
-{
-  "name": "litmoss-form",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "litmoss-form",
+  "private": false,
+  "version": "5.1.0",
+  "type": "module",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "javascript",
+    "typescript",
+    "component",
+    "form"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "check-type": "tsc -b",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix src/",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
+    "test-storybook": "vitest --project=storybook",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -s -r 0",
+    "build-storybook": "storybook build",
+    "prepare": "husky"
+  },
+  "peerDependencies": {
+    "classnames": "^2.5.1",
+    "cyndi": "^1.0.0",
+    "exception-boundary": "^2.0.1",
+    "litmoss-hooks": "^3.0.0",
+    "number-precision": "^1.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.1",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-istanbul": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "classnames": "^2.5.1",
+    "conventional-changelog": "^6.0.0",
+    "cyndi": "^1.0.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^10.3.3",
+    "exception-boundary": "^2.0.1",
+    "husky": "^9.0.11",
+    "less": "^4.2.0",
+    "litmoss": "^3.0.0",
+    "litmoss-hooks": "^3.0.0",
+    "number-precision": "^1.6.0",
+    "playwright": "^1.59.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^10.3.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run test",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liuxian496/litmoss-form.git"
+  }
+}