build(deps): Bumped to latest Storybook and Biomejs (#1930)

* Ran auto-migrations and fixed several issues.

Author: rkaraivanov

.storybook/preview.ts

@@ -164,7 +164,7 @@ export default {
   },
   parameters: {
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
   },
   decorators: [themeProvider, withActions, localeProvider],

package-lock.json

@@ -60,14 +60,14 @@
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "~2.2.6",
+    "@biomejs/biome": "~2.3.2",
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-links": "^9.1.13",
-    "@storybook/web-components-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.1",
+    "@storybook/addon-docs": "^10.0.1",
+    "@storybook/addon-links": "^10.0.1",
+    "@storybook/web-components-vite": "^10.0.1",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -84,7 +84,7 @@
     "igniteui-i18n-resources": "0.6.0-alpha.4",
     "igniteui-theming": "^21.0.2",
     "keep-a-changelog": "^2.7.1",
-    "lint-staged": "^16.2.5",
+    "lint-staged": "^16.2.6",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
@@ -94,7 +94,7 @@
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.93.2",
     "sinon": "^21.0.0",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.1",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",
@@ -104,13 +104,13 @@
     "typedoc": "~0.27.9",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.8.3",
-    "vite": "^7.1.11"
+    "vite": "^7.1.12"
   },
   "peerDependencies": {
     "dompurify": "^3.3.0",
     "marked": "^16.4.1",
     "marked-shiki": "^1.2.1",
-    "shiki": "^3.13.0"
+    "shiki": "^3.14.0"
   },
   "browserslist": [
     "defaults"

package.json

@@ -1,19 +1,19 @@
 import { stdout } from 'node:process';
-import { format } from 'node:util';
+import { format, styleText } from 'node:util';
 
 export default {
-  error: (s) => console.error('\x1b[31m%s\x1b[0m', s),
-  success: (s) => console.info('\x1b[32m%s\x1b[0m', s),
-  warn: (s) => console.warn('\x1b[33m%s\x1b[0m', s),
-  info: (s) => console.info('\x1b[36m%s\x1b[0m', s),
+  error: (s) => console.error(styleText('red', s)),
+  success: (s) => console.info(styleText('green', s)),
+  warn: (s) => console.warn(styleText('yellow', s)),
+  info: (s) => console.info(styleText('cyan', s)),
 
   stdout: {
     clearLine: () => {
       stdout.clearLine(0);
       stdout.cursorTo(0);
     },
-    success: (s) => stdout.write(format('\x1b[32m%s\x1b[0m', s)),
-    warn: (s) => stdout.write(format('\x1b[33m%s\x1b[0m', s)),
-    info: (s) => stdout.write(format('\x1b[36m%s\x1b[0m', s)),
+    success: (s) => stdout.write(format(styleText('green', s))),
+    warn: (s) => stdout.write(format(styleText('yellow', s))),
+    info: (s) => stdout.write(format(styleText('cyan', s))),
   },
 };

scripts/report.mjs

@@ -380,15 +380,15 @@ describe('Date range picker - common tests for single and two inputs mode', () =
 
         const predefinedArea = picker.renderRoot.querySelector(
           IgcPredefinedRangesAreaComponent.tagName
-        );
+        )!;
 
         for (const test of tests) {
           expect(predefinedArea?.resourceStrings[test.key]).to.equal(
             test.value
           );
         }
 
-        const chipElements = predefinedArea?.shadowRoot!.querySelectorAll(
+        const chipElements = predefinedArea.renderRoot.querySelectorAll(
           'igc-chip'
         ) as NodeListOf<IgcChipComponent>;
         for (const test of tests) {
@@ -420,14 +420,14 @@ describe('Date range picker - common tests for single and two inputs mode', () =
 
         const predefinedArea = picker.renderRoot.querySelector(
           IgcPredefinedRangesAreaComponent.tagName
-        );
+        )!;
         for (const test of tests) {
           expect(predefinedArea?.resourceStrings[test.key]).to.equal(
             test.value
           );
         }
 
-        const chipElements = predefinedArea?.shadowRoot!.querySelectorAll(
+        const chipElements = predefinedArea.renderRoot.querySelectorAll(
           'igc-chip'
         ) as NodeListOf<IgcChipComponent>;
         for (const test of tests) {
@@ -708,7 +708,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
       function getPredefinedArea() {
         return picker.renderRoot.querySelector(
           IgcPredefinedRangesAreaComponent.tagName
-        );
+        )!;
       }
 
       function getPopover() {
@@ -726,7 +726,7 @@ describe('Date range picker - common tests for single and two inputs mode', () =
       }
 
       function getRangeChips() {
-        return getPredefinedArea()?.renderRoot.querySelectorAll(
+        return getPredefinedArea().renderRoot.querySelectorAll(
           IgcChipComponent.tagName
         )!;
       }

src/components/date-range-picker/date-range-picker.common.spec.ts

@@ -69,11 +69,11 @@ export const checkSelectedRange = (
   }
 
   if (expectedValue?.start) {
-    checkDatesEqual(calendar.values[0], expectedValue?.start!);
+    checkDatesEqual(calendar.values[0], expectedValue.start!);
   }
   if (expectedValue?.end) {
     const length = calendar.values.length;
-    checkDatesEqual(calendar.values[length - 1], expectedValue?.end!);
+    checkDatesEqual(calendar.values[length - 1], expectedValue.end!);
   }
   if (!(expectedValue?.start || expectedValue?.end)) {
     expect(calendar.values).to.deep.equal([]);

src/components/date-range-picker/date-range-picker.utils.spec.ts

@@ -169,8 +169,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   /** Returns the tile manager internal CSS grid container. */
-  private get _cssContainer(): HTMLElement {
-    return this._tileManagerCtx?.grid.value!;
+  private get _cssContainer(): HTMLElement | undefined {
+    return this._tileManagerCtx?.grid.value;
   }
 
   /** Returns the tile manager current resize mode. */
@@ -494,7 +494,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this._resizeState.updateState(
       event.detail.state.initial,
       this,
-      this._cssContainer
+      this._cssContainer!
     );
     this._setResizeState();
   }

src/components/tile-manager/tile.ts

@@ -17,7 +17,6 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        api: 'modern-compiler',
         loadPaths: ['node_modules', 'src'],
       },
     },