vk-typescript-cli 1.0.0

package/src/templates/react/Grid.jsx

@@ -0,0 +1,45 @@
+import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Inject, Toolbar, Filter, Edit } from '@syncfusion/ej2-react-grids';
+
+export default function Grid() {
+  const data = [
+    { 'OrderID': 10248, 'CustomerName': 'Maria ', 'OrderDate': new Date('1996-07-04'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 32.38, 'ShipCountry': 'France' },
+    { 'OrderID': 10249, 'CustomerName': 'Ana Trujillo', 'OrderDate': new Date('1996-07-05'), 'ShippedDate': new Date('1996-07-10'), 'Freight': 11.61, 'ShipCountry': 'Germany' },
+    { 'OrderID': 10250, 'CustomerName': 'Antonio Moreno', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-12'), 'Freight': 65.83, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10251, 'CustomerName': 'Thomas Hardy', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 41.34, 'ShipCountry': 'France' },
+    { 'OrderID': 10252, 'CustomerName': 'Christina Berglund', 'OrderDate': new Date('1996-07-09'), 'ShippedDate': new Date('1996-07-11'), 'Freight': 51.3, 'ShipCountry': 'Belgium' },
+    { 'OrderID': 10253, 'CustomerName': 'Hanna Moos', 'OrderDate': new Date('1996-07-10'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 58.17, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10254, 'CustomerName': 'Frédérique Citeaux', 'OrderDate': new Date('1996-07-11'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 22.98, 'ShipCountry': 'Switzerland' },
+    { 'OrderID': 10255, 'CustomerName': 'Martín Sommer', 'OrderDate': new Date('1996-07-12'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 148.33, 'ShipCountry': 'Switzerland' },
+    { 'OrderID': 10256, 'CustomerName': 'Laurence Lebihan', 'OrderDate': new Date('1996-07-15'), 'ShippedDate': new Date('1996-07-17'), 'Freight': 13.97, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10257, 'CustomerName': 'Elizabeth Lincoln', 'OrderDate': new Date('1996-07-16'), 'ShippedDate': new Date('1996-07-22'), 'Freight': 81.91, 'ShipCountry': 'Venezuela' },
+    { 'OrderID': 10258, 'CustomerName': 'Victoria Ashworth', 'OrderDate': new Date('1996-07-17'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 140.51, 'ShipCountry': 'Austria' },
+    { 'OrderID': 10259, 'CustomerName': 'Patricio Simpson', 'OrderDate': new Date('1996-07-18'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 3.25, 'ShipCountry': 'Mexico' },
+    { 'OrderID': 10260, 'CustomerName': 'Francisco Chang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-29'), 'Freight': 55.09, 'ShipCountry': 'Germany' },
+    { 'OrderID': 10261, 'CustomerName': 'Yang Wang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-30'), 'Freight': 3.05, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10262, 'CustomerName': 'Pedro Afonso', 'OrderDate': new Date('1996-07-22'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 48.29, 'ShipCountry': 'USA' }
+  ];
+  const filterSettings = { type: 'Excel' };
+  const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+  const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
+  const customeridRule = { required: true, minLength: 5 };
+  const orderidRules = { required: true, number: true };
+  const freightRules = { required: true, min: 0 };
+
+  return (
+    <div className='control-pane' style={{ margin: '50px 90px' }}>
+      <div className='control-section'>
+        <GridComponent dataSource={data} height='350' allowSorting={true} editSettings={editSettings} allowFiltering={true} filterSettings={filterSettings} toolbar={toolbar}>
+          <ColumnsDirective>
+            <ColumnDirective field='OrderID' headerText='Order ID' width='180' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>
+            <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={customeridRule}></ColumnDirective>
+            <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit' />
+            <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' validationRules={freightRules} editType='numericedit' />
+            <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
+            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></ColumnDirective>
+          </ColumnsDirective>
+          <Inject services={[Sort, Toolbar, Filter, Edit]} />
+        </GridComponent>
+      </div>
+    </div>
+  )
+}

package/src/templates/react/Grid.tsx

@@ -0,0 +1,45 @@
+import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Inject, Toolbar, type ToolbarItems, type FilterSettingsModel, type EditSettingsModel, Filter, Edit } from '@syncfusion/ej2-react-grids';
+
+export default function Grid() {
+ const data: Object[] = [
+    { 'OrderID': 10248, 'CustomerName': 'Maria ', 'OrderDate': new Date('1996-07-04'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 32.38, 'ShipCountry': 'France' },
+    { 'OrderID': 10249, 'CustomerName': 'Ana Trujillo', 'OrderDate': new Date('1996-07-05'), 'ShippedDate': new Date('1996-07-10'), 'Freight': 11.61, 'ShipCountry': 'Germany' },
+    { 'OrderID': 10250, 'CustomerName': 'Antonio Moreno', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-12'), 'Freight': 65.83, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10251, 'CustomerName': 'Thomas Hardy', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 41.34, 'ShipCountry': 'France' },
+    { 'OrderID': 10252, 'CustomerName': 'Christina Berglund', 'OrderDate': new Date('1996-07-09'), 'ShippedDate': new Date('1996-07-11'), 'Freight': 51.3, 'ShipCountry': 'Belgium' },
+    { 'OrderID': 10253, 'CustomerName': 'Hanna Moos', 'OrderDate': new Date('1996-07-10'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 58.17, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10254, 'CustomerName': 'Frédérique Citeaux', 'OrderDate': new Date('1996-07-11'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 22.98, 'ShipCountry': 'Switzerland' },
+    { 'OrderID': 10255, 'CustomerName': 'Martín Sommer', 'OrderDate': new Date('1996-07-12'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 148.33, 'ShipCountry': 'Switzerland' },
+    { 'OrderID': 10256, 'CustomerName': 'Laurence Lebihan', 'OrderDate': new Date('1996-07-15'), 'ShippedDate': new Date('1996-07-17'), 'Freight': 13.97, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10257, 'CustomerName': 'Elizabeth Lincoln', 'OrderDate': new Date('1996-07-16'), 'ShippedDate': new Date('1996-07-22'), 'Freight': 81.91, 'ShipCountry': 'Venezuela' },
+    { 'OrderID': 10258, 'CustomerName': 'Victoria Ashworth', 'OrderDate': new Date('1996-07-17'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 140.51, 'ShipCountry': 'Austria' },
+    { 'OrderID': 10259, 'CustomerName': 'Patricio Simpson', 'OrderDate': new Date('1996-07-18'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 3.25, 'ShipCountry': 'Mexico' },
+    { 'OrderID': 10260, 'CustomerName': 'Francisco Chang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-29'), 'Freight': 55.09, 'ShipCountry': 'Germany' },
+    { 'OrderID': 10261, 'CustomerName': 'Yang Wang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-30'), 'Freight': 3.05, 'ShipCountry': 'Brazil' },
+    { 'OrderID': 10262, 'CustomerName': 'Pedro Afonso', 'OrderDate': new Date('1996-07-22'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 48.29, 'ShipCountry': 'USA' }
+  ];
+  const filterSettings: FilterSettingsModel = { type: 'Excel' };
+  const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
+  const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
+  const customeridRule: Object = { required: true, minLength: 5 };
+  const orderidRules: Object = { required: true, number: true };
+  const freightRules: Object = { required: true, min: 0 };
+
+  return (
+    <div className='control-pane' style={{ margin: '50px 90px' }}>
+      <div className='control-section'>
+        <GridComponent dataSource={data} height='350' allowSorting={true} editSettings={editSettings} allowFiltering={true} filterSettings={filterSettings} toolbar={toolbar}>
+          <ColumnsDirective>
+            <ColumnDirective field='OrderID' headerText='Order ID' width='180' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>
+            <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={customeridRule}></ColumnDirective>
+            <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit' />
+            <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' validationRules={freightRules} editType='numericedit' />
+            <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
+            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></ColumnDirective>
+          </ColumnsDirective>
+          <Inject services={[Sort, Toolbar, Filter, Edit]} />
+        </GridComponent>
+      </div>
+    </div>
+  )
+}

package/src/templates/react/PDFViewer.jsx

@@ -0,0 +1,16 @@
+import {
+    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+    ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer,Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewer () {
+    let viewer;
+    return (<div>
+        <div className='component-section' style={{ padding: '50px', margin: '0 auto'}}>
+            <PdfViewerComponent ref={(scope) => { viewer = scope; }} id="container" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" resourceUrl = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" style={{ 'height': '640px' }}>
+                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]} />
+            </PdfViewerComponent>
+        </div>
+    </div>
+    );
+}

package/src/templates/react/PDFViewer.tsx

@@ -0,0 +1,16 @@
+import {
+    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
+    ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer,Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewer () {
+    let viewer: PdfViewerComponent;
+    return (<div>
+        <div className='component-section' style={{ padding: '50px', margin: '0 auto'}}>
+            <PdfViewerComponent ref={(scope: PdfViewerComponent) => { viewer = scope; }} id="container" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" resourceUrl = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" style={{ 'height': '640px' }}>
+                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]} />
+            </PdfViewerComponent>
+        </div>
+    </div>
+    );
+}

package/src/templates/react/RTE.jsx

@@ -0,0 +1,14 @@
+import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';
+
+export default function RTE() {
+  let rteObj;
+
+  return (
+    <div className="control-section" style={{padding: "70px", margin: "0 auto" }}>
+      <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor }} >
+      <h2>Welcome to the Rich Text Editor Demo!</h2><p>The Rich Text Editor control is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><h4>Flexible Editing!</h4><p>For a better editing experience, the Angular Rich Text Editor component offers a variety of tools and choices. So, you can quickly insert <strong>images</strong>, <strong>videos</strong>, <strong>hyperlinks</strong>, and <strong>tables</strong>; <strong>merge table cells</strong>; and configure.</p><p>You can easily format the text and paragraphs by setting the editor’s foreground and <strong>background colors</strong>, <strong>font type</strong>, <strong>italicization</strong>, <strong>adding ordered </strong>and <strong>unordered custom lists</strong>, <strong>underlining</strong>, <strong>strikethrough</strong>, and <strong>bolding</strong>.<br/><br/></p><p><img alt="Editor Features Overview" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="400" height="200" className="e-img-left"/></p>
+      <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat]} />
+      </RichTextEditorComponent>
+    </div>
+  );
+}

package/src/templates/react/RTE.tsx

@@ -0,0 +1,14 @@
+import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';
+
+export default function RTE() {
+  let rteObj: RichTextEditorComponent;
+
+  return (
+    <div className="control-section" style={{padding: "70px", margin: "0 auto" }}>
+      <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor: RichTextEditorComponent) => { rteObj = richtexteditor }} >
+      <h2>Welcome to the Rich Text Editor Demo!</h2><p>The Rich Text Editor control is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><h4>Flexible Editing!</h4><p>For a better editing experience, the Angular Rich Text Editor component offers a variety of tools and choices. So, you can quickly insert <strong>images</strong>, <strong>videos</strong>, <strong>hyperlinks</strong>, and <strong>tables</strong>; <strong>merge table cells</strong>; and configure.</p><p>You can easily format the text and paragraphs by setting the editor’s foreground and <strong>background colors</strong>, <strong>font type</strong>, <strong>italicization</strong>, <strong>adding ordered </strong>and <strong>unordered custom lists</strong>, <strong>underlining</strong>, <strong>strikethrough</strong>, and <strong>bolding</strong>.<br/><br/></p><p><img alt="Editor Features Overview" src="https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png" width="400" height="200" className="e-img-left"/></p>
+      <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar, Table, Video, Audio, PasteCleanup, ClipBoardCleanup, AutoFormat]} />
+      </RichTextEditorComponent>
+    </div>
+  );
+}

package/src/templates/react/Scheduler.jsx

@@ -0,0 +1,55 @@
+import { useRef } from 'react';
+import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
+import { extend } from '@syncfusion/ej2-base';
+
+export default function Scheduler() {
+  const scheduleObj = useRef(null);
+  const dataSource = [
+    { "Id": 1, "Subject": "Explosion of Betelgeuse Star", "Location": "Space Center USA", "StartTime": "2021-01-10T04:00:00.000Z", "EndTime": "2021-01-10T05:30:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 2, "Subject": "Thule Air Crash Report", "Location": "Newyork City", "StartTime": "2021-01-11T06:30:00.000Z", "EndTime": "2021-01-11T08:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 3, "Subject": "Blue Moon Eclipse", "Location": "Space Center USA", "StartTime": "2021-01-12T04:00:00.000Z", "EndTime": "2021-01-12T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 4, "Subject": "Meteor Showers in 2021", "Location": "Space Center USA", "StartTime": "2021-01-13T07:30:00.000Z", "EndTime": "2021-01-13T09:00:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 5, "Subject": "Milky Way as Melting pot", "Location": "Space Center USA", "StartTime": "2021-01-14T06:30:00.000Z", "EndTime": "2021-01-14T08:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 6, "Subject": "Mysteries of Bermuda Triangle", "Location": "Bermuda", "StartTime": "2021-01-14T04:00:00.000Z", "EndTime": "2021-01-14T05:30:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 7, "Subject": "Glaciers and Snowflakes", "Location": "Himalayas", "StartTime": "2021-01-15T05:30:00.000Z", "EndTime": "2021-01-15T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 8, "Subject": "Life on Mars", "Location": "Space Center USA", "StartTime": "2021-01-16T03:30:00.000Z", "EndTime": "2021-01-16T04:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 9, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-18T05:30:00.000Z", "EndTime": "2021-01-18T07:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 10, "Subject": "Wildlife Galleries", "Location": "Africa", "StartTime": "2021-01-20T05:30:00.000Z", "EndTime": "2021-01-20T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 11, "Subject": "Best Photography 2021", "Location": "London", "StartTime": "2021-01-21T04:00:00.000Z", "EndTime": "2021-01-21T05:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 12, "Subject": "Smarter Puppies", "Location": "Sweden", "StartTime": "2021-01-08T04:30:00.000Z", "EndTime": "2021-01-08T06:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 13, "Subject": "Myths of Andromeda Galaxy", "Location": "Space Center USA", "StartTime": "2021-01-06T05:00:00.000Z", "EndTime": "2021-01-06T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 14, "Subject": "Aliens vs Humans", "Location": "Research Center of USA", "StartTime": "2021-01-05T04:30:00.000Z", "EndTime": "2021-01-05T06:00:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 15, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-19T04:00:00.000Z", "EndTime": "2021-01-19T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 16, "Subject": "Sky Gazers", "Location": "Alaska", "StartTime": "2021-01-22T05:30:00.000Z", "EndTime": "2021-01-22T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 17, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-11T00:00:00.000Z", "EndTime": "2021-01-11T02:00:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 18, "Subject": "Space Galaxies and Planets", "Location": "Space Center USA", "StartTime": "2021-01-11T11:30:00.000Z", "EndTime": "2021-01-11T13:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 19, "Subject": "Lifecycle of Bumblebee", "Location": "San Fransisco", "StartTime": "2021-01-14T00:30:00.000Z", "EndTime": "2021-01-14T02:00:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 20, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-14T10:30:00.000Z", "EndTime": "2021-01-14T12:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 21, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-10T08:30:00.000Z", "EndTime": "2021-01-10T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 22, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-12T09:00:00.000Z", "EndTime": "2021-01-12T10:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 23, "Subject": "Sky Gazers", "Location": "Greenland", "StartTime": "2021-01-15T09:00:00.000Z", "EndTime": "2021-01-15T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 24, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-16T07:00:00.000Z", "EndTime": "2021-01-16T09:00:00.000Z", "CategoryColor": "#7fa900" }
+  ];
+  const data = extend([], dataSource, undefined, true);
+
+  const onDragStart = (args) => {
+    if (args.navigation) {
+      args.navigation.enable = true;
+    }
+  }
+
+  return (
+    <div className='schedulee-section' style={{ padding: '50px', margin: '0 auto'}}>
+      <ScheduleComponent height='650px' ref={scheduleObj} selectedDate={new Date(2021, 0, 10)} eventSettings={{ dataSource: data }} dragStart={(onDragStart)}>
+        <ViewsDirective>
+          <ViewDirective option='Day' />
+          <ViewDirective option='Week' />
+          <ViewDirective option='WorkWeek' />
+          <ViewDirective option='Month' />
+          <ViewDirective option='Agenda' />
+        </ViewsDirective>
+        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
+      </ScheduleComponent>
+    </div>
+  );
+}

package/src/templates/react/Scheduler.tsx

@@ -0,0 +1,55 @@
+import { useRef } from 'react';
+import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop, type DragEventArgs } from '@syncfusion/ej2-react-schedule';
+import { extend } from '@syncfusion/ej2-base';
+
+export default function Scheduler() {
+  const scheduleObj = useRef<ScheduleComponent>(null);
+  const dataSource: Object[] = [
+    { "Id": 1, "Subject": "Explosion of Betelgeuse Star", "Location": "Space Center USA", "StartTime": "2021-01-10T04:00:00.000Z", "EndTime": "2021-01-10T05:30:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 2, "Subject": "Thule Air Crash Report", "Location": "Newyork City", "StartTime": "2021-01-11T06:30:00.000Z", "EndTime": "2021-01-11T08:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 3, "Subject": "Blue Moon Eclipse", "Location": "Space Center USA", "StartTime": "2021-01-12T04:00:00.000Z", "EndTime": "2021-01-12T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 4, "Subject": "Meteor Showers in 2021", "Location": "Space Center USA", "StartTime": "2021-01-13T07:30:00.000Z", "EndTime": "2021-01-13T09:00:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 5, "Subject": "Milky Way as Melting pot", "Location": "Space Center USA", "StartTime": "2021-01-14T06:30:00.000Z", "EndTime": "2021-01-14T08:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 6, "Subject": "Mysteries of Bermuda Triangle", "Location": "Bermuda", "StartTime": "2021-01-14T04:00:00.000Z", "EndTime": "2021-01-14T05:30:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 7, "Subject": "Glaciers and Snowflakes", "Location": "Himalayas", "StartTime": "2021-01-15T05:30:00.000Z", "EndTime": "2021-01-15T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 8, "Subject": "Life on Mars", "Location": "Space Center USA", "StartTime": "2021-01-16T03:30:00.000Z", "EndTime": "2021-01-16T04:30:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 9, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-18T05:30:00.000Z", "EndTime": "2021-01-18T07:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 10, "Subject": "Wildlife Galleries", "Location": "Africa", "StartTime": "2021-01-20T05:30:00.000Z", "EndTime": "2021-01-20T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 11, "Subject": "Best Photography 2021", "Location": "London", "StartTime": "2021-01-21T04:00:00.000Z", "EndTime": "2021-01-21T05:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 12, "Subject": "Smarter Puppies", "Location": "Sweden", "StartTime": "2021-01-08T04:30:00.000Z", "EndTime": "2021-01-08T06:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 13, "Subject": "Myths of Andromeda Galaxy", "Location": "Space Center USA", "StartTime": "2021-01-06T05:00:00.000Z", "EndTime": "2021-01-06T07:00:00.000Z", "CategoryColor": "#1aaa55" },
+    { "Id": 14, "Subject": "Aliens vs Humans", "Location": "Research Center of USA", "StartTime": "2021-01-05T04:30:00.000Z", "EndTime": "2021-01-05T06:00:00.000Z", "CategoryColor": "#357cd2" },
+    { "Id": 15, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-19T04:00:00.000Z", "EndTime": "2021-01-19T05:30:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 16, "Subject": "Sky Gazers", "Location": "Alaska", "StartTime": "2021-01-22T05:30:00.000Z", "EndTime": "2021-01-22T07:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 17, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-11T00:00:00.000Z", "EndTime": "2021-01-11T02:00:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 18, "Subject": "Space Galaxies and Planets", "Location": "Space Center USA", "StartTime": "2021-01-11T11:30:00.000Z", "EndTime": "2021-01-11T13:00:00.000Z", "CategoryColor": "#f57f17" },
+    { "Id": 19, "Subject": "Lifecycle of Bumblebee", "Location": "San Fransisco", "StartTime": "2021-01-14T00:30:00.000Z", "EndTime": "2021-01-14T02:00:00.000Z", "CategoryColor": "#7fa900" },
+    { "Id": 20, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-14T10:30:00.000Z", "EndTime": "2021-01-14T12:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 21, "Subject": "Alien Civilization", "Location": "Space Center USA", "StartTime": "2021-01-10T08:30:00.000Z", "EndTime": "2021-01-10T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 22, "Subject": "The Cycle of Seasons", "Location": "Research Center of USA", "StartTime": "2021-01-12T09:00:00.000Z", "EndTime": "2021-01-12T10:30:00.000Z", "CategoryColor": "#00bdae" },
+    { "Id": 23, "Subject": "Sky Gazers", "Location": "Greenland", "StartTime": "2021-01-15T09:00:00.000Z", "EndTime": "2021-01-15T10:30:00.000Z", "CategoryColor": "#ea7a57" },
+    { "Id": 24, "Subject": "Facts of Humming Birds", "Location": "California", "StartTime": "2021-01-16T07:00:00.000Z", "EndTime": "2021-01-16T09:00:00.000Z", "CategoryColor": "#7fa900" }
+  ];
+  const data: Record<string, any>[] = extend([], dataSource, undefined, true) as Record<string, any>[];
+
+  const onDragStart = (args: DragEventArgs): void => {
+    if (args.navigation) {
+      args.navigation.enable = true;
+    }
+  }
+
+  return (
+    <div className='schedulee-section' style={{ padding: '50px', margin: '0 auto'}}>
+      <ScheduleComponent height='650px' ref={scheduleObj} selectedDate={new Date(2021, 0, 10)} eventSettings={{ dataSource: data }} dragStart={(onDragStart)}>
+        <ViewsDirective>
+          <ViewDirective option='Day' />
+          <ViewDirective option='Week' />
+          <ViewDirective option='WorkWeek' />
+          <ViewDirective option='Month' />
+          <ViewDirective option='Agenda' />
+        </ViewsDirective>
+        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
+      </ScheduleComponent>
+    </div>
+  );
+}

package/src/templates/react/SpreadsheetEditor.jsx

@@ -0,0 +1,96 @@
+import {
+    SpreadsheetComponent,
+    SheetsDirective,
+    SheetDirective,
+    RangesDirective,
+    RangeDirective,
+    RowsDirective,
+    RowDirective,
+    CellsDirective,
+    CellDirective,
+    ColumnsDirective,
+    ColumnDirective
+} from '@syncfusion/ej2-react-spreadsheet';
+
+
+export default function SpreadsheetEditor() {
+    const defaultData = [
+        { "Customer Name": "Romona Heaslip", "Model": "Taurus", "Color": "Aquamarine", "Payment Mode": "Debit Card", "Delivery Date": "07-11-2015", "Amount": "8529.22" },
+        { "Customer Name": "Clare Batterton", "Model": "Sparrow", "Color": "Pink", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-13-2016", "Amount": "17866.19" },
+        { "Customer Name": "Eamon Traise", "Model": "Grand Cherokee", "Color": "Blue", "Payment Mode": "Net Banking", "Delivery Date": "09-04-2015", "Amount": "13853.09" },
+        { "Customer Name": "Julius Gorner", "Model": "GTO", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-15-2017", "Amount": "2338.74" },
+        { "Customer Name": "Jenna Schoolfield", "Model": "LX", "Color": "Yellow", "Payment Mode": "Credit Card", "Delivery Date": "10-08-2014", "Amount": "9578.45" },
+        { "Customer Name": "Marylynne Harring", "Model": "Catera", "Color": "Green", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-01-2017", "Amount": "19141.62" },
+        { "Customer Name": "Vilhelmina Leipelt", "Model": "7 Series", "Color": "Goldenrod", "Payment Mode": "Credit Card", "Delivery Date": "12-20-2015", "Amount": "6543.30" },
+        { "Customer Name": "Barby Heisler", "Model": "Corvette", "Color": "Red", "Payment Mode": "Credit Card", "Delivery Date": "11-24-2014", "Amount": "13035.06" },
+        { "Customer Name": "Karyn Boik", "Model": "Regal", "Color": "Indigo", "Payment Mode": "Debit Card", "Delivery Date": "05-12-2014", "Amount": "18488.80" },
+        { "Customer Name": "Jeanette Pamplin", "Model": "S4", "Color": "Fuscia", "Payment Mode": "Net Banking", "Delivery Date": "12-30-2014", "Amount": "12317.04" },
+        { "Customer Name": "Cristi Espinos", "Model": "TL", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-18-2013", "Amount": "6230.13" }
+    ];
+    let spreadsheet = null;
+    const boldRight = {
+        fontWeight: 'bold',
+        textAlign: 'right'
+    };
+    const bold = {
+        fontWeight: 'bold'
+    };
+    const onCreated = () => {
+        if (spreadsheet) {
+            spreadsheet.cellFormat(
+                {
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    verticalAlign: 'middle'
+                },
+                'A1:F1'
+            );
+            spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
+            spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');
+        }
+    };
+
+    return (
+        <div className="control-pane" style={{ padding: '50px', margin: '0 auto' }}>
+            <SpreadsheetComponent
+                openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
+                saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
+                ref={(ssObj) => {
+                    spreadsheet = ssObj;
+                }}
+                created={onCreated}
+            >
+                <SheetsDirective>
+                    <SheetDirective name="Car Sales Report">
+                        <RangesDirective>
+                            <RangeDirective dataSource={defaultData} />
+                        </RangesDirective>
+                        <RowsDirective>
+                            <RowDirective index={12}>
+                                <CellsDirective>
+                                    <CellDirective
+                                        index={4}
+                                        value="Total Amount:"
+                                        style={boldRight}
+                                    />
+                                    <CellDirective
+                                        formula="=SUM(F2:F12)"
+                                        style={bold}
+                                    />
+                                </CellsDirective>
+                            </RowDirective>
+                        </RowsDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={180} />
+                            <ColumnDirective width={130} />
+                            <ColumnDirective width={130} />
+                            <ColumnDirective width={180} />
+                            <ColumnDirective width={130} />
+                            <ColumnDirective width={120} />
+                        </ColumnsDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+}

package/src/templates/react/SpreadsheetEditor.tsx

@@ -0,0 +1,98 @@
+import {
+    SpreadsheetComponent,
+    SheetsDirective,
+    SheetDirective,
+    RangesDirective,
+    RangeDirective,
+    RowsDirective,
+    RowDirective,
+    CellsDirective,
+    CellDirective,
+    ColumnsDirective,
+    ColumnDirective,
+    type CellStyleModel
+} from '@syncfusion/ej2-react-spreadsheet';
+
+
+export default function SpreadsheetEditor() {
+    const defaultData = [
+        { "Customer Name": "Romona Heaslip", "Model": "Taurus", "Color": "Aquamarine", "Payment Mode": "Debit Card", "Delivery Date": "07-11-2015", "Amount": "8529.22" },
+        { "Customer Name": "Clare Batterton", "Model": "Sparrow", "Color": "Pink", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-13-2016", "Amount": "17866.19" },
+        { "Customer Name": "Eamon Traise", "Model": "Grand Cherokee", "Color": "Blue", "Payment Mode": "Net Banking", "Delivery Date": "09-04-2015", "Amount": "13853.09" },
+        { "Customer Name": "Julius Gorner", "Model": "GTO", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-15-2017", "Amount": "2338.74" },
+        { "Customer Name": "Jenna Schoolfield", "Model": "LX", "Color": "Yellow", "Payment Mode": "Credit Card", "Delivery Date": "10-08-2014", "Amount": "9578.45" },
+        { "Customer Name": "Marylynne Harring", "Model": "Catera", "Color": "Green", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-01-2017", "Amount": "19141.62" },
+        { "Customer Name": "Vilhelmina Leipelt", "Model": "7 Series", "Color": "Goldenrod", "Payment Mode": "Credit Card", "Delivery Date": "12-20-2015", "Amount": "6543.30" },
+        { "Customer Name": "Barby Heisler", "Model": "Corvette", "Color": "Red", "Payment Mode": "Credit Card", "Delivery Date": "11-24-2014", "Amount": "13035.06" },
+        { "Customer Name": "Karyn Boik", "Model": "Regal", "Color": "Indigo", "Payment Mode": "Debit Card", "Delivery Date": "05-12-2014", "Amount": "18488.80" },
+        { "Customer Name": "Jeanette Pamplin", "Model": "S4", "Color": "Fuscia", "Payment Mode": "Net Banking", "Delivery Date": "12-30-2014", "Amount": "12317.04" },
+        { "Customer Name": "Cristi Espinos", "Model": "TL", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-18-2013", "Amount": "6230.13" }
+    ];
+    let spreadsheet: SpreadsheetComponent | null = null;
+    const boldRight: CellStyleModel = {
+        fontWeight: 'bold',
+        textAlign: 'right'
+    };
+    const bold: CellStyleModel = {
+        fontWeight: 'bold'
+    };
+    const onCreated = (): void => {
+        if (spreadsheet) {
+            spreadsheet.cellFormat(
+                {
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    verticalAlign: 'middle'
+                },
+                'A1:F1'
+            );
+            spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
+            spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');
+        }
+    };
+
+    return (
+        <div className="control-pane" style={{ padding: '50px', margin: '0 auto' }}>
+            <SpreadsheetComponent
+                openUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"
+                saveUrl="https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save"
+                ref={(ssObj: SpreadsheetComponent) => {
+                    spreadsheet = ssObj;
+                }}
+                created={onCreated}
+            >
+                <SheetsDirective>
+                    <SheetDirective name="Car Sales Report">
+                        <RangesDirective>
+                            <RangeDirective dataSource={defaultData} />
+                        </RangesDirective>
+
+                        <RowsDirective>
+                            <RowDirective index={12}>
+                                <CellsDirective>
+                                    <CellDirective
+                                        index={4}
+                                        value="Total Amount:"
+                                        style={boldRight}
+                                    />
+                                    <CellDirective
+                                        formula="=SUM(F2:F12)"
+                                        style={bold}
+                                    />
+                                </CellsDirective>
+                            </RowDirective>
+                        </RowsDirective>
+                        <ColumnsDirective>
+                            <ColumnDirective width={180} />
+                            <ColumnDirective width={130} />
+                            <ColumnDirective width={130} />
+                            <ColumnDirective width={180} />
+                            <ColumnDirective width={130} />
+                            <ColumnDirective width={120} />
+                        </ColumnsDirective>
+                    </SheetDirective>
+                </SheetsDirective>
+            </SpreadsheetComponent>
+        </div>
+    );
+}

package/src/templates/rte-template.js

@@ -0,0 +1,26 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateRteTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `RTE${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const rteDir = path.join(componentsDir, 'rich-text-editor');
+    await copyTemplateFiles(
+      'angular',
+      ['rte.component.ts', 'rte.component.html'],
+      '',
+      rteDir
+    );
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'RTE.vue', componentsDir);
+
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'RTEView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'RTE.ts', componentsDir);
+  }
+}

package/src/templates/scheduler-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateSchedulerTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `Scheduler${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const schedulerDir = path.join(componentsDir, 'scheduler');
+    await copyTemplateFiles('angular', ['scheduler.component.ts', 'scheduler.component.html'], '', schedulerDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'Scheduler.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'SchedulerView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'Scheduler.ts', componentsDir);
+  }
+}

package/src/templates/spreadheet-template.js

@@ -0,0 +1,20 @@
+import path from 'node:path';
+import { copyTemplateFile, copyTemplateFiles } from '../utils/template-file.js';
+
+export async function generateSpreadsheetTemplate(appPath, framework, isTypeScript = false) {
+  const componentsDir = path.join(appPath, 'src', 'components');
+
+  if (framework === 'react') {
+    const ext = isTypeScript ? '.tsx' : '.jsx';
+    await copyTemplateFile('react', `SpreadsheetEditor${ext}`, componentsDir);
+  } else if (framework === 'angular') {
+    const spreadsheetDir = path.join(componentsDir, 'spreadsheet-editor');
+    await copyTemplateFiles('angular', ['spreadsheet-editor.component.ts', 'spreadsheet-editor.component.html'], '', spreadsheetDir);
+  } else if (framework === 'vue') {
+    await copyTemplateFile('vue', 'SpreadsheetEditor.vue', componentsDir);
+    const viewsDir = path.join(componentsDir, '..', 'views');
+    await copyTemplateFile('vue', 'SpreadsheetEditorView.vue', viewsDir);
+  } else if (framework === 'typescript') {
+    await copyTemplateFile('typescript', 'SpreadsheetEditor.ts', componentsDir);
+  }
+}

package/src/templates/typescript/RTE.ts

@@ -0,0 +1,33 @@
+import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Count, Table, MarkdownEditor } from '@syncfusion/ej2-richtexteditor';
+
+// Default content for the Rich Text Editor.
+const defaultContent: string = `
+    <p>The Rich Text Editor component is a WYSIWYG editor that provides the best user experience to create and update content.
+    Users can use this component to format and display text, images, links, and more in a rich and visually appealing way.</p>
+    <p><b>Features:</b></p>
+    <ul>
+        <li>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</li>
+        <li>Capable of handling markdown editing</li>
+        <li>Contains a modular library to load the necessary functionality on demand</li>
+        <li>Provides a fully customizable toolbar</li>
+        <li>Provides HTML view to edit the source directly for developers</li>
+        <li>Supports third-party library integration</li>
+    </ul>
+`;
+
+let rte: RichTextEditor = new RichTextEditor({
+    height: 400,
+    value: defaultContent,
+    toolbarSettings: {
+        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
+            'LowerCase', 'UpperCase', '|',
+            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+            'Outdent', 'Indent', '|',
+            'CreateLink', 'Image', 'CreateTable', '|', 'ClearFormat', 'Print',
+            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
+    },
+    enableFloating: false
+});
+
+rte.appendTo('#RTE');