frontend: add ~ alias

twenty-frontend/src/js/components/App.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from "react";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import { ParamContext } from "/Context";
+import { ParamContext } from "~/Context";
 
 export function App({ children }: PropsWithChildren<{}>) {
   const client = new ApolloClient({

twenty-frontend/src/js/components/Group.tsx

@@ -1,8 +1,8 @@
-import type { Task } from "/types/schema";
+import type { Task } from "~/types/schema";
 import classnames from "classnames";
 import { DateTime } from "luxon";
 import { QueryResult } from "@apollo/client";
-import { TaskStatusSelect } from "/components/TaskStatusSelect";
+import { TaskStatusSelect } from "~/components/TaskStatusSelect";
 
 type Props = {
   groupName: string;

twenty-frontend/src/js/components/NavBar.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import { ParamContext } from "/Context";
+import { ParamContext } from "~/Context";
-import { Maybe } from "/types/schema";
+import { Maybe } from "~/types/schema";
-import { ProjectSelect } from "/components/ProjectSelect";
+import { ProjectSelect } from "~/components/ProjectSelect";
 const BASE_CLASSNAMES = ["block", "w-3/4", "no-underline", "p-3", "mt-2"];
 const ACTIVE_CLASSNAMES = [
   ...BASE_CLASSNAMES,

twenty-frontend/src/js/components/ProjectSelect.tsx

@@ -1,6 +1,6 @@
-import { useProjects } from "/hooks/queries/useProjects";
+import { useProjects } from "~/hooks/queries/useProjects";
-import { Project, Maybe } from "/types/schema";
+import { Project, Maybe } from "~/types/schema";
-import { Select, Option } from "/components/Select";
+import { Select, Option } from "~/components/Select";
 
 type Props = {
   selected: Maybe<string>;

twenty-frontend/src/js/components/Projects.tsx

@@ -1,8 +1,8 @@
-import { useSetRandomProjectColor } from "/hooks/mutations/useSetRandomProjectColor";
+import { useSetRandomProjectColor } from "~/hooks/mutations/useSetRandomProjectColor";
 import { useEffect } from "react";
-import { NavBar } from "/components/NavBar";
+import { NavBar } from "~/components/NavBar";
-import { useProjects } from "/hooks/queries/useProjects";
+import { useProjects } from "~/hooks/queries/useProjects";
-import { Project } from "/types/schema";
+import { Project } from "~/types/schema";
 
 export function Projects() {
   const { data, loading } = useProjects();

twenty-frontend/src/js/components/Task.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState, useContext } from "react";
-import { ParamContext } from "/Context";
+import { ParamContext } from "~/Context";
 import { useForm } from "react-hook-form";
-import { useCreateTask } from "/hooks/mutations/useCreateTask";
+import { useCreateTask } from "~/hooks/mutations/useCreateTask";
-import { useUpdateTask } from "/hooks/mutations/useUpdateTask";
+import { useUpdateTask } from "~/hooks/mutations/useUpdateTask";
-import { useFindTask } from "/hooks/queries/useFindTask";
+import { useFindTask } from "~/hooks/queries/useFindTask";
-import { useProjects } from "/hooks/queries/useProjects";
+import { useProjects } from "~/hooks/queries/useProjects";
-import { Task, Project, TaskInput, Maybe } from "/types/schema";
+import { Task, Project, TaskInput, Maybe } from "~/types/schema";
-import { rendermd } from "/lib/markdown-utils";
+import { rendermd } from "~/lib/markdown-utils";
-import { NavBar } from "/components/NavBar";
+import { NavBar } from "~/components/NavBar";
-import { Tabs, Tab } from "/components/Tabs";
+import { Tabs, Tab } from "~/components/Tabs";
 
 const DEFAULT_TASK_CONTENT = [
   "## Subtasks",

twenty-frontend/src/js/components/TaskStatusSelect.tsx

@@ -1,6 +1,6 @@
-import { Task, TaskStatus } from "/types/schema";
+import { Task, TaskStatus } from "~/types/schema";
-import { useUpdateTask } from "hooks/mutations/useUpdateTask";
+import { useUpdateTask } from "~/hooks/mutations/useUpdateTask";
-import { GET_TASKS } from "/hooks/queries/useTasks";
+import { GET_TASKS } from "~/hooks/queries/useTasks";
 
 type Props = {
   task: Task;

twenty-frontend/src/js/components/Tasks.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useContext } from "react";
-import { ParamContext } from "/Context";
+import { ParamContext } from "~/Context";
-import { NavBar } from "/components/NavBar";
+import { NavBar } from "~/components/NavBar";
-import { Group } from "/components/Group";
+import { Group } from "~/components/Group";
-import { TaskStatus, Maybe } from "/types/schema";
+import { TaskStatus, Maybe } from "~/types/schema";
-import { useTasks } from "/hooks/queries/useTasks";
+import { useTasks } from "~/hooks/queries/useTasks";
 
 export function Tasks() {
   const params = useContext(ParamContext);

twenty-frontend/src/js/hooks/mutations/useCompleteTask.ts

@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { CompleteTaskPayload, MutationCompleteTaskArgs } from "/types/schema";
+import { CompleteTaskPayload, MutationCompleteTaskArgs } from "~/types/schema";
 
 const GQL = gql`
   mutation CompleteTask($taskId: Int!) {

twenty-frontend/src/js/hooks/mutations/useCreateTask.ts

@@ -2,7 +2,7 @@ import {
   CreateTaskPayload,
   MutationCreateTaskArgs,
   TaskInput,
-} from "/types/schema";
+} from "~/types/schema";
 import { gql, useMutation } from "@apollo/client";
 
 const GQL = gql`

twenty-frontend/src/js/hooks/mutations/useDestroyTask.ts

@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { DestroyTaskPayload, MutationDestroyTaskArgs } from "/types/schema";
+import { DestroyTaskPayload, MutationDestroyTaskArgs } from "~/types/schema";
 
 const GQL = gql`
   mutation DestroyTask($taskId: Int!) {

twenty-frontend/src/js/hooks/mutations/useSetRandomProjectColor.tsx

@@ -3,7 +3,7 @@ import {
   SetRandomProjectColorPayload,
   MutationSetRandomProjectColorArgs,
   Project,
-} from "/types/schema";
+} from "~/types/schema";
 
 const GQL = gql`
   mutation SetRandomProjectColor($projectId: Int!) {

twenty-frontend/src/js/hooks/mutations/useUpdateTask.ts

@@ -2,7 +2,7 @@ import {
   UpdateTaskPayload,
   MutationUpdateTaskArgs,
   TaskInput,
-} from "/types/schema";
+} from "~/types/schema";
 import { gql, useMutation, DocumentNode } from "@apollo/client";
 
 const GQL = gql`

twenty-frontend/src/js/hooks/queries/useFindTask.ts

@@ -1,5 +1,5 @@
 import { gql, useQuery } from "@apollo/client";
-import { Maybe, Task } from "/types/schema";
+import { Maybe, Task } from "~/types/schema";
 
 const GQL = gql`
   query Query($taskId: Int!) {

twenty-frontend/src/js/hooks/queries/useTasks.ts

@@ -1,5 +1,5 @@
 import { useQuery, gql } from "@apollo/client";
-import { Task } from "/types/schema";
+import { Task } from "~/types/schema";
 
 export const GET_TASKS = gql`
   query GetTasks($status: TaskStatus!, $projectId: Int) {

twenty-frontend/src/js/main/projects.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom/client";
-import { App } from "/components/App";
+import { App } from "~/components/App";
-import { Projects } from "/components/Projects";
+import { Projects } from "~/components/Projects";
 
 (function () {
   const root = document.querySelector(".react-root")!;

twenty-frontend/src/js/main/task/edit.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom/client";
-import { App } from "/components/App";
+import { App } from "~/components/App";
-import { Task } from "/components/Task";
+import { Task } from "~/components/Task";
 
 (function () {
   const root = document.querySelector(".react-root")!;

twenty-frontend/src/js/main/task/new.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom/client";
-import { App } from "/components/App";
+import { App } from "~/components/App";
-import { Task } from "/components/Task";
+import { Task } from "~/components/Task";
 
 (function () {
   const root = document.querySelector(".react-root")!;

twenty-frontend/src/js/main/tasks.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom/client";
-import { App } from "/components/App";
+import { App } from "~/components/App";
-import { Tasks } from "/components/Tasks";
+import { Tasks } from "~/components/Tasks";
 
 (function () {
   const root = document.querySelector(".react-root")!;

twenty-frontend/tsconfig.json

@@ -11,7 +11,7 @@
     "allowJs": true,
     "lib": [ "ES2022", "DOM" ],
     "allowUmdGlobalAccess": true,
-    "baseUrl": "src/",
+    "baseUrl": "./src",
-    "paths": { "*": ["js/*"] },
+    "paths": { "~/*": ["./js/*"] },
   }
 }

twenty-frontend/webpack.config.js

@@ -5,8 +5,10 @@ const process = require('process');
 module.exports = {
   mode: process.env.NODE_ENV || "development",
   resolve: {
-    roots: [path.resolve('src/js'), path.resolve('node_modules')],
+    alias: {
-    modules: [path.resolve('src/js'), path.resolve('node_modules')],
+      '~': [path.resolve('src/js')]
+    },
+    modules: [path.resolve('node_modules')],
     extensions: ['.js', '.ts', '.tsx']
   },
   module: {