chore: remove react-jss (#5907)

BREAKING CHANGE: UI5 Web Components for React is no longer relying on `react-jss` internally, hence the dependency is now removed and the `react-jss` ThemeProvider is no longer rendered as part of our `ThemeProvider`. If you are relying on `react-jss` in your application, please make sure to render your own `react-jss` ThemeProvider. BREAKING CHANGE: The `useResponsiveContentPadding` has been removed. You can achieve the same look and feel by using the [responsive content padding from Common CSS](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/knowledge-base-common-css--docs#content-paddings).
SAP · Jun 13, 2024 · 5342836 · 5342836
1 parent 2da6d60
commit 5342836
Show file tree

Hide file tree

Showing 22 changed files with 110 additions and 539 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -9,7 +9,6 @@ export default defineConfig({
         '**/src/interfaces/*',
         '**/src/enums/*',
         '**/*.stories.tsx',
-        '**/*.jss.ts',
         '**/*.test.{ts,tsx}',
         '**/node_modules/**',
         'packages/*/src/index.ts',

diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
@@ -17,6 +17,35 @@ or the [changelog](?path=/docs/change-log--page)._
 
 <TableOfContent headingSelector="h2" />
 
+## General changes
+
+### Removed `react-jss`
+
+UI5 Web Components for React is no longer relying on `react-jss` internally, hence the dependency is now removed and the `react-jss` ThemeProvider is no longer rendered as part of our `ThemeProvider`.
+If you are relying on `react-jss` in your application, please make sure to render your own `react-jss` ThemeProvider:
+
+```tsx
+import { ThemeProvider } from '@ui5/webcomponents-react';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { ThemeProvider as ReactJssThemeProvider } from 'react-jss';
+
+function MyRootComponent() {
+  return (
+    <ThemeProvider>
+      <ReactJssThemeProvider theme={ThemingParameters}>{/* your app content goes here */}</ReactJssThemeProvider>
+    </ThemeProvider>
+  );
+}
+```
+
+## Removed hooks
+
+### `useResponsiveContentPadding`
+
+The `useResponsiveContentPadding` hook has been removed.
+You can now apply responsive content paddings by applying the `sap-content-paddings-container` class from `@sap-ui/common-css` package to your element.
+You can find a more detailed documentation [here](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/knowledge-base-common-css--docs#content-paddings).
+
 ## Replaced Components
 
 ### AnalyticalCard

diff --git a/docs/knowledge-base/CommonCSS.mdx b/docs/knowledge-base/CommonCSS.mdx
@@ -0,0 +1,47 @@
+import { Footer, TableOfContent } from '@sb/components';
+import { Meta } from '@storybook/blocks';
+import { Link, MessageStrip } from '@ui5/webcomponents-react';
+
+<Meta title="Common CSS" />
+
+# Using Common CSS in your application
+
+<TableOfContent />
+
+We recommend using the [@sap-ui/common-css](https://www.npmjs.com/package/@sap-ui/common-css) package for applying common styling blocks based on SAP Fiori Design Guidelines.
+
+<MessageStrip
+  hideCloseButton
+  children={
+    <>
+      This documentation is only showing a few samples which we consider to be useful for applications using UI5 Web
+      Components for React. You can find the full documentation for SAP UI Common CSS{' '}
+      <Link href="https://sap.github.io/fundamental-styles/?path=/docs/common-css-introduction--docs">here</Link>.
+    </>
+  }
+></MessageStrip>
+
+<br />
+<br />
+
+## Content Paddings
+
+[Full Documentation](https://sap.github.io/fundamental-styles/?path=/docs/common-css-content-paddings--docs)
+
+You can import the content paddings by adding the following import to your project:
+
+```ts
+import '@sap-ui/common-css/dist/sap-content-paddings.css';
+```
+
+### Responsive Content Paddings
+
+You can apply a dynamic content padding for your element by applying the following classes to your HTML:
+
+```html
+<div class="sap-container-type-inline-size">
+  <div class="sap-content-paddings-container">I will have a responsive content padding</div>
+</div>
+```
+
+<Footer />
diff --git a/docs/knowledge-base/Public-Utils.mdx b/docs/knowledge-base/Public-Utils.mdx
@@ -105,30 +105,4 @@ The `useI18nBundle` hook can be used for adding internationalization to your app
 The `useViewportRange` hook is a utility hook based on the `Device.getCurrentRange()` and `Device.attachMediaHandler` API.
 It will always return a string with the name of the currently active range.
 
-### `useResponsiveContentPadding`
-
-<Source code={`import { useResponsiveContentPadding } from '@ui5/webcomponents-react-base';`} />
-
-The `useResponsiveContentPadding` hook is a hook generating a style class or a tuple containing the style class and the current range if `returnRangeString` is set to `true`.
-It adds `padding-left` and `padding-right` corresponding to the range (retrieved with `Device.getCurrentRange()`) of the element.
-
-```jsx
-const YourComponent = (props) => {
-  const elementRef = useRef(null);
-  const responsivePaddingClass = useResponsiveContentPadding(elementRef.current);
-  return (
-    <div ref={elementRef} className={responsivePaddingClass}>
-      Content
-    </div>
-  );
-};
-```
-
-```js
-// returns the style class as string
-const responsivePaddingClass = useResponsiveContentPadding(elementRef.current);
-// returns a tuple - the first entry is the style class, the second the current range string
-const [responsivePaddingClass, currentRange] = useResponsiveContentPadding(elementRef.current, true);
-```
-
 <Footer />
diff --git a/docs/knowledge-base/ServerSideRendering.mdx b/docs/knowledge-base/ServerSideRendering.mdx
@@ -26,10 +26,22 @@ We have templates available for both the pages and the app router.
 
 In case you already have an existing Next.js project and want to add UI5 Web Components for React to it, you first need to follow our [general Getting Started Guide](https://sap.github.io/ui5-webcomponents-react/?path=/docs/getting-started--docs#add-ui5webcomponents-react-to-an-existing-app).
 
-As UI5 Web Components for React is using `react-jss` internally, you need to apply some changes to your `_app` and `_document` file (in case you are using the pages router).
-You can copy these changes either from the official [next.js-react-jss example](https://github.com/vercel/next.js/tree/canary/examples/with-react-jss) or from our [pages router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-pages).
+For a better SSR support, we recommend importing our stylesheet bundle inside the `_app` file or the root layout (depending on whether you are using the pages or the app router) and set the `staticCssInjected` prop on our `ThemeProvider`:
+
+```tsx
+import '@ui5/webcomponents-react/styles.css';
+
+export default function AppOrRootLayout() {
+  // ...
+  return (
+    // ...
+   <ThemeProvider staticCssInjected>
+   // ...
+   </ThemeProvider>
+  )
+}
+```
 
-In case you are already using the app router, you can copy the `react-jss` setup from the `app/CssRegistry.tsx` in our [app router template](https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app). Make sure to add this component to your root layout!
 
 ### Common Pitfalls
 

diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx
@@ -193,4 +193,8 @@ const TableComponent = () => {
 
 </details>
 
+## Common CSS
+
+For applying common styling blocks based on SAP Fiori Design Guidelines, we recommend using the [@sap-ui/common-css](https://www.npmjs.com/package/@sap-ui/common-css) package. You can find out more about this [here](?path=/docs/knowledge-base-common-css--docs).
+
 <Footer />
diff --git a/examples/nextjs-app/app/CssRegistry.tsx b/examples/nextjs-app/app/CssRegistry.tsx
diff --git a/examples/nextjs-app/app/layout.tsx b/examples/nextjs-app/app/layout.tsx
@@ -1,7 +1,7 @@
 import '@ui5/webcomponents-react/styles.css';
 import './globals.css';
 import { AppShell } from '@/app/components/AppShell';
-import { CssRegistry } from '@/app/CssRegistry';
+import { ThemeProvider } from '@ui5/webcomponents-react';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -19,9 +19,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body>
         <div className="appShell">
-          <CssRegistry>
+          <ThemeProvider staticCssInjected>
             <AppShell>{children}</AppShell>
-          </CssRegistry>
+          </ThemeProvider>
         </div>
       </body>
     </html>

diff --git a/examples/nextjs-pages/README.md b/examples/nextjs-pages/README.md
@@ -1,7 +1,7 @@
 ## UI5 Web Components React - Next.js Pages Router Example
 
 This example shows how to use the [Next.js](https://nextjs.org/) Pages Router with UI5 Web Components for React.
-It includes the required adjustments in `pages/_app.tsx` and `pages/_document.tsx` as well as a very simple Todo
+It includes the required adjustments in `pages/_app.tsx` as well as a very simple Todo
 App.
 
 ## How to use this template

diff --git a/examples/nextjs-pages/pages/_app.tsx b/examples/nextjs-pages/pages/_app.tsx
@@ -4,17 +4,9 @@ import '../styles/globals.css';
 import { ThemeProvider } from '@ui5/webcomponents-react/ssr';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
-import { useEffect } from 'react';
 import { AppShell } from '../components/AppShell';
 
 export default function App({ Component, pageProps }: AppProps) {
-  useEffect(() => {
-    const style = document.getElementById('server-side-styles');
-    if (style) {
-      style.parentNode?.removeChild(style);
-    }
-  }, []);
-
   return (
     <>
       <Head>

diff --git a/examples/nextjs-pages/pages/_document.tsx b/examples/nextjs-pages/pages/_document.tsx
diff --git a/packages/base/src/hooks/index.ts b/packages/base/src/hooks/index.ts
@@ -3,7 +3,6 @@ import { useI18nBundle } from './useI18nBundle.js';
 import { useIsomorphicId } from './useIsomorphicId.js';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 import { useIsRTL } from './useIsRTL.js';
-import { useResponsiveContentPadding } from './useResponsiveContentPadding.js';
 import { useStylesheet } from './useStylesheet.js';
 import { useSyncRef } from './useSyncRef.js';
 import { useViewportRange } from './useViewportRange.js';
@@ -12,7 +11,6 @@ export {
   useI18nBundle,
   useIsomorphicLayoutEffect,
   useIsRTL,
-  useResponsiveContentPadding,
   useSyncRef,
   useViewportRange,
   useIsomorphicId,

diff --git a/packages/base/src/hooks/useResponsiveContentPadding.ts b/packages/base/src/hooks/useResponsiveContentPadding.ts
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -55,7 +55,6 @@
     "@tanstack/react-virtual": "~3.5.0",
     "@ui5/webcomponents-react-base": "workspace:~",
     "clsx": "2.1.1",
-    "react-jss": "^10.10.0",
     "react-table": "7.8.0"
   },
   "peerDependencies": {

diff --git a/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx b/packages/main/src/components/ThemeProvider/ThemeProvider.cy.tsx
@@ -1,13 +1,8 @@
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { useTheme } from 'react-jss';
 
 describe('ThemeProvider', () => {
   it('Provides Correct Context', () => {
     const InnerComponent = () => {
-      const theme = useTheme();
-      expect(JSON.stringify(theme)).equal(JSON.stringify(ThemingParameters));
-
       return (
         <button
           onClick={() => {

diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
@@ -2,15 +2,8 @@
 
 import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
-import {
-  StyleStore,
-  ThemingParameters,
-  useIsomorphicId,
-  useIsomorphicLayoutEffect,
-  useStylesheet
-} from '@ui5/webcomponents-react-base';
+import { StyleStore, useIsomorphicId, useIsomorphicLayoutEffect, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { FC, ReactNode } from 'react';
-import { ThemeProvider as ReactJssThemeProvider } from 'react-jss';
 import { I18nProvider } from '../../internal/I18nProvider.js';
 import { ModalsProvider } from '../Modals/ModalsProvider.js';
 import { styleData } from './ThemeProvider.css.js';
@@ -65,9 +58,7 @@ const ThemeProvider: FC<ThemeProviderPropTypes> = (props: ThemeProviderPropTypes
   return (
     <>
       <ThemeProviderStyles />
-      <ReactJssThemeProvider theme={ThemingParameters}>
-        <I18nProvider>{withoutModalsProvider ? children : <ModalsProvider>{children}</ModalsProvider>}</I18nProvider>
-      </ReactJssThemeProvider>
+      <I18nProvider>{withoutModalsProvider ? children : <ModalsProvider>{children}</ModalsProvider>}</I18nProvider>
     </>
   );
 };