@navikt/aksel 2.8.16-rc.0

package/README.md

@@ -0,0 +1,17 @@
+# Aksel command line interface
+
+CLI tool for managing CSS-imports and more from when consuming Aksel-packages.
+
+[Documentation](https://aksel.nav.no/preview/grunnleggende/kode/kommandolinje)
+
+```bash
+run:
+npx @navikt/aksel
+
+commands:
+css-imports: Generate css-imports for all components used from Aksel
+```
+
+## License
+
+[MIT](https://github.com/navikt/aksel/blob/main/LICENCE)

package/dist/css-imports/config.js

@@ -0,0 +1,2 @@
+export const ComponentPrefix = "C_";
+export const layerSuffix = " layer(aksel)";

package/dist/css-imports/generate-output.js

@@ -0,0 +1,133 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ComponentPrefix, layerSuffix } from "./config.js";
+import { formCss, typoCss, componentsCss, StyleMappings, componentDir, rootDir, globalDir, } from "@navikt/ds-css/config/_mappings.js";
+import { inquiry } from "./inquiry.js";
+import clipboard from "clipboardy";
+import lodash from "lodash";
+import chalk from "chalk";
+export function generateImportOutput(answers) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const useCdn = answers.cdn === "yes";
+        const useTailwind = answers.tailwind === "yes";
+        const version = answers.version;
+        const imports = [];
+        let importStr = "";
+        yield inquiry(answers, [
+            {
+                type: "select",
+                name: "output",
+                message: "Output format",
+                initial: "print-clipboard",
+                choices: [
+                    { message: "Clipboard & Print", name: "clipboard-print" },
+                    { message: "Clipboard", name: "clipboard" },
+                    { message: "Print", name: "print" },
+                ],
+            },
+        ]);
+        answers["config-type"] === "regular"
+            ? imports.push(simpleOutput(useCdn, answers.layers === "yes", version))
+            : imports.push(...advancedOutput(answers, useCdn, answers.layers === "yes", version));
+        if (useTailwind) {
+            importStr = `@import "tailwindcss/base";
+${imports.join("\n")}
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+    `;
+        }
+        else {
+            importStr = imports.join("\n");
+        }
+        if (answers.output.includes("print")) {
+            console.log(chalk.bold.cyan(`\nImports 🚀 \n`));
+            console.log(chalk.green(`${importStr}`));
+        }
+        if (useCdn) {
+            console.log(chalk.bold.underline.cyan(`\nNotes on CDN-usage 📝`));
+            console.log(`We recommend using Static imports, then uploading the your bundled static-files to your own CDN-instance.
+✔︎ This allows you to control the version of the CSS-files with package.json, and avoids desync between ds-react/ds-css.
+✔︎ Remember to add 'https://cdn.nav.no' to your applications CSP!`);
+        }
+        if (useTailwind) {
+            console.log(chalk.bold.underline.cyan(`\nNotes on Tailwind-use 📝`));
+            console.log(`When using tailwind with Aksel, you will need to add the postcss plugin ${chalk.cyan("postcss-import")}
+✔︎ NPM: https://www.npmjs.com/package/postcss-import
+✔︎ Read more here: https://aksel.nav.no/grunnleggende/kode/tailwind`);
+        }
+        answers.output.includes("clipboard") && clipboard.writeSync(importStr);
+    });
+}
+function simpleOutput(cdn, layers, version) {
+    const options = {
+        static: `@import "@navikt/ds-css"${layers ? layerSuffix : ""};`,
+        cdn: toCdn("index.css", version),
+    };
+    return cdn ? options.cdn : options.static;
+}
+function advancedOutput(answers, cdn, layers, version) {
+    const imports = ["/* Defaults */"];
+    const baselineImports = answers.imports.filter((x) => !x.startsWith(ComponentPrefix) && x !== "default");
+    const componentImports = answers.imports
+        .filter((x) => x.startsWith(ComponentPrefix) && x !== "components")
+        .map((x) => x.replace(ComponentPrefix, ""));
+    baselineImports.forEach((x) => {
+        cdn
+            ? imports.push(toCdn(`${globalDir}/${x}.css`, version))
+            : imports.push(toCssImport(`${globalDir}/${x}.css`, layers));
+    });
+    if (answers["config-type"] === "easy") {
+        cdn
+            ? imports.push(toCdn(componentsCss, version))
+            : imports.push(toCssImport(`${rootDir}/${componentsCss}`, layers));
+        return imports;
+    }
+    const components = new Set();
+    componentImports.forEach((x) => {
+        var _a;
+        const styleRef = StyleMappings.components.find((y) => y.component === x);
+        if (styleRef) {
+            components.add(styleRef.main);
+            (_a = styleRef === null || styleRef === void 0 ? void 0 : styleRef.dependencies) === null || _a === void 0 ? void 0 : _a.forEach((dep) => components.add(dep));
+        }
+    });
+    let componentImportsList = Array.from(components)
+        .filter((x) => x.length > 0)
+        .sort((a, b) => a.localeCompare(b));
+    if (componentImportsList.find((x) => x === formCss)) {
+        componentImportsList = componentImportsList.filter((x) => x !== formCss);
+        componentImportsList.unshift(formCss);
+    }
+    if (componentImportsList.find((x) => x === typoCss)) {
+        componentImportsList = componentImportsList.filter((x) => x !== typoCss);
+        componentImportsList.unshift(typoCss);
+    }
+    if (componentImportsList.length === 0) {
+        return imports;
+    }
+    imports.push(``);
+    imports.push(`/* Components */`);
+    componentImportsList.forEach((x) => {
+        const pascalCase = lodash.camelCase(x.replace("css", "")).toLowerCase();
+        cdn
+            ? imports.push(toCdn(`${componentDir}/${pascalCase}.css`, version))
+            : imports.push(toCssImport(`${componentDir}/${pascalCase}.css`, layers));
+    });
+    return imports;
+}
+function toCdn(str, version) {
+    return `<link rel="preload" href="https://cdn.nav.no/aksel/@navikt/ds-css/${version}/${str
+        .replace(".css", ".min.css")
+        .replace(`${rootDir}/`, "")}" as="style"></link>`;
+}
+function toCssImport(str, layers) {
+    return `@import "@navikt/ds-css/${str}"${layers ? layerSuffix : ""};`;
+}

package/dist/css-imports/get-directories.js

@@ -0,0 +1,28 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import fg from "fast-glob";
+import path from "path";
+export function getDirectories() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const baseDir = process.cwd();
+        const ignoreNodeModules = [
+            "**/node_modules/**",
+            "**/dist/**",
+            "**/build/**",
+            "**/lib/**",
+        ];
+        const directories = yield fg(`${baseDir}/**`, {
+            onlyDirectories: true,
+            ignore: ignoreNodeModules,
+        });
+        directories.sort((a, b) => a.length - b.length);
+        return [baseDir, ...directories].map((x) => x.replace(baseDir, path.basename(baseDir)));
+    });
+}

package/dist/css-imports/get-version.js

@@ -0,0 +1,22 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import axios from "axios";
+export function getAllVersions() {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const npmPackageData = yield axios.get(`https://registry.npmjs.org/@navikt/ds-css`);
+            return Object.keys(npmPackageData.data["versions"]);
+        }
+        catch (e) {
+            console.log(e);
+            return [];
+        }
+    });
+}

package/dist/css-imports/index.js

@@ -0,0 +1,182 @@
+#!/usr/bin/env node
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { StyleMappings } from "@navikt/ds-css/config/_mappings.js";
+import { generateImportOutput } from "./generate-output.js";
+import { ComponentPrefix } from "./config.js";
+import { inquiry } from "./inquiry.js";
+import { exec } from "child_process";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+import { getAllVersions } from "./get-version.js";
+import chalk from "chalk";
+import { getDirectories } from "./get-directories.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+main();
+function main() {
+    return __awaiter(this, void 0, void 0, function* () {
+        let answers = {
+            "config-type": "regular",
+            cdn: "no",
+            version: "0.0.0",
+            autoscan: "no",
+            scandir: "",
+            tailwind: "no",
+            layers: "no",
+            imports: null,
+            output: "print-clipboard",
+        };
+        yield inquiry(answers, [
+            {
+                type: "select",
+                name: "config-type",
+                message: "Import variants:",
+                initial: 0,
+                choices: [
+                    { message: "Regular (recommended)", name: "regular" },
+                    { message: "Optional defaults + bundled components", name: "easy" },
+                    { message: "Fine-grained (advanced)", name: "advanced" },
+                ],
+            },
+            {
+                type: "select",
+                name: "cdn",
+                message: "Import format",
+                initial: 0,
+                choices: [
+                    { message: "Static import (default)", name: "no" },
+                    { message: "CDN import (not recommended)", name: "yes" },
+                ],
+            },
+        ]);
+        if ((answers === null || answers === void 0 ? void 0 : answers.cdn) === "no") {
+            yield inquiry(answers, [
+                {
+                    type: "select",
+                    name: "tailwind",
+                    message: "Add tailwind support?",
+                    initial: 0,
+                    choices: [
+                        { message: "No", name: "no" },
+                        { message: "Yes", name: "yes" },
+                    ],
+                },
+                {
+                    type: "select",
+                    name: "layers",
+                    message: "Add styling to custom @layer rule?",
+                    initial: 0,
+                    choices: [
+                        { message: "No", name: "no" },
+                        { message: "Yes", name: "yes" },
+                    ],
+                },
+            ]);
+        }
+        else {
+            let versions = (yield getAllVersions()).filter((x) => !x.includes("-"));
+            const index = versions.findIndex((x) => x.startsWith("2.9.0"));
+            versions = versions.slice(index).reverse();
+            yield inquiry(answers, [
+                {
+                    type: "autocomplete",
+                    name: "version",
+                    message: `@navikt/ds-css version from CDN:`,
+                    limit: 6,
+                    initial: 0,
+                    choices: versions,
+                    footer() {
+                        return chalk.grey('Remember to match version with @navikt/ds-react!\nNote: CDN was introduced in v2.9.0, older versions not available.\nUse "static" import instead.');
+                    },
+                },
+            ]);
+        }
+        if (answers["config-type"] === "regular") {
+            yield generateImportOutput(answers);
+            return;
+        }
+        answers["config-type"] === "advanced" &&
+            (yield inquiry(answers, [
+                {
+                    type: "select",
+                    name: "autoscan",
+                    message: "Scan current directory for '@navikt/ds-react' components?",
+                    initial: 0,
+                    choices: [
+                        { message: "No", name: "no" },
+                        { message: "Yes", name: "yes" },
+                    ],
+                },
+            ]));
+        answers.autoscan === "yes" &&
+            (yield inquiry(answers, [
+                {
+                    type: "autocomplete",
+                    name: "scandir",
+                    message: `Directory to scan`,
+                    limit: 6,
+                    initial: 0,
+                    choices: getDirectories(),
+                    footer() {
+                        return chalk.grey("filtered out: node_moduels, dist, build, lib, .* (dotfiles)");
+                    },
+                },
+            ]));
+        let foundComponents = [];
+        if (answers["autoscan"] === "yes") {
+            foundComponents = yield new Promise((resolve) => {
+                exec(`node ${__dirname}/scan-code.js ${answers.scandir}`, (_, stdout) => {
+                    resolve(stdout ? JSON.parse(stdout.trim().split("\n").slice(1).join("")) : []);
+                });
+            });
+        }
+        yield inquiry(answers, [
+            {
+                type: "multiselect",
+                name: "imports",
+                message: "Imports",
+                initial: [
+                    ...StyleMappings.baseline.map((x) => x.main.replace(".css", "")),
+                    ...StyleMappings.components
+                        .filter((x) => foundComponents.includes(x.component))
+                        .map((x) => `${ComponentPrefix}${x.component}`),
+                ],
+                choices: [
+                    {
+                        message: "Default-imports",
+                        name: "default",
+                        choices: [
+                            ...StyleMappings.baseline.map((x) => ({
+                                message: `${x.main.replace(".css", "")}${x.optional ? "" : " (required)"}`,
+                                name: x.main.replace(".css", ""),
+                            })),
+                        ],
+                    },
+                    ...(answers["config-type"] === "advanced"
+                        ? [
+                            {
+                                message: "Components",
+                                name: "components",
+                                choices: [
+                                    ...StyleMappings.components.map((x) => ({
+                                        message: x.component,
+                                        name: `${ComponentPrefix}${x.component}`,
+                                    })),
+                                ],
+                            },
+                        ]
+                        : []),
+                ],
+            },
+        ]);
+        yield generateImportOutput(answers);
+    });
+}

package/dist/css-imports/inquiry.js

@@ -0,0 +1,28 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Enquirer from "enquirer";
+export function inquiry(answers, questions) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield Enquirer.prompt(questions.map((x) => (Object.assign(Object.assign({}, x), { cancel: () => process.exit(1) }))))
+            .then((a) => {
+            Object.entries(a).forEach(([key, value]) => {
+                answers[key] = value;
+            });
+        })
+            .catch((error) => {
+            if (error.isTtyError) {
+                console.log("Oops, something went wrong! Looks like @navikt/aksel-cli can't run in this terminal. Contact Aksel");
+            }
+            else {
+                console.error(error);
+            }
+        });
+    });
+}

package/dist/css-imports/scan-code.js

@@ -0,0 +1,40 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import path from "path";
+import scanner from "react-scanner";
+run();
+function run() {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield scanCode();
+    });
+}
+function scanCode() {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        const cwd = process.cwd();
+        const config = {
+            rootDir: cwd,
+            crawlFrom: `${(_a = process.argv[2]) !== null && _a !== void 0 ? _a : ""}`.replace(path.basename(cwd), "."),
+            globs: ["**/!(*.test|*.spec|*.stories|*.story).@(jsx|tsx)"],
+            exclude: (dirname) => dirname === "node_modules",
+            getComponentName: ({ imported, moduleName, }) => imported || path.basename(moduleName),
+        };
+        let result = null;
+        yield scanner
+            .run(Object.assign(Object.assign({}, config), { importedFrom: /@navikt\/ds-react/, processors: [
+                "count-components",
+                ({ report }) => {
+                    result = report;
+                },
+            ] }))
+            .catch(() => null);
+        console.log(JSON.stringify(Object.keys(result)));
+    });
+}

package/dist/help.js

@@ -0,0 +1,13 @@
+import chalk from "chalk";
+console.log(`
+✨ Aksel client-tool
+
+📝 Documentation
+   - ${chalk.blueBright("https://github.com/navikt/aksel/blob/main/%40navikt/aksel/README.md")}
+
+💻 Commands:
+   - ${chalk.cyan(`npx @navikt/aksel ${chalk.green("css-imports")}`)}
+   ✔︎ Helps with adding CSS imports for all Aksel-components
+   ✔︎ Supports Static and CDN-imports
+   ✔︎ Handles cascading, talwind and @layer rules
+`);

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@navikt/aksel",
+  "version": "2.8.16-rc.0",
+  "description": "Aksel command line interface. Handles css-imports, codemods (planned) and more",
+  "author": "Aksel | NAV designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "command-line",
+    "CLI",
+    "css",
+    "CDN"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "yarn clean && tsc -p tsconfig.json",
+    "dev": "tsc --watch -p tsconfig.json"
+  },
+  "bin": {
+    "aksel": "./dist/help.js",
+    "css-imports": "./dist/css-imports/index.js",
+    "help": "./dist/help.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/aksel.git",
+    "directory": "@navikt/aksel"
+  },
+  "type": "module",
+  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
+  "dependencies": {
+    "@navikt/ds-css": "2.8.15",
+    "axios": "1.3.6",
+    "chalk": "4.1.0",
+    "clipboardy": "^3.0.0",
+    "enquirer": "^2.3.6",
+    "fast-glob": "3.2.11",
+    "lodash": "4.17.21",
+    "react-scanner": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/inquirer": "^9.0.3",
+    "rimraf": "3.0.2",
+    "typescript": "^4.8.0"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}