@navikt/aksel 3.4.2 → 4.0.0

package/README.md

@@ -22,6 +22,45 @@ To get started:
 npx @navikt/aksel codemod --help
 ```
 
+### v4
+
+In v4, we moved all the components from `@navikt/ds-react-internal` to `@navikt/ds-react`. This means that you will need to update all your imports to the new package. As a part of this, Header was renamed to `InternalHeader` and all the CSS-classes was renamed to use `navds` as a prefix instead of `navdsi`.
+
+#### react
+
+`npx @navikt/aksel codemod v4-internal-react ...`
+
+Rewrites all imports from `@navikt/ds-react-internal` to `@navikt/ds-react`. Remember to remove `@navikt/ds-react-internal` as a dependency after migration.
+
+```diff
+- import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
+- import { Button, CopyButton } from "@navikt/ds-react";
++ import { Button, CopyButton, Dropdown, Timeline, InternalHeader as Header } from "@navikt/ds-react";
+```
+
+#### css
+
+`npx @navikt/aksel codemod v4-internal-css ...`
+
+Rewrites all css with `navdsi`-prefix to `navds`-prefix. Rewrites all `.navdsi-header` classes to `.navds-internalheader`.
+
+Remember to remove `@navikt/ds-css-internal` as a dependency after migration + remove it from you lists of imports in the CSS-bundle.
+
+```diff
+- .navdsi-dropdown
++ .navds-dropdown
+- .navdsi-header
++ .navds-internalheader
+- .navdsi-timeline
++ .navds-timeline
+```
+
+Note: This is a "dumb" codemod that uses a simple regex to find and replace. This can lead to unknown sideeffects, so its reccomended to scope the codemod to spesific files.
+
+```bash
+`npx @navikt/aksel codemod v4-internal-css **/*.css`
+```
+
 ### v3
 
 There is no general codemods for migrating from v2 -> v3.

package/dist/codemod/migrations.js

@@ -58,6 +58,25 @@ exports.migrations = {
             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",
         },
     ],
+    "v4.0.0": [
+        {
+            description: "Replaced deprecated 'internal'-component import to 'core'-imports",
+            value: "v4-internal-react",
+            path: "v4.0.0/internal-react/internal-react",
+            warning: "Remember to also run 'v4-internal-css' if you have overwritten any css-classes!",
+        },
+        {
+            description: "Replaced 'navdsi'-prefixes used to overwrite internal-css to 'navds'-prefixes",
+            value: "v4-internal-css",
+            path: "v4.0.0/internal-css/internal-css",
+            warning: "Remember to remove '@navikt/ds-css-internal' imports if no longer needed! Also run 'v4-internal-react' to convert internal-react imports to core-imports",
+        },
+        {
+            description: "Removes all instances of UNSAFE_ for datepicker/monthpicker.",
+            value: "v4-date",
+            path: "v4.0.0/date/date",
+        },
+    ],
 };
 function getMigrationPath(str) {
     var _a;

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

@@ -26,6 +26,7 @@ function transformer(file, api, options, ...rest) {
         toImport: "@navikt/ds-react",
         fromName: "CopyToClipboard",
         toName,
+        ignoreAlias: true,
     });
     if (localName === null) {
         return root.toSource((0, lineterminator_1.getLineTerminator)(file.source));

package/dist/codemod/transforms/v4.0.0/date/date.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file) {
+    const names = [
+        "UNSAFE_useDatepicker",
+        "UNSAFE_DatePicker",
+        "UNSAFE_useRangeDatepicker",
+        "UNSAFE_MonthPicker",
+        "UNSAFE_useMonthpicker",
+    ];
+    let src = file.source;
+    names.forEach((name) => {
+        src = src.replaceAll(name, name.replace("UNSAFE_", ""));
+    });
+    return src;
+}
+exports.default = transformer;

package/dist/codemod/transforms/v4.0.0/internal-css/internal-css.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cssConversions = {
+    ".navdsi-dropdown": ".navds-dropdown",
+    ".navdsi-header": ".navds-internalheader",
+    ".navdsi-timeline": ".navds-timeline",
+    "--ac-header-bg": "--ac-internalheader-bg",
+    "--ac-header-divider": "--ac-internalheader-divider",
+    "--ac-header-text": "--ac-internalheader-text",
+    "--ac-header-hover-bg": "--ac-internalheader-hover-bg",
+    "--ac-header-active-bg": "--ac-internalheader-active-bg",
+};
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+function transformer(file) {
+    let src = file.source;
+    Object.entries(cssConversions).forEach(([key, value]) => {
+        src = src.replaceAll(key, value);
+    });
+    return src;
+}
+exports.default = transformer;

package/dist/codemod/transforms/v4.0.0/internal-react/internal-react.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lineterminator_1 = require("../../../utils/lineterminator");
+const moveAndRenameImport_1 = __importDefault(require("../../../utils/moveAndRenameImport"));
+/**
+ * @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;
+    }
+    (0, moveAndRenameImport_1.default)(j, root, {
+        fromImport: "@navikt/ds-react-internal",
+        toImport: "@navikt/ds-react",
+        fromName: "Header",
+        toName: "InternalHeader",
+    });
+    (0, moveAndRenameImport_1.default)(j, root, {
+        fromImport: "@navikt/ds-react-internal",
+        toImport: "@navikt/ds-react",
+        fromName: "Dropdown",
+        toName: "Dropdown",
+    });
+    (0, moveAndRenameImport_1.default)(j, root, {
+        fromImport: "@navikt/ds-react-internal",
+        toImport: "@navikt/ds-react",
+        fromName: "Timeline",
+        toName: "Timeline",
+    });
+    return root.toSource((0, lineterminator_1.getLineTerminator)(file.source));
+}
+exports.default = transformer;

package/dist/codemod/utils/moveAndRenameImport.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function moveAndRenameImport(j, root, { fromImport, toImport, fromName, toName, }) {
+function moveAndRenameImport(j, root, { fromImport, toImport, fromName, toName, ignoreAlias = false, }) {
     var _a, _b;
+    /* Does package-name exist */
     const existingFromImport = root.find(j.ImportDeclaration, {
         source: {
             value: fromImport,
@@ -23,22 +24,27 @@ function moveAndRenameImport(j, root, { fromImport, toImport, fromName, toName,
     if ((existingFromImportSpecifier === null || existingFromImportSpecifier === void 0 ? void 0 : existingFromImportSpecifier.length) > 0) {
         existingFromImportSpecifier.remove();
     }
+    /* Remove import if its now empty */
     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();
     }
+    /* Does package exist */
     const existingImport = root.find(j.ImportDeclaration, {
         source: {
             value: toImport,
         },
     });
+    /* Check if migrated name allready exist */
     const existingImportSpecifier = existingImport.find(j.ImportSpecifier, {
         imported: {
             name: toName,
         },
     });
     if (existingImportSpecifier.length <= 0) {
-        const newImportSpecifier = j.importSpecifier(j.identifier(toName));
+        const newImportSpecifier = ignoreAlias
+            ? j.importSpecifier(j.identifier(toName))
+            : j.importSpecifier(j.identifier(toName), j.identifier(localname));
         if (existingImport.length > 0) {
             existingImport.get("specifiers").push(newImportSpecifier);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "3.4.2",
+  "version": "4.0.0",
   "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.4.2",
+    "@navikt/ds-css": "4.0.0",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",