♻️ (builder) Remove barrel export and flatten folder arch

apps/builder/src/features/account/UserProvider.tsx

@@ -1,12 +1,6 @@
 import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
+import { createContext, ReactNode, useEffect, useState } from 'react'
 import { env, isDefined, isNotDefined } from '@typebot.io/lib'
 import { User } from '@typebot.io/prisma'
 import { setUser as setSentryUser } from '@sentry/nextjs'
@@ -14,7 +8,7 @@ import { useToast } from '@/hooks/useToast'
 import { updateUserQuery } from './queries/updateUserQuery'
 import { useDebouncedCallback } from 'use-debounce'
 
-const userContext = createContext<{
+export const userContext = createContext<{
   user?: User
   isLoading: boolean
   currentWorkspaceId?: string
@@ -110,5 +104,3 @@ const reloadSession = () => {
   const event = new Event('visibilitychange')
   document.dispatchEvent(event)
 }
-
-export const useUser = () => useContext(userContext)

apps/builder/src/features/account/components/ApiTokensList.tsx

@@ -21,10 +21,10 @@ import { User } from '@typebot.io/prisma'
 import React, { useState } from 'react'
 import { byId, isDefined } from '@typebot.io/lib'
 import { CreateTokenModal } from './CreateTokenModal'
-import { useApiTokens } from '../../../hooks/useApiTokens'
-import { ApiTokenFromServer } from '../../../types'
-import { timeSince } from '@/utils/helpers'
-import { deleteApiTokenQuery } from '../../../queries/deleteApiTokenQuery'
+import { useApiTokens } from '../hooks/useApiTokens'
+import { ApiTokenFromServer } from '../types'
+import { parseTimeSince } from '@/helpers/parseTimeSince'
+import { deleteApiTokenQuery } from '../queries/deleteApiTokenQuery'
 
 type Props = { user: User }
 
@@ -83,7 +83,7 @@ export const ApiTokensList = ({ user }: Props) => {
             {apiTokens?.map((token) => (
               <Tr key={token.id}>
                 <Td>{token.name}</Td>
-                <Td>{timeSince(token.createdAt)} ago</Td>
+                <Td>{parseTimeSince(token.createdAt)} ago</Td>
                 <Td>
                   <Button
                     size="xs"

apps/builder/src/features/account/components/CreateTokenModal.tsx

@@ -1,6 +1,4 @@
 import { CopyButton } from '@/components/CopyButton'
-import { createApiTokenQuery } from '../../../queries/createApiTokenQuery'
-import { ApiTokenFromServer } from '../../../types'
 import {
   Modal,
   ModalOverlay,
@@ -17,6 +15,8 @@ import {
   InputRightElement,
 } from '@chakra-ui/react'
 import React, { FormEvent, useState } from 'react'
+import { createApiTokenQuery } from '../queries/createApiTokenQuery'
+import { ApiTokenFromServer } from '../types'
 
 type Props = {
   userId: string

apps/builder/src/features/account/components/MyAccountForm.tsx

@@ -3,7 +3,7 @@ import { UploadIcon } from '@/components/icons'
 import React, { useState } from 'react'
 import { ApiTokensList } from './ApiTokensList'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
-import { useUser } from '@/features/account'
+import { useUser } from '../hooks/useUser'
 import { TextInput } from '@/components/inputs/TextInput'
 
 export const MyAccountForm = () => {

apps/builder/src/features/account/components/MyAccountForm/ApiTokensList/index.tsx

@@ -1 +0,0 @@
-export { ApiTokensList } from './ApiTokensList'

apps/builder/src/features/account/components/MyAccountForm/index.tsx

@@ -1 +0,0 @@
-export { MyAccountForm } from './MyAccountForm'

apps/builder/src/features/account/components/UserPreferencesForm.tsx

@@ -1,9 +1,9 @@
 import { Stack, Heading, useColorMode } from '@chakra-ui/react'
-import { useUser } from '@/features/account'
 import { GraphNavigation } from '@typebot.io/prisma'
 import React, { useEffect } from 'react'
 import { GraphNavigationRadioGroup } from './GraphNavigationRadioGroup'
 import { AppearanceRadioGroup } from './AppearanceRadioGroup'
+import { useUser } from '../hooks/useUser'
 
 export const UserPreferencesForm = () => {
   const { colorMode, setColorMode } = useColorMode()

apps/builder/src/features/account/components/index.ts

@@ -1,2 +0,0 @@
-export * from './MyAccountForm'
-export * from './UserPreferenceForm/UserPreferencesForm'

apps/builder/src/features/account/hooks/useApiTokens.ts

@@ -1,4 +1,4 @@
-import { fetcher } from '@/utils/helpers'
+import { fetcher } from '@/helpers/fetcher'
 import useSWR from 'swr'
 import { env } from '@typebot.io/lib'
 import { ApiTokenFromServer } from '../types'

apps/builder/src/features/account/hooks/useUser.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { userContext } from '../UserProvider'
+
+export const useUser = () => useContext(userContext)

apps/builder/src/features/account/index.ts

@@ -1,3 +0,0 @@
-export { UserProvider, useUser } from './UserProvider'
-export type { ApiTokenFromServer } from './types'
-export * from './components'

apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx

@@ -5,17 +5,16 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import { useToast } from '@/hooks/useToast'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stats } from '@typebot.io/schemas'
 import React from 'react'
 import { useAnswersCount } from '../hooks/useAnswersCount'
-import {
-  Graph,
-  GraphProvider,
-  GroupsCoordinatesProvider,
-} from '@/features/graph'
-import { ChangePlanModal, LimitReached } from '@/features/billing'
 import { StatsCards } from './StatsCards'
+import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
+import { LimitReached } from '@/features/billing/types'
+import { Graph } from '@/features/graph/components/Graph'
+import { GraphProvider } from '@/features/graph/providers/GraphProvider'
+import { GroupsCoordinatesProvider } from '@/features/graph/providers/GroupsCoordinateProvider'
 
 export const AnalyticsGraphContainer = ({ stats }: { stats?: Stats }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()

apps/builder/src/features/analytics/hooks/useAnswersCount.ts

@@ -1,4 +1,4 @@
-import { fetcher } from '@/utils/helpers'
+import { fetcher } from '@/helpers/fetcher'
 import useSWR from 'swr'
 import { AnswersCount } from '../types'
 

apps/builder/src/features/analytics/index.ts

@@ -1,2 +0,0 @@
-export { AnalyticsGraphContainer } from './components/AnalyticsGraphContainer'
-export type { AnswersCount } from './types'

apps/builder/src/features/auth/api/index.ts

@@ -1,4 +0,0 @@
-export * from './convertInvitationsToCollaborations'
-export * from './getAuthenticatedUser'
-export * from './getNewUserInvitations'
-export * from './joinWorkspaces'

apps/builder/src/features/auth/components/SocialLoginButtons.tsx

@@ -11,8 +11,10 @@ import React, { useState } from 'react'
 import { stringify } from 'qs'
 import { BuiltInProviderType } from 'next-auth/providers'
 import { GoogleLogo } from '@/components/GoogleLogo'
-import { AzureAdLogo, FacebookLogo, GitlabLogo } from './logos'
 import { omit } from '@typebot.io/lib'
+import { AzureAdLogo } from '@/components/logos/AzureAdLogo'
+import { FacebookLogo } from '@/components/logos/FacebookLogo'
+import { GitlabLogo } from '@/components/logos/GitlabLogo'
 
 type Props = {
   providers:

apps/builder/src/features/auth/components/logos/AzureAdLogo.tsx

@@ -1,31 +0,0 @@
-import { Icon, IconProps } from '@chakra-ui/react'
-
-export const AzureAdLogo = (props: IconProps) => {
-  return (
-    <Icon
-      id="svg1035"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 374.5 377.3"
-      {...props}
-    >
-      <g id="layer1" transform="translate(-39.022 -78.115)">
-        <g id="g1016" transform="translate(-63.947 -88.179)">
-          <path
-            id="path1008"
-            fill='#00bef2'
-            d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"
-          />
-          <path
-            id="path923"
-            fill="#fff"
-            stroke="#fff"
-            strokeWidth="1.2357"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M283.1 483.6c-5.8-2.1-12.8-8.1-15.7-13.7-3.6-6.9-3.3-17.7.7-26.3 3.1-6.4 3.1-6.6 1.1-8.1-1.1-.8-14.4-8.2-29.4-16.3-15-8.1-28.1-15.2-29-15.7-1.2-.7-3.2 0-6.8 2.3-11.7 7.4-23.9 6.6-33.5-2.3-6.9-6.4-8.9-10.9-8.9-20.1 0-8.9 1.8-13.5 7.5-19.2 7.7-7.7 18-10.3 27.9-7 5.4 1.8 5.5 1.8 8.9-.8 4-3 36.1-32.3 51.6-47l10.7-10.2-3.2-6.7c-6.5-13.5-3.2-28.5 8.2-37.5 6.2-4.9 10.8-6.4 19.7-6.4 20.8 0 35.3 21.8 27.5 41.3-2.1 5.4-2.1 5.5-.1 8.8 1.7 2.9 30.6 37.8 45.9 55.6 2.7 3.1 5.7 5.6 6.7 5.6s4.4-1 7.6-2.2c14.9-5.9 30.6.7 36.8 15.5 4 9.5.5 22.3-8 30-6 5.4-10.4 7.1-18.4 7.1-5.6 0-7.7-.6-13.6-3.8-4.4-2.4-7.8-3.6-9.2-3.2-2.4.6-39.3 25.9-47.5 32.5-5 4.1-5.4 5.6-2.8 11.7 2.5 6 2.2 15.4-.6 21.3-3.1 6.5-10.8 13-17.5 15-6.8 1.9-10.9 1.9-16.6-.2zm1.7-110.2v-57l-3.2-4.4c-1.8-2.4-3.5-4.4-3.8-4.4-1.3 0-65.9 58.7-65.9 59.9 0 .3 1 3.3 2.2 6.5 1.2 3.3 2.1 8 2 10.7-.1 2.7-.1 5.7-.1 6.7.1 2.3 21.7 16.1 54.1 34.8 8.9 5.2 12 6.5 13.1 5.6 1.3-1.1 1.6-12.2 1.6-58.4zm27.4 50.4c42.8-26.9 50.8-32.3 51.3-34.3.3-1.2.7-5.9.8-10.6l.3-8.4-21.8-25.9c-23.4-27.7-32-37.1-34-37.1-.7 0-4.2 2-7.8 4.4l-6.6 4.4.3 56.9c.3 51 .7 59.6 2.6 59.6.2.1 7-4 14.9-9z"
-          />
-        </g>
-      </g>
-    </Icon>
-  )
-}

apps/builder/src/features/auth/components/logos/FacebookLogo.tsx

@@ -1,11 +0,0 @@
-import { IconProps, Icon } from '@chakra-ui/react'
-
-export const FacebookLogo = (props: IconProps) => (
-  <Icon viewBox="0 0 14222 14222" {...props}>
-    <circle cx="7111" cy="7112" r="7111" fill="#1977f3" />
-    <path
-      d="M9879 9168l315-2056H8222V5778c0-562 275-1111 1159-1111h897V2917s-814-139-1592-139c-1624 0-2686 984-2686 2767v1567H4194v2056h1806v4969c362 57 733 86 1111 86s749-30 1111-86V9168z"
-      fill="#fff"
-    />
-  </Icon>
-)

apps/builder/src/features/auth/components/logos/GitlabLogo.tsx

@@ -1,13 +0,0 @@
-import { IconProps, Icon } from '@chakra-ui/react'
-
-export const GitlabLogo = (props: IconProps) => (
-  <Icon viewBox="0 0 256 236" {...props}>
-    <path d="M128.075 236.075l47.104-144.97H80.97l47.104 144.97z" fill="#E24329" />
-    <path d="M128.075 236.074L80.97 91.104H14.956l113.119 144.97z" fill="#FC6D26" />
-    <path d="M14.956 91.104L.642 135.16a9.752 9.752 0 0 0 3.542 10.903l123.891 90.012-113.12-144.97z" fill="#FCA326" />
-    <path d="M14.956 91.105H80.97L52.601 3.79c-1.46-4.493-7.816-4.492-9.275 0l-28.37 87.315z" fill="#E24329" />
-    <path d="M128.075 236.074l47.104-144.97h66.015l-113.12 144.97z" fill="#FC6D26" />
-    <path d="M241.194 91.104l14.314 44.056a9.752 9.752 0 0 1-3.543 10.903l-123.89 90.012 113.119-144.97z" fill="#FCA326" />
-    <path d="M241.194 91.105h-66.015l28.37-87.315c1.46-4.493 7.816-4.492 9.275 0l28.37 87.315z" fill="#E24329" />
-  </Icon>
-)

apps/builder/src/features/auth/components/logos/index.ts

@@ -1,3 +0,0 @@
-export { AzureAdLogo } from './AzureAdLogo'
-export { GitlabLogo } from './GitlabLogo'
-export { FacebookLogo } from './FacebookLogo'

apps/builder/src/features/auth/index.ts

@@ -1,2 +0,0 @@
-export { SignInPage } from './components/SignInPage'
-export { mockedUser } from './constants'

apps/builder/src/features/billing/api/cancelSubscription.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/createCheckoutSession.ts

@@ -1,10 +1,10 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'
 import { z } from 'zod'
-import { parseSubscriptionItems } from '../utils/parseSubscriptionItems'
+import { parseSubscriptionItems } from '../helpers/parseSubscriptionItems'
 
 export const createCheckoutSession = authenticatedProcedure
   .meta({

apps/builder/src/features/billing/api/getBillingPortalUrl.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/getSubscription.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/getUsage.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { z } from 'zod'
 

apps/builder/src/features/billing/api/listInvoices.ts

@@ -1,5 +1,5 @@
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { WorkspaceRole } from '@typebot.io/prisma'
 import Stripe from 'stripe'

apps/builder/src/features/billing/api/router.ts

@@ -1,11 +1,11 @@
-import { router } from '@/utils/server/trpc'
-import { getBillingPortalUrl } from './procedures/getBillingPortalUrl'
-import { listInvoices } from './procedures/listInvoices'
-import { cancelSubscription } from './procedures/cancelSubscription'
-import { createCheckoutSession } from './procedures/createCheckoutSession'
-import { updateSubscription } from './procedures/updateSubscription'
-import { getSubscription } from './procedures/getSubscription'
-import { getUsage } from './procedures/getUsage'
+import { router } from '@/helpers/server/trpc'
+import { cancelSubscription } from './cancelSubscription'
+import { createCheckoutSession } from './createCheckoutSession'
+import { getBillingPortalUrl } from './getBillingPortalUrl'
+import { getSubscription } from './getSubscription'
+import { getUsage } from './getUsage'
+import { listInvoices } from './listInvoices'
+import { updateSubscription } from './updateSubscription'
 
 export const billingRouter = router({
   getBillingPortalUrl,

apps/builder/src/features/billing/api/updateSubscription.ts

@@ -1,6 +1,6 @@
 import { sendTelemetryEvents } from '@typebot.io/lib/telemetry/sendTelemetryEvent'
 import prisma from '@/lib/prisma'
-import { authenticatedProcedure } from '@/utils/server/trpc'
+import { authenticatedProcedure } from '@/helpers/server/trpc'
 import { TRPCError } from '@trpc/server'
 import { Plan, WorkspaceRole } from '@typebot.io/prisma'
 import { workspaceSchema } from '@typebot.io/schemas'

apps/builder/src/features/billing/components/BillingContent/UsageContent/index.ts

@@ -1 +0,0 @@
-export { UsageContent } from './UsageContent'

apps/builder/src/features/billing/components/BillingContent/index.ts

@@ -1 +0,0 @@
-export { BillingContent } from './BillingContent'

apps/builder/src/features/billing/components/BillingContent/queries/cancelSubscriptionQuery.ts

@@ -1,7 +0,0 @@
-import { sendRequest } from '@typebot.io/lib'
-
-export const cancelSubscriptionQuery = (stripeId: string) =>
-  sendRequest({
-    url: `api/stripe/subscription?stripeId=${stripeId}`,
-    method: 'DELETE',
-  })

apps/builder/src/features/billing/components/BillingSettingsLayout.tsx

@@ -1,23 +1,23 @@
 import { HStack, Stack, Text } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { Plan } from '@typebot.io/prisma'
 import React from 'react'
-import { CurrentSubscriptionContent } from './CurrentSubscriptionContent'
 import { InvoicesList } from './InvoicesList'
-import { UsageContent } from './UsageContent/UsageContent'
-import { StripeClimateLogo } from '../StripeClimateLogo'
+import { StripeClimateLogo } from './StripeClimateLogo'
 import { TextLink } from '@/components/TextLink'
-import { ChangePlanForm } from '../ChangePlanForm'
+import { ChangePlanForm } from './ChangePlanForm'
+import { UsageProgressBars } from './UsageProgressBars'
+import { CurrentSubscriptionSummary } from './CurrentSubscriptionSummary'
 
-export const BillingContent = () => {
+export const BillingSettingsLayout = () => {
   const { workspace, refreshWorkspace } = useWorkspace()
 
   if (!workspace) return null
   return (
     <Stack spacing="10" w="full">
-      <UsageContent workspace={workspace} />
+      <UsageProgressBars workspace={workspace} />
       <Stack spacing="4">
-        <CurrentSubscriptionContent
+        <CurrentSubscriptionSummary
           workspace={workspace}
           onCancelSuccess={refreshWorkspace}
         />

apps/builder/src/features/billing/components/ChangePlanForm.tsx

@@ -1,16 +1,16 @@
 import { Stack, HStack, Text } from '@chakra-ui/react'
-import { useUser } from '@/features/account'
 import { Plan } from '@typebot.io/prisma'
-import { ProPlanContent } from './ProPlanContent'
-import { StarterPlanContent } from './StarterPlanContent'
 import { TextLink } from '@/components/TextLink'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 import { guessIfUserIsEuropean } from '@typebot.io/lib/pricing'
 import { Workspace } from '@typebot.io/schemas'
-import { PreCheckoutModal, PreCheckoutModalProps } from '../PreCheckoutModal'
+import { PreCheckoutModal, PreCheckoutModalProps } from './PreCheckoutModal'
 import { useState } from 'react'
 import { ParentModalProvider } from '@/features/graph/providers/ParentModalProvider'
+import { useUser } from '@/features/account/hooks/useUser'
+import { StarterPlanPricingCard } from './StarterPlanPricingCard'
+import { ProPlanPricingCard } from './ProPlanPricingCard'
 
 type Props = {
   workspace: Pick<Workspace, 'id' | 'stripeId' | 'plan'>
@@ -88,7 +88,7 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
         </ParentModalProvider>
       )}
       <HStack alignItems="stretch" spacing="4" w="full">
-        <StarterPlanContent
+        <StarterPlanPricingCard
           initialChatsLimitIndex={
             workspace?.plan === Plan.STARTER
               ? data?.subscription.additionalChatsIndex
@@ -106,7 +106,7 @@ export const ChangePlanForm = ({ workspace, onUpgradeSuccess }: Props) => {
           currency={data?.subscription.currency}
         />
 
-        <ProPlanContent
+        <ProPlanPricingCard
           initialChatsLimitIndex={
             workspace?.plan === Plan.PRO
               ? data?.subscription.additionalChatsIndex

apps/builder/src/features/billing/components/ChangePlanForm/index.ts

@@ -1 +0,0 @@
-export { ChangePlanForm } from './ChangePlanForm'

apps/builder/src/features/billing/components/ChangePlanModal.tsx

@@ -1,5 +1,5 @@
 import { AlertInfo } from '@/components/AlertInfo'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import {
   Modal,
   ModalBody,
@@ -10,16 +10,9 @@ import {
   Button,
   HStack,
 } from '@chakra-ui/react'
+import { LimitReached } from '../types'
 import { ChangePlanForm } from './ChangePlanForm'
 
-export enum LimitReached {
-  BRAND = 'remove branding',
-  CUSTOM_DOMAIN = 'add custom domains',
-  FOLDER = 'create folders',
-  FILE_INPUT = 'use file input blocks',
-  ANALYTICS = 'unlock in-depth analytics',
-}
-
 type ChangePlanModalProps = {
   type?: LimitReached
   isOpen: boolean

apps/builder/src/features/billing/components/CurrentSubscriptionSummary.tsx

@@ -2,20 +2,20 @@ import { Text, HStack, Link, Spinner, Stack, Heading } from '@chakra-ui/react'
 import { useToast } from '@/hooks/useToast'
 import { Plan } from '@typebot.io/prisma'
 import React from 'react'
-import { PlanTag } from '../PlanTag'
+import { PlanTag } from './PlanTag'
 import { BillingPortalButton } from './BillingPortalButton'
 import { trpc } from '@/lib/trpc'
 import { Workspace } from '@typebot.io/schemas'
 
-type CurrentSubscriptionContentProps = {
+type Props = {
   workspace: Pick<Workspace, 'id' | 'plan' | 'stripeId'>
   onCancelSuccess: () => void
 }
 
-export const CurrentSubscriptionContent = ({
+export const CurrentSubscriptionSummary = ({
   workspace,
   onCancelSuccess,
-}: CurrentSubscriptionContentProps) => {
+}: Props) => {
   const { showToast } = useToast()
 
   const { mutate: cancelSubscription, isLoading: isCancelling } =

apps/builder/src/features/billing/components/PreCheckoutModal.tsx

@@ -1,6 +1,6 @@
 import { TextInput } from '@/components/inputs'
 import { Select } from '@/components/inputs/Select'
-import { useParentModal } from '@/features/graph'
+import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 import {

apps/builder/src/features/billing/components/ProPlanPricingCard.tsx

@@ -15,7 +15,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from '@/components/icons'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { Plan } from '@typebot.io/prisma'
 import { useEffect, useState } from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
@@ -27,10 +27,10 @@ import {
   getStorageLimit,
   storageLimit,
 } from '@typebot.io/lib/pricing'
-import { FeaturesList } from './components/FeaturesList'
+import { FeaturesList } from './FeaturesList'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 
-type ProPlanContentProps = {
+type Props = {
   initialChatsLimitIndex?: number
   initialStorageLimitIndex?: number
   currency?: 'usd' | 'eur'
@@ -41,13 +41,13 @@ type ProPlanContentProps = {
   }) => void
 }
 
-export const ProPlanContent = ({
+export const ProPlanPricingCard = ({
   initialChatsLimitIndex,
   initialStorageLimitIndex,
   currency,
   isLoading,
   onPayClick,
-}: ProPlanContentProps) => {
+}: Props) => {
   const { workspace } = useWorkspace()
   const [selectedChatsLimitIndex, setSelectedChatsLimitIndex] =
     useState<number>()

apps/builder/src/features/billing/components/StarterPlanPricingCard.tsx

@@ -11,7 +11,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { ChevronLeftIcon } from '@/components/icons'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { Plan } from '@typebot.io/prisma'
 import { useEffect, useState } from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
@@ -23,10 +23,10 @@ import {
   getStorageLimit,
   storageLimit,
 } from '@typebot.io/lib/pricing'
-import { FeaturesList } from './components/FeaturesList'
+import { FeaturesList } from './FeaturesList'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 
-type StarterPlanContentProps = {
+type Props = {
   initialChatsLimitIndex?: number
   initialStorageLimitIndex?: number
   currency?: 'eur' | 'usd'
@@ -37,13 +37,13 @@ type StarterPlanContentProps = {
   }) => void
 }
 
-export const StarterPlanContent = ({
+export const StarterPlanPricingCard = ({
   initialChatsLimitIndex,
   initialStorageLimitIndex,
   isLoading,
   currency,
   onPayClick,
-}: StarterPlanContentProps) => {
+}: Props) => {
   const { workspace } = useWorkspace()
   const [selectedChatsLimitIndex, setSelectedChatsLimitIndex] =
     useState<number>()

apps/builder/src/features/billing/components/UpgradeButton.tsx

@@ -1,9 +1,9 @@
 import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
 import { isNotDefined } from '@typebot.io/lib'
 import { ChangePlanModal } from './ChangePlanModal'
-import { LimitReached } from './ChangePlanModal'
+import { LimitReached } from '../types'
 
 type Props = { limitReachedType?: LimitReached } & ButtonProps
 

apps/builder/src/features/billing/components/UsageProgressBars.tsx

@@ -13,14 +13,14 @@ import { Plan, Workspace } from '@typebot.io/prisma'
 import React from 'react'
 import { parseNumberWithCommas } from '@typebot.io/lib'
 import { getChatsLimit, getStorageLimit } from '@typebot.io/lib/pricing'
-import { storageToReadable } from './helpers'
 import { trpc } from '@/lib/trpc'
+import { storageToReadable } from '../helpers/storageToReadable'
 
 type Props = {
   workspace: Workspace
 }
 
-export const UsageContent = ({ workspace }: Props) => {
+export const UsageProgressBars = ({ workspace }: Props) => {
   const { data, isLoading } = trpc.billing.getUsage.useQuery({
     workspaceId: workspace.id,
   })

apps/builder/src/features/billing/helpers/isFreePlan.ts

@@ -0,0 +1,5 @@
+import { isNotDefined } from '@typebot.io/lib'
+import { Workspace, Plan } from '@typebot.io/prisma'
+
+export const isFreePlan = (workspace?: Pick<Workspace, 'plan'>) =>
+  isNotDefined(workspace) || workspace?.plan === Plan.FREE

apps/builder/src/features/billing/helpers/isProPlan.ts

@@ -0,0 +1,9 @@
+import { isDefined } from '@typebot.io/lib'
+import { Workspace, Plan } from '@typebot.io/prisma'
+
+export const isProPlan = (workspace?: Pick<Workspace, 'plan'>) =>
+  isDefined(workspace) &&
+  (workspace.plan === Plan.PRO ||
+    workspace.plan === Plan.LIFETIME ||
+    workspace.plan === Plan.CUSTOM ||
+    workspace.plan === Plan.UNLIMITED)

apps/builder/src/features/billing/helpers/planToReadable.ts

@@ -0,0 +1,17 @@
+import { Plan } from '@typebot.io/prisma'
+
+export const planToReadable = (plan?: Plan) => {
+  if (!plan) return
+  switch (plan) {
+    case Plan.FREE:
+      return 'Free'
+    case Plan.LIFETIME:
+      return 'Lifetime'
+    case Plan.OFFERED:
+      return 'Offered'
+    case Plan.PRO:
+      return 'Pro'
+    case Plan.UNLIMITED:
+      return 'Unlimited'
+  }
+}

apps/builder/src/features/billing/index.ts

@@ -1,6 +0,0 @@
-export { ChangePlanModal, LimitReached } from './components/ChangePlanModal'
-export { planToReadable, isFreePlan, isProPlan } from './utils'
-export { BillingContent } from './components/BillingContent'
-export { LockTag } from './components/LockTag'
-export { UpgradeButton } from './components/UpgradeButton'
-export { PlanTag } from './components/PlanTag'

apps/builder/src/features/billing/types.ts

@@ -0,0 +1,7 @@
+export enum LimitReached {
+  BRAND = 'remove branding',
+  CUSTOM_DOMAIN = 'add custom domains',
+  FOLDER = 'create folders',
+  FILE_INPUT = 'use file input blocks',
+  ANALYTICS = 'unlock in-depth analytics',
+}

apps/builder/src/features/billing/utils.ts

@@ -1,28 +0,0 @@
-import { Plan, Workspace } from '@typebot.io/prisma'
-import { isDefined, isNotDefined } from '@typebot.io/lib'
-
-export const planToReadable = (plan?: Plan) => {
-  if (!plan) return
-  switch (plan) {
-    case Plan.FREE:
-      return 'Free'
-    case Plan.LIFETIME:
-      return 'Lifetime'
-    case Plan.OFFERED:
-      return 'Offered'
-    case Plan.PRO:
-      return 'Pro'
-    case Plan.UNLIMITED:
-      return 'Unlimited'
-  }
-}
-
-export const isFreePlan = (workspace?: Pick<Workspace, 'plan'>) =>
-  isNotDefined(workspace) || workspace?.plan === Plan.FREE
-
-export const isProPlan = (workspace?: Pick<Workspace, 'plan'>) =>
-  isDefined(workspace) &&
-  (workspace.plan === Plan.PRO ||
-    workspace.plan === Plan.LIFETIME ||
-    workspace.plan === Plan.CUSTOM ||
-    workspace.plan === Plan.UNLIMITED)

apps/builder/src/features/blocks/bubbles/audio/components/index.ts

@@ -1,2 +0,0 @@
-export * from './AudioBubbleNode'
-export * from './AudioBubbleIcon'

apps/builder/src/features/blocks/bubbles/audio/index.ts

@@ -1 +0,0 @@
-export * from './components'

apps/builder/src/features/blocks/bubbles/embed/index.ts

@@ -1,3 +0,0 @@
-export { EmbedBubbleContent } from './components/EmbedBubbleContent'
-export { EmbedUploadContent } from './components/EmbedUploadContent'
-export { EmbedBubbleIcon } from './components/EmbedBubbleIcon'

apps/builder/src/features/blocks/bubbles/image/index.ts

@@ -1,2 +0,0 @@
-export { ImageBubbleContent } from './components/ImageBubbleContent'
-export { ImageBubbleIcon } from './components/ImageBubbleIcon'

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleContent.tsx

@@ -1,9 +1,9 @@
 import { Flex } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { TextBubbleBlock } from '@typebot.io/schemas'
 import React from 'react'
-import { parseVariableHighlight } from '@/utils/helpers'
 import { isEmpty } from '@typebot.io/lib'
+import { parseVariableHtmlTags } from '@/features/variables/helpers/parseVariableHtmlTags'
 
 type Props = {
   block: TextBubbleBlock
@@ -11,7 +11,6 @@ type Props = {
 
 export const TextBubbleContent = ({ block }: Props) => {
   const { typebot } = useTypebot()
-  if (!typebot) return <></>
   return (
     <Flex
       w="90%"
@@ -22,7 +21,7 @@ export const TextBubbleContent = ({ block }: Props) => {
       dangerouslySetInnerHTML={{
         __html: isEmpty(block.content.plainText)
           ? `<p>Click to edit...</p>`
-          : parseVariableHighlight(block.content.html, typebot),
+          : parseVariableHtmlTags(block.content.html, typebot?.variables ?? []),
       }}
     />
   )

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -8,7 +8,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { Plate, PlateProvider, usePlateEditorRef } from '@udecode/plate-core'
 import { editorStyle, platePlugins } from '@/lib/plate'
 import { BaseEditor, BaseSelection, Transforms } from 'slate'
-import { ToolBar } from './ToolBar'
 import {
   defaultTextBubbleContent,
   TextBubbleContent,
@@ -16,11 +15,12 @@ import {
 } from '@typebot.io/schemas'
 import { ReactEditor } from 'slate-react'
 import { serializeHtml } from '@udecode/plate-serializer-html'
-import { parseHtmlStringToPlainText } from '../../utils'
+import { parseHtmlStringToPlainText } from '../utils'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { colors } from '@/lib/theme'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { selectEditor, TElement } from '@udecode/plate-common'
+import { TextEditorToolBar } from './TextEditorToolBar'
 
 type TextBubbleEditorContentProps = {
   id: string
@@ -130,7 +130,9 @@ const TextBubbleEditorContent = ({
         },
       }}
     >
-      <ToolBar onVariablesButtonClick={() => setIsVariableDropdownOpen(true)} />
+      <TextEditorToolBar
+        onVariablesButtonClick={() => setIsVariableDropdownOpen(true)}
+      />
       <Plate
         id={id}
         editableProps={{

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor/index.tsx

@@ -1 +0,0 @@
-export { TextBubbleEditor } from './TextBubbleEditor'

apps/builder/src/features/blocks/bubbles/textBubble/components/TextEditorToolBar.tsx

@@ -24,7 +24,10 @@ type Props = {
   onVariablesButtonClick: () => void
 } & StackProps
 
-export const ToolBar = ({ onVariablesButtonClick, ...props }: Props) => {
+export const TextEditorToolBar = ({
+  onVariablesButtonClick,
+  ...props
+}: Props) => {
   const editor = usePlateEditorRef()
   const handleVariablesButtonMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation()

apps/builder/src/features/blocks/bubbles/textBubble/index.ts

@@ -1,3 +0,0 @@
-export { TextBubbleEditor } from './components/TextBubbleEditor'
-export { TextBubbleContent } from './components/TextBubbleContent'
-export { TextBubbleIcon } from './components/TextBubbleIcon'

apps/builder/src/features/blocks/bubbles/video/index.ts

@@ -1,3 +0,0 @@
-export { VideoUploadContent } from './components/VideoUploadContent'
-export { VideoBubbleContent } from './components/VideoBubbleContent'
-export { VideoBubbleIcon } from './components/VideoBubbleIcon'

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx

@@ -1,9 +1,9 @@
 import { BlockIndices, ChoiceInputBlock } from '@typebot.io/schemas'
 import React from 'react'
-import { ItemNodesList } from '@/features/graph/components/Nodes/ItemNode'
 import { Stack, Tag, Text, Wrap } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { SetVariableLabel } from '@/components/SetVariableLabel'
+import { ItemNodesList } from '@/features/graph/components/nodes/item/ItemNodesList'
 
 type Props = {
   block: ChoiceInputBlock

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx

@@ -7,7 +7,7 @@ import {
   Flex,
 } from '@chakra-ui/react'
 import { PlusIcon } from '@/components/icons'
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { ButtonItem, ItemIndices, ItemType } from '@typebot.io/schemas'
 import React, { useRef, useState } from 'react'
 import { isNotDefined } from '@typebot.io/lib'

apps/builder/src/features/blocks/inputs/buttons/components/index.ts

@@ -1,3 +0,0 @@
-export * from './ButtonsItemNode'
-export * from './ButtonsIcon'
-export * from './ButtonsBlockSettings'

apps/builder/src/features/blocks/inputs/buttons/index.ts

@@ -1 +0,0 @@
-export * from './components'

apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx

@@ -5,15 +5,12 @@ import { FormLabel, Stack } from '@chakra-ui/react'
 import { DateInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type DateInputSettingsBodyProps = {
+type Props = {
   options: DateInputOptions
   onOptionsChange: (options: DateInputOptions) => void
 }
 
-export const DateInputSettingsBody = ({
-  options,
-  onOptionsChange,
-}: DateInputSettingsBodyProps) => {
+export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
   const handleFromChange = (from: string) =>
     onOptionsChange({ ...options, labels: { ...options?.labels, from } })
   const handleToChange = (to: string) =>

apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/date/index.ts

@@ -1,3 +0,0 @@
-export { DateInputSettingsBody } from './components/DateInputSettingsBody'
-export { DateNodeContent } from './components/DateNodeContent'
-export { DateInputIcon } from './components/DateInputIcon'

apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputNodeContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { EmailInputBlock } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx

@@ -4,15 +4,12 @@ import { FormLabel, Stack } from '@chakra-ui/react'
 import { EmailInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type EmailInputSettingsBodyProps = {
+type Props = {
   options: EmailInputOptions
   onOptionsChange: (options: EmailInputOptions) => void
 }
 
-export const EmailInputSettingsBody = ({
-  options,
-  onOptionsChange,
-}: EmailInputSettingsBodyProps) => {
+export const EmailInputSettings = ({ options, onOptionsChange }: Props) => {
   const handlePlaceholderChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>

apps/builder/src/features/blocks/inputs/emailInput/index.ts

@@ -1,3 +0,0 @@
-export { EmailInputSettingsBody } from './components/EmailInputSettingsBody'
-export { EmailInputNodeContent } from './components/EmailInputNodeContent'
-export { EmailInputIcon } from './components/EmailInputIcon'

apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx

@@ -1,4 +1,4 @@
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 import { Text } from '@chakra-ui/react'
 import { FileInputOptions } from '@typebot.io/schemas'
 

apps/builder/src/features/blocks/inputs/fileUpload/index.ts

@@ -1,3 +0,0 @@
-export { FileInputSettings } from './components/FileInputSettings'
-export { FileInputContent } from './components/FileInputContent'
-export { FileInputIcon } from './components/FileInputIcon'

apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx

@@ -1,29 +1,23 @@
 import { TextInput, NumberInput } from '@/components/inputs'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
-import { removeUndefinedFields } from '@/utils/helpers'
 import { FormLabel, Stack } from '@chakra-ui/react'
 import { NumberInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type NumberInputSettingsBodyProps = {
+type Props = {
   options: NumberInputOptions
   onOptionsChange: (options: NumberInputOptions) => void
 }
 
-export const NumberInputSettingsBody = ({
-  options,
-  onOptionsChange,
-}: NumberInputSettingsBodyProps) => {
+export const NumberInputSettings = ({ options, onOptionsChange }: Props) => {
   const handlePlaceholderChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, button } })
-  const handleMinChange = (min?: number) =>
-    onOptionsChange(removeUndefinedFields({ ...options, min }))
-  const handleMaxChange = (max?: number) =>
-    onOptionsChange(removeUndefinedFields({ ...options, max }))
-  const handleBlockChange = (block?: number) =>
-    onOptionsChange(removeUndefinedFields({ ...options, block }))
+  const handleMinChange = (min?: number) => onOptionsChange({ ...options, min })
+  const handleMaxChange = (max?: number) => onOptionsChange({ ...options, max })
+  const handleStepChange = (step?: number) =>
+    onOptionsChange({ ...options, step })
   const handleVariableChange = (variable?: Variable) => {
     onOptionsChange({ ...options, variableId: variable?.id })
   }
@@ -55,7 +49,7 @@ export const NumberInputSettingsBody = ({
       <NumberInput
         label="Step:"
         defaultValue={options.step}
-        onValueChange={handleBlockChange}
+        onValueChange={handleStepChange}
         withVariableButton={false}
       />
       <Stack>

apps/builder/src/features/blocks/inputs/number/components/NumberNodeContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { NumberInputBlock } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/number/index.ts

@@ -1,3 +0,0 @@
-export { NumberInputSettingsBody } from './components/NumberInputSettingsBody'
-export { NumberNodeContent } from './components/NumberNodeContent'
-export { NumberInputIcon } from './components/NumberInputIcon'

apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx

@@ -13,9 +13,9 @@ import {
 import { DropdownList } from '@/components/DropdownList'
 import { PaymentInputOptions, PaymentProvider } from '@typebot.io/schemas'
 import React, { ChangeEvent } from 'react'
-import { currencies } from './currencies'
+import { currencies } from '../currencies'
 import { StripeConfigModal } from './StripeConfigModal'
-import { CredentialsDropdown } from '@/features/credentials'
+import { CredentialsDropdown } from '@/features/credentials/components/CredentialsDropdown'
 import { TextInput } from '@/components/inputs'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 

apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings/index.ts

@@ -1 +0,0 @@
-export { PaymentSettings } from './PaymentSettings'

apps/builder/src/features/blocks/inputs/payment/components/StripeConfigModal.tsx

@@ -13,9 +13,8 @@ import {
   Text,
   HStack,
 } from '@chakra-ui/react'
-import { useUser } from '@/features/account'
 import React, { useState } from 'react'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { useToast } from '@/hooks/useToast'
 import { TextInput } from '@/components/inputs'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
@@ -23,6 +22,7 @@ import { TextLink } from '@/components/TextLink'
 import { StripeCredentials } from '@typebot.io/schemas'
 import { trpc } from '@/lib/trpc'
 import { isNotEmpty } from '@typebot.io/lib'
+import { useUser } from '@/features/account/hooks/useUser'
 
 type Props = {
   isOpen: boolean

apps/builder/src/features/blocks/inputs/payment/index.ts

@@ -1,3 +0,0 @@
-export { PaymentSettings } from './components/PaymentSettings'
-export { PaymentInputContent } from './components/PaymentInputContent'
-export { PaymentInputIcon } from './components/PaymentInputIcon'

apps/builder/src/features/blocks/inputs/phone/components/PhoneInputSettings.tsx

@@ -5,15 +5,12 @@ import { PhoneNumberInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 import { CountryCodeSelect } from './CountryCodeSelect'
 
-type PhoneNumberSettingsBodyProps = {
+type Props = {
   options: PhoneNumberInputOptions
   onOptionsChange: (options: PhoneNumberInputOptions) => void
 }
 
-export const PhoneNumberSettingsBody = ({
-  options,
-  onOptionsChange,
-}: PhoneNumberSettingsBodyProps) => {
+export const PhoneInputSettings = ({ options, onOptionsChange }: Props) => {
   const handlePlaceholderChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>

apps/builder/src/features/blocks/inputs/phone/components/PhoneNodeContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { PhoneNumberInputOptions } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   variableId?: string

apps/builder/src/features/blocks/inputs/phone/components/PhoneNumberSettingsBody/index.tsx

@@ -1 +0,0 @@
-export { PhoneNumberSettingsBody } from './PhoneNumberSettingsBody'

apps/builder/src/features/blocks/inputs/phone/index.ts

@@ -1,3 +0,0 @@
-export { PhoneNumberSettingsBody } from './components/PhoneNumberSettingsBody'
-export { PhoneNodeContent } from './components/PhoneNodeContent'
-export { PhoneInputIcon } from './components/PhoneInputIcon'

apps/builder/src/features/blocks/inputs/rating/components/RatingInputContent.tsx

@@ -1,4 +1,4 @@
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 import { Text } from '@chakra-ui/react'
 import { RatingInputBlock } from '@typebot.io/schemas'
 

apps/builder/src/features/blocks/inputs/rating/components/RatingInputSettings.tsx

@@ -6,15 +6,12 @@ import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
 import { TextInput } from '@/components/inputs'
 import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 
-type RatingInputSettingsProps = {
+type Props = {
   options: RatingInputOptions
   onOptionsChange: (options: RatingInputOptions) => void
 }
 
-export const RatingInputSettings = ({
-  options,
-  onOptionsChange,
-}: RatingInputSettingsProps) => {
+export const RatingInputSettings = ({ options, onOptionsChange }: Props) => {
   const handleLengthChange = (length: number) =>
     onOptionsChange({ ...options, length })
 

apps/builder/src/features/blocks/inputs/rating/index.ts

@@ -1,3 +0,0 @@
-export { RatingInputSettings } from './components/RatingInputSettings'
-export { RatingInputContent } from './components/RatingInputContent'
-export { RatingInputIcon } from './components/RatingInputIcon'

apps/builder/src/features/blocks/inputs/textInput/components/TextInputNodeContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { TextInputOptions } from '@typebot.io/schemas'
-import { WithVariableContent } from '@/features/graph/components/Nodes/BlockNode/BlockNodeContent/WithVariableContent'
+import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
 
 type Props = {
   placeholder: TextInputOptions['labels']['placeholder']

apps/builder/src/features/blocks/inputs/textInput/components/TextInputSettings.tsx

@@ -5,15 +5,12 @@ import { FormLabel, Stack } from '@chakra-ui/react'
 import { TextInputOptions, Variable } from '@typebot.io/schemas'
 import React from 'react'
 
-type TextInputSettingsBodyProps = {
+type Props = {
   options: TextInputOptions
   onOptionsChange: (options: TextInputOptions) => void
 }
 
-export const TextInputSettingsBody = ({
-  options,
-  onOptionsChange,
-}: TextInputSettingsBodyProps) => {
+export const TextInputSettings = ({ options, onOptionsChange }: Props) => {
   const handlePlaceholderChange = (placeholder: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>