feat: updated Angular to 20.2, Storybook to 9.1 (#360)

Author: pimenovoleg

.eslintrc.cjs

@@ -12,7 +12,7 @@ const config = {
         node: true
     },
     plugins: ['file-progress'],
-    extends: ['plugin:eslint-comments/recommended'],
+    extends: ['plugin:eslint-comments/recommended', 'plugin:storybook/recommended'],
     rules: {
         // plugin:file-progress
         'file-progress/activate': isCI ? 0 : 1,

.github/actions/setup/action.yml

@@ -5,7 +5,7 @@ inputs:
   node-version:
     description: The version of node.js
     required: false
-    default: '20.18.1'
+    default: '20.19.0'
 
 runs:
   using: composite

.gitignore

@@ -2,6 +2,7 @@
 .firebase
 .vercel
 
+debug-storybook.log
 documentation.json
 dependency-graph.png
 
@@ -68,3 +69,4 @@ yarn-error.log*
 esm
 
 .cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.nvmrc

@@ -1 +1 @@
-20.17
+20.19

apps/radix-docs/package.json

@@ -12,10 +12,10 @@
     },
     "dependencies": {
         "@alpinejs/focus": "^3.14.9",
-        "@analogjs/astro-angular": "2.0.0-alpha.9",
+        "@analogjs/astro-angular": "2.0.0-alpha.18",
         "@astrojs/alpinejs": "^0.4.8",
         "@astrojs/check": "^0.9.4",
-        "@astrojs/mdx": "^4.2.6",
+        "@astrojs/mdx": "^4.3.4",
         "@astrojs/sitemap": "^3.3.1",
         "@astrojs/vercel": "^8.1.4",
         "@astrojs/tailwind": "^5.1.5",
@@ -25,7 +25,7 @@
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/themes": "^3.1.6",
         "alpinejs": "^3.14.9",
-        "astro": "^5.7.11",
+        "astro": "^5.13.5",
         "astro-auto-import": "^0.4.4",
         "classnames": "^2.5.1",
         "clsx": "^2.1.1",
@@ -35,8 +35,8 @@
         "tailwindcss-animate": "^1.0.7"
     },
     "devDependencies": {
-        "@angular/language-service": "^19.2.4",
-        "@astrojs/markdown-remark": "^6.3.1",
+        "@angular/language-service": "^20.2.3",
+        "@astrojs/markdown-remark": "^6.3.6",
         "@shikijs/compat": "^1.29.2",
         "@shikijs/transformers": "^1.29.2",
         "@stackblitz/sdk": "^1.11.0",
@@ -48,7 +48,7 @@
         "rehype-slug": "^6.0.0",
         "remark-code-import": "^1.2.0",
         "shiki": "^1.29.2",
-        "typescript": "~5.5.4",
+        "typescript": "5.8.3",
         "unist-builder": "^4.0.0",
         "unist-util-visit": "^5.0.0"
     }

apps/radix-docs/src/components/code-editor/example-app/dependencies.ts

@@ -1,29 +1,30 @@
 export const dependencies = {
-    '@angular/animations': '^19.0.0',
-    '@angular/cdk': '^19.0.0',
-    '@angular/cli': '^19.0.0',
-    '@angular/common': '^19.0.0',
-    '@angular/compiler': '^19.0.0',
-    '@angular/core': '^19.0.0',
-    '@angular/forms': '^19.0.0',
-    '@angular/platform-browser': '^19.0.0',
-    '@angular/platform-browser-dynamic': '^19.0.0',
-    '@radix-ng/primitives': '^0.32.0',
+    '@angular/animations': '^20.0.0',
+    '@angular/cdk': '^20.0.0',
+    '@angular/cli': '^20.0.0',
+    '@angular/common': '^20.0.0',
+    '@angular/compiler': '^20.0.0',
+    '@angular/core': '^20.0.0',
+    '@angular/forms': '^20.0.0',
+    '@angular/platform-browser': '^20.0.0',
+    '@angular/platform-browser-dynamic': '^20.0.0',
+    '@radix-ng/primitives': '^0.43.0',
     '@radix-ui/colors': '^3.0.0',
     '@fontsource/inter': '^5.1.0',
     '@fontsource/jetbrains-mono': '^5.1.1',
-    'lucide-angular': '~0.469.0',
+    '@internationalized/date': '^3.7.0',
+    'lucide-angular': '~0.542.0',
     rxjs: '~7.8.1',
     tslib: '^2.5.0',
     'zone.js': '~0.15.0'
 };
 
 export const devDependencies = {
-    '@angular-devkit/build-angular': '^19.0.0',
-    '@angular/cli': '^19.0.0',
-    '@angular/compiler-cli': '^19.0.0',
-    '@angular/language-service': '^19.0.0',
+    '@angular-devkit/build-angular': '^20.0.0',
+    '@angular/cli': '^20.0.0',
+    '@angular/compiler-cli': '^20.0.0',
+    '@angular/language-service': '^20.0.0',
     '@types/node': '^20',
     'ts-node': '~8.3.0',
-    typescript: '5.6.3'
+    typescript: '5.8.3'
 };

apps/radix-docs/src/components/demo-component-preview/ComponentThemesPreview.astro

@@ -1,6 +1,4 @@
 ---
-import path from 'path';
-import { readFileSync } from 'fs';
 import { DemoThemesLoaderComponent } from './demo-themes-loader.component';
 
 export interface Props {
@@ -9,20 +7,6 @@ export interface Props {
 }
 
 const { name, file } = Astro.props;
-
-async function loadCode(name: string, file: string) {
-    const filename = path.join(process.cwd(), 'src', 'demos', 'components', `${name}`, `${file}.ts`);
-
-    const code = readFileSync(filename, 'utf-8')
-        .toString()
-        .replace(/export\s+default\s+.*;\s*/, '');
-
-    return {
-        code
-    };
-}
-
-const { code } = await loadCode(name, file);
 ---
 
 <div class="rt-Box rt-r-my-5">

apps/radix-docs/src/components/demo-component-preview/demo-themes-loader.component.ts

@@ -7,7 +7,6 @@ import { demos } from '@/demos/components';
 
 @Component({
     selector: 'empty-themes-component',
-    standalone: true,
     imports: [NgComponentOutlet, AsyncPipe],
     template: `
         @let componentRender = this.component() | async;
@@ -22,6 +21,7 @@ import { demos } from '@/demos/components';
 export class DemoThemesLoaderComponent {
     readonly name = input<string>();
     readonly file = input<string>();
+
     demos = demos;
 
     component = computed(async () => {

apps/radix-docs/src/components/demo-primitive-preview/ComponentPreview.astro

@@ -3,10 +3,10 @@ import path from 'path';
 import { readFileSync } from 'fs';
 
 import { cn } from '@/utils/utils';
-import { DemoLoaderComponent } from './demo-loader.component';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs';
-import { CodeButton } from '@/components/code-editor/code-button.ts';
-import { LlmsButton } from '@/components/code-editor/llms-button.ts';
+import { DemoLoaderComponent } from '@/components/demo-primitive-preview/demo-loader.component';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/tabs';
+import { CodeButton } from '@/components/code-editor/code-button';
+import { LlmsButton } from '@/components/code-editor/llms-button';
 
 export interface Props {
     name: string;
@@ -73,8 +73,8 @@ const llmsUrl = `${basePath}/llms.txt`;
                         CSS
                     </TabsTrigger>
                     <div class="ml-auto flex items-center gap-2">
-                        <LlmsButton {...{ llmsUrl }} client:visible />
-                        <CodeButton {...{ code, name, css }} client:visible />
+                        <LlmsButton {...{ llmsUrl }} client:only="angular" />
+                        <CodeButton {...{ code, name, css }} client:only="angular" />
                     </div>
                 </TabsList>
             </div>

apps/radix-docs/src/components/demo-primitive-preview/demo-loader.component.ts

@@ -6,27 +6,45 @@ import { Component, computed, input } from '@angular/core';
 import { demos } from '@/demos/primitives';
 
 @Component({
-    selector: 'empty-component',
-    standalone: true,
     imports: [NgComponentOutlet, AsyncPipe],
     template: `
         @let componentRender = this.component() | async;
 
-        @if (!componentRender || !componentRender.default) {
+        @if (this.existComponent && (!componentRender || !componentRender?.default)) {
             <div class="text-sm text-white">Loading...</div>
+        } @else if (!this.existComponent) {
+            <div>
+                <p class="text-muted-foreground text-sm">
+                    Component
+                    <code class="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+                        {{ name() }}
+                    </code>
+                    .
+                </p>
+            </div>
         } @else {
-            <ng-container *ngComponentOutlet="componentRender.default" />
+            <ng-container *ngComponentOutlet="componentRender!.default" />
         }
     `
 })
 export class DemoLoaderComponent {
     readonly name = input<string>();
     readonly file = input<string>();
+
     demos = demos;
 
+    protected existComponent = true;
+
     component = computed(async () => {
         if (!this.file() || !this.name()) return null;
 
-        return await demos[this.name()!][this.file()!].component();
+        const component = demos[this.name()!][this.file()!].component();
+
+        try {
+            return component;
+        } catch {
+            this.existComponent = false;
+            return null;
+        }
     });
 }