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: {

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

@@ -103,7 +103,7 @@ export interface DataGridProps extends React.HTMLAttributes<HTMLDivElement> {
    * which means that all child elements of the cell will be stacked vertically. To avoid this, wrap the elements in their own div */
   cellVerticalAlignment?: CellVerticalAlignmentType
   /** Children to render in the DataGrid */
-  children?: JSX.Element | (JSX.Element[] | JSX.Element | null)[] | null
+  children?: React.ReactNode
   /** Add a class name */
   className?: string
 }

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

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

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

@@ -62,7 +62,7 @@ export interface DataGridCellProps extends React.HTMLAttributes<HTMLDivElement>
   /** Set nowrap to true if the cell content shouldn't wrap (this is achieved by adding white-space: nowrap;) */
   nowrap?: boolean
   /** Children to render in the DataGridCell */
-  children?: (JSX.Element[] | JSX.Element | null)[] | JSX.Element | string | null
+  children?: React.ReactNode
   /** Add a classname */
   className?: string
 }

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

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

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

@@ -13,11 +13,6 @@ type StoryFunction = () => JSX.Element
 export default {
   title: "WiP/DataGrid/DataGridCheckboxCell",
   component: DataGridCheckboxCell,
-  argTypes: {
-    children: {
-      control: false,
-    },
-  },
   decorators: [
     (story: StoryFunction) => (
       <DataGrid columns={3}>

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

@@ -15,7 +15,7 @@ export const DataGridFoot: React.FC<DataGridFootProps> = ({ className = "", chil
 
 export interface DataGridFootProps extends React.HTMLAttributes<HTMLTableSectionElement> {
   /** Children to render in the DataGridFoot */
-  children?: JSX.Element | null
+  children?: React.ReactNode
   /** Add a classname */
   className?: string
 }

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

@@ -14,6 +14,9 @@ export default {
   argTypes: {
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
   decorators: [(story: StoryFunction) => <table>{story()}</table>],

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

@@ -57,7 +57,7 @@ export interface DataGridHeadCellProps extends React.HTMLAttributes<HTMLElement>
   /** Set nowrap to true if the cell content shouldn't wrap (this is achieved by adding white-space: nowrap;) */
   nowrap?: boolean
   /** Children to render in the DataGridHeadCell */
-  children?: JSX.Element | string | null
+  children?: React.ReactNode
   /** Add a classname */
   className?: string
 }

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

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

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

@@ -44,7 +44,7 @@ export interface DataGridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   // /** Whether the row/item is disabled (only relevant in a `selectable` DataGrid */
   // disabled: PropTypes.bool,
   /** Children to render in the DataGridRow */
-  children?: JSX.Element | (JSX.Element | null)[] | null
+  children?: React.ReactNode
   /** Add a classname */
   className?: string
   // /** Pass a handler to be executed when selected state changes */

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

@@ -24,6 +24,9 @@ export default {
     },
     children: {
       control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
   },
   decorators: [(story: StoryFunction) => <DataGrid columns={columns}>{story()}</DataGrid>],

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

@@ -32,7 +32,7 @@ export interface DataGridToolbarProps extends React.HTMLAttributes<HTMLDivElemen
   /** Pass an optional SearchInput component */
   search?: JSX.Element
   /** Children to render in the DataGridToolbar */
-  children?: JSX.Element | null
+  children?: React.ReactNode
   /** Add a classname */
   className?: string
 }

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

@@ -11,7 +11,10 @@ export default {
   component: DataGridToolbar,
   argTypes: {
     children: {
-      control: { type: "text" },
+      control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
     },
     search: {
       control: { type: "text" },

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

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

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

@@ -5,7 +5,7 @@
 
 import React from "react"
 
-const introbox = (variant: string, heroImage: string | null) => {
+const introbox = (variant: string, heroImage: string) => {
   return `
             jn-bg-theme-introbox
             jn-text-theme-default
@@ -30,7 +30,7 @@ const introboxBorder = `
     jn-border-theme-introbox
 `
 
-const introboxContent = (variant: string, heroImage: string | null) => {
+const introboxContent = (variant: string, heroImage: string) => {
   return `
         ${heroImage ? `jn-pl-4 jn-pr-56` : `jn-px-4`}
 
@@ -57,30 +57,28 @@ const introboxHeading = `
 
 export interface IntroBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   /** Pass an optional title */
-  title?: string | null
+  title?: string
   /** Pass a string of text to be rendered as contents. Alternatively, contents can be passed as children (see below) */
-  text?: string | null
+  text?: string
   /** Pass a custom class */
   variant?: "default" | "hero"
   /** optional "hero" flavor image for hero variant. Specify as css bg image string pointing to an image in your app (see template app for an example). Will always be positioned top and right */
-  heroImage?: string | null
+  heroImage?: string
   /** Pass a custom class */
   className?: string
-  /** Pass child nodes to be rendered as contents */
+  /** Pass child nodes to be rendered as content */
   children?: React.ReactNode
-  /** For additional props*/
-  [key: string]: any
 }
 
 /**
 * An Introbox holds generally important information to help understand the contents, purpose, or state of a whole page or view, or individual sections on longer pages.
 Use sparingly, there should never be any two or more subsequent instances of Introbox as direct siblings/neighbors on an individual view.
 */
 export const IntroBox: React.FC<IntroBoxProps> = ({
-  title = null,
-  text = null,
+  title = "",
+  text = "",
   variant = "default",
-  heroImage = null,
+  heroImage = "",
   className = "",
   children,
   ...props

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

@@ -65,7 +65,7 @@ describe("IntroBox", () => {
   })
 
   test("renders other props as passed", () => {
-    render(<IntroBox data-testid="my-introbox" name="My shiny little IntroBox" />)
-    expect(screen.getByTestId("my-introbox")).toHaveAttribute("name", "My shiny little IntroBox")
+    render(<IntroBox data-testid="my-introbox" id="unique-id" />)
+    expect(screen.getByTestId("my-introbox")).toHaveAttribute("id", "unique-id")
   })
 })

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

@@ -137,7 +137,7 @@ const NameLabel: React.FC<NameLabelProps> = ({ name }) => {
 }
 
 interface NameLabelProps {
-  name?: string | number | boolean | null
+  name?: string | number | boolean
 }
 
 // this component show the right side of the json, type + value
@@ -354,7 +354,7 @@ export const JsonViewer: React.FC<JsonViewerProps> = ({
   data = {},
   showRoot = false,
   toolbar = false,
-  theme = null,
+  theme,
   expanded = DEFAULT_EXPANDED,
   indentWidth = DEFAULT_INDENT_WIDTH,
   style,
@@ -436,7 +436,7 @@ export interface JsonViewerProps extends Omit<React.HTMLProps<HTMLDivElement>, "
    * @param base0E collapsed icon, types: "boolean"
    * @param base0F copy icon, type "integer"
    */
-  theme?: themes.JsonViewerTheme | ThemeType | null
+  theme?: themes.JsonViewerTheme | ThemeType
   /** expanded can be true|false or a number. The number denotes the hierarchy level to which the object is expanded. */
   expanded?: boolean | number
   // cut strings after max length is reached, default length is 100 characters, if set to true. Or specifcy a different character length. */

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

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