chore(dashboard): Fix imports

apps/dashboard/src/components/auth/questionnaire-form.tsx

@@ -1,22 +1,23 @@
+import { updateClerkOrgMetadata } from '@/api/organization';
+import { identifyUser } from '@/api/telemetry';
+import { StepIndicator } from '@/components/auth/shared';
 import { Button } from '@/components/primitives/button';
 import { CardDescription, CardTitle } from '@/components/primitives/card';
+import { FormRoot } from '@/components/primitives/form/form';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
+import { useEnvironment, useFetchEnvironments } from '@/context/environment/hooks';
+import { useSegment } from '@/context/segment/hooks';
+import { useTelemetry } from '@/hooks/use-telemetry';
+import { hubspotCookie } from '@/utils/cookies';
+import { ROUTES } from '@/utils/routes';
+import { TelemetryEvent } from '@/utils/telemetry';
 import { useOrganization, useUser } from '@clerk/clerk-react';
 import { CompanySizeEnum, JobTitleEnum, jobTitleToLabelMapper, OrganizationTypeEnum } from '@novu/shared';
 import { useMutation } from '@tanstack/react-query';
 import { AnimatePresence, motion } from 'motion/react';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { updateClerkOrgMetadata } from '../../api/organization';
-import { identifyUser } from '../../api/telemetry';
-import { useEnvironment, useFetchEnvironments } from '../../context/environment/hooks';
-import { useSegment } from '../../context/segment';
-import { useTelemetry } from '../../hooks/use-telemetry';
-import { hubspotCookie } from '../../utils/cookies';
-import { ROUTES } from '../../utils/routes';
-import { TelemetryEvent } from '../../utils/telemetry';
-import { StepIndicator } from './shared';
 
 interface QuestionnaireFormData {
   jobTitle: JobTitleEnum;
@@ -94,7 +95,7 @@ export function QuestionnaireForm() {
             </CardDescription>
           </div>
 
-          <form onSubmit={handleSubmit(onSubmit)} className="flex w-[350px] flex-col gap-8">
+          <FormRoot onSubmit={handleSubmit(onSubmit)} className="flex w-[350px] flex-col gap-8">
             <div className="flex flex-col gap-7">
               <div className="flex flex-col gap-[4px]">
                 <label className="text-foreground-600 text-xs font-medium">Job title</label>
@@ -216,7 +217,7 @@ export function QuestionnaireForm() {
                 </motion.div>
               )}
             </AnimatePresence>
-          </form>
+          </FormRoot>
         </div>
       </div>
 

apps/dashboard/src/components/environments/create-environment-button.tsx

@@ -7,6 +7,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  FormRoot,
 } from '@/components/primitives/form/form';
 import { Separator } from '@/components/primitives/separator';
 import {
@@ -58,7 +59,7 @@ function getRandomColor(existingEnvironments: IEnvironment[] = []) {
 
 const createEnvironmentSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  color: z.string().regex(/^\#[0-9a-fA-F]{6}$/, 'Enter a valid hex color, like #123456.'),
+  color: z.string().regex(/^#[0-9a-fA-F]{6}$/, 'Enter a valid hex color, like #123456.'),
 });
 
 type CreateEnvironmentFormData = z.infer<typeof createEnvironmentSchema>;
@@ -126,7 +127,7 @@ export const CreateEnvironmentButton = (props: CreateEnvironmentButtonProps) =>
         <Separator />
         <SheetMain>
           <Form {...form}>
-            <form
+            <FormRoot
               id="create-environment"
               autoComplete="off"
               noValidate
@@ -165,7 +166,7 @@ export const CreateEnvironmentButton = (props: CreateEnvironmentButtonProps) =>
                   </FormItem>
                 )}
               />
-            </form>
+            </FormRoot>
           </Form>
         </SheetMain>
         <Separator />

apps/dashboard/src/components/environments/edit-environment-sheet.tsx

@@ -7,6 +7,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  FormRoot,
 } from '@/components/primitives/form/form';
 import { Separator } from '@/components/primitives/separator';
 import {
@@ -32,7 +33,7 @@ import { showErrorToast, showSuccessToast } from '../primitives/sonner-helpers';
 // TODO: Merge with CreateEnvironmentButton
 const editEnvironmentSchema = z.object({
   name: z.string().min(1, 'Name is required'),
-  color: z.string().regex(/^\#[0-9a-fA-F]{6}$/, 'Enter a valid hex color, like #123456.'),
+  color: z.string().regex(/^#[0-9a-fA-F]{6}$/, 'Enter a valid hex color, like #123456.'),
 });
 
 type EditEnvironmentFormData = z.infer<typeof editEnvironmentSchema>;
@@ -96,7 +97,7 @@ export const EditEnvironmentSheet = ({ environment, isOpen, onOpenChange }: Edit
         <Separator />
         <SheetMain>
           <Form {...form}>
-            <form
+            <FormRoot
               id="edit-environment"
               autoComplete="off"
               noValidate
@@ -135,7 +136,7 @@ export const EditEnvironmentSheet = ({ environment, isOpen, onOpenChange }: Edit
                   </FormItem>
                 )}
               />
-            </form>
+            </FormRoot>
           </Form>
         </SheetMain>
         <Separator />

apps/dashboard/src/components/header-navigation/edit-bridge-url-button.tsx

@@ -4,7 +4,15 @@ import { useForm } from 'react-hook-form';
 import { RiLinkM, RiPencilFill } from 'react-icons/ri';
 import * as z from 'zod';
 
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/primitives/form/form';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormRoot,
+} from '@/components/primitives/form/form';
 import { useEnvironment } from '@/context/environment/hooks';
 import { useFetchBridgeHealthCheck } from '@/hooks/use-fetch-bridge-health-check';
 import { useUpdateBridgeUrl } from '@/hooks/use-update-bridge-url';
@@ -77,7 +85,7 @@ export const EditBridgeUrlButton = () => {
       <PopoverPortal>
         <PopoverContent className="w-[362px] p-0" side="bottom" align="end">
           <Form {...form}>
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <FormRoot onSubmit={handleSubmit(onSubmit)}>
               <div className="flex flex-col gap-1 p-5">
                 <FormField
                   control={control}
@@ -113,7 +121,7 @@ export const EditBridgeUrlButton = () => {
                   Update endpoint
                 </Button>
               </div>
-            </form>
+            </FormRoot>
           </Form>
         </PopoverContent>
       </PopoverPortal>

apps/dashboard/src/components/inbox-button.tsx

@@ -1,12 +1,12 @@
-import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '@/components/primitives/popover';
+import { Popover, PopoverContent, PopoverPortal, PopoverTrigger } from '@/components/primitives/popover';
 import { API_HOSTNAME, APP_ID, WEBSOCKET_HOSTNAME } from '@/config';
+import { useEnvironment } from '@/context/environment/hooks';
+import { useTestPage } from '@/hooks/use-test-page';
 import { useUser } from '@clerk/clerk-react';
 import { Bell, Inbox, InboxContent, useNovu } from '@novu/react';
-import { InboxBellFilled } from './icons/inbox-bell-filled';
+import { useEffect, useState } from 'react';
 import { HeaderButton } from './header-navigation/header-button';
-import { useState, useEffect } from 'react';
-import { useEnvironment } from '../context/environment/hooks';
-import { useTestPage } from '@/hooks/use-test-page';
+import { InboxBellFilled } from './icons/inbox-bell-filled';
 
 const InboxInner = () => {
   const [open, setOpen] = useState(false);

apps/dashboard/src/components/integrations/components/integration-configuration.tsx

@@ -1,21 +1,20 @@
-import { ChannelTypeEnum, IProviderConfig } from '@novu/shared';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/primitives/accordion';
-import { Form } from '@/components/primitives/form/form';
+import { Form, FormRoot } from '@/components/primitives/form/form';
 import { Label } from '@/components/primitives/label';
 import { Separator } from '@/components/primitives/separator';
 import { useEnvironment } from '@/context/environment/hooks';
-import { IIntegration } from '@novu/shared';
+import { ROUTES } from '@/utils/routes';
+import { ChannelTypeEnum, IIntegration, IProviderConfig } from '@novu/shared';
 import { useEffect } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { RiInputField } from 'react-icons/ri';
+import { useNavigate } from 'react-router-dom';
 import { InlineToast } from '../../../components/primitives/inline-toast';
 import { cn } from '../../../utils/ui';
 import { EnvironmentDropdown } from '../../side-navigation/environment-dropdown';
 import { CredentialsSection } from './integration-credentials';
 import { GeneralSettings } from './integration-general-settings';
 import { isDemoIntegration } from './utils/helpers';
-import { useNavigate } from 'react-router-dom';
-import { ROUTES } from '@/utils/routes';
 
 type IntegrationFormData = {
   name: string;
@@ -94,7 +93,7 @@ export function IntegrationConfiguration({
 
   return (
     <Form {...form}>
-      <form id="integration-configuration-form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
+      <FormRoot id="integration-configuration-form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
         <div className="flex items-center justify-between gap-2 p-3">
           <Label className="text-sm" htmlFor="environmentId">
             Environment
@@ -190,7 +189,7 @@ export function IntegrationConfiguration({
             )}
           </div>
         )}
-      </form>
+      </FormRoot>
     </Form>
   );
 }

apps/dashboard/src/components/subscribers/subscriber-tabs.tsx

@@ -1,16 +1,16 @@
+import { Separator } from '@/components/primitives/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/primitives/tabs';
 import { Preferences } from '@/components/subscribers/preferences/preferences';
 import { PreferencesSkeleton } from '@/components/subscribers/preferences/preferences-skeleton';
 import { SubscriberActivity } from '@/components/subscribers/subscriber-activity';
+import { SubscriberOverviewForm } from '@/components/subscribers/subscriber-overview-form';
 import { SubscriberOverviewSkeleton } from '@/components/subscribers/subscriber-overview-skeleton';
 import TruncatedText from '@/components/truncated-text';
 import { useFetchSubscriber } from '@/hooks/use-fetch-subscriber';
 import useFetchSubscriberPreferences from '@/hooks/use-fetch-subscriber-preferences';
 import { useFormProtection } from '@/hooks/use-form-protection';
 import { useState } from 'react';
 import { RiGroup2Line } from 'react-icons/ri';
-import { Separator } from '../primitives/separator';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../primitives/tabs';
-import { SubscriberOverviewForm } from './subscriber-overview-form';
 
 type SubscriberOverviewProps = {
   subscriberId: string;
@@ -100,6 +100,7 @@ export function SubscriberTabs(props: SubscriberTabsProps) {
         <SubscriberActivity subscriberId={subscriberId} />
       </TabsContent>
       <Separator />
+
       <ProtectionAlert />
     </Tabs>
   );

apps/dashboard/src/components/subscribers/subscribers-filters.tsx

@@ -1,10 +1,10 @@
+import { Button } from '@/components/primitives/button';
+import { FacetedFormFilter } from '@/components/primitives/form/faceted-filter/facated-form-filter';
+import { Form, FormField, FormItem, FormRoot } from '@/components/primitives/form/form';
 import { defaultSubscribersFilter, SubscribersFilter } from '@/hooks/use-subscribers-url-state';
 import { cn } from '@/utils/ui';
 import { HTMLAttributes, useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import { Button } from '../primitives/button';
-import { FacetedFormFilter } from '../primitives/form/faceted-filter/facated-form-filter';
-import { Form, FormField, FormItem } from '../primitives/form/form';
 
 export type SubscribersFiltersProps = HTMLAttributes<HTMLFormElement> & {
   onFiltersChange: (filter: SubscribersFilter) => void;
@@ -44,7 +44,7 @@ export function SubscribersFilters(props: SubscribersFiltersProps) {
 
   return (
     <Form {...form}>
-      <form className={cn('flex items-center gap-2', className)} {...rest}>
+      <FormRoot className={cn('flex items-center gap-2', className)} {...rest}>
         <FormField
           control={form.control}
           name="email"
@@ -118,7 +118,7 @@ export function SubscribersFilters(props: SubscribersFiltersProps) {
             Reset
           </Button>
         )}
-      </form>
+      </FormRoot>
     </Form>
   );
 }

apps/dashboard/src/components/template-store/workflow-template-modal.tsx

@@ -1,32 +1,33 @@
+import { RouteFill } from '@/components/icons/route-fill';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/primitives/breadcrumb';
+import { Button } from '@/components/primitives/button';
+import { CompactButton } from '@/components/primitives/button-compact';
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTrigger } from '@/components/primitives/dialog';
+import { Form, FormRoot } from '@/components/primitives/form/form';
+import { WorkflowResults } from '@/components/template-store/components/workflow-results';
+import { getTemplates } from '@/components/template-store/templates';
+import { IWorkflowSuggestion } from '@/components/template-store/templates/types';
+import { WorkflowMode } from '@/components/template-store/types';
+import { WorkflowSidebar } from '@/components/template-store/workflow-sidebar';
+import TruncatedText from '@/components/truncated-text';
+import { CreateWorkflowForm } from '@/components/workflow-editor/create-workflow-form';
+import { workflowSchema } from '@/components/workflow-editor/schema';
+import { WorkflowCanvas } from '@/components/workflow-editor/workflow-canvas';
+import { useCreateWorkflow } from '@/hooks/use-create-workflow';
 import { useTelemetry } from '@/hooks/use-telemetry';
+import { buildRoute, ROUTES } from '@/utils/routes';
 import { TelemetryEvent } from '@/utils/telemetry';
 import { ComponentProps, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { RiArrowLeftSLine } from 'react-icons/ri';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { z } from 'zod';
-import { useCreateWorkflow } from '../../hooks/use-create-workflow';
-import { buildRoute, ROUTES } from '../../utils/routes';
-import { RouteFill } from '../icons';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '../primitives/breadcrumb';
-import { Button } from '../primitives/button';
-import { CompactButton } from '../primitives/button-compact';
-import { Form } from '../primitives/form/form';
-import TruncatedText from '../truncated-text';
-import { CreateWorkflowForm } from '../workflow-editor/create-workflow-form';
-import { workflowSchema } from '../workflow-editor/schema';
-import { WorkflowCanvas } from '../workflow-editor/workflow-canvas';
-import { WorkflowResults } from './components/workflow-results';
-import { getTemplates, IWorkflowSuggestion } from './templates';
-import { WorkflowMode } from './types';
-import { WorkflowSidebar } from './workflow-sidebar';
 
 const WORKFLOW_TEMPLATES = getTemplates();
 
@@ -159,13 +160,13 @@ export function WorkflowTemplateModal(props: WorkflowTemplateModalProps) {
             {!selectedTemplate ? (
               <div className="p-3">
                 <Form {...form}>
-                  <form>
+                  <FormRoot>
                     <div className="mb-1.5 flex items-center justify-between">
                       <h2 className="text-label-md text-strong">{getHeaderText()}</h2>
                     </div>
 
                     <WorkflowResults mode={mode} suggestions={templates} onClick={handleTemplateClick} />
-                  </form>
+                  </FormRoot>
                 </Form>
               </div>
             ) : (