docs(Templates & Examples): use subpath imports

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';
 
 <Meta title="Project Templates & Examples" />
 
@@ -50,6 +50,9 @@ A curated list of minimal project templates and examples to get started using UI
 
 ## Examples
 
+<MessageStrip design={"Information"} hideCloseButton>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.</MessageStrip>
+
+<br />
 <br />
 
 <FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}>

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 {

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';

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';

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 (

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';

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

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 }> }) {

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"]
 }

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';

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';

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';

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';

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"]
 }

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';
 

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';

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';
 

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';

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';

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')

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

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';

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';

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';

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';