[VO-1228] chore: Migrate to Rsbuild

jest.config.js

@@ -13,7 +13,8 @@ module.exports = {
     '\\.css$': 'identity-obj-proxy',
     '^cozy-ui/react(.*)$': '<rootDir>/node_modules/cozy-ui/transpiled/react$1',
     '^cozy-client$': 'cozy-client/dist/index.js',
-    'test/(.*)$': '<rootDir>/test/$1'
+    'test/(.*)$': '<rootDir>/test/$1',
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   transformIgnorePatterns: ['node_modules/(?!cozy-ui)/'],
   globals: {

manifest.webapp

@@ -2,7 +2,7 @@
   "name": "Settings",
   "name_prefix": "Cozy",
   "slug": "settings",
-  "icon": "app-icon.svg",
+  "icon": "assets/app-icon.svg",
   "source": "https://github.com/cozy/cozy-settings",
   "editor": "Cozy",
   "developer": {

package.json

@@ -6,17 +6,11 @@
     "tx": "tx pull --all || true",
     "lint": "yarn lint:js",
     "lint:js": "eslint '{src,test}/**/*.{js,jsx,ts,tsx}'",
-    "build": "yarn build:browser",
-    "build:browser": "cozy-scripts build --browser --barV7 false",
-    "build:mobile": "cozy-scripts build --mobile --barV7 false",
-    "watch": "yarn watch:browser",
-    "watch:browser": "cozy-scripts watch --browser --barV7 false",
-    "watch:mobile": "cozy-scripts watch --mobile --barV7 false",
-    "start": "cozy-scripts start --hot --barV7 false",
-    "deploy": "cs deploy",
+    "build": "rsbuild build",
+    "watch": "rsbuild build --watch",
+    "analyze": "RSDOCTOR=true yarn build",
     "cozyPublish": "cozy-app-publish --token $REGISTRY_TOKEN --prepublish downcloud --postpublish mattermost",
-    "test": "cozy-scripts test",
-    "stack:docker": "docker run --rm -it -p 8080:8080 -v \"$(pwd)/build\":/data/cozy-app/app cozy/cozy-app-dev"
+    "test": "cs test"
   },
   "repository": {
     "type": "git",
@@ -32,8 +26,8 @@
   },
   "homepage": "https://github.com/cozy/cozy-settings#readme",
   "devDependencies": {
-    "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
+    "@babel/polyfill": "^7.10.4",
+    "@rsbuild/core": "^1.1.6",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.5.1",
@@ -43,13 +37,13 @@
     "browser-resolve": "2.0.0",
     "bundlemon": "3.1.0",
     "cozy-app-publish": "0.34.0",
-    "cozy-scripts": "8.3.0",
     "eslint-config-cozy-app": "5.1.0",
     "jest": "28.1.3",
     "jest-environment-jsdom": "28.1.3",
     "npm-run-all": "4.1.5",
     "react-hot-loader": "4.13.0",
     "react-test-renderer": "18.2.0",
+    "rsbuild-config-cozy-app": "^0.1.1",
     "typescript-plugin-css-modules": "3.4.0"
   },
   "dependencies": {
@@ -71,6 +65,7 @@
     "cozy-sharing": "^15.0.0",
     "cozy-stack-client": "^51.0.0",
     "cozy-ui": "^111.12.0",
+    "identity-obj-proxy": "^3.0.0",
     "piwik-react-router": "0.12.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",
@@ -84,7 +79,6 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.1",
     "semver": "7.5.2",
-    "terser-webpack-plugin": "1.4.4",
     "ua-parser-js": "0.7.33"
   }
 }

rsbuild.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from '@rsbuild/core'
+import { getRsbuildConfig } from 'rsbuild-config-cozy-app'
+
+const config = getRsbuildConfig({
+  title: 'Cozy Settings',
+  hasIntents: true
+})
+
+export default defineConfig(config)

src/actions/email.js

@@ -1,6 +1,6 @@
-import { cozyFetch } from 'actions'
+import { cozyFetch } from '@/actions'
 
-import { STACK_DOMAIN } from 'actions'
+import { STACK_DOMAIN } from '@/actions'
 
 export const SEND_EMAIL = 'SEND_EMAIL'
 export const SEND_EMAIL_SUCCESS = 'SEND_EMAIL_SUCCESS'

src/actions/export.js

@@ -1,5 +1,5 @@
 /* eslint-disable promise/always-return */
-import { cozyFetch } from 'actions'
+import { cozyFetch } from '@/actions'
 
 export const REQUEST_EXPORT = 'REQUEST_EXPORT'
 export const REQUEST_EXPORT_FAILURE = 'REQUEST_EXPORT_FAILURE'

src/actions/import.js

@@ -1,6 +1,6 @@
-import { cozyFetch } from 'actions'
+import { cozyFetch } from '@/actions'
 
-import { STACK_DOMAIN } from 'actions'
+import { STACK_DOMAIN } from '@/actions'
 
 export const PRECHECK_IMPORT = 'PRECHECK_IMPORT'
 export const PRECHECK_IMPORT_FAILURE = 'PRECHECK_IMPORT_FAILURE'

src/actions/passphrase.js

@@ -1,4 +1,4 @@
-import { cozyFetch } from 'actions'
+import { cozyFetch } from '@/actions'
 import { WebVaultClient } from 'cozy-keys-lib'
 
 export const UPDATE_PASSPHRASE = 'UPDATE_PASSPHRASE'

src/actions/services.js

@@ -2,9 +2,9 @@
 import Intents from 'cozy-interapp'
 import { Q } from 'cozy-client'
 
-import CLAUDY_ACTIONS from 'config/claudyActions'
+import CLAUDY_ACTIONS from '@/config/claudyActions'
 
-import { cozyFetch, fetchDevices } from 'actions'
+import { cozyFetch, fetchDevices } from '@/actions'
 
 export const FETCH_CLAUDY_INFOS = 'FETCH_CLAUDY_INFOS'
 export const FETCH_CLAUDY_INFOS_SUCCESS = 'FETCH_CLAUDY_INFOS_SUCCESS'

src/components/2FA/Activate2FA.jsx

@@ -5,11 +5,11 @@ import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import { useClient } from 'cozy-client'
 
-import ActivationConfirmation from 'components/2FA/ActivationConfirmation'
-import TwoFactorCode from 'components/2FA/TwoFactorCode'
-import ActivationConfirmed from 'components/2FA/ActivationConfirmed'
-import CreatePassword from 'components/2FA/CreatePassword'
-import { useHasPassword } from 'hooks/useHasPassword'
+import ActivationConfirmation from '@/components/2FA/ActivationConfirmation'
+import TwoFactorCode from '@/components/2FA/TwoFactorCode'
+import ActivationConfirmed from '@/components/2FA/ActivationConfirmed'
+import CreatePassword from '@/components/2FA/CreatePassword'
+import { useHasPassword } from '@/hooks/useHasPassword'
 
 /**
  * Activation of 2FA requires a 3-step process with an additional step if the user has not configured a password.

src/components/2FA/ActivationConfirmation.jsx

@@ -3,10 +3,10 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
 
-import ReactMarkdownWrapper from 'components/ReactMarkdownWrapper'
-import twoFaModalBanner from 'assets/images/double_authent_prez_banner.svg'
-import twoFaModalProtect from 'assets/images/protect_data_point.svg'
-import twoFaModalSecu from 'assets/images/niv_secu_point.svg'
+import ReactMarkdownWrapper from '@/components/ReactMarkdownWrapper'
+import twoFaModalBanner from '@/assets/images/double_authent_prez_banner.svg'
+import twoFaModalProtect from '@/assets/images/protect_data_point.svg'
+import twoFaModalSecu from '@/assets/images/niv_secu_point.svg'
 
 export const ActivationConfirmation = ({ error }) => {
   const { t } = useI18n()

src/components/2FA/ActivationConfirmed.jsx

@@ -5,7 +5,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import { buildSettingsInstanceQuery } from 'lib/queries'
+import { buildSettingsInstanceQuery } from '@/lib/queries'
 
 export const ActivationConfirmed = ({ onConfirmed }) => {
   const { t } = useI18n()

src/components/2FA/CreatePassword.jsx

@@ -8,9 +8,9 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import FormTextHelper from 'cozy-ui/transpiled/react/FormHelperText'
 
-import passwordHelper from 'lib/passwordHelper'
-import CreatePasswordHint from 'components/2FA/CreatePasswordHint'
-import { forceSetPassphrase } from 'components/2FA/helpers'
+import passwordHelper from '@/lib/passwordHelper'
+import CreatePasswordHint from '@/components/2FA/CreatePasswordHint'
+import { forceSetPassphrase } from '@/components/2FA/helpers'
 
 const initialData = {
   passphrase: '',

src/components/2FA/Passphrase2FA.jsx

@@ -5,8 +5,8 @@ import Input from 'cozy-ui/transpiled/react/Input'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 
-import ReactMarkdownWrapper from 'components/ReactMarkdownWrapper'
-import settingsConfig from 'config'
+import ReactMarkdownWrapper from '@/components/ReactMarkdownWrapper'
+import settingsConfig from '@/config'
 
 export class Passphrase2FA extends Component {
   constructor(props) {

src/components/2FA/TwoFactorCode.jsx

@@ -6,8 +6,8 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import ReactMarkdownWrapper from 'components/ReactMarkdownWrapper'
-import { buildSettingsInstanceQuery } from 'lib/queries'
+import ReactMarkdownWrapper from '@/components/ReactMarkdownWrapper'
+import { buildSettingsInstanceQuery } from '@/lib/queries'
 
 const TwoFactorCode = ({ onCodeConfirmed }) => {
   const { t } = useI18n()

src/components/2FA/index.jsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { useQuery, useMutation } from 'cozy-client'
 
-import Input from 'components/Input'
-import Activate2FA from 'components/2FA/Activate2FA'
-import Desactivate2FA from 'components/2FA/Desactivate2FA'
-import { buildSettingsInstanceQuery } from 'lib/queries'
+import Input from '@/components/Input'
+import Activate2FA from '@/components/2FA/Activate2FA'
+import Desactivate2FA from '@/components/2FA/Desactivate2FA'
+import { buildSettingsInstanceQuery } from '@/lib/queries'
 
 const TwoFA = () => {
   const { t } = useI18n()

src/components/App.jsx

@@ -12,10 +12,10 @@ import CozyDevtools from 'cozy-devtools'
 import flag from 'cozy-flags'
 import { BarComponent } from 'cozy-bar'
 
-import Sidebar from 'components/Sidebar'
-import styles from 'styles/index.styl'
-import { initFlags } from 'lib/flags'
-import SettingsRealTimeQueries from 'components/SettingsRealTimeQueries'
+import Sidebar from '@/components/Sidebar'
+import styles from '@/styles/index.styl'
+import { initFlags } from '@/lib/flags'
+import SettingsRealTimeQueries from '@/components/SettingsRealTimeQueries'
 import { AppRouter } from './AppRouter'
 
 initFlags()

src/components/AppProviders.jsx

@@ -13,7 +13,7 @@ import {
 } from 'cozy-ui/transpiled/react/styles'
 import { BarProvider } from 'cozy-bar'
 
-import { PremiumProvider } from 'components/Premium/PremiumProvider'
+import { PremiumProvider } from '@/components/Premium/PremiumProvider'
 
 /*
 With MUI V4, it is possible to generate deterministic class names.
@@ -37,7 +37,9 @@ const AppProviders = ({ client, store, children }) => {
       <StylesProvider generateClassName={generateClassName}>
         <CozyProvider client={client}>
           <Provider store={store}>
-            <EnhancedI18n dictRequire={lang => require(`locales/${lang}.json`)}>
+            <EnhancedI18n
+              dictRequire={lang => require(`@/locales/${lang}.json`)}
+            >
               <BreakpointsProvider>
                 <CozyTheme className="u-w-100">
                   <BarProvider>

src/components/AppRouter.jsx

@@ -5,24 +5,24 @@ import * as Sentry from '@sentry/react'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import flag from 'cozy-flags'
 
-import Devices from 'containers/Devices'
-import IntentRedirect from 'services/IntentRedirect'
-import Passphrase from 'containers/Passphrase'
-import PermissionsApplication from 'components/Permissions/AppPermissions/AppPermissions'
-import PermissionsTab from 'components/Permissions/PermissionsTab'
-import DataPermissions from 'components/Permissions/DataPermissions/DataPermissions'
-import Support from 'components/Support/Support'
-import PermissionDetails from 'components/Permissions/PermissionDetails/PermissionDetails'
-import Profile from 'containers/Profile'
-import Appearance from 'containers/Appearance'
-import Sessions from 'containers/Sessions'
-import { routes } from 'constants/routes'
-import ChangeEmail from 'components/Email/ChangeEmail'
-import { DeleteAccount } from 'components/DeleteAccount'
-import { Subscription } from 'components/Subscription/Subscription'
-import { LockScreen } from 'components/pages/LockScreen'
-import { Menu } from 'components/pages/Menu'
-import { Storage } from 'components/Storage/Storage'
+import Devices from '@/containers/Devices'
+import IntentRedirect from '@/services/IntentRedirect'
+import Passphrase from '@/containers/Passphrase'
+import PermissionsApplication from '@/components/Permissions/AppPermissions/AppPermissions'
+import PermissionsTab from '@/components/Permissions/PermissionsTab'
+import DataPermissions from '@/components/Permissions/DataPermissions/DataPermissions'
+import Support from '@/components/Support/Support'
+import PermissionDetails from '@/components/Permissions/PermissionDetails/PermissionDetails'
+import Profile from '@/containers/Profile'
+import Appearance from '@/containers/Appearance'
+import Sessions from '@/containers/Sessions'
+import { routes } from '@/constants/routes'
+import ChangeEmail from '@/components/Email/ChangeEmail'
+import { DeleteAccount } from '@/components/DeleteAccount'
+import { Subscription } from '@/components/Subscription/Subscription'
+import { LockScreen } from '@/components/pages/LockScreen'
+import { Menu } from '@/components/pages/Menu'
+import { Storage } from '@/components/Storage/Storage'
 
 const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes)
 

src/components/Appearance/AppearanceView.jsx

@@ -10,8 +10,8 @@ import TextField from 'cozy-ui/transpiled/react/TextField'
 import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
 import { useTheme } from 'cozy-ui/transpiled/react/styles'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
-import Page from 'components/Page'
-import PageTitle from 'components/PageTitle'
+import Page from '@/components/Page'
+import PageTitle from '@/components/PageTitle'
 
 const AppearanceView = ({ instance }) => {
   const { isMobile } = useBreakpoints()

src/components/BlockingSubscriptionModal/BlockingSubscriptionModal.jsx

@@ -4,8 +4,8 @@ import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 
-import ReactMarkdownWrapper from 'components/ReactMarkdownWrapper'
-import { PremiumLink } from 'components/Premium/PremiumLink'
+import ReactMarkdownWrapper from '@/components/ReactMarkdownWrapper'
+import { PremiumLink } from '@/components/Premium/PremiumLink'
 
 const BlockingSubscriptionModal = ({ onClose, onResume, reason, vendor }) => {
   const { t } = useI18n()

src/components/BlockingSubscriptionModal/index.js

@@ -1,6 +1,6 @@
 import flag from 'cozy-flags'
 
-export { BlockingSubscriptionModal } from 'components/BlockingSubscriptionModal/BlockingSubscriptionModal'
+export { BlockingSubscriptionModal } from '@/components/BlockingSubscriptionModal/BlockingSubscriptionModal'
 
 /**
  * Checks if there is a blocking subscription.

src/components/DeleteAccount/ConfirmModal.jsx

@@ -6,7 +6,7 @@ import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import PasswordField from 'cozy-ui/transpiled/react/PasswordField'
 
-import useCheckPassword from 'hooks/useCheckPassword'
+import useCheckPassword from '@/hooks/useCheckPassword'
 
 /**
  * Password confirmation for account deletion requests

src/components/DeleteAccount/DeleteAccount.jsx

@@ -5,17 +5,17 @@ import { useQuery, hasQueryBeenLoaded } from 'cozy-client'
 import Alerter from 'cozy-ui/transpiled/react/deprecated/Alerter'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import ConfirmModal from 'components/DeleteAccount/ConfirmModal'
-import FormModal from 'components/DeleteAccount/FormModal'
-import EmailConfirmationModal from 'components/DeleteAccount/EmailConfirmationModal'
-import { useHasPassword } from 'hooks/useHasPassword'
-import { LoaderModal } from 'components/DeleteAccount/LoaderModal'
-import { buildExternalTiesQuery } from 'lib/queries'
+import ConfirmModal from '@/components/DeleteAccount/ConfirmModal'
+import FormModal from '@/components/DeleteAccount/FormModal'
+import EmailConfirmationModal from '@/components/DeleteAccount/EmailConfirmationModal'
+import { useHasPassword } from '@/hooks/useHasPassword'
+import { LoaderModal } from '@/components/DeleteAccount/LoaderModal'
+import { buildExternalTiesQuery } from '@/lib/queries'
 import {
   BlockingSubscriptionModal,
   hasBlockingSubscription,
   getBlockingSubscriptionVendor
-} from 'components/BlockingSubscriptionModal'
+} from '@/components/BlockingSubscriptionModal'
 
 const CONFIRMING = 'confirming'
 const IDLE = 'idle'

src/components/DeleteAccount/EmailConfirmationModal.jsx

@@ -8,8 +8,8 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useQuery } from 'cozy-client'
 
-import EmailIllustration from 'assets/icons/email-illustration.svg'
-import { buildSettingsInstanceQuery } from 'lib/queries'
+import EmailIllustration from '@/assets/icons/email-illustration.svg'
+import { buildSettingsInstanceQuery } from '@/lib/queries'
 
 /**
  * @param {string} onClose - Callback when the user performs an action on the modal