{
onChange(options.filter((_, i) => index !== i))
diff --git a/web/app/components/base/checkbox/assets/indeterminate-icon.tsx b/web/app/components/base/checkbox/assets/indeterminate-icon.tsx
new file mode 100644
index 0000000000..56df8db6a4
--- /dev/null
+++ b/web/app/components/base/checkbox/assets/indeterminate-icon.tsx
@@ -0,0 +1,11 @@
+const IndeterminateIcon = () => {
+ return (
+
+ )
+}
+
+export default IndeterminateIcon
diff --git a/web/app/components/base/checkbox/assets/mixed.svg b/web/app/components/base/checkbox/assets/mixed.svg
deleted file mode 100644
index e16b8fc975..0000000000
--- a/web/app/components/base/checkbox/assets/mixed.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/web/app/components/base/checkbox/index.module.css b/web/app/components/base/checkbox/index.module.css
deleted file mode 100644
index d675607b46..0000000000
--- a/web/app/components/base/checkbox/index.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.mixed {
- background: var(--color-components-checkbox-bg) url(./assets/mixed.svg) center center no-repeat;
- background-size: 12px 12px;
- border: none;
-}
-
-.checked.disabled {
- background-color: #d0d5dd;
- border-color: #d0d5dd;
-}
\ No newline at end of file
diff --git a/web/app/components/base/checkbox/index.spec.tsx b/web/app/components/base/checkbox/index.spec.tsx
new file mode 100644
index 0000000000..7ef901aef5
--- /dev/null
+++ b/web/app/components/base/checkbox/index.spec.tsx
@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Checkbox from './index'
+
+describe('Checkbox Component', () => {
+ const mockProps = {
+ id: 'test',
+ }
+
+ it('renders unchecked checkbox by default', () => {
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+ expect(checkbox).toBeInTheDocument()
+ expect(checkbox).not.toHaveClass('bg-components-checkbox-bg')
+ })
+
+ it('renders checked checkbox when checked prop is true', () => {
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+ expect(checkbox).toHaveClass('bg-components-checkbox-bg')
+ expect(screen.getByTestId('check-icon-test')).toBeInTheDocument()
+ })
+
+ it('renders indeterminate state correctly', () => {
+ render(
)
+ expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument()
+ })
+
+ it('handles click events when not disabled', () => {
+ const onCheck = jest.fn()
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+
+ fireEvent.click(checkbox)
+ expect(onCheck).toHaveBeenCalledTimes(1)
+ })
+
+ it('does not handle click events when disabled', () => {
+ const onCheck = jest.fn()
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+
+ fireEvent.click(checkbox)
+ expect(onCheck).not.toHaveBeenCalled()
+ expect(checkbox).toHaveClass('cursor-not-allowed')
+ })
+
+ it('applies custom className when provided', () => {
+ const customClass = 'custom-class'
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+ expect(checkbox).toHaveClass(customClass)
+ })
+
+ it('applies correct styles for disabled checked state', () => {
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+ expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled-checked')
+ expect(checkbox).toHaveClass('cursor-not-allowed')
+ })
+
+ it('applies correct styles for disabled unchecked state', () => {
+ render(
)
+ const checkbox = screen.getByTestId('checkbox-test')
+ expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled')
+ expect(checkbox).toHaveClass('cursor-not-allowed')
+ })
+})
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index b0b0ebca7c..3e47967c62 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -1,48 +1,49 @@
import { RiCheckLine } from '@remixicon/react'
-import s from './index.module.css'
import cn from '@/utils/classnames'
+import IndeterminateIcon from './assets/indeterminate-icon'
type CheckboxProps = {
+ id?: string
checked?: boolean
onCheck?: () => void
className?: string
disabled?: boolean
- mixed?: boolean
+ indeterminate?: boolean
}
-const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
- if (!checked) {
- return (
-
{
- if (disabled)
- return
- onCheck?.()
- }}
- >
- )
- }
+const Checkbox = ({
+ id,
+ checked,
+ onCheck,
+ className,
+ disabled,
+ indeterminate,
+}: CheckboxProps) => {
+ const checkClassName = (checked || indeterminate)
+ ? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
+ : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover'
+ const disabledClassName = (checked || indeterminate)
+ ? 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked'
+ : 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled'
+
return (
{
if (disabled)
return
-
onCheck?.()
}}
+ data-testid={`checkbox-${id}`}
>
-
+ {!checked && indeterminate && }
+ {checked && }
)
}
diff --git a/web/app/components/base/form/components/field/checkbox.tsx b/web/app/components/base/form/components/field/checkbox.tsx
new file mode 100644
index 0000000000..855dbd80fe
--- /dev/null
+++ b/web/app/components/base/form/components/field/checkbox.tsx
@@ -0,0 +1,43 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '../..'
+import Checkbox from '../../../checkbox'
+
+type CheckboxFieldProps = {
+ label: string;
+ labelClassName?: string;
+}
+
+const CheckboxField = ({
+ label,
+ labelClassName,
+}: CheckboxFieldProps) => {
+ const field = useFieldContext
()
+
+ return (
+
+
+ {
+ field.handleChange(!field.state.value)
+ }}
+ />
+
+
+
+
+ field.handleChange(value)}
+ onBlur={field.handleBlur}
+ {...inputProps}
+ />
+
+ )
+}
+
+export default NumberInputField
diff --git a/web/app/components/base/form/components/field/options.tsx b/web/app/components/base/form/components/field/options.tsx
new file mode 100644
index 0000000000..9ff71e50af
--- /dev/null
+++ b/web/app/components/base/form/components/field/options.tsx
@@ -0,0 +1,34 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
+
+type OptionsFieldProps = {
+ label: string;
+ className?: string;
+ labelClassName?: string;
+}
+
+const OptionsField = ({
+ label,
+ className,
+ labelClassName,
+}: OptionsFieldProps) => {
+ const field = useFieldContext()
+
+ return (
+
+
+ field.handleChange(value)}
+ />
+
+ )
+}
+
+export default OptionsField
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
new file mode 100644
index 0000000000..95af3c0116
--- /dev/null
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -0,0 +1,51 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '../..'
+import PureSelect from '../../../select/pure'
+import Label from '../label'
+
+type SelectOption = {
+ value: string
+ label: string
+}
+
+type SelectFieldProps = {
+ label: string
+ options: SelectOption[]
+ isRequired?: boolean
+ showOptional?: boolean
+ tooltip?: string
+ className?: string
+ labelClassName?: string
+}
+
+const SelectField = ({
+ label,
+ options,
+ isRequired,
+ showOptional,
+ tooltip,
+ className,
+ labelClassName,
+}: SelectFieldProps) => {
+ const field = useFieldContext()
+
+ return (
+
+
+
field.handleChange(value)}
+ />
+
+
+ field.handleChange(e.target.value)}
+ onBlur={field.handleBlur}
+ {...inputProps}
+ />
+
+ )
+}
+
+export default TextField
diff --git a/web/app/components/base/form/components/form/submit-button.tsx b/web/app/components/base/form/components/form/submit-button.tsx
new file mode 100644
index 0000000000..494d19b843
--- /dev/null
+++ b/web/app/components/base/form/components/form/submit-button.tsx
@@ -0,0 +1,25 @@
+import { useStore } from '@tanstack/react-form'
+import { useFormContext } from '../..'
+import Button, { type ButtonProps } from '../../../button'
+
+type SubmitButtonProps = Omit
+
+const SubmitButton = ({ ...buttonProps }: SubmitButtonProps) => {
+ const form = useFormContext()
+
+ const [isSubmitting, canSubmit] = useStore(form.store, state => [
+ state.isSubmitting,
+ state.canSubmit,
+ ])
+
+ return (
+