♻️ Add shared eslint config

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint

apps/builder/.eslintrc.js

@@ -1,43 +1,4 @@
 module.exports = {
-  ignorePatterns: ['node_modules'],
-  env: {
-    browser: true,
-    es6: true,
-  },
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'next/core-web-vitals',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module', // Allows for the use of imports
-    ecmaFeatures: {
-      jsx: true, // Allows for the parsing of JSX
-    },
-  },
-  settings: {
-    react: {
-      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
-    },
-  },
-  plugins: ['react', '@typescript-eslint'],
-  rules: {
-    'react/no-unescaped-entities': [0],
-    'react/display-name': [0],
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          '*/src/*',
-          'src/*',
-          '*/src',
-          '@/features/*/*',
-          '!@/features/blocks/*',
-          '!@/features/*/api',
-        ],
-      },
-    ],
-  },
+  root: true,
+  extends: ['custom'],
 }

apps/builder/package.json

@@ -106,20 +106,16 @@
     "@types/qs": "6.9.7",
     "@types/react": "18.0.25",
     "@types/tinycolor2": "1.4.3",
-    "@typescript-eslint/eslint-plugin": "5.43.0",
-    "@typescript-eslint/parser": "5.43.0",
-    "configs": "workspace:*",
     "db": "workspace:*",
     "dotenv": "16.0.3",
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.3",
-    "eslint-plugin-react": "7.31.10",
     "models": "workspace:*",
     "next-transpile-modules": "10.0.0",
     "superjson": "^1.11.0",
     "tsconfig": "workspace:*",
     "typescript": "4.8.4",
     "utils": "workspace:*",
-    "zod": "3.19.1"
+    "zod": "3.19.1",
+    "eslint": "8.28.0",
+    "eslint-config-custom": "workspace:*"
   }
 }

apps/builder/playwright.config.ts

@@ -1,6 +1,6 @@
 import { PlaywrightTestConfig } from '@playwright/test'
 import path from 'path'
-import { playwrightBaseConfig } from 'configs/playwright'
+import { playwrightBaseConfig } from 'utils/playwright/baseConfig'
 
 const config: PlaywrightTestConfig = {
   ...playwrightBaseConfig,

apps/builder/src/components/SearchableDropdown.tsx

@@ -36,7 +36,6 @@ export const SearchableDropdown = ({
   const { onOpen, onClose, isOpen } = useDisclosure()
   const [inputValue, setInputValue] = useState(selectedItem ?? '')
   const debounced = useDebouncedCallback(
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onValueChange ? onValueChange : () => {},
     env('E2E_TEST') === 'true' ? 0 : debounceTimeout
   )

apps/builder/src/components/VariableSearchInput.tsx

@@ -209,7 +209,7 @@ export const VariableSearchInput = ({
               leftIcon={<PlusIcon />}
               bgColor={keyboardFocusIndex === 0 ? 'gray.200' : 'transparent'}
             >
-              Create "{inputValue}"
+              Create &quot;{inputValue}&quot;
             </Button>
           )}
           {filteredItems.length > 0 && (

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

@@ -24,7 +24,6 @@ const userContext = createContext<{
   currentWorkspaceId?: string
   updateUser: (newUser: Partial<User>) => void
   saveUser: (newUser?: Partial<User>) => Promise<void>
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})
 

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

@@ -24,7 +24,7 @@ export const SignInPage = ({ type }: Props) => {
       </Heading>
       {type === 'signin' ? (
         <Text>
-          Don't have an account?{' '}
+          Don&apos;t have an account?{' '}
           <TextLink href="/register">Sign up for free</TextLink>
         </Text>
       ) : (

apps/builder/src/features/billing/components/BillingContent/UsageContent/UsageContent.tsx

@@ -52,8 +52,8 @@ export const UsageContent = ({ workspace }: Props) => {
                 p="3"
                 label={
                   <Text>
-                    Your typebots are popular! You will soon reach your plan's
-                    chats limit. 🚀
+                    Your typebots are popular! You will soon reach your
+                    plan&apos;s chats limit. 🚀
                     <br />
                     <br />
                     Make sure to <strong>update your plan</strong> to increase
@@ -111,8 +111,8 @@ export const UsageContent = ({ workspace }: Props) => {
                   p="3"
                   label={
                     <Text>
-                      Your typebots are popular! You will soon reach your plan's
-                      storage limit. 🚀
+                      Your typebots are popular! You will soon reach your
+                      plan&apos;s storage limit. 🚀
                       <br />
                       <br />
                       Make sure to <strong>update your plan</strong> in order to

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

@@ -90,7 +90,7 @@ export const ChangePlanForm = () => {
       <Text color="gray.500">
         Need custom limits? Specific features?{' '}
         <TextLink href={'https://typebot.io/enterprise-lead-form'} isExternal>
-          Let's chat!
+          Let&apos;s chat!
         </TextLink>
       </Text>
     </Stack>

apps/builder/src/features/blocks/integrations/googleSheets/components/GoogleSheetsSettingsBody/GoogleSheetsSettingsBody.tsx

@@ -162,14 +162,20 @@ const ActionOptions = ({
     onOptionsChange({ ...options, cellsToExtract } as GoogleSheetsOptions)
 
   const UpdatingCellItem = useMemo(
-    () => (props: TableListItemProps<Cell>) =>
-      <CellWithValueStack {...props} columns={sheet?.columns ?? []} />,
+    () =>
+      function Component(props: TableListItemProps<Cell>) {
+        return <CellWithValueStack {...props} columns={sheet?.columns ?? []} />
+      },
     [sheet?.columns]
   )
 
   const ExtractingCellItem = useMemo(
-    () => (props: TableListItemProps<ExtractingCell>) =>
-      <CellWithVariableIdStack {...props} columns={sheet?.columns ?? []} />,
+    () =>
+      function Component(props: TableListItemProps<ExtractingCell>) {
+        return (
+          <CellWithVariableIdStack {...props} columns={sheet?.columns ?? []} />
+        )
+      },
     [sheet?.columns]
   )
 

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings/WebhookSettings.tsx

@@ -143,8 +143,10 @@ export const WebhookSettings = ({
   }
 
   const ResponseMappingInputs = useMemo(
-    () => (props: TableListItemProps<ResponseVariableMapping>) =>
-      <DataVariableInputs {...props} dataItems={responseKeys} />,
+    () =>
+      function Component(props: TableListItemProps<ResponseVariableMapping>) {
+        return <DataVariableInputs {...props} dataItems={responseKeys} />
+      },
     [responseKeys]
   )
 

apps/builder/src/features/blocks/integrations/webhook/utils/getDeepKeys.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getDeepKeys = (obj: any): string[] => {
   let keys: string[] = []
   for (const key in obj) {

apps/builder/src/features/dashboard/components/AnnoucementModal.tsx

@@ -36,7 +36,7 @@ export const AnnoucementModal = ({ isOpen, onClose }: Props) => {
     <Modal isOpen={isOpen} onClose={handleCloseClick} size="2xl">
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>What's new in Typebot 2.0?</ModalHeader>
+        <ModalHeader>What&apos;s new in Typebot 2.0?</ModalHeader>
         <ModalCloseButton />
         <ModalBody as={Stack} spacing="6" pb="10">
           <Text>Typebo 2.0 has been launched February the 15th 🎉.</Text>

apps/builder/src/features/dashboard/components/OnboardingModal.tsx

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react'
 import { TypebotViewer } from 'bot-engine'
 import { useUser } from '@/features/account'
-import { Answer, Typebot } from 'models'
+import { AnswerInput, Typebot } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { getViewerUrl, sendRequest } from 'utils'
 import confetti from 'canvas-confetti'
@@ -79,7 +79,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
     setTypebot(data as Typebot)
   }
 
-  const handleNewAnswer = async (answer: Answer) => {
+  const handleNewAnswer = async (answer: AnswerInput) => {
     const isName = answer.variableId === 'cl126f4hf000i2e6d8zvzc3t1'
     const isCompany = answer.variableId === 'cl126jqww000w2e6dq9yv4ifq'
     const isCategories = answer.variableId === 'cl126mo3t001b2e6dvyi16bkd'

apps/builder/src/features/editor/hooks/useUndo.ts

@@ -11,7 +11,7 @@ enum ActionType {
   Flush = 'FLUSH',
 }
 
-export interface Actions<T> {
+export interface Actions<T extends { updatedAt: string } | undefined> {
   set: (
     newPresent: T | ((current: T) => T),
     options?: { updateDate: boolean }
@@ -24,13 +24,13 @@ export interface Actions<T> {
   presentRef: React.MutableRefObject<T>
 }
 
-interface Action<T> {
+interface Action<T extends { updatedAt: string } | undefined> {
   type: ActionType
   newPresent?: T
   updateDate?: boolean
 }
 
-export interface State<T> {
+export interface State<T extends { updatedAt: string } | undefined> {
   past: T[]
   present: T
   future: T[]
@@ -42,7 +42,10 @@ const initialState = {
   future: [],
 }
 
-const reducer = <T>(state: State<T>, action: Action<T>) => {
+const reducer = <T extends { updatedAt: string } | undefined>(
+  state: State<T>,
+  action: Action<T>
+) => {
   const { past, present, future } = state
 
   switch (action.type) {
@@ -98,8 +101,6 @@ const reducer = <T>(state: State<T>, action: Action<T>) => {
         past: [...past, present].filter(isDefined),
         present: {
           ...newPresent,
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
           updatedAt: updateDate ? new Date() : newPresent.updatedAt,
         },
         future: [],
@@ -111,11 +112,13 @@ const reducer = <T>(state: State<T>, action: Action<T>) => {
   }
 }
 
-const useUndo = <T>(initialPresent: T): [State<T>, Actions<T>] => {
+const useUndo = <T extends { updatedAt: string } | undefined>(
+  initialPresent: T
+): [State<T>, Actions<T>] => {
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
     present: initialPresent,
-  }) as [State<T>, React.Dispatch<Action<T>>]
+  })
   const presentRef = useRef<T>(initialPresent)
 
   const canUndo = state.past.length !== 0
@@ -136,7 +139,7 @@ const useUndo = <T>(initialPresent: T): [State<T>, Actions<T>] => {
   const set = useCallback(
     (newPresent: T | ((current: T) => T), options = { updateDate: true }) => {
       const updatedTypebot =
-        'id' in newPresent
+        newPresent && 'id' in newPresent
           ? newPresent
           : (newPresent as (current: T) => T)(presentRef.current)
       presentRef.current = updatedTypebot
@@ -153,7 +156,10 @@ const useUndo = <T>(initialPresent: T): [State<T>, Actions<T>] => {
     dispatch({ type: ActionType.Flush })
   }, [])
 
-  return [state, { set, undo, redo, flush, canUndo, canRedo, presentRef }]
+  return [
+    state as State<T>,
+    { set, undo, redo, flush, canUndo, canRedo, presentRef },
+  ]
 }
 
 export default useUndo

apps/builder/src/features/editor/providers/EditorProvider.tsx

@@ -16,7 +16,6 @@ const editorContext = createContext<{
   setRightPanel: Dispatch<SetStateAction<RightPanel | undefined>>
   startPreviewAtGroup: string | undefined
   setStartPreviewAtGroup: Dispatch<SetStateAction<string | undefined>>
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})
 

apps/builder/src/features/editor/providers/TypebotProvider/TypebotProvider.tsx

@@ -88,7 +88,6 @@ const typebotContext = createContext<
     ItemsActions &
     VariablesActions &
     EdgesActions
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 >({})
 

apps/builder/src/features/folders/TypebotDndProvider.tsx

@@ -14,7 +14,6 @@ const typebotDndContext = createContext<{
   setDraggedTypebot: Dispatch<SetStateAction<TypebotInDashboard | undefined>>
   mouseOverFolderId?: string | null
   setMouseOverFolderId: Dispatch<SetStateAction<string | undefined | null>>
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
 }>({})