@navikt/aksel 3.1.3 → 3.2.1

package/README.md

@@ -22,6 +22,39 @@ To get started:
 npx @navikt/aksel codemod --help
 ```
 
+### v3
+
+There is no general codemods for migrating from v2 -> v3.
+
+#### CopyButton
+
+`npx @navikt/aksel codemod v3-copybutton ...`
+
+`<CopyToClipboard />` has been renamed to `<CopyButton />` and refactored.
+
+- Namechange
+- removed props `popoverText`, `iconPosition`, `popoverPlacement`
+- changed variants
+- refactored CSS and React-code. ⚠️ Overwritten CSS will not be migrated!
+
+```diff
+-import { CopyToClipboard } from "@navikt/ds-react-internal";
++import { CopyButton } from "@navikt/ds-react";
+
+-<CopyToClipboard
++<CopyButton
+- popoverText="popoverText"
+- iconPosition="left"
+- popoverPlacement="bottom-end"
+  copyText="Text to copy"
+  size="medium"
+>
+- text
++</CopyButton>
+-</CopyToClipboard>
+
+```
+
 ### v1 -> v2
 
 [Documentation](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112)

package/dist/codemod/migrations.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMigrationString = exports.getMigrationNames = exports.getMigrationPath = exports.migrations = void 0;
+exports.getMigrationString = exports.getMigrationNames = exports.getWarning = exports.getMigrationPath = exports.migrations = void 0;
 const chalk_1 = __importDefault(require("chalk"));
 exports.migrations = {
     "1.0.0": [
@@ -50,6 +50,14 @@ exports.migrations = {
             path: "v2.0.0/update-less-tokens/update-less-tokens",
         },
     ],
+    "v3.0.0": [
+        {
+            description: "Replaces deprecated <CopyToClipboard /> with <CopyButton />",
+            value: "v3-copybutton",
+            path: "v3.0.0/copybutton/copybutton",
+            warning: "Remember to clean css-import from '@navikt/ds-css-internal' if no longer needed\nIf non-text was used as children, or different locales were handled, you need to manually fix this",
+        },
+    ],
 };
 function getMigrationPath(str) {
     var _a;
@@ -58,6 +66,13 @@ function getMigrationPath(str) {
         .find((x) => x.value === str)) === null || _a === void 0 ? void 0 : _a.path;
 }
 exports.getMigrationPath = getMigrationPath;
+function getWarning(str) {
+    var _a;
+    return (_a = Object.values(exports.migrations)
+        .reduce((acc, val) => [...val, ...acc], [])
+        .find((x) => x.value === str)) === null || _a === void 0 ? void 0 : _a.warning;
+}
+exports.getWarning = getWarning;
 function getMigrationNames() {
     return Object.values(exports.migrations).reduce((acc, val) => [...val.map((x) => x.value), ...acc], []);
 }

package/dist/codemod/run-codeshift.js

@@ -58,6 +58,7 @@ function runCodeshift(input, options, program) {
         });
         console.log("\nRunning migration:", chalk_1.default.green("input"));
         (options === null || options === void 0 ? void 0 : options.glob) && console.log(`Using glob: ${chalk_1.default.green(options.glob)}\n`);
+        const warning = (0, migrations_1.getWarning)(input);
         try {
             yield jscodeshift.run(codemodPath, filepaths, {
                 babel: true,
@@ -72,6 +73,7 @@ function runCodeshift(input, options, program) {
                 force: options === null || options === void 0 ? void 0 : options.force,
                 print: options === null || options === void 0 ? void 0 : options.print,
             });
+            warning && console.log(`\n${chalk_1.default.yellow(warning)}\n`);
         }
         catch (error) {
             program.error(chalk_1.default.red("Error:", error.message));

package/dist/codemod/transforms/v3.0.0/copybutton/copybutton.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chalk_1 = __importDefault(require("chalk"));
+const moveAndRenameImport_1 = __importDefault(require("../../../utils/moveAndRenameImport"));
+const removeProps_1 = __importDefault(require("../../../utils/removeProps"));
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file, api, options, ...rest) {
+    const j = api.jscodeshift;
+    let root;
+    try {
+        root = j(file.source);
+    }
+    catch (_a) {
+        return file.source;
+    }
+    const toName = "CopyButton";
+    const localName = (0, moveAndRenameImport_1.default)(j, root, {
+        fromImport: "@navikt/ds-react-internal",
+        toImport: "@navikt/ds-react",
+        fromName: "CopyToClipboard",
+        toName,
+    });
+    if (localName === null) {
+        return root.toSource(options.printOptions);
+    }
+    /* Finds and replaces import from CopyToClipboard -> CopyButton */
+    if (root.findJSXElements(localName)) {
+        (0, removeProps_1.default)(j, root, localName, [
+            "popoverText",
+            "popoverPlacement",
+            "iconPosition",
+            "variant",
+        ]);
+        const component = root.findJSXElements(localName);
+        component.forEach((node) => {
+            const children = node.node.children;
+            let flagged = false;
+            if (children.length > 0 &&
+                !node.node.openingElement.attributes.some((attr) => attr.name.name === "text")) {
+                if (children.length === 1 && children[0].type === "JSXText") {
+                    node.node.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier("text"), j.literal(children[0].value.trim())));
+                }
+                else {
+                    flagged = true;
+                    console.log(chalk_1.default.yellow(`\n\nWarning: Detected advanced children-type!\nCodemod can't convert into "text" prop so you will need to update this manually.`));
+                }
+            }
+            if (!flagged) {
+                node.node.children = [];
+                node.node.openingElement.selfClosing = true;
+                node.node.closingElement = null;
+            }
+        });
+        const compRoot = root.find(j.JSXElement, {
+            openingElement: { name: { name: localName } },
+        });
+        compRoot.forEach((x) => {
+            x.node.openingElement.name.name = "CopyButton";
+            if (x.node.children.length > 0) {
+                x.node.closingElement.name.name = "CopyButton";
+            }
+        });
+    }
+    return root.toSource(options.printOptions);
+}
+exports.default = transformer;

package/dist/codemod/utils/moveAndRenameImport.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function moveAndRenameImport(j, root, { fromImport, toImport, fromName, toName, }) {
+    var _a, _b;
+    const existingFromImport = root.find(j.ImportDeclaration, {
+        source: {
+            value: fromImport,
+        },
+    });
+    if (!existingFromImport.length) {
+        return null;
+    }
+    let localname = fromName;
+    const existingFromImportSpecifier = existingFromImport === null || existingFromImport === void 0 ? void 0 : existingFromImport.find(j.ImportSpecifier, (node) => {
+        if (node.imported.name === fromName) {
+            localname = node.local.name;
+        }
+        return node.imported.name === fromName;
+    });
+    if (!existingFromImport.length || !(existingFromImportSpecifier === null || existingFromImportSpecifier === void 0 ? void 0 : existingFromImportSpecifier.length)) {
+        return null;
+    }
+    if ((existingFromImportSpecifier === null || existingFromImportSpecifier === void 0 ? void 0 : existingFromImportSpecifier.length) > 0) {
+        existingFromImportSpecifier.remove();
+    }
+    if (!((_a = existingFromImport.get("specifiers").value) === null || _a === void 0 ? void 0 : _a.length) ||
+        ((_b = existingFromImport.get("specifiers").value) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+        existingFromImport.remove();
+    }
+    const existingImport = root.find(j.ImportDeclaration, {
+        source: {
+            value: toImport,
+        },
+    });
+    const existingImportSpecifier = existingImport.find(j.ImportSpecifier, {
+        imported: {
+            name: toName,
+        },
+    });
+    if (existingImportSpecifier.length <= 0) {
+        const newImportSpecifier = j.importSpecifier(j.identifier(toName));
+        if (existingImport.length > 0) {
+            existingImport.get("specifiers").push(newImportSpecifier);
+        }
+        else {
+            const newImport = j.importDeclaration([newImportSpecifier], j.stringLiteral(toImport));
+            const lastImport = root.find(j.ImportDeclaration).at(-1);
+            if (lastImport.length > 0) {
+                lastImport.insertAfter(newImport);
+            }
+            else {
+                root.get().node.program.body.unshift(newImport);
+            }
+        }
+    }
+    return localname;
+}
+exports.default = moveAndRenameImport;

package/dist/codemod/utils/removeProps.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function removePropsFromComponent(j, root, componentName, propsToRemove) {
+    const component = root.findJSXElements(componentName);
+    component.forEach((node) => {
+        const attributes = node.node.openingElement.attributes;
+        for (let i = attributes.length - 1; i >= 0; i--) {
+            const attribute = attributes[i];
+            if (attribute.type === "JSXAttribute" &&
+                propsToRemove.includes(attribute.name.name.toString())) {
+                attributes.splice(i, 1);
+            }
+        }
+    });
+}
+exports.default = removePropsFromComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "3.1.3",
+  "version": "3.2.1",
   "description": "Aksel command line interface. Handles css-imports, codemods and more",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -29,7 +29,7 @@
   },
   "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
   "dependencies": {
-    "@navikt/ds-css": "3.1.3",
+    "@navikt/ds-css": "3.2.1",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",