feat(chore): update to remix v2 (#327)

feat(chore): update to remix v2

.eslintignore

@@ -1 +1,2 @@
-**/*/node_modules
+**/*/node_modules
+prettier.config.js

.npmrc

@@ -0,0 +1,2 @@
+prefer-workspace-packages=true
+node-linker=hoisted

.prettierignore

@@ -9,4 +9,7 @@ pnpm-lock.yaml
 /packages/app-builder/src/utils/routes/routes.ts
 
 # marble-api
-/packages/marble-api/src/generated
+/packages/marble-api/src/generated
+
+# ui-design-system
+/packages/ui-design-system/storybook-static/

.tool-versions

@@ -1,2 +1,2 @@
 nodejs 20.10.0
-pnpm 8.11.0
+pnpm 8.13.1

package.json

@@ -2,24 +2,26 @@
   "name": "marble-front",
   "version": "0.0.0",
   "license": "MIT",
+  "private": true,
+  "type": "module",
+  "sideEffect": false,
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "format:write": "prettier --write .",
     "format:check": "prettier --check .",
     "test:all": "vitest"
   },
-  "private": true,
   "devDependencies": {
     "@vitejs/plugin-react": "4.2.1",
-    "@vitest/coverage-v8": "^1.0.1",
-    "@vitest/ui": "1.0.1",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.9",
+    "@vitest/coverage-v8": "^1.1.1",
+    "@vitest/ui": "1.1.1",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.10",
     "react-refresh": "^0.14.0",
-    "typescript": "5.3.2",
-    "vite-tsconfig-paths": "^4.2.1",
-    "vitest": "1.0.1"
-  },
-  "workspaces": [
-    "packages/*"
-  ]
+    "typescript": "5.3.3",
+    "vite-tsconfig-paths": "^4.2.3",
+    "vitest": "1.1.1"
+  }
 }

packages/app-builder/.eslintrc.js → packages/app-builder/.eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
   extends: ['@marble/eslint-config/react'],
   settings: {
     tailwindcss: {
-      config: join(__dirname, 'tailwind.config.js'),
+      config: join(__dirname, 'tailwind.config.ts'),
     },
   },
   ignorePatterns: ['/node_modules/', '/.cache/', '/build/', '/public/build/'],

packages/app-builder/README.md

@@ -40,7 +40,7 @@ If the component is part of the marble design system, you need to create it insi
 
 1. The component is mostly "presentationnal" (not connected to external data source needing loaders/actions): create the new component inside `src/components/*`.
 
-2. The component is considered a [full-stack componente](https://www.epicweb.dev/full-stack-components) (connected to external data source needing loaders/actions): create the new component inside `src/routes/ressources/*`.
+2. The component is considered a [full-stack componente](https://www.epicweb.dev/full-stack-components) (connected to external data source needing loaders/actions): create the new component inside `src/routes/ressources+/*`.
 
 > NB: in both cases, look at existing components to see how to structure your component and/or help you decide what feats your needs.
 

packages/app-builder/package.json

@@ -3,6 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
   "scripts": {
     "lint": "eslint .",
     "type-check": "npx tsc --noEmit",
@@ -16,76 +19,78 @@
   "license": "ISC",
   "devDependencies": {
     "@marble/eslint-config": "workspace:^",
-    "@remix-run/dev": "^1.19.3",
+    "@remix-run/dev": "^2.4.1",
     "@segment/analytics-next": "^1.62.0",
-    "@sentry/cli": "^2.23.0",
+    "@sentry/cli": "^2.23.2",
     "@types/autosuggest-highlight": "^3.2.3",
-    "@types/qs": "^6.9.10",
-    "@types/react": "18.2.42",
-    "@types/react-dom": "18.2.17",
+    "@types/qs": "^6.9.11",
+    "@types/react": "18.2.46",
+    "@types/react-dom": "18.2.18",
     "@types/swagger-ui-react": "^4.18.3",
     "dotenv-cli": "^7.3.0",
-    "eslint": "~8.55.0",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-tailwindcss": "^3.13.1",
     "jsdom": "23.0.1",
-    "ora": "^7.0.1",
-    "tailwindcss": "3.3.6",
-    "tsx": "^4.6.2"
+    "ora": "^8.0.1",
+    "postcss": "^8.4.32",
+    "tailwindcss": "3.4.0",
+    "tsx": "^4.7.0"
   },
   "dependencies": {
-    "@ariakit/react": "^0.3.8",
+    "@ariakit/react": "^0.3.12",
     "@conform-to/react": "^0.9.1",
     "@conform-to/zod": "^0.9.1",
     "@hookform/devtools": "^4.3.1",
-    "@hookform/resolvers": "^3.3.2",
+    "@hookform/resolvers": "^3.3.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remix-run/node": "^1.19.3",
-    "@remix-run/react": "^1.19.3",
-    "@remix-run/serve": "^1.19.3",
+    "@remix-run/node": "^2.4.1",
+    "@remix-run/react": "^2.4.1",
+    "@remix-run/serve": "^2.4.1",
     "@segment/snippet": "^5.2.0",
-    "@sentry/remix": "^7.85.0",
-    "@tanstack/react-table": "^8.10.7",
+    "@sentry/remix": "^7.91.0",
+    "@tanstack/react-table": "^8.11.2",
     "autosuggest-highlight": "^3.3.4",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.0",
     "cronstrue": "^2.47.0",
-    "date-fns": "^2.30.0",
+    "crypto-js": "^4.2.0",
+    "date-fns": "^3.0.6",
     "dotenv": "^16.3.1",
     "firebase": "^9.23.0",
-    "i18next": "^23.7.7",
+    "i18next": "^23.7.13",
     "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-fs-backend": "^2.3.0",
+    "i18next-fs-backend": "^2.3.1",
     "i18next-http-backend": "^2.4.2",
-    "isbot": "^3.7.1",
-    "marble-api": "workspace:^",
+    "isbot": "^4.1.1",
+    "marble-api": "workspace:*",
     "match-sorter": "^6.3.1",
-    "nanoid": "^4.0.2",
-    "oazapfts": "^4.11.2",
+    "nanoid": "^5.0.4",
+    "oazapfts": "^4.12.0",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.48.2",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^13.5.0",
+    "react-i18next": "^14.0.0",
     "react-json-view-lite": "^0.9.8",
-    "remeda": "^1.29.0",
-    "remix": "^1.19.3",
-    "remix-i18next": "^5.4.0",
-    "remix-utils": "^6.6.0",
+    "remeda": "^1.33.0",
+    "remix": "^2.4.1",
+    "remix-flat-routes": "^0.6.4",
+    "remix-i18next": "^5.5.0",
+    "remix-utils": "^7.5.0",
     "short-uuid": "^4.2.2",
-    "swagger-ui-react": "^5.10.3",
+    "swagger-ui-react": "^5.10.5",
     "temporal-polyfill": "^0.1.1",
     "tiny-invariant": "^1.3.1",
-    "typescript-utils": "workspace:^",
-    "ui-design-system": "workspace:^",
-    "ui-icons": "workspace:^",
+    "typescript-utils": "workspace:*",
+    "ui-design-system": "workspace:*",
+    "ui-icons": "workspace:*",
     "winston": "^3.11.0",
     "zod": "^3.22.4"
   }

packages/app-builder/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/app-builder/remix.config.js

@@ -1,22 +1,35 @@
-/** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
-  serverDependenciesToBundle: ['nanoid'],
-  serverModuleFormat: 'cjs',
-  appDirectory: 'src',
-  ignoredRouteFiles: ['**/.*'],
+import { flatRoutes } from 'remix-flat-routes';
+
+const appDirectory = 'src';
+
+/**
+ * @type {import('@remix-run/dev').AppConfig}
+ */
+export default {
+  serverModuleFormat: 'esm',
+  serverDependenciesToBundle: ['remix-i18next', 'react-dropzone'],
+  serverPlatform: 'node',
+  appDirectory,
+  browserNodeBuiltinsPolyfill: { modules: { process: true } },
+  ignoredRouteFiles: ['**/*'],
   watchPaths: [
     '../ui-design-system/**/*',
     '../tailwind-preset/**/*',
     '../@ui-icons/**/*',
     '../typescript-utils/**/*',
-    '../marble-api/**/*',
   ],
-  future: {
-    v2_errorBoundary: true,
-    v2_meta: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: false,
-    v2_dev: true,
-  },
+  future: {},
   tailwind: true,
+  postcss: true,
+  routes: async (defineRoutes) => {
+    return flatRoutes('routes', defineRoutes, {
+      appDir: appDirectory,
+      ignoredRouteFiles: [
+        '.*',
+        '**/*.css',
+        '**/*.test.{js,jsx,ts,tsx}',
+        '**/__*.*',
+      ],
+    });
+  },
 };

packages/app-builder/src/components/Cases/CaseFiles.tsx

@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 import toast from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import { last } from 'remeda';
-import { ClientOnly } from 'remix-utils';
+import { ClientOnly } from 'remix-utils/client-only';
 import { Button, Collapsible, Table, useVirtualTable } from 'ui-design-system';
 
 import { casesI18n } from './cases-i18n';

packages/app-builder/src/components/Cases/CaseInformation.tsx

@@ -1,7 +1,7 @@
 import { type CurrentUser } from '@app-builder/models';
-import { EditCaseInbox } from '@app-builder/routes/ressources/cases/edit-inbox';
-import { EditCaseName } from '@app-builder/routes/ressources/cases/edit-name';
-import { EditCaseTags } from '@app-builder/routes/ressources/cases/edit-tags';
+import { EditCaseInbox } from '@app-builder/routes/ressources+/cases+/edit-inbox';
+import { EditCaseName } from '@app-builder/routes/ressources+/cases+/edit-name';
+import { EditCaseTags } from '@app-builder/routes/ressources+/cases+/edit-tags';
 import { formatDateTime } from '@app-builder/utils/format';
 import { type Case, type InboxDto } from 'marble-api';
 import { useTranslation } from 'react-i18next';

packages/app-builder/src/components/Cases/CaseRightPanel.tsx

@@ -2,7 +2,7 @@ import {
   createRightPanel,
   type RightPanelRootProps,
 } from '@app-builder/components/RightPanel';
-import { CreateCase } from '@app-builder/routes/ressources/cases/create-case';
+import { CreateCase } from '@app-builder/routes/ressources+/cases+/create-case';
 import { createSimpleContext } from '@app-builder/utils/create-context';
 import { type DialogTriggerProps } from '@radix-ui/react-dialog';
 import { useReducer } from 'react';

packages/app-builder/src/components/Cases/Filters/CasesFiltersBar.tsx

@@ -75,7 +75,7 @@ export function CasesFiltersBar() {
             <AddNewFilterButton />
           </CasesFiltersMenu>
         </div>
-        <ClearAllFiltersLink to={getRoute('/cases')} replace />
+        <ClearAllFiltersLink to={getRoute('/cases/')} replace />
       </div>
     </>
   );

packages/app-builder/src/components/Decisions/DecisionRightPanel.tsx

@@ -2,7 +2,7 @@ import {
   createRightPanel,
   type RightPanelRootProps,
 } from '@app-builder/components/RightPanel';
-import { AddToCase } from '@app-builder/routes/ressources/cases/add-to-case';
+import { AddToCase } from '@app-builder/routes/ressources+/cases+/add-to-case';
 import { createSimpleContext } from '@app-builder/utils/create-context';
 import { useReducer } from 'react';
 import { useTranslation } from 'react-i18next';

packages/app-builder/src/components/Decisions/Filters/DecisionFiltersBar.tsx

@@ -75,7 +75,7 @@ export function DecisionFiltersBar() {
             <AddNewFilterButton />
           </DecisionFiltersMenu>
         </div>
-        <ClearAllFiltersLink to={getRoute('/decisions')} replace />
+        <ClearAllFiltersLink to={getRoute('/decisions/')} replace />
       </div>
     </>
   );

packages/app-builder/src/components/Navigation.tsx

@@ -2,13 +2,14 @@ import { NavLink } from '@remix-run/react';
 import { cva } from 'class-variance-authority';
 import clsx from 'clsx';
 import { type Namespace, type ParseKeys } from 'i18next';
+import { type IconProps } from 'packages/ui-icons/src/Icon';
 import type React from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const navigationI18n = ['navigation'] satisfies Namespace;
 
 export interface SidebarLinkProps {
-  Icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  Icon: (props: Omit<IconProps, 'icon'>) => JSX.Element;
   labelTKey: ParseKeys<['navigation']>;
   to: string;
 }
@@ -43,7 +44,7 @@ export function SidebarLink({ Icon, labelTKey, to }: SidebarLinkProps) {
 
 export interface SidebarButtonProps
   extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
-  Icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  Icon: (props: Omit<IconProps, 'icon'>) => JSX.Element;
   labelTKey: ParseKeys<['navigation']>;
 }
 
@@ -56,14 +57,12 @@ export function SidebarButton({
   const { t } = useTranslation(navigationI18n);
 
   return (
-    <li>
-      <button className={sidebarLink({ className })} {...props}>
-        <Icon className="h-6 w-6 shrink-0" />
-        <span className="line-clamp-1 text-left opacity-0 transition-opacity group-aria-expanded/nav:opacity-100">
-          {t(labelTKey)}
-        </span>
-      </button>
-    </li>
+    <button className={sidebarLink({ className })} {...props}>
+      <Icon className="h-6 w-6 shrink-0" />
+      <span className="line-clamp-1 text-left opacity-0 transition-opacity group-aria-expanded/nav:opacity-100">
+        {t(labelTKey)}
+      </span>
+    </button>
   );
 }
 

packages/app-builder/src/components/ScheduledExecutions/ScheduledExecutionDetails.tsx

@@ -4,7 +4,7 @@ import {
 } from '@app-builder/services/DownloadDecisionsService';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
-import { ClientOnly } from 'remix-utils';
+import { ClientOnly } from 'remix-utils/client-only';
 import { Button } from 'ui-design-system';
 
 import { scheduledExecutionI18n } from './scheduledExecution-i18n';