@navikt/aksel 7.34.0 → 7.35.0

package/README.md

@@ -1,6 +1,6 @@
 # Aksel command line interface
 
-CLI tool for managing CSS-imports and Codemods when consuming Aksel-packages.
+CLI tool for running codemods when consuming Aksel-packages.
 
 [Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
 
@@ -9,7 +9,6 @@ run:
 npx @navikt/aksel
 
 commands:
-css-imports: Generate css-imports for all components from Aksel
 codemod: Codemods for version-migrations related to Aksel
 ```
 
@@ -22,6 +21,101 @@ To get started:
 npx @navikt/aksel codemod --help
 ```
 
+### v8
+
+#### Box
+
+`npx @navikt/aksel codemod v8-box ...`
+
+Updates Box with legacy-tokens to Box using the new token system.
+
+```diff
+-<Box background="bg-subtle" borderColor="border-alt-1">
++<Box background="bg-neutral-soft" borderColor="border-meta-purple">
+```
+
+#### BoxNew
+
+`npx @navikt/aksel codemod v8-box-new ...`
+
+Renames already migrated BoxNew/Box.New instances to Box.
+
+```diff
+-<BoxNew>
++<Box>
+```
+
+#### Prop deprecate
+
+`npx @navikt/aksel codemod v8-prop-deprecate ...`
+
+Removes deprecated props from components.
+
+```diff
+-<Accordion headingSize="large">
++<Accordion>
+
+-<Popover arrow>
++<Popover>
+
+-<Page background="bg-subtle">
++<Page>
+```
+
+#### List
+
+`npx @navikt/aksel codemod v8-list ...`
+
+Tries to migrate List component moving 'title' and 'description' props to 'Heading' and 'BodyShort'.
+
+#### Variants
+
+`npx @navikt/aksel codemod v8-tag-variant ...`
+`npx @navikt/aksel codemod v8-toggle-group-variant ...`
+`npx @navikt/aksel codemod v8-accordion-variant ...`
+`npx @navikt/aksel codemod v8-chips-variant ...`
+
+Updates variant + data-color props based on current variant prop.
+
+```diff
+-<Tag variant="info">
++<Tag variant="outline" data-color="info">
+```
+
+#### Spacing
+
+`npx @navikt/aksel codemod v8-primitive-spacing ...`
+`npx @navikt/aksel codemod v8-token-spacing ...`
+`npx @navikt/aksel codemod v8-token-spacing-js ...`
+
+Updates use of legacy `spacing` token to new `space`-token
+
+```diff
+-<HStack gap="spacing-4" />
++<HStack gap="space-16" />
+```
+
+```diff
+-margin: var(--a-spacing-1);
++margin: var(--ax-space-4);
+```
+
+### v6
+
+#### Chat
+
+`npx @navikt/aksel codemod v6-chat ...`
+
+Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`.
+
+```diff
+-<Chat backgroundColor="red" avatarBgColor="blue">
++<Chat>
+-  <Chat.Bubble backgroundColor="red" />
++  <Chat.Bubble />
+</Chat>
+```
+
 ### 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`.

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.migrations = void 0;
+exports.migrationStringOverride = exports.migrations = void 0;
 exports.getMigrationPath = getMigrationPath;
 exports.getWarning = getWarning;
 exports.getIgnoredFileExtensions = getIgnoredFileExtensions;
@@ -79,7 +79,7 @@ exports.migrations = {
             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",
+            warning: "Remember to remove 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",
             ignoredExtensions: CSS_EXTENSIONS,
         },
     ],
@@ -114,38 +114,72 @@ exports.migrations = {
             ignoredExtensions: CSS_EXTENSIONS,
         },
     ],
-    spacing: [
+    "v8.0.0": [
         {
-            description: "Updates all Primitives to use new `space`-tokens. (Works with old and new system)",
-            value: "primitive-spacing",
-            path: "spacing/primitives-spacing/spacing",
+            description: "Updates Box with legacy-tokens to Box using the new token system, and renames already migrated BoxNew/Box.New instances to Box.",
+            value: "v8-box",
+            path: "v8.0.0/box/box",
+            warning: "Remember to check if 'TODO: Aksel Box migration'-comment was added to any files after migration. This comment will help you find and update Box-instances we couldn't update for you.",
             ignoredExtensions: CSS_EXTENSIONS,
         },
         {
-            description: "Updates css, scss and less-variables to use new `space`-tokens. (Works with old and new system)",
-            value: "token-spacing",
-            path: "spacing/token-spacing/spacing",
-            ignoredExtensions: [],
+            description: "Renames already migrated BoxNew/Box.New instances to Box.",
+            value: "v8-box-new",
+            path: "v8.0.0/box-new/box-new",
+            ignoredExtensions: CSS_EXTENSIONS,
         },
         {
-            description: "Updates js-tokens to use new `space`-tokens. (Works with old and new system)",
-            value: "token-spacing-js",
-            path: "spacing/token-spacing-js/spacing",
+            description: "Removes deprecated props from components.",
+            value: "v8-prop-deprecate",
+            path: "v8.0.0/prop-deprecate/prop-deprecate",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
+        {
+            description: "Updates variant + data-color props on Tag based on current variant prop.",
+            value: "v8-tag-variant",
+            path: "v8.0.0/tag-variant/tag-variant",
             ignoredExtensions: CSS_EXTENSIONS,
         },
-    ],
-    darkside: [
         {
-            description: "marks deprecated prop usage with comments.",
-            value: "prop-deprecate",
-            path: "darkside/prop-deprecate/prop-deprecate",
+            description: "Updates variant + data-color props on ToggleGroup based on current variant prop.",
+            value: "v8-toggle-group-variant",
+            path: "v8.0.0/toggle-group-variant/toggle-group-variant",
             ignoredExtensions: CSS_EXTENSIONS,
         },
         {
-            description: "Update Box to to BoxNew (future Box) using the new token system",
-            value: "box-to-boxnew",
-            path: "darkside/box-to-boxnew/box-to-boxnew",
-            warning: "Remember to check if 'aksel box migration'-comment were added to any files after migration. This comment will help you find and update Box-instances where we could not resolve the update for you.",
+            description: "Updates variant + data-color props on Accordion based on current variant prop.",
+            value: "v8-accordion-variant",
+            path: "v8.0.0/accordion-variant/accordion-variant",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
+        {
+            description: "Updates variant + data-color props on Chips based on current variant prop.",
+            value: "v8-chips-variant",
+            path: "v8.0.0/chips-variant/chips-variant",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
+        {
+            description: "Tries to migrate List component moving 'title' and 'description' props to 'Heading' and 'BodyShort'.",
+            value: "v8-list",
+            path: "v8.0.0/list/list",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
+        {
+            description: "Updates all Primitives to use new `space`-tokens. (Works with old and new system)",
+            value: "v8-primitive-spacing",
+            path: "v8.0.0/primitives-spacing/spacing",
+            ignoredExtensions: CSS_EXTENSIONS,
+        },
+        {
+            description: "Updates css, scss and less-variables to use new `space`-tokens. (Works with old and new system)",
+            value: "v8-token-spacing",
+            path: "v8.0.0/token-spacing/spacing",
+            ignoredExtensions: [],
+        },
+        {
+            description: "Updates js-tokens to use new `space`-tokens. (Works with old and new system)",
+            value: "v8-token-spacing-js",
+            path: "v8.0.0/token-spacing-js/spacing",
             ignoredExtensions: CSS_EXTENSIONS,
         },
     ],
@@ -182,6 +216,21 @@ function getMigrationNames() {
         .flat()
         .map((x) => x.value);
 }
+/**
+ * Allows injecting additional migration names that are not part of the main migrations-list.
+ * This is used for interactive migrations that should not be part of the main list.
+ *
+ * We need to separate this since main migration list expect all migration names to have a unique path,
+ * which is not the case for interactive migrations that are handled differently.
+ */
+exports.migrationStringOverride = {
+    "v8.0.0": [
+        {
+            value: "v8-tokens",
+            description: "Starts interactive token migration for v8",
+        },
+    ],
+};
 function getMigrationString() {
     let str = "";
     Object.entries(exports.migrations).forEach(([version, vMigrations]) => {
@@ -189,6 +238,10 @@ function getMigrationString() {
         vMigrations.forEach((migration) => {
             str += `${chalk_1.default.blue(migration.value)}: ${migration.description}\n`;
         });
+        const overrideMigrations = exports.migrationStringOverride[version] || [];
+        overrideMigrations.forEach((migration) => {
+            str += `${chalk_1.default.blue(migration.value)}: ${migration.description}\n`;
+        });
     });
     return str;
 }

package/dist/codemod/transforms/v8.0.0/accordion-variant/accordion-variant.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrationConfig = void 0;
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+exports.migrationConfig = {
+    component: "Accordion",
+    prop: "variant",
+    changes: {
+        default: { color: "accent" },
+        neutral: { color: "neutral" },
+    },
+};
+function transformer(file, api) {
+    return (0, move_variant_to_data_color_1.moveVariantToDataColor)(file, api, exports.migrationConfig);
+}

package/dist/codemod/transforms/{darkside/box-to-boxnew/box-to-boxnew.js → v8.0.0/box/box.js}

@@ -1,49 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const legacy_tokens_1 = require("../../../../darkside/config/legacy.tokens");
 const ast_1 = require("../../../utils/ast");
 const lineterminator_1 = require("../../../utils/lineterminator");
-const packageImports_1 = __importStar(require("../../../utils/packageImports"));
+const box_new_1 = __importDefault(require("../box-new/box-new"));
 const propsAffected = ["background", "borderColor", "shadow"];
 function transformer(file, api) {
     const j = api.jscodeshift;
     const root = j(file.source);
     const toSourceOptions = (0, lineterminator_1.getLineTerminator)(file.source);
-    if (file.source.includes("TODO: aksel box migration")) {
+    if (file.source.includes("TODO: Aksel Box migration")) {
         return root.toSource(toSourceOptions);
     }
     const localName = (0, ast_1.findComponentImport)({
@@ -65,7 +35,6 @@ function transformer(file, api) {
     });
     const tokenComments = [];
     for (const astElement of astElements.paths()) {
-        let encounteredUnmigratableProp = false;
         for (const prop of propsAffected) {
             (0, ast_1.findProps)({ j, path: astElement, name: prop }).forEach((attr) => {
                 const attrvalue = attr.value.value;
@@ -75,7 +44,6 @@ function transformer(file, api) {
                         attrvalue.value = config.replacement;
                     }
                     else {
-                        encounteredUnmigratableProp = true;
                         const tokenComment = {
                             prop,
                             token: attrvalue.value,
@@ -86,6 +54,24 @@ function transformer(file, api) {
                         tokenComments.push(tokenComment);
                     }
                 }
+                else if (attrvalue.type === "JSXExpressionContainer" &&
+                    attrvalue.expression.type === "StringLiteral") {
+                    const literal = attrvalue.expression;
+                    const config = legacy_tokens_1.legacyTokenConfig[literal.value];
+                    if (config === null || config === void 0 ? void 0 : config.replacement) {
+                        literal.value = config.replacement;
+                    }
+                    else {
+                        const tokenComment = {
+                            prop,
+                            token: literal.value,
+                        };
+                        if (config === null || config === void 0 ? void 0 : config.comment) {
+                            tokenComment.comment = config.comment;
+                        }
+                        tokenComments.push(tokenComment);
+                    }
+                }
             });
         }
         (0, ast_1.findProps)({ j, path: astElement, name: "borderRadius" }).forEach((attr) => {
@@ -107,46 +93,24 @@ function transformer(file, api) {
                         }
                     });
                 }
+                else if (expression.type === "StringLiteral") {
+                    expression.value = convertBorderRadiusToRadius(expression.value);
+                }
             }
         });
-        if (!encounteredUnmigratableProp) {
-            // TODO: ?? Box -> BoxNew type fail? (but works)
-            astElement.node.openingElement.name.name = "BoxNew";
-            astElement.node.closingElement.name.name = "BoxNew";
-        }
     }
     const blockComment = createFileComments({ tokenComments });
-    const importAnalysis = analyzePartialMigration(j, root.toSource(toSourceOptions));
-    if (importAnalysis === "no new") {
-        // WHY: we do nothing to the import statements if we couldn't migrate any Box
-    }
-    if (importAnalysis === "mixed") {
-        // WHY: mixed Box and BoxNew == we keep old, and add the new import
-        (0, packageImports_1.addPackageImport)({
-            j,
-            root,
-            packageName: "@navikt/ds-react/Box",
-            specifiers: ["BoxNew"],
-        });
+    if (blockComment) {
+        return `${blockComment ? blockComment + "\n\n" : ""}${root.toSource(toSourceOptions)}`;
     }
-    if (importAnalysis === "all new") {
-        // WHY: when we have only new boxes == we replace the old import with the new one
-        (0, packageImports_1.default)(j, root, {
-            fromImport: "@navikt/ds-react",
-            toImport: "@navikt/ds-react/Box",
-            fromName: "Box",
-            toName: "BoxNew",
-            ignoreAlias: true,
-        });
-    }
-    const output = `${blockComment ? blockComment + "\n\n" : ""}${root.toSource(toSourceOptions)}`;
-    return output;
+    file.source = root.toSource(toSourceOptions);
+    return (0, box_new_1.default)(file, api);
 }
 const createFileComments = ({ tokenComments, }) => {
     if (tokenComments.length === 0) {
         return null;
     }
-    let constructedComment = "/*\nTODO: aksel box migration:\nCould not migrate the following:\n";
+    let constructedComment = "/*\nTODO: Aksel Box migration:\nCould not migrate the following:\n";
     for (const { prop, token, comment } of tokenComments.values()) {
         constructedComment += `  - ${prop}=${token}\n`;
         if (comment) {
@@ -156,38 +120,6 @@ const createFileComments = ({ tokenComments, }) => {
     constructedComment += "*/";
     return constructedComment;
 };
-const analyzePartialMigration = (j, source) => {
-    const root = j(source);
-    const astNewElements = (0, ast_1.findJSXElement)({
-        root,
-        j,
-        name: "BoxNew",
-        originalName: "BoxNew",
-    });
-    if (astNewElements.length === 0) {
-        return "no new";
-    }
-    const localName = (0, ast_1.findComponentImport)({
-        root,
-        j,
-        name: "Box",
-        packageType: "react",
-    });
-    if (!localName) {
-        // this should never happen
-        throw new Error('package imports have been tampered with before the package import "step" in the migration');
-    }
-    const astOldElements = (0, ast_1.findJSXElement)({
-        root,
-        j,
-        name: localName,
-        originalName: "Box",
-    });
-    if (astOldElements.length === 0) {
-        return "all new";
-    }
-    return "mixed";
-};
 const legacyBorderRadiusNameTokenLookup = {
     full: "full",
     xlarge: "12",

package/dist/codemod/transforms/v8.0.0/box-new/box-new.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const ast_1 = require("../../../utils/ast");
+const lineterminator_1 = require("../../../utils/lineterminator");
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    const toSourceOptions = (0, lineterminator_1.getLineTerminator)(file.source);
+    const boxLocalName = (0, ast_1.findComponentImport)({
+        root,
+        j,
+        name: "Box",
+        packageType: "react",
+    }) || "Box";
+    // Rename <BoxNew ...> to <Box ...>
+    root.find(j.JSXOpeningElement).forEach((path) => {
+        if (path.value.name.type === "JSXIdentifier" &&
+            path.value.name.name === "BoxNew") {
+            path.value.name.name = boxLocalName;
+        }
+        // Rename <Box.New ...> to <Box ...>
+        if (path.value.name.type === "JSXMemberExpression" &&
+            path.value.name.object.type === "JSXIdentifier" &&
+            path.value.name.object.name === boxLocalName &&
+            path.value.name.property.name === "New") {
+            path.value.name = j.jsxIdentifier(boxLocalName);
+        }
+    });
+    root.find(j.JSXClosingElement).forEach((path) => {
+        if (path.value.name.type === "JSXIdentifier" &&
+            path.value.name.name === "BoxNew") {
+            path.value.name.name = boxLocalName;
+        }
+        if (path.value.name.type === "JSXMemberExpression" &&
+            path.value.name.object.type === "JSXIdentifier" &&
+            path.value.name.object.name === boxLocalName &&
+            path.value.name.property.name === "New") {
+            path.value.name = j.jsxIdentifier(boxLocalName);
+        }
+    });
+    // Handle imports
+    const imports = root.find(j.ImportDeclaration).filter((path) => {
+        return (path.value.source.value === "@navikt/ds-react" ||
+            path.value.source.value === "@navikt/ds-react/Box");
+    });
+    imports.forEach((path) => {
+        const specifiers = path.value.specifiers;
+        if (!specifiers)
+            return;
+        const boxNewIndex = specifiers.findIndex((s) => s.type === "ImportSpecifier" && s.imported.name === "BoxNew");
+        if (boxNewIndex !== -1) {
+            const boxIndex = specifiers.findIndex((s) => s.type === "ImportSpecifier" && s.imported.name === "Box");
+            if (boxIndex !== -1) {
+                // Box already imported, remove BoxNew
+                const boxNewSpecifier = specifiers[boxNewIndex];
+                if (boxNewSpecifier.type === "ImportSpecifier" &&
+                    boxNewSpecifier.local &&
+                    boxNewSpecifier.local.name !== "BoxNew") {
+                    const localName = boxNewSpecifier.local.name;
+                    root.find(j.JSXOpeningElement).forEach((jsxPath) => {
+                        if (jsxPath.value.name.type === "JSXIdentifier" &&
+                            jsxPath.value.name.name === localName) {
+                            jsxPath.value.name.name = boxLocalName;
+                        }
+                    });
+                    root.find(j.JSXClosingElement).forEach((jsxPath) => {
+                        if (jsxPath.value.name.type === "JSXIdentifier" &&
+                            jsxPath.value.name.name === localName) {
+                            jsxPath.value.name.name = boxLocalName;
+                        }
+                    });
+                }
+                specifiers.splice(boxNewIndex, 1);
+            }
+            else {
+                // Rename BoxNew to Box
+                const boxNewSpecifier = specifiers[boxNewIndex];
+                if (boxNewSpecifier.type === "ImportSpecifier") {
+                    boxNewSpecifier.imported.name = "Box";
+                    // If local name is BoxNew, rename it to Box
+                    if (boxNewSpecifier.local &&
+                        boxNewSpecifier.local.name === "BoxNew") {
+                        boxNewSpecifier.local.name = "Box";
+                    }
+                }
+            }
+        }
+    });
+    return root.toSource(toSourceOptions);
+}

package/dist/codemod/transforms/v8.0.0/chips-variant/chips-variant.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const move_variant_to_data_color_1 = require("../../../utils/move-variant-to-data-color");
+const migrationConfigToggleSub = {
+    component: "Chips.Toggle",
+    prop: "variant",
+    changes: {
+        action: { color: "accent" },
+        neutral: { color: "neutral" },
+    },
+};
+const migrationConfigToggleDirect = Object.assign(Object.assign({}, migrationConfigToggleSub), { component: "ChipsToggle" });
+const migrationConfigRemovableSub = Object.assign(Object.assign({}, migrationConfigToggleSub), { component: "Chips.Removable" });
+const migrationConfigRemovableDirect = Object.assign(Object.assign({}, migrationConfigToggleSub), { component: "ChipsRemovable" });
+function transformer(file, api) {
+    const configs = [
+        migrationConfigToggleSub,
+        migrationConfigToggleDirect,
+        migrationConfigRemovableSub,
+        migrationConfigRemovableDirect,
+    ];
+    let source = file.source;
+    for (const config of configs) {
+        const newSource = (0, move_variant_to_data_color_1.moveVariantToDataColor)(Object.assign(Object.assign({}, file), { source }), api, config);
+        if (newSource) {
+            source = newSource;
+        }
+    }
+    return source;
+}