test modules

jest.config.base.cjs

@@ -0,0 +1,44 @@
+/* eslint-disable */
+const path = require('path');
+
+const COVERAGE_PATH_IGNORE_PATTERNS = [
+  '<rootDir>/node_modules/',
+  '<rootDir>/dist/',
+  '/node_modules/',
+  '/dist/',
+  'packages/gamut-icons/dist/icons/',
+  'packages/gamut-patterns/dist/patterns/',
+];
+
+const baseConfig = (packageName, overrides = {}) => {
+  const outputDirectory = path.join(__dirname, `coverage/${packageName}`);
+  return {
+    displayName: packageName,
+    preset: '../../jest.preset.js',
+    clearMocks: true,
+    coverageDirectory: outputDirectory,
+    coverageReporters: process.env.CI
+      ? ['clover', 'json', 'lcov', 'text']
+      : ['html', 'text'],
+    reporters: process.env.CI
+      ? [
+          'default',
+          'github-actions',
+          ['jest-junit', { addFileAttribute: true, outputDirectory }],
+        ]
+      : ['default'],
+    moduleNameMapper: {
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$':
+        '<rootDir>/../../script/jest/fileMock',
+      '\\.(css|scss)$': '<rootDir>/../../script/jest/styleMock',
+    },
+    testPathIgnorePatterns: ['node_modules', 'dist'],
+    ...overrides,
+    coveragePathIgnorePatterns: [
+      ...COVERAGE_PATH_IGNORE_PATTERNS,
+      ...(overrides.coveragePathIgnorePatterns ?? []),
+    ],
+  };
+};
+
+module.exports = baseConfig;

packages/gamut-icons/jest.config.ts → packages/gamut-icons/jest.config.cjs

@@ -1,13 +1,13 @@
 /* eslint-disable */
-import base from '../../jest.config.base';
+const base = require('../../jest.config.base.cjs');
 
-export default base('gamut-icons', {
+module.exports = base('gamut-icons', {
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   setupFiles: ['<rootDir>/../../script/jest/base-setup.js'],
   setupFilesAfterEnv: ['<rootDir>/../../script/jest/rtl-setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'cjs'],
   coveragePathIgnorePatterns: ['<rootDir>/src/icons/'],
   collectCoverageFrom: [
     'src/**/*.{ts,tsx}',

packages/gamut-icons/package.json

@@ -7,12 +7,18 @@
     "@codecademy/gamut-styles": "20.0.2",
     "@codecademy/variance": "0.26.1"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
   "license": "MIT",
   "main": "dist/index.js",
-  "module": "dist/index.js",
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
@@ -28,5 +34,5 @@
     "format": "svgo -f ./src/svg --pretty --config=.svgo.yml"
   },
   "sideEffects": false,
-  "types": "dist/index.d.ts"
+  "type": "module"
 }

packages/gamut-icons/project.json

@@ -32,7 +32,7 @@
       "dependsOn": ["build"],
       "outputs": ["{workspaceRoot}/coverage/packages/gamut-icons"],
       "options": {
-        "jestConfig": "packages/gamut-icons/jest.config.ts"
+        "jestConfig": "packages/gamut-icons/jest.config.cjs"
       }
     },
     "clean": {

packages/gamut-icons/svgr.config.js → packages/gamut-icons/svgr.config.cjs

@@ -1,7 +1,7 @@
-const emotionPlugin = require('./emotion-plugin');
-const maskPlugin = require('./mask-plugin');
-const template = require('./icon-template');
-const indexTemplate = require('./index-template');
+const emotionPlugin = require('./emotion-plugin.cjs');
+const maskPlugin = require('./mask-plugin.cjs');
+const template = require('./icon-template.cjs');
+const indexTemplate = require('./index-template.cjs');
 
 module.exports = {
   dimensions: false,

packages/gamut-illustrations/jest.config.ts → packages/gamut-illustrations/jest.config.cjs

@@ -1,7 +1,7 @@
 /* eslint-disable */
-import base from '../../jest.config.base';
+const base = require('../../jest.config.base.cjs');
 
-export default base('gamut-illustrations', {
+module.exports = base('gamut-illustrations', {
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },

packages/gamut-illustrations/package.json

@@ -8,13 +8,19 @@
     "@codecademy/gamut-styles": "20.0.2",
     "classnames": "^2.2.5"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
   "homepage": "https://github.com/Codecademy/gamut#readme",
   "license": "MIT",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
@@ -31,5 +37,6 @@
   "sideEffects": [
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
-  ]
+  ],
+  "type": "module"
 }

packages/gamut-illustrations/project.json

@@ -22,7 +22,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/packages/gamut-illustrations"],
       "options": {
-        "jestConfig": "packages/gamut-illustrations/jest.config.ts"
+        "jestConfig": "packages/gamut-illustrations/jest.config.cjs"
       }
     },
     "clean": {

packages/gamut-patterns/jest.config.ts → packages/gamut-patterns/jest.config.cjs

@@ -1,7 +1,7 @@
 /* eslint-disable */
-import base from '../../jest.config.base';
+const base = require('../../jest.config.base.cjs');
 
-export default base('gamut-patterns', {
+module.exports = base('gamut-patterns', {
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },

packages/gamut-patterns/package.json

@@ -9,13 +9,19 @@
     "@codecademy/variance": "0.26.1",
     "classnames": "^2.2.5"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
   "homepage": "https://github.com/Codecademy/gamut#readme",
   "license": "MIT",
   "main": "dist/index.js",
-  "module": "dist/index.js",
   "peerDependencies": {
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
@@ -31,5 +37,5 @@
     "format": "svgo -f ./src/svg --pretty --config=.svgo.yml"
   },
   "sideEffects": false,
-  "types": "dist/index.d.ts"
+  "type": "module"
 }

packages/gamut-patterns/project.json

@@ -31,7 +31,7 @@
       "outputs": ["{workspaceRoot}/coverage/packages/gamut-patterns"],
       "dependsOn": ["build"],
       "options": {
-        "jestConfig": "packages/gamut-patterns/jest.config.ts"
+        "jestConfig": "packages/gamut-patterns/jest.config.cjs"
       }
     },
     "clean": {

packages/gamut-patterns/svgr.config.js → packages/gamut-patterns/svgr.config.cjs

@@ -1,6 +1,6 @@
-const emotionPlugin = require('./emotion-plugin');
-const template = require('./pattern-template');
-const indexTemplate = require('./index-template');
+const emotionPlugin = require('./emotion-plugin.cjs');
+const template = require('./pattern-template.cjs');
+const indexTemplate = require('./index-template.cjs');
 
 module.exports = {
   dimensions: false,

packages/gamut-styles/jest.config.ts → packages/gamut-styles/jest.config.cjs

@@ -1,14 +1,14 @@
 /* eslint-disable */
-import path from 'path';
-import base from '../../jest.config.base';
+const path = require('path');
+const base = require('../../jest.config.base.cjs');
 
-export default base('gamut-styles', {
+module.exports = base('gamut-styles', {
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': [
       'babel-jest',
       {
-        configFile: require.resolve(path.join(__dirname, './babel.config.js')),
+        configFile: require.resolve(path.join(__dirname, './babel.config.cjs')),
       },
     ],
   },

packages/gamut-styles/package.json

@@ -10,6 +10,13 @@
     "get-nonce": "^1.0.0",
     "polished": "^4.1.2"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist",
     "core",
@@ -20,7 +27,6 @@
   ],
   "license": "MIT",
   "main": "dist/index.js",
-  "module": "dist/index.js",
   "peerDependencies": {
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.0",
@@ -35,5 +41,6 @@
   "repository": "git@github.com:Codecademy/gamut.git",
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
-  }
+  },
+  "type": "module"
 }

packages/gamut-styles/project.json

@@ -24,7 +24,7 @@
       "dependsOn": ["^build"],
       "outputs": ["{workspaceRoot}/coverage/packages/gamut-styles"],
       "options": {
-        "jestConfig": "packages/gamut-styles/jest.config.ts",
+        "jestConfig": "packages/gamut-styles/jest.config.cjs",
         "passWithNoTests": false
       }
     },

packages/gamut-styles/src/variance/index.ts

@@ -1,3 +1,4 @@
 export * as system from './props';
+export * as propConfig from './config';
 export { css, variant, states } from './props';
 export * from './utils';

packages/gamut-tests/jest.config.cjs

@@ -0,0 +1,4 @@
+/* eslint-disable */
+const base = require('../../jest.config.base.cjs');
+
+module.exports = base('gamut-tests', {});

packages/gamut-tests/package.json

@@ -8,6 +8,13 @@
     "component-test-setup": "^0.3.1",
     "lodash": "^4.17.23"
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -20,7 +27,6 @@
   ],
   "license": "MIT",
   "main": "dist/index.js",
-  "module": "dist/index.js",
   "peerDependencies": {
     "react": "^17.0.2 || ^18.3.0 || ^19.0.0"
   },
@@ -32,5 +38,5 @@
     "build": "nx build @codecademy/gamut-tests",
     "verify": "tsc --noEmit"
   },
-  "types": "./dist/index.d.ts"
+  "type": "module"
 }

packages/gamut-tests/project.json

@@ -22,7 +22,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/packages/gamut-tests"],
       "options": {
-        "jestConfig": "packages/gamut-tests/jest.config.ts",
+        "jestConfig": "packages/gamut-tests/jest.config.cjs",
         "passWithNoTests": true
       }
     },

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -11,10 +11,12 @@ exports[`Gamut Exported Keys 1`] = `
   "BodyPortal",
   "Box",
   "Breadcrumbs",
+  "ButtonSelectors",
   "Card",
   "Checkbox",
   "Coachmark",
   "Column",
+  "conditionalStyles",
   "ConnectedCheckbox",
   "ConnectedForm",
   "ConnectedFormGroup",
@@ -49,6 +51,8 @@ exports[`Gamut Exported Keys 1`] = `
   "focusVisibleStyle",
   "Form",
   "FormError",
+  "formFieldPaddingStyles",
+  "formFieldStyles",
   "FormGroup",
   "FormGroupDescription",
   "FormGroupLabel",
@@ -67,6 +71,7 @@ exports[`Gamut Exported Keys 1`] = `
   "LayoutGrid",
   "List",
   "ListCol",
+  "ListItem",
   "ListRow",
   "Markdown",
   "matchDisabledDates",
@@ -112,6 +117,9 @@ exports[`Gamut Exported Keys 1`] = `
   "Toaster",
   "Toggle",
   "ToolTip",
+  "typographyElementVariants",
+  "typographyStyleVariants",
+  "typographyUtilities",
   "USE_DEBOUNCED_FIELD_DIRTY_KEY",
   "useConnectedForm",
   "useDatePicker",

packages/gamut/jest.config.ts → packages/gamut/jest.config.cjs

@@ -1,12 +1,14 @@
 /* eslint-disable */
-import base from '../../jest.config.base';
+const base = require('../../jest.config.base.cjs');
 
-export default base('gamut', {
+module.exports = base('gamut', {
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   setupFiles: ['<rootDir>/../../script/jest/base-setup.js'],
   setupFilesAfterEnv: ['<rootDir>/../../script/jest/rtl-setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  transformIgnorePatterns: ['node_modules/(?!(@vidstack/react|@formatjs)/)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@vidstack/react|@formatjs|@codecademy)/)',
+  ],
 });