chore(ui): migrate InputGroup to Typescript (#569)

* chore(ui): convert inputgroup to ts

* chore(ui): remove native select from tests and stories, add deprecated code for .js files

* chore(ui): revert Button

* chore(ui): fix deprecated tests

* chore(ui): remove deprecated component and make suggested changes

* chore(ui): make imports more explicit

* chore(ui): suggested class name changes

.changeset/shiny-rivers-fetch.md

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

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

@@ -0,0 +1,85 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactNode, isValidElement } from "react"
+import { Stack } from "../Stack/Stack.component"
+import "./input-group.scss"
+
+type VariantTypes = "default" | "primary" | "primary-danger" | "subdued"
+
+export interface InputGroupProps {
+  /**
+   * The children to render within the InputGroup.
+   * This can be any React node or a collection of React nodes such as Buttons, TextInput, and Select elements.
+   */
+  children?: React.ReactNode
+  /**
+   * Additional CSS class name(s) to apply to the InputGroup for custom styling.
+   */
+  className?: string
+  /**
+   * The variant style to apply to the group and its children.
+   */
+  variant?: VariantTypes
+  /**
+   * If true, all elements within the InputGroup will be disabled.
+   * Individual elements can override this setting if needed.
+   */
+  disabled?: boolean
+}
+
+type InheritedProps = { variant?: VariantTypes; disabled?: boolean }
+
+/**
+ * Clones a child element with inherited variant and disabled props.
+ * Individual child props will override inherited ones if specified.
+ *
+ * @returns A cloned child element with the variant and disabled props applied.
+ */
+const cloneElementWithInheritedProps = (
+  child: ReactNode,
+  parentVariant: VariantTypes,
+  parentDisabled: boolean
+): ReactNode => {
+  if (!isValidElement<InheritedProps>(child)) return child
+
+  const combinedProps = {
+    variant: child.props.variant || parentVariant,
+    disabled: child.props.disabled || parentDisabled,
+  }
+  return React.cloneElement(child, combinedProps)
+}
+
+const getClassNames = (baseClassName: string, variant: VariantTypes, disabled: boolean): string => {
+  return `
+    ${baseClassName}-${variant}
+    ${disabled ? `${baseClassName}-disabled` : ""}
+  `
+}
+
+/**
+ * InputGroup is a component used to visually group related elements such as
+ * Buttons, TextInput, and Select elements, providing a cohesive styling approach.
+ */
+export const InputGroup: React.FC<InputGroupProps> = ({
+  children = null,
+  className = "",
+  variant = "default",
+  disabled = false,
+  ...props
+}) => {
+  // Clone each child element with inherited variant and disabled props
+  const modifiedChildren = React.Children.map(children, (child) =>
+    cloneElementWithInheritedProps(child, variant, disabled)
+  )
+
+  const inputGroupClassName = getClassNames("juno-input-group", variant, disabled)
+
+  return (
+    <Stack className={`juno-input-group ${inputGroupClassName} ${className}`} {...props}>
+      {modifiedChildren}
+    </Stack>
+  )
+}

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

@@ -4,11 +4,11 @@
  */
 
 import React from "react"
-import { InputGroup } from "./index.js"
-import { Button } from "../../deprecated_js/Button/index"
-import { NativeSelect } from "../NativeSelect/index"
-import { NativeSelectOption } from "../NativeSelectOption/index"
-import { TextInput } from "../../deprecated_js/TextInput/index"
+
+import { InputGroup } from "./InputGroup.component"
+
+import { Button } from "../Button/Button.component"
+import { TextInput } from "../TextInput/TextInput.component"
 
 export default {
   title: "WiP/InputGroup",
@@ -91,55 +91,3 @@ export const MultipleTextInputsWithButton = {
     ],
   },
 }
-
-export const ButtonWithOptions = {
-  args: {
-    children: [
-      <Button key={0} label="Button with Options" />,
-      <NativeSelect key={1}>
-        <NativeSelectOption value="1" label="Action 1" />
-        <NativeSelectOption value="2" label="Action 2" />
-      </NativeSelect>,
-    ],
-  },
-}
-
-export const SelectWithTextInput = {
-  args: {
-    children: [
-      <NativeSelect key={0}>
-        <NativeSelectOption value="1" label="Action 1" />
-        <NativeSelectOption value="2" label="Action 2" />
-      </NativeSelect>,
-      <TextInput key={1} placeholder="Value…" />,
-    ],
-  },
-}
-
-export const TextInputWithButtonAndOptions = {
-  args: {
-    children: [
-      <TextInput key={0} placeholder="Enter Value…" />,
-      <Button key={1} label="Submit" />,
-      <NativeSelect key={2} placeholder="Other Actions…">
-        <NativeSelectOption value="1" label="Save" />
-        <NativeSelectOption value="2" label="Delete" />
-      </NativeSelect>,
-    ],
-  },
-}
-
-export const SelectWithSelect = {
-  args: {
-    children: [
-      <NativeSelect key={0}>
-        <NativeSelectOption value="1" label="Action 1" />
-        <NativeSelectOption value="2" label="Action 2" />
-      </NativeSelect>,
-      <NativeSelect key={1}>
-        <NativeSelectOption value="2-1" label="Action 1" />
-        <NativeSelectOption value="2-2" label="Action 2" />
-      </NativeSelect>,
-    ],
-  },
-}