chore(ui): migrate AppShellProvider and CodeBlock to TypeScript

.changeset/silent-maps-attend.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Migrate AppShellProvider to TypeScript

packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+
+import { StyleProvider } from "../StyleProvider/StyleProvider.component"
+import { ShadowRoot } from "../ShadowRoot/ShadowRoot.component"
+import { PortalProvider } from "../PortalProvider/PortalProvider.component"
+
+/**
+ * This provider acts as a wrapper for Juno apps. It renders a StyleProvider and PortalProvider
+ */
+export const AppShellProvider = ({
+  shadowRoot = true,
+  shadowRootMode = "open",
+  stylesWrapper = "inline",
+  theme = null,
+  children,
+}: AppShellProviderProps) => {
+  const Wrapper = React.useCallback(
+    ({ children }: WrapperProps) => (shadowRoot ? <ShadowRoot mode={shadowRootMode}>{children}</ShadowRoot> : children),
+    [shadowRoot, shadowRootMode]
+  )
+  return (
+    <Wrapper>
+      <StyleProvider theme={theme} stylesWrapper={shadowRoot ? "inline" : stylesWrapper}>
+        <PortalProvider>{children}</PortalProvider>
+      </StyleProvider>
+    </Wrapper>
+  )
+}
+
+export type AppShellStyleWrapper = "head" | "inline"
+
+interface WrapperProps {
+  children?: React.ReactNode
+}
+
+export interface AppShellProviderProps {
+  /** Whether the app is rendered inside a ShadowRoot. Only choose false if the app is meant to run as a stand-alone application. */
+  shadowRoot?: boolean
+  /** Shadow root mode */
+  shadowRootMode?: ShadowRootMode
+  /** Where app stylesheets are imported. This is only relevant if shadowRoot === false. If you use a ShadowRoot the styles must be inline. */
+  stylesWrapper?: AppShellStyleWrapper
+  /** theme: theme-dark or theme-light */
+  theme?: string | null
+  children?: React.ReactNode
+}

packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.js → packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx

@@ -4,9 +4,16 @@
  */
 
 import React from "react"
-import { AppShellProvider } from "."
-import { CodeBlock } from "../CodeBlock/index.js"
+// import { CodeBlock } from "../CodeBlock/index.js"
 import { Message } from "../Message/Message.component"
+import { AppShellProvider, AppShellProviderProps } from "./AppShellProvider.component"
+
+interface CodeBlockProps {
+  children: React.ReactNode
+}
+const CodeBlock = ({ children }: CodeBlockProps) => {
+  return <div>{children}</div>
+}
 
 export default {
   title: "Layout/AppShellProvider",
@@ -18,7 +25,7 @@ export default {
   },
 }
 
-const Template = (args) => <AppShellProvider {...args}>{args.children}</AppShellProvider>
+const Template = (args: AppShellProviderProps) => <AppShellProvider {...args}>{args.children}</AppShellProvider>
 
 export const Default = {
   render: Template,

packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from "react"
+import { render } from "@testing-library/react"
+import { AppShellProvider } from "./index"
+
+describe("AppShellProvider", () => {
+  test("renders an AppShellProvider wrapper div with 'theme-dark' theme class by default", () => {
+    render(<AppShellProvider shadowRoot={false} />)
+    expect(document.querySelector(".juno-app-body")).toHaveClass("theme-dark")
+  })
+
+  test("renders an AppShellProvider wrapper div with theme class as passed", () => {
+    render(<AppShellProvider shadowRoot={false} theme="my-theme" />)
+    expect(document.querySelector("div.juno-app-body")).toHaveClass("my-theme")
+  })
+})

packages/ui-components/src/components/ComboBox/ComboBox.test.js

@@ -7,7 +7,7 @@ import * as React from "react"
 import { cleanup, render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { ComboBox } from "./index"
-import { AppShellProvider } from "../AppShellProvider/index"
+import { AppShellProvider } from "../../deprecated_js/AppShellProvider/index"
 import { ComboBoxOption } from "../ComboBoxOption/index"
 
 const mockOnBlur = jest.fn()

packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.test.js

@@ -5,7 +5,7 @@
 
 import * as React from "react"
 import { cleanup, render, screen, waitFor } from "@testing-library/react"
-import { AppShellProvider } from "../AppShellProvider"
+import { AppShellProvider } from "../../deprecated_js/AppShellProvider"
 import userEvent from "@testing-library/user-event"
 import { ComboBox } from "../ComboBox/ComboBox.component"
 import { ComboBoxOption } from "../ComboBoxOption/ComboBoxOption.component"

packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js

@@ -7,7 +7,7 @@ import React from "react"
 import { cleanup, render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { DateTimePicker } from "./index"
-import { AppShellProvider } from "../AppShellProvider"
+import { AppShellProvider } from "../../deprecated_js/AppShellProvider"
 
 const mockOnOpen = jest.fn()
 const mockOnClear = jest.fn()

packages/ui-components/src/components/Select/Select.test.js

@@ -9,7 +9,7 @@ import { cleanup, render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { Select } from "./index"
 import { SelectOption } from "../SelectOption/index"
-import { AppShellProvider } from "../AppShellProvider/index"
+import { AppShellProvider } from "../../deprecated_js/AppShellProvider/index"
 
 const mockOnChange = jest.fn()
 const mockOnValueChange = jest.fn()

packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx

@@ -149,7 +149,7 @@ export interface StyleProviderProps {
   /** What element to render as a wrapper, respectively where to render the StyleProvider.  */
   stylesWrapper?: StyleProviderStylesWrapper
   /** The name of the theme to render. */
-  theme?: string
+  theme?: string | null
   /** The mode of the shadowRoot. Only relevant when `stylesWrapper="shadowRoot"`. */
   shadowRootMode?: ShadowRootMode
 }

packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.js → packages/ui-components/src/deprecated_js/AppShellProvider/AppShellProvider.component.js

@@ -6,7 +6,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-import { StyleProvider } from "../../deprecated_js/StyleProvider/StyleProvider.component"
+import { StyleProvider } from "../StyleProvider/StyleProvider.component"
 import { ShadowRoot } from "../../deprecated_js/ShadowRoot/ShadowRoot.component"
 import { PortalProvider } from "../../deprecated_js/PortalProvider/PortalProvider.component"
 

packages/ui-components/src/deprecated_js/AppShellProvider/index.js

@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { AppShellProvider } from "./AppShellProvider.component"

packages/ui-components/src/index.js

@@ -7,7 +7,7 @@ import "./global.scss"
 export { AppBody } from "./components/AppBody/index.js"
 export { AppIntro } from "./components/AppIntro/index.js"
 export { AppShell } from "./components/AppShell/index.js"
-export { AppShellProvider } from "./components/AppShellProvider/index.js"
+export { AppShellProvider } from "./deprecated_js//AppShellProvider/index.js"
 export { Badge } from "./components/Badge/index.js"
 export { Box } from "./components/Box/index.js"
 export { Breadcrumb } from "./components/Breadcrumb/index.js"