Skip to content

Commit 747aa12

Browse files
MarcusNotheisLukas742
MarcusNotheis
and
Lukas742
authored
chore: update templates to v2 (#6260)
Co-authored-by: Lukas Harbarth <[email protected]>
1 parent aecee5f commit 747aa12

File tree

9 files changed

+410
-836
lines changed

9 files changed

+410
-836
lines changed

‎.github/workflows/examples.yml

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
name: Examples
1+
name: Examples & Templates
22

33
on:
44
push:
55
branches:
66
- 'main'
77
paths:
88
- 'examples/**/*'
9+
- 'templates/**/*'
910
pull_request:
1011
paths:
1112
- 'examples/**/*'
13+
- 'templates/**/*'
1214

1315
jobs:
14-
ci:
16+
examples:
1517
runs-on: ubuntu-latest
1618
strategy:
1719
matrix:
@@ -37,4 +39,32 @@ jobs:
3739

3840
- name: Test
3941
run: npm run test --if-present
40-
working-directory: examples/${{ matrix.path }}
42+
working-directory: examples/${{ matrix.path }}
43+
44+
templates:
45+
runs-on: ubuntu-latest
46+
strategy:
47+
matrix:
48+
path:
49+
- nextjs-app
50+
- nextjs-pages
51+
- vite-ts
52+
fail-fast: false
53+
steps:
54+
- uses: actions/checkout@v4
55+
56+
- uses: actions/[email protected]
57+
with:
58+
node-version-file: '.nvmrc'
59+
60+
- name: Install
61+
run: npm ci
62+
working-directory: templates/${{ matrix.path }}
63+
64+
- name: Build
65+
run: npm run build
66+
working-directory: templates/${{ matrix.path }}
67+
68+
- name: Test
69+
run: npm run test --if-present
70+
working-directory: templates/${{ matrix.path }}

‎.storybook/components/ProjectTemplate.module.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.card {
1+
.cardContainer {
2+
position: relative;
23
width: 500px;
34
height: 20rem;
45
margin-block-end: 2rem;
@@ -16,4 +17,24 @@
1617
.template {
1718
width: 300px;
1819
height: unset;
20+
.unssupportedMessage {
21+
inset-block-end: 70px;
22+
}
23+
}
24+
25+
.overlay {
26+
opacity: 0.5;
27+
pointer-events: none;
28+
}
29+
30+
.unssupportedMessage {
31+
position: absolute;
32+
z-index: 1;
33+
inset-block-end: 180px;
34+
inset-inline-start: 5%;
35+
width: 90%;
36+
}
37+
38+
.popover::part(content) {
39+
padding: 0.5rem;
1940
}

‎.storybook/components/ProjectTemplate.tsx

Lines changed: 131 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import TsLogo from '@sb/images/logo-ts.png';
22
import LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign.js';
33
import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
4-
import { Avatar, Card, CardHeader, Link, MessageStrip, Text, ThemeProvider } from '@ui5/webcomponents-react';
4+
import {
5+
Avatar,
6+
Card,
7+
CardHeader,
8+
Label,
9+
Link,
10+
MessageStrip,
11+
Popover,
12+
Text,
13+
ThemeProvider
14+
} from '@ui5/webcomponents-react';
515
import { clsx } from 'clsx';
6-
import { ReactNode } from 'react';
16+
import { ReactNode, useRef, useState } from 'react';
717
import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
818
import classes from './ProjectTemplate.module.css';
919

@@ -18,6 +28,8 @@ interface ProjectTemplatePropTypes {
1828
deprecationNotice?: string;
1929
isTemplate?: boolean;
2030
stackBlitzHref?: string;
31+
showUnsupportedMessage?: boolean;
32+
showNote?: boolean;
2133
}
2234

2335
addCustomCSSWithScoping(
@@ -36,67 +48,128 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
3648
href,
3749
deprecationNotice,
3850
isTemplate,
39-
stackBlitzHref
51+
stackBlitzHref,
52+
showUnsupportedMessage,
53+
showNote
4054
} = props;
55+
const [popoverOpen, setPopoverOpen] = useState(false);
56+
const linkRef = useRef(null);
4157

4258
return (
4359
<ThemeProvider>
44-
<Card
45-
className={clsx(classes.card, isTemplate && classes.template)}
46-
header={
47-
<CardHeader
48-
data-project-template=""
49-
titleText={title}
50-
subtitleText={subtitle}
51-
action={
52-
isTypeScript && (
53-
<img
54-
src={TsLogo}
55-
height={24}
56-
width={24}
57-
alt={'TypeScript Logo'}
58-
title={'TypeScript Logo. Original Source: https://www.typescriptlang.org/branding/'}
59-
/>
60-
)
61-
}
62-
avatar={
63-
<Avatar title={logoAttribution}>
64-
<img src={logo} alt={`Logo of ${title}`} />
65-
</Avatar>
66-
}
67-
/>
68-
}
69-
>
70-
<div className={classes.cardContent}>
71-
{deprecationNotice && (
72-
<MessageStrip
73-
hideCloseButton
74-
design={MessageStripDesign.Critical}
75-
children={deprecationNotice}
76-
className={classes.deprecationNotice}
77-
/>
78-
)}
79-
<Link design={LinkDesign.Emphasized} href={href}>
80-
View Example
81-
</Link>
82-
{stackBlitzHref && (
83-
<>
84-
|
85-
<Link design={LinkDesign.Emphasized} href={stackBlitzHref}>
86-
View in StackBlitz
60+
<div className={clsx(classes.cardContainer, isTemplate && classes.template)}>
61+
{showUnsupportedMessage && (
62+
<>
63+
<MessageStrip hideCloseButton design={MessageStripDesign.Critical} className={classes.unssupportedMessage}>
64+
Currently not supported by V2.{' '}
65+
<Link
66+
ref={linkRef}
67+
accessibleRole="Button"
68+
onClick={() => {
69+
setPopoverOpen(true);
70+
}}
71+
>
72+
Show more.
8773
</Link>
88-
</>
89-
)}
90-
{!isTemplate && (
91-
<>
92-
<br />
93-
<br />
94-
<Text>What&apos;s included:</Text>
95-
{children}
96-
</>
97-
)}
98-
</div>
99-
</Card>
74+
</MessageStrip>
75+
<Popover
76+
className={classes.popover}
77+
opener={linkRef.current}
78+
open={popoverOpen}
79+
onClose={() => {
80+
setPopoverOpen(false);
81+
}}
82+
>
83+
<Text>
84+
Currently, the <code>BarcodeScannerDialog</code> web component isn't compatible with SSR environments.
85+
For the Next.js Pages Router and Remix, this bug crashes the entire build process, even if the component
86+
isn't imported.
87+
<br />
88+
This is <b>not</b> the case for the Next.js App Router; there, the build only crashes if the component
89+
is used.
90+
<br />
91+
<br />
92+
You can find the corresponding GitHub issue{' '}
93+
<Link href="https://github.com/SAP/ui5-webcomponents/issues/9771" target="_blank">
94+
here
95+
</Link>
96+
.
97+
</Text>
98+
</Popover>
99+
</>
100+
)}
101+
<Card
102+
className={clsx(showUnsupportedMessage && classes.overlay)}
103+
header={
104+
<CardHeader
105+
data-project-template=""
106+
titleText={title}
107+
subtitleText={subtitle}
108+
action={
109+
isTypeScript && (
110+
<img
111+
src={TsLogo}
112+
height={24}
113+
width={24}
114+
alt={'TypeScript Logo'}
115+
title={'TypeScript Logo. Original Source: https://www.typescriptlang.org/branding/'}
116+
/>
117+
)
118+
}
119+
avatar={
120+
<Avatar title={logoAttribution}>
121+
<img src={logo} alt={`Logo of ${title}`} />
122+
</Avatar>
123+
}
124+
/>
125+
}
126+
>
127+
<div className={classes.cardContent}>
128+
{deprecationNotice && (
129+
<MessageStrip
130+
hideCloseButton
131+
design={MessageStripDesign.Critical}
132+
children={deprecationNotice}
133+
className={classes.deprecationNotice}
134+
/>
135+
)}
136+
<Link design={LinkDesign.Emphasized} href={href}>
137+
View Example
138+
</Link>
139+
{stackBlitzHref && (
140+
<>
141+
|
142+
<Link design={LinkDesign.Emphasized} href={stackBlitzHref}>
143+
View in StackBlitz
144+
</Link>
145+
</>
146+
)}
147+
{showNote && (
148+
<>
149+
<br />
150+
<span>
151+
<Label showColon>Note</Label>
152+
<Text>
153+
The <code>BarcodeScannerDialog</code> component is currently{' '}
154+
<Link href="https://github.com/SAP/ui5-webcomponents/issues/9771" target="_blank">
155+
not supported
156+
</Link>
157+
.
158+
</Text>
159+
</span>
160+
</>
161+
)}
162+
{!isTemplate && (
163+
<>
164+
<br />
165+
<br />
166+
<Text>What&apos;s included:</Text>
167+
{children}
168+
</>
169+
)}
170+
</div>
171+
</Card>
172+
</div>
100173
</ThemeProvider>
101174
);
102175
}

‎docs/ProjectTemplates.mdx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Footer, ProjectTemplate, TableOfContent, LabelWithWrapping } from '@sb/components';
22
import { Meta } from '@storybook/blocks';
3-
import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
3+
import { Link, FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
44
import NextLogo from '@sb/images/logo-nextjs.svg';
55
import ViteLogo from '@sb/images/logo-vitejs.svg';
66
import RemixLogo from '@sb/images/logo-remix.svg';
@@ -24,8 +24,10 @@ A curated list of minimal project templates and examples to get started using UI
2424
logo={NextLogo}
2525
logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
2626
href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/templates/nextjs-app'}
27+
stackBlitzHref="https://stackblitz.com/github/SAP/ui5-webcomponents-react/tree/main/templates/nextjs-app"
2728
isTypeScript
2829
isTemplate
30+
showNote
2931
/>
3032
<ProjectTemplate
3133
title={'Next.js'}
@@ -35,6 +37,7 @@ A curated list of minimal project templates and examples to get started using UI
3537
href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/templates/nextjs-pages'}
3638
isTypeScript
3739
isTemplate
40+
showUnsupportedMessage
3841
/>
3942
<ProjectTemplate
4043
title={'Vite.js'}
@@ -58,7 +61,9 @@ A curated list of minimal project templates and examples to get started using UI
5861
logo={NextLogo}
5962
logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
6063
href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app'}
64+
stackBlitzHref="https://stackblitz.com/github/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app"
6165
isTypeScript
66+
showNote
6267
>
6368
<ul>
6469
<li>
@@ -76,6 +81,7 @@ A curated list of minimal project templates and examples to get started using UI
7681
logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
7782
href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-pages'}
7883
isTypeScript
84+
showUnsupportedMessage
7985
>
8086
<ul>
8187
<li>
@@ -114,6 +120,7 @@ A curated list of minimal project templates and examples to get started using UI
114120
logo={RemixLogo}
115121
logoAttribution={'Remix.run Logo. Original Source: https://remix.run'}
116122
href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/remix-ts'}
123+
showUnsupportedMessage
117124
isTypeScript
118125
>
119126
<ul>

0 commit comments

Comments
 (0)