feat: Use package paths in transpiled

babel.config.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 const plugins = [
   [
     'css-modules-transform',
@@ -20,7 +22,16 @@ module.exports = {
   ],
   env: {
     transpilation: {
-      plugins: plugins,
+      plugins: [
+        ...plugins,
+        [
+          './scripts/babel-transform-relative-paths-plugin.js',
+          {
+            from: path.resolve(__dirname, './react'),
+            to: 'cozy-ui/transpiled/react'
+          }
+        ]
+      ],
       ignore: ['**/*.spec.jsx', '**/*.spec.js']
     },
     test: {

scripts/babel-transform-relative-paths-plugin.js

@@ -0,0 +1,30 @@
+/** Used to resolve relative paths in imports and search/replace in the resolved path  */
+
+const { declare } = require('@babel/helper-plugin-utils')
+const { types: t } = require('@babel/core')
+const path = require('path')
+
+module.exports = declare((api, options) => {
+  api.assertVersion(7)
+  return {
+    name: 'transform-relative-paths',
+
+    visitor: {
+      ImportDeclaration: {
+        exit({ node }, state) {
+          if (node.source.value.startsWith('.')) {
+            const sourcePath = path.dirname(state.file.opts.filename)
+            const relativePath = node.source.value
+            const absolutePath = path.resolve(sourcePath, relativePath)
+            const replaced = absolutePath.replace(options.from, options.to)
+
+            // Do not allow absolute paths
+            if (!replaced.startsWith('/')) {
+              node.source.value = replaced
+            }
+          }
+        }
+      }
+    }
+  }
+})