@lark-apaas/coding-template-nestjs-react-fullstack 0.1.0-alpha.1

package/template/client/src/components/business-ui/form/form.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { AppFieldExtendedReactFormApi } from '@tanstack/react-form';
+
+import { FormProvider } from '@client/src/components/business-ui/form/context';
+import { FieldGroup } from '@client/src/components/ui/field';
+
+interface FormProps {
+  children: React.ReactNode;
+  form: AppFieldExtendedReactFormApi<
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any,
+    any
+  >;
+  className?: string;
+  style?: React.CSSProperties;
+  layout?: 'vertical' | 'responsive' | 'horizontal';
+}
+
+const ForceForm: React.FC<FormProps> = (props) => {
+  const { children, form, className, style, layout = 'vertical' } = props;
+  return (
+    <FormProvider layout={layout}>
+      <form
+        data-testid="tanstack-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          form.handleSubmit();
+        }}
+      >
+        <form.AppForm>
+          <FieldGroup className={className} style={style}>
+            {children}
+          </FieldGroup>
+        </form.AppForm>
+      </form>
+    </FormProvider>
+  );
+};
+
+const Form = ForceForm;
+
+export { Form };

package/template/client/src/components/business-ui/form/hooks/form-context.tsx

@@ -0,0 +1,4 @@
+import { createFormHookContexts } from '@tanstack/react-form';
+
+export const { fieldContext, formContext, useFieldContext, useFormContext } =
+  createFormHookContexts();

package/template/client/src/components/business-ui/form/hooks/form-utils.ts

@@ -0,0 +1,23 @@
+import {
+  useFieldContext,
+  useFormContext,
+} from '@client/src/components/business-ui/form/hooks/form-context';
+
+export const useFieldValidation = <T>() => {
+  const field = useFieldContext<T>();
+  const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
+  const errorMessage = isInvalid
+    ? (field.state.meta.errors[0].message ?? field.state.meta.errors[0])
+    : '';
+  return {
+    isInvalid,
+    errorMessage,
+  };
+};
+
+export const useFieldName = () => {
+  const form = useFormContext();
+  const field = useFieldContext();
+  const name = `${form.formId}-${field.name}`;
+  return name;
+};

package/template/client/src/components/business-ui/form/hooks/form.tsx

@@ -0,0 +1,40 @@
+import { createFormHook } from '@tanstack/react-form';
+
+import { CheckboxField } from '@client/src/components/business-ui/form/checkbox-field';
+import {
+  fieldContext,
+  formContext,
+} from '@client/src/components/business-ui/form/hooks/form-context';
+import { InputField } from '@client/src/components/business-ui/form/input-field';
+import { RadioGroupField } from '@client/src/components/business-ui/form/radio-group-field';
+import { SelectField } from '@client/src/components/business-ui/form/select-field';
+import { SwitchField } from '@client/src/components/business-ui/form/switch-field';
+import { TextareaField } from '@client/src/components/business-ui/form/textarea-field';
+
+interface CreateFormHookOptions {
+  fieldComponents: Record<string, React.FC>;
+  formComponents: Record<string, React.FC>;
+}
+
+const COMMON_FORM_COMPONENTS = {
+  Input: InputField,
+  Switch: SwitchField,
+  RadioGroup: RadioGroupField,
+  Checkbox: CheckboxField,
+  Select: SelectField,
+  Textarea: TextareaField,
+};
+
+export function createAppFormHook(options?: CreateFormHookOptions) {
+  const { fieldComponents = {}, formComponents = {} } = options ?? {};
+
+  return createFormHook({
+    fieldComponents: {
+      ...COMMON_FORM_COMPONENTS,
+      ...fieldComponents,
+    },
+    formComponents: formComponents,
+    fieldContext,
+    formContext,
+  });
+}

package/template/client/src/components/business-ui/form/index.tsx

@@ -0,0 +1,4 @@
+export { useFormGlobalProps } from '@client/src/components/business-ui/form/context';
+export { FieldLayout } from '@client/src/components/business-ui/form/field-layout';
+export { Form } from '@client/src/components/business-ui/form/form';
+export { createAppFormHook } from '@client/src/components/business-ui/form/hooks/form';

package/template/client/src/components/business-ui/form/input-field.tsx

@@ -0,0 +1,74 @@
+import { useFormGlobalProps } from '@client/src/components/business-ui/form/context';
+import { FieldLayout } from '@client/src/components/business-ui/form/field-layout';
+import { useFieldContext } from '@client/src/components/business-ui/form/hooks/form-context';
+import {
+  useFieldName,
+  useFieldValidation,
+} from '@client/src/components/business-ui/form/hooks/form-utils';
+import type {
+  CommonFieldProps,
+  FieldLayoutClassNames,
+  FieldLayoutStyles,
+} from '@client/src/components/business-ui/form/types';
+import { Input } from '@client/src/components/ui/input';
+
+type InputFieldProps = CommonFieldProps &
+  React.ComponentProps<typeof Input> & {
+    classNames?: Partial<
+      FieldLayoutClassNames & {
+        input: string;
+      }
+    >;
+    styles?: Partial<
+      FieldLayoutStyles & {
+        input: React.CSSProperties;
+      }
+    >;
+  };
+
+export function InputField({
+  label,
+  description,
+  disabled,
+  required,
+  layout = 'vertical',
+  classNames,
+  readOnly,
+  styles,
+  ...rest
+}: InputFieldProps) {
+  const field = useFieldContext<string>();
+  const { isInvalid, errorMessage } = useFieldValidation();
+  const { layout: formLayout } = useFormGlobalProps();
+  const name = useFieldName();
+  const { input: inputClassName, ...fieldLayoutClassNames } = classNames ?? {};
+  const { input: inputStyle, ...fieldLayoutStyles } = styles ?? {};
+
+  return (
+    <FieldLayout
+      label={label}
+      layout={layout ?? formLayout ?? 'vertical'}
+      description={description}
+      isInvalid={isInvalid}
+      required={required ?? false}
+      classNames={fieldLayoutClassNames ?? {}}
+      styles={fieldLayoutStyles ?? {}}
+      errorMessage={errorMessage}
+      name={name}
+    >
+      <Input
+        {...rest}
+        className={inputClassName ?? ''}
+        style={inputStyle ?? {}}
+        disabled={disabled ?? false}
+        readOnly={readOnly ?? false}
+        id={name}
+        name={name}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => field.handleChange(e.target.value)}
+        aria-invalid={isInvalid}
+      />
+    </FieldLayout>
+  );
+}

package/template/client/src/components/business-ui/form/radio-group-field.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+
+import { useFormGlobalProps } from '@client/src/components/business-ui/form/context';
+import { FieldLayout } from '@client/src/components/business-ui/form/field-layout';
+import { useFieldContext } from '@client/src/components/business-ui/form/hooks/form-context';
+import {
+  useFieldName,
+  useFieldValidation,
+} from '@client/src/components/business-ui/form/hooks/form-utils';
+import type {
+  CommonFieldProps,
+  FieldLayoutClassNames,
+  FieldLayoutStyles,
+} from '@client/src/components/business-ui/form/types';
+import { cn } from '@/lib/utils';
+import { Label } from '@client/src/components/ui/label';
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from '@client/src/components/ui/radio-group';
+
+type RadioOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  description?: string;
+};
+
+type RadioGroupFieldProps = CommonFieldProps & {
+  children?: ReactNode;
+  options?: RadioOption[];
+  orientation?: 'horizontal' | 'vertical';
+  classNames?: Partial<
+    FieldLayoutClassNames & {
+      radioGroup: string;
+    }
+  >;
+  styles?: Partial<
+    FieldLayoutStyles & {
+      radioGroup: React.CSSProperties;
+    }
+  >;
+};
+
+function renderRadioOptions(
+  options: RadioOption[],
+  fieldName: string,
+  disabled: boolean,
+): ReactNode {
+  return options.map((option, index) => {
+    const optionId = `${fieldName}-${index}`;
+
+    return (
+      <div key={option.value} className="flex items-center space-x-2">
+        <RadioGroupItem
+          id={optionId}
+          value={option.value}
+          disabled={disabled || option.disabled}
+        />
+        <Label
+          htmlFor={optionId}
+          className={cn(
+            `${option.disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`,
+            'font-normal',
+          )}
+        >
+          {option.label}
+        </Label>
+        {option.description && (
+          <span className="text-sm text-muted-foreground">
+            {option.description}
+          </span>
+        )}
+      </div>
+    );
+  });
+}
+
+export function RadioGroupField(props: RadioGroupFieldProps) {
+  const {
+    children,
+    description,
+    label,
+    options,
+    orientation = 'vertical',
+    required,
+    layout,
+    disabled,
+    classNames,
+    styles,
+  } = props;
+  const field = useFieldContext<string>();
+  const { isInvalid, errorMessage } = useFieldValidation();
+  const { layout: formLayout } = useFormGlobalProps();
+  const name = useFieldName();
+  const { radioGroup: radioGroupClassName, ...fieldLayoutClassNames } =
+    classNames ?? {};
+  const { radioGroup: radioGroupStyle, ...fieldLayoutStyles } = styles ?? {};
+
+  const hasContent = children || options;
+
+  return (
+    <FieldLayout
+      label={label}
+      description={description}
+      isInvalid={isInvalid}
+      required={required ?? false}
+      layout={layout ?? formLayout ?? 'vertical'}
+      classNames={fieldLayoutClassNames}
+      styles={fieldLayoutStyles}
+      errorMessage={errorMessage}
+      name={name}
+    >
+      <RadioGroup
+        id={name}
+        name={name}
+        orientation={orientation}
+        aria-invalid={isInvalid}
+        value={field.state.value}
+        disabled={disabled}
+        onValueChange={(value) => field.handleChange(value)}
+        className={cn(
+          'flex gap-3',
+          orientation === 'horizontal' ? 'flex-row' : 'flex-col',
+          radioGroupClassName,
+        )}
+        style={radioGroupStyle ?? {}}
+      >
+        {hasContent ? (
+          children ||
+          (options && renderRadioOptions(options, name, disabled ?? false))
+        ) : (
+          <div className="text-sm text-muted-foreground">暂无选项</div>
+        )}
+      </RadioGroup>
+    </FieldLayout>
+  );
+}

package/template/client/src/components/business-ui/form/select-field.tsx

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react';
+
+import { useFormGlobalProps } from '@client/src/components/business-ui/form/context';
+import { FieldLayout } from '@client/src/components/business-ui/form/field-layout';
+import { useFieldContext } from '@client/src/components/business-ui/form/hooks/form-context';
+import {
+  useFieldName,
+  useFieldValidation,
+} from '@client/src/components/business-ui/form/hooks/form-utils';
+import type {
+  CommonFieldProps,
+  FieldLayoutClassNames,
+  FieldLayoutStyles,
+} from '@client/src/components/business-ui/form/types';
+import { cn } from '@/lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '@client/src/components/ui/select';
+
+type SelectOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+type SelectGroupOption = {
+  label: string;
+  options: SelectOption[];
+};
+
+type SelectFieldProps = CommonFieldProps & {
+  placeholder?: string;
+  children?: ReactNode;
+  options?: SelectOption[] | SelectGroupOption[];
+  classNames?: Partial<
+    FieldLayoutClassNames & {
+      Select: string;
+    }
+  >;
+  styles?: Partial<
+    FieldLayoutStyles & {
+      Select: React.CSSProperties;
+    }
+  >;
+};
+
+function renderOptions(
+  options: SelectOption[] | SelectGroupOption[],
+): ReactNode {
+  // 检查是否是分组选项
+  const isGrouped = options.length > 0 && options[0] && 'options' in options[0];
+
+  if (isGrouped) {
+    return (options as SelectGroupOption[]).map((group, groupIndex) => (
+      <SelectGroup key={group.label}>
+        <SelectLabel>{group.label}</SelectLabel>
+        {group.options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled ?? false}
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+        {groupIndex < options.length - 1 && <SelectSeparator />}
+      </SelectGroup>
+    ));
+  } else {
+    return (options as SelectOption[]).map((option) => (
+      <SelectItem
+        key={option.value}
+        value={option.value}
+        disabled={option.disabled ?? false}
+      >
+        {option.label}
+      </SelectItem>
+    ));
+  }
+}
+
+export function SelectField(props: SelectFieldProps) {
+  const {
+    label,
+    description,
+    placeholder,
+    children,
+    options,
+    required,
+    disabled,
+    classNames,
+    layout = 'vertical',
+    styles,
+  } = props;
+  const field = useFieldContext<string>();
+  const { isInvalid, errorMessage } = useFieldValidation();
+  const { layout: formLayout } = useFormGlobalProps();
+  const name = useFieldName();
+
+  const { Select: selectClassName, ...fieldLayoutClassNames } =
+    classNames ?? {};
+  const { Select: selectStyle, ...fieldLayoutStyles } = styles ?? {};
+
+  const hasContent = children || options;
+
+  return (
+    <FieldLayout
+      label={label}
+      description={description}
+      isInvalid={isInvalid}
+      required={required ?? false}
+      layout={layout ?? formLayout ?? 'vertical'}
+      classNames={fieldLayoutClassNames ?? {}}
+      styles={fieldLayoutStyles ?? {}}
+      errorMessage={errorMessage}
+      name={name}
+    >
+      <Select
+        disabled={disabled ?? false}
+        aria-invalid={isInvalid}
+        value={field.state.value}
+        onValueChange={(value) => {
+          field.handleChange(value);
+        }}
+      >
+        <SelectTrigger
+          style={selectStyle}
+          className={cn(selectClassName, 'w-full')}
+          id={name}
+          name={name}
+          aria-invalid={isInvalid}
+        >
+          <SelectValue placeholder={placeholder || '请选择'} />
+        </SelectTrigger>
+        <SelectContent>
+          {hasContent ? (
+            children || (options && renderOptions(options))
+          ) : (
+            // eslint-disable-next-line no-restricted-syntax
+            <SelectItem disabled value={''}>
+              暂无选项
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    </FieldLayout>
+  );
+}

package/template/client/src/components/business-ui/form/switch-field.tsx

@@ -0,0 +1,66 @@
+import { FieldLayout } from '@client/src/components/business-ui/form/field-layout';
+import { useFieldContext } from '@client/src/components/business-ui/form/hooks/form-context';
+import {
+  useFieldName,
+  useFieldValidation,
+} from '@client/src/components/business-ui/form/hooks/form-utils';
+import type {
+  CommonFieldProps,
+  FieldLayoutClassNames,
+  FieldLayoutStyles,
+} from '@client/src/components/business-ui/form/types';
+import { Switch } from '@client/src/components/ui/switch';
+
+type SwitchFieldProps = CommonFieldProps &
+  React.ComponentProps<typeof Switch> & {
+    classNames?: Partial<FieldLayoutClassNames & Record<'switch', string>>;
+    styles?: Partial<FieldLayoutStyles & Record<'switch', React.CSSProperties>>;
+  };
+
+export function SwitchField(props: SwitchFieldProps) {
+  const {
+    label,
+    description,
+    disabled,
+    required,
+    classNames,
+    layout = 'vertical',
+    styles,
+    ...rest
+  } = props;
+  const field = useFieldContext<boolean>();
+  const { isInvalid, errorMessage } = useFieldValidation();
+  const name = useFieldName();
+  const { switch: switchClassName, ...fieldLayoutClassNames } =
+    classNames ?? {};
+  const { switch: switchStyle, ...fieldLayoutStyles } = styles ?? {};
+
+  return (
+    <FieldLayout
+      label={label}
+      description={description}
+      isInvalid={isInvalid}
+      required={required ?? false}
+      layout={layout}
+      classNames={fieldLayoutClassNames}
+      styles={fieldLayoutStyles}
+      errorMessage={errorMessage}
+      name={name}
+    >
+      <Switch
+        {...rest}
+        id={name}
+        className={switchClassName ?? ''}
+        style={switchStyle ?? {}}
+        name={name}
+        disabled={disabled ?? false}
+        checked={field.state.value}
+        onBlur={field.handleBlur}
+        onCheckedChange={(checked) => {
+          field.handleChange(checked);
+        }}
+        aria-invalid={isInvalid}
+      />
+    </FieldLayout>
+  );
+}

package/template/client/src/components/business-ui/form/textarea-field.tsx

@@ -0,0 +1,72 @@
+import { useFormGlobalProps } from '@client/src/components/business-ui/form/context';
+import { FieldLayout } from '@client/src/components/business-ui/form/field-layout';
+import { useFieldContext } from '@client/src/components/business-ui/form/hooks/form-context';
+import {
+  useFieldName,
+  useFieldValidation,
+} from '@client/src/components/business-ui/form/hooks/form-utils';
+import type {
+  CommonFieldProps,
+  FieldLayoutClassNames,
+  FieldLayoutStyles,
+} from '@client/src/components/business-ui/form/types';
+import { Textarea } from '@client/src/components/ui/textarea';
+
+type TextareaFieldProps = CommonFieldProps &
+  React.ComponentProps<typeof Textarea> & {
+    classNames?: Partial<FieldLayoutClassNames & Record<'textarea', string>>;
+    styles?: Partial<
+      FieldLayoutStyles & Record<'textarea', React.CSSProperties>
+    >;
+  };
+
+export function TextareaField({
+  label,
+  description,
+  disabled,
+  required,
+  classNames,
+  layout = 'vertical',
+  readOnly,
+  styles,
+  ...rest
+}: TextareaFieldProps) {
+  const field = useFieldContext<string>();
+  const { isInvalid, errorMessage } = useFieldValidation();
+  const { layout: formLayout } = useFormGlobalProps();
+  const name = useFieldName();
+
+  const { textarea: textareaClassName, ...fieldLayoutClassNames } =
+    classNames ?? {};
+  const { textarea: textareaStyle, ...fieldLayoutStyles } = styles ?? {};
+
+  return (
+    <FieldLayout
+      label={label}
+      description={description}
+      isInvalid={isInvalid}
+      required={required ?? false}
+      layout={layout ?? formLayout ?? 'vertical'}
+      classNames={fieldLayoutClassNames}
+      styles={fieldLayoutStyles}
+      errorMessage={errorMessage}
+      name={name}
+    >
+      <Textarea
+        {...rest}
+        disabled={disabled ?? false}
+        readOnly={readOnly ?? false}
+        id={name}
+        name={name}
+        className={textareaClassName ?? ''}
+        style={textareaStyle ?? {}}
+        value={field.state.value}
+        onBlur={field.handleBlur}
+        onChange={(e) => {
+          field.handleChange(e.target.value);
+        }}
+        aria-invalid={isInvalid}
+      />
+    </FieldLayout>
+  );
+}

package/template/client/src/components/business-ui/form/types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+
+export type FieldLayoutStyles = Record<
+  'root' | 'label' | 'description' | 'error',
+  React.CSSProperties
+>;
+export type FieldLayoutClassNames = Record<
+  'root' | 'label' | 'description' | 'error',
+  string
+>;
+
+export interface FieldLayoutProps {
+  label?: ReactNode;
+  placeholder?: string;
+  description?: string | undefined;
+  isInvalid?: boolean;
+  errorMessage?: string;
+  layout?: 'horizontal' | 'vertical' | 'responsive';
+  name?: string;
+  required?: boolean;
+  classNames?: Partial<FieldLayoutClassNames>; // 自定义样式
+  styles?: Partial<FieldLayoutStyles>; // 内联样式
+}
+
+export interface CommonFieldProps {
+  label?: ReactNode;
+  placeholder?: string;
+  description?: string;
+  disabled?: boolean;
+  required?: boolean;
+  layout?: 'horizontal' | 'vertical' | 'responsive';
+}