docs: add new Project Templates page featuring Next.js and Vite.js templates

.storybook/components/Footer.module.css

@@ -7,7 +7,7 @@
 }
 
 .content {
-  min-height: var(--_ui5_bar_base_height);
+  min-height: 2.75rem;
   padding-inline: 1rem;
   display: flex;
   align-items: center;

.storybook/components/ProjectTemplate.module.css

@@ -0,0 +1,14 @@
+.card {
+    width: 500px;
+    height: 18rem;
+    margin-inline-end: 2rem;
+    margin-block-end: 2rem;
+}
+
+.cardContent {
+    padding: 1rem;
+}
+
+.deprecationNotice {
+    margin-block-end: 0.5rem;
+}

.storybook/components/ProjectTemplate.tsx

@@ -0,0 +1,81 @@
+import {
+  Avatar,
+  Card,
+  CardHeader,
+  Link,
+  LinkDesign,
+  MessageStrip,
+  MessageStripDesign,
+  Text
+} from '@ui5/webcomponents-react';
+import { ReactNode } from 'react';
+import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
+import classes from './ProjectTemplate.module.css';
+
+interface ProjectTemplatePropTypes {
+  title: string;
+  subtitle?: string;
+  logo: string;
+  logoAttribution: string;
+  isTypeScript?: boolean;
+  href: string;
+  children: ReactNode;
+  deprecationNotice?: string;
+}
+
+addCustomCSSWithScoping(
+  'ui5-card-header',
+  ':host([data-project-template]) .ui5-card-header .ui5-card-header-avatar { pointer-events: auto; }'
+);
+
+export function ProjectTemplate(props: ProjectTemplatePropTypes) {
+  const { title, subtitle, logo, logoAttribution, isTypeScript, children, href, deprecationNotice } = props;
+
+  return (
+    <Card
+      className={classes.card}
+      header={
+        <CardHeader
+          data-project-template=""
+          titleText={title}
+          subtitleText={subtitle}
+          action={
+            isTypeScript && (
+              <img
+                src={'/ts-logo-128.png'}
+                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.Warning}
+            children={deprecationNotice}
+            className={classes.deprecationNotice}
+          />
+        )}
+
+        <Link design={LinkDesign.Emphasized} href={href}>
+          View Example
+        </Link>
+        <br />
+        <br />
+        <Text>What&apos;s included:</Text>
+        {children}
+      </div>
+    </Card>
+  );
+}

.storybook/components/index.ts

@@ -4,5 +4,6 @@ export * from './ControlsWithNote';
 export * from './DocsHeader';
 export * from './Footer';
 export * from './ProductsTable';
+export * from './ProjectTemplate';
 export * from './TableOfContent';
 export * from './DomRefTable';

.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-import { isChromatic } from './utils';
 import remarkGfm from 'remark-gfm';
+import { isChromatic } from './utils';
 
 const isDevMode = process.env.NODE_ENV === 'development';
 
@@ -74,7 +74,7 @@ const config: StorybookConfig = {
     //   }
     // }
   },
-  staticDirs: [isDevMode ? 'images-dev' : 'images']
+  staticDirs: [isDevMode && 'images-dev', 'images'].filter(Boolean)
 };
 
 export default config;

.storybook/preview.tsx

@@ -6,7 +6,7 @@ import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.j
 import '@ui5/webcomponents-icons/dist/AllIcons.js';
 import { ContentDensity, ThemeProvider } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents/dist/features/InputElementsFormSupport.js';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import 'tocbot/dist/tocbot.css';
 import '../packages/main/dist/Assets.js';
 import languages from './components/languageCodes.json';
@@ -136,6 +136,7 @@ const preview: Preview = {
         method: 'alphabetical',
         order: [
           'Getting Started',
+          'Project Templates',
           'Change Log',
           'Migration Guide',
           'Knowledge Base',

README.md

@@ -51,12 +51,6 @@ You can find our documentation under the following links:
   [![](https://badgen.net/npm/v/@ui5/webcomponents-react-base?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
   [![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react-base)](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)
 
-- [@ui5/cra-template-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template) - Template for `create-react-app` <br/>
-  [![](https://badgen.net/npm/v/@ui5/cra-template-webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react)
-
-- [@ui5/cra-template-webcomponents-react-seed](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template-seed) - Seed for `create-react-app` <br/>
-  [![](https://badgen.net/npm/v/@ui5/cra-template-webcomponents-react-seed?icon=npm)](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react-seed)
-
 <!-- *********************************************************************** -->
 
 <a name="requirements"></a>
@@ -90,25 +84,9 @@ Then take a look at our [Tutorial Mission](https://developers.sap.com/mission.re
 There you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.<br />
 In about an hour you will create a business dashboard from scratch and get familiar with some React basics in case you don't know them already.
 
-### Creating a new React app
-
-You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
-This template is installing all required dependencies for you and is setting up the `App.js` file for you:
-
-```sh
-npx create-react-app my-app --template @ui5/webcomponents-react
-```
-
-### Creating a new React app based on our Seed
-
-You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) based on our seed.
-This template delivers several out of the box components, scripts and configurations.
-For more info, check the [seed documentation](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template-seed).
+### Create a new React app using our Templates
 
-```sh
-npx create-react-app my-app --template @ui5/webcomponents-react-seed
-npm run start
-```
+You can find a curated list of project templates on our [Project Templates page](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/project-templates--docs).
 
 ### Add `@ui5/webcomponents-react` to an existing app