refactor: update wc, react and dock-manager (#1322)

* chore: update wc, react and dock-manager * fix: use native form instead of removed igc-form
IgniteUI · Oct 10, 2024 · 76a7dba · 76a7dba
1 parent a9a05e2
commit 76a7dba
Show file tree

Hide file tree

Showing 15 changed files with 34 additions and 40 deletions.
diff --git a/packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts b/packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts
@@ -10,7 +10,7 @@ class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Bullet Graph";
 		this.description = `allows for a linear and concise view of measures compared against a scale.`;
-		this.packages = ["igniteui-react-gauges@~18.6.0"];
+		this.packages = ["igniteui-react-gauges@~18.7.0"];
 	}
 }
 module.exports = new IgrTsBulletGraphTemplate();
diff --git a/packages/cli/templates/react/igr-ts/category-chart/default/index.ts b/packages/cli/templates/react/igr-ts/category-chart/default/index.ts
@@ -11,7 +11,7 @@ class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate {
 		this.name = "Category Chart";
 		this.description = `makes visualizing category data easy. Simplifies the complexities
 							of the data visualization domain into manageable API`;
-		this.packages = ["igniteui-react-charts@~18.6.0"];
+		this.packages = ["igniteui-react-charts@~18.7.0"];
 	}
 }
 module.exports = new IgrTsCategoryChartTemplate();
diff --git a/packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts b/packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts
@@ -10,7 +10,7 @@ class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Doughnut Chart";
 		this.description = `proportionally illustrate the occurrences of variables.`;
-		this.packages = ["igniteui-react-charts@~18.6.0"];
+		this.packages = ["igniteui-react-charts@~18.7.0"];
 	}
 }
 module.exports = new IgrTsDoughnutChartTemplate();
diff --git a/packages/cli/templates/react/igr-ts/financial-chart/default/index.ts b/packages/cli/templates/react/igr-ts/financial-chart/default/index.ts
@@ -12,7 +12,7 @@ class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate {
 		this.name = "Financial Chart";
 		this.description = `charting component that makes it easy to visualize financial data by
 							using a simple and intuitive API.`;
-		this.packages = ["igniteui-react-charts@~18.6.0"];
+		this.packages = ["igniteui-react-charts@~18.7.0"];
 	}
 }
 module.exports = new IgrTsFinancialChartTemplate();
diff --git a/packages/cli/templates/react/igr-ts/grid/basic/index.ts b/packages/cli/templates/react/igr-ts/grid/basic/index.ts
@@ -14,8 +14,8 @@ class GridTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.components = ["Grid"];
 		this.controlGroup = "Data Grids";
-		this.packages = ["igniteui-react-grids@~18.6.0", "igniteui-react-inputs@~18.6.0",
-			"igniteui-react-layouts@~18.6.0", "igniteui-react@~18.6.0"];
+		this.packages = ["igniteui-react-grids@~18.7.0", "igniteui-react-inputs@~18.7.0",
+			"igniteui-react-layouts@~18.7.0", "igniteui-react@~18.7.0"];
 
 		this.hasExtraConfiguration = false;
 	}

diff --git a/packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts b/packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts
@@ -10,7 +10,7 @@ class IgrTsLinearGaugeTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Linear Gauge";
 		this.description = `value compared against a scale and one or more ranges.`;
-		this.packages = ["igniteui-react-gauges@~18.6.0"];
+		this.packages = ["igniteui-react-gauges@~18.7.0"];
 	}
 }
 module.exports = new IgrTsLinearGaugeTemplate();
diff --git a/packages/cli/templates/react/igr-ts/pie-chart/default/index.ts b/packages/cli/templates/react/igr-ts/pie-chart/default/index.ts
@@ -10,7 +10,7 @@ class IgrTsPieChartTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Pie Chart";
 		this.description = `easily illustate the proportions of data entries`;
-		this.packages = ["igniteui-react-charts@~18.6.0"];
+		this.packages = ["igniteui-react-charts@~18.7.0"];
 	}
 }
 module.exports = new IgrTsPieChartTemplate();
diff --git a/packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts b/packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts
@@ -12,7 +12,7 @@ class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate {
 		this.description = `provides a number of visual elements, like a needle, tick marks, ranges
 							and labels, in order to create a predefined shape and scale.`;
 		// TODO: read version from igniteui-react-core in package.json
-		this.packages = ["igniteui-react-gauges@~18.6.0"];
+		this.packages = ["igniteui-react-gauges@~18.7.0"];
 	}
 }
 module.exports = new IgrTsRadialGaugeTemplate();
diff --git a/...onents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts b/...onents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts
@@ -2,14 +2,12 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
   IgcButtonComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
-  IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
   IgcButtonComponent,
@@ -49,7 +47,7 @@ export default class $(ClassName) extends LitElement {
   render() {
     return html`
       <div class="container sample">
-        <igc-form id="form" @igcSubmit="${this.handleSubmit}">
+        <form id="form" @submit="${this.handleSubmit}">
           <div>Subscribe</div>
           <igc-input required name="name" type="text" label="Your Name"></igc-input>
           <igc-input required name="email" type="email" label="Your E-mail"></igc-input>
@@ -59,7 +57,7 @@ export default class $(ClassName) extends LitElement {
             <igc-button type="reset">Reset</igc-button>
             <igc-button type="submit">Submit</igc-button>
           </div>
-        </igc-form>
+        </form>
       </div>
     `;
   }

diff --git a/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/dock-manager/default/index.ts
@@ -10,7 +10,7 @@ class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate {
 		this.projectType = "igc-ts";
 		this.name = "Dock Manager";
 		this.description = "Dock Manager with most functionalities and docking options";
-		this.packages = ["igniteui-dockmanager@~1.12.4"];
+		this.packages = ["igniteui-dockmanager@~1.14.4"];
 	}
 }
 module.exports = new IgcDockManagerTemplate();
diff --git a/...templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts b/...templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import $(ClassName) from './$(path).js';
 
-describe('IgcFormComponent', () => {
+describe('Form', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {
     const element = document.createElement('app-$(path)');
     expect(element).to.be.instanceOf($(ClassName));

diff --git a/.../cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts b/.../cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts
@@ -2,12 +2,10 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcFormComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
-  IgcFormComponent,
   IgcRadioGroupComponent,
 );
 
@@ -23,19 +21,17 @@ export default class $(ClassName) extends LitElement {
 
   render() {
     return html`
-      <igc-form id="form" novalidate="true">
-        <label for="full-name">Full name:</label>
-        <input type="text" id="full-name" name="full-name" value="Your name" />
-        <label for="phone-number">Phone number:</label>
-        <input type="tel" id="phone-number" name="phone-number" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
+      <form id="form">
+        <igc-input label="Full name" type="text" id="full-name" name="full-name"></igc-input>
+        <igc-input label="Phone number" type="tel" id="phone-number" name="phone-number" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"></igc-input>
         <div>
-          <label for="gender">Gender:</label>
-          <igc-radio-group id="gender">
+        <label for="gender">Gender:</label>
+        <igc-radio-group id="gender">
             <igc-radio name="gender" value="Male">Male</igc-radio>
             <igc-radio name="gender" value="Female">Female</igc-radio>
           </igc-radio-group>
         </div>
-      </igc-form>
+      </form>
     `;
   }
 }
diff --git a/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts
@@ -9,7 +9,7 @@ class IgcFormTemplate extends IgniteUIForWebComponentsTemplate {
 		this.id = "form";
 		this.projectType = "igc-ts";
 		this.name = "Form";
-		this.description = "basic IgcForm";
+		this.description = "basic Form";
 	}
 }
 module.exports = new IgcFormTemplate();
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json
@@ -21,9 +21,9 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "lit": "^3.1.2",
-    "typescript": "^5.3.3",
-    "igniteui-webcomponents": "~4.11.0"
+    "lit": "^3.2.0",
+    "typescript": "^5.6.2",
+    "igniteui-webcomponents": "~5.0.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",

diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json
@@ -22,16 +22,16 @@
   "dependencies": {
     "@vaadin/router": "^1.7.4",
     "@igniteui/material-icons-extended": "^3.0.2",
-    "igniteui-dockmanager": "~1.14.3",
-    "igniteui-webcomponents": "~4.11.0",
-    "igniteui-webcomponents-charts": "~4.8.0",
-    "igniteui-webcomponents-core": "~4.8.0",
-    "igniteui-webcomponents-gauges": "~4.8.0",
-    "igniteui-webcomponents-grids": "~4.8.0",
-    "igniteui-webcomponents-inputs": "~4.8.0",
-    "igniteui-webcomponents-layouts": "~4.8.0",
-    "lit": "^3.1.2",
-    "typescript": "^5.3.3"
+    "igniteui-dockmanager": "~1.14.4",
+    "igniteui-webcomponents": "~5.0.0",
+    "igniteui-webcomponents-charts": "~5.0.0",
+    "igniteui-webcomponents-core": "~5.0.0",
+    "igniteui-webcomponents-gauges": "~5.0.0",
+    "igniteui-webcomponents-grids": "~5.0.0",
+    "igniteui-webcomponents-inputs": "~5.0.0",
+    "igniteui-webcomponents-layouts": "~5.0.0",
+    "lit": "^3.2.0",
+    "typescript": "^5.6.2"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
@@ -50,7 +50,7 @@
     "deepmerge": "^4.2.2",
     "eslint": "^8.57.0",
     "eslint-plugin-lit": "^1.8.2",
-    "igniteui-cli": "^13.1.5",
+    "igniteui-cli": "^14.0.0",
     "rimraf": "^5.0.5",
     "rollup": "^2.79.0",
     "rollup-plugin-copy-assets": "^2.0.3",