Evaluate if we should use Remix for v2.0

[faraakhatTW]

Context: A production-grade React framework would eliminate the common problems faced when not using a framework. I have narrowed it down to Remix which seems suitable for our purposes.

What is Remix?

• “Remix is a full-stack React framework with nested routing. It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions.”

Can I use React without a framework?

• “You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.”

[paul-thompson1]

I have finished the ADR. The ADR can be located here: link to ADR

I have also researched how to get MUI and storybook to work.

For Material UI you need to use react-dom@beta and react@beta in order to resolve hydration issues.
To install MUI:

yarn add @mui/material @emotion/react @emotion/styled

To install react 19:

yarn add react-dom@beta react@beta

Here is how the package.json will look:

"dependencies": {
    //additional dependencies...
    "react": "^19.0.0-beta-26f2496093-20240514",
    "react-dom": "^19.0.0-beta-26f2496093-20240514"
  },
   //add overrides to ensure these are the only versions being used
  "overrides": {
    "react": "^19.0.0-beta-26f2496093-20240514",
    "react-dom": "^19.0.0-beta-26f2496093-20240514"
  },

For Storybook you can follow these instructions:
Install vite builder:

yarn add --dev @storybook/builder-vite

Install storybook:

yarn dlx storybook@latest init

Example main.ts file:

export default {
    stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
    core: {
      builder: '@storybook/builder-vite', // 👈 The builder enabled here.
    },
    framework: {
        name: '@storybook/react-vite',
        options: {
          builder: {
            viteConfigPath: 'sb-vite.config.ts',
          },
        },
      }
  };

Example sb-vite.config.ts file:

import { defineConfig, loadEnv } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  process.env = { ...process.env, ...env }

  return {
    // no Remix Vite plugin here
    plugins: [tsconfigPaths()],
  }
})

The above information was taken from storybook and remix