[UI] Framework and Library Packages Upgrades and Removal

[acald-creator]

Desired Behavior

Would like to upgrade Meshery UI libraries to latest packages. PLEASE NOTE This is a work in progress to track our progress to Next.js v13 at the very least.

Currently, meshery/ui has a rather large list of NPM packages, but it would be helpful to initiate a chore to clean up packages that are no longer needed for the ui project.

Here are some suggestions of packages that are no longer needed or not being used directly in meshery/ui. Any feedback is welcome.

• glob-parent
• @types/react-relay
• caniuse-lite
• color-string
• @babel/traverse
• cron-time-generator
• set-value
• minimist
  * webpack and webpack-cli are not being directly, in the upcoming Next.js version above 11, Next.js is using webpack internally, so there is no need to use these directly, unless there is plan to continue using webpack-cli directly.
• CORRECTION: webpack is needed for Cypress testing.
  * next-compose - Next.js has better supports for plugins, and the package is over 5 years old.

Concerns to address in Next.js 13

• Next.js 13 requires React 18, which means a couple of the packages will not support React 18 directly or indirectly. (WIP)
  • react-codemirror2 is about 2 years old, and no longer maintained. Suggest to use @uiw/react-codemirror which supports React 17 and above. There will be about 11 files or so that needs to be refactored to rename the inports.
  • "react-select": "^2.4.3" will needs to be ugpraded to the latest version v5.7.0 DONE - Solve by renaming imports.
• DONE - Refactor eslint configuration in the following files: package.json, and .eslintrc.js. Next.js currently supports eslint default via next lint. There is also support for prettier and lint-staged.
  • eslint is currently at v7, suggest to move to v8 to follow the typical Next.js 12/13 project layout.
  • eslint-loader has been deprecated and moved to eslint-webpack-plugin. Reassess if this package is still needed.
  • Multiple eslint-plugin-* have not been used within the project. Reassess to see if these packages are still needed in terms of linting standard.
    1. eslint-config-airbnb
    2. eslint-config-google
    3. eslint-plugin-react-hooks
    4. eslint-plugin-jsx-a11y
    5. eslint-plugin-import
  • Next.js built-in support for eslint. This will assist in refactoring or updating .eslintrc.js to ensure we are not replicating efforts from Next.js
    1. eslint-plugin-react
    2. eslint-plugin-react-hooks
    3. eslint-plugin-next
• Next.js 12 and above has built-in support for webpack v5. Any prior custom configurations are considered webpack 4 and may not work properly. Will need reassessment on the custom configuration for webpack v4 because common configurations are currently supported through either plugins or SWC. NEED MORE RESEARCH
• Next.js 12 and above also has built-in support for SWC which is an alternative to Babel. If .babelrc is still being used, SWC has been disabled, and Next.js will fallback to Babel. Reasses if Babel is still needed for development or production purposes.
• Next.js also supports environment variables through use case of .env, .env.local, .env.development and .env.production instead of through existing webpack custom configuration.
• Refactor and restructure relay.config.js to use Next.js built-in support for Relay (client-side GraphQL)
• Currently the main CSS framework we're using is Material Ui v4 and we will need to track to upgrade to MUI v5.
  • @material-ui/* will need to be changeover to @mui/*.
    Certain imports such as withStyles and useStyles are deprecated completely in v5. MUI v5 uses Emotion as the style engine and will no longer use JSS as its style engine.
  • Reassess and make sure that we're using one unified CSS framework to lessen the burden on Next.js recompiling CSS/CSS-in-JS styles. Other styling packages being used are jss, react-jss, and styled-jsx. Will need to reassss its benefits to the project.
  • Reassess current theme to call from, and remove duplicates usage of colors when you can call from the theme itself. (opinionated, as it may be easier to write a quick inline style, or call style configuration directly in *.js files.) Next.js 11 and above allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript.
    1. However, you can only call Global CSS files from pages/_app.js as it is meant to override styles globally.
    2. Or, you can create (React) component level CSS calling the file component.module.css and directly import them anyway in the project. This may increase the level of complexity and may lose placement of where the style configurations are.

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[github-actions]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[Udit-takkar]

@acald-creator just a quick question. why exactly are we not using prettier? i think we should have a prettier config file defined for formatting

Example:- this is from another OSS
{
bracketSpacing: true,
bracketSameLine: true,
singleQuote: false,
jsxSingleQuote: false,
trailingComma: "es5",
semi: true,
printWidth: 110,
arrowParens: "always",
importOrder: [
"^@(calcom|ee)/(.)$",
"^@lib/(.)$",
"^@components/(.)$",
"^@(server|trpc)/(.)$",
"^~/(.*)$",
"^[./]",
],
importOrderSeparation: true,
plugins: [require("./merged-prettier-plugin")],
overrides: [
{
files: ["apps/website/lib/utils/wordlist/wordlist.ts"],
options: {
quoteProps: "consistent",
},
},
],
}

[acald-creator]

I agree with this.

Next.js also has better support for prettier, which we will get to in this upgrade. Thanks for bringing this @Udit-takkar

[b0id]

Following

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.

[sandramsc]

This issue has been open for some time with no recent activity, unassigning to open it up for new contributors to give it a go.

[ShivamAhir]

Hello, I am very interested in this project and would like to contribute in this season of LFX;)

[dvjsharma]

Idea sounds great! Would love to develop this.

[thiago-Coderr]

Hello, I'm interested to contribute in this project for this season

[SURAJ-SHARMA27]

The project seems interesting, and I'm interested to contribute.

[MohitGupta14]

Hi @nebula-aac @leecalcote is it fine if I can make PR for this issue, I have set up the project(UI) on my machine and am very eager to contribute.

[nebula-aac]

@MohitGupta14

This open has multiple things that needs to be done, some of which have been placed on pause because there are deprecated packages that will make it difficult to migrate in this process.

Can you provide information on what you're familiar with and what you could do?

[nebula-aac]

Hello, I am very interested in this project and would like to contribute in this season of LFX;)

@ShivamAhir thanks for reaching out. Please note that this issue will needs to be updated to reflect some of the findings I gathered in order to complete this issue. Please keep an eye out.

Can you provide some details on what you're familiar with?

[MohitGupta14]

@MohitGupta14

This open has multiple things that needs to be done, some of which have been placed on pause because there are deprecated packages that will make it difficult to migrate in this process.

Can you provide information on what you're familiar with and what you could do?

Currently, for deprecated packages, we have the option to transition to the latest versions. Initially, we can migrate the packages to the latest version of React. In the long term, this approach will facilitate a smoother conversion to Next.js. To accomplish this, routing adjustments aligned with Next.js standards need to be implemented. I am proficient in both React and Next.js and I think I can help in this issue.

[nebula-aac]

I already have several prototypes on upgrading this to Next.js 14 and React 18, and while it is possible, there are a couple packages that will block making the changes as needed.

One of the main deprecated packages that will be difficult to migrate is react-codemirror2 and codemirror. react-codemirror2 is currently on React 16 and depends on codemirror@v5. By upgrading codemirror to v6 will break and cause the pages that uses this package to not work properly.

While it is feasible to work on this, there is still a need to complete other tasks in the same process to ensure that this is a smooth transition.

Next.js 12 only works with React@17, but will not work properly in React 18, and it is important to upgrade both at the same time, as well as making changes to _app.js, _document.js. We also use next-redux-wrapper and I've already planned to remove this entirely as it does not help in the migration process. next-redux-wrapper latest version uses the latest from @reduxjs/toolkit and since we're not using the package directly in the current Provider's store, this will cause breakage.

There is also a need to migrate Class components to Function components, and also migrating redux to use the latest hooks from redux and @reduxjs/toolkit.

I have a tentative plan, but this issue will need to be updated to reflect this.

[ShivamAhir]

Hello, I am very interested in this project and would like to contribute in this season of LFX;)

@ShivamAhir thanks for reaching out. Please note that this issue will needs to be updated to reflect some of the findings I gathered in order to complete this issue. Please keep an eye out.

Can you provide some details on what you're familiar with?

Hey @nebula-aac , thanks for the reply! I'm quite familiar with React.js and Next.js for the frontend, and Express.js and Node.js for the backend. Additionally, I have a good understanding of database technologies.

[kailash360]

I already have several prototypes on upgrading this to Next.js 14 and React 18, and while it is possible, there are a couple packages that will block making the changes as needed.

One of the main deprecated packages that will be difficult to migrate is react-codemirror2 and codemirror. react-codemirror2 is currently on React 16 and depends on codemirror@v5. By upgrading codemirror to v6 will break and cause the pages that uses this package to not work properly.

While it is feasible to work on this, there is still a need to complete other tasks in the same process to ensure that this is a smooth transition.

Next.js 12 only works with React@17, but will not work properly in React 18, and it is important to upgrade both at the same time, as well as making changes to _app.js, _document.js. We also use next-redux-wrapper and I've already planned to remove this entirely as it does not help in the migration process. next-redux-wrapper latest version uses the latest from @reduxjs/toolkit and since we're not using the package directly in the current Provider's store, this will cause breakage.

There is also a need to migrate Class components to Function components, and also migrating redux to use the latest hooks from redux and @reduxjs/toolkit.

I have a tentative plan, but this issue will need to be updated to reflect this.

Hello @nebula-aac

As you mentioned, there will be breaking changes, but we can slowly move ahead with fixes for each break. The version upgrade will allow us to use the latest developments in NextJS and MUI v5. I have experience of working with ReactJS,NextJS and Material UI, and would love to work on this issue.

And for the redux, we can change it to React context and reduce dependencies in the UI which will enable a light and fast interface.

[tarunsinghofficial]

Hi @nebula-aac, I'm interested in contributing to the above issue as it aligns with my skills in Next.js, react, and MUI. I have already worked on multiple projects on the same tech.

I can help with the issue Material Ui v4 and we will need to track to upgrade to MUI v5. If you don't mind, can you please assign this issue to me?

Thanks

[mohitmishra786]

Hello @nebula-aac ,

Can you please confirm once whether the packages issues still persists?
I am very eager to participate in this project but not sure where we stand on this project now. As this issue is open from very long time and lot of conversations has been done already. Also i can see there was already one mentee who participated in LFX for this.

Best Regards,
Mohit

[nebula-aac]

This is still relevant. And while this is part of the LFX objective, it will still be needed afterwards. There is work to create a newer Next.js app with the updated components in the Sistent Design System to keep from interfering with Meshery UI repo.

There is equal work to update in this present repo but it is slow going.