@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

package/build/es/utilities/getThemeAndSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"getThemeAndSize.js","sources":["../../../src/utilities/getThemeAndSize.ts"],"sourcesContent":["import type { Size } from \"../core/types.js\";\n\n/*\n * For komponenter som mountes utenfor roten av applikasjonen vil styring av theme og size\n * via data-attributter satt på rot ikke fungere. Denne util'en kan brukes av slike komponenter\n * for å finne riktige verdier ved å sende inn et element som er mountet innenfor applikasjonen\n */\nexport const getThemeAndSize = (\n    element: Element | undefined,\n): { theme?: string; size?: Size } => {\n    if (!element) return {};\n\n    const computedStyles = getComputedStyle(element);\n\n    // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit\n    // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres\n    const theme =\n        Number.parseInt(\n            computedStyles\n                .getPropertyValue(\"--jkl-background-color\")\n                .replace(\"#\", \"\"),\n            16,\n        ) <\n        0xffffff / 2\n            ? \"dark\"\n            : \"light\";\n\n    const size = element.closest(\"[data-size]\")?.getAttribute(\"data-size\") as\n        | Size\n        | undefined;\n\n    return { theme, size };\n};\n"],"names":["getThemeAndSize","element","computedStyles","getComputedStyle","theme","Number","parseInt","getPropertyValue","replace","size","closest","getAttribute"],"mappings":"AAOO,MAAMA,EACTC,IAEA,IAAKA,EAAS,MAAO,CAAA,EAErB,MAAMC,EAAiBC,iBAAiBF,GAIlCG,EACFC,OAAOC,SACHJ,EACKK,iBAAiB,0BACjBC,QAAQ,IAAK,IAClB,IAEJ,UACM,OACA,QAEJC,EAAOR,EAAQS,QAAQ,gBAAgBC,aAAa,aAI1D,MAAO,CAAEP,MAAAA,EAAOK,KAAAA"}
+{"version":3,"file":"getThemeAndSize.js","sources":["../../../src/utilities/getThemeAndSize.ts"],"sourcesContent":["import type { Size } from \"./types.js\";\n\n/*\n * For komponenter som mountes utenfor roten av applikasjonen vil styring av theme og size\n * via data-attributter satt på rot ikke fungere. Denne util'en kan brukes av slike komponenter\n * for å finne riktige verdier ved å sende inn et element som er mountet innenfor applikasjonen\n */\nexport const getThemeAndSize = (\n    element: Element | undefined,\n): { theme?: string; size?: Size } => {\n    if (!element) return {};\n\n    const computedStyles = getComputedStyle(element);\n\n    // Sett theme til dark hvis bakgrunnsfargen er mørkere enn 50% av hvit\n    // dette gir oss slingringsmonn i tilfelle verdien av Jøkuls bakgrunnsfarge endres\n    const theme = computedStyles.colorScheme;\n\n    const size = element.closest(\"[data-size]\")?.getAttribute(\"data-size\") as\n        | Size\n        | undefined;\n\n    return { theme, size };\n};\n"],"names":["getThemeAndSize","element","theme","getComputedStyle","colorScheme","size","closest","getAttribute"],"mappings":"AAOO,MAAMA,EACTC,IAEA,IAAKA,EAAS,MAAO,CAAA,EAMrB,MAAMC,EAJiBC,iBAAiBF,GAIXG,YAEvBC,EAAOJ,EAAQK,QAAQ,gBAAgBC,aAAa,aAI1D,MAAO,CAAEL,MAAAA,EAAOG,KAAAA"}

package/build/es/utilities/index.d.ts

@@ -6,3 +6,4 @@ export * from './polymorphism/index.js';
 export * from './tabListener.js';
 export * from './validators/index.js';
 export * from './valuePair.js';
+export * from './types.js';

package/build/es/{core → utilities}/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { default as tokens } from './tokens.js';
+import { default as tokens } from '../tokens.js';
 export interface DataTestAutoId {
     "data-testautoid"?: string;
 }

package/build/es/utilities/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/utilities/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/codemods/__tests__/import-paths.test.mjs

@@ -0,0 +1,273 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { transformImportPaths } from "../import-paths.mjs";
+
+test("migrates core, styles and utilities imports", () => {
+    const source = `
+import "@fremtind/jokul/styles/core/core.scss";
+import "@fremtind/jokul/styles/styles.scss";
+import type { WithChildren } from "@fremtind/jokul/core";
+`;
+
+    const result = transformImportPaths(source, "/tmp/example.ts");
+
+    assert.equal(
+        result.text.includes('import "@fremtind/jokul/styles/base.scss";'),
+        true,
+    );
+    assert.equal(
+        result.text.includes('import "@fremtind/jokul/styles/components.scss";'),
+        true,
+    );
+    assert.equal(
+        result.text.includes(
+            'import type { WithChildren } from "@fremtind/jokul/utilities";',
+        ),
+        true,
+    );
+});
+
+test("moves configured font imports ahead of base styles", () => {
+    const source = `@use "@fremtind/jokul/styles/core";
+@use "@fremtind/jokul/styles/fonts" with (
+    $webfonts-dir: "../../src/fonts"
+);
+`;
+
+    const result = transformImportPaths(source, "/tmp/global.scss");
+
+    assert.match(
+        result.text,
+        /^@use "@fremtind\/jokul\/styles\/theme\/fonts" with \([\s\S]*?\);\n@use "@fremtind\/jokul\/styles\/base\.scss";/m,
+    );
+    assert.equal(result.reordered, true);
+});
+
+test("migrates internal relative core jkl imports", () => {
+    const source = `@use "../../../core/jkl";
+`;
+
+    const result = transformImportPaths(
+        source,
+        "/tmp/components/modal/styles/_layout.scss",
+    );
+
+    assert.equal(result.text, '@use "../../../styles/jkl";\n');
+});
+
+test("rewrites beta style imports when the beta component is used in the same file", () => {
+    const source = `
+import { BETA_Select } from "@fremtind/jokul/select";
+import "@fremtind/jokul/styles/components/select/_index.scss";
+`;
+
+    const result = transformImportPaths(source, "/tmp/example.tsx");
+
+    assert.equal(
+        result.text.includes(
+            '@fremtind/jokul/styles/components/beta/select/_index.scss',
+        ),
+        true,
+    );
+    assert.deepEqual(result.warnings, []);
+});
+
+test("warns when beta style imports are ambiguous", () => {
+    const source = `
+import "@fremtind/jokul/styles/components/nav-link";
+`;
+
+    const result = transformImportPaths(source, "/tmp/example.scss");
+
+    assert.equal(result.changed, false);
+    assert.equal(result.warnings.length, 1);
+});
+
+test("removes redundant webfonts.css imports when base or components css is also imported", () => {
+    const source = `import "@fremtind/jokul/styles/styles.css";
+import "@fremtind/jokul/styles/core/core.css";
+import "@fremtind/jokul/styles/fonts/webfonts.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/main.tsx");
+
+    assert.equal(
+        result.text.includes("@fremtind/jokul/styles/fonts/webfonts.css"),
+        false,
+    );
+    assert.equal(
+        result.text.includes('import "@fremtind/jokul/styles/components.css";'),
+        true,
+    );
+    assert.equal(
+        result.text.includes('import "@fremtind/jokul/styles/base.css";'),
+        true,
+    );
+    assert.deepEqual(result.warnings, []);
+});
+
+test("removes minified webfonts.css imports as well", () => {
+    const source = `import "@fremtind/jokul/styles/core/core.min.css";
+import "@fremtind/jokul/styles/fonts/webfonts.min.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/main.ts");
+
+    assert.equal(
+        result.text.includes("webfonts"),
+        false,
+    );
+    assert.equal(
+        result.text.includes('import "@fremtind/jokul/styles/base.min.css";'),
+        true,
+    );
+});
+
+test("warns when webfonts.css is removed without a base or components import", () => {
+    const source = `import "@fremtind/jokul/styles/fonts/webfonts.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/main.tsx");
+
+    assert.equal(result.text.includes("webfonts"), false);
+    assert.equal(result.warnings.length, 1);
+    assert.match(result.warnings[0], /styles\/base\.css/);
+});
+
+test("removes css @import of webfonts.css", () => {
+    const source = `@import "@fremtind/jokul/styles/components.css";
+@import "@fremtind/jokul/styles/fonts/webfonts.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/global.css");
+
+    assert.equal(result.text.includes("webfonts"), false);
+    assert.equal(
+        result.text.includes('@import "@fremtind/jokul/styles/components.css";'),
+        true,
+    );
+    assert.deepEqual(result.warnings, []);
+});
+
+test("warns about removed sass color variables", () => {
+    const source = `@use "@fremtind/jokul/styles/jkl";
+
+.banner {
+    background: jkl.$color-granitt;
+    color: jkl.$color-snohvit;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/banner.scss");
+
+    assert.equal(
+        result.warnings.some((warning) =>
+            /jkl\.\$color-\*/.test(warning),
+        ),
+        true,
+    );
+    // Bare én advarsel per mønster, selv om det er flere forekomster
+    assert.equal(
+        result.warnings.filter((warning) =>
+            /jkl\.\$color-\*/.test(warning),
+        ).length,
+        1,
+    );
+});
+
+test("warns about removed light/dark mode mixins", () => {
+    const source = `@use "@fremtind/jokul/styles/jkl";
+
+@include jkl.light-mode-variables {
+    --min-farge: jkl.$color-granitt;
+}
+@include jkl.dark-mode-variables {
+    --min-farge: jkl.$color-snohvit;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/theme.scss");
+
+    assert.equal(
+        result.warnings.some((warning) =>
+            /light-mode-variables/.test(warning),
+        ),
+        true,
+    );
+});
+
+test("warns about deprecated text-style names", () => {
+    const source = `@use "@fremtind/jokul/styles/jkl";
+
+.lead {
+    @include jkl.text-style("body");
+}
+
+.fineprint {
+    @include jkl.text-style("small");
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/typography.scss");
+
+    assert.equal(
+        result.warnings.some((warning) =>
+            /paragraph-large\/medium\/small/.test(warning),
+        ),
+        true,
+    );
+    assert.equal(
+        result.warnings.some((warning) => /<Text>-komponenten/.test(warning)),
+        true,
+    );
+});
+
+test("renames Fremtind Material Symbols font-family", () => {
+    const source = `.icon {
+    font-family: "Fremtind Material Symbols", "Fremtind Material Symbols Fallback", sans-serif;
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/icons.scss");
+
+    assert.equal(
+        result.text.includes("Fremtind Material Symbols"),
+        false,
+    );
+    assert.equal(
+        result.text.includes(
+            '"Jokul Icons", "Jokul Icons Fallback", sans-serif',
+        ),
+        true,
+    );
+    assert.equal(result.replacements, 2);
+});
+
+test("renames Fremtind Material Symbols inside CSS files too", () => {
+    const source = `.icon {
+    font-family: 'Fremtind Material Symbols';
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/icons.css");
+
+    assert.equal(
+        result.text.includes("Fremtind Material Symbols"),
+        false,
+    );
+    assert.equal(result.text.includes("'Jokul Icons'"), true);
+});
+
+test("does not warn about valid 5.0 patterns", () => {
+    const source = `@use "@fremtind/jokul/styles/jkl";
+
+.title {
+    @include jkl.text-style("heading-1");
+    color: var(--jkl-color-text-default);
+}
+`;
+
+    const result = transformImportPaths(source, "/tmp/title.scss");
+
+    assert.deepEqual(result.warnings, []);
+});