Feat/upgrade workspace

.changeset/warm-forks-double.md

@@ -0,0 +1,20 @@
+---
+'@cocokits/react-components': minor
+'@cocokits/react-form-field': minor
+'@cocokits/react-accordion': minor
+'@cocokits/react-checkbox': minor
+'@cocokits/react-divider': minor
+'@cocokits/react-overlay': minor
+'@cocokits/react-avatar': minor
+'@cocokits/react-button': minor
+'@cocokits/react-toggle': minor
+'@cocokits/react-radio': minor
+'@cocokits/react-utils': minor
+'@cocokits/react-core': minor
+'@cocokits/react-icon': minor
+'@cocokits/react-menu': minor
+'@cocokits/react-tabs': minor
+'@cocokits/react-cdk': minor
+---
+
+Upgrade to react 19

.changeset/wise-shoes-itch.md

@@ -0,0 +1,20 @@
+---
+'@cocokits/angular-components': minor
+'@cocokits/angular-form-field': minor
+'@cocokits/angular-accordion': minor
+'@cocokits/angular-checkbox': minor
+'@cocokits/angular-divider': minor
+'@cocokits/angular-overlay': minor
+'@cocokits/angular-avatar': minor
+'@cocokits/angular-button': minor
+'@cocokits/angular-toggle': minor
+'@cocokits/angular-radio': minor
+'@cocokits/angular-utils': minor
+'@cocokits/angular-core': minor
+'@cocokits/angular-icon': minor
+'@cocokits/angular-menu': minor
+'@cocokits/angular-tabs': minor
+'@cocokits/angular-cdk': minor
+---
+
+Upgrade to Angular 20

.github/actions/pnpm-install/action.yml

@@ -7,12 +7,12 @@ runs:
     - name: Install Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 20.9
+        node-version: 22.17
 
     - uses: pnpm/action-setup@v2
       name: Install pnpm
       with:
-        version: 9.11
+        version: 10.9
 
     - name: Get pnpm store directory
       shell: bash

.gitignore

@@ -50,3 +50,8 @@ migration-storybook.log
 # Next.js
 .next
 out
+
+vite.config.*.timestamp*
+vitest.config.*.timestamp*
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

apps/angular-kits-doc/.eslintrc.json

@@ -24,7 +24,8 @@
             "prefix": "cck",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

apps/angular-kits-doc/.storybook/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "emitDecoratorMetadata": true,
+    "noPropertyAccessFromIndexSignature": false,
     "jsx": "react-jsx"
   },
   "exclude": ["../**/*.spec.ts", "node_modules", "../../../**/node_modules"],

apps/angular-kits-doc/package.json

@@ -9,10 +9,10 @@
   "main": "index.js",
   "scripts": {},
   "dependencies": {
-    "@angular/common": "18.2.0",
-    "@angular/core": "18.2.0",
-    "@storybook/addon-docs": "8.4.4",
-    "@storybook/angular": "8.4.4",
-    "@storybook/manager-api": "8.4.4"
+    "@angular/common": "~20.0.0",
+    "@angular/core": "~20.0.0",
+    "@storybook/addon-docs": "8.6.11",
+    "@storybook/angular": "8.6.11",
+    "@storybook/manager-api": "8.6.11"
   }
 }

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/animation-overlay-story.component.ts

@@ -6,7 +6,6 @@
 // import { OverlayService } from '../../../src/services/overlay.service';
 
 // @Component({
-//   standalone: true,
 //   selector: 'story-animation',
 //   imports: [JsonPipe],
 //   template: `

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/basic-overlay-example.component.ts

@@ -4,7 +4,6 @@
 // import { OverlayRef } from '../../../src/services/overlay-ref';
 
 // @Component({
-//   standalone: true,
 //   imports: [JsonPipe],
 //   template: `
 //     <p class="p-sm-regular-4">THIS IS A OVERLAY</p>

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/basic-overlay-story.component.ts

@@ -6,7 +6,6 @@
 // import { OverlayService } from '../../../src/services/overlay.service';
 
 // @Component({
-//   standalone: true,
 //   selector: 'story-basic',
 //   imports: [JsonPipe],
 //   template: ` <button class="story-button" (click)="onOpenClick()">Open Overlay</button> `,

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/connect-to-element-story.component.ts

@@ -6,7 +6,6 @@
 // import { OverlayService } from '../../../src/services/overlay.service';
 
 // @Component({
-//   standalone: true,
 //   selector: 'story-connect-to-element',
 //   imports: [JsonPipe],
 //   template: `

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/default-overlay-example.component.ts

@@ -4,7 +4,6 @@
 // import { OverlayRef } from '../../../src/services/overlay-ref';
 
 // @Component({
-//   standalone: true,
 //   imports: [JsonPipe],
 //   template: `
 //     <p class="p-sm-regular-4">THIS IS A OVERLAY</p>

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/default-overlay-story.component.ts

@@ -9,7 +9,6 @@
 // import { OverlayService } from '../../../src/services/overlay.service';
 
 // @Component({
-//   standalone: true,
 //   selector: 'story-default',
 //   imports: [JsonPipe, FormFieldComponent, InputComponent, ButtonComponent],
 //   template: `

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/size-overlay-example.component.ts

@@ -4,7 +4,6 @@
 // import { OverlayRef } from '../../../src/services/overlay-ref';
 
 // @Component({
-//   standalone: true,
 //   imports: [AsyncPipe],
 //   template: `
 //     <p class="p-sm-regular-4">Resize the textarea to change the overlay size</p>

apps/angular-kits-doc/stories/CDK/overlay/overlay/components-old/size-overlay-story.component.ts

@@ -4,7 +4,6 @@
 // import { OverlayService } from '../../../src/services/overlay.service';
 
 // @Component({
-//   standalone: true,
 //   selector: 'story-size',
 //   imports: [],
 //   template: `

apps/angular-kits-doc/stories/CDK/overlay/overlay/default/example-overlay-default-overlay.component.ts

@@ -6,7 +6,6 @@ import { FormFieldComponent, InputComponent } from '@cocokits/angular-form-field
 import { OverlayRef } from '@cocokits/angular-overlay';
 
 @Component({
-  standalone: true,
   imports: [JsonPipe, FormFieldComponent, InputComponent, ButtonComponent],
   templateUrl: './example-overlay-default-overlay.component.html',
   styleUrl: './example-overlay-default-overlay.component.scss',

apps/angular-kits-doc/stories/CDK/overlay/overlay/default/example-overlay-default.component.ts

@@ -8,7 +8,6 @@ import { OverlayAnimationType, OverlayService } from '@cocokits/angular-overlay'
 import { ExampleOverlayDefaultOverlayComponent } from './example-overlay-default-overlay.component';
 
 @Component({
-  standalone: true,
   selector: 'cck-overlay-default',
   imports: [JsonPipe, FormFieldComponent, InputComponent, ButtonComponent],
   templateUrl: './example-overlay-default.component.html',

apps/angular-kits-doc/stories/getting-started/utils/install.utils.tsx

@@ -117,7 +117,7 @@ export function getStep4CollectionModesTable(theme: ThemeChangeEvent) {
 
         {Object.entries(theme.tokenDictionary.collectionModeNames).map(([collection, modes]) =>
           modes.map((mode, index) => (
-            <tr>
+            <tr key={`${collection}-${mode.name}`}>
               {index === 0 && (
                 <td rowSpan={modes.length} className="collection-modes-selector-table__header-cell">
                   {collection}
@@ -156,7 +156,6 @@ import { ButtonComponent, CheckboxComponent } from '@cocokits/angular-components
 
 @Component({
     selector: 'hello',
-    standalone: true,
     imports: [ButtonComponent, CheckboxComponent],
     template: \`
       <button cck-button>Button</button>

apps/angular-kits-doc/stories/ui-components/accordion/accordion/overview/control.stories.ts

@@ -9,7 +9,6 @@ import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
 
 @Component({
   selector: 'cck-accordion-control',
-  standalone: true,
   imports: [AccordionComponent, AccordionHeaderComponent, AccordionPanelComponent],
   styles: [
     `

apps/angular-kits-doc/stories/ui-components/button/button/examples/add-new-button/_story.source.ts

@@ -17,7 +17,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-add-new-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/add-new-button/add-new-button.component.ts

@@ -6,7 +6,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/add-new-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-add-new-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/button/examples/back-button/_story.source.ts

@@ -16,7 +16,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-back-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/back-button/back-button.component.ts

@@ -5,7 +5,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/back-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-back-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/button/examples/copy-link-button/_story.source.ts

@@ -16,7 +16,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-copy-link-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/copy-link-button/copy-link-button.component.ts

@@ -5,7 +5,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/copy-link-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-copy-link-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/button/examples/delete-button/_story.source.ts

@@ -16,7 +16,6 @@ import { OutlineIcons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-delete-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/delete-button/delete-button.component.ts

@@ -5,7 +5,6 @@ import { OutlineIcons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/delete-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-delete-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/button/examples/show-more-button/_story.source.ts

@@ -16,7 +16,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-show-more-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/show-more-button/show-more-button.component.ts

@@ -5,7 +5,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/show-more-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-show-more-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/button/examples/stack-horizontal-button/_story.source.ts

@@ -15,7 +15,6 @@ import { ButtonComponent } from '@cocokits/angular-components';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-stack-horizontal-button',
   imports: [ButtonComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/stack-horizontal-button/stack-horizontal-button.component.ts

@@ -4,7 +4,6 @@ import { ButtonComponent } from '@cocokits/angular-components';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/stack-horizontal-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-stack-horizontal-button',
   imports: [ButtonComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/button/examples/stack-vertical-button/_story.source.ts

@@ -16,7 +16,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-stack-vertical-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/button/examples/stack-vertical-button/stack-vertical-button.component.ts

@@ -5,7 +5,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/button/stack-vertical-button.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-stack-vertical-button',
   imports: [ButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/icon-button/examples/mode-toggle/_story.source.ts

@@ -16,7 +16,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-mode-toggle',
   imports: [IconButtonComponent, SvgIconComponent],
   template: \` <button

apps/angular-kits-doc/stories/ui-components/button/icon-button/examples/mode-toggle/mode-toggle.component.ts

@@ -5,7 +5,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/icon-button/mode-toggle.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-mode-toggle',
   imports: [IconButtonComponent, SvgIconComponent],
   template: ` <button

apps/angular-kits-doc/stories/ui-components/button/icon-button/examples/social-buttons/_story.source.ts

@@ -17,7 +17,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-social-buttons',
   imports: [IconButtonComponent, SvgIconComponent],
   template: \`

apps/angular-kits-doc/stories/ui-components/button/icon-button/examples/social-buttons/social-buttons.component.ts

@@ -6,7 +6,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/icon-button/social-buttons.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-social-buttons',
   imports: [IconButtonComponent, SvgIconComponent],
   template: `

apps/angular-kits-doc/stories/ui-components/button/icon-button/examples/volume-button/_story.source.ts

@@ -78,7 +78,6 @@ const MAX_VOLUME = 4;
 const MIN_VOLUME = 0;
 
 @Component({
-  standalone: true,
   selector: 'cck-volume-button',
   imports: [IconButtonComponent, SvgIconComponent],
   templateUrl: './volume-button.component.html',

apps/angular-kits-doc/stories/ui-components/button/icon-button/examples/volume-button/volume-button.component.ts

@@ -8,7 +8,6 @@ const MAX_VOLUME = 4;
 const MIN_VOLUME = 0;
 
 @Component({
-  standalone: true,
   selector: 'cck-volume-button',
   imports: [IconButtonComponent, SvgIconComponent],
   templateUrl: './volume-button.component.html',

apps/angular-kits-doc/stories/ui-components/checkbox/checkbox/archive/indeterminate.stories.ts

@@ -81,7 +81,6 @@ import { moduleMetadata } from '@storybook/angular';
             }
 
             @Component({
-              standalone: true,
               imports: [CheckboxComponent],
               selector: 'app-example',
               templateUrl: './checkbox-indeterminate.component.html',

apps/angular-kits-doc/stories/ui-components/checkbox/checkbox/components/checkbox-indeterminate/checkbox-indeterminate.component.ts

@@ -9,7 +9,6 @@ interface Task {
 }
 
 @Component({
-  standalone: true,
   imports: [CheckboxComponent],
   templateUrl: './checkbox-indeterminate.component.html',
   styleUrls: ['./checkbox-indeterminate.component.scss'],

apps/angular-kits-doc/stories/ui-components/checkbox/checkbox/examples/checkbox-box-selection-info/_story.source.ts

@@ -58,7 +58,6 @@ import { Icons } from '@cocokits/common-icons';
 
 
 @Component({
-  standalone: true,
   selector: 'cck-checkbox-box-selection-info',
   imports: [CheckboxComponent, SvgIconComponent],
   templateUrl: './checkbox-box-selection-info.component.html',

apps/angular-kits-doc/stories/ui-components/checkbox/checkbox/examples/checkbox-box-selection-info/checkbox-box-selection-info.component.ts

@@ -5,7 +5,6 @@ import { Icons } from '@cocokits/common-icons';
 import { ExampleArgs } from '@cocokits/common-kits-doc/examples-config/checkbox/checkbox-box-selection-info.config';
 
 @Component({
-  standalone: true,
   selector: 'cck-checkbox-box-selection-info',
   imports: [CheckboxComponent, SvgIconComponent],
   templateUrl: './checkbox-box-selection-info.component.html',