create-brainerce-store 1.51.0 → 1.52.0

package/templates/nextjs/base/src/ui/product/customization-fields.tsx

@@ -1,445 +1,457 @@
-'use client';
-
-import { useState } from 'react';
-import type { ProductCustomizationField } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import type { CustomizationValues } from '@/core/lib/product-options';
-
-// The pure validation logic lives in core (zero markup) so that
-// `core/hooks/use-product-page` never imports from `ui/`. Re-exported here
-// for backward compatibility with existing imports.
-export { validateCustomization } from '@/core/lib/product-options';
-export type { CustomizationValues } from '@/core/lib/product-options';
-
-interface CustomizationFieldsProps {
-  fields: ProductCustomizationField[];
-  values: CustomizationValues;
-  onChange: (values: CustomizationValues) => void;
-  errors?: Record<string, string>;
-}
-
-export function CustomizationFields({
-  fields,
-  values,
-  onChange,
-  errors = {},
-}: CustomizationFieldsProps) {
-  const t = useTranslations('customization');
-
-  if (fields.length === 0) return null;
-
-  const sorted = [...fields].sort((a, b) => a.position - b.position);
-
-  const setValue = (key: string, value: unknown) => {
-    onChange({ ...values, [key]: value });
-  };
-
-  return (
-    <div className="border-border space-y-4 border-t pt-4">
-      <h2 className="text-foreground text-lg font-semibold">{t('title')}</h2>
-      <div className="space-y-4">
-        {sorted.map((field) => (
-          <CustomizationFieldRow
-            key={field.definitionId}
-            field={field}
-            value={values[field.key]}
-            error={errors[field.key]}
-            onChange={(v) => setValue(field.key, v)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface RowProps {
-  field: ProductCustomizationField;
-  value: unknown;
-  error?: string;
-  onChange: (value: unknown) => void;
-}
-
-function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
-  const t = useTranslations('customization');
-  const labelText = (
-    <span className="text-foreground mb-1.5 block text-sm font-medium">
-      {field.name}
-      {field.required && <span className="text-destructive ms-1">*</span>}
-    </span>
-  );
-
-  const help = field.description ? (
-    <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
-  ) : null;
-
-  const errorHint = error ? <p className="text-destructive mt-1 text-xs">{error}</p> : null;
-
-  const inputBase =
-    'border-border bg-background focus:border-primary w-full rounded border px-3 py-2 text-sm outline-none focus:ring-1';
-
-  switch (field.type) {
-    case 'TEXTAREA':
-      return (
-        <div>
-          {labelText}
-          <textarea
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value)}
-            minLength={field.minLength ?? undefined}
-            maxLength={field.maxLength ?? undefined}
-            required={field.required}
-            rows={3}
-            className={cn(inputBase, 'resize-y')}
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    case 'NUMBER':
-      return (
-        <div>
-          {labelText}
-          <input
-            type="number"
-            value={typeof value === 'number' ? value : ''}
-            onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
-            min={field.minValue ?? undefined}
-            max={field.maxValue ?? undefined}
-            required={field.required}
-            className={inputBase}
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    case 'BOOLEAN':
-      return (
-        <div>
-          <label className="inline-flex items-center gap-2">
-            <input
-              type="checkbox"
-              checked={value === true}
-              onChange={(e) => onChange(e.target.checked)}
-              className="h-4 w-4"
-            />
-            <span className="text-foreground text-sm font-medium">
-              {field.name}
-              {field.required && <span className="text-destructive ms-1">*</span>}
-            </span>
-          </label>
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    case 'DATE':
-      return (
-        <div>
-          {labelText}
-          <input
-            type="date"
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value)}
-            required={field.required}
-            className={inputBase}
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    case 'DATETIME':
-      return (
-        <div>
-          {labelText}
-          <input
-            type="datetime-local"
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value)}
-            required={field.required}
-            className={inputBase}
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    case 'COLOR':
-      return (
-        <div>
-          {labelText}
-          <input
-            type="color"
-            value={typeof value === 'string' && value ? value : '#000000'}
-            onChange={(e) => onChange(e.target.value)}
-            required={field.required}
-            className="border-border h-10 w-20 rounded border p-1"
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    case 'SELECT': {
-      const options = field.enumValues ?? [];
-      return (
-        <div>
-          {labelText}
-          <select
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value || undefined)}
-            required={field.required}
-            className={inputBase}
-          >
-            <option value="">{t('selectPlaceholder')}</option>
-            {options.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label || opt.value}
-              </option>
-            ))}
-          </select>
-          {help}
-          {errorHint}
-        </div>
-      );
-    }
-
-    case 'MULTI_SELECT': {
-      const options = field.enumValues ?? [];
-      const current = Array.isArray(value) ? (value as string[]) : [];
-      const toggle = (opt: string) => {
-        onChange(current.includes(opt) ? current.filter((v) => v !== opt) : [...current, opt]);
-      };
-      return (
-        <div>
-          {labelText}
-          <div className="space-y-1.5">
-            {options.map((opt) => (
-              <label key={opt.value} className="me-4 inline-flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  checked={current.includes(opt.value)}
-                  onChange={() => toggle(opt.value)}
-                  className="h-4 w-4"
-                />
-                <span className="text-foreground text-sm">{opt.label || opt.value}</span>
-              </label>
-            ))}
-          </div>
-          {help}
-          {errorHint}
-        </div>
-      );
-    }
-
-    case 'IMAGE':
-      return (
-        <SingleImageField
-          field={field}
-          value={typeof value === 'string' ? value : undefined}
-          onChange={onChange}
-          labelText={labelText}
-          help={help}
-          errorHint={errorHint}
-        />
-      );
-
-    case 'GALLERY':
-      return (
-        <GalleryField
-          field={field}
-          value={Array.isArray(value) ? (value as string[]) : []}
-          onChange={onChange}
-          labelText={labelText}
-          help={help}
-          errorHint={errorHint}
-        />
-      );
-
-    case 'URL':
-      return (
-        <div>
-          {labelText}
-          <input
-            type="url"
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value)}
-            required={field.required}
-            className={inputBase}
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-
-    default:
-      return (
-        <div>
-          {labelText}
-          <input
-            type="text"
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value)}
-            minLength={field.minLength ?? undefined}
-            maxLength={field.maxLength ?? undefined}
-            required={field.required}
-            className={inputBase}
-          />
-          {help}
-          {errorHint}
-        </div>
-      );
-  }
-}
-
-interface FileFieldProps {
-  field: ProductCustomizationField;
-  labelText: React.ReactNode;
-  help: React.ReactNode;
-  errorHint: React.ReactNode;
-  onChange: (value: unknown) => void;
-}
-
-function SingleImageField({
-  field,
-  value,
-  onChange,
-  labelText,
-  help,
-  errorHint,
-}: FileFieldProps & { value?: string }) {
-  const t = useTranslations('customization');
-  const [uploading, setUploading] = useState(false);
-  const [uploadError, setUploadError] = useState<string | null>(null);
-
-  async function handleFile(file: File | null) {
-    if (!file) return;
-    setUploading(true);
-    setUploadError(null);
-    try {
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      const result = await client.uploadCustomizationFile(file);
-      onChange(result.url);
-    } catch (err) {
-      console.error('Upload failed', err);
-      setUploadError(t('uploadFailed'));
-    } finally {
-      setUploading(false);
-    }
-  }
-
-  return (
-    <div>
-      {labelText}
-      <input
-        type="file"
-        accept="image/*"
-        onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
-        disabled={uploading}
-        required={field.required && !value}
-        className="text-foreground text-sm"
-      />
-      {uploading && (
-        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
-          <LoadingSpinner size="sm" />
-          {t('uploading')}
-        </span>
-      )}
-      {value && !uploading && (
-        <div className="mt-2">
-          <img src={value} alt="" className="border-border h-20 w-20 rounded border object-cover" />
-        </div>
-      )}
-      {uploadError && <p className="text-destructive mt-1 text-xs">{uploadError}</p>}
-      {help}
-      {errorHint}
-    </div>
-  );
-}
-
-function GalleryField({
-  field,
-  value,
-  onChange,
-  labelText,
-  help,
-  errorHint,
-}: FileFieldProps & { value: string[] }) {
-  const t = useTranslations('customization');
-  const [uploading, setUploading] = useState(false);
-  const [uploadError, setUploadError] = useState<string | null>(null);
-
-  async function handleFiles(fileList: FileList | null) {
-    if (!fileList || fileList.length === 0) return;
-    setUploading(true);
-    setUploadError(null);
-    try {
-      const { getClient } = await import('@/core/lib/brainerce');
-      const client = getClient();
-      const newUrls: string[] = [];
-      for (const file of Array.from(fileList)) {
-        const result = await client.uploadCustomizationFile(file);
-        newUrls.push(result.url);
-      }
-      onChange([...value, ...newUrls]);
-    } catch (err) {
-      console.error('Upload failed', err);
-      setUploadError(t('uploadFailed'));
-    } finally {
-      setUploading(false);
-    }
-  }
-
-  function removeAt(idx: number) {
-    onChange(value.filter((_, i) => i !== idx));
-  }
-
-  return (
-    <div>
-      {labelText}
-      <input
-        type="file"
-        accept="image/*"
-        multiple
-        onChange={(e) => handleFiles(e.target.files)}
-        disabled={uploading}
-        className="text-foreground text-sm"
-      />
-      {uploading && (
-        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
-          <LoadingSpinner size="sm" />
-          {t('uploading')}
-        </span>
-      )}
-      {value.length > 0 && (
-        <div className="mt-2 flex flex-wrap gap-2">
-          {value.map((url, idx) => (
-            <div key={`${url}-${idx}`} className="relative">
-              <img
-                src={url}
-                alt=""
-                className="border-border h-16 w-16 rounded border object-cover"
-              />
-              <button
-                type="button"
-                onClick={() => removeAt(idx)}
-                aria-label={t('removeImage')}
-                className="bg-destructive text-destructive-foreground absolute -end-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-xs"
-              >
-                ×
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-      {uploadError && <p className="text-destructive mt-1 text-xs">{uploadError}</p>}
-      {help}
-      {errorHint}
-    </div>
-  );
+'use client';
+
+import { useState } from 'react';
+import type { ProductCustomizationField } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import type { CustomizationValues } from '@/core/lib/product-options';
+
+// The pure validation logic lives in core (zero markup) so that
+// `core/hooks/use-product-page` never imports from `ui/`. Re-exported here
+// for backward compatibility with existing imports.
+export { validateCustomization } from '@/core/lib/product-options';
+export type { CustomizationValues } from '@/core/lib/product-options';
+
+interface CustomizationFieldsProps {
+  fields: ProductCustomizationField[];
+  values: CustomizationValues;
+  onChange: (values: CustomizationValues) => void;
+  errors?: Record<string, string>;
+}
+
+export function CustomizationFields({
+  fields,
+  values,
+  onChange,
+  errors = {},
+}: CustomizationFieldsProps) {
+  const t = useTranslations('customization');
+
+  if (fields.length === 0) return null;
+
+  const sorted = [...fields].sort((a, b) => a.position - b.position);
+
+  const setValue = (key: string, value: unknown) => {
+    onChange({ ...values, [key]: value });
+  };
+
+  return (
+    <div className="border-border space-y-4 border-t pt-4">
+      <h2 className="text-foreground text-lg font-semibold">{t('title')}</h2>
+      <div className="space-y-4">
+        {sorted.map((field) => (
+          <CustomizationFieldRow
+            key={field.definitionId}
+            field={field}
+            value={values[field.key]}
+            error={errors[field.key]}
+            onChange={(v) => setValue(field.key, v)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface RowProps {
+  field: ProductCustomizationField;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+/** Radix Select items can't carry an empty-string value, so "no choice"
+ *  round-trips through this sentinel and is written back as undefined. */
+const NONE = '__none__';
+
+function CustomizationFieldRow({ field, value, error, onChange }: RowProps) {
+  const t = useTranslations('customization');
+  const labelText = (
+    <Label className="text-foreground mb-1.5 block text-sm font-medium">
+      {field.name}
+      {field.required && <span className="text-destructive ms-1">*</span>}
+    </Label>
+  );
+
+  const help = field.description ? (
+    <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
+  ) : null;
+
+  const errorHint = error ? <p className="text-destructive mt-1 text-xs">{error}</p> : null;
+
+  switch (field.type) {
+    case 'TEXTAREA':
+      return (
+        <div>
+          {labelText}
+          <Textarea
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value)}
+            minLength={field.minLength ?? undefined}
+            maxLength={field.maxLength ?? undefined}
+            required={field.required}
+            rows={3}
+            className="rounded"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'NUMBER':
+      return (
+        <div>
+          {labelText}
+          <Input
+            type="number"
+            value={typeof value === 'number' ? value : ''}
+            onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+            min={field.minValue ?? undefined}
+            max={field.maxValue ?? undefined}
+            required={field.required}
+            className="rounded"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'BOOLEAN':
+      return (
+        <div>
+          <Label className="inline-flex items-center gap-2">
+            <Checkbox
+              checked={value === true}
+              onCheckedChange={(checked) => onChange(checked === true)}
+            />
+            <span className="text-foreground text-sm font-medium">
+              {field.name}
+              {field.required && <span className="text-destructive ms-1">*</span>}
+            </span>
+          </Label>
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'DATE':
+      return (
+        <div>
+          {labelText}
+          <Input
+            type="date"
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value)}
+            required={field.required}
+            className="rounded"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'DATETIME':
+      return (
+        <div>
+          {labelText}
+          <Input
+            type="datetime-local"
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value)}
+            required={field.required}
+            className="rounded"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'COLOR':
+      return (
+        <div>
+          {labelText}
+          <Input
+            type="color"
+            value={typeof value === 'string' && value ? value : '#000000'}
+            onChange={(e) => onChange(e.target.value)}
+            required={field.required}
+            className="h-10 w-20 rounded p-1"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    case 'SELECT': {
+      const options = field.enumValues ?? [];
+      return (
+        <div>
+          {labelText}
+          <Select
+            value={typeof value === 'string' && value ? value : NONE}
+            onValueChange={(v) => onChange(v === NONE ? undefined : v)}
+          >
+            <SelectTrigger className="rounded" aria-label={field.name}>
+              <SelectValue placeholder={t('selectPlaceholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={NONE}>{t('selectPlaceholder')}</SelectItem>
+              {options.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label || opt.value}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {help}
+          {errorHint}
+        </div>
+      );
+    }
+
+    case 'MULTI_SELECT': {
+      const options = field.enumValues ?? [];
+      const current = Array.isArray(value) ? (value as string[]) : [];
+      const toggle = (opt: string) => {
+        onChange(current.includes(opt) ? current.filter((v) => v !== opt) : [...current, opt]);
+      };
+      return (
+        <div>
+          {labelText}
+          <div className="space-y-1.5">
+            {options.map((opt) => (
+              <Label key={opt.value} className="me-4 inline-flex items-center gap-2">
+                <Checkbox
+                  checked={current.includes(opt.value)}
+                  onCheckedChange={() => toggle(opt.value)}
+                />
+                <span className="text-foreground text-sm font-normal">
+                  {opt.label || opt.value}
+                </span>
+              </Label>
+            ))}
+          </div>
+          {help}
+          {errorHint}
+        </div>
+      );
+    }
+
+    case 'IMAGE':
+      return (
+        <SingleImageField
+          field={field}
+          value={typeof value === 'string' ? value : undefined}
+          onChange={onChange}
+          labelText={labelText}
+          help={help}
+          errorHint={errorHint}
+        />
+      );
+
+    case 'GALLERY':
+      return (
+        <GalleryField
+          field={field}
+          value={Array.isArray(value) ? (value as string[]) : []}
+          onChange={onChange}
+          labelText={labelText}
+          help={help}
+          errorHint={errorHint}
+        />
+      );
+
+    case 'URL':
+      return (
+        <div>
+          {labelText}
+          <Input
+            type="url"
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value)}
+            required={field.required}
+            className="rounded"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+
+    default:
+      return (
+        <div>
+          {labelText}
+          <Input
+            type="text"
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value)}
+            minLength={field.minLength ?? undefined}
+            maxLength={field.maxLength ?? undefined}
+            required={field.required}
+            className="rounded"
+          />
+          {help}
+          {errorHint}
+        </div>
+      );
+  }
+}
+
+interface FileFieldProps {
+  field: ProductCustomizationField;
+  labelText: React.ReactNode;
+  help: React.ReactNode;
+  errorHint: React.ReactNode;
+  onChange: (value: unknown) => void;
+}
+
+function SingleImageField({
+  field,
+  value,
+  onChange,
+  labelText,
+  help,
+  errorHint,
+}: FileFieldProps & { value?: string }) {
+  const t = useTranslations('customization');
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  async function handleFile(file: File | null) {
+    if (!file) return;
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      const result = await client.uploadCustomizationFile(file);
+      onChange(result.url);
+    } catch (err) {
+      console.error('Upload failed', err);
+      setUploadError(t('uploadFailed'));
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return (
+    <div>
+      {labelText}
+      <input
+        type="file"
+        accept="image/*"
+        onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
+        disabled={uploading}
+        required={field.required && !value}
+        className="text-foreground text-sm"
+      />
+      {uploading && (
+        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
+          <LoadingSpinner size="sm" />
+          {t('uploading')}
+        </span>
+      )}
+      {value && !uploading && (
+        <div className="mt-2">
+          <img src={value} alt="" className="border-border h-20 w-20 rounded border object-cover" />
+        </div>
+      )}
+      {uploadError && <p className="text-destructive mt-1 text-xs">{uploadError}</p>}
+      {help}
+      {errorHint}
+    </div>
+  );
+}
+
+function GalleryField({
+  field,
+  value,
+  onChange,
+  labelText,
+  help,
+  errorHint,
+}: FileFieldProps & { value: string[] }) {
+  const t = useTranslations('customization');
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  async function handleFiles(fileList: FileList | null) {
+    if (!fileList || fileList.length === 0) return;
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      const newUrls: string[] = [];
+      for (const file of Array.from(fileList)) {
+        const result = await client.uploadCustomizationFile(file);
+        newUrls.push(result.url);
+      }
+      onChange([...value, ...newUrls]);
+    } catch (err) {
+      console.error('Upload failed', err);
+      setUploadError(t('uploadFailed'));
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function removeAt(idx: number) {
+    onChange(value.filter((_, i) => i !== idx));
+  }
+
+  return (
+    <div>
+      {labelText}
+      <input
+        type="file"
+        accept="image/*"
+        multiple
+        onChange={(e) => handleFiles(e.target.files)}
+        disabled={uploading}
+        className="text-foreground text-sm"
+      />
+      {uploading && (
+        <span className="text-muted-foreground mt-2 inline-flex items-center gap-2 text-xs">
+          <LoadingSpinner size="sm" />
+          {t('uploading')}
+        </span>
+      )}
+      {value.length > 0 && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {value.map((url, idx) => (
+            <div key={`${url}-${idx}`} className="relative">
+              <img
+                src={url}
+                alt=""
+                className="border-border h-16 w-16 rounded border object-cover"
+              />
+              <button
+                type="button"
+                onClick={() => removeAt(idx)}
+                aria-label={t('removeImage')}
+                className="bg-destructive text-destructive-foreground absolute -end-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full text-xs"
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      {uploadError && <p className="text-destructive mt-1 text-xs">{uploadError}</p>}
+      {help}
+      {errorHint}
+    </div>
+  );
 }