docs: add vite & next templates (#5458)

SAP · Feb 1, 2024 · 1ac10e5 · 1ac10e5
1 parent a84f56a
commit 1ac10e5
Show file tree

Hide file tree

Showing 53 changed files with 15,352 additions and 94 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -20,4 +20,5 @@ scripts
 shared
 CodeGen.tsx
 examples
+templates
 
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -41,21 +41,21 @@
       "matchUpdateTypes": ["minor", "patch"]
     },
     {
-      "description": "Example dependencies",
+      "description": "Example & Template dependencies",
       "extends": ["schedule:weekly"],
-      "matchPaths": ["examples/**"],
+      "matchPaths": ["examples/**", "templates/**"],
       "semanticCommitType": "chore",
-      "groupName": "all non-major dependencies (examples)",
+      "groupName": "all non-major dependencies (examples & templates)",
       "groupSlug": "examples-all-minor-patch",
       "matchPackagePatterns": ["*"],
       "excludePackagePatterns": ["^@ui5/"],
       "matchUpdateTypes": ["minor", "patch"]
     },
     {
-      "description": "UI5 Web Components (for React) in all examples",
-      "groupName": "UI5 Web Components React (examples)",
+      "description": "UI5 Web Components (for React) in all examples & templates",
+      "groupName": "UI5 Web Components React (examples & templates)",
       "groupSlug": "examples-ui5-webcomponents-react",
-      "matchPaths": ["examples/**"],
+      "matchPaths": ["examples/**", "templates/**"],
       "matchSourceUrlPrefixes": [
         "https://github.com/SAP/ui5-webcomponents",
         "https://github.com/SAP/ui5-webcomponents-react"

diff --git a/.gitignore b/.gitignore
@@ -29,7 +29,4 @@ examples/seed-test
 
 scripts/web-component-wrappers/interfaces.json
 
-examples/nextjs-pages/node_modules
-examples/nextjs-app/node_modules
-
 .nx/cache
diff --git a/.storybook/components/ProjectTemplate.module.css b/.storybook/components/ProjectTemplate.module.css
@@ -1,14 +1,19 @@
 .card {
-    width: 500px;
-    height: 18rem;
-    margin-inline-end: 2rem;
-    margin-block-end: 2rem;
+  width: 500px;
+  height: 18rem;
+  margin-block-end: 2rem;
+  flex-shrink: 0;
 }
 
 .cardContent {
-    padding: 1rem;
+  padding: 1rem;
 }
 
 .deprecationNotice {
-    margin-block-end: 0.5rem;
-}
+  margin-block-end: 0.5rem;
+}
+
+.template {
+  width: 300px;
+  height: unset;
+}
diff --git a/.storybook/components/ProjectTemplate.tsx b/.storybook/components/ProjectTemplate.tsx
@@ -10,6 +10,7 @@ import {
   Text,
   ThemeProvider
 } from '@ui5/webcomponents-react';
+import { clsx } from 'clsx';
 import { ReactNode } from 'react';
 import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
 import classes from './ProjectTemplate.module.css';
@@ -23,6 +24,7 @@ interface ProjectTemplatePropTypes {
   href: string;
   children: ReactNode;
   deprecationNotice?: string;
+  isTemplate?: boolean;
 }
 
 addCustomCSSWithScoping(
@@ -31,12 +33,12 @@ addCustomCSSWithScoping(
 );
 
 export function ProjectTemplate(props: ProjectTemplatePropTypes) {
-  const { title, subtitle, logo, logoAttribution, isTypeScript, children, href, deprecationNotice } = props;
+  const { title, subtitle, logo, logoAttribution, isTypeScript, children, href, deprecationNotice, isTemplate } = props;
 
   return (
     <ThemeProvider>
       <Card
-        className={classes.card}
+        className={clsx(classes.card, isTemplate && classes.template)}
         header={
           <CardHeader
             data-project-template=""
@@ -74,10 +76,14 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
           <Link design={LinkDesign.Emphasized} href={href}>
             View Example
           </Link>
-          <br />
-          <br />
-          <Text>What&apos;s included:</Text>
-          {children}
+          {!isTemplate && (
+            <>
+              <br />
+              <br />
+              <Text>What&apos;s included:</Text>
+              {children}
+            </>
+          )}
         </div>
       </Card>
     </ThemeProvider>

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -27,15 +27,6 @@
     max-width: 1100px !important;
   }
 
-  .methodText {
-    color: #333333;
-    font-size: 13px;
-    line-height: 20px;
-    text-align: left;
-    font-style: normal !important;
-    margin-bottom: 0 !important;
-  }
-
   .responsiveGridLayoutItem {
     height: 100px;
     display: flex;
@@ -64,13 +55,6 @@
     padding: 0;
   }
 
-  .chromaticPopoverContainer {
-    height: 500px;
-    width: 500px;
-    display: flex;
-    align-items: center;
-  }
-
   .infoTable {
     margin: 1rem 0;
     border-spacing: 0;

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -136,7 +136,7 @@ const preview: Preview = {
         method: 'alphabetical',
         order: [
           'Getting Started',
-          'Project Templates',
+          'Project Templates & Examples',
           'Change Log',
           'Migration Guide',
           'Knowledge Base',

diff --git a/docs/ProjectTemplates.mdx b/docs/ProjectTemplates.mdx
@@ -1,72 +1,105 @@
 import { Footer, ProjectTemplate, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/blocks';
-import { Label } from '@ui5/webcomponents-react';
+import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
 import NextLogo from '@sb/images/logo-nextjs.svg';
 import ViteLogo from '@sb/images/logo-vitejs.svg';
 
-<Meta title="Project Templates" />
+<Meta title="Project Templates & Examples" />
 
 <TableOfContent />
 
-# Project Templates
+# Project Templates & Examples
 
-A curated list of project templates to get started using UI5 Web Components for React.
+A curated list of minimal project templates and examples to get started using UI5 Web Components for React.
 
-## Official Templates
+## Templates
 
 <br />
 
-<ProjectTemplate
-  title={'Next.js'}
-  subtitle={'App Router'}
-  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'}
-  isTypeScript
->
-  <ul>
-    <li>
-      <Label>Next.js Template using the App Router</Label>
-    </li>
-    <li>
-      <Label>Data Fetching using React Server Components</Label>
-    </li>
-  </ul>
-</ProjectTemplate>
+<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%' }} justifyContent={FlexBoxJustifyContent.SpaceBetween}>
+  <ProjectTemplate
+    title={'Next.js'}
+    subtitle={'App Router'}
+    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'}
+    isTypeScript
+    isTemplate
+  />
+  <ProjectTemplate
+    title={'Next.js'}
+    subtitle={'Pages Router'}
+    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-pages'}
+    isTypeScript
+    isTemplate
+  />
+  <ProjectTemplate
+    title={'Vite.js'}
+    logo={ViteLogo}
+    logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '}
+    href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/templates/vite-ts'}
+    isTypeScript
+    isTemplate
+  />
+</FlexBox>
 
-<ProjectTemplate
-  title={'Next.js'}
-  subtitle={'Pages Router'}
-  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-pages'}
-  isTypeScript
->
-  <ul>
-    <li>
-      <Label>Next.js Template using the Pages Router</Label>
-    </li>
-    <li>
-      <Label>API Routes</Label>
-    </li>
-  </ul>
-</ProjectTemplate>
+## Examples
 
-<ProjectTemplate
-  title={'Vite.js'}
-  logo={ViteLogo}
-  logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '}
-  href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/vite-ts'}
-  isTypeScript
->
-  <ul>
-    <li>
-      <Label>Cypress Component Test setup</Label>
-    </li>
-  </ul>
-</ProjectTemplate>
+<br />
+
+<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%' }} justifyContent={FlexBoxJustifyContent.SpaceBetween}>
+  <ProjectTemplate
+    title={'Next.js'}
+    subtitle={'App Router'}
+    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'}
+    isTypeScript
+  >
+    <ul>
+      <li>
+        <Label>Next.js Template using the App Router</Label>
+      </li>
+      <li>
+        <Label>Data Fetching using React Server Components</Label>
+      </li>
+    </ul>
+  </ProjectTemplate>
+  <ProjectTemplate
+    title={'Next.js'}
+    subtitle={'Pages Router'}
+    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-pages'}
+    isTypeScript
+  >
+    <ul>
+      <li>
+        <Label>Next.js Template using the Pages Router</Label>
+      </li>
+      <li>
+        <Label>API Routes</Label>
+      </li>
+    </ul>
+  </ProjectTemplate>
+  <ProjectTemplate
+    title={'Vite.js'}
+    logo={ViteLogo}
+    logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '}
+    href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/vite-ts'}
+    isTypeScript
+  >
+    <ul>
+      <li>
+        <Label>Cypress Component Test setup</Label>
+      </li>
+    </ul>
+  </ProjectTemplate>
+</FlexBox>
 
-## Community Templates
+## Community Templates & Examples
 
 You can find templates created by our community in the [ui5-web-components-templates](https://github.com/ui5-web-components-templates) organization.
 

diff --git a/examples/vite-ts/src/App.tsx b/examples/vite-ts/src/App.tsx
@@ -1,3 +1,4 @@
+import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js';
 import {
   Avatar,
   FlexBox,
@@ -23,7 +24,7 @@ function App() {
       <ShellBar
         logo={<img src="/vite.svg" alt={'Vite Logo'} />}
         primaryTitle="UI5 Web Components for React Template"
-        profile={<Avatar initials={'UI5'} />}
+        profile={<Avatar icon={employeeIcon} />}
       />
       <FlexBox
         direction={FlexBoxDirection.Column}

diff --git a/examples/vite-ts/src/main.tsx b/examples/vite-ts/src/main.tsx
@@ -1,5 +1,5 @@
-import { ThemeProvider } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-react/dist/Assets.js';
+import { ThemeProvider } from '@ui5/webcomponents-react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';

diff --git a/templates/nextjs-app/.eslintrc.json b/templates/nextjs-app/.eslintrc.json
@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}
diff --git a/templates/nextjs-app/.gitignore b/templates/nextjs-app/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts