@hsu-react/ui 0.0.1

package/src/components/FormItem/FormCodeMirror/index.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Form } from "antd";
+import CodeMirror, { CodeMirrorProps } from "../../CodeMirror";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+
+export interface FormCodeMirrorProps extends ItemContainerProps {
+  componentProps?: CodeMirrorProps;
+}
+
+const FormCodeMirror: React.FC<FormCodeMirrorProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    rules = [],
+    name,
+    ...formItemProps
+  } = props;
+
+  const enableLint = componentProps.enableLint !== false;
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
+  const form = Form.useFormInstance();
+
+  // 处理 CodeMirror 的错误回调
+  const handleError = React.useCallback(
+    (error: string | null) => {
+      setErrorMessage(error);
+
+      // 如果有错误，触发表单验证
+      if (name && form) {
+        try {
+          if (error) {
+            // 设置字段错误
+            form.setFields([
+              {
+                name: name,
+                errors: [" "],
+              },
+            ]);
+          } else {
+            // 清除字段错误
+            form.setFields([
+              {
+                name: name,
+                errors: [],
+              },
+            ]);
+          }
+        } catch (e) {
+          // 忽略错误，可能表单还未初始化
+        }
+      }
+    },
+    [name, form],
+  );
+
+  // 合并验证规则，仅在启用 lint 时添加语法错误验证
+  const mergedRules = React.useMemo(() => {
+    if (!enableLint) {
+      return rules;
+    }
+    return [
+      ...rules,
+      {
+        validator: () => {
+          if (errorMessage) {
+            return Promise.reject(new Error("格式错误"));
+          }
+          return Promise.resolve();
+        },
+      },
+    ];
+  }, [rules, errorMessage, enableLint]);
+
+  return (
+    <ItemContainer
+      {...formItemProps}
+      name={name}
+      rules={mergedRules}
+      className={`${itemClassName ?? ""}`}
+    >
+      <CodeMirror
+        {...componentProps}
+        readOnly={componentProps.readOnly ?? disabled}
+        onLintError={enableLint ? handleError : undefined}
+        hasError={enableLint && !!errorMessage}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormCodeMirror;

package/src/components/FormItem/FormDatePicker/FormRangePicker/index.tsx

@@ -0,0 +1,33 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import React from "react";
+import classNames from "classnames";
+import styles from "../index.module.less";
+import DatePicker from "../../../DatePicker";
+import { RangePickerProps } from "../../../DatePicker/RangePicker";
+
+export interface FormRangePickerProps extends ItemContainerProps {
+  componentProps?: RangePickerProps;
+}
+
+const FormRangePicker: React.FC<FormRangePickerProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { className, ...datePickerConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <DatePicker.RangePicker
+        {...datePickerConfig}
+        disabled={datePickerConfig.disabled ?? disabled}
+        className={classNames(styles.DatePicker, className)}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormRangePicker;

package/src/components/FormItem/FormDatePicker/FormStepPicker/index.tsx

@@ -0,0 +1,33 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import React from "react";
+import classNames from "classnames";
+import styles from "../index.module.less";
+import DatePicker from "../../../DatePicker";
+import { StepPickerProps } from "../../../DatePicker/StepPicker";
+
+export interface FormStepPickerProps extends ItemContainerProps {
+  componentProps?: StepPickerProps;
+}
+
+const FormStepPicker: React.FC<FormStepPickerProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { className, ...stepPickerConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <DatePicker.StepPicker
+        {...stepPickerConfig}
+        disabled={stepPickerConfig.disabled ?? disabled}
+        className={classNames(styles.DatePicker, className)}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormStepPicker;

package/src/components/FormItem/FormDatePicker/index.module.less

@@ -0,0 +1,3 @@
+.DatePicker {
+  height: 100%;
+}

package/src/components/FormItem/FormDatePicker/index.tsx

@@ -0,0 +1,44 @@
+import DatePicker, { DatePickerProps } from "../../DatePicker";
+import FormRangePicker, { FormRangePickerProps } from "./FormRangePicker";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import FormStepPicker, { FormStepPickerProps } from "./FormStepPicker";
+
+import React from "react";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+export type { FormRangePickerProps, FormStepPickerProps };
+
+export interface FormDatePickerProps extends ItemContainerProps {
+  componentProps?: DatePickerProps;
+}
+
+interface FormDatePickerFC extends React.FC<FormDatePickerProps> {
+  RangePicker: React.FC<FormRangePickerProps>;
+  StepPicker: React.FC<FormStepPickerProps>;
+}
+
+const FormDatePicker: FormDatePickerFC = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { className, ...datePickerConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <DatePicker
+        {...datePickerConfig}
+        disabled={datePickerConfig.disabled ?? disabled}
+        className={classNames(styles.DatePicker, className)}
+      />
+    </ItemContainer>
+  );
+};
+
+FormDatePicker.RangePicker = FormRangePicker;
+FormDatePicker.StepPicker = FormStepPicker;
+
+export default FormDatePicker;

package/src/components/FormItem/FormEditor/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Editor, { EditorProps } from "../../Editor";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+
+export interface FormEditorProps extends ItemContainerProps {
+  componentProps?: EditorProps;
+}
+
+const FormEditor: React.FC<FormEditorProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Editor
+        {...componentProps}
+        disabled={componentProps.disabled ?? disabled}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormEditor;

package/src/components/FormItem/FormInput/FormInputNumber/index.tsx

@@ -0,0 +1,31 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import Input from "../../../Input";
+import { InputNumberProps } from "../../../Input/Number";
+import React from "react";
+
+export interface FormInputNumberProps extends ItemContainerProps {
+  componentProps?: InputNumberProps;
+}
+
+const FormInputNumber: React.FC<FormInputNumberProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, ...inputConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Input.Number
+        {...inputConfig}
+        disabled={inputConfig.disabled ?? disabled}
+        placeholder={placeholder ?? "请输入"}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormInputNumber;

package/src/components/FormItem/FormInput/FormPassword/index.tsx

@@ -0,0 +1,33 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import Input from "../../../Input";
+import { PasswordProps } from "../../../Input/Password";
+import React from "react";
+
+export interface FormPasswordProps extends ItemContainerProps {
+  componentProps?: PasswordProps;
+}
+
+const FormPassword: React.FC<FormPasswordProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, allowClear, ...inputConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Input.Password
+        allowClear={typeof allowClear === "boolean" ? allowClear : false}
+        {...inputConfig}
+        disabled={inputConfig.disabled ?? disabled}
+        placeholder={placeholder ?? "请输入"}
+        autoComplete="new-password"
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormPassword;

package/src/components/FormItem/FormInput/FormPasswordStrength/index.module.less

@@ -0,0 +1,54 @@
+.strengthBar {
+  position: relative;
+
+  width: 100%;
+
+  &::-webkit-meter-bar {
+    height: 6px;
+
+    border: 0;
+    border-radius: 6px;
+
+    background-color: #00000040;
+  }
+
+  /* value 处于 [min, low]时 */
+  &::-webkit-meter-even-less-good-value {
+    background: #ed6f6f;
+  }
+  /* value 处于 [low, optimum]时 */
+  &::-webkit-meter-suboptimum-value {
+    background: #efbd47;
+  }
+  /* value 处于 [optimum, max]时 */
+  &::-webkit-meter-optimum-value {
+    background: #55d187;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+
+    position: absolute;
+    z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
+
+    display: block;
+
+    width: 20%;
+    height: inherit;
+
+    background-color: transparent;
+
+    border-color: #fff;
+    border-style: solid;
+    border-width: 0 5px;
+  }
+  &::before {
+    left: 20%;
+  }
+  &::after {
+    right: 20%;
+  }
+}

package/src/components/FormItem/FormInput/FormPasswordStrength/index.tsx

@@ -0,0 +1,63 @@
+import Input, { InputProps as BasicInputProps } from "../../../Input";
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+import React, { useState } from "react";
+
+import styles from "./index.module.less";
+import zxcvbn from "zxcvbn";
+
+interface InputProps extends BasicInputProps {}
+
+export interface FormPasswordStrengthProps extends ItemContainerProps {
+  componentProps?: InputProps;
+}
+
+const PasswordStrength: React.FC<InputProps> = (props) => {
+  const { placeholder, onChange, ...inputConfig } = props;
+  const [fraction, setFraction] = useState<number>(0);
+
+  return (
+    <>
+      <Input.Password
+        {...inputConfig}
+        placeholder={placeholder ?? "请输入"}
+        onChange={(value) => {
+          onChange && onChange(value);
+
+          const _fraction = zxcvbn(value).guesses_log10;
+          setFraction(_fraction);
+        }}
+        allowClear
+        autoComplete="new-password"
+      />
+      <meter
+        min={0}
+        max={12}
+        low={4}
+        high={8}
+        optimum={10}
+        value={fraction}
+        className={styles.strengthBar}
+      />
+    </>
+  );
+};
+
+const FormPasswordStrength: React.FC<FormPasswordStrengthProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <PasswordStrength
+        {...componentProps}
+        disabled={componentProps.disabled ?? disabled}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormPasswordStrength;

package/src/components/FormItem/FormInput/FormRangeInput/index.tsx

@@ -0,0 +1,35 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import Input from "../../../Input";
+import { RangeInputProps } from "../../../Input/Range";
+import React from "react";
+
+export interface FormRangeInputProps extends ItemContainerProps {
+  componentProps?: RangeInputProps;
+}
+
+const FormRangeInput: React.FC<FormRangeInputProps> = (props) => {
+  const {
+    componentProps = {
+      disabled: false,
+      placeholder: ["请输入", "请输入"],
+    },
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, ...inputConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Input.Range
+        type="NUMBER"
+        {...inputConfig}
+        disabled={inputConfig.disabled ?? disabled}
+        placeholder={placeholder ?? ["请输入", "请输入"]}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormRangeInput;

package/src/components/FormItem/FormInput/FormTextAreaInput/index.tsx

@@ -0,0 +1,33 @@
+import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
+
+import Input from "../../../Input";
+import React from "react";
+import { TextAreaProps } from "../../../Input/TextArea";
+
+interface InputProps extends TextAreaProps {}
+
+export interface FormTextAreaInputProps extends ItemContainerProps {
+  componentProps?: InputProps;
+}
+
+const FormTextAreaInput: React.FC<FormTextAreaInputProps> = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, ...inputConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Input.TextArea
+        {...inputConfig}
+        disabled={inputConfig.disabled ?? disabled}
+        placeholder={placeholder ?? "请输入"}
+      />
+    </ItemContainer>
+  );
+};
+
+export default FormTextAreaInput;

package/src/components/FormItem/FormInput/index.tsx

@@ -0,0 +1,64 @@
+import FormInputNumber, { FormInputNumberProps } from "./FormInputNumber";
+import FormPassword, { FormPasswordProps } from "./FormPassword";
+import FormPasswordStrength, {
+  FormPasswordStrengthProps,
+} from "./FormPasswordStrength";
+import FormTextAreaInput, { FormTextAreaInputProps } from "./FormTextAreaInput";
+import Input, { InputProps as BasicInputProps } from "../../Input";
+import ItemContainer, { ItemContainerProps } from "../ItemContainer";
+import React, { HTMLInputTypeAttribute } from "react";
+import FormRangeInput, { FormRangeInputProps } from "./FormRangeInput";
+
+export type {
+  FormTextAreaInputProps,
+  FormPasswordStrengthProps,
+  FormInputNumberProps,
+  FormPasswordProps,
+  FormRangeInputProps,
+};
+
+interface InputProps extends Omit<BasicInputProps, "type"> {
+  inputType?: HTMLInputTypeAttribute;
+}
+
+export interface FormInputProps extends ItemContainerProps {
+  componentProps?: InputProps;
+}
+
+interface FormInputFC extends React.FC<FormInputProps> {
+  TextArea: React.FC<FormTextAreaInputProps>;
+  PasswordStrength: React.FC<FormPasswordStrengthProps>;
+  InputNumber: React.FC<FormInputNumberProps>;
+  Password: React.FC<FormPasswordProps>;
+  RangeInput: React.FC<FormRangeInputProps>;
+}
+
+const FormInput: FormInputFC = (props) => {
+  const {
+    componentProps = {},
+    className: itemClassName,
+    disabled,
+    ...formItemProps
+  } = props;
+  const { placeholder, inputType, ...inputConfig } = componentProps;
+
+  return (
+    <ItemContainer {...formItemProps} className={`${itemClassName ?? ""}`}>
+      <Input
+        {...inputConfig}
+        disabled={inputConfig.disabled ?? disabled}
+        type={inputType}
+        placeholder={placeholder ?? "请输入"}
+        autoComplete="new-password"
+      />
+    </ItemContainer>
+  );
+};
+
+FormInput.TextArea = FormTextAreaInput;
+FormInput.PasswordStrength = FormPasswordStrength;
+FormInput.InputNumber = FormInputNumber;
+FormInput.Password = FormPassword;
+FormInput.RangeInput = FormRangeInput;
+
+export default FormInput;

package/src/components/FormItem/FormRadio/index.module.less

@@ -0,0 +1,106 @@
+.radioGroup {
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+
+  color: var(--cf-text);
+  font-size: 14px;
+
+  > label {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+
+    white-space: nowrap;
+  }
+
+  &.rect {
+    > label {
+      > span.ant-radio {
+        width: 24px;
+        min-width: 24px;
+        height: 24px;
+        min-height: 24px;
+
+        border-radius: 2px;
+
+        input[type="radio"].ant-radio-input {
+          width: 100%;
+          height: 100%;
+        }
+
+        .ant-radio-inner {
+          width: 100%;
+          height: 100%;
+
+          border-radius: inherit;
+          border-color: rgba(204, 204, 204, 1) !important;
+
+          background: transparent !important;
+
+          &::after {
+            display: table;
+
+            inset-inline-start: 20%;
+            inset-block-start: 0px;
+            margin-block-start: 40%;
+            margin-inline-start: 0px;
+
+            width: 33%;
+            height: 70%;
+
+            border: 2px solid rgba(0, 0, 0, 1);
+            border-radius: 0px;
+            border-top: 0;
+            border-inline-start: 0;
+
+            background-color: transparent;
+
+            transform: rotate(45deg) scale(0) translate(-50%, -50%);
+
+            transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
+              opacity 0.1s;
+          }
+        }
+
+        &.ant-radio-checked {
+          .ant-radio-inner {
+            background: rgba(255, 255, 255, 1) !important;
+
+            &::after {
+              transform: rotate(45deg) scale(1) translate(-50%, -50%);
+
+              transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+            }
+          }
+        }
+
+        &.ant-radio-disabled {
+          .ant-radio-inner {
+            background: rgba(0, 0, 0, 0.04) !important;
+
+            &::after {
+              border-color: rgba(204, 204, 204, 1) !important;
+            }
+          }
+
+          &.ant-radio-checked {
+            .ant-radio-inner {
+              background: rgba(0, 0, 0, 0.04) !important;
+            }
+          }
+        }
+      }
+
+      span {
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        color: inherit;
+      }
+    }
+  }
+}