Skip to content

Commit 6b34c57

Browse files
Lukas742Lukas742
authored
Merge f967c84 into 7312623 
2 parents 7312623 + f967c84 commit 6b34c57

File tree

34 files changed

+135
-129
lines changed

34 files changed

+135
-129
lines changed

‎docs/ProjectTemplates.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import NextLogo from '@sb/images/logo-nextjs.svg';
33
import ReactRouterLogo from '@sb/images/logo-react-router.svg';
44
import ViteLogo from '@sb/images/logo-vitejs.svg';
55
import { Meta } from '@storybook/addon-docs/blocks';
6-
import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
6+
import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label, MessageStrip } from '@ui5/webcomponents-react';
77

88
<Meta title="Project Templates & Examples" />
99

@@ -50,6 +50,9 @@ A curated list of minimal project templates and examples to get started using UI
5050

5151
## Examples
5252

53+
<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>
54+
55+
<br />
5356
<br />
5457

5558
<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}>

‎examples/nextjs-app/app/components/AppShell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import '@ui5/webcomponents-react/dist/Assets.js';
44
import { AppShellBar } from '@/app/components/AppShellBar';
5-
import { ThemeProvider } from '@ui5/webcomponents-react';
5+
import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
66
import { ReactNode } from 'react';
77

88
interface AppShellProps {

‎examples/nextjs-app/app/components/AppShellBar.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,12 @@
22

33
import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
44
import paletteIcon from '@ui5/webcomponents-icons/dist/palette.js';
5-
import {
6-
Button,
7-
List,
8-
ListPropTypes,
9-
ResponsivePopover,
10-
ShellBar,
11-
ShellBarItem,
12-
ShellBarItemPropTypes,
13-
ListItemStandard,
14-
ButtonDomRef,
15-
} from '@ui5/webcomponents-react';
5+
import { Button, type ButtonDomRef } from '@ui5/webcomponents-react/Button';
6+
import { List, type ListPropTypes } from '@ui5/webcomponents-react/List';
7+
import { ResponsivePopover } from '@ui5/webcomponents-react/ResponsivePopover';
8+
import { ShellBar } from '@ui5/webcomponents-react/ShellBar';
9+
import { ShellBarItem, type ShellBarItemPropTypes } from '@ui5/webcomponents-react/ShellBarItem';
10+
import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard';
1611
import { usePathname, useRouter } from 'next/navigation';
1712
import { useRef, useState } from 'react';
1813
import classes from './AppShellBar.module.css';

‎examples/nextjs-app/app/components/TodoList.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22
import { Todo } from '@/app/mockData/todos';
3-
import { List, ListPropTypes, ListItemStandard } from '@ui5/webcomponents-react';
3+
import { List, type ListPropTypes } from '@ui5/webcomponents-react/List';
4+
import { ListItemStandard } from '@ui5/webcomponents-react/ListItemStandard';
45
import { useRouter } from 'next/navigation';
56

67
import ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';

‎examples/nextjs-app/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import '@ui5/webcomponents-react/styles.css';
22
import './globals.css';
33
import { AppShell } from '@/app/components/AppShell';
4-
import { ThemeProvider } from '@ui5/webcomponents-react';
4+
import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
55

66
export default function RootLayout({ children }: { children: React.ReactNode }) {
77
return (

‎examples/nextjs-app/app/loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BusyIndicator } from '@ui5/webcomponents-react';
1+
import { BusyIndicator } from '@ui5/webcomponents-react/BusyIndicator';
22
import classes from './loading.module.css';
33

44
import BusyIndicatorSize from '@ui5/webcomponents/dist/types/BusyIndicatorSize.js';

‎examples/nextjs-app/app/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { TodoList } from '@/app/components/TodoList';
22
import { Todo, todos } from '@/app/mockData/todos';
3-
import { Bar, Page, Title } from '@ui5/webcomponents-react';
3+
import { Bar } from '@ui5/webcomponents-react/Bar';
4+
import { Page } from '@ui5/webcomponents-react/Page';
5+
import { Title } from '@ui5/webcomponents-react/Title';
46

57
export default async function Home() {
68
// this is a very simple mock which mimics data fetching

‎examples/nextjs-app/app/todos/[id]/page.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
import { Todo, todos } from '@/app/mockData/todos';
2-
import {
3-
DatePicker,
4-
DynamicPage,
5-
DynamicPageTitle,
6-
Form,
7-
FormItem,
8-
Input,
9-
Label,
10-
MessageStrip,
11-
Switch,
12-
TextArea,
13-
Title,
14-
} from '@ui5/webcomponents-react';
2+
import { DatePicker } from '@ui5/webcomponents-react/DatePicker';
3+
import { DynamicPage } from '@ui5/webcomponents-react/DynamicPage';
4+
import { DynamicPageTitle } from '@ui5/webcomponents-react/DynamicPageTitle';
5+
import { Form } from '@ui5/webcomponents-react/Form';
6+
import { FormItem } from '@ui5/webcomponents-react/FormItem';
7+
import { Input } from '@ui5/webcomponents-react/Input';
8+
import { Label } from '@ui5/webcomponents-react/Label';
9+
import { MessageStrip } from '@ui5/webcomponents-react/MessageStrip';
10+
import { Switch } from '@ui5/webcomponents-react/Switch';
11+
import { TextArea } from '@ui5/webcomponents-react/TextArea';
12+
import { Title } from '@ui5/webcomponents-react/Title';
1513
import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
1614

1715
export default async function TodoDetails(props: { params: Promise<{ id: string }> }) {

‎examples/nextjs-app/tsconfig.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "ES2017",
44
"lib": ["dom", "dom.iterable", "esnext"],
55
"allowJs": true,
66
"skipLibCheck": true,
77
"strict": true,
8-
"forceConsistentCasingInFileNames": true,
98
"noEmit": true,
109
"esModuleInterop": true,
1110
"module": "esnext",
12-
"moduleResolution": "node",
11+
"moduleResolution": "bundler",
1312
"resolveJsonModule": true,
1413
"isolatedModules": true,
1514
"jsx": "preserve",
@@ -23,6 +22,6 @@
2322
"@/*": ["./*"]
2423
}
2524
},
26-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mts"],
2726
"exclude": ["node_modules"]
2827
}

‎examples/nextjs-pages/components/AppShell/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import navBackIcon from '@ui5/webcomponents-icons/dist/nav-back.js';
2-
import { Button, ShellBar } from '@ui5/webcomponents-react';
2+
import { Button } from '@ui5/webcomponents-react/Button';
3+
import { ShellBar } from '@ui5/webcomponents-react/ShellBar';
34
import { useRouter } from 'next/router';
45
import { ReactNode } from 'react';
56
import classes from './AppShell.module.css';

0 commit comments

Comments
 (0)