youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): new lint setup (#30020)

Browse Source 
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
Stephen Zhou
2025-12-23 16:58:55 +08:00
committed by GitHub
parent 9701a2994b
commit f2842da397
3356 changed files with 85046 additions and 81278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/app/components/base/form/components/base/base-field.tsx
View File

@ -1,5 +1,15 @@
import CheckboxList from '@/app/components/base/checkbox-list'
import type { AnyFieldApi } from '@tanstack/react-form'
import type { FieldState, FormSchema, TypeWithI18N } from '@/app/components/base/form/types'
import { RiExternalLinkLine } from '@remixicon/react'
import { useStore } from '@tanstack/react-form'
import {
isValidElement,
memo,
useCallback,
useMemo,
} from 'react'
import { useTranslation } from 'react-i18next'
import CheckboxList from '@/app/components/base/checkbox-list'
import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
import Input from '@/app/components/base/input'
import Radio from '@/app/components/base/radio'
@ -9,16 +19,6 @@ import Tooltip from '@/app/components/base/tooltip'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
import { cn } from '@/utils/classnames'
import { RiExternalLinkLine } from '@remixicon/react'
import type { AnyFieldApi } from '@tanstack/react-form'
import { useStore } from '@tanstack/react-form'
import {
isValidElement,
memo,
useCallback,
useMemo,
} from 'react'
import { useTranslation } from 'react-i18next'
const getExtraProps = (type: FormTypeEnum) => {
switch (type) {
@ -119,7 +119,8 @@ const BaseField = ({
description,
help,
].map(v => getTranslatedContent({ content: v, render: renderI18nObject }))
if (!results[1]) results[1] = t('common.placeholder.input')
if (!results[1])
results[1] = t('common.placeholder.input')
return results
}, [label, placeholder, tooltip, description, help, renderI18nObject])
@ -192,13 +193,13 @@ const BaseField = ({
{translatedLabel}
{
required && !isValidElement(label) && (
<span className='ml-1 text-text-destructive-secondary'>*</span>
<span className="ml-1 text-text-destructive-secondary">*</span>
)
}
{tooltip && (
<Tooltip
popupContent={<div className='w-[200px]'>{translatedTooltip}</div>}
triggerClassName='ml-0.5 w-4 h-4'
popupContent={<div className="w-[200px]">{translatedTooltip}</div>}
triggerClassName="ml-0.5 w-4 h-4"
/>
)}
</div>
@ -243,7 +244,7 @@ const BaseField = ({
value={value}
onChange={v => field.handleChange(v)}
options={memorizedOptions}
maxHeight='200px'
maxHeight="200px"
/>
)
}
@ -259,7 +260,8 @@ const BaseField = ({
? t('common.dynamicSelect.loading')
: translatedPlaceholder
}
{...(dynamicOptionsError ? { popupProps: { title: t('common.dynamicSelect.error'), titleClassName: 'text-text-destructive-secondary' } }
{...(dynamicOptionsError
? { popupProps: { title: t('common.dynamicSelect.error'), titleClassName: 'text-text-destructive-secondary' } }
: (!dynamicOptions.length ? { popupProps: { title: t('common.dynamicSelect.noData') } } : {}))}
triggerPopupSameWidth
multiple={multiple}
@ -270,7 +272,8 @@ const BaseField = ({
formItemType === FormTypeEnum.radio && (
<div className={cn(
memorizedOptions.length < 3 ? 'flex items-center space-x-2' : 'space-y-2',
)}>
)}
>
{
memorizedOptions.map(option => (
<div
@ -286,7 +289,7 @@ const BaseField = ({
{
formSchema.showRadioUI && (
<RadioE
className='mr-2'
className="mr-2"
isChecked={value === option.value}
/>
)
@ -301,11 +304,11 @@ const BaseField = ({
{
formItemType === FormTypeEnum.boolean && (
<Radio.Group
className='flex w-fit items-center'
className="flex w-fit items-center"
value={value}
onChange={v => field.handleChange(v)}
>
<Radio value={true} className='!mr-1'>True</Radio>
<Radio value={true} className="!mr-1">True</Radio>
<Radio value={false}>False</Radio>
</Radio.Group>
)
@ -314,28 +317,29 @@ const BaseField = ({
<div className={cn(
'system-xs-regular mt-1 px-0 py-[2px]',
VALIDATE_STATUS_STYLE_MAP[fieldState?.validateStatus].textClassName,
)}>
)}
>
{fieldState?.[VALIDATE_STATUS_STYLE_MAP[fieldState?.validateStatus].infoFieldName as keyof FieldState]}
</div>
)}
</div>
</div>
{description && (
<div className='system-xs-regular mt-4 text-text-tertiary'>
<div className="system-xs-regular mt-4 text-text-tertiary">
{translatedDescription}
</div>
)}
{
url && (
<a
className='system-xs-regular mt-4 flex items-center text-text-accent'
className="system-xs-regular mt-4 flex items-center text-text-accent"
href={url}
target='_blank'
target="_blank"
>
<span className='break-all'>
<span className="break-all">
{translatedHelp}
</span>
<RiExternalLinkLine className='ml-1 h-3 w-3 shrink-0' />
<RiExternalLinkLine className="ml-1 h-3 w-3 shrink-0" />
</a>
)
}

43
web/app/components/base/form/components/base/base-form.tsx
View File

@ -1,3 +1,15 @@
import type {
AnyFieldApi,
AnyFormApi,
} from '@tanstack/react-form'
import type {
BaseFieldProps,
} from '.'
import type { FieldState, FormRef, FormSchema, SetFieldsParam } from '@/app/components/base/form/types'
import {
useForm,
useStore,
} from '@tanstack/react-form'
import {
memo,
useCallback,
@ -5,32 +17,19 @@ import {
useMemo,
useState,
} from 'react'
import type {
AnyFieldApi,
AnyFormApi,
} from '@tanstack/react-form'
import {
useForm,
useStore,
} from '@tanstack/react-form'
import {
type FieldState,
FormItemValidateStatusEnum,
type FormRef,
type FormSchema,
type SetFieldsParam,
} from '@/app/components/base/form/types'
import {
BaseField,
} from '.'
import type {
BaseFieldProps,
} from '.'
import { cn } from '@/utils/classnames'
import {
useGetFormValues,
useGetValidators,
} from '@/app/components/base/form/hooks'
import {
FormItemValidateStatusEnum,
} from '@/app/components/base/form/types'
import { cn } from '@/utils/classnames'
import {
BaseField,
} from '.'
export type BaseFormProps = {
formSchemas?: FormSchema[]

2
web/app/components/base/form/components/base/index.tsx
View File

@ -1,2 +1,2 @@
export { default as BaseForm, type BaseFormProps } from './base-form'
export { default as BaseField, type BaseFieldProps } from './base-field'
export { default as BaseForm, type BaseFormProps } from './base-form'

8
web/app/components/base/form/components/field/checkbox.tsx
View File

@ -3,8 +3,8 @@ import { useFieldContext } from '../..'
import Checkbox from '../../../checkbox'
type CheckboxFieldProps = {
label: string;
labelClassName?: string;
label: string
labelClassName?: string
}
const CheckboxField = ({
@ -14,8 +14,8 @@ const CheckboxField = ({
const field = useFieldContext<boolean>()
return (
<div className='flex gap-2'>
<div className='flex h-6 shrink-0 items-center'>
<div className="flex gap-2">
<div className="flex h-6 shrink-0 items-center">
<Checkbox
id={field.name}
checked={field.state.value}

4
web/app/components/base/form/components/field/custom-select.tsx
View File

@ -1,8 +1,8 @@
import type { CustomSelectProps, Option } from '../../../select/custom'
import type { LabelProps } from '../label'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import type { CustomSelectProps, Option } from '../../../select/custom'
import CustomSelect from '../../../select/custom'
import type { LabelProps } from '../label'
import Label from '../label'
type CustomSelectFieldProps<T extends Option> = {

10
web/app/components/base/form/components/field/file-types.tsx
View File

@ -1,13 +1,13 @@
import { cn } from '@/utils/classnames'
import type { LabelProps } from '../label'
import { useCallback } from 'react'
import FileTypeItem from '@/app/components/workflow/nodes/_base/components/file-type-item'
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import Label from '../label'
import { SupportUploadFileTypes } from '@/app/components/workflow/types'
import FileTypeItem from '@/app/components/workflow/nodes/_base/components/file-type-item'
import { useCallback } from 'react'
type FieldValue = {
allowedFileTypes: string[],
allowedFileTypes: string[]
allowedFileExtensions: string[]
}

12
web/app/components/base/form/components/field/file-uploader.tsx
View File

@ -1,11 +1,11 @@
import React from 'react'
import { useFieldContext } from '../..'
import type { LabelProps } from '../label'
import Label from '../label'
import { cn } from '@/utils/classnames'
import type { FileUploaderInAttachmentWrapperProps } from '../../../file-uploader/file-uploader-in-attachment'
import FileUploaderInAttachmentWrapper from '../../../file-uploader/file-uploader-in-attachment'
import type { FileEntity } from '../../../file-uploader/types'
import type { LabelProps } from '../label'
import React from 'react'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import FileUploaderInAttachmentWrapper from '../../../file-uploader/file-uploader-in-attachment'
import Label from '../label'
type FileUploaderFieldProps = {
label: string

6
web/app/components/base/form/components/field/input-type-select/hooks.tsx
View File

@ -1,6 +1,3 @@
import { InputTypeEnum } from './types'
import { PipelineInputVarType } from '@/models/pipeline'
import { useTranslation } from 'react-i18next'
import {
RiAlignLeft,
RiCheckboxLine,
@ -10,6 +7,9 @@ import {
RiListCheck3,
RiTextSnippet,
} from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { PipelineInputVarType } from '@/models/pipeline'
import { InputTypeEnum } from './types'
const i18nFileTypeMap: Record<string, string> = {
'number': 'number',

10
web/app/components/base/form/components/field/input-type-select/index.tsx
View File

@ -1,14 +1,14 @@
import type { CustomSelectProps } from '../../../../select/custom'
import type { LabelProps } from '../../label'
import type { FileTypeSelectOption, InputType } from './types'
import { useCallback } from 'react'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../../..'
import type { CustomSelectProps } from '../../../../select/custom'
import CustomSelect from '../../../../select/custom'
import type { LabelProps } from '../../label'
import Label from '../../label'
import { useCallback } from 'react'
import Trigger from './trigger'
import type { FileTypeSelectOption, InputType } from './types'
import { useInputTypeOptions } from './hooks'
import Option from './option'
import Trigger from './trigger'
type InputTypeSelectFieldProps = {
label: string

6
web/app/components/base/form/components/field/input-type-select/option.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'
import type { FileTypeSelectOption } from './types'
import React from 'react'
import Badge from '@/app/components/base/badge'
type OptionProps = {
@ -11,8 +11,8 @@ const Option = ({
}: OptionProps) => {
return (
<>
<option.Icon className='h-4 w-4 shrink-0 text-text-tertiary' />
<span className='grow px-1'>{option.label}</span>
<option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
<span className="grow px-1">{option.label}</span>
<Badge text={option.type} uppercase={false} />
</>
)

30
web/app/components/base/form/components/field/input-type-select/trigger.tsx
View File

@ -1,9 +1,9 @@
import type { FileTypeSelectOption } from './types'
import { RiArrowDownSLine } from '@remixicon/react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import Badge from '@/app/components/base/badge'
import { cn } from '@/utils/classnames'
import { RiArrowDownSLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import type { FileTypeSelectOption } from './types'
type TriggerProps = {
option: FileTypeSelectOption | undefined
@ -18,17 +18,19 @@ const Trigger = ({
return (
<>
{option ? (
<>
<option.Icon className='h-4 w-4 shrink-0 text-text-tertiary' />
<span className='grow p-1'>{option.label}</span>
<div className='pr-0.5'>
<Badge text={option.type} uppercase={false} />
</div>
</>
) : (
<span className='grow p-1'>{t('common.placeholder.select')}</span>
)}
{option
? (
<>
<option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
<span className="grow p-1">{option.label}</span>
<div className="pr-0.5">
<Badge text={option.type} uppercase={false} />
</div>
</>
)
: (
<span className="grow p-1">{t('common.placeholder.select')}</span>
)}
<RiArrowDownSLine
className={cn(
'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',

2
web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
View File

@ -22,7 +22,7 @@ const MixedVariableTextInput = ({
'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
)}
className='caret:text-text-accent'
className="caret:text-text-accent"
editable={editable}
value={value}
workflowVariableBlock={{

19
web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx
View File

@ -1,9 +1,8 @@
import { useCallback } from 'react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { FOCUS_COMMAND } from 'lexical'
import { $insertNodes } from 'lexical'
import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
import { $insertNodes, FOCUS_COMMAND } from 'lexical'
import { useCallback } from 'react'
import Badge from '@/app/components/base/badge'
import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
const Placeholder = () => {
const [editor] = useLexicalComposerContext()
@ -18,17 +17,17 @@ const Placeholder = () => {
return (
<div
className='pointer-events-auto flex h-full w-full cursor-text items-center px-2'
className="pointer-events-auto flex h-full w-full cursor-text items-center px-2"
onClick={(e) => {
e.stopPropagation()
handleInsert('')
}}
>
<div className='flex grow items-center'>
<div className="flex grow items-center">
Type or press
<div className='system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder'>/</div>
<div className="system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder">/</div>
<div
className='system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary'
className="system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary"
onClick={((e) => {
e.stopPropagation()
handleInsert('/')
@ -38,8 +37,8 @@ const Placeholder = () => {
</div>
</div>
<Badge
className='shrink-0'
text='String'
className="shrink-0"
text="String"
uppercase={false}
/>
</div>

10
web/app/components/base/form/components/field/number-input.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'
import { useFieldContext } from '../..'
import type { LabelProps } from '../label'
import Label from '../label'
import { cn } from '@/utils/classnames'
import type { InputNumberProps } from '../../../input-number'
import type { LabelProps } from '../label'
import React from 'react'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import { InputNumber } from '../../../input-number'
import Label from '../label'
type TextFieldProps = {
label: string

8
web/app/components/base/form/components/field/number-slider.tsx
View File

@ -1,9 +1,9 @@
import { cn } from '@/utils/classnames'
import type { LabelProps } from '../label'
import { useFieldContext } from '../..'
import Label from '../label'
import type { InputNumberWithSliderProps } from '@/app/components/workflow/nodes/_base/components/input-number-with-slider'
import InputNumberWithSlider from '@/app/components/workflow/nodes/_base/components/input-number-with-slider'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import Label from '../label'
type NumberSliderFieldProps = {
label: string
@ -30,7 +30,7 @@ const NumberSliderField = ({
{...(labelOptions ?? {})}
/>
{description && (
<div className='body-xs-regular pb-0.5 text-text-tertiary'>
<div className="body-xs-regular pb-0.5 text-text-tertiary">
{description}
</div>
)}

10
web/app/components/base/form/components/field/options.tsx
View File

@ -1,14 +1,14 @@
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import type { LabelProps } from '../label'
import Label from '../label'
import type { Options } from '@/app/components/app/configuration/config-var/config-select'
import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import Label from '../label'
type OptionsFieldProps = {
label: string;
label: string
labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
className?: string;
className?: string
}
const OptionsField = ({

4
web/app/components/base/form/components/field/select.tsx
View File

@ -1,8 +1,8 @@
import type { Option, PureSelectProps } from '../../../select/pure'
import type { LabelProps } from '../label'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import type { Option, PureSelectProps } from '../../../select/pure'
import PureSelect from '../../../select/pure'
import type { LabelProps } from '../label'
import Label from '../label'
type SelectFieldProps = {

10
web/app/components/base/form/components/field/text-area.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'
import { useFieldContext } from '../..'
import type { LabelProps } from '../label'
import Label from '../label'
import { cn } from '@/utils/classnames'
import type { TextareaProps } from '../../../textarea'
import type { LabelProps } from '../label'
import React from 'react'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import Textarea from '../../../textarea'
import Label from '../label'
type TextAreaFieldProps = {
label: string

9
web/app/components/base/form/components/field/text.tsx
View File

@ -1,9 +1,10 @@
import React from 'react'
import { useFieldContext } from '../..'
import Input, { type InputProps } from '../../../input'
import type { InputProps } from '../../../input'
import type { LabelProps } from '../label'
import Label from '../label'
import React from 'react'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import Input from '../../../input'
import Label from '../label'
type TextFieldProps = {
label: string

12
web/app/components/base/form/components/field/upload-method.tsx
View File

@ -1,11 +1,11 @@
import { cn } from '@/utils/classnames'
import type { LabelProps } from '../label'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
import { TransferMethod } from '@/types/app'
import { cn } from '@/utils/classnames'
import { useFieldContext } from '../..'
import Label from '../label'
import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
import { useTranslation } from 'react-i18next'
import { TransferMethod } from '@/types/app'
import { useCallback } from 'react'
type UploadMethodFieldProps = {
label: string
@ -34,7 +34,7 @@ const UploadMethodField = ({
label={label}
{...(labelOptions ?? {})}
/>
<div className='grid grid-cols-3 gap-2'>
<div className="grid grid-cols-3 gap-2">
<OptionCard
title={t('appDebug.variableConfig.localUpload')}
selected={value.length === 1 && value.includes(TransferMethod.local_file)}

20
web/app/components/base/form/components/field/variable-or-constant-input.tsx
View File

@ -1,12 +1,12 @@
import type { ChangeEvent } from 'react'
import { useCallback, useState } from 'react'
import type { LabelProps } from '../label'
import { RiEditLine } from '@remixicon/react'
import { cn } from '@/utils/classnames'
import SegmentedControl from '@/app/components/base/segmented-control'
import { useCallback, useState } from 'react'
import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
import Input from '@/app/components/base/input'
import SegmentedControl from '@/app/components/base/segmented-control'
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
import type { LabelProps } from '../label'
import { cn } from '@/utils/classnames'
import Label from '../label'
type VariableOrConstantInputFieldProps = {
@ -48,13 +48,13 @@ const VariableOrConstantInputField = ({
return (
<div className={cn('flex flex-col gap-y-0.5', className)}>
<Label
htmlFor={'variable-or-constant'}
htmlFor="variable-or-constant"
label={label}
{...(labelOptions ?? {})}
/>
<div className='flex items-center'>
<div className="flex items-center">
<SegmentedControl
className='mr-1 shrink-0'
className="mr-1 shrink-0"
value={variableType}
onChange={handleVariableOrConstantChange as any}
options={options as any}
@ -62,8 +62,8 @@ const VariableOrConstantInputField = ({
{
variableType === 'variable' && (
<VarReferencePicker
className='grow'
nodeId=''
className="grow"
nodeId=""
readonly={false}
value={[]}
onChange={handleVariableValueChange}
@ -73,7 +73,7 @@ const VariableOrConstantInputField = ({
{
variableType === 'constant' && (
<Input
className='ml-1'
className="ml-1"
onChange={handleConstantValueChange}
/>
)

12
web/app/components/base/form/components/field/variable-selector.tsx
View File

@ -1,6 +1,6 @@
import { cn } from '@/utils/classnames'
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
import type { LabelProps } from '../label'
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
import { cn } from '@/utils/classnames'
import Label from '../label'
type VariableOrConstantInputFieldProps = {
@ -21,14 +21,14 @@ const VariableOrConstantInputField = ({
return (
<div className={cn('flex flex-col gap-y-0.5', className)}>
<Label
htmlFor={'variable-or-constant'}
htmlFor="variable-or-constant"
label={label}
{...(labelOptions ?? {})}
/>
<div className='flex items-center'>
<div className="flex items-center">
<VarReferencePicker
className='grow'
nodeId=''
className="grow"
nodeId=""
readonly={false}
value={[]}
onChange={handleVariableValueChange}

6
web/app/components/base/form/components/form/actions.tsx
View File

@ -1,8 +1,8 @@
import { useStore } from '@tanstack/react-form'
import type { FormType } from '../..'
import { useStore } from '@tanstack/react-form'
import { useTranslation } from 'react-i18next'
import { useFormContext } from '../..'
import Button from '../../../button'
import { useTranslation } from 'react-i18next'
export type CustomActionsProps = {
form: FormType
@ -30,7 +30,7 @@ const Actions = ({
return (
<Button
variant='primary'
variant="primary"
disabled={isSubmitting || !canSubmit}
loading={isSubmitting}
onClick={() => form.handleSubmit()}

14
web/app/components/base/form/components/label.tsx
View File

@ -1,6 +1,6 @@
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
import Tooltip from '../../tooltip'
import { useTranslation } from 'react-i18next'
export type LabelProps = {
htmlFor: string
@ -22,22 +22,22 @@ const Label = ({
const { t } = useTranslation()
return (
<div className='flex h-6 items-center'>
<div className="flex h-6 items-center">
<label
data-testid='label'
data-testid="label"
htmlFor={htmlFor}
className={cn('system-sm-medium text-text-secondary', className)}
>
{label}
</label>
{!isRequired && showOptional && <div className='system-xs-regular ml-1 text-text-tertiary'>{t('common.label.optional')}</div>}
{isRequired && <div className='system-xs-regular ml-1 text-text-destructive-secondary'>*</div>}
{!isRequired && showOptional && <div className="system-xs-regular ml-1 text-text-tertiary">{t('common.label.optional')}</div>}
{isRequired && <div className="system-xs-regular ml-1 text-text-destructive-secondary">*</div>}
{tooltip && (
<Tooltip
popupContent={
<div className='w-[200px]'>{tooltip}</div>
<div className="w-[200px]">{tooltip}</div>
}
triggerClassName='ml-0.5 w-4 h-4'
triggerClassName="ml-0.5 w-4 h-4"
triggerTestId={`${htmlFor}-tooltip`}
/>
)}

6
web/app/components/base/form/form-scenarios/auth/index.tsx
View File

@ -1,6 +1,6 @@
import type { BaseFormProps } from '../../components/base'
import { memo } from 'react'
import { BaseForm } from '../../components/base'
import type { BaseFormProps } from '../../components/base'
const AuthForm = ({
formSchemas = [],
@ -14,8 +14,8 @@ const AuthForm = ({
ref={ref}
formSchemas={formSchemas}
defaultValues={defaultValues}
formClassName='space-y-4'
labelClassName='h-6 flex items-center mb-1 system-sm-medium text-text-secondary'
formClassName="space-y-4"
labelClassName="h-6 flex items-center mb-1 system-sm-medium text-text-secondary"
formFromProps={formFromProps}
{...rest}
/>

10
web/app/components/base/form/form-scenarios/base/field.tsx
View File

@ -1,7 +1,8 @@
import React from 'react'
import { type BaseConfiguration, BaseFieldType } from './types'
import { withForm } from '../..'
import type { BaseConfiguration } from './types'
import { useStore } from '@tanstack/react-form'
import React from 'react'
import { withForm } from '../..'
import { BaseFieldType } from './types'
type BaseFieldProps = {
initialData?: Record<string, any>
@ -38,7 +39,8 @@ const BaseField = ({
const isAllConditionsMet = useStore(form.store, (state) => {
const fieldValues = state.values
if (!showConditions.length) return true
if (!showConditions.length)
return true
return showConditions.every((condition) => {
const { variable, value } = condition
const fieldValue = fieldValues[variable as keyof typeof fieldValues]

6
web/app/components/base/form/form-scenarios/base/index.tsx
View File

@ -1,7 +1,7 @@
import type { BaseFormProps } from './types'
import React, { useMemo } from 'react'
import { useAppForm } from '../..'
import BaseField from './field'
import type { BaseFormProps } from './types'
import { generateZodSchema } from './utils'
const BaseForm = ({
@ -35,14 +35,14 @@ const BaseForm = ({
return (
<form
className='w-full'
className="w-full"
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
baseForm.handleSubmit()
}}
>
<div className='flex flex-col gap-4 px-4 py-2'>
<div className="flex flex-col gap-4 px-4 py-2">
{configurations.map((config, index) => {
const FieldComponent = BaseField({
initialData,

6
web/app/components/base/form/form-scenarios/base/types.ts
View File

@ -1,6 +1,6 @@
import type { TransferMethod } from '@/types/app'
import type { Option } from '../../../select/pure'
import type { CustomActionsProps } from '../../components/form/actions'
import type { TransferMethod } from '@/types/app'
export enum BaseFieldType {
textInput = 'text-input',
@ -50,8 +50,8 @@ export type BaseConfiguration = {
type: BaseFieldType
tooltip?: string // Tooltip for this field
} & NumberConfiguration
& Partial<SelectConfiguration>
& Partial<FileConfiguration>
& Partial<SelectConfiguration>
& Partial<FileConfiguration>
export type BaseFormProps = {
initialData?: Record<string, any>

3
web/app/components/base/form/form-scenarios/base/utils.ts
View File

@ -1,6 +1,7 @@
import type { ZodNumber, ZodSchema, ZodString } from 'zod'
import type { BaseConfiguration } from './types'
import { z } from 'zod'
import { type BaseConfiguration, BaseFieldType } from './types'
import { BaseFieldType } from './types'
export const generateZodSchema = (fields: BaseConfiguration[]) => {
const shape: Record<string, ZodSchema> = {}

18
web/app/components/base/form/form-scenarios/demo/contact-fields.tsx
View File

@ -6,22 +6,22 @@ const ContactFields = withForm({
...demoFormOpts,
render: ({ form }) => {
return (
<div className='my-2'>
<h3 className='title-lg-bold text-text-primary'>Contacts</h3>
<div className='flex flex-col gap-4'>
<div className="my-2">
<h3 className="title-lg-bold text-text-primary">Contacts</h3>
<div className="flex flex-col gap-4">
<form.AppField
name='contact.email'
children={field => <field.TextField label='Email' />}
name="contact.email"
children={field => <field.TextField label="Email" />}
/>
<form.AppField
name='contact.phone'
children={field => <field.TextField label='Phone' />}
name="contact.phone"
children={field => <field.TextField label="Phone" />}
/>
<form.AppField
name='contact.preferredContactMethod'
name="contact.preferredContactMethod"
children={field => (
<field.SelectField
label='Preferred Contact Method'
label="Preferred Contact Method"
options={ContactMethods}
/>
)}

14
web/app/components/base/form/form-scenarios/demo/index.tsx
View File

@ -28,7 +28,7 @@ const DemoForm = () => {
return (
<form
className='flex w-[400px] flex-col gap-4'
className="flex w-[400px] flex-col gap-4"
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
@ -36,21 +36,21 @@ const DemoForm = () => {
}}
>
<form.AppField
name='name'
name="name"
children={field => (
<field.TextField label='Name' />
<field.TextField label="Name" />
)}
/>
<form.AppField
name='surname'
name="surname"
children={field => (
<field.TextField label='Surname' />
<field.TextField label="Surname" />
)}
/>
<form.AppField
name='isAcceptingTerms'
name="isAcceptingTerms"
children={field => (
<field.CheckboxField label='I accept the terms and conditions.' />
<field.CheckboxField label="I accept the terms and conditions." />
)}
/>
{

7
web/app/components/base/form/form-scenarios/input-field/field.tsx
View File

@ -1,7 +1,8 @@
import React from 'react'
import { type InputFieldConfiguration, InputFieldType } from './types'
import { withForm } from '../..'
import type { InputFieldConfiguration } from './types'
import { useStore } from '@tanstack/react-form'
import React from 'react'
import { withForm } from '../..'
import { InputFieldType } from './types'
type InputFieldProps = {
initialData?: Record<string, any>

4
web/app/components/base/form/form-scenarios/input-field/types.ts
View File

@ -35,5 +35,5 @@ export type InputFieldConfiguration = {
tooltip?: string // Tooltip for this field
listeners?: FieldListeners<Record<string, any>, DeepKeys<Record<string, any>>> // Listener for this field
} & NumberConfiguration & Partial<InputTypeSelectConfiguration>
& Partial<NumberSliderConfiguration>
& Partial<SelectConfiguration>
& Partial<NumberSliderConfiguration>
& Partial<SelectConfiguration>

3
web/app/components/base/form/form-scenarios/input-field/utils.ts
View File

@ -1,7 +1,8 @@
import type { ZodSchema, ZodString } from 'zod'
import type { InputFieldConfiguration } from './types'
import { z } from 'zod'
import { type InputFieldConfiguration, InputFieldType } from './types'
import { SupportedFileTypes, TransferMethod } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/schema'
import { InputFieldType } from './types'
export const generateZodSchema = (fields: InputFieldConfiguration[]) => {
const shape: Record<string, ZodSchema> = {}

7
web/app/components/base/form/form-scenarios/node-panel/field.tsx
View File

@ -1,7 +1,8 @@
import React from 'react'
import { type InputFieldConfiguration, InputFieldType } from './types'
import { withForm } from '../..'
import type { InputFieldConfiguration } from './types'
import { useStore } from '@tanstack/react-form'
import React from 'react'
import { withForm } from '../..'
import { InputFieldType } from './types'
type InputFieldProps = {
initialData?: Record<string, any>

4
web/app/components/base/form/hooks/use-check-validated.ts
View File

@ -1,7 +1,7 @@
import { useCallback } from 'react'
import type { AnyFormApi } from '@tanstack/react-form'
import { useToastContext } from '@/app/components/base/toast'
import type { FormSchema } from '@/app/components/base/form/types'
import { useCallback } from 'react'
import { useToastContext } from '@/app/components/base/toast'
export const useCheckValidated = (form: AnyFormApi, FormSchemas: FormSchema[]) => {
const { notify } = useToastContext()

4
web/app/components/base/form/hooks/use-get-form-values.ts
View File

@ -1,11 +1,11 @@
import { useCallback } from 'react'
import type { AnyFormApi } from '@tanstack/react-form'
import { useCheckValidated } from './use-check-validated'
import type {
FormSchema,
GetValuesOptions,
} from '../types'
import { useCallback } from 'react'
import { getTransformedValuesWhenSecretInputPristine } from '../utils'
import { useCheckValidated } from './use-check-validated'
export const useGetFormValues = (form: AnyFormApi, formSchemas: FormSchema[]) => {
const { checkValidated } = useCheckValidated(form, formSchemas)

4
web/app/components/base/form/hooks/use-get-validators.ts
View File

@ -1,10 +1,10 @@
import type { ReactNode } from 'react'
import type { FormSchema } from '../types'
import {
isValidElement,
useCallback,
} from 'react'
import type { ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import type { FormSchema } from '../types'
import { useRenderI18nObject } from '@/hooks/use-i18n'
export const useGetValidators = () => {

15
web/app/components/base/form/index.stories.tsx
View File

@ -1,16 +1,17 @@
import type { Meta, StoryObj } from '@storybook/nextjs'
import { useMemo, useState } from 'react'
import type { FormStoryRender } from '../../../../.storybook/utils/form-story-wrapper'
import type { FormSchema } from './types'
import { useStore } from '@tanstack/react-form'
import { useMemo, useState } from 'react'
import { PreviewMode } from '@/app/components/base/features/types'
import { TransferMethod } from '@/types/app'
import { FormStoryWrapper } from '../../../../.storybook/utils/form-story-wrapper'
import Button from '../button'
import BaseForm from './components/base/base-form'
import ContactFields from './form-scenarios/demo/contact-fields'
import { demoFormOpts } from './form-scenarios/demo/shared-options'
import { ContactMethods, UserSchema } from './form-scenarios/demo/types'
import BaseForm from './components/base/base-form'
import type { FormSchema } from './types'
import { FormTypeEnum } from './types'
import { type FormStoryRender, FormStoryWrapper } from '../../../../.storybook/utils/form-story-wrapper'
import Button from '../button'
import { TransferMethod } from '@/types/app'
import { PreviewMode } from '@/app/components/base/features/types'
const FormStoryHost = () => null

20
web/app/components/base/form/index.tsx
View File

@ -1,18 +1,18 @@
import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
import TextField from './components/field/text'
import NumberInputField from './components/field/number-input'
import CheckboxField from './components/field/checkbox'
import SelectField from './components/field/select'
import CustomSelectField from './components/field/custom-select'
import OptionsField from './components/field/options'
import Actions from './components/form/actions'
import InputTypeSelectField from './components/field/input-type-select'
import FileTypesField from './components/field/file-types'
import UploadMethodField from './components/field/upload-method'
import NumberSliderField from './components/field/number-slider'
import VariableOrConstantInputField from './components/field/variable-selector'
import TextAreaField from './components/field/text-area'
import FileUploaderField from './components/field/file-uploader'
import InputTypeSelectField from './components/field/input-type-select'
import NumberInputField from './components/field/number-input'
import NumberSliderField from './components/field/number-slider'
import OptionsField from './components/field/options'
import SelectField from './components/field/select'
import TextField from './components/field/text'
import TextAreaField from './components/field/text-area'
import UploadMethodField from './components/field/upload-method'
import VariableOrConstantInputField from './components/field/variable-selector'
import Actions from './components/form/actions'
export const { fieldContext, useFieldContext, formContext, useFormContext }
= createFormHookContexts()

8
web/app/components/base/form/types.ts
View File

@ -1,11 +1,11 @@
import type {
ForwardedRef,
ReactNode,
} from 'react'
import type {
AnyFormApi,
FieldValidators,
} from '@tanstack/react-form'
import type {
ForwardedRef,
ReactNode,
} from 'react'
import type { Locale } from '@/i18n-config'
export type TypeWithI18N<T = string> = {