chore: update templates to v2

.github/workflows/examples.yml

@@ -1,17 +1,19 @@
-name: Examples
+name: Examples & Templates
 
 on:
   push:
     branches:
       - 'main'
     paths:
       - 'examples/**/*'
+      - 'templates/**/*'
   pull_request:
     paths:
       - 'examples/**/*'
+      - 'templates/**/*'
 
 jobs:
-  ci:
+  examples:
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -37,4 +39,32 @@ jobs:
 
       - name: Test
         run: npm run test --if-present
-        working-directory: examples/${{ matrix.path }}
+        working-directory: examples/${{ matrix.path }}
+
+  templates:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        path:
+          - nextjs-app
+          - nextjs-pages
+          - vite-ts
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/[email protected]
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install
+        run: npm ci
+        working-directory: templates/${{ matrix.path }}
+
+      - name: Build
+        run: npm run build
+        working-directory: templates/${{ matrix.path }}
+
+      - name: Test
+        run: npm run test --if-present
+        working-directory: templates/${{ matrix.path }}

.storybook/components/ProjectTemplate.module.css

@@ -1,4 +1,5 @@
-.card {
+.cardContainer {
+  position: relative;
   width: 500px;
   height: 20rem;
   margin-block-end: 2rem;
@@ -16,4 +17,24 @@
 .template {
   width: 300px;
   height: unset;
+  .unssupportedMessage {
+    inset-block-end: 70px;
+  }
+}
+
+.overlay {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.unssupportedMessage {
+  position: absolute;
+  z-index: 1;
+  inset-block-end: 180px;
+  inset-inline-start: 5%;
+  width: 90%;
+}
+
+.popover::part(content) {
+  padding: 0.5rem;
 }

.storybook/components/ProjectTemplate.tsx

@@ -1,9 +1,19 @@
 import TsLogo from '@sb/images/logo-ts.png';
 import LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign.js';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
-import { Avatar, Card, CardHeader, Link, MessageStrip, Text, ThemeProvider } from '@ui5/webcomponents-react';
+import {
+  Avatar,
+  Card,
+  CardHeader,
+  Label,
+  Link,
+  MessageStrip,
+  Popover,
+  Text,
+  ThemeProvider
+} from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
-import { ReactNode } from 'react';
+import { ReactNode, useRef, useState } from 'react';
 import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
 import classes from './ProjectTemplate.module.css';
 
@@ -18,6 +28,8 @@ interface ProjectTemplatePropTypes {
   deprecationNotice?: string;
   isTemplate?: boolean;
   stackBlitzHref?: string;
+  showUnsupportedMessage?: boolean;
+  showNote?: boolean;
 }
 
 addCustomCSSWithScoping(
@@ -36,67 +48,128 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
     href,
     deprecationNotice,
     isTemplate,
-    stackBlitzHref
+    stackBlitzHref,
+    showUnsupportedMessage,
+    showNote
   } = props;
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const linkRef = useRef(null);
 
   return (
     <ThemeProvider>
-      <Card
-        className={clsx(classes.card, isTemplate && classes.template)}
-        header={
-          <CardHeader
-            data-project-template=""
-            titleText={title}
-            subtitleText={subtitle}
-            action={
-              isTypeScript && (
-                <img
-                  src={TsLogo}
-                  height={24}
-                  width={24}
-                  alt={'TypeScript Logo'}
-                  title={'TypeScript Logo. Original Source: https://www.typescriptlang.org/branding/'}
-                />
-              )
-            }
-            avatar={
-              <Avatar title={logoAttribution}>
-                <img src={logo} alt={`Logo of ${title}`} />
-              </Avatar>
-            }
-          />
-        }
-      >
-        <div className={classes.cardContent}>
-          {deprecationNotice && (
-            <MessageStrip
-              hideCloseButton
-              design={MessageStripDesign.Critical}
-              children={deprecationNotice}
-              className={classes.deprecationNotice}
-            />
-          )}
-          <Link design={LinkDesign.Emphasized} href={href}>
-            View Example
-          </Link>
-          {stackBlitzHref && (
-            <>
-              |
-              <Link design={LinkDesign.Emphasized} href={stackBlitzHref}>
-                View in StackBlitz
+      <div className={clsx(classes.cardContainer, isTemplate && classes.template)}>
+        {showUnsupportedMessage && (
+          <>
+            <MessageStrip hideCloseButton design={MessageStripDesign.Critical} className={classes.unssupportedMessage}>
+              Currently not supported by V2.{' '}
+              <Link
+                ref={linkRef}
+                accessibleRole="Button"
+                onClick={() => {
+                  setPopoverOpen(true);
+                }}
+              >
+                Show more.
               </Link>
-            </>
-          )}
-          {!isTemplate && (
-            <>
-              <br />
-              <br />
-              <Text>What&apos;s included:</Text>
-              {children}
-            </>
-          )}
-        </div>
-      </Card>
+            </MessageStrip>
+            <Popover
+              className={classes.popover}
+              opener={linkRef.current}
+              open={popoverOpen}
+              onClose={() => {
+                setPopoverOpen(false);
+              }}
+            >
+              <Text>
+                Currently, the <code>BarcodeScannerDialog</code> web component isn't compatible with SSR environments.
+                For the Next.js Pages Router and Remix, this bug crashes the entire build process, even if the component
+                isn't imported.
+                <br />
+                This is <b>not</b> the case for the Next.js App Router; there, the build only crashes if the component
+                is used.
+                <br />
+                <br />
+                You can find the corresponding GitHub issue{' '}
+                <Link href="https://github.com/SAP/ui5-webcomponents/issues/9771" target="_blank">
+                  here
+                </Link>
+                .
+              </Text>
+            </Popover>
+          </>
+        )}
+        <Card
+          className={clsx(showUnsupportedMessage && classes.overlay)}
+          header={
+            <CardHeader
+              data-project-template=""
+              titleText={title}
+              subtitleText={subtitle}
+              action={
+                isTypeScript && (
+                  <img
+                    src={TsLogo}
+                    height={24}
+                    width={24}
+                    alt={'TypeScript Logo'}
+                    title={'TypeScript Logo. Original Source: https://www.typescriptlang.org/branding/'}
+                  />
+                )
+              }
+              avatar={
+                <Avatar title={logoAttribution}>
+                  <img src={logo} alt={`Logo of ${title}`} />
+                </Avatar>
+              }
+            />
+          }
+        >
+          <div className={classes.cardContent}>
+            {deprecationNotice && (
+              <MessageStrip
+                hideCloseButton
+                design={MessageStripDesign.Critical}
+                children={deprecationNotice}
+                className={classes.deprecationNotice}
+              />
+            )}
+            <Link design={LinkDesign.Emphasized} href={href}>
+              View Example
+            </Link>
+            {stackBlitzHref && (
+              <>
+                |
+                <Link design={LinkDesign.Emphasized} href={stackBlitzHref}>
+                  View in StackBlitz
+                </Link>
+              </>
+            )}
+            {showNote && (
+              <>
+                <br />
+                <span>
+                  <Label showColon>Note</Label>
+                  <Text>
+                    The <code>BarcodeScannerDialog</code> component is currently{' '}
+                    <Link href="https://github.com/SAP/ui5-webcomponents/issues/9771" target="_blank">
+                      not supported
+                    </Link>
+                    .
+                  </Text>
+                </span>
+              </>
+            )}
+            {!isTemplate && (
+              <>
+                <br />
+                <br />
+                <Text>What&apos;s included:</Text>
+                {children}
+              </>
+            )}
+          </div>
+        </Card>
+      </div>
     </ThemeProvider>
   );
 }

docs/ProjectTemplates.mdx

@@ -1,6 +1,6 @@
 import { Footer, ProjectTemplate, TableOfContent, LabelWithWrapping } from '@sb/components';
 import { Meta } from '@storybook/blocks';
-import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
+import { Link, FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
 import NextLogo from '@sb/images/logo-nextjs.svg';
 import ViteLogo from '@sb/images/logo-vitejs.svg';
 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
     logo={NextLogo}
     logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/templates/nextjs-app'}
+    stackBlitzHref="https://stackblitz.com/github/SAP/ui5-webcomponents-react/tree/main/templates/nextjs-app"
     isTypeScript
     isTemplate
+    showNote
   />
   <ProjectTemplate
     title={'Next.js'}
@@ -35,6 +37,7 @@ A curated list of minimal project templates and examples to get started using UI
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/templates/nextjs-pages'}
     isTypeScript
     isTemplate
+    showUnsupportedMessage
   />
   <ProjectTemplate
     title={'Vite.js'}
@@ -58,7 +61,9 @@ A curated list of minimal project templates and examples to get started using UI
     logo={NextLogo}
     logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app'}
+    stackBlitzHref="https://stackblitz.com/github/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app"
     isTypeScript
+    showNote
   >
     <ul>
       <li>
@@ -76,6 +81,7 @@ A curated list of minimal project templates and examples to get started using UI
     logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-pages'}
     isTypeScript
+    showUnsupportedMessage
   >
     <ul>
       <li>
@@ -114,6 +120,7 @@ A curated list of minimal project templates and examples to get started using UI
     logo={RemixLogo}
     logoAttribution={'Remix.run Logo. Original Source: https://remix.run'}
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/remix-ts'}
+    showUnsupportedMessage
     isTypeScript
   >
     <ul>