A violation against the OSS Rules of Play has been detected.

Rule ID: rl-vulnerability_alerts-1
Explanation: Are vulnerability alerts enabled? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-security_policy-1
Explanation: Does it have a security policy? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Is there a easy way internationalize SAP UI5 webcomponents for react accordingly with SAP standards? Perhaps using web-components-core?

Thank you.

Do you have any working examples of a TypeScript React App, using UI5 Web Components, with tests using Jest?

I've tried creating an app with create-react-app --template typescript, then adding UI5 WC, but as soon as I started importing the components in my files, I had several problems when running the pre-configured tests.

Example:

App.tsx

import React from 'react';
import { Button } from "@ui5/webcomponents-react/lib/Button";
import { Title } from "@ui5/webcomponents-react/lib/Title";

function App() {
  return (
    <div className="App">
      <h1>HTML Hello World</h1>
      <Title>UI5 Hello World</Title>
      <Button>UI5 Button</Button>
    </div>
  );
}

export default App;

App.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

(I know the assertion would fail, but I couldn't even get to this point)

When running yarn test:

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-vulnerability_alerts-1
Explanation: Are vulnerability alerts enabled? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Is it possible to clear the text input value after the Add Todo action?

I've tried to clear the this.todoInput.current.value, but it doesn't seem to clear the input text field, is there any better way to do it?

Thanks so much!

HI,

on my Windows 10 machine the sample app does not work with Microsoft Edge. It seems that none CSS are applied as the page does only contain texts.

There are no errors in the log.

BR,
Juri

Running npm start result in the following error:

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:386:16)
    at handleParseError (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:434:10)
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:466:5
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:327:12
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/scripts/start.js:11
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:386:16)
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:418:10
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/webpack/lib/NormalModule.js:293:13
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/perage/dev/POC/react1/ui5-webcomponents-sample-react/node_modules/babel-loader/lib/index.js:51:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-4
Explanation: Is it compliant with REUSE rules? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

After 0.10.0 the ui5-toolbar is removed. However, the dialog still uses it

this is the "official" react example, i.e. i got here through the link on the front page of the website. the usecase of webcomponents for me is to use typescript (+ react) while retaining the familiar ui5 look for our customers. i started off writing types for the jsx elements by basically copying the interfaces from the playground, until i realized that there already was a react wrapper. maybe at least reference that wrapper so other developers don't start writing their own type definitions before coming to the same realization.

Hello Team,

I'm facing the following problem:
Steps to reproduce:

1. npx create-react-app </app_name>
2. npm i -S @ui5/webcomponents-react
3. Follow the instructions for the tests Set up Tests
4. npm i -D enzyme enzyme-adapter-react-16
5. setupTest.js looks like this:

import '@testing-library/jest-dom/extend-expect';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

6. App.js looks like this:

import React from 'react';

import '@ui5/webcomponents/dist/json-imports/i18n';

import '@ui5/webcomponents/dist/json-imports/Themes';
import '@ui5/webcomponents-fiori/dist/json-imports/Themes';

import './App.css';
import { Button, ShellBar, ThemeProvider } from '@ui5/webcomponents-react';

function App() {
  return (
    <div>
      <ThemeProvider withToastContainer>
        <ShellBar />
        <Button>Click Me!</Button>
      </ThemeProvider>
    </div>
  );
}

export default App;

7. The test looks like this

import React from 'react';
import App from './App';
import { shallow } from 'enzyme'

test('renders learn react link', () => {
  let shallow1 = shallow(<App />);
});

So far so good the test starts with 100 warnings in the console about the i18n (by the way your app is also starting with them ui5-webcomponents-sample-react ) but the test is loaded and so on.

so you are a suggesting to eject from the standard CRA and to continue on our own and to add in the config/webpack.config.js the following in order to solve the warnings:

 {
              test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/, /assets\/.*\.json$/],
              loader: 'file-loader',
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
              type: 'javascript/auto',
            }

so far so good the warnings are gone from the console and all the assets are now loaded fine.
But the test is not working any mode I am getting the following error:

node_modules/@ui5/webcomponents/dist/json-imports/i18n.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";

Which was solved before with Set up Tests

So please advice what I'm are doing wrong or what I'm missing in the whole configuration.

Thanks & Regards,
Ivan

Add a Webpack configuration for IE11 support

Looking through the samples, all click events are being treated using the useEffect hook, adding listeners to the click event:

useEffect(() => {
    saveBtn.current.addEventListener("click", handleSave);
    return () => {
      saveBtn.current.removeEventListener("click", handleSave);
    }
  }, [handleSave]);

I'm new to React, so I'm not really sure about what is the advantage of this approach over using the onClick event already available as default from the components, like this:

<ui5-button design="Emphasized" onClick={handleSave}>Save</ui5-button>

What is the recommendation? useEffect should always be preferred over onClick?

I have deployed the react ui5 application in SAP BTP. When I introduce routing using react-router-dom it is saying File Not found

approuter->xs-app.json
{ "welcomeFile": "/salesorderapp" }

public->xs-app.json
{ "welcomeFile": "/index.html", "authenticationMethod": "route", "logout": { "logoutEndpoint": "/do/logout" }, "routes": [ { "source": "^(.*)$", "target": "$1", "service": "html5-apps-repo-rt", "authenticationType": "xsuaa" } ] }

App id is also added to manifest.json
The routing logic
<Routes> <Route path='/' element={<div>Main</div>}/> <Route path='detail' element={<div>Detail</div>}/> </Routes>

Initially the page is loading Main div . But when I hit the detail route, it is saying File not found