From 4a212b729c5d36de556397c28a14dd1018b4f23e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ja=C5=9Bkiewicz?= <gj.jaskiewicz@gmail.com>
Date: Mon, 2 Sep 2024 23:04:47 +0200
Subject: [PATCH] chore(ui): introduce TS version of TextBox and dependencies
 (#289)

* chore(ui): Add TS version of TextArea, Label and FormHint

* fix(ui): fix FormHint TS types

* fix(ui): playbook naming fix

* fix(ui): playbook stories fix

* fix(ui): fix textarea story

* fix(ui): format and naming fix

---------

Co-authored-by: gjaskiewicz@objectivity.co.uk <gjaskiewicz@objectivity.co.uk>
---
 .../CheckboxGroup/CheckboxGroup.component.js  |   2 +-
 .../components/FormHint/FormHint.component.js |   2 +
 .../components/FormHint/FormHint.stories.js   |   2 +-
 .../FormHintTs/FormHint.component.tsx         |  54 ++++
 .../FormHintTs/FormHint.stories.tsx           |  77 +++++
 .../components/FormHintTs/FormHint.test.tsx   |  72 +++++
 .../src/components/FormHintTs/index.ts        |   6 +
 .../src/components/Label/Label.component.js   |   2 +-
 .../src/components/Label/Label.stories.js     |   4 +-
 .../components/LabelTs/Label.component.tsx    | 109 +++++++
 .../src/components/LabelTs/Label.stories.ts   |  32 ++
 .../src/components/LabelTs/Label.test.tsx     |  55 ++++
 .../src/components/LabelTs/index.ts           |   6 +
 .../SecretText/SecretText.component.js        |   2 +-
 .../TextAreaTs/Textarea.component.tsx         | 290 ++++++++++++++++++
 .../TextAreaTs/Textarea.stories.tsx           |  98 ++++++
 .../components/TextAreaTs/Textarea.test.tsx   | 152 +++++++++
 .../src/components/TextAreaTs/index.ts        |   6 +
 .../components/Textarea/Textarea.stories.js   |   2 +-
 19 files changed, 966 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui-components/src/components/FormHintTs/FormHint.component.tsx
 create mode 100644 packages/ui-components/src/components/FormHintTs/FormHint.stories.tsx
 create mode 100644 packages/ui-components/src/components/FormHintTs/FormHint.test.tsx
 create mode 100644 packages/ui-components/src/components/FormHintTs/index.ts
 create mode 100644 packages/ui-components/src/components/LabelTs/Label.component.tsx
 create mode 100644 packages/ui-components/src/components/LabelTs/Label.stories.ts
 create mode 100644 packages/ui-components/src/components/LabelTs/Label.test.tsx
 create mode 100644 packages/ui-components/src/components/LabelTs/index.ts
 create mode 100644 packages/ui-components/src/components/TextAreaTs/Textarea.component.tsx
 create mode 100644 packages/ui-components/src/components/TextAreaTs/Textarea.stories.tsx
 create mode 100644 packages/ui-components/src/components/TextAreaTs/Textarea.test.tsx
 create mode 100644 packages/ui-components/src/components/TextAreaTs/index.ts

diff --git a/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.js b/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.js
index 6a6b616f7..248f837d4 100644
--- a/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.js
+++ b/packages/ui-components/src/components/CheckboxGroup/CheckboxGroup.component.js
@@ -5,7 +5,7 @@
 
 import React, { useState, useEffect, useMemo, createContext, useId } from "react"
 import PropTypes from "prop-types"
-import { Label } from "../Label/index.js"
+import { Label } from "../Label/index"
 import { Icon } from "../Icon/index"
 import { FormHint } from "../FormHint/index"
 
diff --git a/packages/ui-components/src/components/FormHint/FormHint.component.js b/packages/ui-components/src/components/FormHint/FormHint.component.js
index 5e9121668..da63f92c2 100644
--- a/packages/ui-components/src/components/FormHint/FormHint.component.js
+++ b/packages/ui-components/src/components/FormHint/FormHint.component.js
@@ -39,6 +39,8 @@ export const FormHint = ({ children = null, text = "", variant = "help", classNa
   )
 }
 
+FormHint.displayName = "FormHint Js"
+
 FormHint.propTypes = {
   /** The children to render as a hint associated with a form element */
   children: PropTypes.node,
diff --git a/packages/ui-components/src/components/FormHint/FormHint.stories.js b/packages/ui-components/src/components/FormHint/FormHint.stories.js
index a4ae7bc67..0bfb5191c 100644
--- a/packages/ui-components/src/components/FormHint/FormHint.stories.js
+++ b/packages/ui-components/src/components/FormHint/FormHint.stories.js
@@ -8,7 +8,7 @@ import PropTypes from "prop-types"
 import { FormHint } from "./index.js"
 
 export default {
-  title: "Forms/FormHint",
+  title: "Forms/FormHint (JS, deprecated)",
   component: FormHint,
   argTypes: {
     children: {
diff --git a/packages/ui-components/src/components/FormHintTs/FormHint.component.tsx b/packages/ui-components/src/components/FormHintTs/FormHint.component.tsx
new file mode 100644
index 000000000..9372bf0ea
--- /dev/null
+++ b/packages/ui-components/src/components/FormHintTs/FormHint.component.tsx
@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactNode } from "react"
+
+const baseStyles = `
+  jn-text-xs
+  jn-mt-1
+`
+
+type FormHintVariant = "help" | "error" | "success"
+
+const variantStyles = (variant: FormHintVariant) => {
+  switch (variant) {
+    case "success":
+      return "jn-text-theme-success"
+    case "error":
+      return "jn-text-theme-error"
+    default:
+      return "jn-text-theme-light"
+  }
+}
+
+export const FormHint = ({ children = null, text = "", variant = "help", className, ...props }: FormHintProps) => {
+  return (
+    <div
+      className={`
+        juno-form-hint
+        juno-form-hint-${variant}
+        ${baseStyles}
+        ${variantStyles(variant)}
+        ${className}
+      `}
+      {...props}
+    >
+      {children || text}
+    </div>
+  )
+}
+
+FormHint.displayName = "FormHint"
+
+export interface FormHintProps {
+  /** The children to render as a hint associated with a form element */
+  children?: ReactNode
+  /** The text to render. If both children and text are passed, children will rendered */
+  text?: ReactNode | string
+  /** The variant of the the hint. Defaults to 'help'. */
+  variant?: FormHintVariant
+  /** Pass a custom className */
+  className?: string
+}
diff --git a/packages/ui-components/src/components/FormHintTs/FormHint.stories.tsx b/packages/ui-components/src/components/FormHintTs/FormHint.stories.tsx
new file mode 100644
index 000000000..80f8d398f
--- /dev/null
+++ b/packages/ui-components/src/components/FormHintTs/FormHint.stories.tsx
@@ -0,0 +1,77 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import PropTypes from "prop-types"
+import { FormHint } from "./index"
+
+export default {
+  title: "Forms/FormHint",
+  component: FormHint,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+}
+
+type TemplateProps = {
+  children: React.ReactNode
+}
+
+const Template = ({ children, ...args }: TemplateProps) => <FormHint {...args}>{children}</FormHint>
+Template.propTypes = {
+  children: PropTypes.node,
+}
+
+export const Default = {
+  render: Template,
+
+  args: {
+    text: "A simple hint to be associated with a form input",
+  },
+}
+
+export const WithChildren = {
+  render: Template,
+
+  args: {
+    children: (
+      <>
+        A FormHint with a <a href="#">Link</a>.
+      </>
+    ),
+  },
+}
+
+export const WithTextAsChildren = {
+  render: Template,
+
+  args: {
+    text: (
+      <>
+        A FormHint with a <a href="#">Link</a>.
+      </>
+    ),
+  },
+}
+
+export const ErrorVariant = {
+  render: Template,
+
+  args: {
+    variant: "error",
+    text: "A FormHint containing an error or invalidation message",
+  },
+}
+
+export const SuccessVariant = {
+  render: Template,
+
+  args: {
+    variant: "success",
+    text: "A FormHint containg a success or validation message",
+  },
+}
diff --git a/packages/ui-components/src/components/FormHintTs/FormHint.test.tsx b/packages/ui-components/src/components/FormHintTs/FormHint.test.tsx
new file mode 100644
index 000000000..2f599c2bd
--- /dev/null
+++ b/packages/ui-components/src/components/FormHintTs/FormHint.test.tsx
@@ -0,0 +1,72 @@
+/*
+ * 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, screen } from "@testing-library/react"
+import { FormHint } from "./index"
+
+describe("FormHint", () => {
+  test("renders a FormHint", () => {
+    render(<FormHint data-testid="my-form-hint" />)
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+  })
+
+  test("renders children as passed", () => {
+    render(
+      <FormHint data-testid="my-form-hint">
+        <button></button>
+      </FormHint>
+    )
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByRole("button")).toBeInTheDocument()
+  })
+
+  test("renders a text as passed", () => {
+    render(<FormHint data-testid="my-form-hint" text="My form-related message" />)
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByTestId("my-form-hint")).toHaveTextContent("My form-related message")
+  })
+
+  test("renders children if both children and text have been passed", () => {
+    render(
+      <FormHint data-testid="my-form-hint" text="123">
+        <>abc</>
+      </FormHint>
+    )
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByTestId("my-form-hint")).toHaveTextContent("abc")
+    expect(screen.getByTestId("my-form-hint")).not.toHaveTextContent("123")
+  })
+
+  test("renders a help message by default", () => {
+    render(<FormHint data-testid="my-form-hint" />)
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-help")
+  })
+
+  test("renders an error message as passed", () => {
+    render(<FormHint data-testid="my-form-hint" variant="error" />)
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-error")
+  })
+
+  test("renders a success message as passed", () => {
+    render(<FormHint data-testid="my-form-hint" variant="success" />)
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByTestId("my-form-hint")).toHaveClass("juno-form-hint-success")
+  })
+
+  test("renders a custom className", () => {
+    render(<FormHint data-testid="my-form-hint" className="my-custom-class" />)
+    expect(screen.getByTestId("my-form-hint")).toBeInTheDocument()
+    expect(screen.getByTestId("my-form-hint")).toHaveClass("my-custom-class")
+  })
+
+  test("renders all props as passed", () => {
+    render(<FormHint data-testid="23" data-lolol={true} />)
+    expect(screen.getByTestId("23")).toBeInTheDocument()
+    expect(screen.getByTestId("23")).toHaveAttribute("data-lolol")
+  })
+})
diff --git a/packages/ui-components/src/components/FormHintTs/index.ts b/packages/ui-components/src/components/FormHintTs/index.ts
new file mode 100644
index 000000000..1359457dc
--- /dev/null
+++ b/packages/ui-components/src/components/FormHintTs/index.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { FormHint } from "./FormHint.component"
diff --git a/packages/ui-components/src/components/Label/Label.component.js b/packages/ui-components/src/components/Label/Label.component.js
index b56ba65b7..4c155b98c 100644
--- a/packages/ui-components/src/components/Label/Label.component.js
+++ b/packages/ui-components/src/components/Label/Label.component.js
@@ -90,7 +90,7 @@ export const Label = React.forwardRef(
   }
 )
 
-Label.displayName = "Label"
+Label.displayName = "Label (JS)"
 
 Label.propTypes = {
   /** Pass a string of text to be rendered as contents. Required.  */
diff --git a/packages/ui-components/src/components/Label/Label.stories.js b/packages/ui-components/src/components/Label/Label.stories.js
index ee962be90..296ad0720 100644
--- a/packages/ui-components/src/components/Label/Label.stories.js
+++ b/packages/ui-components/src/components/Label/Label.stories.js
@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Label } from "./index.js"
+import { Label } from "./index"
 
 export default {
-  title: "Forms/Label",
+  title: "Forms/Label (JS, deprecated)",
   component: Label,
   argTypes: {},
 }
diff --git a/packages/ui-components/src/components/LabelTs/Label.component.tsx b/packages/ui-components/src/components/LabelTs/Label.component.tsx
new file mode 100644
index 000000000..9768b31d9
--- /dev/null
+++ b/packages/ui-components/src/components/LabelTs/Label.component.tsx
@@ -0,0 +1,109 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+
+const labelstyles = `
+  jn-text-theme-high
+  jn-text-base
+  jn-transform 
+  jn-origin-top-left 
+  jn-transition-all 
+  jn-duration-100 
+  jn-ease-in-out
+  jn-z-10
+`
+
+const floatingStyles = `
+  jn-absolute
+`
+
+const minimizedStyles = `
+  jn-scale-75
+  -jn-translate-y-[0.4375rem]
+`
+
+const requiredstyles = `
+  jn-inline-block
+  jn-w-1
+  jn-h-1
+  jn-rounded-full
+  jn-align-top
+  jn-ml-1
+  jn-mt-2
+  jn-bg-theme-required
+`
+
+const disabledstyles = `
+  jn-opacity-50
+  jn-cursor-not-allowed
+`
+
+/**
+ * A re-usable Label component
+ */
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  (
+    {
+      text = "",
+      htmlFor = undefined,
+      required = false,
+      className = "",
+      disabled = false,
+      floating = false,
+      minimized = false,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    return (
+      <label
+        className={`
+        juno-label 
+        ${labelstyles} 
+        ${floating ? "juno-label-floating " + floatingStyles : ""}
+        ${minimized ? "juno-label-minimized " + minimizedStyles : ""}
+        ${disabled ? "juno-label-disabled " + disabledstyles : ""} 
+        ${className}
+      `}
+        htmlFor={htmlFor}
+        ref={forwardedRef}
+        {...props}
+      >
+        {text}
+        {required ? (
+          <span
+            className={`
+          juno-required 
+          ${requiredstyles}
+          `}
+          ></span>
+        ) : (
+          ""
+        )}
+      </label>
+    )
+  }
+)
+
+Label.displayName = "Label"
+
+export interface LabelProps {
+  /** Pass a string of text to be rendered as contents. Required.  */
+  text?: string
+  /** An Id of an input element to associate the label with */
+  htmlFor?: string
+  /** Required */
+  required?: boolean
+  /** Pass a className */
+  className?: string
+  /** Label for a disabled input */
+  disabled?: boolean
+  /** Whether the label is floating */
+  floating?: boolean
+  /** Whether the label is minimized. Requires `floating` set to TRUE, otherwise it will have no effect. */
+  minimized?: boolean
+}
diff --git a/packages/ui-components/src/components/LabelTs/Label.stories.ts b/packages/ui-components/src/components/LabelTs/Label.stories.ts
new file mode 100644
index 000000000..d3ad6ed8c
--- /dev/null
+++ b/packages/ui-components/src/components/LabelTs/Label.stories.ts
@@ -0,0 +1,32 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Label } from "./index"
+
+export default {
+  title: "Forms/Label",
+  component: Label,
+  argTypes: {},
+}
+
+export const Default = {
+  args: {
+    text: "My Label",
+  },
+}
+
+export const Disabled = {
+  args: {
+    text: "My disabled label",
+    disabled: true,
+  },
+}
+
+export const Required = {
+  args: {
+    text: "My required label",
+    required: true,
+  },
+}
diff --git a/packages/ui-components/src/components/LabelTs/Label.test.tsx b/packages/ui-components/src/components/LabelTs/Label.test.tsx
new file mode 100644
index 000000000..0de041c95
--- /dev/null
+++ b/packages/ui-components/src/components/LabelTs/Label.test.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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, screen } from "@testing-library/react"
+import { Label } from "./index"
+
+describe("Label", () => {
+  test("renders a label with a text as passed", () => {
+    render(<Label text="my-label" />)
+    expect(screen.getByText("my-label")).toBeInTheDocument()
+  })
+
+  test("renders a label for an element with an id as passed", () => {
+    render(<Label text="my-label" htmlFor="my-input" />)
+    expect(screen.getByText("my-label")).toHaveAttribute("for", "my-input")
+  })
+
+  test("renders a disabled label", () => {
+    render(<Label text="my-label" disabled />)
+    expect(screen.getByText("my-label")).toBeInTheDocument()
+    expect(screen.getByText("my-label")).toHaveClass("juno-label-disabled")
+  })
+
+  test("renders a required symbol as passed", () => {
+    render(<Label text="Required Input" required />)
+    expect(document.querySelector(".juno-required")).toBeInTheDocument()
+  })
+
+  test("renders a floating label as passed", () => {
+    render(<Label text="my-label" floating />)
+    expect(screen.getByText("my-label")).toBeInTheDocument()
+    expect(screen.getByText("my-label")).toHaveClass("juno-label-floating")
+  })
+
+  test("renders a minimized floating label as passed", () => {
+    render(<Label text="my-label" floating minimized />)
+    expect(screen.getByText("my-label")).toBeInTheDocument()
+    expect(screen.getByText("my-label")).toHaveClass("juno-label-minimized")
+  })
+
+  test("renders a custom className as passed", () => {
+    render(<Label text="my-label" className="my-custom-class" />)
+    expect(screen.getByText("my-label")).toBeInTheDocument()
+    expect(screen.getByText("my-label")).toHaveClass("my-custom-class")
+  })
+
+  test("renders all props as passed", () => {
+    render(<Label text="my-label" data-lolol="some-props" />)
+    expect(screen.getByText("my-label")).toBeInTheDocument()
+    expect(screen.getByText("my-label")).toHaveAttribute("data-lolol", "some-props")
+  })
+})
diff --git a/packages/ui-components/src/components/LabelTs/index.ts b/packages/ui-components/src/components/LabelTs/index.ts
new file mode 100644
index 000000000..f4e71d6c7
--- /dev/null
+++ b/packages/ui-components/src/components/LabelTs/index.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Label } from "./Label.component"
diff --git a/packages/ui-components/src/components/SecretText/SecretText.component.js b/packages/ui-components/src/components/SecretText/SecretText.component.js
index 311d49528..b26269d64 100644
--- a/packages/ui-components/src/components/SecretText/SecretText.component.js
+++ b/packages/ui-components/src/components/SecretText/SecretText.component.js
@@ -5,7 +5,7 @@
 
 import React, { useEffect, useId, useState } from "react"
 import PropTypes from "prop-types"
-import { Textarea } from "../Textarea/"
+import { Textarea } from "../Textarea/index.js"
 import { ButtonRow } from "../ButtonRow/"
 import { Button } from "../Button/"
 import { FormHint } from "../FormHint/"
diff --git a/packages/ui-components/src/components/TextAreaTs/Textarea.component.tsx b/packages/ui-components/src/components/TextAreaTs/Textarea.component.tsx
new file mode 100644
index 000000000..e135131ce
--- /dev/null
+++ b/packages/ui-components/src/components/TextAreaTs/Textarea.component.tsx
@@ -0,0 +1,290 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect, useMemo, useId, useRef } from "react"
+import { Label } from "../LabelTs/index"
+import { Icon } from "../IconTs/index"
+import { FormHint } from "../FormHintTs/FormHint.component"
+
+const wrapperStyles = `
+  jn-inline-block
+  jn-relative
+`
+
+const textareastyles = `
+  jn-bg-theme-textinput
+  jn-text-theme-textinput
+  jn-border
+  jn-text-base
+  jn-leading-4
+  jn-px-4
+  jn-rounded-3px
+  jn-align-top
+  focus:jn-outline-none
+  focus:jn-ring-2
+  focus:jn-ring-theme-focus
+  disabled:jn-opacity-50
+  disabled:jn-cursor-not-allowed
+`
+
+const defaultborderstyles = `
+  jn-border-theme-textinput-default
+`
+
+const invalidstyles = `
+  jn-border-theme-error
+`
+
+const validstyles = `
+  jn-border-theme-success
+`
+
+const withLabelStyles = `
+  jn-pt-[1.125rem] 
+  jn-pb-1
+`
+
+const noLabelStyles = `
+  jn-py-4
+`
+
+const labelStyles = `
+  jn-pointer-events-none
+  jn-top-2
+  jn-left-[0.9375rem]
+  jn-pr-4
+  jn-bg-theme-textinput
+`
+
+const iconcontainerstyles = `
+  jn-inline-flex
+  jn-absolute
+  jn-top-[.4rem]
+  jn-right-3
+`
+
+const disablediconstyles = `
+  jn-opacity-50
+`
+
+const hintStyles = `
+  jn-mt-0
+`
+
+interface IconsProps {
+  disabled: boolean
+}
+
+/** 
+A controlled Text Input.
+Also covers email, telephone, password, url derivates. 
+*/
+export const Textarea = ({
+  name,
+  value = "",
+  id = "",
+  placeholder = "",
+  disabled = false,
+  readOnly = false,
+  required = false,
+  invalid = false,
+  valid = false,
+  autoFocus = false,
+  className = "",
+  autoComplete = "off",
+  helptext = "",
+  successtext = "",
+  errortext = "",
+  onChange = undefined,
+  onFocus = undefined,
+  onBlur = undefined,
+  label = undefined,
+  width = "full",
+  wrapperClassName = "",
+  ...props
+}: TextareaProps) => {
+  const isNotEmptyString = (str: React.ReactNode | string) => {
+    return !(typeof str === "string" && str.trim().length === 0)
+  }
+
+  const uniqueId = () => "juno-textarea-" + useId()
+
+  const ref = useRef<HTMLTextAreaElement>(null)
+  const [val, setValue] = useState<string>("")
+  const [hasFocus, setFocus] = useState(false)
+  const [isInvalid, setIsInvalid] = useState(false)
+  const [isValid, setIsValid] = useState(false)
+
+  /* Set the focus state variable in case the input was focussed by passing autoFocus, or when the input was rendered and focussed by the user before React started listening to client side events, e.g. when rendering server-side: */
+  useEffect(() => {
+    if (document.hasFocus() && ref.current && ref.current.contains(document.activeElement)) {
+      setFocus(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    setValue(value.toString())
+  }, [value])
+
+  const invalidated = useMemo(
+    () => invalid || (errortext && isNotEmptyString(errortext) ? true : false),
+    [invalid, errortext]
+  )
+  const validated = useMemo(
+    () => valid || (successtext && isNotEmptyString(successtext) ? true : false),
+    [valid, successtext]
+  )
+
+  useEffect(() => {
+    setIsInvalid(invalidated)
+  }, [invalidated])
+
+  useEffect(() => {
+    setIsValid(validated)
+  }, [validated])
+
+  const handleValueChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value)
+    onChange && onChange(event)
+  }
+
+  const handleFocus = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setFocus(true)
+    onFocus && onFocus(event)
+  }
+
+  const handleBlur = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setFocus(false)
+    onBlur && onBlur(event)
+  }
+
+  const Icons = ({ disabled }: IconsProps) => {
+    if (isValid || isInvalid) {
+      return (
+        <div
+          className={`juno-textinput-row-icon-container ${iconcontainerstyles} ${disabled ? disablediconstyles : ""}`}
+        >
+          {isInvalid ? <Icon icon="dangerous" color="jn-text-theme-error" /> : null}
+          {isValid ? <Icon icon="checkCircle" color="jn-text-theme-success" /> : null}
+        </div>
+      )
+    } else {
+      return ""
+    }
+  }
+
+  const theId = id || uniqueId()
+
+  return (
+    <div>
+      <div
+        className={`
+          juno-textarea-wrapper 
+          ${wrapperStyles}
+          ${width == "auto" ? "jn-inline-block" : "jn-block"}
+          ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+          ${wrapperClassName}
+        `}
+      >
+        {label && label.length ? (
+          <Label
+            text={label}
+            htmlFor={theId}
+            className={`${labelStyles}`}
+            disabled={disabled}
+            required={required}
+            floating
+            minimized={placeholder || hasFocus || (val && val.length) ? true : false}
+          />
+        ) : (
+          ""
+        )}
+        <textarea
+          name={name}
+          autoComplete={autoComplete}
+          value={val}
+          id={theId}
+          ref={ref}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={readOnly}
+          autoFocus={autoFocus}
+          onChange={handleValueChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          className={`juno-textarea 
+            ${textareastyles}
+            ${label ? withLabelStyles : noLabelStyles}
+            ${isInvalid ? "juno-textarea-invalid " + invalidstyles : ""} 
+            ${isValid ? "juno-textarea-valid " + validstyles : ""}  
+            ${isValid || isInvalid ? "" : defaultborderstyles} 
+            ${width == "auto" ? "jn-w-auto" : "jn-w-full"}
+            ${className}
+          `}
+          {...props}
+        />
+        <Icons disabled={disabled} />
+      </div>
+      {errortext && isNotEmptyString(errortext) ? (
+        <FormHint text={errortext} variant="error" className={`${hintStyles}`} />
+      ) : (
+        ""
+      )}
+      {successtext && isNotEmptyString(successtext) ? (
+        <FormHint text={successtext} variant="success" className={`${hintStyles}`} />
+      ) : (
+        ""
+      )}
+      {helptext && isNotEmptyString(helptext) ? <FormHint text={helptext} className={`${hintStyles}`} /> : ""}
+    </div>
+  )
+}
+
+type WidthType = "full" | "auto"
+
+export type TextareaProps = {
+  /** Pass a name attribute */
+  name?: string
+  /** The label of the textarea */
+  label?: string
+  /** Pass a value */
+  value?: string | number
+  /** Pass an id */
+  id?: string
+  /** Pass a placeholder */
+  placeholder?: string
+  /** Render a disabled input */
+  disabled?: boolean
+  /** Render a readonly input */
+  readOnly?: boolean
+  /** Whether the field is required */
+  required?: boolean
+  /** Whether the field is invalid */
+  invalid?: boolean
+  /** Whether the field is valid */
+  valid?: boolean
+  /** Whether the field receives autofocus */
+  autoFocus?: boolean
+  /** Pass a classname. The class name is applied to the internal textarea element. */
+  className?: string
+  /** Pass a valid autocomplete value. We do not police validity. */
+  autoComplete?: string
+  /** Pass a change handler */
+  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>
+  /** Pass a focus handler */
+  onFocus?: React.ChangeEventHandler<HTMLTextAreaElement>
+  /** Pass a blur handler */
+  onBlur?: React.ChangeEventHandler<HTMLTextAreaElement>
+  /** A helptext to render to explain meaning and significance of the Textarea */
+  helptext?: React.ReactNode | string
+  /** A text to render when the Textarea was successfully validated */
+  successtext?: React.ReactNode | string
+  /** A text to render when the Textarea has an error or could not be validated */
+  errortext?: React.ReactNode | string
+  /** The width of the textarea. Either 'full' (default) or 'auto'. */
+  width?: WidthType
+  /** Pass a custom className to the wrapping element. This can be useful if you must add styling to the outermost wrapping element of this component, e.g. for positioning. */
+  wrapperClassName?: string
+} & React.HTMLProps<HTMLTextAreaElement>
diff --git a/packages/ui-components/src/components/TextAreaTs/Textarea.stories.tsx b/packages/ui-components/src/components/TextAreaTs/Textarea.stories.tsx
new file mode 100644
index 000000000..352a3fe43
--- /dev/null
+++ b/packages/ui-components/src/components/TextAreaTs/Textarea.stories.tsx
@@ -0,0 +1,98 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { Textarea } from "./index"
+
+export default {
+  title: "Forms/Textarea",
+  component: Textarea,
+  argTypes: {
+    errortext: {
+      control: false,
+    },
+    helptext: {
+      control: false,
+    },
+    successtext: {
+      control: false,
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    placeholder: "Some text here",
+  },
+}
+
+export const WithLabel = {
+  args: {
+    label: "Textarea",
+  },
+}
+
+export const RequiredWithLabel = {
+  args: {
+    label: "Required Textarea",
+    required: true,
+  },
+}
+
+export const Invalid = {
+  args: {
+    invalid: true,
+    placeholder: "Some invalid text here",
+  },
+}
+
+export const Valid = {
+  args: {
+    valid: true,
+    placeholder: "Some valid text here",
+  },
+}
+
+export const Disabled = {
+  args: {
+    disabled: true,
+    placeholder: "A disabled textarea",
+  },
+}
+
+export const Autofocus = {
+  args: {
+    placeholder: "An autofocussing textarea",
+    autoFocus: true,
+  },
+}
+
+export const WithHelpText = {
+  args: {
+    helptext: "This is an explanatory text referring to the input",
+  },
+}
+
+export const WithHelpTextAsNode = {
+  args: {
+    helptext: (
+      <>
+        This is a helptext with a <a href="#">Link</a>
+      </>
+    ),
+  },
+}
+
+export const WithSuccessText = {
+  args: {
+    successtext: "This field is a great success!",
+  },
+}
+
+export const WithErrorText = {
+  args: {
+    errortext: "This field has an error",
+  },
+}
diff --git a/packages/ui-components/src/components/TextAreaTs/Textarea.test.tsx b/packages/ui-components/src/components/TextAreaTs/Textarea.test.tsx
new file mode 100644
index 000000000..15978fd78
--- /dev/null
+++ b/packages/ui-components/src/components/TextAreaTs/Textarea.test.tsx
@@ -0,0 +1,152 @@
+/*
+ * 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, screen, fireEvent } from "@testing-library/react"
+import { Textarea } from "./index"
+
+describe("Textarea", () => {
+  test("renders a native html textarea", () => {
+    render(<Textarea />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+  })
+
+  test("renders a name as passed", () => {
+    render(<Textarea name="my-textarea" />)
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "my-textarea")
+  })
+
+  test("renders text content as passed", () => {
+    render(<Textarea value="Test some text" />)
+    expect(screen.getByRole("textbox")).toHaveTextContent("Test some text")
+  })
+
+  test("renders a label as passed", () => {
+    render(<Textarea label="The Label" id="my-textarea" />)
+    // implicitly test whether the textarea element can be selected via the labels text:
+    expect(screen.getByLabelText("The Label")).toBeInTheDocument()
+    expect(document.querySelector(".juno-label")).toBeInTheDocument()
+    expect(document.querySelector(".juno-label")).toHaveTextContent("The Label")
+  })
+
+  test("renders a Textarea with an id as passed", () => {
+    render(<Textarea id="my-textarea" />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toHaveAttribute("id", "my-textarea")
+  })
+
+  test("renders a Textarea with an auto-generated id if no id is passed", () => {
+    render(<Textarea />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toHaveAttribute("id")
+    expect(screen.getByRole("textbox").getAttribute("id")).toMatch("juno-textarea")
+  })
+
+  test("renders a Textarea with a label associated by an id as passed", () => {
+    render(<Textarea label="My Textarea" id="ta-1" />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toHaveAttribute("id")
+    expect(screen.getByRole("textbox").getAttribute("id")).toMatch("ta-1")
+    expect(screen.getByLabelText("My Textarea")).toBeInTheDocument()
+  })
+
+  test("renders a Textarea with a label associated by an auto-generated id if no id was passed", () => {
+    render(<Textarea label="This is a Textarea" />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByLabelText("This is a Textarea")).toBeInTheDocument()
+  })
+
+  test("renders an invalid textarea as passed", () => {
+    render(<Textarea invalid />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-invalid")
+    expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
+  })
+
+  test("renders a valid textarea as passed", () => {
+    render(<Textarea valid />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-valid")
+    expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
+  })
+
+  test("renders a placeholder as passed", () => {
+    render(<Textarea placeholder="My placeholder" />)
+    expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "My placeholder")
+  })
+
+  test("renders a disabled textarea as passed", () => {
+    render(<Textarea disabled />)
+    expect(screen.getByRole("textbox")).toBeInTheDocument()
+    expect(screen.getByRole("textbox")).toBeDisabled()
+  })
+
+  test("renders autocomplete on as passed", () => {
+    render(<Textarea autoComplete="on" />)
+    expect(screen.getByRole("textbox")).toHaveAttribute("autocomplete", "on")
+  })
+
+  test("renders autofocus as passed", () => {
+    render(<Textarea autoFocus />)
+    expect(screen.getByRole("textbox")).toHaveFocus()
+  })
+
+  test("renders a helptext as passed", () => {
+    render(<Textarea helptext="this is a helptext" />)
+    expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
+    expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-help")
+    expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is a helptext")
+  })
+
+  test("renders a successtext as passed and validates the Element", () => {
+    render(<Textarea successtext="great success!" />)
+    expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
+    expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-success")
+    expect(document.querySelector(".juno-form-hint")).toHaveTextContent("great success!")
+    expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-valid")
+  })
+
+  test("renders an errortext as passed and invalidates the Element", () => {
+    render(<Textarea errortext="this is an error!" />)
+    expect(document.querySelector(".juno-form-hint")).toBeInTheDocument()
+    expect(document.querySelector(".juno-form-hint")).toHaveClass("juno-form-hint-error")
+    expect(document.querySelector(".juno-form-hint")).toHaveTextContent("this is an error!")
+    expect(screen.getByRole("textbox")).toHaveClass("juno-textarea-invalid")
+  })
+
+  test("fires onChange handler as passed", () => {
+    const handleChange = vi.fn()
+    render(<Textarea onChange={handleChange} />)
+    const textarea = screen.getByRole("textbox")
+    fireEvent.change(textarea, { target: { value: "a" } })
+    expect(handleChange).toHaveBeenCalledTimes(1)
+  })
+
+  test("does not fire onChange handler when disabled", () => {
+    const onChangeSpy = vi.fn()
+    render(<Textarea onChange={onChangeSpy} disabled />)
+    screen.getByRole("textbox").click()
+    expect(onChangeSpy).not.toHaveBeenCalled()
+  })
+
+  test("renders a wrapperClassName to the wrapping <div> element", () => {
+    render(<Textarea wrapperClassName="my-wrapper-class" />)
+    expect(document.querySelector(".juno-textarea-wrapper")).toBeInTheDocument()
+    expect(document.querySelector(".juno-textarea-wrapper")).toHaveClass("my-wrapper-class")
+  })
+
+  test("renders a className as passed", () => {
+    render(<Textarea className="my-custom-class" />)
+    expect(screen.getByRole("textbox")).toHaveClass("my-custom-class")
+  })
+
+  test("renders other props as passed", () => {
+    render(<Textarea cols={100} rows={25} minLength={0} maxLength={100} />)
+    expect(screen.getByRole("textbox")).toHaveAttribute("cols", "100")
+    expect(screen.getByRole("textbox")).toHaveAttribute("rows", "25")
+    expect(screen.getByRole("textbox")).toHaveAttribute("minlength", "0")
+    expect(screen.getByRole("textbox")).toHaveAttribute("maxlength", "100")
+  })
+})
diff --git a/packages/ui-components/src/components/TextAreaTs/index.ts b/packages/ui-components/src/components/TextAreaTs/index.ts
new file mode 100644
index 000000000..607d0e06e
--- /dev/null
+++ b/packages/ui-components/src/components/TextAreaTs/index.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Textarea } from "./Textarea.component"
diff --git a/packages/ui-components/src/components/Textarea/Textarea.stories.js b/packages/ui-components/src/components/Textarea/Textarea.stories.js
index 2e49b292c..619cee3be 100644
--- a/packages/ui-components/src/components/Textarea/Textarea.stories.js
+++ b/packages/ui-components/src/components/Textarea/Textarea.stories.js
@@ -7,7 +7,7 @@ import React from "react"
 import { Textarea } from "./index.js"
 
 export default {
-  title: "Forms/Textarea",
+  title: "Forms/Textarea (JS, deprecated)",
   component: Textarea,
   argTypes: {
     errortext: {