feat: add CI/CD pipeline, Dependabot and build fixes

.github/dependabot.yml

@@ -0,0 +1,40 @@
+version: 2
+
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "09:00"
+      timezone: "America/Guayaquil"
+    open-pull-requests-limit: 10
+    target-branch: "development"
+    groups:
+      strapi:
+        patterns:
+          - "@strapi/*"
+      dnd-kit:
+        patterns:
+          - "@dnd-kit/*"
+      react:
+        patterns:
+          - "react"
+          - "react-dom"
+          - "@types/react"
+          - "@types/react-dom"
+    ignore:
+      - dependency-name: "@strapi/strapi"
+        update-types: ["version-update:semver-major"]
+      - dependency-name: "@strapi/design-system"
+        update-types: ["version-update:semver-major"]
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+      time: "09:00"
+      timezone: "America/Guayaquil"
+    open-pull-requests-limit: 5
+    target-branch: "development"

.github/workflows/ci.yml

@@ -0,0 +1,51 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+      - development
+      - production
+  pull_request:
+  workflow_call:
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check (server)
+        run: npm run test:ts:back
+
+      - name: Type check (admin)
+        run: npm run test:ts:front
+
+      - name: Build
+        run: npm run build
+
+      - name: Verify plugin
+        run: npm run verify
+
+      - name: Check version not already published
+        run: |
+          VERSION=$(node -p "require('./package.json').version")
+          if npm view strapi-plugin-form-builder-cms@$VERSION version 2>/dev/null; then
+            echo "❌ Version $VERSION is already published on npm. Bump the version before merging."
+            exit 1
+          fi
+          echo "✅ Version $VERSION is not yet published."
+
+      - name: Dry run publish
+        run: npm publish --dry-run --access public

.github/workflows/publish.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   publish:
     if: github.event.pull_request.merged == true
+    needs: ci
     runs-on: ubuntu-latest
 
     steps:
@@ -44,3 +45,6 @@ jobs:
           body: |
             Published from PR #${{ github.event.pull_request.number }}: ${{ github.event.pull_request.title }}
           generate_release_notes: true
+
+  ci:
+    uses: ./.github/workflows/ci.yml

.gitignore

@@ -102,6 +102,10 @@ public/uploads/*
 dist
 build
 
+# Compiled JS files inside src (TypeScript sources only)
+server/src/**/*.js
+admin/src/**/*.js
+
 
 ############################
 # Node.js

admin/src/components/DropZone.tsx

@@ -20,6 +20,17 @@ import { CSS } from '@dnd-kit/utilities';
 import { Trash, Drag } from '@strapi/icons';
 import { FormField } from '../types';
 
+/**
+ * Renders a draggable, selectable row that represents a FormField with a delete action.
+ *
+ * The row highlights when `selected`. Clicking the row calls `onSelect`; interacting with the drag handle does not toggle selection; clicking the delete button calls `onDelete`.
+ *
+ * @param field - The form field to render (label and type are displayed).
+ * @param selected - Whether this row is currently selected; controls visual highlight.
+ * @param onSelect - Callback invoked when the row (outside the drag handle and delete button) is clicked.
+ * @param onDelete - Callback invoked when the delete button is clicked.
+ * @returns The rendered sortable field row element.
+ */
 function SortableFieldRow({
   field,
   selected,
@@ -62,7 +73,7 @@ function SortableFieldRow({
             {...attributes}
             {...listeners}
             style={{ cursor: 'grab', color: 'var(--strapi-neutral-400)', padding: '0 4px' }}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e: React.MouseEvent) => e.stopPropagation()}
           >
             <Drag />
           </Box>

admin/src/components/EmbedModal.tsx

@@ -8,6 +8,17 @@ interface Props {
   onClose: () => void;
 }
 
+/**
+ * Renders a modal that displays an embeddable HTML snippet for a given form and provides a one-click copy action.
+ *
+ * The component returns `null` when `open` is `false`. When visible, it shows a preformatted snippet containing a container div
+ * with `id="sfb-form-<formId>"` and a script tag that loads the embed script from the current origin with `data-form-id` set.
+ *
+ * @param formId - The form identifier inserted into the snippet's container id and `data-form-id` attribute
+ * @param open - Controls whether the modal is visible
+ * @param onClose - Callback invoked when the modal is closed
+ * @returns The modal element when `open` is `true`, otherwise `null`
+ */
 export function EmbedModal({ formId, open, onClose }: Props) {
   const [copied, setCopied] = useState(false);
 
@@ -24,7 +35,7 @@ export function EmbedModal({ formId, open, onClose }: Props) {
   };
 
   return (
-    <Modal.Root open={open} onOpenChange={(v) => !v && onClose()}>
+    <Modal.Root open={open} onOpenChange={(v: boolean) => !v && onClose()}>
       <Modal.Content style={{ maxWidth: 600, width: '100%' }}>
         <Modal.Header>
           <Typography variant="beta">Embed this form</Typography>

admin/src/components/FieldSettingsPanel.tsx

@@ -45,6 +45,17 @@ function LabeledInput({
   );
 }
 
+/**
+ * Render the settings panel UI for editing a single form field.
+ *
+ * Displays controls for label, name, placeholder, help text, required/width toggles,
+ * type-specific inputs (heading, paragraph), option management (add/update/remove),
+ * validation rule management (add/update/remove) with value/message editing, and CSS class.
+ *
+ * @param field - The current FormField to edit.
+ * @param onChange - Callback invoked with the updated FormField whenever a change is made.
+ * @returns A React element containing the field settings panel UI.
+ */
 export function FieldSettingsPanel({ field, onChange }: Props) {
   const update = (patch: Partial<FormField>) => onChange({ ...field, ...patch });
 
@@ -260,7 +271,7 @@ export function FieldSettingsPanel({ field, onChange }: Props) {
                     <Field.Root style={{ flex: 1 }}>
                       <SingleSelect
                         value={rule.type}
-                        onChange={(val) => updateValidation(i, { type: String(val), value: undefined, message: '' })}
+                        onChange={(val: string | number) => updateValidation(i, { type: String(val), value: undefined, message: '' })}
                         size="S"
                       >
                         {available.map((opt) => (

admin/src/components/FormPreview.tsx

@@ -283,11 +283,21 @@ interface Props {
   onClose: () => void;
 }
 
+/**
+ * Render a modal preview of a form using the provided title, fields, and settings.
+ *
+ * @param title - The preview title displayed in the modal header
+ * @param fields - The array of form field definitions to render inside the preview
+ * @param settings - Form-level settings (used for things like the submit button text)
+ * @param open - Whether the preview modal is visible
+ * @param onClose - Callback invoked when the preview modal is closed
+ * @returns The modal element containing the form preview, or `null` when `open` is false
+ */
 export function FormPreview({ title, fields, settings, open, onClose }: Props) {
   if (!open) return null;
 
   return (
-    <Modal.Root open={open} onOpenChange={(v) => !v && onClose()}>
+    <Modal.Root open={open} onOpenChange={(v: boolean) => !v && onClose()}>
       <Modal.Content style={{ maxWidth: 760, width: '100%' }}>
         <Modal.Header>
           <Typography variant="beta">Preview — {title}</Typography>

admin/src/pages/SubmissionsPage.tsx

@@ -22,6 +22,13 @@ import { useFormsApi } from '../api';
 import { Form, FormField, FormSubmission } from '../types';
 import { PLUGIN_ID } from '../pluginId';
 
+/**
+ * Render the submissions management page for a specific form.
+ *
+ * Loads and displays form metadata, submission list, and statistics; provides controls to filter by status, view submission details, mark submissions as read, and delete submissions.
+ *
+ * @returns The React element for the Submissions page (table, filters, detail modal, and delete confirmation modal).
+ */
 export function SubmissionsPage() {
   const { formId } = useParams<{ formId: string }>();
   const navigate = useNavigate();
@@ -93,7 +100,7 @@ export function SubmissionsPage() {
           <SingleSelect
             aria-label="Filter by status"
             value={statusFilter}
-            onChange={(val) => setStatusFilter(String(val))}
+            onChange={(val: string | number) => setStatusFilter(String(val))}
             placeholder="All statuses"
             size="S"
           >

package.json

@@ -27,8 +27,8 @@
     "watch": "strapi-plugin watch",
     "watch:link": "strapi-plugin watch:link",
     "verify": "strapi-plugin verify",
-    "test:ts:front": "run -T tsc -p admin/tsconfig.json",
-    "test:ts:back": "run -T tsc -p server/tsconfig.json"
+    "test:ts:front": "npx tsc -p admin/tsconfig.json --noEmit",
+    "test:ts:back": "npx tsc -p server/tsconfig.json --noEmit"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",