Migrate packages to ESM (#2061)

* Replace ts-node with tsx

* Migrate @sumup/icons to ESM

* Switch @sumup/icons to package exports

* Migrate @sumup/design-tokens to ESM

* Configure @sumup/circuit-ui as a module

* Add file extensions using eslint-plugin-node

* Add extensions to component index files

* Search and insert file extensions

* Proxy isPropValid import

* Fix Storybook imports

* Fix css prop types

* Internalize usePrevious and useLatest hooks

The packages weren't ESM-ready.

* Fix import resolution and dependency cycles

* Use .js for all file extensions

That's what TypeScript uses for the compiled files.

* Switch Storybook to Vite

* Upgrade @storybook/* packages to latest

* Add extensions in story and spec files

* Remove Babel

* Integrate Vite with Turbosnap

* Re-add exports after rebase

* Add code comments for Emotion workaround

* Add changesets

* Raise the minimum Node.js version to 16+

* Add unit tests for useLatest and usePrevious

.changeset/flat-lamps-glow.md

@@ -0,0 +1,7 @@
+---
+'@sumup/design-tokens': major
+'@sumup/circuit-ui': major
+'@sumup/icons': major
+---
+
+Raised the minimum Node.js version to 16+. This is the first maintained version with support for ES modules.

.changeset/grumpy-donuts-flash.md

@@ -0,0 +1,10 @@
+---
+'@sumup/design-tokens': major
+'@sumup/circuit-ui': major
+'@sumup/icons': major
+---
+
+**This package is now pure ESM**. Please [read this](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+
+- If you use TypeScript, you need to use TypeScript 4.7 or later ([ref](https://github.com/microsoft/TypeScript/issues/46452)).
+- If you use a bundler, make sure it supports ESM and that you have correctly configured it for ESM. (Next.js supports ESM packages out of the box since [v12](https://nextjs.org/blog/next-12#es-modules-support-and-url-imports)).

.changeset/red-experts-lie.md

@@ -0,0 +1,7 @@
+---
+'@sumup/design-tokens': major
+'@sumup/circuit-ui': major
+'@sumup/icons': major
+---
+
+Switched to the `"exports"` field to configure the package entry points. Files that are not explicitly defined in `"exports"` can no longer be imported.

.eslintrc.js

@@ -1,5 +1,16 @@
 module.exports = require('@sumup/foundry/eslint')({
   plugins: ['@sumup/circuit-ui'],
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: ['./packages/*/tsconfig.json', './tsconfig.eslint.json'],
+      },
+    },
+  },
   rules: {
     '@sumup/circuit-ui/no-invalid-custom-properties': 'error',
     'react/no-unknown-property': ['error', { ignore: ['css'] }],

.storybook/main.ts

@@ -1,7 +1,8 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-import type { PluginItem } from '@babel/core';
+import type { StorybookConfig } from '@storybook/react-vite';
 import path from 'path';
 import remarkGfm from 'remark-gfm';
+import { mergeConfig } from 'vite';
+import turbosnap from 'vite-plugin-turbosnap';
 
 const toPath = (_path: string) => path.join(process.cwd(), _path);
 
@@ -35,24 +36,17 @@ const config: StorybookConfig = {
     disableTelemetry: true,
   },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
-  babel: async (options) => ({
-    ...options,
-    presets: [
-      ...(options.presets as PluginItem[]),
-      // HACK: Storybook includes `@babel/preset-react` by default, which
-      // overrides the custom preset configuration in `babel.config.json`.
-      // This override overrides the override.
-      [
-        '@babel/preset-react',
-        { runtime: 'automatic', importSource: '@emotion/react' },
-        'preset-jsx-import-source',
-      ],
-      '@babel/preset-typescript',
-    ],
-  }),
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      plugins:
+        configType === 'PRODUCTION'
+          ? [turbosnap({ rootDir: config.root ?? process.cwd() })]
+          : [],
+    });
+  },
 };
 
 export default config;