feat(ui): add FormattedText component

.changeset/gentle-carrots-talk.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+feat(ui): add FormattedText component

commitlint.config.js

@@ -4,7 +4,7 @@ module.exports = {
     "type-enum": [
       2,
       "always",
-      ["build", "chore", "fix", "feat", "publish", "release", "refactor", "research", "style", "test"],
+      ["build", "chore", "fix", "feat", "merge", "publish", "release", "refactor", "research", "style", "test"],
     ], // Enforces the type to be one of the specified values
     "scope-enum": [
       2,
@@ -24,6 +24,7 @@ module.exports = {
         "juno",
         "k8s",
         "message-provider",
+        "main",
         "npm",
         "oauth",
         "supernova",

packages/ui-components/rollup.config.js

@@ -59,7 +59,10 @@ const plugins = [
     ],
   }),
 
-  nodeResolve(),
+  nodeResolve({
+    browser: true, // Ensure resolution is for browser environment
+    preferBuiltins: false, // Avoid Node.js built-in modules like 'tty'
+  }),
   babel({
     babelHelpers: "bundled",
   }),

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

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import "./formatted-text.scss"
+
+export interface FormattedTextProps {
+  /** Add custom class name */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * A very basic layout container with padding.
+ */
+export const FormattedText = ({
+  className = "", // Default value for className
+  children = null, // Default value for children
+  ...props
+}: FormattedTextProps) => {
+  return (
+    <div className={`formatted-text-container ${className} `} {...props}>
+      {children}
+    </div>
+  )
+}
+
+FormattedText.defaultProps = {
+  className: "",
+  children: null,
+}

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

@@ -0,0 +1,188 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { FormattedText } from "./FormattedText.component"
+import { FormattedTextProps } from "./FormattedText.component"
+
+// Remove the import statement for "ComponentStory"
+export default {
+  title: "Components/FormattedText",
+  component: FormattedText,
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A layout element for styling text content. By default, all texts are displayed with predefined sizes and spacing.",
+      },
+    },
+  },
+}
+
+const Template = (args: FormattedTextProps) => (
+  <FormattedText {...args}>
+    <h1>Headline 1</h1>
+    <h2>Headline 2</h2>
+    <h3>Headline 3</h3>
+    <h4>Headline 4</h4>
+    <h5>Headline 5</h5>
+    <article>
+      <h2>h2: Lorem ipsum dolor sit amet</h2>
+      <h3>h3: Sunt in culpa qui officia</h3>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint:
+      </p>
+      <ul>
+        <li>
+          Consectetur adipiscing elit
+          <a href="https://ui.juno.global.cloud.sap" rel="nofollow">
+            Link
+          </a>
+        </li>
+        <li>Incididunt ut labore et dolore magna aliqua.</li>
+        <li>Nostrud exercitation ullamco laboris</li>
+        <li>Mollit anim id est laborum</li>
+        <li>Nostrud exercitation ullamco laboris</li>
+        <li>Ponsectetur adipiscing elit, sed do eiusmod</li>
+        <li>Gullamco laboris nisi ut aliquip ex ea commodo</li>
+        <li>Consectetur adipiscing elit</li>
+        <li>
+          Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+          cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </li>
+      </ul>
+      <div>
+        <h2>Concepts</h2>
+        <table>
+          <tr>
+            <th>Book Name</th>
+            <th>Author Name</th>
+            <th>Genre</th>
+          </tr>
+          <tr>
+            <td>The Book Thief</td>
+            <td>Markus Zusak</td>
+            <td>Historical Fiction</td>
+          </tr>
+          <tr>
+            <td>The Cruel Prince</td>
+            <td>Holly Black</td>
+            <td>Fantasy</td>
+          </tr>
+          <tr>
+            <td>The Silent Patient</td>
+            <td> Alex Michaelides</td>
+            <td>Psychological Fiction</td>
+          </tr>
+        </table>
+      </div>
+      <div>
+        <h3>Alerts</h3>
+      </div>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{" "}
+        <code>Some code</code>.
+      </p>
+      <h2>h2: Lorem ipsum dolor sit amet</h2>
+      <h4>h4: Labels</h4>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{" "}
+        <code>Some code</code> and
+        <code>more code</code> in <code>code code code ...</code>.
+      </p>
+    </article>
+    <article>
+      <h2>h2: Lorem ipsum dolor sit amet</h2>
+      <h3>h3: Sunt in culpa qui officia</h3>
+      <p>
+        Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <ol>
+        <li>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </p>
+        </li>
+        <li>
+          <p>
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </li>
+        <li>
+          <p>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+          </p>
+        </li>
+        <li>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </p>
+        </li>
+      </ol>
+      <h3>h3: Sunt in culpa qui officia</h3>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <h4>h4: Nisi ut aliquip</h4>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <h4>h4: Commodo consequat</h4>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <h5>h5: Duis aute irure dolor in reprehenderit</h5>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </article>
+  </FormattedText>
+)
+
+export const Basic = {
+  render: Template,
+
+  parameters: {
+    docs: {
+      description: {
+        story: "A basic FormattedTextcomponent with various text elements.",
+      },
+    },
+  },
+
+  args: {},
+}

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

@@ -0,0 +1,25 @@
+/*
+ * 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 { describe, it, expect } from "vitest" // Import expect from vitest
+import { FormattedText } from "./index"
+
+describe("FormattedText", () => {
+  it("renders a custom className as passed", () => {
+    render(<FormattedText className="my-class" data-testid="my-pagination" />)
+    const element = screen.getByTestId("my-pagination")
+    expect(element).not.toBeNull() // Check if element exists
+    expect(element.className).toContain("my-class") // Check class name contains "my-class"
+  })
+
+  it("renders all props as passed", () => {
+    render(<FormattedText data-testid="my-pagination" data-lolol="123-456" />)
+    const element = screen.getByTestId("my-pagination")
+    expect(element).not.toBeNull() // Check if element exists
+    expect(element.getAttribute("data-lolol")).toBe("123-456") // Check attribute value
+  })
+})