@wix/vibe-forms-app-plugin 0.13.0 → 0.15.0

package/dist/index.cjs

@@ -146974,7 +146974,7 @@ var import_adm_zip = __toESM(require_adm_zip());
 // src/constants.ts
 var VERTICAL_NAME = "forms-app";
 var FORMS_APP_DEF_ID = "225dd912-7dea-4738-8688-4b8c6955ffc2";
-var PLUGIN_FILES_ZIP_URL = "https://static.parastorage.com/services/vibe-forms-plugin-files/0.12.0/forms-plugin-files-files.zip";
+var PLUGIN_FILES_ZIP_URL = "https://static.parastorage.com/services/vibe-forms-plugin-files/0.15.0/forms-plugin-files-files.zip";
 
 // src/wix-apis.ts
 var isErrorWithRequestId = (error) => {
@@ -147306,10 +147306,6 @@ var installFormsApp = async (env) => {
   await installWixApp(env, FORMS_APP_DEF_ID);
   console.log("[forms-app-plugin-install] Forms App installation completed");
 };
-var generateMockData = async (env) => {
-  console.log(`[${VERTICAL_NAME}-plugin-generateData] Generating mock data...`);
-  return MOCK_SCHEMA;
-};
 var unzipAndMergePluginFiles = async (env, zipUrl) => {
   console.log(
     `[${VERTICAL_NAME}-plugin-install] Unzipping plugin files from dependency...`
@@ -147359,18 +147355,13 @@ import {
   RouterProvider,
   Navigate,
 } from 'react-router-dom';
-import { FormAppPage } from './forms/FormAppPage';
+import { FormAppPage, formAppPageLoader } from './forms/FormAppPage';
 
 const router = createBrowserRouter([
   {
-    path: '/',
-    element: <Navigate to="/form" />,
-    children: [
-      {
-        path: '/form',
-        element: <FormAppPage />,
-      },
-    ],
+    path: '/forms/:formId',
+    element: <FormAppPage />,
+    loader: formAppPageLoader,
   },
 ]);
   `;
@@ -147394,17 +147385,21 @@ ${getRouterFileContent()}
 
 ## FormAppPage Usage
 
-The FormAppPage is ALREADY IMPLEMENTED and does not accept any props - just import and use it!
-
-**Import Path:** Always use \`@/components/forms/FormAppPage\` - this is the correct path to the existing FormAppPage.
+The FormAppPage is ALREADY IMPLEMENTED and uses React Router's loader pattern for data fetching with slug-based routing.
 
+**Required Imports:**
 \`\`\`tsx
-// FormAppPage usage - no props needed
-<FormAppPage />
+import { FormAppPage, formAppPageLoader } from '@/components/forms/FormAppPage';
 \`\`\`
 
-**DO NOT IMPLEMENT FormAppPage - IT ALREADY EXISTS!**
-
+**Router Configuration:**
+\`\`\tsx
+{
+  path: '/forms/:formId',
+  element: <FormAppPage />,
+  loader: formAppPageLoader,
+}
+\`\`\`
 
 
 # SECOND TASK: FORMS CODE CHANGES:
@@ -147429,7 +147424,6 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 - Custom form submission handlers
 
 ### What is FORBIDDEN:
-- **NEVER implement FormAppPage** - it already exists! Just import it from '@/components/forms/FormAppPage'
 - **NEVER edit any files** in <code>src/components/forms/</code> directory
 - **NEVER modify form fields code** - use all form components exactly as they are
 - **NEVER change form functionality** - all form logic is already implemented
@@ -147437,22 +147431,25 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 
 ### ✅ ALLOWED: Only Use These Specific Components
 **ONLY use these pre-built form components:**
-- \`FormAppPage\` - Main form page component
-- \`FormAppFields\` - Form fields component  
-- \`FormAppForm\` - Form wrapper component
+- \`FormAppPage\` - Main form page component with loader
+- \`formAppPageLoader\` - Data loader for form configuration
+- \`FormAppFields\` - Form fields component with FIELD_MAP
+- \`FormAppForm\` - Form wrapper component with Wix headless forms
+- Individual field components: \`TextInput\`, \`TextArea\`, \`NumberInput\`, \`PhoneInput\`, \`Checkbox\`, \`RadioGroup\`, \`CheckboxGroup\`, \`Dropdown\`, \`FileUpload\`, \`SubmitButton\`, \`RichText\`
 
 ### What you MUST do:
-- **ONLY import and use** the specific form components listed above
-- **ONLY integrate** form components into site routes
+- **ONLY integrate** form page into site routes with proper loader configuration
 - **USE EVERYTHING AS IS** from the forms components directory
-- **ONLY use** the exact import paths provided for form components
+- **ALWAYS include the loader** when using FormAppPage in router configuration
 
 ### Form Components Handle Everything:
-- The FormAppPage handles onChange, onBlur, onFocus, onSubmit events
-- Form components update form data automatically
-- Form components handle validation and error display
-- Form components manage all form state and behavior
-
+- The FormAppPage uses Wix headless forms service for data loading with the formId from the URL slug
+- The loader receives the formId parameter from the route (e.g., \`/forms/3d2d2976-742e-447e-bbb9-9a92ac6a5376\` → formId = "3d2d2976-742e-447e-bbb9-9a92ac6a5376")
+- Form components use semantic color/font system classes (text-foreground, bg-background, etc.)
+- Form components handle onChange, onBlur, onFocus, onSubmit events automatically
+- Form components update form data automatically with proper validation
+- Form components handle validation and error display with consistent styling
+- Form components manage all form state and behavior using Wix forms SDK
 
 # THIRD TASK: CODE THE REST OF THE SITE PAGES
 
@@ -147460,8 +147457,6 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 <strong>ALL FORMS FEATURES (submit button, validation, etc.) ARE ALREADY IMPLEMENTED BY THE FORMS COMPONENTS.</strong>
 <strong>THE REST OF THE SITE PAGES SHOULD BE IMPLEMENTED AS USUAL ACCORDING TO THE PLAN AND USER REQUESTS, FOLLOWING THE OTHER INSTRUCTIONS IN THE CONTEXT.</strong>
 
-<strong>🚨 REMEMBER: Forms app works ONLY with FormAppPage, FormAppFields, and FormAppForm components. Do NOT use generic form UI components or implement custom form components!</strong>
-
 </important_notes>
 
 </forms_instructions>
@@ -147488,12 +147483,13 @@ var generateData = async (env) => {
     env
   );
   console.log(`[${VERTICAL_NAME}-plugin-generateData] Generating mock data...`);
-  const mockSchema = await generateMockData();
-  const form = await es_exports.createForm(mockSchema);
+  const form = await es_exports.createForm(MOCK_SCHEMA);
   const generatedData = {
     formId: form?._id,
     purpose: form.name,
-    formSchema: mockSchema
+    formServiceConfig: {
+      formId: form?._id
+    }
   };
   console.log(`
 \x1B[34m ==== Forms data generation completed ==== \x1B[0m