From 4599ac610fe4d7a4644faa48102987043dc299df Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Wed, 23 Oct 2024 00:17:53 +0200 Subject: [PATCH 01/16] chore(ui): migrate AppShellProvider to TypeScript --- .changeset/silent-maps-attend.md | 5 ++ .../AppShellProvider.component.tsx | 51 +++++++++++++++++++ ...tories.js => AppShellProvider.stories.tsx} | 13 +++-- .../AppShellProvider.test.tsx | 20 ++++++++ .../AppShellProvider/{index.js => index.ts} | 0 .../src/components/ComboBox/ComboBox.test.js | 2 +- .../ComboBoxOption/ComboBoxOption.test.js | 2 +- .../DateTimePicker/DateTimePicker.test.js | 2 +- .../src/components/Select/Select.test.js | 2 +- .../StyleProvider/StyleProvider.component.tsx | 2 +- .../AppShellProvider.component.js | 2 +- .../AppShellProvider/AppShellProvider.test.js | 0 .../deprecated_js/AppShellProvider/index.js | 6 +++ packages/ui-components/src/index.js | 2 +- 14 files changed, 99 insertions(+), 10 deletions(-) create mode 100644 .changeset/silent-maps-attend.md create mode 100644 packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx rename packages/ui-components/src/components/AppShellProvider/{AppShellProvider.stories.js => AppShellProvider.stories.tsx} (86%) create mode 100644 packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx rename packages/ui-components/src/components/AppShellProvider/{index.js => index.ts} (100%) rename packages/ui-components/src/{components => deprecated_js}/AppShellProvider/AppShellProvider.component.js (94%) rename packages/ui-components/src/{components => deprecated_js}/AppShellProvider/AppShellProvider.test.js (100%) create mode 100644 packages/ui-components/src/deprecated_js/AppShellProvider/index.js diff --git a/.changeset/silent-maps-attend.md b/.changeset/silent-maps-attend.md new file mode 100644 index 000000000..4b3f64d7d --- /dev/null +++ b/.changeset/silent-maps-attend.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": minor +--- + +Migrate AppShellProvider to TypeScript diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx new file mode 100644 index 000000000..3844a7e16 --- /dev/null +++ b/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 ? {children} : children), + [shadowRoot, shadowRootMode] + ) + return ( + + + {children} + + + ) +} + +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 +} diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.js b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx similarity index 86% rename from packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.js rename to packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx index ac979fb77..f61243d33 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.js +++ b/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
{children}
+} export default { title: "Layout/AppShellProvider", @@ -18,7 +25,7 @@ export default { }, } -const Template = (args) => {args.children} +const Template = (args: AppShellProviderProps) => {args.children} export const Default = { render: Template, diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx new file mode 100644 index 000000000..dccaf1fe4 --- /dev/null +++ b/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() + expect(document.querySelector(".juno-app-body")).toHaveClass("theme-dark") + }) + + test("renders an AppShellProvider wrapper div with theme class as passed", () => { + render() + expect(document.querySelector("div.juno-app-body")).toHaveClass("my-theme") + }) +}) diff --git a/packages/ui-components/src/components/AppShellProvider/index.js b/packages/ui-components/src/components/AppShellProvider/index.ts similarity index 100% rename from packages/ui-components/src/components/AppShellProvider/index.js rename to packages/ui-components/src/components/AppShellProvider/index.ts diff --git a/packages/ui-components/src/components/ComboBox/ComboBox.test.js b/packages/ui-components/src/components/ComboBox/ComboBox.test.js index d165de214..26f85447e 100644 --- a/packages/ui-components/src/components/ComboBox/ComboBox.test.js +++ b/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() diff --git a/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.test.js b/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.test.js index 8aac13416..06e2cfc65 100644 --- a/packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.test.js +++ b/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" diff --git a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js b/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js index 0c5f91e98..c0bcef8da 100644 --- a/packages/ui-components/src/components/DateTimePicker/DateTimePicker.test.js +++ b/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() diff --git a/packages/ui-components/src/components/Select/Select.test.js b/packages/ui-components/src/components/Select/Select.test.js index 2e2b19b40..9c96c8486 100644 --- a/packages/ui-components/src/components/Select/Select.test.js +++ b/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() diff --git a/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx b/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx index 61b146393..2fe8f069b 100644 --- a/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx +++ b/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 } diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.js b/packages/ui-components/src/deprecated_js/AppShellProvider/AppShellProvider.component.js similarity index 94% rename from packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.js rename to packages/ui-components/src/deprecated_js/AppShellProvider/AppShellProvider.component.js index f86e0e05f..f275fbaae 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.js +++ b/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" diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.js b/packages/ui-components/src/deprecated_js/AppShellProvider/AppShellProvider.test.js similarity index 100% rename from packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.js rename to packages/ui-components/src/deprecated_js/AppShellProvider/AppShellProvider.test.js diff --git a/packages/ui-components/src/deprecated_js/AppShellProvider/index.js b/packages/ui-components/src/deprecated_js/AppShellProvider/index.js new file mode 100644 index 000000000..3af34f51c --- /dev/null +++ b/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" diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js index de648cf60..5ddc5ca58 100644 --- a/packages/ui-components/src/index.js +++ b/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" From 094490122bfeb228f32dfe8609b5bcb81e3392a9 Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Wed, 23 Oct 2024 12:30:04 +0200 Subject: [PATCH 02/16] fix(ui): fix index and wrapper --- .../AppShellProvider.component.tsx | 14 +++++++++----- .../AppShellProvider/AppShellProvider.stories.tsx | 1 - .../AppShellProvider/{index.ts => index.js} | 2 +- packages/ui-components/src/index.js | 2 +- 4 files changed, 11 insertions(+), 8 deletions(-) rename packages/ui-components/src/components/AppShellProvider/{index.ts => index.js} (58%) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index 3844a7e16..7b80c3e65 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -9,6 +9,10 @@ import { StyleProvider } from "../StyleProvider/StyleProvider.component" import { ShadowRoot } from "../ShadowRoot/ShadowRoot.component" import { PortalProvider } from "../PortalProvider/PortalProvider.component" +const Wrapper = ({ children, shadowRoot, shadowRootMode }: WrapperProps) => { + return shadowRoot ? {children} : children +} + /** * This provider acts as a wrapper for Juno apps. It renders a StyleProvider and PortalProvider */ @@ -19,12 +23,8 @@ export const AppShellProvider = ({ theme = null, children, }: AppShellProviderProps) => { - const Wrapper = React.useCallback( - ({ children }: WrapperProps) => (shadowRoot ? {children} : children), - [shadowRoot, shadowRootMode] - ) return ( - + {children} @@ -36,6 +36,10 @@ export type AppShellStyleWrapper = "head" | "inline" interface WrapperProps { children?: React.ReactNode + /** 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 } export interface AppShellProviderProps { diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx index f61243d33..340010c55 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx @@ -4,7 +4,6 @@ */ import React from "react" -// import { CodeBlock } from "../CodeBlock/index.js" import { Message } from "../Message/Message.component" import { AppShellProvider, AppShellProviderProps } from "./AppShellProvider.component" diff --git a/packages/ui-components/src/components/AppShellProvider/index.ts b/packages/ui-components/src/components/AppShellProvider/index.js similarity index 58% rename from packages/ui-components/src/components/AppShellProvider/index.ts rename to packages/ui-components/src/components/AppShellProvider/index.js index 3af34f51c..d9ee83077 100644 --- a/packages/ui-components/src/components/AppShellProvider/index.ts +++ b/packages/ui-components/src/components/AppShellProvider/index.js @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export { AppShellProvider } from "./AppShellProvider.component" +export { AppShellProvider } from "../../depecated_js/AppShellProvider/AppShellProvider.component" diff --git a/packages/ui-components/src/index.js b/packages/ui-components/src/index.js index 5ddc5ca58..fd26ff579 100644 --- a/packages/ui-components/src/index.js +++ b/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 "./deprecated_js//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" From f5f2108fc92ab0ffc7facce916813739c93c39ae Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Wed, 23 Oct 2024 13:01:39 +0200 Subject: [PATCH 03/16] fix(ui): fix index --- packages/ui-components/src/components/AppShellProvider/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/AppShellProvider/index.js b/packages/ui-components/src/components/AppShellProvider/index.js index d9ee83077..f186665dd 100644 --- a/packages/ui-components/src/components/AppShellProvider/index.js +++ b/packages/ui-components/src/components/AppShellProvider/index.js @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export { AppShellProvider } from "../../depecated_js/AppShellProvider/AppShellProvider.component" +export { AppShellProvider } from '../../deprecated_js/AppShellProvider/AppShellProvider.component' \ No newline at end of file From a1b0aa2668b6b5216215480b05b920d403956fad Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Wed, 23 Oct 2024 13:06:33 +0200 Subject: [PATCH 04/16] fix(ui): fix test --- .../src/components/AppShellProvider/AppShellProvider.test.tsx | 2 +- packages/ui-components/src/components/AppShellProvider/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx index dccaf1fe4..abb3ae105 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx @@ -5,7 +5,7 @@ import * as React from "react" import { render } from "@testing-library/react" -import { AppShellProvider } from "./index" +import { AppShellProvider } from "./AppShellProvider.component" describe("AppShellProvider", () => { test("renders an AppShellProvider wrapper div with 'theme-dark' theme class by default", () => { diff --git a/packages/ui-components/src/components/AppShellProvider/index.js b/packages/ui-components/src/components/AppShellProvider/index.js index f186665dd..f102c1979 100644 --- a/packages/ui-components/src/components/AppShellProvider/index.js +++ b/packages/ui-components/src/components/AppShellProvider/index.js @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export { AppShellProvider } from '../../deprecated_js/AppShellProvider/AppShellProvider.component' \ No newline at end of file +export { AppShellProvider } from "../../deprecated_js/AppShellProvider/AppShellProvider.component" From a2e378873fa9a8605bfaf2f12630602a27d1f04e Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Mon, 28 Oct 2024 10:43:36 +0100 Subject: [PATCH 05/16] fix(ui): use CodeBlock in AppShell stories --- .changeset/silent-maps-attend.md | 2 +- .../AppShellProvider/AppShellProvider.stories.tsx | 8 +------- .../components/CodeBlock/CodeBlock.component.tsx | 13 ++++++------- .../src/components/CodeBlock/CodeBlock.stories.tsx | 2 +- 4 files changed, 9 insertions(+), 16 deletions(-) diff --git a/.changeset/silent-maps-attend.md b/.changeset/silent-maps-attend.md index 4b3f64d7d..59abdab0e 100644 --- a/.changeset/silent-maps-attend.md +++ b/.changeset/silent-maps-attend.md @@ -2,4 +2,4 @@ "@cloudoperators/juno-ui-components": minor --- -Migrate AppShellProvider to TypeScript +Migrate AppShellProvider and CodeBlock to TypeScript diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx index 340010c55..bacc074ba 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx @@ -6,13 +6,7 @@ import React from "react" import { Message } from "../Message/Message.component" import { AppShellProvider, AppShellProviderProps } from "./AppShellProvider.component" - -interface CodeBlockProps { - children: React.ReactNode -} -const CodeBlock = ({ children }: CodeBlockProps) => { - return
{children}
-} +import { CodeBlock } from "../CodeBlock/CodeBlock.component" export default { title: "Layout/AppShellProvider", diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index 11babde5a..a48de66fb 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -12,14 +12,14 @@ const wrapperStyles = ` jn-rounded ` -const preStyles = (wrap :boolean) => { +const preStyles = (wrap: boolean) => { return ` jn-p-6 ${wrap ? "jn-break-words jn-break-all jn-whitespace-pre-wrap" : "jn-overflow-x-auto"} ` } -const sizeStyles = (size :CodeBlockSize) => { +const sizeStyles = (size: CodeBlockSize) => { switch (size) { case "small": return ` @@ -116,7 +116,7 @@ export const CodeBlock = ({ lang = "", className = "", ...props -} :CodeBlockProps) => { +}: CodeBlockProps) => { const [isCopied, setIsCopied] = useState(false) const timeoutRef = React.useRef(null) @@ -129,10 +129,9 @@ export const CodeBlock = ({ const handleCopyClick = () => { const textToCopy = lang === "json" ? JSON.stringify(content || children) : theCode.current!.textContent if (textToCopy) { - navigator.clipboard.writeText(textToCopy) - .catch(() => { - console.warn("Cannot copy text to clipboard") - }) + navigator.clipboard.writeText(textToCopy).catch(() => { + console.warn("Cannot copy text to clipboard") + }) } setIsCopied(true) if (timeoutRef.current) { diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.stories.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.stories.tsx index 3ac205802..7a703edfb 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.stories.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.stories.tsx @@ -31,7 +31,7 @@ export default { }, } -const TabsTemplate = ({ tabs, codeBlocks } :TabsTemplateProps) => ( +const TabsTemplate = ({ tabs, codeBlocks }: TabsTemplateProps) => ( {tabs.map((tab, t) => ( From 84cc7264f81ffd8c611e93efcf94cc10f2fe998a Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Mon, 28 Oct 2024 11:53:30 +0100 Subject: [PATCH 06/16] fix(ui): fix types --- .../src/components/CodeBlock/CodeBlock.component.tsx | 6 +++--- .../src/components/JsonViewer/JsonViewer.component.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index a48de66fb..786c97d13 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -154,11 +154,11 @@ export const CodeBlock = ({ "" )} {lang === "json" ? ( - + ) : ( 
           
-            {(content || children) as React.ReactNode}
+            {children}
)} @@ -181,7 +181,7 @@ export interface CodeBlockProps { /** The content to render. Will override children if passed. */ content?: string | object /** The children to render. Will be overridden by content prop if passed as well. */ - children?: React.ReactNode | object + children?: React.ReactNode /** Pass at title to render. Will look like a single tab. */ heading?: string /** Set whether the code should wrap or not. Default is true. */ diff --git a/packages/ui-components/src/components/JsonViewer/JsonViewer.component.tsx b/packages/ui-components/src/components/JsonViewer/JsonViewer.component.tsx index 921a5a91c..055fbfa23 100644 --- a/packages/ui-components/src/components/JsonViewer/JsonViewer.component.tsx +++ b/packages/ui-components/src/components/JsonViewer/JsonViewer.component.tsx @@ -410,7 +410,7 @@ type ThemeType = "dark" | "light" export interface JsonViewerProps extends Omit, "data"> { /** Pass a valid json. Required. */ // data: PropTypes.object.isRequired, - data: object | object[] + data: string | object | object[] /** pass a styles object */ style?: object /** show toolbar */ From 270d55542b0c2ae538b115606b1de8e28ee4b7fb Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Mon, 28 Oct 2024 14:04:01 +0100 Subject: [PATCH 07/16] fix(ui): typings fix --- .../src/components/CodeBlock/CodeBlock.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index 786c97d13..5a4f17ccc 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -158,7 +158,7 @@ export const CodeBlock = ({ ) : ( 
           
-            {children}
+            {children as React.ReactNode}
)} @@ -181,7 +181,7 @@ export interface CodeBlockProps { /** The content to render. Will override children if passed. */ content?: string | object /** The children to render. Will be overridden by content prop if passed as well. */ - children?: React.ReactNode + children?: React.ReactNode | object /** Pass at title to render. Will look like a single tab. */ heading?: string /** Set whether the code should wrap or not. Default is true. */ From cf7c65294a40b440831eeb5acf5ba1dc53d0f587 Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Mon, 28 Oct 2024 14:28:25 +0100 Subject: [PATCH 08/16] fix(ui): fix types --- .../src/components/CodeBlock/CodeBlock.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index 5a4f17ccc..dc01eeea1 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -158,7 +158,7 @@ export const CodeBlock = ({ ) : ( 
           
-            {children as React.ReactNode}
+            {(content || children) as React.ReactNode}
)} From 6ee37e77d6a7258b49f748375a40f71e5b5391da Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Tue, 29 Oct 2024 11:29:52 +0100 Subject: [PATCH 09/16] fix(ui): hanful of improvements --- .../AppShellProvider.component.tsx | 6 +++--- .../AppShellProvider.stories.tsx | 4 ++-- .../CodeBlock/CodeBlock.component.tsx | 18 +++++++++++------- .../components/CodeBlock/CodeBlock.stories.tsx | 10 +++++----- .../components/CodeBlock/CodeBlock.test.tsx | 2 +- 5 files changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index 7b80c3e65..4b8daca2f 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -5,9 +5,9 @@ import React from "react" -import { StyleProvider } from "../StyleProvider/StyleProvider.component" -import { ShadowRoot } from "../ShadowRoot/ShadowRoot.component" -import { PortalProvider } from "../PortalProvider/PortalProvider.component" +import { StyleProvider } from "../StyleProvider" +import { ShadowRoot } from "../ShadowRoot" +import { PortalProvider } from "../PortalProvider" const Wrapper = ({ children, shadowRoot, shadowRootMode }: WrapperProps) => { return shadowRoot ? {children} : children diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx index bacc074ba..4194deae7 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.stories.tsx @@ -4,9 +4,9 @@ */ import React from "react" -import { Message } from "../Message/Message.component" +import { Message } from "../Message" import { AppShellProvider, AppShellProviderProps } from "./AppShellProvider.component" -import { CodeBlock } from "../CodeBlock/CodeBlock.component" +import { CodeBlock } from "../CodeBlock" export default { title: "Layout/AppShellProvider", diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index dc01eeea1..8b6b6c191 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useState, useRef } from "react" -import { JsonViewer } from "../JsonViewer/JsonViewer.component" -import { Icon } from "../Icon/index" +import React, { useState, useRef, useCallback } from "react" +import { JsonViewer } from "../JsonViewer" +import { Icon } from "../Icon" const wrapperStyles = ` jn-bg-theme-code-block @@ -121,12 +121,16 @@ export const CodeBlock = ({ const timeoutRef = React.useRef(null) React.useEffect(() => { - return () => clearTimeout(timeoutRef.current!) // clear when component is unmounted + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + } // clear when component is unmounted }, []) - const theCode = useRef(null) + const theCode = useRef(null) - const handleCopyClick = () => { + const handleCopyClick = useCallback(() => { const textToCopy = lang === "json" ? JSON.stringify(content || children) : theCode.current!.textContent if (textToCopy) { navigator.clipboard.writeText(textToCopy).catch(() => { @@ -138,7 +142,7 @@ export const CodeBlock = ({ clearTimeout(timeoutRef.current) // clear any possibly existing Refs } timeoutRef.current = setTimeout(() => setIsCopied(false), 1000) - } + }, [content, children, theCode, navigator, timeoutRef, setIsCopied]) return (
{ test("renders a CodeBlock with content as passed", () => { From cb21375b924c0c5b6b6c3f91a64707745bf0c25e Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Tue, 29 Oct 2024 11:43:31 +0100 Subject: [PATCH 10/16] fix(ui): fix format --- .../src/components/CodeBlock/CodeBlock.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index 8b6b6c191..f8c1e1dc1 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -122,8 +122,8 @@ export const CodeBlock = ({ React.useEffect(() => { return () => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current) + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) } } // clear when component is unmounted }, []) From a8e0ef7f948a64bfd00dc86118a99b22c5ea0f4a Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Tue, 29 Oct 2024 14:59:00 +0100 Subject: [PATCH 11/16] fix(ui): few improvements --- .../AppShellProvider/AppShellProvider.component.tsx | 8 +++++++- .../src/components/CodeBlock/CodeBlock.component.tsx | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index 4b8daca2f..f08f4914c 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -10,7 +10,13 @@ import { ShadowRoot } from "../ShadowRoot" import { PortalProvider } from "../PortalProvider" const Wrapper = ({ children, shadowRoot, shadowRootMode }: WrapperProps) => { - return shadowRoot ? {children} : children + return shadowRoot ? ( + + <>{children} + + ) : ( + children + ) } /** diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index f8c1e1dc1..76052bda0 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -131,7 +131,7 @@ export const CodeBlock = ({ const theCode = useRef(null) const handleCopyClick = useCallback(() => { - const textToCopy = lang === "json" ? JSON.stringify(content || children) : theCode.current!.textContent + const textToCopy = lang === "json" ? JSON.stringify(content || children) : theCode.current?.textContent if (textToCopy) { navigator.clipboard.writeText(textToCopy).catch(() => { console.warn("Cannot copy text to clipboard") @@ -142,7 +142,7 @@ export const CodeBlock = ({ clearTimeout(timeoutRef.current) // clear any possibly existing Refs } timeoutRef.current = setTimeout(() => setIsCopied(false), 1000) - }, [content, children, theCode, navigator, timeoutRef, setIsCopied]) + }, [content, children, lang]) return (
Date: Fri, 1 Nov 2024 01:04:17 +0100 Subject: [PATCH 12/16] fix(ui): timer type fix --- .../src/components/CodeBlock/CodeBlock.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx index 76052bda0..1561d3832 100644 --- a/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx +++ b/packages/ui-components/src/components/CodeBlock/CodeBlock.component.tsx @@ -118,7 +118,7 @@ export const CodeBlock = ({ ...props }: CodeBlockProps) => { const [isCopied, setIsCopied] = useState(false) - const timeoutRef = React.useRef(null) + const timeoutRef = React.useRef(null) React.useEffect(() => { return () => { @@ -141,7 +141,7 @@ export const CodeBlock = ({ if (timeoutRef.current) { clearTimeout(timeoutRef.current) // clear any possibly existing Refs } - timeoutRef.current = setTimeout(() => setIsCopied(false), 1000) + timeoutRef.current = window.setTimeout(() => setIsCopied(false), 1000) }, [content, children, lang]) return ( From bfef186a694d135321249f38b44f7868d6a03bc5 Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Fri, 1 Nov 2024 01:20:06 +0100 Subject: [PATCH 13/16] fix(ui): change default value --- .../AppShellProvider/AppShellProvider.component.tsx | 5 +++-- .../src/components/StyleProvider/StyleProvider.component.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index f08f4914c..6a1a5b575 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -8,6 +8,7 @@ import React from "react" import { StyleProvider } from "../StyleProvider" import { ShadowRoot } from "../ShadowRoot" import { PortalProvider } from "../PortalProvider" +import { DEFAULT_THEME_NAME } from "../StyleProvider/StyleProvider.component" const Wrapper = ({ children, shadowRoot, shadowRootMode }: WrapperProps) => { return shadowRoot ? ( @@ -26,7 +27,7 @@ export const AppShellProvider = ({ shadowRoot = true, shadowRootMode = "open", stylesWrapper = "inline", - theme = null, + theme = DEFAULT_THEME_NAME, children, }: AppShellProviderProps) => { return ( @@ -56,6 +57,6 @@ export interface AppShellProviderProps { /** 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 + theme?: string children?: React.ReactNode } diff --git a/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx b/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx index 2fe8f069b..66db9c1d2 100644 --- a/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx +++ b/packages/ui-components/src/components/StyleProvider/StyleProvider.component.tsx @@ -29,7 +29,7 @@ export interface StyleContextProps { const StylesContext = createContext(undefined) const APP_BODY_CSS_CLASS_NAME = "juno-app-body" -const DEFAULT_THEME_NAME = "theme-dark" +export const DEFAULT_THEME_NAME = "theme-dark" /** * Component that inserts the ui styles and manages theming and styles. From fc324a482051266ae4898e75f4cb0a4df0b76894 Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Mon, 4 Nov 2024 14:22:35 +0100 Subject: [PATCH 14/16] fix(ui): theme typing fix --- .../AppShellProvider/AppShellProvider.component.tsx | 2 +- .../components/AppShellProvider/AppShellProvider.test.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index 6a1a5b575..bd85f8bb2 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -57,6 +57,6 @@ export interface AppShellProviderProps { /** 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 + theme?: "theme-dark" | "theme-light" children?: React.ReactNode } diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx index abb3ae105..3b6a7f4a3 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.test.tsx @@ -13,8 +13,8 @@ describe("AppShellProvider", () => { expect(document.querySelector(".juno-app-body")).toHaveClass("theme-dark") }) - test("renders an AppShellProvider wrapper div with theme class as passed", () => { - render() - expect(document.querySelector("div.juno-app-body")).toHaveClass("my-theme") + test("renders an AppShellProvider wrapper div with theme as passed", () => { + render() + expect(document.querySelector("div.juno-app-body")).toHaveClass("theme-light") }) }) From 5d5343ae90c214b1ed265497994338a0aa7f2ee9 Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Tue, 5 Nov 2024 00:26:16 +0100 Subject: [PATCH 15/16] fix(ui): inherited class fix --- .../AppShellProvider/AppShellProvider.component.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index bd85f8bb2..138158f01 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -49,14 +49,9 @@ interface WrapperProps { shadowRootMode?: ShadowRootMode } -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 +export interface AppShellProviderProps extends WrapperProps { /** 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?: "theme-dark" | "theme-light" - children?: React.ReactNode } From 21352acab331ef749c12ef4dd857157db60cac7b Mon Sep 17 00:00:00 2001 From: "gjaskiewicz@objectivity.co.uk" Date: Tue, 5 Nov 2024 11:01:01 +0100 Subject: [PATCH 16/16] fix(ui): add comment to improve storybook --- .../components/AppShellProvider/AppShellProvider.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx index 138158f01..d3e9588ca 100644 --- a/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx +++ b/packages/ui-components/src/components/AppShellProvider/AppShellProvider.component.tsx @@ -42,6 +42,7 @@ export const AppShellProvider = ({ export type AppShellStyleWrapper = "head" | "inline" interface WrapperProps { + /** React nodes or a collection of React nodes to be rendered as content. */ children?: React.ReactNode /** 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