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

apps/builder/src/components/ImageUploadContent/UploadButton.tsx

@@ -1,8 +1,8 @@
 import { useToast } from '@/hooks/useToast'
-import { compressFile } from '@/utils/helpers'
 import { Button, ButtonProps, chakra } from '@chakra-ui/react'
 import { ChangeEvent, useState } from 'react'
 import { uploadFiles } from '@typebot.io/lib'
+import { compressFile } from '@/helpers/compressFile'
 
 type UploadButtonProps = {
   fileType: 'image' | 'audio'

apps/builder/src/components/NewVersionPopup.tsx

@@ -1,4 +1,4 @@
-import { useTypebot } from '@/features/editor'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { trpc } from '@/lib/trpc'
 import {
   Button,

apps/builder/src/components/SupportBubble.tsx

@@ -1,10 +1,10 @@
-import { useTypebot } from '@/features/editor'
-import { useUser } from '@/features/account'
-import { useWorkspace } from '@/features/workspace'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
+import { useUser } from '@/features/account/hooks/useUser'
+import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import React from 'react'
 import { Bubble } from '@typebot.io/react'
-import { planToReadable } from '@/features/billing'
-import { isCloudProdInstance } from '@/utils/helpers'
+import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
+import { planToReadable } from '@/features/billing/helpers/planToReadable'
 
 export const SupportBubble = () => {
   const { typebot } = useTypebot()

apps/builder/src/components/UnlockPlanAlertInfo.tsx

@@ -8,7 +8,8 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import React from 'react'
-import { ChangePlanModal, LimitReached } from '@/features/billing'
+import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
+import { LimitReached } from '@/features/billing/types'
 
 export const UnlockPlanAlertInfo = ({
   contentLabel,

apps/builder/src/components/inputs/AutocompleteInput.tsx

@@ -16,10 +16,10 @@ import { useDebouncedCallback } from 'use-debounce'
 import { env, isDefined } from '@typebot.io/lib'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import { Variable } from '@typebot.io/schemas'
-import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
-import { focusInput } from '@/utils/focusInput'
+import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
+import { focusInput } from '@/helpers/focusInput'
 import { MoreInfoTooltip } from '../MoreInfoTooltip'
 
 type Props = {

apps/builder/src/components/inputs/CodeEditor.tsx

@@ -7,7 +7,7 @@ import {
 } from '@chakra-ui/react'
 import { useEffect, useRef, useState } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import { Variable } from '@typebot.io/schemas'
 import { env } from '@typebot.io/lib'
 import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'

apps/builder/src/components/inputs/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { VariablesButton } from '@/features/variables'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import {
   NumberInputProps,
   NumberInput as ChakraNumberInput,

apps/builder/src/components/inputs/TextInput.tsx

@@ -1,6 +1,6 @@
-import { VariablesButton } from '@/features/variables'
-import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
-import { focusInput } from '@/utils/focusInput'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
+import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
+import { focusInput } from '@/helpers/focusInput'
 import {
   FormControl,
   FormHelperText,

apps/builder/src/components/inputs/Textarea.tsx

@@ -1,6 +1,6 @@
-import { VariablesButton } from '@/features/variables'
-import { injectVariableInText } from '@/features/variables/utils/injectVariableInTextInput'
-import { focusInput } from '@/utils/focusInput'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
+import { injectVariableInText } from '@/features/variables/helpers/injectVariableInTextInput'
+import { focusInput } from '@/helpers/focusInput'
 import {
   FormControl,
   FormLabel,

apps/builder/src/components/inputs/VariableSearchInput.tsx

@@ -15,7 +15,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { EditIcon, PlusIcon, TrashIcon } from '@/components/icons'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider/TypebotProvider'
+import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { createId } from '@paralleldrive/cuid2'
 import { Variable } from '@typebot.io/schemas'
 import React, { useState, useRef, ChangeEvent, useEffect } from 'react'

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

@@ -1,20 +1,14 @@
 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'
 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/MyAccountForm/ApiTokensList/ApiTokensList.tsx → 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/MyAccountForm/ApiTokensList/CreateTokenModal.tsx → 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/MyAccountForm.tsx → 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/UserPreferenceForm/UserPreferencesForm.tsx → 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/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/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/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/billing/api/procedures/cancelSubscription.ts → 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/procedures/createCheckoutSession.ts → 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/procedures/getBillingPortalUrl.ts → 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/procedures/getSubscription.ts → 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/procedures/getUsage.ts → 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/procedures/listInvoices.ts → 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/procedures/updateSubscription.ts → 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/BillingContent.tsx → 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}
         />