create-brainerce-store 1.33.1 → 1.33.2

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.33.1",
+      version: "1.33.2",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -429,6 +429,7 @@
     "sendAnother": "Send another message",
     "thanksTitle": "Thank you!",
     "thanksBody": "Your message has been received. We'll reply by email as soon as possible.",
-    "genericError": "Something went wrong. Please try again."
+    "genericError": "Something went wrong. Please try again.",
+    "fieldRequired": "{label} is required"
   }
 }

package/messages/he.json

@@ -429,6 +429,7 @@
     "sendAnother": "שליחת הודעה נוספת",
     "thanksTitle": "תודה!",
     "thanksBody": "ההודעה התקבלה. נחזור אליך באימייל בהקדם האפשרי.",
-    "genericError": "משהו השתבש. אנא נסה שוב."
+    "genericError": "משהו השתבש. אנא נסה שוב.",
+    "fieldRequired": "השדה {label} הוא חובה"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.33.1",
+  "version": "1.33.2",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/contact/page.tsx

@@ -12,6 +12,7 @@
  *     MULTI_SELECT/CHECKBOX/URL/DATE)
  *   • toggle required, set placeholder/helpText/enumValues/validation
  *   • provide per-locale translations for every label/placeholder/helpText/successMessage
+ *   • set field width (FULL/HALF/THIRD) for multi-column layouts
  *
  * Everything below is generic rendering logic — it adapts automatically to any
  * form shape returned by the API, so **you should not hardcode field keys or
@@ -51,17 +52,36 @@ function isEmpty(v: FieldValue): boolean {
   return v === false;
 }
 
+/** Map field.width → Tailwind col-span utilities (6-column grid). */
+function widthColSpan(width?: string): string {
+  switch (width) {
+    case 'HALF':
+      return 'col-span-6 sm:col-span-3';
+    case 'THIRD':
+      return 'col-span-6 sm:col-span-2';
+    default:
+      return 'col-span-6';
+  }
+}
+
 const inputClass =
   'border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';
 
+const inputErrorClass =
+  'border-red-400 bg-background text-foreground placeholder:text-muted-foreground focus:ring-red-200 focus:border-red-500 h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2';
+
 const textareaClass =
   'border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary w-full rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2';
 
+const textareaErrorClass =
+  'border-red-400 bg-background text-foreground placeholder:text-muted-foreground focus:ring-red-200 focus:border-red-500 w-full rounded border px-3 py-2 text-sm focus:outline-none focus:ring-2';
+
 export default function ContactPage() {
   const t = useTranslations('contact');
   const [schema, setSchema] = useState<ContactFormPublic | null>(null);
   const [schemaError, setSchemaError] = useState<string | null>(null);
   const [values, setValues] = useState<Record<string, FieldValue>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
   const [honeypot, setHoneypot] = useState('');
   const [loading, setLoading] = useState(false);
   const [sent, setSent] = useState(false);
@@ -95,6 +115,14 @@ export default function ContactPage() {
 
   function updateValue(key: string, value: FieldValue) {
     setValues((prev) => ({ ...prev, [key]: value }));
+    // Clear field error on input change
+    if (errors[key]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    }
   }
 
   async function handleSubmit(e: React.FormEvent) {
@@ -106,6 +134,19 @@ export default function ContactPage() {
       return;
     }
 
+    // ── Client-side required-field validation ──
+    const newErrors: Record<string, string> = {};
+    for (const field of schema.fields) {
+      if (field.isRequired && isEmpty(values[field.key] ?? defaultValueFor(field))) {
+        newErrors[field.key] = t('fieldRequired', { label: field.label });
+      }
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return; // block submission — do NOT send to server
+    }
+    setErrors({});
+
     try {
       setLoading(true);
       setSubmitError(null);
@@ -183,7 +224,7 @@ export default function ContactPage() {
           </button>
         </div>
       ) : (
-        <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+        <form onSubmit={handleSubmit} className="space-y-2" noValidate>
           <div
             aria-hidden="true"
             className="pointer-events-none absolute -start-[10000px] h-0 w-0 overflow-hidden"
@@ -199,15 +240,19 @@ export default function ContactPage() {
             />
           </div>
 
-          {schema.fields.map((field) => (
-            <DynamicField
-              key={field.key}
-              field={field}
-              value={values[field.key] ?? defaultValueFor(field)}
-              onChange={(v) => updateValue(field.key, v)}
-              t={t}
-            />
-          ))}
+          {/* 6-column grid — FULL=span 6, HALF=span 3, THIRD=span 2; stacks on mobile */}
+          <div className="grid grid-cols-6 gap-4">
+            {schema.fields.map((field) => (
+              <DynamicField
+                key={field.key}
+                field={field}
+                value={values[field.key] ?? defaultValueFor(field)}
+                error={errors[field.key]}
+                onChange={(v) => updateValue(field.key, v)}
+                t={t}
+              />
+            ))}
+          </div>
 
           <button
             type="submit"
@@ -235,24 +280,34 @@ export default function ContactPage() {
 function DynamicField({
   field,
   value,
+  error,
   onChange,
   t,
 }: {
   field: ContactFormPublicField;
   value: FieldValue;
+  error?: string;
   onChange: (v: FieldValue) => void;
   t: (key: string, values?: Record<string, string>) => string;
 }) {
   const id = `contact-${field.key}`;
+  const hasError = !!error;
   const label = (
     <label htmlFor={id} className="text-foreground mb-1.5 block text-sm font-medium">
       {field.label}
-      {!field.isRequired && <span className="text-muted-foreground ms-1">({t('optional')})</span>}
+      {field.isRequired ? (
+        <span className="text-red-500 ms-0.5" aria-hidden>*</span>
+      ) : (
+        <span className="text-muted-foreground ms-1">({t('optional')})</span>
+      )}
     </label>
   );
   const help = field.helpText ? (
     <p className="text-muted-foreground mt-1 text-xs">{field.helpText}</p>
   ) : null;
+  const errorEl = error ? (
+    <p className="text-red-500 mt-1 text-xs">{error}</p>
+  ) : null;
 
   const maxLength = field.validation?.maxLength;
   const minLength = field.validation?.minLength;
@@ -260,11 +315,13 @@ function DynamicField({
   const max = field.validation?.max;
   const pattern = field.validation?.pattern;
   const strVal = typeof value === 'string' ? value : '';
+  const iClass = hasError ? inputErrorClass : inputClass;
+  const tClass = hasError ? textareaErrorClass : textareaClass;
 
   switch (field.type) {
     case 'TEXTAREA':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <textarea
             id={id}
@@ -275,22 +332,23 @@ function DynamicField({
             placeholder={field.placeholder}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={textareaClass}
+            className={tClass}
           />
           {help}
+          {errorEl}
         </div>
       );
 
     case 'SELECT':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <select
             id={id}
             required={field.isRequired}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           >
             <option value="">—</option>
             {field.enumValues?.map((opt) => (
@@ -300,13 +358,14 @@ function DynamicField({
             ))}
           </select>
           {help}
+          {errorEl}
         </div>
       );
 
     case 'MULTI_SELECT': {
       const arr = Array.isArray(value) ? value : [];
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <div className="space-y-2">
             {field.enumValues?.map((opt) => {
@@ -327,13 +386,14 @@ function DynamicField({
             })}
           </div>
           {help}
+          {errorEl}
         </div>
       );
     }
 
     case 'CHECKBOX':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           <label htmlFor={id} className="flex items-start gap-2 text-sm">
             <input
               id={id}
@@ -346,12 +406,13 @@ function DynamicField({
             <span className="text-foreground">{field.label}</span>
           </label>
           {help}
+          {errorEl}
         </div>
       );
 
     case 'NUMBER':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <input
             id={id}
@@ -362,15 +423,16 @@ function DynamicField({
             placeholder={field.placeholder}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           />
           {help}
+          {errorEl}
         </div>
       );
 
     case 'EMAIL':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <input
             id={id}
@@ -380,15 +442,16 @@ function DynamicField({
             placeholder={field.placeholder}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           />
           {help}
+          {errorEl}
         </div>
       );
 
     case 'PHONE':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <input
             id={id}
@@ -398,15 +461,16 @@ function DynamicField({
             placeholder={field.placeholder}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           />
           {help}
+          {errorEl}
         </div>
       );
 
     case 'URL':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <input
             id={id}
@@ -415,15 +479,16 @@ function DynamicField({
             placeholder={field.placeholder}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           />
           {help}
+          {errorEl}
         </div>
       );
 
     case 'DATE':
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <input
             id={id}
@@ -431,16 +496,17 @@ function DynamicField({
             required={field.isRequired}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           />
           {help}
+          {errorEl}
         </div>
       );
 
     case 'TEXT':
     default:
       return (
-        <div>
+        <div className={widthColSpan(field.width)}>
           {label}
           <input
             id={id}
@@ -452,9 +518,10 @@ function DynamicField({
             placeholder={field.placeholder}
             value={strVal}
             onChange={(e) => onChange(e.target.value)}
-            className={inputClass}
+            className={iClass}
           />
           {help}
+          {errorEl}
         </div>
       );
   }