Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#287 Upgrade next to v15 #289

Merged
merged 13 commits into from
Jan 14, 2025
Merged

#287 Upgrade next to v15 #289

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
70d9caa
feat(apps/web): Upgrade next to v15 and react to v19
nevendyulgerov Jan 3, 2025
6870c67
feat(apps/workshop): Upgrade react to v19 and storybook packages to v…
nevendyulgerov Jan 3, 2025
000768b
feat(apps/workshop): Upgrade react to v19 and testing-library package…
nevendyulgerov Jan 3, 2025
7a14826
feat(apps/web): Remove deprecated config option
nevendyulgerov Jan 3, 2025
83f3b8b
feat(apps/web): Make params retrieval async
nevendyulgerov Jan 3, 2025
5e69640
chore(apps/web): Use act from 'react' package instead
nevendyulgerov Jan 3, 2025
0310d23
chore: Update lock file
nevendyulgerov Jan 3, 2025
6cffbc5
chore(apps/web): Dynamically import the Shell component in a client c…
nevendyulgerov Jan 3, 2025
7458434
chore(apps/web): Reformat files
nevendyulgerov Jan 6, 2025
11f74c0
chore(apps/web): Simplify useElementVisibility hook
nevendyulgerov Jan 7, 2025
9b2c63b
test(apps/web): Skip more metamask tests
nevendyulgerov Jan 7, 2025
39e3731
test(apps/web): Skip more metamask tests
nevendyulgerov Jan 7, 2025
cbf28cb
chore(apps/web): Refactoring
nevendyulgerov Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions apps/web/e2e/transactions/metamask.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ test.describe.serial("Ether Deposit form", () => {
}
});

test("should render 'Ether Deposit' transaction form", async ({ page }) => {
test.skip("should render 'Ether Deposit' transaction form", async ({
page,
}) => {
await page.goto("/");

const connectButton = page.getByText("Connect Wallet");
Expand Down Expand Up @@ -44,7 +46,7 @@ test.describe.serial("Ether Deposit form", () => {
).toBeHidden();
});

test("should display errors for 'Ether Deposit' transaction form", async ({
test.skip("should display errors for 'Ether Deposit' transaction form", async ({
page,
}) => {
await page.goto("/");
Expand Down Expand Up @@ -88,7 +90,7 @@ test.describe.serial("Ether Deposit form", () => {
await expect(form.getByText("Invalid hex string")).toBeVisible();
});

test("should validate successfully 'Ether Deposit' transaction form", async ({
test.skip("should validate successfully 'Ether Deposit' transaction form", async ({
page,
}) => {
await page.goto("/");
Expand Down
1 change: 0 additions & 1 deletion apps/web/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const ContentSecurityPolicy = `
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
output: "standalone",
basePath: process.env.BASE_PATH || "",
async headers() {
Expand Down
20 changes: 12 additions & 8 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"build": "next build",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
"codegen": "dotenv -e .env -c -- graphql-codegen",
"dev": "next dev",
"dev": "next dev --turbopack",
"start": "next start",
"lint": "next lint",
"test": "vitest run",
Expand Down Expand Up @@ -39,13 +39,13 @@
"highlightjs-solidity": "^2.0.6",
"jotai": "^2.9.0",
"lokijs": "^1",
"next": "^14.2.21",
"next": "15.1.3",
"pino-pretty": "^10",
"pretty-ms": "^8",
"ramda": "0.30.1",
"ramda-adjunct": "^5.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-icons": "^4",
"react-jazzicon": "^1",
"urql": "^4",
Expand All @@ -68,12 +68,12 @@
"@playwright/test": "^1.37.0",
"@sunodo/wagmi-plugin-hardhat-deploy": "^0.2",
"@synthetixio/synpress": "^3.7.3",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@types/node": "^20",
"@types/ramda": "^0.30.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react": "19.0.2",
"@types/react-dom": "19.0.2",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react": "^4.3.1",
"@vitest/coverage-v8": "^2.0.5",
Expand All @@ -91,5 +91,9 @@
"ts-node": "^10",
"typescript": "^5",
"vitest": "^2.0.5"
},
"resolutions": {
"@types/react": "19.0.2",
"@types/react-dom": "19.0.2"
}
}
14 changes: 7 additions & 7 deletions apps/web/src/app/applications/[address]/inputs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ import {
import getConfiguredChainId from "../../../../lib/getConfiguredChain";
import { getUrqlServerClient } from "../../../../lib/urql";

export async function generateMetadata({
params,
}: ApplicationInputsPageProps): Promise<Metadata> {
export async function generateMetadata(
props: ApplicationInputsPageProps,
): Promise<Metadata> {
const params = await props.params;
return {
title: `Application ${params.address}`,
};
Expand All @@ -37,12 +38,11 @@ async function getApplication(appId: string) {
}

export type ApplicationInputsPageProps = {
params: { address: string };
params: Promise<{ address: string }>;
};

const ApplicationInputsPage: FC<ApplicationInputsPageProps> = async ({
params,
}) => {
const ApplicationInputsPage: FC<ApplicationInputsPageProps> = async (props) => {
const params = await props.params;
const chainId = getConfiguredChainId();
const appId = `${chainId}-${params.address?.toLowerCase()}`;
const application = await getApplication(appId);
Expand Down
12 changes: 7 additions & 5 deletions apps/web/src/app/applications/[address]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ import {
import getConfiguredChainId from "../../../lib/getConfiguredChain";
import { getUrqlServerClient } from "../../../lib/urql";

export async function generateMetadata({
params,
}: ApplicationPageProps): Promise<Metadata> {
export async function generateMetadata(
props: ApplicationPageProps,
): Promise<Metadata> {
const params = await props.params;
return {
title: `Application ${params.address}`,
};
Expand All @@ -37,10 +38,11 @@ async function getApplication(appId: string) {
}

export type ApplicationPageProps = {
params: { address: string };
params: Promise<{ address: string }>;
};

const ApplicationPage: FC<ApplicationPageProps> = async ({ params }) => {
const ApplicationPage: FC<ApplicationPageProps> = async (props) => {
const params = await props.params;
const chainId = getConfiguredChainId();
const appId = `${chainId}-${params.address?.toLowerCase()}`;
const application = await getApplication(appId);
Expand Down
5 changes: 1 addition & 4 deletions apps/web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import "@mantine/notifications/styles.css";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { Metadata } from "next";
import dynamic from "next/dynamic";
import type { FC, ReactNode } from "react";
import { Providers } from "../providers/providers";
import { Shell } from "../components/layout/shell-container";

export const metadata: Metadata = {
title: {
Expand All @@ -22,9 +22,6 @@ export const metadata: Metadata = {
},
};

const Shell = dynamic(() => import("../components/layout/shell"), {
ssr: false,
});
interface LayoutProps {
children: ReactNode;
}
Expand Down
7 changes: 4 additions & 3 deletions apps/web/src/app/specifications/edit/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ export const metadata: Metadata = {
};

interface PageProps {
params: {
params: Promise<{
id: string;
};
}>;
}

export default function EditSpecificationPage({ params }: PageProps) {
export default async function EditSpecificationPage(props: PageProps) {
const params = await props.params;
return (
<Stack>
<Breadcrumbs
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/applications/userApplicationsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ const UserApplicationsTable: FC<UserApplicationsTableProps> = (props) => {
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme();
const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;
const { childrenRef, isVisible } = useElementVisibility({
element: tableRowRef,
});
const { childrenRef, isVisible } = useElementVisibility(
tableRowRef.current,
);
const [timeType, setTimeType] = useState<"timestamp" | "age">("age");

const onChangeTimeColumnType = useCallback(() => {
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/components/inputs/inputsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ const InputsTable: FC<InputsTableProps> = ({
setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));
}, []);
const tableRowRef = useRef<HTMLDivElement>(null);
const { childrenRef, isVisible } = useElementVisibility({
element: tableRowRef,
});
const { childrenRef, isVisible } = useElementVisibility(
tableRowRef.current,
);
const { listConnections } = useConnectionConfig();
const connectionsLength = listConnections().length;

Expand Down
6 changes: 6 additions & 0 deletions apps/web/src/components/layout/shell-container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
"use client";
import dynamic from "next/dynamic";

export const Shell = dynamic(() => import("./shell"), {
ssr: false,
});
6 changes: 3 additions & 3 deletions apps/web/src/components/responsiveTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ const ResponsiveTable = <T extends { id: string | number }>(
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme();
const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;
const { childrenRef, isVisible } = useElementVisibility({
element: tableRowRef,
});
const { childrenRef, isVisible } = useElementVisibility(
tableRowRef.current,
);

return (
<TableResponsiveWrapper ref={tableRowRef}>
Expand Down
12 changes: 4 additions & 8 deletions apps/web/src/hooks/useElementVisibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
import { useIntersection } from "@mantine/hooks";
import { useMemo } from "react";
type UseElementVisibilityParamsProps<T extends Element> = {
element: React.RefObject<T>;
threshold?: number;
};

export const useElementVisibility = <T extends Element>({
element,
export const useElementVisibility = (
element: HTMLDivElement | null,
Copy link
Collaborator

@brunomenezes brunomenezes Jan 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is an odd type narrowing saying that the only element type accepted would be div elements or null. But in theory, it was supposed to accept any valid HTML element or null. I checked the code and played around, and it would take a ref typed as HTMLInputElement without any squiggly red lines (the project is using typescript 5.3.2), which causes other problems in terms of modifying that hook as the intellisense will display incorrect attributes.

I believe the element being a generic type that extends the correct ParentType is necessary. The refactoring going down one level i.e. RefObject<T> to Element does not look like a problem.

Copy link
Collaborator

@brunomenezes brunomenezes Jan 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @nevendyulgerov, I am not saying to put it back to what it was (like you're doing here with a bit of difference cbf28cb). As I mentioned refactoring to one level down by receiving the HtmlElement or null instead of the RefObject is fine, but my highlighting was about the type narrowing to Div, instead of a more generic one e.g. by using generics.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, @brunomenezes , I'm not sure I understand. The code does use generics as it did before with the changes done in cbf28cb.

Please let me know if you want further changes related to this.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To clarify further, the comment was not about the refactoring from the object param to the function param, just the type narrowing.

threshold = 0.5,
}: UseElementVisibilityParamsProps<T>) => {
) => {
const { ref: childrenRef, entry } = useIntersection({
root: element.current,
root: element,
threshold,
});
const isVisible = (entry?.intersectionRatio ?? 1) < threshold;
Expand Down
3 changes: 1 addition & 2 deletions apps/web/test/components/specification/SpecificationFormView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import {
screen,
waitFor,
} from "@testing-library/react";
import { FC } from "react";
import { act } from "react-dom/test-utils";
import { FC, act } from "react";
import { SpecificationFormView } from "../../../src/components/specification/SpecificationFormView";
import localRepository from "../../../src/components/specification/hooks/localRepository";
import {
Expand Down
38 changes: 19 additions & 19 deletions apps/workshop/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,37 @@
"@mantine/hooks": "^7.12.0",
"@rainbow-me/rainbowkit": "2",
"@tanstack/react-query": "^5.27.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^4",
"serve": "^14.2.1",
"wagmi": "^2"
},
"devDependencies": {
"@cartesi/tsconfig": "*",
"@storybook/addon-essentials": "^8.0.5",
"@storybook/addon-interactions": "^8.0.5",
"@storybook/addon-links": "^8.0.5",
"@storybook/addon-mdx-gfm": "^8.0.5",
"@storybook/addon-onboarding": "^8.0.5",
"@storybook/addon-themes": "^8.0.5",
"@storybook/addon-viewport": "^8.0.5",
"@storybook/blocks": "^8.0.5",
"@storybook/cli": "^8.0.5",
"@storybook/preview-api": "^8.0.5",
"@storybook/react": "^8.0.5",
"@storybook/react-vite": "^8.0.5",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-links": "^8.4.7",
"@storybook/addon-mdx-gfm": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/addon-themes": "^8.4.7",
"@storybook/addon-viewport": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/cli": "^8.4.7",
"@storybook/preview-api": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"prop-types": "^15.8.1",
"storybook": "^8.0.5",
"storybook-dark-mode": "^4.0.1",
"storybook": "^8.4.7",
"storybook-dark-mode": "^4.0.2",
"typescript": "^5.0.2",
"vite": "^4.5.5"
}
Expand Down
10 changes: 5 additions & 5 deletions packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,17 @@
},
"devDependencies": {
"@cartesi/tsconfig": "*",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@types/ramda": "^0.30.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@vitest/coverage-v8": "^2.0.5",
"@vitest/ui": "^2.0.5",
"eslint": "^8",
"eslint-config-cartesi": "*",
"jsdom": "^22.1.0",
"react": "^18.3.1",
"react": "^19.0.0",
"tsup": "^7",
"typescript": "^5",
"vitest": "^2.0.5"
Expand Down
Loading
Loading