feat(Package): convert to strict ESM

.eslintrc.yml

@@ -28,7 +28,7 @@ overrides:
 rules:
     import/extensions:
         - error
-        - js: never
+        - js: ignorePackages
           json: always
           css: always
     mistica-local-rules/use-client: error

.github/actions/audit-accessibility/action.yml

@@ -12,5 +12,5 @@ inputs:
         description: 'Azure Account Key'
         required: true
 runs:
-    using: 'node16'
-    main: 'main.js'
+    using: 'node20'
+    main: 'main.cjs'

.github/actions/audit-accessibility/main.js → .github/actions/audit-accessibility/main.cjs

@@ -10,7 +10,7 @@ const puppeteer = require('puppeteer');
 const fs = require('fs');
 const mkdirp = require('mkdirp');
 const rimraf = require('rimraf');
-const {uploadFile} = require('../utils/azure-storage');
+const {uploadFile} = require('../utils/azure-storage.cjs');
 const core = require('@actions/core');
 /** @type any */
 const PromisePool = require('es6-promise-pool');
@@ -30,6 +30,7 @@ process.on('unhandledRejection', (error) => {
 
 const getStories = () => {
     console.log('Extracting stories information');
+    // @ts-ignore
     return Object.keys(require('../../../public/stories.json').stories);
 };
 
@@ -180,7 +181,7 @@ const generateReportForGithub = async (results) => {
     }
 
     lines.push('\nℹ️ You can run this locally by executing `yarn audit-accessibility`.');
-    require('../utils/github').commentPullRequest(lines.join('\n'));
+    require('../utils/github.cjs').commentPullRequest(lines.join('\n'));
 };
 
 const disabledRules = {

.github/actions/set-npm-token/action.yml

@@ -6,5 +6,5 @@ inputs:
         description: 'npm publish token'
         required: true
 runs:
-    using: 'node16'
-    main: 'main.js'
+    using: 'node20'
+    main: 'main.cjs'

.github/actions/size-stats-message/action.yml

@@ -27,5 +27,5 @@ inputs:
         description: 'Mistica lib size overhead gzip (on pr)'
         required: true
 runs:
-    using: 'node16'
-    main: 'main.js'
+    using: 'node20'
+    main: 'main.cjs'

.github/actions/size-stats/action.yml

@@ -15,5 +15,5 @@ outputs:
     lib-overhead-gzip:
         description: 'Mistica lib size overhead (gzip)'
 runs:
-    using: 'node16'
-    main: 'main.js'
+    using: 'node20'
+    main: 'main.cjs'

.github/actions/size-stats/main.js → .github/actions/size-stats/main.cjs

@@ -1,5 +1,5 @@
 const core = require('@actions/core');
-const calcSizeStats = require('../../../scripts/size-stats');
+const calcSizeStats = require('../../../scripts/size-stats/index.cjs');
 
 const main = async () => {
     const sizeStats = calcSizeStats();

.github/actions/upload-failed-screenshots/action.yml

@@ -22,8 +22,8 @@ outputs:
         description: 'List of uploaded images: Array<{filename: string, url: string}>'
 
 runs:
-    using: 'node16'
-    main: 'main.js'
+    using: 'node20'
+    main: 'main.cjs'
 
 branding:
     # https://haya14busa.github.io/github-action-brandings/

.github/actions/upload-failed-screenshots/main.js → .github/actions/upload-failed-screenshots/main.cjs

@@ -1,13 +1,13 @@
 // https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action
 // @ts-check
 const core = require('@actions/core');
-const storage = require('../utils/azure-storage');
+const storage = require('../utils/azure-storage.cjs');
 const {basename} = require('path');
 const glob = require('glob');
-const {commentPullRequest} = require('../utils/github');
+const {commentPullRequest} = require('../utils/github.cjs');
 
 const main = async () => {
-    const filenames = glob.sync(core.getInput('glob') || process.env.INPUT_GLOB);
+    const filenames = glob.sync(core.getInput('glob') || process.env.INPUT_GLOB || '');
 
     core.info('Upload failed screenshot test diffs');
 

.github/actions/utils/github.js → .github/actions/utils/github.cjs

@@ -13,12 +13,12 @@ const fetchPullRequestComments = async () => {
             issue_number: context.issue.number,
         });
     }
-    return null;
+    return {data: []};
 };
 
 const findPullRequestComment = async (firstLine) => {
     const {data} = await fetchPullRequestComments();
-    const comment = data.find((comment) => comment.body.startsWith(firstLine));
+    const comment = data.find((comment) => comment?.body?.startsWith(firstLine));
     return comment ? comment.id : null;
 };
 

.gitignore

@@ -1,11 +1,8 @@
 dist/
-dist-es/
-dist-ts/
 coverage/
 .directory
 .DS_Store
 .idea/
-*.js.map
 *.orig
 *.rej
 **/node_modules/
@@ -15,11 +12,7 @@ __diff_output__
 storybook-static/
 /public
 .vercel
-src/generated/mistica-icons/index.tsx.txt
 reports
-css/mistica.css
-community.js
-community.d.ts
 
 .yarn/*
 !.yarn/cache

.swcrc

@@ -1,6 +1,6 @@
 {
     "env": {
-        "coreJs": 3.27,
+        "coreJs": "3.27",
         "targets": {
             "chrome": "51",
             "firefox": "78",

jest-puppeteer.config.js → jest-puppeteer.config.cjs

@@ -1,2 +1,2 @@
-const config = require('@telefonica/acceptance-testing/jest-puppeteer.config');
+const config = require('@telefonica/acceptance-testing/jest-puppeteer.config.js');
 module.exports = config;

jest.acceptance.config.js → jest.acceptance.config.cjs

@@ -12,7 +12,7 @@ const getMaxWorkers = () => {
 };
 
 module.exports = {
-    ...require('./jest.base.config'),
+    ...require('./jest.base.config.cjs'),
     displayName: 'acceptance',
     maxConcurrency: 1,
     testTimeout: 60000,

jest.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+    ...require('./jest.base.config.cjs'),
+    projects: [
+        '<rootDir>/jest.unit.config.cjs',
+        '<rootDir>/jest.ssr.config.cjs',
+        '<rootDir>/jest.acceptance.config.cjs',
+    ],
+};

jest.ssr.config.js → jest.ssr.config.cjs

@@ -12,7 +12,7 @@ const getMaxWorkers = () => {
 };
 
 module.exports = {
-    ...require('./jest.base.config'),
+    ...require('./jest.base.config.cjs'),
     displayName: 'ssr',
     maxConcurrency: 1,
     testTimeout: 60000,

jest.unit.config.js → jest.unit.config.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-    ...require('./jest.base.config'),
+    ...require('./jest.base.config.cjs'),
     testTimeout: 15000,
     displayName: 'unit',
 

package.json

@@ -7,37 +7,51 @@
         "url": "https://github.com/Telefonica/mistica-web"
     },
     "homepage": "https://github.com/Telefonica/mistica-web",
-    "main": "dist/index.js",
-    "module": "dist-es/index.js",
     "files": [
-        "dist/**",
-        "dist-es/**",
-        "css/**",
-        "community.d.ts",
-        "community.js"
+        "dist/**"
     ],
+    "type": "module",
+    "exports": {
+        "./dist/*": {
+            "default": null
+        },
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./community": {
+            "types": "./dist/community/index.d.ts",
+            "import": "./dist/community/index.js",
+            "default": "./dist/community/index.js"
+        },
+        "./css/*.css": {
+            "import": "./dist/css/*.css",
+            "default": "./dist/css/*.css"
+        }
+    },
     "scripts": {
-        "test": "jest --config jest.unit.config.js",
-        "test-acceptance": "test-acceptance",
-        "test-ssr": "test-acceptance --config jest.ssr.config.js",
+        "test": "jest --config jest.unit.config.cjs",
+        "test-acceptance": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs test-acceptance --config jest.acceptance.config.cjs",
+        "test-ssr": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs test-acceptance --config jest.ssr.config.cjs",
         "prettier-check": "prettier --check \"**/*.js\" \"**/*.tsx\" \"**/*.ts\" \"**/*.json\"",
         "lint": "eslint --report-unused-disable-directives .",
         "ts-check": "tsc --project tsconfig.json --noEmit",
         "build": "yarn clean && node scripts/build.js",
         "compile": "node scripts/compile.js",
-        "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf css/mistica.css && rimraf community.d.ts && rimraf community.js && rimraf node_modules/.cache",
+        "clean": "rimraf dist node_modules/.cache",
         "prepublishOnly": "node scripts/prepublish-only.js",
         "prepack": "yarn build",
         "storybook": "storybook dev -p 6006",
         "storybook-for-acceptance-tests": "cross-env NODE_ENV=production yarn storybook --ci 2>&1",
         "playroom": "playroom start",
-        "gen-ts-defs": "rimraf dist-ts && tsc --project tsconfig.production.json --emitDeclarationOnly && cp -r dist-ts/src/* dist && rimraf dist-ts",
+        "gen-ts-defs": "tsc --project tsconfig.production.json --emitDeclarationOnly",
         "vercel-build": "VERCEL_PROD_BUILD=1 yarn storybook-static && ./node_modules/.bin/playroom build && FORCE_MOBILE=1 ./node_modules/.bin/playroom build && FORCE_DESKTOP=1 ./node_modules/.bin/playroom build && cp img/favicon.ico public/ && cp img/favicon.svg public/",
         "vercel-preview-build": "yarn storybook-static && ./node_modules/.bin/playroom build && cp img/favicon.ico public/ && cp img/favicon.svg public/",
         "storybook-static": "rimraf public && storybook build -s ./.storybook/css/fonts -o public --quiet",
-        "serve-static-storybook": "node ./scripts/serve-static-storybook.js",
+        "serve-static-storybook": "node ./scripts/serve-static-storybook.cjs",
         "detect-circular-dependencies": "npx dpdm --circular src/index.tsx",
-        "audit-accessibility": "node .github/actions/audit-accessibility/main.js",
+        "audit-accessibility": "node .github/actions/audit-accessibility/main.cjs",
         "circular-dependencies": "yarn dpdm src/index.tsx --tree=false --warning=false --exit-code circular:1",
         "prepare": "husky install"
     },
@@ -98,9 +112,9 @@
         "@types/rimraf": "^3.0.2",
         "@types/semver-compare": "^1.0.1",
         "@types/webpack-env": "^1.18.4",
-        "@vanilla-extract/jest-transform": "^1.1.5",
-        "@vanilla-extract/vite-plugin": "^3.9.5",
-        "@vanilla-extract/webpack-plugin": "^2.3.9",
+        "@vanilla-extract/jest-transform": "^1.1.9",
+        "@vanilla-extract/vite-plugin": "^4.0.15",
+        "@vanilla-extract/webpack-plugin": "^2.3.13",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.12",
         "axe-html-reporter": "^2.2.3",
@@ -147,12 +161,12 @@
         "@juggle/resize-observer": "^3.3.1",
         "@tef-novum/webview-bridge": "^3.27.0",
         "@telefonica/libphonenumber": "^2.9.0",
-        "@vanilla-extract/css": "^1.15.2",
-        "@vanilla-extract/dynamic": "^2.1.1",
-        "@vanilla-extract/sprinkles": "^1.6.2",
+        "@vanilla-extract/css": "^1.15.5",
+        "@vanilla-extract/dynamic": "^2.1.2",
+        "@vanilla-extract/sprinkles": "^1.6.3",
         "classnames": "^2.3.1",
         "lottie-react": "^2.4.0",
-        "moment": "^2.29.1",
+        "moment": "^2.30.1",
         "react-autosuggest": "^10.1.0",
         "react-datetime": "^3.1.1",
         "react-focus-lock": "^2.8.1",
@@ -162,8 +176,8 @@
         "semver-compare": "^1.0.0"
     },
     "peerDependencies": {
-        "react": "17.x || 18.x",
-        "react-dom": "17.x || 18.x"
+        "react": "18.x",
+        "react-dom": "18.x"
     },
     "publishConfig": {
         "registry": "https://registry.npmjs.org",

packages/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "es6": true
+    }
+}

packages/generate-design-tokens/index.js → packages/generate-design-tokens/index.cjs

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import url from 'url';
 // eslint-disable-next-line import/extensions
-import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
+import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.cjs';
 
 /*
 By default, this script will look for the design tokens inside .github folder but you may want to clone the mistica-design repo elsewhere.

packages/import-mistica-icons/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+    "env": {
+        "es6": true
+    }
+}

packages/import-mistica-icons/index.js → packages/import-mistica-icons/index.cjs

@@ -3,10 +3,11 @@ const mkdirp = require('mkdirp');
 const rimraf = require('rimraf');
 const {join, basename} = require('path');
 const {execSync} = require('child_process');
+// @ts-ignore
 const svgr = require('@svgr/core').default;
 const prettier = require('prettier');
 const {camelCase, kebabCase, upperFirst, uniq} = require('lodash');
-const {yellow, green} = require('colors/safe');
+const {yellow, green} = require('colors/safe.js');
 const glob = require('glob');
 
 const pascalCase = (s) => upperFirst(camelCase(s));
@@ -15,7 +16,7 @@ const PATH_REPO_ROOT = join(__dirname, '..', '..');
 const PATH_CACHE = join(__dirname, 'node_modules', '.cache');
 const PATH_MISTICA_ICONS_REPO = join(PATH_CACHE, 'mistica-icons');
 const PATH_OUTPUT = join(PATH_REPO_ROOT, 'src', 'generated/mistica-icons');
-const PATH_OUTPUT_INDEX_FILENAME = join(PATH_OUTPUT, 'index.tsx.txt');
+const PATH_OUTPUT_INDEX_FILENAME = join(PATH_OUTPUT, 'index.tsx');
 const GIT_MISTICA_ICONS_BRANCH = 'production';
 const GIT_MISTICA_ICONS = '[email protected]:Telefonica/mistica-icons.git';
 
@@ -221,9 +222,9 @@ const createAllIconKeywordsSource = () => {
      * To update, execute "yarn start" inside "import-mistica-icons"
      */
 
-    const iconKeywords: {[key: string]: Array<string>} = ${JSON.stringify(result)};
+    const keywords: {[key: string]: Array<string>} = ${JSON.stringify(result)};
 
-    export default iconKeywords;
+    export default keywords;
     `;
 
     return format(source);
@@ -252,22 +253,18 @@ const main = async () => {
 
     const index = components
         .sort((a, b) => (a[0].toLowerCase() > b[0].toLowerCase() ? 1 : -1))
-        .map(
-            ([componentName, importName]) =>
-                `export {default as ${componentName}} from './generated/mistica-icons/${importName}';`
-        )
+        .map(([componentName, importName]) => `export {default as ${componentName}} from './${importName}';`)
         .join('\n');
 
     fs.writeFileSync(PATH_OUTPUT_INDEX_FILENAME, index, 'utf8');
 
     console.log();
     console.log('Generating keywords for each icon.');
     const keywordsSource = await createAllIconKeywordsSource();
-    fs.writeFileSync(join(PATH_OUTPUT, 'icons-keywords.tsx'), keywordsSource);
+    fs.writeFileSync(join(PATH_OUTPUT, 'keywords.tsx'), keywordsSource);
 
     console.log();
     console.log(`Done! (${allIconNames.length} components).`);
-    console.log(`Copy exports in `, yellow(PATH_OUTPUT_INDEX_FILENAME), ' to src/index.tsx');
     console.log();
 };
 

packages/import-mistica-icons/package.json

@@ -6,7 +6,7 @@
     "license": "UNLICENSED",
     "private": true,
     "scripts": {
-        "start": "yarn && node index.js"
+        "start": "yarn && node index.cjs"
     },
     "dependencies": {
         "@svgr/core": "^5.4.0",