Skip to content

Commit 21b11f6

Browse files
MarcusNotheisMarcusNotheis
authored
docs: add new Project Templates page featuring Next.js and Vite.js templates (#4761)
1 parent 26cd889 commit 21b11f6

14 files changed

+390
-1633
lines changed

‎.storybook/components/Footer.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
.content {
10-
min-height: var(--_ui5_bar_base_height);
10+
min-height: 2.75rem;
1111
padding-inline: 1rem;
1212
display: flex;
1313
align-items: center;

‎.storybook/components/ProjectTemplate.module.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.card {
2+
width: 500px;
3+
height: 18rem;
4+
margin-inline-end: 2rem;
5+
margin-block-end: 2rem;
6+
}
7+
8+
.cardContent {
9+
padding: 1rem;
10+
}
11+
12+
.deprecationNotice {
13+
margin-block-end: 0.5rem;
14+
}

‎.storybook/components/ProjectTemplate.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import {
2+
Avatar,
3+
Card,
4+
CardHeader,
5+
Link,
6+
LinkDesign,
7+
MessageStrip,
8+
MessageStripDesign,
9+
Text
10+
} from '@ui5/webcomponents-react';
11+
import { ReactNode } from 'react';
12+
import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
13+
import classes from './ProjectTemplate.module.css';
14+
15+
interface ProjectTemplatePropTypes {
16+
title: string;
17+
subtitle?: string;
18+
logo: string;
19+
logoAttribution: string;
20+
isTypeScript?: boolean;
21+
href: string;
22+
children: ReactNode;
23+
deprecationNotice?: string;
24+
}
25+
26+
addCustomCSSWithScoping(
27+
'ui5-card-header',
28+
':host([data-project-template]) .ui5-card-header .ui5-card-header-avatar { pointer-events: auto; }'
29+
);
30+
31+
export function ProjectTemplate(props: ProjectTemplatePropTypes) {
32+
const { title, subtitle, logo, logoAttribution, isTypeScript, children, href, deprecationNotice } = props;
33+
34+
return (
35+
<Card
36+
className={classes.card}
37+
header={
38+
<CardHeader
39+
data-project-template=""
40+
titleText={title}
41+
subtitleText={subtitle}
42+
action={
43+
isTypeScript && (
44+
<img
45+
src={'/ts-logo-128.png'}
46+
height={24}
47+
width={24}
48+
alt={'TypeScript Logo'}
49+
title={'TypeScript Logo. Original Source: https://www.typescriptlang.org/branding/'}
50+
/>
51+
)
52+
}
53+
avatar={
54+
<Avatar title={logoAttribution}>
55+
<img src={logo} alt={`Logo of ${title}`} />
56+
</Avatar>
57+
}
58+
/>
59+
}
60+
>
61+
<div className={classes.cardContent}>
62+
{deprecationNotice && (
63+
<MessageStrip
64+
hideCloseButton
65+
design={MessageStripDesign.Warning}
66+
children={deprecationNotice}
67+
className={classes.deprecationNotice}
68+
/>
69+
)}
70+
71+
<Link design={LinkDesign.Emphasized} href={href}>
72+
View Example
73+
</Link>
74+
<br />
75+
<br />
76+
<Text>What&apos;s included:</Text>
77+
{children}
78+
</div>
79+
</Card>
80+
);
81+
}

‎.storybook/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ export * from './ControlsWithNote';
44
export * from './DocsHeader';
55
export * from './Footer';
66
export * from './ProductsTable';
7+
export * from './ProjectTemplate';
78
export * from './TableOfContent';
89
export * from './DomRefTable';

‎.storybook/images/logo-cra.svg

Lines changed: 1 addition & 0 deletions
Loading

‎.storybook/images/logo-nextjs.svg

Lines changed: 20 additions & 0 deletions
Loading

‎.storybook/images/logo-vitejs.svg

Lines changed: 15 additions & 0 deletions
Loading

‎.storybook/images/ts-logo-128.png

849 Bytes
Loading

‎.storybook/main.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { StorybookConfig } from '@storybook/react-vite';
2-
import { isChromatic } from './utils';
32
import remarkGfm from 'remark-gfm';
3+
import { isChromatic } from './utils';
44

55
const isDevMode = process.env.NODE_ENV === 'development';
66

@@ -74,7 +74,7 @@ const config: StorybookConfig = {
7474
// }
7575
// }
7676
},
77-
staticDirs: [isDevMode ? 'images-dev' : 'images']
77+
staticDirs: [isDevMode && 'images-dev', 'images'].filter(Boolean)
7878
};
7979

8080
export default config;

‎.storybook/preview.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import applyDirection from '@ui5/webcomponents-base/dist/locale/applyDirection.j
66
import '@ui5/webcomponents-icons/dist/AllIcons.js';
77
import { ContentDensity, ThemeProvider } from '@ui5/webcomponents-react';
88
import '@ui5/webcomponents/dist/features/InputElementsFormSupport.js';
9-
import React, { useEffect } from 'react';
9+
import { useEffect } from 'react';
1010
import 'tocbot/dist/tocbot.css';
1111
import '../packages/main/dist/Assets.js';
1212
import languages from './components/languageCodes.json';
@@ -136,6 +136,7 @@ const preview: Preview = {
136136
method: 'alphabetical',
137137
order: [
138138
'Getting Started',
139+
'Project Templates',
139140
'Change Log',
140141
'Migration Guide',
141142
'Knowledge Base',

‎README.md

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,6 @@ You can find our documentation under the following links:
5151
[![](https://badgen.net/npm/v/@ui5/webcomponents-react-base?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
5252
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react-base)](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)
5353

54-
- [@ui5/cra-template-webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template) - Template for `create-react-app` <br/>
55-
[![](https://badgen.net/npm/v/@ui5/cra-template-webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react)
56-
57-
- [@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/>
58-
[![](https://badgen.net/npm/v/@ui5/cra-template-webcomponents-react-seed?icon=npm)](https://www.npmjs.com/package/@ui5/cra-template-webcomponents-react-seed)
59-
6054
<!-- *********************************************************************** -->
6155

6256
<a name="requirements"></a>
@@ -90,25 +84,9 @@ Then take a look at our [Tutorial Mission](https://developers.sap.com/mission.re
9084
There you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.<br />
9185
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.
9286

93-
### Creating a new React app
94-
95-
You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) with our template.
96-
This template is installing all required dependencies for you and is setting up the `App.js` file for you:
97-
98-
```sh
99-
npx create-react-app my-app --template @ui5/webcomponents-react
100-
```
101-
102-
### Creating a new React app based on our Seed
103-
104-
You can create a new react app by using [create-react-app](https://facebook.github.io/create-react-app/) based on our seed.
105-
This template delivers several out of the box components, scripts and configurations.
106-
For more info, check the [seed documentation](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cra-template-seed).
87+
### Create a new React app using our Templates
10788

108-
```sh
109-
npx create-react-app my-app --template @ui5/webcomponents-react-seed
110-
npm run start
111-
```
89+
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).
11290

11391
### Add `@ui5/webcomponents-react` to an existing app
11492

0 commit comments

Comments
 (0)