studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔧(react) fix types file broken imports

Browse Source 
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.
This commit is contained in:
Nathan Vasse
2023-05-04 15:04:47 +02:00
committed by NathanVss
parent 7eac0bfca1
commit d4a574c30f
25 changed files with 75 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/src/components/Button/index.spec.tsx
View File

@@ -1,8 +1,8 @@
import { act, render, screen, waitFor } from "@testing-library/react"; import { act, render, screen, waitFor } from "@testing-library/react";
import React from "react"; import React from "react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { buildTheme, loadTokens } from "tests/Theme"; import { buildTheme, loadTokens } from ":/tests/Theme";
import { Button } from "./index"; import { Button } from ":/components/Button";
describe("<Button/>", () => { describe("<Button/>", () => {
it("renders", () => { it("renders", () => {

10
packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
View File

@@ -4,11 +4,11 @@ import { faker } from "@faker-js/faker";
import { getAllByRole, getByRole } from "@testing-library/dom"; import { getAllByRole, getByRole } from "@testing-library/dom";
import { expect } from "vitest"; import { expect } from "vitest";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { expectPaginationList } from "components/Pagination/utils"; import { expectPaginationList } from ":/components/Pagination/utils";
import { CunninghamProvider } from "components/Provider"; import { CunninghamProvider } from ":/components/Provider";
import { SimpleDataGrid } from "components/DataGrid/SimpleDataGrid"; import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
import { sleep } from "utils"; import { sleep } from ":/utils";
import { Row } from "components/DataGrid/index"; import { Row } from ":/components/DataGrid/index";
describe("<SimpleDataGrid/>", () => { describe("<SimpleDataGrid/>", () => {
it("should render a grid without pagination", async () => { it("should render a grid without pagination", async () => {

9
packages/react/src/components/DataGrid/SimpleDataGrid.tsx
View File

@@ -1,6 +1,11 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { usePagination } from "components/Pagination"; import { usePagination } from ":/components/Pagination";
import { BaseProps, DataGrid, Row, SortModel } from "components/DataGrid/index"; import {
BaseProps,
DataGrid,
Row,
SortModel,
} from ":/components/DataGrid/index";
/** /**
* Handles sorting, pagination. * Handles sorting, pagination.

12
packages/react/src/components/DataGrid/index.spec.tsx
View File

@@ -3,12 +3,12 @@ import { faker } from "@faker-js/faker";
import { act, render, screen, waitFor } from "@testing-library/react"; import { act, render, screen, waitFor } from "@testing-library/react";
import { getAllByRole, getByRole } from "@testing-library/dom"; import { getAllByRole, getByRole } from "@testing-library/dom";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { usePagination } from "components/Pagination"; import { usePagination } from ":/components/Pagination";
import { DataGrid, SortModel } from "components/DataGrid/index"; import { DataGrid, SortModel } from ":/components/DataGrid/index";
import { CunninghamProvider } from "components/Provider"; import { CunninghamProvider } from ":/components/Provider";
import { Deferred } from "tests/deferred"; import { Deferred } from ":/tests/deferred";
import { expectPaginationList } from "components/Pagination/utils"; import { expectPaginationList } from ":/components/Pagination/utils";
import { Button } from "components/Button"; import { Button } from ":/components/Button";
describe("<DataGrid/>", () => { describe("<DataGrid/>", () => {
afterEach(() => {}); afterEach(() => {});

10
packages/react/src/components/DataGrid/index.stories.tsx
View File

@@ -1,11 +1,11 @@
import { ComponentMeta } from "@storybook/react"; import { ComponentMeta } from "@storybook/react";
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { faker } from "@faker-js/faker"; import { faker } from "@faker-js/faker";
import { DataGrid, SortModel } from "components/DataGrid/index"; import { DataGrid, SortModel } from ":/components/DataGrid/index";
import { usePagination } from "components/Pagination"; import { usePagination } from ":/components/Pagination";
import { CunninghamProvider } from "components/Provider"; import { CunninghamProvider } from ":/components/Provider";
import { Button } from "components/Button"; import { Button } from ":/components/Button";
import { SimpleDataGrid } from "components/DataGrid/SimpleDataGrid"; import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
export default { export default {
title: "Components/DataGrid", title: "Components/DataGrid",

11
packages/react/src/components/DataGrid/index.tsx
View File

@@ -9,17 +9,16 @@ import {
TableOptions, TableOptions,
useReactTable, useReactTable,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import { Pagination, PaginationProps } from "components/Pagination"; import { Pagination, PaginationProps } from ":/components/Pagination";
import { useCunningham } from "components/Provider"; import { useCunningham } from ":/components/Provider";
import { Loader } from "components/Loader"; import { Loader } from ":/components/Loader";
import { import {
paginationToPaginationState, paginationToPaginationState,
sortingStateToSortModel, sortingStateToSortModel,
sortModelToSortingState, sortModelToSortingState,
useHeadlessColumns, useHeadlessColumns,
} from "components/DataGrid/utils"; } from ":/components/DataGrid/utils";
import emptyImageUrl from ":/components/DataGrid/empty.svg";
import emptyImageUrl from "./empty.svg";
export interface Row extends Record<string, any> { export interface Row extends Record<string, any> {
id: string; id: string;

8
packages/react/src/components/DataGrid/utils.tsx
View File

@@ -6,10 +6,10 @@ import {
SortingState, SortingState,
} from "@tanstack/react-table"; } from "@tanstack/react-table";
import React from "react"; import React from "react";
import { Checkbox } from "components/Forms/Checkbox"; import { Checkbox } from ":/components/Forms/Checkbox";
import { PaginationProps } from "components/Pagination"; import { PaginationProps } from ":/components/Pagination";
import { Column, Row, SortModel } from "components/DataGrid/index"; import { Column, Row, SortModel } from ":/components/DataGrid/index";
import { useCunningham } from "components/Provider"; import { useCunningham } from ":/components/Provider";
/** /**
* Converts Cunningham's columns to the underlying tanstack table. * Converts Cunningham's columns to the underlying tanstack table.

2
packages/react/src/components/Forms/Checkbox/index.spec.tsx
View File

@@ -1,7 +1,7 @@
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import React from "react"; import React from "react";
import { render, screen } from "@testing-library/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/>", () => { describe("<Checkbox/>", () => {
it("renders and can be checked", async () => { it("renders and can be checked", async () => {

2
packages/react/src/components/Forms/Checkbox/index.stories.tsx
View File

@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from "@storybook/react"; import { ComponentMeta, ComponentStory } from "@storybook/react";
import React from "react"; import React from "react";
import { Checkbox, CheckboxGroup } from "components/Forms/Checkbox/index"; import { Checkbox, CheckboxGroup } from ":/components/Forms/Checkbox/index";
export default { export default {
title: "Components/Forms/Checkbox", title: "Components/Forms/Checkbox",

2
packages/react/src/components/Forms/Checkbox/index.tsx
View File

@@ -6,7 +6,7 @@ import React, {
useState, useState,
} from "react"; } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { Field, FieldProps } from "components/Forms/Field"; import { Field, FieldProps } from ":/components/Forms/Field";
type Props = InputHTMLAttributes<HTMLInputElement> & type Props = InputHTMLAttributes<HTMLInputElement> &
FieldProps & { FieldProps & {

2
packages/react/src/components/Forms/Field/index.stories.tsx
View File

@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from "@storybook/react"; import { ComponentMeta, ComponentStory } from "@storybook/react";
import React from "react"; import React from "react";
import { Field } from "components/Forms/Field/index"; import { Field } from ":/components/Forms/Field/index";
export default { export default {
title: "Components/Forms/Field", title: "Components/Forms/Field",

4
packages/react/src/components/Forms/Input/index.spec.tsx
View File

@@ -2,8 +2,8 @@ import { render, screen } from "@testing-library/react";
import React, { useRef } from "react"; import React, { useRef } from "react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { expect } from "vitest"; import { expect } from "vitest";
import { Input, InputRefType } from "components/Forms/Input/index"; import { Input, InputRefType } from ":/components/Forms/Input/index";
import { Button } from "components/Button"; import { Button } from ":/components/Button";
describe("<Input/>", () => { describe("<Input/>", () => {
it("renders and can type", async () => { it("renders and can type", async () => {

4
packages/react/src/components/Forms/Input/index.stories.tsx
View File

@@ -1,7 +1,7 @@
import { ComponentMeta, ComponentStory } from "@storybook/react"; import { ComponentMeta, ComponentStory } from "@storybook/react";
import React, { useRef } from "react"; import React, { useRef } from "react";
import { Input, InputRefType } from "components/Forms/Input/index"; import { Input, InputRefType } from ":/components/Forms/Input/index";
import { Button } from "components/Button"; import { Button } from ":/components/Button";
export default { export default {
title: "Components/Forms/Input", title: "Components/Forms/Input",

4
packages/react/src/components/Forms/Input/index.tsx
View File

@@ -8,8 +8,8 @@ import React, {
useState, useState,
} from "react"; } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { randomString } from "utils"; import { randomString } from ":/utils";
import { Field, FieldProps } from "components/Forms/Field"; import { Field, FieldProps } from ":/components/Forms/Field";
export interface InputRefType { export interface InputRefType {
input: HTMLInputElement | null; input: HTMLInputElement | null;

2
packages/react/src/components/Forms/Radio/index.spec.tsx
View File

@@ -1,7 +1,7 @@
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import React from "react"; import React from "react";
import { render, screen } from "@testing-library/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/>", () => { describe("<Radio/>", () => {
it("should render", async () => { it("should render", async () => {

2
packages/react/src/components/Forms/Radio/index.stories.tsx
View File

@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from "@storybook/react"; import { ComponentMeta, ComponentStory } from "@storybook/react";
import React from "react"; import React from "react";
import { Radio, RadioGroup } from "components/Forms/Radio/index"; import { Radio, RadioGroup } from ":/components/Forms/Radio/index";
export default { export default {
title: "Components/Forms/Radio", title: "Components/Forms/Radio",

2
packages/react/src/components/Forms/Radio/index.tsx
View File

@@ -1,6 +1,6 @@
import React, { InputHTMLAttributes, PropsWithChildren } from "react"; import React, { InputHTMLAttributes, PropsWithChildren } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { Field, FieldProps } from "components/Forms/Field"; import { Field, FieldProps } from ":/components/Forms/Field";
type Props = InputHTMLAttributes<HTMLInputElement> & type Props = InputHTMLAttributes<HTMLInputElement> &
FieldProps & { FieldProps & {

2
packages/react/src/components/Loader/index.stories.tsx
View File

@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from "@storybook/react"; import { ComponentMeta, ComponentStory } from "@storybook/react";
import React from "react"; import React from "react";
import { Loader } from "components/Loader/index"; import { Loader } from ":/components/Loader/index";
export default { export default {
title: "Components/Loader (WIP)", title: "Components/Loader (WIP)",

6
packages/react/src/components/Pagination/index.spec.tsx
View File

@@ -2,9 +2,9 @@ import React from "react";
import { act, render, screen, waitFor } from "@testing-library/react"; import { act, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { fireEvent } from "@testing-library/dom"; import { fireEvent } from "@testing-library/dom";
import { Pagination, usePagination } from "components/Pagination/index"; import { Pagination, usePagination } from ":/components/Pagination/index";
import { expectPaginationList } from "components/Pagination/utils"; import { expectPaginationList } from ":/components/Pagination/utils";
import { CunninghamProvider } from "components/Provider"; import { CunninghamProvider } from ":/components/Provider";
describe("<Pagination/>", () => { describe("<Pagination/>", () => {
const Wrapper = (params: Parameters<typeof usePagination>[0]) => () => { const Wrapper = (params: Parameters<typeof usePagination>[0]) => () => {

4
packages/react/src/components/Pagination/index.stories.tsx
View File

@@ -1,7 +1,7 @@
import { ComponentMeta } from "@storybook/react"; import { ComponentMeta } from "@storybook/react";
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Pagination, usePagination } from "components/Pagination/index"; import { Pagination, usePagination } from ":/components/Pagination/index";
import { CunninghamProvider } from "components/Provider"; import { CunninghamProvider } from ":/components/Provider";
export default { export default {
title: "Components/Pagination", title: "Components/Pagination",

6
packages/react/src/components/Pagination/index.tsx
View File

@@ -1,7 +1,7 @@
import React, { Fragment, useState } from "react"; import React, { Fragment, useState } from "react";
import { Button } from "components/Button"; import { Button } from ":/components/Button";
import { Input } from "components/Forms/Input"; import { Input } from ":/components/Forms/Input";
import { useCunningham } from "components/Provider"; import { useCunningham } from ":/components/Provider";
export interface PaginationProps { export interface PaginationProps {
/** Current page */ /** Current page */

6
packages/react/src/components/Provider/index.spec.tsx
View File

@@ -1,9 +1,9 @@
import { render, screen } from "@testing-library/react"; import { render, screen } from "@testing-library/react";
import React, { PropsWithChildren, useMemo, useState } from "react"; import React, { PropsWithChildren, useMemo, useState } from "react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { CunninghamProvider, useCunningham } from "components/Provider/index"; import { CunninghamProvider, useCunningham } from ":/components/Provider/index";
import * as enUS from "locales/en-US.json"; import * as enUS from ":/locales/en-US.json";
import { Button } from "components/Button"; import { Button } from ":/components/Button";
describe("<CunninghamProvider />", () => { describe("<CunninghamProvider />", () => {
it("should render", () => { it("should render", () => {

8
packages/react/src/components/Provider/index.tsx
View File

@@ -4,10 +4,10 @@ import React, {
useContext, useContext,
useMemo, useMemo,
} from "react"; } from "react";
import * as enUS from "locales/en-US.json"; import * as enUS from ":/locales/en-US.json";
import * as frFR from "locales/fr-FR.json"; import * as frFR from ":/locales/fr-FR.json";
import { PartialNested } from "types"; import { PartialNested } from ":/types";
import { Locales } from "components/Provider/Locales"; import { Locales } from ":/components/Provider/Locales";
type TranslationSet = PartialNested<typeof enUS>; type TranslationSet = PartialNested<typeof enUS>;

4
packages/react/tsconfig.json
View File

@@ -2,7 +2,9 @@
"extends": "@openfun/typescript-configs/react.json", "extends": "@openfun/typescript-configs/react.json",
"compilerOptions": { "compilerOptions": {
"noEmit": true, "noEmit": true,
"baseUrl": "./src", "paths": {
":/*": ["./src/*"]
},
"types": ["vitest/globals", "vite/client"] "types": ["vitest/globals", "vite/client"]
}, },
"include": ["src", "cunningham.ts"], "include": ["src", "cunningham.ts"],

9
packages/react/vite.config.ts
View File

@@ -1,3 +1,4 @@
import { resolve } from "path";
import { defineConfig } from "vitest/config"; import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts"; import dts from "vite-plugin-dts";
@@ -38,4 +39,12 @@ export default defineConfig({
}, },
setupFiles: ["src/tests/Setup.ts"], setupFiles: ["src/tests/Setup.ts"],
}, },
resolve: {
alias: [
{
find: ":",
replacement: resolve(__dirname, "./src"),
},
],
},
}); });