@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/FormEditor.tsx

@@ -174,21 +174,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
   if (loading) {
     return (
-      <div className="p-4 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-4">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 max-w-4xl">
+    <div className="max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
       {/* Header */}
-      <div className="flex items-center gap-3 mb-6">
+      <div className="mb-6 flex items-center gap-3">
         <button
           onClick={() => onNavigate?.('/forms')}
-          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+          className="rounded-lg p-2 transition-colors hover:bg-gray-100"
         >
-          <ArrowLeft className="w-5 h-5 text-gray-600" />
+          <ArrowLeft className="h-5 w-5 text-gray-600" />
         </button>
         <div className="flex-1">
           <h1 className="text-xl font-semibold text-gray-900">
@@ -198,42 +198,42 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         <button
           onClick={handleSave}
           disabled={saving || !name.trim()}
-          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
+          className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
         >
-          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
           {saving ? 'Saving...' : 'Save'}
         </button>
       </div>
 
       {/* Basic info */}
-      <div className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
         <div className="grid gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Form Name</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Form Name</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Contact Form"
-              className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Description</label>
             <input
               type="text"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Brief description of this form"
-              className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Status</label>
             <select
               value={status}
               onChange={(e) => setStatus(e.target.value)}
-              className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             >
               <option value="active">Active</option>
               <option value="inactive">Inactive</option>
@@ -243,16 +243,16 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Fields section */}
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <button
           onClick={() => toggleSection('fields')}
-          className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'fields' ? (
-              <ChevronDown className="w-4 h-4" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="h-4 w-4" />
             )}
             <span className="font-medium text-gray-900">Form Fields</span>
             <span className="text-sm text-gray-500">({fields.length})</span>
@@ -260,20 +260,20 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         </button>
         {expandedSection === 'fields' && (
           <div className="border-t border-gray-200 p-4">
-            <div className="flex flex-wrap gap-2 mb-4">
+            <div className="mb-4 flex flex-wrap gap-2">
               {FIELD_TYPES.map((ft) => (
                 <button
                   key={ft.value}
                   onClick={() => addField(ft.value)}
-                  className="flex items-center gap-1 px-3 py-1.5 text-xs border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                  className="flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs transition-colors hover:bg-gray-50"
                 >
-                  <Plus className="w-3 h-3" /> {ft.label}
+                  <Plus className="h-3 w-3" /> {ft.label}
                 </button>
               ))}
             </div>
 
             {fields.length === 0 ? (
-              <p className="text-sm text-gray-500 text-center py-6">
+              <p className="py-6 text-center text-sm text-gray-500">
                 Click a field type above to add it to your form.
               </p>
             ) : (
@@ -288,19 +288,19 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       const from = Number(e.dataTransfer.getData('text/plain'))
                       moveField(from, index)
                     }}
-                    className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg bg-gray-50 hover:bg-white transition-colors"
+                    className="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3 transition-colors hover:bg-white"
                   >
-                    <GripVertical className="w-4 h-4 text-gray-400 cursor-grab shrink-0" />
+                    <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-gray-400" />
                     <input
                       type="text"
                       value={field.label}
                       onChange={(e) => updateField(field.id, { label: e.target.value })}
-                      className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      className="flex-1 rounded border border-gray-300 px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                     />
-                    <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded shrink-0">
+                    <span className="shrink-0 rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-500">
                       {field.type}
                     </span>
-                    <label className="flex items-center gap-1 text-xs text-gray-600 shrink-0">
+                    <label className="flex shrink-0 items-center gap-1 text-xs text-gray-600">
                       <input
                         type="checkbox"
                         checked={field.required}
@@ -311,9 +311,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     </label>
                     <button
                       onClick={() => removeField(field.id)}
-                      className="p-1 text-red-500 hover:bg-red-50 rounded transition-colors shrink-0"
+                      className="shrink-0 rounded p-1 text-red-500 transition-colors hover:bg-red-50"
                     >
-                      <Trash2 className="w-4 h-4" />
+                      <Trash2 className="h-4 w-4" />
                     </button>
                   </div>
                 ))}
@@ -324,20 +324,20 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Confirmation section */}
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <button
           onClick={() => toggleSection('confirmation')}
-          className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'confirmation' ? (
-              <ChevronDown className="w-4 h-4" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="h-4 w-4" />
             )}
-            <MessageSquare className="w-4 h-4 text-green-600" />
+            <MessageSquare className="h-4 w-4 text-green-600" />
             <span className="font-medium text-gray-900">Confirmation</span>
-            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-500">
               {confirmation.type === 'message' ? 'Show Message' : 'Redirect'}
             </span>
           </div>
@@ -345,12 +345,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         {expandedSection === 'confirmation' && (
           <div className="border-t border-gray-200 p-4">
             <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="mb-2 block text-sm font-medium text-gray-700">
                 After submission
               </label>
               <div className="flex gap-3">
                 <label
-                  className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:bg-gray-50"
                   style={{
                     borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db',
                     backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent',
@@ -364,11 +364,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     onChange={() => setConfirmation((c) => ({ ...c, type: 'message' }))}
                     className="text-blue-600"
                   />
-                  <MessageSquare className="w-4 h-4" />
+                  <MessageSquare className="h-4 w-4" />
                   <span className="text-sm">Show Message</span>
                 </label>
                 <label
-                  className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:bg-gray-50"
                   style={{
                     borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db',
                     backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent',
@@ -382,7 +382,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     onChange={() => setConfirmation((c) => ({ ...c, type: 'redirect' }))}
                     className="text-blue-600"
                   />
-                  <ExternalLink className="w-4 h-4" />
+                  <ExternalLink className="h-4 w-4" />
                   <span className="text-sm">Redirect to Page</span>
                 </label>
               </div>
@@ -390,21 +390,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
             {confirmation.type === 'message' ? (
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="mb-1 block text-sm font-medium text-gray-700">
                   Success Message
                 </label>
                 <textarea
                   value={confirmation.message}
                   onChange={(e) => setConfirmation((c) => ({ ...c, message: e.target.value }))}
                   rows={3}
-                  className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   placeholder="Thank you! Your submission has been received."
                 />
               </div>
             ) : (
               <div className="grid gap-3">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
                     Redirect URL
                   </label>
                   <input
@@ -414,11 +414,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       setConfirmation((c) => ({ ...c, redirectUrl: e.target.value }))
                     }
                     placeholder="https://example.com/thank-you"
-                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
                     Redirect Delay (ms)
                   </label>
                   <input
@@ -429,9 +429,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     }
                     min={0}
                     step={500}
-                    className="w-32 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-32 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
-                  <p className="text-xs text-gray-500 mt-1">0 = instant redirect</p>
+                  <p className="mt-1 text-xs text-gray-500">0 = instant redirect</p>
                 </div>
               </div>
             )}
@@ -440,21 +440,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Analytics section */}
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <button
           onClick={() => toggleSection('analytics')}
-          className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'analytics' ? (
-              <ChevronDown className="w-4 h-4" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="h-4 w-4" />
             )}
-            <BarChart3 className="w-4 h-4 text-purple-600" />
+            <BarChart3 className="h-4 w-4 text-purple-600" />
             <span className="font-medium text-gray-900">GA4 Analytics</span>
             <span
-              className={`text-xs px-2 py-0.5 rounded ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
+              className={`rounded px-2 py-0.5 text-xs ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
             >
               {analytics.enabled ? 'Enabled' : 'Disabled'}
             </span>
@@ -462,15 +462,15 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         </button>
         {expandedSection === 'analytics' && (
           <div className="border-t border-gray-200 p-4">
-            <div className="flex items-center gap-3 mb-4">
-              <label className="relative inline-flex items-center cursor-pointer">
+            <div className="mb-4 flex items-center gap-3">
+              <label className="relative inline-flex cursor-pointer items-center">
                 <input
                   type="checkbox"
                   checked={analytics.enabled}
                   onChange={(e) => setAnalytics((a) => ({ ...a, enabled: e.target.checked }))}
-                  className="sr-only peer"
+                  className="peer sr-only"
                 />
-                <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600" />
+                <div className="peer h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
               </label>
               <span className="text-sm font-medium text-gray-700">
                 Push events to Google Analytics 4
@@ -480,25 +480,25 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             {analytics.enabled && (
               <div className="grid gap-4 pl-12">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
                     GA4 Measurement ID
-                    <span className="text-gray-400 font-normal"> (optional)</span>
+                    <span className="font-normal text-gray-400"> (optional)</span>
                   </label>
                   <input
                     type="text"
                     value={analytics.measurementId}
                     onChange={(e) => setAnalytics((a) => ({ ...a, measurementId: e.target.value }))}
                     placeholder="G-XXXXXXXXXX"
-                    className="w-64 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-64 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
-                  <p className="text-xs text-gray-500 mt-1">
+                  <p className="mt-1 text-xs text-gray-500">
                     Leave blank to use your site's default GA4 tag
                   </p>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="mb-1 block text-sm font-medium text-gray-700">
                       Submit Event Name
                     </label>
                     <input
@@ -507,11 +507,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       onChange={(e) =>
                         setAnalytics((a) => ({ ...a, submitEventName: e.target.value }))
                       }
-                      className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="mb-1 block text-sm font-medium text-gray-700">
                       Start Event Name
                     </label>
                     <input
@@ -520,13 +520,13 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       onChange={(e) =>
                         setAnalytics((a) => ({ ...a, startEventName: e.target.value }))
                       }
-                      className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                     />
                   </div>
                 </div>
 
                 <div className="border-t border-gray-200 pt-4">
-                  <div className="flex items-center gap-3 mb-3">
+                  <div className="mb-3 flex items-center gap-3">
                     <input
                       type="checkbox"
                       id="trackConversion"
@@ -542,9 +542,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   </div>
 
                   {analytics.trackAsConversion && (
-                    <div className="grid grid-cols-2 gap-4 ml-6">
+                    <div className="ml-6 grid grid-cols-2 gap-4">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
                           Conversion Value
                         </label>
                         <input
@@ -555,11 +555,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                           }
                           min={0}
                           step={0.01}
-                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         />
                       </div>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
                           Currency
                         </label>
                         <select
@@ -567,7 +567,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                           onChange={(e) =>
                             setAnalytics((a) => ({ ...a, conversionCurrency: e.target.value }))
                           }
-                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         >
                           <option value="USD">USD</option>
                           <option value="EUR">EUR</option>
@@ -580,12 +580,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   )}
                 </div>
 
-                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
                   <p className="text-xs text-blue-800">
                     <strong>Note:</strong> Your site must have the GA4 snippet or GTM container
                     installed. Actuate pushes events via{' '}
-                    <code className="bg-blue-100 px-1 rounded">gtag()</code> /
-                    <code className="bg-blue-100 px-1 rounded">dataLayer</code> — it does not load
+                    <code className="rounded bg-blue-100 px-1">gtag()</code> /
+                    <code className="rounded bg-blue-100 px-1">dataLayer</code> — it does not load
                     the GA4 script.
                   </p>
                 </div>