Skip to content

Commit f4516cc

Browse files
MarcusNotheisLukas742
MarcusNotheis
and
Lukas742
authored
feat: create compat package (#5894)
Co-authored-by: Lukas Harbarth <[email protected]>
1 parent 9f65c98 commit f4516cc

File tree

23 files changed

+945
-14
lines changed

23 files changed

+945
-14
lines changed

‎.storybook/components/Import.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { DocsContext } from '@storybook/addon-docs';
22
import { Fragment, useContext } from 'react';
3-
import { useGetCem, useGetSubComponentsOfModule } from '../utils';
43

54
interface ImportStatementPropTypes {
65
/**
@@ -12,6 +11,7 @@ interface ImportStatementPropTypes {
1211
*/
1312
packageName: string;
1413
}
14+
1515
export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPropTypes) => {
1616
if (!moduleNames) {
1717
return null;
@@ -72,12 +72,16 @@ interface ImportProps {
7272
export const Import = (props: ImportProps) => {
7373
const context = useContext(DocsContext);
7474
const isChart = context.componentStories().at(0).id.startsWith('charts-');
75+
const isCompat = context.componentStories().at(0).id.startsWith('legacy-');
7576
const groups = context.componentStories().at(0).kind.split('/');
7677
const module = groups[groups.length - 1].replace('(experimental)', '').trim();
7778
const moduleNames = props.moduleNames ?? [module];
7879

7980
return (
80-
<ImportStatement moduleNames={moduleNames} packageName={`'@ui5/webcomponents-react${isChart ? '-charts' : ''}'`} />
81+
<ImportStatement
82+
moduleNames={moduleNames}
83+
packageName={`'@ui5/webcomponents-react${isChart ? '-charts' : isCompat ? '-compat' : ''}'`}
84+
/>
8185
);
8286
};
8387

‎.storybook/main.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { dirname, join } from 'path';
21
import type { StorybookConfig } from '@storybook/react-vite';
2+
import { dirname, join } from 'path';
33
import remarkGfm from 'remark-gfm';
44
import { isChromatic } from './utils';
55

@@ -58,7 +58,12 @@ const config: StorybookConfig = {
5858
titlePrefix: 'Testing with Cypress'
5959
},
6060
'../packages/main/**/*.mdx',
61-
'../packages/main/**/*.stories.@(tsx|jsx)'
61+
'../packages/main/**/*.stories.@(tsx|jsx)',
62+
{
63+
directory: '../packages/compat',
64+
files: '**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))',
65+
titlePrefix: 'Legacy Components'
66+
}
6267
],
6368
addons,
6469
docs: {

‎.storybook/preview.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,14 @@ const preview: Preview = {
140140
'Migration Guide',
141141
'Knowledge Base',
142142
'Testing with Cypress',
143-
['Setup', 'Commands', 'Queries']
143+
['Setup', 'Commands', 'Queries'],
144+
'Charts',
145+
'Data Display',
146+
'Inputs',
147+
'Layouts & Floorplans',
148+
'Modals & Popovers',
149+
'User Feedback',
150+
'Legacy Components'
144151
]
145152
}
146153
},

‎docs/knowledge-base/ServerSideRendering.mdx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,13 @@ export default function AppOrRootLayout() {
3535
// ...
3636
return (
3737
// ...
38-
<ThemeProvider staticCssInjected>
39-
// ...
40-
</ThemeProvider>
41-
)
38+
<ThemeProvider staticCssInjected>
39+
{/* your app content */}
40+
</ThemeProvider>
41+
);
4242
}
4343
```
4444

45-
4645
### Common Pitfalls
4746

4847
#### Icon and Feature Imports in Server Components

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
2525
"wrappers:main": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
2626
"wrappers:fiori": "WITH_WEB_COMPONENT_IMPORT_PATH='../../internal/withWebComponent.js' INTERFACES_IMPORT_PATH='../../types/index.js' node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
27-
"create-webcomponents-wrapper": "yarn run wrappers:main && yarn run wrappers:fiori && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --quiet --fix ./packages/main/src/webComponents && yarn run sb:prepare-cem",
27+
"wrappers:compat": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-compat --out ./packages/compat/src/components --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)' && prettier --log-level silent --write ./packages/compat/src/components && eslint --ext .ts,.tsx --fix ./packages/compat/src/components/*/index.tsx",
28+
"create-webcomponents-wrapper": "yarn run build && yarn run wrappers:main && yarn run wrappers:fiori && yarn run wrappers:compat && prettier --log-level silent --write ./packages/main/src/webComponents && eslint --ext .ts,.tsx --fix ./packages/main/src/webComponents/*/index.tsx && yarn run sb:prepare-cem",
2829
"chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
2930
"postinstall": "husky && yarn setup",
3031
"create-cypress-commands-docs": "typedoc && rimraf temp/typedoc",

‎packages/compat/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/dist
2+
src/**/*.css.ts

‎packages/compat/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# @ui5/webcomponents-react-compat
2+
3+
React wrappers for the [@ui5/webcomponents-compat](https://www.npmjs.com/package/@ui5/webcomponents-compat) package.
4+
5+
## Installation
6+
7+
```bash
8+
npm install @ui5/webcomponents-react-compat
9+
```
10+
11+
## Documentation
12+
13+
You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
14+
15+
## Contribute
16+
17+
Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents-react/blob/main/CONTRIBUTING.md).
18+
19+
## License
20+
21+
Please see our [LICENSE](https://github.com/SAP/ui5-webcomponents-react/blob/main/LICENSE) for copyright and license information.
22+
Detailed information including third-party components and their licensing/copyright information is available via the [REUSE tool](https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-react).
23+
24+
<!-- Use the force 2 -->

‎packages/compat/package.json

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{
2+
"name": "@ui5/webcomponents-react-compat",
3+
"private": true,
4+
"version": "1.29.2",
5+
"description": "React Wrapper for UI5 Web Components Compat package",
6+
"type": "module",
7+
"main": "dist/index.js",
8+
"module": "dist/index.js",
9+
"types": "dist/index.d.ts",
10+
"exports": {
11+
".": {
12+
"types": "./dist/index.d.ts",
13+
"default": "./dist/index.js"
14+
},
15+
"./package.json": "./package.json",
16+
"./styles.css": "./dist/css/index.css"
17+
},
18+
"homepage": "https://sap.github.io/ui5-webcomponents-react",
19+
"repository": {
20+
"type": "git",
21+
"url": "https://github.com/SAP/ui5-webcomponents-react.git",
22+
"directory": "packages/compat"
23+
},
24+
"author": "SAP SE (https://www.sap.com)",
25+
"license": "Apache-2.0",
26+
"sideEffects": [
27+
"./dist/Assets.js",
28+
"./dist/json-imports/*"
29+
],
30+
"scripts": {
31+
"clean": "rimraf dist tmp",
32+
"build:css": "postcss --base src --dir dist/css src/**/*.css",
33+
"build:css-bundle": "node ../../config/merge-css-modules.js",
34+
"watch:css": "yarn build:css --watch"
35+
},
36+
"dependencies": {
37+
"@ui5/webcomponents-react": "workspace:~",
38+
"clsx": "2.1.1"
39+
},
40+
"peerDependencies": {
41+
"@types/react": "*",
42+
"@types/react-dom": "*",
43+
"@ui5/webcomponents-compat": "~2.0.0-rc.5",
44+
"@ui5/webcomponents-react": "workspace:~",
45+
"react": "^16.14.0 || ^17 || ^18 || ^19",
46+
"react-dom": "^16.14.0 || ^17 || ^18 || ^19"
47+
},
48+
"peerDependenciesMeta": {
49+
"@types/react": {
50+
"optional": true
51+
},
52+
"@types/react-dom": {
53+
"optional": true
54+
},
55+
"@ui5/webcomponents-base": {
56+
"optional": true
57+
},
58+
"@ui5/webcomponents-icons": {
59+
"optional": true
60+
}
61+
},
62+
"publishConfig": {
63+
"access": "public"
64+
},
65+
"files": [
66+
"dist",
67+
"CHANGELOG.md",
68+
"LICENSE",
69+
"NOTICE.txt",
70+
"README.md"
71+
]
72+
}

‎packages/compat/postcss.config.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import fs from 'node:fs';
2+
import { postcssConfigFactory } from '../../config/postcss-config-factory.js';
3+
4+
const packageName = JSON.parse(fs.readFileSync('./package.json').toString()).name;
5+
6+
export default postcssConfigFactory(packageName);

‎packages/compat/src/components/Loader/Loader.cy.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
2+
import type { LoaderType } from '@/packages/main';
3+
import { Loader } from '@/packages/main';
4+
5+
// skip until component is moved to this package
6+
describe.skip('Loader', () => {
7+
it('indeterminate', () => {
8+
cy.mount(<Loader data-testid="loader" />);
9+
cy.findByTestId('loader').should('have.css', 'animation-duration', '1.2s');
10+
11+
cy.mount(<Loader data-testid="loader" type={LoaderType.Indeterminate} />);
12+
cy.findByTestId('loader').should('have.css', 'animation-duration', '1.2s');
13+
});
14+
it('determinate', () => {
15+
cy.mount(<Loader type={LoaderType.Determinate} data-testid="loader" />);
16+
cy.findByTestId('loader')
17+
.should('have.css', 'animation-duration', '0s')
18+
.should('have.css', 'background-size', '0px');
19+
20+
cy.mount(<Loader type={LoaderType.Determinate} data-testid="loader" progress="50%" />);
21+
22+
cy.findByTestId('loader')
23+
.should('have.css', 'animation-duration', '0s')
24+
.should('have.css', 'background-size', '50%');
25+
});
26+
it('with delay', () => {
27+
cy.mount(<Loader delay={300} data-testid="loader" />);
28+
cy.findByTestId('loader', { timeout: 200 }).should('not.exist');
29+
cy.findByTestId('loader').should('be.visible');
30+
});
31+
32+
cypressPassThroughTestsFactory(Loader);
33+
});

‎packages/compat/src/components/Loader/Loader.module.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.dummy {
2+
background-color: red;
3+
}

‎packages/compat/src/components/Table/Table.mdx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2+
import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
3+
import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks';
4+
import { TableCell } from '../TableCell';
5+
import { TableColumn } from '../TableColumn';
6+
import { TableGroupRow } from '../TableGroupRow';
7+
import { TableRow } from '../TableRow';
8+
import * as ComponentStories from './Table.stories';
9+
10+
<Meta of={ComponentStories} />
11+
12+
<DocsHeader />
13+
14+
<br />
15+
16+
## Example
17+
18+
<Canvas of={ComponentStories.Default} />
19+
20+
## Properties
21+
22+
<ControlsWithNote of={ComponentStories.Default} />
23+
24+
<br />
25+
26+
# More Examples
27+
28+
<br />
29+
30+
## Growing Table
31+
32+
`Table` with `growing={TableGrowingMode.Scroll}`.
33+
34+
<Canvas of={ComponentStories.GrowingTable} />
35+
36+
### Code
37+
38+
```jsx
39+
const createRows = (indexOffset) => {
40+
return new Array(25).fill('').map((_, index) => (
41+
<TableRow key={`${index + indexOffset} - row`}>
42+
<TableCell>
43+
<Label>{index + indexOffset}</Label>
44+
</TableCell>
45+
<TableCell>
46+
<Label>Placeholder</Label>
47+
</TableCell>
48+
</TableRow>
49+
));
50+
};
51+
52+
const GrowingTable = () => {
53+
const [rows, setRows] = useState(createRows(1));
54+
const onLoadMore = () => {
55+
setRows((prev) => [...prev, ...createRows(prev.length + 1)]);
56+
};
57+
return (
58+
<div style={{ height: '250px', overflow: 'auto' }}>
59+
<Table
60+
onLoadMore={onLoadMore}
61+
growing={TableGrowingMode.Scroll}
62+
columns={
63+
<>
64+
<TableColumn>
65+
<Label>Column 1</Label>
66+
</TableColumn>
67+
<TableColumn>
68+
<Label>Column 2</Label>
69+
</TableColumn>
70+
</>
71+
}
72+
>
73+
{rows}
74+
</Table>
75+
</div>
76+
);
77+
};
78+
```
79+
80+
<Markdown>{SubcomponentsSection}</Markdown>
81+
82+
## TableColumn
83+
84+
<Description of={TableColumn} />
85+
<ArgTypes of={TableColumn} />
86+
87+
## TableRow
88+
89+
<Description of={TableRow} />
90+
<ArgTypes of={TableRow} />
91+
92+
## TableGroupRow
93+
94+
<Description of={TableGroupRow} />
95+
<ArgTypes of={TableGroupRow} />
96+
97+
## TableCell
98+
99+
<Description of={TableCell} />
100+
<ArgTypes of={TableCell} />
101+
102+
<Footer />

0 commit comments

Comments
 (0)