@evershop/evershop 2.1.0 → 2.1.1

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

@@ -1,5 +1,13 @@
 import { Tooltip } from '@components/common/form/Tooltip.js';
 import { getNestedError } from '@components/common/form/utils/getNestedError.js';
+import { Checkbox } from '@components/common/ui/Checkbox.js';
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+  FieldLegend
+} from '@components/common/ui/Field.js';
+import { Label } from '@components/common/ui/Label.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import {
@@ -68,67 +76,66 @@ export function CheckboxField<T extends FieldValues = FieldValues>({
 
   if (!options || options.length === 0) {
     return (
-      <div
-        className={`form-field ${wrapperClassName} ${
-          fieldError ? 'error' : ''
-        }`}
+      <Field
+        data-invalid={fieldError ? 'true' : 'false'}
+        className={wrapperClassName}
       >
-        <div className={containerClass}>
-          <div className="checkbox-item">
-            <Controller
-              name={name}
-              control={control}
-              rules={validationRules}
-              defaultValue={defaultValue as any}
-              render={({ field }) => (
-                <input
-                  type="checkbox"
-                  id={fieldId}
-                  checked={!!field.value}
-                  onChange={(e) => field.onChange(e.target.checked)}
-                  onBlur={field.onBlur}
-                  disabled={disabled}
-                  className={className}
-                  aria-invalid={fieldError !== undefined ? 'true' : 'false'}
-                  aria-describedby={
-                    fieldError !== undefined
-                      ? `${fieldId}-error`
-                      : helperText
-                      ? `${fieldId}-helper`
-                      : undefined
-                  }
-                  {...props}
-                />
-              )}
-            />
-            {label && (
-              <label htmlFor={fieldId}>
-                {label}
-                {required && <span className="required-indicator">*</span>}
-                {helperText && <Tooltip content={helperText} position="top" />}
-              </label>
+        <div className="flex items-center gap-2">
+          <Controller
+            name={name}
+            control={control}
+            rules={validationRules}
+            defaultValue={defaultValue as any}
+            render={({ field }) => (
+              <Checkbox
+                id={fieldId}
+                checked={!!field.value}
+                onCheckedChange={(checked) => field.onChange(checked)}
+                onBlur={field.onBlur}
+                disabled={disabled}
+                className={className}
+                aria-invalid={fieldError !== undefined ? 'true' : 'false'}
+                aria-describedby={
+                  fieldError !== undefined
+                    ? `${fieldId}-error`
+                    : helperText
+                    ? `${fieldId}-helper`
+                    : undefined
+                }
+              />
             )}
-          </div>
+          />
+          {label && (
+            <FieldLabel
+              htmlFor={fieldId}
+              className="text-sm font-normal cursor-pointer"
+            >
+              {label}
+              {required && <span className="text-destructive">*</span>}
+              {helperText && <Tooltip content={helperText} position="top" />}
+            </FieldLabel>
+          )}
         </div>
 
-        {fieldError && (
-          <p id={`${fieldId}-error`} className="field-error">
-            {fieldError}
-          </p>
-        )}
-      </div>
+        {fieldError && <FieldError>{fieldError}</FieldError>}
+      </Field>
     );
   }
 
   return (
-    <div className={`${wrapperClassName} ${fieldError ? 'error' : ''}`}>
+    <Field
+      data-invalid={fieldError ? 'true' : 'false'}
+      className={wrapperClassName}
+    >
       {label && (
         <fieldset>
-          <legend>
-            {label}
-            {required && <span className="required-indicator">*</span>}
-            {helperText && <Tooltip content={helperText} position="top" />}
-          </legend>
+          <FieldLegend>
+            <>
+              {label}
+              {required && <span className="text-destructive">*</span>}
+              {helperText && <Tooltip content={helperText} position="top" />}
+            </>
+          </FieldLegend>
 
           <Controller
             name={name}
@@ -143,18 +150,16 @@ export function CheckboxField<T extends FieldValues = FieldValues>({
                     : false;
 
                   return (
-                    <div key={option.value} className="checkbox-item">
-                      <input
-                        type="checkbox"
+                    <div key={option.value} className="flex items-center gap-2">
+                      <Checkbox
                         id={`${fieldId}-${index}`}
-                        value={option.value}
                         disabled={disabled || option.disabled}
                         checked={isChecked}
-                        onChange={(e) => {
+                        onCheckedChange={(checked) => {
                           const currentValues = Array.isArray(field.value)
                             ? field.value
                             : [];
-                          if (e.target.checked) {
+                          if (checked) {
                             field.onChange([...currentValues, option.value]);
                           } else {
                             field.onChange(
@@ -170,14 +175,15 @@ export function CheckboxField<T extends FieldValues = FieldValues>({
                         aria-describedby={
                           fieldError ? `${fieldId}-error` : undefined
                         }
-                        {...props}
                       />
-                      <label
+                      <Label
                         htmlFor={`${fieldId}-${index}`}
-                        className={option.disabled ? 'disabled' : ''}
+                        className={`text-sm cursor-pointer ${
+                          option.disabled ? 'opacity-50 cursor-not-allowed' : ''
+                        }`}
                       >
                         {option.label}
-                      </label>
+                      </Label>
                     </div>
                   );
                 })}
@@ -187,11 +193,7 @@ export function CheckboxField<T extends FieldValues = FieldValues>({
         </fieldset>
       )}
 
-      {fieldError && (
-        <p id={`${fieldId}-error`} className="field-error">
-          {fieldError}
-        </p>
-      )}
-    </div>
+      {fieldError && <FieldError>{fieldError}</FieldError>}
+    </Field>
   );
 }

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

@@ -1,12 +1,18 @@
 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 {
+  InputGroup,
+  InputGroupInput
+} from '@components/common/ui/InputGroup.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import {
   useFormContext,
   RegisterOptions,
   FieldPath,
-  FieldValues
+  FieldValues,
+  Controller
 } from 'react-hook-form';
 
 interface DateFieldProps<T extends FieldValues = FieldValues>
@@ -31,23 +37,17 @@ export function DateField<T extends FieldValues = FieldValues>({
   className,
   min,
   max,
+  defaultValue,
   ...props
 }: DateFieldProps<T>) {
   const {
-    register,
-    unregister,
+    control,
     formState: { errors }
   } = useFormContext<T>();
 
   const fieldError = getNestedError(name, errors, error);
   const fieldId = `field-${name}`;
 
-  React.useEffect(() => {
-    return () => {
-      unregister(name);
-    };
-  }, [name, unregister]);
-
   const { valueAsNumber, ...cleanValidation } = validation || {};
   const validationRules = {
     ...cleanValidation,
@@ -74,36 +74,46 @@ export function DateField<T extends FieldValues = FieldValues>({
   };
 
   return (
-    <div className={`form-field ${wrapperClassName}`}>
+    <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>
       )}
 
-      <input
-        id={fieldId}
-        type="date"
-        min={min}
-        max={max}
-        {...register(name, validationRules)}
-        className={`${fieldError !== undefined ? 'error' : ''} ${
-          className || ''
-        }`}
-        aria-invalid={fieldError !== undefined ? 'true' : 'false'}
-        aria-describedby={
-          fieldError !== undefined ? `${fieldId}-error` : undefined
-        }
-        {...props}
+      <Controller
+        name={name}
+        control={control}
+        defaultValue={defaultValue as any}
+        rules={validationRules}
+        render={({ field }) => (
+          <InputGroup>
+            <InputGroupInput
+              {...field}
+              value={field.value ?? ''}
+              id={fieldId}
+              type="date"
+              min={min}
+              max={max}
+              className={className}
+              aria-invalid={fieldError !== undefined ? 'true' : 'false'}
+              aria-describedby={
+                fieldError !== undefined ? `${fieldId}-error` : undefined
+              }
+              {...props}
+            />
+          </InputGroup>
+        )}
       />
 
-      {fieldError && (
-        <p id={`${fieldId}-error`} className="field-error">
-          {fieldError}
-        </p>
-      )}
-    </div>
+      {fieldError && <FieldError>{fieldError}</FieldError>}
+    </Field>
   );
 }

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

@@ -1,12 +1,18 @@
 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 {
+  InputGroup,
+  InputGroupInput
+} from '@components/common/ui/InputGroup.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 import React from 'react';
 import {
   useFormContext,
   RegisterOptions,
   FieldPath,
-  FieldValues
+  FieldValues,
+  Controller
 } from 'react-hook-form';
 
 interface DateTimeLocalFieldProps<T extends FieldValues = FieldValues>
@@ -35,20 +41,13 @@ export function DateTimeLocalField<T extends FieldValues = FieldValues>({
   ...props
 }: DateTimeLocalFieldProps<T>) {
   const {
-    register,
-    unregister,
+    control,
     formState: { errors }
   } = useFormContext<T>();
 
   const fieldError = getNestedError(name, errors, error);
   const fieldId = `field-${name}`;
 
-  React.useEffect(() => {
-    return () => {
-      unregister(name);
-    };
-  }, [name, unregister]);
-
   const { valueAsNumber, valueAsDate, ...cleanValidation } = validation || {};
   const validationRules = {
     ...cleanValidation,
@@ -75,37 +74,46 @@ export function DateTimeLocalField<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>
       )}
 
-      <input
-        id={fieldId}
-        type="datetime-local"
-        min={min}
-        max={max}
-        step={step}
-        {...register(name, validationRules)}
-        className={className}
-        aria-invalid={fieldError !== undefined ? 'true' : 'false'}
-        aria-describedby={
-          fieldError !== undefined ? `${fieldId}-error` : undefined
-        }
-        {...props}
+      <Controller
+        name={name}
+        control={control}
+        rules={validationRules}
+        render={({ field }) => (
+          <InputGroup>
+            <InputGroupInput
+              {...field}
+              value={field.value ?? ''}
+              id={fieldId}
+              type="datetime-local"
+              min={min}
+              max={max}
+              step={step}
+              className={className}
+              aria-invalid={fieldError !== undefined ? 'true' : 'false'}
+              aria-describedby={
+                fieldError !== undefined ? `${fieldId}-error` : undefined
+              }
+              {...props}
+            />
+          </InputGroup>
+        )}
       />
 
-      {fieldError && (
-        <p id={`${fieldId}-error`} className="field-error">
-          {fieldError}
-        </p>
-      )}
-    </div>
+      {fieldError && <FieldError>{fieldError}</FieldError>}
+    </Field>
   );
 }

package/src/components/common/form/Editor.scss

@@ -7,12 +7,18 @@ body .codex-editor {
     background-color: #fff;
   }
 
+  .row__container {
+    &:hover,
+    &:focus-within {
+      z-index: 100 !important;
+    }
+  }
+
   .drag__icon {
     cursor: move;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 8px;
     border-radius: 4px;
 
     &:hover {
@@ -25,10 +31,6 @@ body .codex-editor {
   }
 }
 
-#rows > * {
-  margin-top: 10px;
-}
-
 .item {
   padding: 10px;
   background: var(--divider);
@@ -46,4 +48,23 @@ body .codex-editor {
 
 .ce-rawtool__textarea {
   z-index: 0;
+  min-height: 200px;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  resize: vertical;
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.ce-rawtool {
+  margin: 0.5em 0;
 }

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

@@ -1,7 +1,9 @@
 import { FileBrowser } from '@components/admin/FileBrowser.js';
 import { getColumnClasses } from '@components/common/form/editor/GetColumnClasses.js';
 import { getRowClasses } from '@components/common/form/editor/GetRowClasses.js';
+import { RawToolWrapper } from '@components/common/form/editor/RawToolWrapper.js';
 import { RowTemplates } from '@components/common/form/editor/RowTemplates.js';
+import { Field, FieldLabel } from '@components/common/ui/Field.js';
 import {
   DndContext,
   closestCenter,
@@ -17,7 +19,7 @@ import {
   useSortable,
   verticalListSortingStrategy
 } from '@dnd-kit/sortable';
-import { XCircleIcon } from '@heroicons/react/24/outline';
+import { CircleX } from 'lucide-react';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 import { v4 as uuidv4 } from 'uuid';
@@ -48,10 +50,11 @@ async function loadEditorJSQuote(): Promise<any> {
   return Quote;
 }
 
-async function loadEditorJSRaw(): Promise<any> {
-  const { default: RawTool } = await import('@editorjs/raw');
-  return RawTool;
-}
+// Using custom RawToolWrapper instead to fix backspace issues
+// async function loadEditorJSRaw(): Promise<any> {
+//   const { default: RawTool } = await import('@editorjs/raw');
+//   return RawTool;
+// }
 
 const SortableRow: React.FC<{
   row: Row;
@@ -73,18 +76,17 @@ const SortableRow: React.FC<{
     transform: transform ? `translateY(${transform.y}px)` : undefined,
     transition,
     opacity: isDragging ? 0.5 : 1,
-    position: 'relative',
-    zIndex: isDragging ? 1 : 0
+    position: 'relative'
   } as React.CSSProperties;
 
   return (
     <div
-      className="border row__container mt-5"
+      className="border border-border row__container mt-3 first:mt-0 rounded-md"
       id={row.id}
       ref={setNodeRef}
       style={style}
     >
-      <div className="config p-3 flex justify-between bg-[#cccccc] items-center">
+      <div className="config p-3 flex justify-between bg-muted items-center">
         <div className="drag__icon cursor-move" {...attributes} {...listeners}>
           <svg
             viewBox="0 0 24 24"
@@ -110,7 +112,7 @@ const SortableRow: React.FC<{
               removeRow(row.id);
             }}
           >
-            <XCircleIcon color="#d72c0d" width={20} height={20} />
+            <CircleX width={20} height={20} />
           </a>
         </div>
       </div>
@@ -198,7 +200,7 @@ export const Editor: React.FC<EditorProps> = ({ name, value = [], label }) => {
       const Header = await loadEditorJSHeader();
       const List = await loadEditorJSList();
       const Quote = await loadEditorJSQuote();
-      const RawTool = await loadEditorJSRaw();
+      // Using RawToolWrapper instead of loading from @editorjs/raw
       setValue(name, rows);
       rows.forEach((row) => {
         row.columns.forEach((column) => {
@@ -211,7 +213,10 @@ export const Editor: React.FC<EditorProps> = ({ name, value = [], label }) => {
               tools: {
                 header: Header,
                 list: List,
-                raw: RawTool,
+                raw: {
+                  class: RawToolWrapper,
+                  inlineToolbar: false
+                },
                 quote: Quote,
                 image: {
                   class: ImageTool,
@@ -266,8 +271,8 @@ export const Editor: React.FC<EditorProps> = ({ name, value = [], label }) => {
   };
 
   return (
-    <div className="editor form-field-container">
-      <label htmlFor="description mt-4">{label}</label>
+    <Field className="editor form-field-container">
+      <FieldLabel htmlFor="description mt-4">{label}</FieldLabel>
       <div className="prose prose-xl max-w-none">
         <DndContext
           sensors={sensors}
@@ -319,6 +324,6 @@ export const Editor: React.FC<EditorProps> = ({ name, value = [], label }) => {
           isMultiple={false}
         />
       )}
-    </div>
+    </Field>
   );
 };