feat: create compat package

.storybook/components/Import.tsx

@@ -1,6 +1,5 @@
 import { DocsContext } from '@storybook/addon-docs';
 import { Fragment, useContext } from 'react';
-import { useGetCem, useGetSubComponentsOfModule } from '../utils';
 
 interface ImportStatementPropTypes {
   /**
@@ -12,6 +11,7 @@ interface ImportStatementPropTypes {
    */
   packageName: string;
 }
+
 export const ImportStatement = ({ moduleNames, packageName }: ImportStatementPropTypes) => {
   if (!moduleNames) {
     return null;
@@ -72,12 +72,16 @@ interface ImportProps {
 export const Import = (props: ImportProps) => {
   const context = useContext(DocsContext);
   const isChart = context.componentStories().at(0).id.startsWith('charts-');
+  const isCompat = context.componentStories().at(0).id.startsWith('legacy-');
   const groups = context.componentStories().at(0).kind.split('/');
   const module = groups[groups.length - 1].replace('(experimental)', '').trim();
   const moduleNames = props.moduleNames ?? [module];
 
   return (
-    <ImportStatement moduleNames={moduleNames} packageName={`'@ui5/webcomponents-react${isChart ? '-charts' : ''}'`} />
+    <ImportStatement
+      moduleNames={moduleNames}
+      packageName={`'@ui5/webcomponents-react${isChart ? '-charts' : isCompat ? '-compat' : ''}'`}
+    />
   );
 };
 

.storybook/main.ts

@@ -1,5 +1,5 @@
-import { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join } from 'path';
 import remarkGfm from 'remark-gfm';
 import { isChromatic } from './utils';
 
@@ -58,7 +58,12 @@ const config: StorybookConfig = {
           titlePrefix: 'Testing with Cypress'
         },
         '../packages/main/**/*.mdx',
-        '../packages/main/**/*.stories.@(tsx|jsx)'
+        '../packages/main/**/*.stories.@(tsx|jsx)',
+        {
+          directory: '../packages/compat',
+          files: '**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))',
+          titlePrefix: 'Legacy Components'
+        }
       ],
   addons,
   docs: {

.storybook/preview.tsx

@@ -140,7 +140,14 @@ const preview: Preview = {
           'Migration Guide',
           'Knowledge Base',
           'Testing with Cypress',
-          ['Setup', 'Commands', 'Queries']
+          ['Setup', 'Commands', 'Queries'],
+          'Charts',
+          'Data Display',
+          'Inputs',
+          'Layouts & Floorplans',
+          'Modals & Popovers',
+          'User Feedback',
+          'Legacy Components'
         ]
       }
     },

docs/knowledge-base/ServerSideRendering.mdx

@@ -35,14 +35,13 @@ export default function AppOrRootLayout() {
   // ...
   return (
     // ...
-   <ThemeProvider staticCssInjected>
-   // ...
-   </ThemeProvider>
-  )
+    <ThemeProvider staticCssInjected>
+      {/* your app content */}
+    </ThemeProvider>
+  );
 }
 ```
 
-
 ### Common Pitfalls
 
 #### Icon and Feature Imports in Server Components

package.json

@@ -24,7 +24,8 @@
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "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/)'",
     "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/)'",
-    "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",
+    "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",
+    "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",
     "chromatic": "cross-env STORYBOOK_ENV=chromatic npx chromatic --build-script-name build:storybook",
     "postinstall": "husky && yarn setup",
     "create-cypress-commands-docs": "typedoc && rimraf temp/typedoc",

packages/compat/.gitignore

@@ -0,0 +1,2 @@
+/dist
+src/**/*.css.ts

packages/compat/README.md

@@ -0,0 +1,24 @@
+# @ui5/webcomponents-react-compat
+
+React wrappers for the [@ui5/webcomponents-compat](https://www.npmjs.com/package/@ui5/webcomponents-compat) package.
+
+## Installation
+
+```bash
+npm install @ui5/webcomponents-react-compat
+```
+
+## Documentation
+
+You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
+
+## Contribute
+
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents-react/blob/main/CONTRIBUTING.md).
+
+## License
+
+Please see our [LICENSE](https://github.com/SAP/ui5-webcomponents-react/blob/main/LICENSE) for copyright and license information.
+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).
+
+<!-- Use the force 2 -->

packages/compat/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@ui5/webcomponents-react-compat",
+  "private": true,
+  "version": "1.29.2",
+  "description": "React Wrapper for UI5 Web Components Compat package",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/css/index.css"
+  },
+  "homepage": "https://sap.github.io/ui5-webcomponents-react",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents-react.git",
+    "directory": "packages/compat"
+  },
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "sideEffects": [
+    "./dist/Assets.js",
+    "./dist/json-imports/*"
+  ],
+  "scripts": {
+    "clean": "rimraf dist tmp",
+    "build:css": "postcss --base src --dir dist/css src/**/*.css",
+    "build:css-bundle": "node ../../config/merge-css-modules.js",
+    "watch:css": "yarn build:css --watch"
+  },
+  "dependencies": {
+    "@ui5/webcomponents-react": "workspace:~",
+    "clsx": "2.1.1"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "@ui5/webcomponents-compat": "~2.0.0-rc.5",
+    "@ui5/webcomponents-react": "workspace:~",
+    "react": "^16.14.0 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14.0 || ^17 || ^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    },
+    "@ui5/webcomponents-base": {
+      "optional": true
+    },
+    "@ui5/webcomponents-icons": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "LICENSE",
+    "NOTICE.txt",
+    "README.md"
+  ]
+}

packages/compat/postcss.config.mjs

@@ -0,0 +1,6 @@
+import fs from 'node:fs';
+import { postcssConfigFactory } from '../../config/postcss-config-factory.js';
+
+const packageName = JSON.parse(fs.readFileSync('./package.json').toString()).name;
+
+export default postcssConfigFactory(packageName);

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

@@ -0,0 +1,33 @@
+import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
+import type { LoaderType } from '@/packages/main';
+import { Loader } from '@/packages/main';
+
+// skip until component is moved to this package
+describe.skip('Loader', () => {
+  it('indeterminate', () => {
+    cy.mount(<Loader data-testid="loader" />);
+    cy.findByTestId('loader').should('have.css', 'animation-duration', '1.2s');
+
+    cy.mount(<Loader data-testid="loader" type={LoaderType.Indeterminate} />);
+    cy.findByTestId('loader').should('have.css', 'animation-duration', '1.2s');
+  });
+  it('determinate', () => {
+    cy.mount(<Loader type={LoaderType.Determinate} data-testid="loader" />);
+    cy.findByTestId('loader')
+      .should('have.css', 'animation-duration', '0s')
+      .should('have.css', 'background-size', '0px');
+
+    cy.mount(<Loader type={LoaderType.Determinate} data-testid="loader" progress="50%" />);
+
+    cy.findByTestId('loader')
+      .should('have.css', 'animation-duration', '0s')
+      .should('have.css', 'background-size', '50%');
+  });
+  it('with delay', () => {
+    cy.mount(<Loader delay={300} data-testid="loader" />);
+    cy.findByTestId('loader', { timeout: 200 }).should('not.exist');
+    cy.findByTestId('loader').should('be.visible');
+  });
+
+  cypressPassThroughTestsFactory(Loader);
+});

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

@@ -0,0 +1,3 @@
+.dummy {
+  background-color: red;
+}

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

@@ -0,0 +1,102 @@
+import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
+import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import { TableCell } from '../TableCell';
+import { TableColumn } from '../TableColumn';
+import { TableGroupRow } from '../TableGroupRow';
+import { TableRow } from '../TableRow';
+import * as ComponentStories from './Table.stories';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader />
+
+<br />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+<br />
+
+# More Examples
+
+<br />
+
+## Growing Table
+
+`Table` with `growing={TableGrowingMode.Scroll}`.
+
+<Canvas of={ComponentStories.GrowingTable} />
+
+### Code
+
+```jsx
+const createRows = (indexOffset) => {
+  return new Array(25).fill('').map((_, index) => (
+    <TableRow key={`${index + indexOffset} - row`}>
+      <TableCell>
+        <Label>{index + indexOffset}</Label>
+      </TableCell>
+      <TableCell>
+        <Label>Placeholder</Label>
+      </TableCell>
+    </TableRow>
+  ));
+};
+
+const GrowingTable = () => {
+  const [rows, setRows] = useState(createRows(1));
+  const onLoadMore = () => {
+    setRows((prev) => [...prev, ...createRows(prev.length + 1)]);
+  };
+  return (
+    <div style={{ height: '250px', overflow: 'auto' }}>
+      <Table
+        onLoadMore={onLoadMore}
+        growing={TableGrowingMode.Scroll}
+        columns={
+          <>
+            <TableColumn>
+              <Label>Column 1</Label>
+            </TableColumn>
+            <TableColumn>
+              <Label>Column 2</Label>
+            </TableColumn>
+          </>
+        }
+      >
+        {rows}
+      </Table>
+    </div>
+  );
+};
+```
+
+<Markdown>{SubcomponentsSection}</Markdown>
+
+## TableColumn
+
+<Description of={TableColumn} />
+<ArgTypes of={TableColumn} />
+
+## TableRow
+
+<Description of={TableRow} />
+<ArgTypes of={TableRow} />
+
+## TableGroupRow
+
+<Description of={TableGroupRow} />
+<ArgTypes of={TableGroupRow} />
+
+## TableCell
+
+<Description of={TableCell} />
+<ArgTypes of={TableCell} />
+
+<Footer />