reorganied imports

Author: Julia Volkova

apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.html

@@ -3,9 +3,16 @@
   <div class="instruction">Paste text from the clipboard to populate the form. Press Ctrl+Shift+V or use the "Smart Paste" button under the form.</div>
   <div class="textarea-container">
     <dx-button id="copy" text="Copy Text" icon="copy" stylingMode="contained" type="default" width="fit-content" (onClick)="onCopy()"></dx-button>
-    <dx-text-area id="textarea" [value]="text" stylingMode="filled" height="100%" (onValueChanged)="setText($event)"></dx-text-area>
+    <dx-text-area id="textarea" [value]="text" stylingMode="filled" height="100%" (onValueChanged)="onTextareaValueChangedEvent($event)"></dx-text-area>
   </div>
-  <dx-form id="form" labelMode="outside" labelLocation="top" [minColWidth]="220" [aiIntegration]="aiIntegration">
+  <dx-form
+    id="form"
+    labelMode="outside"
+    labelLocation="top"
+    [minColWidth]="220"
+    [aiIntegration]="aiIntegration"
+    stylingMode="filled"
+  >
     <dxi-form-item itemType="group" [colCountByScreen]="colCountByScreen" caption="Billing Summary">
       <dxi-form-item
         dataField="Amount Due"

apps/demos/Demos/Form/SmartPaste/Angular/app/app.component.ts

@@ -1,23 +1,21 @@
 import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  DxTextAreaModule,
-  DxFormModule, 
-  DxFormComponent,
-  DxDateBoxModule,
-  DxButtonModule
-} from 'devextreme-angular';
+
+import { AzureOpenAI, type OpenAI } from 'openai';
+
+import { DxButtonModule } from 'devextreme-angular';
+import type { ButtonStyle } from 'devextreme-angular/common';
 import {
   AIIntegration,
   RequestParams,
   Response,
 } from 'devextreme-angular/common/ai-integration';
+import { DxFormModule, DxFormComponent } from 'devextreme-angular/ui/form';
+import { DxTextAreaModule, type DxTextAreaTypes } from 'devextreme-angular/ui/text-area';
 import notify from 'devextreme/ui/notify';
-import { AzureOpenAI, OpenAI } from 'openai';
+
 import { Service } from './app.service';
-import { ButtonStyle } from 'devextreme-angular/common';
-import type { ValueChangedEvent } from 'devextreme/ui/text_area';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -34,8 +32,9 @@ const stylingMode = 'filled';
 type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
   content: string;
 };
+console.log('AAA');
 
-const sendNotification = (message, of, offset) => {
+const sendNotification = (message: string, of: string, offset?: string) => {
   notify({
     message,
     position: {
@@ -169,25 +168,20 @@ export class AppComponent {
 
   onCopy() {
     navigator.clipboard.writeText(this.text);
-    sendNotification('Text copied to clipboard', '#textarea', '0 -20');
+    sendNotification('Text copied to clipboard', '#textarea');
   }
 
-  setText(event: ValueChangedEvent) {
+  onTextareaValueChangedEvent(event: DxTextAreaTypes.ValueChangedEvent) {
     this.text = event.value;
   }
-
-  smartPaste() {
-    form.instance().smartPaste();
-  }
 }
 
 @NgModule({
   imports: [
     BrowserModule,
-    DxTextAreaModule,
-    DxFormModule,
-    DxDateBoxModule,
     DxButtonModule,
+    DxFormModule,
+    DxTextAreaModule,
   ],
   declarations: [AppComponent],
   bootstrap: [AppComponent],

apps/demos/Demos/Form/SmartPaste/React/App.tsx

@@ -1,33 +1,35 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { ButtonStyle, ValidationRule } from 'devextreme-react/common';
-
+import { Button } from 'devextreme-react/button';
 import {
   Form,
-  Item, GroupItem, Label,
-  type FormTypes,
+  Item, GroupItem,
   ButtonItem,
   FormRef,
 } from 'devextreme-react/form';
-import 'devextreme-react/text-area';
-import Button from 'devextreme-react/button';
+import { TextArea, type TextAreaTypes } from 'devextreme-react/text-area';
 
 import notify from 'devextreme/ui/notify';
 
 import { aiIntegration, defaultText } from './data.ts';
-import TextArea from 'devextreme-react/text-area';
 
 const stylingMode = 'filled';
 
 const amountDueEditorOptions = { placeholder: '$0.00', stylingMode };
 const amountDueAIOptions = { instruction: 'Format as the following: $0.00' };
+
 const statementDueEditorOptions = { placeholder: 'MM/DD/YYYY', stylingMode };
 const statementDueAIOptions = { instruction: 'Format as the following: MM/DD/YYYY' };
+
 const textEditorOptions = { stylingMode };
+
 const phoneEditorOptions = { placeholder: '(000) 000-0000', stylingMode };
 const phoneAIOptions = { instruction: 'Format as the following: (000) 000-0000' };
+
 const emailValidationRules: ValidationRule[] = [{ type: 'email' }];
 const emailAIOptions = { instruction: 'Do not fill this field if the text contains an invalid email address. A valid email is in the following format: email@example.com' };
+
 const zipEditorOptions = { stylingMode, mode: 'text', value: null };
 const zipAIOptions = { instruction: 'If the text does not contain a ZIP, determine the ZIP code from the provided address.' };
 
@@ -47,7 +49,7 @@ const colCountByScreen = {
   lg: 2,
 };
 
-const showNotification = (message, of, offset) => {
+const showNotification = (message: string, of: string, offset?: string) => {
   notify({
     message,
     position: {
@@ -91,13 +93,17 @@ const App = () => {
     formRef.current.instance().registerKeyHandler('V', shortcutHandler);
   }, []);
 
+  const onTextAreaValueChanged = useCallback((e: TextAreaTypes.ValueChangedEvent) => {
+    setText(e.value);
+  }, []);
+
   return (
     <>
       <div className="instruction">Copy text from the editor below to the clipboard. Edit the text to see how your changes affect Smart Paste result.</div>
       <div className="instruction">Paste text from the clipboard to populate the form. Press Ctrl+Shift+V or use the "Smart Paste" button under the form.</div>
       <div className="textarea-container">
         <Button text="Copy Text" icon="copy" stylingMode="contained" type="default" width="fit-content" onClick={onCopy} />
-        <TextArea id="textarea" value={text} stylingMode="filled" height="100%" onChange={setText} />
+        <TextArea id="textarea" value={text} stylingMode="filled" height="100%" onValueChanged={onTextAreaValueChanged} />
       </div>
       <Form
         id="form"

apps/demos/Demos/Form/SmartPaste/React/data.ts

@@ -1,9 +1,10 @@
 import {
-    AIIntegration,
-    RequestParams,
-    Response,
+  AIIntegration,
+  RequestParams,
+  Response,
 } from 'devextreme-react/common/ai-integration';
-import { AzureOpenAI, OpenAI } from 'openai';
+
+import { AzureOpenAI, type OpenAI } from 'openai';
 
 type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
   content: string;

apps/demos/Demos/Form/SmartPaste/Vue/App.vue

@@ -37,6 +37,7 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { AzureOpenAI, type OpenAI } from 'openai';
 import {
   DxForm, DxItem, DxButtonItem, DxGroupItem
 } from 'devextreme-vue/form';
@@ -45,9 +46,11 @@ import DxButton from 'devextreme-vue/button';
 import DxTextArea from 'devextreme-vue/text-area';
 import { AIIntegration } from 'devextreme-vue/common/ai-integration';
 import notify from 'devextreme/ui/notify';
-import { AzureOpenAI, OpenAI } from 'openai';
 import { AzureOpenAIConfig, defaultText } from './data.ts';
 
+const text = ref(defaultText);
+const formRef = ref();
+
 type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
   content: string;
 };
@@ -93,18 +96,20 @@ const aiIntegration = new AIIntegration({
 
 const stylingMode = 'filled';
 
-const text = ref(defaultText);
-const formRef = ref();
-
 const amountDueEditorOptions = { placeholder: '$0.00', stylingMode };
 const amountDueAIOptions = { instruction: 'Format as the following: $0.00' };
+
 const statementDueEditorOptions = { placeholder: 'MM/DD/YYYY', stylingMode };
 const statementDueAIOptions = { instruction: 'Format as the following: MM/DD/YYYY' };
+
 const textEditorOptions = { stylingMode };
+
 const phoneEditorOptions = { placeholder: '(000) 000-0000', stylingMode };
 const phoneAIOptions = { instruction: 'Format as the following: (000) 000-0000' };
+
 const emailValidationRules: ValidationRule[] = [{ type: 'email' }];
 const emailAIOptions = { instruction: 'Do not fill this field if the text contains an invalid email address. A valid email is in the following format: email@example.com' };
+
 const zipEditorOptions = { stylingMode, mode: 'text', value: null };
 const zipAIOptions = { instruction: 'If the text does not contain a ZIP, determine the ZIP code from the provided address.' };
 
@@ -124,7 +129,7 @@ const colCountByScreen = {
   lg: 2,
 };
 
-const showNotification = (message, of, offset) => {
+const showNotification = (message: string, of: string, offset?: string) => {
   notify({
     message,
     position: {

apps/demos/Demos/Form/SmartPaste/Vue/data.ts

@@ -15,35 +15,3 @@ Address:
 - 123 Elm St Apt 4B
 - New York, NY 10001
 `;
-
-const employee = {
-  ID: 1,
-  FirstName: 'John',
-  LastName: 'Heart',
-  Position: 'CEO',
-  BirthDate: '1964/03/16',
-  HireDate: '1995/01/15',
-  Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
-  Address: '351 S Hill St., Los Angeles, CA',
-  Phone: '360-684-1334',
-  Email: 'jheart@dx-email.com',
-};
-
-const positions = [
-  'HR Manager',
-  'IT Manager',
-  'CEO',
-  'Controller',
-  'Sales Manager',
-  'Support Manager',
-  'Shipping Manager',
-];
-
-export default {
-  getEmployee() {
-    return employee;
-  },
-  getPositions() {
-    return positions;
-  },
-};

apps/demos/Demos/Form/SmartPaste/jQuery/index.html

@@ -26,7 +26,7 @@
         <div id="copy"></div>
         <div id="textarea"></div>
       </div>
-      <div id="form" tabindex="0"></div>
+      <div id="form"></div>
     </div>
   </body>
 </html>