chore: add .mjs files

Make sure Prettier, ESLint and lint-staged know about .mjs and .cjs
files

Set ESLint's ecmaVersion to 'latest' so the `.mjs` files in the repo can
be linted.

.eslintrc.json

@@ -5,7 +5,7 @@
     "node": false
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": "latest",
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true

.lintstagedrc.json

@@ -2,6 +2,6 @@
   "composer.json": "composer validate",
   "package.json": "npmPkgJsonLint --allowEmptyTargets",
   "*.md": ["markdownlint", "prettier --check"],
-  "*.{js,cjs,json,jsx,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
+  "*.{js,cjs,mjs,json,jsx,mdx,ts,tsx}": ["eslint --no-error-on-unmatched-pattern", "prettier --check"],
   "*.{css,scss}": ["stylelint --allow-empty-input", "prettier --check"]
 }

.prettierrc.json

@@ -1,7 +1,7 @@
 {
   "overrides": [
     {
-      "files": ["*.js", "*.cjs", "*.jsx"],
+      "files": ["*.js", "*.cjs", "*.mjs", "*.jsx"],
       "options": {
         "parser": "flow",
         "printWidth": 120,

package.json

@@ -48,13 +48,13 @@
     "clean": "lerna run clean",
     "lint": "npm-run-all --continue-on-error lint:** lint-workspaces",
     "lint:css": "stylelint --allow-empty-input '**/*.{css,scss}'",
-    "lint:js": "eslint --ext .js,.cjs,.json,.jsx,.mdx,.ts,.tsx --report-unused-disable-directives .",
+    "lint:js": "eslint --ext .js,.cjs,.mjs,.json,.jsx,.mdx,.ts,.tsx --report-unused-disable-directives .",
     "lint:md": "markdownlint '**/*.md'",
     "lint:package-json": "npmPkgJsonLint '**/package.json'",
     "lint:package-lock": "pnpm ls --recursive",
     "lint-fix": "npm-run-all --continue-on-error lint-fix:** prettier",
     "lint-fix:css": "stylelint --fix '**/*.{css,scss}'",
-    "lint-fix:js": "eslint --ext '.js,.json,.jsx,.mdx,.ts,.tsx' --fix --report-unused-disable-directives .",
+    "lint-fix:js": "eslint --ext .js,.cjs,.mjs,.json,.jsx,.mdx,.ts,.tsx --fix --report-unused-disable-directives .",
     "lint-fix:md": "markdownlint --fix '**/*.md'",
     "lint-workspaces": "lerna run --no-bail lint",
     "prepare": "husky",

packages/components-react/jest.config.mjs

@@ -1,18 +1,18 @@
 /* eslint-env node */
-import nextJest from "next/jest.js";
+import nextJest from 'next/jest.js';
 
 // Next Jest config is great for Jest 27 + React + TypeScript, so let's use that as basis
 const createJestConfig = nextJest({
-  dir: "./",
+  dir: './',
 });
 
 const customJestConfig = {
   // Add more setup options before each test is run
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
-  moduleDirectories: ["node_modules", "<rootDir>/"],
-  testEnvironment: "jest-environment-jsdom",
-  testPathIgnorePatterns: ["/dist/"],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['/dist/'],
   // transformIgnorePatterns: ['node_modules/(?!@utrecht/web-component-library-react)'],
 };
 

packages/components-react/rollup.config.mjs

@@ -1,43 +1,43 @@
-import babel from "@rollup/plugin-babel";
-import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
-import { readFileSync } from "fs";
-import filesize from "rollup-plugin-filesize";
-import nodeExternal from "rollup-plugin-node-externals";
-import nodePolyfills from "rollup-plugin-node-polyfills";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import typescript from "rollup-plugin-typescript2";
+import babel from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import { readFileSync } from 'fs';
+import filesize from 'rollup-plugin-filesize';
+import nodeExternal from 'rollup-plugin-node-externals';
+import nodePolyfills from 'rollup-plugin-node-polyfills';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2';
 
-const packageJson = JSON.parse(readFileSync("./package.json", "utf8"));
+const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'));
 
 // rollup.config.js
 /**
  * @type {import('rollup').RollupOptions}
  */
 
 export const outputGlobals = {
-  react: "React",
-  "react-dom": "ReactDOM",
+  react: 'React',
+  'react-dom': 'ReactDOM',
 };
 
 export default [
   {
-    input: "src/index.ts",
+    input: 'src/index.ts',
     output: [
       {
         file: packageJson.main,
-        format: "cjs",
+        format: 'cjs',
         sourcemap: true,
         globals: outputGlobals,
       },
       {
         file: packageJson.module,
-        format: "esm",
+        format: 'esm',
         sourcemap: true,
         globals: outputGlobals,
       },
     ],
-    external: [/@babel\/runtime/, "react-dom", "react"],
+    external: [/@babel\/runtime/, 'react-dom', 'react'],
     plugins: [
       peerDepsExternal({ includeDependencies: true }),
       nodeExternal(),
@@ -48,12 +48,12 @@ export default [
       nodePolyfills(),
       typescript({ includeDependencies: false }),
       babel({
-        presets: ["@babel/preset-react"],
-        babelHelpers: "runtime",
-        exclude: ["node_modules/**", "dist/**"],
-        extensions: [".ts", ".tsx"],
+        presets: ['@babel/preset-react'],
+        babelHelpers: 'runtime',
+        exclude: ['node_modules/**', 'dist/**'],
+        extensions: ['.ts', '.tsx'],
         inputSourceMap: true,
-        plugins: ["@babel/plugin-transform-runtime"],
+        plugins: ['@babel/plugin-transform-runtime'],
       }),
       filesize(),
     ],

proprietary/digid-design-tokens/token-transformer.mjs

@@ -1,11 +1,8 @@
-import { tokenTransformer } from "../logius-design-tokens/src/token-transformer.mjs";
-import { resolve } from "node:path";
+import { tokenTransformer } from '../logius-design-tokens/src/token-transformer.mjs';
+import { resolve } from 'node:path';
 
 tokenTransformer({
-  input: new URL(
-    "../logius-design-tokens/src/figma.tokens.json",
-    import.meta.url,
-  ).pathname,
-  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-  themes: ["DigiD"],
+  input: new URL('../logius-design-tokens/src/figma.tokens.json', import.meta.url).pathname,
+  output: new URL('./tmp/figma.tokens.json', import.meta.url).pathname,
+  themes: ['DigiD'],
 });

proprietary/logius-design-tokens/src/token-transformer.mjs

@@ -3,40 +3,32 @@
  * Copyright (c) 2023 Frameless B.V.
  */
 
-import { transformTokens } from "token-transformer";
-import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname } from "node:path";
+import { transformTokens } from 'token-transformer';
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
 
 export const tokenTransformer = ({ input, output, themes }) => {
   const rawTokens = JSON.parse(readFileSync(input));
 
   const sets = Object.keys(rawTokens);
 
-  const themeToSetName = (theme) => `theme/${theme ?? ""}`.toLowerCase();
+  const themeToSetName = (theme) => `theme/${theme ?? ''}`.toLowerCase();
   const themeSets = themes.map(themeToSetName);
 
   const setsToUse = sets.filter(
     (name) =>
-      !name.toLowerCase().startsWith("theme/") ||
-      (themeSets.length > 0 && themeSets.includes(name.toLowerCase())),
+      !name.toLowerCase().startsWith('theme/') || (themeSets.length > 0 && themeSets.includes(name.toLowerCase())),
   );
   const excludes = [];
 
   const transformerOptions = {
     throwErrorWhenNotResolved: true,
   };
 
-  const resolved = transformTokens(
-    rawTokens,
-    setsToUse,
-    excludes,
-    transformerOptions,
-  );
+  const resolved = transformTokens(rawTokens, setsToUse, excludes, transformerOptions);
 
   mkdirSync(dirname(output), { recursive: true });
   writeFileSync(output, JSON.stringify(resolved, null, 2), () => {
-    console.log(
-      `Tokens Studio JSON converted to Style Dictionary JSON:\n${output}`,
-    );
+    console.log(`Tokens Studio JSON converted to Style Dictionary JSON:\n${output}`);
   });
 };

proprietary/logius-design-tokens/token-transformer.mjs

@@ -1,7 +1,7 @@
-import { tokenTransformer } from "./src/token-transformer.mjs";
+import { tokenTransformer } from './src/token-transformer.mjs';
 
 tokenTransformer({
-  input: new URL("./src/figma.tokens.json", import.meta.url).pathname,
-  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-  themes: ["Logius"],
+  input: new URL('./src/figma.tokens.json', import.meta.url).pathname,
+  output: new URL('./tmp/figma.tokens.json', import.meta.url).pathname,
+  themes: ['Logius'],
 });

proprietary/mijnoverheid-design-tokens/token-transformer.mjs

@@ -1,10 +1,7 @@
-import { tokenTransformer } from "../logius-design-tokens/src/token-transformer.mjs";
+import { tokenTransformer } from '../logius-design-tokens/src/token-transformer.mjs';
 
 tokenTransformer({
-  input: new URL(
-    "../logius-design-tokens/src/figma.tokens.json",
-    import.meta.url,
-  ).pathname,
-  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-  themes: ["MijnOverheid"],
+  input: new URL('../logius-design-tokens/src/figma.tokens.json', import.meta.url).pathname,
+  output: new URL('./tmp/figma.tokens.json', import.meta.url).pathname,
+  themes: ['MijnOverheid'],
 });

proprietary/rivm-design-tokens/token-transformer.mjs

@@ -1,8 +1,8 @@
-import { tokenTransformer } from "../logius-design-tokens/src/token-transformer.mjs";
-import { resolve } from "node:path";
+import { tokenTransformer } from '../logius-design-tokens/src/token-transformer.mjs';
+import { resolve } from 'node:path';
 
 tokenTransformer({
-  input: new URL("./src/figma.tokens.json", import.meta.url).pathname,
-  output: new URL("./tmp/figma.tokens.json", import.meta.url).pathname,
-  themes: ["Robijnrood"],
+  input: new URL('./src/figma.tokens.json', import.meta.url).pathname,
+  output: new URL('./tmp/figma.tokens.json', import.meta.url).pathname,
+  themes: ['Robijnrood'],
 });