refactor: sort imports in React examples (#3719)

Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Sep 26, 2024 · ee47c19 · ee47c19
1 parent 4acb3e7
commit ee47c19
Show file tree

Hide file tree

Showing 335 changed files with 703 additions and 705 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -45,6 +45,9 @@
           [
             // Side-effects group
             "^\\u0000",
+            // React group
+            "^Frontend/demo/react-example",
+            "^react",
             // External group
             "^",
             // Vaadin group

diff --git a/frontend/demo/auth/LoginView.tsx b/frontend/demo/auth/LoginView.tsx
@@ -1,9 +1,9 @@
-import { useSignal } from '@vaadin/hilla-react-signals';
+import React from 'react';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import type { ViewConfig } from '@vaadin/hilla-file-router/types.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { LoginOverlay } from '@vaadin/react-components/LoginOverlay.js';
-import React from 'react';
 import { useAuth } from './auth';
-import type { ViewConfig } from '@vaadin/hilla-file-router/types.js';
 
 export const config: ViewConfig = {
   menu: { exclude: true },

diff --git a/frontend/demo/auth/MainLayout.tsx b/frontend/demo/auth/MainLayout.tsx
@@ -1,10 +1,10 @@
+import { Suspense } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
 import { AppLayout } from '@vaadin/react-components/AppLayout.js';
 import { Button } from '@vaadin/react-components/Button.js';
 import { DrawerToggle } from '@vaadin/react-components/DrawerToggle.js';
-import { Suspense } from 'react';
-import { NavLink, Outlet } from 'react-router-dom';
-import { useRouteMetadata } from './routing';
 import { useAuth } from './auth';
+import { useRouteMetadata } from './routing';
 
 const navLinkClasses = ({ isActive }: any) =>
   `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;

diff --git a/frontend/demo/auth/index.tsx b/frontend/demo/auth/index.tsx
@@ -2,8 +2,8 @@
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import router from './routes';
 import { AuthProvider } from './auth';
+import router from './routes';
 
 function App() {
   return (

diff --git a/frontend/demo/auth/routes.tsx b/frontend/demo/auth/routes.tsx
@@ -1,8 +1,8 @@
-import { protectRoutes } from '@vaadin/hilla-react-auth';
 import { createBrowserRouter, type RouteObject } from 'react-router-dom';
-import MainLayout from './MainLayout';
-import LoginView from './LoginView';
+import { protectRoutes } from '@vaadin/hilla-react-auth';
 import AboutView from './AboutView';
+import LoginView from './LoginView';
+import MainLayout from './MainLayout';
 
 // tag::snippet[]
 export const routes: RouteObject[] = protectRoutes([

diff --git a/frontend/demo/component/accordion/react/accordion-summary.tsx b/frontend/demo/component/accordion/react/accordion-summary.tsx
@@ -1,26 +1,26 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useForm } from '@vaadin/hilla-react-form';
+import { useSignal } from '@vaadin/hilla-react-signals';
 import {
   Accordion,
   AccordionHeading,
+  type AccordionOpenedChangedEvent,
   AccordionPanel,
   Button,
   ComboBox,
   EmailField,
   FormLayout,
+  type FormLayoutResponsiveStep,
   HorizontalLayout,
   TextField,
   VerticalLayout,
-  type AccordionOpenedChangedEvent,
-  type FormLayoutResponsiveStep,
 } from '@vaadin/react-components';
-import { useForm } from '@vaadin/hilla-react-form';
-import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
+import { getCountries } from 'Frontend/demo/domain/DataService';
 import CardModel from 'Frontend/generated/com/vaadin/demo/domain/CardModel';
+import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
 import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';
-import { getCountries } from 'Frontend/demo/domain/DataService';
 
 const responsiveSteps: FormLayoutResponsiveStep[] = [
   { minWidth: 0, columns: 1 },

diff --git a/frontend/demo/component/app-layout/react/app-layout-basic.tsx b/frontend/demo/component/app-layout/react/app-layout-basic.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import {
@@ -6,10 +7,9 @@ import {
   Icon,
   Scroller,
   SideNav,
-  SideNavItem,
   type SideNavElement,
+  SideNavItem,
 } from '@vaadin/react-components';
-import '@vaadin/icons';
 import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
 
 const h1Style = {

diff --git a/frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx b/frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx
@@ -1,13 +1,13 @@
+import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import {
   AppLayout,
-  HorizontalLayout,
-  Icon,
   type AppLayoutElement,
+  HorizontalLayout,
   type HorizontalLayoutElement,
+  Icon,
 } from '@vaadin/react-components';
-import '@vaadin/icons';
 import { patchAppLayoutNavigation } from '../app-layout-helper';
 
 const h1Style = {

diff --git a/frontend/demo/component/app-layout/react/app-layout-drawer.tsx b/frontend/demo/component/app-layout/react/app-layout-drawer.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import {
@@ -6,10 +7,9 @@ import {
   Icon,
   Scroller,
   SideNav,
-  SideNavItem,
   type SideNavElement,
+  SideNavItem,
 } from '@vaadin/react-components';
-import '@vaadin/icons';
 import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
 
 const h1Style = {

diff --git a/frontend/demo/component/app-layout/react/app-layout-height-auto.tsx b/frontend/demo/component/app-layout/react/app-layout-height-auto.tsx
@@ -1,7 +1,7 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { AppLayout, Grid, GridColumn } from '@vaadin/react-components';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

diff --git a/frontend/demo/component/app-layout/react/app-layout-height-full.tsx b/frontend/demo/component/app-layout/react/app-layout-height-full.tsx
@@ -1,8 +1,8 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect } from 'react';
-import { useSignal } from '@vaadin/hilla-react-signals';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
 import { css } from 'lit'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { AppLayout, Grid, GridColumn } from '@vaadin/react-components';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

diff --git a/frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx b/frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import {
@@ -6,10 +7,9 @@ import {
   Icon,
   Scroller,
   SideNav,
-  SideNavItem,
   type SideNavElement,
+  SideNavItem,
 } from '@vaadin/react-components';
-import '@vaadin/icons';
 import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
 
 const h1Style = {

diff --git a/frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx b/frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx
@@ -1,3 +1,4 @@
+import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import {
@@ -6,11 +7,10 @@ import {
   Icon,
   Scroller,
   SideNav,
-  SideNavItem,
   type SideNavElement,
+  SideNavItem,
 } from '@vaadin/react-components';
 import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
-import '@vaadin/icons';
 
 const h1Style = {
   fontSize: 'var(--lumo-font-size-l)',

diff --git a/frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx b/frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx
@@ -1,17 +1,17 @@
+import '@vaadin/icons';
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import {
   AppLayout,
   DrawerToggle,
   HorizontalLayout,
+  type HorizontalLayoutElement,
   Icon,
   Scroller,
   SideNav,
-  SideNavItem,
-  type HorizontalLayoutElement,
   type SideNavElement,
+  SideNavItem,
 } from '@vaadin/react-components';
-import '@vaadin/icons';
 import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
 import { patchAppLayoutNavigation } from '../app-layout-helper';
 

diff --git a/frontend/demo/component/auto-crud/react/auto-crud-basic.tsx b/frontend/demo/component/auto-crud/react/auto-crud-basic.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 // tag::snippet[]
 import { AutoCrud } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints';
 
 function Example() {
   return <AutoCrud service={EmployeeService} model={EmployeeModel} />;

diff --git a/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx b/frontend/demo/component/auto-crud/react/auto-crud-customized-form.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoCrud } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
 import { TextArea } from '@vaadin/react-components/TextArea';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints';
 
 function Example() {
   return (

diff --git a/frontend/demo/component/auto-crud/react/auto-crud-customized-grid.tsx b/frontend/demo/component/auto-crud/react/auto-crud-customized-grid.tsx
@@ -1,10 +1,10 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoCrud } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints';
 
 function Example() {
   // tag::snippet[]

diff --git a/frontend/demo/component/auto-form/react/auto-form-basic.tsx b/frontend/demo/component/auto-form/react/auto-form-basic.tsx
@@ -1,7 +1,7 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoForm } from '@vaadin/hilla-react-crud';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
 import { EmployeeService } from 'Frontend/generated/endpoints.js';
 

diff --git a/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx b/frontend/demo/component/auto-form/react/auto-form-custom-renderer-alt.tsx
@@ -1,11 +1,11 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
+import { AutoForm, type AutoFormLayoutRendererProps } from '@vaadin/hilla-react-crud';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
 import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
-import { type AutoFormLayoutRendererProps, AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
 import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
 // tag::snippet[]
 function GroupingLayoutRenderer({ children }: AutoFormLayoutRendererProps<EmployeeModel>) {

diff --git a/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx b/frontend/demo/component/auto-form/react/auto-form-custom-renderer.tsx
@@ -1,18 +1,18 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
-import { type AutoFormLayoutRendererProps, AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { AutoForm, type AutoFormLayoutRendererProps } from '@vaadin/hilla-react-crud';
+import { Checkbox } from '@vaadin/react-components/Checkbox.js';
+import { DatePicker } from '@vaadin/react-components/DatePicker.js';
 import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
-import { TextField } from '@vaadin/react-components/TextField.js';
 import { Select } from '@vaadin/react-components/Select.js';
-import { DatePicker } from '@vaadin/react-components/DatePicker.js';
-import { TimePicker } from '@vaadin/react-components/TimePicker.js';
-import { Checkbox } from '@vaadin/react-components/Checkbox.js';
 import { TextArea } from '@vaadin/react-components/TextArea.js';
+import { TextField } from '@vaadin/react-components/TextField.js';
+import { TimePicker } from '@vaadin/react-components/TimePicker.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
 // tag::snippet[]
 function GroupingLayoutRenderer({ form }: AutoFormLayoutRendererProps<EmployeeModel>) {

diff --git a/frontend/demo/component/auto-form/react/auto-form-delete-after-delete.tsx b/frontend/demo/component/auto-form/react/auto-form-delete-after-delete.tsx
@@ -1,17 +1,17 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoForm } from '@vaadin/hilla-react-crud';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { Button } from '@vaadin/react-components/Button.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
 import { Notification } from '@vaadin/react-components/Notification.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
 function Example() {
   useSignals(); // hidden-source-line

diff --git a/frontend/demo/component/auto-form/react/auto-form-edit-new-modes.tsx b/frontend/demo/component/auto-form/react/auto-form-edit-new-modes.tsx
@@ -1,17 +1,17 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { useSignal } from '@vaadin/hilla-react-signals';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoForm } from '@vaadin/hilla-react-crud';
-import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
-import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
-import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
-import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
-import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { Button } from '@vaadin/react-components/Button.js';
+import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
 import { Notification } from '@vaadin/react-components/Notification.js';
+import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
+import type Employee from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee';
+import Gender from 'Frontend/generated/com/vaadin/demo/fusion/crud/Employee/Gender';
+import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
 function Example() {
   useSignals(); // hidden-source-line

diff --git a/frontend/demo/component/auto-form/react/auto-form-field-colspan.tsx b/frontend/demo/component/auto-form/react/auto-form-field-colspan.tsx
@@ -1,9 +1,9 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
 function Example() {
   return (

diff --git a/frontend/demo/component/auto-form/react/auto-form-field-custom-label.tsx b/frontend/demo/component/auto-form/react/auto-form-field-custom-label.tsx
@@ -1,9 +1,9 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react'; // hidden-source-line
-import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import { AutoForm } from '@vaadin/hilla-react-crud';
-import { EmployeeService } from 'Frontend/generated/endpoints.js';
+import { autoGridHostStyles } from 'Frontend/demo/component/auto-grid/react/auto-grid-host-styles'; // hidden-source-line
 import EmployeeModel from 'Frontend/generated/com/vaadin/demo/fusion/crud/EmployeeModel';
+import { EmployeeService } from 'Frontend/generated/endpoints.js';
 
 function Example() {
   return (