diff --git a/docs/ProjectTemplates.mdx b/docs/ProjectTemplates.mdx index 6314a1f196d..4014edcedfe 100644 --- a/docs/ProjectTemplates.mdx +++ b/docs/ProjectTemplates.mdx @@ -3,7 +3,7 @@ import NextLogo from '@sb/images/logo-nextjs.svg'; import ReactRouterLogo from '@sb/images/logo-react-router.svg'; import ViteLogo from '@sb/images/logo-vitejs.svg'; import { Meta } from '@storybook/addon-docs/blocks'; -import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react'; +import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label, MessageStrip } from '@ui5/webcomponents-react'; @@ -50,6 +50,9 @@ A curated list of minimal project templates and examples to get started using UI ## Examples +The examples below are minimal applications built with various frameworks and libraries. They show how to integrate UI5 Web Components for React into your projects and are not intended as UX or accessibility patterns. + +

diff --git a/examples/nextjs-app/app/components/AppShell.tsx b/examples/nextjs-app/app/components/AppShell.tsx index 6ee26ad9174..82a280f4102 100644 --- a/examples/nextjs-app/app/components/AppShell.tsx +++ b/examples/nextjs-app/app/components/AppShell.tsx @@ -2,7 +2,7 @@ import '@ui5/webcomponents-react/dist/Assets.js'; import { AppShellBar } from '@/app/components/AppShellBar'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { ReactNode } from 'react'; interface AppShellProps { diff --git a/examples/nextjs-app/app/components/AppShellBar.tsx b/examples/nextjs-app/app/components/AppShellBar.tsx index 7606eeb5f3e..3c3094f1882 100644 --- a/examples/nextjs-app/app/components/AppShellBar.tsx +++ b/examples/nextjs-app/app/components/AppShellBar.tsx @@ -2,17 +2,12 @@ import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Button, - List, - ListPropTypes, - ResponsivePopover, - ShellBar, - ShellBarItem, - ShellBarItemPropTypes, - ListItemStandard, - ButtonDomRef, -} from '@ui5/webcomponents-react'; +import { Button, type ButtonDomRef } from '@ui5/webcomponents-react/Button'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ResponsivePopover } from '@ui5/webcomponents-react/ResponsivePopover'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; +import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import { usePathname, useRouter } from 'next/navigation'; import { useRef, useState } from 'react'; import classes from './AppShellBar.module.css'; diff --git a/examples/nextjs-app/app/components/TodoList.tsx b/examples/nextjs-app/app/components/TodoList.tsx index 9d81b4417f5..509c26099aa 100644 --- a/examples/nextjs-app/app/components/TodoList.tsx +++ b/examples/nextjs-app/app/components/TodoList.tsx @@ -1,6 +1,7 @@ 'use client'; import { Todo } from '@/app/mockData/todos'; -import { List, ListPropTypes, ListItemStandard } from '@ui5/webcomponents-react'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import { useRouter } from 'next/navigation'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; diff --git a/examples/nextjs-app/app/layout.tsx b/examples/nextjs-app/app/layout.tsx index 701d5d292f1..2702b0a3558 100644 --- a/examples/nextjs-app/app/layout.tsx +++ b/examples/nextjs-app/app/layout.tsx @@ -1,7 +1,7 @@ import '@ui5/webcomponents-react/styles.css'; import './globals.css'; import { AppShell } from '@/app/components/AppShell'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/examples/nextjs-app/app/loading.tsx b/examples/nextjs-app/app/loading.tsx index 3883dc8c9c8..612ff67445b 100644 --- a/examples/nextjs-app/app/loading.tsx +++ b/examples/nextjs-app/app/loading.tsx @@ -1,4 +1,4 @@ -import { BusyIndicator } from '@ui5/webcomponents-react'; +import { BusyIndicator } from '@ui5/webcomponents-react/BusyIndicator'; import classes from './loading.module.css'; import BusyIndicatorSize from '@ui5/webcomponents/dist/types/BusyIndicatorSize.js'; diff --git a/examples/nextjs-app/app/page.tsx b/examples/nextjs-app/app/page.tsx index 54f253ba918..5303559996b 100644 --- a/examples/nextjs-app/app/page.tsx +++ b/examples/nextjs-app/app/page.tsx @@ -1,6 +1,8 @@ import { TodoList } from '@/app/components/TodoList'; import { Todo, todos } from '@/app/mockData/todos'; -import { Bar, Page, Title } from '@ui5/webcomponents-react'; +import { Bar } from '@ui5/webcomponents-react/Bar'; +import { Page } from '@ui5/webcomponents-react/Page'; +import { Title } from '@ui5/webcomponents-react/Title'; export default async function Home() { // this is a very simple mock which mimics data fetching diff --git a/examples/nextjs-app/app/todos/[id]/page.tsx b/examples/nextjs-app/app/todos/[id]/page.tsx index bfb5a047d16..924509bf855 100644 --- a/examples/nextjs-app/app/todos/[id]/page.tsx +++ b/examples/nextjs-app/app/todos/[id]/page.tsx @@ -1,17 +1,15 @@ import { Todo, todos } from '@/app/mockData/todos'; -import { - DatePicker, - DynamicPage, - DynamicPageTitle, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, - Title, -} from '@ui5/webcomponents-react'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; +import { Title } from '@ui5/webcomponents-react/Title'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; export default async function TodoDetails(props: { params: Promise<{ id: string }> }) { diff --git a/examples/nextjs-app/tsconfig.json b/examples/nextjs-app/tsconfig.json index e06a4454ab0..d7c2cde34c6 100644 --- a/examples/nextjs-app/tsconfig.json +++ b/examples/nextjs-app/tsconfig.json @@ -1,15 +1,14 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -23,6 +22,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/examples/nextjs-pages/components/AppShell/index.tsx b/examples/nextjs-pages/components/AppShell/index.tsx index b93a4b13853..ae84d9ef7b2 100644 --- a/examples/nextjs-pages/components/AppShell/index.tsx +++ b/examples/nextjs-pages/components/AppShell/index.tsx @@ -1,5 +1,6 @@ import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; -import { Button, ShellBar } from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; import { useRouter } from 'next/router'; import { ReactNode } from 'react'; import classes from './AppShell.module.css'; diff --git a/examples/nextjs-pages/pages/_app.tsx b/examples/nextjs-pages/pages/_app.tsx index 4fd454fce6e..86775bccb1e 100644 --- a/examples/nextjs-pages/pages/_app.tsx +++ b/examples/nextjs-pages/pages/_app.tsx @@ -1,7 +1,7 @@ import '@ui5/webcomponents-react/dist/Assets.js'; import '@ui5/webcomponents-react/styles.css'; import '../styles/globals.css'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { AppShell } from '../components/AppShell'; diff --git a/examples/nextjs-pages/pages/index.tsx b/examples/nextjs-pages/pages/index.tsx index d4b3871475a..5b22a56fc04 100644 --- a/examples/nextjs-pages/pages/index.tsx +++ b/examples/nextjs-pages/pages/index.tsx @@ -1,5 +1,9 @@ import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { Bar, List, ListItemStandard, ListPropTypes, Page, Title } from '@ui5/webcomponents-react'; +import { Bar } from '@ui5/webcomponents-react/Bar'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { Page } from '@ui5/webcomponents-react/Page'; +import { Title } from '@ui5/webcomponents-react/Title'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import { GetServerSideProps } from 'next'; import { useRouter } from 'next/router'; diff --git a/examples/nextjs-pages/pages/todos/[id].tsx b/examples/nextjs-pages/pages/todos/[id].tsx index 7a7cb477809..cbce8f429e9 100644 --- a/examples/nextjs-pages/pages/todos/[id].tsx +++ b/examples/nextjs-pages/pages/todos/[id].tsx @@ -1,16 +1,14 @@ -import { - DatePicker, - DynamicPage, - DynamicPageTitle, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, - Title, -} from '@ui5/webcomponents-react'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; +import { Title } from '@ui5/webcomponents-react/Title'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; import { GetServerSideProps } from 'next'; import { Todo } from '../api/todos'; diff --git a/examples/nextjs-pages/tsconfig.json b/examples/nextjs-pages/tsconfig.json index 61c19abd68d..d7c2cde34c6 100644 --- a/examples/nextjs-pages/tsconfig.json +++ b/examples/nextjs-pages/tsconfig.json @@ -1,23 +1,27 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, + "plugins": [ + { + "name": "next" + } + ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/examples/react-router-ts/app/components/AppShell.tsx b/examples/react-router-ts/app/components/AppShell.tsx index 4c408e3d84f..b65e2902a9d 100644 --- a/examples/react-router-ts/app/components/AppShell.tsx +++ b/examples/react-router-ts/app/components/AppShell.tsx @@ -1,5 +1,5 @@ import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { ReactNode } from 'react'; import { AppShellBar } from './AppShellBar'; diff --git a/examples/react-router-ts/app/components/AppShellBar.tsx b/examples/react-router-ts/app/components/AppShellBar.tsx index 380a7927fae..62a9a74b3e6 100644 --- a/examples/react-router-ts/app/components/AppShellBar.tsx +++ b/examples/react-router-ts/app/components/AppShellBar.tsx @@ -2,17 +2,12 @@ import { useLocation, useNavigate } from 'react-router'; import { getTheme, setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Button, - List, - ListItemStandard, - ListPropTypes, - ResponsivePopover, - ResponsivePopoverDomRef, - ShellBar, - ShellBarItem, - ShellBarItemPropTypes, -} from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { ResponsivePopover, type ResponsivePopoverDomRef } from '@ui5/webcomponents-react/ResponsivePopover'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; +import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem'; import ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js'; import { useRef, useState } from 'react'; import classes from './AppShellBar.module.css'; diff --git a/examples/react-router-ts/app/components/TodoList.tsx b/examples/react-router-ts/app/components/TodoList.tsx index ec648744a94..1f0f994f2d9 100644 --- a/examples/react-router-ts/app/components/TodoList.tsx +++ b/examples/react-router-ts/app/components/TodoList.tsx @@ -1,6 +1,7 @@ import { useNavigate } from 'react-router'; import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import { List, ListItemStandard, ListPropTypes } from '@ui5/webcomponents-react'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js'; import { Todo } from '~/mockData/todos'; diff --git a/examples/react-router-ts/app/routes/index.tsx b/examples/react-router-ts/app/routes/index.tsx index 5c043351082..cff633d7463 100644 --- a/examples/react-router-ts/app/routes/index.tsx +++ b/examples/react-router-ts/app/routes/index.tsx @@ -1,4 +1,6 @@ -import { Bar, Page, Title } from '@ui5/webcomponents-react'; +import { Bar } from '@ui5/webcomponents-react/Bar'; +import { Page } from '@ui5/webcomponents-react/Page'; +import { Title } from '@ui5/webcomponents-react/Title'; import type { MetaFunction } from 'react-router'; import { TodoList } from '~/components/TodoList'; import { Todo, todos } from '~/mockData/todos'; diff --git a/examples/react-router-ts/app/routes/todo.tsx b/examples/react-router-ts/app/routes/todo.tsx index 88337af6b47..8ff46a1778b 100644 --- a/examples/react-router-ts/app/routes/todo.tsx +++ b/examples/react-router-ts/app/routes/todo.tsx @@ -1,16 +1,14 @@ -import { - DatePicker, - DynamicPage, - DynamicPageTitle, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, - Title, -} from '@ui5/webcomponents-react'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; +import { Title } from '@ui5/webcomponents-react/Title'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; import { Todo, todos } from '~/mockData/todos'; import type { Route } from './+types/todo'; diff --git a/examples/vite-ts/cypress/support/component.tsx b/examples/vite-ts/cypress/support/component.tsx index 88657a079f8..423e7113901 100644 --- a/examples/vite-ts/cypress/support/component.tsx +++ b/examples/vite-ts/cypress/support/component.tsx @@ -13,7 +13,7 @@ // https://on.cypress.io/configuration // *********************************************************** import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/examples/vite-ts/src/App.cy.tsx b/examples/vite-ts/src/App.cy.tsx index 1203b0f1f05..221dd0e6e9e 100644 --- a/examples/vite-ts/src/App.cy.tsx +++ b/examples/vite-ts/src/App.cy.tsx @@ -1,4 +1,4 @@ -import { Button } from '@ui5/webcomponents-react'; +import { Button } from '@ui5/webcomponents-react/Button'; describe('Component tests', () => { // example for component test diff --git a/examples/vite-ts/src/AppShell.tsx b/examples/vite-ts/src/AppShell.tsx index ab505fbe738..151bdf4cd35 100644 --- a/examples/vite-ts/src/AppShell.tsx +++ b/examples/vite-ts/src/AppShell.tsx @@ -1,21 +1,16 @@ import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js'; import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js'; -import { - Avatar, - Breadcrumbs, - Button, - DynamicPage, - DynamicPageTitle, - List, - ListPropTypes, - ResponsivePopover, - ShellBar, - ShellBarItem, - ShellBarItemPropTypes, - ListItemStandard, - ButtonDomRef, - Title, -} from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { Breadcrumbs } from '@ui5/webcomponents-react/Breadcrumbs'; +import { Button, type ButtonDomRef } from '@ui5/webcomponents-react/Button'; +import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage'; +import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle'; +import { List, type ListPropTypes } from '@ui5/webcomponents-react/List'; +import { ResponsivePopover } from '@ui5/webcomponents-react/ResponsivePopover'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; +import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; +import { Title } from '@ui5/webcomponents-react/Title'; import { useRef, useState } from 'react'; import { Outlet, useLocation, useMatches, useNavigate } from 'react-router'; import { SingleTodoHandle } from './main.tsx'; diff --git a/examples/vite-ts/src/ToDos.tsx b/examples/vite-ts/src/ToDos.tsx index f01db0d2b5a..7fee11ffe56 100644 --- a/examples/vite-ts/src/ToDos.tsx +++ b/examples/vite-ts/src/ToDos.tsx @@ -1,4 +1,7 @@ -import { BusyIndicator, Card, List, ListItemStandard } from '@ui5/webcomponents-react'; +import { BusyIndicator } from '@ui5/webcomponents-react/BusyIndicator'; +import { Card } from '@ui5/webcomponents-react/Card'; +import { List } from '@ui5/webcomponents-react/List'; +import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard'; import { Suspense } from 'react'; import { Await, useLoaderData, useNavigate } from 'react-router'; import { Todo } from './mockImplementations/mockData.ts'; diff --git a/examples/vite-ts/src/TodoDetails.tsx b/examples/vite-ts/src/TodoDetails.tsx index 6c1f9e01fb8..dd84c318f59 100644 --- a/examples/vite-ts/src/TodoDetails.tsx +++ b/examples/vite-ts/src/TodoDetails.tsx @@ -1,14 +1,12 @@ -import { - Card, - DatePicker, - Form, - FormItem, - Input, - Label, - MessageStrip, - Switch, - TextArea, -} from '@ui5/webcomponents-react'; +import { Card } from '@ui5/webcomponents-react/Card'; +import { DatePicker } from '@ui5/webcomponents-react/DatePicker'; +import { Form } from '@ui5/webcomponents-react/Form'; +import { FormItem } from '@ui5/webcomponents-react/FormItem'; +import { Input } from '@ui5/webcomponents-react/Input'; +import { Label } from '@ui5/webcomponents-react/Label'; +import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip'; +import { Switch } from '@ui5/webcomponents-react/Switch'; +import { TextArea } from '@ui5/webcomponents-react/TextArea'; import { useLoaderData } from 'react-router'; import { Todo } from './mockImplementations/mockData.ts'; import classes from './TodoDetails.module.css'; diff --git a/examples/vite-ts/src/main.tsx b/examples/vite-ts/src/main.tsx index 3ad82c47193..d15405a8b40 100644 --- a/examples/vite-ts/src/main.tsx +++ b/examples/vite-ts/src/main.tsx @@ -1,6 +1,8 @@ import '@ui5/webcomponents-react/dist/Assets.js'; import ErrorScreenIllustration from '@ui5/webcomponents-fiori/dist/illustrations/ErrorScreen.js'; -import { BreadcrumbsItem, IllustratedMessage, ThemeProvider } from '@ui5/webcomponents-react'; +import { BreadcrumbsItem } from '@ui5/webcomponents-react/BreadcrumbsItem'; +import { IllustratedMessage } from '@ui5/webcomponents-react/IllustratedMessage'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { ReactNode, StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { createBrowserRouter, LoaderFunctionArgs } from 'react-router'; diff --git a/templates/nextjs-app/app/layout.tsx b/templates/nextjs-app/app/layout.tsx index da941aadfc0..0916e49e3cf 100644 --- a/templates/nextjs-app/app/layout.tsx +++ b/templates/nextjs-app/app/layout.tsx @@ -1,7 +1,7 @@ import './clientAssetsImport.ts'; import '@ui5/webcomponents-react/styles.css'; import './globals.css'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/templates/nextjs-app/app/page.tsx b/templates/nextjs-app/app/page.tsx index 4fe57a04131..fa120e21c0d 100644 --- a/templates/nextjs-app/app/page.tsx +++ b/templates/nextjs-app/app/page.tsx @@ -1,5 +1,6 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; -import { Avatar, ShellBar } from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; export default function Page() { return ( diff --git a/templates/nextjs-app/tsconfig.json b/templates/nextjs-app/tsconfig.json index e06a4454ab0..d7c2cde34c6 100644 --- a/templates/nextjs-app/tsconfig.json +++ b/templates/nextjs-app/tsconfig.json @@ -1,15 +1,14 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", @@ -23,6 +22,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/templates/nextjs-pages/pages/_app.tsx b/templates/nextjs-pages/pages/_app.tsx index 8133ed34173..5970e96c5ea 100644 --- a/templates/nextjs-pages/pages/_app.tsx +++ b/templates/nextjs-pages/pages/_app.tsx @@ -1,7 +1,7 @@ import '@ui5/webcomponents-react/styles.css'; import '../styles/globals.css'; import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import type { AppProps } from 'next/app'; import Head from 'next/head'; diff --git a/templates/nextjs-pages/pages/index.tsx b/templates/nextjs-pages/pages/index.tsx index 6d685c063fa..00de0837c81 100644 --- a/templates/nextjs-pages/pages/index.tsx +++ b/templates/nextjs-pages/pages/index.tsx @@ -1,5 +1,6 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; -import { Avatar, ShellBar } from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; export default function Home() { return ( diff --git a/templates/nextjs-pages/tsconfig.json b/templates/nextjs-pages/tsconfig.json index 61c19abd68d..d7c2cde34c6 100644 --- a/templates/nextjs-pages/tsconfig.json +++ b/templates/nextjs-pages/tsconfig.json @@ -1,23 +1,27 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", - "moduleResolution": "node", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, + "plugins": [ + { + "name": "next" + } + ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"], "exclude": ["node_modules"] } diff --git a/templates/vite-ts/cypress/support/component.tsx b/templates/vite-ts/cypress/support/component.tsx index 88657a079f8..423e7113901 100644 --- a/templates/vite-ts/cypress/support/component.tsx +++ b/templates/vite-ts/cypress/support/component.tsx @@ -13,7 +13,7 @@ // https://on.cypress.io/configuration // *********************************************************** import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/templates/vite-ts/src/App.tsx b/templates/vite-ts/src/App.tsx index 8f5a074be6b..9abd0d7e9e2 100644 --- a/templates/vite-ts/src/App.tsx +++ b/templates/vite-ts/src/App.tsx @@ -1,5 +1,7 @@ import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; -import { Avatar, ShellBar } from '@ui5/webcomponents-react'; +import { Avatar } from '@ui5/webcomponents-react/Avatar'; +import { ShellBar } from '@ui5/webcomponents-react/ShellBar'; + function App() { return ( <> diff --git a/templates/vite-ts/src/main.tsx b/templates/vite-ts/src/main.tsx index debe19419d9..8d0485ff962 100644 --- a/templates/vite-ts/src/main.tsx +++ b/templates/vite-ts/src/main.tsx @@ -1,5 +1,5 @@ import '@ui5/webcomponents-react/dist/Assets.js'; -import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider'; import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx';