chore(ui): improve component and story types, move deprecated components (1st iteration) (#748)

* chore(ui): move deprecated components, add children type in story, improve types

* chore(ui): fix import

* chore(ui): fix import

* chore(ui): improve types for more components

* chore(ui): fix imports

* chore(ui): changeset

* chore(ui): improve types, fix errors and test

* chore(ui): add missing childred prop

* chore(ui): change default values for IntroBox

* chore(ui): remove unnecessary null

* chore(ui): remove unnecessary null

* chore(ui): change Navigation components activeItem prop

* chore(ui): change Navigation components activeItem prop

* chore(ui): change Navigation components activeItem prop

* chore(ui): export custom types

* chore(ui): remove custom type ItemKeyType

* chore(ui): improve types

* chore(ui): ensure only children rendered as children in CodeBlock

* chore(ui): ensure only children and content strins rendered as children in CodeBlock

Author: guoda-puidokaite

.changeset/strong-carrots-swim.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Improve TS types and documentation

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

@@ -76,7 +76,7 @@ export interface AppShellProps extends React.HTMLAttributes<HTMLElement> {
   /** The main content of the app. */
   children?: React.ReactNode
   /** Pass either the `<PageHeader>` component or if you don't need to add any content to the page header pass a string to be used as the app name in the standard page header. */
-  pageHeader?: string | React.ReactNode
+  pageHeader?: React.ReactNode
   /** Optional. If specified pass a `<PageFooter>` component. If undefined will use default PageFooter */
   pageFooter?: React.ReactNode
   /** Optional. If specified expects a `<TopNavigation>` component. If undefined no top navigation is rendered. */

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

@@ -23,7 +23,7 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLSpanElemen
   /**
    * The icon type to display in the breadcrumb item.
    */
-  icon?: KnownIcons | null
+  icon?: KnownIcons
   /**
    * A URL the breadcrumb item points to for navigation.
    */
@@ -70,10 +70,10 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   disabled = false,
   onClick,
   className = "",
+  icon,
   ...props
 }) => {
   if (children) return <>{children}</>
-  const { icon } = props
   const iconElement = icon ? (
     <Icon icon={icon} size="18" color="jn-text-theme-default" className={label ? "jn-mr-1" : ""} />
   ) : null

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

@@ -137,7 +137,7 @@ export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Bu
 
     const buttonLabel = progress && progressLabel ? progressLabel : label || children
 
-    const handleClick = (event: React.MouseEvent<EventTarget, MouseEvent>) => {
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
       onClick && onClick(event)
     }
 
@@ -218,7 +218,7 @@ export interface ButtonProps
   /** Pass a className */
   className?: string
   /** Click handler  */
-  onClick?: React.MouseEventHandler<EventTarget>
+  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   /** Whether the button action is in progress */
   progress?: boolean
   /** Display an alternative label while the button action is in progress */

packages/ui-components/src/components/Button/Button.stories.tsx

@@ -19,6 +19,12 @@ export default {
       options: ["default", "primary", "primary-danger", "subdued"],
       control: { type: "select" },
     },
+    children: {
+      control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
+    },
   },
 }
 

packages/ui-components/src/components/ButtonRow/ButtonRow.stories.tsx

@@ -31,7 +31,6 @@ export const Default = {
   render: Template,
 
   args: {
-    name: "Default ButtonRow",
     children: [
       <Button key="1" label="Cancel" title="Cancel" />,
       <Button key="2" label="Save" title="Save" variant="primary" />,

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

@@ -161,7 +161,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
       ) : (
         <pre className={`juno-code-block-pre ${preStyles(wrap)} ${sizeStyles(size)}`}>
           <code className={`${codeStyles}`} ref={theCode}>
-            {(content || children) as React.ReactNode}
+            {children ?? (typeof content === "string" ? content : null)}
           </code>
         </pre>
       )}
@@ -181,10 +181,10 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
 type CodeBlockSize = "auto" | "small" | "medium" | "large"
 
 export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content" | "children"> {
-  /** The content to render. Will override children if passed. */
+  /** The content to render. Used when `lang` is "json". Otherwise, if children are not provided. */
   content?: string | object
-  /** The children to render. Will be overridden by content prop if passed as well.  */
-  children?: React.ReactNode | object
+  /** The children to render. Used when `lang` is NOT "json", overriding `content`. */
+  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. */
@@ -193,7 +193,7 @@ export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement
   size?: CodeBlockSize
   /** Render a button to copy the code to the clipboard. Defaults to true */
   copy?: boolean
-  /** Pass a lang prop. Passing "json" will render a fully-featured JsonView. Will also add a data-lang-attribute to the codeblock */
+  /** Pass a lang prop. Passing "json" will render a fully-featured JsonView. Will also add a data-lang attribute to the codeblock */
   lang?: string
   /** Add a custom className to the wrapper of the CodeBlock */
   className?: string

packages/ui-components/src/components/CodeBlock/CodeBlock.stories.tsx

@@ -27,6 +27,9 @@ export default {
     },
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
 }

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

@@ -92,22 +92,6 @@ describe("CodeBlock", () => {
     expect(document.querySelector("[data-json-viewer]")).toBeInTheDocument()
   })
 
-  test("renders a JSONView as passed with children", () => {
-    const testObj = {
-      someKey: "some value",
-      someOtherKey: 12,
-    }
-    render(
-      <CodeBlock data-testid="codeblock" lang="json">
-        {testObj}
-      </CodeBlock>
-    )
-    expect(screen.getByTestId("codeblock")).toBeInTheDocument()
-    expect(screen.getByTestId("codeblock")).toHaveClass("juno-code-block")
-    expect(screen.getByTestId("codeblock")).toHaveAttribute("data-lang", "json")
-    expect(document.querySelector("[data-json-viewer]")).toBeInTheDocument()
-  })
-
   test("renders a CodeBlock with a Copy button by default", () => {
     render(<CodeBlock />)
     expect(screen.getByRole("button", { name: "contentCopy" })).toBeInTheDocument()

packages/ui-components/src/components/Container/Container.stories.tsx

@@ -13,6 +13,9 @@ export default {
   argTypes: {
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
   parameters: {