Ft/upgrade next to 15 #1001

koechkevin · 2024-11-14T10:51:38Z

Description

This PR upgrades the Next.js framework from the current version to v15.0.3 to leverage on the latest features, performance improvements, and bug fixes introduced in this release.

Key Changes

Upgrade Next.js Version to 15.0.3.
Upgrade Eslint to v9 since next js 15 added support for eslint 9.
Updated codebase's eslint configuration to flatConfigs.
Removed .eslintignore and .eslintrc since with flatConfigs all can be defined in eslint.config.js.

You may notice many changed files in component files, but this is due to a change in how to disable a rule in a file with flat configs.

We do not need to replicate // eslint-disable-next-line testing-library/render-result-naming-convention inside the test file since this disable command has been specified in common eslint config "testing-library/render-result-naming-convention": "off",.

Review of this PR should be around */**/eslint.config.js and packages/eslint-config-commons-ui.

Find a write-up of how these configs work here

Fixes # (issue)

Type of change

Please delete options that are not relevant.

Breaking change (fix or feature that would cause existing functionality to not work as expected)

Screenshots

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation

…nresolved imports for SVG files

…nder-result-naming-convention rule

kilemensi

👍🏽

Still going through it but quick feedback on issues that kind of stood out to me.

packages/eslint-config-commons-ui/next.js

packages/hurumap-next/eslint.config.js

apps/vpnmanager/src/middleware.ts

kilemensi

👍🏽

Based on this comment, should we be using the experimental file configuration?

apps/charterafrica/src/components/Articles/Articles.js

apps/vpnmanager/package.json

apps/vpnmanager/src/lib/outline.ts

… @eslint/js

…-hooks dependency

koechkevin · 2024-12-04T11:44:46Z

👍🏽

Based on this comment, should we be using the experimental file configuration?

@kilemensi this seems to work for js apps if we put eslint configs at root but since ts apps configurations have some differences, we may have to retain them as is.

kilemensi · 2024-12-04T12:03:14Z

@kilemensi this seems to work for js apps if we put eslint configs at root but since ts apps configurations have some differences, we may have to retain them as is.

There is a slight chance I've misread it @koechkevin so please read the docs again but my understanding is as follow:
Given the following directory tree:

  <root>
  ├── eslint.config.js
  ├── apps
  │   ├── centralcms
  │   ├── charterafrica
  │   │   ├── src
  │   │   ├── eslint.config.json
  │   ├── civicsignalblog
  ├── packages
  │   ├── commons-ui-core
  │   ├── commons-ui-next
  │   ├── commons-ui-payload

Without the flag, eslint looks for config from current directory moving up. That is, if you run the command at <root>, if there is a eslint.config.js at root, that config will be used regardless of any other config at apps level. If it doesn't find one at <root>, then it will travel <root> -> apps -> charterafrica and use the first found eslint.config.js along that path.

With the flag on, the process is actually reversed. eslint starts looking at the file being linted regardless of where the command was executed. So if we're linting a file in apps/charterafrica/src, eslint will traverse backwards and find eslint.config.json in charterafrica first, or along the path charterafrica -> apps -> <root> until it finds one.

In a monorepo, the second approach sounds like the right approach to me.

…s and packages

kilemensi · 2024-12-05T06:33:50Z

I just saw

chore: Remove obsolete ESLint configuration files across multiple app

fly by my screen @koechkevin. Are we changing the approach?

koechkevin · 2025-01-08T13:33:55Z

@CodeForAfrica/tech ?

m453h · 2025-01-09T09:59:40Z

@CodeForAfrica/tech ?

Hi @koechkevin just early feedback tested running several apps noticed there is an issue on CivicSignal Research, its failing to resolve this custom component

src/payload/components/allowedAppSelect/index.js

I did a quick test by renaming the component to .tsx and importing it as shown below 👇 and it resolves this issue.

import CustomSelectComponent from "#civicsignalblog/payload/components/allowedAppSelect/index"

I recall keeping this component with .js extension in order to auto import this component without needing to use the index name e.g. in defaultApp.js, and currentApp.js haven't figured out yet why moving to the eslint.config.js is causing this issue though

kelvinkipruto · 2025-01-09T10:55:01Z

@koechkevin A few issues I have encountered.

In NextJs 15, Dynamic APIs are Asynchronous. Some props must be awaited. techlabblog throws errors regarding this. Running the recommended codemod fixes it.
"target": "ES2017" is missing in climatemappedfrica's tsconfig.json
Looking at the eslint.config.js for the typescript apps, they are all similar. Is it possible to have one configuration that can be reused for all the apps?

…ne config files

koechkevin · 2025-01-10T08:09:33Z

import CustomSelectComponent

Renamed to index.tsx and I don't seem to find any issue @m453h

m453h · 2025-01-10T08:36:17Z

import CustomSelectComponent

Renamed to index.tsx and I don't seem to find any issue @m453h

Great we can keep the custom components in tsx, have you changed the import ? Because build would fail to resolve the module unless we explicitly import it as:

import CustomSelectComponent from "#civicsignalblog/payload/components/allowedAppSelect/index";

…pdate ESLint config paths for consistency

…mmons-ui ESLint setup

kilemensi · 2025-01-13T09:29:57Z

@koechkevin , to move things along, this is what I raised on Friday:

Before this upgrade, there were 2 eslint configs in eslint-config-commons-ui:

index.js: This is the default config and it's the React only config (JavaScript only). It is useful in other packages e.g. commons-ui/core, hurumap/core, etc., that do not use Next.js
next.js: This is the Next.js config (JavaScript only). It is useful in both packages and apps that use Next.js.

Each package/app chose which of the above config to use and import it via package/app-level .eslintrc.js

Moving to eslint 9, my questions are:

How are we introducing TypeScript support (initially just Next.js)?
Based on 1, how many "reusable" configs will we now have in the eslint-config-commons-ui?
Using flatConfig, where and how are the various eslint.config.js applied to cover all packages and apps in the repo?

koechkevin · 2025-01-13T10:13:50Z

@koechkevin , to move things along, this is what I raised on Friday:

Before this upgrade, there were 2 eslint configs in eslint-config-commons-ui:

index.js: This is the default config and it's the React only config (JavaScript only). It is useful in other packages e.g. commons-ui/core, hurumap/core, etc., that do not use Next.js

next.js: This is the Next.js config (JavaScript only). It is useful in both packages and apps that use Next.js.

Each package/app chose which of the above config to use and import it via package/app-level .eslintrc.js

Moving to eslint 9, my questions are:

How are we introducing TypeScript support (initially just Next.js)?

Based on 1, how many "reusable" configs will we now have in the eslint-config-commons-ui?

Using flatConfig, where and how are the various eslint.config.js applied to cover all packages and apps in the repo?

@kilemensi to answer your questions,
Since we are now using eslint --flag unstable_config_lookup_from_file --fix './' command, we have 1 eslint.config.js that will be used by all next js apps which do not have their own eslint.config.js.

We are introducing common configs for typescript-next apps i.e typescript.js in eslint-common-config. This basically extends ./next configs and adds extra configs for typescript apps. Individual apps will now have their own eslint.config.js implementing these configs.

const eslintConfig = require("eslint-config-commons-ui/typescript");

module.exports = eslintConfig;

We now have 3 reusable configs i.e index.js, next.js and typescript.js
For the packages, we only have one config file under packages directory which implements index.js

kilemensi · 2025-01-13T10:32:13Z

For the packages, we only have one config file under packages directory which implements index.js

Some packages such as commons-ui/next, hurumap-next, etc. should be checked with next.js instead of index.js @koechkevin.

koechkevin · 2025-01-13T10:51:31Z

For the packages, we only have one config file under packages directory which implements index.js

Some packages such as commons-ui/next, hurumap-next, etc. should be checked with next.js instead of index.js @koechkevin.

@kilemensi
For the packages that use the next configs, we use the same approach as we used in typescript-next. They have their own config files extending ./next. commons-ui-next extended index.js was it a mistake?

kilemensi · 2025-01-13T10:55:42Z

... commons-ui-next extended index.js was it a mistake?

Most likely @koechkevin; see hurumap-next

koechkevin · 2025-01-14T07:16:43Z

closes #1023 #1024

koechkevin · 2025-01-14T12:40:48Z

@m453h @kelvinkipruto ?

kelvinkipruto

LGTM

m453h

Looks good to me, nothing major but I've just noticed the warning (when I run the lint command) 👇

Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.

Shouldn't we explicitly set the react version ? 🤔

…t settings, but the "react" package is not installed.

kilemensi · 2025-01-15T11:05:02Z

I take @CodeForAfrica/tech are happy with this PR @koechkevin ? If yes, lets merge it. Any outstanding issue, will be fix in a separate PR.

koechkevin added 3 commits November 11, 2024 10:57

Upgrade Next JS

5f145b1

Update ESLINT

deded81

Upgrade ESlint

f9a4d16

koechkevin marked this pull request as draft November 14, 2024 10:51

koechkevin self-assigned this Nov 14, 2024

koechkevin added 10 commits November 15, 2024 12:29

fix: Update eslint config to treat unused vars as errors and ignore u…

48e7f42

…nresolved imports for SVG files

Merge branch 'main' into ft/upgrade_next_to_15

786c674

Fix eslint

fc768f5

Update package-lock

993cdc0

Fixed relative imports

7296b99

Undo edited chunks

96ce1ee

Retained exhaustive dependancies react hook waring

0373e1b

Reverted run_time_configs

4d81d4f

FIxed root config

fef32c5

chore: Update testing-library config to use flat/react and disable re…

65ca9c4

…nder-result-naming-convention rule

koechkevin requested a review from a team November 27, 2024 10:56

koechkevin marked this pull request as ready for review November 27, 2024 10:56

kilemensi reviewed Nov 28, 2024

View reviewed changes

packages/eslint-config-commons-ui/next.js Show resolved Hide resolved

packages/hurumap-next/eslint.config.js Outdated Show resolved Hide resolved

apps/vpnmanager/src/middleware.ts Outdated Show resolved Hide resolved

chore: Update eslint config and fix relative imports

21a2185

koechkevin requested a review from kilemensi December 2, 2024 12:46

kilemensi reviewed Dec 2, 2024

View reviewed changes

apps/charterafrica/src/components/Articles/Articles.js Outdated Show resolved Hide resolved

apps/vpnmanager/package.json Outdated Show resolved Hide resolved

apps/vpnmanager/src/lib/outline.ts Outdated Show resolved Hide resolved

koechkevin and others added 5 commits December 3, 2024 12:39

chore: Update eslint config and fix relative imports

b0ef845

chore: Update eslint config and dependencies for @eslint/eslintrc and…

f545563

… @eslint/js

chore: Remove unused ESLint configuration and add eslint-plugin-react…

163097c

…-hooks dependency

chore: Disable react-hooks/exhaustive-deps rule in ESLint configuration

5d0f073

chore: Update lint command to use next lint for fixing issues

eb417e0

chore: Remove obsolete ESLint configuration files across multiple app…

c94b98f

…s and packages

Kevin Koech added 3 commits January 9, 2025 16:07

Refactor ESLint configuration to use TypeScript settings and streamli…

b492483

…ne config files

Update Page component to handle async params in TypeScript

2a2c780

Format Page component props for improved readability

0a5e30e

Remove unused ESLint configuration file for commons-ui

a238dd4

Kevin Koech added 2 commits January 10, 2025 12:59

Rename allowedAppSelect component from TypeScript to JavaScript and u…

f8180fd

…pdate ESLint config paths for consistency

Remove obsolete ESLint configuration for uibook and add README for co…

9a76ce4

…mmons-ui ESLint setup

Add ESLint next configuration for commons-ui-next with custom rules

ada1996

kilemensi requested a review from a team January 13, 2025 13:48

kilemensi added the chore A task that needs to be done (neither enhancement or bug) label Jan 13, 2025

Merge branch 'main' into ft/upgrade_next_to_15

b2564a0

kelvinkipruto approved these changes Jan 14, 2025

View reviewed changes

m453h approved these changes Jan 14, 2025

View reviewed changes

Fix: Warning: React version was set to "detect" in eslint-plugin-reac…

acee806

…t settings, but the "react" package is not installed.

koechkevin added this pull request to the merge queue Jan 15, 2025

Merged via the queue into main with commit 6cce436 Jan 15, 2025
5 of 6 checks passed

koechkevin deleted the ft/upgrade_next_to_15 branch January 15, 2025 11:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ft/upgrade next to 15 #1001

Ft/upgrade next to 15 #1001

koechkevin commented Nov 14, 2024 •

edited

Loading

kilemensi left a comment

kilemensi left a comment •

edited

Loading

koechkevin commented Dec 4, 2024

kilemensi commented Dec 4, 2024 •

edited

Loading

kilemensi commented Dec 5, 2024

koechkevin commented Jan 8, 2025

m453h commented Jan 9, 2025

kelvinkipruto commented Jan 9, 2025

koechkevin commented Jan 10, 2025

m453h commented Jan 10, 2025

kilemensi commented Jan 13, 2025 •

edited

Loading

koechkevin commented Jan 13, 2025 •

edited

Loading

kilemensi commented Jan 13, 2025

koechkevin commented Jan 13, 2025

kilemensi commented Jan 13, 2025

koechkevin commented Jan 14, 2025

koechkevin commented Jan 14, 2025

kelvinkipruto left a comment

m453h left a comment

kilemensi commented Jan 15, 2025

Ft/upgrade next to 15 #1001

Ft/upgrade next to 15 #1001

Conversation

koechkevin commented Nov 14, 2024 • edited Loading

Description

Key Changes

Type of change

Screenshots

Checklist:

kilemensi left a comment

Choose a reason for hiding this comment

kilemensi left a comment • edited Loading

Choose a reason for hiding this comment

koechkevin commented Dec 4, 2024

kilemensi commented Dec 4, 2024 • edited Loading

kilemensi commented Dec 5, 2024

koechkevin commented Jan 8, 2025

m453h commented Jan 9, 2025

kelvinkipruto commented Jan 9, 2025

koechkevin commented Jan 10, 2025

m453h commented Jan 10, 2025

kilemensi commented Jan 13, 2025 • edited Loading

koechkevin commented Jan 13, 2025 • edited Loading

kilemensi commented Jan 13, 2025

koechkevin commented Jan 13, 2025

kilemensi commented Jan 13, 2025

koechkevin commented Jan 14, 2025

koechkevin commented Jan 14, 2025

kelvinkipruto left a comment

Choose a reason for hiding this comment

m453h left a comment

Choose a reason for hiding this comment

kilemensi commented Jan 15, 2025

koechkevin commented Nov 14, 2024 •

edited

Loading

kilemensi left a comment •

edited

Loading

kilemensi commented Dec 4, 2024 •

edited

Loading

kilemensi commented Jan 13, 2025 •

edited

Loading

koechkevin commented Jan 13, 2025 •

edited

Loading