@elliemae/pui-cli 9.0.0-alpha.11 → 9.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/build/docs/404.html +4 -4
- package/build/docs/api/functions/loadRoutes/index.html +9 -9
- package/build/docs/api/index.html +8 -8
- package/build/docs/api/type-aliases/LIB_NAME/index.html +5 -5
- package/build/docs/api/variables/babelConfig/index.html +5 -28
- package/build/docs/api/variables/commitlintConfig/index.html +5 -8
- package/build/docs/api/variables/eslintFlatBaseConfig/index.html +6 -6
- package/build/docs/api/variables/eslintFlatBaseConfigStrict/index.html +6 -6
- package/build/docs/api/variables/eslintFlatConfig/index.html +6 -6
- package/build/docs/api/variables/eslintFlatConfigStrict/index.html +6 -6
- package/build/docs/api/variables/jestConfig/index.html +86 -86
- package/build/docs/api/variables/jestNodeConfig/index.html +86 -86
- package/build/docs/api/variables/lintStagedConfig/index.html +22 -12
- package/build/docs/api/variables/prettierConfig/index.html +5 -18
- package/build/docs/api/variables/stylelintConfig/index.html +5 -5
- package/build/docs/api/variables/vitestConfig/index.html +5 -5
- package/build/docs/assets/css/{styles.74603f39.css → styles.3cba4e67.css} +1 -1
- package/build/docs/assets/js/04ee7372.c6c3d513.js +1 -0
- package/build/docs/assets/js/0551d4dd.a6b1d9fa.js +1 -0
- package/build/docs/assets/js/0a1d0315.43980061.js +1 -0
- package/build/docs/assets/js/13097d8d.4ac8ef79.js +1 -0
- package/build/docs/assets/js/{16b7bc88.c3779e27.js → 16b7bc88.2ac57556.js} +1 -1
- package/build/docs/assets/js/{17896441.84339068.js → 17896441.705d85a0.js} +1 -1
- package/build/docs/assets/js/{1b9df811.aaa95da1.js → 1b9df811.ec75cfdc.js} +1 -1
- package/build/docs/assets/js/{232a0286.33b2782b.js → 232a0286.6f749ae5.js} +1 -1
- package/build/docs/assets/js/{2399.cc5803e0.js → 2399.5d123cba.js} +1 -1
- package/build/docs/assets/js/{37d86055.47211796.js → 37d86055.1e73f036.js} +1 -1
- package/build/docs/assets/js/3992.b9b54f94.js +2 -0
- package/build/docs/assets/js/4fb6949f.13bde4a8.js +1 -0
- package/build/docs/assets/js/5befad71.96f04f67.js +1 -0
- package/build/docs/assets/js/5d5f1db0.e7607cd2.js +1 -0
- package/build/docs/assets/js/5e8c322a.0b86bf5a.js +1 -0
- package/build/docs/assets/js/5e95c892.de377e27.js +1 -0
- package/build/docs/assets/js/{5fb3c522.da5628e8.js → 5fb3c522.3ec831ee.js} +1 -1
- package/build/docs/assets/js/6bd11e52.c61bfcd5.js +1 -0
- package/build/docs/assets/js/6e96545e.1b545333.js +1 -0
- package/build/docs/assets/js/{71f6d02b.cfd98385.js → 71f6d02b.4b381360.js} +1 -1
- package/build/docs/assets/js/{6704.2615a5c6.js → 7843.f4b19776.js} +1 -1
- package/build/docs/assets/js/80e87108.8c451f49.js +1 -0
- package/build/docs/assets/js/{8585.3cb09ff7.js → 8585.e2298db3.js} +1 -1
- package/build/docs/assets/js/{a7bd4aaa.30ffad02.js → a7bd4aaa.aceac89c.js} +1 -1
- package/build/docs/assets/js/a94703ab.248144c2.js +1 -0
- package/build/docs/assets/js/b7b585d8.7d50f3f6.js +1 -0
- package/build/docs/assets/js/{bde5209a.f5bca8b2.js → bde5209a.480cc8d8.js} +1 -1
- package/build/docs/assets/js/c377a04b.c6b6b394.js +1 -0
- package/build/docs/assets/js/{dfd75424.51c4e2cb.js → dfd75424.459da76b.js} +1 -1
- package/build/docs/assets/js/f736c962.ab424879.js +1 -0
- package/build/docs/assets/js/main.3ae939d4.js +2 -0
- package/build/docs/assets/js/runtime~main.9ecf1839.js +1 -0
- package/build/docs/eslint-rules-migration/index.html +43 -43
- package/build/docs/index.html +70 -71
- package/build/docs/pui-cli-9-migration/index.html +191 -70
- package/build/docs/sitemap.xml +1 -1
- package/build/docs/ssl-certificate-setup/index.html +23 -23
- package/build/docs/stylelint-migration/index.html +19 -21
- package/build/docs/usage-guide/index.html +91 -91
- package/dist/cjs/babel.config.js +124 -0
- package/dist/cjs/commands/storybook.js +33 -4
- package/dist/cjs/index.js +5 -9
- package/dist/cjs/lint-config/commitlint/export.mjs +1 -0
- package/dist/cjs/lint-config/commitlint.config.mjs +6 -0
- package/dist/cjs/lint-config/eslint/common.cjs +8 -1
- package/dist/cjs/lint-config/eslint/flat/compat.mjs +5 -5
- package/dist/cjs/lint-config/eslint/flat/rules.mjs +1 -0
- package/dist/cjs/lint-config/lint-staged.config.js +17 -5
- package/dist/cjs/lint-config/prettier/export.mjs +1 -0
- package/dist/cjs/lint-config/{prettier.config.cjs → prettier.config.mjs} +4 -1
- package/dist/cjs/skills/migrate-storybook-out-of-cjs/SKILL.md +242 -0
- package/dist/cjs/skills/migrate-to-pui-cli-9/SKILL.md +188 -25
- package/dist/cjs/testing/{jest.config.cjs → jest.config.mjs} +14 -6
- package/dist/{esm/testing/jest.node.config.cjs → cjs/testing/jest.node.config.mjs} +3 -2
- package/dist/cjs/testing/setup-textencoder.cjs +4 -0
- package/dist/cjs/webpack/webpack.storybook.js +62 -0
- package/dist/esm/babel.config.js +94 -0
- package/dist/esm/commands/storybook.js +22 -4
- package/dist/esm/index.js +5 -9
- package/dist/esm/lint-config/commitlint/export.mjs +1 -0
- package/dist/esm/lint-config/commitlint.config.mjs +6 -0
- package/dist/esm/lint-config/eslint/common.cjs +8 -1
- package/dist/esm/lint-config/eslint/flat/compat.mjs +5 -5
- package/dist/esm/lint-config/eslint/flat/rules.mjs +1 -0
- package/dist/esm/lint-config/lint-staged.config.js +17 -5
- package/dist/esm/lint-config/prettier/export.mjs +1 -0
- package/{lib/lint-config/prettier.config.cjs → dist/esm/lint-config/prettier.config.mjs} +4 -1
- package/dist/esm/skills/migrate-storybook-out-of-cjs/SKILL.md +242 -0
- package/dist/esm/skills/migrate-to-pui-cli-9/SKILL.md +188 -25
- package/dist/esm/testing/{jest.config.cjs → jest.config.mjs} +14 -6
- package/dist/{cjs/testing/jest.node.config.cjs → esm/testing/jest.node.config.mjs} +3 -2
- package/dist/esm/testing/setup-textencoder.cjs +4 -0
- package/dist/esm/webpack/webpack.storybook.js +61 -0
- package/dist/types/lib/babel.config.d.ts +3 -0
- package/dist/types/lib/commands/storybook.d.ts +1 -0
- package/dist/types/lib/index.d.ts +5 -9
- package/dist/types/lib/lint-config/commitlint/export.d.mts +1 -0
- package/dist/types/lib/lint-config/commitlint.config.d.mts +3 -0
- package/dist/types/lib/lint-config/eslint/common.d.cts +8 -2
- package/dist/types/lib/lint-config/eslint/flat/compat.d.mts +1 -1
- package/dist/types/lib/lint-config/eslint/non-react.d.cts +8 -1
- package/dist/types/lib/lint-config/eslint/react.d.cts +8 -1
- package/dist/types/lib/lint-config/eslint/typescript/non-react.d.cts +8 -1
- package/dist/types/lib/lint-config/eslint/typescript/react.d.cts +8 -1
- package/dist/types/lib/lint-config/lint-staged.config.d.ts +2 -2
- package/dist/types/lib/lint-config/prettier/export.d.mts +1 -0
- package/dist/types/lib/lint-config/prettier.config.d.mts +3 -0
- package/dist/types/lib/testing/setup-textencoder.d.cts +1 -0
- package/dist/types/lib/utils.d.cts +1 -1
- package/dist/types/lib/utils.d.ts +1 -1
- package/dist/types/lib/webpack/webpack.storybook.d.ts +2 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/lib/lint-config/commitlint/export.mjs +1 -0
- package/lib/lint-config/commitlint.config.mjs +6 -0
- package/lib/lint-config/eslint/common.cjs +8 -1
- package/lib/lint-config/eslint/flat/compat.mjs +5 -5
- package/lib/lint-config/eslint/flat/rules.mjs +1 -0
- package/lib/lint-config/lint-staged.config.js +20 -5
- package/lib/lint-config/prettier/export.mjs +1 -0
- package/{dist/esm/lint-config/prettier.config.cjs → lib/lint-config/prettier.config.mjs} +4 -1
- package/lib/skills/migrate-storybook-out-of-cjs/SKILL.md +242 -0
- package/lib/skills/migrate-to-pui-cli-9/SKILL.md +188 -25
- package/lib/testing/jest.config.mjs +124 -0
- package/lib/testing/jest.node.config.mjs +9 -0
- package/package.json +46 -36
- package/build/docs/api/variables/eslintBaseConfig/index.html +0 -132
- package/build/docs/api/variables/eslintConfig/index.html +0 -180
- package/build/docs/assets/js/04ee7372.eaa386ed.js +0 -1
- package/build/docs/assets/js/0551d4dd.ebb18f4f.js +0 -1
- package/build/docs/assets/js/0a1d0315.fc8f91a7.js +0 -1
- package/build/docs/assets/js/13097d8d.af480dfd.js +0 -1
- package/build/docs/assets/js/3992.0ac29b2f.js +0 -2
- package/build/docs/assets/js/4fb6949f.369cc1b9.js +0 -1
- package/build/docs/assets/js/5befad71.5f19afb5.js +0 -1
- package/build/docs/assets/js/5d5f1db0.c5aa5afa.js +0 -1
- package/build/docs/assets/js/5e8c322a.ef3b894b.js +0 -1
- package/build/docs/assets/js/5e95c892.f550b901.js +0 -1
- package/build/docs/assets/js/6bd11e52.08b95209.js +0 -1
- package/build/docs/assets/js/6e96545e.30c1b801.js +0 -1
- package/build/docs/assets/js/80e87108.f9507b95.js +0 -1
- package/build/docs/assets/js/a94703ab.f1796514.js +0 -1
- package/build/docs/assets/js/b7b585d8.6d53e73f.js +0 -1
- package/build/docs/assets/js/b8ac1d98.62684003.js +0 -1
- package/build/docs/assets/js/c377a04b.0f8625c6.js +0 -1
- package/build/docs/assets/js/e5f79924.c793a74d.js +0 -1
- package/build/docs/assets/js/f736c962.dbd0d004.js +0 -1
- package/build/docs/assets/js/main.7f815b7e.js +0 -2
- package/build/docs/assets/js/runtime~main.f7c5bef0.js +0 -1
- package/dist/cjs/babel.config.cjs +0 -97
- package/dist/cjs/index.cjs +0 -35
- package/dist/cjs/lint-config/commitlint.config.cjs +0 -1
- package/dist/cjs/lint-config/stylelint.config.cjs +0 -3
- package/dist/esm/babel.config.cjs +0 -97
- package/dist/esm/index.cjs +0 -35
- package/dist/esm/lint-config/commitlint.config.cjs +0 -1
- package/dist/esm/lint-config/stylelint.config.cjs +0 -3
- package/dist/types/lib/babel.config.d.cts +0 -59
- package/dist/types/lib/index.d.cts +0 -13
- package/dist/types/lib/lint-config/commitlint.config.d.cts +0 -4
- package/dist/types/lib/lint-config/prettier.config.d.cts +0 -8
- package/dist/types/lib/lint-config/stylelint.config.d.cts +0 -2
- package/lib/lint-config/commitlint.config.cjs +0 -1
- package/lib/lint-config/stylelint.config.cjs +0 -3
- /package/build/docs/assets/js/{3992.0ac29b2f.js.LICENSE.txt → 3992.b9b54f94.js.LICENSE.txt} +0 -0
- /package/build/docs/assets/js/{main.7f815b7e.js.LICENSE.txt → main.3ae939d4.js.LICENSE.txt} +0 -0
- /package/dist/types/lib/testing/{jest.config.d.cts → jest.config.d.mts} +0 -0
- /package/dist/types/lib/testing/{jest.node.config.d.cts → jest.node.config.d.mts} +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* ESLint 10 removed deprecated context APIs (e.g. getSourceCode, getScope, getFilename).
|
|
3
3
|
* Wrap legacy plugins via @eslint/compat v2 (ESLint 10–aware fixupPluginRules).
|
|
4
4
|
*/
|
|
5
|
-
import {
|
|
5
|
+
import { fixupPluginRules } from '@eslint/compat';
|
|
6
6
|
import react from 'eslint-plugin-react';
|
|
7
7
|
import reduxSaga from 'eslint-plugin-redux-saga';
|
|
8
8
|
import storybook from 'eslint-plugin-storybook';
|
|
@@ -20,8 +20,8 @@ export const reactPlugin = fixupPluginRules(react);
|
|
|
20
20
|
/** @type {import('eslint').ESLint.Plugin} */
|
|
21
21
|
export const reduxSagaPlugin = fixupPluginRules(reduxSaga);
|
|
22
22
|
|
|
23
|
-
/** Storybook flat presets —
|
|
23
|
+
/** Storybook flat presets — native flat config (eslint-plugin-storybook@10). */
|
|
24
24
|
/** @type {import('eslint').Linter.Config[]} */
|
|
25
|
-
export const storybookFlatConfigs =
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
export const storybookFlatConfigs = Array.isArray(storybookFlat)
|
|
26
|
+
? storybookFlat
|
|
27
|
+
: [storybookFlat];
|
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
2
|
import fs from "node:fs";
|
|
3
3
|
const npmClient = fs.existsSync(path.join(process.cwd(), "pnpm-lock.yaml")) ? "pnpm" : "npm";
|
|
4
|
+
const filterRootBabelConfig = (files) => files.filter(
|
|
5
|
+
(file) => path.relative(process.cwd(), file) !== "babel.config.ts"
|
|
6
|
+
);
|
|
7
|
+
const filterTscheckFiles = filterRootBabelConfig;
|
|
4
8
|
const lintStagedConfig = {
|
|
5
9
|
"*.{js,ts,jsx,tsx,md,mdx,html,css,json}": ["prettier --write"],
|
|
6
|
-
"*.{ts,tsx}":
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
`${npmClient} run
|
|
10
|
-
|
|
10
|
+
"*.{ts,tsx}": (files) => {
|
|
11
|
+
const filesToCheck = filterTscheckFiles(files);
|
|
12
|
+
if (!filesToCheck.length) return [];
|
|
13
|
+
return [`${npmClient} run tscheck -- ${filesToCheck.join(" ")}`];
|
|
14
|
+
},
|
|
15
|
+
"*.{js,ts,jsx,tsx}": (files) => {
|
|
16
|
+
const filesToLint = filterRootBabelConfig(files);
|
|
17
|
+
if (!filesToLint.length) return [];
|
|
18
|
+
return [
|
|
19
|
+
`${npmClient} run lint:fix -- ${filesToLint.join(" ")}`,
|
|
20
|
+
`${npmClient} run test:staged -- ${filesToLint.join(" ")}`
|
|
21
|
+
];
|
|
22
|
+
}
|
|
11
23
|
};
|
|
12
24
|
export {
|
|
13
25
|
lintStagedConfig
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { prettierConfig, default } from '../prettier.config.mjs';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/** @type {import('prettier').Config} */
|
|
2
|
+
export const prettierConfig = {
|
|
2
3
|
printWidth: 80,
|
|
3
4
|
tabWidth: 2,
|
|
4
5
|
useTabs: false,
|
|
@@ -6,3 +7,5 @@ exports.prettierConfig = {
|
|
|
6
7
|
singleQuote: true,
|
|
7
8
|
trailingComma: 'all',
|
|
8
9
|
};
|
|
10
|
+
|
|
11
|
+
export default prettierConfig;
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: migrate-storybook-out-of-cjs
|
|
3
|
+
description: >-
|
|
4
|
+
Migrate PUI Storybook from CJS wrappers and @elliemae/pui-app-sdk/storybook/cjs/* to ESM
|
|
5
|
+
(.storybook/*.mjs) and @elliemae/pui-app-sdk/storybook/* imports. Use when upgrading Storybook
|
|
6
|
+
10 with pui-cli 9, bumping to latest pui-app-sdk, replacing require() in .storybook/main.js,
|
|
7
|
+
removing storybook/cjs/main or storybook/cjs/middleware, deleting .storybook/middleware.js,
|
|
8
|
+
or converting preview/manager/theme to ESM.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Migrate Storybook out of CJS (Storybook 10 + latest pui-app-sdk)
|
|
12
|
+
|
|
13
|
+
Moves consumer repos from legacy CommonJS Storybook wrappers (`require('@elliemae/pui-app-sdk/storybook/cjs/...')`) to ESM (`.storybook/*.mjs` + `@elliemae/pui-app-sdk/storybook/*`).
|
|
14
|
+
|
|
15
|
+
Requires **pui-cli 9** and a matching **pui-app-sdk** release on the same train. The `storybook/cjs/*` package paths are **removed** from pui-app-sdk — repos still on CJS imports will fail at install or runtime.
|
|
16
|
+
|
|
17
|
+
For the full pui-cli 9 upgrade (Node 24, ESLint 10, etc.), install `migrate-to-pui-cli-9` first or in parallel.
|
|
18
|
+
|
|
19
|
+
## When to use
|
|
20
|
+
|
|
21
|
+
- `.storybook/main.js` uses `require('@elliemae/pui-app-sdk/storybook/cjs/main')`
|
|
22
|
+
- `.storybook/middleware.js` exists or imports `storybook/cjs/middleware`
|
|
23
|
+
- Storybook fails after bumping pui-app-sdk with “Cannot find module …/storybook/cjs/…”
|
|
24
|
+
- Storybook fails with `Cannot find module '…/dist/esm/utils/storybook/main.js'` (app-sdk not built)
|
|
25
|
+
- Moving from Storybook 6 CJS config to Storybook 10 ESM config with pui-cli
|
|
26
|
+
|
|
27
|
+
## pui-app-sdk changes (latest Storybook 10 train)
|
|
28
|
+
|
|
29
|
+
| Topic | Before | After |
|
|
30
|
+
| --------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
31
|
+
| Import path | `@elliemae/pui-app-sdk/storybook/cjs/main` | `@elliemae/pui-app-sdk/storybook/main` |
|
|
32
|
+
| Export name | `getConfig()` | **`getStorybookConfig(viteBuilder?)`** |
|
|
33
|
+
| Published files | CJS under `storybook/cjs/` | TypeScript in repo; **`dist/esm\|cjs/utils/storybook/*`** at runtime |
|
|
34
|
+
| Shared modules | `cjs/main`, `cjs/webpack`, … | `main`, `preview`, `manager`, `theme`, `webpack`, `vite`, `middleware` (deprecated) |
|
|
35
|
+
| app-sdk dogfood | CJS + SB6 webpack hacks in `.storybook/main.js` | **`.storybook/*.ts`** → `../lib/utils/storybook/*` (source; not package self-import) |
|
|
36
|
+
|
|
37
|
+
Consumers **must** import compiled dist (`@elliemae/pui-app-sdk/storybook/*`). After a local `file:` link, run **`pnpm run build`** in app-sdk before Storybook.
|
|
38
|
+
|
|
39
|
+
## What changed (consumers)
|
|
40
|
+
|
|
41
|
+
| Topic | Before (CJS / SB6) | After (ESM / SB10) |
|
|
42
|
+
| ----------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
+
| Consumer config | `.storybook/main.js` | `.storybook/main.mjs` |
|
|
44
|
+
| Shared import | `@elliemae/pui-app-sdk/storybook/cjs/main` | `@elliemae/pui-app-sdk/storybook/main` |
|
|
45
|
+
| Export name | `getConfig()` (CJS default) | **`getStorybookConfig()`** (named export) |
|
|
46
|
+
| API mocks | `.storybook/middleware.js` | Built into pui-cli Storybook dev server |
|
|
47
|
+
| Preview / manager | `.storybook/preview.js`, `manager.js` | `.storybook/preview.mjs`, `manager.mjs` (when using ESM imports) |
|
|
48
|
+
| CLI | `start-storybook` / `build-storybook` | `pui-cli storybook` → `storybook dev` / `storybook build` |
|
|
49
|
+
| Addons | Installed in consumer `package.json` | Bundled in pui-cli; referenced by package name in app-sdk config |
|
|
50
|
+
| MDX docs | `*.stories.mdx` | Docs-only pages: **`*.mdx`** + `@storybook/addon-docs/blocks` |
|
|
51
|
+
| Babel (Storybook) | SWC / ad-hoc overrides | `@storybook/addon-webpack5-compiler-babel` + project **`babel.config.ts`** → pui-cli `babelConfig` (includes private class fields/methods) |
|
|
52
|
+
|
|
53
|
+
## Pre-flight
|
|
54
|
+
|
|
55
|
+
1. Bump `@elliemae/pui-cli@9` and `@elliemae/pui-app-sdk@*` together.
|
|
56
|
+
2. Run `pnpm install`. If using a local `file:` link to pui-app-sdk, **`pnpm run build`** in app-sdk, then reinstall in the consumer so `dist/` storybook exports exist.
|
|
57
|
+
3. Confirm the repo uses `pui-cli storybook` (not raw `start-storybook` scripts).
|
|
58
|
+
4. Consumer **`babel.config.ts`** should re-export pui-cli only — migrate from `babel.config.cjs` if present. **Do not** add `@babel/plugin-transform-private-methods` locally (included in pui-cli 9).
|
|
59
|
+
|
|
60
|
+
## Migration steps
|
|
61
|
+
|
|
62
|
+
### Step 0 — Babel config (if not done in `migrate-to-pui-cli-9`)
|
|
63
|
+
|
|
64
|
+
Replace `babel.config.cjs` with `babel.config.ts`:
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { babelConfig } from '@elliemae/pui-cli';
|
|
68
|
+
|
|
69
|
+
export default babelConfig;
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Delete `babel.config.cjs`. Do **not** add private-method Babel plugins locally.
|
|
73
|
+
|
|
74
|
+
### Step 1 — Replace `.storybook/main.js`
|
|
75
|
+
|
|
76
|
+
Delete `main.js`. Create `.storybook/main.mjs`:
|
|
77
|
+
|
|
78
|
+
```javascript
|
|
79
|
+
import { getStorybookConfig } from '@elliemae/pui-app-sdk/storybook/main';
|
|
80
|
+
|
|
81
|
+
export default getStorybookConfig();
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
**Do not** use `getConfig`, `require('…/storybook/cjs/main')`, or import storybook from app-sdk before dist is built.
|
|
85
|
+
|
|
86
|
+
Optional Vite builder (experimental): `export default getStorybookConfig(true);`
|
|
87
|
+
|
|
88
|
+
### Step 2 — Remove middleware
|
|
89
|
+
|
|
90
|
+
Delete `.storybook/middleware.js` if present.
|
|
91
|
+
|
|
92
|
+
pui-cli registers mock API routes during `storybook dev`. The deprecated `@elliemae/pui-app-sdk/storybook/middleware` export exists only for repos not yet on pui-cli 9 Storybook — **do not** add it back in new ESM configs.
|
|
93
|
+
|
|
94
|
+
### Step 3 — Convert preview, manager, theme (if customized)
|
|
95
|
+
|
|
96
|
+
If the repo only uses shared pui-app-sdk defaults, you may have no preview file — skip.
|
|
97
|
+
|
|
98
|
+
**Minimal preview** (no custom theme):
|
|
99
|
+
|
|
100
|
+
```javascript
|
|
101
|
+
// .storybook/preview.mjs
|
|
102
|
+
export {
|
|
103
|
+
decorators,
|
|
104
|
+
parameters,
|
|
105
|
+
loaders,
|
|
106
|
+
} from '@elliemae/pui-app-sdk/storybook/preview';
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**Preview with local theme** (see `pui-react-boilerplate`):
|
|
110
|
+
|
|
111
|
+
```javascript
|
|
112
|
+
// .storybook/preview.mjs
|
|
113
|
+
import {
|
|
114
|
+
getParameters,
|
|
115
|
+
loaders,
|
|
116
|
+
decorators,
|
|
117
|
+
} from '@elliemae/pui-app-sdk/storybook/preview';
|
|
118
|
+
import { theme } from './theme.mjs';
|
|
119
|
+
|
|
120
|
+
const parameters = getParameters(theme);
|
|
121
|
+
|
|
122
|
+
export { decorators, parameters, loaders };
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**Manager / theme** — convert `manager.js` → `manager.mjs`, `theme.js` → `theme.mjs` when customized:
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
// .storybook/manager.mjs
|
|
129
|
+
import { initSBManager } from '@elliemae/pui-app-sdk/storybook/manager';
|
|
130
|
+
import { theme } from './theme.mjs';
|
|
131
|
+
|
|
132
|
+
initSBManager(theme);
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
```javascript
|
|
136
|
+
// .storybook/theme.mjs
|
|
137
|
+
export const theme = {
|
|
138
|
+
brandTitle: 'My App',
|
|
139
|
+
brandUrl: 'https://example.com',
|
|
140
|
+
};
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Keep `.storybook/preview-head.html` unchanged.
|
|
144
|
+
|
|
145
|
+
Delete obsolete `.js` duplicates after creating `.mjs` files (`preview.js`, `manager.js`, `theme.js`, `middleware.js`).
|
|
146
|
+
|
|
147
|
+
### Step 4 — MDX docs (Storybook 10 / MDX3)
|
|
148
|
+
|
|
149
|
+
- Docs-only pages: rename **`intro.stories.mdx`** → **`intro.mdx`** (avoid `.stories.mdx` unless the file exports CSF stories).
|
|
150
|
+
- Import Meta from **`@storybook/addon-docs/blocks`**:
|
|
151
|
+
|
|
152
|
+
```mdx
|
|
153
|
+
import { Meta } from '@storybook/addon-docs/blocks';
|
|
154
|
+
|
|
155
|
+
<Meta title="Getting Started/Introduction" />
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Step 5 — Monorepo lib packages (no `app/` directory)
|
|
159
|
+
|
|
160
|
+
pui-app-sdk omits `../app/**` story globs when no `app/` folder exists. If globs still fail, filter explicitly in `main.mjs`:
|
|
161
|
+
|
|
162
|
+
```javascript
|
|
163
|
+
import { getStorybookConfig } from '@elliemae/pui-app-sdk/storybook/main';
|
|
164
|
+
|
|
165
|
+
const config = getStorybookConfig();
|
|
166
|
+
config.stories = config.stories.filter((s) => !s.includes('/app/'));
|
|
167
|
+
|
|
168
|
+
export default config;
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
Pilot: `pui-mono-repo-boilerplate/libs/foo`.
|
|
172
|
+
|
|
173
|
+
### Step 6 — Stories and types
|
|
174
|
+
|
|
175
|
+
- Prefer CSF3 and `@storybook/react-webpack5` types where TypeScript fails.
|
|
176
|
+
- Remove Storybook 6 webpack alias workarounds (MDX pinning, react-select hacks) unless a story still breaks after upgrade.
|
|
177
|
+
- Consumers do **not** install `@storybook/addon-*` separately — addons resolve from pui-cli via NODE_PATH.
|
|
178
|
+
|
|
179
|
+
### Step 7 — ESLint
|
|
180
|
+
|
|
181
|
+
Ensure `.storybook/**` is linted. After pui-cli 9 ESLint flat config migration, run `pnpm exec pui-cli lint` on story files.
|
|
182
|
+
|
|
183
|
+
## Verify
|
|
184
|
+
|
|
185
|
+
```bash
|
|
186
|
+
pnpm exec pui-cli storybook # dev, default port 11000
|
|
187
|
+
pnpm exec pui-cli storybook -b # static build to demo/
|
|
188
|
+
pnpm exec pui-cli storybook -b --docs # docs build
|
|
189
|
+
pnpm exec pui-cli lint
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
Checklist:
|
|
193
|
+
|
|
194
|
+
- [ ] `babel.config.ts` re-exports pui-cli; no `babel.config.cjs`
|
|
195
|
+
- [ ] No `require('@elliemae/pui-app-sdk/storybook/cjs/…')` anywhere
|
|
196
|
+
- [ ] `.storybook/main.mjs` exists; `main.js` removed
|
|
197
|
+
- [ ] `.storybook/middleware.js` removed (if it existed)
|
|
198
|
+
- [ ] app-sdk dist built when using local link
|
|
199
|
+
- [ ] Story dev server starts; mock API routes work without middleware file
|
|
200
|
+
- [ ] Static build succeeds
|
|
201
|
+
|
|
202
|
+
## Troubleshooting
|
|
203
|
+
|
|
204
|
+
| Symptom | Fix |
|
|
205
|
+
| --------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
206
|
+
| `Cannot find module '…/storybook/cjs/main'` | Migrate to `@elliemae/pui-app-sdk/storybook/main` in `main.mjs` |
|
|
207
|
+
| `Cannot find module '…/dist/esm/utils/storybook/main.js'` | Run `pnpm run build` in app-sdk; or install published app-sdk alpha |
|
|
208
|
+
| `getConfig is not a function` | Use named import **`getStorybookConfig`**, not `getConfig` |
|
|
209
|
+
| `Can't resolve './app'` in lib-only package | Use conditional globs in app-sdk or filter `config.stories` in `main.mjs` |
|
|
210
|
+
| `Class private methods are not enabled` | Upgrade pui-cli 9; remove duplicate Babel plugins from consumer Babel config |
|
|
211
|
+
| Babel cannot load `babel.config.ts` | Confirm Node 24; migrate from `babel.config.cjs` per `migrate-to-pui-cli-9` Phase 2b |
|
|
212
|
+
| `Unable to index …stories.mdx` | Rename docs-only file to `.mdx`; fix `<Meta>` import |
|
|
213
|
+
| `Failed to load native binding` / SWC errors | Reinstall deps; pui-cli uses Babel compiler addon, not SWC |
|
|
214
|
+
| “Using default Webpack5 setup” (no Babel) | Refresh pnpm install after bumping pui-cli / pui-app-sdk |
|
|
215
|
+
| API mocks missing | Delete middleware file; use `pui-cli storybook` (not legacy CLI) |
|
|
216
|
+
| Stale app-sdk in monorepo | Rebuild linked app-sdk; `pnpm install` in consumer |
|
|
217
|
+
|
|
218
|
+
## Reference repos
|
|
219
|
+
|
|
220
|
+
- `pui-react-boilerplate` — app with `app/` stories; `.storybook/*.mjs` + package imports
|
|
221
|
+
- `pui-mono-repo-boilerplate/libs/foo` — lib-only package
|
|
222
|
+
- `pui-app-sdk/.storybook/` — dogfood **`.storybook/*.ts`** with relative `../lib/utils/storybook/*` imports
|
|
223
|
+
|
|
224
|
+
Full guide: [pui-cli 9 migration — Storybook 10](https://docs.pui.mortgagetech.q1.ice.com/cli/pui-cli-9-migration) (`docs/pui-cli-9-migration.md` in pui-cli).
|
|
225
|
+
|
|
226
|
+
## Install this skill
|
|
227
|
+
|
|
228
|
+
From a consumer repo (after `@elliemae/pui-cli` is installed):
|
|
229
|
+
|
|
230
|
+
```bash
|
|
231
|
+
pnpm exec pui-cli skills list
|
|
232
|
+
pnpm exec pui-cli skills install migrate-storybook-out-of-cjs --target all
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
Skills are copied to `.cursor/skills/`, `.claude/skills/`, and `.github/skills/`.
|
|
236
|
+
|
|
237
|
+
## What NOT to change
|
|
238
|
+
|
|
239
|
+
- Production Webpack build config — Storybook migration is dev/docs tooling only
|
|
240
|
+
- Business logic in stories unless types or CSF3 require it
|
|
241
|
+
- Do not re-add `@storybook/*` addon packages to consumer `package.json` unless pui-cli docs explicitly require an exception
|
|
242
|
+
- Do not add private-method Babel plugins to consumer Babel config when using pui-cli 9 shared config
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
name: migrate-to-pui-cli-9
|
|
3
3
|
description: >-
|
|
4
4
|
Migrate a PUI app or library to pui-cli 9 (Node 24, pnpm 11, ESLint 10 flat config, Stylelint 17,
|
|
5
|
-
Husky 9, Vitest 4, semantic-release 25, Lerna 9, Nx 22). Use when upgrading @elliemae/pui-cli,
|
|
6
|
-
migrating from .eslintrc.cjs to eslint.config.mjs, release.config.cjs to release.config.mjs,
|
|
5
|
+
Husky 9, Vitest 4, Jest 30, semantic-release 25, Lerna 9, Nx 22). Use when upgrading @elliemae/pui-cli,
|
|
6
|
+
migrating from .eslintrc.cjs to eslint.config.mjs, jest.config.cjs to jest.config.mjs, release.config.cjs to release.config.mjs,
|
|
7
|
+
babel.config.cjs to babel.config.ts, prettier.config.cjs / commitlint.config.cjs to .mjs subpath imports (pui-cli 9 is ESM-only),
|
|
7
8
|
upgrading Husky 8 hooks, fixing Vitest 4 / coverage-v8 breakages, migrating monorepo nx.json from
|
|
8
|
-
@nrwl/workspace to nx 22,
|
|
9
|
-
stay on Webpack.
|
|
9
|
+
@nrwl/workspace to nx 22, moving shamefully-hoist from .npmrc to pnpm-workspace.yaml for pnpm 11,
|
|
10
|
+
or adopting shared configs from pui-cli. App/library production builds stay on Webpack.
|
|
10
11
|
---
|
|
11
12
|
|
|
12
13
|
# Migrate to pui-cli 9
|
|
@@ -35,9 +36,46 @@ pnpm install
|
|
|
35
36
|
|
|
36
37
|
1. Update `.node-version` to `24` if needed.
|
|
37
38
|
2. Ensure CI Jenkins/docker images use Node 24.
|
|
38
|
-
3. Upgrade pnpm to 11
|
|
39
|
+
3. Upgrade pnpm to 11 — set `engines.pnpm` to `>=11` in root `package.json` (do not pin an exact version in `packageManager`; customers may use any pnpm 11 minor/patch).
|
|
39
40
|
4. Run `pnpm install`, `pnpm test`, `pnpm run build` — fix any Node/pnpm breakages only.
|
|
40
41
|
|
|
42
|
+
### Phase 1b — pnpm 11 hoisting (`pnpm-workspace.yaml`)
|
|
43
|
+
|
|
44
|
+
**Required for every repo** (apps, libs, monorepos). pnpm 11 ignores hoist settings in `.npmrc`.
|
|
45
|
+
|
|
46
|
+
1. **Keep org hoisting policy** — set `shamefullyHoist: true` in `pnpm-workspace.yaml` (same as legacy `shamefully-hoist=true`). Do not switch to isolated/no-hoist; PUI apps use `@elliemae/app-react-dependencies` and pui-cli webpack `getAlias()` expects deps at repo root `node_modules/`.
|
|
47
|
+
|
|
48
|
+
2. **Create or update `pnpm-workspace.yaml`** at the repo root. Move settings out of `.npmrc` using camelCase:
|
|
49
|
+
|
|
50
|
+
| `.npmrc` (ignored by pnpm 11) | `pnpm-workspace.yaml` |
|
|
51
|
+
| --------------------------------- | ----------------------------- |
|
|
52
|
+
| `shamefully-hoist=true` | `shamefullyHoist: true` |
|
|
53
|
+
| `public-hoist-pattern[]=…` | `publicHoistPattern: [ "…" ]` |
|
|
54
|
+
| `strict-peer-dependencies` | `strictPeerDependencies` |
|
|
55
|
+
| `auto-install-peers` | `autoInstallPeers` |
|
|
56
|
+
| `package.json` `"pnpm".overrides` | top-level `overrides:` |
|
|
57
|
+
|
|
58
|
+
3. **Single-package repo** — include `packages: ['.']`. Reference: `pui-react-boilerplate/pnpm-workspace.yaml`.
|
|
59
|
+
|
|
60
|
+
4. **Monorepo** — include `packages: ["libs/*", "apps/*"]`. Optional explicit `publicHoistPattern` for webpack alias targets: `esbuild-loader`, `@elliemae/*`, `styled-components`, `history`, `lodash`. Reference: `pui-microfe/pnpm-workspace.yaml`.
|
|
61
|
+
|
|
62
|
+
5. **Migrate `allowBuilds`** — replace `onlyBuiltDependencies` / placeholder `allowBuilds` entries with `true` for packages that need postinstall scripts (`@swc/core`, `esbuild`, `nx`, etc.). Fix `ERR_PNPM_IGNORED_BUILDS`.
|
|
63
|
+
|
|
64
|
+
6. **Trim `.npmrc`** — keep auth/registry only (for example `legacy-peer-deps=true`).
|
|
65
|
+
|
|
66
|
+
7. **Clean reinstall and verify:**
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
rm -rf node_modules libs/*/node_modules # if monorepo
|
|
70
|
+
SKIP_POST_INSTALL_BUILD=1 pnpm install --no-frozen-lockfile
|
|
71
|
+
grep publicHoistPattern node_modules/.modules.yaml # must NOT be []
|
|
72
|
+
pnpm run build
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**Symptoms if skipped:** `Can't resolve 'esbuild-loader'` / `styled-components` / `@elliemae/pui-theme` during webpack; `publicHoistPattern: []` in `.modules.yaml`.
|
|
76
|
+
|
|
77
|
+
See migration guide section **1b. Migrate pnpm hoisting to `pnpm-workspace.yaml`**.
|
|
78
|
+
|
|
41
79
|
### Phase 2 — Bump pui-cli
|
|
42
80
|
|
|
43
81
|
```bash
|
|
@@ -46,6 +84,52 @@ pnpm add -D @elliemae/pui-cli@9
|
|
|
46
84
|
|
|
47
85
|
Re-run install and smoke-test build/test without ESLint changes yet if the bump is large.
|
|
48
86
|
|
|
87
|
+
### Phase 2b — Babel config (`babel.config.ts`)
|
|
88
|
+
|
|
89
|
+
pui-cli 9 requires Node 24, which natively loads TypeScript config files. Babel 7.28+ (shipped with pui-cli 9) supports **`babel.config.ts`** without extra loaders.
|
|
90
|
+
|
|
91
|
+
1. Replace root `babel.config.cjs` with `babel.config.ts`:
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
import { babelConfig } from '@elliemae/pui-cli';
|
|
95
|
+
|
|
96
|
+
export default babelConfig;
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
2. Delete `babel.config.cjs`. Repeat for monorepo packages that have their own Babel file (for example `libs/foo/babel.config.cjs`).
|
|
100
|
+
|
|
101
|
+
3. **Do not** add `@babel/plugin-transform-private-methods` or `@babel/plugin-transform-private-property-in-object` locally — pui-cli 9 includes them in shared `babelConfig` (Storybook and app-sdk private class syntax).
|
|
102
|
+
|
|
103
|
+
4. Verify: `pnpm run build`; if the repo uses Storybook, `pnpm exec pui-cli storybook -b`.
|
|
104
|
+
|
|
105
|
+
See migration guide section **2b. Migrate Babel config to TypeScript**.
|
|
106
|
+
|
|
107
|
+
### Phase 2c — Prettier and Commitlint (`.mjs`)
|
|
108
|
+
|
|
109
|
+
pui-cli 9 ships shared Prettier and Commitlint configs as ESM. Migrate root configs from `.cjs` to `.mjs` using subpath exports (same pattern as Stylelint and Jest).
|
|
110
|
+
|
|
111
|
+
1. Replace `prettier.config.cjs` with `prettier.config.mjs`:
|
|
112
|
+
|
|
113
|
+
```javascript
|
|
114
|
+
import { prettierConfig } from '@elliemae/pui-cli/prettier';
|
|
115
|
+
|
|
116
|
+
export default prettierConfig;
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
2. Replace `commitlint.config.cjs` with `commitlint.config.mjs`:
|
|
120
|
+
|
|
121
|
+
```javascript
|
|
122
|
+
import { commitlintConfig } from '@elliemae/pui-cli/commitlint';
|
|
123
|
+
|
|
124
|
+
export default commitlintConfig;
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
3. Delete the old `.cjs` files. **`require('@elliemae/pui-cli')` is removed in pui-cli 9** — use ESM subpath imports only.
|
|
128
|
+
|
|
129
|
+
4. Verify: `pnpm exec prettier --check .`; test a commit through Husky if commitlint is enabled.
|
|
130
|
+
|
|
131
|
+
See migration guide section **2c. Migrate Prettier and Commitlint configs to ESM**.
|
|
132
|
+
|
|
49
133
|
### Phase 3 — ESLint 10 flat config
|
|
50
134
|
|
|
51
135
|
**React apps and libraries:**
|
|
@@ -153,12 +237,43 @@ Reference hooks: [pui-cli/.husky](https://git.elliemae.io/platform-ui/pui-cli/tr
|
|
|
153
237
|
|
|
154
238
|
### Phase 6 — Stylelint 17 (if CSS / styled-components)
|
|
155
239
|
|
|
156
|
-
1. Simplify `stylelint.config.
|
|
157
|
-
2.
|
|
158
|
-
3. Run `pnpm exec pui-cli lint` (CSS pass).
|
|
240
|
+
1. Simplify or migrate to `stylelint.config.mjs` importing `@elliemae/pui-cli/stylelint` — remove `stylelint-config-styled-components` workarounds.
|
|
241
|
+
2. Run `pnpm exec pui-cli lint` (CSS pass).
|
|
159
242
|
|
|
160
243
|
See [stylelint-migration.md](https://docs.pui.mortgagetech.q1.ice.com/cli/stylelint-migration) in pui-cli docs.
|
|
161
244
|
|
|
245
|
+
### Phase 6b — Jest 30 (if using `pui-cli test`)
|
|
246
|
+
|
|
247
|
+
Skip if the repo uses Vitest (`pui-cli vitest`) only.
|
|
248
|
+
|
|
249
|
+
1. Replace `jest.config.cjs` with `jest.config.mjs`:
|
|
250
|
+
|
|
251
|
+
```javascript
|
|
252
|
+
import { jestConfig } from '@elliemae/pui-cli';
|
|
253
|
+
|
|
254
|
+
delete jestConfig.moduleNameMapper['@elliemae/pui-diagnostics'];
|
|
255
|
+
|
|
256
|
+
export default jestConfig;
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
Delete `jest.config.cjs` after creating `jest.config.mjs`.
|
|
260
|
+
|
|
261
|
+
2. Align local Jest devDependencies with pui-cli 9:
|
|
262
|
+
|
|
263
|
+
```bash
|
|
264
|
+
pnpm add -D jest-cli@30 jest-environment-jsdom@30 @types/jest@30 jest-watch-typeahead@3
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
3. Search for deprecated matcher aliases (`toBeCalled`, `toReturn`, `toThrowError`, etc.) and update to canonical names (`toHaveBeenCalled`, `toHaveReturned`, `toThrow`). Use `eslint-plugin-jest` `no-alias-methods` autofix when available.
|
|
268
|
+
|
|
269
|
+
4. Regenerate snapshots if needed: `pnpm exec pui-cli test --fix` or `jest -u`.
|
|
270
|
+
|
|
271
|
+
5. Run `pnpm exec pui-cli test`.
|
|
272
|
+
|
|
273
|
+
**Do not** replace `setupFiles` wholesale — spread pui-cli defaults when adding repo-specific setup. Remove any local `jest-textencoder-setup.cjs` (built into shared `jestConfig`).
|
|
274
|
+
|
|
275
|
+
See migration guide section **Jest 30 (`pui-cli test`)**.
|
|
276
|
+
|
|
162
277
|
### Phase 7 — Vitest 4 (if using `pui-cli vitest`)
|
|
163
278
|
|
|
164
279
|
Skip if the repo uses Jest (`pui-cli test`) only.
|
|
@@ -243,11 +358,12 @@ pnpm exec lerna --version # 9.x
|
|
|
243
358
|
- Remove `tasksRunnerOptions`; move cacheable targets to `"cache": true` in `targetDefaults`
|
|
244
359
|
- Optional: `pnpm exec nx migrate latest && pnpm exec nx migrate --run-migrations`
|
|
245
360
|
|
|
246
|
-
4. Lerna 9: stop using `lerna bootstrap` / `lerna add` / `lerna link` — use pnpm workspaces.
|
|
361
|
+
4. Lerna 9: stop using `lerna bootstrap` / `lerna add` / `lerna link` — use pnpm workspaces. Remove `"useWorkspaces": true` from `lerna.json` (Lerna 9 errors with `ECONFIGWORKSPACES` if present). Keep `"npmClient": "pnpm"` so Lerna reads `pnpm-workspace.yaml`. Optional: `pnpm exec lerna repair`. `pui-cli version` unchanged.
|
|
247
362
|
|
|
248
363
|
5. Smoke-test:
|
|
249
364
|
|
|
250
365
|
```bash
|
|
366
|
+
pnpm exec lerna list
|
|
251
367
|
pnpm exec nx run-many --target=build --all --parallel
|
|
252
368
|
pnpm exec nx affected --target=lint --uncommitted
|
|
253
369
|
pnpm exec pui-cli lint
|
|
@@ -255,8 +371,40 @@ pnpm exec pui-cli lint
|
|
|
255
371
|
|
|
256
372
|
See [pui-cli 9 migration guide](https://docs.pui.mortgagetech.q1.ice.com/cli/pui-cli-9-migration) — **Lerna 9 and Nx 22** section for the full `nx.json` template.
|
|
257
373
|
|
|
374
|
+
### Phase 11 — Storybook 10 + latest pui-app-sdk
|
|
375
|
+
|
|
376
|
+
Applies when the repo uses `pui-cli storybook`. Requires pui-cli 9 **and** a matching **pui-app-sdk** release on the same train (`storybook/cjs/*` removed; shared config is TypeScript in app-sdk, consumed from **compiled dist**).
|
|
377
|
+
|
|
378
|
+
Install the dedicated skill for agents:
|
|
379
|
+
|
|
380
|
+
```bash
|
|
381
|
+
pnpm exec pui-cli skills install migrate-storybook-out-of-cjs --target all
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
Follow **`migrate-storybook-out-of-cjs`** for the full CJS → ESM playbook. Summary:
|
|
385
|
+
|
|
386
|
+
1. Bump `@elliemae/pui-cli@9` and `@elliemae/pui-app-sdk@*` together; reinstall (rebuild app-sdk if using a `file:` link).
|
|
387
|
+
2. Replace `.storybook/main.js` with `.storybook/main.mjs` importing **`getStorybookConfig`** from `@elliemae/pui-app-sdk/storybook/main` (not `getConfig` or `storybook/cjs/main`).
|
|
388
|
+
3. Delete `.storybook/middleware.js`; migrate `preview` / `manager` / `theme` to `.mjs` when customized.
|
|
389
|
+
4. Rename docs-only **`*.stories.mdx`** → **`*.mdx`**; use `@storybook/addon-docs/blocks` for `<Meta>` (MDX3).
|
|
390
|
+
5. Update stories to CSF3 where types fail; remove SB6 webpack alias workarounds unless still required.
|
|
391
|
+
6. Migrate consumer **`babel.config.cjs` → `babel.config.ts`** (re-export pui-cli `babelConfig`) — see Phase 2b; **do not** duplicate private-method Babel plugins (pui-cli 9 includes them for Storybook).
|
|
392
|
+
|
|
393
|
+
Verify:
|
|
394
|
+
|
|
395
|
+
```bash
|
|
396
|
+
pnpm exec pui-cli storybook
|
|
397
|
+
pnpm exec pui-cli storybook -b
|
|
398
|
+
pnpm exec pui-cli lint
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
See [pui-cli 9 migration guide — Storybook 10](https://docs.pui.mortgagetech.q1.ice.com/cli/pui-cli-9-migration) for pui-app-sdk export changes, dist build requirement, and troubleshooting.
|
|
402
|
+
|
|
258
403
|
### Phase 10 — Verify
|
|
259
404
|
|
|
405
|
+
- [ ] `babel.config.ts` re-exports pui-cli `babelConfig`; `babel.config.cjs` removed
|
|
406
|
+
- [ ] `prettier.config.mjs` and `commitlint.config.mjs` import subpath exports; legacy `.cjs` removed
|
|
407
|
+
- [ ] `shamefullyHoist` in `pnpm-workspace.yaml` (not `.npmrc`); `publicHoistPattern` not `[]` in `.modules.yaml`
|
|
260
408
|
- [ ] `pnpm exec pui-cli lint` — 0 errors
|
|
261
409
|
- [ ] `pnpm exec pui-cli tscheck --files`
|
|
262
410
|
- [ ] `pnpm test` (or `pui-cli vitest` if applicable)
|
|
@@ -267,21 +415,35 @@ See [pui-cli 9 migration guide](https://docs.pui.mortgagetech.q1.ice.com/cli/pui
|
|
|
267
415
|
|
|
268
416
|
## Common lint fixes after upgrade
|
|
269
417
|
|
|
270
|
-
| Symptom
|
|
271
|
-
|
|
|
272
|
-
| `import-x/no-unresolved`
|
|
273
|
-
| `@typescript-eslint/no-explicit-any`
|
|
274
|
-
| `@typescript-eslint/no-unused-vars`
|
|
275
|
-
| Stale `eslint-disable` comments
|
|
276
|
-
| Test/fixture files flagged
|
|
277
|
-
| `.d.ts` files
|
|
278
|
-
| Cannot find module `vite` in tscheck
|
|
279
|
-
| Vitest `optimizer.web` unknown
|
|
280
|
-
| Coverage fails after upgrade
|
|
281
|
-
| `release.config.cjs` extends fails
|
|
282
|
-
| `nx` fails after pui-cli 9 bump
|
|
283
|
-
| `lerna bootstrap` / `add` / `link`
|
|
284
|
-
|
|
|
418
|
+
| Symptom | Fix |
|
|
419
|
+
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
420
|
+
| `import-x/no-unresolved` | Use `import type` for type-only imports |
|
|
421
|
+
| `@typescript-eslint/no-explicit-any` | Type the value or add targeted override (warn) during transition |
|
|
422
|
+
| `@typescript-eslint/no-unused-vars` | Remove or prefix with `_` |
|
|
423
|
+
| Stale `eslint-disable` comments | Remove disables for rules no longer in config |
|
|
424
|
+
| Test/fixture files flagged | Shared config includes `lib/**/tests/**` globs — ensure pui-cli 9.0.0+ |
|
|
425
|
+
| `.d.ts` files | pui-cli turns off `no-explicit-any` for `**/*.d.ts` |
|
|
426
|
+
| Cannot find module `vite` in tscheck | Set `moduleResolution: "bundler"` or extend pui-cli 9 tsconfig |
|
|
427
|
+
| Vitest `optimizer.web` unknown | Rename to `test.deps.optimizer.client` (Vitest 4) |
|
|
428
|
+
| Coverage fails after upgrade | Remove `@vitest/coverage-c8`; use `@vitest/coverage-v8@4` |
|
|
429
|
+
| `release.config.cjs` extends fails | Migrate to `release.config.mjs`; requires semantic-release 22+ (pui-cli 9 ships 25) |
|
|
430
|
+
| `nx` fails after pui-cli 9 bump | Migrate `nx.json` off `@nrwl/*`; use `targetDefaults` not `targetDependencies` |
|
|
431
|
+
| `lerna bootstrap` / `add` / `link` | Removed in lerna 9 — use `pnpm` workspaces and `pnpm add --filter` |
|
|
432
|
+
| `ECONFIGWORKSPACES` / `useWorkspaces` has been removed | Delete `"useWorkspaces": true` from `lerna.json`; keep `"npmClient": "pnpm"`; run `pnpm exec lerna list` to verify |
|
|
433
|
+
| Stale `@nrwl/workspace` in lockfile | Remove direct `@nrwl/*` pins; rely on pui-cli's `nx` + `@nx/workspace` |
|
|
434
|
+
| `Can't resolve 'esbuild-loader'` | Move `shamefullyHoist: true` to `pnpm-workspace.yaml`; clean reinstall |
|
|
435
|
+
| `Can't resolve 'styled-components'` / `@elliemae/pui-theme` | Same — hoisting ignored if still only in `.npmrc` |
|
|
436
|
+
| `publicHoistPattern: []` in `.modules.yaml` | Migrate hoist settings from `.npmrc` to `pnpm-workspace.yaml` |
|
|
437
|
+
| `ERR_PNPM_IGNORED_BUILDS` | Set real `allowBuilds` in `pnpm-workspace.yaml` or run `pnpm approve-builds` |
|
|
438
|
+
| `husky: command not found` on prepare | `shamefullyHoist` + `publicHoistPattern: [husky]` or direct root `devDependency` |
|
|
439
|
+
| Storybook fails after pui-cli 9 bump | Migrate `.storybook/main.js` → `main.mjs`; import `getStorybookConfig` from `@elliemae/pui-app-sdk/storybook/main`; build app-sdk if using `file:` link |
|
|
440
|
+
| `Class private methods are not enabled` (Storybook build) | Upgrade pui-cli 9 (private-method Babel plugins in shared `babelConfig`); remove duplicate plugins from consumer Babel config |
|
|
441
|
+
| Babel cannot load `babel.config.ts` | Confirm Node 24 (`.node-version`, CI); pui-cli 9 requires Node 24 for native TS config loading |
|
|
442
|
+
| `Failed to load native binding` / SWC errors | pui-cli removes SWC from Storybook webpack; reinstall deps; Babel compiler addon uses pui-cli `babelConfig` |
|
|
443
|
+
| `middleware.js` ignored / API mocks missing | Delete middleware file; pui-cli Storybook dev server loads routes automatically |
|
|
444
|
+
| Jest `TextEncoder is not defined` | Built into pui-cli `jestConfig` — remove repo `jest-textencoder-setup.cjs`; keep `delete moduleNameMapper['@elliemae/pui-diagnostics']` only if using real package |
|
|
445
|
+
| `require('@elliemae/pui-cli')` fails / `ERR_REQUIRE_ESM` | pui-cli 9 is ESM-only — migrate configs to `.mjs`/`.ts` and use subpath imports (`@elliemae/pui-cli/eslint`, `/prettier`, `/jest`, etc.) |
|
|
446
|
+
| Jest fails after pui-cli 9 bump | Migrate `jest.config.cjs` → `jest.config.mjs`; align `jest-cli@30`, `jest-environment-jsdom@30`, `@types/jest@30`, `jest-watch-typeahead@3`; fix deprecated matcher aliases; regenerate snapshots |
|
|
285
447
|
|
|
286
448
|
Full rule comparison: [eslint-rules-migration.md](https://docs.pui.mortgagetech.q1.ice.com/cli/eslint-rules-migration) (also at `docs/eslint-rules-migration.md` in pui-cli).
|
|
287
449
|
|
|
@@ -299,7 +461,8 @@ Skills are copied to `.cursor/skills/`, `.claude/skills/`, and `.github/skills/`
|
|
|
299
461
|
|
|
300
462
|
- Application business logic — migration is tooling/config only
|
|
301
463
|
- Webpack/babel production build config — pui-cli 9 does not migrate apps to Vite for bundling
|
|
302
|
-
- Prettier / commitlint
|
|
464
|
+
- Prettier / commitlint preset values — migrate config **format** to `.mjs` when touching those files; do not change shared rule/preset content unless pui-cli 9 bumps them
|
|
465
|
+
- **Org hoisting policy** — keep `shamefullyHoist: true`; do not remove hoisting or duplicate webpack deps in root `package.json` as a workaround
|
|
303
466
|
|
|
304
467
|
## Additional resources
|
|
305
468
|
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { createRequire } from 'node:module';
|
|
2
|
+
import path from 'node:path';
|
|
3
|
+
import { fileURLToPath } from 'node:url';
|
|
4
|
+
import normalizePath from 'normalize-path';
|
|
5
|
+
|
|
6
|
+
const require = createRequire(import.meta.url);
|
|
7
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
8
|
+
|
|
3
9
|
const { getAppConfig, basePath } = require('../utils.cjs');
|
|
4
10
|
const { swcrcConfig } = require('../transpile/swcrc.config.cjs');
|
|
5
11
|
const { findMonoRepoRoot } = require('../monorepo/utils.cjs');
|
|
6
12
|
|
|
7
13
|
let isReactModule = true;
|
|
8
14
|
try {
|
|
9
|
-
|
|
10
15
|
require('react');
|
|
11
16
|
require('styled-components');
|
|
12
|
-
|
|
13
17
|
} catch {
|
|
14
18
|
isReactModule = false;
|
|
15
19
|
}
|
|
@@ -80,7 +84,11 @@ const jestConfig = {
|
|
|
80
84
|
},
|
|
81
85
|
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
|
|
82
86
|
setupFilesAfterEnv: [path.resolve(__dirname, './setup-tests.js')],
|
|
83
|
-
setupFiles: [
|
|
87
|
+
setupFiles: [
|
|
88
|
+
path.resolve(__dirname, './setup-textencoder.cjs'),
|
|
89
|
+
'raf/polyfill',
|
|
90
|
+
'whatwg-fetch',
|
|
91
|
+
],
|
|
84
92
|
testRegex: '(app|lib).*/tests/.*\\.test\\.[jt]sx?$',
|
|
85
93
|
snapshotSerializers: [],
|
|
86
94
|
testResultsProcessor: 'jest-sonar-reporter',
|
|
@@ -113,4 +121,4 @@ if (isReactModule && jestConfig.setupFilesAfterEnv)
|
|
|
113
121
|
path.resolve(__dirname, './setup-react-env.js'),
|
|
114
122
|
);
|
|
115
123
|
|
|
116
|
-
|
|
124
|
+
export { jestConfig };
|