@wise/wds-codemods 1.0.0-experimental-5d002fd → 1.0.0-experimental-a536a63
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/dist/{helpers-CghwwYSg.js → helpers-RWhTD5Is.js} +6 -3
- package/dist/{helpers-CghwwYSg.js.map → helpers-RWhTD5Is.js.map} +1 -1
- package/dist/index.js +24 -29
- package/dist/index.js.map +1 -1
- package/dist/transformer-wd_8jk1P.js +338 -0
- package/dist/transformer-wd_8jk1P.js.map +1 -0
- package/dist/transforms/button/transformer.js +1 -1
- package/dist/transforms/list-item/config.json +6 -0
- package/dist/transforms/list-item/transformer.js +4 -0
- package/package.json +5 -3
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
const require_helpers = require('./helpers-
|
|
2
|
+
const require_helpers = require('./helpers-RWhTD5Is.js');
|
|
3
|
+
const require_transformer = require('./transformer-wd_8jk1P.js');
|
|
3
4
|
let node_child_process = require("node:child_process");
|
|
4
5
|
let node_fs_promises = require("node:fs/promises");
|
|
5
6
|
node_fs_promises = require_helpers.__toESM(node_fs_promises);
|
|
@@ -12,48 +13,41 @@ let __inquirer_prompts = require("@inquirer/prompts");
|
|
|
12
13
|
let isDebug = false;
|
|
13
14
|
const currentFilePath = (0, node_url.fileURLToPath)(require("url").pathToFileURL(__filename).href);
|
|
14
15
|
const currentDirPath = node_path.default.dirname(currentFilePath);
|
|
15
|
-
const ICONS = {
|
|
16
|
-
info: "\x1B[34mℹ\x1B[0m",
|
|
17
|
-
focus: "\x1B[34m➙\x1B[0m",
|
|
18
|
-
success: "\x1B[32m✔\x1B[0m",
|
|
19
|
-
warning: "\x1B[33m⚠\x1B[0m",
|
|
20
|
-
error: "\x1B[31m✖\x1B[0m"
|
|
21
|
-
};
|
|
22
16
|
const resetReportFile = async (reportPath) => {
|
|
23
17
|
try {
|
|
24
18
|
await node_fs_promises.default.access(reportPath);
|
|
25
19
|
await node_fs_promises.default.rm(reportPath);
|
|
26
|
-
console.debug(`${
|
|
20
|
+
console.debug(`${require_transformer.CONSOLE_ICONS.info} Removed existing report file${isDebug ? `: ${reportPath}` : "."}`);
|
|
27
21
|
} catch {
|
|
28
|
-
console.debug(`${
|
|
22
|
+
console.debug(`${require_transformer.CONSOLE_ICONS.info} No existing report file to remove${isDebug ? `: ${reportPath}` : "."}`);
|
|
29
23
|
}
|
|
30
24
|
};
|
|
31
25
|
const summariseReportFile = async (reportPath) => {
|
|
32
26
|
try {
|
|
33
27
|
const lines = (await node_fs_promises.default.readFile(reportPath, "utf8")).split("\n").filter(Boolean);
|
|
34
|
-
if (lines.length) console.debug(`\n
|
|
35
|
-
else console.debug(`${
|
|
28
|
+
if (lines.length) console.debug(`\n${require_transformer.CONSOLE_ICONS.warning} ${lines.length} manual review${lines.length > 1 ? "s are" : " is"} required. See ${reportPath} for details.`);
|
|
29
|
+
else console.debug(`${require_transformer.CONSOLE_ICONS.info} Report file exists but is empty${isDebug ? `: ${reportPath}` : "."}`);
|
|
36
30
|
} catch {
|
|
37
|
-
console.debug(`${
|
|
31
|
+
console.debug(`${require_transformer.CONSOLE_ICONS.info} No report file generated - no manual reviews needed`);
|
|
38
32
|
}
|
|
39
33
|
};
|
|
34
|
+
const log = (label, value) => {
|
|
35
|
+
if (typeof require_helpers.logToInquirer === "function") require_helpers.logToInquirer(label, value || "");
|
|
36
|
+
else console.info(label, value || "");
|
|
37
|
+
};
|
|
40
38
|
async function runCodemod(transformsDir) {
|
|
39
|
+
const args = process.argv.slice(2);
|
|
40
|
+
const candidate = args[0];
|
|
41
|
+
isDebug = args.includes("--debug");
|
|
41
42
|
try {
|
|
42
|
-
const args = process.argv.slice(2);
|
|
43
|
-
const candidate = args[0];
|
|
44
|
-
isDebug = args.includes("--debug");
|
|
45
43
|
const packages = require_helpers.findPackages();
|
|
46
44
|
const reportPath = node_path.default.resolve(require_helpers.findProjectRoot(), "codemod-report.txt");
|
|
47
45
|
const resolvedTransformsDir = transformsDir ?? node_path.default.resolve(currentDirPath, "../dist/transforms");
|
|
48
|
-
if (isDebug) console.debug(`${
|
|
46
|
+
if (isDebug) console.debug(`${require_transformer.CONSOLE_ICONS.info} Resolved transforms directory: ${resolvedTransformsDir}`);
|
|
49
47
|
await resetReportFile(reportPath);
|
|
50
48
|
const { transformFiles } = await require_helpers.loadTransformModules_default(resolvedTransformsDir);
|
|
51
49
|
const resolvedTransformNames = await Promise.all(transformFiles);
|
|
52
|
-
if (resolvedTransformNames.length === 0) throw new Error(`${
|
|
53
|
-
const log = (label, value) => {
|
|
54
|
-
if (typeof require_helpers.logToInquirer === "function") require_helpers.logToInquirer(label, value);
|
|
55
|
-
else console.info(label, value);
|
|
56
|
-
};
|
|
50
|
+
if (resolvedTransformNames.length === 0) throw new Error(`${require_transformer.CONSOLE_ICONS.error} No transform scripts found${isDebug ? ` in: ${resolvedTransformsDir}` : "."}`);
|
|
57
51
|
let transformFile;
|
|
58
52
|
if (candidate && resolvedTransformNames.includes(candidate)) {
|
|
59
53
|
log("Select codemod to run:", candidate);
|
|
@@ -69,7 +63,7 @@ async function runCodemod(transformsDir) {
|
|
|
69
63
|
log("Selected codemod:", transformFile);
|
|
70
64
|
}
|
|
71
65
|
const codemodPath = node_path.default.resolve(resolvedTransformsDir, transformFile, "transformer.js");
|
|
72
|
-
if (isDebug) console.debug(`${
|
|
66
|
+
if (isDebug) console.debug(`${require_transformer.CONSOLE_ICONS.info} Resolved codemod path: ${codemodPath}`);
|
|
73
67
|
const promptAnswers = await require_helpers.runTransformPrompts(codemodPath);
|
|
74
68
|
const options = await require_helpers.getOptions_default({
|
|
75
69
|
packages,
|
|
@@ -77,8 +71,9 @@ async function runCodemod(transformsDir) {
|
|
|
77
71
|
transformFiles: resolvedTransformNames,
|
|
78
72
|
preselectedTransformFile: transformFile
|
|
79
73
|
});
|
|
80
|
-
options.targetPaths
|
|
81
|
-
|
|
74
|
+
if (transformFile === "list-item") await require_transformer.transformer_default(options.targetPaths, codemodPath, isDebug);
|
|
75
|
+
else await Promise.all(options.targetPaths.map(async (targetPath) => {
|
|
76
|
+
console.info(`${require_transformer.CONSOLE_ICONS.focus} \x1b[1mProcessing:\x1b[0m \x1b[32m${targetPath}\x1b[0m`);
|
|
82
77
|
if (require_helpers.assessPrerequisites(targetPath, codemodPath)) {
|
|
83
78
|
const answerArgs = Object.entries(promptAnswers).map(([promptName, answerValue]) => `--${promptName}=${String(answerValue)}`);
|
|
84
79
|
const command = `npx jscodeshift ${[
|
|
@@ -91,14 +86,14 @@ async function runCodemod(transformsDir) {
|
|
|
91
86
|
options.useGitIgnore ? "--gitignore" : "",
|
|
92
87
|
...answerArgs
|
|
93
88
|
].filter(Boolean).join(" ")}`;
|
|
94
|
-
if (isDebug) console.debug(`${
|
|
89
|
+
if (isDebug) console.debug(`${require_transformer.CONSOLE_ICONS.info} Running: ${command}`);
|
|
95
90
|
return (0, node_child_process.execSync)(command, { stdio: "inherit" });
|
|
96
91
|
}
|
|
97
|
-
});
|
|
92
|
+
}));
|
|
98
93
|
await summariseReportFile(reportPath);
|
|
99
94
|
} catch (error) {
|
|
100
|
-
if (error instanceof Error) console.error(`${
|
|
101
|
-
else console.error(`${
|
|
95
|
+
if (error instanceof Error) console.error(`${require_transformer.CONSOLE_ICONS.error} Error running ${candidate} codemod:`, error.message);
|
|
96
|
+
else console.error(`${require_transformer.CONSOLE_ICONS.error} Error running ${candidate} codemod:`, error);
|
|
102
97
|
if (process.env.NODE_ENV !== "test") process.exit(1);
|
|
103
98
|
}
|
|
104
99
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["path","fs","findPackages","findProjectRoot","loadTransformModules","
|
|
1
|
+
{"version":3,"file":"index.js","names":["path","fs","CONSOLE_ICONS","logToInquirer","findPackages","findProjectRoot","loadTransformModules","transformFile: string","runTransformPrompts","getOptions","transformer","assessPrerequisites","error: unknown"],"sources":["../src/controller/index.ts","../src/index.ts"],"sourcesContent":["#!/usr/bin/env node\n\nimport { execSync } from 'node:child_process';\nimport fs from 'node:fs/promises';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\n\nimport { select as list } from '@inquirer/prompts';\n\nimport { CONSOLE_ICONS } from '../constants';\nimport transformer from '../transforms/list-item/transformer';\nimport {\n assessPrerequisites,\n findPackages,\n findProjectRoot,\n getOptions,\n loadTransformModules,\n logToInquirer,\n runTransformPrompts,\n} from './helpers';\n\nlet isDebug = false;\nconst currentFilePath = fileURLToPath(import.meta.url);\nconst currentDirPath = path.dirname(currentFilePath);\n\nconst resetReportFile = async (reportPath: string) => {\n try {\n await fs.access(reportPath);\n await fs.rm(reportPath);\n console.debug(\n `${CONSOLE_ICONS.info} Removed existing report file${isDebug ? `: ${reportPath}` : '.'}`,\n );\n } catch {\n console.debug(\n `${CONSOLE_ICONS.info} No existing report file to remove${isDebug ? `: ${reportPath}` : '.'}`,\n );\n }\n};\n\nconst summariseReportFile = async (reportPath: string) => {\n try {\n const reportContent = await fs.readFile(reportPath, 'utf8');\n const lines = reportContent.split('\\n').filter(Boolean);\n if (lines.length) {\n console.debug(\n `\\n${CONSOLE_ICONS.warning} ${lines.length} manual review${lines.length > 1 ? 's are' : ' is'} required. See ${reportPath} for details.`,\n );\n } else {\n console.debug(\n `${CONSOLE_ICONS.info} Report file exists but is empty${isDebug ? `: ${reportPath}` : '.'}`,\n );\n }\n } catch {\n console.debug(`${CONSOLE_ICONS.info} No report file generated - no manual reviews needed`);\n }\n};\n\nconst log = (label: string, value?: string): void => {\n if (typeof logToInquirer === 'function') {\n logToInquirer(label, value || '');\n } else {\n console.info(label, value || '');\n }\n};\n\nasync function runCodemod(transformsDir?: string) {\n const args = process.argv.slice(2);\n const candidate = args[0];\n isDebug = args.includes('--debug');\n\n try {\n const packages = findPackages();\n const reportPath = path.resolve(findProjectRoot(), 'codemod-report.txt');\n const resolvedTransformsDir =\n transformsDir ?? path.resolve(currentDirPath, '../dist/transforms');\n\n if (isDebug) {\n console.debug(\n `${CONSOLE_ICONS.info} Resolved transforms directory: ${resolvedTransformsDir}`,\n );\n }\n\n await resetReportFile(reportPath);\n\n const { transformFiles } = await loadTransformModules(resolvedTransformsDir);\n\n const resolvedTransformNames = await Promise.all(transformFiles);\n if (resolvedTransformNames.length === 0) {\n throw new Error(\n `${CONSOLE_ICONS.error} No transform scripts found${isDebug ? ` in: ${resolvedTransformsDir}` : '.'}`,\n );\n }\n\n let transformFile: string;\n\n if (candidate && resolvedTransformNames.includes(candidate)) {\n log('Select codemod to run:', candidate);\n transformFile = candidate;\n } else {\n transformFile = await list({\n message: 'Select codemod to run:',\n choices: resolvedTransformNames.map((name) => ({ name, value: name })),\n });\n log('Selected codemod:', transformFile);\n }\n\n const codemodPath = path.resolve(resolvedTransformsDir, transformFile, 'transformer.js');\n if (isDebug) {\n console.debug(`${CONSOLE_ICONS.info} Resolved codemod path: ${codemodPath}`);\n }\n\n const promptAnswers = await runTransformPrompts(codemodPath);\n\n const options = await getOptions({\n packages,\n root: findProjectRoot(),\n transformFiles: resolvedTransformNames,\n preselectedTransformFile: transformFile,\n });\n\n // Handle ListItem transform differently as it uses Claude, not jscodeshift\n if (transformFile === 'list-item') {\n // TODO: Handle ALL args and options properly - isDry, isPrint, ignorePatterns, useGitIgnore, etc\n await transformer(options.targetPaths, codemodPath, isDebug);\n } else {\n await Promise.all(\n options.targetPaths.map(async (targetPath) => {\n console.info(\n `${CONSOLE_ICONS.focus} \\x1b[1mProcessing:\\x1b[0m \\x1b[32m${targetPath}\\x1b[0m`,\n );\n\n const isCompliant = assessPrerequisites(targetPath, codemodPath);\n if (isCompliant) {\n const answerArgs = Object.entries(promptAnswers).map(\n ([promptName, answerValue]) => `--${promptName}=${String(answerValue)}`,\n );\n\n const argsList = [\n '-t',\n codemodPath,\n targetPath,\n options.isDry ? '--dry' : '',\n options.isPrint ? '--print' : '',\n options.ignorePatterns\n ? options.ignorePatterns\n .split(',')\n .map((pattern) => `--ignore-pattern=${pattern.trim()}`)\n .join(' ')\n : '',\n options.useGitIgnore ? '--gitignore' : '',\n ...answerArgs,\n ].filter(Boolean);\n const command = `npx jscodeshift ${argsList.join(' ')}`;\n\n if (isDebug) {\n console.debug(`${CONSOLE_ICONS.info} Running: ${command}`);\n }\n\n return execSync(command, { stdio: 'inherit' });\n }\n return undefined;\n }),\n );\n }\n\n await summariseReportFile(reportPath);\n } catch (error: unknown) {\n if (error instanceof Error) {\n console.error(`${CONSOLE_ICONS.error} Error running ${candidate} codemod:`, error.message);\n } else {\n console.error(`${CONSOLE_ICONS.error} Error running ${candidate} codemod:`, error);\n }\n if (process.env.NODE_ENV !== 'test') {\n process.exit(1);\n }\n }\n}\n\nexport { runCodemod };\n","#!/usr/bin/env node\nimport { runCodemod } from './controller';\n\nvoid runCodemod();\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAI,UAAU;AACd,MAAM,4FAAgD;AACtD,MAAM,iBAAiBA,kBAAK,QAAQ,gBAAgB;AAEpD,MAAM,kBAAkB,OAAO,eAAuB;AACpD,KAAI;AACF,QAAMC,yBAAG,OAAO,WAAW;AAC3B,QAAMA,yBAAG,GAAG,WAAW;AACvB,UAAQ,MACN,GAAGC,kCAAc,KAAK,+BAA+B,UAAU,KAAK,eAAe,MACpF;SACK;AACN,UAAQ,MACN,GAAGA,kCAAc,KAAK,oCAAoC,UAAU,KAAK,eAAe,MACzF;;;AAIL,MAAM,sBAAsB,OAAO,eAAuB;AACxD,KAAI;EAEF,MAAM,SADgB,MAAMD,yBAAG,SAAS,YAAY,OAAO,EAC/B,MAAM,KAAK,CAAC,OAAO,QAAQ;AACvD,MAAI,MAAM,OACR,SAAQ,MACN,KAAKC,kCAAc,QAAQ,IAAI,MAAM,OAAO,gBAAgB,MAAM,SAAS,IAAI,UAAU,MAAM,iBAAiB,WAAW,eAC5H;MAED,SAAQ,MACN,GAAGA,kCAAc,KAAK,kCAAkC,UAAU,KAAK,eAAe,MACvF;SAEG;AACN,UAAQ,MAAM,GAAGA,kCAAc,KAAK,sDAAsD;;;AAI9F,MAAM,OAAO,OAAe,UAAyB;AACnD,KAAI,OAAOC,kCAAkB,WAC3B,+BAAc,OAAO,SAAS,GAAG;KAEjC,SAAQ,KAAK,OAAO,SAAS,GAAG;;AAIpC,eAAe,WAAW,eAAwB;CAChD,MAAM,OAAO,QAAQ,KAAK,MAAM,EAAE;CAClC,MAAM,YAAY,KAAK;AACvB,WAAU,KAAK,SAAS,UAAU;AAElC,KAAI;EACF,MAAM,WAAWC,8BAAc;EAC/B,MAAM,aAAaJ,kBAAK,QAAQK,iCAAiB,EAAE,qBAAqB;EACxE,MAAM,wBACJ,iBAAiBL,kBAAK,QAAQ,gBAAgB,qBAAqB;AAErE,MAAI,QACF,SAAQ,MACN,GAAGE,kCAAc,KAAK,kCAAkC,wBACzD;AAGH,QAAM,gBAAgB,WAAW;EAEjC,MAAM,EAAE,mBAAmB,MAAMI,6CAAqB,sBAAsB;EAE5E,MAAM,yBAAyB,MAAM,QAAQ,IAAI,eAAe;AAChE,MAAI,uBAAuB,WAAW,EACpC,OAAM,IAAI,MACR,GAAGJ,kCAAc,MAAM,6BAA6B,UAAU,QAAQ,0BAA0B,MACjG;EAGH,IAAIK;AAEJ,MAAI,aAAa,uBAAuB,SAAS,UAAU,EAAE;AAC3D,OAAI,0BAA0B,UAAU;AACxC,mBAAgB;SACX;AACL,mBAAgB,qCAAW;IACzB,SAAS;IACT,SAAS,uBAAuB,KAAK,UAAU;KAAE;KAAM,OAAO;KAAM,EAAE;IACvE,CAAC;AACF,OAAI,qBAAqB,cAAc;;EAGzC,MAAM,cAAcP,kBAAK,QAAQ,uBAAuB,eAAe,iBAAiB;AACxF,MAAI,QACF,SAAQ,MAAM,GAAGE,kCAAc,KAAK,0BAA0B,cAAc;EAG9E,MAAM,gBAAgB,MAAMM,oCAAoB,YAAY;EAE5D,MAAM,UAAU,MAAMC,mCAAW;GAC/B;GACA,MAAMJ,iCAAiB;GACvB,gBAAgB;GAChB,0BAA0B;GAC3B,CAAC;AAGF,MAAI,kBAAkB,YAEpB,OAAMK,wCAAY,QAAQ,aAAa,aAAa,QAAQ;MAE5D,OAAM,QAAQ,IACZ,QAAQ,YAAY,IAAI,OAAO,eAAe;AAC5C,WAAQ,KACN,GAAGR,kCAAc,MAAM,sCAAsC,WAAW,SACzE;AAGD,OADoBS,oCAAoB,YAAY,YAAY,EAC/C;IACf,MAAM,aAAa,OAAO,QAAQ,cAAc,CAAC,KAC9C,CAAC,YAAY,iBAAiB,KAAK,WAAW,GAAG,OAAO,YAAY,GACtE;IAiBD,MAAM,UAAU,mBAfC;KACf;KACA;KACA;KACA,QAAQ,QAAQ,UAAU;KAC1B,QAAQ,UAAU,YAAY;KAC9B,QAAQ,iBACJ,QAAQ,eACL,MAAM,IAAI,CACV,KAAK,YAAY,oBAAoB,QAAQ,MAAM,GAAG,CACtD,KAAK,IAAI,GACZ;KACJ,QAAQ,eAAe,gBAAgB;KACvC,GAAG;KACJ,CAAC,OAAO,QAAQ,CAC2B,KAAK,IAAI;AAErD,QAAI,QACF,SAAQ,MAAM,GAAGT,kCAAc,KAAK,YAAY,UAAU;AAG5D,4CAAgB,SAAS,EAAE,OAAO,WAAW,CAAC;;IAGhD,CACH;AAGH,QAAM,oBAAoB,WAAW;UAC9BU,OAAgB;AACvB,MAAI,iBAAiB,MACnB,SAAQ,MAAM,GAAGV,kCAAc,MAAM,iBAAiB,UAAU,YAAY,MAAM,QAAQ;MAE1F,SAAQ,MAAM,GAAGA,kCAAc,MAAM,iBAAiB,UAAU,YAAY,MAAM;AAEpF,MAAI,QAAQ,IAAI,aAAa,OAC3B,SAAQ,KAAK,EAAE;;;;;;AC1KhB,YAAY"}
|
|
@@ -0,0 +1,338 @@
|
|
|
1
|
+
const require_helpers = require('./helpers-RWhTD5Is.js');
|
|
2
|
+
let node_child_process = require("node:child_process");
|
|
3
|
+
let node_path = require("node:path");
|
|
4
|
+
let node_fs = require("node:fs");
|
|
5
|
+
let __anthropic_ai_claude_agent_sdk = require("@anthropic-ai/claude-agent-sdk");
|
|
6
|
+
|
|
7
|
+
//#region src/constants.ts
|
|
8
|
+
const CONSOLE_ICONS = {
|
|
9
|
+
info: "\x1B[34mℹ\x1B[0m",
|
|
10
|
+
focus: "\x1B[34m➙\x1B[0m",
|
|
11
|
+
success: "\x1B[32m✔\x1B[0m",
|
|
12
|
+
warning: "\x1B[33m⚠\x1B[0m",
|
|
13
|
+
error: "\x1B[31m✖\x1B[0m"
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
//#endregion
|
|
17
|
+
//#region src/transforms/list-item/constants.ts
|
|
18
|
+
const DEPRECATED_COMPONENT_NAMES = [
|
|
19
|
+
"ActionOption",
|
|
20
|
+
"NavigationOption",
|
|
21
|
+
"NavigationOptionsList",
|
|
22
|
+
"Summary",
|
|
23
|
+
"SwitchOption",
|
|
24
|
+
"CheckboxOption",
|
|
25
|
+
"RadioOption"
|
|
26
|
+
];
|
|
27
|
+
const MIGRATION_RULES = `Migration rules:
|
|
28
|
+
# Legacy Component → ListItem Migration Guide
|
|
29
|
+
|
|
30
|
+
## Universal Rules
|
|
31
|
+
|
|
32
|
+
1. Wrap all \`ListItem\` in \`<List>\`
|
|
33
|
+
2. \`title\` → \`title\` (direct)
|
|
34
|
+
3. \`content\` or \`description\` → \`subtitle\`
|
|
35
|
+
4. \`disabled\` stays on \`ListItem\` (not controls)
|
|
36
|
+
5. Keep HTML attributes (\`id\`, \`name\`, \`aria-label\`), remove: \`as\`, \`complex\`, \`showMediaAtAllSizes\`, \`showMediaCircle\`, \`isContainerAligned\`
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## ActionOption → ListItem.Button
|
|
41
|
+
|
|
42
|
+
- \`action\` → Button children
|
|
43
|
+
- \`onClick\` → Button \`onClick\`
|
|
44
|
+
- Priority: default/\`"primary"\` → \`"primary"\`, \`"secondary"\` → \`"secondary-neutral"\`, \`"secondary-send"\` → \`"secondary"\`, \`"tertiary"\` → \`"tertiary"\`
|
|
45
|
+
|
|
46
|
+
\`\`\`tsx
|
|
47
|
+
<ActionOption title="Title" content="Text" action="Click" priority="secondary" onClick={fn} />
|
|
48
|
+
→
|
|
49
|
+
<List><ListItem title="Title" subtitle="Text" control={<ListItem.Button priority="secondary-neutral" onClick={fn}>Click</ListItem.Button>} /></List>
|
|
50
|
+
\`\`\`
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## CheckboxOption → ListItem.Checkbox
|
|
55
|
+
|
|
56
|
+
- \`onChange\`: \`(checked: boolean)\` → \`(event: ChangeEvent)\` use \`event.target.checked\`
|
|
57
|
+
- \`id\`, \`name\` move to Checkbox
|
|
58
|
+
|
|
59
|
+
\`\`\`tsx
|
|
60
|
+
<CheckboxOption id="x" name="y" title="Title" content="Text" checked={v} onChange={(c) => set(c)} />
|
|
61
|
+
→
|
|
62
|
+
<List><ListItem title="Title" subtitle="Text" control={<ListItem.Checkbox id="x" name="y" checked={v} onChange={(e) => set(e.target.checked)} />} /></List>
|
|
63
|
+
\`\`\`
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## RadioOption → ListItem.Radio
|
|
68
|
+
|
|
69
|
+
- \`id\`, \`name\`, \`value\`, \`checked\`, \`onChange\` move to Radio
|
|
70
|
+
|
|
71
|
+
\`\`\`tsx
|
|
72
|
+
<RadioOption id="x" name="y" value="v" title="Title" content="Text" checked={v==='v'} onChange={set} />
|
|
73
|
+
→
|
|
74
|
+
<List><ListItem title="Title" subtitle="Text" control={<ListItem.Radio id="x" name="y" value="v" checked={v==='v'} onChange={set} />} /></List>
|
|
75
|
+
\`\`\`
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## SwitchOption → ListItem.Switch
|
|
80
|
+
|
|
81
|
+
- \`onChange\` → \`onClick\`, toggle manually
|
|
82
|
+
- \`aria-label\` moves to Switch
|
|
83
|
+
|
|
84
|
+
\`\`\`tsx
|
|
85
|
+
<SwitchOption title="Title" content="Text" checked={v} aria-label="Toggle" onChange={set} />
|
|
86
|
+
→
|
|
87
|
+
<List><ListItem title="Title" subtitle="Text" control={<ListItem.Switch checked={v} aria-label="Toggle" onClick={() => set(!v)} />} /></List>
|
|
88
|
+
\`\`\`
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## NavigationOption → ListItem.Navigation
|
|
93
|
+
|
|
94
|
+
- \`onClick\` or \`href\` move to Navigation
|
|
95
|
+
|
|
96
|
+
\`\`\`tsx
|
|
97
|
+
<NavigationOption title="Title" content="Text" onClick={fn} />
|
|
98
|
+
→
|
|
99
|
+
<List><ListItem title="Title" subtitle="Text" control={<ListItem.Navigation onClick={fn} />} /></List>
|
|
100
|
+
\`\`\`
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Option → ListItem
|
|
105
|
+
|
|
106
|
+
- Wrap \`media\` in \`ListItem.AvatarView\`
|
|
107
|
+
|
|
108
|
+
\`\`\`tsx
|
|
109
|
+
<Option media={<Icon />} title="Title" />
|
|
110
|
+
→
|
|
111
|
+
<List><ListItem title="Title" media={<ListItem.AvatarView><Icon /></ListItem.AvatarView>} /></List>
|
|
112
|
+
\`\`\`
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Summary → ListItem
|
|
117
|
+
|
|
118
|
+
**Basic:**
|
|
119
|
+
|
|
120
|
+
- \`icon\` → wrap in \`ListItem.AvatarView\` with \`size={32}\` as \`media\`
|
|
121
|
+
|
|
122
|
+
**Status:**
|
|
123
|
+
|
|
124
|
+
- \`Status.DONE\` → \`badge={{ status: 'positive' }}\`
|
|
125
|
+
- \`Status.PENDING\` → \`badge={{ status: 'pending' }}\`
|
|
126
|
+
- \`Status.NOT_DONE\` → no badge
|
|
127
|
+
|
|
128
|
+
**Action:**
|
|
129
|
+
|
|
130
|
+
- \`action.text\` → \`action.label\` in \`ListItem.AdditionalInfo\` as \`additionalInfo\`
|
|
131
|
+
|
|
132
|
+
**Info (requires state):**
|
|
133
|
+
|
|
134
|
+
- \`MODAL\` → \`ListItem.IconButton partiallyInteractive\` + \`<Modal>\` in \`control\`
|
|
135
|
+
- \`POPOVER\` → \`<Popover>\` wrapping \`ListItem.IconButton partiallyInteractive\` in \`control\`
|
|
136
|
+
- Use \`QuestionMarkCircle\` icon
|
|
137
|
+
|
|
138
|
+
\`\`\`tsx
|
|
139
|
+
// Basic
|
|
140
|
+
<Summary title="T" description="D" icon={<Icon />} />
|
|
141
|
+
→
|
|
142
|
+
<List><ListItem title="T" subtitle="D" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} /></List>
|
|
143
|
+
|
|
144
|
+
// Status
|
|
145
|
+
<Summary title="T" description="D" icon={<Icon />} status={Status.DONE} />
|
|
146
|
+
→
|
|
147
|
+
<List><ListItem title="T" subtitle="D" media={<ListItem.AvatarView size={32} badge={{status:'positive'}}><Icon /></ListItem.AvatarView>} /></List>
|
|
148
|
+
|
|
149
|
+
// Action
|
|
150
|
+
<Summary title="T" description="D" icon={<Icon />} action={{text:'Go', href:'/go'}} />
|
|
151
|
+
→
|
|
152
|
+
<List><ListItem title="T" subtitle="D" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} additionalInfo={<ListItem.AdditionalInfo action={{label:'Go', href:'/go'}} />} /></List>
|
|
153
|
+
|
|
154
|
+
// Modal (add: const [open, setOpen] = useState(false))
|
|
155
|
+
<Summary title="T" description="D" icon={<Icon />} info={{title:'Help', content:'Text', presentation:'MODAL', 'aria-label':'Info'}} />
|
|
156
|
+
→
|
|
157
|
+
<List><ListItem title="T" subtitle="D" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} control={<ListItem.IconButton partiallyInteractive aria-label="Info" onClick={()=>setOpen(!open)}><QuestionMarkCircle /><Modal open={open} title="Help" body="Text" onClose={()=>setOpen(false)} /></ListItem.IconButton>} /></List>
|
|
158
|
+
|
|
159
|
+
// Popover
|
|
160
|
+
<Summary title="T" description="D" icon={<Icon />} info={{title:'Help', content:'Text', presentation:'POPOVER', 'aria-label':'Info'}} />
|
|
161
|
+
→
|
|
162
|
+
<List><ListItem title="T" subtitle="D" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} control={<Popover title="Help" content="Text" onClose={()=>setOpen(false)}><ListItem.IconButton partiallyInteractive aria-label="Info"><QuestionMarkCircle /></ListItem.IconButton></Popover>} /></List>
|
|
163
|
+
\`\`\`
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
## DefinitionList → Multiple ListItem
|
|
168
|
+
|
|
169
|
+
- Array → individual \`ListItem\`s
|
|
170
|
+
- \`value\` → \`subtitle\`
|
|
171
|
+
- \`key\` → React \`key\` prop
|
|
172
|
+
- Action type: "Edit"/"Update"/"View" → \`ListItem.Button priority="secondary-neutral"\`, "Change"/"Password" → \`ListItem.Navigation\`, "Copy" → \`ListItem.IconButton\`
|
|
173
|
+
|
|
174
|
+
\`\`\`tsx
|
|
175
|
+
<DefinitionList definitions={[
|
|
176
|
+
{title:'T1', value:'V1', key:'k1'},
|
|
177
|
+
{title:'T2', value:'V2', key:'k2', action:{label:'Edit', onClick:fn}}
|
|
178
|
+
]} />
|
|
179
|
+
→
|
|
180
|
+
<List>
|
|
181
|
+
<ListItem key="k1" title="T1" subtitle="V1" />
|
|
182
|
+
<ListItem key="k2" title="T2" subtitle="V2" control={<ListItem.Button priority="secondary-neutral" onClick={fn}>Edit</ListItem.Button>} />
|
|
183
|
+
</List>
|
|
184
|
+
\`\`\`
|
|
185
|
+
`;
|
|
186
|
+
const SYSTEM_PROMPT = `Transform TypeScript/JSX code from legacy Wise Design System (WDS) components to the new ListItem component and ListItem subcomponents from '@transferwise/components'.
|
|
187
|
+
|
|
188
|
+
Read and transform each file individually, instead of reading them all at the start. Only make a single edit or write per file, once you've fully processed it.
|
|
189
|
+
|
|
190
|
+
Rules:
|
|
191
|
+
1. Ignore any files that do not contain deprecated WDS components, unless they are necessary for context.
|
|
192
|
+
2. Migrate components per provided migration rules
|
|
193
|
+
3. Maintain TypeScript type safety and update types to match new API
|
|
194
|
+
4. Map props: handle renamed, deprecated, new required, and changed types
|
|
195
|
+
5. Update imports to new WDS components and types
|
|
196
|
+
6. Preserve code style, formatting, and calculated logic
|
|
197
|
+
7. Handle conditional rendering, spread props, and complex expressions
|
|
198
|
+
8. Note: New components may lack feature parity with legacy versions
|
|
199
|
+
9. Only modify code requiring changes per migration rules, and any impacted surrounding code for context.
|
|
200
|
+
10. Provide only the transformed code as output, without explanations or additional text
|
|
201
|
+
11. Do not summarise the initial user request in a response.
|
|
202
|
+
12. Use glob or grep tool usage to find the files with deprecated components.
|
|
203
|
+
13. Final result response should just be whether the migration was successful overall, or if any errors were encountered
|
|
204
|
+
|
|
205
|
+
Make the necessary updates to the files and do not respond with any explanations or reasoning.
|
|
206
|
+
|
|
207
|
+
You'll receive:
|
|
208
|
+
- File paths/directories to search in individual queries
|
|
209
|
+
- Deprecated component names at the end of this prompt
|
|
210
|
+
- Migration context and rules for each deprecated component
|
|
211
|
+
|
|
212
|
+
Deprecated components: ${DEPRECATED_COMPONENT_NAMES.join(", ")}.
|
|
213
|
+
|
|
214
|
+
${MIGRATION_RULES}`;
|
|
215
|
+
|
|
216
|
+
//#endregion
|
|
217
|
+
//#region src/transforms/list-item/helpers.ts
|
|
218
|
+
/** Split the path to get the relative path after the directory, and wrap with ANSI color codes */
|
|
219
|
+
function formatPathOutput(directory, path) {
|
|
220
|
+
return `\x1b[32m${path ? path.split(directory)[1] ?? path : directory}\x1b[0m`;
|
|
221
|
+
}
|
|
222
|
+
/** Generates a formatted string representing the total elapsed time since the given start time */
|
|
223
|
+
function generateElapsedTime(startTime) {
|
|
224
|
+
const endTime = Date.now();
|
|
225
|
+
const elapsedTime = Math.floor((endTime - startTime) / 1e3);
|
|
226
|
+
const hours = Math.floor(elapsedTime / 3600);
|
|
227
|
+
const minutes = Math.floor(elapsedTime % 3600 / 60);
|
|
228
|
+
const seconds = elapsedTime % 60;
|
|
229
|
+
return `${hours ? `${hours}h ` : ""}${minutes ? `${minutes}m ` : ""}${seconds ? `${seconds}s` : ""}`;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
//#endregion
|
|
233
|
+
//#region src/transforms/list-item/claude.ts
|
|
234
|
+
const CLAUDE_SETTINGS_FILE = ".claude/settings.json";
|
|
235
|
+
function getQueryOptions(sessionId, isDebug) {
|
|
236
|
+
const claudeSettingsPath = (0, node_path.resolve)(process.env.HOME || "", CLAUDE_SETTINGS_FILE);
|
|
237
|
+
const settings = JSON.parse((0, node_fs.readFileSync)(claudeSettingsPath, "utf-8"));
|
|
238
|
+
let apiKey;
|
|
239
|
+
try {
|
|
240
|
+
apiKey = (0, node_child_process.execSync)(`bash ${settings.apiKeyHelper}`, { encoding: "utf-8" }).trim();
|
|
241
|
+
} catch {}
|
|
242
|
+
if (!apiKey) throw new Error("Failed to retrieve Anthropic API key. Please check your Claude Code x LLM Gateway configuration - https://transferwise.atlassian.net/wiki/x/_YUe3Q");
|
|
243
|
+
return {
|
|
244
|
+
resume: sessionId,
|
|
245
|
+
env: {
|
|
246
|
+
ANTHROPIC_AUTH_TOKEN: apiKey,
|
|
247
|
+
ANTHROPIC_BASE_URL: settings?.env?.ANTHROPIC_BASE_URL,
|
|
248
|
+
ANTHROPIC_CUSTOM_HEADERS: settings?.env?.ANTHROPIC_CUSTOM_HEADERS,
|
|
249
|
+
ANTHROPIC_DEFAULT_SONNET_MODEL: settings.env?.ANTHROPIC_DEFAULT_SONNET_MODEL,
|
|
250
|
+
ANTHROPIC_DEFAULT_HAIKU_MODEL: settings.env?.ANTHROPIC_DEFAULT_HAIKU_MODEL,
|
|
251
|
+
ANTHROPIC_DEFAULT_OPUS_MODEL: settings.env?.ANTHROPIC_DEFAULT_OPUS_MODEL,
|
|
252
|
+
API_TIMEOUT_MS: settings.env?.API_TIMEOUT_MS,
|
|
253
|
+
PATH: process.env.PATH
|
|
254
|
+
},
|
|
255
|
+
permissionMode: "acceptEdits",
|
|
256
|
+
systemPrompt: {
|
|
257
|
+
type: "preset",
|
|
258
|
+
preset: "claude_code",
|
|
259
|
+
append: SYSTEM_PROMPT
|
|
260
|
+
},
|
|
261
|
+
settingSources: [
|
|
262
|
+
"local",
|
|
263
|
+
"project",
|
|
264
|
+
"user"
|
|
265
|
+
]
|
|
266
|
+
};
|
|
267
|
+
}
|
|
268
|
+
async function initiateClaudeSessionOptions(isDebug = false) {
|
|
269
|
+
console.log(`${CONSOLE_ICONS.info} Starting Claude instance - your browser may open for Okta authentication if required.`);
|
|
270
|
+
const options = getQueryOptions(void 0, isDebug);
|
|
271
|
+
const result = (0, __anthropic_ai_claude_agent_sdk.query)({
|
|
272
|
+
options,
|
|
273
|
+
prompt: `You'll be given directories in additional individual queries to search in for files using deprecated Wise Design System (WDS) components. Migrate the code per the provided migration rules.`
|
|
274
|
+
});
|
|
275
|
+
for await (const message of result) switch (message.type) {
|
|
276
|
+
case "system":
|
|
277
|
+
if (message.subtype === "init" && !options.resume) {
|
|
278
|
+
console.log(`${CONSOLE_ICONS.success} Successfully initialised Claude instance`);
|
|
279
|
+
options.resume = message.session_id;
|
|
280
|
+
}
|
|
281
|
+
break;
|
|
282
|
+
default: if (message.type === "result" && message.subtype !== "success") console.log(`${CONSOLE_ICONS.error} Claude encountered an error: ${message.errors.join("\n")}`);
|
|
283
|
+
}
|
|
284
|
+
return options;
|
|
285
|
+
}
|
|
286
|
+
async function queryClaude(path, options, isDebug = false) {
|
|
287
|
+
const result = (0, __anthropic_ai_claude_agent_sdk.query)({
|
|
288
|
+
options,
|
|
289
|
+
prompt: path
|
|
290
|
+
});
|
|
291
|
+
const modifiedFiles = [];
|
|
292
|
+
for await (const message of result) switch (message.type) {
|
|
293
|
+
case "assistant":
|
|
294
|
+
for (const msg of message.message.content) switch (msg.type) {
|
|
295
|
+
case "tool_use":
|
|
296
|
+
if (msg.name === "Glob" || msg.name === "Grep") console.log(`${CONSOLE_ICONS.focus} Processing directory: ${formatPathOutput(path)}...`);
|
|
297
|
+
else if (msg.name === "Read") console.log(`${CONSOLE_ICONS.info} Reading ${formatPathOutput(path, msg.input.file_path)}`);
|
|
298
|
+
else if ((msg.name === "Write" || msg.name === "Edit") && !modifiedFiles.includes(msg.input.file_path)) {
|
|
299
|
+
modifiedFiles.push(msg.input.file_path);
|
|
300
|
+
console.log(`${CONSOLE_ICONS.info} Migrated ${formatPathOutput(path, msg.input.file_path)}`);
|
|
301
|
+
}
|
|
302
|
+
break;
|
|
303
|
+
default:
|
|
304
|
+
}
|
|
305
|
+
break;
|
|
306
|
+
case "result":
|
|
307
|
+
if (message.subtype === "success") console.log(`${CONSOLE_ICONS.success} Migrated all applicable files in ${formatPathOutput(path)}`);
|
|
308
|
+
else console.log(`${CONSOLE_ICONS.error} Claude encountered an error: ${message.errors.join("\n").trim()}`);
|
|
309
|
+
break;
|
|
310
|
+
default:
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
//#endregion
|
|
315
|
+
//#region src/transforms/list-item/transformer.ts
|
|
316
|
+
const transformer = async (targetPaths, codemodPath, isDebug = false) => {
|
|
317
|
+
const startTime = Date.now();
|
|
318
|
+
const queryOptions = await initiateClaudeSessionOptions(isDebug);
|
|
319
|
+
console.log(`${CONSOLE_ICONS.info} Analysing targetted paths - this may take a while...`);
|
|
320
|
+
for (const directory of targetPaths) if (require_helpers.assessPrerequisites(directory, codemodPath)) await queryClaude(directory, queryOptions, isDebug);
|
|
321
|
+
console.log(`${CONSOLE_ICONS.success} Finished migrating - elapsed time: \x1b[1m${generateElapsedTime(startTime)}\x1b[0m`);
|
|
322
|
+
};
|
|
323
|
+
var transformer_default = transformer;
|
|
324
|
+
|
|
325
|
+
//#endregion
|
|
326
|
+
Object.defineProperty(exports, 'CONSOLE_ICONS', {
|
|
327
|
+
enumerable: true,
|
|
328
|
+
get: function () {
|
|
329
|
+
return CONSOLE_ICONS;
|
|
330
|
+
}
|
|
331
|
+
});
|
|
332
|
+
Object.defineProperty(exports, 'transformer_default', {
|
|
333
|
+
enumerable: true,
|
|
334
|
+
get: function () {
|
|
335
|
+
return transformer_default;
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
//# sourceMappingURL=transformer-wd_8jk1P.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"transformer-wd_8jk1P.js","names":["modifiedFiles: string[]","assessPrerequisites"],"sources":["../src/constants.ts","../src/transforms/list-item/constants.ts","../src/transforms/list-item/helpers.ts","../src/transforms/list-item/claude.ts","../src/transforms/list-item/transformer.ts"],"sourcesContent":["export const CONSOLE_ICONS = {\n info: '\\x1b[34mℹ\\x1b[0m', // Blue info icon\n focus: '\\x1b[34m➙\\x1b[0m', // Blue arrow icon\n success: '\\x1b[32m✔\\x1b[0m', // Green checkmark\n warning: '\\x1b[33m⚠\\x1b[0m', // Yellow warning icon\n error: '\\x1b[31m✖\\x1b[0m', // Red cross icon\n};\n","const DEPRECATED_COMPONENT_NAMES = [\n 'ActionOption',\n 'NavigationOption',\n 'NavigationOptionsList',\n 'Summary',\n 'SwitchOption',\n 'CheckboxOption',\n 'RadioOption',\n];\n\nconst MIGRATION_RULES = `Migration rules:\n# Legacy Component → ListItem Migration Guide\n\n## Universal Rules\n\n1. Wrap all \\`ListItem\\` in \\`<List>\\`\n2. \\`title\\` → \\`title\\` (direct)\n3. \\`content\\` or \\`description\\` → \\`subtitle\\`\n4. \\`disabled\\` stays on \\`ListItem\\` (not controls)\n5. Keep HTML attributes (\\`id\\`, \\`name\\`, \\`aria-label\\`), remove: \\`as\\`, \\`complex\\`, \\`showMediaAtAllSizes\\`, \\`showMediaCircle\\`, \\`isContainerAligned\\`\n\n---\n\n## ActionOption → ListItem.Button\n\n- \\`action\\` → Button children\n- \\`onClick\\` → Button \\`onClick\\`\n- Priority: default/\\`\"primary\"\\` → \\`\"primary\"\\`, \\`\"secondary\"\\` → \\`\"secondary-neutral\"\\`, \\`\"secondary-send\"\\` → \\`\"secondary\"\\`, \\`\"tertiary\"\\` → \\`\"tertiary\"\\`\n\n\\`\\`\\`tsx\n<ActionOption title=\"Title\" content=\"Text\" action=\"Click\" priority=\"secondary\" onClick={fn} />\n→\n<List><ListItem title=\"Title\" subtitle=\"Text\" control={<ListItem.Button priority=\"secondary-neutral\" onClick={fn}>Click</ListItem.Button>} /></List>\n\\`\\`\\`\n\n---\n\n## CheckboxOption → ListItem.Checkbox\n\n- \\`onChange\\`: \\`(checked: boolean)\\` → \\`(event: ChangeEvent)\\` use \\`event.target.checked\\`\n- \\`id\\`, \\`name\\` move to Checkbox\n\n\\`\\`\\`tsx\n<CheckboxOption id=\"x\" name=\"y\" title=\"Title\" content=\"Text\" checked={v} onChange={(c) => set(c)} />\n→\n<List><ListItem title=\"Title\" subtitle=\"Text\" control={<ListItem.Checkbox id=\"x\" name=\"y\" checked={v} onChange={(e) => set(e.target.checked)} />} /></List>\n\\`\\`\\`\n\n---\n\n## RadioOption → ListItem.Radio\n\n- \\`id\\`, \\`name\\`, \\`value\\`, \\`checked\\`, \\`onChange\\` move to Radio\n\n\\`\\`\\`tsx\n<RadioOption id=\"x\" name=\"y\" value=\"v\" title=\"Title\" content=\"Text\" checked={v==='v'} onChange={set} />\n→\n<List><ListItem title=\"Title\" subtitle=\"Text\" control={<ListItem.Radio id=\"x\" name=\"y\" value=\"v\" checked={v==='v'} onChange={set} />} /></List>\n\\`\\`\\`\n\n---\n\n## SwitchOption → ListItem.Switch\n\n- \\`onChange\\` → \\`onClick\\`, toggle manually\n- \\`aria-label\\` moves to Switch\n\n\\`\\`\\`tsx\n<SwitchOption title=\"Title\" content=\"Text\" checked={v} aria-label=\"Toggle\" onChange={set} />\n→\n<List><ListItem title=\"Title\" subtitle=\"Text\" control={<ListItem.Switch checked={v} aria-label=\"Toggle\" onClick={() => set(!v)} />} /></List>\n\\`\\`\\`\n\n---\n\n## NavigationOption → ListItem.Navigation\n\n- \\`onClick\\` or \\`href\\` move to Navigation\n\n\\`\\`\\`tsx\n<NavigationOption title=\"Title\" content=\"Text\" onClick={fn} />\n→\n<List><ListItem title=\"Title\" subtitle=\"Text\" control={<ListItem.Navigation onClick={fn} />} /></List>\n\\`\\`\\`\n\n---\n\n## Option → ListItem\n\n- Wrap \\`media\\` in \\`ListItem.AvatarView\\`\n\n\\`\\`\\`tsx\n<Option media={<Icon />} title=\"Title\" />\n→\n<List><ListItem title=\"Title\" media={<ListItem.AvatarView><Icon /></ListItem.AvatarView>} /></List>\n\\`\\`\\`\n\n---\n\n## Summary → ListItem\n\n**Basic:**\n\n- \\`icon\\` → wrap in \\`ListItem.AvatarView\\` with \\`size={32}\\` as \\`media\\`\n\n**Status:**\n\n- \\`Status.DONE\\` → \\`badge={{ status: 'positive' }}\\`\n- \\`Status.PENDING\\` → \\`badge={{ status: 'pending' }}\\`\n- \\`Status.NOT_DONE\\` → no badge\n\n**Action:**\n\n- \\`action.text\\` → \\`action.label\\` in \\`ListItem.AdditionalInfo\\` as \\`additionalInfo\\`\n\n**Info (requires state):**\n\n- \\`MODAL\\` → \\`ListItem.IconButton partiallyInteractive\\` + \\`<Modal>\\` in \\`control\\`\n- \\`POPOVER\\` → \\`<Popover>\\` wrapping \\`ListItem.IconButton partiallyInteractive\\` in \\`control\\`\n- Use \\`QuestionMarkCircle\\` icon\n\n\\`\\`\\`tsx\n// Basic\n<Summary title=\"T\" description=\"D\" icon={<Icon />} />\n→\n<List><ListItem title=\"T\" subtitle=\"D\" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} /></List>\n\n// Status\n<Summary title=\"T\" description=\"D\" icon={<Icon />} status={Status.DONE} />\n→\n<List><ListItem title=\"T\" subtitle=\"D\" media={<ListItem.AvatarView size={32} badge={{status:'positive'}}><Icon /></ListItem.AvatarView>} /></List>\n\n// Action\n<Summary title=\"T\" description=\"D\" icon={<Icon />} action={{text:'Go', href:'/go'}} />\n→\n<List><ListItem title=\"T\" subtitle=\"D\" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} additionalInfo={<ListItem.AdditionalInfo action={{label:'Go', href:'/go'}} />} /></List>\n\n// Modal (add: const [open, setOpen] = useState(false))\n<Summary title=\"T\" description=\"D\" icon={<Icon />} info={{title:'Help', content:'Text', presentation:'MODAL', 'aria-label':'Info'}} />\n→\n<List><ListItem title=\"T\" subtitle=\"D\" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} control={<ListItem.IconButton partiallyInteractive aria-label=\"Info\" onClick={()=>setOpen(!open)}><QuestionMarkCircle /><Modal open={open} title=\"Help\" body=\"Text\" onClose={()=>setOpen(false)} /></ListItem.IconButton>} /></List>\n\n// Popover\n<Summary title=\"T\" description=\"D\" icon={<Icon />} info={{title:'Help', content:'Text', presentation:'POPOVER', 'aria-label':'Info'}} />\n→\n<List><ListItem title=\"T\" subtitle=\"D\" media={<ListItem.AvatarView size={32}><Icon /></ListItem.AvatarView>} control={<Popover title=\"Help\" content=\"Text\" onClose={()=>setOpen(false)}><ListItem.IconButton partiallyInteractive aria-label=\"Info\"><QuestionMarkCircle /></ListItem.IconButton></Popover>} /></List>\n\\`\\`\\`\n\n---\n\n## DefinitionList → Multiple ListItem\n\n- Array → individual \\`ListItem\\`s\n- \\`value\\` → \\`subtitle\\`\n- \\`key\\` → React \\`key\\` prop\n- Action type: \"Edit\"/\"Update\"/\"View\" → \\`ListItem.Button priority=\"secondary-neutral\"\\`, \"Change\"/\"Password\" → \\`ListItem.Navigation\\`, \"Copy\" → \\`ListItem.IconButton\\`\n\n\\`\\`\\`tsx\n<DefinitionList definitions={[\n {title:'T1', value:'V1', key:'k1'},\n {title:'T2', value:'V2', key:'k2', action:{label:'Edit', onClick:fn}}\n]} />\n→\n<List>\n <ListItem key=\"k1\" title=\"T1\" subtitle=\"V1\" />\n <ListItem key=\"k2\" title=\"T2\" subtitle=\"V2\" control={<ListItem.Button priority=\"secondary-neutral\" onClick={fn}>Edit</ListItem.Button>} />\n</List>\n\\`\\`\\`\n`;\n\nexport const SYSTEM_PROMPT = `Transform TypeScript/JSX code from legacy Wise Design System (WDS) components to the new ListItem component and ListItem subcomponents from '@transferwise/components'.\n\nRead and transform each file individually, instead of reading them all at the start. Only make a single edit or write per file, once you've fully processed it.\n\nRules:\n1. Ignore any files that do not contain deprecated WDS components, unless they are necessary for context.\n2. Migrate components per provided migration rules\n3. Maintain TypeScript type safety and update types to match new API\n4. Map props: handle renamed, deprecated, new required, and changed types\n5. Update imports to new WDS components and types\n6. Preserve code style, formatting, and calculated logic\n7. Handle conditional rendering, spread props, and complex expressions\n8. Note: New components may lack feature parity with legacy versions\n9. Only modify code requiring changes per migration rules, and any impacted surrounding code for context.\n10. Provide only the transformed code as output, without explanations or additional text\n11. Do not summarise the initial user request in a response.\n12. Use glob or grep tool usage to find the files with deprecated components.\n13. Final result response should just be whether the migration was successful overall, or if any errors were encountered\n\nMake the necessary updates to the files and do not respond with any explanations or reasoning. \n\nYou'll receive:\n- File paths/directories to search in individual queries\n- Deprecated component names at the end of this prompt\n- Migration context and rules for each deprecated component\n\nDeprecated components: ${DEPRECATED_COMPONENT_NAMES.join(', ')}.\n\n${MIGRATION_RULES}`;\n","/** Split the path to get the relative path after the directory, and wrap with ANSI color codes */\nexport function formatPathOutput(directory: string, path?: string): string {\n return `\\x1b[32m${path ? (path.split(directory)[1] ?? path) : directory}\\x1b[0m`;\n}\n\n/** Generates a formatted string representing the total elapsed time since the given start time */\nexport function generateElapsedTime(startTime: number): string {\n const endTime = Date.now();\n const elapsedTime = Math.floor((endTime - startTime) / 1000);\n const hours = Math.floor(elapsedTime / 3600);\n const minutes = Math.floor((elapsedTime % 3600) / 60);\n const seconds = elapsedTime % 60;\n\n return `${hours ? `${hours}h ` : ''}${minutes ? `${minutes}m ` : ''}${seconds ? `${seconds}s` : ''}`;\n}\n","import { type Options, query } from '@anthropic-ai/claude-agent-sdk';\nimport { execSync } from 'child_process';\nimport { readFileSync } from 'fs';\nimport { resolve } from 'path';\n\nimport { CONSOLE_ICONS } from '../../constants';\nimport { SYSTEM_PROMPT } from './constants';\nimport { formatPathOutput } from './helpers';\nimport type { ClaudeResponseToolUse, ClaudeSettings } from './types';\n\nconst CLAUDE_SETTINGS_FILE = '.claude/settings.json';\n\nexport function getQueryOptions(sessionId?: string, isDebug?: boolean): Options {\n // Read settings from ~/.claude/settings.json to get headers and apiKeyHelper\n const claudeSettingsPath = resolve(process.env.HOME || '', CLAUDE_SETTINGS_FILE);\n const settings = JSON.parse(readFileSync(claudeSettingsPath, 'utf-8')) as ClaudeSettings;\n\n // Get API key by executing the apiKeyHelper script, for authenticating with Okta via LLM Gateway\n let apiKey;\n try {\n apiKey = execSync(`bash ${settings.apiKeyHelper}`, {\n encoding: 'utf-8',\n }).trim();\n } catch {}\n\n if (!apiKey) {\n throw new Error(\n 'Failed to retrieve Anthropic API key. Please check your Claude Code x LLM Gateway configuration - https://transferwise.atlassian.net/wiki/x/_YUe3Q',\n );\n }\n\n const envVars = {\n ANTHROPIC_AUTH_TOKEN: apiKey,\n ANTHROPIC_BASE_URL: settings?.env?.ANTHROPIC_BASE_URL,\n ANTHROPIC_CUSTOM_HEADERS: settings?.env?.ANTHROPIC_CUSTOM_HEADERS,\n ANTHROPIC_DEFAULT_SONNET_MODEL: settings.env?.ANTHROPIC_DEFAULT_SONNET_MODEL,\n ANTHROPIC_DEFAULT_HAIKU_MODEL: settings.env?.ANTHROPIC_DEFAULT_HAIKU_MODEL,\n ANTHROPIC_DEFAULT_OPUS_MODEL: settings.env?.ANTHROPIC_DEFAULT_OPUS_MODEL,\n API_TIMEOUT_MS: settings.env?.API_TIMEOUT_MS,\n PATH: process.env.PATH, // Specifying PATH as Claude Agent SDK seems to struggle consuming the actual environment PATH\n };\n\n // if (isDebug) {\n // console.debug(`${CONSOLE_ICONS.info} Resolved Claude environment variables:`, JSON.stringify(envVars));\n // }\n\n return {\n resume: sessionId,\n env: envVars,\n permissionMode: 'acceptEdits',\n systemPrompt: {\n type: 'preset',\n preset: 'claude_code',\n append: SYSTEM_PROMPT,\n },\n settingSources: ['local', 'project', 'user'],\n };\n}\n\n// Initiate a new Claude session/conversation and return reusable session ID\nexport async function initiateClaudeSessionOptions(isDebug = false): Promise<Options> {\n console.log(\n `${CONSOLE_ICONS.info} Starting Claude instance - your browser may open for Okta authentication if required.`,\n );\n\n const options = getQueryOptions(undefined, isDebug);\n const result = query({\n options,\n prompt: `You'll be given directories in additional individual queries to search in for files using deprecated Wise Design System (WDS) components. Migrate the code per the provided migration rules.`,\n });\n\n for await (const message of result) {\n switch (message.type) {\n case 'system':\n if (message.subtype === 'init' && !options.resume) {\n console.log(`${CONSOLE_ICONS.success} Successfully initialised Claude instance`);\n options.resume = message.session_id;\n }\n break;\n default:\n if (message.type === 'result' && message.subtype !== 'success') {\n console.log(\n `${CONSOLE_ICONS.error} Claude encountered an error: ${message.errors.join('\\n')}`,\n );\n }\n }\n }\n\n return options;\n}\n\nexport async function queryClaude(path: string, options: Options, isDebug = false) {\n const result = query({\n options,\n prompt: path,\n });\n const modifiedFiles: string[] = [];\n\n for await (const message of result) {\n switch (message.type) {\n case 'assistant':\n for (const msg of message.message.content) {\n switch (msg.type) {\n // Handles logging of tool uses to determine key stages of the migration ()\n case 'tool_use':\n if (msg.name === 'Glob' || msg.name === 'Grep') {\n console.log(\n `${CONSOLE_ICONS.focus} Processing directory: ${formatPathOutput(path)}...`,\n );\n // NOTE: Possibly want to only log reading files when in debug mode, to reduce noise\n } else if (msg.name === 'Read') {\n console.log(\n `${CONSOLE_ICONS.info} Reading ${formatPathOutput(path, (msg as ClaudeResponseToolUse).input.file_path)}`,\n );\n } else if (\n (msg.name === 'Write' || msg.name === 'Edit') &&\n !modifiedFiles.includes((msg as ClaudeResponseToolUse).input.file_path) // Safeguard against duplicate logs, where Claude may write multiple times to the same file\n ) {\n modifiedFiles.push((msg as ClaudeResponseToolUse).input.file_path);\n console.log(\n `${CONSOLE_ICONS.info} Migrated ${formatPathOutput(path, (msg as ClaudeResponseToolUse).input.file_path)}`,\n );\n }\n break;\n default:\n }\n }\n break;\n case 'result':\n if (message.subtype === 'success') {\n // TODO: Handle case where migration failed for some files?\n console.log(\n `${CONSOLE_ICONS.success} Migrated all applicable files in ${formatPathOutput(path)}`,\n );\n } else {\n console.log(\n `${CONSOLE_ICONS.error} Claude encountered an error: ${message.errors.join('\\n').trim()}`,\n );\n }\n break;\n default:\n }\n }\n}\n","import { CONSOLE_ICONS } from '../../constants';\nimport { assessPrerequisites } from '../../controller/helpers';\nimport { initiateClaudeSessionOptions, queryClaude } from './claude';\nimport { generateElapsedTime } from './helpers';\n\nconst transformer = async (targetPaths: string[], codemodPath: string, isDebug = false) => {\n const startTime = Date.now();\n\n // TODO: We need to check whether the user is connected to the VPN\n\n const queryOptions = await initiateClaudeSessionOptions(isDebug);\n\n console.log(`${CONSOLE_ICONS.info} Analysing targetted paths - this may take a while...`);\n\n for (const directory of targetPaths) {\n const isCompliant = assessPrerequisites(directory, codemodPath);\n\n if (isCompliant) {\n // TODO: Potential improvement could be getting all of the file paths first -\n // Make sure claude can still handle related files (imported components/wrapping parents)\n // Get all files within directory, and call queryClaude for each file\n await queryClaude(directory, queryOptions, isDebug);\n }\n\n // await queryClaude(directory, queryOptions, isDebug);\n }\n\n console.log(\n `${CONSOLE_ICONS.success} Finished migrating - elapsed time: \\x1b[1m${generateElapsedTime(startTime)}\\x1b[0m`,\n );\n};\n\nexport default transformer;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/wds-codemods",
|
|
3
|
-
"version": "1.0.0-experimental-
|
|
3
|
+
"version": "1.0.0-experimental-a536a63",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": "Wise Payments Ltd.",
|
|
6
6
|
"repository": {
|
|
@@ -34,10 +34,12 @@
|
|
|
34
34
|
"test:watch": "jest --watch"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
+
"@anthropic-ai/claude-agent-sdk": "^0.1.37",
|
|
37
38
|
"@inquirer/prompts": "^7.8.6",
|
|
38
39
|
"jscodeshift": "^17.3"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
42
|
+
"@anthropic-ai/sdk": "^0.68.0",
|
|
41
43
|
"@babel/core": "^7.28.4",
|
|
42
44
|
"@babel/plugin-syntax-import-meta": "^7.10.4",
|
|
43
45
|
"@babel/preset-env": "^7.28.3",
|
|
@@ -53,10 +55,10 @@
|
|
|
53
55
|
"@types/jscodeshift": "^17.3.0",
|
|
54
56
|
"@types/node": "^24.4.0",
|
|
55
57
|
"@types/semver": "^7.7.1",
|
|
56
|
-
"@wise/eslint-config": "^13.
|
|
58
|
+
"@wise/eslint-config": "^13.1.0",
|
|
57
59
|
"babel-jest": "^30.1.2",
|
|
58
60
|
"babel-plugin-transform-import-meta": "^2.3.3",
|
|
59
|
-
"eslint": "^9.
|
|
61
|
+
"eslint": "^9.34.0",
|
|
60
62
|
"husky": "^9.1.7",
|
|
61
63
|
"jest": "^30.1.3",
|
|
62
64
|
"jest-file-snapshot": "^0.7.0",
|