From d4a574c30f01585cc9268fc221ca2980aacb7b48 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 4 May 2023 15:04:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7(react)=20fix=20types=20file=20brok?=
 =?UTF-8?q?en=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Generated types for the react package were broken because they were
still using absolute imports which cannot work in standalone .d.ts
files because they cannot rely on the local baseUrl compiler option.
Thus, we introduced an alias that we are able to reliably replace
during type generation.
---
 packages/react/src/components/Button/index.spec.tsx  |  4 ++--
 .../src/components/DataGrid/SimpleDataGrid.spec.tsx  | 10 +++++-----
 .../react/src/components/DataGrid/SimpleDataGrid.tsx |  9 +++++++--
 .../react/src/components/DataGrid/index.spec.tsx     | 12 ++++++------
 .../react/src/components/DataGrid/index.stories.tsx  | 10 +++++-----
 packages/react/src/components/DataGrid/index.tsx     | 11 +++++------
 packages/react/src/components/DataGrid/utils.tsx     |  8 ++++----
 .../src/components/Forms/Checkbox/index.spec.tsx     |  2 +-
 .../src/components/Forms/Checkbox/index.stories.tsx  |  2 +-
 .../react/src/components/Forms/Checkbox/index.tsx    |  2 +-
 .../src/components/Forms/Field/index.stories.tsx     |  2 +-
 .../react/src/components/Forms/Input/index.spec.tsx  |  4 ++--
 .../src/components/Forms/Input/index.stories.tsx     |  4 ++--
 packages/react/src/components/Forms/Input/index.tsx  |  4 ++--
 .../react/src/components/Forms/Radio/index.spec.tsx  |  2 +-
 .../src/components/Forms/Radio/index.stories.tsx     |  2 +-
 packages/react/src/components/Forms/Radio/index.tsx  |  2 +-
 .../react/src/components/Loader/index.stories.tsx    |  2 +-
 .../react/src/components/Pagination/index.spec.tsx   |  6 +++---
 .../src/components/Pagination/index.stories.tsx      |  4 ++--
 packages/react/src/components/Pagination/index.tsx   |  6 +++---
 .../react/src/components/Provider/index.spec.tsx     |  6 +++---
 packages/react/src/components/Provider/index.tsx     |  8 ++++----
 packages/react/tsconfig.json                         |  4 +++-
 packages/react/vite.config.ts                        |  9 +++++++++
 25 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/packages/react/src/components/Button/index.spec.tsx b/packages/react/src/components/Button/index.spec.tsx
index a64e7ab..7b07d0f 100644
--- a/packages/react/src/components/Button/index.spec.tsx
+++ b/packages/react/src/components/Button/index.spec.tsx
@@ -1,8 +1,8 @@
 import { act, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { buildTheme, loadTokens } from "tests/Theme";
-import { Button } from "./index";
+import { buildTheme, loadTokens } from ":/tests/Theme";
+import { Button } from ":/components/Button";
 
 describe("<Button/>", () => {
   it("renders", () => {
diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
index 8be6197..0cb35c3 100644
--- a/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
+++ b/packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
@@ -4,11 +4,11 @@ import { faker } from "@faker-js/faker";
 import { getAllByRole, getByRole } from "@testing-library/dom";
 import { expect } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { expectPaginationList } from "components/Pagination/utils";
-import { CunninghamProvider } from "components/Provider";
-import { SimpleDataGrid } from "components/DataGrid/SimpleDataGrid";
-import { sleep } from "utils";
-import { Row } from "components/DataGrid/index";
+import { expectPaginationList } from ":/components/Pagination/utils";
+import { CunninghamProvider } from ":/components/Provider";
+import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
+import { sleep } from ":/utils";
+import { Row } from ":/components/DataGrid/index";
 
 describe("<SimpleDataGrid/>", () => {
   it("should render a grid without pagination", async () => {
diff --git a/packages/react/src/components/DataGrid/SimpleDataGrid.tsx b/packages/react/src/components/DataGrid/SimpleDataGrid.tsx
index bae1f67..5a22fa1 100644
--- a/packages/react/src/components/DataGrid/SimpleDataGrid.tsx
+++ b/packages/react/src/components/DataGrid/SimpleDataGrid.tsx
@@ -1,6 +1,11 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { usePagination } from "components/Pagination";
-import { BaseProps, DataGrid, Row, SortModel } from "components/DataGrid/index";
+import { usePagination } from ":/components/Pagination";
+import {
+  BaseProps,
+  DataGrid,
+  Row,
+  SortModel,
+} from ":/components/DataGrid/index";
 
 /**
  * Handles sorting, pagination.
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index 89298d6..802f190 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -3,12 +3,12 @@ import { faker } from "@faker-js/faker";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { getAllByRole, getByRole } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
-import { usePagination } from "components/Pagination";
-import { DataGrid, SortModel } from "components/DataGrid/index";
-import { CunninghamProvider } from "components/Provider";
-import { Deferred } from "tests/deferred";
-import { expectPaginationList } from "components/Pagination/utils";
-import { Button } from "components/Button";
+import { usePagination } from ":/components/Pagination";
+import { DataGrid, SortModel } from ":/components/DataGrid/index";
+import { CunninghamProvider } from ":/components/Provider";
+import { Deferred } from ":/tests/deferred";
+import { expectPaginationList } from ":/components/Pagination/utils";
+import { Button } from ":/components/Button";
 
 describe("<DataGrid/>", () => {
   afterEach(() => {});
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index c1624cc..ebae28b 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -1,11 +1,11 @@
 import { ComponentMeta } from "@storybook/react";
 import React, { useEffect, useMemo, useState } from "react";
 import { faker } from "@faker-js/faker";
-import { DataGrid, SortModel } from "components/DataGrid/index";
-import { usePagination } from "components/Pagination";
-import { CunninghamProvider } from "components/Provider";
-import { Button } from "components/Button";
-import { SimpleDataGrid } from "components/DataGrid/SimpleDataGrid";
+import { DataGrid, SortModel } from ":/components/DataGrid/index";
+import { usePagination } from ":/components/Pagination";
+import { CunninghamProvider } from ":/components/Provider";
+import { Button } from ":/components/Button";
+import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
 
 export default {
   title: "Components/DataGrid",
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index fb7c8a1..652bfd2 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -9,17 +9,16 @@ import {
   TableOptions,
   useReactTable,
 } from "@tanstack/react-table";
-import { Pagination, PaginationProps } from "components/Pagination";
-import { useCunningham } from "components/Provider";
-import { Loader } from "components/Loader";
+import { Pagination, PaginationProps } from ":/components/Pagination";
+import { useCunningham } from ":/components/Provider";
+import { Loader } from ":/components/Loader";
 import {
   paginationToPaginationState,
   sortingStateToSortModel,
   sortModelToSortingState,
   useHeadlessColumns,
-} from "components/DataGrid/utils";
-
-import emptyImageUrl from "./empty.svg";
+} from ":/components/DataGrid/utils";
+import emptyImageUrl from ":/components/DataGrid/empty.svg";
 
 export interface Row extends Record<string, any> {
   id: string;
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index c9891bf..f720dce 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -6,10 +6,10 @@ import {
   SortingState,
 } from "@tanstack/react-table";
 import React from "react";
-import { Checkbox } from "components/Forms/Checkbox";
-import { PaginationProps } from "components/Pagination";
-import { Column, Row, SortModel } from "components/DataGrid/index";
-import { useCunningham } from "components/Provider";
+import { Checkbox } from ":/components/Forms/Checkbox";
+import { PaginationProps } from ":/components/Pagination";
+import { Column, Row, SortModel } from ":/components/DataGrid/index";
+import { useCunningham } from ":/components/Provider";
 
 /**
  * Converts Cunningham's columns to the underlying tanstack table.
diff --git a/packages/react/src/components/Forms/Checkbox/index.spec.tsx b/packages/react/src/components/Forms/Checkbox/index.spec.tsx
index 9b8dd3a..f811d5a 100644
--- a/packages/react/src/components/Forms/Checkbox/index.spec.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.spec.tsx
@@ -1,7 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { Checkbox, CheckboxGroup } from "components/Forms/Checkbox/index";
+import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
 
 describe("<Checkbox/>", () => {
   it("renders and can be checked", async () => {
diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.tsx b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
index f314055..4c4d928 100644
--- a/packages/react/src/components/Forms/Checkbox/index.stories.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { Checkbox, CheckboxGroup } from "components/Forms/Checkbox/index";
+import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
 
 export default {
   title: "Components/Forms/Checkbox",
diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx
index 0cef1bd..97e669e 100644
--- a/packages/react/src/components/Forms/Checkbox/index.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.tsx
@@ -6,7 +6,7 @@ import React, {
   useState,
 } from "react";
 import classNames from "classnames";
-import { Field, FieldProps } from "components/Forms/Field";
+import { Field, FieldProps } from ":/components/Forms/Field";
 
 type Props = InputHTMLAttributes<HTMLInputElement> &
   FieldProps & {
diff --git a/packages/react/src/components/Forms/Field/index.stories.tsx b/packages/react/src/components/Forms/Field/index.stories.tsx
index 1781f8f..1e7ee43 100644
--- a/packages/react/src/components/Forms/Field/index.stories.tsx
+++ b/packages/react/src/components/Forms/Field/index.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { Field } from "components/Forms/Field/index";
+import { Field } from ":/components/Forms/Field/index";
 
 export default {
   title: "Components/Forms/Field",
diff --git a/packages/react/src/components/Forms/Input/index.spec.tsx b/packages/react/src/components/Forms/Input/index.spec.tsx
index 9e0f6f3..a100416 100644
--- a/packages/react/src/components/Forms/Input/index.spec.tsx
+++ b/packages/react/src/components/Forms/Input/index.spec.tsx
@@ -2,8 +2,8 @@ import { render, screen } from "@testing-library/react";
 import React, { useRef } from "react";
 import userEvent from "@testing-library/user-event";
 import { expect } from "vitest";
-import { Input, InputRefType } from "components/Forms/Input/index";
-import { Button } from "components/Button";
+import { Input, InputRefType } from ":/components/Forms/Input/index";
+import { Button } from ":/components/Button";
 
 describe("<Input/>", () => {
   it("renders and can type", async () => {
diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx
index a0f990e..fdbff0b 100644
--- a/packages/react/src/components/Forms/Input/index.stories.tsx
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React, { useRef } from "react";
-import { Input, InputRefType } from "components/Forms/Input/index";
-import { Button } from "components/Button";
+import { Input, InputRefType } from ":/components/Forms/Input/index";
+import { Button } from ":/components/Button";
 
 export default {
   title: "Components/Forms/Input",
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
index 1644e6d..ab42cad 100644
--- a/packages/react/src/components/Forms/Input/index.tsx
+++ b/packages/react/src/components/Forms/Input/index.tsx
@@ -8,8 +8,8 @@ import React, {
   useState,
 } from "react";
 import classNames from "classnames";
-import { randomString } from "utils";
-import { Field, FieldProps } from "components/Forms/Field";
+import { randomString } from ":/utils";
+import { Field, FieldProps } from ":/components/Forms/Field";
 
 export interface InputRefType {
   input: HTMLInputElement | null;
diff --git a/packages/react/src/components/Forms/Radio/index.spec.tsx b/packages/react/src/components/Forms/Radio/index.spec.tsx
index 50c33fe..04f4d4c 100644
--- a/packages/react/src/components/Forms/Radio/index.spec.tsx
+++ b/packages/react/src/components/Forms/Radio/index.spec.tsx
@@ -1,7 +1,7 @@
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { Radio, RadioGroup } from "components/Forms/Radio/index";
+import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
 
 describe("<Radio/>", () => {
   it("should render", async () => {
diff --git a/packages/react/src/components/Forms/Radio/index.stories.tsx b/packages/react/src/components/Forms/Radio/index.stories.tsx
index f3975ad..8f2029d 100644
--- a/packages/react/src/components/Forms/Radio/index.stories.tsx
+++ b/packages/react/src/components/Forms/Radio/index.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { Radio, RadioGroup } from "components/Forms/Radio/index";
+import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
 
 export default {
   title: "Components/Forms/Radio",
diff --git a/packages/react/src/components/Forms/Radio/index.tsx b/packages/react/src/components/Forms/Radio/index.tsx
index 9211d80..fa39b1c 100644
--- a/packages/react/src/components/Forms/Radio/index.tsx
+++ b/packages/react/src/components/Forms/Radio/index.tsx
@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes, PropsWithChildren } from "react";
 import classNames from "classnames";
-import { Field, FieldProps } from "components/Forms/Field";
+import { Field, FieldProps } from ":/components/Forms/Field";
 
 type Props = InputHTMLAttributes<HTMLInputElement> &
   FieldProps & {
diff --git a/packages/react/src/components/Loader/index.stories.tsx b/packages/react/src/components/Loader/index.stories.tsx
index f45f8f4..eb001d2 100644
--- a/packages/react/src/components/Loader/index.stories.tsx
+++ b/packages/react/src/components/Loader/index.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import React from "react";
-import { Loader } from "components/Loader/index";
+import { Loader } from ":/components/Loader/index";
 
 export default {
   title: "Components/Loader (WIP)",
diff --git a/packages/react/src/components/Pagination/index.spec.tsx b/packages/react/src/components/Pagination/index.spec.tsx
index 3d264ac..8fd1085 100644
--- a/packages/react/src/components/Pagination/index.spec.tsx
+++ b/packages/react/src/components/Pagination/index.spec.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { fireEvent } from "@testing-library/dom";
-import { Pagination, usePagination } from "components/Pagination/index";
-import { expectPaginationList } from "components/Pagination/utils";
-import { CunninghamProvider } from "components/Provider";
+import { Pagination, usePagination } from ":/components/Pagination/index";
+import { expectPaginationList } from ":/components/Pagination/utils";
+import { CunninghamProvider } from ":/components/Provider";
 
 describe("<Pagination/>", () => {
   const Wrapper = (params: Parameters<typeof usePagination>[0]) => () => {
diff --git a/packages/react/src/components/Pagination/index.stories.tsx b/packages/react/src/components/Pagination/index.stories.tsx
index f24f47d..b319aae 100644
--- a/packages/react/src/components/Pagination/index.stories.tsx
+++ b/packages/react/src/components/Pagination/index.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
 import React, { useEffect, useMemo, useState } from "react";
-import { Pagination, usePagination } from "components/Pagination/index";
-import { CunninghamProvider } from "components/Provider";
+import { Pagination, usePagination } from ":/components/Pagination/index";
+import { CunninghamProvider } from ":/components/Provider";
 
 export default {
   title: "Components/Pagination",
diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx
index a171b75..4f73e05 100644
--- a/packages/react/src/components/Pagination/index.tsx
+++ b/packages/react/src/components/Pagination/index.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
-import { Button } from "components/Button";
-import { Input } from "components/Forms/Input";
-import { useCunningham } from "components/Provider";
+import { Button } from ":/components/Button";
+import { Input } from ":/components/Forms/Input";
+import { useCunningham } from ":/components/Provider";
 
 export interface PaginationProps {
   /** Current page */
diff --git a/packages/react/src/components/Provider/index.spec.tsx b/packages/react/src/components/Provider/index.spec.tsx
index 420bf77..16f3970 100644
--- a/packages/react/src/components/Provider/index.spec.tsx
+++ b/packages/react/src/components/Provider/index.spec.tsx
@@ -1,9 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import React, { PropsWithChildren, useMemo, useState } from "react";
 import userEvent from "@testing-library/user-event";
-import { CunninghamProvider, useCunningham } from "components/Provider/index";
-import * as enUS from "locales/en-US.json";
-import { Button } from "components/Button";
+import { CunninghamProvider, useCunningham } from ":/components/Provider/index";
+import * as enUS from ":/locales/en-US.json";
+import { Button } from ":/components/Button";
 
 describe("<CunninghamProvider />", () => {
   it("should render", () => {
diff --git a/packages/react/src/components/Provider/index.tsx b/packages/react/src/components/Provider/index.tsx
index 08e29ee..3b56913 100644
--- a/packages/react/src/components/Provider/index.tsx
+++ b/packages/react/src/components/Provider/index.tsx
@@ -4,10 +4,10 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import * as enUS from "locales/en-US.json";
-import * as frFR from "locales/fr-FR.json";
-import { PartialNested } from "types";
-import { Locales } from "components/Provider/Locales";
+import * as enUS from ":/locales/en-US.json";
+import * as frFR from ":/locales/fr-FR.json";
+import { PartialNested } from ":/types";
+import { Locales } from ":/components/Provider/Locales";
 
 type TranslationSet = PartialNested<typeof enUS>;
 
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 21755e1..e63be58 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -2,7 +2,9 @@
   "extends": "@openfun/typescript-configs/react.json",
   "compilerOptions": {
     "noEmit": true,
-    "baseUrl": "./src",
+    "paths": {
+      ":/*": ["./src/*"]
+    },
     "types": ["vitest/globals", "vite/client"]
   },
   "include": ["src", "cunningham.ts"],
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
index 906c8f5..d2f9ac2 100644
--- a/packages/react/vite.config.ts
+++ b/packages/react/vite.config.ts
@@ -1,3 +1,4 @@
+import { resolve } from "path";
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import dts from "vite-plugin-dts";
@@ -38,4 +39,12 @@ export default defineConfig({
     },
     setupFiles: ["src/tests/Setup.ts"],
   },
+  resolve: {
+    alias: [
+      {
+        find: ":",
+        replacement: resolve(__dirname, "./src"),
+      },
+    ],
+  },
 });