@evershop/evershop 2.1.0 → 2.1.2

package/src/components/common/form/ReactSelectCreatableField.tsx

@@ -1,3 +1,5 @@
+import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldLabel } from '@components/common/ui/Field.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import {
@@ -12,7 +14,7 @@ import CreatableSelect, { CreatableProps } from 'react-select/creatable';
 interface SelectOption {
   value: any;
   label: string;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 interface ReactSelectCreatableFieldProps<T extends FieldValues = FieldValues>
@@ -50,7 +52,11 @@ export function ReactSelectCreatableField<T extends FieldValues = FieldValues>({
   formatCreateLabel = (inputValue: string) => `Create "${inputValue}"`,
   ...selectProps
 }: ReactSelectCreatableFieldProps<T>) {
-  const { control, unregister } = useFormContext<T>();
+  const {
+    control,
+    unregister,
+    formState: { errors }
+  } = useFormContext<T>();
   const fieldId = `field-${name}`;
 
   const [dynamicOptions, setDynamicOptions] =
@@ -72,134 +78,132 @@ export function ReactSelectCreatableField<T extends FieldValues = FieldValues>({
       required: _('${field} is required', { field: label || name })
     })
   };
-
+  const fieldError = getNestedError(name, errors, error);
   return (
-    <div className={`${wrapperClassName} ${className || ''}`}>
-      {label && (
-        <label htmlFor={fieldId}>
-          {label}
-          {required && <span className="required-indicator">*</span>}
-        </label>
-      )}
-
-      <Controller
-        name={name}
-        control={control}
-        rules={validationRules}
-        defaultValue={defaultValue}
-        render={({ field, fieldState }) => {
-          const fieldError = error || fieldState.error?.message;
-
-          const handleCreateOption = (inputValue: string) => {
-            const newOption = {
-              value: inputValue.toLowerCase().replace(/\W/g, ''),
-              label: inputValue
-            };
-            const optionExists = dynamicOptions.some(
-              (option) =>
-                option.value === newOption.value ||
-                option.label === newOption.label
-            );
-
-            if (!optionExists) {
-              setDynamicOptions((prev) => {
-                const updated = [...prev, newOption];
-                return updated;
-              });
-            }
+    <Controller
+      name={name}
+      control={control}
+      rules={validationRules}
+      defaultValue={defaultValue}
+      render={({ field, fieldState }) => {
+        const handleCreateOption = (inputValue: string) => {
+          const newOption = {
+            value: inputValue.toLowerCase().replace(/\W/g, ''),
+            label: inputValue
+          };
+          const optionExists = dynamicOptions.some(
+            (option) =>
+              option.value === newOption.value ||
+              option.label === newOption.label
+          );
 
-            if (onCreateOption) {
-              onCreateOption(inputValue);
+          if (!optionExists) {
+            setDynamicOptions((prev) => {
+              const updated = [...prev, newOption];
+              return updated;
+            });
+          }
+
+          if (onCreateOption) {
+            onCreateOption(inputValue);
+          }
+
+          if (isMulti) {
+            const currentValues = (field.value as any[]) || [];
+            if (!currentValues.includes(newOption.value)) {
+              const newValues = [...currentValues, newOption.value];
+              field.onChange(newValues);
             }
-
-            if (isMulti) {
-              const currentValues = (field.value as any[]) || [];
-              if (!currentValues.includes(newOption.value)) {
-                const newValues = [...currentValues, newOption.value];
-                field.onChange(newValues);
+          } else {
+            field.onChange(newOption.value);
+          }
+        };
+
+        return (
+          <Field
+            data-invalid={fieldError ? 'true' : 'false'}
+            className={wrapperClassName}
+          >
+            {label && (
+              <FieldLabel htmlFor={fieldId}>
+                {label}
+                {required && <span className="text-destructive">*</span>}
+              </FieldLabel>
+            )}
+            <CreatableSelect
+              {...field}
+              {...selectProps}
+              inputId={fieldId}
+              options={dynamicOptions}
+              isMulti={isMulti}
+              formatCreateLabel={formatCreateLabel}
+              onCreateOption={handleCreateOption}
+              value={
+                isMulti
+                  ? dynamicOptions.filter((option) =>
+                      field.value?.includes(option.value)
+                    )
+                  : dynamicOptions.find(
+                      (option) => option.value === field.value
+                    ) || null
               }
-            } else {
-              field.onChange(newOption.value);
-            }
-          };
-
-          return (
-            <div className={fieldError !== undefined ? 'error' : ''}>
-              <CreatableSelect
-                {...field}
-                {...selectProps}
-                inputId={fieldId}
-                options={dynamicOptions}
-                isMulti={isMulti}
-                formatCreateLabel={formatCreateLabel}
-                onCreateOption={handleCreateOption}
-                value={
-                  isMulti
-                    ? dynamicOptions.filter((option) =>
-                        field.value?.includes(option.value)
+              onChange={(selectedOption) => {
+                if (isMulti) {
+                  const values = selectedOption
+                    ? (selectedOption as SelectOption[]).map(
+                        (option) => option.value
                       )
-                    : dynamicOptions.find(
-                        (option) => option.value === field.value
-                      ) || null
+                    : [];
+                  field.onChange(values);
+                } else {
+                  field.onChange(
+                    selectedOption
+                      ? (selectedOption as SelectOption).value
+                      : null
+                  );
                 }
-                onChange={(selectedOption) => {
-                  if (isMulti) {
-                    const values = selectedOption
-                      ? (selectedOption as SelectOption[]).map(
-                          (option) => option.value
-                        )
-                      : [];
-                    field.onChange(values);
-                  } else {
-                    field.onChange(
-                      selectedOption
-                        ? (selectedOption as SelectOption).value
-                        : null
-                    );
-                  }
-                }}
-                classNamePrefix="react-select"
-                styles={{
-                  control: (base, state) => ({
-                    ...base,
-                    minHeight: 'auto',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '0.375rem',
-                    boxShadow: 'none',
-                    transition: 'border-color 0.15s ease-in-out',
-                    '&:hover': {
-                      borderColor: '#d1d5db'
-                    },
-                    ...(state.isFocused && {
-                      borderColor: '#3b82f6',
-                      boxShadow: '0 0 0 1px rgb(59, 130, 246)'
-                    })
-                  }),
-                  input: (base) => ({
-                    ...base,
-                    '& input': {
-                      boxShadow: 'none !important',
-                      outline: 'none !important'
-                    }
+              }}
+              classNamePrefix="react-select"
+              styles={{
+                control: (base, state) => ({
+                  ...base,
+                  minHeight: 'auto',
+                  border: '1px solid #d1d5db',
+                  borderRadius: '0.375rem',
+                  boxShadow: 'none',
+                  transition: 'border-color 0.15s ease-in-out',
+                  '&:hover': {
+                    borderColor: '#d1d5db'
+                  },
+                  ...(state.isFocused && {
+                    borderColor: '#3b82f6',
+                    boxShadow: '0 0 0 1px rgb(59, 130, 246)'
                   })
-                }}
-              />
-
-              {fieldError && (
-                <p id={`${fieldId}-error`} className="field-error">
-                  {fieldError}
-                </p>
-              )}
-
-              {helperText && !fieldError && (
-                <p id={`${fieldId}-helper`} className="field-helper">
-                  {helperText}
-                </p>
-              )}
-            </div>
-          );
-        }}
-      />
-    </div>
+                }),
+                input: (base) => ({
+                  ...base,
+                  '& input': {
+                    boxShadow: 'none !important',
+                    outline: 'none !important'
+                  }
+                })
+              }}
+            />
+
+            {fieldError && (
+              <p id={`${fieldId}-error`} className="field-error">
+                {fieldError}
+              </p>
+            )}
+
+            {helperText && !fieldError && (
+              <p id={`${fieldId}-helper`} className="field-helper">
+                {helperText}
+              </p>
+            )}
+          </Field>
+        );
+      }}
+    />
   );
 }

package/src/components/common/form/ReactSelectField.tsx

@@ -1,4 +1,8 @@
+import { Tooltip } from '@components/common/form/Tooltip.js';
+import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldError, FieldLabel } from '@components/common/ui/Field.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
+import { cn } from '@evershop/evershop/lib/util/cn';
 import React from 'react';
 import {
   Controller,
@@ -43,7 +47,11 @@ export function ReactSelectField<T extends FieldValues = FieldValues>({
   defaultValue,
   ...selectProps
 }: ReactSelectFieldProps<T>) {
-  const { control } = useFormContext<T>();
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext<T>();
+  const fieldError = getNestedError(name, errors, error);
   const fieldId = `field-${name}`;
 
   const validationRules = {
@@ -55,12 +63,19 @@ export function ReactSelectField<T extends FieldValues = FieldValues>({
   };
 
   return (
-    <div className={`${wrapperClassName} ${className || ''}`}>
+    <Field
+      data-invalid={fieldError ? 'true' : 'false'}
+      className={wrapperClassName}
+      id={`field-${name}`}
+    >
       {label && (
-        <label htmlFor={fieldId}>
-          {label}
-          {required && <span className="required-indicator">*</span>}
-        </label>
+        <FieldLabel htmlFor={fieldId}>
+          <>
+            {label}
+            {required && <span className="text-destructive">*</span>}
+            {helperText && <Tooltip content={helperText} position="top" />}
+          </>
+        </FieldLabel>
       )}
 
       <Controller
@@ -68,86 +83,63 @@ export function ReactSelectField<T extends FieldValues = FieldValues>({
         control={control}
         rules={validationRules}
         defaultValue={defaultValue}
-        render={({ field, fieldState }) => {
-          const fieldError = error || fieldState.error?.message;
-          return (
-            <div className={fieldError !== undefined ? 'error' : ''}>
-              <Select
-                {...field}
-                {...selectProps}
-                inputId={fieldId}
-                options={options}
-                isMulti={isMulti}
-                value={
-                  isMulti
-                    ? options.filter((option) =>
-                        (field.value || defaultValue || [])?.includes(
-                          option.value
-                        )
-                      )
-                    : options.find(
-                        (option) =>
-                          option.value === (field.value ?? defaultValue)
-                      ) || null
-                }
-                onChange={(selectedOption) => {
-                  if (isMulti) {
-                    const values = selectedOption
-                      ? (selectedOption as SelectOption[]).map(
-                          (option) => option.value
-                        )
-                      : [];
-                    field.onChange(values);
-                  } else {
-                    field.onChange(
-                      selectedOption
-                        ? (selectedOption as SelectOption).value
-                        : null
-                    );
-                  }
-                }}
-                classNamePrefix="react-select"
-                styles={{
-                  control: (base, state) => ({
-                    ...base,
-                    minHeight: 'auto',
-                    border: '1px solid #d1d5db',
-                    borderRadius: '0.375rem',
-                    boxShadow: 'none',
-                    transition: 'border-color 0.15s ease-in-out',
-                    '&:hover': {
-                      borderColor: '#d1d5db'
-                    },
-                    ...(state.isFocused && {
-                      borderColor: '#3b82f6',
-                      boxShadow: '0 0 0 1px rgb(59, 130, 246)'
-                    })
-                  }),
-                  input: (base) => ({
-                    ...base,
-                    '& input': {
-                      boxShadow: 'none !important',
-                      outline: 'none !important'
-                    }
-                  })
-                }}
-              />
-
-              {fieldError && (
-                <p id={`${fieldId}-error`} className="field-error">
-                  {fieldError}
-                </p>
-              )}
-
-              {helperText && !fieldError && (
-                <p id={`${fieldId}-helper`} className="field-helper">
-                  {helperText}
-                </p>
-              )}
-            </div>
-          );
-        }}
+        render={({ field }) => (
+          <Select
+            {...field}
+            {...selectProps}
+            inputId={fieldId}
+            options={options}
+            isMulti={isMulti}
+            className={cn(className)}
+            value={
+              isMulti
+                ? options.filter((option) =>
+                    (field.value || defaultValue || [])?.includes(option.value)
+                  )
+                : options.find(
+                    (option) => option.value === (field.value ?? defaultValue)
+                  ) || null
+            }
+            onChange={(selectedOption) => {
+              if (isMulti) {
+                const values = selectedOption
+                  ? (selectedOption as SelectOption[]).map(
+                      (option) => option.value
+                    )
+                  : [];
+                field.onChange(values);
+              } else {
+                field.onChange(
+                  selectedOption ? (selectedOption as SelectOption).value : null
+                );
+              }
+            }}
+            classNamePrefix="react-select"
+            aria-invalid={fieldError !== undefined ? 'true' : 'false'}
+            aria-describedby={
+              fieldError !== undefined ? `${fieldId}-error` : undefined
+            }
+            classNames={{
+              control: (state) =>
+                cn(
+                  'min-h-auto border border-input rounded-md shadow-xs transition-[color,box-shadow]',
+                  state.isFocused && 'border-ring ring-[3px] ring-ring/50',
+                  fieldError &&
+                    'border-destructive ring-[3px] ring-destructive/20'
+                ),
+              input: () => 'outline-none shadow-none',
+              menu: () => 'bg-popover border border-input rounded-md shadow-md',
+              option: (state) =>
+                cn(
+                  'px-3 py-2 cursor-pointer',
+                  state.isSelected && 'bg-primary text-primary-foreground',
+                  state.isFocused && !state.isSelected && 'bg-accent'
+                )
+            }}
+          />
+        )}
       />
-    </div>
+      {fieldError && <FieldError>{fieldError}</FieldError>}
+    </Field>
   );
 }

package/src/components/common/form/SelectField.tsx

@@ -1,12 +1,21 @@
 import { Tooltip } from '@components/common/form/Tooltip.js';
 import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Field, FieldError, FieldLabel } from '@components/common/ui/Field.js';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@components/common/ui/Select.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import {
   useFormContext,
   RegisterOptions,
   FieldPath,
-  FieldValues
+  FieldValues,
+  Controller
 } from 'react-hook-form';
 
 interface SelectOption {
@@ -15,8 +24,7 @@ interface SelectOption {
   disabled?: boolean;
 }
 
-interface SelectFieldProps<T extends FieldValues = FieldValues>
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'name'> {
+interface SelectFieldProps<T extends FieldValues = FieldValues> {
   name: FieldPath<T>;
   label?: string;
   error?: string;
@@ -24,9 +32,13 @@ interface SelectFieldProps<T extends FieldValues = FieldValues>
   required?: boolean;
   validation?: RegisterOptions<T>;
   options: SelectOption[];
-  multiple?: boolean;
   placeholder?: string;
   wrapperClassName?: string;
+  className?: string;
+  disabled?: boolean;
+  defaultValue?: string | number;
+  id?: string;
+  onChange?: (value: string | number) => void;
 }
 
 export function SelectField<T extends FieldValues = FieldValues>({
@@ -41,16 +53,17 @@ export function SelectField<T extends FieldValues = FieldValues>({
   wrapperClassName,
   className,
   defaultValue,
-  multiple = false,
-  ...props
+  disabled,
+  id,
+  onChange: onChangeCallback
 }: SelectFieldProps<T>) {
   const {
-    register,
+    control,
     formState: { errors }
   } = useFormContext<T>();
 
   const fieldError = getNestedError(name, errors, error);
-  const fieldId = `field-${name}`;
+  const fieldId = id || `field-${name}`;
 
   const hasDefaultValue =
     defaultValue !== undefined && defaultValue !== null && defaultValue !== '';
@@ -79,54 +92,69 @@ export function SelectField<T extends FieldValues = FieldValues>({
   };
 
   return (
-    <div
-      className={`form-field ${wrapperClassName} ${fieldError ? 'error' : ''}`}
+    <Field
+      data-invalid={fieldError ? 'true' : 'false'}
+      className={wrapperClassName}
     >
       {label && (
-        <label htmlFor={fieldId}>
-          {label}
-          {required && <span className="required-indicator">*</span>}
-          {helperText && <Tooltip content={helperText} position="top" />}
-        </label>
+        <FieldLabel htmlFor={fieldId}>
+          <>
+            {label}
+            {required && <span className="text-destructive">*</span>}
+            {helperText && <Tooltip content={helperText} position="top" />}
+          </>
+        </FieldLabel>
       )}
-
-      <select
-        id={fieldId}
-        {...register(name, validationRules)}
-        className={className}
-        defaultValue={hasDefaultValue ? defaultValue : multiple ? [] : ''}
-        aria-invalid={fieldError !== undefined ? 'true' : 'false'}
-        aria-describedby={
-          fieldError !== undefined
-            ? `${fieldId}-error`
-            : helperText
-            ? `${fieldId}-helper`
-            : undefined
-        }
-        multiple={multiple}
-        {...props}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
+      <Controller
+        name={name}
+        control={control}
+        rules={validationRules}
+        defaultValue={hasDefaultValue ? defaultValue : ('' as any)}
+        render={({ field }) => (
+          <Select
+            value={options.find((o) => o.value === field.value) ?? null}
+            onValueChange={(value) => {
+              const newValue = value?.value === '' ? '' : value?.value;
+              field.onChange(newValue);
+              if (onChangeCallback && value !== null) {
+                onChangeCallback(value.value);
+              }
+            }}
+            disabled={disabled}
           >
-            {option.label}
-          </option>
-        ))}
-      </select>
-
-      {fieldError && (
-        <p id={`${fieldId}-error`} className="field-error">
-          {fieldError}
-        </p>
-      )}
-    </div>
+            <SelectTrigger
+              id={fieldId}
+              className={className}
+              aria-invalid={fieldError !== undefined ? 'true' : 'false'}
+              aria-describedby={
+                fieldError !== undefined ? `${fieldId}-error` : undefined
+              }
+            >
+              <SelectValue>
+                {options.find((o) => String(o.value) === String(field.value))
+                  ?.label || placeholder}
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {placeholder && (
+                <SelectItem value="" disabled>
+                  {placeholder}
+                </SelectItem>
+              )}
+              {options.map((option) => (
+                <SelectItem
+                  key={option.value}
+                  value={option}
+                  disabled={option.disabled}
+                >
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      />
+      {fieldError && <FieldError>{fieldError}</FieldError>}
+    </Field>
   );
 }